/* The templates bypass Blocksy/Gutenberg content gutters intentionally. */
body.proo-home-template #main-container,
body.proo-home-template .site-main.proo-home-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

body.proo-home-template .site-main.proo-home-shell {
    display: block;
    overflow: visible;
}

body.proo-home-template .site-main.proo-home-shell::before,
body.proo-home-template .site-main.proo-home-shell::after {
    display: none;
}

@media (min-width: 601px) and (pointer: fine) {
    html {
        --proo-scrollbar-track: #f0f0f1;
        --proo-scrollbar-track-edge: #dedee1;
        --proo-scrollbar-firefox-thumb: #686c71;
        --proo-scrollbar-thumb-start: #4d5054;
        --proo-scrollbar-thumb-end: #888d92;
        --proo-scrollbar-thumb-hover-start: #5a5e63;
        --proo-scrollbar-thumb-hover-end: #989da2;
    }

    html[data-hero-theme="dark"] {
        --proo-scrollbar-track: #131314;
        --proo-scrollbar-track-edge: #2b2b2e;
        --proo-scrollbar-firefox-thumb: #6d7176;
        --proo-scrollbar-thumb-start: #4a4d52;
        --proo-scrollbar-thumb-end: #7a7f84;
        --proo-scrollbar-thumb-hover-start: #565a5f;
        --proo-scrollbar-thumb-hover-end: #8a8f95;
    }

    @supports (-moz-appearance: none) {
        html {
            scrollbar-color: var(--proo-scrollbar-firefox-thumb) var(--proo-scrollbar-track);
            scrollbar-width: thin;
        }
    }

    html::-webkit-scrollbar {
        width: 12px;
    }

    html::-webkit-scrollbar-track {
        border-left: 1px solid var(--proo-scrollbar-track-edge);
        background: var(--proo-scrollbar-track);
    }

    html::-webkit-scrollbar-thumb {
        min-height: 48px;
        border: 3px solid var(--proo-scrollbar-track);
        border-radius: 999px;
        background: linear-gradient(
            180deg,
            var(--proo-scrollbar-thumb-start) 0%,
            var(--proo-scrollbar-thumb-end) 100%
        );
        background-clip: padding-box;
    }

    html::-webkit-scrollbar-thumb:hover {
        border-width: 2px;
        background: linear-gradient(
            180deg,
            var(--proo-scrollbar-thumb-hover-start) 0%,
            var(--proo-scrollbar-thumb-hover-end) 100%
        );
        background-clip: padding-box;
    }

    html::-webkit-scrollbar-corner {
        background: var(--proo-scrollbar-track);
    }

    @media (prefers-color-scheme: dark) {
        html:not([data-hero-theme="light"]) {
            --proo-scrollbar-track: #131314;
            --proo-scrollbar-track-edge: #2b2b2e;
            --proo-scrollbar-firefox-thumb: #6d7176;
            --proo-scrollbar-thumb-start: #4a4d52;
            --proo-scrollbar-thumb-end: #7a7f84;
            --proo-scrollbar-thumb-hover-start: #565a5f;
            --proo-scrollbar-thumb-hover-end: #8a8f95;
        }
    }
}