/* Подключает локальный шрифт Manrope для латиницы */
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("./fonts/manrope/manrope-latin-wght-normal.woff2") format("woff2");
    unicode-range:
        U+0000-00FF,
        U+0131,
        U+0152-0153,
        U+02BB-02BC,
        U+02C6,
        U+02DA,
        U+02DC,
        U+0304,
        U+0308,
        U+0329,
        U+2000-206F,
        U+20AC,
        U+2122,
        U+2191,
        U+2193,
        U+2212,
        U+2215,
        U+FEFF,
        U+FFFD;
}

/* Подключает локальный шрифт Manrope для кириллицы */
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("./fonts/manrope/manrope-cyrillic-wght-normal.woff2") format("woff2");
    unicode-range:
        U+0400-04FF,
        U+0500-052F,
        U+1C80-1C88,
        U+1D2B,
        U+1D78,
        U+2DE0-2DFF,
        U+A640-A69F,
        U+FE2E-FE2F;
}

* {
    box-sizing: border-box; /* padding и border входят в итоговую ширину/высоту */
}

:root {
    /* Размеры */
    --site-width: 1200px; /* максимальная ширина основного контента */
    --side-padding: 24px; /* боковой отступ контейнеров */

    /* Светлая тема */
    --page-bg: #F7F8FC; /* основной фон страницы */
    --text-main: #10213F; /* основной цвет текста */
    --text-dark: #111827; /* тёмный цвет для крупных заголовков */
    --text-muted: rgba(17, 24, 39, 0.72); /* приглушённый текст */

    --pastel-red: #EFA4A4; /* пастельный красный */
    --pastel-blue: #9DBBEF; /* пастельный синий */
    --red-text: #3A1111; /* текст на красном фоне */
    --blue-text: #10213F; /* текст на синем фоне */

    --white: #FFFFFF; /* белый цвет */
    --dark: #111827; /* почти чёрный цвет */

    /* Поверхности */
    --header-bg: rgba(255, 255, 255, 0.50); /* фон шапки вверху */
    --header-bg-scrolled: rgba(255, 255, 255, 0.72); /* фон шапки после прокрутки */
    --glass-bg: rgba(255, 255, 255, 0.35); /* полупрозрачный фон карточек */

    /* Скругления */
    --radius-sm: 12px; /* малое скругление */
    --radius-md: 18px; /* среднее скругление */
    --radius-lg: 24px; /* крупное скругление */
    --radius-pill: 999px; /* форма капсулы */

    /* Тени */
    --shadow-soft: 0 12px 34px rgba(17, 24, 39, 0.12); /* мягкая тень */
    --shadow-button: 0 14px 34px rgba(90, 120, 180, 0.18); /* тень кнопки */

    /* Анимации */
    --transition-fast: 0.18s ease; /* быстрая анимация */
    --transition-normal: 0.28s ease; /* обычная анимация */

    --page-gradient:
    radial-gradient(circle at 58% 16%, rgba(239, 164, 164, 0.34) 0 0, transparent 28%),
    radial-gradient(circle at 18% 34%, rgba(157, 187, 239, 0.34) 0 0, transparent 30%),
    radial-gradient(circle at 82% 28%, rgba(157, 187, 239, 0.28) 0 0, transparent 26%),
    radial-gradient(circle at 68% 48%, rgba(236, 230, 160, 0.28) 0 0, transparent 24%),
    radial-gradient(circle at 22% 62%, rgba(239, 164, 164, 0.22) 0 0, transparent 28%),
    radial-gradient(circle at 74% 78%, rgba(157, 187, 239, 0.30) 0 0, transparent 30%),
    radial-gradient(circle at 12% 90%, rgba(236, 230, 160, 0.38) 0 0, transparent 26%),
    linear-gradient(180deg, #F5F6FF 0%, #F7F8FC 48%, #F3F8FF 100%);
}

/* Заготовка для будущей тёмной темы.
   Она не включится сама, пока Вы не добавите data-theme="dark" на html/body. */
[data-theme="dark"] {
    color-scheme: dark; /* сообщает браузеру, что активна тёмная тема */

    --page-bg: #111827; /* основной тёмный фон */
    --text-main: #EEF4FF; /* основной текст */
    --text-dark: #F7F8FC; /* крупные заголовки */
    --text-muted: rgba(238, 244, 255, 1.0); /* приглушённый текст */

    --pastel-red: #C66B6B; /* плотный пастельный красный */
    --pastel-blue: #5F82C8; /* плотный пастельный синий */
    --red-text: #FFECEC; /* текст на красном */
    --blue-text: #EEF4FF; /* текст на синем */

    --white: #F8FAFC; /* не чисто белый, мягче для тёмной темы */
    --dark: #080D18; /* глубокий тёмный для toast */

    --header-bg: rgba(15, 23, 42, 0.58); /* фон шапки */
    --header-bg-scrolled: rgba(15, 23, 42, 0.82); /* фон шапки при скролле */
    --glass-bg: rgba(15, 23, 42, 0.36); /* стеклянные поверхности */

    --shadow-soft: 0 14px 38px rgba(0, 0, 0, 0.34); /* тень для тёмной темы */
    --shadow-button: 0 14px 34px rgba(95, 130, 200, 0.18); /* тень кнопок */

    --page-gradient:
        radial-gradient(circle at 58% 16%, rgba(198, 107, 107, 0.18) 0 0, transparent 28%),
        radial-gradient(circle at 18% 34%, rgba(95, 130, 200, 0.22) 0 0, transparent 30%),
        radial-gradient(circle at 82% 28%, rgba(95, 130, 200, 0.16) 0 0, transparent 26%),
        radial-gradient(circle at 68% 48%, rgba(191, 176, 105, 0.11) 0 0, transparent 24%),
        radial-gradient(circle at 22% 62%, rgba(198, 107, 107, 0.12) 0 0, transparent 28%),
        radial-gradient(circle at 74% 78%, rgba(95, 130, 200, 0.18) 0 0, transparent 30%),
        radial-gradient(circle at 12% 90%, rgba(191, 176, 105, 0.12) 0 0, transparent 26%),
        linear-gradient(180deg, #0F172A 0%, #111827 48%, #0B1220 100%);
}

html {
    scroll-behavior: smooth; /* плавная прокрутка по якорям */
    scroll-padding-top: 120px; /* запас сверху, чтобы header не закрывал секции */
}

body {
    margin: 0;
    font-family: "Manrope", Arial, sans-serif;
    background: var(--page-gradient); /* пастельный размытый фон страницы */
    background-attachment: fixed; /* фон не дёргается при прокрутке */
    background-size: cover; /* фон покрывает экран */
    color: var(--text-main);
}

a {
    color: inherit; /* ссылка берёт цвет родителя */
    text-decoration: none; /* убирает подчёркивание */
}

button {
    font: inherit; /* кнопка наследует шрифт сайта */
}

img {
    display: block; /* убирает нижний зазор у картинок */
    max-width: 100%; /* картинка не выходит за родителя */
    height: auto; /* сохраняет пропорции */
}

.container {
    width: 100%; /* занимает доступную ширину */
    max-width: var(--site-width); /* ограничивает ширину */
    margin: 0 auto; /* центрирует контейнер */
    padding: 0 var(--side-padding); /* боковые отступы */
}

/* -------------------------
   2. Header
   ------------------------- */

.header {
    position: fixed; /* шапка закреплена в окне браузера */
    top: 24px; /* отступ сверху */
    left: 50%; /* левая граница ставится в центр */
    transform: translateX(-50%); /* возвращает шапку на половину ширины назад */

    width: calc(100% - 48px); /* ширина с боковыми отступами */
    max-width: 1000px; /* максимальная ширина шапки */
    min-height: 64px; /* минимальная высота */
    padding: 12px 24px; /* внутренние отступы */

    display: flex; /* элементы в одну строку */
    align-items: center; /* выравнивание по вертикали */

    background: var(--header-bg); /* полупрозрачный фон */
    border-radius: var(--radius-sm); /* скругление */
    z-index: 100; /* шапка выше секций */

    transition: transform var(--transition-normal), opacity var(--transition-normal), background var(--transition-normal), box-shadow var(--transition-normal); /* плавное изменение */
    will-change: transform, opacity; /* подсказка браузеру для анимации */
}

.header-scrolled {
    background: var(--header-bg-scrolled); /* фон плотнее после прокрутки */
    box-shadow: var(--shadow-soft); /* появляется тень */
    backdrop-filter: blur(12px); /* размытие фона за шапкой */
    -webkit-backdrop-filter: blur(12px); /* поддержка Safari */
}

.header-hidden {
    transform: translate(-50%, calc(-100% - 32px)); /* уводит шапку вверх */
    opacity: 0; /* скрывает шапку */
    pointer-events: none; /* отключает клики по скрытой шапке */
}

.logo {
    position: relative; /* позволяет управлять слоем */
    z-index: 2; /* логотип выше абсолютного меню */

    display: flex; /* картинка и текст рядом */
    align-items: center; /* центрирование по вертикали */
    gap: 14px; /* расстояние между картинкой и текстом */

    font-weight: 700; /* жирность логотипа */
    line-height: 1; /* компактная высота строк */
}

.logo-img {
    width: 48px; /* ширина логотипа */
    height: 48px; /* высота логотипа */
}

.logo-text {
    display: flex; /* строки логотипа друг под другом */
    flex-direction: column; /* направление сверху вниз */
    justify-content: center; /* центрирует строки по высоте логотипа */

    font-size: 19px; /* было 16px, увеличено примерно на 20% */
    font-weight: 400; /* обычная жирность */
    line-height: 1; /* компактные строки */
    color: var(--text-dark); /* цвет текста логотипа */
}

.nav {
    position: absolute; /* меню центрируется относительно всей шапки */
    left: 50%; /* старт в центре */
    transform: translateX(-50%); /* точное центрирование */

    display: flex; /* ссылки в ряд */
    align-items: center; /* выравнивание по вертикали */
    gap: 32px; /* расстояние между пунктами */
}

.nav a {
    position: relative; /* база для линии снизу */
    font-size: 19px; /* увеличено примерно на 20% */
    font-weight: 500; /* средняя плотность текста */
    transition: color var(--transition-fast); /* плавная смена цвета */
}

.nav a::after {
    content: ""; /* создаёт декоративную линию */
    position: absolute; /* линия относительно ссылки */
    left: 0; /* начало линии */
    bottom: -6px; /* отступ линии вниз */

    width: 100%; /* ширина равна ссылке */
    height: 2px; /* толщина линии */

    background: var(--pastel-blue); /* цвет линии */
    border-radius: var(--radius-pill); /* скругление линии */

    transform: scaleX(0); /* скрывает линию */
    transform-origin: center; /* раскрытие от центра */
    transition: transform var(--transition-fast); /* плавное раскрытие */
}

.nav a:hover {
    color: #5F82C8; /* синий цвет при наведении */
}

.nav a:hover::after {
    transform: scaleX(1); /* показывает линию */
}

.theme-toggle {
    margin-left: auto; /* прижимает переключатель и аккаунт вправо */
    margin-right: 12px; /* расстояние до кнопки аккаунта */

    width: 44px; /* ширина кнопки */
    height: 44px; /* высота кнопки */

    position: relative; /* база для иконок */
    display: flex; /* центрирует содержимое */
    align-items: center; /* центр по вертикали */
    justify-content: center; /* центр по горизонтали */

    border: none; /* убирает стандартную рамку */
    border-radius: 50%; /* делает кнопку круглой */

    background: rgba(157, 187, 239, 0.55); /* пастельно-синий фон */
    color: var(--blue-text); /* цвет иконки */

    cursor: pointer; /* курсор-рука */
    box-shadow: 0 8px 20px rgba(90, 120, 180, 0.14); /* мягкая тень */

    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast); /* плавные эффекты */
}

.theme-toggle:hover {
    transform: translateY(-2px); /* слегка поднимает кнопку */
    background: rgba(157, 187, 239, 0.78); /* фон плотнее */
    box-shadow: 0 12px 28px rgba(90, 120, 180, 0.20); /* тень сильнее */
}

.theme-toggle:active {
    transform: translateY(0) scale(0.96); /* эффект нажатия */
}

.theme-toggle:focus-visible {
    outline: 3px solid rgba(157, 187, 239, 0.85); /* рамка для клавиатуры */
    outline-offset: 4px; /* отступ рамки */
}

.theme-toggle-icon {
    position: absolute; /* иконки лежат друг на друге */

    width: 24px; /* ширина SVG */
    height: 24px; /* высота SVG */

    object-fit: contain; /* SVG не искажается */
    pointer-events: none; /* иконка не мешает клику по кнопке */

    transition:
        opacity var(--transition-fast),
        transform var(--transition-fast); /* плавная смена иконок */
}

.theme-toggle-sun {
    opacity: 1; /* солнце видно в светлой теме */
    transform: scale(1) rotate(0deg);
}

.theme-toggle-moon {
    opacity: 0; /* луна скрыта в светлой теме */
    transform: scale(0.7) rotate(-20deg);
}

/* Вид кнопки в тёмной теме */
[data-theme="dark"] .theme-toggle {
    background: rgba(198, 107, 107, 0.62); /* пастельно-красный фон */
    color: var(--red-text); /* цвет иконки */
}

[data-theme="dark"] .theme-toggle-sun {
    opacity: 0; /* солнце скрыто в тёмной теме */
    transform: scale(0.7) rotate(20deg);
}

[data-theme="dark"] .theme-toggle-moon {
    opacity: 1; /* луна видна в тёмной теме */
    transform: scale(1) rotate(0deg);
}

.auth-wrap {
    position: relative; /* база для уведомления */
    margin-left: 0; /* вправо теперь двигает .theme-toggle */
}

.auth {
    padding: 10px 22px; /* было 8px 18px, увеличено примерно на 20% */
    border: none; /* убирает рамку браузера */
    border-radius: var(--radius-pill); /* капсула */

    background: rgba(239, 164, 164, 0.75); /* пастельно-красный фон */
    color: var(--red-text); /* тёмный текст */
    cursor: pointer; /* курсор-рука */

    font-size: 17px; /* было 14px, увеличено примерно на 20% */
    font-weight: 600; /* плотность текста */
    line-height: 1; /* компактная высота */

    box-shadow: 0 8px 20px rgba(120, 60, 60, 0.12); /* лёгкая тень */
    transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.auth:hover {
    transform: translateY(-2px); /* поднимает кнопку */
    background: rgba(239, 164, 164, 0.95); /* усиливает фон */
    box-shadow: 0 12px 28px rgba(120, 60, 60, 0.18); /* усиливает тень */
}

.auth:active {
    transform: translateY(0) scale(0.98); /* эффект нажатия */
}

.auth:focus-visible {
    outline: 3px solid rgba(239, 164, 164, 0.85); /* рамка для клавиатуры */
    outline-offset: 4px; /* отступ рамки */
}

.auth-toast {
    position: absolute; /* уведомление относительно .auth-wrap */
    top: calc(100% + 12px); /* под кнопкой */
    right: 0; /* прижато к правому краю */

    padding: 12px 18px; /* внутренние отступы */
    border-radius: var(--radius-pill); /* капсула */

    background: var(--dark); /* тёмный фон */
    color: var(--white); /* белый текст */

    font-size: 14px; /* размер текста */
    font-weight: 600; /* плотность текста */
    white-space: nowrap; /* без переноса */

    opacity: 0; /* скрыто по умолчанию */
    pointer-events: none; /* не мешает кликам */
    transform: translateY(-10px) scale(0.96); /* стартовая позиция */
    transform-origin: top right; /* точка вылета */
    z-index: 300; /* выше шапки */

    transition: opacity 0.22s ease, transform 0.22s ease; /* плавное появление */
}

.auth-toast::before {
    content: ""; /* декоративный ромб */
    position: absolute; /* позиция относительно уведомления */
    top: -6px; /* над уведомлением */
    right: 22px; /* ближе к кнопке */

    width: 12px; /* ширина ромба */
    height: 12px; /* высота ромба */

    background: var(--dark); /* цвет как у уведомления */
    transform: rotate(45deg); /* квадрат становится ромбом */
}

.auth-toast-visible {
    opacity: 1; /* показывает уведомление */
    transform: translateY(0) scale(1); /* конечная позиция */
}

/* -------------------------
   3. Hero
   ------------------------- */

/* Дальний фон приветственного экрана */
.hero-main-back-layer {
    position: absolute; /* слой внутри hero-screen */
    inset: 0; /* занимает весь первый экран */

    z-index: 0; /* самый дальний слой */
    pointer-events: none; /* не мешает кликам */

    overflow: hidden; /* обрезает картинку внутри hero */
}

/* Плавный переход фоновой картинки к следующим блокам */
.hero-main-back-layer::after {
    content: none;
}

/* Тёмная тема: переход в тёмный фон */
[data-theme="dark"] .hero-main-back-layer::after {
    background: linear-gradient(
        180deg,
        rgba(17, 24, 39, 0) 0%,
        rgba(17, 24, 39, 0.72) 62%,
        rgba(17, 24, 39, 1) 100%
    );
}

.hero-main-back {
    position: absolute; /* картинка лежит внутри hero */
    inset: 0; /* занимает весь hero */

    width: 100%; /* на всю ширину */
    height: 100%; /* на всю высоту */

    object-fit: cover; /* заполняет экран */
    object-position: center; /* центрирует картинку */

    opacity: 0.10; /* непрозрачность 10% */

    z-index: 1; /* ниже остальных hero-блоков */
    pointer-events: none; /* не мешает кликам */

    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 1) 68%,
        rgba(0, 0, 0, 0.65) 80%,
        rgba(0, 0, 0, 0.22) 92%,
        rgba(0, 0, 0, 0) 100%
    ); /* нижний край картинки уходит в прозрачность */

    mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 1) 68%,
        rgba(0, 0, 0, 0.65) 80%,
        rgba(0, 0, 0, 0.22) 92%,
        rgba(0, 0, 0, 0) 100%
    );

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.hero-screen {
    position: relative; /* база для фоновой PNG-картинки */
    isolation: isolate; /* изолирует слои внутри hero */
    overflow: hidden; /* не даёт фону вылезать за экран */

    min-height: 100dvh; /* высота первого экрана */
    width: 100%; /* полная ширина */
    padding: 112px 24px 48px; /* место под fixed-header */

    display: flex; /* центрирование содержимого */
    align-items: center; /* центр по вертикали */
    justify-content: center; /* центр по горизонтали */

    background: transparent; /* старый SVG-фон отключён */
}

.hero-bg-layer {
    position: absolute; /* слой лежит внутри hero-screen */
    left: 50%; /* центр по горизонтали */
    top: 50%; /* центр по вертикали */
    transform: translate(-50%, -50%); /* точное центрирование */

    width: min(1480px, calc(100vw - 24px), calc((100dvh - 24px) * 1.2));
    aspect-ratio: 1200 / 1000; /* пропорции Ваших PNG */

    z-index: 0; /* фон ниже текста */
    pointer-events: none; /* фон не мешает кликам */
}

.hero-bg {
    position: absolute; /* обе картинки лежат в одной области */
    inset: 0; /* занимают всю область .hero-bg-layer */

    width: 100%; /* ширина равна контейнеру */
    height: 100%; /* высота равна контейнеру */

    object-fit: fill; /* PNG уже готов под нужную форму */
    object-position: center; /* центрирует изображение */

    pointer-events: none; /* картинка не мешает кликам */
}

.hero-bg-light {
    display: block; /* светлый фон по умолчанию */
}

.hero-bg-dark {
    display: none; /* тёмный фон скрыт по умолчанию */
}

[data-theme="dark"] .hero-bg-light {
    display: none; /* светлый фон скрыт в тёмной теме */
}

[data-theme="dark"] .hero-bg-dark {
    display: block; /* тёмный фон показан в тёмной теме */
}

.hero-content {
    position: relative; /* поднимает контент над PNG-фоном */
    z-index: 1; /* текст и кнопка выше фона */

    display: flex; /* элементы колонкой */
    flex-direction: column; /* сверху вниз */
    align-items: center; /* по центру */
    justify-content: center; /* центр внутри блока */
    text-align: center; /* текст по центру */
}

.main-title {
    margin: 0 0 12px; /* нижний отступ */
    font-size: clamp(48px, 8.75vw, 80px); /* было 38-64px, увеличено примерно на 25% */
    line-height: 1; /* компактная высота */
    color: var(--text-main); /* цвет заголовка */
}

.sub-title {
    margin: 0; /* убирает стандартные отступы */
    font-size: clamp(23px, 3.75vw, 35px); /* было 18-28px, увеличено примерно на 25% */
    line-height: 1.2; /* расстояние между строками */
    color: var(--text-main); /* цвет подзаголовка */
}


/* -------------------------
   4. Features + news
   ------------------------- */

.features-section {
    --features-height: 700px; /* было 650px, увеличили место под хексагоны */
    padding: 100px 0;
}

.features-workspace {
    width: 100%; /* занимает всю доступную ширину */
    max-width: 1288px; /* 600 + 40 + 600 + боковые padding 48 */
    margin: 0 auto; /* центрирует секцию */
    padding: 0 var(--side-padding); /* боковые отступы */

    display: grid; /* включает сетку */
    grid-template-columns: 600px 600px; /* две одинаковые колонки */
    gap: 40px; /* расстояние между блоками */
    align-items: stretch; /* одинаковая высота колонок */
    justify-content: center; /* центрирует всю сетку */
}

.features-left {
    width: 100%; /* занимает ширину колонки */
    max-width: 600px; /* максимум исходного макета */
}

.features-layout {
    --hex-shift-x: 4%; /* общий сдвиг хексагонов и текста вправо */

    position: relative; /* база для absolute-элементов */
    width: 100%; /* масштабируется вместе с колонкой */
    aspect-ratio: 600 / 700; /* сохраняет пропорции макета */
    isolation: isolate; /* создаёт отдельный слой для фона и хексагонов */
}

.features-layout::before {
    content: ""; /* создаёт декоративный фон */
    position: absolute; /* размещает фон внутри блока хексагонов */

    top: -18px; /* фон начинается выше */
    right: 10px; /* ширину не трогаем */
    bottom: -42px; /* фон заканчивается ниже */
    left: 0; /* ширину не трогаем */

    background: rgba(157, 187, 239, 0.50); /* светло-голубой фон с 50% прозрачностью */
    border-radius: 32px; /* мягкие скругления */
    filter: blur(14px); /* размывает края */

    z-index: 0; /* кладёт фон под хексагоны */
    pointer-events: none; /* фон не мешает наведению */
}

.hex-card {
    position: absolute; /* позволяет точно поставить хексагон */
    width: 45.833%; /* 275px от 600px */
    height: 39.285%; /* 275px от 700px */
    z-index: 2; /* хексагоны выше размытого фона */
}

.hex-img {
    width: 100%; /* SVG занимает весь блок */
    height: 100%; /* SVG занимает всю высоту */
}

.hex-top {
    left: var(--hex-shift-x);
    top: 0;
}

.hex-center {
    left: calc(23% + var(--hex-shift-x));
    top: 29%;
}

.hex-bottom-left {
    left: var(--hex-shift-x);
    top: 58%;
}

.hex-bottom-right {
    left: calc(46% + var(--hex-shift-x));
    top: 58%;
}

/* Фото-хексагон */
.hex-photo {
    cursor: pointer; /* показывает, что на блок можно навести */

    background-repeat: no-repeat; /* картинка не повторяется */
    background-position: center; /* картинка стоит по центру */
    background-size: cover; /* картинка заполняет хексагон */

    transition:
        transform 0.25s ease,
        filter 0.25s ease; /* плавное увеличение и тень */

    -webkit-mask-image: url("images/hexagon.svg"); /* SVG используется как маска */
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-image: url("images/hexagon.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

/* Текст внутри хексагона */
.hex-photo::after {
    content: ""; /* текст задаётся отдельно для каждого хексагона */

    position: absolute; /* накладывает текст поверх картинки */
    inset: 0; /* растягивает слой на весь хексагон */

    display: flex; /* центрирует текст */
    align-items: center; /* центр по вертикали */
    justify-content: center; /* центр по горизонтали */

    padding: 24px; /* отступы, чтобы текст не прилипал к краям */
    text-align: center; /* строки по центру */

    background: rgba(17, 24, 39, 0.793); /* затемнение картинки под текстом */
    color: #FFFFFF; /* белый текст */

    font-size: 24px; /* размер текста */
    font-weight: 600; /* жирный текст */
    line-height: 1.15; /* расстояние между строками */
    letter-spacing: 0.8px; /* немного раздвигает буквы */
    white-space: pre-line; /* разрешает переносы через \A */

    opacity: 0; /* по умолчанию текст скрыт */
    transform: scale(0.96); /* стартовое состояние чуть меньше */

    transition:
        opacity 0.25s ease,
        transform 0.25s ease; /* плавное появление */

    pointer-events: none; /* слой не мешает наведению */
}

/* Появление текста при наведении */
.hex-photo:hover::after {
    opacity: 1; /* показывает текст */
    transform: scale(1); /* возвращает нормальный размер */
}

/* Верхний хексагон — казна */
.hex-gov {
    background-image: url("images/gov.png");
}

/* Центральный хексагон — как играть */
.hex-how {
    background-image: url("images/how.png");
}

/* Нижний левый хексагон — секреты */
.hex-secret {
    background-image: url("images/secret.png");
}

/* Нижний правый хексагон — навыки */
.hex-skills {
    background-image: url("images/skills.png");
}

/* Верхний хексагон */
.hex-gov::after {
    content: "УПРАВЛЯЙ\AИМПЕРИЕЙ";
}

/* Центральный хексагон */
.hex-how::after {
    content: "КАК\AИГРАТЬ";
}

/* Левый нижний хексагон */
.hex-secret::after {
    content: "ИССЛЕДУЙ\AТАЙНЫ";
}

/* Правый нижний хексагон */
.hex-skills::after {
    content: "ПРОКАЧИВАЙ\AСКИЛЛЫ";
}


/* Наведение на хексагон */
.hex-photo:hover {
    transform: scale(1.12); /* увеличивает хексагон */
    filter: drop-shadow(0 14px 24px rgba(17, 24, 39, 0.22)); /* мягкая тень */
}


.features-text {
    position: absolute; /* точное размещение */
    left: calc(47% + var(--hex-shift-x)); /* сдвигает текст вправо вместе с хексагонами */
    top: 11%; /* высоту не меняем */
    width: calc(50% - var(--hex-shift-x)); /* чтобы текст не вылезал за правый край */
    z-index: 3; /* текст выше фона и хексагонов */
}

.features-text p {
    margin: 0; /* убирает отступы абзацев */
    font-size: clamp(13px, 3.3vw, 20px); /* адаптивный размер */
    font-weight: 400; /* обычная жирность */
    line-height: 1.35; /* расстояние между строками */
    letter-spacing: 0px; /* чуть плотнее буквы */
    color: var(--text-muted); /* приглушённый цвет */
    text-transform: uppercase; /* верхний регистр */
    z-index: 3; /* текст выше фона и хексагонов */
}

.features-right {
    height: var(--features-height); /* высота как у левой композиции */
    display: flex; /* удобно растягивать панель */
    align-items: stretch; /* панель на всю высоту */
    justify-content: center; /* центрирование */
}

.news-panel {
    position: relative; /* база для размытого слоя */
    z-index: 0; /* создаёт контекст слоя */

    width: 100%; /* занимает колонку */
    max-width: none; /* ограничение ширины */
    height: 100%; /* высота правой колонки */
    padding: 0 24px 32px; /* внутренние отступы */
    border-radius: var(--radius-md); /* скругление */

    display: flex; /* элементы колонкой */
    flex-direction: column; /* сверху вниз */
    gap: 12px; /* расстояние между заголовком и карточками */
    overflow: visible; /* не режет размытый фон */
}

.news-panel::before {
    content: ""; /* декоративный фон */
    position: absolute; /* слой внутри панели */

    top: -18px; /* фон начинается выше */
    right: 8px; /* ширину не трогаем */
    bottom: -28px; /* фон заканчивается ниже */
    left: 8px; /* ширину не трогаем */

    border-radius: var(--radius-lg); /* скругление пятна */
    background: rgba(255, 206, 206, 0.76); /* пастельно-красное пятно */
    filter: blur(10px); /* размытие */
    z-index: -1; /* под содержимым */
}

.news-title {
    margin: 0 0 12px; /* отступ снизу */
    text-align: center; /* центрирование текста */
    font-size: 36px; /* размер заголовка */
    line-height: 1; /* компактная высота */
    color: var(--text-muted); /* приглушённый цвет */
}

.news-card {
    flex: 1; /* карточки равномерно занимают высоту */
    padding: 18px 20px; /* внутренние отступы */
    background: var(--pastel-red); /* фон карточки */
    color: var(--red-text); /* текст на красном фоне */
    border-radius: var(--radius-sm); /* скругление */
}

.news-card h3 {
    margin: 0 0 8px; /* отступ под заголовком */
    font-size: 18px; /* размер заголовка новости */
}

.news-card p {
    margin: 0; /* убирает отступ абзаца */
    font-size: 14px; /* размер текста новости */
    line-height: 1.4; /* читаемая высота строки */
}

/* -------------------------
   5. Online + map + socials
   ------------------------- */

.online-section {
    padding: 100px 24px; /* отступы секции */
}

.online-card {
    position: relative; /* база для слоёв */
    overflow: visible; /* не режет элементы */

    width: 100%; /* занимает доступную ширину */
    max-width: var(--site-width); /* ограничение ширины */
    min-height: 1150px; /* высота блока на ПК */
    margin: 0 auto; /* центрирование */
    padding: 48px 0 56px; /* внутренние отступы */

    display: flex; /* элементы вертикально */
    flex-direction: column; /* сверху вниз */
    align-items: center; /* по центру */

    background: transparent; /* убирает белый фон блока с картой */
border-radius: 0; /* скругление больше не нужно, потому что фона нет */
}

.online-stat {
    position: relative; /* нужен z-index */
    z-index: 3; /* поверх карты */

    display: flex; /* число и подпись рядом */
    align-items: center; /* центрирование по вертикали */
    justify-content: center; /* центрирование по горизонтали */
    gap: 24px; /* расстояние между числом и текстом */

    transform: translateY(50%); /* визуально опускает блок */
}

.online-number {
    font-size: 180px; /* большое число */
    font-weight: 700; /* жирный текст */
    line-height: 1; /* убирает лишнюю высоту */
    color: var(--text-muted); /* приглушённый цвет */
}

.online-text {
    display: flex; /* строки внутри блока */
    flex-direction: column; /* сверху вниз */
    gap: 8px; /* расстояние между строками */

    font-size: 65px; /* крупный текст */
    font-weight: 700; /* жирный текст */
    line-height: 1; /* компактные строки */
    color: var(--text-muted); /* приглушённый цвет */
}

.map-wrapper {
    width: 1200px; /* ширина области карты */
    max-width: 100%; /* защита от вылета */
    height: 900px; /* высота области карты */

    display: flex; /* центрирование карты */
    align-items: center; /* центр по вертикали */
    justify-content: center; /* центр по горизонтали */
    overflow: hidden; /* на ПК оставляет прежнюю аккуратную обрезку */

    -webkit-mask-image: radial-gradient(ellipse 600px 450px at center, black 0%, black 70%, transparent 100%); /* маска Safari */
    mask-image: radial-gradient(ellipse 600px 450px at center, black 0%, black 70%, transparent 100%); /* мягкое исчезновение краёв */
}

.online-map {
    width: 1200px; /* ширина карты */
    height: 1200px; /* высота карты */
    max-width: none; /* отменяет глобальное ограничение */
    object-fit: fill; /* оставляет прежний вид на ПК */
}

.social-links {
    position: relative; /* нужен z-index */
    z-index: 3; /* поверх карты */

    display: flex; /* кнопки в ряд */
    justify-content: center; /* центрирование */
    gap: 28px; /* расстояние между кнопками */

    transform: translateY(-50%); /* поднимает блок ссылок */
}

.social-button {
    width: 320px; /* ширина кнопки */
    height: 86px; /* высота кнопки */
    padding: 8px 26px 8px 8px; /* внутренние отступы */

    display: flex; /* иконка и текст рядом */
    align-items: center; /* центрирование по вертикали */
    gap: 18px; /* расстояние между иконкой и текстом */

    border-radius: var(--radius-pill); /* капсула */
    background: linear-gradient(90deg, rgba(210, 220, 238, 0.78), rgba(222, 194, 222, 0.78)); /* мягкий фон */
    color: rgba(17, 24, 39, 0.68); /* цвет текста */

    font-size: 25px; /* размер текста */
    font-weight: 400; /* обычная жирность */
    line-height: 1; /* компактная высота */
    white-space: nowrap; /* без переноса */

    box-shadow: 0 14px 34px rgba(120, 100, 140, 0.14); /* мягкая тень */
    transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast); /* плавные эффекты */
}

.social-button:hover {
    transform: translateY(-6px); /* поднимает кнопку */
    background: linear-gradient(90deg, rgba(var(--brand-rgb), 0.42) 0%, rgba(222, 194, 222, 0.90) 45%, rgba(210, 220, 238, 0.95) 100%); /* левая часть в цвет бренда */
    color: rgba(17, 24, 39, 0.82); /* текст контрастнее */
    box-shadow: 0 20px 48px rgba(var(--brand-rgb), 0.22); /* цветная тень */
}

.social-button:active {
    transform: translateY(-2px) scale(0.98); /* нажатие */
}

.social-button:focus-visible {
    outline: 3px solid rgba(157, 187, 239, 0.85); /* рамка для клавиатуры */
    outline-offset: 4px; /* отступ рамки */
}

.social-button-telegram {
    --brand-rgb: 53, 169, 220; /* цвет Telegram */
}

.social-button-youtube {
    --brand-rgb: 255, 0, 0; /* цвет YouTube */
}

.social-button-discord {
    --brand-rgb: 88, 101, 242; /* цвет Discord */
}

.social-icon {
    position: relative; /* база для двух иконок */
    width: 70px; /* размер круга */
    height: 70px; /* размер круга */
    flex: 0 0 70px; /* не даёт кругу сжиматься */

    display: flex; /* центрирование SVG */
    align-items: center; /* центр по вертикали */
    justify-content: center; /* центр по горизонтали */

    border-radius: 50%; /* круг */
    background: var(--white); /* белый фон */
    box-shadow: 0 8px 18px rgba(17, 24, 39, 0.08); /* лёгкая тень */
    transition: background var(--transition-fast), box-shadow var(--transition-fast); /* плавная смена */
}

.social-icon img {
    position: absolute; /* иконки лежат друг над другом */
    width: 48px; /* ширина иконки */
    height: 48px; /* высота иконки */
    transition: opacity var(--transition-fast); /* плавное появление */
}

.icon-normal {
    opacity: 1; /* обычная иконка видна */
}

.icon-hover {
    opacity: 0; /* белая иконка скрыта */
}

.social-button:hover .icon-normal {
    opacity: 0; /* обычная иконка исчезает */
}

.social-button:hover .icon-hover {
    opacity: 1; /* белая иконка появляется */
}

.social-button-telegram:hover .social-icon {
    background: #35A9DC; /* круг Telegram */
}

.social-button-youtube:hover .social-icon {
    background: #FF0000; /* круг YouTube */
}

.social-button-discord:hover .social-icon {
    background: #5865F2; /* круг Discord */
}

.social-label {
    display: block; /* текст кнопки */
    letter-spacing: -0.6px; /* чуть плотнее буквы */
}

/* -------------------------
   6. Обычные секции
   ------------------------- */

.section {
    padding: 80px 0; /* вертикальные отступы */
}

.section-title,
.section h2 {
    margin: 0 0 24px; /* отступ под заголовком */
    font-size: clamp(28px, 4vw, 42px); /* адаптивный размер */
    line-height: 1.1; /* компактная высота */
}

.section p,
.section li,
figcaption {
    font-size: clamp(15px, 1.8vw, 18px); /* адаптивный размер текста */
    line-height: 1.5; /* читаемая высота строки */
}

.section ol {
    margin: 0; /* убирает внешний отступ */
    padding-left: 24px; /* место под номера */
}

figure {
    margin: 0; /* убирает стандартный отступ */
}

figure img {
    width: 100%; /* картинка занимает ширину родителя */
    max-width: 600px; /* ограничивает ширину */
    border-radius: var(--radius-md); /* скругление */
}

figcaption {
    margin-top: 10px; /* отступ от картинки */
    color: rgba(17, 24, 39, 0.65); /* приглушённый цвет */
}

/* -------------------------
   6. Footer
   ------------------------- */

.site-footer {
    position: relative; /* база для декоративного фона */
    margin-top: 80px; /* отступ от предыдущего блока */
    padding: 64px 24px 28px; /* внутренние отступы */

    color: var(--text-main); /* основной цвет текста */
    overflow: hidden; /* скрывает лишнее размытие */
}

.site-footer::before {
    content: ""; /* создаёт декоративный фон */
    position: absolute; /* размещает фон внутри футера */
    inset: 24px 24px 0; /* размеры фона */

    background: linear-gradient(
        135deg,
        rgba(157, 187, 239, 0.42),
        rgba(239, 164, 164, 0.34)
    ); /* мягкий сине-красный фон */

    border-radius: 32px 32px 0 0; /* скругляет верхние углы */
    filter: blur(10px); /* размывает края */
    z-index: 0; /* фон под контентом */
}

.footer-inner {
    position: relative; /* поднимает контент над фоном */
    z-index: 1; /* контент выше декоративного слоя */

    width: 100%; /* занимает всю ширину */
    max-width: var(--site-width); /* ограничивает ширину */
    margin: 0 auto; /* центрирует футер */

    display: grid; /* раскладывает колонки */
    grid-template-columns: 1.3fr 0.8fr 1fr 1fr; /* 4 блока футера */
    gap: 42px; /* расстояние между колонками */
    align-items: start; /* выравнивает сверху */
}

.footer-brand {
    max-width: 420px; /* ограничивает ширину описания */
}

.footer-logo {
    display: inline-flex; /* логотип и текст рядом */
    align-items: center; /* центрирует по вертикали */
    gap: 14px; /* расстояние между картинкой и текстом */
}

.footer-logo-img {
    width: 54px; /* ширина логотипа */
    height: 54px; /* высота логотипа */
}

.footer-logo-text {
    display: flex; /* строки логотипа друг под другом */
    flex-direction: column; /* сверху вниз */

    font-size: 18px; /* размер текста */
    font-weight: 500; /* плотность текста */
    line-height: 1; /* компактные строки */
    color: var(--text-dark); /* цвет текста */
}

.footer-description {
    margin: 22px 0 0; /* отступ сверху */
    max-width: 170px; /* ограничивает длину строки */

    font-size: 16px; /* размер текста */
    line-height: 1.55; /* читаемая высота строки */
    color: var(--text-muted); /* приглушённый текст */
}

.footer-column {
    display: flex; /* элементы колонкой */
    flex-direction: column; /* сверху вниз */
    align-items: flex-start; /* выравнивает слева */
    gap: 12px; /* расстояние между ссылками */
}

.footer-title {
    margin: 0 0 8px; /* отступ снизу */
    font-size: 16px; /* размер заголовка */
    font-weight: 700; /* жирность */
    line-height: 1; /* компактная строка */
    color: var(--text-dark); /* цвет заголовка */
}

.footer-column a {
    font-size: 16px; /* размер ссылок */
    color: var(--text-muted); /* приглушённый цвет */
    transition: color var(--transition-fast); /* плавная смена цвета */
}

.footer-column a:hover {
    color: #5F82C8; /* синий цвет при наведении */
}

.footer-bottom {
    position: relative; /* поднимает над фоном */
    z-index: 1; /* выше декоративного слоя */

    width: 100%; /* занимает ширину */
    max-width: var(--site-width); /* ограничивает ширину */
    margin: 48px auto 0; /* отступ сверху */
    padding-top: 22px; /* отступ от линии */

    display: flex; /* разделяет текст и документы */
    align-items: flex-start; /* выравнивает блоки по верхнему краю */
    justify-content: space-between; /* разносит текст влево, документы вправо */
    gap: 24px; /* расстояние между блоками */

    border-top: 1px solid rgba(17, 24, 39, 0.12); /* тонкая линия */
    text-align: left; /* юридический текст выравнивается слева */
}

.footer-legal-text {
    display: flex; /* ставит строки друг под другом */
    flex-direction: column; /* вертикальное расположение */
    align-items: flex-start; /* прижимает текст к левому краю */
    gap: 6px; /* расстояние между строками */
}

.footer-bottom p {
    margin: 0; /* убирает стандартный отступ */
    font-size: 14px; /* размер текста */
    line-height: 1.45; /* делает две строки читабельнее */
    color: rgba(17, 24, 39, 0.58); /* приглушённый цвет */
}

.footer-legal-links {
    display: flex; /* ставит ссылки друг под другом */
    flex-direction: column; /* вертикальное расположение */
    align-items: flex-end; /* прижимает ссылки к правому краю */
    gap: 10px; /* расстояние между документами */
    text-align: right; /* текст ссылок выравнивается справа */
    white-space: nowrap; /* не ломает короткие названия на несколько строк */
}

.footer-legal-links a {
    font-size: 14px; /* размер ссылок как у нижнего текста */
    font-weight: 600; /* чуть выделяет документы */
    line-height: 1.3; /* компактная высота строки */
    color: var(--text-muted); /* основной цвет ссылок */
    transition: color var(--transition-fast); /* плавная смена цвета */
}

.footer-legal-links a:hover {
    color: #5F82C8; /* синий цвет при наведении */
}

.footer-links {
    display: flex; /* включает flex */
    flex-direction: column; /* ставит ссылки столбиком */
    align-items: flex-start; /* прижимает ссылки к левому краю */
    gap: 10px; /* расстояние между ссылками */
}

.footer-links a {
    display: block; /* каждая ссылка занимает отдельную строку */

    font-size: 16px; /* размер текста */
    font-weight: 500; /* плотность текста */
    line-height: 1.2; /* высота строки */
    color: var(--text-muted); /* приглушённый цвет */

    transition: color var(--transition-fast), transform var(--transition-fast); /* плавное наведение */
}

.footer-links a:hover {
    color: #5F82C8; /* синий цвет при наведении */
    transform: translateX(4px); /* лёгкий сдвиг вправо */
}

.footer-server-text {
    margin: 0; /* убирает стандартный отступ */

    font-size: 16px; /* размер текста */
    font-weight: 500; /* плотность текста */
    line-height: 1.45; /* читаемая высота строки */
    color: var(--text-muted); /* приглушённый цвет */
}

.footer-server-text span {
    color: var(--text-dark); /* выделяет сам IP */
    font-weight: 700; /* делает IP заметнее */
}

/* -------------------------
   7. Адаптив
   ------------------------- */

@media (max-width: 1050px) {
    .features-workspace {
        grid-template-columns: 1fr; /* одна колонка */
        gap: 48px; /* расстояние между блоками */
    }

    .features-left {
        justify-self: center; /* центрирует хексагоны */
    }

    .features-right {
        width: 100%; /* правая часть на всю ширину */
        height: auto; /* высота по содержимому */
    }

    .news-panel {
        min-height: 650px; /* сохраняет высоту на планшете */
    }

    .online-number {
        font-size: 120px; /* уменьшает число */
    }

    .online-text {
        font-size: 42px; /* уменьшает подпись */
    }

    .social-button {
        width: 260px; /* уменьшает кнопки */
        font-size: 21px; /* уменьшает текст */
    }
}

@media (max-width: 900px) {
    .header {
        min-height: auto; /* высота по содержимому */
        padding: 12px 16px; /* меньше внутренние отступы */
        flex-wrap: wrap; /* элементы могут переноситься */
        gap: 12px; /* расстояние между строками */
    }

    .nav {
        position: static; /* возвращает меню в поток */
        order: 3; /* меню после логотипа и кнопки */
        width: 100%; /* на всю ширину */
        transform: none; /* отключает старое центрирование */

        justify-content: center; /* центрирует пункты */
        flex-wrap: wrap; /* перенос пунктов */
        gap: 16px; /* меньше расстояние */
    }

    .nav a {
        font-size: 17px; /* компактнее пункты */
    }

    .map-wrapper {
        width: 100%; /* карта не выходит за экран */
        height: auto; /* высота считается от ширины */
        aspect-ratio: 1 / 1; /* квадратная область под квадратную карту */
        overflow: visible; /* не режет карту по краям */
        -webkit-mask-image: none; /* на телефоне края не скрываются маской */
        mask-image: none; /* на телефоне края не скрываются маской */
    }

    .online-map {
        width: 100%; /* карта сжимается по ширине экрана */
        height: 100%; /* занимает квадратную область */
        max-width: 100%; /* защита от переполнения */
        object-fit: contain; /* показывает карту целиком без обрезки */
    }

    .social-links {
        width: 100%; /* блок ссылок не шире экрана */
        padding: 0 16px; /* внутренний отступ, чтобы кнопки не липли к краю */
        flex-wrap: wrap; /* кнопки переносятся, если не помещаются */
        transform: translateY(-20%); /* мягкое наложение на карту без обрезки */
    }

    .social-button {
        flex: 1 1 220px; /* кнопки сжимаются и переносятся */
        width: auto; /* ширина считается flex-ом */
        max-width: 320px; /* не раздувает кнопку слишком широко */
        justify-content: flex-start; /* иконка остаётся слева */
    }

    .footer-inner {
        grid-template-columns: 1fr 1fr; /* 4 блока становятся сеткой 2x2 */
        gap: 36px; /* расстояние между блоками */
    }

    .footer-brand {
        max-width: none; /* бренд занимает доступную ширину */
    }
}

@media (max-width: 700px) {
    :root {
        --side-padding: 16px; /* меньше боковой отступ */
    }

    .online-section {
        padding: 56px 16px; /* меньше отступы */
    }

    .online-card {
        min-height: 760px; /* меньше высота */
        border-radius: var(--radius-md); /* меньше скругление */
    }

    .online-stat {
        flex-direction: column; /* число сверху */
        gap: 8px; /* меньше расстояние */
        transform: translateY(30%); /* меньше смещение */
    }

    .online-number {
        font-size: clamp(64px, 18vw, 110px); /* адаптивное число */
    }

    .online-text {
        align-items: center; /* центрирует строки */
        text-align: center; /* текст по центру */
        font-size: clamp(28px, 9vw, 44px); /* адаптивная подпись */
    }

    .map-wrapper {
        width: min(100%, 420px); /* на узком телефоне карта становится компактнее */
    }

    .social-links {
        width: 100%; /* на всю ширину */
        padding: 0 16px; /* боковой отступ */
        flex-wrap: wrap; /* перенос кнопок */
        transform: translateY(-30%); /* меньше смещение */
    }

    .social-button {
        flex: 1 1 220px; /* гибкая ширина */
        width: auto; /* ширина считается flex-ом */
        justify-content: flex-start; /* иконка слева */
    }
}

@media (max-width: 620px) {
    .features-section {
        padding: 64px 0; /* меньше вертикальные отступы */
    }

    .features-workspace {
        gap: 32px; /* меньше расстояние между блоками */
    }

    .features-left {
        max-width: 100%; /* на всю ширину */
    }

    .features-text p {
        font-size: clamp(10px, 3.4vw, 14px); /* меньше текст */
        letter-spacing: -0.3px; /* меньше сжатие букв */
    }

    .news-panel {
        min-height: auto; /* высота по содержимому */
        padding: 0 14px 24px; /* компактнее */
    }

    .news-title {
        font-size: 28px; /* меньше заголовок */
    }

    .news-card {
        flex: none; /* не растягивается по высоте */
        padding: 16px; /* компактнее карточка */
    }

    .site-footer {
        margin-top: 56px; /* меньше отступ сверху */
        padding: 48px 16px 24px; /* компактнее футер */
    }

    .site-footer::before {
        inset: 16px 16px 0; /* фон ближе к краям */
        border-radius: 24px 24px 0 0; /* меньше скругление */
    }

    .footer-inner {
        grid-template-columns: 1fr; /* все блоки идут столбиком */
        gap: 32px; /* расстояние между блоками */
    }

    .footer-description {
        font-size: 15px; /* меньше описание */
    }

    .footer-bottom {
        margin-top: 36px; /* меньше отступ */
        flex-direction: column; /* текст и документы становятся друг под другом */
        align-items: flex-start; /* всё прижимается к левому краю */
        gap: 18px; /* расстояние между текстом и документами */
    }

    .footer-legal-links {
        align-items: flex-start; /* ссылки прижимаются к левому краю */
        text-align: left; /* ссылки читаются как обычный список */
        white-space: normal; /* разрешает перенос на узких экранах */
    }
}

@media (max-width: 520px) {
    .header {
        top: 12px; /* меньше отступ сверху */
        width: calc(100% - 24px); /* меньше боковые отступы */
        padding: 10px 12px; /* компактнее шапка */
    }

    .logo-img {
        width: 40px; /* меньше логотип */
        height: 40px; /* меньше логотип */
    }

    .logo-text {
        font-size: 17px; /* меньше текст логотипа */
    }

    .auth {
        padding: 8px 14px; /* меньше кнопка */
        font-size: 16px; /* меньше текст */
    }

    .nav {
        gap: 10px; /* меньше расстояние */
    }

    .nav a {
        font-size: 14px; /* компактные ссылки */
    }

    .hero-screen {
        padding-inline: 16px; /* меньше боковой отступ */
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto; /* отключает плавную прокрутку */
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important; /* почти отключает анимации */
        animation-duration: 0.01ms !important; /* почти отключает анимации */
        animation-iteration-count: 1 !important; /* не зацикливает анимации */
    }
}

@media (max-width: 900px) {
    .footer-inner {
        grid-template-columns: 1fr 1fr; /* две колонки */
        gap: 36px; /* меньше расстояние */
    }

    .footer-brand {
        grid-column: 1 / -1; /* бренд на всю ширину */
    }
}

@media (max-width: 620px) {
    .site-footer {
        margin-top: 56px; /* меньше отступ сверху */
        padding: 48px 16px 24px; /* компактнее футер */
    }

    .site-footer::before {
        inset: 16px 16px 0; /* фон ближе к краям */
        border-radius: 24px 24px 0 0; /* меньше скругление */
    }

    .footer-inner {
        grid-template-columns: 1fr; /* одна колонка */
        gap: 32px; /* расстояние между блоками */
    }

    .footer-description {
        font-size: 15px; /* меньше описание */
    }

    .footer-bottom {
        margin-top: 36px; /* меньше отступ */
        flex-direction: column; /* текст и документы становятся друг под другом */
        align-items: flex-start; /* всё прижимается к левому краю */
        gap: 18px; /* расстояние между текстом и документами */
    }

    .footer-legal-links {
        align-items: flex-start; /* ссылки прижимаются к левому краю */
        text-align: left; /* ссылки читаются как обычный список */
        white-space: normal; /* разрешает перенос на узких экранах */
    }
}

/* -------------------------
   Dark theme polish
   ------------------------- */

/* Логотип и меню */
[data-theme="dark"] .logo-text,
[data-theme="dark"] .footer-logo-text,
[data-theme="dark"] .footer-title,
[data-theme="dark"] .footer-server-text span {
    color: var(--text-dark); /* светлый текст в тёмной теме */
}

[data-theme="dark"] .nav a:hover,
[data-theme="dark"] .footer-links a:hover,
[data-theme="dark"] .footer-column a:hover {
    color: #9DBBEF; /* мягкий синий hover */
}

/* Кнопка аккаунта */
[data-theme="dark"] .auth {
    background: rgba(198, 107, 107, 0.72); /* плотный пастельный красный */
    color: var(--red-text); /* светлый текст */
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24); /* тень для тёмной темы */
}

[data-theme="dark"] .auth:hover {
    background: rgba(198, 107, 107, 0.92); /* плотнее при наведении */
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.32); /* сильнее тень */
}

/* Переключатель темы */
[data-theme="dark"] .theme-toggle {
    background: rgba(95, 130, 200, 0.52); /* синий переключатель */
    color: #EEF4FF; /* светлая иконка */
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24); /* тёмная тень */
}

[data-theme="dark"] .theme-toggle:hover {
    background: rgba(95, 130, 200, 0.76); /* плотнее при наведении */
}

/* Фон под хексагонами */
[data-theme="dark"] .features-layout::before {
    background: rgba(95, 130, 200, 0.26); /* приглушённый синий фон */
    filter: blur(16px); /* чуть мягче */
}

/* Текст рядом с хексагонами */
[data-theme="dark"] .features-text p {
    color: rgba(238, 244, 255, 0.70); /* читаемый светлый текст */
}

/* Затемнение хексагонов при наведении */
[data-theme="dark"] .hex-photo::after {
    background: rgba(8, 13, 24, 0.78); /* глубокое затемнение */
    color: #EEF4FF; /* светлый текст */
}

/* Фон новостей */
[data-theme="dark"] .news-panel::before {
    background: rgba(198, 107, 107, 0.24); /* мягкое красное пятно */
    filter: blur(14px); /* аккуратное размытие */
}

/* Карточки новостей */
[data-theme="dark"] .news-card {
    background: rgba(198, 107, 107, 0.82); /* плотный пастельный красный */
    color: #FFECEC; /* светлый текст */
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18); /* тень карточки */
}

/* Онлайн */
[data-theme="dark"] .online-number,
[data-theme="dark"] .online-text {
    color: rgba(238, 244, 255, 0.74); /* светлый приглушённый текст */
}

/* Кнопки соцсетей */
[data-theme="dark"] .social-button {
    background: linear-gradient(
        90deg,
        rgba(95, 130, 200, 0.28),
        rgba(198, 107, 107, 0.18)
    ); /* тёмный мягкий градиент */

    color: rgba(238, 244, 255, 0.78); /* светлый текст */
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24); /* тёмная тень */
}

[data-theme="dark"] .social-button:hover {
    background: linear-gradient(
        90deg,
        rgba(var(--brand-rgb), 0.46) 0%,
        rgba(95, 130, 200, 0.26) 55%,
        rgba(198, 107, 107, 0.20) 100%
    ); /* hover в цвет бренда */

    color: #EEF4FF; /* текст ярче */
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.34); /* тень сильнее */
}

[data-theme="dark"] .social-icon {
    background: rgba(238, 244, 255, 0.92); /* мягкий светлый круг */
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24); /* тёмная тень */
}

/* Футер */
[data-theme="dark"] .site-footer::before {
    background: linear-gradient(
        135deg,
        rgba(95, 130, 200, 0.24),
        rgba(198, 107, 107, 0.18)
    ); /* тёмная версия футера */
}

[data-theme="dark"] .footer-bottom {
    border-top-color: rgba(238, 244, 255, 0.14); /* светлая линия */
}

[data-theme="dark"] .footer-bottom p {
    color: rgba(238, 244, 255, 0.54); /* приглушённый нижний текст */
}

[data-theme="dark"] .footer-legal-links a {
    color: rgba(238, 244, 255, 0.68); /* ссылки на документы в тёмной теме */
}

/* Toast */
[data-theme="dark"] .auth-toast,
[data-theme="dark"] .start-toast {
    background: #080D18; /* глубокий фон уведомлений */
    color: #EEF4FF; /* светлый текст */
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38); /* тень */
}

[data-theme="dark"] .auth-toast::before,
[data-theme="dark"] .start-toast::before {
    background: #080D18; /* ромб того же цвета */
}

/* -------------------------
   8. News carousel + article modal
   ------------------------- */

/* Финальная раскладка: новости сверху, хексагоны ниже */
.features-workspace {
    max-width: 1288px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: initial;
    gap: 72px;
}

.features-right {
    order: 1;
    width: 100%;
    height: auto;
    display: block;
}

.features-left {
    order: 2;
    width: 100%;
    max-width: none;
}

/* Новости */
.news-panel {
    position: relative;
    z-index: 0;

    width: 100%;
    max-width: 1200px;
    height: auto;
    min-height: auto;
    margin: 0 auto;
    padding: 32px 28px 40px;

    display: block;
    border-radius: 34px;
    overflow: visible;
}

.news-panel::before {
    content: "";
    position: absolute;
    inset: 0;

    border-radius: 34px;
    background: rgba(255, 206, 206, 0.42);
    filter: blur(18px);
    z-index: -1;
    pointer-events: none;
}

.news-heading-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 28px;
}

.news-title {
    margin: 0;
    text-align: center;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1;
    color: var(--text-muted);
}

.news-arrow {
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 50%;
    background: rgba(157, 187, 239, 0.52);
    color: var(--blue-text);
    cursor: pointer;

    font-size: 42px;
    line-height: 1;
    font-weight: 400;

    box-shadow: 0 10px 24px rgba(90, 120, 180, 0.15);
    transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.news-arrow:hover {
    transform: translateY(-2px);
    background: rgba(157, 187, 239, 0.78);
    box-shadow: 0 14px 32px rgba(90, 120, 180, 0.22);
}

.news-arrow:active {
    transform: translateY(0) scale(0.96);
}

.news-arrow:focus-visible {
    outline: 3px solid rgba(157, 187, 239, 0.85);
    outline-offset: 4px;
}

.news-carousel {
    display: grid;
    grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.2fr) minmax(0, 0.84fr);
    align-items: center;
    gap: 24px;
}

.news-carousel-leaving-next .news-slot-center .news-card-image-link {
    animation: newsLeaveCenterToLeft 170ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.news-carousel-leaving-next .news-slot-right .news-card-image-link {
    animation: newsLeaveRightToCenter 170ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.news-carousel-leaving-prev .news-slot-center .news-card-image-link {
    animation: newsLeaveCenterToRight 170ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.news-carousel-leaving-prev .news-slot-left .news-card-image-link {
    animation: newsLeaveLeftToCenter 170ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.news-carousel-entering-next .news-slot-left .news-card-image-link {
    animation: newsEnterLeftFromCenter 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.news-carousel-entering-next .news-slot-center .news-card-image-link {
    animation: newsEnterCenterFromRight 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.news-carousel-entering-next .news-slot-right .news-card-image-link {
    animation: newsEnterRightFromEdge 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.news-carousel-entering-prev .news-slot-left .news-card-image-link {
    animation: newsEnterLeftFromEdge 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.news-carousel-entering-prev .news-slot-center .news-card-image-link {
    animation: newsEnterCenterFromLeft 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.news-carousel-entering-prev .news-slot-right .news-card-image-link {
    animation: newsEnterRightFromCenter 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes newsLeaveCenterToLeft {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    to {
        opacity: 0.82;
        transform: translateX(-18%) scale(0.94);
    }
}

@keyframes newsLeaveRightToCenter {
    from {
        opacity: 0.72;
        transform: translateX(0) scale(0.88);
    }

    to {
        opacity: 0.92;
        transform: translateX(-18%) scale(0.96);
    }
}

@keyframes newsLeaveCenterToRight {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    to {
        opacity: 0.82;
        transform: translateX(18%) scale(0.94);
    }
}

@keyframes newsLeaveLeftToCenter {
    from {
        opacity: 0.72;
        transform: translateX(0) scale(0.88);
    }

    to {
        opacity: 0.92;
        transform: translateX(18%) scale(0.96);
    }
}

@keyframes newsEnterLeftFromCenter {
    from {
        opacity: 1;
        transform: translateX(44%) scale(1);
    }

    to {
        opacity: 0.72;
        transform: translateX(0) scale(0.88);
    }
}

@keyframes newsEnterCenterFromRight {
    from {
        opacity: 0.72;
        transform: translateX(34%) scale(0.88);
        filter: saturate(0.9);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: saturate(1);
    }
}

@keyframes newsEnterRightFromEdge {
    from {
        opacity: 0;
        transform: translateX(18%) scale(0.84);
    }

    to {
        opacity: 0.72;
        transform: translateX(0) scale(0.88);
    }
}

@keyframes newsEnterLeftFromEdge {
    from {
        opacity: 0;
        transform: translateX(-18%) scale(0.84);
    }

    to {
        opacity: 0.72;
        transform: translateX(0) scale(0.88);
    }
}

@keyframes newsEnterCenterFromLeft {
    from {
        opacity: 0.72;
        transform: translateX(-34%) scale(0.88);
        filter: saturate(0.9);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: saturate(1);
    }
}

@keyframes newsEnterRightFromCenter {
    from {
        opacity: 1;
        transform: translateX(-44%) scale(1);
    }

    to {
        opacity: 0.72;
        transform: translateX(0) scale(0.88);
    }
}

@keyframes newsMobileFade {
    from {
        opacity: 0.35;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .news-carousel-leaving-next .news-card-image-link,
    .news-carousel-leaving-prev .news-card-image-link,
    .news-carousel-entering-next .news-card-image-link,
    .news-carousel-entering-prev .news-card-image-link {
        animation: none;
    }
}

.news-slot {
    min-width: 0;
}

.news-card-image-link {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    overflow: hidden;

    border-radius: 17px;
    background: rgba(17, 24, 39, 0.12);
    box-shadow: 0 14px 34px rgba(17, 24, 39, 0.16);

    transition: transform var(--transition-normal), opacity var(--transition-normal), box-shadow var(--transition-normal), filter var(--transition-normal);
}

.news-card-image-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.news-slot-side .news-card-image-link {
    border-radius: 13px;
}

.news-slot-side .news-card-image-link {
    opacity: 0.72;
    transform: scale(0.88);
    filter: saturate(0.9);
}

.news-slot-center .news-card-image-link {
    opacity: 1;
    transform: scale(1);
    box-shadow:
        0 22px 54px rgba(17, 24, 39, 0.18),
        0 0 34px rgba(239, 164, 164, 0.52); /* красное свечение центральной новости */
}

.news-card-image-link:hover {
    opacity: 1;
    transform: scale(1.03);
    filter: saturate(1.05) brightness(1.03);
}

.news-slot-center .news-card-image-link:hover {
    box-shadow:
        0 26px 64px rgba(17, 24, 39, 0.18),
        0 0 54px rgba(239, 164, 164, 0.82); /* усиление свечения при наведении */
    filter: saturate(1.12) brightness(1.06);
}

.news-slot-side .news-card-image-link:hover {
    transform: scale(0.92);
}

.news-card-image-link:focus-visible {
    outline: 3px solid rgba(157, 187, 239, 0.9);
    outline-offset: 5px;
}

.news-card-placeholder {
    width: 100%;
    aspect-ratio: 2 / 1;
}

.news-empty {
    display: none;
    margin: 18px 0 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 18px;
}

.news-panel.news-panel-empty .news-carousel,
.news-panel.news-panel-empty .news-arrow {
    display: none;
}

.news-panel.news-panel-empty .news-empty {
    display: block;
}

/* Старую композицию хексагонов оставляем, но масштабируем на всю рабочую область */
.features-layout {
    --hex-shift-x: 4%;

    position: relative;
    display: block;
    width: 100%;
    max-width: 1100px;
    aspect-ratio: 600 / 700;
    min-height: 0;
    margin: 0 auto;
    padding: 0;
    isolation: isolate;
}

.features-layout::before {
    content: "";
    position: absolute;
    top: -28px;
    right: -28px;
    bottom: -48px;
    left: -28px;

    background: rgba(157, 187, 239, 0.50);
    border-radius: 42px;
    filter: blur(16px);
    z-index: 0;
    pointer-events: none;
}

.hex-card {
    position: absolute;
    width: 45.833%;
    height: 39.285%;
    z-index: 2;
}

.hex-top {
    left: var(--hex-shift-x);
    top: 0;
}

.hex-center {
    left: calc(23% + var(--hex-shift-x));
    top: 29%;
}

.hex-bottom-left {
    left: var(--hex-shift-x);
    top: 58%;
}

.hex-bottom-right {
    left: calc(46% + var(--hex-shift-x));
    top: 58%;
}

.features-text {
    position: absolute;
    left: calc(47% + var(--hex-shift-x));
    top: 11%;
    width: calc(50% - var(--hex-shift-x));
    z-index: 3;
    display: block;
    text-align: left;
}

.features-text p {
    margin: 0;
    font-size: clamp(20px, 2.4vw, 34px);
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0;
    color: var(--text-muted);
    text-transform: uppercase;
}

.hex-photo:hover {
    transform: scale(1.12);
    filter: drop-shadow(0 14px 24px rgba(17, 24, 39, 0.22));
}

/* Модальное окно статьи */
.article-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;

    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-normal);
}

.article-modal.article-modal-visible {
    opacity: 1;
    pointer-events: auto;
}

.article-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 13, 24, 0.66);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.article-modal-card {
    position: relative;
    z-index: 1;

    width: min(980px, 100%);
    max-height: min(88dvh, 920px);
    overflow: auto;

    border-radius: 32px;
    background: rgba(247, 248, 252, 0.94);
    color: var(--text-main);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34);

    transform: translateY(18px) scale(0.98);
    transition: transform var(--transition-normal);
}

.article-modal-visible .article-modal-card {
    transform: translateY(0) scale(1);
}

.article-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;

    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;

    background: rgba(8, 13, 24, 0.74);
    color: #EEF4FF;
    cursor: pointer;

    font-size: 30px;
    line-height: 1;
}

.article-media {
    width: 100%;
    background: rgba(17, 24, 39, 0.12);
}

.article-media img,
.article-media iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    border: none;
    object-fit: cover;
}

.article-body {
    padding: clamp(24px, 4vw, 48px);
}

.article-date {
    margin: 0 0 10px;
    color: var(--text-muted);
    font-size: 15px;
}

.article-title {
    margin: 0 0 24px;
    color: var(--text-dark);
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.05;
}

.article-content {
    color: var(--text-main);
    font-size: 18px;
    line-height: 1.65;
}

.article-content h1,
.article-content h2,
.article-content h3 {
    color: var(--text-dark);
    line-height: 1.15;
}

.article-content h1 {
    font-size: 34px;
}

.article-content h2 {
    font-size: 28px;
}

.article-content h3 {
    font-size: 23px;
}

.article-content a {
    color: #5F82C8;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.article-content pre {
    overflow: auto;
    padding: 18px;
    border-radius: 18px;
    background: rgba(17, 24, 39, 0.08);
}

.article-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.article-content blockquote {
    margin: 20px 0;
    padding-left: 18px;
    border-left: 4px solid var(--pastel-blue);
    color: var(--text-muted);
}

.article-content table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
}

.article-content th,
.article-content td {
    padding: 10px 12px;
    border: 1px solid rgba(17, 24, 39, 0.14);
}

body.article-open {
    overflow: hidden;
}

[data-theme="dark"] .news-panel::before {
    background: rgba(198, 107, 107, 0.24);
    filter: blur(18px);
}

[data-theme="dark"] .news-arrow {
    background: rgba(95, 130, 200, 0.52);
    color: #EEF4FF;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

[data-theme="dark"] .news-arrow:hover {
    background: rgba(95, 130, 200, 0.76);
}

[data-theme="dark"] .news-card-image-link {
    background: rgba(238, 244, 255, 0.08);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .news-slot-center .news-card-image-link {
    box-shadow:
        0 22px 54px rgba(0, 0, 0, 0.26),
        0 0 38px rgba(198, 107, 107, 0.46);
}

[data-theme="dark"] .news-slot-center .news-card-image-link:hover {
    box-shadow:
        0 26px 64px rgba(0, 0, 0, 0.28),
        0 0 58px rgba(198, 107, 107, 0.72);
}

[data-theme="dark"] .features-layout::before {
    background: rgba(95, 130, 200, 0.26);
    filter: blur(16px);
}

[data-theme="dark"] .article-modal-card {
    background: rgba(15, 23, 42, 0.96);
    color: #EEF4FF;
}

[data-theme="dark"] .article-content th,
[data-theme="dark"] .article-content td {
    border-color: rgba(238, 244, 255, 0.16);
}

[data-theme="dark"] .article-content pre {
    background: rgba(238, 244, 255, 0.08);
}

@media (max-width: 900px) {
    .features-workspace {
        gap: 52px;
    }

    .news-panel {
        padding: 28px 18px 34px;
    }

    .news-carousel {
        grid-template-columns: 1fr;
        gap: 0;
        max-width: 760px;
        margin: 0 auto;
    }

    .news-slot-side {
        display: none;
    }

    .news-slot-center .news-card-image-link,
    .news-card-image-link:hover {
        transform: none;
    }

    .news-carousel-leaving-next .news-card-image-link,
    .news-carousel-leaving-prev .news-card-image-link,
    .news-carousel-entering-next .news-card-image-link,
    .news-carousel-entering-prev .news-card-image-link {
        animation: newsMobileFade 260ms ease both;
    }

    .features-layout {
        max-width: 760px;
    }

    .features-text p {
        font-size: clamp(15px, 3vw, 24px);
    }

    .article-modal-card {
        border-radius: 24px;
    }
}

@media (max-width: 560px) {
    .features-workspace {
        gap: 40px;
    }

    .news-heading-row {
        gap: 12px;
        margin-bottom: 20px;
    }

    .news-arrow {
        width: 42px;
        height: 42px;
        font-size: 34px;
    }

    .news-title {
        font-size: 28px;
    }

    .news-panel {
        padding: 22px 14px 26px;
        border-radius: 24px;
    }

    .news-panel::before {
        border-radius: 24px;
    }

    .news-card-image-link {
        border-radius: 18px;
    }

    .features-layout {
        max-width: 100%;
        aspect-ratio: 600 / 760;
    }

    .features-layout::before {
        top: -18px;
        right: -12px;
        bottom: -28px;
        left: -12px;
        border-radius: 30px;
    }

    .features-text p {
        font-size: clamp(11px, 3.4vw, 16px);
        line-height: 1.3;
    }

    .article-modal {
        padding: 14px;
    }

    .article-body {
        padding: 24px 18px;
    }
}

/* -------------------------
   Editor/articles markdown additions
   ------------------------- */
.article-title {
    display: none;
}

.article-content .md-image {
    margin: 22px 0;
}

.article-content .md-image img {
    max-width: 100%;
    height: auto;
    border-radius: 18px;
}

.article-content .md-image-align-center {
    text-align: center;
}

.article-content .md-image-align-right {
    text-align: right;
}

.article-content .md-image-caption {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.4;
}

.article-content hr {
    margin: 28px 0;
    border: 0;
    border-top: 1px solid rgba(17, 24, 39, 0.16);
}

[data-theme="dark"] .article-content hr {
    border-top-color: rgba(238, 244, 255, 0.16);
}

/* Ссылки внутри статьи */
.article-content a,
.article-preview-body a {
    position: relative;
    z-index: 2;
    pointer-events: auto;
    color: #5F82C8;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.article-content a:hover,
.article-preview-body a:hover {
    color: #C66B6B;
}


/* -------------------------
   Markdown horizontal rule fix
   ------------------------- */
.article-content hr,
.article-preview-body hr,
.article-preview-modal-body hr,
hr.md-hr {
    display: block;
    width: 100%;
    height: 0;
    margin: 28px 0;
    padding: 0;
    border: 0;
    border-top: 2px solid rgba(95, 130, 200, 0.42);
    background: transparent;
    opacity: 1;
}

[data-theme="dark"] .article-content hr,
[data-theme="dark"] .article-preview-body hr,
[data-theme="dark"] .article-preview-modal-body hr,
[data-theme="dark"] hr.md-hr {
    border-top-color: rgba(239, 164, 164, 0.46);
}

@media (prefers-reduced-motion: reduce) {
    .news-carousel-leaving-next .news-card-image-link,
    .news-carousel-leaving-prev .news-card-image-link,
    .news-carousel-entering-next .news-card-image-link,
    .news-carousel-entering-prev .news-card-image-link {
        animation: none;
    }
}


/* -------------------------
   Hex "Как играть" real soft glow
   ------------------------- */
/*
   Для центрального хексагона свечение вынесено в отдельный слой.
   CSS-only drop-shadow на элементе с mask-image в Firefox/Safari может обрезаться,
   поэтому обычный filter здесь ненадёжен.
*/
.hex-card.hex-how.hex-action {
    overflow: visible;
    background-image: none !important;
    background-color: transparent;

    -webkit-mask-image: none !important;
    mask-image: none !important;

    transform-origin: center;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.hex-card.hex-how.hex-action::before,
.hex-card.hex-how.hex-action::after {
    content: none !important;
}

.hex-how-glow,
.hex-how-image,
.hex-how-label {
    position: absolute;
    pointer-events: none;
}

.hex-how-glow {
    inset: -42px;
    z-index: 0;
    opacity: 0;

    border-radius: 42%;
    background:
        radial-gradient(circle at 34% 38%, rgba(157, 187, 239, 0.92) 0%, rgba(157, 187, 239, 0.54) 28%, rgba(157, 187, 239, 0.20) 48%, transparent 70%),
        radial-gradient(circle at 68% 62%, rgba(239, 164, 164, 0.88) 0%, rgba(239, 164, 164, 0.50) 30%, rgba(239, 164, 164, 0.18) 50%, transparent 72%);

    filter: blur(30px);
    transform: scale(0.92);
    transition: opacity 0.25s ease, transform 0.25s ease, filter 0.25s ease;
}

.hex-how-image {
    inset: 0;
    z-index: 1;

    background-image: url("images/how.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    -webkit-mask-image: url("images/hexagon.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-image: url("images/hexagon.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.hex-how-label {
    inset: 0;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;
    text-align: center;

    background: rgba(17, 24, 39, 0.793);
    color: #FFFFFF;

    font-size: 24px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.8px;

    opacity: 0;
    transform: scale(0.96);

    -webkit-mask-image: url("images/hexagon.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-image: url("images/hexagon.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;

    transition: opacity 0.25s ease, transform 0.25s ease;
}

.hex-card.hex-how.hex-action:hover,
.hex-card.hex-how.hex-action:focus-visible {
    transform: scale(1.12);
    filter: drop-shadow(0 14px 24px rgba(17, 24, 39, 0.20));
}

.hex-card.hex-how.hex-action:hover .hex-how-glow,
.hex-card.hex-how.hex-action:focus-visible .hex-how-glow {
    opacity: 0.95;
    transform: scale(1.08);
    filter: blur(34px);
}

.hex-card.hex-how.hex-action:hover .hex-how-label,
.hex-card.hex-how.hex-action:focus-visible .hex-how-label {
    opacity: 1;
    transform: scale(1);
}

[data-theme="dark"] .hex-how-glow {
    background:
        radial-gradient(circle at 34% 38%, rgba(95, 130, 200, 0.94) 0%, rgba(95, 130, 200, 0.56) 28%, rgba(95, 130, 200, 0.22) 48%, transparent 70%),
        radial-gradient(circle at 68% 62%, rgba(139, 92, 246, 0.94) 0%, rgba(139, 92, 246, 0.58) 30%, rgba(139, 92, 246, 0.22) 50%, transparent 72%);
}

[data-theme="dark"] .hex-card.hex-how.hex-action:hover,
[data-theme="dark"] .hex-card.hex-how.hex-action:focus-visible {
    filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.34));
}


/* -------------------------
   Hex "Как играть" news-like glow final override
   ------------------------- */
.hex-card.hex-how.hex-action .hex-how-glow {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    inset: -42px !important;
    border-radius: 42%;
    opacity: 0;
    background:
        radial-gradient(circle at 34% 38%, rgba(157, 187, 239, 0.92) 0%, rgba(157, 187, 239, 0.54) 28%, rgba(157, 187, 239, 0.20) 48%, transparent 70%),
        radial-gradient(circle at 68% 62%, rgba(239, 164, 164, 0.88) 0%, rgba(239, 164, 164, 0.50) 30%, rgba(239, 164, 164, 0.18) 50%, transparent 72%);
    filter: blur(30px);
    transform: scale(0.92);
}

.hex-card.hex-how.hex-action:hover .hex-how-glow,
.hex-card.hex-how.hex-action:focus-visible .hex-how-glow {
    opacity: 0.95;
    transform: scale(1.08);
    filter: blur(34px);
}

[data-theme="dark"] .hex-card.hex-how.hex-action .hex-how-glow {
    background:
        radial-gradient(circle at 34% 38%, rgba(95, 130, 200, 0.94) 0%, rgba(95, 130, 200, 0.56) 28%, rgba(95, 130, 200, 0.22) 48%, transparent 70%),
        radial-gradient(circle at 68% 62%, rgba(139, 92, 246, 0.94) 0%, rgba(139, 92, 246, 0.58) 30%, rgba(139, 92, 246, 0.22) 50%, transparent 72%);
}


/* -------------------------
   Hex "Как играть" compact bright glow final
   ------------------------- */
.hex-card.hex-how.hex-action {
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible !important;
}

.hex-card.hex-how.hex-action:focus-visible {
    outline: 0 !important;
}

.hex-card.hex-how.hex-action .hex-how-glow {
    inset: 8px !important;
    z-index: 0 !important;
    opacity: 0 !important;
    border-radius: 0 !important;

    background: linear-gradient(
        135deg,
        rgba(157, 187, 239, 1) 0%,
        rgba(157, 187, 239, 0.92) 42%,
        rgba(239, 164, 164, 0.95) 100%
    ) !important;

    -webkit-mask-image: url("images/hexagon.svg") !important;
    -webkit-mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    -webkit-mask-size: contain !important;

    mask-image: url("images/hexagon.svg") !important;
    mask-repeat: no-repeat !important;
    mask-position: center !important;
    mask-size: contain !important;

    filter: blur(10px) !important;
    transform: scale(1) !important;
    transition: opacity 0.22s ease, transform 0.22s ease, filter 0.22s ease !important;
}

.hex-card.hex-how.hex-action:hover .hex-how-glow,
.hex-card.hex-how.hex-action:focus-visible .hex-how-glow {
    opacity: 0.95 !important;
    transform: scale(1.035) !important;
    filter: blur(11px) !important;
}

.hex-card.hex-how.hex-action .hex-how-image {
    z-index: 1 !important;
    filter: none !important;
    transition: filter 0.22s ease !important;
}

.hex-card.hex-how.hex-action:hover .hex-how-image,
.hex-card.hex-how.hex-action:focus-visible .hex-how-image {
    filter:
        drop-shadow(0 0 8px rgba(157, 187, 239, 0.95))
        drop-shadow(0 0 10px rgba(239, 164, 164, 0.88)) !important;
}

.hex-card.hex-how.hex-action .hex-how-label {
    z-index: 2 !important;
}

[data-theme="dark"] .hex-card.hex-how.hex-action .hex-how-glow {
    background: linear-gradient(
        135deg,
        rgba(95, 130, 200, 1) 0%,
        rgba(95, 130, 200, 0.94) 42%,
        rgba(139, 92, 246, 0.98) 100%
    ) !important;
}

[data-theme="dark"] .hex-card.hex-how.hex-action:hover .hex-how-image,
[data-theme="dark"] .hex-card.hex-how.hex-action:focus-visible .hex-how-image {
    filter:
        drop-shadow(0 0 8px rgba(95, 130, 200, 0.98))
        drop-shadow(0 0 10px rgba(139, 92, 246, 0.92)) !important;
}

/* -------------------------
   Hex "Как играть" glow over other hexagons final override
   ------------------------- */
.hex-card.hex-how.hex-action {
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    -webkit-mask-image: none !important;
    mask-image: none !important;
}

.hex-card.hex-how.hex-action:hover,
.hex-card.hex-how.hex-action:focus-visible {
    z-index: 80 !important;
    transform: scale(1.12) !important;
    filter: none !important;
}

.hex-card.hex-how.hex-action .hex-how-glow {
    position: absolute !important;
    inset: -42px !important;
    z-index: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;

    border-radius: 42% !important;
    background:
        radial-gradient(circle at 34% 38%, rgba(157, 187, 239, 0.92) 0%, rgba(157, 187, 239, 0.54) 28%, rgba(157, 187, 239, 0.20) 48%, transparent 70%),
        radial-gradient(circle at 68% 62%, rgba(239, 164, 164, 0.88) 0%, rgba(239, 164, 164, 0.50) 30%, rgba(239, 164, 164, 0.18) 50%, transparent 72%) !important;

    -webkit-mask-image: none !important;
    mask-image: none !important;

    filter: blur(30px) !important;
    transform: scale(0.92) !important;
    transition: opacity 0.25s ease, transform 0.25s ease, filter 0.25s ease !important;
}

.hex-card.hex-how.hex-action:hover .hex-how-glow,
.hex-card.hex-how.hex-action:focus-visible .hex-how-glow {
    opacity: 0.95 !important;
    transform: scale(1.08) !important;
    filter: blur(34px) !important;
}

.hex-card.hex-how.hex-action .hex-how-image {
    z-index: 1 !important;
    filter: none !important;
}

.hex-card.hex-how.hex-action:hover .hex-how-image,
.hex-card.hex-how.hex-action:focus-visible .hex-how-image {
    filter: none !important;
}

.hex-card.hex-how.hex-action .hex-how-label {
    z-index: 2 !important;
}

[data-theme="dark"] .hex-card.hex-how.hex-action .hex-how-glow {
    background:
        radial-gradient(circle at 34% 38%, rgba(95, 130, 200, 0.94) 0%, rgba(95, 130, 200, 0.56) 28%, rgba(95, 130, 200, 0.22) 48%, transparent 70%),
        radial-gradient(circle at 68% 62%, rgba(139, 92, 246, 0.94) 0%, rgba(139, 92, 246, 0.58) 30%, rgba(139, 92, 246, 0.22) 50%, transparent 72%) !important;
}

/* -------------------------
   Map open button
   ------------------------- */
.map-wrapper {
    position: relative; /* база для кнопки карты */
}

.map-open-button {
    position: absolute; /* ставит кнопку поверх карты */
    left: 50%; /* центр по горизонтали */
    top: 50%; /* центр по вертикали */
    z-index: 4; /* выше карты */

    display: inline-flex; /* центрирует текст внутри */
    align-items: center; /* центр по вертикали */
    justify-content: center; /* центр по горизонтали */

    padding: 16px 28px; /* размер кнопки */
    border-radius: var(--radius-pill); /* форма капсулы */

    background: linear-gradient(90deg, rgba(239, 164, 164, 0.88), rgba(157, 187, 239, 0.88)); /* мягкий красно-синий градиент */
    color: var(--blue-text); /* цвет текста */
    box-shadow:
        0 18px 44px rgba(17, 24, 39, 0.22),
        0 0 34px rgba(157, 187, 239, 0.38); /* мягкое свечение */

    font-size: clamp(15px, 2vw, 20px); /* адаптивный размер */
    font-weight: 700; /* плотный текст */
    line-height: 1; /* компактная строка */
    letter-spacing: 0.8px; /* немного разреженный текст */
    text-align: center; /* центрирование текста */
    white-space: nowrap; /* не переносит текст */

    transform: translate(-50%, -50%); /* точное центрирование */
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        filter var(--transition-fast); /* плавное наведение */
}

.map-open-button:hover {
    transform: translate(-50%, -50%) translateY(-3px) scale(1.03); /* лёгкий подъём */
    filter: brightness(1.05); /* чуть ярче */
    box-shadow:
        0 24px 58px rgba(17, 24, 39, 0.26),
        0 0 46px rgba(239, 164, 164, 0.48); /* сильнее свечение */
}

.map-open-button:active {
    transform: translate(-50%, -50%) scale(0.98); /* эффект нажатия */
}

.map-open-button:focus-visible {
    outline: 3px solid rgba(157, 187, 239, 0.9); /* рамка для клавиатуры */
    outline-offset: 5px; /* отступ рамки */
}

[data-theme="dark"] .map-open-button {
    background: linear-gradient(90deg, rgba(198, 107, 107, 0.84), rgba(95, 130, 200, 0.88)); /* тёмная версия градиента */
    color: #EEF4FF; /* светлый текст */
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.32),
        0 0 34px rgba(95, 130, 200, 0.34); /* свечение в тёмной теме */
}

[data-theme="dark"] .map-open-button:hover {
    box-shadow:
        0 24px 58px rgba(0, 0, 0, 0.38),
        0 0 46px rgba(198, 107, 107, 0.38); /* усиление свечения */
}

@media (max-width: 700px) {
    .map-open-button {
        padding: 13px 20px; /* компактнее на телефоне */
        font-size: clamp(13px, 4vw, 16px); /* меньше текст */
        letter-spacing: 0.4px; /* меньше разрядка */
    }
}

@media (max-width: 380px) {
    .map-open-button {
        padding: 12px 16px; /* защита от вылета */
        font-size: 12px; /* помещает текст на узком экране */
    }
}

/* -------------------------
   Map button opacity + hover zoom
   ------------------------- */
.map-open-button {
    background: linear-gradient(90deg, #EFA4A4, #9DBBEF) !important; /* непрозрачный градиент */
    box-shadow:
        0 18px 44px rgba(17, 24, 39, 0.24),
        0 0 24px rgba(157, 187, 239, 0.42),
        0 0 18px rgba(239, 164, 164, 0.34) !important; /* базовое свечение */
}

.map-open-button:hover {
    filter: brightness(1.04) saturate(1.08);
    box-shadow:
        0 24px 58px rgba(17, 24, 39, 0.30),
        0 0 42px rgba(157, 187, 239, 0.74),
        0 0 38px rgba(239, 164, 164, 0.68) !important; /* усиленное свечение */
}

.online-map {
    transform-origin: center center; /* карта приближается из центра */
    transition:
        transform var(--transition-normal),
        filter var(--transition-normal); /* плавное приближение */
}

@media (hover: hover) and (pointer: fine) {
    .map-wrapper:has(.map-open-button:hover) .online-map {
        transform: scale(1.035); /* лёгкое приближение карты при наведении на кнопку */
        filter: saturate(1.05) brightness(1.03);
    }
}

[data-theme="dark"] .map-open-button {
    background: linear-gradient(90deg, #C66B6B, #5F82C8) !important; /* непрозрачный градиент для тёмной темы */
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.34),
        0 0 24px rgba(95, 130, 200, 0.46),
        0 0 18px rgba(198, 107, 107, 0.34) !important; /* базовое свечение */
}

[data-theme="dark"] .map-open-button:hover {
    box-shadow:
        0 24px 58px rgba(0, 0, 0, 0.42),
        0 0 44px rgba(95, 130, 200, 0.70),
        0 0 38px rgba(198, 107, 107, 0.58) !important; /* усиленное свечение */
}


/* -------------------------
   Global toast
   ------------------------- */
.site-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 1200;

    padding: 13px 20px;
    border-radius: var(--radius-pill);

    background: var(--dark);
    color: var(--white);

    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;

    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(12px) scale(0.96);
    transition: opacity 0.22s ease, transform 0.22s ease;
    box-shadow: 0 16px 38px rgba(17, 24, 39, 0.26);
}

.site-toast-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}

[data-theme="dark"] .site-toast {
    background: #080D18;
    color: #EEF4FF;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.38);
}


/* -------------------------
   Market flag toast
   ------------------------- */
.market-toast-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.footer-links .market-toast-wrap {
    display: inline-block;
    align-self: flex-start;
}

.market-toast {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    z-index: 350;

    padding: 12px 18px;
    border-radius: var(--radius-pill);

    background: var(--dark);
    color: var(--white);

    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;

    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-10px) scale(0.96);
    transform-origin: top center;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.market-toast::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;

    width: 12px;
    height: 12px;

    background: var(--dark);
    transform: translateX(-50%) rotate(45deg);
}

.market-toast-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}

[data-theme="dark"] .market-toast {
    background: #080D18;
    color: #EEF4FF;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
}

[data-theme="dark"] .market-toast::before {
    background: #080D18;
}


/* -------------------------
   Shop page
   ------------------------- */
.shop-page {
    min-height: 100dvh;
}

.nav a[aria-current="page"] {
    color: #5F82C8;
}

.nav a[aria-current="page"]::after {
    transform: scaleX(1);
}

.shop-screen {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    min-height: 100dvh;
    padding: 132px 0 88px;

    display: flex;
    align-items: center;

    background: transparent;
}

.shop-bg-layer {
    opacity: 0.86;
}

.shop-content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.shop-eyebrow {
    margin: 0 0 10px;
    font-size: clamp(13px, 1.5vw, 16px);
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(16, 33, 63, 0.70);
}

.shop-title {
    margin: 0;
    font-size: clamp(48px, 8vw, 86px);
    line-height: 0.96;
    font-weight: 800;
    letter-spacing: -0.05em;
    color: var(--text-main);
}

.shop-subtitle {
    width: min(720px, 100%);
    margin: 18px 0 0;
    color: var(--text-muted);
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.55;
}

.shop-category-tabs {
    margin-top: 34px;
    padding: 8px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border: 1px solid rgba(255, 255, 255, 0.54);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.42);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.shop-category-tab {
    min-width: 170px;
    padding: 13px 22px;
    border: none;
    border-radius: var(--radius-pill);

    background: transparent;
    color: var(--text-main);
    cursor: pointer;

    font-size: clamp(15px, 1.8vw, 18px);
    font-weight: 800;
    line-height: 1;

    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.shop-category-tab:hover {
    transform: translateY(-1px);
    background: rgba(157, 187, 239, 0.28);
}

.shop-category-tab:focus-visible {
    outline: 3px solid rgba(157, 187, 239, 0.85);
    outline-offset: 4px;
}

.shop-category-tab-active {
    background: linear-gradient(90deg, #FFC5C5, #BDD5FF);
    color: var(--blue-text);
    box-shadow: 0 12px 28px rgba(90, 120, 180, 0.18);
}

.shop-products {
    width: 100%;
    margin-top: 42px;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;

    perspective: 1000px;
}

.shop-products[hidden] {
    display: none;
}


.donate-card {
    --rotate-x: 0deg;
    --rotate-y: 0deg;
    --tilt-strength: 0;

    --holo-opacity: 0;
    --cd-layer-opacity: 0;
    --shine-layer-opacity: 0;
    --cd-specular: 0;
    --cd-angle: 135deg;
    --cd-phase: 0deg;
    --cd-line-angle: 45deg;
    --cd-light-x: 50%;
    --cd-light-y: 50%;
    --cd-wave-x: 50%;
    --cd-wave-y: 50%;
    --shine-x: 50%;
    --shine-y: 50%;

    --cd-band-center: 50%;
    --cd-band-core: 7%;
    --cd-band-feather: 24%;
    --cd-secondary-center: 76%;
    --cd-secondary-core: 4%;
    --cd-secondary-feather: 18%;

    --base-light-x: 28%;
    --base-light-y: 18%;
    --base-shadow-x: 76%;
    --base-shadow-y: 86%;

    --frame-angle: 135deg;
    --frame-hot-x: 18%;
    --frame-hot-y: 18%;
    --frame-opacity: 0.92;
    --frame-glow: 0.24;
    --gold-glow-strength: var(--frame-glow);
    --image-edge-opacity: 0;
    --image-edge-shift-x: 0px;
    --image-edge-shift-y: 0px;
    --image-edge-thickness: 7px;
    --image-edge-blur: 1.2px;
    --image-shadow-y: 24px;
    --image-shadow-blur: 42px;
    --image-impact-opacity: 0;

    --card-accent-1: rgba(255, 116, 138, 0.92);
    --card-accent-2: rgba(132, 176, 255, 0.92);

    position: relative;
    min-height: 420px;
    border: 1px solid rgba(255, 218, 96, 0.86);
    border-radius: 30px;
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(255, 255, 255, 0.24), transparent 34%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(6, 10, 20, 0.34), transparent 44%),
        repeating-linear-gradient(
            96deg,
            rgba(255, 255, 255, 0.020) 0px,
            rgba(255, 255, 255, 0.020) 1px,
            rgba(255, 255, 255, 0.000) 2px,
            rgba(255, 255, 255, 0.000) 6px
        ),
        linear-gradient(145deg, rgba(65, 72, 88, 0.92), rgba(35, 42, 58, 0.96) 48%, rgba(87, 93, 105, 0.82));
    box-shadow:
        0 24px 62px rgba(17, 24, 39, 0.18),
        0 0 0 1px rgba(255, 247, 192, 0.34),
        0 0 26px rgba(255, 196, 45, var(--frame-glow));

    transform: rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) translateZ(0);
    transform-style: preserve-3d;
    transition:
        transform 0.16s ease,
        box-shadow var(--transition-normal),
        border-color var(--transition-normal),
        filter var(--transition-normal);
    will-change: transform;
}

.donate-card:hover,
.donate-card:focus-visible {
    --holo-opacity: 1;
    --cd-layer-opacity: 0.86;
    --shine-layer-opacity: 0.76;
    --cd-specular: 0.88;
    --frame-opacity: 1;
    --frame-glow: 0.54;
    --image-edge-opacity: 0.34;
    --image-impact-opacity: 0.32;

    border-color: rgba(255, 232, 128, 1.00);
    box-shadow:
        0 34px 82px rgba(17, 24, 39, 0.24),
        0 0 0 1px rgba(255, 250, 207, 0.66),
        0 0 46px rgba(255, 205, 55, var(--frame-glow));
}

.donate-card:focus-visible {
    outline: 3px solid rgba(157, 187, 239, 0.85);
    outline-offset: 5px;
}

.donate-card::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: 1;
    pointer-events: none;

    background:
        radial-gradient(ellipse at var(--cd-light-x) var(--cd-light-y), rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.48) 8%, rgba(255, 255, 255, 0.12) 22%, transparent 48%),
        conic-gradient(
            from var(--cd-phase) at var(--cd-wave-x) var(--cd-wave-y),
            rgba(255, 0, 48, 0.92) 0deg,
            rgba(255, 42, 98, 0.86) 24deg,
            rgba(255, 134, 0, 0.68) 60deg,
            rgba(255, 242, 78, 0.58) 96deg,
            rgba(64, 255, 126, 0.58) 142deg,
            rgba(0, 230, 255, 0.72) 188deg,
            rgba(52, 82, 255, 0.70) 232deg,
            rgba(166, 70, 255, 0.66) 280deg,
            rgba(255, 0, 190, 0.80) 326deg,
            rgba(255, 0, 48, 0.92) 360deg
        ),
        repeating-radial-gradient(
            circle at 50% 50%,
            rgba(255, 255, 255, 0.00) 0px,
            rgba(255, 255, 255, 0.00) 5px,
            rgba(255, 255, 255, 0.18) 6px,
            rgba(255, 255, 255, 0.00) 8px,
            rgba(255, 255, 255, 0.00) 13px
        ),
        repeating-linear-gradient(
            var(--cd-line-angle),
            rgba(255, 255, 255, 0.00) 0px,
            rgba(255, 255, 255, 0.00) 13px,
            rgba(255, 255, 255, 0.26) 14px,
            rgba(255, 255, 255, 0.00) 16px,
            rgba(255, 255, 255, 0.00) 30px
        );
    background-size: 160% 160%, 178% 178%, 100% 100%, 182% 182%;
    background-position:
        var(--cd-light-x) var(--cd-light-y),
        var(--cd-wave-x) var(--cd-wave-y),
        center,
        var(--shine-x) var(--shine-y);
    opacity: var(--cd-layer-opacity);
    mix-blend-mode: screen;
    filter:
        saturate(2.05)
        brightness(1.35)
        contrast(1.12);

    -webkit-mask-image:
        linear-gradient(
            var(--cd-angle),
            transparent 0%,
            transparent calc(var(--cd-band-center) - var(--cd-band-core) - var(--cd-band-feather)),
            rgba(0, 0, 0, 0.18) calc(var(--cd-band-center) - var(--cd-band-core) - 14%),
            rgba(0, 0, 0, 0.74) calc(var(--cd-band-center) - var(--cd-band-core) - 4%),
            #000 calc(var(--cd-band-center) - var(--cd-band-core)),
            #000 calc(var(--cd-band-center) + var(--cd-band-core)),
            rgba(0, 0, 0, 0.74) calc(var(--cd-band-center) + var(--cd-band-core) + 4%),
            rgba(0, 0, 0, 0.18) calc(var(--cd-band-center) + var(--cd-band-core) + 14%),
            transparent calc(var(--cd-band-center) + var(--cd-band-core) + var(--cd-band-feather)),
            transparent 100%
        ),
        linear-gradient(
            calc(var(--cd-angle) + 180deg),
            transparent 0%,
            transparent calc(var(--cd-secondary-center) - var(--cd-secondary-core) - var(--cd-secondary-feather)),
            rgba(0, 0, 0, 0.12) calc(var(--cd-secondary-center) - var(--cd-secondary-core) - 10%),
            rgba(0, 0, 0, 0.52) calc(var(--cd-secondary-center) - var(--cd-secondary-core)),
            rgba(0, 0, 0, 0.52) calc(var(--cd-secondary-center) + var(--cd-secondary-core)),
            rgba(0, 0, 0, 0.12) calc(var(--cd-secondary-center) + var(--cd-secondary-core) + 10%),
            transparent calc(var(--cd-secondary-center) + var(--cd-secondary-core) + var(--cd-secondary-feather)),
            transparent 100%
        );
    mask-image:
        linear-gradient(
            var(--cd-angle),
            transparent 0%,
            transparent calc(var(--cd-band-center) - var(--cd-band-core) - var(--cd-band-feather)),
            rgba(0, 0, 0, 0.18) calc(var(--cd-band-center) - var(--cd-band-core) - 14%),
            rgba(0, 0, 0, 0.74) calc(var(--cd-band-center) - var(--cd-band-core) - 4%),
            #000 calc(var(--cd-band-center) - var(--cd-band-core)),
            #000 calc(var(--cd-band-center) + var(--cd-band-core)),
            rgba(0, 0, 0, 0.74) calc(var(--cd-band-center) + var(--cd-band-core) + 4%),
            rgba(0, 0, 0, 0.18) calc(var(--cd-band-center) + var(--cd-band-core) + 14%),
            transparent calc(var(--cd-band-center) + var(--cd-band-core) + var(--cd-band-feather)),
            transparent 100%
        ),
        linear-gradient(
            calc(var(--cd-angle) + 180deg),
            transparent 0%,
            transparent calc(var(--cd-secondary-center) - var(--cd-secondary-core) - var(--cd-secondary-feather)),
            rgba(0, 0, 0, 0.12) calc(var(--cd-secondary-center) - var(--cd-secondary-core) - 10%),
            rgba(0, 0, 0, 0.52) calc(var(--cd-secondary-center) - var(--cd-secondary-core)),
            rgba(0, 0, 0, 0.52) calc(var(--cd-secondary-center) + var(--cd-secondary-core)),
            rgba(0, 0, 0, 0.12) calc(var(--cd-secondary-center) + var(--cd-secondary-core) + 10%),
            transparent calc(var(--cd-secondary-center) + var(--cd-secondary-core) + var(--cd-secondary-feather)),
            transparent 100%
        );

    transition:
        opacity var(--transition-fast),
        background-position 0.12s linear,
        filter var(--transition-fast);
}

.donate-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 6;
    padding: 2px;
    border-radius: inherit;
    pointer-events: none;

    background:
        radial-gradient(circle at var(--frame-hot-x) var(--frame-hot-y), rgba(255, 255, 255, 1.00) 0 4%, rgba(255, 244, 169, 0.90) 8%, transparent 23%),
        linear-gradient(
            var(--frame-angle),
            rgba(115, 71, 5, 0.95) 0%,
            rgba(255, 178, 36, 0.98) 12%,
            rgba(255, 248, 187, 1.00) 22%,
            rgba(255, 187, 48, 0.98) 34%,
            rgba(174, 103, 9, 0.95) 46%,
            rgba(255, 224, 91, 1.00) 58%,
            rgba(255, 255, 226, 1.00) 70%,
            rgba(196, 118, 10, 0.96) 84%,
            rgba(92, 55, 5, 0.95) 100%
        );
    opacity: var(--frame-opacity);
    filter:
        saturate(1.65)
        brightness(1.30)
        drop-shadow(0 0 7px rgba(255, 240, 152, 0.86))
        drop-shadow(0 0 22px rgba(255, 181, 24, 0.58));

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;

    transition:
        opacity var(--transition-fast),
        filter var(--transition-fast),
        background var(--transition-fast);
}

.donate-card-shine {
    position: absolute;
    inset: -22%;
    z-index: 2;
    pointer-events: none;

    background:
        linear-gradient(
            var(--cd-angle),
            transparent 0%,
            rgba(255, 255, 255, 0.00) 18%,
            rgba(255, 52, 92, 0.24) 30%,
            rgba(255, 255, 255, 0.80) 43%,
            rgba(255, 255, 255, 0.34) 50%,
            rgba(255, 0, 176, 0.26) 59%,
            rgba(0, 227, 255, 0.20) 71%,
            transparent 100%
        ),
        repeating-linear-gradient(
            calc(var(--cd-line-angle) + 18deg),
            rgba(255, 255, 255, 0.00) 0px,
            rgba(255, 255, 255, 0.00) 15px,
            rgba(255, 255, 255, 0.25) 16px,
            rgba(255, 255, 255, 0.00) 18px,
            rgba(255, 255, 255, 0.00) 33px
        );
    background-size: 210% 210%, 180% 180%;
    background-position: var(--cd-light-x) var(--cd-light-y), var(--shine-x) var(--shine-y);
    opacity: var(--shine-layer-opacity);
    mix-blend-mode: screen;
    filter:
        saturate(1.75)
        brightness(1.34)
        contrast(1.12)
        blur(0.12px);
    transform: translateZ(16px);

    -webkit-mask-image:
        linear-gradient(
            var(--cd-angle),
            transparent 0%,
            transparent calc(var(--cd-band-center) - var(--cd-band-core) - 17%),
            rgba(0, 0, 0, 0.20) calc(var(--cd-band-center) - var(--cd-band-core) - 9%),
            #000 calc(var(--cd-band-center) - var(--cd-band-core)),
            #000 calc(var(--cd-band-center) + var(--cd-band-core)),
            rgba(0, 0, 0, 0.20) calc(var(--cd-band-center) + var(--cd-band-core) + 9%),
            transparent calc(var(--cd-band-center) + var(--cd-band-core) + 17%),
            transparent 100%
        );
    mask-image:
        linear-gradient(
            var(--cd-angle),
            transparent 0%,
            transparent calc(var(--cd-band-center) - var(--cd-band-core) - 17%),
            rgba(0, 0, 0, 0.20) calc(var(--cd-band-center) - var(--cd-band-core) - 9%),
            #000 calc(var(--cd-band-center) - var(--cd-band-core)),
            #000 calc(var(--cd-band-center) + var(--cd-band-core)),
            rgba(0, 0, 0, 0.20) calc(var(--cd-band-center) + var(--cd-band-core) + 9%),
            transparent calc(var(--cd-band-center) + var(--cd-band-core) + 17%),
            transparent 100%
        );
    transition:
        opacity var(--transition-fast),
        background-position 0.12s linear,
        filter var(--transition-fast);
}

.donate-card-inner {
    position: relative;
    z-index: 4;
    min-height: 420px;
    padding: 24px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;

    transform: translateZ(36px);
}

.donate-card-badge {
    position: relative;
    z-index: 5;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 12px;
    border-radius: var(--radius-pill);

    background: rgba(255, 255, 255, 0.92);
    color: var(--text-main);

    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.04em;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.45),
        0 8px 20px rgba(17, 24, 39, 0.10);
}

.donate-card-image {
    position: relative;
    z-index: 5;
    isolation: isolate;
    width: 100%;
    min-height: 154px;
    margin-top: 20px;
    border-radius: 24px;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.42) 32%, transparent 64%),
        linear-gradient(135deg, var(--card-accent-1), var(--card-accent-2));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.46),
        inset 0 12px 26px rgba(255, 255, 255, 0.18),
        0 var(--image-shadow-y) var(--image-shadow-blur) rgba(17, 24, 39, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.18);
    transform: translateZ(0);
    transition:
        box-shadow 0.12s linear;
}

.donate-card-image::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.28), transparent 38%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 58%, rgba(255, 255, 255, 0.10)),
        radial-gradient(circle at calc(var(--cd-light-x) + (var(--image-edge-shift-x) * 0.18)) calc(var(--cd-light-y) + (var(--image-edge-shift-y) * 0.18)), rgba(255, 255, 255, calc(var(--image-impact-opacity) * 0.34)) 0%, rgba(255, 255, 255, 0.00) 34%);
    opacity: 0.92;
}

.donate-card-image::after {
    content: "";
    position: absolute;
    inset: -14px;
    z-index: 1;
    padding: var(--image-edge-thickness);
    border-radius: calc(24px + 14px);
    pointer-events: none;

    background:
        radial-gradient(circle at calc(var(--cd-light-x) + var(--image-edge-shift-x)) calc(var(--cd-light-y) + var(--image-edge-shift-y)), rgba(255, 255, 255, 1.00) 0%, rgba(255, 255, 255, 0.86) 7%, rgba(255, 255, 255, 0.12) 18%, rgba(255, 255, 255, 0.00) 34%),
        linear-gradient(
            var(--cd-angle),
            rgba(255, 255, 255, 0.00) 0%,
            rgba(255, 255, 255, 0.00) 26%,
            rgba(255, 255, 255, calc(var(--image-impact-opacity) * 0.78)) 38%,
            rgba(255, 255, 255, calc(var(--image-impact-opacity) * 0.26)) 47%,
            rgba(255, 255, 255, 0.00) 58%,
            rgba(255, 255, 255, 0.00) 100%
        ),
        conic-gradient(
            from var(--cd-phase) at calc(var(--cd-wave-x) + var(--image-edge-shift-x)) calc(var(--cd-wave-y) + var(--image-edge-shift-y)),
            rgba(255, 0, 56, 0.94) 0deg,
            rgba(255, 64, 124, 0.90) 28deg,
            rgba(255, 139, 0, 0.78) 62deg,
            rgba(255, 242, 78, 0.66) 100deg,
            rgba(64, 255, 126, 0.62) 144deg,
            rgba(0, 230, 255, 0.76) 192deg,
            rgba(52, 82, 255, 0.74) 236deg,
            rgba(166, 70, 255, 0.70) 284deg,
            rgba(255, 0, 190, 0.84) 330deg,
            rgba(255, 0, 56, 0.94) 360deg
        ),
        repeating-linear-gradient(
            calc(var(--cd-line-angle) + 90deg),
            rgba(255, 255, 255, 0.00) 0 8px,
            rgba(255, 255, 255, 0.22) 8px 9px,
            rgba(255, 255, 255, 0.00) 9px 18px
        );
    background-size: 145% 145%, 160% 160%, 176% 176%, 180% 180%;
    background-position:
        calc(var(--cd-light-x) + var(--image-edge-shift-x)) calc(var(--cd-light-y) + var(--image-edge-shift-y)),
        calc(var(--cd-light-x) + (var(--image-edge-shift-x) * 0.72)) calc(var(--cd-light-y) + (var(--image-edge-shift-y) * 0.72)),
        calc(var(--cd-wave-x) + var(--image-edge-shift-x)) calc(var(--cd-wave-y) + var(--image-edge-shift-y)),
        calc(var(--shine-x) + var(--image-edge-shift-x)) calc(var(--shine-y) + var(--image-edge-shift-y));
    opacity: var(--image-edge-opacity);
    filter:
        saturate(2.05)
        brightness(1.42)
        contrast(1.12)
        blur(var(--image-edge-blur));
    mix-blend-mode: screen;
    transform: translate3d(calc(var(--image-edge-shift-x) * 0.56), calc(var(--image-edge-shift-y) * 0.56), 0);

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.16),
        0 0 24px rgba(255, 255, 255, 0.16),
        0 0 44px rgba(255, 0, 128, 0.12),
        0 0 52px rgba(64, 228, 255, 0.10);

    transition:
        opacity var(--transition-fast),
        background-position 0.12s linear,
        filter var(--transition-fast),
        transform 0.12s linear;
}

.donate-card-image span {
    position: relative;
    z-index: 2;
    font-size: clamp(46px, 6vw, 72px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.08em;
    color: #FFFFFF;
    text-shadow:
        0 7px 22px rgba(17, 24, 39, 0.20),
        0 0 22px rgba(255, 255, 255, 0.16);
}

.donate-card h2 {
    position: relative;
    z-index: 5;
    margin: 24px 0 0;
    color: #FFFFFF;
    font-size: clamp(24px, 2.6vw, 32px);
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.donate-card p {
    position: relative;
    z-index: 5;
    margin: 12px 0 0;
    color: #FFFFFF;
    font-size: 16px;
    line-height: 1.5;
    text-shadow: 0 2px 10px rgba(8, 13, 24, 0.18);
}

.donate-card-footer {
    position: relative;
    z-index: 5;
    width: 100%;
    margin-top: auto;
    padding-top: 24px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.donate-card-footer strong {
    color: #FFFFFF;
    font-size: 24px;
    line-height: 1;
    text-shadow: 0 2px 12px rgba(8, 13, 24, 0.20);
}

.donate-card-button {
    padding: 12px 18px;
    border: none;
    border-radius: var(--radius-pill);

    background: var(--dark);
    color: var(--white);
    cursor: pointer;

    font-size: 15px;
    font-weight: 800;
    line-height: 1;

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        filter var(--transition-fast);
}

.donate-card-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 14px 30px rgba(17, 24, 39, 0.22);
}

.donate-card-button:active {
    transform: translateY(0) scale(0.96);
}

.donate-card-vip {
    --card-accent-1: rgba(255, 108, 128, 0.96);
    --card-accent-2: rgba(120, 176, 255, 0.92);
}

.donate-card-premium {
    --card-accent-1: rgba(255, 98, 120, 0.90);
    --card-accent-2: rgba(255, 211, 120, 0.90);
}

.donate-card-legend {
    --card-accent-1: rgba(255, 92, 120, 0.94);
    --card-accent-2: rgba(214, 187, 92, 0.90);
}

.donate-card-crate {
    --card-accent-1: rgba(132, 190, 255, 0.86);
    --card-accent-2: rgba(255, 112, 138, 0.88);
}

.donate-card-keys {
    --card-accent-1: rgba(255, 220, 145, 0.92);
    --card-accent-2: rgba(137, 186, 255, 0.88);
}

.donate-card-currency {
    --card-accent-1: rgba(255, 106, 132, 0.90);
    --card-accent-2: rgba(95, 130, 200, 0.78);
}

[data-theme="dark"] .donate-card {
    border-color: rgba(255, 211, 91, 0.42);
    background:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(255, 255, 255, 0.16), transparent 34%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(0, 0, 0, 0.44), transparent 46%),
        repeating-linear-gradient(
            96deg,
            rgba(255, 255, 255, 0.026) 0px,
            rgba(255, 255, 255, 0.026) 1px,
            rgba(255, 255, 255, 0.000) 2px,
            rgba(255, 255, 255, 0.000) 6px
        ),
        linear-gradient(145deg, rgba(50, 58, 77, 0.92), rgba(20, 27, 43, 0.96) 50%, rgba(71, 77, 91, 0.82));
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(255, 228, 146, 0.16),
        0 0 30px rgba(255, 202, 74, var(--gold-glow-strength));
}

[data-theme="dark"] .donate-card:hover,
[data-theme="dark"] .donate-card:focus-visible {
    border-color: rgba(255, 226, 134, 0.76);
    box-shadow:
        0 32px 76px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(255, 248, 198, 0.28),
        0 0 46px rgba(255, 210, 86, var(--gold-glow-strength));
}

[data-theme="dark"] .donate-card-badge {
    background: rgba(255, 255, 255, 0.10);
    color: #EEF4FF;
}

[data-theme="dark"] .donate-card-button {
    background: #EEF4FF;
    color: #080D18;
}


.shop-footer {
    margin-top: 0;
}

[data-theme="dark"] .shop-eyebrow {
    color: rgba(238, 244, 255, 0.76);
}

[data-theme="dark"] .shop-category-tabs {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(15, 23, 42, 0.52);
}

[data-theme="dark"] .shop-category-tab-active {
    background: linear-gradient(90deg, #C66B6B, #5F82C8);
    color: #EEF4FF;
}



@media (max-width: 1050px) {
    .shop-products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .shop-screen {
        padding: 120px 0 64px;
    }

    .shop-category-tabs {
        width: 100%;
        max-width: 420px;
        flex-direction: column;
        border-radius: 28px;
    }

    .shop-category-tab {
        width: 100%;
    }

    .shop-products {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 30px;
    }

    .donate-card,
    .donate-card-inner {
        min-height: 390px;
    }
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
    .donate-card {
        transform: none !important;
        transition: box-shadow var(--transition-normal), border-color var(--transition-normal);
    }

    .donate-card::before,
    .donate-card-shine,
    .donate-card-image::after {
        display: none;
    }
}


/* -------------------------
   Shop layout patch 18
   ------------------------- */

.shop-hero-screen {
    min-height: 100dvh;
    padding: 112px 24px 48px;
    align-items: center;
    justify-content: center;
}

.shop-hero-content .main-title {
    margin-bottom: 12px;
}

.shop-hero-content .sub-title {
    margin: 0;
    font-weight: 400;
}

.shop-start-wrap {
    margin-top: 24px;
}

.shop-catalog-section {
    padding: 100px 0;
    scroll-margin-top: 96px;
}

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

.shop-catalog-panel {
    position: relative;
    width: 100%;
    max-width: 1288px;
    margin: 0 auto;
    padding: 32px 28px 40px;
    border-radius: 34px;
    overflow: visible;
}

.shop-catalog-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 34px;
    background: rgba(255, 206, 206, 0.42);
    filter: blur(18px);
    z-index: -1;
    pointer-events: none;
}

.shop-catalog-panel .shop-category-tabs {
    margin: 0 auto 34px;
}

.shop-catalog-panel .shop-products {
    margin-top: 0;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

.shop-catalog-panel #shopItems.shop-products {
    max-width: 930px;
    margin-inline: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.donate-card-vip-tier {
    --tier-border: #C67A3E;
    --tier-border-light: #F4B06D;
    --tier-border-dark: #6F3D1F;
    --tier-glow: rgba(245, 132, 53, 0.48);
    --tier-inner-glow: rgba(255, 196, 124, 0.24);
    --card-accent-1: rgba(215, 112, 58, 0.96);
    --card-accent-2: rgba(116, 68, 42, 0.94);

    border: 3px solid var(--tier-border);
    border-radius: 18px;
    box-shadow:
        inset 3px 3px 0 var(--tier-border-light),
        inset -3px -3px 0 var(--tier-border-dark),
        inset 0 0 0 6px rgba(0, 0, 0, 0.16),
        0 24px 62px rgba(17, 24, 39, 0.18),
        0 0 34px var(--tier-glow),
        0 0 0 1px rgba(255, 247, 192, 0.18);
}

.donate-card-vip-tier:hover,
.donate-card-vip-tier:focus-visible {
    border-color: var(--tier-border-light);
    box-shadow:
        inset 3px 3px 0 var(--tier-border-light),
        inset -3px -3px 0 var(--tier-border-dark),
        inset 0 0 0 6px rgba(0, 0, 0, 0.18),
        0 34px 82px rgba(17, 24, 39, 0.25),
        0 0 46px var(--tier-glow),
        0 0 0 1px rgba(255, 250, 207, 0.46);
}

.donate-card-vip-tier .donate-card-inner {
    padding: 22px;
}

.donate-card-vip-tier .donate-card-badge {
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.78));
    box-shadow:
        inset 2px 2px 0 rgba(255, 255, 255, 0.70),
        inset -2px -2px 0 rgba(0, 0, 0, 0.16),
        0 8px 20px rgba(17, 24, 39, 0.10);
}

.donate-card-vip-tier .donate-card-image {
    min-height: 144px;
    border: 3px solid var(--tier-border);
    border-radius: 12px;
    background:
        radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.20) 30%, transparent 58%),
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.10) 0px,
            rgba(255, 255, 255, 0.10) 2px,
            rgba(0, 0, 0, 0.10) 2px,
            rgba(0, 0, 0, 0.10) 4px
        ),
        linear-gradient(135deg, var(--card-accent-1), var(--card-accent-2));
    image-rendering: pixelated;
    box-shadow:
        inset 3px 3px 0 var(--tier-border-light),
        inset -3px -3px 0 var(--tier-border-dark),
        inset 0 0 0 1px rgba(255, 255, 255, 0.26),
        0 var(--image-shadow-y) var(--image-shadow-blur) rgba(17, 24, 39, 0.22),
        0 0 28px var(--tier-inner-glow);
}

.donate-card-vip-tier .donate-card-image span {
    font-size: clamp(36px, 3.6vw, 56px);
    letter-spacing: -0.05em;
    text-shadow:
        3px 3px 0 rgba(0, 0, 0, 0.26),
        0 0 20px rgba(255, 255, 255, 0.18);
}

.donate-card-vip-tier .donate-card-title-zone {
    position: relative;
    z-index: 5;
    width: 100%;
    flex: 1;
    min-height: 86px;
    padding: 18px 0 10px;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.donate-card-vip-tier h2 {
    margin: 0;
    max-width: 100%;
    color: #FFFFFF;
    font-size: clamp(22px, 2.1vw, 28px);
    line-height: 1.08;
    letter-spacing: -0.04em;
    text-align: center;
}

.donate-card-vip-tier p {
    font-size: 14px;
}

.donate-card-vip-tier .donate-card-footer strong {
    font-size: 21px;
}

.donate-card-vip-tier .donate-card-button {
    border-radius: 6px;
    box-shadow:
        inset 2px 2px 0 rgba(255, 255, 255, 0.16),
        inset -2px -2px 0 rgba(0, 0, 0, 0.34);
}

.donate-card-vip-tier-1 {
    --tier-border: #B87333;
    --tier-border-light: #F0A15A;
    --tier-border-dark: #5D3118;
    --tier-glow: rgba(226, 115, 45, 0.48);
    --tier-inner-glow: rgba(255, 142, 73, 0.24);
    --card-accent-1: rgba(205, 108, 53, 0.98);
    --card-accent-2: rgba(92, 48, 29, 0.96);
}

.donate-card-vip-tier-2 {
    --tier-border: #BFC4C9;
    --tier-border-light: #F0F5F8;
    --tier-border-dark: #5C646B;
    --tier-glow: rgba(221, 232, 239, 0.44);
    --tier-inner-glow: rgba(235, 245, 250, 0.22);
    --card-accent-1: rgba(225, 232, 237, 0.98);
    --card-accent-2: rgba(82, 92, 101, 0.96);
}

.donate-card-vip-tier-2 .donate-card-image span {
    color: #F8FCFF;
}

.donate-card-vip-tier-3 {
    --tier-border: #E2B23D;
    --tier-border-light: #FFE58A;
    --tier-border-dark: #8B5E13;
    --tier-glow: rgba(255, 205, 62, 0.55);
    --tier-inner-glow: rgba(255, 221, 98, 0.28);
    --card-accent-1: rgba(255, 213, 67, 0.98);
    --card-accent-2: rgba(121, 74, 18, 0.96);
}

.donate-card-vip-tier-4 {
    --tier-border: #48DDE8;
    --tier-border-light: #BFFFFF;
    --tier-border-dark: #137078;
    --tier-glow: rgba(75, 232, 245, 0.52);
    --tier-inner-glow: rgba(135, 255, 255, 0.26);
    --card-accent-1: rgba(83, 238, 245, 0.98);
    --card-accent-2: rgba(25, 91, 122, 0.96);
}

.donate-card-vip-tier-5 {
    --tier-border: #504A57;
    --tier-border-light: #8A7F91;
    --tier-border-dark: #18151D;
    --tier-glow: rgba(255, 42, 72, 0.52);
    --tier-inner-glow: rgba(255, 32, 72, 0.30);
    --card-accent-1: rgba(87, 78, 96, 0.98);
    --card-accent-2: rgba(22, 17, 24, 0.98);
}

.donate-card-vip-tier-5 .donate-card-image {
    background:
        radial-gradient(circle at 76% 28%, rgba(255, 26, 66, 0.72), transparent 28%),
        radial-gradient(circle at 26% 76%, rgba(255, 73, 28, 0.46), transparent 32%),
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.075) 0px,
            rgba(255, 255, 255, 0.075) 2px,
            rgba(0, 0, 0, 0.16) 2px,
            rgba(0, 0, 0, 0.16) 4px
        ),
        linear-gradient(135deg, var(--card-accent-1), rgba(120, 21, 34, 0.96) 48%, var(--card-accent-2));
}

.donate-card-vip-tier-5 .donate-card-image span {
    color: #FFF6F7;
    text-shadow:
        3px 3px 0 rgba(0, 0, 0, 0.36),
        0 0 22px rgba(255, 41, 72, 0.44),
        0 0 34px rgba(255, 255, 255, 0.16);
}

[data-theme="dark"] .shop-catalog-panel::before {
    background: rgba(65, 82, 124, 0.32);
}

[data-theme="dark"] .donate-card-vip-tier {
    border-color: var(--tier-border);
    box-shadow:
        inset 3px 3px 0 var(--tier-border-light),
        inset -3px -3px 0 var(--tier-border-dark),
        inset 0 0 0 6px rgba(0, 0, 0, 0.22),
        0 24px 64px rgba(0, 0, 0, 0.32),
        0 0 34px var(--tier-glow),
        0 0 0 1px rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .donate-card-vip-tier:hover,
[data-theme="dark"] .donate-card-vip-tier:focus-visible {
    border-color: var(--tier-border-light);
    box-shadow:
        inset 3px 3px 0 var(--tier-border-light),
        inset -3px -3px 0 var(--tier-border-dark),
        inset 0 0 0 6px rgba(0, 0, 0, 0.24),
        0 32px 76px rgba(0, 0, 0, 0.42),
        0 0 48px var(--tier-glow),
        0 0 0 1px rgba(255, 255, 255, 0.12);
}

@media (max-width: 1220px) {
    .shop-catalog-panel .shop-products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .shop-catalog-panel .shop-products,
    .shop-catalog-panel #shopItems.shop-products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .shop-hero-screen {
        padding: 120px 18px 58px;
    }

    .shop-catalog-section {
        padding: 72px 0;
    }

    .shop-catalog-panel {
        padding: 28px 16px 34px;
        border-radius: 28px;
    }

    .shop-catalog-panel::before {
        border-radius: 28px;
    }

    .shop-catalog-panel .shop-category-tabs {
        margin-bottom: 26px;
    }

    .shop-catalog-panel .shop-products,
    .shop-catalog-panel #shopItems.shop-products {
        grid-template-columns: 1fr;
    }

    .donate-card-vip-tier .donate-card-inner {
        padding: 22px;
    }
}


/* -------------------------
   Shop layout patch 19
   ------------------------- */

.shop-page {
    min-height: 100dvh;
    background:
        radial-gradient(circle at 16% 8%, rgba(255, 197, 197, 0.50), transparent 28%),
        radial-gradient(circle at 86% 4%, rgba(189, 213, 255, 0.62), transparent 34%),
        radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.62), transparent 34%),
        linear-gradient(135deg, #F6DADA 0%, #DDE9FF 48%, #F5F8FF 100%);
    background-attachment: fixed;
}

.shop-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.28), transparent 32%, rgba(95, 130, 200, 0.10) 72%, transparent),
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.34), transparent 42%);
}

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

.shop-hero-screen {
    min-height: auto;
    padding: 132px 24px 8px;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.shop-hero-content {
    position: relative;
    z-index: 2;
    max-width: 920px;
    text-align: center;
}

.shop-compact-eyebrow {
    margin: 0 0 12px;
    color: rgba(16, 33, 63, 0.66);
    font-size: clamp(13px, 1.4vw, 17px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.34em;
    text-transform: uppercase;
}

.shop-compact-title {
    margin: 0;
    color: var(--blue-text);
    font-size: clamp(58px, 9vw, 118px);
    font-weight: 800;
    line-height: 0.88;
    letter-spacing: -0.075em;
    text-transform: uppercase;
    text-shadow:
        0 16px 42px rgba(95, 130, 200, 0.18),
        0 2px 0 rgba(255, 255, 255, 0.70);
}

.shop-catalog-section {
    padding: 26px 0 96px;
    scroll-margin-top: 92px;
}

.shop-catalog-panel {
    padding-top: 20px;
}

.shop-catalog-panel::before {
    background: rgba(255, 255, 255, 0.22);
    filter: blur(20px);
}

.shop-catalog-panel .shop-category-tabs {
    margin-bottom: 34px;
}

[data-theme="dark"] .shop-page {
    background:
        radial-gradient(circle at 16% 8%, rgba(198, 107, 107, 0.24), transparent 30%),
        radial-gradient(circle at 86% 4%, rgba(95, 130, 200, 0.34), transparent 36%),
        radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.05), transparent 36%),
        linear-gradient(135deg, #111827 0%, #18233A 48%, #080D18 100%);
    background-attachment: fixed;
}

[data-theme="dark"] .shop-page::before {
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.06), transparent 32%, rgba(95, 130, 200, 0.12) 72%, transparent),
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.08), transparent 42%);
}

[data-theme="dark"] .shop-compact-eyebrow {
    color: rgba(238, 244, 255, 0.66);
}

[data-theme="dark"] .shop-compact-title {
    color: #EEF4FF;
    text-shadow:
        0 18px 46px rgba(0, 0, 0, 0.36),
        0 0 34px rgba(95, 130, 200, 0.22);
}

[data-theme="dark"] .shop-catalog-panel::before {
    background: rgba(95, 130, 200, 0.16);
}

@media (max-width: 700px) {
    .shop-hero-screen {
        padding: 116px 18px 4px;
    }

    .shop-catalog-section {
        padding: 22px 0 72px;
    }

    .shop-compact-eyebrow {
        letter-spacing: 0.22em;
    }
}


/* -------------------------
   Shop layout patch 20
   ------------------------- */

.shop-hero-screen {
    min-height: auto;
    padding: 132px 24px 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-hero-content {
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.shop-compact-eyebrow,
.shop-compact-title {
    text-align: center;
}

.shop-catalog-section {
    padding: 10px 0 104px;
}

.shop-catalog-container {
    max-width: 1540px;
}

.shop-catalog-panel {
    width: 100%;
    max-width: 1480px;
    padding: 0 24px 46px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.shop-catalog-panel::before {
    display: none;
}

.shop-catalog-panel .shop-category-tabs {
    margin: 0 auto 40px;
}

.shop-catalog-panel .shop-products {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    grid-template-columns: repeat(5, minmax(220px, 1fr));
    gap: 26px;
    align-items: stretch;
    justify-content: center;
}

.shop-catalog-panel #shopItems.shop-products {
    max-width: 1040px;
    grid-template-columns: repeat(3, minmax(230px, 1fr));
}

.donate-card {
    width: 100%;
    min-height: 0;
    aspect-ratio: 2 / 3;
    display: flex;
}

.donate-card-inner {
    width: 100%;
    min-height: 0;
    height: 100%;
    flex: 1;
}

.donate-card-vip-tier .donate-card-inner {
    padding: clamp(18px, 1.45vw, 24px);
}

.donate-card-vip-tier .donate-card-image {
    min-height: 0;
    height: auto;
    aspect-ratio: 1.42 / 1;
    margin-top: clamp(14px, 1.3vw, 20px);
}

.donate-card-vip-tier h2 {
    margin-top: clamp(16px, 1.4vw, 22px);
    font-size: clamp(18px, 1.55vw, 24px);
}

.donate-card-vip-tier p {
    font-size: clamp(13px, 0.95vw, 15px);
    line-height: 1.45;
}

.donate-card-vip-tier .donate-card-footer {
    padding-top: clamp(14px, 1.25vw, 22px);
}

.donate-card-vip-tier .donate-card-footer strong {
    font-size: clamp(20px, 1.45vw, 24px);
}

@media (max-width: 1380px) {
    .shop-catalog-container {
        max-width: 1260px;
    }

    .shop-catalog-panel .shop-products {
        grid-template-columns: repeat(3, minmax(240px, 1fr));
        max-width: 980px;
    }
}

@media (max-width: 900px) {
    .shop-catalog-panel .shop-products,
    .shop-catalog-panel #shopItems.shop-products {
        grid-template-columns: repeat(2, minmax(230px, 1fr));
        max-width: 720px;
    }
}

@media (max-width: 620px) {
    .shop-hero-screen {
        padding: 116px 18px 18px;
    }

    .shop-catalog-section {
        padding: 8px 0 76px;
    }

    .shop-catalog-panel {
        padding: 0 16px 34px;
    }

    .shop-catalog-panel .shop-category-tabs {
        width: 100%;
        max-width: 360px;
        margin-bottom: 28px;
    }

    .shop-category-tab {
        min-width: 0;
        width: 50%;
        padding-inline: 12px;
    }

    .shop-catalog-panel .shop-products,
    .shop-catalog-panel #shopItems.shop-products {
        grid-template-columns: minmax(0, 1fr);
        max-width: 340px;
    }
}

/* -------------------------
   Shop layout patch 21
   ------------------------- */

.shop-catalog-container {
    max-width: 1320px;
}

.shop-catalog-panel {
    max-width: 1320px;
}

.shop-catalog-panel .shop-products {
    max-width: 1220px;
    grid-template-columns: repeat(3, minmax(300px, 1fr));
    gap: 34px;
}

.shop-catalog-panel #shopItems.shop-products {
    max-width: 1220px;
    grid-template-columns: repeat(3, minmax(300px, 1fr));
}

.donate-card {
    aspect-ratio: 2 / 3;
}

.donate-card-vip-tier .donate-card-inner {
    padding: clamp(24px, 2.0vw, 32px);
}

.donate-card-vip-tier .donate-card-image {
    aspect-ratio: 1.44 / 1;
    margin-top: clamp(16px, 1.45vw, 24px);
}

.donate-card-vip-tier .donate-card-image span {
    font-size: clamp(42px, 3.7vw, 64px);
}

.donate-card-vip-tier h2 {
    margin-top: clamp(18px, 1.55vw, 26px);
    font-size: clamp(21px, 1.75vw, 28px);
}

.donate-card-vip-tier p {
    font-size: clamp(14px, 1.05vw, 16px);
}

.donate-card-vip-tier .donate-card-footer strong {
    font-size: clamp(22px, 1.65vw, 28px);
}

.donate-card-vip-tier-0 {
    --tier-border: #777777;
    --tier-border-light: #B4B4B4;
    --tier-border-dark: #3E3E3E;
    --tier-glow: rgba(126, 126, 126, 0.42);
    --tier-inner-glow: rgba(190, 190, 190, 0.20);
    --card-accent-1: rgba(142, 142, 142, 0.98);
    --card-accent-2: rgba(58, 58, 58, 0.96);
}

.donate-card-vip-tier-0 .donate-card-image {
    background:
        radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.12) 28%, transparent 58%),
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.08) 0px,
            rgba(255, 255, 255, 0.08) 3px,
            rgba(0, 0, 0, 0.13) 3px,
            rgba(0, 0, 0, 0.13) 6px
        ),
        linear-gradient(135deg, var(--card-accent-1), var(--card-accent-2));
}

.donate-card-vip-tier-1 {
    --tier-border: #dd9475;
    --tier-border-light: #FFC6AD;
    --tier-border-dark: #8D4D36;
    --tier-glow: rgba(221, 148, 117, 0.52);
    --tier-inner-glow: rgba(255, 190, 160, 0.26);
    --card-accent-1: rgba(221, 148, 117, 0.98);
    --card-accent-2: rgba(116, 58, 38, 0.96);
}

.donate-card-vip-tier-2 {
    --tier-border: #c0c0c0;
    --tier-border-light: #FFFFFF;
    --tier-border-dark: #666666;
    --tier-glow: rgba(192, 192, 192, 0.48);
    --tier-inner-glow: rgba(245, 245, 245, 0.24);
    --card-accent-1: rgba(232, 232, 232, 0.98);
    --card-accent-2: rgba(95, 102, 106, 0.96);
}

.donate-card-vip-tier-3 {
    --tier-border: #ffd700;
    --tier-border-light: #FFF3A1;
    --tier-border-dark: #957200;
    --tier-glow: rgba(255, 215, 0, 0.60);
    --tier-inner-glow: rgba(255, 231, 90, 0.32);
    --card-accent-1: rgba(255, 215, 0, 0.98);
    --card-accent-2: rgba(132, 86, 0, 0.96);
}

.donate-card-vip-tier-4 {
    --tier-border: #00fffc;
    --tier-border-light: #BFFFFF;
    --tier-border-dark: #007D86;
    --tier-glow: rgba(0, 255, 252, 0.58);
    --tier-inner-glow: rgba(120, 255, 255, 0.30);
    --card-accent-1: rgba(0, 255, 252, 0.98);
    --card-accent-2: rgba(0, 96, 118, 0.96);
}

.donate-card-vip-tier-5 {
    --tier-border: #050506;
    --tier-border-light: #4A1018;
    --tier-border-dark: #000000;
    --tier-glow: rgba(178, 0, 32, 0.72);
    --tier-inner-glow: rgba(255, 0, 48, 0.34);
    --card-accent-1: rgba(18, 18, 22, 0.98);
    --card-accent-2: rgba(0, 0, 0, 0.98);

    box-shadow:
        inset 3px 3px 0 #3E0B12,
        inset -3px -3px 0 #000000,
        inset 0 0 0 6px rgba(90, 0, 16, 0.32),
        0 24px 62px rgba(17, 24, 39, 0.22),
        0 0 26px rgba(255, 0, 38, 0.34),
        0 0 46px var(--tier-glow),
        0 0 0 1px rgba(255, 28, 60, 0.24);
}

.donate-card-vip-tier-5:hover,
.donate-card-vip-tier-5:focus-visible {
    border-color: #0A0A0D;
    box-shadow:
        inset 3px 3px 0 #66101C,
        inset -3px -3px 0 #000000,
        inset 0 0 0 6px rgba(120, 0, 24, 0.34),
        0 34px 82px rgba(17, 24, 39, 0.28),
        0 0 34px rgba(255, 0, 42, 0.42),
        0 0 62px var(--tier-glow),
        0 0 0 1px rgba(255, 42, 72, 0.36);
}

.donate-card-vip-tier-5::after {
    background:
        radial-gradient(circle at var(--frame-hot-x) var(--frame-hot-y), rgba(255, 230, 232, 1.00) 0 4%, rgba(255, 0, 48, 0.90) 9%, transparent 25%),
        linear-gradient(
            var(--frame-angle),
            rgba(0, 0, 0, 0.98) 0%,
            rgba(70, 0, 10, 0.98) 14%,
            rgba(255, 0, 48, 0.94) 24%,
            rgba(28, 0, 5, 0.98) 38%,
            rgba(0, 0, 0, 1.00) 52%,
            rgba(154, 0, 30, 0.96) 66%,
            rgba(255, 43, 74, 0.92) 77%,
            rgba(30, 0, 6, 0.98) 88%,
            rgba(0, 0, 0, 1.00) 100%
        );
    filter:
        saturate(1.80)
        brightness(1.20)
        drop-shadow(0 0 7px rgba(255, 0, 45, 0.72))
        drop-shadow(0 0 24px rgba(178, 0, 32, 0.62));
}

.donate-card-vip-tier-5 .donate-card-image {
    border-color: #050506;
    background:
        radial-gradient(circle at 78% 24%, rgba(255, 0, 48, 0.82), transparent 30%),
        radial-gradient(circle at 18% 82%, rgba(116, 0, 24, 0.72), transparent 34%),
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.055) 0px,
            rgba(255, 255, 255, 0.055) 2px,
            rgba(0, 0, 0, 0.24) 2px,
            rgba(0, 0, 0, 0.24) 4px
        ),
        linear-gradient(135deg, #17171C, #5D0011 46%, #000000);
    box-shadow:
        inset 3px 3px 0 #4A1018,
        inset -3px -3px 0 #000000,
        inset 0 0 0 1px rgba(255, 42, 72, 0.28),
        0 var(--image-shadow-y) var(--image-shadow-blur) rgba(17, 24, 39, 0.28),
        0 0 32px rgba(255, 0, 48, 0.30);
}

@media (max-width: 1120px) {
    .shop-catalog-panel .shop-products,
    .shop-catalog-panel #shopItems.shop-products {
        grid-template-columns: repeat(2, minmax(280px, 1fr));
        max-width: 820px;
    }
}

@media (max-width: 680px) {
    .shop-catalog-panel .shop-products,
    .shop-catalog-panel #shopItems.shop-products {
        grid-template-columns: minmax(0, 1fr);
        max-width: 360px;
    }
}


/* -------------------------
   Shop visual correction patch 22
   ------------------------- */

/* Убираем общий золотой вид со всех VIP-рамок. Рамка берёт материал строго из tier-переменных. */
.donate-card-vip-tier {
    border-color: var(--tier-border);
    background:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(255, 255, 255, 0.18), transparent 34%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(5, 8, 16, 0.36), transparent 46%),
        repeating-linear-gradient(
            96deg,
            rgba(255, 255, 255, 0.018) 0px,
            rgba(255, 255, 255, 0.018) 1px,
            rgba(255, 255, 255, 0.000) 2px,
            rgba(255, 255, 255, 0.000) 6px
        ),
        linear-gradient(145deg, rgba(50, 58, 76, 0.95), rgba(30, 37, 54, 0.98) 48%, rgba(62, 70, 84, 0.88));
    box-shadow:
        inset 3px 3px 0 var(--tier-border-light),
        inset -3px -3px 0 var(--tier-border-dark),
        inset 0 0 0 6px rgba(0, 0, 0, 0.16),
        0 26px 66px rgba(17, 24, 39, 0.22),
        0 0 26px var(--tier-glow),
        0 0 0 1px rgba(255, 255, 255, 0.10);
}

.donate-card-vip-tier:hover,
.donate-card-vip-tier:focus-visible {
    border-color: var(--tier-border);
    box-shadow:
        inset 3px 3px 0 var(--tier-border-light),
        inset -3px -3px 0 var(--tier-border-dark),
        inset 0 0 0 6px rgba(0, 0, 0, 0.18),
        0 34px 82px rgba(17, 24, 39, 0.28),
        0 0 34px var(--tier-glow),
        0 0 0 1px rgba(255, 255, 255, 0.14);
}

/* Материальная рамка, без золота по умолчанию. */
.donate-card-vip-tier::after {
    background:
        radial-gradient(circle at var(--frame-hot-x) var(--frame-hot-y), rgba(255, 255, 255, 0.58) 0 4%, rgba(255, 255, 255, 0.20) 10%, transparent 24%),
        linear-gradient(
            var(--frame-angle),
            var(--tier-border-dark) 0%,
            var(--tier-border) 18%,
            var(--tier-border-light) 31%,
            var(--tier-border) 44%,
            var(--tier-border-dark) 58%,
            var(--tier-border) 72%,
            var(--tier-border-light) 84%,
            var(--tier-border-dark) 100%
        );
    opacity: var(--frame-opacity);
    filter:
        saturate(1.12)
        brightness(1.05)
        drop-shadow(0 0 8px var(--tier-glow));
}

/* Позолоченность только у золотой рамки. */
.donate-card-vip-tier-3::after {
    background:
        radial-gradient(circle at var(--frame-hot-x) var(--frame-hot-y), rgba(255, 255, 255, 1.00) 0 4%, rgba(255, 244, 150, 0.92) 9%, transparent 25%),
        linear-gradient(
            var(--frame-angle),
            #6F5000 0%,
            #FFD700 15%,
            #FFF1A0 28%,
            #FFB800 42%,
            #8E6400 56%,
            #FFD700 70%,
            #FFF6B8 83%,
            #6F5000 100%
        );
    filter:
        saturate(1.62)
        brightness(1.24)
        drop-shadow(0 0 7px rgba(255, 242, 148, 0.82))
        drop-shadow(0 0 26px rgba(255, 190, 25, 0.62));
}

/* VIP V остаётся чёрным с кровавыми бликами, не золотым. */
.donate-card-vip-tier-5::after {
    background:
        radial-gradient(circle at var(--frame-hot-x) var(--frame-hot-y), rgba(255, 220, 224, 1.00) 0 4%, rgba(255, 0, 48, 0.90) 9%, transparent 25%),
        linear-gradient(
            var(--frame-angle),
            #000000 0%,
            #350008 14%,
            #B00022 25%,
            #09090D 40%,
            #000000 54%,
            #7A0018 67%,
            #FF2A48 78%,
            #100006 90%,
            #000000 100%
        );
    filter:
        saturate(1.78)
        brightness(1.14)
        drop-shadow(0 0 8px rgba(255, 0, 45, 0.68))
        drop-shadow(0 0 26px rgba(178, 0, 32, 0.58));
}

/* Возвращаем мягкий градиент как на главной кнопке. Картинка не сливается с материалом рамки. */
.donate-card-vip-tier .donate-card-image {
    background:
        radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.28) 32%, transparent 64%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.04) 58%, rgba(255, 255, 255, 0.12)),
        linear-gradient(90deg, #FFC5C5, #BDD5FF);
    border-color: var(--tier-border);
    box-shadow:
        inset 3px 3px 0 rgba(255, 255, 255, 0.42),
        inset -3px -3px 0 rgba(0, 0, 0, 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.24),
        0 var(--image-shadow-y) var(--image-shadow-blur) rgba(17, 24, 39, 0.24),
        0 0 24px var(--tier-inner-glow);
}

[data-theme="dark"] .donate-card-vip-tier .donate-card-image {
    background:
        radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.18) 32%, transparent 64%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.03) 58%, rgba(255, 255, 255, 0.08)),
        linear-gradient(90deg, #C66B6B, #5F82C8);
}

.donate-card-vip-tier .donate-card-image span {
    color: #FFFFFF;
    text-shadow:
        3px 3px 0 rgba(16, 24, 42, 0.42),
        0 0 18px rgba(255, 255, 255, 0.26),
        0 8px 24px rgba(17, 24, 39, 0.24);
}

/* Бейдж стал читаемым на блике: прозрачная тёмная плашка, а не белый текст на белом блике. */
.donate-card-vip-tier .donate-card-badge,
.donate-card-badge {
    color: #FFFFFF;
    background: rgba(10, 16, 30, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.38);
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.16),
        inset -1px -1px 0 rgba(0, 0, 0, 0.22),
        0 8px 20px rgba(17, 24, 39, 0.18);
}

/* Кнопка покупки в том же визуальном языке, что и главная кнопка сайта. */
.donate-card-button,
.donate-card-vip-tier .donate-card-button {
    background: linear-gradient(90deg, #FFC5C5, #BDD5FF);
    color: var(--blue-text);
    border: none;
    box-shadow:
        inset 2px 2px 0 rgba(255, 255, 255, 0.32),
        inset -2px -2px 0 rgba(70, 92, 140, 0.18),
        0 12px 26px rgba(90, 120, 180, 0.22);
}

[data-theme="dark"] .donate-card-button,
[data-theme="dark"] .donate-card-vip-tier .donate-card-button {
    background: linear-gradient(90deg, #C66B6B, #5F82C8);
    color: #FFFFFF;
}

.donate-card-button:hover,
.donate-card-vip-tier .donate-card-button:hover {
    filter: brightness(1.06);
    box-shadow:
        inset 2px 2px 0 rgba(255, 255, 255, 0.36),
        inset -2px -2px 0 rgba(70, 92, 140, 0.20),
        0 16px 34px rgba(90, 120, 180, 0.30);
}

/* Актуальная цена VIP 0. */
.donate-card-vip-tier-0 .donate-card-footer strong::after {
    content: "";
}

/* -------------------------
   Shop visual refinement patch 23
   ------------------------- */

/* Карточки делаем заметнее за счёт оттенка материала в самом фоне. */
.donate-card-vip-tier {
    background:
        radial-gradient(circle at 16% 14%, rgba(255, 255, 255, 0.14), transparent 30%),
        radial-gradient(circle at 84% 82%, var(--card-surface-glow), transparent 34%),
        radial-gradient(circle at 72% 18%, rgba(255, 255, 255, 0.05), transparent 26%),
        repeating-linear-gradient(
            96deg,
            rgba(255, 255, 255, 0.018) 0px,
            rgba(255, 255, 255, 0.018) 1px,
            rgba(255, 255, 255, 0.000) 2px,
            rgba(255, 255, 255, 0.000) 7px
        ),
        linear-gradient(145deg, var(--card-surface-1), var(--card-surface-2) 52%, var(--card-surface-3));
}

/* Бейдж делаем читаемым на фоне блика. */
.donate-card-vip-tier .donate-card-badge {
    background: rgba(17, 24, 39, 0.34);
    color: rgba(255, 255, 255, 0.96);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.18),
        0 10px 24px rgba(17, 24, 39, 0.10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* У картинок убираем рамку и объёмную окантовку: остаётся плоский пастельный блок. */
.donate-card-vip-tier .donate-card-image {
    border: none !important;
    box-shadow: none !important;
    border-radius: 22px;
    transform: none;
}

.donate-card-vip-tier .donate-card-image::before {
    background:
        radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.28), transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02) 52%, rgba(255, 255, 255, 0.10));
    opacity: 0.95;
}

.donate-card-vip-tier .donate-card-image::after {
    display: none;
}

.donate-card-vip-tier .donate-card-image span {
    color: rgba(255, 255, 255, 0.98);
    text-shadow:
        0 10px 24px rgba(17, 24, 39, 0.14),
        0 1px 0 rgba(255, 255, 255, 0.10);
}

.donate-card-vip-tier-0 {
    --card-surface-1: rgba(88, 93, 104, 0.96);
    --card-surface-2: rgba(60, 66, 77, 0.98);
    --card-surface-3: rgba(99, 106, 118, 0.94);
    --card-surface-glow: rgba(164, 169, 178, 0.18);
}

.donate-card-vip-tier-1 {
    --card-surface-1: rgba(100, 77, 74, 0.96);
    --card-surface-2: rgba(74, 55, 56, 0.98);
    --card-surface-3: rgba(113, 84, 80, 0.94);
    --card-surface-glow: rgba(221, 148, 117, 0.18);
}

.donate-card-vip-tier-2 {
    --card-surface-1: rgba(77, 86, 101, 0.96);
    --card-surface-2: rgba(61, 70, 84, 0.98);
    --card-surface-3: rgba(90, 100, 114, 0.94);
    --card-surface-glow: rgba(192, 192, 192, 0.18);
}

.donate-card-vip-tier-3 {
    --card-surface-1: rgba(106, 94, 66, 0.96);
    --card-surface-2: rgba(86, 74, 52, 0.98);
    --card-surface-3: rgba(118, 106, 73, 0.94);
    --card-surface-glow: rgba(255, 215, 0, 0.18);
}

.donate-card-vip-tier-4 {
    --card-surface-1: rgba(64, 92, 101, 0.96);
    --card-surface-2: rgba(50, 75, 84, 0.98);
    --card-surface-3: rgba(77, 106, 116, 0.94);
    --card-surface-glow: rgba(0, 255, 252, 0.16);
}

.donate-card-vip-tier-5 {
    --card-surface-1: rgba(32, 25, 31, 0.98);
    --card-surface-2: rgba(20, 15, 19, 0.99);
    --card-surface-3: rgba(44, 23, 28, 0.96);
    --card-surface-glow: rgba(188, 28, 54, 0.20);
}

/* У каждой картинки свой пастельный градиент, без яркой кислотности. */
.donate-card-vip-tier-0 .donate-card-image {
    background:
        radial-gradient(circle at 76% 24%, rgba(255, 255, 255, 0.18), transparent 30%),
        linear-gradient(135deg, #D8D7DE 0%, #C6CBD5 48%, #D3D0CA 100%);
}

.donate-card-vip-tier-1 .donate-card-image {
    background:
        radial-gradient(circle at 78% 26%, rgba(255, 255, 255, 0.18), transparent 30%),
        linear-gradient(135deg, #F0D0C5 0%, #E4C3B6 46%, #D6C6D4 100%);
}

.donate-card-vip-tier-2 .donate-card-image {
    background:
        radial-gradient(circle at 78% 26%, rgba(255, 255, 255, 0.18), transparent 30%),
        linear-gradient(135deg, #E6E7EB 0%, #D2D9E4 44%, #D7D9DF 100%);
}

.donate-card-vip-tier-3 .donate-card-image {
    background:
        radial-gradient(circle at 78% 26%, rgba(255, 255, 255, 0.20), transparent 30%),
        linear-gradient(135deg, #F5EDC1 0%, #EEDDAE 44%, #E5D2B1 100%);
}

.donate-card-vip-tier-4 .donate-card-image {
    background:
        radial-gradient(circle at 78% 26%, rgba(255, 255, 255, 0.20), transparent 30%),
        linear-gradient(135deg, #CDEDEA 0%, #C3E4EB 44%, #D1D9F1 100%);
}

.donate-card-vip-tier-5 .donate-card-image {
    background:
        radial-gradient(circle at 78% 26%, rgba(255, 255, 255, 0.12), transparent 30%),
        linear-gradient(135deg, #736772 0%, #655763 44%, #8A6470 100%);
    box-shadow: none !important;
}


/* -------------------------
   Shop image gloss + mirrored CD glare patch 24
   ------------------------- */

/* Отзеркаливаем именно CD-блик карточки, не меняя геометрию карточки и контента. */
.donate-card::before,
.donate-card-shine {
    transform: scaleX(-1) translateZ(16px);
    transform-origin: 50% 50%;
}

.donate-card::before {
    transform: scaleX(-1);
}

/* У картинок остаётся плоская форма без рамки, но появляется стеклянная глянцевость. */
.donate-card-vip-tier .donate-card-image {
    overflow: visible;
    border: none !important;
    box-shadow: none !important;
    border-radius: 24px;
    background:
        radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.24), transparent 29%),
        radial-gradient(circle at 84% 78%, var(--image-tone-glow), transparent 42%),
        linear-gradient(135deg, var(--image-gradient-1) 0%, var(--image-gradient-2) 48%, var(--image-gradient-3) 100%);
}

/* Мягкая внутренняя глянцевая плоскость в стиле сайта: пастель, стекло, без кислотности. */
.donate-card-vip-tier .donate-card-image::before {
    display: block;
    z-index: 1;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.06) 48%, rgba(255, 255, 255, 0.16)),
        radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.40), transparent 58%),
        linear-gradient(90deg, rgba(255, 197, 197, 0.10), rgba(189, 213, 255, 0.14));
    opacity: 1;
    mix-blend-mode: screen;
}

/* Центр блика находится внутри картинки, но сияние выходит за её пределы. */
.donate-card-vip-tier .donate-card-image::after {
    display: block;
    content: "";
    position: absolute;
    z-index: 3;
    inset: -54px;
    border-radius: 44px;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse at var(--image-gloss-x) var(--image-gloss-y),
            rgba(255, 255, 255, 0.94) 0%,
            rgba(255, 255, 255, 0.62) 8%,
            rgba(255, 255, 255, 0.22) 18%,
            rgba(255, 255, 255, 0.00) 42%
        ),
        linear-gradient(
            var(--image-gloss-angle),
            rgba(255, 255, 255, 0.00) 0%,
            rgba(255, 255, 255, 0.00) 34%,
            rgba(255, 255, 255, 0.62) 47%,
            rgba(255, 255, 255, 0.16) 55%,
            rgba(255, 255, 255, 0.00) 70%,
            rgba(255, 255, 255, 0.00) 100%
        ),
        conic-gradient(
            from var(--cd-phase) at var(--image-gloss-x) var(--image-gloss-y),
            rgba(255, 140, 150, 0.24) 0deg,
            rgba(255, 220, 160, 0.20) 70deg,
            rgba(180, 235, 220, 0.18) 138deg,
            rgba(160, 205, 255, 0.22) 212deg,
            rgba(210, 170, 240, 0.18) 292deg,
            rgba(255, 140, 150, 0.24) 360deg
        );
    background-size: 120% 120%, 150% 150%, 135% 135%;
    background-position:
        var(--image-gloss-x) var(--image-gloss-y),
        calc(var(--image-gloss-x) + var(--image-gloss-shift-x)) calc(var(--image-gloss-y) + var(--image-gloss-shift-y)),
        var(--image-gloss-x) var(--image-gloss-y);
    opacity: var(--image-gloss-opacity);
    filter:
        saturate(1.10)
        brightness(1.16)
        blur(var(--image-gloss-blur));
    mix-blend-mode: screen;
    transform: translate3d(calc(var(--image-gloss-shift-x) * 0.20), calc(var(--image-gloss-shift-y) * 0.20), 0);
    transition:
        opacity var(--transition-fast),
        background-position 0.12s linear,
        filter var(--transition-fast),
        transform 0.12s linear;
}

.donate-card-vip-tier .donate-card-image span {
    z-index: 5;
    color: rgba(255, 255, 255, 0.98);
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.14),
        0 8px 22px rgba(17, 24, 39, 0.20);
}

/* Пастельные градиенты картинок: разные по VIP, но в общей палитре сайта. */
.donate-card-vip-tier-0 {
    --image-gradient-1: #D9DCE4;
    --image-gradient-2: #C9D0DC;
    --image-gradient-3: #D8D2CC;
    --image-tone-glow: rgba(206, 211, 222, 0.42);
}

.donate-card-vip-tier-1 {
    --image-gradient-1: #F2C9BD;
    --image-gradient-2: #DDB2AA;
    --image-gradient-3: #C7D3EA;
    --image-tone-glow: rgba(221, 148, 117, 0.34);
}

.donate-card-vip-tier-2 {
    --image-gradient-1: #EDF0F6;
    --image-gradient-2: #CFD8E8;
    --image-gradient-3: #E7D3D6;
    --image-tone-glow: rgba(200, 208, 220, 0.36);
}

.donate-card-vip-tier-3 {
    --image-gradient-1: #F5E7B5;
    --image-gradient-2: #E8D29A;
    --image-gradient-3: #D8D9F0;
    --image-tone-glow: rgba(255, 215, 0, 0.34);
}

.donate-card-vip-tier-4 {
    --image-gradient-1: #CBEFEB;
    --image-gradient-2: #B9DDEC;
    --image-gradient-3: #D8D3F0;
    --image-tone-glow: rgba(0, 255, 252, 0.24);
}

.donate-card-vip-tier-5 {
    --image-gradient-1: #756C7A;
    --image-gradient-2: #564C5E;
    --image-gradient-3: #8A6670;
    --image-tone-glow: rgba(178, 20, 42, 0.34);
}

[data-theme="dark"] .donate-card-vip-tier .donate-card-image::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.23), rgba(255, 255, 255, 0.04) 48%, rgba(255, 255, 255, 0.11)),
        radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.26), transparent 58%),
        linear-gradient(90deg, rgba(198, 107, 107, 0.12), rgba(95, 130, 200, 0.16));
}

/* -------------------------
   Shop image refinement patch 25
   ------------------------- */

/* Убираем ощущение отдельной далёкой рамки вокруг картинки: блик остаётся рядом с картинкой. */
.donate-card-vip-tier .donate-card-image {
    overflow: visible;
    border: none !important;
    border-radius: 24px;
    box-shadow: none !important;
    background:
        radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.30), transparent 28%),
        radial-gradient(circle at 86% 82%, var(--image-tone-glow), transparent 44%),
        linear-gradient(135deg, var(--image-gradient-1) 0%, var(--image-gradient-2) 48%, var(--image-gradient-3) 100%);
}

/* Внутренняя стеклянная поверхность без рамки. */
.donate-card-vip-tier .donate-card-image::before {
    display: block;
    z-index: 1;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.055) 46%, rgba(255, 255, 255, 0.13)),
        radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.34), transparent 58%),
        radial-gradient(circle at 18% 86%, rgba(255, 255, 255, 0.10), transparent 36%);
    opacity: 1;
    mix-blend-mode: screen;
}

/* Блик картинки: центр находится внутри картинки, наружу выходит только мягкий ореол, без далёкой рамки. */
.donate-card-vip-tier .donate-card-image::after {
    display: block;
    content: "";
    position: absolute;
    z-index: 3;
    inset: -18px;
    padding: 0;
    border-radius: 34px;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse at var(--image-gloss-x) var(--image-gloss-y),
            rgba(255, 255, 255, 0.92) 0%,
            rgba(255, 255, 255, 0.58) 8%,
            rgba(255, 255, 255, 0.22) 18%,
            rgba(255, 255, 255, 0.00) 42%
        ),
        linear-gradient(
            var(--image-gloss-angle),
            rgba(255, 255, 255, 0.00) 0%,
            rgba(255, 255, 255, 0.00) 33%,
            rgba(255, 255, 255, 0.50) 47%,
            rgba(255, 255, 255, 0.15) 56%,
            rgba(255, 255, 255, 0.00) 70%,
            rgba(255, 255, 255, 0.00) 100%
        ),
        conic-gradient(
            from var(--cd-phase) at var(--image-gloss-x) var(--image-gloss-y),
            rgba(255, 158, 166, 0.22) 0deg,
            rgba(255, 215, 155, 0.18) 70deg,
            rgba(176, 232, 216, 0.16) 138deg,
            rgba(155, 202, 250, 0.20) 212deg,
            rgba(205, 170, 232, 0.16) 292deg,
            rgba(255, 158, 166, 0.22) 360deg
        );
    background-size: 112% 112%, 132% 132%, 120% 120%;
    background-position:
        var(--image-gloss-x) var(--image-gloss-y),
        calc(var(--image-gloss-x) + var(--image-gloss-shift-x)) calc(var(--image-gloss-y) + var(--image-gloss-shift-y)),
        var(--image-gloss-x) var(--image-gloss-y);
    opacity: calc(var(--image-gloss-opacity) * 0.82);
    filter:
        saturate(1.08)
        brightness(1.12)
        blur(calc(var(--image-gloss-blur) * 0.78));
    mix-blend-mode: screen;
    transform: translate3d(calc(var(--image-gloss-shift-x) * 0.14), calc(var(--image-gloss-shift-y) * 0.14), 0);
    -webkit-mask: none;
    mask: none;
    box-shadow: none;
}

/* Градиенты картинок привязаны к теме каждой VIP-карточки, но выдержаны в пастельной палитре сайта. */
.donate-card-vip-tier-0 {
    --image-gradient-1: #D5D9E2;
    --image-gradient-2: #BFC7D2;
    --image-gradient-3: #D2CEC8;
    --image-tone-glow: rgba(192, 199, 210, 0.38);
}

.donate-card-vip-tier-1 {
    --image-gradient-1: #F1C1B1;
    --image-gradient-2: #DFA38F;
    --image-gradient-3: #C8CFE8;
    --image-tone-glow: rgba(221, 148, 117, 0.38);
}

.donate-card-vip-tier-2 {
    --image-gradient-1: #F1F3F7;
    --image-gradient-2: #CBD4DF;
    --image-gradient-3: #D9E2F3;
    --image-tone-glow: rgba(192, 192, 192, 0.36);
}

.donate-card-vip-tier-3 {
    --image-gradient-1: #F8E9B7;
    --image-gradient-2: #E9C96F;
    --image-gradient-3: #EFC5A9;
    --image-tone-glow: rgba(255, 215, 0, 0.40);
}

.donate-card-vip-tier-4 {
    --image-gradient-1: #C9F1ED;
    --image-gradient-2: #A8DEE8;
    --image-gradient-3: #C8D7F4;
    --image-tone-glow: rgba(0, 255, 252, 0.28);
}

.donate-card-vip-tier-5 {
    --image-gradient-1: #6F6470;
    --image-gradient-2: #2A242D;
    --image-gradient-3: #8B4A56;
    --image-tone-glow: rgba(190, 24, 50, 0.38);
}

/* Для незерита блик чуть холоднее и кровавее, но без кислотной заливки. */
.donate-card-vip-tier-5 .donate-card-image::after {
    background:
        radial-gradient(
            ellipse at var(--image-gloss-x) var(--image-gloss-y),
            rgba(255, 238, 240, 0.86) 0%,
            rgba(255, 78, 102, 0.44) 10%,
            rgba(170, 16, 42, 0.20) 21%,
            rgba(255, 255, 255, 0.00) 44%
        ),
        linear-gradient(
            var(--image-gloss-angle),
            rgba(255, 255, 255, 0.00) 0%,
            rgba(255, 255, 255, 0.00) 34%,
            rgba(255, 230, 233, 0.40) 47%,
            rgba(170, 16, 42, 0.22) 57%,
            rgba(255, 255, 255, 0.00) 72%,
            rgba(255, 255, 255, 0.00) 100%
        ),
        conic-gradient(
            from var(--cd-phase) at var(--image-gloss-x) var(--image-gloss-y),
            rgba(255, 82, 104, 0.20) 0deg,
            rgba(208, 54, 82, 0.18) 86deg,
            rgba(118, 80, 112, 0.16) 172deg,
            rgba(210, 82, 104, 0.18) 258deg,
            rgba(255, 82, 104, 0.20) 360deg
        );
}

[data-theme="dark"] .donate-card-vip-tier .donate-card-image::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.035) 46%, rgba(255, 255, 255, 0.10)),
        radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.24), transparent 58%),
        radial-gradient(circle at 18% 86%, rgba(255, 255, 255, 0.07), transparent 36%);
}

/* -------------------------
   Shop image/material refinement patch 26
   ------------------------- */

/* Бейдж "Привилегия" убран; освободившееся место отдаём под крупную плоскую картинку. */
.donate-card-badge,
.donate-card-vip-tier .donate-card-badge {
    display: none !important;
}

/* Картинка крупнее, плоская, без вынесенной рамки. Градиент берётся из темы VIP-карточки. */
.donate-card-vip-tier .donate-card-image {
    overflow: visible;
    min-height: clamp(190px, 16.2vw, 242px);
    aspect-ratio: 1.28 / 1;
    margin-top: 0;
    border: none !important;
    border-radius: 24px;
    box-shadow: none !important;
    background:
        radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.32), transparent 30%),
        radial-gradient(circle at 82% 84%, var(--image-tone-glow), transparent 46%),
        linear-gradient(135deg, var(--image-gradient-1) 0%, var(--image-gradient-2) 48%, var(--image-gradient-3) 100%) !important;
}

/* Стеклянность картинки без окантовки. */
.donate-card-vip-tier .donate-card-image::before {
    display: block;
    z-index: 1;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.045) 48%, rgba(255, 255, 255, 0.11)),
        radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.31), transparent 58%),
        radial-gradient(circle at 18% 88%, rgba(255, 255, 255, 0.075), transparent 36%);
    opacity: 1;
    mix-blend-mode: screen;
}

/* Рамку/ореол картинки уменьшаем примерно в 10 раз: центр блика внутри картинки, наружу выходит только тонкая засветка. */
.donate-card-vip-tier .donate-card-image::after {
    display: block;
    content: "";
    position: absolute;
    z-index: 7;
    inset: -2px;
    border-radius: 26px;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse at var(--image-gloss-x) var(--image-gloss-y),
            var(--image-gloss-core) 0%,
            var(--image-gloss-mid) 9%,
            var(--image-gloss-soft) 21%,
            rgba(255, 255, 255, 0.00) 44%
        ),
        linear-gradient(
            var(--image-gloss-angle),
            rgba(255, 255, 255, 0.00) 0%,
            rgba(255, 255, 255, 0.00) 35%,
            var(--image-gloss-line) 47%,
            var(--image-gloss-line-soft) 57%,
            rgba(255, 255, 255, 0.00) 72%,
            rgba(255, 255, 255, 0.00) 100%
        );
    background-size: 108% 108%, 118% 118%;
    background-position:
        var(--image-gloss-x) var(--image-gloss-y),
        calc(var(--image-gloss-x) + var(--image-gloss-shift-x)) calc(var(--image-gloss-y) + var(--image-gloss-shift-y));
    opacity: calc(var(--image-gloss-opacity) * 0.72);
    filter:
        saturate(1.04)
        brightness(1.10)
        blur(calc(var(--image-gloss-blur) * 0.42));
    mix-blend-mode: screen;
    transform: translate3d(calc(var(--image-gloss-shift-x) * 0.05), calc(var(--image-gloss-shift-y) * 0.05), 0);
    -webkit-mask: none;
    mask: none;
    box-shadow: none;
}

/* Первые три VIP получают белый глянцевый блик, без цветного перелива. */
.donate-card-vip-tier-0,
.donate-card-vip-tier-1,
.donate-card-vip-tier-2 {
    --image-gloss-core: rgba(255, 255, 255, 0.92);
    --image-gloss-mid: rgba(255, 255, 255, 0.58);
    --image-gloss-soft: rgba(255, 255, 255, 0.20);
    --image-gloss-line: rgba(255, 255, 255, 0.46);
    --image-gloss-line-soft: rgba(255, 255, 255, 0.14);
}

/* У старших VIP блик остаётся тематическим, но не кислотным. */
.donate-card-vip-tier-3 {
    --image-gloss-core: rgba(255, 255, 255, 0.88);
    --image-gloss-mid: rgba(255, 238, 170, 0.48);
    --image-gloss-soft: rgba(255, 210, 80, 0.16);
    --image-gloss-line: rgba(255, 240, 180, 0.40);
    --image-gloss-line-soft: rgba(255, 210, 80, 0.13);
}

.donate-card-vip-tier-4 {
    --image-gloss-core: rgba(245, 255, 255, 0.88);
    --image-gloss-mid: rgba(185, 245, 245, 0.44);
    --image-gloss-soft: rgba(95, 210, 220, 0.15);
    --image-gloss-line: rgba(210, 255, 255, 0.38);
    --image-gloss-line-soft: rgba(100, 220, 228, 0.12);
}

.donate-card-vip-tier-5 {
    --image-gloss-core: rgba(255, 244, 255, 0.78);
    --image-gloss-mid: rgba(178, 104, 210, 0.36);
    --image-gloss-soft: rgba(112, 48, 154, 0.18);
    --image-gloss-line: rgba(206, 154, 232, 0.32);
    --image-gloss-line-soft: rgba(110, 54, 150, 0.13);
}

/* Пастельные градиенты картинок по материалу карточки — без красно-синей общей заливки. */
.donate-card-vip-tier-0 {
    --image-gradient-1: #E1E3E7;
    --image-gradient-2: #B8C0CA;
    --image-gradient-3: #D4D0C8;
    --image-tone-glow: rgba(194, 200, 210, 0.34);
}

.donate-card-vip-tier-1 {
    --image-gradient-1: #F0CABA;
    --image-gradient-2: #D99A80;
    --image-gradient-3: #E8BBA8;
    --image-tone-glow: rgba(221, 148, 117, 0.36);
}

.donate-card-vip-tier-2 {
    --image-gradient-1: #F3F5F7;
    --image-gradient-2: #C5CDD6;
    --image-gradient-3: #E0E5EA;
    --image-tone-glow: rgba(192, 192, 192, 0.34);
}

.donate-card-vip-tier-3 {
    --image-gradient-1: #FFF0BD;
    --image-gradient-2: #E5C25D;
    --image-gradient-3: #F2DC9A;
    --image-tone-glow: rgba(255, 215, 0, 0.38);
}

.donate-card-vip-tier-4 {
    --image-gradient-1: #D0F4F1;
    --image-gradient-2: #8EDCE0;
    --image-gradient-3: #C6EEF0;
    --image-tone-glow: rgba(0, 255, 252, 0.26);
}

.donate-card-vip-tier-5 {
    --image-gradient-1: #675477;
    --image-gradient-2: #221A2B;
    --image-gradient-3: #4A315F;
    --image-tone-glow: rgba(112, 54, 150, 0.34);
}

/* Незеритовая рамка теперь чёрно-фиолетовая, без кровавой основной рамки. */
.donate-card-vip-tier-5 {
    --tier-border: #07050B;
    --tier-border-light: #6F4A93;
    --tier-border-dark: #000000;
    --tier-glow: rgba(116, 74, 155, 0.34);
    --tier-inner-glow: rgba(136, 83, 180, 0.22);
    --card-surface-glow: rgba(116, 74, 155, 0.20);
}

.donate-card-vip-tier-5::after {
    background:
        radial-gradient(circle at var(--frame-hot-x) var(--frame-hot-y), rgba(238, 222, 255, 0.92) 0 4%, rgba(142, 89, 190, 0.70) 9%, transparent 25%),
        linear-gradient(
            var(--frame-angle),
            #000000 0%,
            #1B1025 15%,
            #5D3C7A 27%,
            #09070F 42%,
            #000000 56%,
            #3D245A 69%,
            #8A5DB2 80%,
            #120A1B 91%,
            #000000 100%
        );
    filter:
        saturate(1.28)
        brightness(1.06)
        drop-shadow(0 0 8px rgba(142, 89, 190, 0.58))
        drop-shadow(0 0 24px rgba(75, 38, 115, 0.54));
}

/* На тёмной теме не возвращаем старый красно-синий градиент. */
[data-theme="dark"] .donate-card-vip-tier .donate-card-image {
    background:
        radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.22), transparent 30%),
        radial-gradient(circle at 82% 84%, var(--image-tone-glow), transparent 46%),
        linear-gradient(135deg, var(--image-gradient-1) 0%, var(--image-gradient-2) 48%, var(--image-gradient-3) 100%) !important;
}

[data-theme="dark"] .donate-card-vip-tier .donate-card-image::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.034) 48%, rgba(255, 255, 255, 0.085)),
        radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.22), transparent 58%),
        radial-gradient(circle at 18% 88%, rgba(255, 255, 255, 0.055), transparent 36%);
}

/* -------------------------
   Shop image/material refinement patch 27
   ------------------------- */

/* VIP 0-II: основной CD-блик карточки только белый/серебряный, без радужного спектра. */
.donate-card-vip-tier-0::before,
.donate-card-vip-tier-1::before,
.donate-card-vip-tier-2::before {
    background:
        radial-gradient(ellipse at var(--cd-light-x) var(--cd-light-y), rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.56) 9%, rgba(255, 255, 255, 0.16) 24%, transparent 50%),
        conic-gradient(
            from var(--cd-phase) at var(--cd-wave-x) var(--cd-wave-y),
            rgba(255, 255, 255, 0.84) 0deg,
            rgba(216, 224, 232, 0.54) 44deg,
            rgba(255, 255, 255, 0.72) 92deg,
            rgba(178, 188, 198, 0.34) 140deg,
            rgba(255, 255, 255, 0.66) 190deg,
            rgba(205, 215, 226, 0.46) 244deg,
            rgba(255, 255, 255, 0.76) 302deg,
            rgba(255, 255, 255, 0.84) 360deg
        ),
        repeating-radial-gradient(
            circle at 50% 50%,
            rgba(255, 255, 255, 0.00) 0px,
            rgba(255, 255, 255, 0.00) 5px,
            rgba(255, 255, 255, 0.22) 6px,
            rgba(255, 255, 255, 0.00) 8px,
            rgba(255, 255, 255, 0.00) 13px
        ),
        repeating-linear-gradient(
            var(--cd-line-angle),
            rgba(255, 255, 255, 0.00) 0px,
            rgba(255, 255, 255, 0.00) 13px,
            rgba(255, 255, 255, 0.28) 14px,
            rgba(255, 255, 255, 0.00) 16px,
            rgba(255, 255, 255, 0.00) 30px
        );
    filter: saturate(0) brightness(1.42) contrast(1.08);
}

.donate-card-vip-tier-0 .donate-card-shine,
.donate-card-vip-tier-1 .donate-card-shine,
.donate-card-vip-tier-2 .donate-card-shine {
    background:
        linear-gradient(
            var(--cd-angle),
            transparent 0%,
            rgba(255, 255, 255, 0.00) 18%,
            rgba(255, 255, 255, 0.16) 31%,
            rgba(255, 255, 255, 0.82) 43%,
            rgba(255, 255, 255, 0.36) 51%,
            rgba(220, 230, 240, 0.22) 62%,
            transparent 100%
        ),
        repeating-linear-gradient(
            calc(var(--cd-line-angle) + 18deg),
            rgba(255, 255, 255, 0.00) 0px,
            rgba(255, 255, 255, 0.00) 15px,
            rgba(255, 255, 255, 0.28) 16px,
            rgba(255, 255, 255, 0.00) 18px,
            rgba(255, 255, 255, 0.00) 33px
        );
    filter: saturate(0) brightness(1.34) contrast(1.08) blur(0.12px);
}

/* Картинки VIP: общий глянцевый материал без кислотности, по стилю как у незеритовой. */
.donate-card-vip-tier .donate-card-image {
    min-height: clamp(198px, 16.8vw, 254px);
    background-size: 100% 100% !important;
}

/* Камень: тёмно-серый / серый / светло-серый, не плоский. */
.donate-card-vip-tier-0 .donate-card-image {
    background:
        radial-gradient(circle at 75% 25%, rgba(238, 242, 246, 0.52), transparent 27%),
        radial-gradient(circle at 22% 78%, rgba(255, 255, 255, 0.26), transparent 33%),
        radial-gradient(ellipse at 50% 106%, rgba(32, 36, 43, 0.48), transparent 58%),
        linear-gradient(135deg, #2E333B 0%, #737A84 42%, #D7DCE2 70%, #4B515A 100%) !important;
}

/* Медь: тёплая, чуть темнее и благороднее, без кислотного оранжевого. */
.donate-card-vip-tier-1 .donate-card-image {
    background:
        radial-gradient(circle at 76% 26%, rgba(255, 226, 203, 0.55), transparent 28%),
        radial-gradient(circle at 24% 78%, rgba(151, 75, 47, 0.34), transparent 36%),
        radial-gradient(ellipse at 50% 104%, rgba(70, 35, 27, 0.42), transparent 58%),
        linear-gradient(135deg, #6C3829 0%, #C47B59 42%, #F1C0A8 67%, #8E4A36 100%) !important;
}

/* Железо: яркие белые и серебряные света. */
.donate-card-vip-tier-2 .donate-card-image {
    background:
        radial-gradient(circle at 72% 24%, rgba(255, 255, 255, 0.88), transparent 26%),
        radial-gradient(circle at 18% 72%, rgba(255, 255, 255, 0.44), transparent 32%),
        radial-gradient(ellipse at 50% 106%, rgba(92, 101, 112, 0.42), transparent 58%),
        linear-gradient(135deg, #7D8792 0%, #F8FBFF 34%, #B8C1CB 58%, #FFFFFF 73%, #8F99A5 100%) !important;
}

/* Золото: премиальнее — глубокая база + мягкие кремовые света. */
.donate-card-vip-tier-3 .donate-card-image {
    background:
        radial-gradient(circle at 74% 23%, rgba(255, 255, 232, 0.82), transparent 26%),
        radial-gradient(circle at 28% 76%, rgba(255, 221, 115, 0.38), transparent 34%),
        radial-gradient(ellipse at 50% 108%, rgba(128, 82, 15, 0.44), transparent 60%),
        linear-gradient(135deg, #7B5011 0%, #D8A836 32%, #FFF0A8 55%, #E7B93D 72%, #916117 100%) !important;
}

/* Алмаз: премиальный холодный градиент с объёмом и мягким сиянием. */
.donate-card-vip-tier-4 .donate-card-image {
    background:
        radial-gradient(circle at 73% 23%, rgba(245, 255, 255, 0.84), transparent 25%),
        radial-gradient(circle at 22% 76%, rgba(157, 244, 240, 0.44), transparent 36%),
        radial-gradient(ellipse at 50% 108%, rgba(17, 92, 104, 0.40), transparent 60%),
        linear-gradient(135deg, #0D6671 0%, #2ED3D3 32%, #CFFFFF 56%, #54E6E4 72%, #137986 100%) !important;
}

/* Незерит оставляем в удачной логике, но чуть усиливаем фиолетовый объём. */
.donate-card-vip-tier-5 .donate-card-image {
    background:
        radial-gradient(circle at 76% 28%, rgba(159, 96, 202, 0.72), transparent 28%),
        radial-gradient(circle at 26% 76%, rgba(89, 52, 126, 0.46), transparent 32%),
        radial-gradient(ellipse at 50% 108%, rgba(0, 0, 0, 0.48), transparent 60%),
        linear-gradient(135deg, #675477 0%, #2A1D36 38%, #7C4FA3 58%, #221A2B 100%) !important;
}

/* Глянцевость поверх картинок: бликовый центр остаётся в картинке, но свет может мягко выходить за край. */
.donate-card-vip-tier .donate-card-image::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.035) 46%, rgba(255, 255, 255, 0.09)),
        radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.32), transparent 54%),
        radial-gradient(circle at 18% 88%, rgba(255, 255, 255, 0.075), transparent 34%);
}

.donate-card-vip-tier .donate-card-image::after {
    inset: -2px;
    border-radius: 26px;
    opacity: calc(var(--image-gloss-opacity) * 0.82);
    filter:
        saturate(1.08)
        brightness(1.16)
        blur(calc(var(--image-gloss-blur) * 0.36));
}

/* Камень, медь и железо: глянец строго белый. */
.donate-card-vip-tier-0,
.donate-card-vip-tier-1,
.donate-card-vip-tier-2 {
    --image-gloss-core: rgba(255, 255, 255, 0.96);
    --image-gloss-mid: rgba(255, 255, 255, 0.64);
    --image-gloss-soft: rgba(255, 255, 255, 0.20);
    --image-gloss-line: rgba(255, 255, 255, 0.50);
    --image-gloss-line-soft: rgba(255, 255, 255, 0.16);
}

/* Текст на светлых картинках читается за счёт плотной тени, не через отдельную рамку. */
.donate-card-vip-tier-2 .donate-card-image span,
.donate-card-vip-tier-3 .donate-card-image span,
.donate-card-vip-tier-4 .donate-card-image span {
    color: #FFFFFF;
    text-shadow:
        3px 3px 0 rgba(0, 0, 0, 0.30),
        0 0 24px rgba(0, 0, 0, 0.22),
        0 0 18px rgba(255, 255, 255, 0.22);
}

[data-theme="dark"] .donate-card-vip-tier-0 .donate-card-image {
    background:
        radial-gradient(circle at 75% 25%, rgba(238, 242, 246, 0.42), transparent 27%),
        radial-gradient(circle at 22% 78%, rgba(255, 255, 255, 0.18), transparent 33%),
        radial-gradient(ellipse at 50% 106%, rgba(14, 18, 24, 0.56), transparent 58%),
        linear-gradient(135deg, #1E242C 0%, #5D6570 42%, #B7BEC8 70%, #373E49 100%) !important;
}

[data-theme="dark"] .donate-card-vip-tier-1 .donate-card-image {
    background:
        radial-gradient(circle at 76% 26%, rgba(255, 226, 203, 0.42), transparent 28%),
        radial-gradient(circle at 24% 78%, rgba(151, 75, 47, 0.30), transparent 36%),
        radial-gradient(ellipse at 50% 104%, rgba(35, 18, 14, 0.54), transparent 58%),
        linear-gradient(135deg, #4C261C 0%, #A8644A 42%, #D9A38D 67%, #6B3427 100%) !important;
}

[data-theme="dark"] .donate-card-vip-tier-2 .donate-card-image {
    background:
        radial-gradient(circle at 72% 24%, rgba(255, 255, 255, 0.76), transparent 26%),
        radial-gradient(circle at 18% 72%, rgba(255, 255, 255, 0.34), transparent 32%),
        radial-gradient(ellipse at 50% 106%, rgba(42, 49, 58, 0.54), transparent 58%),
        linear-gradient(135deg, #59636F 0%, #E8EEF5 34%, #AAB5C1 58%, #FFFFFF 73%, #65707C 100%) !important;
}

[data-theme="dark"] .donate-card-vip-tier-3 .donate-card-image {
    background:
        radial-gradient(circle at 74% 23%, rgba(255, 255, 232, 0.72), transparent 26%),
        radial-gradient(circle at 28% 76%, rgba(255, 221, 115, 0.32), transparent 34%),
        radial-gradient(ellipse at 50% 108%, rgba(67, 42, 8, 0.55), transparent 60%),
        linear-gradient(135deg, #5C3A0B 0%, #C29228 32%, #F4DC85 55%, #C99C2B 72%, #6A430E 100%) !important;
}

[data-theme="dark"] .donate-card-vip-tier-4 .donate-card-image {
    background:
        radial-gradient(circle at 73% 23%, rgba(245, 255, 255, 0.74), transparent 25%),
        radial-gradient(circle at 22% 76%, rgba(157, 244, 240, 0.34), transparent 36%),
        radial-gradient(ellipse at 50% 108%, rgba(7, 48, 56, 0.54), transparent 60%),
        linear-gradient(135deg, #0B4E58 0%, #20B7BC 32%, #A9EEF0 56%, #3FCBD0 72%, #0E5B67 100%) !important;
}

[data-theme="dark"] .donate-card-vip-tier-5 .donate-card-image {
    background:
        radial-gradient(circle at 76% 28%, rgba(159, 96, 202, 0.62), transparent 28%),
        radial-gradient(circle at 26% 76%, rgba(89, 52, 126, 0.40), transparent 32%),
        radial-gradient(ellipse at 50% 108%, rgba(0, 0, 0, 0.60), transparent 60%),
        linear-gradient(135deg, #4B3A58 0%, #1A1222 38%, #5A347A 58%, #15101C 100%) !important;
}

/* -------------------------
   Shop border glare refinement patch 28
   ------------------------- */

.donate-card {
    --frame-edge-x: 50%;
    --frame-edge-y: 1.2%;
    --image-border-x: 50%;
    --image-border-y: 2%;
}

.donate-card-vip-tier:hover,
.donate-card-vip-tier:focus-visible {
    --frame-opacity: 1;
    --frame-glow: 0.92;
    --image-gloss-opacity: 1;
}

/* Яркий блик строго по обводке карточки: ядро остаётся на самой рамке, наружу уходит только свечение. */
.donate-card-vip-tier::after {
    z-index: 9;
    padding: 3px;
    background:
        radial-gradient(
            circle at var(--frame-edge-x) var(--frame-edge-y),
            rgba(255, 255, 255, 1.00) 0 2.8%,
            rgba(255, 255, 255, 0.92) 5.5%,
            color-mix(in srgb, var(--tier-border-light) 86%, white 14%) 10%,
            color-mix(in srgb, var(--tier-border) 76%, transparent) 18%,
            transparent 34%
        ),
        linear-gradient(
            var(--frame-angle),
            var(--tier-border-dark) 0%,
            var(--tier-border) 16%,
            var(--tier-border-light) 29%,
            var(--tier-border) 42%,
            var(--tier-border-dark) 56%,
            var(--tier-border) 70%,
            var(--tier-border-light) 83%,
            var(--tier-border-dark) 100%
        );
    opacity: var(--frame-opacity);
    filter:
        saturate(1.26)
        brightness(1.32)
        drop-shadow(0 0 10px color-mix(in srgb, var(--tier-border-light) 80%, white 20%))
        drop-shadow(0 0 28px var(--tier-glow))
        drop-shadow(0 0 54px var(--tier-glow));
}

.donate-card-vip-tier:hover::after,
.donate-card-vip-tier:focus-visible::after {
    filter:
        saturate(1.34)
        brightness(1.52)
        drop-shadow(0 0 14px color-mix(in srgb, var(--tier-border-light) 78%, white 22%))
        drop-shadow(0 0 36px var(--tier-glow))
        drop-shadow(0 0 74px var(--tier-glow));
}

/* Золото сохраняет премиальный золотой блик, но центр также держится внутри рамки. */
.donate-card-vip-tier-3::after {
    background:
        radial-gradient(
            circle at var(--frame-edge-x) var(--frame-edge-y),
            rgba(255, 255, 255, 1.00) 0 3%,
            rgba(255, 246, 176, 1.00) 6%,
            rgba(255, 215, 0, 0.92) 12%,
            rgba(255, 184, 0, 0.36) 22%,
            transparent 38%
        ),
        linear-gradient(
            var(--frame-angle),
            #6F5000 0%,
            #FFD700 15%,
            #FFF1A0 28%,
            #FFB800 42%,
            #8E6400 56%,
            #FFD700 70%,
            #FFF6B8 83%,
            #6F5000 100%
        );
    filter:
        saturate(1.72)
        brightness(1.42)
        drop-shadow(0 0 13px rgba(255, 246, 172, 0.94))
        drop-shadow(0 0 38px rgba(255, 196, 34, 0.76))
        drop-shadow(0 0 72px rgba(255, 174, 0, 0.48));
}

/* Незерит: яркая чёрно-фиолетовая вспышка без ухода в красную рамку. */
.donate-card-vip-tier-5::after {
    background:
        radial-gradient(
            circle at var(--frame-edge-x) var(--frame-edge-y),
            rgba(255, 245, 255, 1.00) 0 2.8%,
            rgba(198, 148, 255, 0.92) 7%,
            rgba(112, 63, 165, 0.68) 15%,
            rgba(34, 15, 53, 0.36) 25%,
            transparent 40%
        ),
        linear-gradient(
            var(--frame-angle),
            #000000 0%,
            #1B1025 15%,
            #5D3C7A 27%,
            #09070F 42%,
            #000000 56%,
            #3D245A 69%,
            #8A5DB2 80%,
            #120A1B 91%,
            #000000 100%
        );
    filter:
        saturate(1.42)
        brightness(1.32)
        drop-shadow(0 0 12px rgba(203, 154, 255, 0.76))
        drop-shadow(0 0 34px rgba(116, 74, 155, 0.68))
        drop-shadow(0 0 68px rgba(58, 28, 92, 0.58));
}

/* Обводка картинки: ядро блика привязано к границе изображения, а мягкое сияние может выходить поверх фона карточки. */
.donate-card-vip-tier .donate-card-image::after {
    z-index: 8;
    inset: -4px;
    padding: 2px;
    border-radius: 28px;
    background:
        radial-gradient(
            circle at var(--image-border-x) var(--image-border-y),
            var(--image-border-glare-core) 0 3.2%,
            var(--image-border-glare-mid) 8%,
            var(--image-border-glare-soft) 18%,
            rgba(255, 255, 255, 0.00) 34%
        ),
        linear-gradient(
            var(--image-gloss-angle),
            rgba(255, 255, 255, 0.00) 0%,
            rgba(255, 255, 255, 0.00) 30%,
            var(--image-gloss-line) 46%,
            var(--image-gloss-line-soft) 57%,
            rgba(255, 255, 255, 0.00) 72%,
            rgba(255, 255, 255, 0.00) 100%
        ),
        linear-gradient(
            calc(var(--image-gloss-angle) + 90deg),
            transparent 0%,
            var(--image-border-line-soft) 48%,
            transparent 100%
        );
    opacity: calc(var(--image-gloss-opacity) * 0.96);
    filter:
        saturate(1.16)
        brightness(1.42)
        blur(calc(var(--image-gloss-blur) * 0.30))
        drop-shadow(0 0 10px var(--image-border-glow))
        drop-shadow(0 0 28px var(--image-border-glow));
    mix-blend-mode: screen;
    transform: translate3d(calc(var(--image-gloss-shift-x) * 0.04), calc(var(--image-gloss-shift-y) * 0.04), 0);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
}

.donate-card-vip-tier:hover .donate-card-image::after,
.donate-card-vip-tier:focus-visible .donate-card-image::after {
    opacity: 1;
    filter:
        saturate(1.20)
        brightness(1.62)
        blur(calc(var(--image-gloss-blur) * 0.26))
        drop-shadow(0 0 14px var(--image-border-glow))
        drop-shadow(0 0 40px var(--image-border-glow));
}

/* Белые/серебряные обводочные блики для VIP 0-II. */
.donate-card-vip-tier-0,
.donate-card-vip-tier-1,
.donate-card-vip-tier-2 {
    --image-border-glare-core: rgba(255, 255, 255, 1.00);
    --image-border-glare-mid: rgba(255, 255, 255, 0.82);
    --image-border-glare-soft: rgba(255, 255, 255, 0.28);
    --image-border-line-soft: rgba(255, 255, 255, 0.22);
    --image-border-glow: rgba(235, 242, 252, 0.62);
}

.donate-card-vip-tier-3 {
    --image-border-glare-core: rgba(255, 255, 255, 1.00);
    --image-border-glare-mid: rgba(255, 239, 164, 0.86);
    --image-border-glare-soft: rgba(255, 204, 54, 0.28);
    --image-border-line-soft: rgba(255, 226, 120, 0.22);
    --image-border-glow: rgba(255, 208, 60, 0.62);
}

.donate-card-vip-tier-4 {
    --image-border-glare-core: rgba(250, 255, 255, 1.00);
    --image-border-glare-mid: rgba(183, 255, 255, 0.78);
    --image-border-glare-soft: rgba(62, 230, 230, 0.25);
    --image-border-line-soft: rgba(143, 255, 255, 0.20);
    --image-border-glow: rgba(72, 235, 242, 0.56);
}

.donate-card-vip-tier-5 {
    --image-border-glare-core: rgba(255, 246, 255, 0.96);
    --image-border-glare-mid: rgba(202, 150, 255, 0.64);
    --image-border-glare-soft: rgba(121, 70, 170, 0.28);
    --image-border-line-soft: rgba(172, 106, 230, 0.20);
    --image-border-glow: rgba(122, 72, 172, 0.58);
}


/* -------------------------
   Shop flare rollback/refinement patch 30
   Base: patch 28. Adds optical-star flares to the outlines only.
   ------------------------- */

.donate-card-vip-tier {
    --frame-flare-core: rgba(255, 255, 255, 1.00);
    --frame-flare-mid: color-mix(in srgb, var(--tier-border-light) 72%, white 28%);
    --frame-flare-soft: color-mix(in srgb, var(--tier-border) 40%, transparent 60%);
    --frame-flare-glow: color-mix(in srgb, var(--tier-border-light) 58%, white 42%);

    --image-border-flare-core: rgba(255, 255, 255, 1.00);
    --image-border-flare-mid: var(--image-border-glare-mid);
    --image-border-flare-soft: var(--image-border-glare-soft);
}

/* VIP 0-II: white/silver optical flare, without rainbow tint. */
.donate-card-vip-tier-0,
.donate-card-vip-tier-1,
.donate-card-vip-tier-2 {
    --frame-flare-core: rgba(255, 255, 255, 1.00);
    --frame-flare-mid: rgba(245, 250, 255, 0.92);
    --frame-flare-soft: rgba(225, 235, 248, 0.24);
    --frame-flare-glow: rgba(235, 244, 255, 0.78);

    --image-border-flare-core: rgba(255, 255, 255, 1.00);
    --image-border-flare-mid: rgba(247, 251, 255, 0.86);
    --image-border-flare-soft: rgba(230, 240, 255, 0.26);
}

.donate-card-vip-tier-3 {
    --frame-flare-core: rgba(255, 255, 255, 1.00);
    --frame-flare-mid: rgba(255, 245, 168, 0.98);
    --frame-flare-soft: rgba(255, 203, 37, 0.34);
    --frame-flare-glow: rgba(255, 225, 98, 0.88);

    --image-border-flare-core: rgba(255, 255, 255, 1.00);
    --image-border-flare-mid: rgba(255, 238, 140, 0.88);
    --image-border-flare-soft: rgba(255, 202, 38, 0.30);
}

.donate-card-vip-tier-4 {
    --frame-flare-core: rgba(255, 255, 255, 1.00);
    --frame-flare-mid: rgba(194, 255, 255, 0.94);
    --frame-flare-soft: rgba(61, 240, 240, 0.30);
    --frame-flare-glow: rgba(130, 255, 255, 0.82);

    --image-border-flare-core: rgba(255, 255, 255, 1.00);
    --image-border-flare-mid: rgba(196, 255, 255, 0.82);
    --image-border-flare-soft: rgba(78, 230, 230, 0.25);
}

.donate-card-vip-tier-5 {
    --frame-flare-core: rgba(255, 250, 255, 1.00);
    --frame-flare-mid: rgba(206, 158, 255, 0.88);
    --frame-flare-soft: rgba(128, 76, 178, 0.30);
    --frame-flare-glow: rgba(177, 121, 238, 0.74);

    --image-border-flare-core: rgba(255, 250, 255, 1.00);
    --image-border-flare-mid: rgba(205, 155, 255, 0.76);
    --image-border-flare-soft: rgba(118, 70, 170, 0.28);
}

/* Optical-star flare on card outline.
   The hot center is positioned on the outline; rays/glow spill over the card background. */
.donate-card-vip-tier::after {
    padding: 3px;
    background:
        radial-gradient(
            circle at var(--frame-edge-x) var(--frame-edge-y),
            var(--frame-flare-core) 0 1.8%,
            var(--frame-flare-mid) 3.6%,
            var(--frame-flare-soft) 8.5%,
            transparent 22%
        ),
        radial-gradient(
            ellipse 64% 1.45% at var(--frame-edge-x) var(--frame-edge-y),
            rgba(255, 255, 255, 0.98) 0%,
            var(--frame-flare-mid) 12%,
            rgba(255, 255, 255, 0.18) 31%,
            transparent 68%
        ),
        radial-gradient(
            ellipse 1.45% 64% at var(--frame-edge-x) var(--frame-edge-y),
            rgba(255, 255, 255, 0.92) 0%,
            var(--frame-flare-mid) 12%,
            rgba(255, 255, 255, 0.16) 31%,
            transparent 68%
        ),
        conic-gradient(
            from calc(var(--frame-angle) - 45deg) at var(--frame-edge-x) var(--frame-edge-y),
            transparent 0deg,
            rgba(255, 255, 255, 0.00) 35deg,
            rgba(255, 255, 255, 0.76) 43deg,
            rgba(255, 255, 255, 0.00) 50deg,
            transparent 84deg,
            rgba(255, 255, 255, 0.40) 90deg,
            transparent 96deg,
            transparent 174deg,
            rgba(255, 255, 255, 0.42) 180deg,
            transparent 186deg,
            transparent 264deg,
            rgba(255, 255, 255, 0.38) 270deg,
            transparent 276deg,
            transparent 360deg
        ),
        linear-gradient(
            var(--frame-angle),
            var(--tier-border-dark) 0%,
            var(--tier-border) 16%,
            var(--tier-border-light) 29%,
            var(--tier-border) 42%,
            var(--tier-border-dark) 56%,
            var(--tier-border) 70%,
            var(--tier-border-light) 83%,
            var(--tier-border-dark) 100%
        );
    filter:
        saturate(1.28)
        brightness(1.42)
        drop-shadow(0 0 8px var(--frame-flare-glow))
        drop-shadow(0 0 22px var(--frame-flare-glow))
        drop-shadow(0 0 48px var(--tier-glow));
}

.donate-card-vip-tier:hover::after,
.donate-card-vip-tier:focus-visible::after {
    filter:
        saturate(1.36)
        brightness(1.68)
        drop-shadow(0 0 12px var(--frame-flare-glow))
        drop-shadow(0 0 34px var(--frame-flare-glow))
        drop-shadow(0 0 78px var(--tier-glow));
}

/* Gold keeps a gold material under the same star-flare logic. */
.donate-card-vip-tier-3::after {
    background:
        radial-gradient(circle at var(--frame-edge-x) var(--frame-edge-y), rgba(255, 255, 255, 1.00) 0 2%, rgba(255, 246, 178, 1.00) 4.4%, rgba(255, 206, 42, 0.36) 10%, transparent 24%),
        radial-gradient(ellipse 68% 1.55% at var(--frame-edge-x) var(--frame-edge-y), rgba(255, 255, 255, 1.00) 0%, rgba(255, 238, 132, 0.86) 15%, rgba(255, 202, 36, 0.20) 36%, transparent 72%),
        radial-gradient(ellipse 1.55% 68% at var(--frame-edge-x) var(--frame-edge-y), rgba(255, 255, 255, 0.96) 0%, rgba(255, 238, 132, 0.76) 15%, rgba(255, 202, 36, 0.18) 36%, transparent 72%),
        conic-gradient(from calc(var(--frame-angle) - 45deg) at var(--frame-edge-x) var(--frame-edge-y), transparent 0deg, transparent 35deg, rgba(255, 252, 218, 0.86) 43deg, transparent 50deg, transparent 84deg, rgba(255, 241, 142, 0.48) 90deg, transparent 96deg, transparent 174deg, rgba(255, 241, 142, 0.46) 180deg, transparent 186deg, transparent 264deg, rgba(255, 241, 142, 0.42) 270deg, transparent 276deg, transparent 360deg),
        linear-gradient(var(--frame-angle), #6F5000 0%, #FFD700 15%, #FFF1A0 28%, #FFB800 42%, #8E6400 56%, #FFD700 70%, #FFF6B8 83%, #6F5000 100%);
}

/* Netherite stays black-purple. */
.donate-card-vip-tier-5::after {
    background:
        radial-gradient(circle at var(--frame-edge-x) var(--frame-edge-y), rgba(255, 250, 255, 1.00) 0 1.9%, rgba(206, 158, 255, 0.96) 4.4%, rgba(113, 62, 171, 0.36) 10.5%, transparent 25%),
        radial-gradient(ellipse 66% 1.55% at var(--frame-edge-x) var(--frame-edge-y), rgba(255, 255, 255, 0.96) 0%, rgba(203, 154, 255, 0.72) 15%, rgba(93, 55, 140, 0.20) 36%, transparent 72%),
        radial-gradient(ellipse 1.55% 66% at var(--frame-edge-x) var(--frame-edge-y), rgba(255, 255, 255, 0.90) 0%, rgba(203, 154, 255, 0.64) 15%, rgba(93, 55, 140, 0.18) 36%, transparent 72%),
        conic-gradient(from calc(var(--frame-angle) - 45deg) at var(--frame-edge-x) var(--frame-edge-y), transparent 0deg, transparent 35deg, rgba(244, 230, 255, 0.72) 43deg, transparent 50deg, transparent 84deg, rgba(202, 156, 255, 0.38) 90deg, transparent 96deg, transparent 174deg, rgba(202, 156, 255, 0.36) 180deg, transparent 186deg, transparent 264deg, rgba(202, 156, 255, 0.34) 270deg, transparent 276deg, transparent 360deg),
        linear-gradient(var(--frame-angle), #000000 0%, #1B1025 15%, #5D3C7A 27%, #09070F 42%, #000000 56%, #3D245A 69%, #8A5DB2 80%, #120A1B 91%, #000000 100%);
}

/* Image outline attached directly to the image. No visible gap. */
.donate-card-vip-tier .donate-card-image::after {
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    background:
        radial-gradient(
            circle at var(--image-border-x) var(--image-border-y),
            var(--image-border-flare-core) 0 2.1%,
            var(--image-border-flare-mid) 4.6%,
            var(--image-border-flare-soft) 11%,
            rgba(255, 255, 255, 0.00) 25%
        ),
        radial-gradient(
            ellipse 62% 1.55% at var(--image-border-x) var(--image-border-y),
            rgba(255, 255, 255, 0.96) 0%,
            var(--image-border-flare-mid) 14%,
            rgba(255, 255, 255, 0.18) 34%,
            transparent 70%
        ),
        radial-gradient(
            ellipse 1.55% 62% at var(--image-border-x) var(--image-border-y),
            rgba(255, 255, 255, 0.90) 0%,
            var(--image-border-flare-mid) 14%,
            rgba(255, 255, 255, 0.16) 34%,
            transparent 70%
        ),
        conic-gradient(
            from calc(var(--image-gloss-angle) - 45deg) at var(--image-border-x) var(--image-border-y),
            transparent 0deg,
            transparent 35deg,
            rgba(255, 255, 255, 0.72) 43deg,
            transparent 50deg,
            transparent 84deg,
            rgba(255, 255, 255, 0.36) 90deg,
            transparent 96deg,
            transparent 174deg,
            rgba(255, 255, 255, 0.34) 180deg,
            transparent 186deg,
            transparent 264deg,
            rgba(255, 255, 255, 0.32) 270deg,
            transparent 276deg,
            transparent 360deg
        ),
        linear-gradient(
            var(--image-gloss-angle),
            rgba(255, 255, 255, 0.00) 0%,
            rgba(255, 255, 255, 0.00) 32%,
            var(--image-gloss-line) 47%,
            var(--image-gloss-line-soft) 57%,
            rgba(255, 255, 255, 0.00) 72%,
            rgba(255, 255, 255, 0.00) 100%
        );
    filter:
        saturate(1.18)
        brightness(1.58)
        blur(calc(var(--image-gloss-blur) * 0.22))
        drop-shadow(0 0 10px var(--image-border-glow))
        drop-shadow(0 0 28px var(--image-border-glow))
        drop-shadow(0 0 52px var(--image-border-glow));
    transform: translate3d(0, 0, 0);
}

.donate-card-vip-tier:hover .donate-card-image::after,
.donate-card-vip-tier:focus-visible .donate-card-image::after {
    filter:
        saturate(1.24)
        brightness(1.84)
        blur(calc(var(--image-gloss-blur) * 0.18))
        drop-shadow(0 0 14px var(--image-border-glow))
        drop-shadow(0 0 40px var(--image-border-glow))
        drop-shadow(0 0 76px var(--image-border-glow));
}

/* -------------------------
   Shop detail patch 31
   6: material texture, 7: pixel corners, 8: hover lift only,
   9: tier-colored buttons. No new labels/details/modals.
   ------------------------- */

.donate-card {
    --card-lift: 0px;
    transform: translateY(var(--card-lift)) rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) translateZ(0);
}

.donate-card:hover,
.donate-card:focus-visible {
    --card-lift: -10px;
}

.donate-card-vip-tier .donate-card-inner {
    overflow: hidden;
    border-radius: 24px;
}

.donate-card-vip-tier .donate-card-inner > * {
    position: relative;
    z-index: 4;
}

.donate-card-vip-tier .donate-card-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: var(--tier-material-texture);
    opacity: var(--tier-material-opacity, 0.42);
    mix-blend-mode: soft-light;
    filter: contrast(1.08) saturate(1.05);
}

/* Pixel-style corner details. They are intentionally small: detail, not noise. */
.donate-card-vip-tier .donate-card-inner::after {
    content: "";
    position: absolute;
    inset: 14px;
    z-index: 3;
    pointer-events: none;
    opacity: 0.72;
    background:
        linear-gradient(var(--tier-corner-light) 0 0) left top / 42px 4px no-repeat,
        linear-gradient(var(--tier-corner-light) 0 0) left top / 4px 42px no-repeat,
        linear-gradient(var(--tier-corner-light) 0 0) right top / 42px 4px no-repeat,
        linear-gradient(var(--tier-corner-light) 0 0) right top / 4px 42px no-repeat,
        linear-gradient(var(--tier-corner-dark) 0 0) left bottom / 42px 4px no-repeat,
        linear-gradient(var(--tier-corner-dark) 0 0) left bottom / 4px 42px no-repeat,
        linear-gradient(var(--tier-corner-dark) 0 0) right bottom / 42px 4px no-repeat,
        linear-gradient(var(--tier-corner-dark) 0 0) right bottom / 4px 42px no-repeat;
    filter:
        drop-shadow(0 0 8px color-mix(in srgb, var(--tier-border-light) 34%, transparent))
        drop-shadow(0 2px 0 rgba(0, 0, 0, 0.18));
}

.donate-card-vip-tier:hover .donate-card-inner::after,
.donate-card-vip-tier:focus-visible .donate-card-inner::after {
    opacity: 0.92;
}

.donate-card-vip-tier-0 {
    --tier-corner-light: rgba(210, 214, 220, 0.78);
    --tier-corner-dark: rgba(42, 46, 54, 0.72);
    --tier-material-opacity: 0.48;
    --tier-material-texture:
        radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.13) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 66%, rgba(255, 255, 255, 0.10) 0 1px, transparent 2px),
        radial-gradient(circle at 38% 78%, rgba(0, 0, 0, 0.20) 0 1px, transparent 2px),
        repeating-linear-gradient(32deg, rgba(255, 255, 255, 0.025) 0 3px, transparent 3px 10px),
        repeating-linear-gradient(118deg, rgba(0, 0, 0, 0.040) 0 2px, transparent 2px 9px);
}

.donate-card-vip-tier-1 {
    --tier-corner-light: rgba(255, 207, 184, 0.78);
    --tier-corner-dark: rgba(91, 43, 29, 0.72);
    --tier-material-opacity: 0.44;
    --tier-material-texture:
        radial-gradient(circle at 24% 20%, rgba(255, 232, 212, 0.13) 0 1px, transparent 2px),
        radial-gradient(circle at 76% 70%, rgba(106, 218, 172, 0.085) 0 2px, transparent 4px),
        radial-gradient(circle at 42% 82%, rgba(86, 38, 24, 0.16) 0 1px, transparent 2px),
        repeating-linear-gradient(36deg, rgba(255, 220, 196, 0.035) 0 3px, transparent 3px 12px),
        repeating-linear-gradient(112deg, rgba(76, 31, 22, 0.045) 0 2px, transparent 2px 10px);
}

.donate-card-vip-tier-2 {
    --tier-corner-light: rgba(255, 255, 255, 0.86);
    --tier-corner-dark: rgba(74, 84, 96, 0.72);
    --tier-material-opacity: 0.42;
    --tier-material-texture:
        radial-gradient(circle at 20% 24%, rgba(255, 255, 255, 0.18) 0 1px, transparent 2px),
        radial-gradient(circle at 78% 60%, rgba(255, 255, 255, 0.13) 0 1px, transparent 2px),
        radial-gradient(circle at 34% 80%, rgba(55, 65, 78, 0.13) 0 1px, transparent 2px),
        repeating-linear-gradient(24deg, rgba(255, 255, 255, 0.045) 0 4px, transparent 4px 13px),
        repeating-linear-gradient(112deg, rgba(40, 48, 58, 0.040) 0 2px, transparent 2px 12px);
}

.donate-card-vip-tier-3 {
    --tier-corner-light: rgba(255, 249, 196, 0.92);
    --tier-corner-dark: rgba(117, 77, 8, 0.76);
    --tier-material-opacity: 0.50;
    --tier-material-texture:
        radial-gradient(circle at 18% 22%, rgba(255, 255, 230, 0.20) 0 1px, transparent 2px),
        radial-gradient(circle at 78% 68%, rgba(255, 226, 94, 0.13) 0 2px, transparent 5px),
        radial-gradient(circle at 42% 82%, rgba(95, 60, 5, 0.15) 0 1px, transparent 2px),
        repeating-linear-gradient(30deg, rgba(255, 239, 142, 0.050) 0 3px, transparent 3px 12px),
        repeating-linear-gradient(116deg, rgba(107, 69, 8, 0.045) 0 2px, transparent 2px 11px);
}

.donate-card-vip-tier-4 {
    --tier-corner-light: rgba(217, 255, 255, 0.88);
    --tier-corner-dark: rgba(0, 104, 118, 0.72);
    --tier-material-opacity: 0.48;
    --tier-material-texture:
        radial-gradient(circle at 20% 24%, rgba(238, 255, 255, 0.18) 0 1px, transparent 2px),
        radial-gradient(circle at 76% 70%, rgba(138, 255, 255, 0.14) 0 2px, transparent 5px),
        radial-gradient(circle at 42% 82%, rgba(0, 78, 92, 0.12) 0 1px, transparent 2px),
        repeating-linear-gradient(28deg, rgba(210, 255, 255, 0.050) 0 4px, transparent 4px 13px),
        repeating-linear-gradient(118deg, rgba(0, 90, 104, 0.045) 0 2px, transparent 2px 11px);
}

.donate-card-vip-tier-5 {
    --tier-corner-light: rgba(190, 140, 255, 0.72);
    --tier-corner-dark: rgba(0, 0, 0, 0.84);
    --tier-material-opacity: 0.54;
    --tier-material-texture:
        radial-gradient(circle at 22% 24%, rgba(216, 176, 255, 0.12) 0 1px, transparent 2px),
        radial-gradient(circle at 76% 68%, rgba(128, 66, 190, 0.15) 0 2px, transparent 5px),
        radial-gradient(circle at 42% 82%, rgba(0, 0, 0, 0.28) 0 1px, transparent 2px),
        repeating-linear-gradient(31deg, rgba(185, 118, 255, 0.040) 0 3px, transparent 3px 12px),
        repeating-linear-gradient(115deg, rgba(0, 0, 0, 0.105) 0 2px, transparent 2px 10px);
}

/* Tier-colored buttons, tied to the same material language as the frame. */
.donate-card-vip-tier .donate-card-button {
    border: 1px solid color-mix(in srgb, var(--tier-border-light) 58%, rgba(255, 255, 255, 0.28));
    color: var(--tier-button-text, #FFFFFF);
    background:
        radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.30), transparent 32%),
        linear-gradient(135deg, var(--tier-button-top), var(--tier-button-bottom));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        inset 0 -2px 0 rgba(0, 0, 0, 0.22),
        0 12px 26px color-mix(in srgb, var(--tier-glow) 68%, transparent);
}

.donate-card-vip-tier .donate-card-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.07) saturate(1.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        inset 0 -2px 0 rgba(0, 0, 0, 0.24),
        0 16px 34px color-mix(in srgb, var(--tier-glow) 78%, transparent),
        0 0 22px color-mix(in srgb, var(--tier-border-light) 34%, transparent);
}

.donate-card-vip-tier-0 {
    --tier-button-top: #7F8791;
    --tier-button-bottom: #3A414B;
    --tier-button-text: #FFFFFF;
}

.donate-card-vip-tier-1 {
    --tier-button-top: #D59A80;
    --tier-button-bottom: #7B3D2D;
    --tier-button-text: #FFFFFF;
}

.donate-card-vip-tier-2 {
    --tier-button-top: #F4F7FA;
    --tier-button-bottom: #838E9B;
    --tier-button-text: #263241;
}

.donate-card-vip-tier-3 {
    --tier-button-top: #FFF1A8;
    --tier-button-bottom: #C88708;
    --tier-button-text: #3D2A00;
}

.donate-card-vip-tier-4 {
    --tier-button-top: #B9FFFF;
    --tier-button-bottom: #00AAB3;
    --tier-button-text: #052D32;
}

.donate-card-vip-tier-5 {
    --tier-button-top: #654083;
    --tier-button-bottom: #08060D;
    --tier-button-text: #FFFFFF;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
    .donate-card:hover,
    .donate-card:focus-visible {
        --card-lift: 0px;
    }
}

/* -------------------------
   Shop card behavior/material patch 32
   ------------------------- */

/* 7-й пункт убран: пиксельные углы больше не рисуются. */
.donate-card-vip-tier .donate-card-inner::after {
    display: none !important;
}

/* 8-й пункт: вместо подъёма — аккуратное увеличение всей карточки. */
.donate-card {
    --card-scale: 1;
    --card-lift: 0px !important;
    cursor: pointer;
    transform: rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) scale(var(--card-scale)) translateZ(0) !important;
}

.donate-card:hover,
.donate-card:focus-visible {
    --card-scale: 1.035;
    --card-lift: 0px !important;
}

/* 9-й пункт: кнопки убраны, цена в центре, вся карточка стала кнопкой. */
.donate-card-button,
.donate-card-vip-tier .donate-card-button {
    display: none !important;
}

.donate-card-footer,
.donate-card-vip-tier .donate-card-footer {
    justify-content: center !important;
    text-align: center;
    padding-top: 22px;
}

.donate-card-footer strong,
.donate-card-vip-tier .donate-card-footer strong {
    display: block;
    width: 100%;
    text-align: center;
    font-size: clamp(28px, 2.6vw, 36px);
    letter-spacing: -0.04em;
}

.donate-card[role="button"] {
    user-select: none;
}

.donate-card[role="button"]:active {
    --card-scale: 1.015;
}

/* 6-й пункт: материал-текстуры теперь вшиты в сам фон карточки, а не только в мягкий inner-layer. */
.donate-card-vip-tier {
    background: var(--tier-card-material-background) !important;
}

.donate-card-vip-tier .donate-card-inner::before {
    display: block !important;
    z-index: 1;
    opacity: var(--tier-material-opacity, 0.72) !important;
    mix-blend-mode: overlay !important;
    background: var(--tier-material-texture) !important;
    filter: contrast(1.22) saturate(1.10) !important;
}

.donate-card-vip-tier-0 {
    --tier-material-opacity: 0.78;
    --tier-card-material-background:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(231, 236, 243, 0.22), transparent 34%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(4, 7, 12, 0.42), transparent 46%),
        radial-gradient(circle at 18% 24%, rgba(255,255,255,0.070) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 68%, rgba(255,255,255,0.050) 0 1px, transparent 2px),
        radial-gradient(circle at 44% 82%, rgba(0,0,0,0.145) 0 1px, transparent 2px),
        repeating-linear-gradient(32deg, rgba(255,255,255,0.035) 0 3px, transparent 3px 13px),
        repeating-linear-gradient(118deg, rgba(0,0,0,0.070) 0 2px, transparent 2px 11px),
        linear-gradient(145deg, rgba(49, 55, 64, 0.98), rgba(32, 38, 49, 0.98) 50%, rgba(76, 83, 94, 0.92));
    --tier-material-texture:
        radial-gradient(circle at 12% 18%, rgba(255,255,255,0.28) 0 1px, transparent 2px),
        radial-gradient(circle at 36% 72%, rgba(0,0,0,0.34) 0 1px, transparent 2px),
        radial-gradient(circle at 78% 46%, rgba(255,255,255,0.18) 0 1px, transparent 2px),
        repeating-linear-gradient(38deg, rgba(255,255,255,0.060) 0 4px, transparent 4px 15px),
        repeating-linear-gradient(124deg, rgba(0,0,0,0.085) 0 3px, transparent 3px 14px);
}

.donate-card-vip-tier-1 {
    --tier-material-opacity: 0.70;
    --tier-card-material-background:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(255, 220, 198, 0.18), transparent 34%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(52, 22, 13, 0.42), transparent 46%),
        radial-gradient(circle at 22% 26%, rgba(255, 232, 212, 0.070) 0 1px, transparent 2px),
        radial-gradient(circle at 76% 70%, rgba(95, 202, 154, 0.055) 0 2px, transparent 4px),
        radial-gradient(circle at 42% 84%, rgba(72, 28, 18, 0.135) 0 1px, transparent 2px),
        repeating-linear-gradient(35deg, rgba(255, 220, 196, 0.035) 0 3px, transparent 3px 14px),
        repeating-linear-gradient(112deg, rgba(65, 26, 18, 0.070) 0 2px, transparent 2px 11px),
        linear-gradient(145deg, rgba(99, 48, 34, 0.98), rgba(65, 31, 25, 0.98) 48%, rgba(128, 68, 48, 0.90));
    --tier-material-texture:
        radial-gradient(circle at 22% 18%, rgba(255, 230, 205, 0.24) 0 1px, transparent 2px),
        radial-gradient(circle at 76% 66%, rgba(93, 216, 169, 0.18) 0 2px, transparent 5px),
        radial-gradient(circle at 42% 84%, rgba(54, 20, 14, 0.28) 0 1px, transparent 2px),
        repeating-linear-gradient(36deg, rgba(255, 210, 184, 0.060) 0 4px, transparent 4px 16px),
        repeating-linear-gradient(112deg, rgba(50, 19, 14, 0.075) 0 3px, transparent 3px 14px);
}

.donate-card-vip-tier-2 {
    --tier-material-opacity: 0.74;
    --tier-card-material-background:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(255, 255, 255, 0.24), transparent 34%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(34, 43, 54, 0.38), transparent 46%),
        radial-gradient(circle at 18% 24%, rgba(255,255,255,0.105) 0 1px, transparent 2px),
        radial-gradient(circle at 80% 58%, rgba(255,255,255,0.075) 0 1px, transparent 2px),
        radial-gradient(circle at 35% 82%, rgba(50,58,70,0.110) 0 1px, transparent 2px),
        repeating-linear-gradient(24deg, rgba(255,255,255,0.065) 0 4px, transparent 4px 15px),
        repeating-linear-gradient(112deg, rgba(35,43,54,0.060) 0 2px, transparent 2px 12px),
        linear-gradient(145deg, rgba(86, 96, 109, 0.98), rgba(47, 58, 72, 0.98) 50%, rgba(136, 146, 158, 0.90));
    --tier-material-texture:
        radial-gradient(circle at 18% 26%, rgba(255,255,255,0.34) 0 1px, transparent 2px),
        radial-gradient(circle at 74% 54%, rgba(255,255,255,0.20) 0 1px, transparent 2px),
        radial-gradient(circle at 38% 84%, rgba(36,46,60,0.24) 0 1px, transparent 2px),
        repeating-linear-gradient(24deg, rgba(255,255,255,0.080) 0 5px, transparent 5px 16px),
        repeating-linear-gradient(114deg, rgba(28,36,48,0.060) 0 3px, transparent 3px 14px);
}

.donate-card-vip-tier-3 {
    --tier-material-opacity: 0.74;
    --tier-card-material-background:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(255, 245, 173, 0.22), transparent 34%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(74, 45, 4, 0.38), transparent 46%),
        radial-gradient(circle at 18% 22%, rgba(255,255,230,0.095) 0 1px, transparent 2px),
        radial-gradient(circle at 78% 66%, rgba(255,226,94,0.070) 0 2px, transparent 5px),
        radial-gradient(circle at 42% 84%, rgba(95,60,5,0.120) 0 1px, transparent 2px),
        repeating-linear-gradient(30deg, rgba(255,239,142,0.060) 0 4px, transparent 4px 15px),
        repeating-linear-gradient(116deg, rgba(107,69,8,0.060) 0 2px, transparent 2px 12px),
        linear-gradient(145deg, rgba(107, 73, 13, 0.98), rgba(72, 47, 7, 0.98) 48%, rgba(156, 112, 22, 0.90));
    --tier-material-texture:
        radial-gradient(circle at 18% 22%, rgba(255,255,218,0.30) 0 1px, transparent 2px),
        radial-gradient(circle at 78% 66%, rgba(255,229,92,0.20) 0 2px, transparent 5px),
        radial-gradient(circle at 42% 84%, rgba(82,52,4,0.22) 0 1px, transparent 2px),
        repeating-linear-gradient(30deg, rgba(255,235,128,0.080) 0 4px, transparent 4px 15px),
        repeating-linear-gradient(116deg, rgba(91,58,7,0.065) 0 3px, transparent 3px 14px);
}

.donate-card-vip-tier-4 {
    --tier-material-opacity: 0.72;
    --tier-card-material-background:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(196, 255, 255, 0.20), transparent 34%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(0, 61, 70, 0.38), transparent 46%),
        radial-gradient(circle at 20% 24%, rgba(238,255,255,0.095) 0 1px, transparent 2px),
        radial-gradient(circle at 76% 70%, rgba(138,255,255,0.075) 0 2px, transparent 5px),
        radial-gradient(circle at 42% 84%, rgba(0,78,92,0.105) 0 1px, transparent 2px),
        repeating-linear-gradient(28deg, rgba(210,255,255,0.060) 0 4px, transparent 4px 15px),
        repeating-linear-gradient(118deg, rgba(0,90,104,0.060) 0 2px, transparent 2px 12px),
        linear-gradient(145deg, rgba(7, 91, 101, 0.98), rgba(6, 54, 68, 0.98) 50%, rgba(0, 147, 154, 0.88));
    --tier-material-texture:
        radial-gradient(circle at 20% 24%, rgba(238,255,255,0.28) 0 1px, transparent 2px),
        radial-gradient(circle at 76% 70%, rgba(138,255,255,0.20) 0 2px, transparent 5px),
        radial-gradient(circle at 42% 84%, rgba(0,74,86,0.20) 0 1px, transparent 2px),
        repeating-linear-gradient(28deg, rgba(200,255,255,0.085) 0 4px, transparent 4px 15px),
        repeating-linear-gradient(118deg, rgba(0,85,96,0.065) 0 3px, transparent 3px 14px);
}

.donate-card-vip-tier-5 {
    --tier-material-opacity: 0.82;
    --tier-card-material-background:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(185, 116, 255, 0.16), transparent 34%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(0, 0, 0, 0.54), transparent 48%),
        radial-gradient(circle at 22% 24%, rgba(216,176,255,0.075) 0 1px, transparent 2px),
        radial-gradient(circle at 76% 68%, rgba(128,66,190,0.095) 0 2px, transparent 5px),
        radial-gradient(circle at 42% 84%, rgba(0,0,0,0.180) 0 1px, transparent 2px),
        repeating-linear-gradient(31deg, rgba(185,118,255,0.055) 0 4px, transparent 4px 15px),
        repeating-linear-gradient(115deg, rgba(0,0,0,0.145) 0 2px, transparent 2px 11px),
        linear-gradient(145deg, rgba(18, 13, 24, 0.99), rgba(8, 7, 13, 0.99) 50%, rgba(54, 34, 76, 0.92));
    --tier-material-texture:
        radial-gradient(circle at 22% 24%, rgba(216,176,255,0.20) 0 1px, transparent 2px),
        radial-gradient(circle at 76% 68%, rgba(128,66,190,0.22) 0 2px, transparent 5px),
        radial-gradient(circle at 42% 84%, rgba(0,0,0,0.36) 0 1px, transparent 2px),
        repeating-linear-gradient(31deg, rgba(185,118,255,0.075) 0 4px, transparent 4px 15px),
        repeating-linear-gradient(115deg, rgba(0,0,0,0.150) 0 3px, transparent 3px 13px);
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
    .donate-card:hover,
    .donate-card:focus-visible {
        --card-scale: 1;
        --card-lift: 0px !important;
    }
}

/* -------------------------
   Shop card refinement patch 33
   ------------------------- */

/* Полосы CD-блика стали тоньше: блик остаётся, но не превращается в толстые белые ленты. */
.donate-card::before {
    background:
        radial-gradient(ellipse at var(--cd-light-x) var(--cd-light-y), rgba(255, 255, 255, 0.90) 0%, rgba(255, 255, 255, 0.46) 8%, rgba(255, 255, 255, 0.12) 22%, transparent 48%),
        conic-gradient(
            from var(--cd-phase) at var(--cd-wave-x) var(--cd-wave-y),
            rgba(255, 0, 48, 0.92) 0deg,
            rgba(255, 42, 98, 0.84) 24deg,
            rgba(255, 134, 0, 0.64) 60deg,
            rgba(255, 242, 78, 0.54) 96deg,
            rgba(64, 255, 126, 0.54) 142deg,
            rgba(0, 230, 255, 0.68) 188deg,
            rgba(52, 82, 255, 0.66) 232deg,
            rgba(166, 70, 255, 0.62) 280deg,
            rgba(255, 0, 190, 0.76) 326deg,
            rgba(255, 0, 48, 0.92) 360deg
        ),
        repeating-radial-gradient(
            circle at 50% 50%,
            rgba(255, 255, 255, 0.00) 0px,
            rgba(255, 255, 255, 0.00) 9px,
            rgba(255, 255, 255, 0.12) 9.6px,
            rgba(255, 255, 255, 0.00) 10.8px,
            rgba(255, 255, 255, 0.00) 23px
        ),
        repeating-linear-gradient(
            var(--cd-line-angle),
            rgba(255, 255, 255, 0.00) 0px,
            rgba(255, 255, 255, 0.00) 25px,
            rgba(255, 255, 255, 0.14) 25.6px,
            rgba(255, 255, 255, 0.00) 27px,
            rgba(255, 255, 255, 0.00) 54px
        );
}

/* VIP 0-II: оставляем CD-блик бело-серебряным, но тоже делаем полосы тонкими. */
.donate-card-vip-tier-0::before,
.donate-card-vip-tier-1::before,
.donate-card-vip-tier-2::before {
    background:
        radial-gradient(ellipse at var(--cd-light-x) var(--cd-light-y), rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.54) 9%, rgba(255, 255, 255, 0.15) 24%, transparent 50%),
        conic-gradient(
            from var(--cd-phase) at var(--cd-wave-x) var(--cd-wave-y),
            rgba(255, 255, 255, 0.82) 0deg,
            rgba(220, 229, 238, 0.48) 44deg,
            rgba(255, 255, 255, 0.70) 92deg,
            rgba(184, 194, 205, 0.30) 140deg,
            rgba(255, 255, 255, 0.64) 190deg,
            rgba(209, 220, 232, 0.42) 244deg,
            rgba(255, 255, 255, 0.74) 302deg,
            rgba(255, 255, 255, 0.82) 360deg
        ),
        repeating-radial-gradient(
            circle at 50% 50%,
            rgba(255, 255, 255, 0.00) 0px,
            rgba(255, 255, 255, 0.00) 9px,
            rgba(255, 255, 255, 0.14) 9.6px,
            rgba(255, 255, 255, 0.00) 10.8px,
            rgba(255, 255, 255, 0.00) 23px
        ),
        repeating-linear-gradient(
            var(--cd-line-angle),
            rgba(255, 255, 255, 0.00) 0px,
            rgba(255, 255, 255, 0.00) 25px,
            rgba(255, 255, 255, 0.16) 25.6px,
            rgba(255, 255, 255, 0.00) 27px,
            rgba(255, 255, 255, 0.00) 54px
        );
}

.donate-card-shine {
    background:
        linear-gradient(
            var(--cd-angle),
            transparent 0%,
            rgba(255, 255, 255, 0.00) 18%,
            rgba(255, 52, 92, 0.18) 31%,
            rgba(255, 255, 255, 0.70) 43%,
            rgba(255, 255, 255, 0.25) 50%,
            rgba(255, 0, 176, 0.18) 59%,
            rgba(0, 227, 255, 0.14) 71%,
            transparent 100%
        ),
        repeating-linear-gradient(
            calc(var(--cd-line-angle) + 18deg),
            rgba(255, 255, 255, 0.00) 0px,
            rgba(255, 255, 255, 0.00) 28px,
            rgba(255, 255, 255, 0.18) 28.6px,
            rgba(255, 255, 255, 0.00) 30px,
            rgba(255, 255, 255, 0.00) 58px
        );
}

/* Текстура материала теперь лежит отдельным видимым слоем: мелкое зерно + тонкие царапины, без толстых полос. */
.donate-card-vip-tier .donate-card-inner::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    pointer-events: none !important;
    border-radius: inherit !important;
    opacity: var(--tier-material-opacity-33, 0.64) !important;
    mix-blend-mode: normal !important;
    background-image:
        var(--tier-grain-33),
        var(--tier-scratches-33),
        var(--tier-depth-33) !important;
    background-size:
        78px 78px,
        132px 132px,
        100% 100% !important;
    background-position:
        0 0,
        12px 8px,
        center !important;
    filter: contrast(1.18) saturate(1.06) !important;
}

.donate-card-vip-tier-0 {
    --tier-material-opacity-33: 0.82;
    --tier-grain-33:
        radial-gradient(circle at 14% 18%, rgba(255,255,255,0.22) 0 0.8px, transparent 1.7px),
        radial-gradient(circle at 38% 64%, rgba(0,0,0,0.24) 0 0.8px, transparent 1.8px),
        radial-gradient(circle at 74% 42%, rgba(255,255,255,0.15) 0 0.7px, transparent 1.6px),
        radial-gradient(circle at 88% 82%, rgba(0,0,0,0.18) 0 0.8px, transparent 1.8px);
    --tier-scratches-33:
        repeating-linear-gradient(34deg, transparent 0 17px, rgba(255,255,255,0.050) 17px 17.8px, transparent 17.8px 36px),
        repeating-linear-gradient(118deg, transparent 0 21px, rgba(0,0,0,0.055) 21px 21.8px, transparent 21.8px 42px);
    --tier-depth-33:
        radial-gradient(circle at 24% 22%, rgba(255,255,255,0.090), transparent 36%),
        radial-gradient(circle at 78% 82%, rgba(0,0,0,0.160), transparent 42%);
}

.donate-card-vip-tier-1 {
    --tier-material-opacity-33: 0.76;
    --tier-grain-33:
        radial-gradient(circle at 16% 20%, rgba(255,225,206,0.21) 0 0.8px, transparent 1.7px),
        radial-gradient(circle at 74% 66%, rgba(51,20,14,0.22) 0 0.8px, transparent 1.8px),
        radial-gradient(circle at 58% 36%, rgba(113,231,177,0.095) 0 1px, transparent 2.2px),
        radial-gradient(circle at 88% 86%, rgba(255,206,180,0.14) 0 0.7px, transparent 1.6px);
    --tier-scratches-33:
        repeating-linear-gradient(35deg, transparent 0 18px, rgba(255,204,176,0.050) 18px 18.7px, transparent 18.7px 38px),
        repeating-linear-gradient(112deg, transparent 0 22px, rgba(61,25,17,0.055) 22px 22.7px, transparent 22.7px 44px);
    --tier-depth-33:
        radial-gradient(circle at 28% 18%, rgba(255,209,184,0.090), transparent 34%),
        radial-gradient(circle at 76% 78%, rgba(50,19,13,0.170), transparent 44%);
}

.donate-card-vip-tier-2 {
    --tier-material-opacity-33: 0.80;
    --tier-grain-33:
        radial-gradient(circle at 18% 24%, rgba(255,255,255,0.30) 0 0.8px, transparent 1.7px),
        radial-gradient(circle at 74% 54%, rgba(255,255,255,0.18) 0 0.7px, transparent 1.6px),
        radial-gradient(circle at 42% 78%, rgba(34,44,58,0.20) 0 0.8px, transparent 1.8px),
        radial-gradient(circle at 90% 88%, rgba(255,255,255,0.16) 0 0.7px, transparent 1.6px);
    --tier-scratches-33:
        repeating-linear-gradient(24deg, transparent 0 18px, rgba(255,255,255,0.070) 18px 18.8px, transparent 18.8px 38px),
        repeating-linear-gradient(114deg, transparent 0 24px, rgba(30,38,50,0.048) 24px 24.8px, transparent 24.8px 46px);
    --tier-depth-33:
        radial-gradient(circle at 28% 20%, rgba(255,255,255,0.145), transparent 36%),
        radial-gradient(circle at 78% 82%, rgba(38,50,64,0.145), transparent 44%);
}

.donate-card-vip-tier-3 {
    --tier-material-opacity-33: 0.76;
    --tier-grain-33:
        radial-gradient(circle at 18% 22%, rgba(255,255,224,0.24) 0 0.8px, transparent 1.7px),
        radial-gradient(circle at 72% 64%, rgba(255,228,102,0.15) 0 1px, transparent 2.2px),
        radial-gradient(circle at 42% 82%, rgba(82,52,4,0.18) 0 0.8px, transparent 1.8px),
        radial-gradient(circle at 86% 28%, rgba(255,250,190,0.14) 0 0.7px, transparent 1.6px);
    --tier-scratches-33:
        repeating-linear-gradient(30deg, transparent 0 18px, rgba(255,235,128,0.068) 18px 18.8px, transparent 18.8px 38px),
        repeating-linear-gradient(116deg, transparent 0 24px, rgba(82,52,4,0.050) 24px 24.8px, transparent 24.8px 46px);
    --tier-depth-33:
        radial-gradient(circle at 28% 20%, rgba(255,238,142,0.135), transparent 36%),
        radial-gradient(circle at 80% 82%, rgba(75,48,4,0.160), transparent 44%);
}

.donate-card-vip-tier-4 {
    --tier-material-opacity-33: 0.74;
    --tier-grain-33:
        radial-gradient(circle at 18% 24%, rgba(238,255,255,0.25) 0 0.8px, transparent 1.7px),
        radial-gradient(circle at 76% 70%, rgba(138,255,255,0.15) 0 1px, transparent 2.2px),
        radial-gradient(circle at 42% 84%, rgba(0,74,86,0.17) 0 0.8px, transparent 1.8px),
        radial-gradient(circle at 86% 30%, rgba(220,255,255,0.13) 0 0.7px, transparent 1.6px);
    --tier-scratches-33:
        repeating-linear-gradient(28deg, transparent 0 18px, rgba(200,255,255,0.070) 18px 18.8px, transparent 18.8px 38px),
        repeating-linear-gradient(118deg, transparent 0 24px, rgba(0,85,96,0.050) 24px 24.8px, transparent 24.8px 46px);
    --tier-depth-33:
        radial-gradient(circle at 26% 20%, rgba(188,255,255,0.135), transparent 36%),
        radial-gradient(circle at 78% 84%, rgba(0,64,76,0.145), transparent 44%);
}

.donate-card-vip-tier-5 {
    --tier-material-opacity-33: 0.82;
    --tier-grain-33:
        radial-gradient(circle at 18% 22%, rgba(216,176,255,0.18) 0 0.8px, transparent 1.7px),
        radial-gradient(circle at 76% 68%, rgba(128,66,190,0.20) 0 1px, transparent 2.2px),
        radial-gradient(circle at 42% 84%, rgba(0,0,0,0.30) 0 0.8px, transparent 1.8px),
        radial-gradient(circle at 88% 28%, rgba(232,190,255,0.10) 0 0.7px, transparent 1.6px);
    --tier-scratches-33:
        repeating-linear-gradient(31deg, transparent 0 18px, rgba(185,118,255,0.064) 18px 18.8px, transparent 18.8px 38px),
        repeating-linear-gradient(115deg, transparent 0 24px, rgba(0,0,0,0.080) 24px 24.8px, transparent 24.8px 46px);
    --tier-depth-33:
        radial-gradient(circle at 28% 20%, rgba(185,116,255,0.115), transparent 36%),
        radial-gradient(circle at 80% 82%, rgba(0,0,0,0.260), transparent 44%);
}

/* Увеличение на hover делаем заметнее. */
.donate-card:hover,
.donate-card:focus-visible {
    --card-scale: 1.075;
    z-index: 20;
}

.donate-card[role="button"]:active {
    --card-scale: 1.035;
}

/* Тень текста внутри картинки — единая и заметная на всех VIP. */
.donate-card-vip-tier .donate-card-image span,
.donate-card-vip-tier-0 .donate-card-image span,
.donate-card-vip-tier-1 .donate-card-image span,
.donate-card-vip-tier-2 .donate-card-image span,
.donate-card-vip-tier-3 .donate-card-image span,
.donate-card-vip-tier-4 .donate-card-image span,
.donate-card-vip-tier-5 .donate-card-image span {
    color: #FFFFFF !important;
    text-shadow:
        4px 4px 0 rgba(0, 0, 0, 0.34),
        0 5px 18px rgba(0, 0, 0, 0.36),
        0 0 20px rgba(255, 255, 255, 0.20),
        0 0 38px var(--image-border-glow, rgba(255, 255, 255, 0.22)) !important;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
    .donate-card:hover,
    .donate-card:focus-visible {
        --card-scale: 1;
    }
}

/* -------------------------
   Shop cleanup patch 34
   Remove material textures from point 6: clean material-tinted card surfaces.
   ------------------------- */

/* Убираем отдельный текстурный слой пункта 6: зерно/царапины больше не рисуются. */
.donate-card-vip-tier .donate-card-inner::before {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* Возвращаем чистый фон карточки без мусорной фактуры и толстых текстурных полос. */
.donate-card-vip-tier {
    background:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(255, 255, 255, 0.18), transparent 34%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(5, 8, 16, 0.36), transparent 46%),
        radial-gradient(circle at 84% 82%, var(--card-surface-glow), transparent 34%),
        linear-gradient(145deg, var(--card-surface-1), var(--card-surface-2) 52%, var(--card-surface-3)) !important;
}

/* На hover оставляем только чистую материальную поверхность; блики рамок/CD остаются отдельными слоями. */
.donate-card-vip-tier:hover,
.donate-card-vip-tier:focus-visible {
    background:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(255, 255, 255, 0.22), transparent 34%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(5, 8, 16, 0.38), transparent 46%),
        radial-gradient(circle at 84% 82%, var(--card-surface-glow), transparent 38%),
        linear-gradient(145deg, var(--card-surface-1), var(--card-surface-2) 52%, var(--card-surface-3)) !important;
}


/* -------------------------
   Shop card material textures patch 35
   Красивые материал-текстуры без мусорного шума
   ------------------------- */

/* Мягкий материал-финиш. Вместо шумных полос — крупные переливы, жилы и фасетные формы. */
.donate-card-vip-tier {
    background: var(--tier-card-finish, var(--tier-card-material-background, inherit)) !important;
}

.donate-card-vip-tier .donate-card-inner::before {
    display: block !important;
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    background: var(--tier-material-finish) !important;
    opacity: var(--tier-finish-opacity, 0.56) !important;
    mix-blend-mode: soft-light !important;
    filter: saturate(1.02) contrast(1.03) !important;
}

/* Камень — спокойные минеральные плиты и мягкие серые переходы. */
.donate-card-vip-tier-0 {
    --tier-finish-opacity: 0.60;
    --tier-card-finish:
        radial-gradient(110% 88% at 16% 14%, rgba(245,248,252,0.18) 0%, rgba(245,248,252,0.08) 18%, transparent 44%),
        radial-gradient(90% 74% at 82% 82%, rgba(12,16,24,0.22) 0%, rgba(12,16,24,0.12) 24%, transparent 52%),
        linear-gradient(142deg, rgba(69,77,88,0.98) 0%, rgba(50,57,69,0.98) 33%, rgba(86,94,106,0.96) 68%, rgba(58,66,76,0.98) 100%);
    --tier-material-finish:
        linear-gradient(132deg, transparent 0 8%, rgba(255,255,255,0.10) 9% 13%, transparent 14% 36%, rgba(0,0,0,0.10) 37% 42%, transparent 43% 100%),
        linear-gradient(28deg, transparent 0 18%, rgba(255,255,255,0.08) 19% 22%, transparent 23% 48%, rgba(0,0,0,0.07) 49% 53%, transparent 54% 100%),
        radial-gradient(42% 36% at 28% 32%, rgba(255,255,255,0.10) 0%, transparent 68%),
        radial-gradient(46% 40% at 72% 72%, rgba(0,0,0,0.12) 0%, transparent 72%);
}

/* Медь — мягкий металл с тёплым бликом и лёгкой патиной. */
.donate-card-vip-tier-1 {
    --tier-finish-opacity: 0.58;
    --tier-card-finish:
        radial-gradient(112% 86% at 14% 14%, rgba(255,225,206,0.16) 0%, rgba(255,225,206,0.07) 18%, transparent 42%),
        radial-gradient(86% 68% at 84% 78%, rgba(39,16,12,0.24) 0%, rgba(39,16,12,0.11) 26%, transparent 50%),
        linear-gradient(145deg, rgba(117,60,47,0.98) 0%, rgba(86,43,35,0.98) 28%, rgba(138,78,63,0.95) 64%, rgba(94,48,38,0.98) 100%);
    --tier-material-finish:
        linear-gradient(136deg, transparent 0 10%, rgba(255,214,188,0.11) 11% 15%, transparent 16% 38%, rgba(100,178,145,0.09) 39% 45%, transparent 46% 100%),
        linear-gradient(36deg, transparent 0 22%, rgba(255,240,225,0.08) 23% 26%, transparent 27% 58%, rgba(78,31,24,0.09) 59% 63%, transparent 64% 100%),
        radial-gradient(40% 32% at 30% 28%, rgba(255,255,255,0.10) 0%, transparent 66%),
        radial-gradient(44% 38% at 78% 74%, rgba(42,18,14,0.12) 0%, transparent 70%);
}

/* Железо — чистый яркий металл, почти полированная сталь. */
.donate-card-vip-tier-2 {
    --tier-finish-opacity: 0.62;
    --tier-card-finish:
        radial-gradient(118% 88% at 14% 12%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.10) 18%, transparent 42%),
        radial-gradient(92% 70% at 84% 82%, rgba(30,38,48,0.20) 0%, rgba(30,38,48,0.10) 26%, transparent 50%),
        linear-gradient(145deg, rgba(104,114,128,0.98) 0%, rgba(76,87,100,0.98) 24%, rgba(163,171,182,0.94) 56%, rgba(95,105,118,0.98) 100%);
    --tier-material-finish:
        linear-gradient(135deg, transparent 0 9%, rgba(255,255,255,0.16) 10% 14%, transparent 15% 38%, rgba(210,218,228,0.10) 39% 43%, transparent 44% 100%),
        linear-gradient(24deg, transparent 0 20%, rgba(255,255,255,0.11) 21% 24%, transparent 25% 54%, rgba(62,74,87,0.08) 55% 58%, transparent 59% 100%),
        radial-gradient(34% 28% at 28% 26%, rgba(255,255,255,0.14) 0%, transparent 68%),
        radial-gradient(36% 30% at 72% 66%, rgba(255,255,255,0.10) 0%, transparent 68%);
}

/* Золото — плотный премиальный металл с мягкими сатиновыми гранями. */
.donate-card-vip-tier-3 {
    --tier-finish-opacity: 0.62;
    --tier-card-finish:
        radial-gradient(116% 86% at 14% 12%, rgba(255,246,188,0.18) 0%, rgba(255,246,188,0.08) 18%, transparent 42%),
        radial-gradient(88% 72% at 86% 82%, rgba(73,46,6,0.22) 0%, rgba(73,46,6,0.10) 24%, transparent 50%),
        linear-gradient(145deg, rgba(132,95,16,0.98) 0%, rgba(109,77,12,0.98) 26%, rgba(196,154,38,0.95) 60%, rgba(122,86,14,0.98) 100%);
    --tier-material-finish:
        linear-gradient(134deg, transparent 0 8%, rgba(255,248,207,0.14) 9% 13%, transparent 14% 34%, rgba(255,220,92,0.10) 35% 40%, transparent 41% 100%),
        linear-gradient(30deg, transparent 0 18%, rgba(255,239,164,0.10) 19% 23%, transparent 24% 52%, rgba(104,69,8,0.08) 53% 57%, transparent 58% 100%),
        radial-gradient(38% 30% at 28% 24%, rgba(255,255,229,0.14) 0%, transparent 68%),
        radial-gradient(44% 34% at 76% 72%, rgba(255,214,110,0.12) 0%, transparent 70%);
}

/* Алмаз — кристальные фасеты, холодные переливы и премиальная глубина. */
.donate-card-vip-tier-4 {
    --tier-finish-opacity: 0.62;
    --tier-card-finish:
        radial-gradient(118% 88% at 14% 12%, rgba(224,255,255,0.18) 0%, rgba(224,255,255,0.08) 18%, transparent 42%),
        radial-gradient(88% 72% at 86% 82%, rgba(0,62,74,0.22) 0%, rgba(0,62,74,0.10) 24%, transparent 50%),
        linear-gradient(145deg, rgba(11,112,123,0.98) 0%, rgba(8,86,99,0.98) 26%, rgba(34,178,185,0.94) 58%, rgba(8,97,108,0.98) 100%);
    --tier-material-finish:
        linear-gradient(138deg, transparent 0 7%, rgba(234,255,255,0.14) 8% 12%, transparent 13% 28%, rgba(142,255,250,0.10) 29% 34%, transparent 35% 100%),
        linear-gradient(52deg, transparent 0 20%, rgba(221,255,255,0.10) 21% 24%, transparent 25% 46%, rgba(0,109,122,0.08) 47% 51%, transparent 52% 100%),
        linear-gradient(118deg, transparent 0 32%, rgba(205,255,255,0.08) 33% 36%, transparent 37% 58%, rgba(0,78,92,0.08) 59% 63%, transparent 64% 100%),
        radial-gradient(32% 28% at 30% 26%, rgba(255,255,255,0.12) 0%, transparent 66%),
        radial-gradient(38% 30% at 76% 70%, rgba(182,255,255,0.10) 0%, transparent 68%);
}

/* Незерит — обсидиановая глубина, дымчатый фиолетовый металл. */
.donate-card-vip-tier-5 {
    --tier-finish-opacity: 0.66;
    --tier-card-finish:
        radial-gradient(118% 88% at 14% 12%, rgba(197,142,255,0.12) 0%, rgba(197,142,255,0.05) 18%, transparent 42%),
        radial-gradient(94% 74% at 86% 84%, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0.14) 28%, transparent 52%),
        linear-gradient(145deg, rgba(19,14,28,0.99) 0%, rgba(13,10,20,0.99) 28%, rgba(60,39,83,0.93) 62%, rgba(10,8,16,0.99) 100%);
    --tier-material-finish:
        linear-gradient(138deg, transparent 0 10%, rgba(205,172,255,0.10) 11% 15%, transparent 16% 36%, rgba(94,58,138,0.12) 37% 43%, transparent 44% 100%),
        linear-gradient(36deg, transparent 0 22%, rgba(155,118,214,0.08) 23% 26%, transparent 27% 56%, rgba(0,0,0,0.12) 57% 61%, transparent 62% 100%),
        radial-gradient(34% 30% at 26% 22%, rgba(222,197,255,0.10) 0%, transparent 66%),
        radial-gradient(42% 36% at 78% 74%, rgba(0,0,0,0.18) 0%, transparent 72%);
}

/* В тёмной теме текстуры чуть спокойнее, чтобы не ломать контраст. */
[data-theme="dark"] .donate-card-vip-tier .donate-card-inner::before {
    opacity: calc(var(--tier-finish-opacity, 0.56) * 0.92) !important;
}

/* -------------------------
   Shop visible premium textures patch 36
   Текстуры стали отдельным, читаемым material-layer.
   Без генерации изображений: только CSS-градиенты.
   ------------------------- */

/* Делаем поверхность карточки не просто цветной, а материалоподобной.
   Слой находится над серым фоном/CD-зоной, но под контентом карточки. */
.donate-card-vip-tier .donate-card-inner::before {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    border-radius: inherit !important;
    opacity: var(--tier-texture-opacity-36, 0.82) !important;
    background: var(--tier-texture-36) !important;
    background-size: var(--tier-texture-size-36, auto) !important;
    background-position: center !important;
    background-repeat: repeat !important;
    mix-blend-mode: var(--tier-texture-blend-36, overlay) !important;
    filter: saturate(var(--tier-texture-saturation-36, 1.08)) contrast(var(--tier-texture-contrast-36, 1.10)) !important;
}

.donate-card-vip-tier:hover .donate-card-inner::before,
.donate-card-vip-tier:focus-visible .donate-card-inner::before {
    opacity: var(--tier-texture-hover-opacity-36, 0.94) !important;
    filter: saturate(var(--tier-texture-hover-saturation-36, 1.14)) contrast(var(--tier-texture-hover-contrast-36, 1.16)) brightness(1.04) !important;
}

/* Дополнительно усиливаем базовую поверхность, чтобы текстура читалась даже без hover. */
.donate-card-vip-tier {
    background: var(--tier-premium-surface-36, var(--tier-premium-surface)) !important;
}

.donate-card-vip-tier:hover,
.donate-card-vip-tier:focus-visible {
    background: var(--tier-premium-surface-hover-36, var(--tier-premium-surface-36, var(--tier-premium-surface))) !important;
}

/* VIP 0 — камень: крупные плиты, мягкие сколы, видимые границы блоков. */
.donate-card-vip-tier-0 {
    --tier-texture-opacity-36: 0.88;
    --tier-texture-hover-opacity-36: 0.96;
    --tier-texture-blend-36: overlay;
    --tier-texture-contrast-36: 1.18;
    --tier-texture-36:
        linear-gradient(90deg, transparent 0 30%, rgba(255,255,255,0.105) 30.5%, transparent 31.2% 64%, rgba(0,0,0,0.130) 64.5%, transparent 65.2% 100%),
        linear-gradient(0deg, transparent 0 38%, rgba(0,0,0,0.110) 38.5%, transparent 39.2% 72%, rgba(255,255,255,0.070) 72.5%, transparent 73.2% 100%),
        linear-gradient(132deg, transparent 0 19%, rgba(255,255,255,0.100) 20%, transparent 22% 54%, rgba(0,0,0,0.125) 55%, transparent 57% 100%),
        radial-gradient(circle at 18% 21%, rgba(255,255,255,0.120), transparent 14%),
        radial-gradient(circle at 76% 78%, rgba(0,0,0,0.170), transparent 18%);
    --tier-texture-size-36: 210px 210px, 210px 210px, 100% 100%, 100% 100%, 100% 100%;
    --tier-premium-surface-36:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(255,255,255,0.24), transparent 34%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(0,0,0,0.36), transparent 50%),
        linear-gradient(145deg, #6F7783 0%, #3B4451 44%, #8B929D 72%, #4B535F 100%);
    --tier-premium-surface-hover-36:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(255,255,255,0.30), transparent 35%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(0,0,0,0.38), transparent 52%),
        linear-gradient(145deg, #7A828E 0%, #414B59 44%, #9AA1AC 72%, #535C69 100%);
}

/* VIP I — медь: сатиновая шлифовка + тёплые прожилки + лёгкая патина. */
.donate-card-vip-tier-1 {
    --tier-texture-opacity-36: 0.84;
    --tier-texture-hover-opacity-36: 0.94;
    --tier-texture-blend-36: overlay;
    --tier-texture-contrast-36: 1.16;
    --tier-texture-36:
        repeating-linear-gradient(115deg, rgba(255,226,205,0.110) 0 1px, transparent 1px 9px, rgba(79,31,20,0.105) 9px 10px, transparent 10px 22px),
        radial-gradient(ellipse at 74% 24%, rgba(95,220,166,0.145), transparent 24%),
        radial-gradient(ellipse at 22% 78%, rgba(255,218,196,0.145), transparent 22%),
        linear-gradient(40deg, transparent 0 28%, rgba(255,245,226,0.090) 29%, transparent 31% 70%, rgba(74,30,20,0.125) 71%, transparent 73% 100%);
    --tier-texture-size-36: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    --tier-premium-surface-36:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(255,226,204,0.26), transparent 35%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(58,20,12,0.38), transparent 50%),
        linear-gradient(145deg, #B66E52 0%, #593026 45%, #D18B70 70%, #7A3F31 100%);
    --tier-premium-surface-hover-36:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(255,238,218,0.33), transparent 36%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(58,20,12,0.40), transparent 52%),
        linear-gradient(145deg, #C87B5E 0%, #63372C 45%, #E19B80 70%, #884838 100%);
}

/* VIP II — железо: видимый brushed metal, тонкие серебряные дорожки и яркие световые срезы. */
.donate-card-vip-tier-2 {
    --tier-texture-opacity-36: 0.92;
    --tier-texture-hover-opacity-36: 1;
    --tier-texture-blend-36: screen;
    --tier-texture-saturation-36: 0.98;
    --tier-texture-contrast-36: 1.20;
    --tier-texture-36:
        linear-gradient(100deg, transparent 0 15%, rgba(255,255,255,0.260) 16%, transparent 18% 48%, rgba(255,255,255,0.145) 49%, transparent 51% 100%),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.060) 0 1px, transparent 1px 5px, rgba(30,40,54,0.055) 5px 6px, transparent 6px 12px),
        repeating-linear-gradient(92deg, rgba(255,255,255,0.040) 0 1px, transparent 1px 18px),
        radial-gradient(ellipse at 22% 20%, rgba(255,255,255,0.160), transparent 22%);
    --tier-texture-size-36: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    --tier-premium-surface-36:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(255,255,255,0.34), transparent 34%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(28,36,48,0.32), transparent 50%),
        linear-gradient(145deg, #9AA5B2 0%, #435061 42%, #EEF2F5 66%, #768390 100%);
    --tier-premium-surface-hover-36:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(255,255,255,0.42), transparent 35%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(28,36,48,0.34), transparent 52%),
        linear-gradient(145deg, #A9B4C0 0%, #4A586B 42%, #FFFFFF 66%, #838F9C 100%);
}

/* VIP III — золото: премиальные волны, мягкая чеканка, читаемый золотой металл. */
.donate-card-vip-tier-3 {
    --tier-texture-opacity-36: 0.88;
    --tier-texture-hover-opacity-36: 0.98;
    --tier-texture-blend-36: overlay;
    --tier-texture-contrast-36: 1.18;
    --tier-texture-36:
        radial-gradient(ellipse at 24% 18%, rgba(255,250,184,0.220), transparent 22%),
        radial-gradient(ellipse at 78% 76%, rgba(100,62,6,0.185), transparent 28%),
        repeating-linear-gradient(126deg, rgba(255,238,142,0.105) 0 2px, transparent 2px 20px, rgba(107,66,6,0.090) 20px 22px, transparent 22px 46px),
        linear-gradient(35deg, transparent 0 25%, rgba(255,255,218,0.140) 26%, transparent 29% 65%, rgba(124,78,6,0.130) 66%, transparent 69% 100%);
    --tier-texture-size-36: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    --tier-premium-surface-36:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(255,248,184,0.30), transparent 34%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(84,48,3,0.34), transparent 50%),
        linear-gradient(145deg, #D7A92F 0%, #704707 41%, #FFE177 65%, #A77C16 100%);
    --tier-premium-surface-hover-36:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(255,255,204,0.38), transparent 36%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(84,48,3,0.36), transparent 52%),
        linear-gradient(145deg, #EAB83B 0%, #7E5209 41%, #FFF098 65%, #BA8D1E 100%);
}

/* VIP IV — алмаз: заметные грани, ледяные плоскости, кристальный премиум. */
.donate-card-vip-tier-4 {
    --tier-texture-opacity-36: 0.90;
    --tier-texture-hover-opacity-36: 1;
    --tier-texture-blend-36: screen;
    --tier-texture-contrast-36: 1.16;
    --tier-texture-36:
        conic-gradient(from 42deg at 22% 20%, rgba(255,255,255,0.190), transparent 44deg, rgba(72,255,255,0.110) 96deg, transparent 148deg, rgba(255,255,255,0.140) 230deg, transparent 360deg),
        linear-gradient(132deg, transparent 0 18%, rgba(226,255,255,0.180) 19%, transparent 22% 48%, rgba(0,190,205,0.105) 49%, transparent 52% 100%),
        linear-gradient(42deg, transparent 0 31%, rgba(255,255,255,0.155) 32%, transparent 35% 70%, rgba(0,84,104,0.095) 71%, transparent 74% 100%),
        radial-gradient(ellipse at 74% 24%, rgba(210,255,255,0.190), transparent 24%);
    --tier-texture-size-36: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    --tier-premium-surface-36:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(218,255,255,0.33), transparent 34%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(0,60,75,0.33), transparent 50%),
        linear-gradient(145deg, #1BA9B8 0%, #06495D 43%, #A7FFFF 66%, #0B8B9C 100%);
    --tier-premium-surface-hover-36:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(235,255,255,0.42), transparent 36%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(0,60,75,0.35), transparent 52%),
        linear-gradient(145deg, #22C2D0 0%, #07566D 43%, #D5FFFF 66%, #0D9FB1 100%);
}

/* VIP V — незерит: тёмная обсидиановая глубина, фиолетовые жилы, без мусорного шума. */
.donate-card-vip-tier-5 {
    --tier-texture-opacity-36: 0.92;
    --tier-texture-hover-opacity-36: 1;
    --tier-texture-blend-36: screen;
    --tier-texture-contrast-36: 1.15;
    --tier-texture-36:
        radial-gradient(ellipse at 22% 18%, rgba(199,145,255,0.145), transparent 23%),
        radial-gradient(ellipse at 78% 78%, rgba(0,0,0,0.360), transparent 28%),
        linear-gradient(128deg, transparent 0 18%, rgba(172,112,242,0.115) 19%, transparent 22% 58%, rgba(0,0,0,0.210) 59%, transparent 62% 100%),
        linear-gradient(38deg, transparent 0 34%, rgba(105,66,145,0.130) 35%, transparent 38% 76%, rgba(0,0,0,0.180) 77%, transparent 80% 100%);
    --tier-texture-size-36: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    --tier-premium-surface-36:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(194,133,255,0.18), transparent 34%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(0,0,0,0.62), transparent 52%),
        linear-gradient(145deg, #251833 0%, #08070D 48%, #482D62 72%, #100B18 100%);
    --tier-premium-surface-hover-36:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(213,165,255,0.24), transparent 36%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(0,0,0,0.64), transparent 54%),
        linear-gradient(145deg, #2E1E40 0%, #0B0812 48%, #573578 72%, #140E1E 100%);
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
    .donate-card-vip-tier .donate-card-inner::before {
        opacity: calc(var(--tier-texture-opacity-36, 0.82) * 0.84) !important;
        filter: saturate(1.02) contrast(1.06) !important;
    }
}

/* -------------------------
   Shop material texture patch 37
   VIP IV получил более явную кристальную фактуру.
   VIP V получил другую, более спокойную незеритовую текстуру.
   ------------------------- */

/* VIP IV — алмаз: настоящие кристальные осколки, грани и ледяная глубина. */
.donate-card-vip-tier-4 {
    --tier-texture-opacity-36: 0.96;
    --tier-texture-hover-opacity-36: 1;
    --tier-texture-blend-36: screen;
    --tier-texture-saturation-36: 1.12;
    --tier-texture-contrast-36: 1.24;
    --tier-texture-hover-saturation-36: 1.20;
    --tier-texture-hover-contrast-36: 1.30;
    --tier-texture-36:
        linear-gradient(132deg, transparent 0 9%, rgba(236,255,255,0.34) 9.8% 11.8%, transparent 12.6% 33%, rgba(48,230,255,0.17) 34% 36.4%, transparent 37.2% 100%),
        linear-gradient(42deg, transparent 0 17%, rgba(255,255,255,0.28) 18% 20.6%, transparent 21.4% 48%, rgba(0,125,156,0.18) 49% 52%, transparent 53% 100%),
        linear-gradient(164deg, transparent 0 25%, rgba(190,255,255,0.20) 26% 29%, transparent 30% 61%, rgba(255,255,255,0.20) 62% 64.5%, transparent 65.4% 100%),
        conic-gradient(from 18deg at 28% 22%, rgba(255,255,255,0.34), rgba(134,255,255,0.10) 42deg, transparent 78deg, rgba(225,255,255,0.20) 126deg, transparent 185deg, rgba(39,210,235,0.14) 238deg, transparent 300deg, rgba(255,255,255,0.24) 360deg),
        conic-gradient(from 204deg at 76% 74%, rgba(0,83,104,0.18), transparent 46deg, rgba(218,255,255,0.16) 96deg, transparent 150deg, rgba(255,255,255,0.18) 214deg, transparent 284deg, rgba(0,170,196,0.12) 360deg),
        radial-gradient(42% 34% at 30% 24%, rgba(255,255,255,0.28), transparent 62%),
        radial-gradient(46% 38% at 78% 78%, rgba(0,65,84,0.28), transparent 66%);
    --tier-texture-size-36: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    --tier-premium-surface-36:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(236,255,255,0.42), transparent 34%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(0,56,75,0.38), transparent 52%),
        linear-gradient(145deg, #0F92A6 0%, #043B52 39%, #C8FFFF 64%, #0C7E92 100%);
    --tier-premium-surface-hover-36:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(245,255,255,0.50), transparent 36%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(0,56,75,0.40), transparent 54%),
        linear-gradient(145deg, #16B3C6 0%, #054860 39%, #E5FFFF 64%, #0E94AA 100%);
}

/* VIP V — незерит: не прожилки, а тяжёлый тёмный металл с фиолетовым свечением по слоям. */
.donate-card-vip-tier-5 {
    --tier-texture-opacity-36: 0.88;
    --tier-texture-hover-opacity-36: 0.98;
    --tier-texture-blend-36: overlay;
    --tier-texture-saturation-36: 1.05;
    --tier-texture-contrast-36: 1.18;
    --tier-texture-hover-saturation-36: 1.10;
    --tier-texture-hover-contrast-36: 1.24;
    --tier-texture-36:
        linear-gradient(90deg, transparent 0 13%, rgba(190,136,255,0.10) 14% 15.2%, transparent 16.2% 38%, rgba(0,0,0,0.22) 39% 41%, transparent 42% 100%),
        linear-gradient(0deg, transparent 0 20%, rgba(255,255,255,0.035) 21% 22%, transparent 23% 52%, rgba(109,75,158,0.12) 53% 55%, transparent 56% 100%),
        linear-gradient(145deg, transparent 0 24%, rgba(92,56,130,0.16) 25% 28%, transparent 29% 63%, rgba(0,0,0,0.24) 64% 68%, transparent 69% 100%),
        radial-gradient(ellipse at 18% 16%, rgba(211,169,255,0.15), transparent 28%),
        radial-gradient(ellipse at 84% 74%, rgba(36,20,54,0.42), transparent 42%),
        radial-gradient(ellipse at 44% 52%, rgba(118,76,168,0.10), transparent 56%);
    --tier-texture-size-36: 170px 170px, 170px 170px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    --tier-premium-surface-36:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(176,119,235,0.15), transparent 34%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(0,0,0,0.66), transparent 54%),
        linear-gradient(145deg, #17111F 0%, #06050A 42%, #2A1A3C 65%, #0B0811 100%);
    --tier-premium-surface-hover-36:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(205,157,255,0.20), transparent 36%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(0,0,0,0.68), transparent 56%),
        linear-gradient(145deg, #1D1529 0%, #08060D 42%, #33204B 65%, #100B18 100%);
}

/* -------------------------
   Shop material texture patch 38
   Убраны блики из texture-layer. Текстуры теперь читаются как материал,
   а не как отдельные световые пятна. Алмазная карточка получила именно
   кристаллические грани/осколки, без radial-glare.
   ------------------------- */

/* Общий слой текстуры: без засветки, только рисунок материала. */
.donate-card-vip-tier .donate-card-inner::before {
    opacity: var(--tier-texture-opacity-38, var(--tier-texture-opacity-36, 0.78)) !important;
    background: var(--tier-texture-38, var(--tier-texture-36)) !important;
    background-size: var(--tier-texture-size-38, var(--tier-texture-size-36, auto)) !important;
    mix-blend-mode: var(--tier-texture-blend-38, overlay) !important;
    filter: saturate(var(--tier-texture-saturation-38, 1.02)) contrast(var(--tier-texture-contrast-38, 1.08)) !important;
}

.donate-card-vip-tier:hover .donate-card-inner::before,
.donate-card-vip-tier:focus-visible .donate-card-inner::before {
    opacity: var(--tier-texture-hover-opacity-38, var(--tier-texture-opacity-38, 0.86)) !important;
    filter: saturate(var(--tier-texture-hover-saturation-38, 1.04)) contrast(var(--tier-texture-hover-contrast-38, 1.12)) !important;
}

/* VIP 0 — камень: блоковые швы, трещинки, без световых пятен. */
.donate-card-vip-tier-0 {
    --tier-texture-opacity-38: 0.82;
    --tier-texture-hover-opacity-38: 0.88;
    --tier-texture-blend-38: overlay;
    --tier-texture-contrast-38: 1.14;
    --tier-texture-38:
        linear-gradient(90deg, transparent 0 24%, rgba(0,0,0,0.16) 24.4% 25.1%, transparent 25.6% 55%, rgba(255,255,255,0.06) 55.4% 56%, transparent 56.5% 100%),
        linear-gradient(0deg, transparent 0 32%, rgba(0,0,0,0.14) 32.4% 33.1%, transparent 33.6% 69%, rgba(255,255,255,0.05) 69.4% 70%, transparent 70.5% 100%),
        linear-gradient(135deg, transparent 0 12%, rgba(0,0,0,0.12) 12.4% 13%, transparent 13.5% 43%, rgba(255,255,255,0.045) 43.4% 44%, transparent 44.5% 100%),
        repeating-linear-gradient(27deg, rgba(0,0,0,0.035) 0 1px, transparent 1px 17px);
    --tier-texture-size-38: 220px 220px, 220px 220px, 100% 100%, 100% 100%;
}

/* VIP I — медь: мягкая шлифовка и патина, без бликов. */
.donate-card-vip-tier-1 {
    --tier-texture-opacity-38: 0.78;
    --tier-texture-hover-opacity-38: 0.86;
    --tier-texture-blend-38: overlay;
    --tier-texture-contrast-38: 1.12;
    --tier-texture-38:
        repeating-linear-gradient(112deg, rgba(255,220,195,0.055) 0 1px, transparent 1px 8px, rgba(86,36,22,0.085) 8px 9px, transparent 9px 21px),
        linear-gradient(38deg, transparent 0 28%, rgba(78,190,145,0.075) 28.5% 32%, transparent 32.5% 68%, rgba(85,32,20,0.080) 68.5% 71.5%, transparent 72% 100%),
        linear-gradient(151deg, transparent 0 18%, rgba(255,235,216,0.050) 18.5% 20%, transparent 20.5% 77%, rgba(52,20,13,0.070) 77.5% 79%, transparent 79.5% 100%);
    --tier-texture-size-38: 100% 100%, 100% 100%, 100% 100%;
}

/* VIP II — железо: brushed metal / сталь, без световых пятен. */
.donate-card-vip-tier-2 {
    --tier-texture-opacity-38: 0.80;
    --tier-texture-hover-opacity-38: 0.88;
    --tier-texture-blend-38: overlay;
    --tier-texture-saturation-38: 0.96;
    --tier-texture-contrast-38: 1.16;
    --tier-texture-38:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.050) 0 1px, transparent 1px 6px, rgba(18,26,36,0.070) 6px 7px, transparent 7px 14px),
        repeating-linear-gradient(92deg, rgba(255,255,255,0.030) 0 1px, transparent 1px 20px, rgba(0,0,0,0.045) 20px 21px, transparent 21px 42px),
        linear-gradient(110deg, transparent 0 18%, rgba(0,0,0,0.070) 18.5% 20%, transparent 20.5% 58%, rgba(255,255,255,0.060) 58.5% 60%, transparent 60.5% 100%);
    --tier-texture-size-38: 100% 100%, 100% 100%, 100% 100%;
}

/* VIP III — золото: аккуратная чеканка без тёмных треугольников/пятен. */
.donate-card-vip-tier-3 {
    --tier-texture-opacity-38: 0.74;
    --tier-texture-hover-opacity-38: 0.82;
    --tier-texture-blend-38: overlay;
    --tier-texture-contrast-38: 1.10;
    --tier-texture-38:
        repeating-linear-gradient(126deg, rgba(255,243,178,0.055) 0 1px, transparent 1px 18px, rgba(164,116,18,0.040) 18px 19px, transparent 19px 42px),
        linear-gradient(145deg, rgba(255,249,215,0.120) 0%, rgba(255,245,196,0.030) 22%, rgba(189,136,24,0.045) 48%, rgba(255,244,189,0.090) 72%, rgba(138,96,14,0.040) 100%),
        linear-gradient(35deg, transparent 0 28%, rgba(255,240,178,0.055) 28.5% 29.2%, transparent 29.8% 62%, rgba(182,128,22,0.040) 62.6% 63.2%, transparent 63.8% 100%);
    --tier-texture-size-38: 100% 100%, 100% 100%, 100% 100%;
}

/* VIP IV — алмаз: кристаллы/осколки. Не блики, а сетка граней. */
.donate-card-vip-tier-4 {
    --tier-texture-opacity-38: 0.92;
    --tier-texture-hover-opacity-38: 0.98;
    --tier-texture-blend-38: overlay;
    --tier-texture-saturation-38: 1.05;
    --tier-texture-contrast-38: 1.18;
    --tier-texture-hover-saturation-38: 1.08;
    --tier-texture-hover-contrast-38: 1.22;
    --tier-texture-38:
        conic-gradient(from 18deg at 18% 22%, transparent 0 36deg, rgba(190,255,255,0.120) 36deg 72deg, rgba(0,115,140,0.075) 72deg 108deg, transparent 108deg 360deg),
        conic-gradient(from 198deg at 43% 38%, transparent 0 42deg, rgba(225,255,255,0.115) 42deg 82deg, rgba(0,95,120,0.080) 82deg 124deg, transparent 124deg 360deg),
        conic-gradient(from 64deg at 78% 30%, transparent 0 50deg, rgba(170,245,255,0.105) 50deg 94deg, rgba(0,80,105,0.075) 94deg 132deg, transparent 132deg 360deg),
        conic-gradient(from 250deg at 70% 77%, transparent 0 44deg, rgba(215,255,255,0.105) 44deg 88deg, rgba(0,120,150,0.070) 88deg 130deg, transparent 130deg 360deg),
        linear-gradient(34deg, transparent 0 18%, rgba(220,255,255,0.130) 18.4% 19.2%, transparent 19.8% 44%, rgba(0,93,118,0.100) 44.4% 45.2%, transparent 45.8% 100%),
        linear-gradient(118deg, transparent 0 24%, rgba(205,255,255,0.125) 24.4% 25.2%, transparent 25.8% 58%, rgba(0,74,96,0.100) 58.4% 59.2%, transparent 59.8% 100%),
        linear-gradient(156deg, transparent 0 13%, rgba(230,255,255,0.105) 13.4% 14.1%, transparent 14.8% 70%, rgba(0,115,140,0.090) 70.4% 71.2%, transparent 71.8% 100%);
    --tier-texture-size-38: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}

/* VIP V — незерит: тяжёлые пластины, без световых прожилок. */
.donate-card-vip-tier-5 {
    --tier-texture-opacity-38: 0.82;
    --tier-texture-hover-opacity-38: 0.90;
    --tier-texture-blend-38: overlay;
    --tier-texture-saturation-38: 1.02;
    --tier-texture-contrast-38: 1.16;
    --tier-texture-38:
        linear-gradient(90deg, transparent 0 21%, rgba(0,0,0,0.22) 21.5% 23%, transparent 23.5% 51%, rgba(82,54,112,0.105) 51.5% 53%, transparent 53.5% 100%),
        linear-gradient(0deg, transparent 0 18%, rgba(0,0,0,0.20) 18.5% 20%, transparent 20.5% 64%, rgba(94,62,126,0.095) 64.5% 66%, transparent 66.5% 100%),
        linear-gradient(145deg, transparent 0 26%, rgba(26,17,36,0.22) 26.5% 29%, transparent 29.5% 70%, rgba(90,55,125,0.080) 70.5% 72%, transparent 72.5% 100%),
        conic-gradient(from 30deg at 28% 32%, transparent 0 64deg, rgba(0,0,0,0.18) 64deg 88deg, transparent 88deg 174deg, rgba(83,55,112,0.075) 174deg 198deg, transparent 198deg 360deg),
        conic-gradient(from 210deg at 78% 66%, transparent 0 54deg, rgba(0,0,0,0.20) 54deg 82deg, transparent 82deg 180deg, rgba(89,58,128,0.070) 180deg 205deg, transparent 205deg 360deg);
    --tier-texture-size-38: 190px 190px, 190px 190px, 100% 100%, 100% 100%, 100% 100%;
}

/* -------------------------
   Shop material texture patch 39
   VIP IV: убраны световые пятна/блики из texture-layer.
   Текстура реализована как сухая кристаллическая сетка: грани, трещины,
   полигональные срезы. Без radial/conic glare и без белых засветов.
   ------------------------- */

.donate-card-vip-tier-4 {
    --tier-texture-opacity-38: 0.86;
    --tier-texture-hover-opacity-38: 0.92;
    --tier-texture-blend-38: overlay;
    --tier-texture-saturation-38: 1.02;
    --tier-texture-contrast-38: 1.20;
    --tier-texture-hover-saturation-38: 1.04;
    --tier-texture-hover-contrast-38: 1.24;
    --tier-texture-38:
        linear-gradient(28deg, transparent 0 9%, rgba(0, 72, 94, 0.18) 9.35% 9.95%, transparent 10.3% 35%, rgba(98, 235, 245, 0.10) 35.35% 35.9%, transparent 36.25% 100%),
        linear-gradient(72deg, transparent 0 16%, rgba(0, 112, 132, 0.15) 16.35% 16.95%, transparent 17.3% 47%, rgba(193, 255, 255, 0.08) 47.35% 47.9%, transparent 48.25% 100%),
        linear-gradient(124deg, transparent 0 20%, rgba(0, 62, 86, 0.20) 20.35% 20.95%, transparent 21.3% 55%, rgba(108, 238, 246, 0.09) 55.35% 55.9%, transparent 56.25% 100%),
        linear-gradient(156deg, transparent 0 12%, rgba(0, 95, 116, 0.16) 12.35% 12.95%, transparent 13.3% 68%, rgba(199, 255, 255, 0.07) 68.35% 68.9%, transparent 69.25% 100%),
        linear-gradient(11deg, transparent 0 32%, rgba(0, 57, 78, 0.15) 32.35% 32.9%, transparent 33.25% 82%, rgba(120, 236, 244, 0.08) 82.35% 82.85%, transparent 83.2% 100%),
        linear-gradient(102deg, transparent 0 5%, rgba(0, 78, 98, 0.13) 5.35% 5.95%, transparent 6.3% 61%, rgba(0, 110, 132, 0.12) 61.35% 61.95%, transparent 62.3% 100%),
        linear-gradient(135deg, rgba(4, 74, 98, 0.08) 0 16%, transparent 16.5% 28%, rgba(151, 244, 248, 0.045) 28.5% 42%, transparent 42.5% 58%, rgba(0, 64, 90, 0.10) 58.5% 74%, transparent 74.5% 100%),
        linear-gradient(45deg, transparent 0 24%, rgba(5, 86, 112, 0.09) 24.5% 39%, transparent 39.5% 63%, rgba(124, 232, 242, 0.045) 63.5% 78%, transparent 78.5% 100%);
    --tier-texture-size-38: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}

/* -------------------------
   Shop diamond texture patch 40
   VIP IV: аккуратная алмазная фактура без бликов.
   Не световые пятна, а чистые кристаллические грани: тонкая сетка,
   спокойные плоскости и холодная глубина.
   ------------------------- */

.donate-card-vip-tier-4 {
    --tier-texture-opacity-38: 0.74;
    --tier-texture-hover-opacity-38: 0.82;
    --tier-texture-blend-38: overlay;
    --tier-texture-saturation-38: 0.96;
    --tier-texture-contrast-38: 1.08;
    --tier-texture-hover-saturation-38: 1.00;
    --tier-texture-hover-contrast-38: 1.12;
    --tier-texture-38:
        /* крупные холодные плоскости */
        linear-gradient(128deg,
            rgba(5, 77, 96, 0.12) 0 18%,
            transparent 18.5% 33%,
            rgba(110, 230, 236, 0.055) 33.5% 49%,
            transparent 49.5% 68%,
            rgba(0, 57, 80, 0.11) 68.5% 100%),
        linear-gradient(38deg,
            transparent 0 12%,
            rgba(150, 244, 248, 0.055) 12.5% 28%,
            transparent 28.5% 54%,
            rgba(0, 86, 108, 0.10) 54.5% 73%,
            transparent 73.5% 100%),
        /* тонкие кристаллические швы */
        linear-gradient(24deg,
            transparent 0 14%,
            rgba(210, 255, 255, 0.105) 14.15% 14.45%,
            transparent 14.75% 48%,
            rgba(0, 96, 118, 0.145) 48.15% 48.45%,
            transparent 48.75% 100%),
        linear-gradient(74deg,
            transparent 0 20%,
            rgba(0, 70, 92, 0.145) 20.15% 20.45%,
            transparent 20.75% 62%,
            rgba(190, 255, 255, 0.090) 62.15% 62.45%,
            transparent 62.75% 100%),
        linear-gradient(117deg,
            transparent 0 8%,
            rgba(178, 248, 250, 0.085) 8.15% 8.42%,
            transparent 8.72% 37%,
            rgba(0, 68, 88, 0.130) 37.15% 37.45%,
            transparent 37.75% 100%),
        linear-gradient(154deg,
            transparent 0 31%,
            rgba(0, 96, 116, 0.120) 31.15% 31.45%,
            transparent 31.75% 76%,
            rgba(205, 255, 255, 0.080) 76.15% 76.42%,
            transparent 76.72% 100%);
    --tier-texture-size-38: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}

/* -------------------------
   Shop patch 41
   VIP III: remove dirty paragraph shadow visible on bright gold surface.
   ------------------------- */

.donate-card-vip-tier-3 p {
    text-shadow: none !important;
}

/* -------------------------
   Shop CD glare color correction patch 43
   Only CD glare color maps are changed for VIP III and VIP IV.
   ------------------------- */

/* VIP III: меньше фиолетового, больше синего в CD-блике. Геометрия блика не меняется. */
.donate-card-vip-tier-3::before {
    background:
        radial-gradient(ellipse at var(--cd-light-x) var(--cd-light-y), rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.48) 8%, rgba(255, 255, 255, 0.12) 22%, transparent 48%),
        conic-gradient(
            from var(--cd-phase) at var(--cd-wave-x) var(--cd-wave-y),
            rgba(255, 18, 48, 0.88) 0deg,
            rgba(255, 118, 34, 0.70) 44deg,
            rgba(255, 232, 70, 0.58) 88deg,
            rgba(80, 232, 128, 0.54) 132deg,
            rgba(0, 224, 255, 0.76) 176deg,
            rgba(0, 128, 255, 0.88) 214deg,
            rgba(34, 70, 255, 0.90) 256deg,
            rgba(76, 116, 255, 0.82) 302deg,
            rgba(0, 210, 255, 0.76) 336deg,
            rgba(255, 18, 48, 0.88) 360deg
        ),
        repeating-radial-gradient(
            circle at 50% 50%,
            rgba(255, 255, 255, 0.00) 0px,
            rgba(255, 255, 255, 0.00) 5px,
            rgba(255, 255, 255, 0.18) 6px,
            rgba(255, 255, 255, 0.00) 8px,
            rgba(255, 255, 255, 0.00) 13px
        ),
        repeating-linear-gradient(
            var(--cd-line-angle),
            rgba(255, 255, 255, 0.00) 0px,
            rgba(255, 255, 255, 0.00) 13px,
            rgba(255, 255, 255, 0.26) 14px,
            rgba(255, 255, 255, 0.00) 16px,
            rgba(255, 255, 255, 0.00) 30px
        );
}

.donate-card-vip-tier-3 .donate-card-shine {
    background:
        linear-gradient(
            var(--cd-angle),
            transparent 0%,
            rgba(255, 255, 255, 0.00) 18%,
            rgba(0, 158, 255, 0.24) 30%,
            rgba(255, 255, 255, 0.82) 43%,
            rgba(255, 255, 255, 0.36) 50%,
            rgba(36, 82, 255, 0.34) 59%,
            rgba(0, 227, 255, 0.26) 71%,
            transparent 100%
        ),
        repeating-linear-gradient(
            calc(var(--cd-line-angle) + 18deg),
            rgba(255, 255, 255, 0.00) 0px,
            rgba(255, 255, 255, 0.00) 15px,
            rgba(255, 255, 255, 0.25) 16px,
            rgba(255, 255, 255, 0.00) 18px,
            rgba(255, 255, 255, 0.00) 33px
        );
}

/* VIP IV: цветовую карту CD-блика переворачиваем по палитре: сверху больше фиолетового, снизу жёлто-зелёные оттенки. Саму геометрию/маску блика не зеркалим. */
.donate-card-vip-tier-4::before {
    background:
        radial-gradient(ellipse at var(--cd-light-x) var(--cd-light-y), rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.48) 8%, rgba(255, 255, 255, 0.12) 22%, transparent 48%),
        linear-gradient(
            180deg,
            rgba(150, 70, 255, 0.78) 0%,
            rgba(96, 106, 255, 0.70) 26%,
            rgba(0, 220, 255, 0.48) 45%,
            rgba(255, 238, 70, 0.58) 68%,
            rgba(82, 255, 126, 0.58) 86%,
            rgba(0, 236, 255, 0.46) 100%
        ),
        conic-gradient(
            from var(--cd-phase) at var(--cd-wave-x) var(--cd-wave-y),
            rgba(162, 64, 255, 0.88) 0deg,
            rgba(96, 92, 255, 0.82) 48deg,
            rgba(0, 210, 255, 0.70) 96deg,
            rgba(70, 255, 152, 0.60) 146deg,
            rgba(255, 239, 72, 0.64) 194deg,
            rgba(255, 178, 42, 0.52) 238deg,
            rgba(86, 255, 124, 0.62) 284deg,
            rgba(0, 230, 255, 0.66) 326deg,
            rgba(162, 64, 255, 0.88) 360deg
        ),
        repeating-radial-gradient(
            circle at 50% 50%,
            rgba(255, 255, 255, 0.00) 0px,
            rgba(255, 255, 255, 0.00) 5px,
            rgba(255, 255, 255, 0.18) 6px,
            rgba(255, 255, 255, 0.00) 8px,
            rgba(255, 255, 255, 0.00) 13px
        ),
        repeating-linear-gradient(
            var(--cd-line-angle),
            rgba(255, 255, 255, 0.00) 0px,
            rgba(255, 255, 255, 0.00) 13px,
            rgba(255, 255, 255, 0.26) 14px,
            rgba(255, 255, 255, 0.00) 16px,
            rgba(255, 255, 255, 0.00) 30px
        );
}

.donate-card-vip-tier-4 .donate-card-shine {
    background:
        linear-gradient(
            180deg,
            rgba(150, 70, 255, 0.30) 0%,
            rgba(70, 92, 255, 0.22) 32%,
            rgba(255, 255, 255, 0.76) 46%,
            rgba(255, 236, 74, 0.28) 66%,
            rgba(80, 255, 126, 0.28) 82%,
            rgba(0, 224, 255, 0.18) 100%
        ),
        linear-gradient(
            var(--cd-angle),
            transparent 0%,
            rgba(255, 255, 255, 0.00) 18%,
            rgba(145, 74, 255, 0.22) 30%,
            rgba(255, 255, 255, 0.78) 43%,
            rgba(255, 255, 255, 0.34) 50%,
            rgba(255, 235, 70, 0.28) 59%,
            rgba(72, 255, 126, 0.22) 71%,
            transparent 100%
        ),
        repeating-linear-gradient(
            calc(var(--cd-line-angle) + 18deg),
            rgba(255, 255, 255, 0.00) 0px,
            rgba(255, 255, 255, 0.00) 15px,
            rgba(255, 255, 255, 0.25) 16px,
            rgba(255, 255, 255, 0.00) 18px,
            rgba(255, 255, 255, 0.00) 33px
        );
}

/* -------------------------
   Shop CD glare color tuning patch 44
   Only VIP III and VIP IV CD glare color maps are changed.
   ------------------------- */

/* VIP III — gold card: high-contrast sapphire/cyan CD glare for readability on gold. */
.donate-card-vip-tier-3::before {
    background:
        radial-gradient(ellipse at var(--cd-light-x) var(--cd-light-y), rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.50) 8%, rgba(255, 255, 255, 0.12) 22%, transparent 48%),
        conic-gradient(
            from var(--cd-phase) at var(--cd-wave-x) var(--cd-wave-y),
            rgba(0, 78, 255, 0.94) 0deg,
            rgba(0, 168, 255, 0.88) 42deg,
            rgba(0, 238, 255, 0.78) 84deg,
            rgba(255, 255, 255, 0.72) 126deg,
            rgba(38, 122, 255, 0.92) 170deg,
            rgba(0, 42, 214, 0.90) 214deg,
            rgba(0, 218, 255, 0.78) 256deg,
            rgba(255, 255, 255, 0.68) 300deg,
            rgba(0, 134, 255, 0.88) 336deg,
            rgba(0, 78, 255, 0.94) 360deg
        ),
        repeating-radial-gradient(
            circle at 50% 50%,
            rgba(255, 255, 255, 0.00) 0px,
            rgba(255, 255, 255, 0.00) 5px,
            rgba(255, 255, 255, 0.18) 6px,
            rgba(255, 255, 255, 0.00) 8px,
            rgba(255, 255, 255, 0.00) 13px
        ),
        repeating-linear-gradient(
            var(--cd-line-angle),
            rgba(255, 255, 255, 0.00) 0px,
            rgba(255, 255, 255, 0.00) 13px,
            rgba(255, 255, 255, 0.26) 14px,
            rgba(255, 255, 255, 0.00) 16px,
            rgba(255, 255, 255, 0.00) 30px
        );
}

.donate-card-vip-tier-3 .donate-card-shine {
    background:
        linear-gradient(
            var(--cd-angle),
            transparent 0%,
            rgba(255, 255, 255, 0.00) 18%,
            rgba(0, 198, 255, 0.28) 30%,
            rgba(255, 255, 255, 0.86) 43%,
            rgba(255, 255, 255, 0.38) 50%,
            rgba(0, 92, 255, 0.38) 59%,
            rgba(0, 232, 255, 0.28) 71%,
            transparent 100%
        ),
        repeating-linear-gradient(
            calc(var(--cd-line-angle) + 18deg),
            rgba(255, 255, 255, 0.00) 0px,
            rgba(255, 255, 255, 0.00) 15px,
            rgba(255, 255, 255, 0.25) 16px,
            rgba(255, 255, 255, 0.00) 18px,
            rgba(255, 255, 255, 0.00) 33px
        );
}

/* VIP IV — diamond card: warm rose/gold/lime CD glare for contrast on cyan/diamond surface. */
.donate-card-vip-tier-4::before {
    background:
        radial-gradient(ellipse at var(--cd-light-x) var(--cd-light-y), rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.50) 8%, rgba(255, 255, 255, 0.12) 22%, transparent 48%),
        conic-gradient(
            from var(--cd-phase) at var(--cd-wave-x) var(--cd-wave-y),
            rgba(255, 42, 164, 0.88) 0deg,
            rgba(255, 88, 104, 0.84) 44deg,
            rgba(255, 174, 56, 0.78) 88deg,
            rgba(255, 244, 78, 0.76) 132deg,
            rgba(140, 255, 74, 0.72) 176deg,
            rgba(255, 255, 255, 0.70) 214deg,
            rgba(255, 112, 208, 0.82) 256deg,
            rgba(255, 202, 54, 0.78) 302deg,
            rgba(110, 255, 120, 0.68) 336deg,
            rgba(255, 42, 164, 0.88) 360deg
        ),
        repeating-radial-gradient(
            circle at 50% 50%,
            rgba(255, 255, 255, 0.00) 0px,
            rgba(255, 255, 255, 0.00) 5px,
            rgba(255, 255, 255, 0.18) 6px,
            rgba(255, 255, 255, 0.00) 8px,
            rgba(255, 255, 255, 0.00) 13px
        ),
        repeating-linear-gradient(
            var(--cd-line-angle),
            rgba(255, 255, 255, 0.00) 0px,
            rgba(255, 255, 255, 0.00) 13px,
            rgba(255, 255, 255, 0.26) 14px,
            rgba(255, 255, 255, 0.00) 16px,
            rgba(255, 255, 255, 0.00) 30px
        );
}

.donate-card-vip-tier-4 .donate-card-shine {
    background:
        linear-gradient(
            var(--cd-angle),
            transparent 0%,
            rgba(255, 255, 255, 0.00) 18%,
            rgba(255, 72, 166, 0.28) 30%,
            rgba(255, 255, 255, 0.84) 43%,
            rgba(255, 255, 255, 0.36) 50%,
            rgba(255, 194, 48, 0.34) 59%,
            rgba(132, 255, 84, 0.26) 71%,
            transparent 100%
        ),
        repeating-linear-gradient(
            calc(var(--cd-line-angle) + 18deg),
            rgba(255, 255, 255, 0.00) 0px,
            rgba(255, 255, 255, 0.00) 15px,
            rgba(255, 255, 255, 0.25) 16px,
            rgba(255, 255, 255, 0.00) 18px,
            rgba(255, 255, 255, 0.00) 33px
        );
}

/* -------------------------
   Shop CD glare opacity patch 45
   ------------------------- */

/* Уменьшаем непрозрачность именно CD-блика на золотой и алмазной карточках.
   Остальные карточки не трогаем. */
.donate-card-vip-tier-3::before {
    opacity: calc(var(--cd-layer-opacity) * 0.68);
    filter:
        saturate(1.62)
        brightness(1.18)
        contrast(1.04);
}

.donate-card-vip-tier-3 .donate-card-shine {
    opacity: calc(var(--shine-layer-opacity) * 0.60);
    filter:
        saturate(1.48)
        brightness(1.18)
        contrast(1.04)
        blur(0.12px);
}

.donate-card-vip-tier-4::before {
    opacity: calc(var(--cd-layer-opacity) * 0.70);
    filter:
        saturate(1.58)
        brightness(1.16)
        contrast(1.04);
}

.donate-card-vip-tier-4 .donate-card-shine {
    opacity: calc(var(--shine-layer-opacity) * 0.62);
    filter:
        saturate(1.44)
        brightness(1.16)
        contrast(1.04)
        blur(0.12px);
}

/* -------------------------
   Shop CD glare saturation patch 46
   VIP III / VIP IV: убрать белёсость, сделать цветные блики насыщенными и читаемыми.
   Изменены только цветовые карты и интенсивность CD-блика у золотой и алмазной карточек.
   ------------------------- */

/* VIP III — золото: холодный контраст против жёлтого фона: синий, циан, фуксия, фиолетовый, изумруд. Без белых сегментов. */
.donate-card-vip-tier-3::before {
    background:
        radial-gradient(
            ellipse at var(--cd-light-x) var(--cd-light-y),
            rgba(0, 246, 255, 0.58) 0%,
            rgba(0, 126, 255, 0.36) 9%,
            rgba(160, 40, 255, 0.16) 23%,
            transparent 50%
        ),
        conic-gradient(
            from var(--cd-phase) at var(--cd-wave-x) var(--cd-wave-y),
            rgba(0, 42, 255, 0.98) 0deg,
            rgba(0, 188, 255, 0.96) 36deg,
            rgba(0, 255, 222, 0.90) 76deg,
            rgba(38, 255, 142, 0.78) 116deg,
            rgba(0, 98, 255, 0.98) 156deg,
            rgba(92, 36, 255, 0.96) 198deg,
            rgba(190, 38, 255, 0.94) 242deg,
            rgba(255, 32, 180, 0.92) 286deg,
            rgba(0, 214, 255, 0.96) 326deg,
            rgba(0, 42, 255, 0.98) 360deg
        ),
        repeating-radial-gradient(
            circle at 50% 50%,
            rgba(0, 236, 255, 0.00) 0px,
            rgba(0, 236, 255, 0.00) 5px,
            rgba(0, 236, 255, 0.24) 6px,
            rgba(160, 55, 255, 0.00) 8px,
            rgba(160, 55, 255, 0.00) 13px
        ),
        repeating-linear-gradient(
            var(--cd-line-angle),
            rgba(0, 200, 255, 0.00) 0px,
            rgba(0, 200, 255, 0.00) 13px,
            rgba(0, 226, 255, 0.28) 14px,
            rgba(188, 44, 255, 0.00) 16px,
            rgba(188, 44, 255, 0.00) 30px
        );
    opacity: calc(var(--cd-layer-opacity) * 0.82);
    filter:
        saturate(2.40)
        brightness(1.18)
        contrast(1.18);
}

.donate-card-vip-tier-3 .donate-card-shine {
    background:
        linear-gradient(
            var(--cd-angle),
            transparent 0%,
            rgba(0, 160, 255, 0.00) 18%,
            rgba(0, 214, 255, 0.42) 30%,
            rgba(0, 92, 255, 0.58) 43%,
            rgba(188, 42, 255, 0.44) 50%,
            rgba(255, 32, 180, 0.44) 59%,
            rgba(0, 244, 220, 0.34) 71%,
            transparent 100%
        ),
        repeating-linear-gradient(
            calc(var(--cd-line-angle) + 18deg),
            rgba(0, 214, 255, 0.00) 0px,
            rgba(0, 214, 255, 0.00) 15px,
            rgba(0, 214, 255, 0.30) 16px,
            rgba(190, 42, 255, 0.00) 18px,
            rgba(190, 42, 255, 0.00) 33px
        );
    opacity: calc(var(--shine-layer-opacity) * 0.78);
    filter:
        saturate(2.20)
        brightness(1.18)
        contrast(1.16)
        blur(0.12px);
}

/* VIP IV — алмаз: тёплая насыщенная палитра против холодного фона: малиновый, коралл, оранжевый, лайм, фиолетовый. Без белых сегментов. */
.donate-card-vip-tier-4::before {
    background:
        radial-gradient(
            ellipse at var(--cd-light-x) var(--cd-light-y),
            rgba(255, 42, 176, 0.56) 0%,
            rgba(255, 116, 32, 0.34) 9%,
            rgba(130, 255, 24, 0.15) 23%,
            transparent 50%
        ),
        conic-gradient(
            from var(--cd-phase) at var(--cd-wave-x) var(--cd-wave-y),
            rgba(255, 0, 156, 0.98) 0deg,
            rgba(255, 52, 84, 0.96) 36deg,
            rgba(255, 104, 22, 0.94) 78deg,
            rgba(255, 190, 20, 0.90) 118deg,
            rgba(170, 255, 24, 0.88) 160deg,
            rgba(40, 255, 132, 0.84) 202deg,
            rgba(255, 52, 180, 0.94) 246deg,
            rgba(168, 44, 255, 0.92) 288deg,
            rgba(255, 126, 24, 0.92) 326deg,
            rgba(255, 0, 156, 0.98) 360deg
        ),
        repeating-radial-gradient(
            circle at 50% 50%,
            rgba(255, 60, 160, 0.00) 0px,
            rgba(255, 60, 160, 0.00) 5px,
            rgba(255, 60, 160, 0.22) 6px,
            rgba(255, 180, 26, 0.00) 8px,
            rgba(255, 180, 26, 0.00) 13px
        ),
        repeating-linear-gradient(
            var(--cd-line-angle),
            rgba(255, 72, 150, 0.00) 0px,
            rgba(255, 72, 150, 0.00) 13px,
            rgba(255, 104, 26, 0.26) 14px,
            rgba(168, 255, 24, 0.00) 16px,
            rgba(168, 255, 24, 0.00) 30px
        );
    opacity: calc(var(--cd-layer-opacity) * 0.84);
    filter:
        saturate(2.35)
        brightness(1.14)
        contrast(1.18);
}

.donate-card-vip-tier-4 .donate-card-shine {
    background:
        linear-gradient(
            var(--cd-angle),
            transparent 0%,
            rgba(255, 0, 156, 0.00) 18%,
            rgba(255, 42, 156, 0.42) 30%,
            rgba(255, 94, 26, 0.56) 43%,
            rgba(255, 204, 22, 0.42) 50%,
            rgba(152, 255, 30, 0.40) 59%,
            rgba(172, 42, 255, 0.34) 71%,
            transparent 100%
        ),
        repeating-linear-gradient(
            calc(var(--cd-line-angle) + 18deg),
            rgba(255, 72, 150, 0.00) 0px,
            rgba(255, 72, 150, 0.00) 15px,
            rgba(255, 84, 120, 0.28) 16px,
            rgba(255, 180, 24, 0.00) 18px,
            rgba(255, 180, 24, 0.00) 33px
        );
    opacity: calc(var(--shine-layer-opacity) * 0.78);
    filter:
        saturate(2.18)
        brightness(1.14)
        contrast(1.16)
        blur(0.12px);
}

/* -------------------------
   Shop card background depth patch 47
   Фон карточек опущен на тон ниже, чтобы цветные CD-блики читались лучше.
   Картинки, текстуры, геометрия блика и HTML не менялись.
   ------------------------- */

.donate-card-vip-tier-0 {
    --tier-premium-surface-36:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(255,255,255,0.16), transparent 34%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(0,0,0,0.44), transparent 50%),
        linear-gradient(145deg, #565E69 0%, #2F3743 44%, #747C87 72%, #3D4651 100%);
    --tier-premium-surface-hover-36:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(255,255,255,0.22), transparent 35%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(0,0,0,0.46), transparent 52%),
        linear-gradient(145deg, #626A76 0%, #35404D 44%, #858D98 72%, #45505C 100%);
}

.donate-card-vip-tier-1 {
    --tier-premium-surface-36:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(255,226,204,0.18), transparent 35%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(48,16,10,0.46), transparent 50%),
        linear-gradient(145deg, #965640 0%, #48261F 45%, #B16D55 70%, #613126 100%);
    --tier-premium-surface-hover-36:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(255,238,218,0.25), transparent 36%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(48,16,10,0.48), transparent 52%),
        linear-gradient(145deg, #A8644B 0%, #513029 45%, #C27C63 70%, #6D392C 100%);
}

.donate-card-vip-tier-2 {
    --tier-premium-surface-36:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(255,255,255,0.25), transparent 34%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(22,30,40,0.42), transparent 50%),
        linear-gradient(145deg, #7F8A98 0%, #354252 42%, #C7CED7 66%, #626F7C 100%);
    --tier-premium-surface-hover-36:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(255,255,255,0.34), transparent 35%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(22,30,40,0.44), transparent 52%),
        linear-gradient(145deg, #8F9AA8 0%, #3D4C5E 42%, #E2E8EF 66%, #707D8B 100%);
}

.donate-card-vip-tier-3 {
    --tier-premium-surface-36:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(255,232,138,0.20), transparent 34%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(68,38,2,0.46), transparent 50%),
        linear-gradient(145deg, #B4871F 0%, #5B3905 41%, #D8B247 65%, #87630E 100%);
    --tier-premium-surface-hover-36:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(255,244,170,0.28), transparent 36%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(68,38,2,0.48), transparent 52%),
        linear-gradient(145deg, #C89826 0%, #684407 41%, #EDC95C 65%, #9A7314 100%);
}

.donate-card-vip-tier-4 {
    --tier-premium-surface-36:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(190,255,255,0.22), transparent 34%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(0,45,58,0.46), transparent 50%),
        linear-gradient(145deg, #138796 0%, #043B4E 43%, #73D9E1 66%, #086F80 100%);
    --tier-premium-surface-hover-36:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(218,255,255,0.32), transparent 36%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(0,45,58,0.48), transparent 52%),
        linear-gradient(145deg, #17A0AF 0%, #06495F 43%, #9CEFF4 66%, #098697 100%);
}

.donate-card-vip-tier-5 {
    --tier-premium-surface-36:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(170,95,235,0.14), transparent 34%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(0,0,0,0.70), transparent 52%),
        linear-gradient(145deg, #1E142A 0%, #05050A 48%, #38224E 72%, #0B0712 100%);
    --tier-premium-surface-hover-36:
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(196,132,255,0.20), transparent 36%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(0,0,0,0.72), transparent 54%),
        linear-gradient(145deg, #261934 0%, #08060E 48%, #462B61 72%, #100B19 100%);
}

/* -------------------------
   Shop patch 48
   Card-specific background gradients instead of the same moving background glare.
   VIP III / VIP IV are additionally darkened by one more tone.
   Only card background gradients are changed; CD glare geometry, textures, images and HTML are untouched.
   ------------------------- */

.donate-card-vip-tier-0 {
    --tier-premium-surface-36:
        linear-gradient(135deg, rgba(255,255,255,0.10) 0%, transparent 18%, rgba(0,0,0,0.16) 42%, transparent 66%, rgba(255,255,255,0.06) 100%),
        linear-gradient(28deg, #606976 0%, #3B4450 28%, #505A66 52%, #2F3742 78%, #6F7782 100%);
    --tier-premium-surface-hover-36:
        linear-gradient(135deg, rgba(255,255,255,0.13) 0%, transparent 18%, rgba(0,0,0,0.17) 42%, transparent 66%, rgba(255,255,255,0.08) 100%),
        linear-gradient(28deg, #6A7480 0%, #424C59 28%, #5A6572 52%, #36404C 78%, #7B838E 100%);
}

.donate-card-vip-tier-1 {
    --tier-premium-surface-36:
        linear-gradient(115deg, rgba(255,218,196,0.13) 0%, transparent 24%, rgba(79,29,19,0.20) 50%, transparent 73%, rgba(255,183,145,0.10) 100%),
        linear-gradient(38deg, #9D5D45 0%, #4B261F 36%, #B8745C 58%, #6E382B 78%, #C08468 100%);
    --tier-premium-surface-hover-36:
        linear-gradient(115deg, rgba(255,232,212,0.17) 0%, transparent 24%, rgba(79,29,19,0.21) 50%, transparent 73%, rgba(255,200,166,0.13) 100%),
        linear-gradient(38deg, #AE6A50 0%, #553028 36%, #CA846A 58%, #7B4233 78%, #D49476 100%);
}

.donate-card-vip-tier-2 {
    --tier-premium-surface-36:
        linear-gradient(100deg, rgba(255,255,255,0.24) 0%, transparent 20%, rgba(42,52,66,0.20) 44%, transparent 65%, rgba(255,255,255,0.18) 100%),
        linear-gradient(30deg, #8995A3 0%, #3D4A5B 34%, #B9C1CB 56%, #657180 78%, #D6DCE3 100%);
    --tier-premium-surface-hover-36:
        linear-gradient(100deg, rgba(255,255,255,0.30) 0%, transparent 20%, rgba(42,52,66,0.21) 44%, transparent 65%, rgba(255,255,255,0.22) 100%),
        linear-gradient(30deg, #99A5B2 0%, #455469 34%, #CAD2DC 56%, #737F8E 78%, #EEF2F6 100%);
}

.donate-card-vip-tier-3 {
    --tier-premium-surface-36:
        linear-gradient(120deg, rgba(255,218,93,0.13) 0%, transparent 22%, rgba(58,32,3,0.34) 48%, transparent 72%, rgba(214,153,28,0.10) 100%),
        linear-gradient(34deg, #A4791A 0%, #4A2F05 36%, #9A6D13 55%, #392404 76%, #B98E24 100%);
    --tier-premium-surface-hover-36:
        linear-gradient(120deg, rgba(255,232,122,0.17) 0%, transparent 22%, rgba(58,32,3,0.36) 48%, transparent 72%, rgba(238,179,45,0.13) 100%),
        linear-gradient(34deg, #B28522 0%, #543606 36%, #AB7B19 55%, #432B05 76%, #CDA033 100%);
    --card-surface-1: rgba(72, 58, 34, 0.98);
    --card-surface-2: rgba(50, 39, 23, 0.99);
    --card-surface-3: rgba(86, 69, 38, 0.97);
    --card-surface-glow: rgba(255, 196, 56, 0.12);
}

.donate-card-vip-tier-4 {
    --tier-premium-surface-36:
        linear-gradient(118deg, rgba(94,255,255,0.11) 0%, transparent 20%, rgba(0,32,44,0.34) 47%, transparent 70%, rgba(95,201,214,0.10) 100%),
        linear-gradient(32deg, #0B7582 0%, #032C3A 38%, #167F8C 56%, #052735 76%, #35AAB6 100%);
    --tier-premium-surface-hover-36:
        linear-gradient(118deg, rgba(125,255,255,0.15) 0%, transparent 20%, rgba(0,32,44,0.36) 47%, transparent 70%, rgba(122,223,234,0.13) 100%),
        linear-gradient(32deg, #0E8794 0%, #043644 38%, #1B929E 56%, #062F3E 76%, #44C0CB 100%);
    --card-surface-1: rgba(35, 60, 70, 0.98);
    --card-surface-2: rgba(22, 42, 52, 0.99);
    --card-surface-3: rgba(43, 72, 82, 0.97);
    --card-surface-glow: rgba(0, 238, 255, 0.11);
}

.donate-card-vip-tier-5 {
    --tier-premium-surface-36:
        linear-gradient(125deg, rgba(158,80,230,0.13) 0%, transparent 23%, rgba(0,0,0,0.46) 48%, transparent 70%, rgba(95,42,145,0.12) 100%),
        linear-gradient(36deg, #22162F 0%, #05050A 36%, #352247 56%, #08060E 78%, #482B64 100%);
    --tier-premium-surface-hover-36:
        linear-gradient(125deg, rgba(192,126,255,0.18) 0%, transparent 23%, rgba(0,0,0,0.48) 48%, transparent 70%, rgba(124,68,179,0.15) 100%),
        linear-gradient(36deg, #2A1B3B 0%, #08060E 36%, #43295C 56%, #0C0814 78%, #59377A 100%);
}

/* -------------------------
   Shop patch 49
   VIP 0: torn mossy stone card.
   Other VIP cards: unique material background-gradient directions.
   No generated images: CSS only.
   ------------------------- */

/* VIP 0 — полупорванная каменная карточка: неровный силуэт, мох, трещины и другая каменная фактура. */
.donate-card-vip-tier-0 {
    clip-path: polygon(
        2.0% 0%,
        14.0% 1.0%,
        20.0% 0%,
        30.0% 1.4%,
        37.0% 0.2%,
        51.0% 1.1%,
        61.0% 0%,
        70.0% 1.3%,
        82.0% 0.2%,
        98.0% 1.6%,
        100% 13.0%,
        98.8% 23.0%,
        100% 34.0%,
        98.6% 47.0%,
        100% 60.0%,
        98.5% 72.0%,
        100% 85.5%,
        97.8% 100%,
        83.0% 98.7%,
        74.0% 100%,
        62.0% 98.6%,
        51.0% 100%,
        39.0% 98.7%,
        28.0% 100%,
        18.0% 98.5%,
        2.0% 100%,
        0% 87.0%,
        1.5% 73.0%,
        0% 61.0%,
        1.2% 49.0%,
        0% 37.0%,
        1.5% 25.0%,
        0% 13.0%
    );
    --tier-border: #6F7770;
    --tier-border-light: #A8B0A8;
    --tier-border-dark: #2D332E;
    --tier-glow: rgba(88, 128, 82, 0.40);
    --tier-inner-glow: rgba(120, 150, 110, 0.20);
    --card-surface-glow: rgba(82, 132, 76, 0.18);
    --tier-texture-opacity-36: 0.96;
    --tier-texture-hover-opacity-36: 1;
    --tier-texture-blend-36: normal;
    --tier-texture-saturation-36: 1.04;
    --tier-texture-contrast-36: 1.06;
    --tier-texture-hover-saturation-36: 1.08;
    --tier-texture-hover-contrast-36: 1.10;
    --tier-texture-size-36: 100% 100%, 100% 100%, 100% 100%, 82px 82px, 144px 144px, 100% 100%, 100% 100%;
    --tier-texture-36:
        radial-gradient(ellipse at 12% 10%, rgba(96, 142, 78, 0.48) 0%, rgba(96, 142, 78, 0.28) 12%, rgba(96, 142, 78, 0.00) 29%),
        radial-gradient(ellipse at 8% 82%, rgba(68, 116, 66, 0.42) 0%, rgba(68, 116, 66, 0.24) 14%, rgba(68, 116, 66, 0.00) 34%),
        radial-gradient(ellipse at 86% 16%, rgba(108, 154, 82, 0.34) 0%, rgba(108, 154, 82, 0.18) 12%, rgba(108, 154, 82, 0.00) 30%),
        linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 41px, rgba(0,0,0,0.105) 41px 42px, transparent 42px 82px),
        linear-gradient(0deg, rgba(0,0,0,0.095) 0 1px, transparent 1px 72px, rgba(255,255,255,0.030) 72px 73px, transparent 73px 144px),
        linear-gradient(138deg, transparent 0 26%, rgba(32, 40, 34, 0.28) 27%, transparent 28% 61%, rgba(155, 166, 150, 0.10) 62%, transparent 63% 100%),
        radial-gradient(circle at 64% 68%, rgba(0,0,0,0.18), transparent 17%);
    --tier-premium-surface-36:
        radial-gradient(ellipse at 10% 8%, rgba(90, 138, 76, 0.26), transparent 27%),
        radial-gradient(ellipse at 14% 84%, rgba(58, 104, 57, 0.25), transparent 30%),
        radial-gradient(ellipse at 82% 16%, rgba(98, 136, 80, 0.16), transparent 26%),
        linear-gradient(164deg, rgba(255,255,255,0.08) 0%, transparent 16%, rgba(0,0,0,0.20) 45%, transparent 69%, rgba(110, 148, 104, 0.10) 100%),
        linear-gradient(33deg, #4D5550 0%, #252D29 25%, #626B65 47%, #364139 68%, #768077 100%);
    --tier-premium-surface-hover-36:
        radial-gradient(ellipse at 10% 8%, rgba(100, 154, 84, 0.31), transparent 27%),
        radial-gradient(ellipse at 14% 84%, rgba(66, 120, 64, 0.30), transparent 30%),
        radial-gradient(ellipse at 82% 16%, rgba(112, 154, 90, 0.20), transparent 26%),
        linear-gradient(164deg, rgba(255,255,255,0.11) 0%, transparent 16%, rgba(0,0,0,0.21) 45%, transparent 69%, rgba(126, 168, 116, 0.14) 100%),
        linear-gradient(33deg, #58615B 0%, #2B352F 25%, #707A72 47%, #3F4C43 68%, #858E84 100%);
}

.donate-card-vip-tier-0 .donate-card-inner {
    border-radius: 28px;
}

/* У VIP 0 картинка тоже становится каменно-замшелой, но без генерации изображения. */
.donate-card-vip-tier-0 .donate-card-image {
    background:
        radial-gradient(ellipse at 14% 16%, rgba(104, 150, 84, 0.26), transparent 28%),
        radial-gradient(ellipse at 82% 76%, rgba(70, 112, 68, 0.20), transparent 32%),
        linear-gradient(135deg, #2D3431 0%, #626A65 42%, #A3AAA2 64%, #444E47 100%) !important;
}

/* Остальные карточки: разные направления фоновых градиентов, чтобы поверхность не выглядела одинаковой. */
.donate-card-vip-tier-1 {
    --tier-premium-surface-36:
        linear-gradient(54deg, rgba(255, 206, 177, 0.16) 0%, transparent 22%, rgba(73, 28, 18, 0.23) 49%, transparent 69%, rgba(255, 162, 122, 0.10) 100%),
        linear-gradient(121deg, #A15D44 0%, #42201A 32%, #B56E53 54%, #6C3328 76%, #D08B6E 100%);
    --tier-premium-surface-hover-36:
        linear-gradient(54deg, rgba(255, 224, 202, 0.21) 0%, transparent 22%, rgba(73, 28, 18, 0.24) 49%, transparent 69%, rgba(255, 184, 146, 0.14) 100%),
        linear-gradient(121deg, #B16B50 0%, #4D2A23 32%, #C98165 54%, #7B3E31 76%, #E09D7C 100%);
}

.donate-card-vip-tier-2 {
    --tier-premium-surface-36:
        linear-gradient(178deg, rgba(255,255,255,0.28) 0%, transparent 19%, rgba(36, 48, 62, 0.22) 45%, transparent 66%, rgba(255,255,255,0.16) 100%),
        linear-gradient(82deg, #788696 0%, #344353 29%, #BBC5CE 52%, #5E6D7B 73%, #E1E5E9 100%);
    --tier-premium-surface-hover-36:
        linear-gradient(178deg, rgba(255,255,255,0.34) 0%, transparent 19%, rgba(36, 48, 62, 0.23) 45%, transparent 66%, rgba(255,255,255,0.22) 100%),
        linear-gradient(82deg, #8D9AA8 0%, #3E4F62 29%, #D2DAE1 52%, #6E7E8E 73%, #F2F5F7 100%);
}

.donate-card-vip-tier-3 {
    --tier-premium-surface-36:
        linear-gradient(24deg, rgba(255, 211, 72, 0.15) 0%, transparent 20%, rgba(49, 28, 3, 0.36) 46%, transparent 71%, rgba(220, 151, 24, 0.13) 100%),
        linear-gradient(151deg, #A67918 0%, #402704 35%, #956710 56%, #352104 75%, #BD9227 100%);
    --tier-premium-surface-hover-36:
        linear-gradient(24deg, rgba(255, 228, 104, 0.20) 0%, transparent 20%, rgba(49, 28, 3, 0.38) 46%, transparent 71%, rgba(242, 178, 46, 0.16) 100%),
        linear-gradient(151deg, #B68820 0%, #4D3105 35%, #A87916 56%, #3F2905 75%, #D2A538 100%);
}

.donate-card-vip-tier-4 {
    --tier-premium-surface-36:
        linear-gradient(77deg, rgba(90, 255, 255, 0.13) 0%, transparent 20%, rgba(0, 30, 42, 0.36) 48%, transparent 70%, rgba(84, 196, 212, 0.11) 100%),
        linear-gradient(203deg, #0B7480 0%, #032936 36%, #147A87 57%, #052A37 77%, #35A9B5 100%);
    --tier-premium-surface-hover-36:
        linear-gradient(77deg, rgba(126, 255, 255, 0.18) 0%, transparent 20%, rgba(0, 30, 42, 0.38) 48%, transparent 70%, rgba(111, 221, 234, 0.15) 100%),
        linear-gradient(203deg, #0E8794 0%, #043340 36%, #1B909D 57%, #063443 77%, #49C4CD 100%);
}

.donate-card-vip-tier-5 {
    --tier-premium-surface-36:
        linear-gradient(312deg, rgba(162, 82, 232, 0.16) 0%, transparent 24%, rgba(0,0,0,0.50) 50%, transparent 71%, rgba(94, 42, 145, 0.13) 100%),
        linear-gradient(96deg, #21162F 0%, #04040A 34%, #38224F 55%, #07060D 78%, #4E2D70 100%);
    --tier-premium-surface-hover-36:
        linear-gradient(312deg, rgba(196, 128, 255, 0.21) 0%, transparent 24%, rgba(0,0,0,0.52) 50%, transparent 71%, rgba(126, 70, 184, 0.17) 100%),
        linear-gradient(96deg, #2A1B3C 0%, #08060E 34%, #462B62 55%, #0C0814 78%, #613887 100%);
}

/* -------------------------
   Shop patch 50
   VIP 0: remove torn silhouette, replace stone-torn texture with moss texture.
   No generated images: CSS only.
   ------------------------- */

.donate-card-vip-tier-0 {
    clip-path: none !important;
    border-radius: 30px !important;
    --tier-border: #6C706F;
    --tier-border-light: #A6AAA8;
    --tier-border-dark: #232726;
    --tier-glow: rgba(124, 132, 128, 0.34);
    --tier-inner-glow: rgba(150, 160, 154, 0.18);
    --card-surface-glow: rgba(88, 95, 92, 0.18);

    --tier-texture-opacity-36: 1;
    --tier-texture-hover-opacity-36: 1;
    --tier-texture-blend-36: overlay;
    --tier-texture-saturation-36: 1.02;
    --tier-texture-contrast-36: 1.14;
    --tier-texture-hover-saturation-36: 1.04;
    --tier-texture-hover-contrast-36: 1.18;
    --tier-texture-size-36: 76px 76px, 88px 88px, 96px 96px, 112px 112px, 100% 100%;
    --tier-texture-36:
        linear-gradient(90deg,
            rgba(86, 111, 63, 0.00) 0 8%,
            rgba(86, 111, 63, 0.36) 8% 18%,
            rgba(61, 88, 44, 0.52) 18% 28%,
            rgba(121, 138, 80, 0.28) 28% 34%,
            rgba(86, 111, 63, 0.00) 34% 100%),
        linear-gradient(0deg,
            rgba(77, 102, 58, 0.00) 0 18%,
            rgba(92, 123, 66, 0.32) 18% 30%,
            rgba(60, 89, 42, 0.48) 30% 42%,
            rgba(116, 135, 72, 0.24) 42% 52%,
            rgba(77, 102, 58, 0.00) 52% 100%),
        repeating-linear-gradient(90deg,
            rgba(255,255,255,0.00) 0 24px,
            rgba(255,255,255,0.07) 24px 26px,
            rgba(0,0,0,0.14) 26px 28px,
            rgba(255,255,255,0.00) 28px 48px),
        repeating-linear-gradient(0deg,
            rgba(255,255,255,0.00) 0 24px,
            rgba(255,255,255,0.05) 24px 26px,
            rgba(0,0,0,0.12) 26px 28px,
            rgba(255,255,255,0.00) 28px 48px),
        linear-gradient(142deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.00) 24%, rgba(0,0,0,0.22) 52%, rgba(255,255,255,0.05) 76%, rgba(0,0,0,0.18) 100%);

    --tier-texture-opacity-38: var(--tier-texture-opacity-36);
    --tier-texture-hover-opacity-38: var(--tier-texture-hover-opacity-36);
    --tier-texture-blend-38: var(--tier-texture-blend-36);
    --tier-texture-saturation-38: var(--tier-texture-saturation-36);
    --tier-texture-contrast-38: var(--tier-texture-contrast-36);
    --tier-texture-hover-saturation-38: var(--tier-texture-hover-saturation-36);
    --tier-texture-hover-contrast-38: var(--tier-texture-hover-contrast-36);
    --tier-texture-size-38: var(--tier-texture-size-36);
    --tier-texture-38: var(--tier-texture-36);

    --tier-premium-surface-36:
        linear-gradient(118deg, rgba(255,255,255,0.08) 0%, transparent 17%, rgba(0,0,0,0.18) 47%, transparent 72%, rgba(255,255,255,0.06) 100%),
        linear-gradient(36deg, #505655 0%, #2B3130 28%, #646A68 52%, #353B39 76%, #767B78 100%);
    --tier-premium-surface-hover-36:
        linear-gradient(118deg, rgba(255,255,255,0.10) 0%, transparent 17%, rgba(0,0,0,0.20) 47%, transparent 72%, rgba(255,255,255,0.07) 100%),
        linear-gradient(36deg, #5A605F 0%, #313736 28%, #717775 52%, #3B413F 76%, #838885 100%);
}

.donate-card-vip-tier-0 .donate-card-inner {
    border-radius: 24px !important;
}

.donate-card-vip-tier-0 .donate-card-image {
    background:
        linear-gradient(90deg,
            rgba(95, 121, 69, 0.00) 0 10%,
            rgba(95, 121, 69, 0.34) 10% 20%,
            rgba(62, 90, 44, 0.50) 20% 29%,
            rgba(124, 143, 80, 0.20) 29% 35%,
            rgba(95, 121, 69, 0.00) 35% 100%),
        linear-gradient(0deg,
            rgba(78, 106, 57, 0.00) 0 16%,
            rgba(95, 121, 69, 0.30) 16% 28%,
            rgba(62, 90, 44, 0.46) 28% 39%,
            rgba(124, 143, 80, 0.18) 39% 47%,
            rgba(78, 106, 57, 0.00) 47% 100%),
        repeating-linear-gradient(90deg,
            rgba(255,255,255,0.00) 0 22px,
            rgba(255,255,255,0.06) 22px 24px,
            rgba(0,0,0,0.14) 24px 26px,
            rgba(255,255,255,0.00) 26px 44px),
        repeating-linear-gradient(0deg,
            rgba(255,255,255,0.00) 0 22px,
            rgba(255,255,255,0.04) 22px 24px,
            rgba(0,0,0,0.12) 24px 26px,
            rgba(255,255,255,0.00) 26px 44px),
        linear-gradient(135deg, #3C4140 0%, #575D5B 30%, #7B817E 61%, #4A504E 100%) !important;
}

/* -------------------------
   Shop patch 52
   VIP 0: grayscale moss texture only. No green tones.
   ------------------------- */

.donate-card-vip-tier-0 {
    --tier-border: #6B7072;
    --tier-border-light: #A4AAAC;
    --tier-border-dark: #202426;
    --tier-glow: rgba(130, 136, 138, 0.34);
    --tier-inner-glow: rgba(170, 176, 178, 0.16);
    --card-surface-glow: rgba(92, 98, 100, 0.18);

    --tier-texture-opacity-36: 1;
    --tier-texture-hover-opacity-36: 1;
    --tier-texture-blend-36: soft-light;
    --tier-texture-saturation-36: 0;
    --tier-texture-contrast-36: 1.30;
    --tier-texture-hover-saturation-36: 0;
    --tier-texture-hover-contrast-36: 1.38;
    --tier-texture-size-36:
        68px 68px,
        68px 68px,
        92px 92px,
        92px 92px,
        44px 44px,
        100% 100%;
    --tier-texture-36:
        radial-gradient(circle at 18% 22%, rgba(184, 190, 191, 0.30) 0 8%, rgba(112, 118, 120, 0.32) 9% 16%, transparent 17%),
        radial-gradient(circle at 74% 66%, rgba(64, 70, 72, 0.48) 0 8%, rgba(138, 144, 146, 0.26) 9% 15%, transparent 16%),
        radial-gradient(ellipse at 36% 78%, rgba(46, 52, 54, 0.46) 0 9%, rgba(126, 132, 134, 0.22) 10% 18%, transparent 19%),
        radial-gradient(ellipse at 86% 18%, rgba(170, 176, 178, 0.20) 0 7%, rgba(78, 84, 86, 0.36) 8% 14%, transparent 15%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 22px, rgba(0,0,0,0.08) 22px 23px, transparent 23px 44px),
        linear-gradient(137deg, rgba(255,255,255,0.045) 0%, transparent 28%, rgba(0,0,0,0.26) 51%, transparent 73%, rgba(255,255,255,0.035) 100%);

    --tier-texture-opacity-38: var(--tier-texture-opacity-36);
    --tier-texture-hover-opacity-38: var(--tier-texture-hover-opacity-36);
    --tier-texture-blend-38: var(--tier-texture-blend-36);
    --tier-texture-saturation-38: var(--tier-texture-saturation-36);
    --tier-texture-contrast-38: var(--tier-texture-contrast-36);
    --tier-texture-hover-saturation-38: var(--tier-texture-hover-saturation-36);
    --tier-texture-hover-contrast-38: var(--tier-texture-hover-contrast-36);
    --tier-texture-size-38: var(--tier-texture-size-36);
    --tier-texture-38: var(--tier-texture-36);

    --tier-premium-surface-36:
        linear-gradient(118deg, rgba(255,255,255,0.07) 0%, transparent 17%, rgba(0,0,0,0.20) 47%, transparent 72%, rgba(255,255,255,0.055) 100%),
        linear-gradient(36deg, #464D4F 0%, #252B2D 28%, #5B6263 52%, #303638 76%, #6B7172 100%);
    --tier-premium-surface-hover-36:
        linear-gradient(118deg, rgba(255,255,255,0.09) 0%, transparent 17%, rgba(0,0,0,0.21) 47%, transparent 72%, rgba(255,255,255,0.065) 100%),
        linear-gradient(36deg, #50575A 0%, #2C3234 28%, #666D6E 52%, #373D3F 76%, #777D7E 100%);
}

.donate-card-vip-tier-0 .donate-card-image {
    background:
        radial-gradient(circle at 20% 24%, rgba(188, 194, 196, 0.24) 0 8%, rgba(112, 118, 120, 0.32) 9% 16%, transparent 17%),
        radial-gradient(circle at 78% 68%, rgba(52, 58, 60, 0.50) 0 8%, rgba(142, 148, 150, 0.22) 9% 15%, transparent 16%),
        radial-gradient(ellipse at 36% 82%, rgba(42, 48, 50, 0.42) 0 9%, rgba(132, 138, 140, 0.20) 10% 18%, transparent 19%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 22px, rgba(0,0,0,0.09) 22px 23px, transparent 23px 44px),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 22px, rgba(0,0,0,0.08) 22px 23px, transparent 23px 44px),
        linear-gradient(135deg, #343B3D 0%, #555C5E 34%, #7A8182 63%, #41484A 100%) !important;
    background-size: 68px 68px, 68px 68px, 92px 92px, 44px 44px, 44px 44px, 100% 100% !important;
}

/* -------------------------
   Shop patch 53
   VIP 0: use uploaded stone texture as the card background.
   No generated images: user-provided image asset only.
   ------------------------- */

.donate-card-vip-tier-0,
.donate-card-vip-tier-0:hover,
.donate-card-vip-tier-0:focus-visible {
    background:
        linear-gradient(180deg, rgba(6, 8, 12, 0.18), rgba(6, 8, 12, 0.30)),
        radial-gradient(ellipse at var(--base-light-x) var(--base-light-y), rgba(255, 255, 255, 0.12), transparent 34%),
        radial-gradient(ellipse at var(--base-shadow-x) var(--base-shadow-y), rgba(0, 0, 0, 0.44), transparent 52%),
        url("images/vip0-card-bg.png") center / cover no-repeat !important;

    --tier-texture-opacity-36: 0;
    --tier-texture-hover-opacity-36: 0;
    --tier-texture-opacity-38: 0;
    --tier-texture-hover-opacity-38: 0;
}

.donate-card-vip-tier-0 .donate-card-inner::before {
    opacity: 0 !important;
}

/* -------------------------
   Shop patch 54
   VIP 0: only uploaded card background + existing white CD glare.
   Removed generated stone/moss dots and all card texture overlays for VIP 0.
   ------------------------- */

.donate-card-vip-tier-0,
.donate-card-vip-tier-0:hover,
.donate-card-vip-tier-0:focus-visible {
    background: url("images/vip0-card-bg.png") center / cover no-repeat !important;

    --tier-texture-opacity-36: 0 !important;
    --tier-texture-hover-opacity-36: 0 !important;
    --tier-texture-opacity-38: 0 !important;
    --tier-texture-hover-opacity-38: 0 !important;
    --tier-material-opacity: 0 !important;
    --tier-material-opacity-33: 0 !important;
}

.donate-card-vip-tier-0 .donate-card-inner::before,
.donate-card-vip-tier-0:hover .donate-card-inner::before,
.donate-card-vip-tier-0:focus-visible .donate-card-inner::before {
    display: none !important;
    opacity: 0 !important;
    background: none !important;
    background-image: none !important;
}

.donate-card-vip-tier-0 .donate-card-inner::after,
.donate-card-vip-tier-0:hover .donate-card-inner::after,
.donate-card-vip-tier-0:focus-visible .donate-card-inner::after {
    display: none !important;
    opacity: 0 !important;
    background: none !important;
}

/* -------------------------
   Shop patch 55
   User-provided card backgrounds for VIP 0, VIP I and VIP II.
   Only supplied image assets are used for these card surfaces; generated material texture overlays are disabled.
   ------------------------- */

.donate-card-vip-tier-0,
.donate-card-vip-tier-0:hover,
.donate-card-vip-tier-0:focus-visible {
    background: url("images/vip0-card-bg.png") center / cover no-repeat !important;

    --tier-texture-opacity-36: 0 !important;
    --tier-texture-hover-opacity-36: 0 !important;
    --tier-texture-opacity-38: 0 !important;
    --tier-texture-hover-opacity-38: 0 !important;
    --tier-material-opacity: 0 !important;
    --tier-material-opacity-33: 0 !important;
}

.donate-card-vip-tier-1,
.donate-card-vip-tier-1:hover,
.donate-card-vip-tier-1:focus-visible {
    background: url("images/vip1-card-bg.png") center / cover no-repeat !important;

    --tier-texture-opacity-36: 0 !important;
    --tier-texture-hover-opacity-36: 0 !important;
    --tier-texture-opacity-38: 0 !important;
    --tier-texture-hover-opacity-38: 0 !important;
    --tier-material-opacity: 0 !important;
    --tier-material-opacity-33: 0 !important;
}

.donate-card-vip-tier-2,
.donate-card-vip-tier-2:hover,
.donate-card-vip-tier-2:focus-visible {
    background: url("images/vip2-card-bg.png") center / cover no-repeat !important;

    --tier-texture-opacity-36: 0 !important;
    --tier-texture-hover-opacity-36: 0 !important;
    --tier-texture-opacity-38: 0 !important;
    --tier-texture-hover-opacity-38: 0 !important;
    --tier-material-opacity: 0 !important;
    --tier-material-opacity-33: 0 !important;
}

.donate-card-vip-tier-0 .donate-card-inner::before,
.donate-card-vip-tier-0:hover .donate-card-inner::before,
.donate-card-vip-tier-0:focus-visible .donate-card-inner::before,
.donate-card-vip-tier-1 .donate-card-inner::before,
.donate-card-vip-tier-1:hover .donate-card-inner::before,
.donate-card-vip-tier-1:focus-visible .donate-card-inner::before,
.donate-card-vip-tier-2 .donate-card-inner::before,
.donate-card-vip-tier-2:hover .donate-card-inner::before,
.donate-card-vip-tier-2:focus-visible .donate-card-inner::before {
    display: none !important;
    opacity: 0 !important;
    background: none !important;
    background-image: none !important;
}


/* -------------------------
   Shop patch 61
   User-provided card backgrounds for VIP III, VIP IV and VIP V.
   Only supplied image assets are used for these card surfaces; generated material texture overlays are disabled.
   ------------------------- */

.donate-card-vip-tier-3,
.donate-card-vip-tier-3:hover,
.donate-card-vip-tier-3:focus-visible {
    background: url("images/vip3-card-bg.png") center / cover no-repeat !important;

    --tier-texture-opacity-36: 0 !important;
    --tier-texture-hover-opacity-36: 0 !important;
    --tier-texture-opacity-38: 0 !important;
    --tier-texture-hover-opacity-38: 0 !important;
    --tier-material-opacity: 0 !important;
    --tier-material-opacity-33: 0 !important;
}

.donate-card-vip-tier-4,
.donate-card-vip-tier-4:hover,
.donate-card-vip-tier-4:focus-visible {
    background: url("images/vip4-card-bg.png") center / cover no-repeat !important;

    --tier-texture-opacity-36: 0 !important;
    --tier-texture-hover-opacity-36: 0 !important;
    --tier-texture-opacity-38: 0 !important;
    --tier-texture-hover-opacity-38: 0 !important;
    --tier-material-opacity: 0 !important;
    --tier-material-opacity-33: 0 !important;
}

.donate-card-vip-tier-5,
.donate-card-vip-tier-5:hover,
.donate-card-vip-tier-5:focus-visible {
    background: url("images/vip5-card-bg.png") center / cover no-repeat !important;

    --tier-texture-opacity-36: 0 !important;
    --tier-texture-hover-opacity-36: 0 !important;
    --tier-texture-opacity-38: 0 !important;
    --tier-texture-hover-opacity-38: 0 !important;
    --tier-material-opacity: 0 !important;
    --tier-material-opacity-33: 0 !important;
}

.donate-card-vip-tier-3 .donate-card-inner::before,
.donate-card-vip-tier-3:hover .donate-card-inner::before,
.donate-card-vip-tier-3:focus-visible .donate-card-inner::before,
.donate-card-vip-tier-4 .donate-card-inner::before,
.donate-card-vip-tier-4:hover .donate-card-inner::before,
.donate-card-vip-tier-4:focus-visible .donate-card-inner::before,
.donate-card-vip-tier-5 .donate-card-inner::before,
.donate-card-vip-tier-5:hover .donate-card-inner::before,
.donate-card-vip-tier-5:focus-visible .donate-card-inner::before {
    display: none !important;
    opacity: 0 !important;
    background: none !important;
    background-image: none !important;
}

/* -------------------------
   Shop patch 65
   VIP border gap fix.
   The visible double outline is now drawn as one packed frame stack, so rounded corners no longer show gaps between layers.
   ------------------------- */

.donate-card-vip-tier {
    border: 0 !important;
    background-clip: border-box !important;
    box-shadow:
        0 24px 62px rgba(17, 24, 39, 0.18),
        0 0 0 1px var(--tier-border-dark),
        0 0 0 2px color-mix(in srgb, var(--tier-border-dark) 58%, var(--tier-border) 42%),
        0 0 0 4px var(--tier-border),
        0 0 0 5px color-mix(in srgb, var(--tier-border-light) 72%, var(--tier-border) 28%),
        0 0 26px var(--tier-glow) !important;
}

.donate-card-vip-tier:hover,
.donate-card-vip-tier:focus-visible {
    box-shadow:
        0 34px 82px rgba(17, 24, 39, 0.24),
        0 0 0 1px var(--tier-border-dark),
        0 0 0 2px color-mix(in srgb, var(--tier-border-dark) 48%, var(--tier-border) 52%),
        0 0 0 4px var(--tier-border),
        0 0 0 5px color-mix(in srgb, var(--tier-border-light) 82%, var(--tier-border) 18%),
        0 0 44px var(--tier-glow) !important;
}

.donate-card-vip-tier::after {
    inset: 0 !important;
    padding: 4px !important;
    border-radius: inherit !important;
    background:
        radial-gradient(circle at var(--frame-hot-x) var(--frame-hot-y), rgba(255, 255, 255, 1.00) 0 4%, color-mix(in srgb, var(--tier-border-light) 86%, #ffffff 14%) 8%, transparent 24%),
        linear-gradient(
            var(--frame-angle),
            var(--tier-border-dark) 0%,
            color-mix(in srgb, var(--tier-border) 82%, var(--tier-border-dark) 18%) 12%,
            var(--tier-border-light) 23%,
            var(--tier-border) 36%,
            color-mix(in srgb, var(--tier-border-dark) 72%, var(--tier-border) 28%) 50%,
            var(--tier-border) 63%,
            color-mix(in srgb, var(--tier-border-light) 86%, #ffffff 14%) 76%,
            color-mix(in srgb, var(--tier-border) 76%, var(--tier-border-dark) 24%) 88%,
            var(--tier-border-dark) 100%
        ) !important;
    opacity: var(--frame-opacity) !important;
    filter:
        saturate(1.42)
        brightness(1.15)
        drop-shadow(0 0 5px color-mix(in srgb, var(--tier-border-light) 64%, transparent))
        drop-shadow(0 0 18px var(--tier-glow)) !important;

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    mask-composite: exclude !important;
}

/* Закрывает антиалиасинг-зазор именно в скруглённых углах: под внутренней обводкой лежит сплошной металл рамки. */
.donate-card-vip-tier .donate-card-inner {
    border-radius: 24px !important;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--tier-border-dark) 84%, transparent),
        0 0 0 2px color-mix(in srgb, var(--tier-border) 68%, var(--tier-border-dark) 32%) !important;
}

/* Для карточек с пользовательскими фонами сохраняем чистый фон, меняется только рамка. */
.donate-card-vip-tier-0 .donate-card-inner::before,
.donate-card-vip-tier-1 .donate-card-inner::before,
.donate-card-vip-tier-2 .donate-card-inner::before,
.donate-card-vip-tier-3 .donate-card-inner::before,
.donate-card-vip-tier-4 .donate-card-inner::before,
.donate-card-vip-tier-5 .donate-card-inner::before {
    display: none !important;
    opacity: 0 !important;
    background: none !important;
    background-image: none !important;
}

/* -------------------------
   Shop patch 66
   Price glass panel:
   - transparent-looking panel under price
   - CD glare is covered by the panel and does not pass over the price area
   - panel contour has its own perspective-based glare like the image outline
   ------------------------- */

.donate-card-footer,
.donate-card-vip-tier .donate-card-footer {
    position: relative;
    z-index: 18 !important;
    padding-top: 20px !important;
    overflow: visible;
    transform: translateZ(28px);
}

.donate-card-footer strong,
.donate-card-vip-tier .donate-card-footer strong {
    position: relative;
    isolation: isolate;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: clamp(132px, 10.6vw, 188px);
    padding: clamp(10px, 0.78vw, 14px) clamp(20px, 1.55vw, 28px) clamp(11px, 0.86vw, 15px);
    border-radius: 999px;
    overflow: visible;
    color: #FFFFFF;
    line-height: 1;
    text-align: center;
    text-shadow:
        0 2px 9px rgba(0, 0, 0, 0.38),
        0 0 16px rgba(255, 255, 255, 0.12);
    transform: translateZ(30px);
}

/* Плотная стеклянная подложка: выглядит прозрачной, но перекрывает CD-блик снизу. */
.donate-card-footer strong::before,
.donate-card-vip-tier .donate-card-footer strong::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.16), transparent 56%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.018) 42%, rgba(0, 0, 0, 0.10)),
        linear-gradient(135deg, rgba(17, 18, 27, 0.94), rgba(7, 8, 14, 0.90));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(0, 0, 0, 0.24),
        0 8px 18px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(7px) saturate(1.08);
    -webkit-backdrop-filter: blur(7px) saturate(1.08);
}

/* Контур цены получает отдельный блик, связанный с теми же переменными перспективы, что и обводка картинки. */
.donate-card-footer strong::after,
.donate-card-vip-tier .donate-card-footer strong::after {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: -1;
    padding: 2px;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(
            circle at var(--image-border-x) var(--image-border-y),
            var(--price-border-flare-core, var(--image-border-flare-core, rgba(255,255,255,1))) 0 2.4%,
            var(--price-border-flare-mid, var(--image-border-flare-mid, rgba(255,255,255,0.76))) 5.4%,
            var(--price-border-flare-soft, var(--image-border-flare-soft, rgba(255,255,255,0.24))) 13%,
            rgba(255, 255, 255, 0.00) 27%
        ),
        radial-gradient(
            ellipse 58% 3.2% at var(--image-border-x) var(--image-border-y),
            rgba(255, 255, 255, 0.90) 0%,
            var(--price-border-flare-mid, var(--image-border-flare-mid, rgba(255,255,255,0.72))) 16%,
            rgba(255, 255, 255, 0.16) 35%,
            transparent 72%
        ),
        linear-gradient(
            var(--image-gloss-angle),
            rgba(255, 255, 255, 0.00) 0%,
            rgba(255, 255, 255, 0.00) 30%,
            var(--price-gloss-line, var(--image-gloss-line, rgba(255,255,255,0.44))) 47%,
            var(--price-gloss-line-soft, var(--image-gloss-line-soft, rgba(255,255,255,0.14))) 58%,
            rgba(255, 255, 255, 0.00) 74%,
            rgba(255, 255, 255, 0.00) 100%
        ),
        linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.00) 34%, rgba(0,0,0,0.20));
    opacity: calc(var(--image-gloss-opacity) * 0.94);
    filter:
        saturate(1.18)
        brightness(1.58)
        blur(calc(var(--image-gloss-blur) * 0.18))
        drop-shadow(0 0 8px var(--price-border-glow, var(--image-border-glow, rgba(255,255,255,0.40))))
        drop-shadow(0 0 22px var(--price-border-glow, var(--image-border-glow, rgba(255,255,255,0.34))));
    mix-blend-mode: screen;
    transform: translate3d(calc(var(--image-gloss-shift-x) * 0.035), calc(var(--image-gloss-shift-y) * 0.035), 0);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
}

.donate-card:hover .donate-card-footer strong::after,
.donate-card:focus-visible .donate-card-footer strong::after,
.donate-card-vip-tier:hover .donate-card-footer strong::after,
.donate-card-vip-tier:focus-visible .donate-card-footer strong::after {
    opacity: 1;
    filter:
        saturate(1.24)
        brightness(1.82)
        blur(calc(var(--image-gloss-blur) * 0.14))
        drop-shadow(0 0 12px var(--price-border-glow, var(--image-border-glow, rgba(255,255,255,0.46))))
        drop-shadow(0 0 34px var(--price-border-glow, var(--image-border-glow, rgba(255,255,255,0.38))));
}

/* Цветные варианты контура цены под каждый VIP-материал. */
.donate-card-vip-tier-0,
.donate-card-vip-tier-1,
.donate-card-vip-tier-2 {
    --price-border-flare-core: rgba(255, 255, 255, 1.00);
    --price-border-flare-mid: rgba(255, 255, 255, 0.82);
    --price-border-flare-soft: rgba(255, 255, 255, 0.24);
    --price-gloss-line: rgba(255, 255, 255, 0.42);
    --price-gloss-line-soft: rgba(255, 255, 255, 0.13);
    --price-border-glow: rgba(238, 244, 252, 0.42);
}

.donate-card-vip-tier-3 {
    --price-border-flare-core: rgba(255, 255, 255, 1.00);
    --price-border-flare-mid: rgba(255, 236, 135, 0.88);
    --price-border-flare-soft: rgba(255, 203, 35, 0.31);
    --price-gloss-line: rgba(255, 236, 160, 0.44);
    --price-gloss-line-soft: rgba(255, 205, 70, 0.14);
    --price-border-glow: rgba(255, 205, 46, 0.50);
}

.donate-card-vip-tier-4 {
    --price-border-flare-core: rgba(250, 255, 255, 1.00);
    --price-border-flare-mid: rgba(185, 255, 255, 0.82);
    --price-border-flare-soft: rgba(72, 230, 236, 0.27);
    --price-gloss-line: rgba(206, 255, 255, 0.42);
    --price-gloss-line-soft: rgba(118, 235, 235, 0.13);
    --price-border-glow: rgba(72, 235, 242, 0.48);
}

.donate-card-vip-tier-5 {
    --price-border-flare-core: rgba(255, 250, 255, 0.98);
    --price-border-flare-mid: rgba(205, 155, 255, 0.76);
    --price-border-flare-soft: rgba(124, 74, 174, 0.30);
    --price-gloss-line: rgba(210, 160, 255, 0.38);
    --price-gloss-line-soft: rgba(128, 74, 178, 0.14);
    --price-border-glow: rgba(124, 74, 174, 0.50);
}


/* -------------------------
   Shop patch 67
   Price button panels:
   - pastel material backgrounds under prices
   - VIP 0-2 use single-tone pastel colors
   - VIP III-V use individual pastel gradients
   ------------------------- */

.donate-card-footer strong,
.donate-card-vip-tier .donate-card-footer strong {
    color: var(--price-text-color, #FFFFFF) !important;
    text-shadow: var(--price-text-shadow,
        0 2px 8px rgba(0, 0, 0, 0.28),
        0 0 12px rgba(255, 255, 255, 0.10)
    ) !important;
}

.donate-card-footer strong::before,
.donate-card-vip-tier .donate-card-footer strong::before {
    background: var(--price-panel-bg,
        linear-gradient(180deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.018) 42%, rgba(0, 0, 0, 0.10)),
        linear-gradient(135deg, rgba(17, 18, 27, 0.94), rgba(7, 8, 14, 0.90))
    ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -1px 0 rgba(0, 0, 0, 0.12),
        0 8px 18px rgba(0, 0, 0, 0.16),
        0 0 18px var(--price-panel-glow, rgba(255, 255, 255, 0.10)) !important;
    backdrop-filter: blur(8px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.12) !important;
}

/* Первые три VIP — однотонные пастельные кнопки. */
.donate-card-vip-tier-0 {
    --price-panel-bg: linear-gradient(135deg, rgba(203, 210, 218, 0.88), rgba(203, 210, 218, 0.88));
    --price-panel-glow: rgba(203, 210, 218, 0.26);
    --price-text-color: #273039;
    --price-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.34), 0 2px 8px rgba(0, 0, 0, 0.10);
}

.donate-card-vip-tier-1 {
    --price-panel-bg: linear-gradient(135deg, rgba(238, 181, 158, 0.88), rgba(238, 181, 158, 0.88));
    --price-panel-glow: rgba(238, 181, 158, 0.30);
    --price-text-color: #4A261C;
    --price-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.30), 0 2px 8px rgba(0, 0, 0, 0.11);
}

.donate-card-vip-tier-2 {
    --price-panel-bg: linear-gradient(135deg, rgba(222, 232, 240, 0.90), rgba(222, 232, 240, 0.90));
    --price-panel-glow: rgba(222, 232, 240, 0.30);
    --price-text-color: #273746;
    --price-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.38), 0 2px 8px rgba(0, 0, 0, 0.10);
}

/* Премиальные VIP — отдельные пастельные градиенты. */
.donate-card-vip-tier-3 {
    --price-panel-bg:
        radial-gradient(circle at 18% 18%, rgba(255, 252, 216, 0.95), transparent 38%),
        linear-gradient(135deg, rgba(255, 238, 159, 0.90) 0%, rgba(255, 203, 104, 0.88) 46%, rgba(255, 232, 168, 0.90) 100%);
    --price-panel-glow: rgba(255, 219, 117, 0.34);
    --price-text-color: #5B3B08;
    --price-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.34), 0 2px 9px rgba(94, 61, 9, 0.12);
}

.donate-card-vip-tier-4 {
    --price-panel-bg:
        radial-gradient(circle at 18% 18%, rgba(240, 255, 255, 0.96), transparent 38%),
        linear-gradient(135deg, rgba(180, 255, 252, 0.90) 0%, rgba(115, 230, 236, 0.86) 48%, rgba(219, 255, 255, 0.92) 100%);
    --price-panel-glow: rgba(122, 238, 240, 0.34);
    --price-text-color: #073F46;
    --price-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.38), 0 2px 9px rgba(7, 63, 70, 0.10);
}

.donate-card-vip-tier-5 {
    --price-panel-bg:
        radial-gradient(circle at 18% 18%, rgba(255, 233, 255, 0.86), transparent 36%),
        linear-gradient(135deg, rgba(220, 187, 255, 0.88) 0%, rgba(166, 119, 225, 0.84) 48%, rgba(255, 184, 207, 0.84) 100%);
    --price-panel-glow: rgba(183, 126, 245, 0.34);
    --price-text-color: #241130;
    --price-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28), 0 2px 9px rgba(36, 17, 48, 0.16);
}

/* Кнопки предметов тоже получают пастельные градиенты, чтобы не выпадать из магазина. */
.donate-card-crate {
    --price-panel-bg:
        radial-gradient(circle at 18% 18%, rgba(255, 248, 228, 0.92), transparent 38%),
        linear-gradient(135deg, rgba(255, 221, 175, 0.88) 0%, rgba(225, 177, 120, 0.84) 48%, rgba(255, 237, 204, 0.88) 100%);
    --price-panel-glow: rgba(236, 192, 132, 0.30);
    --price-text-color: #53351D;
    --price-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.30), 0 2px 8px rgba(0, 0, 0, 0.10);
}

.donate-card-keys {
    --price-panel-bg:
        radial-gradient(circle at 18% 18%, rgba(255, 253, 222, 0.94), transparent 38%),
        linear-gradient(135deg, rgba(255, 237, 154, 0.88) 0%, rgba(248, 209, 95, 0.84) 50%, rgba(255, 242, 188, 0.88) 100%);
    --price-panel-glow: rgba(248, 214, 98, 0.30);
    --price-text-color: #4F3A07;
    --price-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.33), 0 2px 8px rgba(0, 0, 0, 0.10);
}

.donate-card-currency {
    --price-panel-bg:
        radial-gradient(circle at 18% 18%, rgba(232, 255, 238, 0.94), transparent 38%),
        linear-gradient(135deg, rgba(176, 245, 196, 0.88) 0%, rgba(113, 220, 160, 0.84) 48%, rgba(212, 255, 226, 0.88) 100%);
    --price-panel-glow: rgba(126, 225, 166, 0.30);
    --price-text-color: #123C26;
    --price-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.34), 0 2px 8px rgba(0, 0, 0, 0.10);
}

/* -------------------------
   Shop patch 68
   Price buttons: curved glass effect.
   The CD glare stays blocked by the button surface, while the edge glow is bent inward like thick glass.
   ------------------------- */

.donate-card-footer strong,
.donate-card-vip-tier .donate-card-footer strong {
    --price-glass-top-x: calc(50% + var(--image-gloss-shift-x, 0px) * -0.18);
    --price-glass-side-x: calc(var(--image-border-x, 50%) + var(--image-gloss-shift-x, 0px) * 0.10);
    --price-glass-side-y: calc(var(--image-border-y, 50%) + var(--image-gloss-shift-y, 0px) * 0.06);
    --price-glass-pull-x: calc(var(--image-gloss-shift-x, 0px) * -0.075);
    --price-glass-pull-y: calc(var(--image-gloss-shift-y, 0px) * -0.035);
    overflow: visible !important;
}

.donate-card-footer strong::before,
.donate-card-vip-tier .donate-card-footer strong::before {
    inset: 0 !important;
    background:
        radial-gradient(
            ellipse 118% 76% at var(--price-glass-top-x) -24%,
            rgba(255, 255, 255, 0.62) 0%,
            rgba(255, 255, 255, 0.30) 20%,
            rgba(255, 255, 255, 0.08) 39%,
            transparent 68%
        ),
        radial-gradient(
            ellipse 34% 135% at -7% 52%,
            rgba(255, 255, 255, 0.34) 0%,
            rgba(255, 255, 255, 0.12) 34%,
            transparent 68%
        ),
        radial-gradient(
            ellipse 34% 135% at 107% 52%,
            rgba(255, 255, 255, 0.26) 0%,
            rgba(255, 255, 255, 0.10) 34%,
            transparent 68%
        ),
        radial-gradient(
            ellipse 92% 34% at 50% 114%,
            rgba(0, 0, 0, 0.20) 0%,
            rgba(0, 0, 0, 0.07) 42%,
            transparent 75%
        ),
        linear-gradient(
            105deg,
            rgba(255, 255, 255, 0.34) 0%,
            rgba(255, 255, 255, 0.08) 12%,
            transparent 25%,
            transparent 71%,
            rgba(255, 255, 255, 0.10) 86%,
            rgba(255, 255, 255, 0.26) 100%
        ),
        var(--price-panel-bg,
            linear-gradient(180deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.018) 42%, rgba(0, 0, 0, 0.10)),
            linear-gradient(135deg, rgba(17, 18, 27, 0.94), rgba(7, 8, 14, 0.90))
        ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        inset 0 2px 7px rgba(255, 255, 255, 0.30),
        inset 10px 0 18px rgba(255, 255, 255, 0.13),
        inset -10px 0 18px rgba(255, 255, 255, 0.10),
        inset 0 -8px 16px rgba(0, 0, 0, 0.15),
        0 -5px 18px var(--price-panel-glow, rgba(255, 255, 255, 0.16)),
        0 10px 20px rgba(0, 0, 0, 0.17),
        0 0 24px var(--price-panel-glow, rgba(255, 255, 255, 0.15)) !important;
    backdrop-filter: blur(10px) saturate(1.18) contrast(1.04) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.18) contrast(1.04) !important;
    transform: translate3d(var(--price-glass-pull-x), var(--price-glass-pull-y), 0) scale(1.002);
}

.donate-card-footer strong::after,
.donate-card-vip-tier .donate-card-footer strong::after {
    inset: -4px !important;
    padding: 3px !important;
    background:
        radial-gradient(
            ellipse 118% 54% at var(--price-glass-top-x) -12%,
            rgba(255, 255, 255, 1.00) 0%,
            var(--price-border-flare-mid, var(--image-border-flare-mid, rgba(255,255,255,0.78))) 17%,
            var(--price-border-flare-soft, var(--image-border-flare-soft, rgba(255,255,255,0.26))) 36%,
            transparent 66%
        ),
        radial-gradient(
            ellipse 42% 125% at -3% var(--price-glass-side-y),
            var(--price-border-flare-mid, var(--image-border-flare-mid, rgba(255,255,255,0.70))) 0%,
            var(--price-border-flare-soft, var(--image-border-flare-soft, rgba(255,255,255,0.24))) 34%,
            transparent 70%
        ),
        radial-gradient(
            ellipse 42% 125% at 103% var(--price-glass-side-y),
            var(--price-border-flare-mid, var(--image-border-flare-mid, rgba(255,255,255,0.62))) 0%,
            var(--price-border-flare-soft, var(--image-border-flare-soft, rgba(255,255,255,0.22))) 34%,
            transparent 70%
        ),
        radial-gradient(
            circle at var(--image-border-x) var(--image-border-y),
            var(--price-border-flare-core, var(--image-border-flare-core, rgba(255,255,255,1))) 0 2.4%,
            var(--price-border-flare-mid, var(--image-border-flare-mid, rgba(255,255,255,0.76))) 5.4%,
            var(--price-border-flare-soft, var(--image-border-flare-soft, rgba(255,255,255,0.24))) 13%,
            rgba(255, 255, 255, 0.00) 27%
        ),
        linear-gradient(
            var(--image-gloss-angle),
            rgba(255, 255, 255, 0.00) 0%,
            rgba(255, 255, 255, 0.00) 27%,
            var(--price-gloss-line, var(--image-gloss-line, rgba(255,255,255,0.44))) 45%,
            var(--price-gloss-line-soft, var(--image-gloss-line-soft, rgba(255,255,255,0.14))) 58%,
            rgba(255, 255, 255, 0.00) 76%,
            rgba(255, 255, 255, 0.00) 100%
        ),
        linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.00) 34%, rgba(0,0,0,0.22));
    opacity: calc(var(--image-gloss-opacity) * 1.04) !important;
    filter:
        saturate(1.26)
        brightness(1.80)
        blur(calc(0.18px + var(--image-gloss-blur) * 0.16))
        drop-shadow(0 -2px 9px var(--price-border-glow, var(--image-border-glow, rgba(255,255,255,0.42))))
        drop-shadow(0 0 25px var(--price-border-glow, var(--image-border-glow, rgba(255,255,255,0.34)))) !important;
    transform:
        translate3d(calc(var(--image-gloss-shift-x, 0px) * 0.055), calc(var(--image-gloss-shift-y, 0px) * 0.018 - 1px), 0)
        scale(1.008, 1.045) !important;
}

.donate-card:hover .donate-card-footer strong::before,
.donate-card:focus-visible .donate-card-footer strong::before,
.donate-card-vip-tier:hover .donate-card-footer strong::before,
.donate-card-vip-tier:focus-visible .donate-card-footer strong::before {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        inset 0 2px 8px rgba(255, 255, 255, 0.34),
        inset 12px 0 20px rgba(255, 255, 255, 0.16),
        inset -12px 0 20px rgba(255, 255, 255, 0.12),
        inset 0 -9px 18px rgba(0, 0, 0, 0.16),
        0 -7px 24px var(--price-panel-glow, rgba(255, 255, 255, 0.20)),
        0 11px 22px rgba(0, 0, 0, 0.18),
        0 0 34px var(--price-panel-glow, rgba(255, 255, 255, 0.18)) !important;
}

.donate-card:hover .donate-card-footer strong::after,
.donate-card:focus-visible .donate-card-footer strong::after,
.donate-card-vip-tier:hover .donate-card-footer strong::after,
.donate-card-vip-tier:focus-visible .donate-card-footer strong::after {
    opacity: 1 !important;
    filter:
        saturate(1.34)
        brightness(2.05)
        blur(calc(0.14px + var(--image-gloss-blur) * 0.12))
        drop-shadow(0 -3px 13px var(--price-border-glow, var(--image-border-glow, rgba(255,255,255,0.48))))
        drop-shadow(0 0 38px var(--price-border-glow, var(--image-border-glow, rgba(255,255,255,0.40)))) !important;
}

/* -------------------------
   Shop patch 73
   Price button outline: remove the visible gap between the button surface and its glowing contour.
   The contour now sits directly on the button edge instead of floating outside it.
   ------------------------- */

.donate-card-footer strong::after,
.donate-card-vip-tier .donate-card-footer strong::after {
    inset: 0 !important;
    padding: 2px !important;
    border-radius: inherit !important;
    transform:
        translate3d(calc(var(--image-gloss-shift-x, 0px) * 0.035), calc(var(--image-gloss-shift-y, 0px) * 0.012), 0) !important;
}

.donate-card:hover .donate-card-footer strong::after,
.donate-card:focus-visible .donate-card-footer strong::after,
.donate-card-vip-tier:hover .donate-card-footer strong::after,
.donate-card-vip-tier:focus-visible .donate-card-footer strong::after {
    inset: 0 !important;
    padding: 2px !important;
    border-radius: inherit !important;
    transform:
        translate3d(calc(var(--image-gloss-shift-x, 0px) * 0.035), calc(var(--image-gloss-shift-y, 0px) * 0.012), 0) !important;
}

.donate-card-footer strong::before,
.donate-card-vip-tier .donate-card-footer strong::before {
    border-radius: inherit !important;
}


/* -------------------------
   Shop patch 74
   VIP image glare: perspective-driven glare inside the image area only.
   This does not affect the whole card; it sits inside .donate-card-image where VIP 0-V text is placed.
   ------------------------- */

.donate-card-vip-tier .donate-card-image {
    --vip-image-glare-x: var(--image-gloss-x, 68%);
    --vip-image-glare-y: var(--image-gloss-y, 24%);
    --vip-image-glare-angle: var(--image-gloss-angle, 135deg);
    --vip-image-glare-opacity: calc(0.24 + (var(--tilt-strength, 0) * 0.46));
}

.donate-card-image-glare {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
    opacity: var(--vip-image-glare-opacity);
    background:
        radial-gradient(
            ellipse 44% 32% at var(--vip-image-glare-x) var(--vip-image-glare-y),
            rgba(255, 255, 255, 0.72) 0%,
            rgba(255, 255, 255, 0.42) 12%,
            rgba(255, 255, 255, 0.16) 28%,
            rgba(255, 255, 255, 0.00) 60%
        ),
        linear-gradient(
            var(--vip-image-glare-angle),
            rgba(255, 255, 255, 0.00) 0%,
            rgba(255, 255, 255, 0.00) 30%,
            rgba(255, 255, 255, 0.34) 43%,
            rgba(255, 255, 255, 0.18) 50%,
            rgba(255, 255, 255, 0.07) 58%,
            rgba(255, 255, 255, 0.00) 72%,
            rgba(255, 255, 255, 0.00) 100%
        ),
        radial-gradient(
            ellipse 62% 18% at calc(100% - var(--vip-image-glare-x)) calc(var(--vip-image-glare-y) + 46%),
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.10) 32%,
            rgba(255, 255, 255, 0.00) 72%
        );
    background-size: 100% 100%, 180% 180%, 100% 100%;
    background-position:
        center,
        calc(50% + var(--image-gloss-shift-x, 0px) * 0.42) calc(50% + var(--image-gloss-shift-y, 0px) * 0.28),
        center;
    mix-blend-mode: screen;
    filter:
        saturate(0.25)
        brightness(1.44)
        blur(calc(0.08px + var(--image-gloss-blur, 0.2px) * 0.34));
    transform:
        translate3d(calc(var(--image-gloss-shift-x, 0px) * 0.18), calc(var(--image-gloss-shift-y, 0px) * 0.14), 0)
        skewX(calc(var(--rotate-y, 0deg) * -0.12));
    transition:
        opacity 0.14s linear,
        background-position 0.12s linear,
        filter 0.12s linear,
        transform 0.12s linear;
}

.donate-card-vip-tier:hover .donate-card-image-glare,
.donate-card-vip-tier:focus-visible .donate-card-image-glare {
    opacity: calc(0.38 + (var(--tilt-strength, 0) * 0.54));
    filter:
        saturate(0.20)
        brightness(1.68)
        blur(calc(0.06px + var(--image-gloss-blur, 0.2px) * 0.26));
}

/* Текст VIP остаётся поверх блика, чтобы сам блик был именно на картинке, а не закрывал надпись. */
.donate-card-vip-tier .donate-card-image span {
    z-index: 2;
}

/* -------------------------
   Shop patch 75
   16:9 desktop layout: first viewport shows title, category tabs and only the first row of VIP cards.
   The second row starts below the fold and is reached by scrolling.
   ------------------------- */

@media (min-width: 1180px) and (min-height: 720px) and (orientation: landscape) {
    .shop-hero-screen {
        min-height: clamp(320px, 37vh, 410px);
        padding-top: clamp(86px, 9.2vh, 108px);
        padding-bottom: clamp(14px, 1.6vh, 20px);
        align-items: flex-end;
    }

    .shop-compact-eyebrow {
        margin-bottom: 12px;
    }

    .shop-compact-title {
        font-size: clamp(72px, 8.2vh, 98px);
        line-height: 0.88;
    }

    .shop-catalog-section {
        padding-top: clamp(6px, 1.0vh, 14px);
        padding-bottom: 110px;
    }

    .shop-catalog-panel {
        padding-bottom: 56px;
    }

    .shop-catalog-panel .shop-category-tabs {
        margin-bottom: clamp(34px, 4.0vh, 46px);
    }

    .shop-catalog-panel .shop-products {
        row-gap: clamp(108px, 11.5vh, 132px);
    }
}

@media (min-width: 1180px) and (min-height: 900px) and (orientation: landscape) {
    .shop-hero-screen {
        min-height: clamp(350px, 36vh, 430px);
    }

    .shop-catalog-panel .shop-products {
        row-gap: clamp(124px, 12.5vh, 156px);
    }
}


/* -------------------------
   Shop patch 77
   Desktop layout:
   - restore normal row spacing between card rows
   - make desktop cards about 10% larger
   ------------------------- */

@media (min-width: 1180px) {
    .shop-catalog-container {
        max-width: 1460px;
    }

    .shop-catalog-panel {
        max-width: 1460px;
    }

    .shop-catalog-panel .shop-products,
    .shop-catalog-panel #shopItems.shop-products {
        max-width: 1342px;
        grid-template-columns: repeat(3, minmax(330px, 1fr));
        gap: 34px;
        row-gap: 34px;
    }
}

@media (min-width: 1180px) and (min-height: 720px) and (orientation: landscape) {
    .shop-catalog-panel .shop-products,
    .shop-catalog-panel #shopItems.shop-products {
        row-gap: 34px;
    }
}

@media (min-width: 1180px) and (min-height: 900px) and (orientation: landscape) {
    .shop-catalog-panel .shop-products,
    .shop-catalog-panel #shopItems.shop-products {
        row-gap: 34px;
    }
}

/* -------------------------
   Shop patch 78
   Hero title block:
   - GREAT LIFE / МАГАЗИН +25%
   - lowered to 3/7 of the screen on desktop landscape
   ------------------------- */

.shop-compact-eyebrow {
    font-size: clamp(16px, 1.75vw, 21px);
}

.shop-compact-title {
    font-size: clamp(73px, 11.25vw, 148px);
}

@media (min-width: 1180px) and (min-height: 720px) and (orientation: landscape) {
    .shop-hero-screen {
        min-height: calc(300vh / 7);
        padding-top: clamp(86px, 9.2vh, 108px);
        padding-bottom: clamp(12px, 1.6vh, 20px);
        align-items: flex-end;
    }

    .shop-compact-eyebrow {
        font-size: clamp(16px, 1.75vw, 21px);
        margin-bottom: 12px;
    }

    .shop-compact-title {
        font-size: clamp(90px, 10.25vh, 123px);
        line-height: 0.88;
    }
}

@media (min-width: 1180px) and (min-height: 900px) and (orientation: landscape) {
    .shop-hero-screen {
        min-height: calc(300vh / 7);
    }
}

/* -------------------------
   Shop patch 79
   Desktop cards gap:
   - spacing increased by 10% after desktop cards were enlarged by 10%
   ------------------------- */

@media (min-width: 1180px) {
    .shop-catalog-panel .shop-products,
    .shop-catalog-panel #shopItems.shop-products {
        gap: 38px;
        row-gap: 38px;
    }
}

@media (min-width: 1180px) and (min-height: 720px) and (orientation: landscape) {
    .shop-catalog-panel .shop-products,
    .shop-catalog-panel #shopItems.shop-products {
        row-gap: 38px;
    }
}

@media (min-width: 1180px) and (min-height: 900px) and (orientation: landscape) {
    .shop-catalog-panel .shop-products,
    .shop-catalog-panel #shopItems.shop-products {
        row-gap: 38px;
    }
}

/* -------------------------
   Shop patch 80
   Hero title position: return GREAT LIFE / МАГАЗИН to 1/3 screen height.
   ------------------------- */

@media (min-width: 1180px) and (min-height: 720px) and (orientation: landscape) {
    .shop-hero-screen {
        min-height: calc(100vh / 3);
    }
}

@media (min-width: 1180px) and (min-height: 900px) and (orientation: landscape) {
    .shop-hero-screen {
        min-height: calc(100vh / 3);
    }
}

/* -------------------------
   Shop patch 81
   Category switch buttons: premium animated pill tabs.
   ------------------------- */

.shop-category-tabs {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.shop-category-tabs::before {
    content: "";
    position: absolute;
    inset: -70% -24%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 42%, rgba(255, 197, 197, 0.30), transparent 28%),
        radial-gradient(circle at 82% 58%, rgba(189, 213, 255, 0.36), transparent 30%),
        linear-gradient(115deg, transparent 0 34%, rgba(255, 255, 255, 0.40) 46%, transparent 58% 100%);
    background-size: 120% 120%, 120% 120%, 180% 180%;
    background-position: left center, right center, -90% 50%;
    opacity: 0.72;
    filter: blur(13px) saturate(1.14);
    animation: shopCategoryTabsAura 7.5s ease-in-out infinite;
}

.shop-category-tab {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transform: translateZ(0);
    will-change: transform, box-shadow, background, color;
    transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.28s ease,
        color 0.28s ease,
        box-shadow 0.28s ease,
        filter 0.28s ease;
}

.shop-category-tab::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(
            112deg,
            transparent 0%,
            transparent 28%,
            rgba(255, 255, 255, 0.56) 42%,
            rgba(255, 255, 255, 0.20) 51%,
            transparent 66%,
            transparent 100%
        );
    transform: translateX(-135%) skewX(-18deg);
    opacity: 0;
    filter: blur(0.25px);
}

.shop-category-tab::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 6px;
    height: 2px;
    z-index: 1;
    border-radius: 999px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.86), transparent);
    opacity: 0;
    transform: scaleX(0.34);
    transform-origin: center;
    transition:
        opacity 0.26s ease,
        transform 0.30s cubic-bezier(0.22, 1, 0.36, 1);
}

.shop-category-tab:hover,
.shop-category-tab:focus-visible {
    transform: translateY(-2px) scale(1.018);
    filter: brightness(1.04) saturate(1.08);
    box-shadow:
        0 10px 26px rgba(90, 120, 180, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.shop-category-tab:hover::before,
.shop-category-tab:focus-visible::before {
    opacity: 1;
    animation: shopCategoryTabSweep 0.72s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.shop-category-tab:hover::after,
.shop-category-tab:focus-visible::after {
    opacity: 0.72;
    transform: scaleX(1);
}

.shop-category-tab-active {
    background:
        linear-gradient(90deg, #FFC5C5, #BDD5FF, #FFC5C5);
    background-size: 220% 100%;
    color: var(--blue-text);
    box-shadow:
        0 14px 34px rgba(90, 120, 180, 0.24),
        0 0 24px rgba(189, 213, 255, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.62),
        inset 0 -1px 0 rgba(92, 112, 160, 0.12);
    animation: shopCategoryActiveGradient 5.6s ease-in-out infinite;
}

.shop-category-tab-active::before {
    opacity: 0.62;
    transform: translateX(0) skewX(-12deg);
    background:
        radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.52), transparent 26%),
        linear-gradient(112deg, transparent 0 30%, rgba(255, 255, 255, 0.34) 44%, transparent 62% 100%);
    animation: shopCategoryActiveGlass 4.4s ease-in-out infinite;
}

.shop-category-tab-active::after {
    opacity: 0.88;
    transform: scaleX(1);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.96), rgba(189, 213, 255, 0.78), transparent);
}

[data-theme="dark"] .shop-category-tabs::before {
    background:
        radial-gradient(circle at 18% 42%, rgba(198, 107, 107, 0.34), transparent 28%),
        radial-gradient(circle at 82% 58%, rgba(95, 130, 200, 0.40), transparent 30%),
        linear-gradient(115deg, transparent 0 34%, rgba(255, 255, 255, 0.18) 46%, transparent 58% 100%);
    opacity: 0.82;
}

[data-theme="dark"] .shop-category-tab-active {
    background: linear-gradient(90deg, #C66B6B, #5F82C8, #C66B6B);
    background-size: 220% 100%;
    color: #EEF4FF;
    box-shadow:
        0 14px 34px rgba(15, 23, 42, 0.34),
        0 0 28px rgba(95, 130, 200, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        inset 0 -1px 0 rgba(0, 0, 0, 0.20);
}

@keyframes shopCategoryTabsAura {
    0%, 100% {
        background-position: left center, right center, -90% 50%;
        transform: translate3d(-1.4%, 0, 0) rotate(0deg);
    }

    50% {
        background-position: 30% 48%, 70% 52%, 190% 50%;
        transform: translate3d(1.4%, 0, 0) rotate(2deg);
    }
}

@keyframes shopCategoryTabSweep {
    0% {
        transform: translateX(-135%) skewX(-18deg);
    }

    100% {
        transform: translateX(135%) skewX(-18deg);
    }
}

@keyframes shopCategoryActiveGradient {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes shopCategoryActiveGlass {
    0%, 100% {
        background-position: 0% 50%, -80% 50%;
        transform: translateX(-5%) skewX(-12deg);
    }

    50% {
        background-position: 100% 50%, 180% 50%;
        transform: translateX(5%) skewX(-12deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .shop-category-tabs::before,
    .shop-category-tab-active,
    .shop-category-tab-active::before,
    .shop-category-tab:hover::before,
    .shop-category-tab:focus-visible::before {
        animation: none !important;
    }
}

/* -------------------------
   Shop patch 83
   Category switch: the colored active pill now slides between tabs.
   Base restored from patch 81.
   ------------------------- */

.shop-category-tabs {
    --shop-category-tab-gap: 8px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.shop-category-tabs::after {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 8px;
    z-index: 0;
    width: calc((100% - 24px) / 2);
    border-radius: var(--radius-pill);
    pointer-events: none;
    background: linear-gradient(90deg, #FFC5C5, #BDD5FF, #FFC5C5);
    background-size: 220% 100%;
    box-shadow:
        0 14px 34px rgba(90, 120, 180, 0.24),
        0 0 24px rgba(189, 213, 255, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.62),
        inset 0 -1px 0 rgba(92, 112, 160, 0.12);
    transform: translateX(0);
    transition:
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.28s ease,
        filter 0.28s ease;
    animation: shopCategoryActiveGradient 5.6s ease-in-out infinite;
}

.shop-category-tabs:has(.shop-category-tab:nth-child(2).shop-category-tab-active)::after {
    transform: translateX(calc(100% + var(--shop-category-tab-gap)));
}

.shop-category-tab {
    z-index: 1;
}

.shop-category-tab-active {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--blue-text);
}

.shop-category-tab-active::before {
    z-index: -1;
}

[data-theme="dark"] .shop-category-tabs::after {
    background: linear-gradient(90deg, #C66B6B, #5F82C8, #C66B6B);
    background-size: 220% 100%;
    box-shadow:
        0 14px 34px rgba(15, 23, 42, 0.34),
        0 0 28px rgba(95, 130, 200, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        inset 0 -1px 0 rgba(0, 0, 0, 0.20);
}

[data-theme="dark"] .shop-category-tab-active {
    color: #EEF4FF;
}

@media (prefers-reduced-motion: reduce) {
    .shop-category-tabs::after {
        animation: none !important;
        transition: none !important;
    }
}

/* -------------------------
   Shop patch 85
   VIP III / VIP IV: add the same small white specular glint that exists visually on VIP V.
   The glint is attached to the CD glare layer and follows the same perspective variables.
   ------------------------- */

.donate-card-vip-tier-3 .donate-card-shine,
.donate-card-vip-tier-4 .donate-card-shine {
    overflow: visible;
}

.donate-card-vip-tier-3 .donate-card-shine::before,
.donate-card-vip-tier-4 .donate-card-shine::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    border-radius: inherit;
    background:
        radial-gradient(
            circle at calc(var(--cd-light-x, 50%) + 8%) calc(var(--cd-light-y, 50%) - 6%),
            rgba(255, 255, 255, 0.98) 0 1.6%,
            rgba(255, 255, 255, 0.68) 3.8%,
            rgba(255, 255, 255, 0.22) 8.4%,
            transparent 18%
        ),
        radial-gradient(
            ellipse 34% 1.8% at calc(var(--cd-light-x, 50%) + 8%) calc(var(--cd-light-y, 50%) - 6%),
            rgba(255, 255, 255, 0.88) 0%,
            rgba(255, 255, 255, 0.38) 18%,
            transparent 64%
        ),
        radial-gradient(
            ellipse 1.8% 34% at calc(var(--cd-light-x, 50%) + 8%) calc(var(--cd-light-y, 50%) - 6%),
            rgba(255, 255, 255, 0.82) 0%,
            rgba(255, 255, 255, 0.34) 18%,
            transparent 64%
        ),
        conic-gradient(
            from calc(var(--cd-angle, 135deg) - 42deg) at calc(var(--cd-light-x, 50%) + 8%) calc(var(--cd-light-y, 50%) - 6%),
            transparent 0deg,
            transparent 35deg,
            rgba(255, 255, 255, 0.68) 43deg,
            transparent 52deg,
            transparent 126deg,
            rgba(255, 255, 255, 0.34) 135deg,
            transparent 144deg,
            transparent 216deg,
            rgba(255, 255, 255, 0.32) 225deg,
            transparent 234deg,
            transparent 306deg,
            rgba(255, 255, 255, 0.30) 315deg,
            transparent 324deg,
            transparent 360deg
        );
    opacity: calc(var(--shine-layer-opacity, 0.55) * 0.78);
    mix-blend-mode: screen;
    filter:
        saturate(0.92)
        brightness(1.35)
        blur(0.04px)
        drop-shadow(0 0 8px rgba(255, 255, 255, 0.36));
    transform:
        translate3d(calc(var(--image-gloss-shift-x, 0px) * 0.08), calc(var(--image-gloss-shift-y, 0px) * 0.05), 0)
        scale(1.01);
}

.donate-card-vip-tier-3:hover .donate-card-shine::before,
.donate-card-vip-tier-3:focus-visible .donate-card-shine::before,
.donate-card-vip-tier-4:hover .donate-card-shine::before,
.donate-card-vip-tier-4:focus-visible .donate-card-shine::before {
    opacity: calc(var(--shine-layer-opacity, 0.65) * 0.94);
    filter:
        saturate(0.96)
        brightness(1.58)
        blur(0.03px)
        drop-shadow(0 0 11px rgba(255, 255, 255, 0.44));
}

/* -------------------------
   Shop patch 87
   VIP article modal: restored from patch 85 base, opens article on VIP click.
   Header uses the VIP card background, body follows VIP color and current site theme.
   ------------------------- */

body.vip-article-open {
    overflow: hidden;
}

.vip-article-overlay {
    --vip-article-accent: #D8DEE7;
    --vip-article-accent-rgb: 216, 222, 231;
    --vip-article-bg: url("../images/vip0-card-bg.png");
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: grid;
    place-items: center;
    padding: clamp(16px, 3.2vw, 42px);
    background:
        radial-gradient(circle at 50% 24%, rgba(var(--vip-article-accent-rgb), 0.24), transparent 34%),
        rgba(7, 9, 16, 0.68);
    opacity: 0;
    pointer-events: none;
    transition: opacity 260ms ease;
    backdrop-filter: blur(16px) saturate(1.12);
    -webkit-backdrop-filter: blur(16px) saturate(1.12);
}

.vip-article-overlay-visible {
    opacity: 1;
    pointer-events: auto;
}

.vip-article-modal {
    position: relative;
    width: min(960px, calc(100vw - 32px));
    max-height: min(780px, calc(100dvh - 32px));
    overflow: hidden auto;
    border: 1px solid rgba(var(--vip-article-accent-rgb), 0.42);
    border-radius: 34px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 247, 253, 0.88));
    color: #151923;
    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.36),
        0 0 48px rgba(var(--vip-article-accent-rgb), 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    transform: translateY(28px) scale(0.965);
    opacity: 0;
    transition:
        transform 380ms cubic-bezier(0.18, 0.86, 0.23, 1),
        opacity 280ms ease;
    outline: none;
}

.vip-article-overlay-visible .vip-article-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}

[data-theme="dark"] .vip-article-modal {
    background:
        linear-gradient(180deg, rgba(18, 21, 32, 0.96), rgba(8, 10, 17, 0.95));
    color: #F8FAFF;
    box-shadow:
        0 34px 96px rgba(0, 0, 0, 0.62),
        0 0 56px rgba(var(--vip-article-accent-rgb), 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.vip-article-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 5;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 50%;
    background: rgba(8, 10, 16, 0.52);
    color: #FFFFFF;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    transition:
        transform 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.vip-article-close:hover,
.vip-article-close:focus-visible {
    transform: scale(1.08) rotate(6deg);
    background: rgba(var(--vip-article-accent-rgb), 0.38);
    box-shadow: 0 0 22px rgba(var(--vip-article-accent-rgb), 0.42);
    outline: none;
}

.vip-article-header {
    position: relative;
    min-height: clamp(230px, 30vw, 330px);
    display: flex;
    align-items: flex-end;
    padding: clamp(26px, 4vw, 48px);
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.72)),
        var(--vip-article-bg) center / cover no-repeat;
}

.vip-article-header::before {
    content: "";
    position: absolute;
    inset: -18%;
    z-index: -1;
    background:
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.26), transparent 22%),
        radial-gradient(circle at 70% 78%, rgba(var(--vip-article-accent-rgb), 0.34), transparent 36%);
    mix-blend-mode: screen;
    filter: blur(6px) saturate(1.18);
}

.vip-article-header-shine {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 0%, transparent 34%, rgba(255, 255, 255, 0.34) 45%, transparent 58%, transparent 100%),
        radial-gradient(circle at 78% 20%, rgba(255, 255, 255, 0.38), transparent 18%);
    mix-blend-mode: screen;
    opacity: 0.72;
}

.vip-article-header-content {
    position: relative;
    z-index: 1;
    max-width: 720px;
    color: #FFFFFF;
    text-shadow: 0 8px 28px rgba(0, 0, 0, 0.52);
}

.vip-article-label {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(var(--vip-article-accent-rgb), 0.22);
    border: 1px solid rgba(var(--vip-article-accent-rgb), 0.54);
    color: #FFFFFF;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    box-shadow: 0 0 26px rgba(var(--vip-article-accent-rgb), 0.34);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.vip-article-header h2 {
    margin: 18px 0 8px;
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 7vw, 5.8rem);
    line-height: 0.88;
    letter-spacing: -0.055em;
    text-transform: uppercase;
}

.vip-article-price {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    font-weight: 900;
    letter-spacing: 0.08em;
}

.vip-article-body {
    padding: clamp(28px, 4.6vw, 54px);
    background:
        radial-gradient(circle at 14% 0%, rgba(var(--vip-article-accent-rgb), 0.18), transparent 30%),
        linear-gradient(180deg, rgba(var(--vip-article-accent-rgb), 0.06), transparent 36%);
}

.vip-article-lead {
    max-width: 820px;
    margin: 0;
    color: rgba(21, 25, 35, 0.78);
    font-size: clamp(1.04rem, 1.45vw, 1.22rem);
    font-weight: 700;
    line-height: 1.68;
}

[data-theme="dark"] .vip-article-lead {
    color: rgba(248, 250, 255, 0.76);
}

.vip-article-body h3 {
    margin: 34px 0 18px;
    color: rgb(var(--vip-article-accent-rgb));
    font-size: 1rem;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.vip-article-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vip-article-features li {
    position: relative;
    min-height: 72px;
    padding: 18px 18px 18px 46px;
    border: 1px solid rgba(var(--vip-article-accent-rgb), 0.24);
    border-radius: 22px;
    background: rgba(var(--vip-article-accent-rgb), 0.08);
    color: rgba(21, 25, 35, 0.82);
    font-weight: 800;
    line-height: 1.42;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40);
}

[data-theme="dark"] .vip-article-features li {
    background: rgba(var(--vip-article-accent-rgb), 0.10);
    color: rgba(248, 250, 255, 0.84);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.vip-article-features li::before {
    content: "✦";
    position: absolute;
    top: 19px;
    left: 18px;
    color: rgb(var(--vip-article-accent-rgb));
    text-shadow: 0 0 16px rgba(var(--vip-article-accent-rgb), 0.58);
}

.vip-article-action {
    margin-top: 30px;
    min-height: 52px;
    padding: 0 24px;
    border: 1px solid rgba(var(--vip-article-accent-rgb), 0.44);
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(var(--vip-article-accent-rgb), 0.92), rgba(var(--vip-article-accent-rgb), 0.58));
    color: #FFFFFF;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow:
        0 14px 30px rgba(var(--vip-article-accent-rgb), 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
    transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

.vip-article-action:hover,
.vip-article-action:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.06) saturate(1.08);
    box-shadow:
        0 18px 38px rgba(var(--vip-article-accent-rgb), 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.52);
    outline: none;
}

.vip-article-tier-0 { --vip-article-accent: #C9D0D8; --vip-article-accent-rgb: 160, 170, 182; }
.vip-article-tier-1 { --vip-article-accent: #EEB59E; --vip-article-accent-rgb: 202, 112, 76; }
.vip-article-tier-2 { --vip-article-accent: #DDEAF4; --vip-article-accent-rgb: 150, 174, 194; }
.vip-article-tier-3 { --vip-article-accent: #F8D66E; --vip-article-accent-rgb: 225, 178, 66; }
.vip-article-tier-4 { --vip-article-accent: #9FF4FF; --vip-article-accent-rgb: 72, 194, 224; }
.vip-article-tier-5 { --vip-article-accent: #E678FF; --vip-article-accent-rgb: 182, 82, 226; }

@media (max-width: 720px) {
    .vip-article-overlay {
        padding: 10px;
    }

    .vip-article-modal {
        width: calc(100vw - 20px);
        max-height: calc(100dvh - 20px);
        border-radius: 24px;
    }

    .vip-article-header {
        min-height: 240px;
        padding: 24px;
    }

    .vip-article-features {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vip-article-overlay,
    .vip-article-modal,
    .vip-article-close,
    .vip-article-action {
        transition: none !important;
    }
}


/* -------------------------
   Shop patch 88
   VIP article cleanup: no close button, and no shop/card scrollbar over the article.
   ------------------------- */

html:has(body.vip-article-open),
body.vip-article-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}

body.vip-article-open .shop-catalog-section,
body.vip-article-open .shop-catalog-container,
body.vip-article-open .shop-catalog-panel,
body.vip-article-open .shop-products {
    overflow: visible !important;
}

.vip-article-overlay {
    z-index: 99999 !important;
}

.vip-article-modal {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.vip-article-modal::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.vip-article-close {
    display: none !important;
}

/* -------------------------
   Shop patch 89
   VIP article header: soft pastel gradients without harsh black/white edges.
   ------------------------- */

.vip-article-overlay {
    --vip-article-header-bg-light:
        radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.74), transparent 36%),
        radial-gradient(circle at 82% 12%, rgba(var(--vip-article-accent-rgb), 0.24), transparent 34%),
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.92) 0%,
            rgba(var(--vip-article-accent-rgb), 0.20) 42%,
            rgba(var(--vip-article-accent-rgb), 0.34) 100%
        );
    --vip-article-header-bg-dark:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.13), transparent 36%),
        radial-gradient(circle at 82% 16%, rgba(var(--vip-article-accent-rgb), 0.26), transparent 38%),
        linear-gradient(135deg,
            rgba(18, 21, 32, 0.94) 0%,
            rgba(var(--vip-article-accent-rgb), 0.16) 48%,
            rgba(8, 10, 17, 0.92) 100%
        );
    --vip-article-header-text-light: #1F2632;
    --vip-article-header-muted-light: rgba(31, 38, 50, 0.70);
    --vip-article-header-text-dark: #F9FBFF;
    --vip-article-header-muted-dark: rgba(249, 251, 255, 0.76);
}

.vip-article-header {
    background: var(--vip-article-header-bg-light) !important;
}

[data-theme="dark"] .vip-article-header {
    background: var(--vip-article-header-bg-dark) !important;
}

.vip-article-header::before {
    inset: 0 !important;
    z-index: 0 !important;
    background:
        radial-gradient(ellipse 80% 54% at 50% 110%, rgba(var(--vip-article-accent-rgb), 0.18), transparent 72%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.20), transparent 58%) !important;
    mix-blend-mode: soft-light !important;
    filter: blur(0.2px) saturate(1.04) !important;
    opacity: 0.72 !important;
}

[data-theme="dark"] .vip-article-header::before {
    background:
        radial-gradient(ellipse 80% 54% at 50% 110%, rgba(var(--vip-article-accent-rgb), 0.18), transparent 72%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 62%) !important;
    opacity: 0.78 !important;
}

.vip-article-header-shine {
    background:
        linear-gradient(115deg, transparent 0%, transparent 35%, rgba(255, 255, 255, 0.28) 48%, transparent 64%, transparent 100%),
        radial-gradient(circle at 76% 22%, rgba(255, 255, 255, 0.24), transparent 22%) !important;
    mix-blend-mode: soft-light !important;
    opacity: 0.64 !important;
}

.vip-article-header-content {
    color: var(--vip-article-header-text-light) !important;
    text-shadow: 0 6px 24px rgba(255, 255, 255, 0.42), 0 0 20px rgba(var(--vip-article-accent-rgb), 0.18) !important;
}

[data-theme="dark"] .vip-article-header-content {
    color: var(--vip-article-header-text-dark) !important;
    text-shadow: 0 8px 28px rgba(0, 0, 0, 0.42), 0 0 22px rgba(var(--vip-article-accent-rgb), 0.22) !important;
}

.vip-article-label {
    background: rgba(255, 255, 255, 0.46) !important;
    border-color: rgba(var(--vip-article-accent-rgb), 0.36) !important;
    color: var(--vip-article-header-text-light) !important;
    box-shadow:
        0 0 22px rgba(var(--vip-article-accent-rgb), 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
}

[data-theme="dark"] .vip-article-label {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(var(--vip-article-accent-rgb), 0.42) !important;
    color: var(--vip-article-header-text-dark) !important;
    box-shadow:
        0 0 24px rgba(var(--vip-article-accent-rgb), 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

.vip-article-price {
    color: var(--vip-article-header-muted-light) !important;
}

[data-theme="dark"] .vip-article-price {
    color: var(--vip-article-header-muted-dark) !important;
}

.vip-article-tier-0 {
    --vip-article-header-bg-light:
        radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.76), transparent 36%),
        linear-gradient(135deg, rgba(249, 251, 253, 0.95), rgba(214, 221, 229, 0.62) 52%, rgba(186, 197, 209, 0.56));
    --vip-article-header-bg-dark:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.12), transparent 36%),
        linear-gradient(135deg, rgba(24, 28, 36, 0.94), rgba(118, 130, 144, 0.22) 52%, rgba(8, 10, 17, 0.94));
}

.vip-article-tier-1 {
    --vip-article-header-bg-light:
        radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.74), transparent 36%),
        linear-gradient(135deg, rgba(255, 243, 235, 0.95), rgba(238, 181, 158, 0.46) 52%, rgba(205, 128, 94, 0.40));
    --vip-article-header-bg-dark:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.12), transparent 36%),
        linear-gradient(135deg, rgba(26, 18, 16, 0.94), rgba(202, 112, 76, 0.22) 52%, rgba(8, 10, 17, 0.94));
}

.vip-article-tier-2 {
    --vip-article-header-bg-light:
        radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.76), transparent 36%),
        linear-gradient(135deg, rgba(250, 254, 255, 0.96), rgba(221, 234, 244, 0.62) 52%, rgba(168, 194, 213, 0.48));
    --vip-article-header-bg-dark:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.12), transparent 36%),
        linear-gradient(135deg, rgba(17, 23, 31, 0.94), rgba(150, 174, 194, 0.22) 52%, rgba(8, 10, 17, 0.94));
}

.vip-article-tier-3 {
    --vip-article-header-bg-light:
        radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.74), transparent 36%),
        linear-gradient(135deg, rgba(255, 248, 222, 0.96), rgba(248, 214, 110, 0.48) 52%, rgba(225, 178, 66, 0.38));
    --vip-article-header-bg-dark:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.12), transparent 36%),
        linear-gradient(135deg, rgba(27, 23, 14, 0.94), rgba(225, 178, 66, 0.22) 52%, rgba(8, 10, 17, 0.94));
}

.vip-article-tier-4 {
    --vip-article-header-bg-light:
        radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.76), transparent 36%),
        linear-gradient(135deg, rgba(238, 253, 255, 0.96), rgba(159, 244, 255, 0.48) 52%, rgba(72, 194, 224, 0.36));
    --vip-article-header-bg-dark:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.12), transparent 36%),
        linear-gradient(135deg, rgba(13, 24, 30, 0.94), rgba(72, 194, 224, 0.22) 52%, rgba(8, 10, 17, 0.94));
}

.vip-article-tier-5 {
    --vip-article-header-bg-light:
        radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.72), transparent 36%),
        linear-gradient(135deg, rgba(251, 240, 255, 0.96), rgba(230, 120, 255, 0.42) 52%, rgba(128, 86, 202, 0.38));
    --vip-article-header-bg-dark:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.12), transparent 36%),
        linear-gradient(135deg, rgba(20, 15, 28, 0.95), rgba(182, 82, 226, 0.24) 52%, rgba(8, 10, 17, 0.94));
}

/* -------------------------
   Shop patch 90
   VIP article framed blocks: one column and larger readable text.
   ------------------------- */

.vip-article-features {
    grid-template-columns: 1fr !important;
    gap: clamp(16px, 1.8vw, 22px) !important;
    max-width: 920px;
}

.vip-article-features li {
    min-height: 92px !important;
    padding: clamp(22px, 2.1vw, 30px) clamp(24px, 2.6vw, 36px) clamp(22px, 2.1vw, 30px) clamp(62px, 5vw, 78px) !important;
    border-radius: 26px !important;
    font-size: clamp(1.22rem, 1.55vw, 1.55rem) !important;
    line-height: 1.52 !important;
    letter-spacing: 0.01em;
    border-width: 1.5px !important;
}

.vip-article-features li::before {
    top: clamp(24px, 2.25vw, 31px) !important;
    left: clamp(24px, 2.6vw, 34px) !important;
    font-size: clamp(1.25rem, 1.65vw, 1.65rem) !important;
}

.vip-article-lead {
    font-size: clamp(1.20rem, 1.55vw, 1.46rem) !important;
    line-height: 1.72 !important;
}

.vip-article-body h3 {
    margin-top: 40px !important;
    margin-bottom: 20px !important;
    font-size: clamp(1.08rem, 1.24vw, 1.28rem) !important;
}

@media (max-width: 720px) {
    .vip-article-features li {
        min-height: 86px !important;
        padding: 20px 20px 20px 56px !important;
        font-size: clamp(1.12rem, 4.5vw, 1.28rem) !important;
    }

    .vip-article-features li::before {
        top: 22px !important;
        left: 22px !important;
        font-size: 1.22rem !important;
    }
}

/* -------------------------
   Shop patch 91
   VIP article: taller modal, single feature panel, non-sticky centered buy button, and quick scroll arrows.
   ------------------------- */

.vip-article-modal {
    height: min(1170px, calc(100dvh - 24px)) !important;
    max-height: calc(100dvh - 24px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden auto !important;
}

.vip-article-header {
    flex: 0 0 auto !important;
}

.vip-article-body {
    flex: 1 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.vip-article-features {
    display: block !important;
    max-width: 920px !important;
    margin: 0 !important;
    padding: clamp(24px, 2.7vw, 38px) !important;
    border: 1.5px solid rgba(var(--vip-article-accent-rgb), 0.28) !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at 12% 4%, rgba(255, 255, 255, 0.40), transparent 36%),
        linear-gradient(135deg, rgba(var(--vip-article-accent-rgb), 0.12), rgba(var(--vip-article-accent-rgb), 0.055)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        0 16px 34px rgba(var(--vip-article-accent-rgb), 0.12) !important;
}

[data-theme="dark"] .vip-article-features {
    background:
        radial-gradient(circle at 12% 4%, rgba(255, 255, 255, 0.10), transparent 36%),
        linear-gradient(135deg, rgba(var(--vip-article-accent-rgb), 0.14), rgba(var(--vip-article-accent-rgb), 0.065)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 18px 38px rgba(0, 0, 0, 0.18) !important;
}

.vip-article-features li {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 0 0 clamp(34px, 3.4vw, 48px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(21, 25, 35, 0.86) !important;
    font-size: clamp(1.32rem, 1.72vw, 1.70rem) !important;
    line-height: 1.62 !important;
    font-weight: 850 !important;
}

.vip-article-features li + li {
    margin-top: clamp(16px, 1.7vw, 24px) !important;
}

[data-theme="dark"] .vip-article-features li {
    color: rgba(248, 250, 255, 0.88) !important;
}

.vip-article-features li::before {
    top: 0.04em !important;
    left: 0 !important;
    font-size: clamp(1.34rem, 1.8vw, 1.84rem) !important;
    line-height: 1 !important;
}

.vip-article-action {
    position: relative !important;
    inset: auto !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(100%, 470px) !important;
    min-height: 64px !important;
    margin: clamp(34px, 4vw, 58px) auto 0 !important;
    padding: 0 clamp(28px, 3.5vw, 44px) !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background-size: 220% 220% !important;
    transition:
        transform 190ms ease,
        filter 190ms ease,
        box-shadow 190ms ease,
        background-position 360ms ease !important;
}

.vip-article-action::before {
    content: "";
    position: absolute;
    inset: -40% -55%;
    z-index: -1;
    background:
        linear-gradient(115deg, transparent 0%, transparent 37%, rgba(255, 255, 255, 0.78) 49%, transparent 61%, transparent 100%),
        radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.34), transparent 28%);
    opacity: 0;
    transform: translateX(-34%) rotate(4deg);
    transition: opacity 180ms ease, transform 760ms cubic-bezier(0.18, 0.86, 0.23, 1);
    pointer-events: none;
    mix-blend-mode: screen;
}

.vip-article-action:hover,
.vip-article-action:focus-visible {
    background:
        linear-gradient(
            115deg,
            rgba(var(--vip-article-accent-rgb), 0.98),
            rgba(255, 255, 255, 0.28),
            rgba(var(--vip-article-accent-rgb), 0.72),
            rgba(255, 255, 255, 0.18),
            rgba(var(--vip-article-accent-rgb), 0.96)
        ) !important;
    background-size: 260% 260% !important;
    animation: vipArticleActionGradient 2.6s linear infinite;
    transform: translateY(-3px) scale(1.018) !important;
    filter: saturate(1.20) brightness(1.08) !important;
    box-shadow:
        0 22px 44px rgba(var(--vip-article-accent-rgb), 0.36),
        0 0 36px rgba(var(--vip-article-accent-rgb), 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.66) !important;
}

.vip-article-action:hover::before,
.vip-article-action:focus-visible::before {
    opacity: 0.72;
    transform: translateX(34%) rotate(4deg);
}

.vip-article-scroll-actions {
    position: fixed;
    top: 50%;
    right: clamp(14px, 3.2vw, 46px);
    z-index: 100001;
    display: grid;
    gap: 12px;
    transform: translateY(-50%) translateX(12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 190ms ease, transform 190ms ease;
}

.vip-article-overlay.vip-article-scroll-visible .vip-article-scroll-actions {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}

.vip-article-scroll-arrow {
    width: clamp(46px, 4.4vw, 58px);
    height: clamp(46px, 4.4vw, 58px);
    border: 1px solid rgba(var(--vip-article-accent-rgb), 0.46);
    border-radius: 18px;
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.62), transparent 34%),
        linear-gradient(135deg, rgba(var(--vip-article-accent-rgb), 0.82), rgba(var(--vip-article-accent-rgb), 0.42));
    color: #FFFFFF;
    font-size: clamp(1.55rem, 2vw, 2rem);
    font-weight: 950;
    line-height: 1;
    cursor: pointer;
    box-shadow:
        0 16px 34px rgba(var(--vip-article-accent-rgb), 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.50);
    transition: transform 160ms ease, opacity 160ms ease, filter 160ms ease, box-shadow 160ms ease;
    backdrop-filter: blur(10px) saturate(1.16);
    -webkit-backdrop-filter: blur(10px) saturate(1.16);
}

.vip-article-scroll-arrow:hover,
.vip-article-scroll-arrow:focus-visible {
    transform: translateY(-2px) scale(1.05);
    filter: brightness(1.08) saturate(1.14);
    box-shadow:
        0 20px 42px rgba(var(--vip-article-accent-rgb), 0.32),
        0 0 26px rgba(var(--vip-article-accent-rgb), 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.62);
    outline: none;
}

.vip-article-scroll-arrow-hidden {
    opacity: 0.26 !important;
    pointer-events: none !important;
    transform: scale(0.94) !important;
}

@keyframes vipArticleActionGradient {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@media (max-width: 720px) {
    .vip-article-modal {
        height: calc(100dvh - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
    }

    .vip-article-features {
        padding: 22px !important;
    }

    .vip-article-features li {
        padding-left: 34px !important;
        font-size: clamp(1.18rem, 4.9vw, 1.38rem) !important;
    }

    .vip-article-scroll-actions {
        right: 12px;
        gap: 10px;
    }
}

/* -------------------------
   Shop patch 92
   VIP article duration tabs and card prices.
   ------------------------- */

.vip-article-duration-tabs {
    --vip-duration-tabs-gap: 8px;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--vip-duration-tabs-gap);
    width: min(100%, 760px);
    margin: clamp(30px, 3.4vw, 44px) auto 0;
    padding: 8px;
    border: 1px solid rgba(var(--vip-article-accent-rgb), 0.22);
    border-radius: 999px;
    background:
        radial-gradient(circle at 16% 50%, rgba(255, 255, 255, 0.38), transparent 32%),
        linear-gradient(135deg, rgba(var(--vip-article-accent-rgb), 0.10), rgba(var(--vip-article-accent-rgb), 0.045));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.46),
        0 16px 34px rgba(var(--vip-article-accent-rgb), 0.10);
    overflow: hidden;
    isolation: isolate;
}

[data-theme="dark"] .vip-article-duration-tabs {
    border-color: rgba(var(--vip-article-accent-rgb), 0.28);
    background:
        radial-gradient(circle at 16% 50%, rgba(255, 255, 255, 0.10), transparent 32%),
        linear-gradient(135deg, rgba(var(--vip-article-accent-rgb), 0.13), rgba(var(--vip-article-accent-rgb), 0.055));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 18px 40px rgba(0, 0, 0, 0.18);
}

.vip-article-duration-tabs::before {
    content: "";
    position: absolute;
    inset: -70% -22%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 48%, rgba(var(--vip-article-accent-rgb), 0.28), transparent 30%),
        radial-gradient(circle at 82% 52%, rgba(255, 255, 255, 0.30), transparent 30%),
        linear-gradient(115deg, transparent 0 34%, rgba(255, 255, 255, 0.28) 46%, transparent 58% 100%);
    background-size: 120% 120%, 120% 120%, 180% 180%;
    background-position: left center, right center, -90% 50%;
    opacity: 0.72;
    filter: blur(13px) saturate(1.16);
    animation: shopCategoryTabsAura 7.5s ease-in-out infinite;
}

.vip-article-duration-tabs::after {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 8px;
    z-index: 0;
    width: calc((100% - 40px) / 4);
    border-radius: 999px;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(var(--vip-article-accent-rgb), 0.96),
            rgba(255, 255, 255, 0.50),
            rgba(var(--vip-article-accent-rgb), 0.72),
            rgba(var(--vip-article-accent-rgb), 0.96)
        );
    background-size: 240% 100%;
    box-shadow:
        0 14px 34px rgba(var(--vip-article-accent-rgb), 0.26),
        0 0 24px rgba(var(--vip-article-accent-rgb), 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.68),
        inset 0 -1px 0 rgba(0, 0, 0, 0.12);
    transform: translateX(0);
    transition:
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.28s ease,
        filter 0.28s ease;
    animation: shopCategoryActiveGradient 5.6s ease-in-out infinite;
}

[data-theme="dark"] .vip-article-duration-tabs::after {
    background:
        linear-gradient(
            90deg,
            rgba(var(--vip-article-accent-rgb), 0.92),
            rgba(255, 255, 255, 0.20),
            rgba(var(--vip-article-accent-rgb), 0.58),
            rgba(var(--vip-article-accent-rgb), 0.90)
        );
    background-size: 240% 100%;
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.28),
        0 0 28px rgba(var(--vip-article-accent-rgb), 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -1px 0 rgba(0, 0, 0, 0.22);
}

.vip-article-duration-tabs:has(.vip-article-duration-tab:nth-child(2).vip-article-duration-tab-active)::after {
    transform: translateX(calc(100% + var(--vip-duration-tabs-gap)));
}

.vip-article-duration-tabs:has(.vip-article-duration-tab:nth-child(3).vip-article-duration-tab-active)::after {
    transform: translateX(calc((100% + var(--vip-duration-tabs-gap)) * 2));
}

.vip-article-duration-tabs:has(.vip-article-duration-tab:nth-child(4).vip-article-duration-tab-active)::after {
    transform: translateX(calc((100% + var(--vip-duration-tabs-gap)) * 3));
}

.vip-article-duration-tab {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: clamp(58px, 5.3vw, 72px);
    padding: 8px clamp(10px, 1.3vw, 18px);
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(21, 25, 35, 0.76);
    font-family: inherit;
    font-weight: 950;
    line-height: 1.05;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transform: translateZ(0);
    transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.28s ease,
        filter 0.28s ease;
}

[data-theme="dark"] .vip-article-duration-tab {
    color: rgba(248, 250, 255, 0.74);
}

.vip-article-duration-tab::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(
            112deg,
            transparent 0%,
            transparent 28%,
            rgba(255, 255, 255, 0.58) 42%,
            rgba(255, 255, 255, 0.22) 51%,
            transparent 66%,
            transparent 100%
        );
    transform: translateX(-135%) skewX(-18deg);
    opacity: 0;
    filter: blur(0.25px);
}

.vip-article-duration-tab::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 7px;
    height: 2px;
    z-index: 1;
    border-radius: 999px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.92), transparent);
    opacity: 0;
    transform: scaleX(0.34);
    transform-origin: center;
    transition:
        opacity 0.26s ease,
        transform 0.30s cubic-bezier(0.22, 1, 0.36, 1);
}

.vip-article-duration-tab span {
    font-size: clamp(0.84rem, 1vw, 1rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.vip-article-duration-tab strong {
    margin-top: 6px;
    font-size: clamp(0.96rem, 1.12vw, 1.16rem);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.vip-article-duration-tab:hover,
.vip-article-duration-tab:focus-visible {
    transform: translateY(-2px) scale(1.018);
    filter: brightness(1.04) saturate(1.08);
    outline: none;
}

.vip-article-duration-tab:hover::before,
.vip-article-duration-tab:focus-visible::before {
    opacity: 1;
    animation: shopCategoryTabSweep 0.72s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.vip-article-duration-tab:hover::after,
.vip-article-duration-tab:focus-visible::after {
    opacity: 0.72;
    transform: scaleX(1);
}

.vip-article-duration-tab-active {
    color: #FFFFFF !important;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.18);
}

.vip-article-duration-tab-active::before {
    opacity: 0.62;
    transform: translateX(0) skewX(-12deg);
    background:
        radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.52), transparent 26%),
        linear-gradient(112deg, transparent 0 30%, rgba(255, 255, 255, 0.34) 44%, transparent 62% 100%);
    animation: shopCategoryActiveGlass 4.4s ease-in-out infinite;
}

.vip-article-duration-tab-active::after {
    opacity: 0.90;
    transform: scaleX(1);
}

.vip-article-price {
    text-transform: uppercase;
}

@media (max-width: 720px) {
    .vip-article-duration-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-radius: 28px;
    }

    .vip-article-duration-tabs::after {
        display: none;
    }

    .vip-article-duration-tab-active {
        background:
            linear-gradient(
                90deg,
                rgba(var(--vip-article-accent-rgb), 0.94),
                rgba(255, 255, 255, 0.28),
                rgba(var(--vip-article-accent-rgb), 0.76)
            );
        box-shadow:
            0 12px 28px rgba(var(--vip-article-accent-rgb), 0.22),
            inset 0 1px 0 rgba(255, 255, 255, 0.56);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vip-article-duration-tabs::before,
    .vip-article-duration-tabs::after,
    .vip-article-duration-tab-active::before,
    .vip-article-duration-tab:hover::before,
    .vip-article-duration-tab:focus-visible::before {
        animation: none !important;
        transition: none !important;
    }
}

/* -------------------------
   Shop patch 93
   VIP duration gradients: no black cuts, smoother theme-colored transitions.
   ------------------------- */

.vip-article-overlay {
    --vip-article-accent-dark-rgb: 82, 92, 108;
    --vip-article-accent-soft-rgb: 232, 236, 242;
}

.vip-article-tier-0 {
    --vip-article-accent-dark-rgb: 96, 106, 120;
    --vip-article-accent-soft-rgb: 228, 233, 240;
}

.vip-article-tier-1 {
    --vip-article-accent-dark-rgb: 128, 66, 44;
    --vip-article-accent-soft-rgb: 255, 224, 210;
}

.vip-article-tier-2 {
    --vip-article-accent-dark-rgb: 72, 104, 128;
    --vip-article-accent-soft-rgb: 229, 244, 255;
}

.vip-article-tier-3 {
    --vip-article-accent-dark-rgb: 128, 92, 28;
    --vip-article-accent-soft-rgb: 255, 237, 166;
}

.vip-article-tier-4 {
    --vip-article-accent-dark-rgb: 25, 112, 142;
    --vip-article-accent-soft-rgb: 213, 253, 255;
}

.vip-article-tier-5 {
    --vip-article-accent-dark-rgb: 92, 38, 132;
    --vip-article-accent-soft-rgb: 244, 203, 255;
}

.vip-article-duration-tabs::after {
    background:
        linear-gradient(
            116deg,
            rgba(var(--vip-article-accent-dark-rgb), 0.88) 0%,
            rgba(var(--vip-article-accent-rgb), 0.90) 18%,
            rgba(var(--vip-article-accent-soft-rgb), 0.58) 36%,
            rgba(var(--vip-article-accent-rgb), 0.76) 54%,
            rgba(var(--vip-article-accent-soft-rgb), 0.42) 68%,
            rgba(var(--vip-article-accent-rgb), 0.86) 84%,
            rgba(var(--vip-article-accent-dark-rgb), 0.84) 100%
        ) !important;
    background-size: 360% 100% !important;
    filter: saturate(1.12) brightness(1.03);
}

[data-theme="dark"] .vip-article-duration-tabs::after {
    background:
        linear-gradient(
            116deg,
            rgba(var(--vip-article-accent-dark-rgb), 0.96) 0%,
            rgba(var(--vip-article-accent-rgb), 0.74) 22%,
            rgba(var(--vip-article-accent-soft-rgb), 0.18) 42%,
            rgba(var(--vip-article-accent-rgb), 0.58) 62%,
            rgba(var(--vip-article-accent-rgb), 0.72) 80%,
            rgba(var(--vip-article-accent-dark-rgb), 0.94) 100%
        ) !important;
    background-size: 360% 100% !important;
    filter: saturate(1.18) brightness(1.02);
}

.vip-article-duration-tab-active::before {
    background:
        radial-gradient(circle at 22% 18%, rgba(var(--vip-article-accent-soft-rgb), 0.42), transparent 30%),
        linear-gradient(
            112deg,
            transparent 0%,
            rgba(var(--vip-article-accent-soft-rgb), 0.10) 28%,
            rgba(var(--vip-article-accent-soft-rgb), 0.24) 46%,
            rgba(var(--vip-article-accent-rgb), 0.12) 62%,
            transparent 100%
        ) !important;
}

.vip-article-duration-tab:hover::before,
.vip-article-duration-tab:focus-visible::before {
    background:
        linear-gradient(
            112deg,
            transparent 0%,
            transparent 26%,
            rgba(var(--vip-article-accent-soft-rgb), 0.46) 42%,
            rgba(var(--vip-article-accent-rgb), 0.16) 55%,
            transparent 72%,
            transparent 100%
        ) !important;
}

.vip-article-action:hover,
.vip-article-action:focus-visible {
    background:
        linear-gradient(
            116deg,
            rgba(var(--vip-article-accent-dark-rgb), 0.90) 0%,
            rgba(var(--vip-article-accent-rgb), 0.92) 18%,
            rgba(var(--vip-article-accent-soft-rgb), 0.50) 36%,
            rgba(var(--vip-article-accent-rgb), 0.76) 54%,
            rgba(var(--vip-article-accent-soft-rgb), 0.34) 70%,
            rgba(var(--vip-article-accent-rgb), 0.88) 86%,
            rgba(var(--vip-article-accent-dark-rgb), 0.86) 100%
        ) !important;
    background-size: 360% 160% !important;
}

[data-theme="dark"] .vip-article-action:hover,
[data-theme="dark"] .vip-article-action:focus-visible {
    background:
        linear-gradient(
            116deg,
            rgba(var(--vip-article-accent-dark-rgb), 0.96) 0%,
            rgba(var(--vip-article-accent-rgb), 0.76) 22%,
            rgba(var(--vip-article-accent-soft-rgb), 0.16) 42%,
            rgba(var(--vip-article-accent-rgb), 0.58) 62%,
            rgba(var(--vip-article-accent-rgb), 0.74) 80%,
            rgba(var(--vip-article-accent-dark-rgb), 0.94) 100%
        ) !important;
    background-size: 360% 160% !important;
}

@media (max-width: 720px) {
    .vip-article-duration-tab-active {
        background:
            linear-gradient(
                116deg,
                rgba(var(--vip-article-accent-dark-rgb), 0.88) 0%,
                rgba(var(--vip-article-accent-rgb), 0.88) 28%,
                rgba(var(--vip-article-accent-soft-rgb), 0.42) 52%,
                rgba(var(--vip-article-accent-rgb), 0.80) 74%,
                rgba(var(--vip-article-accent-dark-rgb), 0.82) 100%
            ) !important;
        background-size: 320% 100% !important;
    }
}

/* -------------------------
   Shop patch 94
   Smoother moving gradients + forever VIP shine state.
   ------------------------- */

.shop-category-tabs::after,
.vip-article-duration-tabs::after {
    background-size: 560% 140% !important;
    background-position: 28% 50%;
    -webkit-mask-image: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.10) 0%,
        rgba(0, 0, 0, 0.72) 7%,
        #000 17%,
        #000 83%,
        rgba(0, 0, 0, 0.72) 93%,
        rgba(0, 0, 0, 0.10) 100%
    );
    mask-image: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.10) 0%,
        rgba(0, 0, 0, 0.72) 7%,
        #000 17%,
        #000 83%,
        rgba(0, 0, 0, 0.72) 93%,
        rgba(0, 0, 0, 0.10) 100%
    );
}

.shop-category-tabs::after {
    background:
        radial-gradient(ellipse 70% 120% at 18% 50%, rgba(255, 255, 255, 0.36), transparent 56%),
        linear-gradient(
            96deg,
            rgba(255, 197, 197, 0.92) 0%,
            rgba(255, 207, 214, 0.90) 16%,
            rgba(189, 213, 255, 0.90) 38%,
            rgba(230, 238, 255, 0.74) 52%,
            rgba(189, 213, 255, 0.88) 66%,
            rgba(255, 207, 214, 0.90) 84%,
            rgba(255, 197, 197, 0.92) 100%
        ) !important;
}

[data-theme="dark"] .shop-category-tabs::after {
    background:
        radial-gradient(ellipse 70% 120% at 18% 50%, rgba(255, 255, 255, 0.18), transparent 56%),
        linear-gradient(
            96deg,
            rgba(198, 107, 107, 0.92) 0%,
            rgba(174, 102, 122, 0.90) 18%,
            rgba(95, 130, 200, 0.90) 40%,
            rgba(119, 148, 213, 0.62) 54%,
            rgba(95, 130, 200, 0.88) 68%,
            rgba(174, 102, 122, 0.90) 84%,
            rgba(198, 107, 107, 0.92) 100%
        ) !important;
}

.vip-article-duration-tabs::after {
    background:
        radial-gradient(ellipse 72% 120% at 18% 50%, rgba(var(--vip-article-accent-soft-rgb), 0.34), transparent 58%),
        linear-gradient(
            96deg,
            rgba(var(--vip-article-accent-dark-rgb), 0.78) 0%,
            rgba(var(--vip-article-accent-rgb), 0.88) 16%,
            rgba(var(--vip-article-accent-soft-rgb), 0.54) 34%,
            rgba(var(--vip-article-accent-rgb), 0.78) 52%,
            rgba(var(--vip-article-accent-soft-rgb), 0.42) 68%,
            rgba(var(--vip-article-accent-rgb), 0.86) 84%,
            rgba(var(--vip-article-accent-dark-rgb), 0.76) 100%
        ) !important;
}

[data-theme="dark"] .vip-article-duration-tabs::after {
    background:
        radial-gradient(ellipse 72% 120% at 18% 50%, rgba(var(--vip-article-accent-soft-rgb), 0.12), transparent 58%),
        linear-gradient(
            96deg,
            rgba(var(--vip-article-accent-dark-rgb), 0.90) 0%,
            rgba(var(--vip-article-accent-rgb), 0.70) 18%,
            rgba(var(--vip-article-accent-soft-rgb), 0.16) 36%,
            rgba(var(--vip-article-accent-rgb), 0.58) 54%,
            rgba(var(--vip-article-accent-rgb), 0.70) 72%,
            rgba(var(--vip-article-accent-rgb), 0.80) 86%,
            rgba(var(--vip-article-accent-dark-rgb), 0.88) 100%
        ) !important;
}

@keyframes shopCategoryActiveGradient {
    0%, 100% {
        background-position: 28% 50%;
    }

    50% {
        background-position: 72% 50%;
    }
}

.vip-article-overlay[data-vip-duration="forever"] {
    --vip-forever-red-dark-rgb: 118, 24, 32;
    --vip-forever-red-rgb: 222, 54, 76;
    --vip-forever-red-soft-rgb: 255, 168, 178;
}

.vip-article-overlay[data-vip-duration="forever"] .vip-article-duration-tabs::after {
    background:
        radial-gradient(ellipse 82% 150% at 20% 48%, rgba(var(--vip-article-accent-soft-rgb), 0.28), transparent 58%),
        radial-gradient(ellipse 72% 140% at 78% 52%, rgba(var(--vip-forever-red-soft-rgb), 0.34), transparent 62%),
        linear-gradient(
            96deg,
            rgba(var(--vip-forever-red-dark-rgb), 0.84) 0%,
            rgba(var(--vip-forever-red-rgb), 0.94) 16%,
            rgba(var(--vip-article-accent-rgb), 0.78) 34%,
            rgba(var(--vip-forever-red-soft-rgb), 0.50) 52%,
            rgba(var(--vip-article-accent-rgb), 0.80) 68%,
            rgba(var(--vip-forever-red-rgb), 0.92) 84%,
            rgba(var(--vip-forever-red-dark-rgb), 0.82) 100%
        ) !important;
    background-size: 560% 140% !important;
    box-shadow:
        0 16px 38px rgba(var(--vip-forever-red-rgb), 0.24),
        0 0 30px rgba(var(--vip-article-accent-rgb), 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.64),
        inset 0 -1px 0 rgba(var(--vip-forever-red-dark-rgb), 0.18) !important;
}

[data-theme="dark"] .vip-article-overlay[data-vip-duration="forever"] .vip-article-duration-tabs::after {
    background:
        radial-gradient(ellipse 82% 150% at 20% 48%, rgba(var(--vip-article-accent-soft-rgb), 0.12), transparent 58%),
        radial-gradient(ellipse 72% 140% at 78% 52%, rgba(var(--vip-forever-red-soft-rgb), 0.16), transparent 62%),
        linear-gradient(
            96deg,
            rgba(var(--vip-forever-red-dark-rgb), 0.94) 0%,
            rgba(var(--vip-forever-red-rgb), 0.78) 18%,
            rgba(var(--vip-article-accent-rgb), 0.62) 36%,
            rgba(var(--vip-forever-red-soft-rgb), 0.18) 54%,
            rgba(var(--vip-article-accent-rgb), 0.58) 70%,
            rgba(var(--vip-forever-red-rgb), 0.76) 86%,
            rgba(var(--vip-forever-red-dark-rgb), 0.92) 100%
        ) !important;
    background-size: 560% 140% !important;
    box-shadow:
        0 18px 44px rgba(var(--vip-forever-red-rgb), 0.20),
        0 0 32px rgba(var(--vip-article-accent-rgb), 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        inset 0 -1px 0 rgba(0, 0, 0, 0.22) !important;
}

.vip-article-overlay[data-vip-duration="forever"] .vip-article-action {
    border-color: rgba(var(--vip-forever-red-rgb), 0.42) !important;
    box-shadow:
        0 18px 38px rgba(var(--vip-forever-red-rgb), 0.12),
        0 0 24px rgba(var(--vip-article-accent-rgb), 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}

.vip-article-overlay[data-vip-duration="forever"] .vip-article-action:hover,
.vip-article-overlay[data-vip-duration="forever"] .vip-article-action:focus-visible {
    background:
        linear-gradient(
            96deg,
            rgba(var(--vip-forever-red-dark-rgb), 0.90) 0%,
            rgba(var(--vip-forever-red-rgb), 0.94) 16%,
            rgba(var(--vip-article-accent-rgb), 0.82) 34%,
            rgba(var(--vip-forever-red-soft-rgb), 0.48) 52%,
            rgba(var(--vip-article-accent-rgb), 0.80) 68%,
            rgba(var(--vip-forever-red-rgb), 0.92) 84%,
            rgba(var(--vip-forever-red-dark-rgb), 0.88) 100%
        ) !important;
    background-size: 560% 160% !important;
}

.vip-article-modal {
    position: relative !important;
    isolation: isolate !important;
}

.vip-article-header,
.vip-article-body {
    position: relative !important;
    z-index: 1 !important;
}

.vip-article-modal::before,
.vip-article-modal::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
}

.vip-article-overlay[data-vip-duration="forever"] .vip-article-modal::before {
    background:
        radial-gradient(circle at 16% 22%, rgba(var(--vip-article-accent-soft-rgb), 0.24) 0 1.3%, transparent 6%),
        radial-gradient(circle at 78% 18%, rgba(var(--vip-article-accent-rgb), 0.20) 0 1.1%, transparent 5.4%),
        radial-gradient(circle at 64% 68%, rgba(var(--vip-forever-red-soft-rgb), 0.22) 0 1.0%, transparent 5.2%),
        radial-gradient(circle at 24% 78%, rgba(var(--vip-article-accent-rgb), 0.16) 0 1.1%, transparent 5.8%),
        linear-gradient(116deg, transparent 0 40%, rgba(var(--vip-article-accent-soft-rgb), 0.16) 48%, transparent 58% 100%);
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 220% 220%;
    filter: blur(0.25px) saturate(1.18);
    animation: vipArticleForeverSparkle 4.8s ease-in-out infinite;
}

.vip-article-overlay[data-vip-duration="forever"] .vip-article-modal::after {
    background:
        radial-gradient(ellipse 60% 26% at 50% 0%, rgba(var(--vip-article-accent-rgb), 0.16), transparent 72%),
        radial-gradient(ellipse 44% 22% at 104% 56%, rgba(var(--vip-forever-red-rgb), 0.14), transparent 72%),
        radial-gradient(ellipse 38% 20% at -6% 72%, rgba(var(--vip-article-accent-soft-rgb), 0.16), transparent 72%);
    filter: blur(10px) saturate(1.16);
    animation: vipArticleForeverGlow 6.2s ease-in-out infinite;
}

@keyframes vipArticleForeverSparkle {
    0%, 100% {
        opacity: 0.00;
        background-position: 0 0, 0 0, 0 0, 0 0, -120% 50%;
        transform: translate3d(-1.5%, 0, 0);
    }

    18% {
        opacity: 0.42;
    }

    44% {
        opacity: 0.18;
        background-position: 0 0, 0 0, 0 0, 0 0, 36% 50%;
        transform: translate3d(1.2%, -0.6%, 0);
    }

    68% {
        opacity: 0.50;
    }

    100% {
        background-position: 0 0, 0 0, 0 0, 0 0, 180% 50%;
    }
}

@keyframes vipArticleForeverGlow {
    0%, 100% {
        opacity: 0.00;
        transform: scale(1);
    }

    35% {
        opacity: 0.70;
        transform: scale(1.012);
    }

    72% {
        opacity: 0.30;
        transform: scale(1.006);
    }
}

@media (max-width: 720px) {
    .vip-article-overlay[data-vip-duration="forever"] .vip-article-duration-tab-active {
        background:
            linear-gradient(
                96deg,
                rgba(var(--vip-forever-red-dark-rgb), 0.88) 0%,
                rgba(var(--vip-forever-red-rgb), 0.90) 20%,
                rgba(var(--vip-article-accent-rgb), 0.78) 44%,
                rgba(var(--vip-forever-red-soft-rgb), 0.40) 62%,
                rgba(var(--vip-forever-red-rgb), 0.86) 82%,
                rgba(var(--vip-forever-red-dark-rgb), 0.84) 100%
            ) !important;
        background-size: 520% 100% !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vip-article-overlay[data-vip-duration="forever"] .vip-article-modal::before,
    .vip-article-overlay[data-vip-duration="forever"] .vip-article-modal::after {
        animation: none !important;
        opacity: 0.18 !important;
    }
}

/* -------------------------
   Shop patch 95
   Rebuilt soft dissolving gradients + lighter forever tint.
   ------------------------- */

.shop-category-tabs::after,
.vip-article-duration-tabs::after {
    background-position: -170% 50%, 50% 50%, 50% 50% !important;
    background-repeat: no-repeat !important;
    animation: shopSoftGradientDrift 6.4s ease-in-out infinite !important;
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.16) 2.5%,
        rgba(0, 0, 0, 0.78) 8%,
        #000 17%,
        #000 83%,
        rgba(0, 0, 0, 0.78) 92%,
        rgba(0, 0, 0, 0.16) 97.5%,
        transparent 100%
    ) !important;
    mask-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.16) 2.5%,
        rgba(0, 0, 0, 0.78) 8%,
        #000 17%,
        #000 83%,
        rgba(0, 0, 0, 0.78) 92%,
        rgba(0, 0, 0, 0.16) 97.5%,
        transparent 100%
    ) !important;
}

.shop-category-tabs::after {
    background:
        linear-gradient(
            104deg,
            transparent 0%,
            transparent 21%,
            rgba(255, 255, 255, 0.08) 29%,
            rgba(255, 255, 255, 0.56) 42%,
            rgba(230, 238, 255, 0.42) 50%,
            rgba(255, 255, 255, 0.38) 58%,
            rgba(255, 255, 255, 0.06) 69%,
            transparent 79%,
            transparent 100%
        ),
        radial-gradient(ellipse 92% 125% at 18% 50%, rgba(255, 255, 255, 0.28), transparent 62%),
        linear-gradient(
            132deg,
            rgba(255, 197, 197, 0.94) 0%,
            rgba(253, 214, 222, 0.94) 34%,
            rgba(189, 213, 255, 0.92) 70%,
            rgba(255, 197, 197, 0.94) 100%
        ) !important;
    background-size: 285% 180%, 100% 100%, 100% 100% !important;
    box-shadow:
        0 14px 34px rgba(90, 120, 180, 0.20),
        0 0 24px rgba(189, 213, 255, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.60),
        inset 0 -1px 0 rgba(92, 112, 160, 0.10) !important;
}

[data-theme="dark"] .shop-category-tabs::after {
    background:
        linear-gradient(
            104deg,
            transparent 0%,
            transparent 21%,
            rgba(255, 255, 255, 0.05) 29%,
            rgba(255, 255, 255, 0.25) 42%,
            rgba(160, 184, 238, 0.24) 50%,
            rgba(255, 255, 255, 0.17) 58%,
            rgba(255, 255, 255, 0.04) 69%,
            transparent 79%,
            transparent 100%
        ),
        radial-gradient(ellipse 92% 125% at 18% 50%, rgba(255, 255, 255, 0.12), transparent 62%),
        linear-gradient(
            132deg,
            rgba(198, 107, 107, 0.90) 0%,
            rgba(174, 102, 122, 0.88) 32%,
            rgba(95, 130, 200, 0.88) 70%,
            rgba(198, 107, 107, 0.90) 100%
        ) !important;
    background-size: 285% 180%, 100% 100%, 100% 100% !important;
    box-shadow:
        0 14px 34px rgba(15, 23, 42, 0.30),
        0 0 28px rgba(95, 130, 200, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
}

.vip-article-duration-tabs::after {
    background:
        linear-gradient(
            104deg,
            transparent 0%,
            transparent 21%,
            rgba(255, 255, 255, 0.08) 29%,
            rgba(var(--vip-article-accent-soft-rgb), 0.44) 42%,
            rgba(255, 255, 255, 0.34) 50%,
            rgba(var(--vip-article-accent-soft-rgb), 0.28) 58%,
            rgba(255, 255, 255, 0.05) 69%,
            transparent 79%,
            transparent 100%
        ),
        radial-gradient(ellipse 90% 130% at 18% 50%, rgba(var(--vip-article-accent-soft-rgb), 0.24), transparent 64%),
        linear-gradient(
            132deg,
            rgba(var(--vip-article-accent-dark-rgb), 0.74) 0%,
            rgba(var(--vip-article-accent-rgb), 0.90) 34%,
            rgba(var(--vip-article-accent-soft-rgb), 0.50) 56%,
            rgba(var(--vip-article-accent-rgb), 0.88) 76%,
            rgba(var(--vip-article-accent-dark-rgb), 0.72) 100%
        ) !important;
    background-size: 285% 180%, 100% 100%, 100% 100% !important;
    box-shadow:
        0 14px 34px rgba(var(--vip-article-accent-rgb), 0.22),
        0 0 24px rgba(var(--vip-article-accent-rgb), 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.62),
        inset 0 -1px 0 rgba(var(--vip-article-accent-dark-rgb), 0.14) !important;
}

[data-theme="dark"] .vip-article-duration-tabs::after {
    background:
        linear-gradient(
            104deg,
            transparent 0%,
            transparent 21%,
            rgba(255, 255, 255, 0.04) 29%,
            rgba(var(--vip-article-accent-soft-rgb), 0.18) 42%,
            rgba(255, 255, 255, 0.14) 50%,
            rgba(var(--vip-article-accent-rgb), 0.18) 58%,
            rgba(255, 255, 255, 0.03) 69%,
            transparent 79%,
            transparent 100%
        ),
        radial-gradient(ellipse 90% 130% at 18% 50%, rgba(var(--vip-article-accent-soft-rgb), 0.10), transparent 64%),
        linear-gradient(
            132deg,
            rgba(var(--vip-article-accent-dark-rgb), 0.88) 0%,
            rgba(var(--vip-article-accent-rgb), 0.66) 35%,
            rgba(var(--vip-article-accent-soft-rgb), 0.15) 55%,
            rgba(var(--vip-article-accent-rgb), 0.68) 76%,
            rgba(var(--vip-article-accent-dark-rgb), 0.86) 100%
        ) !important;
    background-size: 285% 180%, 100% 100%, 100% 100% !important;
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.26),
        0 0 28px rgba(var(--vip-article-accent-rgb), 0.23),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.20) !important;
}

.vip-article-action:hover,
.vip-article-action:focus-visible {
    background:
        linear-gradient(
            104deg,
            transparent 0%,
            transparent 20%,
            rgba(255, 255, 255, 0.10) 30%,
            rgba(var(--vip-article-accent-soft-rgb), 0.44) 43%,
            rgba(255, 255, 255, 0.34) 51%,
            rgba(var(--vip-article-accent-soft-rgb), 0.24) 60%,
            rgba(255, 255, 255, 0.06) 70%,
            transparent 80%,
            transparent 100%
        ),
        linear-gradient(
            132deg,
            rgba(var(--vip-article-accent-dark-rgb), 0.74) 0%,
            rgba(var(--vip-article-accent-rgb), 0.90) 36%,
            rgba(var(--vip-article-accent-soft-rgb), 0.44) 56%,
            rgba(var(--vip-article-accent-rgb), 0.86) 76%,
            rgba(var(--vip-article-accent-dark-rgb), 0.72) 100%
        ) !important;
    background-size: 285% 180%, 100% 100% !important;
    background-position: -170% 50%, 50% 50% !important;
    background-repeat: no-repeat !important;
    animation: shopSoftActionGradientDrift 4.9s ease-in-out infinite !important;
}

[data-theme="dark"] .vip-article-action:hover,
[data-theme="dark"] .vip-article-action:focus-visible {
    background:
        linear-gradient(
            104deg,
            transparent 0%,
            transparent 20%,
            rgba(255, 255, 255, 0.04) 30%,
            rgba(var(--vip-article-accent-soft-rgb), 0.16) 43%,
            rgba(255, 255, 255, 0.14) 51%,
            rgba(var(--vip-article-accent-rgb), 0.16) 60%,
            rgba(255, 255, 255, 0.03) 70%,
            transparent 80%,
            transparent 100%
        ),
        linear-gradient(
            132deg,
            rgba(var(--vip-article-accent-dark-rgb), 0.88) 0%,
            rgba(var(--vip-article-accent-rgb), 0.66) 36%,
            rgba(var(--vip-article-accent-soft-rgb), 0.14) 56%,
            rgba(var(--vip-article-accent-rgb), 0.68) 76%,
            rgba(var(--vip-article-accent-dark-rgb), 0.86) 100%
        ) !important;
    background-size: 285% 180%, 100% 100% !important;
    background-position: -170% 50%, 50% 50% !important;
}

.vip-article-overlay[data-vip-duration="forever"] {
    --vip-forever-red-dark-rgb: 132, 66, 74;
    --vip-forever-red-rgb: 220, 104, 118;
    --vip-forever-red-soft-rgb: 255, 205, 210;
}

.vip-article-overlay[data-vip-duration="forever"] .vip-article-duration-tabs::after {
    background:
        linear-gradient(
            104deg,
            transparent 0%,
            transparent 21%,
            rgba(255, 255, 255, 0.08) 29%,
            rgba(var(--vip-article-accent-soft-rgb), 0.42) 42%,
            rgba(var(--vip-forever-red-soft-rgb), 0.18) 51%,
            rgba(var(--vip-article-accent-soft-rgb), 0.24) 60%,
            rgba(255, 255, 255, 0.04) 70%,
            transparent 80%,
            transparent 100%
        ),
        radial-gradient(ellipse 80% 135% at 76% 52%, rgba(var(--vip-forever-red-soft-rgb), 0.16), transparent 70%),
        radial-gradient(ellipse 92% 130% at 18% 50%, rgba(var(--vip-article-accent-soft-rgb), 0.22), transparent 64%),
        linear-gradient(
            132deg,
            rgba(var(--vip-article-accent-dark-rgb), 0.72) 0%,
            rgba(var(--vip-article-accent-rgb), 0.88) 32%,
            rgba(var(--vip-forever-red-rgb), 0.16) 52%,
            rgba(var(--vip-article-accent-rgb), 0.86) 74%,
            rgba(var(--vip-article-accent-dark-rgb), 0.70) 100%
        ) !important;
    background-size: 285% 180%, 100% 100%, 100% 100%, 100% 100% !important;
    background-position: -170% 50%, 50% 50%, 50% 50%, 50% 50% !important;
    box-shadow:
        0 16px 38px rgba(var(--vip-forever-red-rgb), 0.08),
        0 0 30px rgba(var(--vip-article-accent-rgb), 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.62),
        inset 0 -1px 0 rgba(var(--vip-article-accent-dark-rgb), 0.14) !important;
}

[data-theme="dark"] .vip-article-overlay[data-vip-duration="forever"] .vip-article-duration-tabs::after {
    background:
        linear-gradient(
            104deg,
            transparent 0%,
            transparent 21%,
            rgba(255, 255, 255, 0.04) 29%,
            rgba(var(--vip-article-accent-soft-rgb), 0.16) 42%,
            rgba(var(--vip-forever-red-soft-rgb), 0.08) 51%,
            rgba(var(--vip-article-accent-rgb), 0.14) 60%,
            rgba(255, 255, 255, 0.03) 70%,
            transparent 80%,
            transparent 100%
        ),
        radial-gradient(ellipse 80% 135% at 76% 52%, rgba(var(--vip-forever-red-soft-rgb), 0.08), transparent 70%),
        radial-gradient(ellipse 92% 130% at 18% 50%, rgba(var(--vip-article-accent-soft-rgb), 0.09), transparent 64%),
        linear-gradient(
            132deg,
            rgba(var(--vip-article-accent-dark-rgb), 0.86) 0%,
            rgba(var(--vip-article-accent-rgb), 0.64) 34%,
            rgba(var(--vip-forever-red-rgb), 0.10) 54%,
            rgba(var(--vip-article-accent-rgb), 0.64) 74%,
            rgba(var(--vip-article-accent-dark-rgb), 0.84) 100%
        ) !important;
    background-size: 285% 180%, 100% 100%, 100% 100%, 100% 100% !important;
    background-position: -170% 50%, 50% 50%, 50% 50%, 50% 50% !important;
    box-shadow:
        0 18px 44px rgba(var(--vip-forever-red-rgb), 0.07),
        0 0 32px rgba(var(--vip-article-accent-rgb), 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.20) !important;
}

.vip-article-overlay[data-vip-duration="forever"] .vip-article-action {
    border-color: rgba(var(--vip-forever-red-rgb), 0.18) !important;
    box-shadow:
        0 18px 38px rgba(var(--vip-forever-red-rgb), 0.045),
        0 0 24px rgba(var(--vip-article-accent-rgb), 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}

.vip-article-overlay[data-vip-duration="forever"] .vip-article-action:hover,
.vip-article-overlay[data-vip-duration="forever"] .vip-article-action:focus-visible {
    background:
        linear-gradient(
            104deg,
            transparent 0%,
            transparent 20%,
            rgba(255, 255, 255, 0.08) 30%,
            rgba(var(--vip-article-accent-soft-rgb), 0.40) 43%,
            rgba(var(--vip-forever-red-soft-rgb), 0.16) 52%,
            rgba(var(--vip-article-accent-soft-rgb), 0.22) 61%,
            rgba(255, 255, 255, 0.04) 70%,
            transparent 80%,
            transparent 100%
        ),
        linear-gradient(
            132deg,
            rgba(var(--vip-article-accent-dark-rgb), 0.72) 0%,
            rgba(var(--vip-article-accent-rgb), 0.88) 34%,
            rgba(var(--vip-forever-red-rgb), 0.14) 54%,
            rgba(var(--vip-article-accent-rgb), 0.86) 74%,
            rgba(var(--vip-article-accent-dark-rgb), 0.70) 100%
        ) !important;
    background-size: 285% 180%, 100% 100% !important;
    background-position: -170% 50%, 50% 50% !important;
}

.vip-article-overlay[data-vip-duration="forever"] .vip-article-modal::before {
    background:
        radial-gradient(circle at 16% 22%, rgba(var(--vip-article-accent-soft-rgb), 0.22) 0 1.2%, transparent 6%),
        radial-gradient(circle at 78% 18%, rgba(var(--vip-article-accent-rgb), 0.18) 0 1.0%, transparent 5.4%),
        radial-gradient(circle at 64% 68%, rgba(var(--vip-forever-red-soft-rgb), 0.08) 0 0.9%, transparent 5.2%),
        radial-gradient(circle at 24% 78%, rgba(var(--vip-article-accent-rgb), 0.15) 0 1.0%, transparent 5.8%),
        linear-gradient(116deg, transparent 0 42%, rgba(var(--vip-article-accent-soft-rgb), 0.13) 49%, transparent 59% 100%) !important;
}

.vip-article-overlay[data-vip-duration="forever"] .vip-article-modal::after {
    background:
        radial-gradient(ellipse 60% 26% at 50% 0%, rgba(var(--vip-article-accent-rgb), 0.14), transparent 72%),
        radial-gradient(ellipse 44% 22% at 104% 56%, rgba(var(--vip-forever-red-rgb), 0.045), transparent 72%),
        radial-gradient(ellipse 38% 20% at -6% 72%, rgba(var(--vip-article-accent-soft-rgb), 0.14), transparent 72%) !important;
}

@media (max-width: 720px) {
    .vip-article-duration-tab-active,
    .vip-article-overlay[data-vip-duration="forever"] .vip-article-duration-tab-active {
        background:
            linear-gradient(
                104deg,
                transparent 0%,
                transparent 18%,
                rgba(255, 255, 255, 0.26) 34%,
                rgba(var(--vip-article-accent-rgb), 0.82) 48%,
                rgba(var(--vip-article-accent-soft-rgb), 0.30) 62%,
                rgba(var(--vip-article-accent-rgb), 0.82) 78%,
                transparent 100%
            ),
            linear-gradient(132deg, rgba(var(--vip-article-accent-dark-rgb), 0.78), rgba(var(--vip-article-accent-rgb), 0.88)) !important;
        background-size: 260% 160%, 100% 100% !important;
        background-position: -150% 50%, 50% 50% !important;
        animation: shopSoftActionGradientDrift 5.2s ease-in-out infinite !important;
    }
}

@keyframes shopSoftGradientDrift {
    0%, 100% {
        background-position: -170% 50%, 50% 50%, 50% 50%, 50% 50%;
    }

    50% {
        background-position: 230% 50%, 50% 50%, 50% 50%, 50% 50%;
    }
}

@keyframes shopSoftActionGradientDrift {
    0%, 100% {
        background-position: -170% 50%, 50% 50%;
    }

    50% {
        background-position: 230% 50%, 50% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shop-category-tabs::after,
    .vip-article-duration-tabs::after,
    .vip-article-action:hover,
    .vip-article-action:focus-visible,
    .vip-article-duration-tab-active {
        animation: none !important;
        background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50% !important;
    }
}

/* -------------------------
   Shop patch 96
   Restore patch 92 category gradients, remove visible black, soften moving white sweep edges.
   ------------------------- */

.shop-category-tabs::after,
.vip-article-duration-tabs::after {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background-repeat: repeat !important;
    animation: shopCategoryActiveGradient 5.6s ease-in-out infinite !important;
}

.shop-category-tabs::after {
    background: linear-gradient(
        90deg,
        #FFC5C5 0%,
        #F6C9D3 20%,
        #EBD6E8 38%,
        #D8E2FF 56%,
        #BDD5FF 74%,
        #FFC5C5 100%
    ) !important;
    background-size: 220% 100% !important;
    background-position: 0 50% !important;
    box-shadow:
        0 14px 34px rgba(90, 120, 180, 0.24),
        0 0 24px rgba(189, 213, 255, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.62),
        inset 0 -1px 0 rgba(92, 112, 160, 0.12) !important;
}

[data-theme="dark"] .shop-category-tabs::after {
    background: linear-gradient(
        90deg,
        #C66B6B 0%,
        #AD6679 24%,
        #836FA5 48%,
        #5F82C8 74%,
        #C66B6B 100%
    ) !important;
    background-size: 220% 100% !important;
    background-position: 0 50% !important;
    box-shadow:
        0 14px 34px rgba(65, 78, 118, 0.28),
        0 0 28px rgba(95, 130, 200, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        inset 0 -1px 0 rgba(70, 83, 128, 0.22) !important;
}

.vip-article-duration-tabs::after,
.vip-article-overlay[data-vip-duration="forever"] .vip-article-duration-tabs::after {
    background: linear-gradient(
        90deg,
        rgba(var(--vip-article-accent-dark-rgb), 0.88) 0%,
        rgba(var(--vip-article-accent-rgb), 0.96) 22%,
        rgba(var(--vip-article-accent-soft-rgb), 0.72) 42%,
        rgba(255, 255, 255, 0.42) 50%,
        rgba(var(--vip-article-accent-soft-rgb), 0.54) 60%,
        rgba(var(--vip-article-accent-rgb), 0.82) 78%,
        rgba(var(--vip-article-accent-dark-rgb), 0.84) 100%
    ) !important;
    background-size: 240% 100% !important;
    background-position: 0 50% !important;
    box-shadow:
        0 14px 34px rgba(var(--vip-article-accent-rgb), 0.26),
        0 0 24px rgba(var(--vip-article-accent-rgb), 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.68),
        inset 0 -1px 0 rgba(var(--vip-article-accent-dark-rgb), 0.16) !important;
}

[data-theme="dark"] .vip-article-duration-tabs::after,
[data-theme="dark"] .vip-article-overlay[data-vip-duration="forever"] .vip-article-duration-tabs::after {
    background: linear-gradient(
        90deg,
        rgba(var(--vip-article-accent-dark-rgb), 0.94) 0%,
        rgba(var(--vip-article-accent-rgb), 0.78) 24%,
        rgba(var(--vip-article-accent-soft-rgb), 0.26) 42%,
        rgba(255, 255, 255, 0.16) 50%,
        rgba(var(--vip-article-accent-rgb), 0.50) 62%,
        rgba(var(--vip-article-accent-rgb), 0.70) 80%,
        rgba(var(--vip-article-accent-dark-rgb), 0.92) 100%
    ) !important;
    background-size: 240% 100% !important;
    background-position: 0 50% !important;
    box-shadow:
        0 14px 34px rgba(var(--vip-article-accent-dark-rgb), 0.30),
        0 0 28px rgba(var(--vip-article-accent-rgb), 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -1px 0 rgba(var(--vip-article-accent-dark-rgb), 0.24) !important;
}

.shop-category-tab::before,
.vip-article-duration-tab::before {
    inset: -8px -26px !important;
    border-radius: inherit;
    background: linear-gradient(
        112deg,
        rgba(255, 255, 255, 0.00) 0%,
        rgba(255, 255, 255, 0.00) 12%,
        rgba(255, 255, 255, 0.06) 24%,
        rgba(255, 255, 255, 0.22) 36%,
        rgba(255, 255, 255, 0.54) 47%,
        rgba(255, 255, 255, 0.32) 56%,
        rgba(255, 255, 255, 0.12) 68%,
        rgba(255, 255, 255, 0.03) 82%,
        rgba(255, 255, 255, 0.00) 100%
    ) !important;
    transform: translateX(-145%) skewX(-18deg);
    filter: blur(2.8px) saturate(1.08) !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}

.shop-category-tab:hover::before,
.shop-category-tab:focus-visible::before,
.vip-article-duration-tab:hover::before,
.vip-article-duration-tab:focus-visible::before {
    animation: shopCategoryTabSweep 0.78s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}

.shop-category-tab-active::before,
.vip-article-duration-tab-active::before {
    inset: -8px -26px !important;
    opacity: 0.58 !important;
    background:
        radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.46), transparent 30%),
        linear-gradient(
            112deg,
            rgba(255, 255, 255, 0.00) 0%,
            rgba(255, 255, 255, 0.04) 20%,
            rgba(255, 255, 255, 0.18) 34%,
            rgba(255, 255, 255, 0.32) 46%,
            rgba(255, 255, 255, 0.16) 62%,
            rgba(255, 255, 255, 0.04) 78%,
            rgba(255, 255, 255, 0.00) 100%
        ) !important;
    filter: blur(2px) !important;
    animation: shopCategoryActiveGlass 4.4s ease-in-out infinite !important;
}

.vip-article-duration-tab-active {
    text-shadow: 0 1px 12px rgba(var(--vip-article-accent-dark-rgb), 0.28) !important;
}

.vip-article-action:hover,
.vip-article-action:focus-visible,
.vip-article-overlay[data-vip-duration="forever"] .vip-article-action:hover,
.vip-article-overlay[data-vip-duration="forever"] .vip-article-action:focus-visible {
    background:
        linear-gradient(
            112deg,
            rgba(255, 255, 255, 0.00) 0%,
            rgba(255, 255, 255, 0.04) 18%,
            rgba(255, 255, 255, 0.20) 36%,
            rgba(255, 255, 255, 0.42) 48%,
            rgba(255, 255, 255, 0.16) 62%,
            rgba(255, 255, 255, 0.04) 80%,
            rgba(255, 255, 255, 0.00) 100%
        ),
        linear-gradient(
            90deg,
            rgba(var(--vip-article-accent-dark-rgb), 0.86) 0%,
            rgba(var(--vip-article-accent-rgb), 0.94) 28%,
            rgba(var(--vip-article-accent-soft-rgb), 0.50) 52%,
            rgba(var(--vip-article-accent-rgb), 0.86) 76%,
            rgba(var(--vip-article-accent-dark-rgb), 0.82) 100%
        ) !important;
    background-size: 260% 160%, 220% 100% !important;
    background-position: -145% 50%, 0 50% !important;
    background-repeat: no-repeat, repeat !important;
    animation: shopCategoryActiveGradient 5.6s ease-in-out infinite !important;
    box-shadow:
        0 18px 38px rgba(var(--vip-article-accent-rgb), 0.30),
        0 0 24px rgba(var(--vip-article-accent-rgb), 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.62),
        inset 0 -1px 0 rgba(var(--vip-article-accent-dark-rgb), 0.16) !important;
}

[data-theme="dark"] .vip-article-action:hover,
[data-theme="dark"] .vip-article-action:focus-visible,
[data-theme="dark"] .vip-article-overlay[data-vip-duration="forever"] .vip-article-action:hover,
[data-theme="dark"] .vip-article-overlay[data-vip-duration="forever"] .vip-article-action:focus-visible {
    background:
        linear-gradient(
            112deg,
            rgba(255, 255, 255, 0.00) 0%,
            rgba(255, 255, 255, 0.03) 20%,
            rgba(255, 255, 255, 0.12) 38%,
            rgba(255, 255, 255, 0.22) 50%,
            rgba(255, 255, 255, 0.10) 64%,
            rgba(255, 255, 255, 0.03) 80%,
            rgba(255, 255, 255, 0.00) 100%
        ),
        linear-gradient(
            90deg,
            rgba(var(--vip-article-accent-dark-rgb), 0.94) 0%,
            rgba(var(--vip-article-accent-rgb), 0.74) 30%,
            rgba(var(--vip-article-accent-soft-rgb), 0.18) 52%,
            rgba(var(--vip-article-accent-rgb), 0.66) 76%,
            rgba(var(--vip-article-accent-dark-rgb), 0.92) 100%
        ) !important;
    box-shadow:
        0 18px 38px rgba(var(--vip-article-accent-dark-rgb), 0.28),
        0 0 28px rgba(var(--vip-article-accent-rgb), 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        inset 0 -1px 0 rgba(var(--vip-article-accent-dark-rgb), 0.24) !important;
}

@media (max-width: 720px) {
    .vip-article-duration-tab-active,
    .vip-article-overlay[data-vip-duration="forever"] .vip-article-duration-tab-active {
        background:
            linear-gradient(
                90deg,
                rgba(var(--vip-article-accent-dark-rgb), 0.86) 0%,
                rgba(var(--vip-article-accent-rgb), 0.94) 32%,
                rgba(var(--vip-article-accent-soft-rgb), 0.44) 56%,
                rgba(var(--vip-article-accent-rgb), 0.78) 78%,
                rgba(var(--vip-article-accent-dark-rgb), 0.82) 100%
            ) !important;
        box-shadow:
            0 12px 28px rgba(var(--vip-article-accent-rgb), 0.22),
            inset 0 1px 0 rgba(255, 255, 255, 0.56),
            inset 0 -1px 0 rgba(var(--vip-article-accent-dark-rgb), 0.16) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shop-category-tabs::after,
    .vip-article-duration-tabs::after,
    .vip-article-action:hover,
    .vip-article-action:focus-visible,
    .vip-article-duration-tab-active {
        animation: none !important;
    }
}

/* -------------------------
   Shop patch 97
   Unified purchase button glow across VIP duration categories.
   ------------------------- */

.vip-article-action,
.vip-article-overlay[data-vip-duration="forever"] .vip-article-action {
    border-color: rgba(var(--vip-article-accent-rgb), 0.34) !important;
    box-shadow:
        0 14px 30px rgba(var(--vip-article-accent-rgb), 0.18),
        0 0 18px rgba(var(--vip-article-accent-rgb), 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.46),
        inset 0 -1px 0 rgba(var(--vip-article-accent-dark-rgb), 0.14) !important;
}

.vip-article-action:hover,
.vip-article-action:focus-visible,
.vip-article-overlay[data-vip-duration="forever"] .vip-article-action:hover,
.vip-article-overlay[data-vip-duration="forever"] .vip-article-action:focus-visible {
    border-color: rgba(var(--vip-article-accent-rgb), 0.48) !important;
    box-shadow:
        0 18px 38px rgba(var(--vip-article-accent-rgb), 0.30),
        0 0 24px rgba(var(--vip-article-accent-rgb), 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.62),
        inset 0 -1px 0 rgba(var(--vip-article-accent-dark-rgb), 0.16) !important;
}

[data-theme="dark"] .vip-article-action,
[data-theme="dark"] .vip-article-overlay[data-vip-duration="forever"] .vip-article-action {
    border-color: rgba(var(--vip-article-accent-rgb), 0.32) !important;
    box-shadow:
        0 14px 30px rgba(var(--vip-article-accent-dark-rgb), 0.22),
        0 0 20px rgba(var(--vip-article-accent-rgb), 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        inset 0 -1px 0 rgba(var(--vip-article-accent-dark-rgb), 0.22) !important;
}

[data-theme="dark"] .vip-article-action:hover,
[data-theme="dark"] .vip-article-action:focus-visible,
[data-theme="dark"] .vip-article-overlay[data-vip-duration="forever"] .vip-article-action:hover,
[data-theme="dark"] .vip-article-overlay[data-vip-duration="forever"] .vip-article-action:focus-visible {
    border-color: rgba(var(--vip-article-accent-rgb), 0.48) !important;
    box-shadow:
        0 18px 38px rgba(var(--vip-article-accent-dark-rgb), 0.28),
        0 0 28px rgba(var(--vip-article-accent-rgb), 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        inset 0 -1px 0 rgba(var(--vip-article-accent-dark-rgb), 0.24) !important;
}

/* -------------------------
   Shop patch 102
   VIP article text: one readable block, no scroll action arrows.
   ------------------------- */

.vip-article-scroll-actions {
    display: none !important;
}

.vip-article-plain-features,
.vip-article-features.vip-article-plain-features {
    display: block !important;
    margin: 0 !important;
    padding: clamp(18px, 2.2vw, 30px) !important;
    list-style: none !important;
    border: 1px solid rgba(var(--vip-article-accent-rgb), 0.30) !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at 14% 0%, rgba(var(--vip-article-accent-rgb), 0.13), transparent 34%),
        linear-gradient(180deg, rgba(var(--vip-article-accent-rgb), 0.085), rgba(255, 255, 255, 0.035)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        0 18px 42px rgba(var(--vip-article-accent-rgb), 0.12) !important;
}

[data-theme="dark"] .vip-article-plain-features,
[data-theme="dark"] .vip-article-features.vip-article-plain-features {
    background:
        radial-gradient(circle at 14% 0%, rgba(var(--vip-article-accent-rgb), 0.16), transparent 35%),
        linear-gradient(180deg, rgba(var(--vip-article-accent-rgb), 0.10), rgba(255, 255, 255, 0.025)) !important;
    border-color: rgba(var(--vip-article-accent-rgb), 0.34) !important;
}

.vip-article-section-title {
    margin: clamp(22px, 2.4vw, 32px) 0 clamp(12px, 1.4vw, 18px);
    font-size: clamp(1.18rem, 1.2vw, 1.42rem);
    line-height: 1.18;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgb(var(--vip-article-accent-rgb));
    text-shadow: 0 0 18px rgba(var(--vip-article-accent-rgb), 0.30);
}

.vip-article-section-title:first-child {
    margin-top: 0;
}

.vip-article-text-item {
    display: block;
    padding: clamp(12px, 1.35vw, 18px) 0;
    border-top: 1px solid rgba(var(--vip-article-accent-rgb), 0.16);
}

.vip-article-section-title + .vip-article-text-item {
    border-top: 0;
    padding-top: 0;
}

.vip-article-text-title {
    display: block;
    margin: 0 0 7px;
    font-size: clamp(1.16rem, 1.18vw, 1.38rem);
    line-height: 1.24;
    color: var(--site-heading);
}

.vip-article-text-description {
    margin: 0;
    font-size: clamp(1.06rem, 1.04vw, 1.24rem);
    line-height: 1.62;
    color: var(--site-muted);
}

.vip-article-text-command,
.vip-article-text-cooldown {
    display: inline-flex;
    width: fit-content;
    margin: 10px 10px 0 0;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid rgba(var(--vip-article-accent-rgb), 0.26);
    background: rgba(var(--vip-article-accent-rgb), 0.10);
    color: rgb(var(--vip-article-accent-rgb));
    font: 700 clamp(0.98rem, 0.98vw, 1.14rem)/1.1 var(--font-display);
    letter-spacing: 0.02em;
}

.vip-article-text-command {
    font-family: "JetBrains Mono", "Fira Code", monospace;
}

@media (max-width: 720px) {
    .vip-article-plain-features,
    .vip-article-features.vip-article-plain-features {
        padding: 16px !important;
        border-radius: 20px !important;
    }

    .vip-article-text-title {
        font-size: 1.08rem;
    }

    .vip-article-text-description {
        font-size: 1rem;
    }
}

/* -------------------------
   Shop patch 104
   VIP article privilege cards by category, without one large wrapper block.
   ------------------------- */

.vip-article-plain-features,
.vip-article-features.vip-article-plain-features {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.vip-article-section-title {
    margin: clamp(30px, 3vw, 44px) 0 clamp(14px, 1.45vw, 22px) !important;
}

.vip-article-section-title:first-child {
    margin-top: 0 !important;
}

.vip-article-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 1.55vw, 22px);
}

.vip-article-text-item {
    min-height: 100%;
    padding: clamp(16px, 1.65vw, 24px) !important;
    border: 1px solid rgba(var(--vip-article-accent-rgb), 0.24) !important;
    border-radius: 22px;
    background:
        radial-gradient(circle at 16% 0%, rgba(var(--vip-article-accent-rgb), 0.13), transparent 36%),
        linear-gradient(180deg, rgba(var(--vip-article-accent-rgb), 0.075), rgba(255, 255, 255, 0.034));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        0 14px 34px rgba(var(--vip-article-accent-rgb), 0.10);
}

[data-theme="dark"] .vip-article-text-item {
    border-color: rgba(var(--vip-article-accent-rgb), 0.30) !important;
    background:
        radial-gradient(circle at 16% 0%, rgba(var(--vip-article-accent-rgb), 0.15), transparent 38%),
        linear-gradient(180deg, rgba(var(--vip-article-accent-rgb), 0.09), rgba(255, 255, 255, 0.026));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 14px 34px rgba(var(--vip-article-accent-dark-rgb), 0.14);
}

.vip-article-section-title + .vip-article-section-grid {
    margin-top: 0;
}

.vip-article-text-title {
    margin-bottom: 9px !important;
}

.vip-article-text-description {
    margin-bottom: 4px !important;
}

.vip-article-text-command,
.vip-article-text-cooldown {
    margin-top: 12px !important;
}

.vip-article-text-cooldown {
    color: color-mix(in srgb, rgb(var(--vip-article-accent-rgb)) 82%, var(--site-text)) !important;
}

@media (max-width: 860px) {
    .vip-article-section-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .vip-article-plain-features,
    .vip-article-features.vip-article-plain-features {
        padding: 0 !important;
        border-radius: 0 !important;
    }

    .vip-article-text-item {
        padding: 15px !important;
        border-radius: 19px;
    }
}

/* -------------------------
   Shop patch 105
   Transparent article features wrapper and brighter animated category titles.
   ------------------------- */

.vip-article-plain-features,
.vip-article-features.vip-article-plain-features {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    outline: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

[data-theme="dark"] .vip-article-plain-features,
[data-theme="dark"] .vip-article-features.vip-article-plain-features {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    outline: 0 !important;
}

.vip-article-section-title {
    position: relative;
    display: inline-block;
    width: fit-content;
    margin: clamp(34px, 3.3vw, 52px) 0 clamp(18px, 1.8vw, 28px) !important;
    font-size: clamp(1.72rem, 2.18vw, 2.72rem) !important;
    line-height: 1.04 !important;
    font-weight: 900 !important;
    letter-spacing: 0.055em !important;
    color: rgb(var(--vip-article-accent-rgb)) !important;
    background:
        linear-gradient(
            108deg,
            rgba(var(--vip-article-accent-dark-rgb), 0.98) 0%,
            rgba(var(--vip-article-accent-rgb), 1) 22%,
            rgba(var(--vip-article-accent-soft-rgb), 0.92) 44%,
            rgba(var(--vip-article-accent-rgb), 1) 66%,
            rgba(var(--vip-article-accent-dark-rgb), 0.98) 100%
        ) !important;
    background-size: 320% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow:
        0 0 16px rgba(var(--vip-article-accent-rgb), 0.36),
        0 0 34px rgba(var(--vip-article-accent-rgb), 0.20),
        0 0 58px rgba(var(--vip-article-accent-soft-rgb), 0.14) !important;
    animation: vipArticleSectionTitleFlow 5.2s ease-in-out infinite !important;
}

.vip-article-section-title:first-child {
    margin-top: 0 !important;
}

.vip-article-section-title::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -9px;
    height: 3px;
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(var(--vip-article-accent-rgb), 0.18) 12%,
            rgba(var(--vip-article-accent-soft-rgb), 0.66) 42%,
            rgba(var(--vip-article-accent-rgb), 0.72) 62%,
            rgba(var(--vip-article-accent-rgb), 0.16) 88%,
            transparent 100%
        );
    background-size: 220% 100%;
    box-shadow:
        0 0 16px rgba(var(--vip-article-accent-rgb), 0.34),
        0 0 28px rgba(var(--vip-article-accent-soft-rgb), 0.18);
    animation: vipArticleSectionTitleLineFlow 4.4s ease-in-out infinite;
    pointer-events: none;
}

[data-theme="dark"] .vip-article-section-title {
    text-shadow:
        0 0 18px rgba(var(--vip-article-accent-rgb), 0.44),
        0 0 38px rgba(var(--vip-article-accent-rgb), 0.26),
        0 0 68px rgba(var(--vip-article-accent-soft-rgb), 0.13) !important;
}

@keyframes vipArticleSectionTitleFlow {
    0%, 100% {
        background-position: 0% 50%;
        filter: brightness(1) saturate(1.06);
    }
    50% {
        background-position: 100% 50%;
        filter: brightness(1.16) saturate(1.22);
    }
}

@keyframes vipArticleSectionTitleLineFlow {
    0%, 100% {
        background-position: 0% 50%;
        opacity: 0.72;
    }
    50% {
        background-position: 100% 50%;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vip-article-section-title,
    .vip-article-section-title::after {
        animation: none !important;
    }
}

@media (max-width: 720px) {
    .vip-article-section-title {
        font-size: clamp(1.42rem, 8vw, 2.05rem) !important;
        letter-spacing: 0.035em !important;
    }
}

/* -------------------------
   Shop patch 106
   VIP article command and cooldown chips: same color, separate lines.
   ------------------------- */

.vip-article-text-command,
.vip-article-text-cooldown {
    display: flex !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 12px 0 0 !important;
    color: rgb(var(--vip-article-accent-rgb)) !important;
    border-color: rgba(var(--vip-article-accent-rgb), 0.26) !important;
    background: rgba(var(--vip-article-accent-rgb), 0.10) !important;
}

.vip-article-text-command + .vip-article-text-cooldown {
    margin-top: 8px !important;
}

[data-theme="dark"] .vip-article-text-command,
[data-theme="dark"] .vip-article-text-cooldown {
    color: rgb(var(--vip-article-accent-rgb)) !important;
    border-color: rgba(var(--vip-article-accent-rgb), 0.32) !important;
    background: rgba(var(--vip-article-accent-rgb), 0.13) !important;
}


/* -------------------------
   Shop patch 107
   VIP article cooldown chips: compact KД label, monospace like commands.
   ------------------------- */

.vip-article-text-cooldown {
    font-family: "JetBrains Mono", "Fira Code", monospace !important;
    letter-spacing: 0.02em !important;
}

/* -------------------------
   Shop patch 108
   VIP article privilege card hover glow with animated border highlights.
   ------------------------- */

.vip-article-text-item {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease !important;
}

.vip-article-text-item > * {
    position: relative;
    z-index: 2;
}

.vip-article-text-item::before,
.vip-article-text-item::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 180ms ease;
}

.vip-article-text-item::before {
    z-index: 0;
    background:
        linear-gradient(135deg, rgba(var(--vip-article-accent-rgb), 0.10), transparent 48%, rgba(var(--vip-article-accent-soft-rgb), 0.09));
}

.vip-article-text-item::after {
    z-index: 1;
    padding: 1.5px;
    background:
        conic-gradient(
            from 0deg,
            transparent 0deg,
            rgba(var(--vip-article-accent-rgb), 0.12) 54deg,
            rgba(var(--vip-article-accent-soft-rgb), 0.82) 86deg,
            rgba(var(--vip-article-accent-rgb), 0.50) 118deg,
            transparent 164deg,
            transparent 220deg,
            rgba(var(--vip-article-accent-rgb), 0.16) 268deg,
            rgba(var(--vip-article-accent-soft-rgb), 0.68) 300deg,
            rgba(var(--vip-article-accent-rgb), 0.32) 328deg,
            transparent 360deg
        );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
}

.vip-article-text-item:hover,
.vip-article-text-item:focus-within {
    transform: translateY(-2px);
    border-color: rgba(var(--vip-article-accent-rgb), 0.46) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        0 18px 42px rgba(var(--vip-article-accent-rgb), 0.18),
        0 0 28px rgba(var(--vip-article-accent-rgb), 0.16) !important;
}

.vip-article-text-item:hover::before,
.vip-article-text-item:focus-within::before {
    opacity: 1;
}

.vip-article-text-item:hover::after,
.vip-article-text-item:focus-within::after {
    opacity: 1;
    animation: vipArticleCardBorderGlow 2.8s linear infinite;
}

[data-theme="dark"] .vip-article-text-item:hover,
[data-theme="dark"] .vip-article-text-item:focus-within {
    border-color: rgba(var(--vip-article-accent-rgb), 0.52) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 18px 42px rgba(var(--vip-article-accent-dark-rgb), 0.24),
        0 0 32px rgba(var(--vip-article-accent-rgb), 0.20) !important;
}

@keyframes vipArticleCardBorderGlow {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vip-article-text-item,
    .vip-article-text-item::before,
    .vip-article-text-item::after {
        transition: none !important;
    }

    .vip-article-text-item:hover::after,
    .vip-article-text-item:focus-within::after {
        animation: none !important;
    }
}

/* -------------------------
   Shop patch 109
   VIP article privilege card hover glow: slower and randomized 1-3 border highlights.
   ------------------------- */

.vip-article-text-item {
    --vip-article-glow-duration: 10.5s;
    --vip-article-glow-delay: 0s;
    --vip-article-glow-start: 0deg;
}

.vip-article-text-item[data-vip-glow-count="1"]::after {
    background:
        conic-gradient(
            from var(--vip-article-glow-start, 0deg),
            transparent 0deg,
            transparent 34deg,
            rgba(var(--vip-article-accent-rgb), 0.08) 52deg,
            rgba(var(--vip-article-accent-soft-rgb), 0.70) 78deg,
            rgba(var(--vip-article-accent-rgb), 0.42) 106deg,
            transparent 146deg,
            transparent 360deg
        ) !important;
}

.vip-article-text-item[data-vip-glow-count="2"]::after {
    background:
        conic-gradient(
            from var(--vip-article-glow-start, 0deg),
            transparent 0deg,
            transparent 22deg,
            rgba(var(--vip-article-accent-rgb), 0.10) 44deg,
            rgba(var(--vip-article-accent-soft-rgb), 0.76) 72deg,
            rgba(var(--vip-article-accent-rgb), 0.44) 102deg,
            transparent 142deg,
            transparent 198deg,
            rgba(var(--vip-article-accent-rgb), 0.09) 220deg,
            rgba(var(--vip-article-accent-soft-rgb), 0.64) 248deg,
            rgba(var(--vip-article-accent-rgb), 0.34) 276deg,
            transparent 316deg,
            transparent 360deg
        ) !important;
}

.vip-article-text-item[data-vip-glow-count="3"]::after {
    background:
        conic-gradient(
            from var(--vip-article-glow-start, 0deg),
            transparent 0deg,
            rgba(var(--vip-article-accent-rgb), 0.08) 24deg,
            rgba(var(--vip-article-accent-soft-rgb), 0.70) 50deg,
            rgba(var(--vip-article-accent-rgb), 0.36) 76deg,
            transparent 112deg,
            transparent 132deg,
            rgba(var(--vip-article-accent-rgb), 0.10) 154deg,
            rgba(var(--vip-article-accent-soft-rgb), 0.62) 180deg,
            rgba(var(--vip-article-accent-rgb), 0.34) 206deg,
            transparent 242deg,
            transparent 260deg,
            rgba(var(--vip-article-accent-rgb), 0.09) 282deg,
            rgba(var(--vip-article-accent-soft-rgb), 0.56) 306deg,
            rgba(var(--vip-article-accent-rgb), 0.28) 330deg,
            transparent 360deg
        ) !important;
}

.vip-article-text-item:hover::after,
.vip-article-text-item:focus-within::after {
    animation: vipArticleCardBorderGlowRandom var(--vip-article-glow-duration, 10.5s) linear infinite !important;
    animation-delay: var(--vip-article-glow-delay, 0s) !important;
}

@keyframes vipArticleCardBorderGlowRandom {
    from {
        transform: rotate(var(--vip-article-glow-start, 0deg));
    }

    to {
        transform: rotate(calc(var(--vip-article-glow-start, 0deg) + 360deg));
    }
}

@media (prefers-reduced-motion: reduce) {
    .vip-article-text-item:hover::after,
    .vip-article-text-item:focus-within::after {
        animation: none !important;
    }
}

/* -------------------------
   Shop patch 110
   VIP article privilege card hover: slow random blurred glints instead of border contours.
   ------------------------- */

.vip-article-text-item::after {
    display: none !important;
    content: none !important;
    animation: none !important;
    background: none !important;
    -webkit-mask: none !important;
    mask: none !important;
}

.vip-article-text-item:hover::after,
.vip-article-text-item:focus-within::after {
    display: none !important;
    opacity: 0 !important;
    animation: none !important;
}

.vip-article-floating-glint {
    position: absolute !important;
    left: var(--vip-article-glint-x, 50%) !important;
    top: var(--vip-article-glint-y, 50%) !important;
    z-index: 1 !important;
    display: block !important;
    width: var(--vip-article-glint-width, 96px) !important;
    height: var(--vip-article-glint-height, 54px) !important;
    border-radius: 999px !important;
    pointer-events: none !important;
    opacity: 0;
    transform:
        translate(-50%, -50%)
        translate(0, 0)
        scale(0.72)
        rotate(var(--vip-article-glint-rotate, 0deg));
    transform-origin: center;
    background:
        radial-gradient(
            ellipse at center,
            rgba(var(--vip-article-accent-soft-rgb), 0.58) 0%,
            rgba(var(--vip-article-accent-rgb), 0.34) 34%,
            rgba(var(--vip-article-accent-rgb), 0.14) 56%,
            transparent 78%
        );
    filter: blur(14px) saturate(1.18);
    mix-blend-mode: screen;
    animation: vipArticleFloatingGlint
        var(--vip-article-glint-duration, 6.5s)
        ease-in-out
        var(--vip-article-glint-delay, 0s)
        forwards;
    will-change: transform, opacity;
}

[data-theme="dark"] .vip-article-floating-glint {
    background:
        radial-gradient(
            ellipse at center,
            rgba(var(--vip-article-accent-soft-rgb), 0.42) 0%,
            rgba(var(--vip-article-accent-rgb), 0.32) 36%,
            rgba(var(--vip-article-accent-rgb), 0.16) 58%,
            transparent 80%
        );
    filter: blur(16px) saturate(1.24);
}

@keyframes vipArticleFloatingGlint {
    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            translate(0, 0)
            scale(0.62)
            rotate(var(--vip-article-glint-rotate, 0deg));
    }

    24% {
        opacity: var(--vip-article-glint-opacity, 0.30);
        transform:
            translate(-50%, -50%)
            translate(calc(var(--vip-article-glint-move-x, 0px) * 0.18), calc(var(--vip-article-glint-move-y, 0px) * 0.18))
            scale(0.96)
            rotate(var(--vip-article-glint-rotate, 0deg));
    }

    72% {
        opacity: var(--vip-article-glint-opacity, 0.30);
        transform:
            translate(-50%, -50%)
            translate(calc(var(--vip-article-glint-move-x, 0px) * 0.78), calc(var(--vip-article-glint-move-y, 0px) * 0.78))
            scale(1.10)
            rotate(var(--vip-article-glint-rotate, 0deg));
    }

    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            translate(var(--vip-article-glint-move-x, 0px), var(--vip-article-glint-move-y, 0px))
            scale(1.22)
            rotate(var(--vip-article-glint-rotate, 0deg));
    }
}

@media (prefers-reduced-motion: reduce) {
    .vip-article-floating-glint {
        display: none !important;
        animation: none !important;
    }
}

/* -------------------------
   Shop patch 111
   VIP article rules agreement checkbox.
   ------------------------- */

.vip-article-agreement {
    position: relative;
    align-self: center;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 14px;
    width: min(100%, 920px);
    margin: clamp(24px, 3vw, 40px) auto 0;
    padding: clamp(16px, 2.2vw, 22px) clamp(18px, 2.7vw, 28px);
    border: 1px solid rgba(var(--vip-article-accent-rgb), 0.30);
    border-radius: 24px;
    background:
        radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.42), transparent 34%),
        linear-gradient(135deg, rgba(var(--vip-article-accent-rgb), 0.11), rgba(var(--vip-article-accent-rgb), 0.045));
    color: rgba(21, 25, 35, 0.84);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.46),
        0 14px 30px rgba(var(--vip-article-accent-rgb), 0.10);
    cursor: pointer;
    user-select: none;
}

[data-theme="dark"] .vip-article-agreement {
    background:
        radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.10), transparent 34%),
        linear-gradient(135deg, rgba(var(--vip-article-accent-rgb), 0.13), rgba(var(--vip-article-accent-rgb), 0.055));
    color: rgba(248, 250, 255, 0.86);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 16px 34px rgba(0, 0, 0, 0.16);
}

.vip-article-agreement-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.vip-article-agreement-box {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-top: 0;
    align-self: center;
    flex-shrink: 0;
    border: 1.5px solid rgba(var(--vip-article-accent-rgb), 0.58);
    border-radius: 9px;
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.48), transparent 34%),
        rgba(255, 255, 255, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        0 0 18px rgba(var(--vip-article-accent-rgb), 0.12);
    transition:
        transform 160ms ease,
        border-color 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease;
}

.vip-article-agreement-box::after {
    content: "✓";
    color: #FFFFFF;
    font-size: 1.05rem;
    font-weight: 950;
    line-height: 1;
    opacity: 0;
    transform: translateY(1px) scale(0.62);
    transition: opacity 140ms ease, transform 140ms ease;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.26);
}

.vip-article-agreement-input:checked + .vip-article-agreement-box {
    border-color: rgba(var(--vip-article-accent-soft-rgb), 0.70);
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.58), transparent 34%),
        linear-gradient(135deg, rgba(var(--vip-article-accent-rgb), 0.92), rgba(var(--vip-article-accent-dark-rgb), 0.86));
    box-shadow:
        0 0 24px rgba(var(--vip-article-accent-rgb), 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.46);
}

.vip-article-agreement-input:checked + .vip-article-agreement-box::after {
    opacity: 1;
    transform: translateY(1px) scale(1);
}

.vip-article-agreement-input:focus-visible + .vip-article-agreement-box {
    outline: 3px solid rgba(var(--vip-article-accent-rgb), 0.30);
    outline-offset: 3px;
}

.vip-article-agreement:hover .vip-article-agreement-box {
    transform: translateY(-1px);
    border-color: rgba(var(--vip-article-accent-rgb), 0.74);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.44),
        0 0 24px rgba(var(--vip-article-accent-rgb), 0.18);
}

.vip-article-agreement-text {
    display: flex;
    align-items: center;
    min-height: 28px;
    font-size: clamp(1.06rem, 1.38vw, 1.22rem);
    font-weight: 850;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.vip-article-agreement + .vip-article-action {
    margin-top: clamp(18px, 2.2vw, 28px) !important;
}

.vip-article-action:disabled,
.vip-article-action[aria-disabled="true"] {
    cursor: not-allowed !important;
    opacity: 0.56 !important;
    filter: grayscale(0.20) saturate(0.74) !important;
    transform: none !important;
    animation: none !important;
    box-shadow:
        0 10px 24px rgba(var(--vip-article-accent-rgb), 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

.vip-article-action:disabled::before,
.vip-article-action[aria-disabled="true"]::before {
    display: none !important;
}

.vip-article-action:disabled:hover,
.vip-article-action:disabled:focus-visible,
.vip-article-action[aria-disabled="true"]:hover,
.vip-article-action[aria-disabled="true"]:focus-visible {
    background:
        linear-gradient(135deg, rgba(var(--vip-article-accent-rgb), 0.92), rgba(var(--vip-article-accent-rgb), 0.58)) !important;
    transform: none !important;
    filter: grayscale(0.20) saturate(0.74) !important;
    animation: none !important;
}

@media (max-width: 720px) {
    .vip-article-agreement {
        grid-template-columns: 28px 1fr;
        align-items: center;
        gap: 12px;
        border-radius: 20px;
    }
}

/* -------------------------
   Patch 007 — STANDARD card image
   ------------------------- */

.donate-card-vip-tier-0 .donate-card-image {
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(17, 24, 39, 0.10) 45%, rgba(17, 24, 39, 0.28)),
        url("images/vip-standard-card.webp") center / cover no-repeat !important;
}

.donate-card-vip-tier-0 .donate-card-image::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.02) 48%, rgba(255, 255, 255, 0.08)),
        radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.18), transparent 58%);
    opacity: 0.75;
}

.donate-card-vip-tier-0 .donate-card-image span {
    display: none !important;
}


/* -------------------------
   Patch 008 — STANDARD card image fix
   ------------------------- */

.donate-card-vip-tier-0 .donate-card-image,
[data-theme="dark"] .donate-card-vip-tier-0 .donate-card-image {
    position: relative;
    overflow: hidden !important;
    background: #2f343b !important;
    background-image: none !important;
    background-size: cover !important;
    background-position: center !important;
    image-rendering: auto !important;
}

.donate-card-vip-tier-0 .donate-card-art,
[data-theme="dark"] .donate-card-vip-tier-0 .donate-card-art {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
    pointer-events: none;
    user-select: none;
}

.donate-card-vip-tier-0 .donate-card-image::before,
[data-theme="dark"] .donate-card-vip-tier-0 .donate-card-image::before {
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02) 48%, rgba(4, 10, 18, 0.18)),
        radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.20), transparent 58%) !important;
    opacity: 0.72;
    mix-blend-mode: screen;
}

.donate-card-vip-tier-0 .donate-card-image::after,
[data-theme="dark"] .donate-card-vip-tier-0 .donate-card-image::after {
    z-index: 2;
}

.donate-card-vip-tier-0 .donate-card-image-glare,
[data-theme="dark"] .donate-card-vip-tier-0 .donate-card-image-glare {
    z-index: 3;
}

.donate-card-vip-tier-0 .donate-card-image span,
[data-theme="dark"] .donate-card-vip-tier-0 .donate-card-image span {
    display: none !important;
}

/* -------------------------
   Patch 011 — patch 008 card background + patch 009 VIP images
   ------------------------- */

.donate-card-vip-tier .donate-card-image,
[data-theme="dark"] .donate-card-vip-tier .donate-card-image {
    position: relative !important;
    overflow: hidden !important;
}

.donate-card-vip-tier .donate-card-art,
[data-theme="dark"] .donate-card-vip-tier .donate-card-art {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
    pointer-events: none;
    user-select: none;
}

.donate-card-vip-tier .donate-card-image::before,
[data-theme="dark"] .donate-card-vip-tier .donate-card-image::before {
    z-index: 1;
}

.donate-card-vip-tier .donate-card-image::after,
[data-theme="dark"] .donate-card-vip-tier .donate-card-image::after {
    z-index: 2;
}

.donate-card-vip-tier .donate-card-image-glare,
[data-theme="dark"] .donate-card-vip-tier .donate-card-image-glare {
    z-index: 3;
}

.donate-card-vip-tier .donate-card-image span,
[data-theme="dark"] .donate-card-vip-tier .donate-card-image span {
    display: none !important;
}


/* -------------------------
   Patch 012 — separate VIP card surfaces and card arts
   User-provided vertical files vip0.png...vip5.png are CARD BACKGROUNDS.
   Horizontal artwork from patch 009 remains only inside .donate-card-image.
   ------------------------- */

.donate-card-vip-tier-0,
.donate-card-vip-tier-0:hover,
.donate-card-vip-tier-0:focus-visible {
    background: url("images/vip0-card-surface.png") center / cover no-repeat !important;
}

.donate-card-vip-tier-1,
.donate-card-vip-tier-1:hover,
.donate-card-vip-tier-1:focus-visible {
    background: url("images/vip1-card-surface.png") center / cover no-repeat !important;
}

.donate-card-vip-tier-2,
.donate-card-vip-tier-2:hover,
.donate-card-vip-tier-2:focus-visible {
    background: url("images/vip2-card-surface.png") center / cover no-repeat !important;
}

.donate-card-vip-tier-3,
.donate-card-vip-tier-3:hover,
.donate-card-vip-tier-3:focus-visible {
    background: url("images/vip3-card-surface.png") center / cover no-repeat !important;
}

.donate-card-vip-tier-4,
.donate-card-vip-tier-4:hover,
.donate-card-vip-tier-4:focus-visible {
    background: url("images/vip4-card-surface.png") center / cover no-repeat !important;
}

.donate-card-vip-tier-5,
.donate-card-vip-tier-5:hover,
.donate-card-vip-tier-5:focus-visible {
    background: url("images/vip5-card-surface.png") center / cover no-repeat !important;
}

.donate-card-vip-tier,
.donate-card-vip-tier:hover,
.donate-card-vip-tier:focus-visible {
    --tier-texture-opacity-36: 0 !important;
    --tier-texture-hover-opacity-36: 0 !important;
    --tier-texture-opacity-38: 0 !important;
    --tier-texture-hover-opacity-38: 0 !important;
    --tier-material-opacity: 0 !important;
    --tier-material-opacity-33: 0 !important;
}

.donate-card-vip-tier .donate-card-inner::before,
.donate-card-vip-tier:hover .donate-card-inner::before,
.donate-card-vip-tier:focus-visible .donate-card-inner::before {
    display: none !important;
    opacity: 0 !important;
    background: none !important;
    background-image: none !important;
}

.donate-card-vip-tier .donate-card-art,
[data-theme="dark"] .donate-card-vip-tier .donate-card-art {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
    pointer-events: none;
    user-select: none;
}

.donate-card-vip-tier .donate-card-image span,
[data-theme="dark"] .donate-card-vip-tier .donate-card-image span {
    display: none !important;
}

/* -------------------------
   Patch 004 — larger VIP privilege titles
   ------------------------- */

.donate-card-vip-tier .donate-card-title-zone {
    min-height: clamp(112px, 9vw, 148px);
    padding: clamp(22px, 2vw, 34px) 0 clamp(12px, 1.2vw, 20px);
}

.donate-card-vip-tier h2 {
    font-size: clamp(42px, 3.5vw, 56px);
    line-height: 1.02;
    letter-spacing: -0.04em;
}

@media (max-width: 620px) {
    .donate-card-vip-tier h2 {
        font-size: clamp(38px, 12vw, 48px);
    }
}

/* -------------------------
   Patch 007 — pastel gradient titles for privilege cards
   ------------------------- */

.donate-card-vip-tier {
    --tier-title-gradient: linear-gradient(180deg, #FFFFFF 0%, #E8E8E8 48%, #B8B8B8 100%);
}

.donate-card-vip-tier h2 {
    color: transparent;
    background: var(--tier-title-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: none;
}

.donate-card-vip-tier-0 {
    --tier-title-gradient: linear-gradient(180deg, #FFFFFF 0%, #E5E5E5 48%, #AFAFAF 100%);
}

.donate-card-vip-tier-1 {
    --tier-title-gradient: linear-gradient(180deg, #FFF2EA 0%, #E7B49E 48%, #B9846F 100%);
}

.donate-card-vip-tier-2 {
    --tier-title-gradient: linear-gradient(180deg, #FFFFFF 0%, #E6E9EB 48%, #B8C0C5 100%);
}

.donate-card-vip-tier-3 {
    --tier-title-gradient: linear-gradient(180deg, #FFF8DF 0%, #EEDC91 48%, #C5A85C 100%);
}

.donate-card-vip-tier-4 {
    --tier-title-gradient: linear-gradient(180deg, #EFFFFF 0%, #A7E3E1 48%, #72B9BD 100%);
}

.donate-card-vip-tier-5 {
    --tier-title-gradient: linear-gradient(180deg, #FFF0F2 0%, #E7A4AD 48%, #A96570 100%);
}

/* -------------------------
   Patch 008 — irregular themed title gradients
   ------------------------- */

.donate-card-vip-tier h2 {
    background-size: 170% 170%;
    background-position: 38% 46%;
}

/* STANDARD: серый, зелёный, светло-серый. */
.donate-card-vip-tier-0 {
    --tier-title-gradient: linear-gradient(
        124deg,
        #DCE1E4 0%,
        #8FA39A 18%,
        #C8CFD4 34%,
        #A8C3B4 53%,
        #EEF0EE 72%,
        #9CA3A8 100%
    );
}

/* VIP: те же тёплые тона, но не вертикально и без прямого светлый→тёмный. */
.donate-card-vip-tier-1 {
    --tier-title-gradient: linear-gradient(
        32deg,
        #C18B74 0%,
        #F1C5B2 16%,
        #B77B65 34%,
        #E6B096 57%,
        #D8B4C8 76%,
        #A97061 100%
    );
}

/* VIP PLUS: белый и серебряный. */
.donate-card-vip-tier-2 {
    --tier-title-gradient: linear-gradient(
        142deg,
        #FFFFFF 0%,
        #C7D0D7 19%,
        #F4F7FA 36%,
        #AEB8C1 56%,
        #E8EEF2 77%,
        #B9C2CA 100%
    );
}

/* PREMIUM: золотой и жёлтый. */
.donate-card-vip-tier-3 {
    --tier-title-gradient: linear-gradient(
        28deg,
        #D2A93C 0%,
        #FFF0A8 17%,
        #E5BD4D 35%,
        #F7DE78 55%,
        #C79A2E 74%,
        #FFE39A 100%
    );
}

/* PREMIUM PLUS: аквамарин, белый, бирюзовый. */
.donate-card-vip-tier-4 {
    --tier-title-gradient: linear-gradient(
        131deg,
        #77DCD8 0%,
        #F7FFFF 18%,
        #8FE9E0 36%,
        #B4F1EF 54%,
        #45BFC7 73%,
        #EFFFFF 100%
    );
}

/* BIG: фиолетовый, красный, немного белого. */
.donate-card-vip-tier-5 {
    --tier-title-gradient: linear-gradient(
        36deg,
        #6E4B9E 0%,
        #D94357 20%,
        #F4E9F1 34%,
        #9A456F 48%,
        #C7293D 70%,
        #56367F 100%
    );
}

/* -------------------------
   Patch 009 — longer, thicker title gradient bands
   ------------------------- */

.donate-card-vip-tier h2 {
    background-size: 260% 260%;
    background-position: 46% 48%;
    transition:
        background-position 1.2s ease,
        transform 1.2s ease;
}

.donate-card-vip-tier:hover h2,
.donate-card-vip-tier:focus-visible h2 {
    background-position: 58% 42%;
}

/* STANDARD: широкие мягкие зоны — серый, зелёный, светло-серый. */
.donate-card-vip-tier-0 {
    --tier-title-gradient: linear-gradient(
        118deg,
        #D7DDE1 0%,
        #B8C1C4 22%,
        #9EBDAA 43%,
        #EEF1EF 68%,
        #A9B0B4 100%
    );
}

/* VIP: те же тёплые тона, но переходы шире и направление спокойнее. */
.donate-card-vip-tier-1 {
    --tier-title-gradient: linear-gradient(
        38deg,
        #B77A63 0%,
        #EFC5B2 27%,
        #C79078 52%,
        #E0B0C3 74%,
        #A96F60 100%
    );
}

/* VIP PLUS: почти весь текст белый/белоснежный, серебро только лёгкой примесью. */
.donate-card-vip-tier-2 {
    --tier-title-gradient: linear-gradient(
        132deg,
        #FFFFFF 0%,
        #FFFFFF 30%,
        #FFFAFA 48%,
        #F8FCFF 66%,
        #FFFFFF 82%,
        #DDE4EA 100%
    );
}

/* PREMIUM: широкие золотые и жёлтые зоны без резкой вертикальной темноты. */
.donate-card-vip-tier-3 {
    --tier-title-gradient: linear-gradient(
        24deg,
        #D3A338 0%,
        #FFECA1 29%,
        #E6BD4A 55%,
        #FFF2B4 77%,
        #C99A2E 100%
    );
}

/* PREMIUM PLUS: аквамарин, белый, бирюзовый с длинными мягкими переходами. */
.donate-card-vip-tier-4 {
    --tier-title-gradient: linear-gradient(
        126deg,
        #72DDD8 0%,
        #DFFFFF 25%,
        #FFFFFF 43%,
        #8DEBE4 63%,
        #49C2CA 100%
    );
}

/* BIG: фиолетовый и красный, белый — широкая, но не главная вспышка. */
.donate-card-vip-tier-5 {
    --tier-title-gradient: linear-gradient(
        34deg,
        #68469B 0%,
        #B83A6E 28%,
        #F3EAF3 46%,
        #D94355 67%,
        #56337D 100%
    );
}


/* -------------------------
   Patch 010 — VIP+ snow-white gradient and no title shadows
   ------------------------- */

.donate-card-vip-tier h2,
.donate-card-vip-tier:hover h2,
.donate-card-vip-tier:focus-visible h2 {
    text-shadow: none !important;
    filter: none !important;
}

/* VIP PLUS: максимум белого и белоснежного, серебро только на краю градиента. */
.donate-card-vip-tier-2 {
    --tier-title-gradient: linear-gradient(
        132deg,
        #FFFFFF 0%,
        #FFFFFF 34%,
        #FFFAFA 55%,
        #FFFFFF 75%,
        #F8FCFF 90%,
        #DDE4EA 100%
    );
}


/* -------------------------
   Patch 012 — selected pastel title gradients without outlines
   ------------------------- */

/* Контуры отключены намеренно. Остаются только градиенты текста. */
.donate-card-vip-tier h2 {
    -webkit-text-stroke: 0 transparent !important;
    text-shadow: none !important;
    filter: none !important;
}

/* PREMIUM: белый и голубой, пастельно, с длинными мягкими переходами. */
.donate-card-vip-tier-3 {
    --tier-title-gradient: linear-gradient(
        31deg,
        #FFFFFF 0%,
        #F6FCFF 26%,
        #CFE9F8 50%,
        #FFFFFF 72%,
        #BBDCF2 100%
    );
}

/* PREMIUM PLUS: белый и красный, пастельно, без кислотности. */
.donate-card-vip-tier-4 {
    --tier-title-gradient: linear-gradient(
        127deg,
        #FFFFFF 0%,
        #FFF7F8 24%,
        #F2B8C0 48%,
        #FFFFFF 70%,
        #ECA2AD 100%
    );
}

/* BIG: белый и жёлтый, пастельно, с мягкими широкими зонами. */
.donate-card-vip-tier-5 {
    --tier-title-gradient: linear-gradient(
        38deg,
        #FFFFFF 0%,
        #FFFDF4 24%,
        #F5DEA0 49%,
        #FFFFFF 72%,
        #EFCB73 100%
    );
}


/* -------------------------
   Patch 013 — more white for PREMIUM PLUS title
   ------------------------- */

/* PREMIUM PLUS: больше белого, красный оставлен мягким акцентом. */
.donate-card-vip-tier-4 {
    --tier-title-gradient: linear-gradient(
        127deg,
        #FFFFFF 0%,
        #FFFFFF 32%,
        #FFF8F9 50%,
        #F3BBC3 65%,
        #FFFFFF 82%,
        #EDABB4 100%
    );
}


/* -------------------------
   Patch 016 — footer document link hover
   ------------------------- */

.footer-legal-links a {
    display: inline-block;
    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
    will-change: transform;
}

.footer-legal-links a:hover,
.footer-legal-links a:focus-visible {
    color: #5F82C8;
    transform: translateY(-2px);
}

[data-theme="dark"] .footer-legal-links a:hover,
[data-theme="dark"] .footer-legal-links a:focus-visible {
    color: #9DBBEF;
}


/* -------------------------
   Patch 017 — agreement document links
   ------------------------- */

.vip-article-agreement-text a {
    color: inherit;
    font-weight: 800;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition:
        color var(--transition-fast),
        opacity var(--transition-fast);
}

.vip-article-agreement-text a:hover,
.vip-article-agreement-text a:focus-visible {
    color: #5F82C8;
    opacity: 0.95;
}

[data-theme="dark"] .vip-article-agreement-text a:hover,
[data-theme="dark"] .vip-article-agreement-text a:focus-visible {
    color: #9DBBEF;
}


/* -------------------------
   Patch 019 — agreement text as one visual line
   ------------------------- */

.vip-article-agreement {
    gap: 10px !important;
    width: min(100%, 980px) !important;
    padding: 14px 18px !important;
}

.vip-article-agreement-text {
    display: block !important;
    min-height: auto !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: clip;
    font-size: clamp(0.66rem, 0.82vw, 0.76rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.035em !important;
}

.vip-article-agreement-text a {
    display: inline !important;
    white-space: nowrap !important;
}


/* -------------------------
   Patch 020 — agreement text in two centered lines
   ------------------------- */

.vip-article-agreement {
    align-items: center !important;
    gap: 14px !important;
    width: min(100%, 860px) !important;
    padding: 16px 20px !important;
}

.vip-article-agreement-box {
    flex: 0 0 auto !important;
    align-self: center !important;
}

.vip-article-agreement-text {
    display: block !important;
    min-height: auto !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    font-size: clamp(0.86rem, 1vw, 0.98rem) !important;
    line-height: 1.32 !important;
    letter-spacing: -0.015em !important;
}

.vip-article-agreement-text a {
    display: inline !important;
    white-space: nowrap !important;
}


/* -------------------------
   Patch 021 — rules page
   ------------------------- */

.rules-page {
    min-height: 100vh;
}

.rules-main {
    overflow: hidden;
}

.rules-hero {
    position: relative;
    min-height: 72vh;
    padding: 160px 0 80px;
    display: flex;
    align-items: center;
}

.rules-hero::before,
.rules-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(6px);
    opacity: 0.72;
}

.rules-hero::before {
    width: 420px;
    height: 420px;
    right: -120px;
    top: 110px;
    background:
        radial-gradient(circle, rgba(157, 187, 239, 0.34), transparent 68%);
}

.rules-hero::after {
    width: 360px;
    height: 360px;
    left: -110px;
    bottom: 10px;
    background:
        radial-gradient(circle, rgba(239, 164, 164, 0.30), transparent 70%);
}

.rules-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
}

.rules-eyebrow {
    margin: 0 0 18px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.32em;
    color: var(--pastel-blue);
}

.rules-hero h1 {
    margin: 0;
    max-width: 760px;
    font-size: clamp(3.2rem, 9vw, 8.8rem);
    line-height: 0.86;
    letter-spacing: -0.085em;
    color: var(--text-dark);
    text-transform: uppercase;
}

.rules-hero-text {
    max-width: 720px;
    margin: 28px 0 0;
    color: var(--text-muted);
    font-size: clamp(1.02rem, 1.5vw, 1.22rem);
    line-height: 1.68;
    font-weight: 650;
}

.rules-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.rules-primary-link,
.rules-secondary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition:
        transform var(--transition-fast),
        color var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.rules-primary-link {
    color: var(--blue-text);
    background:
        linear-gradient(135deg, rgba(157, 187, 239, 0.94), rgba(239, 164, 164, 0.82));
    box-shadow: 0 18px 34px rgba(157, 187, 239, 0.26);
}

.rules-secondary-link {
    color: var(--text-main);
    border: 1px solid rgba(157, 187, 239, 0.42);
    background: rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(16px);
}

.rules-primary-link:hover,
.rules-secondary-link:hover,
.rules-primary-link:focus-visible,
.rules-secondary-link:focus-visible {
    transform: translateY(-2px);
}

.rules-hero-card {
    position: relative;
    overflow: hidden;
    min-height: 240px;
    padding: 30px;
    border: 1px solid rgba(157, 187, 239, 0.36);
    border-radius: 34px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.14)),
        radial-gradient(circle at 24% 18%, rgba(157, 187, 239, 0.38), transparent 44%),
        radial-gradient(circle at 82% 78%, rgba(239, 164, 164, 0.32), transparent 48%);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
}

.rules-hero-card::before {
    content: "";
    position: absolute;
    inset: -40%;
    background:
        linear-gradient(115deg, transparent 18%, rgba(255, 255, 255, 0.42) 42%, transparent 62%);
    transform: rotate(10deg);
    opacity: 0.48;
}

.rules-hero-card span,
.rules-hero-card strong,
.rules-hero-card p {
    position: relative;
    z-index: 1;
}

.rules-hero-card span {
    display: inline-flex;
    margin-bottom: 34px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(157, 187, 239, 0.22);
    color: var(--text-main);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rules-hero-card strong {
    display: block;
    color: var(--text-dark);
    font-size: clamp(2.2rem, 4vw, 3.8rem);
    line-height: 0.96;
    letter-spacing: -0.06em;
}

.rules-hero-card p {
    margin: 12px 0 0;
    color: var(--text-muted);
    font-weight: 800;
}

.rules-content-section {
    position: relative;
    padding: 30px 0 90px;
}

.rules-layout {
    display: grid;
    grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
    gap: clamp(22px, 3vw, 38px);
    align-items: start;
}

.rules-toc {
    position: sticky;
    top: 116px;
    padding: 20px;
    border: 1px solid rgba(157, 187, 239, 0.30);
    border-radius: 26px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.16));
    box-shadow: 0 18px 38px rgba(16, 33, 63, 0.08);
    backdrop-filter: blur(18px);
}

.rules-toc > p {
    margin: 0 0 14px;
    color: var(--text-dark);
    font-size: 0.86rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.rules-toc nav {
    display: grid;
    gap: 10px;
}

.rules-toc a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px 12px;
    align-items: center;
    padding: 12px;
    border-radius: 18px;
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.20);
    border: 1px solid transparent;
    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast);
}

.rules-toc a:hover,
.rules-toc a:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(157, 187, 239, 0.42);
    background: rgba(157, 187, 239, 0.18);
}

.rules-toc a span {
    grid-row: span 2;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(157, 187, 239, 0.62), rgba(239, 164, 164, 0.48));
    font-weight: 950;
}

.rules-toc a strong {
    font-size: 0.94rem;
    line-height: 1.1;
}

.rules-toc a em {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-style: normal;
    font-weight: 800;
}

.rules-content {
    display: grid;
    gap: 24px;
}

.rules-chapter {
    scroll-margin-top: 128px;
    overflow: hidden;
    border: 1px solid rgba(157, 187, 239, 0.28);
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.18));
    box-shadow: 0 22px 54px rgba(16, 33, 63, 0.08);
    backdrop-filter: blur(16px);
}

.rules-chapter-heading {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: clamp(20px, 3vw, 30px);
    border-bottom: 1px solid rgba(157, 187, 239, 0.24);
    background:
        radial-gradient(circle at 18% 10%, rgba(157, 187, 239, 0.22), transparent 34%),
        radial-gradient(circle at 82% 14%, rgba(239, 164, 164, 0.18), transparent 34%);
}

.rules-chapter-heading span {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    color: var(--blue-text);
    background:
        linear-gradient(135deg, rgba(157, 187, 239, 0.95), rgba(239, 164, 164, 0.72));
    box-shadow: 0 14px 28px rgba(157, 187, 239, 0.22);
    font-size: 1.18rem;
    font-weight: 950;
}

.rules-chapter-heading h2 {
    margin: 0;
    color: var(--text-dark);
    font-size: clamp(1.65rem, 3.2vw, 2.7rem);
    line-height: 1;
    letter-spacing: -0.055em;
}

.rules-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rules-rule {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 18px;
    padding: clamp(16px, 2.2vw, 24px) clamp(18px, 3vw, 30px);
    border-bottom: 1px solid rgba(157, 187, 239, 0.18);
    transition:
        background var(--transition-fast),
        transform var(--transition-fast);
}

.rules-rule:last-child {
    border-bottom: 0;
}

.rules-rule:target {
    background:
        linear-gradient(90deg, rgba(157, 187, 239, 0.22), rgba(239, 164, 164, 0.12));
}

.rules-rule:hover {
    background: rgba(157, 187, 239, 0.10);
}

.rules-rule-number {
    width: 72px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--text-dark);
    background: rgba(157, 187, 239, 0.20);
    font-size: 0.88rem;
    font-weight: 950;
}

.rules-rule p {
    margin: 0;
    color: var(--text-main);
    font-size: clamp(0.96rem, 1.1vw, 1.06rem);
    line-height: 1.68;
    font-weight: 650;
}

[data-theme="dark"] .rules-secondary-link,
[data-theme="dark"] .rules-hero-card,
[data-theme="dark"] .rules-toc,
[data-theme="dark"] .rules-chapter {
    background:
        linear-gradient(145deg, rgba(15, 23, 42, 0.62), rgba(15, 23, 42, 0.28));
    border-color: rgba(95, 130, 200, 0.34);
}

[data-theme="dark"] .rules-toc a,
[data-theme="dark"] .rules-rule-number {
    background: rgba(95, 130, 200, 0.16);
}

[data-theme="dark"] .rules-rule:hover {
    background: rgba(95, 130, 200, 0.13);
}

@media (max-width: 980px) {
    .rules-hero {
        min-height: auto;
        padding: 140px 0 58px;
    }

    .rules-hero-inner,
    .rules-layout {
        grid-template-columns: 1fr;
    }

    .rules-hero-card {
        min-height: 190px;
    }

    .rules-toc {
        position: relative;
        top: auto;
    }

    .rules-toc nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .rules-hero {
        padding-top: 124px;
    }

    .rules-hero-actions {
        display: grid;
    }

    .rules-primary-link,
    .rules-secondary-link {
        width: 100%;
    }

    .rules-toc nav {
        grid-template-columns: 1fr;
    }

    .rules-chapter {
        border-radius: 24px;
    }

    .rules-chapter-heading {
        align-items: flex-start;
    }

    .rules-chapter-heading span {
        width: 44px;
        height: 44px;
        border-radius: 15px;
    }

    .rules-rule {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .rules-rule-number {
        width: max-content;
        padding: 0 14px;
    }
}


/* -------------------------
   Patch 022 — rules page cleanup
   ------------------------- */

.rules-compact-hero {
    min-height: 58vh;
}

.rules-page .shop-compact-eyebrow {
    color: var(--pastel-blue);
}

.rules-page .shop-compact-title {
    max-width: 1100px;
}

/* Old rules hero layout is no longer used, but keep it harmless if cached HTML appears. */
.rules-hero-card,
.rules-hero-text,
.rules-hero-actions {
    display: none !important;
}

.rules-layout {
    align-items: start !important;
}

.rules-toc {
    position: sticky !important;
    top: 104px !important;
    max-height: calc(100vh - 128px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    z-index: 6;
}

.rules-toc::-webkit-scrollbar {
    width: 8px;
}

.rules-toc::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(157, 187, 239, 0.42);
}

@media (max-width: 980px) {
    .rules-toc {
        position: relative !important;
        top: auto !important;
        max-height: none;
        overflow: visible;
    }
}








/* -------------------------
   Patch 026 — rules hero uses shop text formatting and lower position
   ------------------------- */

/*
   Текст НЕ форматируется отдельными rules-селекторами.
   Он использует те же классы, что и магазин:
   .shop-compact-eyebrow
   .shop-compact-title
*/

.rules-compact-hero {
    min-height: 62vh !important;
    padding: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

.rules-compact-hero .shop-hero-content {
    padding-top: 31vh !important;
    padding-left: var(--container-padding) !important;
    padding-right: var(--container-padding) !important;
}

/* Убираем любые старые индивидуальные ограничения для заголовка правил. */
.rules-compact-hero .shop-compact-eyebrow,
.rules-compact-hero .shop-compact-title {
    max-width: none !important;
}

@media (max-width: 680px) {
    .rules-compact-hero {
        min-height: 56vh !important;
    }

    .rules-compact-hero .shop-hero-content {
        padding-top: 29vh !important;
    }
}


/* -------------------------
   Patch 031 — CD glint for gold and diamond cards
   ------------------------- */

.donate-card-vip-tier-3 .donate-card-shine,
.donate-card-vip-tier-4 .donate-card-shine {
    opacity: calc(0.34 + var(--tilt-strength, 0) * 0.5);
    background:
        radial-gradient(
            circle at var(--cd-light-x, 50%) var(--cd-light-y, 50%),
            rgba(255, 255, 255, 0.62) 0%,
            rgba(255, 255, 255, 0.30) 12%,
            transparent 30%
        ),
        conic-gradient(
            from calc(var(--cd-angle, 0deg) + 28deg) at var(--cd-light-x, 50%) var(--cd-light-y, 50%),
            transparent 0deg,
            rgba(255, 255, 255, 0.46) 28deg,
            transparent 54deg,
            transparent 92deg,
            rgba(255, 255, 255, 0.26) 126deg,
            transparent 158deg,
            transparent 210deg,
            rgba(255, 255, 255, 0.34) 246deg,
            transparent 286deg,
            transparent 360deg
        );
    mix-blend-mode: screen;
    filter: blur(0.2px);
    transform:
        translate3d(
            calc(var(--cd-mouse-x, 0px) * 0.18),
            calc(var(--cd-mouse-y, 0px) * 0.18),
            0
        )
        rotate(calc(var(--cd-angle, 0deg) * 0.08));
}

.donate-card-vip-tier-3 .donate-card-inner::after,
.donate-card-vip-tier-4 .donate-card-inner::after {
    content: "";
    position: absolute;
    inset: -18%;
    z-index: 3;
    pointer-events: none;
    border-radius: inherit;
    opacity: calc(0.18 + var(--tilt-strength, 0) * 0.34);
    background:
        repeating-conic-gradient(
            from calc(var(--cd-angle, 0deg) - 18deg) at var(--cd-light-x, 50%) var(--cd-light-y, 50%),
            rgba(255, 255, 255, 0.00) 0deg,
            rgba(255, 255, 255, 0.12) 7deg,
            rgba(255, 255, 255, 0.00) 15deg,
            rgba(255, 255, 255, 0.00) 31deg
        );
    mix-blend-mode: screen;
    mask-image:
        radial-gradient(
            ellipse at var(--cd-light-x, 50%) var(--cd-light-y, 50%),
            #000 0%,
            #000 42%,
            transparent 72%
        );
    transform:
        translate3d(
            calc(var(--cd-mouse-x, 0px) * -0.10),
            calc(var(--cd-mouse-y, 0px) * -0.10),
            0
        );
}

/* Gold card: keep gold palette, only add warmer CD reflection. */
.donate-card-vip-tier-3 .donate-card-inner::after {
    background:
        repeating-conic-gradient(
            from calc(var(--cd-angle, 0deg) - 18deg) at var(--cd-light-x, 50%) var(--cd-light-y, 50%),
            rgba(255, 255, 255, 0.00) 0deg,
            rgba(255, 248, 210, 0.16) 7deg,
            rgba(255, 255, 255, 0.00) 15deg,
            rgba(255, 255, 255, 0.00) 31deg
        );
}

/* Diamond card: keep aquamarine/white palette, only add colder CD reflection. */
.donate-card-vip-tier-4 .donate-card-inner::after {
    background:
        repeating-conic-gradient(
            from calc(var(--cd-angle, 0deg) - 18deg) at var(--cd-light-x, 50%) var(--cd-light-y, 50%),
            rgba(255, 255, 255, 0.00) 0deg,
            rgba(220, 255, 252, 0.17) 7deg,
            rgba(255, 255, 255, 0.00) 15deg,
            rgba(255, 255, 255, 0.00) 31deg
        );
}

/* -------------------------
   Patch 031–033 — footer table alignment
   ------------------------- */
.footer-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* три колонки равномерно растянуты по ширине футера */
    justify-items: stretch; /* каждая колонка занимает всю свою область */
    align-items: start; /* верх колонок на одной линии */
    text-align: left; /* содержимое колонок по левому краю */
    column-gap: clamp(36px, 6vw, 96px); /* красивое расстояние между колонками */
}

.footer-brand,
.footer-column {
    width: 100%; /* колонка занимает всю доступную треть */
    max-width: none; /* не сжимает контент внутри колонки */
    display: flex; /* собирает элементы колонкой */
    flex-direction: column; /* вертикальное расположение */
    align-items: flex-start; /* содержимое по левому краю */
    text-align: left; /* текст по левому краю */
}

.footer-logo {
    width: 100%; /* логотип занимает ширину колонки */
    justify-content: flex-start; /* логотип с текстом прижат к левому краю */
    text-align: left; /* текст рядом с логотипом тоже слева */
}

.footer-title {
    width: 100%; /* заголовок занимает всю ширину колонки */
    text-align: center; /* названия колонок по центру */
}

.footer-description {
    width: 100%; /* описание занимает ширину колонки */
    max-width: none; /* не зажимает переносы */
    text-align: left; /* текст описания по левому краю */
}

.footer-links {
    width: 100%; /* список разделов занимает ширину колонки */
    align-items: flex-start; /* пункты списка по левому краю */
    text-align: left; /* текст ссылок по левому краю */
}

.footer-links a {
    text-align: left; /* каждая ссылка по левому краю */
}

.footer-inner > .footer-column:nth-child(2) .footer-links {
    align-items: center; /* содержимое разделов по центру */
    text-align: center; /* список разделов центрирован */
}

.footer-inner > .footer-column:nth-child(2) .footer-links a {
    text-align: center; /* пункты разделов по центру */
}

.footer-links a:hover {
    transform: none; /* убирает боковой сдвиг, чтобы таблица не прыгала */
}

.footer-server-text {
    width: 100%; /* блок поддержки занимает ширину колонки */
    max-width: none; /* длинная строка не центрируется узким блоком */
    text-align: left; /* контакты поддержки по левому краю */
}

.footer-bottom-requisites p {
    margin: 0; /* исполнитель и ИНН остаются одним компактным блоком */
}

@media (max-width: 900px) {
    .footer-inner {
        grid-template-columns: 1fr; /* на планшете колонки идут вертикально */
        justify-items: stretch; /* колонка остаётся на всю ширину */
        text-align: left; /* содержимое не уезжает в центр */
        row-gap: 36px; /* расстояние между колонками */
    }

    .footer-brand,
    .footer-column {
        align-items: flex-start; /* содержимое остаётся по левому краю */
        text-align: left; /* текст остаётся слева */
    }

    .footer-logo {
        justify-content: flex-start; /* логотип GREAT LIFE остаётся слева */
        text-align: left; /* текст рядом с логотипом слева */
    }

    .footer-title {
        text-align: center; /* названия остальных колонок по центру */
    }

    .footer-description,
    .footer-links,
    .footer-server-text {
        text-align: left; /* тело колонок по левому краю */
    }

    .footer-inner > .footer-column:nth-child(2) .footer-links {
        align-items: center; /* разделы остаются по центру */
        text-align: center; /* список разделов центрирован */
    }

    .footer-inner > .footer-column:nth-child(2) .footer-links a {
        text-align: center; /* пункты разделов по центру */
    }
}

@media (max-width: 620px) {
    .footer-bottom {
        align-items: flex-start; /* нижняя часть тоже читается слева */
        text-align: left; /* юридический текст слева */
    }

    .footer-legal-text {
        align-items: flex-start; /* юридические строки слева */
        text-align: left; /* текст слева */
    }

    .footer-legal-links {
        align-items: flex-start; /* ссылки документов слева */
        text-align: left; /* текст ссылок слева */
    }
}


/* -------------------------
   Patch 039 — hero server IP chip
   ------------------------- */
.hero-server-chip {
    margin-top: 28px; /* расстояние от заголовка до IP-капсулы */
    padding: 12px 24px 13px; /* размер капсулы */
    min-width: min(312px, calc(100vw - 48px)); /* стабильная ширина без переполнения */

    display: inline-flex; /* label и IP внутри одной капсулы */
    flex-direction: column; /* две строки */
    align-items: center; /* центрирует текст внутри капсулы */
    justify-content: center; /* центрирует вертикально */
    gap: 5px; /* расстояние между label и IP */

    border: 1px solid rgba(157, 187, 239, 0.45); /* тонкая синяя рамка */
    border-radius: var(--radius-pill); /* капсула */
    background: rgba(247, 248, 252, 0.66); /* стеклянный светлый фон */
    color: var(--blue-text); /* основной текст */
    box-shadow: 0 16px 34px rgba(16, 33, 63, 0.12); /* мягкая тень */
    backdrop-filter: blur(12px); /* стеклянность */
    -webkit-backdrop-filter: blur(12px); /* Safari */

    cursor: pointer; /* показывает, что IP копируется */
    user-select: none; /* не выделяет текст при клике */
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast), filter var(--transition-fast); /* плавный hover */
}

.hero-server-chip:hover {
    transform: translateY(-3px); /* мягкий подъём */
    border-color: rgba(95, 130, 200, 0.58); /* рамка активнее */
    background: rgba(157, 187, 239, 0.18); /* лёгкая синяя подсветка */
    box-shadow: 0 22px 46px rgba(95, 130, 200, 0.22); /* премиальная подсветка */
}

.hero-server-chip:active {
    transform: translateY(-1px) scale(0.985); /* ощущение клика */
}

.hero-server-chip:focus-visible {
    outline: 3px solid rgba(157, 187, 239, 0.85); /* доступность с клавиатуры */
    outline-offset: 4px; /* отступ рамки */
}

.hero-server-chip-label {
    font-size: 11px; /* маленький технический label */
    font-weight: 800; /* плотный label */
    line-height: 1; /* компактная высота */
    letter-spacing: 0.18em; /* премиальная разрядка */
    color: var(--text-muted); /* второстепенный текст */
}

.hero-server-chip-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* моноширный IP */
    font-size: clamp(15px, 2.1vw, 18px); /* читаемый IP */
    font-weight: 800; /* плотный IP */
    line-height: 1.05; /* компактно */
    letter-spacing: 0.06em; /* аккуратная техническая разрядка */
    color: var(--blue-text); /* основной цвет IP */
    text-transform: uppercase; /* единый вид */
}

.hero-server-chip-copied {
    border-color: rgba(95, 130, 200, 0.72); /* подтверждение копирования */
    background: rgba(157, 187, 239, 0.24); /* активный фон */
    box-shadow: 0 22px 48px rgba(95, 130, 200, 0.28); /* активная подсветка */
}

[data-theme="dark"] .hero-server-chip {
    border-color: rgba(95, 130, 200, 0.34); /* более спокойная рамка тёмной темы */
    background: rgba(12, 18, 31, 0.72); /* темнее, чем прежний синий фон */
    color: #EEF4FF; /* светлый текст */
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34), 0 0 22px rgba(95, 130, 200, 0.10); /* плотная тёмная тень */
}

[data-theme="dark"] .hero-server-chip:hover {
    border-color: rgba(157, 187, 239, 0.50); /* активная рамка */
    background: rgba(16, 25, 43, 0.82); /* тёмная подсветка без пересвета */
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.42), 0 0 32px rgba(95, 130, 200, 0.18); /* мягкий glow */
}

[data-theme="dark"] .hero-server-chip-label {
    color: #AFC2EA; /* второстепенный светлый label */
}

[data-theme="dark"] .hero-server-chip-value {
    color: #EEF4FF; /* IP в тёмной теме */
}

[data-theme="dark"] .hero-server-chip-copied {
    border-color: rgba(157, 187, 239, 0.62); /* подтверждение в тёмной теме */
    background: rgba(22, 34, 58, 0.88); /* тёмный активный фон */
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.44), 0 0 38px rgba(95, 130, 200, 0.24); /* активная подсветка */
}

@media (max-width: 520px) {
    .hero-server-chip {
        min-width: min(280px, calc(100vw - 40px)); /* компактнее на телефонах */
        padding: 11px 18px 12px; /* меньше внутренние отступы */
    }

    .hero-server-chip-label {
        font-size: 10px; /* меньше label */
        letter-spacing: 0.14em; /* меньше разрядка */
    }

    .hero-server-chip-value {
        font-size: 14px; /* IP помещается на узком экране */
        letter-spacing: 0.045em; /* меньше разрядка */
    }
}

/* -------------------------
   Patch 042 — map button without border and light-theme green bleed
   ------------------------- */
.map-open-button {
    border: none !important; /* убирает обводку */
    background: rgba(247, 248, 252, 0.88) !important; /* плотный светлый фон, не просвечивает зелёную карту */
    color: var(--blue-text) !important; /* цвет текста как у IP-кнопки */
    box-shadow: 0 16px 34px rgba(16, 33, 63, 0.12) !important; /* мягкая тень как у IP-кнопки */
    backdrop-filter: blur(12px) !important; /* стеклянность без ухода в прозрачность */
    -webkit-backdrop-filter: blur(12px) !important; /* Safari */
}

.map-open-button:hover {
    border: none !important; /* hover тоже без обводки */
    background: rgba(247, 248, 252, 0.96) !important; /* в светлой теме не уходит в зелёный/прозрачный фон */
    box-shadow: 0 22px 46px rgba(95, 130, 200, 0.22) !important; /* hover-подсветка как у IP-кнопки */
}

[data-theme="dark"] .map-open-button {
    border: none !important; /* в тёмной теме тоже без обводки */
    background: rgba(12, 18, 31, 0.72) !important; /* тёмный фон IP-кнопки */
    color: #EEF4FF !important; /* светлый текст IP-кнопки */
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34), 0 0 22px rgba(95, 130, 200, 0.10) !important; /* тень как у IP-кнопки */
}

[data-theme="dark"] .map-open-button:hover {
    border: none !important; /* hover без обводки */
    background: rgba(16, 25, 43, 0.82) !important; /* hover-фон как у IP-кнопки */
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.42), 0 0 32px rgba(95, 130, 200, 0.18) !important; /* hover-glow как у IP-кнопки */
}

/* -------------------------
   Patch 043 — IP chip without border and denser light background
   ------------------------- */
.hero-server-chip {
    border: none !important; /* убирает обводку IP-кнопки */
    background: rgba(247, 248, 252, 0.88) !important; /* плотный белый фон вместо бирюзового оттенка */
    box-shadow: 0 16px 34px rgba(16, 33, 63, 0.12) !important; /* мягкая тень без рамки */
}

.hero-server-chip:hover {
    border: none !important; /* hover тоже без обводки */
    background: rgba(247, 248, 252, 0.96) !important; /* более плотный белый фон в светлой теме */
    box-shadow: 0 22px 46px rgba(95, 130, 200, 0.22) !important; /* оставляет аккуратную подсветку */
}

.hero-server-chip-copied {
    border: none !important; /* состояние копирования без обводки */
    background: rgba(247, 248, 252, 0.96) !important; /* без бирюзового активного фона */
    box-shadow: 0 22px 48px rgba(95, 130, 200, 0.24) !important; /* подтверждение через тень, не через цвет фона */
}

[data-theme="dark"] .hero-server-chip {
    border: none !important; /* в тёмной теме тоже без обводки */
    background: rgba(12, 18, 31, 0.72) !important; /* сохраняет тёмный фон как у кнопки карты */
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34), 0 0 22px rgba(95, 130, 200, 0.10) !important; /* тень как у кнопки карты */
}

[data-theme="dark"] .hero-server-chip:hover {
    border: none !important; /* hover без обводки */
    background: rgba(16, 25, 43, 0.82) !important; /* hover-фон как у кнопки карты */
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.42), 0 0 32px rgba(95, 130, 200, 0.18) !important; /* hover-glow как у кнопки карты */
}

[data-theme="dark"] .hero-server-chip-copied {
    border: none !important; /* copied без обводки */
    background: rgba(16, 25, 43, 0.86) !important; /* тёмное подтверждение без синей заливки */
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.44), 0 0 38px rgba(95, 130, 200, 0.22) !important; /* подтверждение через свечение */
}

/* -------------------------
   Shop patch 021-023
   Scrollable theme-aware shop background images.
   Body keeps the gradient; the image is a separate 50% layer above it and below content.
   ------------------------- */

body.shop-page {
    position: relative; /* база для фонового слоя страницы магазина */
    display: flex; /* sticky footer без position: fixed */
    flex-direction: column; /* header, main, footer идут вертикально */
    min-height: 100vh; /* старые браузеры */
    min-height: 100dvh; /* футер прижат к низу видимой области */
    isolation: isolate; /* слои магазина не конфликтуют с остальным сайтом */
    overflow-x: hidden; /* обрезает увеличенную картинку по бокам */

    --shop-bg-image: none; /* фон светлой темы */
    --shop-bg-size: auto 108%; /* картинка выше области страницы и обрезается по краям */
    --shop-bg-opacity: 0.5; /* прозрачность только картинки, не контента */
}

body.shop-page::before {
    content: "";
    position: absolute; /* фон прокручивается вместе со страницей, не закрепляется к экрану */
    inset: 0;
    z-index: 0; /* выше gradient background страницы */
    pointer-events: none;

    background-image: var(--shop-bg-image);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: var(--shop-bg-size);
    opacity: var(--shop-bg-opacity);
}

body.shop-page::after {
    content: none; /* старый декоративный слой не должен перекрывать картинку */
}

body.shop-page > main,
body.shop-page > .site-footer {
    position: relative; /* контент выше фоновой картинки */
    z-index: 1;
}

body.shop-page > main {
    flex: 1 0 auto; /* растягивает контент и прижимает футер вниз */
}

body.shop-page > .site-footer {
    flex: 0 0 auto; /* футер не сжимается и стоит внизу страницы */
}

body.shop-page > .header {
    z-index: 100; /* не трогаем position: fixed у общей шапки */
}

body.shop-page > .site-toast {
    z-index: 1200; /* не трогаем position: fixed у toast */
}

body.shop-page .shop-footer {
    margin-top: 80px; /* нормальный отступ от магазина, без подъёма футера */
}

html[data-theme="dark"] body.shop-page,
[data-theme="dark"] body.shop-page {
    --shop-bg-image: none; /* фон тёмной темы */
}

html[data-theme="dark"] body.shop-page::before,
[data-theme="dark"] body.shop-page::before {
    background-image: none !important; /* жёсткий fallback, если переменную перебьют старые патчи */
}

@media (max-aspect-ratio: 16 / 9) {
    body.shop-page {
        --shop-bg-size: auto 112%; /* на узких экранах сильнее кадрирует фон */
    }
}

@media (max-width: 700px) {
    body.shop-page {
        --shop-bg-size: auto 116%; /* мобильная обрезка по краям */
    }

    body.shop-page .shop-footer {
        margin-top: 56px; /* компактный отступ на телефонах */
    }
}

/* -------------------------
   Shop patch 024
   Identical image-layer logic for light and dark themes.
   Dark image is now saved with the same 16:9 framing as the light image.
   ------------------------- */

body.shop-page {
    position: relative !important; /* база абсолютных фоновых слоёв */
    display: flex !important; /* футер прижат к низу страницы без fixed */
    flex-direction: column !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    isolation: isolate !important;
    overflow-x: hidden !important;
    background:
        radial-gradient(circle at 16% 8%, rgba(255, 197, 197, 0.50), transparent 28%),
        radial-gradient(circle at 86% 4%, rgba(189, 213, 255, 0.62), transparent 34%),
        radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.62), transparent 34%),
        linear-gradient(135deg, #F6DADA 0%, #DDE9FF 48%, #F5F8FF 100%) !important;
    background-attachment: scroll !important;

    --shop-bg-image: none;
    --shop-bg-opacity: 0.5;
    --shop-bg-bottom-extra: 520px; /* уводит нижнюю границу изображения ниже футера */
    --shop-bg-fade-color: rgba(245, 248, 255, 0.84);
}

html[data-theme="dark"] body.shop-page,
[data-theme="dark"] body.shop-page {
    background:
        radial-gradient(circle at 16% 8%, rgba(198, 107, 107, 0.24), transparent 30%),
        radial-gradient(circle at 86% 4%, rgba(95, 130, 200, 0.34), transparent 36%),
        radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.05), transparent 36%),
        linear-gradient(135deg, #111827 0%, #18233A 48%, #080D18 100%) !important;
    background-attachment: scroll !important;

    --shop-bg-image: none;
    --shop-bg-fade-color: rgba(8, 13, 24, 0.88);
}

body.shop-page::before {
    content: "" !important;
    position: absolute !important; /* фон листается вместе со страницей */
    top: 0 !important;
    right: -7vw !important; /* одинаковая обрезка краёв */
    bottom: calc(var(--shop-bg-bottom-extra) * -1) !important;
    left: -7vw !important; /* одинаковая обрезка краёв */
    z-index: 0 !important;
    pointer-events: none !important;
    background: var(--shop-bg-image) center top / auto 100% no-repeat !important;
    opacity: var(--shop-bg-opacity) !important;
}

body.shop-page::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: calc(var(--shop-bg-bottom-extra) * -1) !important;
    left: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0) 72%,
            var(--shop-bg-fade-color) 100%
        ) !important; /* мягко прячет нижнюю границу картинки */
}

body.shop-page > main {
    position: relative !important;
    z-index: 1 !important;
    flex: 1 0 auto !important; /* main занимает свободную высоту */
}

body.shop-page > .site-footer {
    position: relative !important;
    z-index: 1 !important;
    flex: 0 0 auto !important;
    margin-top: auto !important; /* футер внизу страницы, а не поднимается к контенту */
}

body.shop-page > .header {
    z-index: 100 !important;
}

body.shop-page > .site-toast {
    z-index: 1200 !important;
}

body.shop-page .shop-footer {
    margin-top: auto !important;
}

@media (max-width: 700px) {
    body.shop-page {
        --shop-bg-bottom-extra: 360px;
    }

    body.shop-page::before {
        right: -18vw !important;
        left: -18vw !important;
    }
}

/* -------------------------
   Shop patch 025
   Footer stays at the bottom; background image scrolls with the page and is cropped only by the viewport edges.
   ------------------------- */

html {
    min-height: 100%;
}

body.shop-page {
    position: relative !important; /* база фоновых слоёв страницы */
    display: flex !important; /* sticky-footer без fixed */
    flex-direction: column !important; /* main растягивается, footer уходит вниз */
    min-height: 100vh !important; /* запас для старых браузеров */
    min-height: 100dvh !important; /* футер прижат к низу видимой области */
    overflow-x: hidden !important; /* обрезает увеличенную картинку по краям */
    overflow-y: auto !important; /* страница нормально листается */
    isolation: isolate !important; /* фоновые слои не лезут поверх сайта */
    background:
        radial-gradient(circle at 16% 8%, rgba(255, 197, 197, 0.50), transparent 28%),
        radial-gradient(circle at 86% 4%, rgba(189, 213, 255, 0.62), transparent 34%),
        radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.62), transparent 34%),
        linear-gradient(135deg, #F6DADA 0%, #DDE9FF 48%, #F5F8FF 100%) !important;
    background-attachment: scroll !important;

    --shop-bg-image: none;
    --shop-bg-opacity: 0.5;
    --shop-bg-bleed-x: clamp(120px, 10vw, 240px); /* картинка шире экрана и режется по бокам */
}

html[data-theme="light"] body.shop-page,
[data-theme="light"] body.shop-page {
    --shop-bg-image: none;
}

html[data-theme="dark"] body.shop-page,
[data-theme="dark"] body.shop-page {
    background:
        radial-gradient(circle at 16% 8%, rgba(198, 107, 107, 0.24), transparent 30%),
        radial-gradient(circle at 86% 4%, rgba(95, 130, 200, 0.34), transparent 36%),
        radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.05), transparent 36%),
        linear-gradient(135deg, #111827 0%, #18233A 48%, #080D18 100%) !important;
    background-attachment: scroll !important;

    --shop-bg-image: none;
}

body.shop-page::before {
    content: "" !important;
    position: absolute !important; /* фон двигается вместе со страницей */
    top: 0 !important;
    right: calc(var(--shop-bg-bleed-x) * -1) !important;
    bottom: 0 !important; /* не создаёт пустую прокрутку ниже футера */
    left: calc(var(--shop-bg-bleed-x) * -1) !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background-image: var(--shop-bg-image) !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: cover !important; /* режет края, а не показывает границы изображения */
    background-attachment: scroll !important;
    opacity: var(--shop-bg-opacity) !important;
    transform: none !important;
}

html[data-theme="light"] body.shop-page::before,
[data-theme="light"] body.shop-page::before {
    background-image: none !important;
}

html[data-theme="dark"] body.shop-page::before,
[data-theme="dark"] body.shop-page::before {
    background-image: none !important;
}

body.shop-page::after {
    content: none !important; /* убирает слой, который создавал визуальный разрыв внизу */
}

body.shop-page > main {
    position: relative !important;
    z-index: 1 !important;
    flex: 1 0 auto !important; /* main заполняет свободную высоту */
    min-height: 0 !important;
}

body.shop-page > .site-footer,
body.shop-page > footer.site-footer,
body.shop-page > footer.shop-footer {
    position: relative !important;
    z-index: 1 !important;
    flex: 0 0 auto !important;
    margin-top: auto !important; /* footer остаётся внизу страницы */
}

body.shop-page .shop-footer {
    margin-top: auto !important; /* перебивает старое margin-top: 80px/0 */
}

@media (max-width: 700px) {
    body.shop-page {
        --shop-bg-bleed-x: 22vw; /* на телефоне сильнее обрезает края */
    }
}


/* -------------------------
   Shop patch 026
   Theme-aware underlay only behind product cards.
   Category tabs stay outside this underlay.
   ------------------------- */

body.shop-page {
    --shop-products-underlay-bg:
        linear-gradient(135deg,
            rgba(247, 248, 252, 0.82) 0%,
            rgba(221, 233, 255, 0.72) 52%,
            rgba(250, 232, 232, 0.68) 100%); /* светлая подложка под карточками */
    --shop-products-underlay-border: rgba(255, 255, 255, 0.68); /* мягкая светлая граница */
    --shop-products-underlay-shadow:
        0 30px 90px rgba(80, 112, 170, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.74); /* объём под карточками */
}

html[data-theme="dark"] body.shop-page,
[data-theme="dark"] body.shop-page {
    --shop-products-underlay-bg:
        linear-gradient(135deg,
            rgba(8, 13, 24, 0.76) 0%,
            rgba(17, 24, 39, 0.72) 52%,
            rgba(36, 23, 52, 0.66) 100%); /* тёмная подложка под карточками */
    --shop-products-underlay-border: rgba(95, 130, 200, 0.22); /* синеватая граница в тёмной теме */
    --shop-products-underlay-shadow:
        0 34px 100px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(238, 244, 255, 0.08); /* тёмный объём под карточками */
}

body.shop-page .shop-catalog-panel::before {
    content: none !important; /* убирает старую общую подложку, которая попадала под категории */
    display: none !important;
}

body.shop-page .shop-catalog-panel {
    background: transparent !important; /* сама панель не рисует фон */
    box-shadow: none !important;
}

body.shop-page .shop-catalog-panel .shop-category-tabs {
    position: relative !important;
    z-index: 2 !important; /* категории остаются над страницей, но вне подложки карточек */
}

body.shop-page .shop-catalog-panel .shop-products,
body.shop-page .shop-catalog-panel #shopItems.shop-products {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
    padding: clamp(18px, 2vw, 28px) !important; /* внутренний воздух между подложкой и карточками */
    border: 1px solid var(--shop-products-underlay-border) !important;
    border-radius: 36px !important;
    background: var(--shop-products-underlay-bg) !important;
    box-shadow: var(--shop-products-underlay-shadow) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

@media (max-width: 700px) {
    body.shop-page .shop-catalog-panel .shop-products,
    body.shop-page .shop-catalog-panel #shopItems.shop-products {
        padding: 14px !important;
        border-radius: 28px !important;
    }
}

/* -------------------------
   Shop patch 027
   Slightly larger product-card underlay so perspective hover effects stay inside it.
   ------------------------- */

body.shop-page {
    --shop-products-underlay-padding-y: clamp(28px, 3vw, 44px);
    --shop-products-underlay-padding-x: clamp(26px, 3.2vw, 48px);
}

body.shop-page .shop-catalog-panel .shop-products,
body.shop-page .shop-catalog-panel #shopItems.shop-products {
    padding: var(--shop-products-underlay-padding-y) var(--shop-products-underlay-padding-x) !important;
    overflow: visible !important; /* карточки не режутся при перспективном hover */
}

@media (max-width: 700px) {
    body.shop-page {
        --shop-products-underlay-padding-y: 20px;
        --shop-products-underlay-padding-x: 18px;
    }
}

/* -------------------------
   Shop patch 028
   Larger product-card underlay for stronger perspective hover effects.
   ------------------------- */

body.shop-page {
    --shop-products-underlay-padding-y: clamp(40px, 4.5vw, 72px);
    --shop-products-underlay-padding-x: clamp(42px, 5vw, 84px);
}

body.shop-page .shop-catalog-panel .shop-products,
body.shop-page .shop-catalog-panel #shopItems.shop-products {
    border-radius: 42px !important;
}

@media (max-width: 700px) {
    body.shop-page {
        --shop-products-underlay-padding-y: 28px;
        --shop-products-underlay-padding-x: 24px;
    }

    body.shop-page .shop-catalog-panel .shop-products,
    body.shop-page .shop-catalog-panel #shopItems.shop-products {
        border-radius: 32px !important;
    }
}

/* -------------------------
   Shop patch 029
   Keep the enlarged underlay without changing product-card size.
   The grid no longer uses padding for the underlay, so cards keep their previous width.
   ------------------------- */

body.shop-page {
    --shop-products-underlay-outset-y: clamp(40px, 4.5vw, 72px);
    --shop-products-underlay-outset-x: clamp(42px, 5vw, 84px);
    --shop-products-underlay-radius: 42px;
}

body.shop-page .shop-catalog-panel .shop-products,
body.shop-page .shop-catalog-panel #shopItems.shop-products {
    isolation: isolate !important;
    padding: 0 !important; /* возвращает прежний размер карточек: подложка больше не съедает ширину сетки */
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
}

body.shop-page .shop-catalog-panel .shop-products::before,
body.shop-page .shop-catalog-panel #shopItems.shop-products::before {
    content: "" !important;
    position: absolute !important;
    inset:
        calc(var(--shop-products-underlay-outset-y) * -1)
        calc(var(--shop-products-underlay-outset-x) * -1) !important;
    z-index: -1 !important;
    pointer-events: none !important;
    border: 1px solid var(--shop-products-underlay-border) !important;
    border-radius: var(--shop-products-underlay-radius) !important;
    background: var(--shop-products-underlay-bg) !important;
    box-shadow: var(--shop-products-underlay-shadow) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

body.shop-page .shop-catalog-panel .shop-products > *,
body.shop-page .shop-catalog-panel #shopItems.shop-products > * {
    position: relative !important;
    z-index: 1 !important;
}

@media (max-width: 700px) {
    body.shop-page {
        --shop-products-underlay-outset-y: 28px;
        --shop-products-underlay-outset-x: 24px;
        --shop-products-underlay-radius: 32px;
    }
}


/* -------------------------
   Shop patch 030
   Reduce product-card underlay without changing card size.
   ------------------------- */

body.shop-page {
    --shop-products-underlay-outset-y: clamp(26px, 3vw, 48px);
    --shop-products-underlay-outset-x: clamp(28px, 3.4vw, 56px);
    --shop-products-underlay-radius: 36px;
}

@media (max-width: 700px) {
    body.shop-page {
        --shop-products-underlay-outset-y: 20px;
        --shop-products-underlay-outset-x: 18px;
        --shop-products-underlay-radius: 28px;
    }
}

/* -------------------------
   Shop patch 031
   Move the product-card underlay block slightly lower.
   ------------------------- */

body.shop-page .shop-catalog-panel .shop-products,
body.shop-page .shop-catalog-panel #shopItems.shop-products {
    margin-top: clamp(18px, 2vw, 30px) !important; /* опускает только блок карточек с подложкой, категории остаются выше */
}

@media (max-width: 700px) {
    body.shop-page .shop-catalog-panel .shop-products,
    body.shop-page .shop-catalog-panel #shopItems.shop-products {
        margin-top: 16px !important;
    }
}

/* -------------------------
   Shop patch 032
   Items category uses four cards per row on desktop only.
   Privilege cards keep their current grid.
   ------------------------- */

@media (min-width: 1180px) {
    body.shop-page .shop-catalog-panel #shopItems.shop-products {
        max-width: 1460px !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 28px !important;
        row-gap: 34px !important;
    }
}

@media (min-width: 900px) and (max-width: 1179px) {
    body.shop-page .shop-catalog-panel #shopItems.shop-products {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 899px) {
    body.shop-page .shop-catalog-panel #shopItems.shop-products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    body.shop-page .shop-catalog-panel #shopItems.shop-products {
        grid-template-columns: 1fr !important;
    }
}

/* -------------------------
   Shop patch 033
   Keep shop backgrounds identical when switching categories.
   - Page background no longer rescales by category content height.
   - Card underlay uses one fixed visual width for privileges and items.
   ------------------------- */

body.shop-page {
    --shop-bg-layer-height: max(100vh, 1320px);
    --shop-products-underlay-width: min(1460px, calc(100vw - 64px));
}

body.shop-page::before {
    bottom: auto !important;
    height: var(--shop-bg-layer-height) !important;
    min-height: var(--shop-bg-layer-height) !important;
    background-size: cover !important; /* обрезает картинку по краям */
    background-position: center top !important;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%) !important;
}

body.shop-page .shop-catalog-panel .shop-products::before,
body.shop-page .shop-catalog-panel #shopItems.shop-products::before {
    top: calc(var(--shop-products-underlay-outset-y) * -1) !important;
    right: auto !important;
    bottom: calc(var(--shop-products-underlay-outset-y) * -1) !important;
    left: 50% !important;
    width: var(--shop-products-underlay-width) !important;
    transform: translateX(-50%) !important;
}

@media (max-width: 700px) {
    body.shop-page {
        --shop-bg-layer-height: max(100vh, 1040px);
        --shop-products-underlay-width: calc(100vw - 28px);
    }
}

/* -------------------------
   Shop patch 034
   Rename items tab to goods and add separate theme-aware underlays for goods categories.
   The main category tabs stay outside these underlays.
   ------------------------- */

body.shop-page .shop-catalog-panel #shopItems.shop-products.shop-goods-products {
    width: min(1460px, 100%) !important;
    max-width: 1460px !important;
    margin-inline: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: clamp(24px, 2.8vw, 38px) !important;
    grid-template-columns: none !important;
    perspective: none !important;
}

body.shop-page .shop-catalog-panel #shopItems.shop-products.shop-goods-products::before {
    content: none !important;
    display: none !important;
}

body.shop-page .shop-goods-category {
    position: relative !important;
    isolation: isolate !important;
    min-height: clamp(150px, 13vw, 210px) !important;
    padding: clamp(28px, 3vw, 46px) clamp(30px, 4vw, 60px) !important;
    overflow: hidden !important;
    border: 1px solid var(--shop-products-underlay-border) !important;
    border-radius: var(--shop-products-underlay-radius) !important;
    background: var(--shop-products-underlay-bg) !important;
    box-shadow: var(--shop-products-underlay-shadow) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

body.shop-page .shop-goods-category::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    background:
        radial-gradient(circle at 14% 0%, rgba(157, 187, 239, 0.20), transparent 38%),
        radial-gradient(circle at 92% 18%, rgba(239, 164, 164, 0.18), transparent 36%) !important;
    opacity: 0.86 !important;
}

html[data-theme="dark"] body.shop-page .shop-goods-category::before,
[data-theme="dark"] body.shop-page .shop-goods-category::before {
    background:
        radial-gradient(circle at 14% 0%, rgba(95, 130, 200, 0.18), transparent 38%),
        radial-gradient(circle at 92% 18%, rgba(198, 107, 107, 0.14), transparent 36%) !important;
    opacity: 0.92 !important;
}

body.shop-page .shop-goods-category-head {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
}

body.shop-page .shop-goods-category-kicker {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    padding: 7px 12px !important;
    border-radius: var(--radius-pill) !important;
    background: rgba(157, 187, 239, 0.18) !important;
    color: rgba(16, 33, 63, 0.68) !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

html[data-theme="dark"] body.shop-page .shop-goods-category-kicker,
[data-theme="dark"] body.shop-page .shop-goods-category-kicker {
    background: rgba(95, 130, 200, 0.16) !important;
    color: rgba(238, 244, 255, 0.66) !important;
}

body.shop-page .shop-goods-category h2 {
    margin: 0 !important;
    color: var(--text-main) !important;
    font-size: clamp(28px, 4.2vw, 52px) !important;
    line-height: 0.95 !important;
    font-weight: 900 !important;
    letter-spacing: -0.055em !important;
    text-transform: uppercase !important;
}

body.shop-page .shop-goods-category-grid {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
    margin-top: clamp(24px, 3vw, 40px) !important;
}

@media (max-width: 1100px) {
    body.shop-page .shop-goods-category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 820px) {
    body.shop-page .shop-goods-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    body.shop-page .shop-catalog-panel #shopItems.shop-products.shop-goods-products {
        gap: 22px !important;
    }

    body.shop-page .shop-goods-category {
        min-height: 132px !important;
        padding: 24px 20px !important;
        border-radius: 28px !important;
    }

    body.shop-page .shop-goods-category h2 {
        font-size: clamp(24px, 8vw, 34px) !important;
    }

    body.shop-page .shop-goods-category-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
}

body.shop-page .shop-catalog-panel #shopItems.shop-products.shop-goods-products[hidden] {
    display: none !important;
}


/* -------------------------
   Shop patch 035
   Goods categories: remove visible headings and add four empty product-card placeholders per category.
   ------------------------- */

body.shop-page .shop-goods-category-head,
body.shop-page .shop-goods-category-kicker,
body.shop-page .shop-goods-category h2 {
    display: none !important;
}

body.shop-page .shop-goods-category {
    min-height: auto !important;
    padding: clamp(26px, 2.8vw, 42px) clamp(28px, 3.8vw, 54px) !important;
}

body.shop-page .shop-goods-category-grid {
    margin-top: 0 !important;
    align-items: stretch !important;
}

body.shop-page .shop-goods-placeholder-card {
    position: relative !important;
    min-height: clamp(230px, 21vw, 330px) !important;
    border-radius: clamp(24px, 2.2vw, 34px) !important;
    border: 1px solid rgba(157, 187, 239, 0.30) !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.70), rgba(247, 248, 252, 0.42)),
        radial-gradient(circle at 18% 14%, rgba(157, 187, 239, 0.18), transparent 46%),
        radial-gradient(circle at 86% 12%, rgba(239, 164, 164, 0.16), transparent 42%) !important;
    box-shadow:
        0 18px 44px rgba(16, 33, 63, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.46) !important;
    overflow: hidden !important;
}

body.shop-page .shop-goods-placeholder-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 14px !important;
    border-radius: calc(clamp(24px, 2.2vw, 34px) - 10px) !important;
    border: 1px solid rgba(157, 187, 239, 0.18) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    pointer-events: none !important;
}

html[data-theme="dark"] body.shop-page .shop-goods-placeholder-card,
[data-theme="dark"] body.shop-page .shop-goods-placeholder-card {
    border-color: rgba(95, 130, 200, 0.32) !important;
    background:
        linear-gradient(145deg, rgba(17, 24, 39, 0.78), rgba(12, 18, 31, 0.52)),
        radial-gradient(circle at 18% 14%, rgba(95, 130, 200, 0.20), transparent 46%),
        radial-gradient(circle at 86% 12%, rgba(198, 107, 107, 0.16), transparent 42%) !important;
    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(238, 244, 255, 0.08) !important;
}

html[data-theme="dark"] body.shop-page .shop-goods-placeholder-card::before,
[data-theme="dark"] body.shop-page .shop-goods-placeholder-card::before {
    border-color: rgba(95, 130, 200, 0.18) !important;
    background: rgba(238, 244, 255, 0.035) !important;
}

@media (max-width: 640px) {
    body.shop-page .shop-goods-category {
        padding: 22px 18px !important;
    }

    body.shop-page .shop-goods-placeholder-card {
        min-height: 220px !important;
    }
}

/* -------------------------
   Shop patch 036
   Goods categories use the same donate-card structure as the original shop cards.
   ------------------------- */

body.shop-page .shop-goods-placeholder-card {
    display: none !important;
}

body.shop-page .shop-goods-category-grid > .donate-card.shop-goods-preview-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 420px !important;
}

body.shop-page .shop-goods-category-grid > .donate-card.shop-goods-preview-card .donate-card-inner {
    height: 100% !important;
}

body.shop-page .shop-goods-category-grid > .donate-card.shop-goods-preview-card .donate-card-image span {
    font-size: clamp(40px, 4.2vw, 64px) !important;
    letter-spacing: -0.075em !important;
}

body.shop-page .shop-goods-category-grid > .donate-card.shop-goods-preview-card p {
    min-height: 48px !important;
}

@media (max-width: 640px) {
    body.shop-page .shop-goods-category-grid > .donate-card.shop-goods-preview-card {
        min-height: 390px !important;
    }
}

/* -------------------------
   Shop patch 037
   Remove generated background images. Use a stronger theme gradient instead.
   Goods cards keep the same pointer perspective behavior as donate cards.
   ------------------------- */

body.shop-page {
    background:
        radial-gradient(circle at 12% 4%, rgba(239, 164, 164, 0.78), transparent 34%),
        radial-gradient(circle at 88% 2%, rgba(157, 187, 239, 0.82), transparent 36%),
        radial-gradient(circle at 52% 48%, rgba(255, 255, 255, 0.72), transparent 42%),
        radial-gradient(circle at 18% 92%, rgba(239, 164, 164, 0.42), transparent 34%),
        radial-gradient(circle at 86% 96%, rgba(157, 187, 239, 0.48), transparent 36%),
        linear-gradient(135deg, #F1CACA 0%, #D3E2FF 43%, #F7F8FC 100%) !important;
    background-attachment: scroll !important;
}

html[data-theme="dark"] body.shop-page,
[data-theme="dark"] body.shop-page {
    background:
        radial-gradient(circle at 12% 4%, rgba(198, 107, 107, 0.46), transparent 35%),
        radial-gradient(circle at 88% 2%, rgba(95, 130, 200, 0.58), transparent 38%),
        radial-gradient(circle at 50% 46%, rgba(95, 130, 200, 0.20), transparent 44%),
        radial-gradient(circle at 18% 92%, rgba(198, 107, 107, 0.30), transparent 36%),
        radial-gradient(circle at 88% 96%, rgba(95, 130, 200, 0.34), transparent 38%),
        linear-gradient(135deg, #22151E 0%, #172641 46%, #070B14 100%) !important;
    background-attachment: scroll !important;
}

body.shop-page::before,
html[data-theme="light"] body.shop-page::before,
[data-theme="light"] body.shop-page::before,
html[data-theme="dark"] body.shop-page::before,
[data-theme="dark"] body.shop-page::before {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
}

body.shop-page::after,
html[data-theme="light"] body.shop-page::after,
[data-theme="light"] body.shop-page::after,
html[data-theme="dark"] body.shop-page::after,
[data-theme="dark"] body.shop-page::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

body.shop-page .shop-catalog-panel #shopItems.shop-products.shop-goods-products,
body.shop-page .shop-goods-category,
body.shop-page .shop-goods-category-grid {
    perspective: 1000px !important;
    transform-style: preserve-3d !important;
}

body.shop-page .shop-goods-category {
    overflow: visible !important;
}

body.shop-page .shop-goods-category-grid > .donate-card.shop-goods-preview-card {
    transform: rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) scale(var(--card-scale)) translateZ(0) !important;
    transform-style: preserve-3d !important;
    will-change: transform !important;
}

body.shop-page .shop-goods-category-grid > .donate-card.shop-goods-preview-card:hover,
body.shop-page .shop-goods-category-grid > .donate-card.shop-goods-preview-card:focus-visible {
    --card-scale: 1.035;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
    body.shop-page .shop-goods-category-grid > .donate-card.shop-goods-preview-card:hover,
    body.shop-page .shop-goods-category-grid > .donate-card.shop-goods-preview-card:focus-visible {
        --card-scale: 1;
    }
}

/* -------------------------
   Shop patch 038
   Smaller multi-spot gradient + lightweight goods-card hover.
   The heavy JS holographic tilt is now used only for donate/VIP cards.
   ------------------------- */

body.shop-page {
    background:
        radial-gradient(circle at 8% 8%, rgba(239, 164, 164, 0.42), transparent 11%),
        radial-gradient(circle at 22% 14%, rgba(157, 187, 239, 0.34), transparent 10%),
        radial-gradient(circle at 39% 9%, rgba(188, 151, 238, 0.32), transparent 11%),
        radial-gradient(circle at 61% 13%, rgba(239, 164, 164, 0.30), transparent 10%),
        radial-gradient(circle at 82% 8%, rgba(157, 187, 239, 0.38), transparent 12%),
        radial-gradient(circle at 94% 22%, rgba(188, 151, 238, 0.24), transparent 10%),
        radial-gradient(circle at 12% 38%, rgba(188, 151, 238, 0.26), transparent 11%),
        radial-gradient(circle at 31% 43%, rgba(239, 164, 164, 0.22), transparent 10%),
        radial-gradient(circle at 50% 35%, rgba(157, 187, 239, 0.24), transparent 11%),
        radial-gradient(circle at 72% 45%, rgba(188, 151, 238, 0.26), transparent 10%),
        radial-gradient(circle at 90% 40%, rgba(239, 164, 164, 0.24), transparent 11%),
        radial-gradient(circle at 15% 72%, rgba(157, 187, 239, 0.28), transparent 11%),
        radial-gradient(circle at 36% 83%, rgba(188, 151, 238, 0.24), transparent 10%),
        radial-gradient(circle at 58% 76%, rgba(239, 164, 164, 0.24), transparent 11%),
        radial-gradient(circle at 78% 84%, rgba(157, 187, 239, 0.28), transparent 11%),
        radial-gradient(circle at 94% 70%, rgba(188, 151, 238, 0.22), transparent 10%),
        linear-gradient(135deg, #F7F8FC 0%, #F1E6FA 38%, #E9F0FF 68%, #F7F8FC 100%) !important;
    background-attachment: scroll !important;
}

html[data-theme="dark"] body.shop-page,
[data-theme="dark"] body.shop-page {
    background:
        radial-gradient(circle at 8% 8%, rgba(198, 107, 107, 0.28), transparent 12%),
        radial-gradient(circle at 22% 14%, rgba(95, 130, 200, 0.28), transparent 11%),
        radial-gradient(circle at 39% 9%, rgba(138, 92, 190, 0.30), transparent 12%),
        radial-gradient(circle at 61% 13%, rgba(198, 107, 107, 0.20), transparent 11%),
        radial-gradient(circle at 82% 8%, rgba(95, 130, 200, 0.34), transparent 12%),
        radial-gradient(circle at 94% 22%, rgba(138, 92, 190, 0.24), transparent 11%),
        radial-gradient(circle at 12% 38%, rgba(138, 92, 190, 0.24), transparent 12%),
        radial-gradient(circle at 31% 43%, rgba(198, 107, 107, 0.16), transparent 11%),
        radial-gradient(circle at 50% 35%, rgba(95, 130, 200, 0.20), transparent 12%),
        radial-gradient(circle at 72% 45%, rgba(138, 92, 190, 0.25), transparent 11%),
        radial-gradient(circle at 90% 40%, rgba(198, 107, 107, 0.18), transparent 12%),
        radial-gradient(circle at 15% 72%, rgba(95, 130, 200, 0.22), transparent 12%),
        radial-gradient(circle at 36% 83%, rgba(138, 92, 190, 0.22), transparent 11%),
        radial-gradient(circle at 58% 76%, rgba(198, 107, 107, 0.18), transparent 12%),
        radial-gradient(circle at 78% 84%, rgba(95, 130, 200, 0.24), transparent 12%),
        radial-gradient(circle at 94% 70%, rgba(138, 92, 190, 0.20), transparent 11%),
        linear-gradient(135deg, #111827 0%, #18142C 36%, #13213A 68%, #070B14 100%) !important;
    background-attachment: scroll !important;
}

/* -------------------------
   Shop patch 039
   Goods cards use the same pointer-tilt behavior as privilege cards.
   ------------------------- */

body.shop-page .shop-goods-category-grid > .donate-card.shop-goods-preview-card {
    transform: rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) scale(var(--card-scale)) translateZ(0) !important;
    transform-style: preserve-3d !important;
    backface-visibility: hidden !important;
    will-change: transform !important;
}

body.shop-page .shop-goods-category-grid > .donate-card.shop-goods-preview-card:hover,
body.shop-page .shop-goods-category-grid > .donate-card.shop-goods-preview-card:focus-visible {
    --card-scale: 1.075;
    z-index: 20;
}

body.shop-page .shop-goods-category-grid > .donate-card.shop-goods-preview-card[role="button"]:active {
    --card-scale: 1.035;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
    body.shop-page .shop-goods-category-grid > .donate-card.shop-goods-preview-card:hover,
    body.shop-page .shop-goods-category-grid > .donate-card.shop-goods-preview-card:focus-visible {
        --card-scale: 1;
    }
}

/* -------------------------
   Shop patch 040
   Stable goods-card perspective.
   - Goods cards use a static hitbox wrapper, so the transformed card no longer drops hover.
   - Perspective exists only on the goods grid/wrapper, not on every nested underlay.
   - Category underlay blur is removed to avoid 3D-layer recalculation glitches.
   ------------------------- */

body.shop-page .shop-catalog-panel #shopItems.shop-products.shop-goods-products,
body.shop-page .shop-goods-category {
    perspective: none !important;
    transform-style: flat !important;
}

body.shop-page .shop-goods-category {
    overflow: visible !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.shop-page .shop-goods-category-grid {
    perspective: 1000px !important;
    transform-style: preserve-3d !important;
    overflow: visible !important;
    align-items: stretch !important;
}

body.shop-page .shop-goods-card-hitbox {
    position: relative !important;
    z-index: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 30px !important;
    overflow: visible !important;
    perspective: 1000px !important;
    transform-style: preserve-3d !important;
}

body.shop-page .shop-goods-card-hitbox > .donate-card.shop-goods-preview-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 420px !important;
    height: 100% !important;
    transform: rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) scale(var(--card-scale)) translateZ(0) !important;
    transform-style: preserve-3d !important;
    backface-visibility: hidden !important;
    will-change: transform !important;
    transition:
        transform 0.16s ease,
        box-shadow var(--transition-normal),
        border-color var(--transition-normal),
        filter var(--transition-normal) !important;
}

body.shop-page .shop-goods-card-hitbox > .donate-card.shop-goods-preview-card .donate-card-inner {
    height: 100% !important;
}

body.shop-page .shop-goods-card-hitbox:hover,
body.shop-page .shop-goods-card-hitbox:focus-within {
    z-index: 30 !important;
}

body.shop-page .shop-goods-card-hitbox:hover > .donate-card.shop-goods-preview-card,
body.shop-page .shop-goods-card-hitbox:focus-within > .donate-card.shop-goods-preview-card,
body.shop-page .shop-goods-card-hitbox > .donate-card.shop-goods-preview-card.is-pointer-tilting {
    --card-scale: 1.075;
    --holo-opacity: 1;
    --cd-layer-opacity: 0.86;
    --shine-layer-opacity: 0.76;
    --cd-specular: 0.88;
    --frame-opacity: 1;
    --frame-glow: 0.54;
    --image-edge-opacity: 0.34;
    --image-impact-opacity: 0.32;
    z-index: 30 !important;
    border-color: rgba(255, 232, 128, 1.00) !important;
    box-shadow:
        0 34px 82px rgba(17, 24, 39, 0.24),
        0 0 0 1px rgba(255, 250, 207, 0.66),
        0 0 46px rgba(255, 205, 55, var(--frame-glow)) !important;
}

body.shop-page .shop-goods-card-hitbox:active > .donate-card.shop-goods-preview-card {
    --card-scale: 1.035;
}

body.shop-page .shop-goods-card-hitbox > .donate-card.shop-goods-preview-card .donate-card-image span {
    font-size: clamp(40px, 4.2vw, 64px) !important;
    letter-spacing: -0.075em !important;
}

body.shop-page .shop-goods-card-hitbox > .donate-card.shop-goods-preview-card p {
    min-height: 48px !important;
}

@media (max-width: 640px) {
    body.shop-page .shop-goods-card-hitbox > .donate-card.shop-goods-preview-card {
        min-height: 390px !important;
    }
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
    body.shop-page .shop-goods-card-hitbox > .donate-card.shop-goods-preview-card,
    body.shop-page .shop-goods-card-hitbox:hover > .donate-card.shop-goods-preview-card,
    body.shop-page .shop-goods-card-hitbox:focus-within > .donate-card.shop-goods-preview-card,
    body.shop-page .shop-goods-card-hitbox > .donate-card.shop-goods-preview-card.is-pointer-tilting {
        --card-scale: 1;
        transform: none !important;
    }
}

/* -------------------------
   Shop patch 041
   Goods category underlay corner cleanup.
   The transformed cards need overflow: visible, so the underlay is moved to a rounded pseudo-layer.
   ------------------------- */

body.shop-page .shop-goods-category {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: clamp(32px, 3vw, 48px) !important;
    overflow: visible !important;
}

body.shop-page .shop-goods-category::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    border: 1px solid var(--shop-products-underlay-border) !important;
    border-radius: inherit !important;
    background:
        radial-gradient(circle at 14% 0%, rgba(157, 187, 239, 0.20), transparent 38%),
        radial-gradient(circle at 92% 18%, rgba(239, 164, 164, 0.18), transparent 36%),
        var(--shop-products-underlay-bg) !important;
    box-shadow: var(--shop-products-underlay-shadow) !important;
    opacity: 1 !important;
}

html[data-theme="dark"] body.shop-page .shop-goods-category::before,
[data-theme="dark"] body.shop-page .shop-goods-category::before {
    background:
        radial-gradient(circle at 14% 0%, rgba(95, 130, 200, 0.18), transparent 38%),
        radial-gradient(circle at 92% 18%, rgba(198, 107, 107, 0.14), transparent 36%),
        var(--shop-products-underlay-bg) !important;
    opacity: 1 !important;
}


/* -------------------------
   Shop patch 042
   Privileges use the same category underlay structure as goods.
   VIP card size and tilt behavior are kept unchanged.
   ------------------------- */

body.shop-page .shop-catalog-panel #shopPrivileges.shop-products.shop-privileges-products {
    width: min(1460px, 100%) !important; /* та же внешняя ширина блока, что у товаров */
    max-width: 1460px !important;
    margin-inline: auto !important;
    display: flex !important; /* внешний блок работает как список категорий товаров */
    flex-direction: column !important;
    align-items: stretch !important;
    gap: clamp(24px, 2.8vw, 38px) !important;
    grid-template-columns: none !important; /* отключает старую grid-сетку shop-products */
    perspective: none !important;
}

body.shop-page .shop-catalog-panel #shopPrivileges.shop-products.shop-privileges-products::before {
    content: none !important; /* старая общая подложка не нужна: теперь подложка у категории */
    display: none !important;
}

body.shop-page .shop-catalog-panel #shopPrivileges.shop-products.shop-privileges-products[hidden] {
    display: none !important;
}

body.shop-page .shop-privileges-category {
    width: 100% !important;
}

body.shop-page .shop-privileges-category .shop-privileges-category-grid {
    width: 100% !important;
    max-width: 1220px !important; /* сохраняет прежний размер VIP-карточек */
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(300px, 1fr)) !important; /* прежняя VIP-сетка 3x2 */
    gap: 34px !important;
    perspective: 1000px !important; /* оставляет прежнюю перспективу VIP-карточек */
    transform-style: preserve-3d !important;
    overflow: visible !important;
    align-items: stretch !important;
}

body.shop-page .shop-privileges-category .donate-card-vip-tier {
    width: 100% !important;
    min-width: 0 !important;
}

body.shop-page .shop-privileges-category .donate-card-vip-tier h2 {
    display: block !important; /* отменяет скрытие h2, которое нужно только для заголовков товарных категорий */
    margin: 0 !important;
    color: transparent !important;
    font-size: clamp(42px, 3.5vw, 56px) !important;
    line-height: 1.02 !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
    text-align: center !important;
    text-transform: none !important;
    background: var(--tier-title-gradient) !important;
    background-size: 260% 260% !important;
    background-position: 46% 48% !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
    filter: none !important;
}

body.shop-page .shop-privileges-category .donate-card-vip-tier:hover h2,
body.shop-page .shop-privileges-category .donate-card-vip-tier:focus-visible h2 {
    background-position: 58% 42% !important;
}

@media (max-width: 1120px) {
    body.shop-page .shop-privileges-category .shop-privileges-category-grid {
        max-width: 820px !important;
        grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
    }
}

@media (max-width: 680px) {
    body.shop-page .shop-privileges-category .shop-privileges-category-grid {
        max-width: 360px !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 620px) {
    body.shop-page .shop-privileges-category .donate-card-vip-tier h2 {
        font-size: clamp(38px, 12vw, 48px) !important;
    }
}


/* -------------------------
   Shop patch 043
   Stable VIP-card pointer hitbox.
   VIP cards now use the same static hover area as goods cards, without changing card size or tilt strength.
   ------------------------- */

body.shop-page .shop-privileges-category .shop-vip-card-hitbox {
    position: relative !important;
    z-index: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 30px !important;
    overflow: visible !important;
    perspective: 1000px !important;
    transform-style: preserve-3d !important;
}

body.shop-page .shop-privileges-category .shop-vip-card-hitbox > .donate-card-vip-tier {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    transform: rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) scale(var(--card-scale)) translateZ(0) !important;
    transform-style: preserve-3d !important;
    backface-visibility: hidden !important;
    will-change: transform !important;
    transition:
        transform 0.16s ease,
        box-shadow var(--transition-normal),
        border-color var(--transition-normal),
        filter var(--transition-normal) !important;
}

body.shop-page .shop-privileges-category .shop-vip-card-hitbox:hover,
body.shop-page .shop-privileges-category .shop-vip-card-hitbox:focus-within {
    z-index: 30 !important;
}

body.shop-page .shop-privileges-category .shop-vip-card-hitbox:hover > .donate-card-vip-tier,
body.shop-page .shop-privileges-category .shop-vip-card-hitbox:focus-within > .donate-card-vip-tier,
body.shop-page .shop-privileges-category .shop-vip-card-hitbox > .donate-card-vip-tier.is-pointer-tilting {
    --card-scale: 1.075;
    --holo-opacity: 1;
    --cd-layer-opacity: 0.86;
    --shine-layer-opacity: 0.76;
    --cd-specular: 0.88;
    --frame-opacity: 1;
    --frame-glow: 0.54;
    --image-edge-opacity: 0.34;
    --image-impact-opacity: 0.32;
    z-index: 30 !important;
}

body.shop-page .shop-privileges-category .shop-vip-card-hitbox:active > .donate-card-vip-tier {
    --card-scale: 1.035;
}

body.shop-page .shop-privileges-category .shop-vip-card-hitbox:hover > .donate-card-vip-tier h2,
body.shop-page .shop-privileges-category .shop-vip-card-hitbox:focus-within > .donate-card-vip-tier h2,
body.shop-page .shop-privileges-category .shop-vip-card-hitbox > .donate-card-vip-tier.is-pointer-tilting h2 {
    background-position: 58% 42% !important;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
    body.shop-page .shop-privileges-category .shop-vip-card-hitbox > .donate-card-vip-tier,
    body.shop-page .shop-privileges-category .shop-vip-card-hitbox:hover > .donate-card-vip-tier,
    body.shop-page .shop-privileges-category .shop-vip-card-hitbox:focus-within > .donate-card-vip-tier,
    body.shop-page .shop-privileges-category .shop-vip-card-hitbox > .donate-card-vip-tier.is-pointer-tilting {
        --card-scale: 1;
        transform: none !important;
    }
}

/* -------------------------
   Shop patch 045
   Minimal category headings above each product underlay.
   Removes the extra kicker text and avoids heavy red accents.
   ------------------------- */

body.shop-page .shop-type-block {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: clamp(10px, 1.1vw, 16px) !important;
}

body.shop-page .shop-type-heading {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 clamp(10px, 1.8vw, 28px) !important;
}

body.shop-page .shop-type-heading::before {
    content: "" !important;
    display: block !important;
    width: clamp(28px, 4.2vw, 70px) !important;
    height: 1px !important;
    margin-right: clamp(10px, 1.1vw, 16px) !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, transparent, rgba(157, 187, 239, 0.82)) !important;
    box-shadow: 0 0 18px rgba(157, 187, 239, 0.16) !important;
}

body.shop-page .shop-type-heading::after {
    content: "" !important;
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 24px !important;
    height: 1px !important;
    margin-left: clamp(10px, 1.2vw, 18px) !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, rgba(157, 187, 239, 0.42), transparent) !important;
}

body.shop-page .shop-type-title {
    display: block !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    max-width: min(100%, 760px) !important;
    color: rgba(16, 33, 63, 0.86) !important;
    font-size: clamp(24px, 2.65vw, 40px) !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    letter-spacing: -0.035em !important;
    text-transform: none !important;
    background: linear-gradient(135deg, rgba(16, 33, 63, 0.94), rgba(16, 33, 63, 0.72) 52%, rgba(157, 187, 239, 0.92)) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
    filter: none !important;
}

html[data-theme="dark"] body.shop-page .shop-type-heading::before,
[data-theme="dark"] body.shop-page .shop-type-heading::before {
    background: linear-gradient(90deg, transparent, rgba(95, 130, 200, 0.88)) !important;
    box-shadow: 0 0 18px rgba(95, 130, 200, 0.18) !important;
}

html[data-theme="dark"] body.shop-page .shop-type-heading::after,
[data-theme="dark"] body.shop-page .shop-type-heading::after {
    background: linear-gradient(90deg, rgba(95, 130, 200, 0.46), transparent) !important;
}

html[data-theme="dark"] body.shop-page .shop-type-title,
[data-theme="dark"] body.shop-page .shop-type-title {
    color: rgba(238, 244, 255, 0.88) !important;
    background: linear-gradient(135deg, rgba(238, 244, 255, 0.96), rgba(238, 244, 255, 0.72) 54%, rgba(95, 130, 200, 0.92)) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

@media (max-width: 640px) {
    body.shop-page .shop-type-block {
        gap: 10px !important;
    }

    body.shop-page .shop-type-heading {
        padding: 0 8px !important;
    }

    body.shop-page .shop-type-heading::before {
        width: 22px !important;
        margin-right: 9px !important;
    }

    body.shop-page .shop-type-heading::after {
        min-width: 16px !important;
        margin-left: 9px !important;
    }

    body.shop-page .shop-type-title {
        font-size: clamp(23px, 7.1vw, 34px) !important;
        letter-spacing: -0.028em !important;
    }
}

/* -------------------------
   Shop patch 046
   Goods category CD glare colors.
   Privilege cards are not changed.
   ------------------------- */

body.shop-page .shop-goods-category-abilities {
    --goods-cd-main-rgb: 66, 217, 245;
    --goods-cd-soft-rgb: 157, 235, 255;
    --goods-cd-deep-rgb: 29, 139, 184;
}

body.shop-page .shop-goods-category-enchantments {
    --goods-cd-main-rgb: 168, 85, 247;
    --goods-cd-soft-rgb: 216, 180, 254;
    --goods-cd-deep-rgb: 109, 40, 217;
}

body.shop-page .shop-goods-category-items {
    --goods-cd-main-rgb: 242, 184, 75;
    --goods-cd-soft-rgb: 255, 226, 153;
    --goods-cd-deep-rgb: 180, 112, 24;
}

body.shop-page .shop-goods-category-books {
    --goods-cd-main-rgb: 201, 154, 91;
    --goods-cd-soft-rgb: 236, 206, 160;
    --goods-cd-deep-rgb: 139, 92, 48;
}

body.shop-page .shop-goods-category-spawn-eggs {
    --goods-cd-main-rgb: 141, 227, 95;
    --goods-cd-soft-rgb: 196, 255, 164;
    --goods-cd-deep-rgb: 70, 156, 54;
}

body.shop-page .shop-goods-category .shop-goods-preview-card::before {
    background:
        radial-gradient(ellipse at var(--cd-light-x) var(--cd-light-y), rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.50) 8%, rgba(255, 255, 255, 0.12) 22%, transparent 48%),
        conic-gradient(
            from var(--cd-phase) at var(--cd-wave-x) var(--cd-wave-y),
            rgba(var(--goods-cd-main-rgb), 0.94) 0deg,
            rgba(var(--goods-cd-soft-rgb), 0.82) 42deg,
            rgba(255, 255, 255, 0.62) 92deg,
            rgba(var(--goods-cd-main-rgb), 0.66) 142deg,
            rgba(var(--goods-cd-deep-rgb), 0.74) 188deg,
            rgba(var(--goods-cd-soft-rgb), 0.64) 236deg,
            rgba(255, 255, 255, 0.42) 286deg,
            rgba(var(--goods-cd-main-rgb), 0.84) 326deg,
            rgba(var(--goods-cd-main-rgb), 0.94) 360deg
        ),
        repeating-radial-gradient(
            circle at 50% 50%,
            rgba(255, 255, 255, 0.00) 0px,
            rgba(255, 255, 255, 0.00) 5px,
            rgba(255, 255, 255, 0.16) 6px,
            rgba(255, 255, 255, 0.00) 8px,
            rgba(255, 255, 255, 0.00) 13px
        ),
        repeating-linear-gradient(
            var(--cd-line-angle),
            rgba(255, 255, 255, 0.00) 0px,
            rgba(255, 255, 255, 0.00) 13px,
            rgba(255, 255, 255, 0.22) 14px,
            rgba(255, 255, 255, 0.00) 16px,
            rgba(255, 255, 255, 0.00) 30px
        ) !important;
    filter:
        saturate(1.72)
        brightness(1.28)
        contrast(1.08) !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-shine {
    background:
        linear-gradient(
            var(--cd-angle),
            transparent 0%,
            rgba(255, 255, 255, 0.00) 18%,
            rgba(var(--goods-cd-main-rgb), 0.24) 30%,
            rgba(255, 255, 255, 0.76) 43%,
            rgba(var(--goods-cd-soft-rgb), 0.34) 51%,
            rgba(var(--goods-cd-main-rgb), 0.28) 61%,
            rgba(var(--goods-cd-deep-rgb), 0.20) 72%,
            transparent 100%
        ),
        repeating-linear-gradient(
            calc(var(--cd-line-angle) + 18deg),
            rgba(255, 255, 255, 0.00) 0px,
            rgba(255, 255, 255, 0.00) 15px,
            rgba(255, 255, 255, 0.22) 16px,
            rgba(255, 255, 255, 0.00) 18px,
            rgba(255, 255, 255, 0.00) 33px
        ) !important;
    filter:
        saturate(1.56)
        brightness(1.24)
        contrast(1.08)
        blur(0.12px) !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image::after {
    background:
        radial-gradient(circle at calc(var(--cd-light-x) + var(--image-edge-shift-x)) calc(var(--cd-light-y) + var(--image-edge-shift-y)), rgba(255, 255, 255, 1.00) 0%, rgba(255, 255, 255, 0.84) 7%, rgba(255, 255, 255, 0.12) 18%, rgba(255, 255, 255, 0.00) 34%),
        linear-gradient(
            var(--cd-angle),
            rgba(255, 255, 255, 0.00) 0%,
            rgba(255, 255, 255, 0.00) 26%,
            rgba(255, 255, 255, calc(var(--image-impact-opacity) * 0.74)) 38%,
            rgba(var(--goods-cd-soft-rgb), calc(var(--image-impact-opacity) * 0.32)) 48%,
            rgba(255, 255, 255, 0.00) 59%,
            rgba(255, 255, 255, 0.00) 100%
        ),
        conic-gradient(
            from var(--cd-phase) at calc(var(--cd-wave-x) + var(--image-edge-shift-x)) calc(var(--cd-wave-y) + var(--image-edge-shift-y)),
            rgba(var(--goods-cd-main-rgb), 0.92) 0deg,
            rgba(var(--goods-cd-soft-rgb), 0.82) 40deg,
            rgba(255, 255, 255, 0.56) 92deg,
            rgba(var(--goods-cd-main-rgb), 0.62) 146deg,
            rgba(var(--goods-cd-deep-rgb), 0.72) 194deg,
            rgba(var(--goods-cd-soft-rgb), 0.62) 242deg,
            rgba(255, 255, 255, 0.38) 292deg,
            rgba(var(--goods-cd-main-rgb), 0.82) 330deg,
            rgba(var(--goods-cd-main-rgb), 0.92) 360deg
        ),
        repeating-linear-gradient(
            calc(var(--cd-line-angle) + 90deg),
            rgba(255, 255, 255, 0.00) 0 8px,
            rgba(255, 255, 255, 0.20) 8px 9px,
            rgba(255, 255, 255, 0.00) 9px 18px
        ) !important;
    filter:
        saturate(1.72)
        brightness(1.34)
        contrast(1.08)
        blur(var(--image-edge-blur)) !important;
}

/* -------------------------
   Shop patch 047
   Goods category pearl glare colors.
   Replaces visible white glare with soft category-tinted highlights.
   Privilege cards are not changed.
   ------------------------- */

body.shop-page .shop-goods-category-abilities {
    --goods-cd-pearl-rgb: 185, 247, 255;
}

body.shop-page .shop-goods-category-enchantments {
    --goods-cd-pearl-rgb: 227, 199, 255;
}

body.shop-page .shop-goods-category-items {
    --goods-cd-pearl-rgb: 255, 231, 168;
}

body.shop-page .shop-goods-category-books {
    --goods-cd-pearl-rgb: 241, 212, 162;
}

body.shop-page .shop-goods-category-spawn-eggs {
    --goods-cd-pearl-rgb: 210, 255, 184;
}

body.shop-page .shop-goods-category .shop-goods-preview-card::before {
    background:
        radial-gradient(ellipse at var(--cd-light-x) var(--cd-light-y), rgba(var(--goods-cd-pearl-rgb), 0.94) 0%, rgba(var(--goods-cd-pearl-rgb), 0.50) 8%, rgba(var(--goods-cd-pearl-rgb), 0.12) 22%, transparent 48%),
        conic-gradient(
            from var(--cd-phase) at var(--cd-wave-x) var(--cd-wave-y),
            rgba(var(--goods-cd-main-rgb), 0.94) 0deg,
            rgba(var(--goods-cd-soft-rgb), 0.82) 42deg,
            rgba(var(--goods-cd-pearl-rgb), 0.62) 92deg,
            rgba(var(--goods-cd-main-rgb), 0.66) 142deg,
            rgba(var(--goods-cd-deep-rgb), 0.74) 188deg,
            rgba(var(--goods-cd-soft-rgb), 0.64) 236deg,
            rgba(var(--goods-cd-pearl-rgb), 0.42) 286deg,
            rgba(var(--goods-cd-main-rgb), 0.84) 326deg,
            rgba(var(--goods-cd-main-rgb), 0.94) 360deg
        ),
        repeating-radial-gradient(
            circle at 50% 50%,
            rgba(255, 255, 255, 0.00) 0px,
            rgba(255, 255, 255, 0.00) 5px,
            rgba(var(--goods-cd-pearl-rgb), 0.16) 6px,
            rgba(255, 255, 255, 0.00) 8px,
            rgba(255, 255, 255, 0.00) 13px
        ),
        repeating-linear-gradient(
            var(--cd-line-angle),
            rgba(255, 255, 255, 0.00) 0px,
            rgba(255, 255, 255, 0.00) 13px,
            rgba(var(--goods-cd-pearl-rgb), 0.22) 14px,
            rgba(255, 255, 255, 0.00) 16px,
            rgba(255, 255, 255, 0.00) 30px
        ) !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-shine {
    background:
        linear-gradient(
            var(--cd-angle),
            transparent 0%,
            rgba(255, 255, 255, 0.00) 18%,
            rgba(var(--goods-cd-main-rgb), 0.24) 30%,
            rgba(var(--goods-cd-pearl-rgb), 0.76) 43%,
            rgba(var(--goods-cd-soft-rgb), 0.34) 51%,
            rgba(var(--goods-cd-main-rgb), 0.28) 61%,
            rgba(var(--goods-cd-deep-rgb), 0.20) 72%,
            transparent 100%
        ),
        repeating-linear-gradient(
            calc(var(--cd-line-angle) + 18deg),
            rgba(255, 255, 255, 0.00) 0px,
            rgba(255, 255, 255, 0.00) 15px,
            rgba(var(--goods-cd-pearl-rgb), 0.22) 16px,
            rgba(255, 255, 255, 0.00) 18px,
            rgba(255, 255, 255, 0.00) 33px
        ) !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image::after {
    background:
        radial-gradient(circle at calc(var(--cd-light-x) + var(--image-edge-shift-x)) calc(var(--cd-light-y) + var(--image-edge-shift-y)), rgba(var(--goods-cd-pearl-rgb), 1.00) 0%, rgba(var(--goods-cd-pearl-rgb), 0.84) 7%, rgba(var(--goods-cd-pearl-rgb), 0.12) 18%, rgba(255, 255, 255, 0.00) 34%),
        linear-gradient(
            var(--cd-angle),
            rgba(255, 255, 255, 0.00) 0%,
            rgba(255, 255, 255, 0.00) 26%,
            rgba(var(--goods-cd-pearl-rgb), calc(var(--image-impact-opacity) * 0.74)) 38%,
            rgba(var(--goods-cd-soft-rgb), calc(var(--image-impact-opacity) * 0.32)) 48%,
            rgba(255, 255, 255, 0.00) 59%,
            rgba(255, 255, 255, 0.00) 100%
        ),
        conic-gradient(
            from var(--cd-phase) at calc(var(--cd-wave-x) + var(--image-edge-shift-x)) calc(var(--cd-wave-y) + var(--image-edge-shift-y)),
            rgba(var(--goods-cd-main-rgb), 0.92) 0deg,
            rgba(var(--goods-cd-soft-rgb), 0.82) 40deg,
            rgba(var(--goods-cd-pearl-rgb), 0.56) 92deg,
            rgba(var(--goods-cd-main-rgb), 0.62) 146deg,
            rgba(var(--goods-cd-deep-rgb), 0.72) 194deg,
            rgba(var(--goods-cd-soft-rgb), 0.62) 242deg,
            rgba(var(--goods-cd-pearl-rgb), 0.38) 292deg,
            rgba(var(--goods-cd-main-rgb), 0.82) 330deg,
            rgba(var(--goods-cd-main-rgb), 0.92) 360deg
        ),
        repeating-linear-gradient(
            calc(var(--cd-line-angle) + 90deg),
            rgba(255, 255, 255, 0.00) 0 8px,
            rgba(var(--goods-cd-pearl-rgb), 0.20) 8px 9px,
            rgba(255, 255, 255, 0.00) 9px 18px
        ) !important;
}

/* -------------------------
   Shop patch 048
   Separates Items and Books glare colors.
   Items stay warm loot-gold; Books move to clean ink-blue.
   Privilege cards are not changed.
   ------------------------- */

body.shop-page .shop-goods-category-items {
    --goods-cd-main-rgb: 240, 163, 65;
    --goods-cd-soft-rgb: 255, 211, 143;
    --goods-cd-deep-rgb: 178, 92, 24;
    --goods-cd-pearl-rgb: 255, 226, 166;
}

body.shop-page .shop-goods-category-books {
    --goods-cd-main-rgb: 104, 167, 216;
    --goods-cd-soft-rgb: 192, 224, 255;
    --goods-cd-deep-rgb: 47, 110, 157;
    --goods-cd-pearl-rgb: 221, 241, 255;
}

/* -------------------------
   Shop patch 049
   Books glare pearl color changed to dark sky blue.
   Other categories and privilege cards are not changed.
   ------------------------- */

body.shop-page .shop-goods-category-books {
    --goods-cd-pearl-rgb: 72, 151, 207;
}

/* -------------------------
   Shop patch 050
   Enchantments glare pearl color changed to dark purple.
   Other categories and privilege cards are not changed.
   ------------------------- */

body.shop-page .shop-goods-category-enchantments {
    --goods-cd-pearl-rgb: 107, 33, 168;
}


/* -------------------------
   Shop patch 051
   White cursor glare for goods cards.
   The category CD colors stay unchanged.
   Privilege cards are not changed.
   ------------------------- */

body.shop-page .shop-goods-preview-card {
    --cursor-glare-x: 50%;
    --cursor-glare-y: 50%;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-shine {
    background:
        radial-gradient(
            circle at var(--cursor-glare-x) var(--cursor-glare-y),
            rgba(255, 255, 255, 0.92) 0%,
            rgba(255, 255, 255, 0.56) 8%,
            rgba(255, 255, 255, 0.18) 18%,
            rgba(255, 255, 255, 0.00) 34%
        ),
        linear-gradient(
            var(--cd-angle),
            transparent 0%,
            rgba(255, 255, 255, 0.00) 18%,
            rgba(255, 255, 255, 0.16) 30%,
            rgba(255, 255, 255, 0.78) 43%,
            rgba(255, 255, 255, 0.42) 51%,
            rgba(255, 255, 255, 0.18) 61%,
            rgba(255, 255, 255, 0.08) 72%,
            transparent 100%
        ),
        repeating-linear-gradient(
            calc(var(--cd-line-angle) + 18deg),
            rgba(255, 255, 255, 0.00) 0px,
            rgba(255, 255, 255, 0.00) 15px,
            rgba(255, 255, 255, 0.22) 16px,
            rgba(255, 255, 255, 0.00) 18px,
            rgba(255, 255, 255, 0.00) 33px
        ) !important;
    background-size: 100% 100%, 210% 210%, 180% 180% !important;
    background-position:
        center,
        var(--cd-light-x) var(--cd-light-y),
        var(--shine-x) var(--shine-y) !important;
    filter:
        saturate(1.00)
        brightness(1.32)
        contrast(1.08)
        blur(0.12px) !important;
}

/* -------------------------
   Shop patch 052
   Category-colored goods card contours.
   Changes normal and hover contour colors only for goods cards; privilege cards stay unchanged.
   ------------------------- */

body.shop-page .shop-goods-category-abilities {
    --shop-card-border-rgb: 66, 217, 245;
    --shop-card-border-alpha: 0.34;
    --shop-card-hover-border-rgb: 185, 247, 255;
    --shop-card-hover-border-alpha: 0.58;
    --shop-card-hover-ring-rgb: 185, 247, 255;
    --shop-card-hover-glow-rgb: 66, 217, 245;
}

body.shop-page .shop-goods-category-enchantments {
    --shop-card-border-rgb: 107, 33, 168;
    --shop-card-border-alpha: 0.42;
    --shop-card-hover-border-rgb: 168, 85, 247;
    --shop-card-hover-border-alpha: 0.62;
    --shop-card-hover-ring-rgb: 168, 85, 247;
    --shop-card-hover-glow-rgb: 107, 33, 168;
}

body.shop-page .shop-goods-category-items {
    --shop-card-border-rgb: 240, 163, 65;
    --shop-card-border-alpha: 0.36;
    --shop-card-hover-border-rgb: 255, 211, 143;
    --shop-card-hover-border-alpha: 0.58;
    --shop-card-hover-ring-rgb: 255, 211, 143;
    --shop-card-hover-glow-rgb: 240, 163, 65;
}

body.shop-page .shop-goods-category-books {
    --shop-card-border-rgb: 72, 151, 207;
    --shop-card-border-alpha: 0.36;
    --shop-card-hover-border-rgb: 104, 167, 216;
    --shop-card-hover-border-alpha: 0.60;
    --shop-card-hover-ring-rgb: 104, 167, 216;
    --shop-card-hover-glow-rgb: 72, 151, 207;
}

body.shop-page .shop-goods-category-spawn-eggs {
    --shop-card-border-rgb: 141, 227, 95;
    --shop-card-border-alpha: 0.34;
    --shop-card-hover-border-rgb: 210, 255, 184;
    --shop-card-hover-border-alpha: 0.58;
    --shop-card-hover-ring-rgb: 210, 255, 184;
    --shop-card-hover-glow-rgb: 141, 227, 95;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox > .donate-card.shop-goods-preview-card {
    border-color: rgba(var(--shop-card-border-rgb), var(--shop-card-border-alpha)) !important;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .donate-card.shop-goods-preview-card,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .donate-card.shop-goods-preview-card,
body.shop-page .shop-goods-category .shop-goods-card-hitbox > .donate-card.shop-goods-preview-card.is-pointer-tilting {
    border-color: rgba(var(--shop-card-hover-border-rgb), var(--shop-card-hover-border-alpha)) !important;
    box-shadow:
        0 34px 82px rgba(17, 24, 39, 0.24),
        0 0 0 1px rgba(var(--shop-card-hover-ring-rgb), 0.34),
        0 0 46px rgba(var(--shop-card-hover-glow-rgb), var(--frame-glow)) !important;
}

html[data-theme="dark"] body.shop-page .shop-goods-category,
[data-theme="dark"] body.shop-page .shop-goods-category {
    --shop-card-border-alpha: 0.30;
}

html[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .donate-card.shop-goods-preview-card,
html[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .donate-card.shop-goods-preview-card,
html[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-card-hitbox > .donate-card.shop-goods-preview-card.is-pointer-tilting,
[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .donate-card.shop-goods-preview-card,
[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .donate-card.shop-goods-preview-card,
[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-card-hitbox > .donate-card.shop-goods-preview-card.is-pointer-tilting {
    box-shadow:
        0 34px 82px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(var(--shop-card-hover-ring-rgb), 0.28),
        0 0 44px rgba(var(--shop-card-hover-glow-rgb), calc(var(--frame-glow) * 0.86)) !important;
}


/* -------------------------
   Shop patch 053
   Privilege card borders restored to their previous look.
   Goods card contours from patch 052 remain active.
   ------------------------- */

/* -------------------------
   Shop patch 054
   Real goods card contour colors.
   The visible contour is the masked ::after frame, not only the CSS border.
   Privilege cards are not changed.
   ------------------------- */

body.shop-page .shop-goods-category-abilities {
    --shop-card-frame-dark-rgb: 8, 83, 101;
    --shop-card-frame-main-rgb: 66, 217, 245;
    --shop-card-frame-light-rgb: 185, 247, 255;
    --shop-card-frame-flare-rgb: 185, 247, 255;
}

body.shop-page .shop-goods-category-enchantments {
    --shop-card-frame-dark-rgb: 45, 15, 84;
    --shop-card-frame-main-rgb: 107, 33, 168;
    --shop-card-frame-light-rgb: 168, 85, 247;
    --shop-card-frame-flare-rgb: 202, 156, 255;
}

body.shop-page .shop-goods-category-items {
    --shop-card-frame-dark-rgb: 110, 54, 9;
    --shop-card-frame-main-rgb: 240, 163, 65;
    --shop-card-frame-light-rgb: 255, 211, 143;
    --shop-card-frame-flare-rgb: 255, 226, 166;
}

body.shop-page .shop-goods-category-books {
    --shop-card-frame-dark-rgb: 22, 70, 112;
    --shop-card-frame-main-rgb: 72, 151, 207;
    --shop-card-frame-light-rgb: 104, 167, 216;
    --shop-card-frame-flare-rgb: 120, 194, 244;
}

body.shop-page .shop-goods-category-spawn-eggs {
    --shop-card-frame-dark-rgb: 49, 112, 38;
    --shop-card-frame-main-rgb: 141, 227, 95;
    --shop-card-frame-light-rgb: 210, 255, 184;
    --shop-card-frame-flare-rgb: 210, 255, 184;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox > .donate-card.shop-goods-preview-card {
    border-color: rgba(var(--shop-card-frame-main-rgb), 0.44) !important;
    box-shadow:
        0 24px 62px rgba(17, 24, 39, 0.18),
        0 0 0 1px rgba(var(--shop-card-frame-light-rgb), 0.20),
        0 0 26px rgba(var(--shop-card-frame-main-rgb), calc(var(--frame-glow) * 0.62)) !important;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox > .donate-card.shop-goods-preview-card::after {
    background:
        radial-gradient(
            circle at var(--frame-hot-x) var(--frame-hot-y),
            rgba(255, 255, 255, 0.96) 0 3.6%,
            rgba(var(--shop-card-frame-flare-rgb), 0.92) 7.4%,
            rgba(var(--shop-card-frame-main-rgb), 0.24) 18%,
            transparent 27%
        ),
        linear-gradient(
            var(--frame-angle),
            rgba(var(--shop-card-frame-dark-rgb), 0.96) 0%,
            rgba(var(--shop-card-frame-main-rgb), 0.98) 13%,
            rgba(var(--shop-card-frame-light-rgb), 0.98) 24%,
            rgba(var(--shop-card-frame-main-rgb), 0.96) 36%,
            rgba(var(--shop-card-frame-dark-rgb), 0.94) 49%,
            rgba(var(--shop-card-frame-main-rgb), 0.96) 62%,
            rgba(var(--shop-card-frame-light-rgb), 0.98) 74%,
            rgba(var(--shop-card-frame-main-rgb), 0.94) 86%,
            rgba(var(--shop-card-frame-dark-rgb), 0.96) 100%
        ) !important;
    filter:
        saturate(1.34)
        brightness(1.18)
        drop-shadow(0 0 7px rgba(var(--shop-card-frame-light-rgb), 0.42))
        drop-shadow(0 0 22px rgba(var(--shop-card-frame-main-rgb), 0.34)) !important;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .donate-card.shop-goods-preview-card,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .donate-card.shop-goods-preview-card,
body.shop-page .shop-goods-category .shop-goods-card-hitbox > .donate-card.shop-goods-preview-card.is-pointer-tilting {
    border-color: rgba(var(--shop-card-frame-light-rgb), 0.78) !important;
    box-shadow:
        0 34px 82px rgba(17, 24, 39, 0.24),
        0 0 0 1px rgba(var(--shop-card-frame-light-rgb), 0.46),
        0 0 46px rgba(var(--shop-card-frame-main-rgb), var(--frame-glow)) !important;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .donate-card.shop-goods-preview-card::after,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .donate-card.shop-goods-preview-card::after,
body.shop-page .shop-goods-category .shop-goods-card-hitbox > .donate-card.shop-goods-preview-card.is-pointer-tilting::after {
    filter:
        saturate(1.48)
        brightness(1.36)
        drop-shadow(0 0 10px rgba(var(--shop-card-frame-light-rgb), 0.58))
        drop-shadow(0 0 32px rgba(var(--shop-card-frame-main-rgb), 0.46)) !important;
}

html[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-card-hitbox > .donate-card.shop-goods-preview-card,
[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-card-hitbox > .donate-card.shop-goods-preview-card {
    border-color: rgba(var(--shop-card-frame-main-rgb), 0.38) !important;
    box-shadow:
        0 24px 62px rgba(0, 0, 0, 0.24),
        0 0 0 1px rgba(var(--shop-card-frame-light-rgb), 0.16),
        0 0 24px rgba(var(--shop-card-frame-main-rgb), calc(var(--frame-glow) * 0.52)) !important;
}

html[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .donate-card.shop-goods-preview-card,
html[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .donate-card.shop-goods-preview-card,
html[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-card-hitbox > .donate-card.shop-goods-preview-card.is-pointer-tilting,
[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .donate-card.shop-goods-preview-card,
[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .donate-card.shop-goods-preview-card,
[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-card-hitbox > .donate-card.shop-goods-preview-card.is-pointer-tilting {
    border-color: rgba(var(--shop-card-frame-light-rgb), 0.62) !important;
    box-shadow:
        0 34px 82px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(var(--shop-card-frame-light-rgb), 0.30),
        0 0 44px rgba(var(--shop-card-frame-main-rgb), calc(var(--frame-glow) * 0.82)) !important;
}

/* -------------------------
   Shop patch 055
   Slightly thicker goods card contours.
   Only goods cards are affected; privilege cards keep their previous contour.
   ------------------------- */

body.shop-page .shop-goods-category .shop-goods-card-hitbox > .donate-card.shop-goods-preview-card::after {
    padding: 3px !important;
}

/* ======================================================================
   Shop patch 056
   ====================================================================== */

body.shop-page .shop-goods-card-hitbox,
body.shop-page .shop-vip-card-hitbox,
body.shop-page [data-shop-buy] {
    cursor: pointer;
}

body.shop-page .shop-goods-card-hitbox:active > .donate-card,
body.shop-page .shop-vip-card-hitbox:active > .donate-card {
    cursor: pointer;
}



/* ======================================================================
   Shop patch 057
   Goods image and price inner contours.
   Adds VIP-like perspective glare to the product image area and price button.
   Privilege cards are not changed.
   ====================================================================== */

body.shop-page .shop-goods-category .shop-goods-preview-card {
    --image-border-x: 50%;
    --image-border-y: 50%;
    --image-gloss-angle: 135deg;
    --image-gloss-opacity: 0.42;
    --image-gloss-blur: 0.16px;
    --image-gloss-shift-x: 0px;
    --image-gloss-shift-y: 0px;

    --goods-inner-frame-core: rgba(255, 255, 255, 0.96);
    --goods-inner-frame-main: rgba(var(--shop-card-frame-main-rgb), 0.92);
    --goods-inner-frame-light: rgba(var(--shop-card-frame-light-rgb), 0.82);
    --goods-inner-frame-soft: rgba(var(--shop-card-frame-main-rgb), 0.24);
    --goods-inner-frame-glow: rgba(var(--shop-card-frame-main-rgb), 0.42);

    --price-border-flare-core: rgba(255, 255, 255, 0.98);
    --price-border-flare-mid: rgba(var(--shop-card-frame-light-rgb), 0.84);
    --price-border-flare-soft: rgba(var(--shop-card-frame-main-rgb), 0.28);
    --price-gloss-line: rgba(255, 255, 255, 0.48);
    --price-gloss-line-soft: rgba(var(--shop-card-frame-light-rgb), 0.22);
    --price-border-glow: rgba(var(--shop-card-frame-main-rgb), 0.48);
    --price-panel-glow: rgba(var(--shop-card-frame-main-rgb), 0.28);
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image {
    border: 1px solid rgba(var(--shop-card-frame-light-rgb), 0.34) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.22),
        inset 0 12px 26px rgba(255, 255, 255, 0.16),
        0 var(--image-shadow-y, 24px) var(--image-shadow-blur, 42px) rgba(17, 24, 39, 0.20),
        0 0 0 1px rgba(var(--shop-card-frame-main-rgb), 0.22),
        0 0 24px rgba(var(--shop-card-frame-main-rgb), 0.16) !important;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-image,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-image,
body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-image {
    border-color: rgba(var(--shop-card-frame-light-rgb), 0.58) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.28),
        inset 0 12px 26px rgba(255, 255, 255, 0.18),
        0 var(--image-shadow-y, 24px) var(--image-shadow-blur, 42px) rgba(17, 24, 39, 0.22),
        0 0 0 1px rgba(var(--shop-card-frame-light-rgb), 0.34),
        0 0 34px rgba(var(--shop-card-frame-main-rgb), 0.28) !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image::after {
    inset: -1px !important;
    z-index: 2 !important;
    padding: 2px !important;
    border-radius: inherit !important;
    opacity: calc(0.54 + (var(--tilt-strength, 0) * 0.36)) !important;
    background:
        radial-gradient(
            circle at var(--image-border-x) var(--image-border-y),
            var(--goods-inner-frame-core) 0 3.2%,
            var(--goods-inner-frame-light) 7.2%,
            var(--goods-inner-frame-soft) 17%,
            transparent 30%
        ),
        linear-gradient(
            var(--image-gloss-angle),
            transparent 0%,
            transparent 28%,
            rgba(255, 255, 255, 0.58) 42%,
            var(--goods-inner-frame-light) 50%,
            rgba(255, 255, 255, 0.12) 60%,
            transparent 74%,
            transparent 100%
        ),
        linear-gradient(
            var(--frame-angle, 135deg),
            rgba(var(--shop-card-frame-dark-rgb), 0.78) 0%,
            var(--goods-inner-frame-main) 18%,
            var(--goods-inner-frame-light) 35%,
            rgba(var(--shop-card-frame-dark-rgb), 0.70) 52%,
            var(--goods-inner-frame-main) 70%,
            var(--goods-inner-frame-light) 86%,
            rgba(var(--shop-card-frame-dark-rgb), 0.78) 100%
        ) !important;
    filter:
        saturate(1.28)
        brightness(1.32)
        blur(calc(0.10px + var(--image-gloss-blur, 0.16px) * 0.28))
        drop-shadow(0 0 8px rgba(var(--shop-card-frame-light-rgb), 0.38))
        drop-shadow(0 0 22px var(--goods-inner-frame-glow)) !important;
    transform:
        translate3d(calc(var(--image-gloss-shift-x, 0px) * 0.045), calc(var(--image-gloss-shift-y, 0px) * 0.035), 0) !important;
    mix-blend-mode: screen !important;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    mask-composite: exclude !important;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-image::after,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-image::after,
body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-image::after {
    opacity: calc(0.70 + (var(--tilt-strength, 0) * 0.30)) !important;
    filter:
        saturate(1.40)
        brightness(1.54)
        blur(calc(0.08px + var(--image-gloss-blur, 0.16px) * 0.22))
        drop-shadow(0 0 10px rgba(var(--shop-card-frame-light-rgb), 0.52))
        drop-shadow(0 0 30px var(--goods-inner-frame-glow)) !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image-glare {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    border-radius: inherit;
    pointer-events: none;
    opacity: calc(0.18 + (var(--tilt-strength, 0) * 0.38));
    background:
        radial-gradient(
            ellipse 46% 34% at var(--image-gloss-x, 66%) var(--image-gloss-y, 24%),
            rgba(255, 255, 255, 0.62) 0%,
            rgba(255, 255, 255, 0.34) 13%,
            rgba(255, 255, 255, 0.12) 30%,
            transparent 62%
        ),
        linear-gradient(
            var(--image-gloss-angle, 135deg),
            transparent 0%,
            transparent 30%,
            rgba(255, 255, 255, 0.28) 43%,
            rgba(var(--shop-card-frame-light-rgb), 0.18) 52%,
            rgba(255, 255, 255, 0.06) 60%,
            transparent 73%,
            transparent 100%
        );
    background-size: 100% 100%, 180% 180%;
    background-position:
        center,
        calc(50% + var(--image-gloss-shift-x, 0px) * 0.42) calc(50% + var(--image-gloss-shift-y, 0px) * 0.28);
    mix-blend-mode: screen;
    filter:
        saturate(0.35)
        brightness(1.46)
        blur(calc(0.08px + var(--image-gloss-blur, 0.16px) * 0.32));
    transform:
        translate3d(calc(var(--image-gloss-shift-x, 0px) * 0.16), calc(var(--image-gloss-shift-y, 0px) * 0.12), 0)
        skewX(calc(var(--rotate-y, 0deg) * -0.10));
    transition:
        opacity 0.14s linear,
        background-position 0.12s linear,
        filter 0.12s linear,
        transform 0.12s linear;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-image-glare,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-image-glare,
body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-image-glare {
    opacity: calc(0.32 + (var(--tilt-strength, 0) * 0.52));
    filter:
        saturate(0.28)
        brightness(1.70)
        blur(calc(0.06px + var(--image-gloss-blur, 0.16px) * 0.24));
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image span {
    z-index: 4 !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-footer strong {
    box-shadow:
        0 0 0 1px rgba(var(--shop-card-frame-main-rgb), 0.20),
        0 8px 18px rgba(0, 0, 0, 0.15),
        0 0 20px rgba(var(--shop-card-frame-main-rgb), 0.16) !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-footer strong::after {
    background:
        radial-gradient(
            ellipse 116% 54% at var(--price-glass-top-x, 50%) -12%,
            rgba(255, 255, 255, 1.00) 0%,
            rgba(var(--shop-card-frame-light-rgb), 0.84) 17%,
            rgba(var(--shop-card-frame-main-rgb), 0.26) 36%,
            transparent 66%
        ),
        radial-gradient(
            circle at var(--image-border-x, 50%) var(--image-border-y, 50%),
            rgba(255, 255, 255, 0.98) 0 2.4%,
            rgba(var(--shop-card-frame-light-rgb), 0.84) 5.4%,
            rgba(var(--shop-card-frame-main-rgb), 0.26) 13%,
            transparent 27%
        ),
        linear-gradient(
            var(--image-gloss-angle, 135deg),
            transparent 0%,
            transparent 27%,
            rgba(255, 255, 255, 0.48) 45%,
            rgba(var(--shop-card-frame-light-rgb), 0.24) 58%,
            transparent 76%,
            transparent 100%
        ),
        linear-gradient(
            var(--frame-angle, 135deg),
            rgba(var(--shop-card-frame-dark-rgb), 0.78),
            rgba(var(--shop-card-frame-main-rgb), 0.92) 24%,
            rgba(var(--shop-card-frame-light-rgb), 0.88) 44%,
            rgba(var(--shop-card-frame-dark-rgb), 0.70) 68%,
            rgba(var(--shop-card-frame-main-rgb), 0.86)
        ) !important;
    opacity: calc(0.68 + (var(--tilt-strength, 0) * 0.32)) !important;
    filter:
        saturate(1.24)
        brightness(1.66)
        blur(calc(0.12px + var(--image-gloss-blur, 0.16px) * 0.16))
        drop-shadow(0 0 9px rgba(var(--shop-card-frame-light-rgb), 0.42))
        drop-shadow(0 0 24px rgba(var(--shop-card-frame-main-rgb), 0.34)) !important;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-footer strong,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-footer strong,
body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-footer strong {
    box-shadow:
        0 0 0 1px rgba(var(--shop-card-frame-light-rgb), 0.32),
        0 9px 20px rgba(0, 0, 0, 0.17),
        0 0 28px rgba(var(--shop-card-frame-main-rgb), 0.24) !important;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-footer strong::after,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-footer strong::after,
body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-footer strong::after {
    opacity: 1 !important;
    filter:
        saturate(1.38)
        brightness(1.94)
        blur(calc(0.10px + var(--image-gloss-blur, 0.16px) * 0.12))
        drop-shadow(0 0 12px rgba(var(--shop-card-frame-light-rgb), 0.56))
        drop-shadow(0 0 34px rgba(var(--shop-card-frame-main-rgb), 0.44)) !important;
}

html[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image,
[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image {
    border-color: rgba(var(--shop-card-frame-light-rgb), 0.28) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.14),
        inset 0 12px 26px rgba(255, 255, 255, 0.10),
        0 var(--image-shadow-y, 24px) var(--image-shadow-blur, 42px) rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(var(--shop-card-frame-main-rgb), 0.18),
        0 0 22px rgba(var(--shop-card-frame-main-rgb), 0.14) !important;
}

html[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-image,
html[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-image,
html[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-image,
[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-image,
[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-image,
[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-image {
    border-color: rgba(var(--shop-card-frame-light-rgb), 0.48) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.18),
        inset 0 12px 26px rgba(255, 255, 255, 0.12),
        0 var(--image-shadow-y, 24px) var(--image-shadow-blur, 42px) rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(var(--shop-card-frame-light-rgb), 0.26),
        0 0 30px rgba(var(--shop-card-frame-main-rgb), 0.22) !important;
}

/* ======================================================================
   Shop patch 058
   Goods image frame is transparent; only the perspective glare is visible.
   Product price frame and privilege cards are not changed.
   ====================================================================== */

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image {
    border-color: transparent !important;
    box-shadow:
        0 var(--image-shadow-y, 24px) var(--image-shadow-blur, 42px) rgba(17, 24, 39, 0.18),
        0 0 22px rgba(var(--shop-card-frame-main-rgb), 0.10) !important;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-image,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-image,
body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-image {
    border-color: transparent !important;
    box-shadow:
        0 var(--image-shadow-y, 24px) var(--image-shadow-blur, 42px) rgba(17, 24, 39, 0.20),
        0 0 28px rgba(var(--shop-card-frame-main-rgb), 0.16) !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image::after {
    opacity: calc(0.22 + (var(--tilt-strength, 0) * 0.42)) !important;
    background:
        radial-gradient(
            circle at var(--image-border-x) var(--image-border-y),
            rgba(255, 255, 255, 0.96) 0 2.8%,
            rgba(var(--shop-card-frame-light-rgb), 0.70) 6.4%,
            rgba(var(--shop-card-frame-main-rgb), 0.24) 14%,
            transparent 28%
        ),
        linear-gradient(
            var(--image-gloss-angle),
            transparent 0%,
            transparent 31%,
            rgba(255, 255, 255, 0.50) 43%,
            rgba(var(--shop-card-frame-light-rgb), 0.28) 52%,
            transparent 66%,
            transparent 100%
        ) !important;
    filter:
        saturate(1.12)
        brightness(1.34)
        blur(calc(0.12px + var(--image-gloss-blur, 0.16px) * 0.28))
        drop-shadow(0 0 8px rgba(255, 255, 255, 0.20))
        drop-shadow(0 0 18px rgba(var(--shop-card-frame-main-rgb), 0.22)) !important;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-image::after,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-image::after,
body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-image::after {
    opacity: calc(0.42 + (var(--tilt-strength, 0) * 0.48)) !important;
    filter:
        saturate(1.22)
        brightness(1.56)
        blur(calc(0.08px + var(--image-gloss-blur, 0.16px) * 0.22))
        drop-shadow(0 0 10px rgba(255, 255, 255, 0.28))
        drop-shadow(0 0 24px rgba(var(--shop-card-frame-main-rgb), 0.30)) !important;
}

html[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image,
[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image {
    border-color: transparent !important;
    box-shadow:
        0 var(--image-shadow-y, 24px) var(--image-shadow-blur, 42px) rgba(0, 0, 0, 0.28),
        0 0 20px rgba(var(--shop-card-frame-main-rgb), 0.10) !important;
}

html[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-image,
html[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-image,
html[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-image,
[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-image,
[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-image,
[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-image {
    border-color: transparent !important;
    box-shadow:
        0 var(--image-shadow-y, 24px) var(--image-shadow-blur, 42px) rgba(0, 0, 0, 0.34),
        0 0 26px rgba(var(--shop-card-frame-main-rgb), 0.14) !important;
}


/* ======================================================================
   Shop patch 059
   Goods image and price glare thickness.
   Price button contour is transparent; only the perspective glare is visible.
   Product image glare is thicker too. Privilege cards are not changed.
   ====================================================================== */

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image::after {
    inset: -2px !important;
    padding: 4px !important;
    opacity: calc(0.34 + (var(--tilt-strength, 0) * 0.46)) !important;
    background:
        radial-gradient(
            circle at var(--image-border-x) var(--image-border-y),
            rgba(255, 255, 255, 1.00) 0 4.2%,
            rgba(var(--shop-card-frame-light-rgb), 0.76) 8.8%,
            rgba(var(--shop-card-frame-main-rgb), 0.28) 18%,
            transparent 34%
        ),
        linear-gradient(
            var(--image-gloss-angle),
            transparent 0%,
            transparent 27%,
            rgba(255, 255, 255, 0.64) 40%,
            rgba(var(--shop-card-frame-light-rgb), 0.34) 52%,
            rgba(255, 255, 255, 0.10) 64%,
            transparent 78%,
            transparent 100%
        ) !important;
    filter:
        saturate(1.18)
        brightness(1.48)
        blur(calc(0.16px + var(--image-gloss-blur, 0.16px) * 0.26))
        drop-shadow(0 0 10px rgba(255, 255, 255, 0.24))
        drop-shadow(0 0 22px rgba(var(--shop-card-frame-main-rgb), 0.28)) !important;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-image::after,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-image::after,
body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-image::after {
    opacity: calc(0.58 + (var(--tilt-strength, 0) * 0.42)) !important;
    filter:
        saturate(1.28)
        brightness(1.76)
        blur(calc(0.12px + var(--image-gloss-blur, 0.16px) * 0.20))
        drop-shadow(0 0 13px rgba(255, 255, 255, 0.34))
        drop-shadow(0 0 30px rgba(var(--shop-card-frame-main-rgb), 0.36)) !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-footer strong {
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.15),
        0 0 18px rgba(var(--shop-card-frame-main-rgb), 0.12) !important;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-footer strong,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-footer strong,
body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-footer strong {
    box-shadow:
        0 9px 20px rgba(0, 0, 0, 0.17),
        0 0 24px rgba(var(--shop-card-frame-main-rgb), 0.20) !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-footer strong::after {
    inset: -5px !important;
    padding: 4px !important;
    opacity: calc(0.48 + (var(--tilt-strength, 0) * 0.38)) !important;
    background:
        radial-gradient(
            ellipse 118% 58% at var(--price-glass-top-x, 50%) -14%,
            rgba(255, 255, 255, 1.00) 0%,
            rgba(var(--shop-card-frame-light-rgb), 0.80) 19%,
            rgba(var(--shop-card-frame-main-rgb), 0.28) 39%,
            transparent 70%
        ),
        radial-gradient(
            circle at var(--image-border-x, 50%) var(--image-border-y, 50%),
            rgba(255, 255, 255, 1.00) 0 4.0%,
            rgba(var(--shop-card-frame-light-rgb), 0.78) 8.4%,
            rgba(var(--shop-card-frame-main-rgb), 0.28) 18%,
            transparent 34%
        ),
        linear-gradient(
            var(--image-gloss-angle, 135deg),
            transparent 0%,
            transparent 25%,
            rgba(255, 255, 255, 0.62) 42%,
            rgba(var(--shop-card-frame-light-rgb), 0.32) 55%,
            rgba(255, 255, 255, 0.10) 66%,
            transparent 80%,
            transparent 100%
        ) !important;
    filter:
        saturate(1.24)
        brightness(1.82)
        blur(calc(0.16px + var(--image-gloss-blur, 0.16px) * 0.14))
        drop-shadow(0 -2px 10px rgba(255, 255, 255, 0.26))
        drop-shadow(0 0 28px rgba(var(--shop-card-frame-main-rgb), 0.36)) !important;
    transform:
        translate3d(calc(var(--image-gloss-shift-x, 0px) * 0.060), calc(var(--image-gloss-shift-y, 0px) * 0.020 - 1px), 0)
        scale(1.012, 1.060) !important;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-footer strong::after,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-footer strong::after,
body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-footer strong::after {
    opacity: 1 !important;
    filter:
        saturate(1.34)
        brightness(2.10)
        blur(calc(0.12px + var(--image-gloss-blur, 0.16px) * 0.10))
        drop-shadow(0 -3px 14px rgba(255, 255, 255, 0.36))
        drop-shadow(0 0 40px rgba(var(--shop-card-frame-main-rgb), 0.46)) !important;
}

/* ======================================================================
   Shop patch 060
   Goods image and price glare is attached to the element edge.
   The static contour stays transparent; only the glued perspective glare is visible.
   Privilege cards are not changed.
   ====================================================================== */

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image {
    overflow: hidden !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image::after {
    inset: 0 !important;
    padding: 4px !important;
    border-radius: inherit !important;
    opacity: calc(0.44 + (var(--tilt-strength, 0) * 0.42)) !important;
    background:
        radial-gradient(
            circle at var(--image-border-x) var(--image-border-y),
            rgba(255, 255, 255, 1.00) 0 4.8%,
            rgba(var(--shop-card-frame-light-rgb), 0.78) 9.4%,
            rgba(var(--shop-card-frame-main-rgb), 0.30) 18.8%,
            transparent 35%
        ),
        linear-gradient(
            var(--image-gloss-angle),
            transparent 0%,
            transparent 24%,
            rgba(255, 255, 255, 0.72) 39%,
            rgba(var(--shop-card-frame-light-rgb), 0.38) 52%,
            rgba(255, 255, 255, 0.12) 64%,
            transparent 78%,
            transparent 100%
        ) !important;
    filter:
        saturate(1.20)
        brightness(1.58)
        blur(calc(0.10px + var(--image-gloss-blur, 0.16px) * 0.18))
        drop-shadow(0 0 7px rgba(255, 255, 255, 0.22))
        drop-shadow(0 0 18px rgba(var(--shop-card-frame-main-rgb), 0.24)) !important;
    transform:
        translate3d(calc(var(--image-gloss-shift-x, 0px) * 0.028), calc(var(--image-gloss-shift-y, 0px) * 0.022), 0) !important;
    mix-blend-mode: screen !important;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    mask-composite: exclude !important;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-image::after,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-image::after,
body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-image::after {
    opacity: calc(0.68 + (var(--tilt-strength, 0) * 0.30)) !important;
    filter:
        saturate(1.30)
        brightness(1.86)
        blur(calc(0.08px + var(--image-gloss-blur, 0.16px) * 0.14))
        drop-shadow(0 0 10px rgba(255, 255, 255, 0.30))
        drop-shadow(0 0 26px rgba(var(--shop-card-frame-main-rgb), 0.34)) !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-footer strong {
    overflow: hidden !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-footer strong::after {
    inset: 0 !important;
    padding: 3px !important;
    border-radius: inherit !important;
    opacity: calc(0.54 + (var(--tilt-strength, 0) * 0.34)) !important;
    background:
        radial-gradient(
            ellipse 108% 54% at var(--price-glass-top-x, 50%) 0%,
            rgba(255, 255, 255, 1.00) 0%,
            rgba(var(--shop-card-frame-light-rgb), 0.78) 18%,
            rgba(var(--shop-card-frame-main-rgb), 0.28) 37%,
            transparent 68%
        ),
        radial-gradient(
            circle at var(--image-border-x, 50%) var(--image-border-y, 50%),
            rgba(255, 255, 255, 1.00) 0 4.4%,
            rgba(var(--shop-card-frame-light-rgb), 0.78) 8.8%,
            rgba(var(--shop-card-frame-main-rgb), 0.28) 18%,
            transparent 34%
        ),
        linear-gradient(
            var(--image-gloss-angle, 135deg),
            transparent 0%,
            transparent 24%,
            rgba(255, 255, 255, 0.68) 41%,
            rgba(var(--shop-card-frame-light-rgb), 0.34) 54%,
            rgba(255, 255, 255, 0.10) 65%,
            transparent 79%,
            transparent 100%
        ) !important;
    filter:
        saturate(1.22)
        brightness(1.86)
        blur(calc(0.10px + var(--image-gloss-blur, 0.16px) * 0.10))
        drop-shadow(0 0 8px rgba(255, 255, 255, 0.26))
        drop-shadow(0 0 22px rgba(var(--shop-card-frame-main-rgb), 0.32)) !important;
    transform:
        translate3d(calc(var(--image-gloss-shift-x, 0px) * 0.032), calc(var(--image-gloss-shift-y, 0px) * 0.014), 0) !important;
    mix-blend-mode: screen !important;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    mask-composite: exclude !important;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-footer strong::after,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-footer strong::after,
body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-footer strong::after {
    opacity: 1 !important;
    filter:
        saturate(1.32)
        brightness(2.08)
        blur(calc(0.08px + var(--image-gloss-blur, 0.16px) * 0.08))
        drop-shadow(0 0 11px rgba(255, 255, 255, 0.34))
        drop-shadow(0 0 32px rgba(var(--shop-card-frame-main-rgb), 0.42)) !important;
}

/* ======================================================================
   Shop patch 061
   Goods image glare corner fix.
   Replaces the masked border-ring on product images with a clipped inner glare.
   This prevents the visible contour from breaking at rounded corners.
   Privilege cards and price buttons are not changed.
   ====================================================================== */

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image {
    overflow: hidden !important;
    contain: paint;
    clip-path: inset(0 round 24px);
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    padding: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    opacity: calc(0.34 + (var(--tilt-strength, 0) * 0.38)) !important;
    background:
        radial-gradient(
            ellipse 46% 28% at var(--image-border-x, 50%) 0%,
            rgba(255, 255, 255, 0.92) 0%,
            rgba(var(--shop-card-frame-light-rgb), 0.44) 21%,
            rgba(var(--shop-card-frame-main-rgb), 0.14) 40%,
            rgba(255, 255, 255, 0.00) 68%
        ),
        radial-gradient(
            ellipse 26% 52% at 100% var(--image-border-y, 50%),
            rgba(255, 255, 255, 0.82) 0%,
            rgba(var(--shop-card-frame-light-rgb), 0.38) 22%,
            rgba(var(--shop-card-frame-main-rgb), 0.12) 43%,
            rgba(255, 255, 255, 0.00) 74%
        ),
        radial-gradient(
            ellipse 30% 30% at 100% 0%,
            rgba(255, 255, 255, 0.66) 0%,
            rgba(var(--shop-card-frame-light-rgb), 0.24) 34%,
            rgba(255, 255, 255, 0.00) 72%
        ),
        linear-gradient(
            var(--image-gloss-angle, 135deg),
            rgba(255, 255, 255, 0.00) 0%,
            rgba(255, 255, 255, 0.00) 32%,
            rgba(255, 255, 255, 0.46) 44%,
            rgba(var(--shop-card-frame-light-rgb), 0.20) 54%,
            rgba(255, 255, 255, 0.00) 68%,
            rgba(255, 255, 255, 0.00) 100%
        ) !important;
    background-size:
        100% 100%,
        100% 100%,
        100% 100%,
        178% 178% !important;
    background-position:
        center,
        center,
        center,
        calc(50% + var(--image-gloss-shift-x, 0px) * 0.34) calc(50% + var(--image-gloss-shift-y, 0px) * 0.22) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 0 18px rgba(var(--shop-card-frame-light-rgb), 0.08) !important;
    filter:
        saturate(0.82)
        brightness(1.62)
        blur(calc(0.08px + var(--image-gloss-blur, 0.16px) * 0.12)) !important;
    transform:
        translate3d(calc(var(--image-gloss-shift-x, 0px) * 0.026), calc(var(--image-gloss-shift-y, 0px) * 0.020), 0) !important;
    mix-blend-mode: screen !important;
    -webkit-mask: none !important;
    mask: none !important;
    -webkit-mask-composite: source-over !important;
    mask-composite: add !important;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-image::after,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-image::after,
body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-image::after {
    opacity: calc(0.58 + (var(--tilt-strength, 0) * 0.30)) !important;
    filter:
        saturate(0.90)
        brightness(1.88)
        blur(calc(0.06px + var(--image-gloss-blur, 0.16px) * 0.10)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.07),
        inset 0 0 24px rgba(var(--shop-card-frame-light-rgb), 0.12),
        0 0 18px rgba(var(--shop-card-frame-main-rgb), 0.22) !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image-glare {
    border-radius: inherit !important;
    clip-path: inset(0 round 24px) !important;
}

/* ======================================================================
   Shop patch 062
   Goods image and price edge glare.
   The static contour stays transparent; the visible glare is glued to the edge.
   Uses clipped inner edge gradients instead of masked border rings, so rounded
   corners stay clean. Privilege cards are not changed.
   ====================================================================== */

body.shop-page .shop-goods-category .shop-goods-preview-card {
    --goods-edge-glare-core: rgba(255, 255, 255, 0.98);
    --goods-edge-glare-mid: rgba(var(--shop-card-frame-light-rgb), 0.72);
    --goods-edge-glare-soft: rgba(var(--shop-card-frame-main-rgb), 0.24);
    --goods-edge-glare-faint: rgba(var(--shop-card-frame-main-rgb), 0.10);
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image {
    overflow: hidden !important;
    border-color: transparent !important;
    contain: paint;
    clip-path: inset(0 round 24px) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.035),
        inset 0 12px 26px rgba(255, 255, 255, 0.12),
        0 var(--image-shadow-y, 24px) var(--image-shadow-blur, 42px) rgba(17, 24, 39, 0.20),
        0 0 22px rgba(var(--shop-card-frame-main-rgb), 0.12) !important;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-image,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-image,
body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-image {
    border-color: transparent !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.045),
        inset 0 12px 26px rgba(255, 255, 255, 0.14),
        0 var(--image-shadow-y, 24px) var(--image-shadow-blur, 42px) rgba(17, 24, 39, 0.22),
        0 0 30px rgba(var(--shop-card-frame-main-rgb), 0.18) !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    padding: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    opacity: calc(0.50 + (var(--tilt-strength, 0) * 0.34)) !important;
    background:
        radial-gradient(
            ellipse 58% 15px at var(--image-border-x, 50%) 0%,
            var(--goods-edge-glare-core) 0%,
            rgba(255, 255, 255, 0.82) 16%,
            var(--goods-edge-glare-mid) 34%,
            var(--goods-edge-glare-soft) 58%,
            transparent 82%
        ),
        radial-gradient(
            ellipse 58% 15px at calc(100% - var(--image-border-x, 50%)) 100%,
            rgba(255, 255, 255, 0.74) 0%,
            var(--goods-edge-glare-mid) 26%,
            var(--goods-edge-glare-soft) 54%,
            transparent 82%
        ),
        radial-gradient(
            ellipse 15px 58% at 100% var(--image-border-y, 50%),
            var(--goods-edge-glare-core) 0%,
            rgba(255, 255, 255, 0.76) 18%,
            var(--goods-edge-glare-mid) 36%,
            var(--goods-edge-glare-soft) 60%,
            transparent 84%
        ),
        radial-gradient(
            ellipse 15px 58% at 0% calc(100% - var(--image-border-y, 50%)),
            rgba(255, 255, 255, 0.62) 0%,
            var(--goods-edge-glare-mid) 24%,
            var(--goods-edge-glare-soft) 52%,
            transparent 82%
        ),
        radial-gradient(
            ellipse 30px 30px at 100% 0%,
            rgba(255, 255, 255, 0.62) 0%,
            var(--goods-edge-glare-mid) 26%,
            transparent 72%
        ),
        linear-gradient(
            var(--image-gloss-angle, 135deg),
            transparent 0%,
            transparent 37%,
            rgba(255, 255, 255, 0.34) 46%,
            rgba(var(--shop-card-frame-light-rgb), 0.16) 54%,
            transparent 66%,
            transparent 100%
        ) !important;
    background-size:
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        174% 174% !important;
    background-position:
        center,
        center,
        center,
        center,
        center,
        calc(50% + var(--image-gloss-shift-x, 0px) * 0.34) calc(50% + var(--image-gloss-shift-y, 0px) * 0.22) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.045),
        inset 0 0 0 2px rgba(var(--shop-card-frame-light-rgb), 0.050),
        inset 0 0 24px rgba(var(--shop-card-frame-light-rgb), 0.075) !important;
    filter:
        saturate(0.98)
        brightness(1.72)
        blur(calc(0.06px + var(--image-gloss-blur, 0.16px) * 0.08)) !important;
    transform:
        translate3d(calc(var(--image-gloss-shift-x, 0px) * 0.018), calc(var(--image-gloss-shift-y, 0px) * 0.014), 0) !important;
    mix-blend-mode: screen !important;
    -webkit-mask: none !important;
    mask: none !important;
    -webkit-mask-composite: source-over !important;
    mask-composite: add !important;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-image::after,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-image::after,
body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-image::after {
    opacity: calc(0.74 + (var(--tilt-strength, 0) * 0.24)) !important;
    filter:
        saturate(1.06)
        brightness(2.02)
        blur(calc(0.04px + var(--image-gloss-blur, 0.16px) * 0.06))
        drop-shadow(0 0 7px rgba(255, 255, 255, 0.24))
        drop-shadow(0 0 18px rgba(var(--shop-card-frame-main-rgb), 0.26)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.060),
        inset 0 0 0 2px rgba(var(--shop-card-frame-light-rgb), 0.075),
        inset 0 0 30px rgba(var(--shop-card-frame-light-rgb), 0.11) !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-footer strong {
    overflow: hidden !important;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.15),
        0 0 18px rgba(var(--shop-card-frame-main-rgb), 0.12) !important;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-footer strong,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-footer strong,
body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-footer strong {
    box-shadow:
        0 9px 20px rgba(0, 0, 0, 0.17),
        0 0 26px rgba(var(--shop-card-frame-main-rgb), 0.18) !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-footer strong::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    padding: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    opacity: calc(0.58 + (var(--tilt-strength, 0) * 0.28)) !important;
    background:
        radial-gradient(
            ellipse 70% 9px at var(--image-border-x, 50%) 0%,
            rgba(255, 255, 255, 1.00) 0%,
            rgba(255, 255, 255, 0.82) 18%,
            rgba(var(--shop-card-frame-light-rgb), 0.62) 42%,
            rgba(var(--shop-card-frame-main-rgb), 0.18) 66%,
            transparent 86%
        ),
        radial-gradient(
            ellipse 70% 9px at calc(100% - var(--image-border-x, 50%)) 100%,
            rgba(255, 255, 255, 0.62) 0%,
            rgba(var(--shop-card-frame-light-rgb), 0.46) 34%,
            rgba(var(--shop-card-frame-main-rgb), 0.14) 62%,
            transparent 86%
        ),
        radial-gradient(
            ellipse 9px 82% at 100% var(--image-border-y, 50%),
            rgba(255, 255, 255, 0.90) 0%,
            rgba(var(--shop-card-frame-light-rgb), 0.58) 34%,
            rgba(var(--shop-card-frame-main-rgb), 0.16) 62%,
            transparent 86%
        ),
        radial-gradient(
            ellipse 9px 82% at 0% calc(100% - var(--image-border-y, 50%)),
            rgba(255, 255, 255, 0.44) 0%,
            rgba(var(--shop-card-frame-light-rgb), 0.34) 36%,
            rgba(var(--shop-card-frame-main-rgb), 0.12) 62%,
            transparent 86%
        ),
        radial-gradient(
            ellipse 110% 52% at var(--price-glass-top-x, 50%) 0%,
            rgba(255, 255, 255, 0.36) 0%,
            rgba(var(--shop-card-frame-light-rgb), 0.16) 34%,
            transparent 68%
        ),
        linear-gradient(
            var(--image-gloss-angle, 135deg),
            transparent 0%,
            transparent 36%,
            rgba(255, 255, 255, 0.34) 47%,
            rgba(var(--shop-card-frame-light-rgb), 0.16) 57%,
            transparent 70%,
            transparent 100%
        ) !important;
    background-size:
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        170% 170% !important;
    background-position:
        center,
        center,
        center,
        center,
        center,
        calc(50% + var(--image-gloss-shift-x, 0px) * 0.28) calc(50% + var(--image-gloss-shift-y, 0px) * 0.16) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.050),
        inset 0 0 0 2px rgba(var(--shop-card-frame-light-rgb), 0.055),
        inset 0 0 18px rgba(var(--shop-card-frame-light-rgb), 0.080) !important;
    filter:
        saturate(1.02)
        brightness(1.88)
        blur(calc(0.05px + var(--image-gloss-blur, 0.16px) * 0.06)) !important;
    transform:
        translate3d(calc(var(--image-gloss-shift-x, 0px) * 0.016), calc(var(--image-gloss-shift-y, 0px) * 0.010), 0) !important;
    mix-blend-mode: screen !important;
    -webkit-mask: none !important;
    mask: none !important;
    -webkit-mask-composite: source-over !important;
    mask-composite: add !important;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-footer strong::after,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-footer strong::after,
body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-footer strong::after {
    opacity: calc(0.82 + (var(--tilt-strength, 0) * 0.18)) !important;
    filter:
        saturate(1.08)
        brightness(2.18)
        blur(calc(0.04px + var(--image-gloss-blur, 0.16px) * 0.04))
        drop-shadow(0 0 7px rgba(255, 255, 255, 0.26))
        drop-shadow(0 0 18px rgba(var(--shop-card-frame-main-rgb), 0.26)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.065),
        inset 0 0 0 2px rgba(var(--shop-card-frame-light-rgb), 0.080),
        inset 0 0 24px rgba(var(--shop-card-frame-light-rgb), 0.12) !important;
}

html[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image,
[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image {
    border-color: transparent !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.030),
        inset 0 12px 26px rgba(255, 255, 255, 0.08),
        0 var(--image-shadow-y, 24px) var(--image-shadow-blur, 42px) rgba(0, 0, 0, 0.28),
        0 0 20px rgba(var(--shop-card-frame-main-rgb), 0.10) !important;
}

html[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-image,
html[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-image,
html[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-image,
[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-image,
[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-image,
[data-theme="dark"] body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-image {
    border-color: transparent !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.040),
        inset 0 12px 26px rgba(255, 255, 255, 0.10),
        0 var(--image-shadow-y, 24px) var(--image-shadow-blur, 42px) rgba(0, 0, 0, 0.34),
        0 0 28px rgba(var(--shop-card-frame-main-rgb), 0.15) !important;
}

/* ======================================================================
   Shop patch 063
   Goods image and price rounded edge glare.
   The glare now follows a real rounded-rectangle ring instead of square
   edge gradients, so image and price corners do not produce broken tails.
   Privilege cards are not changed.
   ====================================================================== */

body.shop-page .shop-goods-category .shop-goods-preview-card {
    --goods-image-radius: 24px;
    --goods-image-edge-width: 3px;
    --goods-price-edge-width: 3px;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image {
    border-radius: var(--goods-image-radius) !important;
    clip-path: inset(0 round var(--goods-image-radius)) !important;
    overflow: hidden !important;
    contain: paint !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    padding: var(--goods-image-edge-width) !important;
    border-radius: var(--goods-image-radius) !important;
    pointer-events: none !important;
    opacity: calc(0.60 + (var(--tilt-strength, 0) * 0.30)) !important;
    background:
        radial-gradient(
            circle at var(--image-border-x, 50%) var(--image-border-y, 50%),
            rgba(255, 255, 255, 1.00) 0 4.8%,
            rgba(255, 255, 255, 0.84) 8.2%,
            rgba(var(--shop-card-frame-light-rgb), 0.54) 15%,
            rgba(var(--shop-card-frame-main-rgb), 0.18) 25%,
            transparent 40%
        ),
        conic-gradient(
            from calc(var(--image-gloss-angle, 135deg) - 45deg) at var(--image-border-x, 50%) var(--image-border-y, 50%),
            transparent 0deg,
            transparent 34deg,
            rgba(255, 255, 255, 0.72) 43deg,
            transparent 53deg,
            transparent 84deg,
            rgba(255, 255, 255, 0.32) 90deg,
            transparent 98deg,
            transparent 174deg,
            rgba(255, 255, 255, 0.30) 180deg,
            transparent 188deg,
            transparent 264deg,
            rgba(255, 255, 255, 0.28) 270deg,
            transparent 278deg,
            transparent 360deg
        ),
        linear-gradient(
            var(--image-gloss-angle, 135deg),
            transparent 0%,
            transparent 31%,
            rgba(255, 255, 255, 0.58) 45%,
            rgba(var(--shop-card-frame-light-rgb), 0.32) 55%,
            transparent 70%,
            transparent 100%
        ),
        linear-gradient(
            var(--image-gloss-angle, 135deg),
            rgba(var(--shop-card-frame-main-rgb), 0.28) 0%,
            rgba(var(--shop-card-frame-light-rgb), 0.56) 24%,
            rgba(255, 255, 255, 0.76) 45%,
            rgba(var(--shop-card-frame-light-rgb), 0.46) 63%,
            rgba(var(--shop-card-frame-main-rgb), 0.24) 100%
        ) !important;
    background-size:
        145% 145%,
        150% 150%,
        170% 170%,
        100% 100% !important;
    background-position:
        center,
        center,
        calc(50% + var(--image-gloss-shift-x, 0px) * 0.22) calc(50% + var(--image-gloss-shift-y, 0px) * 0.14),
        center !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.050),
        inset 0 0 14px rgba(var(--shop-card-frame-light-rgb), 0.070) !important;
    filter:
        saturate(1.02)
        brightness(1.68)
        blur(calc(0.035px + var(--image-gloss-blur, 0.16px) * 0.045)) !important;
    transform: translate3d(0, 0, 0) !important;
    mix-blend-mode: screen !important;
    clip-path: inset(0 round var(--goods-image-radius)) !important;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    mask-composite: exclude !important;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-image::after,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-image::after,
body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-image::after {
    opacity: calc(0.78 + (var(--tilt-strength, 0) * 0.18)) !important;
    filter:
        saturate(1.10)
        brightness(1.96)
        blur(calc(0.025px + var(--image-gloss-blur, 0.16px) * 0.035))
        drop-shadow(0 0 8px rgba(255, 255, 255, 0.20))
        drop-shadow(0 0 16px rgba(var(--shop-card-frame-main-rgb), 0.20)) !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-footer strong {
    overflow: visible !important;
    border-radius: 999px !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-footer strong::after {
    content: "" !important;
    position: absolute !important;
    inset: -1px !important;
    z-index: -1 !important;
    padding: var(--goods-price-edge-width) !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    opacity: calc(0.66 + (var(--tilt-strength, 0) * 0.26)) !important;
    background:
        radial-gradient(
            circle at var(--image-border-x, 50%) var(--image-border-y, 50%),
            rgba(255, 255, 255, 1.00) 0 4.8%,
            rgba(255, 255, 255, 0.82) 8%,
            rgba(var(--shop-card-frame-light-rgb), 0.52) 15%,
            rgba(var(--shop-card-frame-main-rgb), 0.18) 25%,
            transparent 40%
        ),
        conic-gradient(
            from calc(var(--image-gloss-angle, 135deg) - 45deg) at var(--image-border-x, 50%) var(--image-border-y, 50%),
            transparent 0deg,
            transparent 34deg,
            rgba(255, 255, 255, 0.70) 43deg,
            transparent 53deg,
            transparent 84deg,
            rgba(255, 255, 255, 0.30) 90deg,
            transparent 98deg,
            transparent 174deg,
            rgba(255, 255, 255, 0.28) 180deg,
            transparent 188deg,
            transparent 264deg,
            rgba(255, 255, 255, 0.26) 270deg,
            transparent 278deg,
            transparent 360deg
        ),
        linear-gradient(
            var(--image-gloss-angle, 135deg),
            transparent 0%,
            transparent 30%,
            rgba(255, 255, 255, 0.58) 45%,
            rgba(var(--shop-card-frame-light-rgb), 0.30) 56%,
            transparent 71%,
            transparent 100%
        ),
        linear-gradient(
            var(--image-gloss-angle, 135deg),
            rgba(var(--shop-card-frame-main-rgb), 0.26) 0%,
            rgba(var(--shop-card-frame-light-rgb), 0.54) 24%,
            rgba(255, 255, 255, 0.74) 45%,
            rgba(var(--shop-card-frame-light-rgb), 0.44) 63%,
            rgba(var(--shop-card-frame-main-rgb), 0.22) 100%
        ) !important;
    background-size:
        145% 145%,
        150% 150%,
        170% 170%,
        100% 100% !important;
    background-position:
        center,
        center,
        calc(50% + var(--image-gloss-shift-x, 0px) * 0.20) calc(50% + var(--image-gloss-shift-y, 0px) * 0.12),
        center !important;
    filter:
        saturate(1.04)
        brightness(1.76)
        blur(calc(0.030px + var(--image-gloss-blur, 0.16px) * 0.040)) !important;
    transform: translate3d(0, 0, 0) !important;
    mix-blend-mode: screen !important;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    mask-composite: exclude !important;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-footer strong::after,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-footer strong::after,
body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-footer strong::after {
    opacity: calc(0.84 + (var(--tilt-strength, 0) * 0.14)) !important;
    filter:
        saturate(1.10)
        brightness(2.02)
        blur(calc(0.025px + var(--image-gloss-blur, 0.16px) * 0.030))
        drop-shadow(0 0 7px rgba(255, 255, 255, 0.22))
        drop-shadow(0 0 16px rgba(var(--shop-card-frame-main-rgb), 0.22)) !important;
}

/* ======================================================================
   Shop patch 064
   Goods image and price edge glare copied from the VIP principle.
   The static border is transparent; the element background is clipped to
   the padding box, so no image/price pixels can leak into the border slot.
   The visible part is only the perspective glare inside the exact rounded
   border area. Privilege cards are not changed.
   ====================================================================== */

body.shop-page .shop-goods-category .shop-goods-preview-card {
    --goods-edge-width: 2px;
    --goods-image-radius: 24px;
    --goods-image-inner-radius: calc(var(--goods-image-radius) - var(--goods-edge-width));
    --goods-price-edge-width: 2px;
    --image-border-flare-core: rgba(255, 255, 255, 1.00);
    --image-border-flare-mid: rgba(var(--shop-card-frame-light-rgb), 0.86);
    --image-border-flare-soft: rgba(var(--shop-card-frame-main-rgb), 0.28);
    --image-border-glow: rgba(var(--shop-card-frame-main-rgb), 0.34);
    --image-gloss-line: rgba(255, 255, 255, 0.72);
    --image-gloss-line-soft: rgba(var(--shop-card-frame-light-rgb), 0.34);
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image {
    position: relative !important;
    border: var(--goods-edge-width) solid transparent !important;
    border-radius: var(--goods-image-radius) !important;
    background-clip: padding-box !important;
    overflow: hidden !important;
    contain: paint !important;
    clip-path: none !important;
    box-shadow:
        0 var(--image-shadow-y, 24px) var(--image-shadow-blur, 42px) rgba(17, 24, 39, 0.18),
        0 0 22px rgba(var(--shop-card-frame-main-rgb), 0.10) !important;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-image,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-image,
body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-image {
    border-color: transparent !important;
    box-shadow:
        0 var(--image-shadow-y, 24px) var(--image-shadow-blur, 42px) rgba(17, 24, 39, 0.20),
        0 0 28px rgba(var(--shop-card-frame-main-rgb), 0.16) !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image::before {
    inset: var(--goods-edge-width) !important;
    border-radius: var(--goods-image-inner-radius) !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image-glare {
    inset: var(--goods-edge-width) !important;
    border-radius: var(--goods-image-inner-radius) !important;
    clip-path: none !important;
    overflow: hidden !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 8 !important;
    padding: var(--goods-edge-width) !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    opacity: calc(var(--image-gloss-opacity, 0.54) * 0.96) !important;
    background:
        radial-gradient(
            circle at var(--image-border-x, 50%) var(--image-border-y, 50%),
            var(--image-border-flare-core) 0 2.1%,
            var(--image-border-flare-mid) 4.6%,
            var(--image-border-flare-soft) 11%,
            rgba(255, 255, 255, 0.00) 25%
        ),
        radial-gradient(
            ellipse 62% 1.55% at var(--image-border-x, 50%) var(--image-border-y, 50%),
            rgba(255, 255, 255, 0.96) 0%,
            var(--image-border-flare-mid) 14%,
            rgba(255, 255, 255, 0.18) 34%,
            transparent 70%
        ),
        radial-gradient(
            ellipse 1.55% 62% at var(--image-border-x, 50%) var(--image-border-y, 50%),
            rgba(255, 255, 255, 0.90) 0%,
            var(--image-border-flare-mid) 14%,
            rgba(255, 255, 255, 0.16) 34%,
            transparent 70%
        ),
        conic-gradient(
            from calc(var(--image-gloss-angle, 135deg) - 45deg) at var(--image-border-x, 50%) var(--image-border-y, 50%),
            transparent 0deg,
            transparent 35deg,
            rgba(255, 255, 255, 0.72) 43deg,
            transparent 50deg,
            transparent 84deg,
            rgba(255, 255, 255, 0.36) 90deg,
            transparent 96deg,
            transparent 174deg,
            rgba(255, 255, 255, 0.34) 180deg,
            transparent 186deg,
            transparent 264deg,
            rgba(255, 255, 255, 0.32) 270deg,
            transparent 276deg,
            transparent 360deg
        ),
        linear-gradient(
            var(--image-gloss-angle, 135deg),
            rgba(255, 255, 255, 0.00) 0%,
            rgba(255, 255, 255, 0.00) 32%,
            var(--image-gloss-line) 47%,
            var(--image-gloss-line-soft) 57%,
            rgba(255, 255, 255, 0.00) 72%,
            rgba(255, 255, 255, 0.00) 100%
        ) !important;
    filter:
        saturate(1.18)
        brightness(1.58)
        blur(calc(var(--image-gloss-blur, 0.16px) * 0.12))
        drop-shadow(0 0 8px var(--image-border-glow))
        drop-shadow(0 0 22px var(--image-border-glow)) !important;
    transform: translate3d(0, 0, 0) !important;
    mix-blend-mode: screen !important;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    mask-composite: exclude !important;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-image::after,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-image::after,
body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-image::after {
    opacity: 1 !important;
    filter:
        saturate(1.24)
        brightness(1.84)
        blur(calc(var(--image-gloss-blur, 0.16px) * 0.10))
        drop-shadow(0 0 11px var(--image-border-glow))
        drop-shadow(0 0 34px var(--image-border-glow)) !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-footer strong {
    position: relative !important;
    isolation: isolate !important;
    border: var(--goods-price-edge-width) solid transparent !important;
    border-radius: 999px !important;
    background-clip: padding-box !important;
    overflow: visible !important;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.15),
        0 0 20px rgba(var(--shop-card-frame-main-rgb), 0.12) !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-footer strong::before {
    inset: var(--goods-price-edge-width) !important;
    border-radius: inherit !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-footer strong::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    padding: var(--goods-price-edge-width) !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    opacity: calc(var(--image-gloss-opacity, 0.54) * 0.98) !important;
    background:
        radial-gradient(
            circle at var(--image-border-x, 50%) var(--image-border-y, 50%),
            var(--price-border-flare-core, var(--image-border-flare-core)) 0 2.1%,
            var(--price-border-flare-mid, var(--image-border-flare-mid)) 4.6%,
            var(--price-border-flare-soft, var(--image-border-flare-soft)) 11%,
            rgba(255, 255, 255, 0.00) 25%
        ),
        radial-gradient(
            ellipse 62% 1.55% at var(--image-border-x, 50%) var(--image-border-y, 50%),
            rgba(255, 255, 255, 0.96) 0%,
            var(--price-border-flare-mid, var(--image-border-flare-mid)) 14%,
            rgba(255, 255, 255, 0.18) 34%,
            transparent 70%
        ),
        radial-gradient(
            ellipse 1.55% 62% at var(--image-border-x, 50%) var(--image-border-y, 50%),
            rgba(255, 255, 255, 0.90) 0%,
            var(--price-border-flare-mid, var(--image-border-flare-mid)) 14%,
            rgba(255, 255, 255, 0.16) 34%,
            transparent 70%
        ),
        conic-gradient(
            from calc(var(--image-gloss-angle, 135deg) - 45deg) at var(--image-border-x, 50%) var(--image-border-y, 50%),
            transparent 0deg,
            transparent 35deg,
            rgba(255, 255, 255, 0.72) 43deg,
            transparent 50deg,
            transparent 84deg,
            rgba(255, 255, 255, 0.36) 90deg,
            transparent 96deg,
            transparent 174deg,
            rgba(255, 255, 255, 0.34) 180deg,
            transparent 186deg,
            transparent 264deg,
            rgba(255, 255, 255, 0.32) 270deg,
            transparent 276deg,
            transparent 360deg
        ),
        linear-gradient(
            var(--image-gloss-angle, 135deg),
            rgba(255, 255, 255, 0.00) 0%,
            rgba(255, 255, 255, 0.00) 32%,
            var(--image-gloss-line) 47%,
            var(--image-gloss-line-soft) 57%,
            rgba(255, 255, 255, 0.00) 72%,
            rgba(255, 255, 255, 0.00) 100%
        ) !important;
    filter:
        saturate(1.18)
        brightness(1.58)
        blur(calc(var(--image-gloss-blur, 0.16px) * 0.12))
        drop-shadow(0 0 8px var(--image-border-glow))
        drop-shadow(0 0 22px var(--image-border-glow)) !important;
    transform: translate3d(0, 0, 0) !important;
    mix-blend-mode: screen !important;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    mask-composite: exclude !important;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-footer strong::after,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-footer strong::after,
body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-footer strong::after {
    opacity: 1 !important;
    filter:
        saturate(1.24)
        brightness(1.84)
        blur(calc(var(--image-gloss-blur, 0.16px) * 0.10))
        drop-shadow(0 0 11px var(--image-border-glow))
        drop-shadow(0 0 34px var(--image-border-glow)) !important;
}

/* ======================================================================
   Shop patch 065
   Goods image and price radius alignment fix.
   The previous transparent border changed the effective inner radius, so
   the image corner and the glare ring could differ by a pixel. This patch
   removes the physical border from the image/price surfaces and draws the
   glare as an overlay clipped to the same rounded shape as the surface.
   Static outline remains transparent: only the moving glare is visible.
   Privilege cards are not changed.
   ====================================================================== */

body.shop-page .shop-goods-category .shop-goods-preview-card {
    --goods-image-radius: 26px;
    --goods-image-edge-width: 3px;
    --goods-price-edge-width: 3px;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image {
    border: 0 solid transparent !important;
    border-radius: var(--goods-image-radius) !important;
    background-clip: border-box !important;
    overflow: hidden !important;
    clip-path: inset(0 round var(--goods-image-radius)) !important;
    contain: paint !important;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-image,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-image,
body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-image {
    border-color: transparent !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image::before,
body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image-glare,
body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image span {
    inset: 0 !important;
    border-radius: inherit !important;
    clip-path: inset(0 round var(--goods-image-radius)) !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image::after {
    inset: 0 !important;
    padding: var(--goods-image-edge-width) !important;
    border-radius: inherit !important;
    background:
        radial-gradient(
            circle at var(--image-border-x, 50%) var(--image-border-y, 50%),
            var(--image-border-flare-core) 0 3.0%,
            var(--image-border-flare-mid) 7.2%,
            var(--image-border-flare-soft) 17%,
            rgba(255, 255, 255, 0.00) 34%
        ),
        linear-gradient(
            var(--image-gloss-angle, 135deg),
            rgba(255, 255, 255, 0.00) 0%,
            rgba(255, 255, 255, 0.00) 29%,
            var(--image-gloss-line) 45%,
            var(--image-gloss-line-soft) 57%,
            rgba(255, 255, 255, 0.00) 73%,
            rgba(255, 255, 255, 0.00) 100%
        ),
        linear-gradient(
            calc(var(--image-gloss-angle, 135deg) + 90deg),
            transparent 0%,
            rgba(var(--shop-card-frame-light-rgb), 0.28) 48%,
            transparent 100%
        ) !important;
    opacity: calc(var(--image-gloss-opacity, 0.54) * 0.98) !important;
    filter:
        saturate(1.18)
        brightness(1.58)
        blur(calc(var(--image-gloss-blur, 0.16px) * 0.18))
        drop-shadow(0 0 8px var(--image-border-glow))
        drop-shadow(0 0 24px var(--image-border-glow)) !important;
    transform: translate3d(0, 0, 0) !important;
    mix-blend-mode: screen !important;
    clip-path: inset(0 round var(--goods-image-radius)) !important;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    mask-composite: exclude !important;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-image::after,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-image::after,
body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-image::after {
    opacity: 1 !important;
    filter:
        saturate(1.24)
        brightness(1.84)
        blur(calc(var(--image-gloss-blur, 0.16px) * 0.14))
        drop-shadow(0 0 11px var(--image-border-glow))
        drop-shadow(0 0 34px var(--image-border-glow)) !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-footer strong {
    border: 0 solid transparent !important;
    border-radius: 999px !important;
    background-clip: border-box !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-footer strong::before {
    inset: 0 !important;
    border-radius: inherit !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-footer strong::after {
    inset: 0 !important;
    z-index: 2 !important;
    padding: var(--goods-price-edge-width) !important;
    border-radius: inherit !important;
    background:
        radial-gradient(
            circle at var(--image-border-x, 50%) var(--image-border-y, 50%),
            var(--price-border-flare-core, var(--image-border-flare-core)) 0 3.0%,
            var(--price-border-flare-mid, var(--image-border-flare-mid)) 7.2%,
            var(--price-border-flare-soft, var(--image-border-flare-soft)) 17%,
            rgba(255, 255, 255, 0.00) 34%
        ),
        linear-gradient(
            var(--image-gloss-angle, 135deg),
            rgba(255, 255, 255, 0.00) 0%,
            rgba(255, 255, 255, 0.00) 29%,
            var(--image-gloss-line) 45%,
            var(--image-gloss-line-soft) 57%,
            rgba(255, 255, 255, 0.00) 73%,
            rgba(255, 255, 255, 0.00) 100%
        ) !important;
    opacity: calc(var(--image-gloss-opacity, 0.54) * 0.98) !important;
    filter:
        saturate(1.18)
        brightness(1.58)
        blur(calc(var(--image-gloss-blur, 0.16px) * 0.18))
        drop-shadow(0 0 8px var(--image-border-glow))
        drop-shadow(0 0 24px var(--image-border-glow)) !important;
    transform: translate3d(0, 0, 0) !important;
    mix-blend-mode: screen !important;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    mask-composite: exclude !important;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-footer strong::after,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-footer strong::after,
body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-footer strong::after {
    opacity: 1 !important;
    filter:
        saturate(1.24)
        brightness(1.84)
        blur(calc(var(--image-gloss-blur, 0.16px) * 0.14))
        drop-shadow(0 0 11px var(--image-border-glow))
        drop-shadow(0 0 34px var(--image-border-glow)) !important;
}

/* ======================================================================
   Shop patch 066
   Goods image/price fully transparent outline.
   The outline slot itself is transparent: the image/price background is
   clipped away from it. Only the moving glare layer can appear on hover/
   tilt. Privilege cards are not changed.
   ====================================================================== */

body.shop-page .shop-goods-category .shop-goods-preview-card {
    --goods-image-radius: 26px;
    --goods-image-edge-width: 3px;
    --goods-image-inner-radius: calc(var(--goods-image-radius) - var(--goods-image-edge-width));
    --goods-price-edge-width: 3px;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image {
    box-sizing: border-box !important;
    border: var(--goods-image-edge-width) solid transparent !important;
    border-radius: var(--goods-image-radius) !important;
    background-clip: padding-box !important;
    background-origin: padding-box !important;
    overflow: hidden !important;
    clip-path: inset(0 round var(--goods-image-radius)) !important;
    contain: paint !important;
    box-shadow:
        0 var(--image-shadow-y, 24px) var(--image-shadow-blur, 42px) rgba(17, 24, 39, 0.18),
        0 0 24px rgba(var(--shop-card-frame-main-rgb), 0.10) !important;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-image,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-image,
body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-image {
    border-color: transparent !important;
    box-shadow:
        0 var(--image-shadow-y, 24px) var(--image-shadow-blur, 42px) rgba(17, 24, 39, 0.20),
        0 0 30px rgba(var(--shop-card-frame-main-rgb), 0.16) !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image::before,
body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image-glare,
body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image span {
    inset: 0 !important;
    border-radius: var(--goods-image-inner-radius) !important;
    clip-path: inset(0 round var(--goods-image-inner-radius)) !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image::after {
    content: "" !important;
    position: absolute !important;
    inset: calc(-1 * var(--goods-image-edge-width)) !important;
    z-index: 8 !important;
    padding: var(--goods-image-edge-width) !important;
    border-radius: calc(var(--goods-image-radius) + var(--goods-image-edge-width)) !important;
    pointer-events: none !important;
    background:
        radial-gradient(
            circle at var(--image-border-x, 50%) var(--image-border-y, 50%),
            rgba(255, 255, 255, 1.00) 0 3.0%,
            rgba(255, 255, 255, 0.72) 7.2%,
            rgba(var(--shop-card-frame-light-rgb), 0.38) 16%,
            rgba(255, 255, 255, 0.00) 33%
        ),
        linear-gradient(
            var(--image-gloss-angle, 135deg),
            rgba(255, 255, 255, 0.00) 0%,
            rgba(255, 255, 255, 0.00) 31%,
            rgba(255, 255, 255, 0.70) 46%,
            rgba(var(--shop-card-frame-light-rgb), 0.28) 58%,
            rgba(255, 255, 255, 0.00) 74%,
            rgba(255, 255, 255, 0.00) 100%
        ) !important;
    opacity: 0 !important;
    filter:
        saturate(1.16)
        brightness(1.72)
        blur(calc(var(--image-gloss-blur, 0.16px) * 0.12))
        drop-shadow(0 0 10px var(--image-border-glow)) !important;
    transform: translate3d(0, 0, 0) !important;
    mix-blend-mode: screen !important;
    clip-path: inset(0 round calc(var(--goods-image-radius) + var(--goods-image-edge-width))) !important;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    mask-composite: exclude !important;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-image::after,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-image::after,
body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-image::after {
    opacity: 1 !important;
    filter:
        saturate(1.24)
        brightness(1.92)
        blur(calc(var(--image-gloss-blur, 0.16px) * 0.10))
        drop-shadow(0 0 12px rgba(255, 255, 255, 0.24))
        drop-shadow(0 0 30px var(--image-border-glow)) !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-footer strong {
    box-sizing: border-box !important;
    border: var(--goods-price-edge-width) solid transparent !important;
    border-radius: 999px !important;
    background-clip: padding-box !important;
    background-origin: padding-box !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-footer strong,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-footer strong,
body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-footer strong {
    border-color: transparent !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-footer strong::before {
    inset: 0 !important;
    border-radius: inherit !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-footer strong::after {
    content: "" !important;
    position: absolute !important;
    inset: calc(-1 * var(--goods-price-edge-width)) !important;
    z-index: 2 !important;
    padding: var(--goods-price-edge-width) !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    background:
        radial-gradient(
            circle at var(--image-border-x, 50%) var(--image-border-y, 50%),
            rgba(255, 255, 255, 1.00) 0 3.0%,
            rgba(255, 255, 255, 0.72) 7.2%,
            rgba(var(--shop-card-frame-light-rgb), 0.38) 16%,
            rgba(255, 255, 255, 0.00) 33%
        ),
        linear-gradient(
            var(--image-gloss-angle, 135deg),
            rgba(255, 255, 255, 0.00) 0%,
            rgba(255, 255, 255, 0.00) 31%,
            rgba(255, 255, 255, 0.70) 46%,
            rgba(var(--shop-card-frame-light-rgb), 0.28) 58%,
            rgba(255, 255, 255, 0.00) 74%,
            rgba(255, 255, 255, 0.00) 100%
        ) !important;
    opacity: 0 !important;
    filter:
        saturate(1.16)
        brightness(1.72)
        blur(calc(var(--image-gloss-blur, 0.16px) * 0.12))
        drop-shadow(0 0 10px var(--image-border-glow)) !important;
    transform: translate3d(0, 0, 0) !important;
    mix-blend-mode: screen !important;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    mask-composite: exclude !important;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-footer strong::after,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-footer strong::after,
body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-footer strong::after {
    opacity: 1 !important;
    filter:
        saturate(1.24)
        brightness(1.92)
        blur(calc(var(--image-gloss-blur, 0.16px) * 0.10))
        drop-shadow(0 0 12px rgba(255, 255, 255, 0.24))
        drop-shadow(0 0 30px var(--image-border-glow)) !important;
}

/* ======================================================================
   Shop patch 067
   Goods image/price transparent outline with visible glare.
   Static outline is fully transparent by default. The moving glare is drawn
   as a real background layer in the transparent border area, without masks.
   This keeps rounded corners exact and prevents the glare from disappearing.
   Privilege cards are not changed.
   ====================================================================== */

body.shop-page .shop-goods-category .shop-goods-preview-card {
    --goods-image-radius: 24px;
    --goods-price-radius: 999px;
    --goods-edge-width: 3px;
    --goods-edge-hot-opacity: 0;
    --goods-edge-mid-opacity: 0;
    --goods-edge-soft-opacity: 0;
    --goods-edge-line-opacity: 0;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card,
body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting {
    --goods-edge-hot-opacity: 0.98;
    --goods-edge-mid-opacity: 0.66;
    --goods-edge-soft-opacity: 0.36;
    --goods-edge-line-opacity: 0.62;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image {
    box-sizing: border-box !important;
    border: var(--goods-edge-width) solid transparent !important;
    border-radius: var(--goods-image-radius) !important;
    overflow: hidden !important;
    clip-path: inset(0 round var(--goods-image-radius)) !important;
    background:
        radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.42) 32%, transparent 64%) padding-box,
        linear-gradient(135deg, var(--card-accent-1), var(--card-accent-2)) padding-box,
        radial-gradient(
            circle at var(--image-border-x, 50%) var(--image-border-y, 50%),
            rgba(255, 255, 255, var(--goods-edge-hot-opacity)) 0 5%,
            rgba(255, 255, 255, var(--goods-edge-mid-opacity)) 10%,
            rgba(var(--shop-card-frame-light-rgb), var(--goods-edge-soft-opacity)) 21%,
            rgba(255, 255, 255, 0.00) 42%
        ) border-box,
        linear-gradient(
            var(--image-gloss-angle, 135deg),
            rgba(255, 255, 255, 0.00) 0%,
            rgba(255, 255, 255, 0.00) 28%,
            rgba(255, 255, 255, var(--goods-edge-line-opacity)) 43%,
            rgba(var(--shop-card-frame-light-rgb), var(--goods-edge-soft-opacity)) 56%,
            rgba(255, 255, 255, 0.00) 72%,
            rgba(255, 255, 255, 0.00) 100%
        ) border-box !important;
    background-origin: padding-box, padding-box, border-box, border-box !important;
    background-clip: padding-box, padding-box, border-box, border-box !important;
    box-shadow:
        0 var(--image-shadow-y, 24px) var(--image-shadow-blur, 42px) rgba(17, 24, 39, 0.18),
        0 0 24px rgba(var(--shop-card-frame-main-rgb), 0.10) !important;
    contain: paint !important;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-image,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-image,
body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-image {
    border-color: transparent !important;
    box-shadow:
        0 var(--image-shadow-y, 24px) var(--image-shadow-blur, 42px) rgba(17, 24, 39, 0.20),
        0 0 30px rgba(var(--shop-card-frame-main-rgb), 0.16),
        0 0 22px rgba(255, 255, 255, 0.10) !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image::after {
    display: none !important;
    content: none !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image::before,
body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image-glare,
body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image span {
    border-radius: calc(var(--goods-image-radius) - var(--goods-edge-width)) !important;
    clip-path: inset(0 round calc(var(--goods-image-radius) - var(--goods-edge-width))) !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-footer strong {
    box-sizing: border-box !important;
    border: var(--goods-edge-width) solid transparent !important;
    border-radius: var(--goods-price-radius) !important;
    overflow: hidden !important;
    background:
        radial-gradient(
            circle at var(--image-border-x, 50%) var(--image-border-y, 50%),
            rgba(255, 255, 255, var(--goods-edge-hot-opacity)) 0 5%,
            rgba(255, 255, 255, var(--goods-edge-mid-opacity)) 10%,
            rgba(var(--shop-card-frame-light-rgb), var(--goods-edge-soft-opacity)) 21%,
            rgba(255, 255, 255, 0.00) 42%
        ) border-box,
        linear-gradient(
            var(--image-gloss-angle, 135deg),
            rgba(255, 255, 255, 0.00) 0%,
            rgba(255, 255, 255, 0.00) 28%,
            rgba(255, 255, 255, var(--goods-edge-line-opacity)) 43%,
            rgba(var(--shop-card-frame-light-rgb), var(--goods-edge-soft-opacity)) 56%,
            rgba(255, 255, 255, 0.00) 72%,
            rgba(255, 255, 255, 0.00) 100%
        ) border-box !important;
    background-origin: border-box, border-box !important;
    background-clip: border-box, border-box !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-footer strong::before {
    inset: 0 !important;
    border-radius: calc(var(--goods-price-radius) - var(--goods-edge-width)) !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-footer strong::after {
    display: none !important;
    content: none !important;
}

/* -------------------------
   Shop patch 068
   Goods category order and count: enforce maximum 4 cards per row.
   ------------------------- */

body.shop-page #shopItems .shop-goods-category-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (max-width: 1100px) {
    body.shop-page #shopItems .shop-goods-category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 820px) {
    body.shop-page #shopItems .shop-goods-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    body.shop-page #shopItems .shop-goods-category-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}


/* -------------------------
   Shop patch 079
   Goods card typography polish: centered text and cleaner font stack.
   ------------------------- */

body.shop-page #shopItems .shop-goods-preview-card,
body.shop-page #shopItems .shop-goods-preview-card * {
    font-family: "Inter", "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

body.shop-page #shopItems .shop-goods-preview-card .donate-card-inner {
    align-items: center !important;
    text-align: center !important;
}

body.shop-page #shopItems .shop-goods-preview-card .donate-card-badge {
    align-self: center !important;
    justify-content: center !important;
    margin-inline: auto !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
}

body.shop-page #shopItems .shop-goods-preview-card h2 {
    width: 100% !important;
    margin: 18px 0 0 !important;
    text-align: center !important;
    font-size: clamp(22px, 1.72vw, 27px) !important;
    font-weight: 800 !important;
    line-height: 1.14 !important;
    letter-spacing: -0.035em !important;
    text-wrap: balance;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: manual !important;
}

body.shop-page #shopItems .shop-goods-preview-card p {
    width: 100% !important;
    margin: 10px 0 0 !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.36 !important;
    letter-spacing: -0.01em !important;
    color: rgba(255, 255, 255, 0.88) !important;
    text-wrap: balance;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: manual !important;
}

body.shop-page #shopItems .shop-goods-preview-card .donate-card-footer {
    justify-content: center !important;
    text-align: center !important;
}

body.shop-page #shopItems .shop-goods-preview-card .donate-card-footer strong {
    margin-inline: auto !important;
    text-align: center !important;
    font-size: clamp(22px, 1.7vw, 26px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
}

body.shop-page #shopItems .shop-goods-preview-card .donate-card-image span {
    font-family: "Inter", "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
}

/* -------------------------
   Shop patch 081
   Goods price buttons use category theme colors.
   ------------------------- */

body.shop-page #shopItems .shop-goods-category .shop-goods-preview-card .donate-card-footer strong {
    color: #FFFFFF !important;
    border-color: transparent !important;
    background:
        linear-gradient(
            135deg,
            rgba(var(--shop-card-frame-dark-rgb), 0.94) 0%,
            rgba(var(--shop-card-frame-main-rgb), 0.88) 48%,
            rgba(var(--shop-card-frame-light-rgb), 0.72) 100%
        ) padding-box,
        radial-gradient(
            circle at var(--image-border-x, 50%) var(--image-border-y, 50%),
            rgba(255, 255, 255, var(--goods-edge-hot-opacity)) 0 5%,
            rgba(255, 255, 255, var(--goods-edge-mid-opacity)) 10%,
            rgba(var(--shop-card-frame-light-rgb), var(--goods-edge-soft-opacity)) 21%,
            rgba(255, 255, 255, 0.00) 42%
        ) border-box,
        linear-gradient(
            var(--image-gloss-angle, 135deg),
            rgba(255, 255, 255, 0.00) 0%,
            rgba(255, 255, 255, 0.00) 28%,
            rgba(255, 255, 255, var(--goods-edge-line-opacity)) 43%,
            rgba(var(--shop-card-frame-light-rgb), var(--goods-edge-soft-opacity)) 56%,
            rgba(255, 255, 255, 0.00) 72%,
            rgba(255, 255, 255, 0.00) 100%
        ) border-box !important;
    background-origin: padding-box, border-box, border-box !important;
    background-clip: padding-box, border-box, border-box !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        inset 0 -14px 22px rgba(var(--shop-card-frame-dark-rgb), 0.20),
        0 8px 18px rgba(0, 0, 0, 0.16),
        0 0 22px rgba(var(--shop-card-frame-main-rgb), 0.18) !important;
    text-shadow:
        0 1px 10px rgba(0, 0, 0, 0.32),
        0 0 14px rgba(255, 255, 255, 0.10) !important;
}

body.shop-page #shopItems .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-footer strong,
body.shop-page #shopItems .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-footer strong,
body.shop-page #shopItems .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-footer strong {
    background:
        linear-gradient(
            135deg,
            rgba(var(--shop-card-frame-dark-rgb), 0.96) 0%,
            rgba(var(--shop-card-frame-main-rgb), 0.94) 46%,
            rgba(var(--shop-card-frame-light-rgb), 0.82) 100%
        ) padding-box,
        radial-gradient(
            circle at var(--image-border-x, 50%) var(--image-border-y, 50%),
            rgba(255, 255, 255, var(--goods-edge-hot-opacity)) 0 5%,
            rgba(255, 255, 255, var(--goods-edge-mid-opacity)) 10%,
            rgba(var(--shop-card-frame-light-rgb), var(--goods-edge-soft-opacity)) 21%,
            rgba(255, 255, 255, 0.00) 42%
        ) border-box,
        linear-gradient(
            var(--image-gloss-angle, 135deg),
            rgba(255, 255, 255, 0.00) 0%,
            rgba(255, 255, 255, 0.00) 28%,
            rgba(255, 255, 255, var(--goods-edge-line-opacity)) 43%,
            rgba(var(--shop-card-frame-light-rgb), var(--goods-edge-soft-opacity)) 56%,
            rgba(255, 255, 255, 0.00) 72%,
            rgba(255, 255, 255, 0.00) 100%
        ) border-box !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        inset 0 -15px 24px rgba(var(--shop-card-frame-dark-rgb), 0.18),
        0 9px 20px rgba(0, 0, 0, 0.18),
        0 0 30px rgba(var(--shop-card-frame-main-rgb), 0.28),
        0 0 18px rgba(var(--shop-card-frame-light-rgb), 0.18) !important;
}

/* -------------------------
   Shop patch 082
   Force all goods price buttons to use the category theme color.
   This also overrides the older per-card price-panel variables from donate-card-* classes.
   ------------------------- */

body.shop-page #shopItems .shop-goods-category .shop-goods-preview-card .donate-card-footer strong {
    --price-panel-bg:
        linear-gradient(
            135deg,
            rgba(var(--shop-card-frame-dark-rgb), 0.98) 0%,
            rgba(var(--shop-card-frame-main-rgb), 0.94) 48%,
            rgba(var(--shop-card-frame-light-rgb), 0.82) 100%
        ) !important;
    --price-panel-glow: rgba(var(--shop-card-frame-main-rgb), 0.34) !important;
    --price-text-color: #FFFFFF !important;
    --price-text-shadow:
        0 1px 10px rgba(0, 0, 0, 0.34),
        0 0 14px rgba(255, 255, 255, 0.12) !important;

    color: #FFFFFF !important;
    background:
        var(--price-panel-bg) padding-box,
        radial-gradient(
            circle at var(--image-border-x, 50%) var(--image-border-y, 50%),
            rgba(255, 255, 255, var(--goods-edge-hot-opacity)) 0 5%,
            rgba(255, 255, 255, var(--goods-edge-mid-opacity)) 10%,
            rgba(var(--shop-card-frame-light-rgb), var(--goods-edge-soft-opacity)) 21%,
            rgba(255, 255, 255, 0.00) 42%
        ) border-box,
        linear-gradient(
            var(--image-gloss-angle, 135deg),
            rgba(255, 255, 255, 0.00) 0%,
            rgba(255, 255, 255, 0.00) 28%,
            rgba(255, 255, 255, var(--goods-edge-line-opacity)) 43%,
            rgba(var(--shop-card-frame-light-rgb), var(--goods-edge-soft-opacity)) 56%,
            rgba(255, 255, 255, 0.00) 72%,
            rgba(255, 255, 255, 0.00) 100%
        ) border-box !important;
    background-origin: padding-box, border-box, border-box !important;
    background-clip: padding-box, border-box, border-box !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        inset 0 -14px 22px rgba(var(--shop-card-frame-dark-rgb), 0.22),
        0 8px 18px rgba(0, 0, 0, 0.16),
        0 0 24px rgba(var(--shop-card-frame-main-rgb), 0.22) !important;
    text-shadow: var(--price-text-shadow) !important;
}

body.shop-page #shopItems .shop-goods-category .shop-goods-preview-card .donate-card-footer strong::before {
    background: var(--price-panel-bg) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        inset 0 -1px 0 rgba(var(--shop-card-frame-dark-rgb), 0.18),
        0 8px 18px rgba(0, 0, 0, 0.16),
        0 0 22px var(--price-panel-glow) !important;
}

body.shop-page #shopItems .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-footer strong,
body.shop-page #shopItems .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-footer strong,
body.shop-page #shopItems .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-footer strong {
    --price-panel-bg:
        linear-gradient(
            135deg,
            rgba(var(--shop-card-frame-dark-rgb), 1.00) 0%,
            rgba(var(--shop-card-frame-main-rgb), 1.00) 46%,
            rgba(var(--shop-card-frame-light-rgb), 0.90) 100%
        ) !important;
    --price-panel-glow: rgba(var(--shop-card-frame-main-rgb), 0.46) !important;

    background:
        var(--price-panel-bg) padding-box,
        radial-gradient(
            circle at var(--image-border-x, 50%) var(--image-border-y, 50%),
            rgba(255, 255, 255, var(--goods-edge-hot-opacity)) 0 5%,
            rgba(255, 255, 255, var(--goods-edge-mid-opacity)) 10%,
            rgba(var(--shop-card-frame-light-rgb), var(--goods-edge-soft-opacity)) 21%,
            rgba(255, 255, 255, 0.00) 42%
        ) border-box,
        linear-gradient(
            var(--image-gloss-angle, 135deg),
            rgba(255, 255, 255, 0.00) 0%,
            rgba(255, 255, 255, 0.00) 28%,
            rgba(255, 255, 255, var(--goods-edge-line-opacity)) 43%,
            rgba(var(--shop-card-frame-light-rgb), var(--goods-edge-soft-opacity)) 56%,
            rgba(255, 255, 255, 0.00) 72%,
            rgba(255, 255, 255, 0.00) 100%
        ) border-box !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -15px 24px rgba(var(--shop-card-frame-dark-rgb), 0.18),
        0 9px 20px rgba(0, 0, 0, 0.18),
        0 0 32px rgba(var(--shop-card-frame-main-rgb), 0.34),
        0 0 20px rgba(var(--shop-card-frame-light-rgb), 0.20) !important;
}


/* -------------------------
   Shop patch 083
   Soften goods price-button gradients into a cleaner pastel treatment.
   ------------------------- */

body.shop-page #shopItems .shop-goods-category .shop-goods-preview-card .donate-card-footer strong {
    --price-panel-bg:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.18) 0%,
            rgba(var(--shop-card-frame-light-rgb), 0.74) 14%,
            rgba(var(--shop-card-frame-main-rgb), 0.62) 52%,
            rgba(var(--shop-card-frame-light-rgb), 0.82) 100%
        ) !important;
    --price-panel-glow: rgba(var(--shop-card-frame-main-rgb), 0.24) !important;
    --price-text-shadow:
        0 1px 8px rgba(0, 0, 0, 0.22),
        0 0 10px rgba(255, 255, 255, 0.10) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.44),
        inset 0 -10px 18px rgba(var(--shop-card-frame-dark-rgb), 0.12),
        0 8px 18px rgba(0, 0, 0, 0.12),
        0 0 20px rgba(var(--shop-card-frame-main-rgb), 0.16) !important;
}

body.shop-page #shopItems .shop-goods-category .shop-goods-preview-card .donate-card-footer strong::before {
    background: var(--price-panel-bg) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -1px 0 rgba(var(--shop-card-frame-dark-rgb), 0.10),
        0 8px 18px rgba(0, 0, 0, 0.12),
        0 0 18px var(--price-panel-glow) !important;
}

body.shop-page #shopItems .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-footer strong,
body.shop-page #shopItems .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-footer strong,
body.shop-page #shopItems .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-footer strong {
    --price-panel-bg:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(var(--shop-card-frame-light-rgb), 0.80) 14%,
            rgba(var(--shop-card-frame-main-rgb), 0.68) 50%,
            rgba(var(--shop-card-frame-light-rgb), 0.88) 100%
        ) !important;
    --price-panel-glow: rgba(var(--shop-card-frame-main-rgb), 0.30) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.50),
        inset 0 -11px 18px rgba(var(--shop-card-frame-dark-rgb), 0.10),
        0 9px 20px rgba(0, 0, 0, 0.13),
        0 0 24px rgba(var(--shop-card-frame-main-rgb), 0.22),
        0 0 14px rgba(var(--shop-card-frame-light-rgb), 0.16) !important;
}


/* -------------------------
   Shop patch 084
   Goods detail article with quantity selector and category-colored styling.
   ------------------------- */

.goods-article-overlay {
    --vip-article-accent-rgb: 240, 163, 65;
    --vip-article-accent-dark-rgb: 178, 92, 24;
    --vip-article-accent-soft-rgb: 255, 226, 166;
    --vip-article-header-bg-light:
        radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.54), transparent 30%),
        radial-gradient(circle at 78% 16%, rgba(var(--vip-article-accent-soft-rgb), 0.52), transparent 38%),
        linear-gradient(135deg, rgba(var(--vip-article-accent-soft-rgb), 0.62), rgba(var(--vip-article-accent-rgb), 0.34));
    --vip-article-header-bg-dark:
        radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.10), transparent 32%),
        radial-gradient(circle at 78% 16%, rgba(var(--vip-article-accent-rgb), 0.26), transparent 38%),
        linear-gradient(135deg, rgba(var(--vip-article-accent-dark-rgb), 0.38), rgba(17, 24, 39, 0.94));
}

.goods-article-category-items {
    --vip-article-accent-rgb: 240, 163, 65;
    --vip-article-accent-dark-rgb: 178, 92, 24;
    --vip-article-accent-soft-rgb: 255, 226, 166;
}

.goods-article-category-enchantments {
    --vip-article-accent-rgb: 168, 85, 247;
    --vip-article-accent-dark-rgb: 107, 33, 168;
    --vip-article-accent-soft-rgb: 227, 199, 255;
}

.goods-article-category-books {
    --vip-article-accent-rgb: 72, 151, 207;
    --vip-article-accent-dark-rgb: 47, 110, 157;
    --vip-article-accent-soft-rgb: 192, 224, 255;
}

.goods-article-category-abilities {
    --vip-article-accent-rgb: 66, 217, 245;
    --vip-article-accent-dark-rgb: 25, 124, 152;
    --vip-article-accent-soft-rgb: 185, 247, 255;
}

.goods-article-category-spawn-eggs {
    --vip-article-accent-rgb: 141, 227, 95;
    --vip-article-accent-dark-rgb: 72, 140, 48;
    --vip-article-accent-soft-rgb: 210, 255, 184;
}

.goods-article-modal {
    max-width: 820px !important;
}

.goods-article-body {
    display: grid !important;
    gap: 22px !important;
}

.goods-article-description-card,
.goods-article-purchase-card {
    position: relative;
    overflow: hidden;
    border: 1.5px solid rgba(var(--vip-article-accent-rgb), 0.28);
    border-radius: 28px;
    padding: 22px;
    background:
        radial-gradient(circle at 14% 0%, rgba(var(--vip-article-accent-soft-rgb), 0.30), transparent 38%),
        linear-gradient(135deg, rgba(var(--vip-article-accent-rgb), 0.12), rgba(var(--vip-article-accent-rgb), 0.045));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        0 16px 34px rgba(var(--vip-article-accent-rgb), 0.12);
}

[data-theme="dark"] .goods-article-description-card,
[data-theme="dark"] .goods-article-purchase-card {
    background:
        radial-gradient(circle at 14% 0%, rgba(var(--vip-article-accent-rgb), 0.20), transparent 40%),
        linear-gradient(135deg, rgba(var(--vip-article-accent-rgb), 0.14), rgba(var(--vip-article-accent-rgb), 0.055));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 18px 38px rgba(0, 0, 0, 0.20),
        0 0 28px rgba(var(--vip-article-accent-rgb), 0.10);
}

.goods-article-description-eyebrow,
.goods-article-quantity-head span {
    display: block;
    margin-bottom: 7px;
    color: rgb(var(--vip-article-accent-rgb));
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.goods-article-description-text {
    margin: 0;
    color: var(--text);
    font-size: clamp(17px, 1.6vw, 21px);
    font-weight: 700;
    line-height: 1.46;
}

[data-theme="dark"] .goods-article-description-text {
    color: rgba(249, 251, 255, 0.90);
}

.goods-article-quantity-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.goods-article-quantity-head strong {
    display: block;
    color: var(--text);
    font-size: clamp(18px, 1.8vw, 24px);
    line-height: 1.16;
}

[data-theme="dark"] .goods-article-quantity-head strong {
    color: rgba(249, 251, 255, 0.92);
}

.goods-article-discount-badge {
    flex: 0 0 auto;
    border: 1px solid rgba(var(--vip-article-accent-rgb), 0.32);
    border-radius: 999px;
    padding: 9px 13px;
    background: rgba(var(--vip-article-accent-rgb), 0.12);
    color: rgb(var(--vip-article-accent-dark-rgb));
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

[data-theme="dark"] .goods-article-discount-badge {
    color: rgb(var(--vip-article-accent-soft-rgb));
    background: rgba(var(--vip-article-accent-rgb), 0.14);
}

.goods-article-quantity-control {
    display: grid;
    grid-template-columns: 52px minmax(96px, 1fr) 52px;
    gap: 10px;
    margin-bottom: 18px;
}

.goods-article-quantity-button,
.goods-article-quantity-input {
    min-height: 52px;
    border: 1px solid rgba(var(--vip-article-accent-rgb), 0.34);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.28), rgba(var(--vip-article-accent-rgb), 0.16));
    color: var(--text);
    font: inherit;
    font-size: 20px;
    font-weight: 900;
    text-align: center;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        0 10px 22px rgba(var(--vip-article-accent-rgb), 0.10);
}

.goods-article-quantity-button {
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.goods-article-quantity-button:hover,
.goods-article-quantity-button:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(var(--vip-article-accent-rgb), 0.58);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.38), rgba(var(--vip-article-accent-rgb), 0.24));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.46),
        0 14px 26px rgba(var(--vip-article-accent-rgb), 0.16),
        0 0 18px rgba(var(--vip-article-accent-rgb), 0.16);
}

.goods-article-quantity-input {
    appearance: textfield;
    -moz-appearance: textfield;
}

.goods-article-quantity-input::-webkit-outer-spin-button,
.goods-article-quantity-input::-webkit-inner-spin-button {
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
}

[data-theme="dark"] .goods-article-quantity-button,
[data-theme="dark"] .goods-article-quantity-input {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(var(--vip-article-accent-rgb), 0.15));
    color: rgba(249, 251, 255, 0.92);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 12px 24px rgba(0, 0, 0, 0.20),
        0 0 18px rgba(var(--vip-article-accent-rgb), 0.08);
}

.goods-article-summary {
    display: grid;
    gap: 10px;
}

.goods-article-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid rgba(var(--vip-article-accent-rgb), 0.18);
    border-radius: 18px;
    padding: 13px 15px;
    background: rgba(255, 255, 255, 0.26);
}

[data-theme="dark"] .goods-article-summary-row {
    background: rgba(255, 255, 255, 0.045);
}

.goods-article-summary-row span {
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
}

.goods-article-summary-row strong {
    color: var(--text);
    font-size: 16px;
    font-weight: 900;
    white-space: nowrap;
}

[data-theme="dark"] .goods-article-summary-row strong {
    color: rgba(249, 251, 255, 0.92);
}

.goods-article-summary-row-total {
    border-color: rgba(var(--vip-article-accent-rgb), 0.38);
    background:
        linear-gradient(145deg, rgba(var(--vip-article-accent-soft-rgb), 0.36), rgba(var(--vip-article-accent-rgb), 0.16));
}

.goods-article-summary-row-total span,
.goods-article-summary-row-total strong {
    color: rgb(var(--vip-article-accent-dark-rgb));
}

[data-theme="dark"] .goods-article-summary-row-total {
    background:
        linear-gradient(145deg, rgba(var(--vip-article-accent-rgb), 0.20), rgba(var(--vip-article-accent-dark-rgb), 0.16));
}

[data-theme="dark"] .goods-article-summary-row-total span,
[data-theme="dark"] .goods-article-summary-row-total strong {
    color: rgb(var(--vip-article-accent-soft-rgb));
}

.goods-article-discount-active .goods-article-discount-value {
    color: rgb(var(--vip-article-accent-dark-rgb));
}

[data-theme="dark"] .goods-article-discount-active .goods-article-discount-value {
    color: rgb(var(--vip-article-accent-soft-rgb));
}

.goods-article-overlay .vip-article-action:disabled,
.goods-article-overlay .vip-article-action[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.58;
    filter: grayscale(0.2);
    transform: none !important;
}

.goods-article-overlay .vip-article-action:disabled:hover,
.goods-article-overlay .vip-article-action[aria-disabled="true"]:hover {
    transform: none !important;
}

@media (max-width: 640px) {
    .goods-article-quantity-head {
        display: grid;
    }

    .goods-article-discount-badge {
        justify-self: start;
    }

    .goods-article-quantity-control {
        grid-template-columns: 46px minmax(0, 1fr) 46px;
    }

    .goods-article-description-card,
    .goods-article-purchase-card {
        border-radius: 22px;
        padding: 18px;
    }
}


/* -------------------------
   Shop patch 086
   Goods article Robokassa-friendly descriptions and nickname field.
   ------------------------- */

.goods-article-nickname-card {
    position: relative;
    overflow: hidden;
    border: 1.5px solid rgba(var(--vip-article-accent-rgb), 0.28);
    border-radius: 28px;
    padding: 22px;
    background:
        radial-gradient(circle at 14% 0%, rgba(var(--vip-article-accent-soft-rgb), 0.30), transparent 38%),
        linear-gradient(135deg, rgba(var(--vip-article-accent-rgb), 0.12), rgba(var(--vip-article-accent-rgb), 0.045));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        0 16px 34px rgba(var(--vip-article-accent-rgb), 0.12);
}

[data-theme="dark"] .goods-article-nickname-card {
    background:
        radial-gradient(circle at 14% 0%, rgba(var(--vip-article-accent-rgb), 0.20), transparent 40%),
        linear-gradient(135deg, rgba(var(--vip-article-accent-rgb), 0.14), rgba(var(--vip-article-accent-rgb), 0.055));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 18px 38px rgba(0, 0, 0, 0.20),
        0 0 28px rgba(var(--vip-article-accent-rgb), 0.10);
}

.goods-article-nickname-head {
    margin-bottom: 14px;
}

.goods-article-nickname-head span {
    display: block;
    margin-bottom: 7px;
    color: rgb(var(--vip-article-accent-rgb));
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.goods-article-nickname-head strong {
    display: block;
    color: var(--text);
    font-size: clamp(18px, 1.8vw, 24px);
    line-height: 1.16;
}

[data-theme="dark"] .goods-article-nickname-head strong {
    color: rgba(249, 251, 255, 0.92);
}

.goods-article-nickname-input {
    width: 100%;
    min-height: 54px;
    box-sizing: border-box;
    border: 1px solid rgba(var(--vip-article-accent-rgb), 0.34);
    border-radius: 18px;
    padding: 0 18px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.30), rgba(var(--vip-article-accent-rgb), 0.14));
    color: var(--text);
    font: inherit;
    font-size: 17px;
    font-weight: 800;
    outline: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        0 10px 22px rgba(var(--vip-article-accent-rgb), 0.10);
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.goods-article-nickname-input::placeholder {
    color: rgba(17, 24, 39, 0.42);
}

.goods-article-nickname-input:focus {
    border-color: rgba(var(--vip-article-accent-rgb), 0.62);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.42), rgba(var(--vip-article-accent-rgb), 0.20));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.46),
        0 14px 26px rgba(var(--vip-article-accent-rgb), 0.16),
        0 0 18px rgba(var(--vip-article-accent-rgb), 0.16);
}

.goods-article-nickname-input-invalid {
    border-color: rgba(239, 68, 68, 0.72) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        0 0 0 4px rgba(239, 68, 68, 0.10) !important;
}

.goods-article-nickname-note {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}

[data-theme="dark"] .goods-article-nickname-input {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(var(--vip-article-accent-rgb), 0.15));
    color: rgba(249, 251, 255, 0.92);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 12px 24px rgba(0, 0, 0, 0.20),
        0 0 18px rgba(var(--vip-article-accent-rgb), 0.08);
}

[data-theme="dark"] .goods-article-nickname-input::placeholder {
    color: rgba(249, 251, 255, 0.36);
}

[data-theme="dark"] .goods-article-nickname-note {
    color: rgba(249, 251, 255, 0.60);
}

@media (max-width: 640px) {
    .goods-article-nickname-card {
        border-radius: 22px;
        padding: 18px;
    }
}

/* -------------------------
   Shop patch 091
   Goods subcategory slide-out rail and category filtering.
   ------------------------- */

body.shop-page .shop-catalog-panel .shop-goods-subcategory-rail {
    --goods-subcategory-accent-rgb: 157, 187, 239;
    --goods-subcategory-soft-rgb: 239, 164, 164;

    position: absolute;
    top: 32px;
    left: calc(50% + 220px);
    z-index: 4;
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    width: 220px;
    max-width: calc(100vw - 36px);
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: var(--radius-pill);
    background:
        radial-gradient(circle at 14% 10%, rgba(239, 164, 164, 0.20), transparent 38%),
        radial-gradient(circle at 86% 84%, rgba(157, 187, 239, 0.24), transparent 42%),
        rgba(255, 255, 255, 0.46);
    box-shadow:
        0 18px 42px rgba(16, 33, 63, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.46);
    backdrop-filter: blur(16px) saturate(1.08);
    -webkit-backdrop-filter: blur(16px) saturate(1.08);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-22px) scale(0.98);
    transition:
        opacity 220ms ease,
        transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 220ms ease;
}

body.shop-page .shop-catalog-panel .shop-goods-subcategory-rail-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0) scale(1);
}

body.shop-page .shop-goods-subcategory-button {
    --goods-subcategory-button-dark-rgb: 16, 33, 63;
    --goods-subcategory-button-main-rgb: var(--goods-subcategory-accent-rgb);
    --goods-subcategory-button-light-rgb: 238, 244, 255;

    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 42px;
    width: 100%;
    border: 0;
    border-radius: var(--radius-pill);
    padding: 0 16px;
    background: transparent;
    color: rgba(16, 33, 63, 0.72);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
    transition:
        transform 180ms ease,
        color 180ms ease,
        filter 180ms ease,
        box-shadow 180ms ease;
}

body.shop-page .shop-goods-subcategory-button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background:
        linear-gradient(
            135deg,
            rgba(var(--goods-subcategory-button-light-rgb), 0.74),
            rgba(var(--goods-subcategory-button-main-rgb), 0.34)
        );
    opacity: 0;
    transition: opacity 180ms ease;
}

body.shop-page .shop-goods-subcategory-button:hover,
body.shop-page .shop-goods-subcategory-button:focus-visible {
    transform: translateY(-1px);
    color: rgb(var(--goods-subcategory-button-dark-rgb));
    filter: brightness(1.03) saturate(1.05);
    outline: none;
}

body.shop-page .shop-goods-subcategory-button:hover::before,
body.shop-page .shop-goods-subcategory-button:focus-visible::before,
body.shop-page .shop-goods-subcategory-button-active::before {
    opacity: 1;
}

body.shop-page .shop-goods-subcategory-button-active {
    color: rgb(var(--goods-subcategory-button-dark-rgb));
    box-shadow:
        0 10px 22px rgba(var(--goods-subcategory-button-main-rgb), 0.18),
        0 0 18px rgba(var(--goods-subcategory-button-main-rgb), 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.46);
}

body.shop-page .goods-subcategory-items {
    --goods-subcategory-button-dark-rgb: 110, 54, 9;
    --goods-subcategory-button-main-rgb: 240, 163, 65;
    --goods-subcategory-button-light-rgb: 255, 211, 143;
}

body.shop-page .goods-subcategory-enchantments {
    --goods-subcategory-button-dark-rgb: 45, 15, 84;
    --goods-subcategory-button-main-rgb: 107, 33, 168;
    --goods-subcategory-button-light-rgb: 202, 156, 255;
}

body.shop-page .goods-subcategory-books {
    --goods-subcategory-button-dark-rgb: 22, 70, 112;
    --goods-subcategory-button-main-rgb: 72, 151, 207;
    --goods-subcategory-button-light-rgb: 120, 194, 244;
}

body.shop-page .goods-subcategory-abilities {
    --goods-subcategory-button-dark-rgb: 8, 83, 101;
    --goods-subcategory-button-main-rgb: 66, 217, 245;
    --goods-subcategory-button-light-rgb: 185, 247, 255;
}

body.shop-page .goods-subcategory-spawn-eggs {
    --goods-subcategory-button-dark-rgb: 49, 112, 38;
    --goods-subcategory-button-main-rgb: 141, 227, 95;
    --goods-subcategory-button-light-rgb: 210, 255, 184;
}

body.shop-page .shop-catalog-panel #shopItems.shop-products.shop-goods-products > .shop-type-block.shop-goods-subcategory-hidden {
    display: none !important;
}

html[data-theme="dark"] body.shop-page .shop-catalog-panel .shop-goods-subcategory-rail,
[data-theme="dark"] body.shop-page .shop-catalog-panel .shop-goods-subcategory-rail {
    border-color: rgba(95, 130, 200, 0.22);
    background:
        radial-gradient(circle at 14% 10%, rgba(198, 107, 107, 0.14), transparent 38%),
        radial-gradient(circle at 86% 84%, rgba(95, 130, 200, 0.20), transparent 42%),
        rgba(17, 24, 39, 0.70);
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] body.shop-page .shop-goods-subcategory-button,
[data-theme="dark"] body.shop-page .shop-goods-subcategory-button {
    color: rgba(238, 244, 255, 0.68);
}

html[data-theme="dark"] body.shop-page .shop-goods-subcategory-button:hover,
html[data-theme="dark"] body.shop-page .shop-goods-subcategory-button:focus-visible,
html[data-theme="dark"] body.shop-page .shop-goods-subcategory-button-active,
[data-theme="dark"] body.shop-page .shop-goods-subcategory-button:hover,
[data-theme="dark"] body.shop-page .shop-goods-subcategory-button:focus-visible,
[data-theme="dark"] body.shop-page .shop-goods-subcategory-button-active {
    color: rgba(255, 255, 255, 0.94);
}

@media (max-width: 1180px) {
    body.shop-page .shop-catalog-panel .shop-goods-subcategory-rail {
        position: relative;
        top: auto;
        left: auto;
        z-index: 3;
        display: flex;
        width: fit-content;
        max-width: 100%;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        margin: -18px auto 32px;
        justify-content: center;
        transform: translateY(-8px) scale(0.98);
    }

    body.shop-page .shop-catalog-panel .shop-goods-subcategory-rail-visible {
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 640px) {
    body.shop-page .shop-catalog-panel .shop-goods-subcategory-rail {
        width: 100%;
        padding: 7px;
        border-radius: 24px;
        gap: 7px;
    }

    body.shop-page .shop-goods-subcategory-button {
        flex: 1 1 calc(50% - 8px);
        min-height: 40px;
        padding: 0 10px;
        font-size: 12px;
    }
}


/* -------------------------
   Shop patch 092
   Goods subcategories as a beautiful horizontal expanding rail attached to the "Товары" tab.
   ------------------------- */

body.shop-page .shop-category-toolbar {
    position: relative;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: min(100%, 1180px);
    margin: 0 auto 34px;
}

body.shop-page .shop-category-toolbar .shop-category-tabs {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    margin: 0 !important;
}

body.shop-page .shop-category-toolbar .shop-goods-subcategory-rail {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-height: 64px;
    margin-left: -18px;
    padding: 8px 0 8px 0;
    border-radius: 0 30px 30px 0;
    border: 1px solid rgba(140, 160, 230, 0.14);
    background:
        linear-gradient(135deg, rgba(92, 78, 130, 0.22), rgba(17, 26, 73, 0.58)),
        radial-gradient(circle at 12% 50%, rgba(239, 164, 164, 0.16), transparent 32%),
        radial-gradient(circle at 88% 50%, rgba(157, 187, 239, 0.16), transparent 36%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 18px 36px rgba(15, 23, 42, 0.14),
        0 0 26px rgba(82, 111, 210, 0.10);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    transform: translateX(-28px) scaleX(0.94);
    transform-origin: left center;
    pointer-events: none;
    transition:
        max-width 0.52s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.26s ease,
        transform 0.52s cubic-bezier(0.22, 1, 0.36, 1),
        padding 0.52s cubic-bezier(0.22, 1, 0.36, 1),
        margin-left 0.52s cubic-bezier(0.22, 1, 0.36, 1);
}

body.shop-page .shop-category-toolbar .shop-goods-subcategory-rail::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.00) 10%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.00));
    opacity: 0.78;
}

body.shop-page .shop-category-toolbar .shop-goods-subcategory-rail-visible {
    max-width: 860px;
    opacity: 1;
    transform: translateX(0) scaleX(1);
    padding: 8px 16px 8px 28px;
    pointer-events: auto;
}

body.shop-page .shop-category-toolbar .shop-goods-subcategory-track {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

body.shop-page .shop-goods-subcategory-button {
    --goods-subcategory-button-dark-rgb: 16, 33, 63;
    --goods-subcategory-button-main-rgb: 157, 187, 239;
    --goods-subcategory-button-light-rgb: 238, 244, 255;
    position: relative;
    min-height: 44px;
    padding: 10px 18px;
    border: 0;
    border-radius: 18px;
    background: transparent;
    color: rgba(238, 244, 255, 0.84);
    font-size: 15px;
    font-weight: 750;
    line-height: 1;
    letter-spacing: -0.02em;
    box-shadow: none;
    transition:
        color 0.24s ease,
        transform 0.24s ease,
        box-shadow 0.24s ease;
}

body.shop-page .shop-goods-subcategory-button::before,
body.shop-page .shop-goods-subcategory-button::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    transition: opacity 0.24s ease, transform 0.24s ease;
}

body.shop-page .shop-goods-subcategory-button::before {
    border: 1px solid rgba(var(--goods-subcategory-button-light-rgb), 0.18);
    background:
        linear-gradient(
            145deg,
            rgba(var(--goods-subcategory-button-light-rgb), 0.12),
            rgba(var(--goods-subcategory-button-main-rgb), 0.08)
        );
    opacity: 0.74;
}

body.shop-page .shop-goods-subcategory-button::after {
    background:
        radial-gradient(circle at 22% 28%, rgba(255, 255, 255, 0.22), transparent 42%),
        linear-gradient(
            145deg,
            rgba(var(--goods-subcategory-button-light-rgb), 0.86),
            rgba(var(--goods-subcategory-button-main-rgb), 0.74)
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 12px 24px rgba(var(--goods-subcategory-button-main-rgb), 0.18);
    opacity: 0;
    transform: scale(0.96);
}

body.shop-page .shop-goods-subcategory-button:hover,
body.shop-page .shop-goods-subcategory-button:focus-visible,
body.shop-page .shop-goods-subcategory-button-active {
    color: rgb(var(--goods-subcategory-button-dark-rgb));
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(var(--goods-subcategory-button-main-rgb), 0.12);
}

body.shop-page .shop-goods-subcategory-button:hover::before,
body.shop-page .shop-goods-subcategory-button:focus-visible::before,
body.shop-page .shop-goods-subcategory-button-active::before {
    opacity: 0;
}

body.shop-page .shop-goods-subcategory-button:hover::after,
body.shop-page .shop-goods-subcategory-button:focus-visible::after,
body.shop-page .shop-goods-subcategory-button-active::after {
    opacity: 1;
    transform: scale(1);
}

body.shop-page .goods-subcategory-items {
    --goods-subcategory-button-dark-rgb: 110, 54, 9;
    --goods-subcategory-button-main-rgb: 240, 163, 65;
    --goods-subcategory-button-light-rgb: 255, 211, 143;
}

body.shop-page .goods-subcategory-enchantments {
    --goods-subcategory-button-dark-rgb: 45, 15, 84;
    --goods-subcategory-button-main-rgb: 107, 33, 168;
    --goods-subcategory-button-light-rgb: 202, 156, 255;
}

body.shop-page .goods-subcategory-books {
    --goods-subcategory-button-dark-rgb: 22, 70, 112;
    --goods-subcategory-button-main-rgb: 72, 151, 207;
    --goods-subcategory-button-light-rgb: 178, 226, 255;
}

body.shop-page .goods-subcategory-abilities {
    --goods-subcategory-button-dark-rgb: 8, 83, 101;
    --goods-subcategory-button-main-rgb: 66, 217, 245;
    --goods-subcategory-button-light-rgb: 185, 247, 255;
}

body.shop-page .goods-subcategory-spawn-eggs {
    --goods-subcategory-button-dark-rgb: 49, 112, 38;
    --goods-subcategory-button-main-rgb: 141, 227, 95;
    --goods-subcategory-button-light-rgb: 210, 255, 184;
}

body.shop-page .shop-catalog-panel #shopItems.shop-products.shop-goods-products > .shop-type-block.shop-goods-subcategory-hidden {
    display: none !important;
}

html[data-theme="dark"] body.shop-page .shop-category-toolbar .shop-goods-subcategory-rail,
[data-theme="dark"] body.shop-page .shop-category-toolbar .shop-goods-subcategory-rail {
    border-color: rgba(138, 169, 226, 0.16);
    background:
        linear-gradient(135deg, rgba(69, 54, 98, 0.30), rgba(8, 18, 60, 0.68)),
        radial-gradient(circle at 14% 50%, rgba(198, 107, 107, 0.20), transparent 32%),
        radial-gradient(circle at 88% 50%, rgba(95, 130, 200, 0.24), transparent 36%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 18px 42px rgba(2, 8, 23, 0.30),
        0 0 26px rgba(95, 130, 200, 0.10);
}

@media (max-width: 1180px) {
    body.shop-page .shop-category-toolbar {
        width: min(100%, 980px);
        flex-wrap: wrap;
        gap: 14px;
    }

    body.shop-page .shop-category-toolbar .shop-goods-subcategory-rail,
    body.shop-page .shop-category-toolbar .shop-goods-subcategory-rail-visible {
        order: 2;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        border-radius: 24px;
        padding: 10px 14px;
        transform: translateY(-8px) scale(0.98);
    }

    body.shop-page .shop-category-toolbar .shop-goods-subcategory-rail-visible {
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 760px) {
    body.shop-page .shop-category-toolbar .shop-goods-subcategory-track {
        flex-wrap: wrap;
        justify-content: center;
        white-space: normal;
    }

    body.shop-page .shop-goods-subcategory-button {
        flex: 1 1 calc(50% - 10px);
        min-width: 140px;
    }
}

/* -------------------------
   Shop patch 093
   Goods subcategories moved under the main category switcher in the same pill style.
   ------------------------- */

body.shop-page .shop-category-toolbar {
    position: relative !important;
    z-index: 12 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: min(100%, 1040px) !important;
    margin: 0 auto 34px !important;
}

body.shop-page .shop-category-toolbar .shop-category-tabs {
    position: relative !important;
    z-index: 4 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}

body.shop-page .shop-category-toolbar .shop-goods-subcategory-rail {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    z-index: 3 !important;
    display: block !important;
    width: min(920px, 100%) !important;
    max-width: min(920px, 100%) !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-12px) scaleY(0.96) !important;
    transform-origin: top center !important;
    transition:
        max-height 320ms cubic-bezier(0.22, 1, 0.36, 1),
        margin 320ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 220ms ease,
        transform 320ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body.shop-page .shop-category-toolbar .shop-goods-subcategory-rail::before {
    content: none !important;
    display: none !important;
}

body.shop-page .shop-category-toolbar .shop-goods-subcategory-rail-visible {
    max-height: 96px !important;
    margin-top: 14px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) scaleY(1) !important;
}

body.shop-page .shop-category-toolbar .shop-goods-subcategory-track {
    --shop-goods-subcategory-gap: 8px;

    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: var(--shop-goods-subcategory-gap) !important;
    width: 100% !important;
    min-height: 62px !important;
    padding: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: var(--radius-pill) !important;
    background:
        radial-gradient(circle at 18% 42%, rgba(255, 197, 197, 0.18), transparent 28%),
        radial-gradient(circle at 82% 58%, rgba(189, 213, 255, 0.20), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
        rgba(14, 20, 43, 0.56) !important;
    box-shadow:
        0 18px 36px rgba(15, 23, 42, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(157, 187, 239, 0.08) !important;
    backdrop-filter: blur(18px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
    overflow: hidden !important;
    isolation: isolate !important;
    white-space: normal !important;
}

body.shop-page .shop-category-toolbar .shop-goods-subcategory-track::before {
    content: "" !important;
    position: absolute !important;
    inset: -70% -24% !important;
    z-index: -1 !important;
    pointer-events: none !important;
    background:
        radial-gradient(circle at 18% 42%, rgba(255, 197, 197, 0.26), transparent 28%),
        radial-gradient(circle at 82% 58%, rgba(189, 213, 255, 0.32), transparent 30%),
        linear-gradient(115deg, transparent 0 34%, rgba(255, 255, 255, 0.18) 46%, transparent 58% 100%) !important;
    background-size: 120% 120%, 120% 120%, 180% 180% !important;
    background-position: left center, right center, -90% 50% !important;
    opacity: 0.74 !important;
    filter: blur(13px) saturate(1.14) !important;
    animation: shopCategoryTabsAura 7.5s ease-in-out infinite !important;
}

body.shop-page .shop-category-toolbar .shop-goods-subcategory-track::after {
    content: "" !important;
    position: absolute !important;
    top: 8px !important;
    bottom: 8px !important;
    left: 8px !important;
    z-index: 0 !important;
    width: calc((100% - 16px - (var(--shop-goods-subcategory-gap) * 4)) / 5) !important;
    border-radius: var(--radius-pill) !important;
    pointer-events: none !important;
    background: linear-gradient(
        90deg,
        #FFC5C5 0%,
        #F6C9D3 20%,
        #EBD6E8 38%,
        #D8E2FF 56%,
        #BDD5FF 74%,
        #FFC5C5 100%
    ) !important;
    background-size: 220% 100% !important;
    box-shadow:
        0 14px 34px rgba(90, 120, 180, 0.24),
        0 0 24px rgba(189, 213, 255, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.62),
        inset 0 -1px 0 rgba(92, 112, 160, 0.12) !important;
    opacity: 0 !important;
    transform: translateX(0) !important;
    transition:
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.22s ease,
        box-shadow 0.28s ease,
        filter 0.28s ease !important;
    animation: shopCategoryActiveGradient 5.6s ease-in-out infinite !important;
}

body.shop-page .shop-category-toolbar .shop-goods-subcategory-track:has(.shop-goods-subcategory-button-active)::after {
    opacity: 1 !important;
}

body.shop-page .shop-category-toolbar .shop-goods-subcategory-track:has(.shop-goods-subcategory-button:nth-child(1).shop-goods-subcategory-button-active)::after {
    transform: translateX(0) !important;
}

body.shop-page .shop-category-toolbar .shop-goods-subcategory-track:has(.shop-goods-subcategory-button:nth-child(2).shop-goods-subcategory-button-active)::after {
    transform: translateX(calc(100% + var(--shop-goods-subcategory-gap))) !important;
}

body.shop-page .shop-category-toolbar .shop-goods-subcategory-track:has(.shop-goods-subcategory-button:nth-child(3).shop-goods-subcategory-button-active)::after {
    transform: translateX(calc((100% + var(--shop-goods-subcategory-gap)) * 2)) !important;
}

body.shop-page .shop-category-toolbar .shop-goods-subcategory-track:has(.shop-goods-subcategory-button:nth-child(4).shop-goods-subcategory-button-active)::after {
    transform: translateX(calc((100% + var(--shop-goods-subcategory-gap)) * 3)) !important;
}

body.shop-page .shop-category-toolbar .shop-goods-subcategory-track:has(.shop-goods-subcategory-button:nth-child(5).shop-goods-subcategory-button-active)::after {
    transform: translateX(calc((100% + var(--shop-goods-subcategory-gap)) * 4)) !important;
}

body.shop-page .shop-goods-subcategory-button {
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
    isolation: isolate !important;
    min-height: 46px !important;
    width: 100% !important;
    border: 0 !important;
    border-radius: var(--radius-pill) !important;
    padding: 0 14px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(238, 244, 255, 0.76) !important;
    cursor: pointer !important;
    font: inherit !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
    text-align: center !important;
    transform: translateZ(0) !important;
    transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.28s ease,
        filter 0.28s ease !important;
}

body.shop-page .shop-goods-subcategory-button::before {
    content: "" !important;
    position: absolute !important;
    inset: 1px !important;
    z-index: -1 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    background:
        linear-gradient(
            112deg,
            transparent 0%,
            transparent 28%,
            rgba(255, 255, 255, 0.42) 42%,
            rgba(255, 255, 255, 0.14) 51%,
            transparent 66%,
            transparent 100%
        ) !important;
    opacity: 0 !important;
    transform: translateX(-135%) skewX(-18deg) !important;
}

body.shop-page .shop-goods-subcategory-button::after {
    content: "" !important;
    position: absolute !important;
    left: 18px !important;
    right: 18px !important;
    bottom: 6px !important;
    height: 2px !important;
    z-index: 1 !important;
    border-radius: 999px !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.86), transparent) !important;
    box-shadow: none !important;
    opacity: 0 !important;
    transform: scaleX(0.34) !important;
    transition:
        opacity 0.26s ease,
        transform 0.30s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body.shop-page .shop-goods-subcategory-button:hover,
body.shop-page .shop-goods-subcategory-button:focus-visible {
    transform: translateY(-2px) scale(1.018) !important;
    color: rgba(255, 255, 255, 0.94) !important;
    filter: brightness(1.04) saturate(1.08) !important;
    outline: none !important;
}

body.shop-page .shop-goods-subcategory-button:hover::before,
body.shop-page .shop-goods-subcategory-button:focus-visible::before {
    opacity: 1 !important;
    animation: shopCategoryTabSweep 0.72s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}

body.shop-page .shop-goods-subcategory-button:hover::after,
body.shop-page .shop-goods-subcategory-button:focus-visible::after,
body.shop-page .shop-goods-subcategory-button-active::after {
    opacity: 0.82 !important;
    transform: scaleX(1) !important;
}

body.shop-page .shop-goods-subcategory-button-active {
    color: var(--blue-text) !important;
    transform: none !important;
    filter: none !important;
}

html[data-theme="dark"] body.shop-page .shop-category-toolbar .shop-goods-subcategory-track,
[data-theme="dark"] body.shop-page .shop-category-toolbar .shop-goods-subcategory-track {
    border-color: rgba(95, 130, 200, 0.22) !important;
    background:
        radial-gradient(circle at 18% 42%, rgba(198, 107, 107, 0.18), transparent 28%),
        radial-gradient(circle at 82% 58%, rgba(95, 130, 200, 0.24), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
        rgba(12, 18, 35, 0.78) !important;
    box-shadow:
        0 18px 42px rgba(2, 8, 23, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(95, 130, 200, 0.08) !important;
}

html[data-theme="dark"] body.shop-page .shop-category-toolbar .shop-goods-subcategory-track::before,
[data-theme="dark"] body.shop-page .shop-category-toolbar .shop-goods-subcategory-track::before {
    background:
        radial-gradient(circle at 18% 42%, rgba(198, 107, 107, 0.28), transparent 28%),
        radial-gradient(circle at 82% 58%, rgba(95, 130, 200, 0.34), transparent 30%),
        linear-gradient(115deg, transparent 0 34%, rgba(255, 255, 255, 0.12) 46%, transparent 58% 100%) !important;
}

html[data-theme="dark"] body.shop-page .shop-category-toolbar .shop-goods-subcategory-track::after,
[data-theme="dark"] body.shop-page .shop-category-toolbar .shop-goods-subcategory-track::after {
    background: linear-gradient(
        90deg,
        #C66B6B 0%,
        #AD6679 24%,
        #836FA5 48%,
        #5F82C8 74%,
        #C66B6B 100%
    ) !important;
    background-size: 220% 100% !important;
    box-shadow:
        0 14px 34px rgba(65, 78, 118, 0.28),
        0 0 28px rgba(95, 130, 200, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        inset 0 -1px 0 rgba(0, 0, 0, 0.20) !important;
}

html[data-theme="dark"] body.shop-page .shop-goods-subcategory-button,
[data-theme="dark"] body.shop-page .shop-goods-subcategory-button {
    color: rgba(238, 244, 255, 0.70) !important;
}

html[data-theme="dark"] body.shop-page .shop-goods-subcategory-button:hover,
html[data-theme="dark"] body.shop-page .shop-goods-subcategory-button:focus-visible,
[data-theme="dark"] body.shop-page .shop-goods-subcategory-button:hover,
[data-theme="dark"] body.shop-page .shop-goods-subcategory-button:focus-visible {
    color: rgba(255, 255, 255, 0.94) !important;
}

html[data-theme="dark"] body.shop-page .shop-goods-subcategory-button-active,
[data-theme="dark"] body.shop-page .shop-goods-subcategory-button-active {
    color: #EEF4FF !important;
}

@media (max-width: 980px) {
    body.shop-page .shop-category-toolbar .shop-goods-subcategory-track {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        border-radius: 28px !important;
    }

    body.shop-page .shop-category-toolbar .shop-goods-subcategory-track::after {
        content: none !important;
        display: none !important;
    }

    body.shop-page .shop-goods-subcategory-button-active {
        background: linear-gradient(90deg, #FFC5C5, #BDD5FF, #FFC5C5) !important;
        background-size: 220% 100% !important;
        color: var(--blue-text) !important;
        box-shadow:
            0 10px 24px rgba(90, 120, 180, 0.22),
            inset 0 1px 0 rgba(255, 255, 255, 0.46) !important;
    }

    [data-theme="dark"] body.shop-page .shop-goods-subcategory-button-active {
        background: linear-gradient(90deg, #C66B6B, #5F82C8, #C66B6B) !important;
        background-size: 220% 100% !important;
        color: #EEF4FF !important;
    }
}

@media (max-width: 640px) {
    body.shop-page .shop-category-toolbar {
        margin-bottom: 28px !important;
    }

    body.shop-page .shop-category-toolbar .shop-goods-subcategory-rail-visible {
        max-height: 190px !important;
        margin-top: 12px !important;
    }

    body.shop-page .shop-category-toolbar .shop-goods-subcategory-track {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        padding: 7px !important;
        border-radius: 24px !important;
    }

    body.shop-page .shop-goods-subcategory-button {
        min-height: 40px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
        white-space: normal !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.shop-page .shop-category-toolbar .shop-goods-subcategory-track::before,
    body.shop-page .shop-category-toolbar .shop-goods-subcategory-track::after,
    body.shop-page .shop-goods-subcategory-button:hover::before,
    body.shop-page .shop-goods-subcategory-button:focus-visible::before {
        animation: none !important;
    }
}

/* -------------------------
   Shop patch 094
   Compact goods subcategories without pushing the catalog down.
   ------------------------- */

body.shop-page .shop-category-toolbar {
    position: relative !important;
    z-index: 18 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: min(100%, 1040px) !important;
    margin: 0 auto 34px !important;
}

body.shop-page .shop-category-toolbar .shop-goods-subcategory-rail {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 50% !important;
    z-index: 20 !important;
    display: block !important;
    width: min(720px, calc(100vw - 32px)) !important;
    max-width: min(720px, calc(100vw - 32px)) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(-50%, -8px) scale(0.98) !important;
    transform-origin: top center !important;
    transition:
        opacity 180ms ease,
        transform 240ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body.shop-page .shop-category-toolbar .shop-goods-subcategory-rail-visible {
    max-height: none !important;
    margin-top: 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translate(-50%, 0) scale(1) !important;
}

body.shop-page .shop-category-toolbar .shop-goods-subcategory-track {
    --shop-goods-subcategory-gap: 5px;

    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: var(--shop-goods-subcategory-gap) !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 5px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: var(--radius-pill) !important;
    background:
        radial-gradient(circle at 18% 42%, rgba(255, 197, 197, 0.13), transparent 28%),
        radial-gradient(circle at 82% 58%, rgba(189, 213, 255, 0.16), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
        rgba(14, 20, 43, 0.66) !important;
    box-shadow:
        0 12px 28px rgba(15, 23, 42, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 -1px 0 rgba(157, 187, 239, 0.07) !important;
    backdrop-filter: blur(16px) saturate(1.10) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.10) !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

body.shop-page .shop-category-toolbar .shop-goods-subcategory-track::before {
    opacity: 0.44 !important;
    filter: blur(10px) saturate(1.10) !important;
}

body.shop-page .shop-category-toolbar .shop-goods-subcategory-track::after {
    top: 5px !important;
    bottom: 5px !important;
    left: 5px !important;
    width: calc((100% - 10px - (var(--shop-goods-subcategory-gap) * 4)) / 5) !important;
    box-shadow:
        0 8px 20px rgba(90, 120, 180, 0.20),
        0 0 16px rgba(189, 213, 255, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.48),
        inset 0 -1px 0 rgba(92, 112, 160, 0.10) !important;
}

body.shop-page .shop-goods-subcategory-button {
    min-height: 34px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: -0.01em !important;
}

body.shop-page .shop-goods-subcategory-button::after {
    left: 16px !important;
    right: 16px !important;
    bottom: 4px !important;
    height: 1px !important;
}

body.shop-page .shop-goods-subcategory-button:hover,
body.shop-page .shop-goods-subcategory-button:focus-visible {
    transform: translateY(-1px) scale(1.01) !important;
}

html[data-theme="dark"] body.shop-page .shop-category-toolbar .shop-goods-subcategory-track,
[data-theme="dark"] body.shop-page .shop-category-toolbar .shop-goods-subcategory-track {
    background:
        radial-gradient(circle at 18% 42%, rgba(198, 107, 107, 0.14), transparent 28%),
        radial-gradient(circle at 82% 58%, rgba(95, 130, 200, 0.20), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.030), rgba(255, 255, 255, 0.010)),
        rgba(12, 18, 35, 0.82) !important;
    box-shadow:
        0 12px 30px rgba(2, 8, 23, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 -1px 0 rgba(95, 130, 200, 0.07) !important;
}

@media (max-width: 980px) {
    body.shop-page .shop-category-toolbar .shop-goods-subcategory-rail,
    body.shop-page .shop-category-toolbar .shop-goods-subcategory-rail-visible {
        width: min(560px, calc(100vw - 28px)) !important;
        max-width: min(560px, calc(100vw - 28px)) !important;
    }

    body.shop-page .shop-category-toolbar .shop-goods-subcategory-track {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        min-height: 0 !important;
        border-radius: 22px !important;
    }

    body.shop-page .shop-category-toolbar .shop-goods-subcategory-track::after {
        content: none !important;
        display: none !important;
    }

    body.shop-page .shop-goods-subcategory-button {
        min-height: 32px !important;
        font-size: 11px !important;
    }
}

@media (max-width: 640px) {
    body.shop-page .shop-category-toolbar {
        margin-bottom: 28px !important;
    }

    body.shop-page .shop-category-toolbar .shop-goods-subcategory-rail-visible {
        margin-top: 0 !important;
        max-height: none !important;
    }

    body.shop-page .shop-category-toolbar .shop-goods-subcategory-track {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
        padding: 5px !important;
        border-radius: 20px !important;
    }

    body.shop-page .shop-goods-subcategory-button {
        min-height: 30px !important;
        padding: 0 8px !important;
        font-size: 10.5px !important;
        white-space: nowrap !important;
    }
}


/* -------------------------
   Shop patch 095
   Add the "Все" goods subcategory, rename mob button, and tighten spacing.
   ------------------------- */

body.shop-page .shop-category-toolbar .shop-goods-subcategory-rail,
body.shop-page .shop-category-toolbar .shop-goods-subcategory-rail-visible {
    width: min(680px, calc(100vw - 32px)) !important;
    max-width: min(680px, calc(100vw - 32px)) !important;
}

body.shop-page .shop-category-toolbar .shop-goods-subcategory-track {
    --shop-goods-subcategory-gap: 3px !important;

    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: var(--shop-goods-subcategory-gap) !important;
    padding: 4px !important;
    min-height: 40px !important;
}

body.shop-page .shop-category-toolbar .shop-goods-subcategory-track::after {
    top: 4px !important;
    bottom: 4px !important;
    left: 4px !important;
    width: calc((100% - 8px - (var(--shop-goods-subcategory-gap) * 5)) / 6) !important;
}

body.shop-page .shop-category-toolbar .shop-goods-subcategory-track:has(.shop-goods-subcategory-button:nth-child(6).shop-goods-subcategory-button-active)::after {
    transform: translateX(calc((100% + var(--shop-goods-subcategory-gap)) * 5)) !important;
}

body.shop-page .shop-goods-subcategory-button {
    min-height: 32px !important;
    padding: 0 7px !important;
    font-size: 11.5px !important;
}

body.shop-page .goods-subcategory-all {
    --goods-subcategory-button-dark-rgb: 16, 33, 63;
    --goods-subcategory-button-main-rgb: 157, 187, 239;
    --goods-subcategory-button-light-rgb: 239, 164, 164;
}

@media (max-width: 980px) {
    body.shop-page .shop-category-toolbar .shop-goods-subcategory-track {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 4px !important;
    }
}

@media (max-width: 640px) {
    body.shop-page .shop-category-toolbar .shop-goods-subcategory-track {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 4px !important;
    }

    body.shop-page .shop-goods-subcategory-button {
        min-height: 29px !important;
        padding: 0 7px !important;
        font-size: 10.5px !important;
    }
}


/* -------------------------
   Site patch 043 — centered 1000px rules content and soft main background transition
   ------------------------- */

/*
   Центрируется именно правая колонка правил: 1000px по центру страницы.
   Оглавление висит слева от неё и не участвует в расчёте центра.
*/
body.rules-page .rules-layout {
    --rules-toc-width: 300px;
    --rules-content-width: 1000px;
    --rules-layout-gap: clamp(22px, 3vw, 38px);

    width: 100% !important;
    max-width: none !important;
    grid-template-columns: 0 minmax(0, var(--rules-content-width)) !important;
    column-gap: 0 !important;
    row-gap: var(--rules-layout-gap) !important;
    justify-content: center !important;
    align-items: start !important;
}

body.rules-page .rules-toc {
    grid-column: 1 !important;
    width: var(--rules-toc-width) !important;
    max-width: var(--rules-toc-width) !important;
    justify-self: end !important;
    margin-right: var(--rules-layout-gap) !important;
}

body.rules-page .rules-content {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: var(--rules-content-width) !important;
    justify-self: stretch !important;
}

/* Новый фон именно у блока правил: мягче, плотнее и без чистого белого. */
body.rules-page .rules-chapter {
    background:
        radial-gradient(circle at 14% 0%, rgba(157, 187, 239, 0.18), transparent 32%),
        radial-gradient(circle at 92% 10%, rgba(239, 164, 164, 0.14), transparent 30%),
        linear-gradient(145deg, rgba(247, 248, 252, 0.88), rgba(243, 248, 255, 0.70)) !important;
    border-color: rgba(157, 187, 239, 0.32) !important;
    box-shadow:
        0 24px 58px rgba(16, 33, 63, 0.085),
        inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}

body.rules-page .rules-chapter-heading {
    background:
        radial-gradient(circle at 16% 8%, rgba(157, 187, 239, 0.24), transparent 36%),
        radial-gradient(circle at 88% 12%, rgba(239, 164, 164, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(247, 248, 252, 0.56), rgba(247, 248, 252, 0.22)) !important;
}

body.rules-page .rules-rule:hover {
    background: rgba(157, 187, 239, 0.115) !important;
}

html[data-theme="dark"] body.rules-page .rules-chapter,
[data-theme="dark"] body.rules-page .rules-chapter {
    background:
        radial-gradient(circle at 14% 0%, rgba(95, 130, 200, 0.20), transparent 32%),
        radial-gradient(circle at 92% 10%, rgba(198, 107, 107, 0.14), transparent 30%),
        linear-gradient(145deg, rgba(17, 24, 39, 0.88), rgba(15, 23, 42, 0.68)) !important;
    border-color: rgba(95, 130, 200, 0.36) !important;
    box-shadow:
        0 24px 64px rgba(2, 8, 23, 0.34),
        inset 0 1px 0 rgba(238, 244, 255, 0.055) !important;
}

html[data-theme="dark"] body.rules-page .rules-chapter-heading,
[data-theme="dark"] body.rules-page .rules-chapter-heading {
    background:
        radial-gradient(circle at 16% 8%, rgba(95, 130, 200, 0.24), transparent 36%),
        radial-gradient(circle at 88% 12%, rgba(198, 107, 107, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.54), rgba(15, 23, 42, 0.22)) !important;
}

html[data-theme="dark"] body.rules-page .rules-rule:hover,
[data-theme="dark"] body.rules-page .rules-rule:hover {
    background: rgba(95, 130, 200, 0.14) !important;
}

/*
   Плавное переключение фона сделано на main, а не на body.
   Body остаётся подложкой страницы, main перекрывает резкую смену внутри основного блока.
*/
body.rules-page > main {
    position: relative !important;
    z-index: 1 !important;
    isolation: isolate !important;
    overflow: hidden !important;
    background: transparent !important;
}

body.rules-page > main > * {
    position: relative !important;
    z-index: 1 !important;
}

body.rules-page > main::before,
body.rules-page > main::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background-attachment: scroll !important;
    background-size: cover !important;
    transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: opacity !important;
}

body.rules-page > main::before {
    background:
        radial-gradient(circle at 16% 8%, rgba(255, 197, 197, 0.50), transparent 28%),
        radial-gradient(circle at 86% 4%, rgba(189, 213, 255, 0.62), transparent 34%),
        radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.62), transparent 34%),
        linear-gradient(135deg, #F6DADA 0%, #DDE9FF 48%, #F5F8FF 100%);
    opacity: 1 !important;
}

body.rules-page > main::after {
    background:
        radial-gradient(circle at 16% 8%, rgba(198, 107, 107, 0.24), transparent 30%),
        radial-gradient(circle at 86% 4%, rgba(95, 130, 200, 0.34), transparent 36%),
        radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.05), transparent 36%),
        linear-gradient(135deg, #111827 0%, #18233A 48%, #080D18 100%);
    opacity: 0 !important;
}

html[data-theme="dark"] body.rules-page > main::before,
[data-theme="dark"] body.rules-page > main::before {
    opacity: 0 !important;
}

html[data-theme="dark"] body.rules-page > main::after,
[data-theme="dark"] body.rules-page > main::after {
    opacity: 1 !important;
}

@media (max-width: 1680px) {
    body.rules-page .rules-layout {
        --rules-toc-width: 230px;
        --rules-layout-gap: 18px;
    }
}

@media (max-width: 1500px) {
    body.rules-page .rules-layout {
        max-width: calc(var(--rules-content-width) + var(--side-padding) * 2) !important;
        grid-template-columns: 1fr !important;
        justify-content: center !important;
    }

    body.rules-page .rules-toc {
        position: relative !important;
        top: auto !important;
        grid-column: 1 !important;
        width: 100% !important;
        max-width: var(--rules-content-width) !important;
        justify-self: center !important;
        margin-right: 0 !important;
    }

    body.rules-page .rules-toc nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.rules-page .rules-content {
        grid-column: 1 !important;
        justify-self: center !important;
    }
}

@media (max-width: 980px) {
    body.rules-page .rules-layout {
        --rules-content-width: 100%;

        max-width: var(--site-width) !important;
        grid-template-columns: 1fr !important;
    }

    body.rules-page .rules-toc nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.rules-page .rules-content {
        max-width: none !important;
    }
}

@media (max-width: 680px) {
    body.rules-page .rules-toc nav {
        grid-template-columns: 1fr;
    }
}


/* -------------------------
   Site patch 044 — unified main-screen gradient and larger rules text
   ------------------------- */

/*
   Все основные страницы используют тот же градиент, что и главный экран.
   Поздние shop/rules overrides перебиваются здесь, чтобы фон не отличался между страницами.
*/
body,
body.shop-page,
body.rules-page,
html[data-theme="light"] body.shop-page,
[data-theme="light"] body.shop-page,
html[data-theme="dark"] body.shop-page,
[data-theme="dark"] body.shop-page {
    background: var(--page-gradient) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

/*
   На странице правил main раньше имел отдельный shop-like градиент.
   Теперь плавный слой main повторяет именно общий градиент главного экрана.
*/
body.rules-page > main::before {
    background:
        radial-gradient(circle at 58% 16%, rgba(239, 164, 164, 0.34) 0 0, transparent 28%),
        radial-gradient(circle at 18% 34%, rgba(157, 187, 239, 0.34) 0 0, transparent 30%),
        radial-gradient(circle at 82% 28%, rgba(157, 187, 239, 0.28) 0 0, transparent 26%),
        radial-gradient(circle at 68% 48%, rgba(236, 230, 160, 0.28) 0 0, transparent 24%),
        radial-gradient(circle at 22% 62%, rgba(239, 164, 164, 0.22) 0 0, transparent 28%),
        radial-gradient(circle at 74% 78%, rgba(157, 187, 239, 0.30) 0 0, transparent 30%),
        radial-gradient(circle at 12% 90%, rgba(236, 230, 160, 0.38) 0 0, transparent 26%),
        linear-gradient(180deg, #F5F6FF 0%, #F7F8FC 48%, #F3F8FF 100%) !important;
}

body.rules-page > main::after {
    background:
        radial-gradient(circle at 58% 16%, rgba(198, 107, 107, 0.18) 0 0, transparent 28%),
        radial-gradient(circle at 18% 34%, rgba(95, 130, 200, 0.22) 0 0, transparent 30%),
        radial-gradient(circle at 82% 28%, rgba(95, 130, 200, 0.16) 0 0, transparent 26%),
        radial-gradient(circle at 68% 48%, rgba(191, 176, 105, 0.11) 0 0, transparent 24%),
        radial-gradient(circle at 22% 62%, rgba(198, 107, 107, 0.12) 0 0, transparent 28%),
        radial-gradient(circle at 74% 78%, rgba(95, 130, 200, 0.18) 0 0, transparent 30%),
        radial-gradient(circle at 12% 90%, rgba(191, 176, 105, 0.12) 0 0, transparent 26%),
        linear-gradient(180deg, #0F172A 0%, #111827 48%, #0B1220 100%) !important;
}

/* Увеличивает читаемость самих пунктов правил без изменения ширины блока и оглавления. */
body.rules-page .rules-rule {
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 20px !important;
    padding: clamp(18px, 2.35vw, 28px) clamp(20px, 3vw, 32px) !important;
}

body.rules-page .rules-rule-number {
    width: 78px !important;
    height: 40px !important;
    font-size: 0.96rem !important;
}

body.rules-page .rules-rule p {
    font-size: clamp(1.08rem, 1.2vw, 1.18rem) !important;
    line-height: 1.74 !important;
    font-weight: 680 !important;
}

body.rules-page .rules-chapter-heading h2 {
    font-size: clamp(1.82rem, 3.15vw, 2.95rem) !important;
}

@media (max-width: 680px) {
    body.rules-page .rules-rule {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    body.rules-page .rules-rule-number {
        width: fit-content !important;
        min-width: 76px !important;
    }
}


/* -------------------------
   Site patch 045 — sticky rules table of contents
   ------------------------- */

/*
   Оглавление правил должно оставаться на экране при прокрутке.
   На широких экранах оно остаётся слева от блока правил, на средних — липнет сверху как отдельный блок.
   Мобильную версию не трогаем: там обычный поток страницы безопаснее.
*/
body.rules-page .rules-toc {
    position: sticky !important;
    top: 104px !important;
    align-self: start !important;
    max-height: calc(100vh - 128px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    z-index: 8 !important;
}

@media (max-width: 1500px) and (min-width: 981px) {
    body.rules-page .rules-toc {
        position: sticky !important;
        top: 104px !important;
        max-height: calc(100vh - 128px) !important;
        overflow-y: auto !important;
        backdrop-filter: blur(18px) !important;
    }
}

@media (max-width: 980px) {
    body.rules-page .rules-toc {
        position: relative !important;
        top: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}


/* -------------------------
   Site patch 046 — fixed sticky rules table of contents
   ------------------------- */

/*
   Sticky не работает, если один из родителей создаёт scroll container через overflow: hidden/auto/scroll.
   В patch 043 overflow был нужен только для фоновых main::before/main::after, но он ломал sticky-оглавление.
   Фоновые слои остаются на месте за счёт absolute + inset: 0, поэтому overflow у main можно вернуть в visible.
*/
body.rules-page > main {
    overflow: visible !important;
}

body.rules-page .rules-content-section,
body.rules-page .rules-layout {
    overflow: visible !important;
}

body.rules-page .rules-toc {
    position: sticky !important;
    top: 104px !important;
    align-self: start !important;
    max-height: calc(100vh - 128px) !important;
    overflow-y: auto !important;
    z-index: 12 !important;
}

@media (max-width: 980px) {
    body.rules-page .rules-toc {
        position: relative !important;
        top: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

/* -------------------------
   Site patch 047 — финальный контракт layout для магазина
   -------------------------

   Этот блок фиксирует структуру страницы магазина из одной точки.
   Визуал карточек, hover и pointer tilt не меняются.
   Меняется только структурный контракт:
   - привилегии и товары используют одинаковый layout секций;
   - название категории, подложка и сетка карточек стоят в одинаковых местах;
   - старые grid/flex overrides выше нейтрализуются одним финальным слоем.
*/

body.shop-page {
    --shop-final-layout-width: min(1460px, calc(100vw - 48px));
    --shop-final-vip-grid-width: min(1220px, 100%);
    --shop-final-section-gap: clamp(26px, 2.8vw, 42px);
    --shop-final-title-gap: clamp(10px, 1.1vw, 16px);
    --shop-final-category-padding-y: clamp(26px, 2.8vw, 42px);
    --shop-final-category-padding-x: clamp(28px, 3.8vw, 54px);
    --shop-final-category-radius: 36px;
    --shop-final-goods-card-min-height: 420px;
}

body.shop-page .shop-catalog-panel {
    overflow: visible !important;
}

body.shop-page .shop-catalog-panel #shopPrivileges.shop-products.shop-privileges-products,
body.shop-page .shop-catalog-panel #shopItems.shop-products.shop-goods-products {
    width: var(--shop-final-layout-width) !important;
    max-width: var(--shop-final-layout-width) !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: var(--shop-final-section-gap) !important;
    grid-template-columns: none !important;
    perspective: none !important;
    overflow: visible !important;
}

body.shop-page .shop-catalog-panel #shopPrivileges.shop-products.shop-privileges-products[hidden],
body.shop-page .shop-catalog-panel #shopItems.shop-products.shop-goods-products[hidden] {
    display: none !important;
}

body.shop-page #shopPrivileges.shop-products.shop-privileges-products > .shop-type-block,
body.shop-page #shopItems.shop-products.shop-goods-products > .shop-type-block {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--shop-final-title-gap) !important;
    overflow: visible !important;
}

body.shop-page #shopPrivileges.shop-products.shop-privileges-products .shop-type-heading,
body.shop-page #shopItems.shop-products.shop-goods-products .shop-type-heading {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 clamp(10px, 1.8vw, 28px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

body.shop-page #shopPrivileges.shop-products.shop-privileges-products .shop-type-title,
body.shop-page #shopItems.shop-products.shop-goods-products .shop-type-title {
    display: block !important;
    margin: 0 !important;
    max-width: min(100%, 820px) !important;
    font-size: clamp(24px, 2.65vw, 40px) !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    letter-spacing: -0.035em !important;
    text-transform: none !important;
}

body.shop-page #shopPrivileges.shop-products.shop-privileges-products .shop-goods-category,
body.shop-page #shopItems.shop-products.shop-goods-products .shop-goods-category {
    position: relative !important;
    isolation: isolate !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    min-height: auto !important;
    padding: var(--shop-final-category-padding-y) var(--shop-final-category-padding-x) !important;
    overflow: visible !important;
    border: 1px solid var(--shop-products-underlay-border) !important;
    border-radius: var(--shop-final-category-radius) !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.shop-page #shopPrivileges.shop-products.shop-privileges-products .shop-goods-category::before,
body.shop-page #shopItems.shop-products.shop-goods-products .shop-goods-category::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    border-radius: inherit !important;
    border: 1px solid var(--shop-products-underlay-border) !important;
    background:
        radial-gradient(circle at 14% 0%, rgba(157, 187, 239, 0.20), transparent 38%),
        radial-gradient(circle at 92% 18%, rgba(239, 164, 164, 0.18), transparent 36%),
        var(--shop-products-underlay-bg) !important;
    box-shadow: var(--shop-products-underlay-shadow) !important;
    opacity: 1 !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

html[data-theme="dark"] body.shop-page #shopPrivileges.shop-products.shop-privileges-products .shop-goods-category::before,
[data-theme="dark"] body.shop-page #shopPrivileges.shop-products.shop-privileges-products .shop-goods-category::before,
html[data-theme="dark"] body.shop-page #shopItems.shop-products.shop-goods-products .shop-goods-category::before,
[data-theme="dark"] body.shop-page #shopItems.shop-products.shop-goods-products .shop-goods-category::before {
    background:
        radial-gradient(circle at 14% 0%, rgba(95, 130, 200, 0.18), transparent 38%),
        radial-gradient(circle at 92% 18%, rgba(198, 107, 107, 0.14), transparent 36%),
        var(--shop-products-underlay-bg) !important;
}

body.shop-page #shopItems.shop-products.shop-goods-products .shop-goods-category-grid {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
    align-items: stretch !important;
    overflow: visible !important;
    perspective: 1000px !important;
    transform-style: preserve-3d !important;
}

body.shop-page #shopItems.shop-products.shop-goods-products .shop-goods-card-hitbox {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    overflow: visible !important;
}

body.shop-page #shopItems.shop-products.shop-goods-products .shop-goods-card-hitbox > .donate-card.shop-goods-preview-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: var(--shop-final-goods-card-min-height) !important;
}

body.shop-page #shopPrivileges.shop-products.shop-privileges-products .shop-privileges-category-grid,
body.shop-page #shopPrivileges.shop-products.shop-privileges-products .shop-goods-category-grid.shop-privileges-category-grid {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: var(--shop-final-vip-grid-width) !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(300px, 1fr)) !important;
    gap: 34px !important;
    align-items: stretch !important;
    overflow: visible !important;
    perspective: 1000px !important;
    transform-style: preserve-3d !important;
}

body.shop-page #shopPrivileges.shop-products.shop-privileges-products .shop-vip-card-hitbox {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    overflow: visible !important;
}

body.shop-page #shopPrivileges.shop-products.shop-privileges-products .shop-vip-card-hitbox > .donate-card-vip-tier {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
}

@media (max-width: 1180px) {
    body.shop-page {
        --shop-final-layout-width: min(100%, calc(100vw - 36px));
        --shop-final-category-padding-x: clamp(22px, 3vw, 38px);
    }

    body.shop-page #shopItems.shop-products.shop-goods-products .shop-goods-category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body.shop-page #shopPrivileges.shop-products.shop-privileges-products .shop-privileges-category-grid,
    body.shop-page #shopPrivileges.shop-products.shop-privileges-products .shop-goods-category-grid.shop-privileges-category-grid {
        max-width: 820px !important;
        grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
    }
}

@media (max-width: 820px) {
    body.shop-page {
        --shop-final-category-radius: 30px;
    }

    body.shop-page #shopItems.shop-products.shop-goods-products .shop-goods-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }
}

@media (max-width: 680px) {
    body.shop-page {
        --shop-final-layout-width: min(100%, calc(100vw - 28px));
        --shop-final-category-padding-y: 22px;
        --shop-final-category-padding-x: 18px;
        --shop-final-category-radius: 28px;
        --shop-final-goods-card-min-height: 390px;
    }

    body.shop-page #shopPrivileges.shop-products.shop-privileges-products .shop-privileges-category-grid,
    body.shop-page #shopPrivileges.shop-products.shop-privileges-products .shop-goods-category-grid.shop-privileges-category-grid,
    body.shop-page #shopItems.shop-products.shop-goods-products .shop-goods-category-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        max-width: 360px !important;
        gap: 18px !important;
        margin-inline: auto !important;
    }
}

/* -------------------------
   Site patch 049 — lower shop privilege and goods blocks
   -------------------------

   Опускает активный блок привилегий/товаров ниже относительно переключателей.
   Карточки, hover, tilt/perspective, JS и HTML не меняются.
*/

body.shop-page {
    --shop-final-panel-offset-top: clamp(18px, 1.8vw, 28px);
}

body.shop-page .shop-catalog-panel #shopPrivileges.shop-products.shop-privileges-products,
body.shop-page .shop-catalog-panel #shopItems.shop-products.shop-goods-products {
    margin-top: var(--shop-final-panel-offset-top) !important;
}

@media (max-width: 680px) {
    body.shop-page {
        --shop-final-panel-offset-top: 16px;
    }
}

/* Site patch 071 — страницы статуса оплаты Robokassa */
.payment-page {
    min-height: 100vh;
    background: var(--page-gradient);
}

.payment-main {
    min-height: 100vh;
    padding: clamp(130px, 14vh, 180px) 20px 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-status-card {
    width: min(100%, 760px);
    position: relative;
    overflow: hidden;
    border-radius: 34px;
    padding: clamp(28px, 4vw, 52px);
    border: 1px solid color-mix(in srgb, var(--accent-blue) 26%, transparent);
    background:
        radial-gradient(circle at 15% 5%, color-mix(in srgb, var(--accent-red) 22%, transparent), transparent 36%),
        radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--accent-blue) 26%, transparent), transparent 38%),
        color-mix(in srgb, var(--bg) 82%, transparent);
    box-shadow:
        0 30px 90px rgba(16, 33, 63, 0.12),
        inset 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent);
    backdrop-filter: blur(18px);
}

[data-theme="dark"] .payment-status-card {
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent);
}

.payment-status-kicker {
    margin: 0 0 10px;
    font-size: 0.76rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-weight: 900;
    color: color-mix(in srgb, var(--accent-blue) 82%, var(--text));
}

.payment-status-title {
    margin: 0;
    font-size: clamp(2.1rem, 5vw, 4.2rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
    font-weight: 1000;
    color: var(--text);
}

.payment-status-lead {
    margin: 18px 0 0;
    max-width: 640px;
    font-size: clamp(1rem, 1.5vw, 1.18rem);
    line-height: 1.65;
    font-weight: 700;
    color: color-mix(in srgb, var(--text) 76%, transparent);
}

.payment-status-box {
    margin-top: 26px;
    min-height: 58px;
    border-radius: 20px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 900;
    color: var(--text);
    border: 1px solid color-mix(in srgb, var(--accent-blue) 22%, transparent);
    background: color-mix(in srgb, var(--accent-blue) 10%, transparent);
}

.payment-status-box-success {
    border-color: color-mix(in srgb, var(--accent-blue) 42%, transparent);
    background: color-mix(in srgb, var(--accent-blue) 18%, transparent);
}

.payment-status-box-warning {
    border-color: color-mix(in srgb, var(--accent-red) 38%, transparent);
    background: color-mix(in srgb, var(--accent-red) 15%, transparent);
}

.payment-status-box-error {
    border-color: color-mix(in srgb, var(--accent-red) 52%, transparent);
    background: color-mix(in srgb, var(--accent-red) 20%, transparent);
}

.payment-status-loader {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 3px solid color-mix(in srgb, var(--accent-blue) 30%, transparent);
    border-top-color: var(--accent-blue);
    animation: payment-status-spin 0.85s linear infinite;
    flex: 0 0 auto;
}

@keyframes payment-status-spin {
    to {
        transform: rotate(360deg);
    }
}

.payment-order-details {
    margin: 22px 0 0;
    display: grid;
    grid-template-columns: minmax(140px, 0.34fr) 1fr;
    gap: 10px 18px;
    border-radius: 22px;
    padding: 18px;
    background: color-mix(in srgb, var(--bg) 68%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-blue) 18%, transparent);
}

.payment-order-details dt,
.payment-order-details dd {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.35;
}

.payment-order-details dt {
    font-weight: 900;
    color: color-mix(in srgb, var(--text) 58%, transparent);
}

.payment-order-details dd {
    font-weight: 900;
    color: var(--text);
}

.payment-status-actions {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.payment-status-button {
    min-height: 48px;
    border-radius: 999px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1;
    font-weight: 1000;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-on-blue);
    background: linear-gradient(135deg, var(--accent-blue), color-mix(in srgb, var(--accent-blue) 72%, var(--accent-red)));
    box-shadow: 0 14px 34px color-mix(in srgb, var(--accent-blue) 24%, transparent);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.payment-status-button:hover {
    transform: scale(1.035);
    box-shadow: 0 18px 42px color-mix(in srgb, var(--accent-blue) 34%, transparent);
}

.payment-status-button-secondary {
    color: var(--text);
    background: color-mix(in srgb, var(--bg) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-red) 24%, transparent);
    box-shadow: none;
}

.payment-status-button-secondary:hover {
    box-shadow: 0 14px 30px color-mix(in srgb, var(--accent-red) 18%, transparent);
}

@media (max-width: 640px) {
    .payment-main {
        padding: 116px 14px 58px;
    }

    .payment-status-card {
        border-radius: 26px;
    }

    .payment-order-details {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .payment-order-details dd + dt {
        margin-top: 10px;
    }

    .payment-status-actions {
        flex-direction: column;
    }

    .payment-status-button {
        width: 100%;
    }
}

/* -------------------------
   Site patch 072 — restored payment form fields and simple payment button hover.
   ------------------------- */

body.shop-page .shop-article-payment-card {
    position: relative !important;
    overflow: hidden !important;
    display: grid !important;
    gap: 16px !important;
    width: min(100%, 920px) !important;
    box-sizing: border-box !important;
    margin: clamp(18px, 2.1vw, 28px) auto 0 !important;
    padding: clamp(18px, 2.4vw, 24px) !important;
    border: 1.5px solid rgba(var(--vip-article-accent-rgb), 0.30) !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 14% 0%, rgba(var(--vip-article-accent-soft-rgb), 0.30), transparent 38%),
        linear-gradient(135deg, rgba(var(--vip-article-accent-rgb), 0.12), rgba(var(--vip-article-accent-rgb), 0.045)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        0 16px 34px rgba(var(--vip-article-accent-rgb), 0.12) !important;
}

[data-theme="dark"] body.shop-page .shop-article-payment-card,
html[data-theme="dark"] body.shop-page .shop-article-payment-card {
    background:
        radial-gradient(circle at 14% 0%, rgba(var(--vip-article-accent-rgb), 0.20), transparent 40%),
        linear-gradient(135deg, rgba(var(--vip-article-accent-rgb), 0.14), rgba(var(--vip-article-accent-rgb), 0.055)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 18px 38px rgba(0, 0, 0, 0.20),
        0 0 28px rgba(var(--vip-article-accent-rgb), 0.10) !important;
}

body.shop-page .shop-article-field {
    display: grid !important;
    gap: 9px !important;
    margin: 0 !important;
}

body.shop-page .shop-article-field span {
    display: block !important;
    color: rgb(var(--vip-article-accent-rgb)) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0.13em !important;
    text-transform: uppercase !important;
}

body.shop-page .shop-article-input {
    width: 100% !important;
    min-height: 54px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(var(--vip-article-accent-rgb), 0.34) !important;
    border-radius: 18px !important;
    padding: 0 18px !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.30), rgba(var(--vip-article-accent-rgb), 0.14)) !important;
    color: var(--text) !important;
    font: inherit !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    outline: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        0 10px 22px rgba(var(--vip-article-accent-rgb), 0.10) !important;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease,
        transform 160ms ease !important;
}

body.shop-page .shop-article-input::placeholder {
    color: rgba(17, 24, 39, 0.42) !important;
}

body.shop-page .shop-article-input:focus {
    border-color: rgba(var(--vip-article-accent-rgb), 0.62) !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.42), rgba(var(--vip-article-accent-rgb), 0.20)) !important;
    transform: scale(1.006) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.46),
        0 14px 26px rgba(var(--vip-article-accent-rgb), 0.16),
        0 0 18px rgba(var(--vip-article-accent-rgb), 0.16) !important;
}

body.shop-page .shop-article-input-invalid {
    border-color: rgba(239, 68, 68, 0.72) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        0 0 0 4px rgba(239, 68, 68, 0.10) !important;
}

[data-theme="dark"] body.shop-page .shop-article-input,
html[data-theme="dark"] body.shop-page .shop-article-input {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(var(--vip-article-accent-rgb), 0.15)) !important;
    color: rgba(249, 251, 255, 0.92) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 12px 24px rgba(0, 0, 0, 0.20),
        0 0 18px rgba(var(--vip-article-accent-rgb), 0.08) !important;
}

[data-theme="dark"] body.shop-page .shop-article-input::placeholder,
html[data-theme="dark"] body.shop-page .shop-article-input::placeholder {
    color: rgba(249, 251, 255, 0.36) !important;
}

body.shop-page .vip-article-action::before,
body.shop-page .vip-article-overlay[data-vip-duration="forever"] .vip-article-action::before {
    display: none !important;
}

body.shop-page .vip-article-action:not(:disabled):not([aria-disabled="true"]),
body.shop-page .vip-article-overlay[data-vip-duration="forever"] .vip-article-action:not(:disabled):not([aria-disabled="true"]) {
    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        border-color 160ms ease,
        filter 160ms ease !important;
}

body.shop-page .vip-article-action:not(:disabled):not([aria-disabled="true"]):hover,
body.shop-page .vip-article-action:not(:disabled):not([aria-disabled="true"]):focus-visible,
body.shop-page .vip-article-overlay[data-vip-duration="forever"] .vip-article-action:not(:disabled):not([aria-disabled="true"]):hover,
body.shop-page .vip-article-overlay[data-vip-duration="forever"] .vip-article-action:not(:disabled):not([aria-disabled="true"]):focus-visible {
    background:
        linear-gradient(135deg, rgba(var(--vip-article-accent-rgb), 0.92), rgba(var(--vip-article-accent-rgb), 0.58)) !important;
    background-size: auto !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    animation: none !important;
    transform: scale(1.024) !important;
    filter: none !important;
    border-color: rgba(var(--vip-article-accent-rgb), 0.52) !important;
    box-shadow:
        0 18px 38px rgba(var(--vip-article-accent-rgb), 0.34),
        0 0 28px rgba(var(--vip-article-accent-rgb), 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
}

html[data-theme="dark"] body.shop-page .vip-article-action:not(:disabled):not([aria-disabled="true"]):hover,
html[data-theme="dark"] body.shop-page .vip-article-action:not(:disabled):not([aria-disabled="true"]):focus-visible,
html[data-theme="dark"] body.shop-page .vip-article-overlay[data-vip-duration="forever"] .vip-article-action:not(:disabled):not([aria-disabled="true"]):hover,
html[data-theme="dark"] body.shop-page .vip-article-overlay[data-vip-duration="forever"] .vip-article-action:not(:disabled):not([aria-disabled="true"]):focus-visible,
[data-theme="dark"] body.shop-page .vip-article-action:not(:disabled):not([aria-disabled="true"]):hover,
[data-theme="dark"] body.shop-page .vip-article-action:not(:disabled):not([aria-disabled="true"]):focus-visible,
[data-theme="dark"] body.shop-page .vip-article-overlay[data-vip-duration="forever"] .vip-article-action:not(:disabled):not([aria-disabled="true"]):hover,
[data-theme="dark"] body.shop-page .vip-article-overlay[data-vip-duration="forever"] .vip-article-action:not(:disabled):not([aria-disabled="true"]):focus-visible {
    background:
        linear-gradient(135deg, rgba(var(--vip-article-accent-rgb), 0.74), rgba(var(--vip-article-accent-rgb), 0.42)) !important;
    background-size: auto !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    animation: none !important;
    transform: scale(1.024) !important;
    filter: none !important;
    border-color: rgba(var(--vip-article-accent-rgb), 0.48) !important;
    box-shadow:
        0 18px 38px rgba(var(--vip-article-accent-rgb), 0.24),
        0 0 30px rgba(var(--vip-article-accent-rgb), 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

@media (max-width: 640px) {
    body.shop-page .shop-article-payment-card {
        border-radius: 22px !important;
        padding: 18px !important;
    }
}

/* -------------------------
   Site patch 114 — inline nickname validation message in shop payment cards.
   ------------------------- */

body.shop-page .shop-article-field-error {
    display: none !important;
    margin: -2px 2px 0 !important;
    color: rgb(220, 38, 38) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
}

body.shop-page .shop-article-field-error-visible {
    display: block !important;
}

[data-theme="dark"] body.shop-page .shop-article-field-error,
html[data-theme="dark"] body.shop-page .shop-article-field-error {
    color: rgb(248, 113, 113) !important;
}

/* -------------------------
   Site patch 115 — nickname error in field heading.
   ------------------------- */

body.shop-page .shop-article-nickname-field {
    gap: 9px !important;
}

body.shop-page .shop-article-field-heading {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 16px !important;
    width: 100% !important;
}

body.shop-page .shop-article-field-heading .shop-article-field-title {
    flex: 0 0 auto !important;
}

body.shop-page .shop-article-field-title small {
    color: currentColor !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    opacity: 0.68 !important;
    text-transform: uppercase !important;
}

body.shop-page .shop-article-field-heading .shop-article-field-error {
    display: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: rgb(239, 68, 68) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.03em !important;
    text-transform: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.shop-page .shop-article-field-heading .shop-article-field-error-visible {
    display: inline-block !important;
}

body.shop-page .shop-article-field-invalid .shop-article-field-title {
    color: rgb(239, 68, 68) !important;
}

body.shop-page .shop-article-field-invalid .shop-article-nickname-input {
    border-color: rgba(239, 68, 68, 0.95) !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.30), rgba(239, 68, 68, 0.12)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        0 0 0 3px rgba(239, 68, 68, 0.16),
        0 0 24px rgba(239, 68, 68, 0.16) !important;
}

[data-theme="dark"] body.shop-page .shop-article-field-heading .shop-article-field-error,
html[data-theme="dark"] body.shop-page .shop-article-field-heading .shop-article-field-error {
    color: rgb(248, 113, 113) !important;
}

[data-theme="dark"] body.shop-page .shop-article-field-invalid .shop-article-field-title,
html[data-theme="dark"] body.shop-page .shop-article-field-invalid .shop-article-field-title {
    color: rgb(248, 113, 113) !important;
}

[data-theme="dark"] body.shop-page .shop-article-field-invalid .shop-article-nickname-input,
html[data-theme="dark"] body.shop-page .shop-article-field-invalid .shop-article-nickname-input {
    border-color: rgba(248, 113, 113, 0.95) !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(239, 68, 68, 0.15)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 0 0 3px rgba(248, 113, 113, 0.18),
        0 0 24px rgba(248, 113, 113, 0.18) !important;
}

@media (max-width: 560px) {
    body.shop-page .shop-article-field-heading {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    body.shop-page .shop-article-field-heading .shop-article-field-error {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
}

/* -------------------------
   Site patch 116 — themed radial gradients for shop card image blocks.
   The image block uses the card theme: light center, darker edges.
   ------------------------- */

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image {
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(var(--shop-card-frame-light-rgb), 0.88) 19%,
            rgba(var(--shop-card-frame-main-rgb), 0.76) 48%,
            rgba(var(--shop-card-frame-dark-rgb), 0.94) 100%
        ) !important;
    box-shadow:
        inset 0 0 32px rgba(255, 255, 255, 0.16),
        inset 0 0 72px rgba(var(--shop-card-frame-dark-rgb), 0.34),
        0 var(--image-shadow-y, 24px) var(--image-shadow-blur, 42px) rgba(17, 24, 39, 0.18),
        0 0 24px rgba(var(--shop-card-frame-main-rgb), 0.16) !important;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .donate-card-image,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .donate-card-image,
body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .donate-card-image {
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(255, 255, 255, 1.00) 0%,
            rgba(var(--shop-card-frame-light-rgb), 0.96) 20%,
            rgba(var(--shop-card-frame-main-rgb), 0.84) 50%,
            rgba(var(--shop-card-frame-dark-rgb), 0.98) 100%
        ) !important;
    box-shadow:
        inset 0 0 34px rgba(255, 255, 255, 0.20),
        inset 0 0 78px rgba(var(--shop-card-frame-dark-rgb), 0.36),
        0 var(--image-shadow-y, 24px) var(--image-shadow-blur, 42px) rgba(17, 24, 39, 0.20),
        0 0 30px rgba(var(--shop-card-frame-main-rgb), 0.22) !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image::before {
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.20) 24%, transparent 58%),
        radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.24) 0%, transparent 30%),
        radial-gradient(circle at 78% 82%, rgba(var(--shop-card-frame-dark-rgb), 0.18) 0%, transparent 42%) !important;
    opacity: 1 !important;
    mix-blend-mode: screen !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image span {
    color: rgba(255, 255, 255, 0.98) !important;
    text-shadow:
        0 0 18px rgba(255, 255, 255, 0.34),
        0 8px 26px rgba(var(--shop-card-frame-dark-rgb), 0.56),
        0 2px 0 rgba(17, 24, 39, 0.18) !important;
}

/* -------------------------
   Site patch 118 — goods card image gradients use the visible frame color.
   Only goods cards are affected. VIP cards keep their own image styling.
   ------------------------- */

body.shop-page #shopItems.shop-products.shop-goods-products .shop-goods-category .shop-goods-card-hitbox > .donate-card.shop-goods-preview-card .donate-card-image {
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(var(--shop-card-frame-light-rgb), 0.98) 16%,
            rgba(var(--shop-card-frame-main-rgb), 0.92) 44%,
            rgba(var(--shop-card-frame-dark-rgb), 0.98) 100%
        ) !important;
    border-color: rgba(var(--shop-card-frame-light-rgb), 0.62) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.28),
        inset 0 0 34px rgba(var(--shop-card-frame-light-rgb), 0.22),
        inset 0 0 82px rgba(var(--shop-card-frame-dark-rgb), 0.42),
        0 var(--image-shadow-y, 24px) var(--image-shadow-blur, 42px) rgba(17, 24, 39, 0.20),
        0 0 0 1px rgba(var(--shop-card-frame-main-rgb), 0.28),
        0 0 28px rgba(var(--shop-card-frame-main-rgb), 0.22) !important;
}

body.shop-page #shopItems.shop-products.shop-goods-products .shop-goods-category .shop-goods-card-hitbox:hover > .donate-card.shop-goods-preview-card .donate-card-image,
body.shop-page #shopItems.shop-products.shop-goods-products .shop-goods-category .shop-goods-card-hitbox:focus-within > .donate-card.shop-goods-preview-card .donate-card-image,
body.shop-page #shopItems.shop-products.shop-goods-products .shop-goods-category .shop-goods-card-hitbox > .donate-card.shop-goods-preview-card.is-pointer-tilting .donate-card-image {
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(255, 255, 255, 1.00) 0%,
            rgba(var(--shop-card-frame-light-rgb), 1.00) 15%,
            rgba(var(--shop-card-frame-main-rgb), 0.98) 44%,
            rgba(var(--shop-card-frame-dark-rgb), 1.00) 100%
        ) !important;
    border-color: rgba(var(--shop-card-frame-light-rgb), 0.82) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.34),
        inset 0 0 38px rgba(var(--shop-card-frame-light-rgb), 0.26),
        inset 0 0 92px rgba(var(--shop-card-frame-dark-rgb), 0.46),
        0 var(--image-shadow-y, 24px) var(--image-shadow-blur, 42px) rgba(17, 24, 39, 0.22),
        0 0 0 1px rgba(var(--shop-card-frame-light-rgb), 0.40),
        0 0 38px rgba(var(--shop-card-frame-main-rgb), 0.34) !important;
}

body.shop-page #shopItems.shop-products.shop-goods-products .shop-goods-category .shop-goods-card-hitbox > .donate-card.shop-goods-preview-card .donate-card-image::before {
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.72) 0%, rgba(var(--shop-card-frame-light-rgb), 0.28) 24%, transparent 58%),
        radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.30) 0%, rgba(var(--shop-card-frame-light-rgb), 0.16) 24%, transparent 42%),
        radial-gradient(circle at 82% 82%, rgba(var(--shop-card-frame-dark-rgb), 0.32) 0%, transparent 48%) !important;
    opacity: 1 !important;
    mix-blend-mode: screen !important;
}

body.shop-page #shopItems.shop-products.shop-goods-products .shop-goods-category .shop-goods-card-hitbox > .donate-card.shop-goods-preview-card .donate-card-image span {
    color: rgba(255, 255, 255, 0.99) !important;
    text-shadow:
        0 0 18px rgba(255, 255, 255, 0.38),
        0 8px 28px rgba(var(--shop-card-frame-dark-rgb), 0.64),
        0 2px 0 rgba(17, 24, 39, 0.24) !important;
}


/* ======================================================================
   Shop patch 119
   Real product icons inside goods card image blocks.
   VIP cards are not changed.
   ====================================================================== */

body.shop-page .shop-goods-category .shop-goods-preview-card .donate-card-image span {
    display: none !important;
}

body.shop-page .shop-goods-category .shop-goods-preview-card .shop-goods-card-icon {
    position: relative !important;
    z-index: 4 !important;
    display: block !important;
    width: min(58%, 132px) !important;
    max-width: 132px !important;
    max-height: 118px !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
    image-rendering: auto !important;
    filter:
        drop-shadow(0 16px 20px rgba(17, 24, 39, 0.28))
        drop-shadow(0 0 18px rgba(var(--shop-card-frame-light-rgb), 0.22))
        saturate(1.08)
        contrast(1.03) !important;
    transform:
        translate3d(calc(var(--image-gloss-shift-x, 0px) * 0.020), calc(var(--image-gloss-shift-y, 0px) * 0.016), 0)
        scale(calc(1 + (var(--tilt-strength, 0) * 0.018))) !important;
    transition:
        filter var(--transition-fast),
        transform 0.12s linear !important;
}

body.shop-page .shop-goods-category .shop-goods-card-hitbox:hover > .shop-goods-preview-card .shop-goods-card-icon,
body.shop-page .shop-goods-category .shop-goods-card-hitbox:focus-within > .shop-goods-preview-card .shop-goods-card-icon,
body.shop-page .shop-goods-category .shop-goods-preview-card.is-pointer-tilting .shop-goods-card-icon {
    filter:
        drop-shadow(0 18px 22px rgba(17, 24, 39, 0.30))
        drop-shadow(0 0 24px rgba(var(--shop-card-frame-light-rgb), 0.32))
        saturate(1.14)
        contrast(1.05)
        brightness(1.03) !important;
}

@media (max-width: 640px) {
    body.shop-page .shop-goods-category .shop-goods-preview-card .shop-goods-card-icon {
        width: min(60%, 116px) !important;
        max-height: 104px !important;
    }
}

/* ======================================================================
   Site patch 120 — rules hero project label uses the same color as shop.
   Only the GREAT LIFE label on the rules page is affected.
   ====================================================================== */

body.rules-page .shop-compact-eyebrow {
    color: rgba(16, 33, 63, 0.66) !important;
}

html[data-theme="dark"] body.rules-page .shop-compact-eyebrow,
[data-theme="dark"] body.rules-page .shop-compact-eyebrow {
    color: rgba(238, 244, 255, 0.66) !important;
}