/*
 * Continuous storefront background.
 *
 * The ambient gradients and grid belong to the complete store content area,
 * instead of restarting or disappearing between the hero, catalog and
 * "How it works" sections.
 */
.store-body > main {
    position: relative;
    isolation: isolate;
    min-height: calc(100vh - 76px);
    background-color: #0e1018;
    background-image:
        linear-gradient(rgba(112, 125, 173, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(112, 125, 173, .055) 1px, transparent 1px),
        radial-gradient(ellipse 62% 28% at 4% 10%, rgba(0, 190, 230, .14), transparent 72%),
        radial-gradient(ellipse 68% 32% at 96% 9%, rgba(108, 76, 255, .22), transparent 74%),
        radial-gradient(ellipse 52% 24% at 9% 54%, rgba(0, 190, 230, .10), transparent 75%),
        radial-gradient(ellipse 58% 28% at 92% 58%, rgba(126, 63, 255, .14), transparent 76%),
        linear-gradient(180deg, #111423 0%, #0e1018 42%, #0d1018 100%);
    background-size:
        64px 64px,
        64px 64px,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%;
    background-position: center top;
}

.store-body > main > section {
    position: relative;
    z-index: 1;
}

[data-theme="dark"] .store-body > main .store-hero,
[data-theme="dark"] .store-body > main .store-categories,
[data-theme="dark"] .store-body > main .store-products,
[data-theme="dark"] .store-body > main .store-how {
    background: transparent !important;
}

[data-theme="dark"] .store-body > main .store-how {
    border-top-color: rgba(112, 125, 173, .13);
}

[data-theme="dark"] .store-body > main .store-how::before {
    display: none;
}

[data-theme="light"] .store-body > main {
    background-color: #f5f7fc;
    background-image:
        linear-gradient(rgba(45, 55, 90, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(45, 55, 90, .045) 1px, transparent 1px),
        radial-gradient(ellipse 62% 28% at 4% 10%, rgba(0, 190, 220, .13), transparent 72%),
        radial-gradient(ellipse 68% 32% at 96% 9%, rgba(108, 76, 255, .18), transparent 74%),
        radial-gradient(ellipse 52% 24% at 9% 54%, rgba(0, 190, 220, .08), transparent 75%),
        radial-gradient(ellipse 58% 28% at 92% 58%, rgba(126, 63, 255, .10), transparent 76%),
        linear-gradient(180deg, #f8faff 0%, #f4f6fb 42%, #f3f5fa 100%);
    background-size:
        64px 64px,
        64px 64px,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%;
    background-position: center top;
}

[data-theme="light"] .store-body > main .store-hero,
[data-theme="light"] .store-body > main .store-categories,
[data-theme="light"] .store-body > main .store-products,
[data-theme="light"] .store-body > main .store-how {
    background: transparent !important;
}

[data-theme="light"] .store-body > main .store-how::before {
    display: none;
}

@media (max-width: 700px) {
    .store-body > main {
        min-height: calc(100vh - 66px);
        background-size:
            44px 44px,
            44px 44px,
            145% 100%,
            145% 100%,
            145% 100%,
            145% 100%,
            100% 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .store-body > main {
        background-attachment: scroll;
    }
}