:root {
    --dark: rgba(15, 22, 22, 1);
    --lt-blue: #1CB2FF;
}

.header-top {
    background-color: var(--dark);
    color: #ffffff;

    a {
        color: #ffffff;
    }

    a:hover {
        color: var(--lt-blue);
    }
}

.site-logo > img {
    filter: brightness(0) invert(1);
}

#cart-button {
    color: #545454;
}

.prod-cat-item {
    .caption {
        h3 {
            font-size: 1.75rem;
        }
    }

    a {
        color: #545454;
    }
    a:hover {
        text-decoration: none;
    }

    .prod-buttons {
        display: none;
    }
}

.prod-cat-item:hover {
    a {
        color: var(--dark);
    }
}

#loginPage {
    .pageBody {
        margin-top: 5rem;
    }

    .loginForm {
        background-color: #ffffff;
        /*border-radius: 3rem;*/
        padding: 1rem;
        box-shadow: var(--box-shadow, 0 3px 15px 1px rgba(0, 0, 0, .1));
    }

    .ct-logo {
        max-width: 200px;
        margin-inline: auto;
        filter: brightness(0) invert(1)
    }

    .brandhub-label {
        color: rgba(255,255,255,45%);
    }

    /* The login page's own Pressero content sets body { background-color: #0f1616 },
       so the support block (outside .loginForm) sits on near-black: keep it light,
       as legacy did (restored after 4.4; checked live 2026-09-22). */
    .login-support {
        color: rgba(255,255,255,65%);

        h1, h2, a {
            color: rgba(255,255,255,65%);
        }
    }
}