:root {
    --accent: #9886e5;
    --accent-rgb: 152, 134, 229;
    --accent-contrast: #101010;
    --grad-a-rgb: 152, 134, 229;
    --grad-b-rgb: 80, 200, 255;
}

body[data-product-theme="vinted"] {
    --accent: #017783;
    --accent-rgb: 1, 119, 131;
    --accent-contrast: #ffffff;
    --grad-a-rgb: 1, 119, 131;
    --grad-b-rgb: 0, 200, 180;
}

body[data-product-theme="shopify"] {
    --accent: #95bf47;
    --accent-rgb: 149, 191, 71;
    --accent-contrast: #0f1307;
    --grad-a-rgb: 149, 191, 71;
    --grad-b-rgb: 80, 230, 140;
}

body[data-product-theme="paypal"] {
    --accent: #0070e0;
    --accent-rgb: 0, 112, 224;
    --accent-contrast: #ffffff;
    --grad-a-rgb: 0, 112, 224;
    --grad-b-rgb: 92, 179, 255;
}

body {
    position: relative;
    background-color: #0a0a0a !important;
}

body::before {
    content: '';
    position: fixed;
    inset: -18%;
    pointer-events: none;
    z-index: -2;
    background:
        radial-gradient(60% 50% at 18% 12%, rgba(var(--grad-a-rgb), 0.34) 0%, rgba(var(--grad-a-rgb), 0) 62%),
        radial-gradient(55% 55% at 86% 22%, rgba(var(--grad-b-rgb), 0.28) 0%, rgba(var(--grad-b-rgb), 0) 65%),
        radial-gradient(48% 55% at 55% 92%, rgba(var(--grad-a-rgb), 0.18) 0%, rgba(var(--grad-a-rgb), 0) 70%),
        radial-gradient(40% 40% at 40% 55%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 60%);
    transform: translateZ(0);
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(120% 90% at 50% 20%, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, 0.55) 72%, rgba(10, 10, 10, 0.85) 100%);
}