/* Shared brand colors. Layouts provide the current colors from site settings. */
:is(.brand-storefront, .brand-panel) {
    background-color: var(--brand-surface);
    accent-color: var(--brand-primary);
}

:is(.brand-storefront, .brand-panel) .text-primary {
    color: var(--brand-primary) !important;
}

:is(.brand-storefront, .brand-panel) .bg-primary {
    background-color: var(--brand-primary) !important;
}

:is(.brand-storefront, .brand-panel) .border-primary {
    border-color: var(--brand-primary) !important;
}

:is(.brand-storefront, .brand-panel) :is(.btn-primary, .btn--primary) {
    color: #fff;
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

:is(.brand-storefront, .brand-panel) :is(.btn-primary, .btn--primary):is(:hover, :active, .active),
:is(.brand-storefront, .brand-panel) .btn-primary:not(:disabled):not(.disabled):is(:active, .active),
:is(.brand-storefront, .brand-panel) .show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary);
}

:is(.brand-storefront, .brand-panel) :is(.btn-primary, .btn--primary, .btn-outline-primary, .btn-outline--primary):focus {
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.25);
}

:is(.brand-storefront, .brand-panel) :is(.btn-primary, .btn-outline-primary):not(:disabled):not(.disabled):is(:active, .active):focus {
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.25);
}

:is(.brand-storefront, .brand-panel) :is(.btn-outline-primary, .btn-outline--primary) {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
    background-color: transparent;
}

:is(.brand-storefront, .brand-panel) :is(.btn-outline-primary, .btn-outline--primary):is(:hover, :active, .active),
:is(.brand-storefront, .brand-panel) .btn-outline-primary:not(:disabled):not(.disabled):is(:active, .active),
:is(.brand-storefront, .brand-panel) .show > .btn-outline-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

:is(.brand-storefront, .brand-panel) :is(.bg-soft-primary, .badge-soft-primary, .btn-soft-primary) {
    color: var(--brand-primary);
    background-color: var(--brand-light);
}

:is(.brand-storefront, .brand-panel) .badge-primary {
    color: #fff;
    background-color: var(--brand-primary);
}

:is(.brand-storefront, .brand-panel) .form-control:not(.is-invalid):focus,
:is(.brand-storefront, .brand-panel) .custom-select:not(.is-invalid):focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.15);
}

:is(.brand-storefront, .brand-panel) .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

:is(.brand-storefront, .brand-panel) .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.15);
}

:is(.brand-storefront, .brand-panel) .page-item.active .page-link {
    color: #fff;
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

:is(.brand-storefront, .brand-panel) .page-link:is(:hover, :focus) {
    color: var(--brand-primary);
    background-color: var(--brand-light);
}

:is(.brand-storefront, .brand-panel) .dropdown-item:is(:hover, :focus) {
    color: var(--brand-primary);
    background-color: var(--brand-light);
}

:is(.brand-storefront, .brand-panel) .dropdown-item:is(.active, :active) {
    color: #fff;
    background-color: var(--brand-primary);
}

:is(.brand-storefront, .brand-panel) .select2-container--default .select2-results__option--highlighted[aria-selected] {
    color: #fff;
    background-color: var(--brand-primary);
}

.brand-storefront .navbar-stuck-menu {
    background-color: var(--brand-primary);
}

.brand-storefront .navbar-light .navbar-tool-icon-box {
    background-color: var(--brand-light);
}

.brand-storefront .page-footer {
    color: #465448;
    background-color: #F3F6F0;
    border-top: 1px solid var(--brand-border);
}

.brand-storefront .page-footer > .custom-light-primary-color-20 {
    background-color: #F3F6F0;
}

.brand-storefront .page-footer > .bg-white-overlay-50 {
    color: #465448;
    background-color: #E8EEE3;
    border-top: 1px solid var(--brand-border);
}

.brand-storefront .page-footer .footer-header {
    color: var(--brand-secondary);
}

.brand-storefront .page-footer .end-footer p,
.brand-storefront .page-footer .widget-list-link {
    color: #465448 !important;
}

.brand-storefront .page-footer .widget-list-link:is(:hover, :focus-visible) {
    color: var(--brand-primary) !important;
    text-decoration: underline;
}

.brand-storefront .page-footer hr {
    background-color: var(--brand-border) !important;
}

.brand-storefront .page-footer .form-control {
    color: #465448;
    background-color: #fff !important;
    border-color: var(--brand-border) !important;
}

.brand-storefront .page-footer .form-control::placeholder {
    color: #667367;
}

.brand-storefront .page-footer .form-control:focus {
    border-color: var(--brand-primary) !important;
}

.brand-storefront .page-footer .subscribe-button {
    color: #fff;
    background-color: var(--brand-primary);
}

.brand-storefront .page-footer .subscribe-button:hover {
    background-color: var(--brand-secondary);
}

.brand-storefront .page-footer .social-btn {
    color: var(--brand-primary) !important;
    background-color: #fff;
    border: 1px solid var(--brand-border);
}

.brand-storefront .page-footer .social-btn svg [fill="#fff"] {
    fill: currentColor;
}

.brand-storefront .page-footer .social-btn:is(:hover, :focus-visible) {
    color: #fff !important;
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.brand-panel {
    --title-color: #203F2B;
    --border-color: var(--brand-border);
}

.brand-panel :is(.navbar-vertical-content, .sidebar--search-form),
.brand-panel.navbar-vertical-aside-mini-mode .navbar-vertical-content > .navbar-nav > .navbar-vertical-aside-has-menu > .nav {
    background-color: var(--brand-secondary);
}

.brand-panel .navbar-vertical-content .nav-link {
    color: #EAF5E5;
}

.brand-panel .navbar-vertical :is(.active > .nav-link, .nav-link.active, .nav-link.show, .show > .nav-link, .nav-link:hover, .nav-link:focus-visible) {
    color: var(--brand-accent);
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--brand-accent);
}

.brand-panel .navbar-vertical :is(.active .nav-indicator-icon, .nav-link:hover .nav-indicator-icon, .show > .nav-link > .nav-indicator-icon) {
    color: var(--brand-accent);
}

.brand-panel .navbar-vertical-content .nav-subtitle {
    color: #CDE5D2;
}

.brand-panel .navbar-vertical-content::-webkit-scrollbar-track {
    background-color: var(--brand-secondary);
}

.brand-panel .navbar-vertical-content::-webkit-scrollbar-thumb {
    background-color: #7BA488;
}

.brand-panel :is(.side-logo, #header, .navbar-brand-wrapper) {
    border-color: var(--brand-border);
}

.brand-panel #header {
    border-bottom: 3px solid var(--brand-primary);
}

.brand-panel #header svg [fill="#073B74"] {
    fill: var(--brand-primary);
}

.brand-panel .btn-link,
.brand-panel .page-link,
.brand-panel .auth-wrapper-form a {
    color: var(--brand-primary);
}

.brand-panel .order-stats {
    background-color: var(--brand-light);
}

.brand-panel :is(.order-stats_pending, .order-stats_delivered, .order-stats_returned) .order-stats__title {
    color: var(--brand-primary);
}

.brand-panel .nav-tabs :is(.nav-link.active, .nav-item.show .nav-link) {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.brand-panel .nav-pills :is(.nav-link.active, .show > .nav-link) {
    color: #fff;
    background-color: var(--brand-primary);
}

.brand-panel :is(.language-warning-modal, .language-complete-modal) {
    --c1: var(--brand-primary);
}

.brand-panel .apex-legends div.before-bg-0::before {
    background-color: var(--brand-primary);
}

.brand-panel .apex-legends div.before-bg-1::before {
    background-color: var(--brand-accent);
}

.brand-panel .apex-legends div.before-bg-2::before {
    background-color: var(--brand-secondary);
}

.brand-auth .auth-wrapper-left {
    background: radial-gradient(circle at 15% 20%, #CFEABB, transparent 55%),
        linear-gradient(145deg, var(--brand-light), #F6F9F5) !important;
}

.brand-auth .auth-wrapper-right {
    background-color: #fff;
}

.brand-auth .auth-left-cont .title {
    color: var(--brand-secondary);
}