/*
 * Black Friday overlay. The layout loads this after every other stylesheet,
 * only while Shop Settings > Toggle Black Friday Styling is on.
 * Brand blue comes from var(--brand) in demo2.min.css, site.css and the
 * inline styles, so swapping the variable turns every blue accent black.
 */
:root {
    --brand: #000;
}

/* Theme accents that use other blues, so they would stay blue on the black theme */
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover {
    border-color: #333;
    background-color: #333;
}

.category-banner:hover .category-content {
    background-color: rgba(0, 0, 0, .8);
}

.load-more-overlay.loading:after,
.loading:not(.load-more-overlay) {
    border-right-color: rgba(0, 0, 0, .4) !important;
    border-left-color: rgba(0, 0, 0, .4) !important;
}

.mobile-menu > li:not(:last-child) {
    border-bottom-color: #333;
}

.mobile-menu .show ul li.show > a .toggle-btn {
    background-color: #333;
}

/* The live search styles arrive with the Vue bundle, after this file */
#app .ais-SearchBox-form {
    border-color: var(--brand);
}

/* Sale and savings text stays clearly red */
.savings,
.price-savings {
    color: red;
}