/*
 * Storefront brand touches + light / dark mode.
 * Header bar: the store's two colours as a gradient. Dark mode: site-theme.js marks light
 * surfaces and dark text once, these classes then turn them dark. Photos are never changed.
 */
.axil-mainmenu { background: linear-gradient(100deg, var(--primary-color) 0%, color-mix(in srgb, var(--primary-color) 55%, var(--secondary-color)) 55%, var(--secondary-color) 100%) !important; }
.header-brand img { max-height: 50px; width: auto !important; }
@media only screen and (max-width: 991px) { .header-brand a img { max-height: 34px !important; width: auto !important; } }

/* the switch next to the cart */
.site-theme-li { display: flex; align-items: center; list-style: none; }
.site-theme-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; padding: 0;
    border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer;
    transition: background .2s, transform .2s; margin-right: 10px; }
.site-theme-btn:hover { background: rgba(255, 255, 255, .28); transform: rotate(-12deg); }
.site-theme-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.site-theme-btn .st-moon { fill: currentColor; stroke: none; }
.site-theme-btn .st-sun { display: none; }
html[data-theme="dark"] .site-theme-btn .st-moon { display: none; }
html[data-theme="dark"] .site-theme-btn .st-sun { display: block; }
@media (max-width: 991px) { .site-theme-btn { width: 32px; height: 32px; margin-right: 4px; } .site-theme-btn svg { width: 16px; height: 16px; } }

/* logo for light vs dark backgrounds */
.brand-on-dark { display: none !important; }
html[data-theme="dark"] .brand-on-light { display: none !important; }
html[data-theme="dark"] .brand-on-dark { display: inline-block !important; }

/* ---------- dark mode ---------- */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"], html[data-theme="dark"] body { background: #0d0f1f !important; color: #e6e8f2; }
html[data-theme="dark"] .dm-bg { background-color: #161a31 !important; }
html[data-theme="dark"] .dm-bg2 { background-color: #1e2340 !important; }
html[data-theme="dark"] .dm-fg { color: #eef0f8 !important; }
html[data-theme="dark"] .dm-muted { color: #a3a9c2 !important; }
html[data-theme="dark"] .dm-border { border-color: #2b3156 !important; }
html[data-theme="dark"] .dm-shadow { box-shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 8px 24px -12px rgba(0, 0, 0, .6) !important; }
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #8d93ad !important; }
html[data-theme="dark"] hr { border-color: #2b3156 !important; opacity: 1; }
html[data-theme="dark"] .site-footer { background: #0a0c19 !important; }
html[data-theme="dark"] ::-webkit-scrollbar { background: #0d0f1f; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2b3156; border-radius: 8px; }
html.st-switching *, html.st-switching *::before, html.st-switching *::after { transition: background-color .25s, color .25s, border-color .25s !important; }