html[data-ss-color-mode="light"]{color-scheme:light;--ss-pref-bg:#f5f7fb;--ss-pref-surface:#fff;--ss-pref-soft:#f0f3f8;--ss-pref-text:#243247;--ss-pref-muted:#5d6b80;--ss-pref-border:#d5dce6}
html[data-ss-color-mode="dark"]{color-scheme:dark;--ss-pref-bg:#101722;--ss-pref-surface:#1b2635;--ss-pref-soft:#243246;--ss-pref-text:#e4ebf5;--ss-pref-muted:#b2bed0;--ss-pref-border:#3b4b61}
html[data-ss-color-mode] body{background-color:var(--ss-pref-bg)!important;color:var(--ss-pref-text)!important}
html[data-ss-color-mode] :is(.panel,.panel-body,.panel-heading,.well,.card,.modal-content,.modal-header,.modal-footer,.dropdown-menu,.navbar,.navbar-default,.sidebar,.sidebar-content,.app-sidebar,.app-header,.main-content,#main-page,.table-responsive,.list-group-item,.pagination>li>a,.pagination>li>span){background-color:var(--ss-pref-surface)!important;color:var(--ss-pref-text)!important;border-color:var(--ss-pref-border)!important}
html[data-ss-color-mode] :is(.table,.table>tbody>tr>td,.table>tbody>tr>th){background-color:var(--ss-pref-surface);color:var(--ss-pref-text);border-color:var(--ss-pref-border)!important}
html[data-ss-color-mode] :is(.table>thead>tr>th,.table-striped>tbody>tr:nth-of-type(odd),.table-hover>tbody>tr:hover){background-color:var(--ss-pref-soft)!important;color:var(--ss-pref-text)!important}
html[data-ss-color-mode] :is(.form-control,input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="color"]):not([type="range"]),select,textarea,.select2-container--default .select2-selection--single,.select2-dropdown,.select2-search__field){background-color:var(--ss-pref-surface)!important;color:var(--ss-pref-text)!important;border-color:var(--ss-pref-border)!important}
html[data-ss-color-mode] :is(select option,.dropdown-menu>li>a,.nav>li>a,.navbar-nav>li>a,.select2-results__option){color:var(--ss-pref-text);background-color:var(--ss-pref-surface)}
html[data-ss-color-mode] :is(input,textarea)::placeholder{color:var(--ss-pref-muted)!important;opacity:1}
html[data-ss-color-mode] :is(.help-block,.text-muted,.control-label,small.help-block){color:var(--ss-pref-muted)!important}
html[data-ss-color-mode] :is(.bottom-nav,.bottom-navigation,.mobile-nav,.mobile-menu,.footer-nav,.app-footer){background-color:var(--ss-pref-surface)!important;color:var(--ss-pref-text)!important;border-color:var(--ss-pref-border)!important}
#ss-appearance-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;margin:12px auto;border:1px solid var(--ss-pref-border,#d5dce6);border-radius:12px;background:var(--ss-pref-surface,#fff);color:var(--ss-pref-text,#243247);max-width:1120px}
#ss-appearance-controls [role="group"]{display:flex;gap:6px;flex-wrap:wrap}
#ss-appearance-controls button{font:inherit;min-height:42px;padding:8px 12px;border:1px solid var(--ss-pref-border,#d5dce6);border-radius:8px;background:var(--ss-pref-surface,#fff);color:var(--ss-pref-text,#243247);cursor:pointer}
#ss-appearance-controls button.ss-mode-selected{background:var(--ss-pref-soft,#edf2ff);border-color:currentColor;font-weight:700}
#ss-appearance-controls :is(button,select):focus-visible{outline:3px solid #6588ff;outline-offset:3px}
#ss-appearance-controls form{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0}
#ss-appearance-controls [data-ss-currency-result]{flex-basis:100%;line-height:1.5}
.ss-account-preferences{border-top:1px solid var(--ss-pref-border,#d5dce6);margin-top:24px;padding-top:20px}
.ss-account-preferences label{display:block;font-weight:600;margin-bottom:8px;color:var(--ss-pref-text,#243247)!important}
.ss-account-preferences select{display:block;width:100%;max-width:420px;margin:0 0 10px;min-height:42px}
.ss-account-preferences button[type="submit"]{width:auto;min-width:100px;min-height:42px;margin-top:4px}
.ss-account-preferences [data-ss-currency-result]{line-height:1.6;margin:8px 0;color:inherit;overflow-wrap:anywhere}
html[data-ss-color-mode] #ss-cur :is(.ss-cur-box,.ss-cur-q,.ss-cur-h,.ss-cur-body,.ss-cur-list){background-color:var(--ss-pref-surface)!important;color:var(--ss-pref-text)!important;border-color:var(--ss-pref-border)!important}
html[data-ss-color-mode] #ss-cur :is(input,.ss-cur-search,.ss-cur-option,.ss-cur-item,.ss-cur-row){background-color:var(--ss-pref-surface)!important;color:var(--ss-pref-text)!important;border-color:var(--ss-pref-border)!important}
html[data-ss-color-mode] #ss-cur .ss-cur-box :is(button,a){color:var(--ss-pref-text)}
/* Header links must follow their overridden surface, including inverse Bootstrap headers. */
html[data-ss-color-mode] .navbar :is(.navbar-brand,.navbar-brand strong,.navbar-brand span,.navbar-nav>li>a,.navbar-top-links>li>a){color:var(--ss-pref-text)!important}
html[data-ss-color-mode] .sidebar .sidebar-nav a{color:var(--ss-pref-text)!important}
html[data-ss-color-mode] .navbar-toggle{border-color:var(--ss-pref-border)!important;background-color:var(--ss-pref-surface)!important}
html[data-ss-color-mode] .navbar-toggle .icon-bar{background-color:var(--ss-pref-text)!important}
/* Scope the Bootstrap3 breakpoint repair to the exact authenticated classic header. */
@media(min-width:768px){html[data-ss-color-mode] .navbar.navbar-inverse.navbar-static-top:not(.navbar-collapsed-before) #navbar.collapse.navbar-collapse{display:block!important;height:auto!important;overflow:visible!important}}
html[data-ss-color-mode] .navbar.navbar-inverse.navbar-static-top.navbar-collapsed-before .navbar-toggle{display:block!important}
html[data-ss-color-mode] .navbar.navbar-inverse.navbar-static-top.navbar-collapsed-before .navbar-header{width:100%}
html[data-ss-color-mode] .navbar.navbar-inverse.navbar-static-top #navbar.collapse.navbar-collapsed:not(.in){display:none!important}
html[data-ss-color-mode] .navbar.navbar-inverse.navbar-static-top #navbar.collapse.navbar-collapsed.in{display:block!important;height:auto!important;overflow:visible!important}
html[data-ss-color-mode] .navbar.navbar-inverse.navbar-static-top #navbar.navbar-collapsed .navbar-nav{float:none!important;width:100%;margin:0}
html[data-ss-color-mode] .navbar.navbar-inverse.navbar-static-top #navbar.navbar-collapsed .navbar-nav>li{float:none;width:100%}
@media(max-width:767px){html[data-ss-color-mode] .navbar.navbar-inverse.navbar-static-top .navbar-toggle{display:block!important}html[data-ss-color-mode] .navbar.navbar-inverse.navbar-static-top #navbar.collapse.in{display:block!important}}
@media(max-width:600px){#ss-appearance-controls{margin:10px;gap:10px;padding:12px}#ss-appearance-controls form{width:100%}}


/* Legacy mass-order templates nest a fixed Bootstrap container inside a column.
   Keep that specific form layout fluid; do not clip horizontally overflowing content. */
html[data-ss-color-mode] .container-fluid > .row > .col-md-8:has(form[action="/massorder"]){width:100%;max-width:100%;float:none;clear:both;margin-inline:0}
html[data-ss-color-mode] .container-fluid > .row > .col-md-8:has(form[action="/massorder"]) > .container{width:100%;max-width:100%}