/* ============================================================
 *  STAXX Parts · V2 极简专业 CleanB2B · Design tokens + components
 *  Locked visual anchor for AllInOne integration (2026-08-20)
 * ============================================================ */

:root{
  /* surface */
  --bg:#F5F7FA;
  --surface:#FFFFFF;
  --nav:#FFFFFF;
  --line:#E3E8EF;
  /* ink */
  --ink:#16243B;
  --muted:#4A5A6F;
  /* accent */
  --accent:#185FA5;       /* primary blue */
  --accent-soft:#E6F1FB;
  --accent-dark:#11467B;
  /* status */
  --ok:#0F6E56;
  --warn:#854F0B;
  --danger:#A32D2D;
  --star:#E2A53A;
  /* shape */
  --radius:10px;
  --radius-lg:14px;
  /* layout */
  --content-max:1320px;   /* page max width (used by .wrap + .hero .inner) */
  --content-pad-x:2%;     /* horizontal breathing room (used by .wrap + .hero .inner + footer .wrap) */
  --content-pad-y:30px;   /* vertical padding inside .wrap */
  --topbar-h:60px;        /* top nav height */
  --topbar-pad-x:36px;    /* top nav horizontal padding */
  --footer-pad-y:26px;    /* footer vertical padding */
  /* motion */
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* The preference bootstrap runs before the first stylesheet so the next page
   paints in the saved language and theme without showing an intermediate
   blank shell. */
body{
  font-family:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
  line-height:1.6;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-weight:600;letter-spacing:-.01em;text-wrap:balance}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ─── top nav ──────────────────────────── */
.topbar{
  background:var(--nav);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:26px;
  padding:0 var(--topbar-pad-x);height:var(--topbar-h);
  position:sticky;top:0;z-index:1000;isolation:isolate;
}
/* right-side horizontal cluster: search + profile + lang + theme + cart */
.topbar-right{display:flex;flex-direction:row;align-items:center;gap:8px}
.topbar-right .topnav-search input{height:34px;font-size:13px;padding:0 10px;width:150px}
/* Language stays available in the header; the product theme switch is hidden
   so it cannot consume space or become a second visual control. */
.toggles{display:flex;align-items:center;gap:4px}
.toggles .lang,.toggles .theme{margin-left:0}
.topbar .theme{display:none !important}
.brand{font-weight:700;font-size:20px;letter-spacing:.5px;color:var(--accent);cursor:pointer;display:flex;align-items:center;gap:10px}
.brand img.logo{display:none;height:34px;width:auto;max-width:140px;object-fit:contain}
.brand .brand-text{display:flex;flex-direction:row;align-items:center;line-height:1;white-space:nowrap}
.brand .brand-text small{font-size:9px;font-weight:400;color:var(--muted);letter-spacing:1.5px;margin-top:2px}
.brand small{color:var(--muted);font-weight:400;font-size:10px;letter-spacing:2px;text-transform:uppercase;margin-left:8px}
/* The static page shell already contains the final logo before app.js loads.
   Keep the light variant visible until bootThemeLang() applies the cached
   theme; this prevents a blank logo slot during a slow script download. */
:root:not([data-theme]) .brand img.logo-light{display:inline-block}
nav{display:flex;gap:2px;margin-left:auto}
nav a{
  color:var(--muted);padding:8px 14px;font-size:13.5px;cursor:pointer;
  border-bottom:2px solid transparent;white-space:nowrap;
  transition:color .18s var(--ease-out),border-color .18s var(--ease-out);
}
nav a:hover,nav a.on{color:var(--accent);border-bottom-color:var(--accent)}
.cartbtn{
  margin-left:8px;background:var(--accent);color:#fff;
  padding:8px 16px;border-radius:8px;cursor:pointer;
  font-size:13px;display:flex;gap:8px;align-items:center;font-weight:600;
  white-space:nowrap;
}
.badge{background:#fff;color:var(--accent);border-radius:10px;padding:0 7px;font-size:12px;line-height:17px;font-weight:700}

/* user chip — combined profile-link + logout button (injected by renderNav) */
.user-chip{
  display:flex;align-items:center;gap:0;
  background:var(--surface);border:1px solid var(--line);
  border-radius:8px;padding:3px 4px 3px 0;height:36px;margin-left:4px;
  transition:border-color .15s;
}
.user-chip:hover{border-color:var(--accent)}
.user-chip .link{
  display:flex;align-items:center;gap:8px;
  padding:0 8px 0 6px;height:100%;border-radius:6px;
  color:inherit;text-decoration:none;
}
.user-chip .link:hover{background:var(--accent-soft)}
.user-chip .link.on{background:var(--accent-soft)}
.user-chip .admin-shortcut{
  flex:none;display:inline-flex;align-items:center;justify-content:center;gap:3px;
  height:26px;padding:0 7px;border-radius:6px;color:var(--accent);
  font-size:11px;font-weight:700;white-space:nowrap;
  transition:background .12s,color .12s;
}
.user-chip .admin-shortcut:hover,
.user-chip .admin-shortcut.on{background:var(--accent-soft);color:var(--accent-dark)}
.user-chip .admin-shortcut span:first-child{font-size:13px;line-height:1}
.user-chip .avt{
  flex:none;width:28px;height:28px;border-radius:50%;
  background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:700;
}
.user-chip .info{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.user-chip .nm{font-size:12.5px;font-weight:600;color:var(--ink);max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-chip .role{font-size:10px;color:var(--muted);font-weight:500;max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-chip .logout{
  flex:none;background:transparent;border:0;color:var(--muted);
  cursor:pointer;font-size:15px;width:26px;height:26px;border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s,color .12s;margin-right:3px;
  font-family:inherit;line-height:1;padding:0;
}
.user-chip .logout:hover{background:var(--danger);color:#fff}
/* Static header markup reserves the same width as the hydrated controls. */
.topbar-right.nav-shell{flex:0 0 491px;min-width:491px}
.topbar > nav{flex:0 0 465px}
@media(max-width:900px){
  .user-chip .info{display:none}
}

/* ─── layout ───────────────────────────── */
/* Global page width — vehicles.html is the reference standard.
   Tunable via --content-max / --content-pad-x in :root. */
.wrap{max-width:var(--content-max);margin:0 auto;padding:var(--content-pad-y) var(--content-pad-x)}
h2.sec{
  font-size:19px;margin:0 0 18px;
  display:flex;align-items:center;gap:10px;
}
h2.sec:before{content:"";width:4px;height:18px;background:var(--accent);border-radius:2px}

/* ─── hero ─────────────────────────────── */
.hero{background:var(--surface);border-bottom:1px solid var(--line)}
.hero .inner{max-width:var(--content-max);margin:0 auto;padding:56px var(--content-pad-x) 44px;text-align:center}
.hero h1{font-size:30px;letter-spacing:.3px}
.hero h1 span{color:var(--accent)}
.hero p{color:var(--muted);max-width:620px;margin:12px auto 24px}
.search{
  display:flex;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;overflow:hidden;max-width:540px;margin:0 auto;
  box-shadow:0 4px 14px rgba(22,36,59,.06);
}
.search input{flex:1;border:0;padding:13px 16px;font-size:14px;outline:none;background:transparent}
.search button{background:var(--accent);color:#fff;border:0;padding:0 26px;font-weight:600;cursor:pointer}
.hintrow{display:flex;justify-content:center;gap:32px;margin-top:20px;font-size:12.5px;color:var(--muted)}
.hintrow b{color:var(--accent)}

/* ─── pills (车型入口) ──────────────────── */
.pills{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:18px 0 6px;width:100%}
.pill{
  display:flex;flex-direction:column;align-items:stretch;gap:12px;
  background:var(--surface);border:1px solid var(--line);
  padding:0;border-radius:14px;cursor:pointer;overflow:hidden;
  transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out),transform .25s var(--ease-out);
}
.pill:hover{border-color:var(--accent);box-shadow:0 8px 24px rgba(24,95,165,.12);transform:translateY(-2px)}
.pill .av{width:100%;aspect-ratio:4/3;border-radius:0;background:transparent;overflow:hidden;display:flex;align-items:center;justify-content:center}
.pill .av img{width:80%;height:80%;object-fit:contain;transition:transform .35s var(--ease-out)}
.pill:hover .av img{transform:scale(1.06)}
.pill .ttl{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px}
.pill b{font-size:16px;font-weight:700;color:var(--ink)}
.pill .meta{color:var(--muted);font-size:12.5px}
@media(max-width:640px){.pills{grid-template-columns:1fr}}

/* ─── grid + card ──────────────────────── */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;min-width:0}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;min-width:0}
.grid5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;min-width:0}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;cursor:pointer;min-width:0;
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),border-color .2s var(--ease-out);
}
.card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 8px 20px rgba(22,36,59,.08)}
.card h3{font-size:14.5px;margin:10px 0 4px}
.card p{color:var(--muted);font-size:12.5px}
.thumb{
  background:var(--accent-soft);color:var(--accent);
  height:156px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-weight:600;letter-spacing:.5px;font-size:12.5px;
  overflow:hidden;
}
.thumb.alt{background:#F0F4F9;color:var(--ink)}
.thumb img{max-height:88%;max-width:88%;object-fit:contain;border-radius:4px;transition:transform .3s var(--ease-out)}
.card:hover .thumb img{transform:scale(1.05)}
/* ─── 配件图片原图查看（点击缩略图） ─── */
.img-zoom{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.88);
          display:none;align-items:center;justify-content:center;
          flex-direction:column}
.img-zoom.open{display:flex}
.img-zoom .zoom-img{max-width:96vw;max-height:92vh;width:auto;height:auto;
                    object-fit:contain;background:transparent;
                    border-radius:0;padding:0;box-shadow:none;
                    animation:zoomIn .15s var(--ease-out)}
@keyframes zoomIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.img-zoom .zoom-cap{position:fixed;left:24px;bottom:18px;color:#fff;
                    font-size:13px;font-family:Consolas,monospace;
                    background:rgba(0,0,0,.55);padding:5px 11px;border-radius:6px;
                    backdrop-filter:blur(4px)}
.img-zoom .zoom-close{position:fixed;top:18px;right:18px;width:36px;height:36px;
                      border-radius:50%;background:rgba(0,0,0,.5);
                      color:#fff;border:1px solid rgba(255,255,255,.25);
                      font-size:18px;cursor:pointer;
                      transition:background .15s var(--ease-out)}
.img-zoom .zoom-close:hover{background:rgba(255,255,255,.18)}

/* ─── part specific ────────────────────── */
.pn{font-family:Consolas,monospace;font-size:11.5px;color:var(--accent);font-weight:600}
.price{font-size:15px;font-weight:600;margin-top:6px}
.price small{font-size:11px;color:var(--muted);font-weight:400;margin-left:3px}
.star{color:var(--star);font-size:12px;font-weight:700;margin-left:4px}

/* ─── buttons ──────────────────────────── */
.btn{
  display:inline-block;background:var(--ink);color:#fff;border:0;
  padding:9px 16px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;
  transition:transform .15s var(--ease-out),background-color .2s var(--ease-out),box-shadow .2s var(--ease-out);
}
.btn.acc{background:var(--accent)}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.btn.wide{width:100%;text-align:center}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ─── inline tags ──────────────────────── */
.tag{
  display:inline-block;background:#FDF3E3;color:var(--warn);
  border:1px solid #EFD9B0;font-size:11px;padding:1px 8px;
  border-radius:4px;font-weight:600;
}
.tag.green{background:#E6F4EF;color:var(--ok);border-color:#B6DBC9}
.tag.blue{background:var(--accent-soft);color:var(--accent);border-color:#B7D3EC}

/* ─── crumb / sidebar / detail ─────────── */
.crumb{font-size:12.5px;color:var(--muted);margin-bottom:14px}
.crumb b{color:var(--ink)}
.sidebar{display:grid;grid-template-columns:228px 1fr;gap:22px;align-items:start}
.catlist{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:10px 0}
.catlist div{padding:9px 18px;font-size:13px;cursor:pointer;color:var(--muted)}
.catlist div.on,.catlist div:hover{color:var(--accent);background:var(--accent-soft);font-weight:600}
.detail{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.spec{width:100%;border-collapse:collapse;margin-top:12px;font-size:13px}
.spec td{border:1px solid var(--line);padding:8px 10px}
.spec td:first-child{background:var(--bg);font-weight:500;width:130px}
.qty{display:flex;align-items:center;gap:8px;margin:14px 0}
.qty button{
  width:32px;height:32px;border:1px solid var(--line);background:var(--surface);
  font-size:16px;cursor:pointer;border-radius:6px;
  transition:transform .12s var(--ease-out);
}
.qty button:active{transform:scale(.9)}
.qty b{min-width:40px;text-align:center}

/* ─── cartline / cartsum ────────────────── */
.cartline{
  display:grid;grid-template-columns:60px 1fr 130px 110px 30px;gap:14px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 14px;margin-bottom:10px;
  transition:border-color .2s var(--ease-out);
}
.cartline:hover{border-color:var(--accent)}
.cartline .thumb{height:52px;background:var(--accent-soft)}
.cartline .thumb img{max-height:42px}
.cartline .del{cursor:pointer;color:var(--danger);font-weight:700;text-align:center;font-size:16px;transition:transform .15s}
.cartline .del:hover{transform:scale(1.2)}
.cartsum{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;
  position:sticky;top:80px;
}
.cartsum .row{display:flex;justify-content:space-between;padding:6px 0;font-size:13.5px}
.cartsum .row.tot{border-top:1px solid var(--line);margin-top:6px;padding-top:12px;font-size:15px;font-weight:600}
.cartsum .mini{margin:6px 0 12px}
.cart-with-side{display:grid;grid-template-columns:1fr 300px;gap:22px;align-items:start}

/* cart switcher tabs */
.cart-tabs{
  display:flex;gap:8px;margin-bottom:18px;border-bottom:1px solid var(--line);
}
.cart-tabs a{
  padding:10px 18px;font-size:13.5px;color:var(--muted);cursor:pointer;
  border-bottom:2px solid transparent;font-weight:500;
}
.cart-tabs a:hover{color:var(--accent)}
.cart-tabs a.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.cart-tabs a .badge-count{
  background:var(--accent-soft);color:var(--accent);
  font-size:10.5px;padding:1px 7px;border-radius:10px;margin-left:5px;font-weight:700;
}
.cart-tabs a.on .badge-count{background:var(--accent);color:#fff}

/* top-bar search box */
.topnav-search{
  display:flex;align-items:center;
  background:var(--bg);border:1px solid var(--line);border-radius:8px;
  overflow:hidden;height:36px;
  transition:border-color .18s var(--ease-out),box-shadow .18s var(--ease-out);
}
.topnav-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(24,95,165,.1)}
.topnav-search input{
  border:0;background:transparent;padding:0 10px;font-size:13px;
  outline:none;color:var(--ink);width:150px;font-family:inherit;
}
.topnav-search button{
  background:transparent;border:0;color:var(--muted);cursor:pointer;
  padding:0 12px;font-size:14px;height:100%;
  transition:color .15s;
}
.topnav-search button:hover{color:var(--accent)}
.topnav-search-shell{position:relative;flex:none;min-width:0}
.topnav-search-suggestions{
  position:absolute;top:calc(100% + 8px);right:0;z-index:60;
  width:min(420px,calc(100vw - 24px));max-height:min(460px,60vh);
  overflow-y:auto;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:10px;
  box-shadow:0 16px 38px rgba(0,0,0,.22)
}
.topnav-search-suggestions[hidden]{display:none}
.topnav-search-suggestions-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 15px;border-bottom:1px solid var(--line);color:var(--muted);font-size:12px}
.topnav-search-option{display:block;padding:10px 15px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;outline:none}
.topnav-search-option:last-of-type{border-bottom:0}
.topnav-search-option:hover,.topnav-search-option.is-active,.topnav-search-option:focus-visible{background:var(--accent-soft)}
.topnav-search-option .part-no{display:block;font-size:13px;font-weight:800;color:var(--accent)}
.topnav-search-option .part-names{display:block;margin-top:3px;font-size:13px;line-height:1.4}
.topnav-search-option .part-other{display:block;margin-top:2px;color:var(--muted);font-size:11.5px;line-height:1.4}
.topnav-search-option .result-type{float:right;color:var(--muted);font-size:11px;font-weight:700}
.topnav-search-suggestions mark{background:#ffdf69;color:#111;padding:0 1px;border-radius:2px}
.topnav-search-empty{padding:16px;color:var(--muted);font-size:13px}
.topnav-search-all{display:block;padding:10px 15px;border-top:1px solid var(--line);color:var(--accent);font-size:12px;font-weight:700;text-decoration:none}
.topnav-search-all:hover{text-decoration:underline}

/* lang + theme switch in topbar — both as compact dropdowns */
.lang{position:relative;margin-left:4px}
.lang button{
  display:flex;align-items:center;gap:5px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  border-radius:8px;padding:0 10px;height:36px;cursor:pointer;font-size:12.5px;
  font-weight:600;letter-spacing:.3px;
  transition:background .15s,color .15s,border-color .15s;
  font-family:inherit;white-space:nowrap;
}
.lang button:hover{border-color:var(--accent)}
.lang button .flag{font-size:15px;line-height:1;flex:none}
.lang button .lbl{flex:none;white-space:nowrap}
.lang button .chev{font-size:9px;color:var(--muted);margin-left:2px;transition:transform .15s;flex:none}
.lang.open button .chev{transform:rotate(180deg)}
.lang-menu{
  position:absolute;top:42px;right:0;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:6px;min-width:140px;
  box-shadow:0 8px 24px rgba(22,36,59,.12);z-index:99;display:none;
}
.lang-menu.open{display:block}
.lang-menu .opt{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:8px 12px;border-radius:6px;cursor:pointer;color:var(--ink);
  transition:background .12s,color .12s;
}
.lang-menu .opt:hover{background:var(--accent-soft);color:var(--accent)}
.lang-menu .opt.on{font-weight:700;color:var(--accent);background:var(--accent-soft)}
.lang-menu .opt .lang-row{display:flex;align-items:center;gap:8px;font-size:13px}
.lang-menu .opt .lang-row .flag{font-size:16px;line-height:1}
.lang-menu .opt .lang-row .native{font-weight:700;letter-spacing:.3px}
.lang-menu .opt .desc{font-size:10.5px;color:var(--muted);font-weight:400;padding-left:24px}

/* 5-theme picker — vertical dropdown */
.theme{position:relative;margin-left:4px}
.theme button{
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  border-radius:8px;width:36px;height:36px;cursor:pointer;font-size:16px;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s,border-color .15s;
}
.theme button:hover{border-color:var(--accent)}
.theme-menu{
  position:absolute;top:42px;right:0;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:6px;min-width:180px;
  box-shadow:0 8px 24px rgba(22,36,59,.12);z-index:99;display:none;
}
.theme-menu.open{display:block}
.theme-menu .opt{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:8px 12px;border-radius:6px;cursor:pointer;color:var(--ink);
  transition:background .12s,color .12s;
}
.theme-menu .opt:hover{background:var(--accent-soft);color:var(--accent)}
.theme-menu .opt.on{font-weight:700;color:var(--accent);background:var(--accent-soft)}
.theme-menu .opt .swatch-row{display:flex;align-items:center;gap:8px;font-size:13px}
.theme-menu .opt .swatch{width:14px;height:14px;border-radius:50%;border:1px solid var(--line);flex:none}
.theme-menu .opt .desc{font-size:10.5px;color:var(--muted);font-weight:400;padding-left:22px}

/* ──────── 4 themes · black / yellow / gray / white ──────── */

/* 1. white — clean off-white + bright blue (回到之前的高亮) */
:root[data-theme="white"]{
  --bg:#F5F7FA;
  --surface:#FFFFFF;
  --nav:#FFFFFF;
  --line:#E3E8EF;
  --ink:#16243B;
  --muted:#4A5A6F;
  --accent:#185FA5;
  --accent-soft:#E6F1FB;
  --accent-dark:#11467B;
}

/* 2. gray — Primer 风 cool gray + charcoal accent (跟白主题的蓝拉开) */
:root[data-theme="gray"]{
  --bg:#E5E7EB;
  --surface:#F6F8FA;
  --nav:#F6F8FA;
  --line:#D0D7DE;
  --ink:#1F2328;
  --muted:#656D76;
  --accent:#1F2328;
  --accent-soft:#EAEEF2;
  --accent-dark:#0D1117;
}

/* 3. yellow — editorial cream + amber (杂志风) */
:root[data-theme="yellow"]{
  --bg:#FFFEF7;
  --surface:#FFFFFF;
  --nav:#FFFFFF;
  --line:#FDE68A;
  --ink:#451A03;
  --muted:#92400E;
  --accent:#D97706;
  --accent-soft:#FEF3C7;
  --accent-dark:#B45309;
}

/* 4. black — deep navy black + violet (不要太死) */
:root[data-theme="black"]{
  --bg:#0F1A2A;
  --surface:#16263D;
  --nav:#16263D;
  --line:#2A3A52;
  --ink:#E5ECF5;
  --muted:#8FA0B6;
  --accent-soft:#1B3454;
  --accent:#A78BFA;
  --accent-dark:#8B5CF6;
}

/* shared per-theme surface overrides (kept terse — most vars above do the work) */
:root[data-theme="black"] body,
:root[data-theme="yellow"] body{background:var(--bg);color:var(--ink)}
:root[data-theme="black"] .card,
:root[data-theme="black"] .cartline,
:root[data-theme="black"] .cartsum,
:root[data-theme="black"] .meta-card,
:root[data-theme="black"] .coupon,
:root[data-theme="yellow"] .card,
:root[data-theme="yellow"] .cartline,
:root[data-theme="yellow"] .cartsum,
:root[data-theme="yellow"] .meta-card,
:root[data-theme="yellow"] .coupon,
:root[data-theme="gray"] .card,
:root[data-theme="gray"] .cartline,
:root[data-theme="gray"] .cartsum,
:root[data-theme="gray"] .meta-card,
:root[data-theme="gray"] .coupon{background:var(--surface)}
:root[data-theme="black"] .coupon .code,
:root[data-theme="yellow"] .coupon .code{background:var(--bg)}
:root[data-theme="black"] footer{background:#0A1320;color:#8FA0B6}
:root[data-theme="gray"] footer{background:#0D1117;color:#8B949E}
:root[data-theme="yellow"] footer{background:#451A03;color:#FDE68A}
:root[data-theme="white"] footer{background:#16243B;color:#9fb0c4}
:root[data-theme="black"] .thumb,
:root[data-theme="yellow"] .thumb,
:root[data-theme="gray"] .thumb{background:var(--accent-soft)}

/* logo: light/dark variant chosen by theme */
:root[data-theme="black"] .brand img.logo-light,
:root[data-theme="gray"] .brand img.logo-dark,
:root[data-theme="yellow"] .brand img.logo-dark,
:root[data-theme="white"] .brand img.logo-dark{display:none !important}
:root[data-theme="black"] .brand img.logo-dark{display:inline-block !important}
:root[data-theme="white"] .brand img.logo-light,
:root[data-theme="gray"] .brand img.logo-light,
:root[data-theme="yellow"] .brand img.logo-light{display:inline-block !important}

/* ─── note / promise / footer ──────────── */
.note{
  background:var(--accent-soft);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;font-size:12.5px;color:var(--ink);margin-top:14px;
}
.note b{color:var(--accent)}
.promise{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:36px}
.promise .wrap{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;
  padding-top:26px;padding-bottom:26px;
}
.promise b{display:block;color:var(--accent);font-size:17px;margin-bottom:4px}
.promise span{font-size:12px;color:var(--muted)}
footer{background:var(--ink);color:#9fb0c4;padding:var(--footer-pad-y) 0;font-size:12px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:0 var(--content-pad-x)}
footer b{color:#fff}
.mini{font-size:12px;color:var(--muted)}

/* ─── chip filter ───────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chip{
  padding:6px 13px;border:1px solid var(--line);border-radius:20px;
  font-size:12px;cursor:pointer;background:var(--surface);color:var(--muted);
  transition:all .18s var(--ease-out);
}
.chip:hover{border-color:var(--accent);color:var(--ink)}
.chip.on{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}

/* ─── 配件标签（⭐常购 / 🏷️促销 / 🆕新提） ─── */
.part-tag{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;
          padding:1px 7px;border-radius:10px;font-weight:700;margin-left:6px;
          vertical-align:middle;white-space:nowrap;cursor:help}
.part-tag.freq{background:#FEF3C7;color:#92400E}              /* ⭐ 黄 — 常购 */
.part-tag.promo{background:#FEE2E2;color:#991B1B}             /* 🏷️ 红 — 促销 */
.part-tag.bundle{background:#E6F4EF;color:#0F6E56}            /* 📦 绿 — 套装 */
.part-tag.new{background:#DBEAFE;color:#1E40AF}              /* 🆕 蓝 — 新提 */

/* ─── 悬浮竖排三购物车（贯穿全栈） ─── */
.float-carts{position:fixed;top:calc(var(--topbar-h,60px) + 18px);right:var(--topbar-pad-x,36px);z-index:50;
             display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.f-cart{position:relative;width:48px;height:48px;border-radius:12px;
        background:var(--surface);border:1px solid var(--line);
        display:flex;align-items:center;justify-content:center;cursor:pointer;
        font-size:20px;box-shadow:0 2px 8px rgba(22,36,59,.08);
        transition:border-color .15s var(--ease-out),transform .15s var(--ease-out),box-shadow .15s var(--ease-out);
        padding:0;color:var(--ink)}
.f-cart:hover{border-color:var(--accent);transform:scale(1.05);
              box-shadow:0 4px 12px rgba(24,95,165,.18)}
.f-cart .n{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;
           padding:0 5px;background:var(--accent);color:#fff;border-radius:10px;
           font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;
           box-shadow:0 1px 3px rgba(0,0,0,.2)}
  .f-cart .ic{display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
  .f-cart .ic svg{width:26px;height:26px}
.f-cart.is-empty .n{background:var(--muted)}
.f-cart::after{content:attr(data-tip);position:absolute;right:calc(100% + 10px);
               top:50%;transform:translateY(-50%);background:var(--ink);color:#fff;
               padding:6px 11px;border-radius:7px;font-size:11.5px;font-weight:600;
               white-space:nowrap;opacity:0;pointer-events:none;
               transition:opacity .15s var(--ease-out),transform .15s var(--ease-out);
               box-shadow:0 2px 6px rgba(0,0,0,.15);letter-spacing:.2px}
.f-cart:hover::after{opacity:1;transform:translateY(-50%) translateX(-2px)}
@keyframes cartFlash{
  0%,100%{background:var(--surface);transform:scale(1);border-color:var(--line)}
  10%,30%,50%,70%,90%{background:var(--accent);transform:scale(1.14);border-color:var(--accent)}
  20%,40%,60%,80%{background:var(--surface);transform:scale(1);border-color:var(--line)}
}
.f-cart.flash{animation:cartFlash 10s var(--ease-out)}
.f-cart.flash .n{background:#fff;color:var(--accent)}
@media(max-width:640px){
  .float-carts{top:calc(var(--topbar-h,60px) + 14px);right:12px;gap:8px}
  .f-cart{width:44px;height:44px;font-size:18px}
}

/* ─── responsive ───────────────────────── */
@media (max-width:900px){
  .topbar{padding:0 16px;gap:14px;height:auto;flex-wrap:wrap;padding-top:10px;padding-bottom:10px;min-width:0;overflow-x:hidden}
  nav{order:2;width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden}
  .topbar > nav{flex:1 1 100%}
  .topbar-right{order:3;width:100%;min-width:0;justify-content:flex-end}
  .topbar-right[data-nav-shell],.topbar-right.nav-shell{flex:1 1 100%;width:100%;min-width:0}
  .topnav-search{order:3;flex:1;min-width:0;margin-left:0}
  .topnav-search-shell{order:3;flex:1;min-width:0}
  .topnav-search-shell .topnav-search{width:100%}
  .topnav-search input{width:100%;min-width:0;flex:1}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid3{grid-template-columns:1fr}
  .sidebar{grid-template-columns:1fr}
  .detail{grid-template-columns:1fr}
}
@media (max-width:640px){
  .grid4,.grid5{grid-template-columns:1fr}
  .card .pn,.card h3,.card .mini{overflow-wrap:anywhere}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}

/* ─── C0 floating widget (Custom RFQ) ──────────────────────── */
.c0-fab{
  position:fixed;bottom:24px;right:24px;z-index:900;
  display:flex;align-items:center;gap:8px;
  background:var(--accent);color:#fff;border-radius:30px;
  padding:11px 18px;font-size:13px;font-weight:600;
  box-shadow:0 6px 18px rgba(24,95,165,.32);
  cursor:pointer;transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.c0-fab:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(24,95,165,.42)}
.c0-fab .ico{font-size:16px}
.c0-fab .snip{
  background:rgba(255,255,255,.16);padding:2px 8px;border-radius:10px;
  font-size:11.5px;font-weight:500;max-width:160px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
}
.c0-fab .cnt{
  background:#fff;color:var(--accent);border-radius:10px;
  padding:1px 7px;font-size:11px;font-weight:700;margin-left:2px;
}
.c0-fab.has{background:var(--warn);box-shadow:0 6px 18px rgba(133,79,11,.32)}

.c0-modal{
  position:fixed;inset:0;z-index:1100;background:rgba(22,36,59,.55);
  display:none;align-items:center;justify-content:center;padding:20px;
}
.c0-modal.open{display:flex}
.c0-card{
  width:100%;max-width:520px;background:var(--surface);border-radius:14px;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 30px 80px rgba(22,36,59,.4);max-height:90vh;
}
.c0-head{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 22px;border-bottom:1px solid var(--line)}
.c0-head b{font-size:15px}
.c0-head .mini{margin-top:3px}
.c0-head .x{
  background:var(--bg);border:none;width:28px;height:28px;border-radius:50%;
  cursor:pointer;font-size:14px;color:var(--muted);
}
.c0-head .x:hover{background:var(--line);color:var(--ink)}
.c0-body{padding:18px 22px;overflow:auto;flex:1}
.c0-hint{margin-bottom:12px}
.c0-hint b{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;display:block;margin-bottom:8px}
.c0-hint .chips{gap:6px;margin-bottom:0}
.c0-hint .chip{font-size:11.5px;padding:5px 10px}
.c0-body textarea{
  width:100%;border:1px solid var(--line);background:var(--bg);color:var(--ink);
  padding:12px;border-radius:8px;font-size:13px;line-height:1.6;resize:vertical;
  font-family:inherit;min-height:120px;
}
.c0-body textarea:focus{outline:none;border-color:var(--accent);background:var(--surface)}
.c0-meta{margin-top:8px;font-size:11.5px;color:var(--muted);text-align:right}
.c0-foot{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 22px;border-top:1px solid var(--line);background:var(--bg);
  flex-wrap:wrap;
}
.c0-foot a{font-size:12.5px;color:var(--accent);font-weight:600}

/* ─── C0 modal v2: context strip, help "?", attachments, urgency/contact ─── */
.c0-context{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  background:var(--accent-soft);border:1px solid var(--accent);
  border-radius:8px;padding:8px 12px;margin-bottom:14px;
  font-size:12px;color:var(--ink);
}
.c0-context .lbl{font-weight:700;color:var(--accent);margin-right:4px;text-transform:uppercase;letter-spacing:.4px;font-size:11px}
.c0-context .pn{
  background:rgba(255,255,255,.5);
  padding:2px 8px;border-radius:12px;
  font-size:11.5px;font-weight:500;
}
:root[data-theme="black"] .c0-context .pn{background:rgba(255,255,255,.08)}
.c0-context .pn b{color:var(--accent);font-weight:700;margin-left:2px}

/* textarea + ? help button */
.c0-text-wrap{position:relative}
.c0-help-btn{
  position:absolute;left:8px;top:8px;
  width:24px;height:24px;border-radius:50%;
  background:var(--accent);color:#fff;font-weight:700;font-size:13px;
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(24,95,165,.32);
  z-index:2;transition:transform .15s var(--ease-out);
}
.c0-help-btn:hover{transform:scale(1.1)}
.c0-body textarea{padding-left:40px !important}

/* help popover (under textarea) */
.c0-help-pop{
  background:var(--bg);border:1px solid var(--accent);
  border-radius:10px;padding:14px 16px;margin-top:8px;
  box-shadow:0 4px 12px rgba(22,36,59,.08);
}
.c0-help-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.c0-help-head b{color:var(--accent);font-size:13.5px}
.c0-help-head .x{background:var(--line);border:none;width:22px;height:22px;border-radius:50%;cursor:pointer;font-size:11px;color:var(--ink)}
.c0-help-intro{font-size:12px;color:var(--muted);margin-bottom:10px;line-height:1.55}
.c0-help-list{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.c0-help-item{display:flex;gap:10px;font-size:12px;line-height:1.5}
.c0-help-item .k{
  flex:none;width:84px;color:var(--accent);font-weight:600;
}
.c0-help-item .v{flex:1;color:var(--ink)}
.c0-help-outro{
  font-size:11.5px;color:var(--ok);font-weight:600;
  padding-top:8px;border-top:1px dashed var(--line);
}

/* attachments */
.c0-attach{margin-top:14px}
.c0-attach-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.c0-attach-head b{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.c0-attach-head .mini{font-size:11px;color:var(--muted)}
.c0-drop{
  border:2px dashed var(--line);border-radius:10px;
  padding:18px;text-align:center;cursor:pointer;
  font-size:12.5px;color:var(--muted);
  background:var(--bg);
  transition:border-color .2s, background .2s, color .2s;
}
.c0-drop:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.c0-drop.drag{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.c0-attach-list{display:grid;grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));gap:8px;margin-top:10px}
.c0-att-chip{
  display:flex;align-items:center;gap:8px;
  background:var(--bg);border:1px solid var(--line);
  border-radius:8px;padding:6px 8px;position:relative;
  min-width:0;
}
.c0-att-thumb{
  flex:none;width:42px;height:42px;border-radius:6px;
  background:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.c0-att-thumb img{width:100%;height:100%;object-fit:cover}
.c0-att-thumb .pdf-ico{font-size:22px;color:var(--accent)}
.c0-att-meta{min-width:0;flex:1}
.c0-att-meta .nm{
  font-size:11px;color:var(--ink);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:100px;
}
.c0-att-meta .sz{font-size:10px;color:var(--muted);margin-top:1px}
.c0-att-chip .x{
  flex:none;background:none;border:none;color:var(--muted);
  cursor:pointer;font-size:11px;width:18px;height:18px;
  border-radius:50%;
}
.c0-att-chip .x:hover{background:var(--line);color:var(--ink)}

/* optional fields row (urgency + contact) */
.c0-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.c0-row2 label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:4px;font-weight:600}
.c0-row2 select,
.c0-row2 input{
  width:100%;border:1px solid var(--line);background:var(--bg);color:var(--ink);
  padding:8px 10px;border-radius:6px;font-size:12.5px;
  font-family:inherit;
}
.c0-row2 select:focus,
.c0-row2 input:focus{outline:none;border-color:var(--accent)}

/* meta line (chars + attach count) */
.c0-meta{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:11.5px;color:var(--muted)}

/* success toast */
.c0-toast{
  position:fixed;bottom:88px;right:24px;z-index:1300;
  background:var(--ok);color:#fff;
  padding:10px 18px;border-radius:24px;
  font-size:13px;font-weight:600;
  box-shadow:0 8px 22px rgba(20,114,82,.36);
  opacity:0;transform:translateY(8px);
  transition:opacity .2s, transform .2s;
  pointer-events:none;
}
.c0-toast.show{opacity:1;transform:translateY(0)}

/* ─── C0 share card (post-submit view) ──────────────────────────── */
.c0-share-body{padding:22px 22px 18px;display:flex;flex-direction:column;gap:14px}
.c0-share-id{
  display:flex;align-items:center;gap:10px;
  background:var(--accent-soft);border:1px solid var(--accent);
  border-radius:8px;padding:10px 14px;
}
.c0-share-id .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--accent);font-weight:700}
.c0-share-id .id{font-family:Consolas,monospace;font-size:13.5px;font-weight:700;color:var(--ink)}
.c0-share-hint{font-size:12.5px;color:var(--muted);line-height:1.6;margin:0}
.c0-share-mail{
  display:block;text-align:center;background:var(--accent);color:#fff;
  padding:12px 18px;border-radius:8px;
  font-size:13.5px;font-weight:600;text-decoration:none;
  transition:transform .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.c0-share-mail:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(24,95,165,.32);color:#fff}
.c0-share-link-row{display:flex;gap:6px;align-items:stretch}
.c0-share-link-row input{
  flex:1;border:1px solid var(--line);background:var(--bg);color:var(--ink);
  padding:8px 10px;border-radius:6px;font-size:11.5px;
  font-family:Consolas,monospace;min-width:0;
}
.c0-share-link-row input:focus{outline:none;border-color:var(--accent)}
.c0-share-link-row .btn{padding:8px 14px;font-size:12px;flex:none}
.c0-share-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-top:6px;border-top:1px dashed var(--line)}
.c0-share-foot .btn{padding:8px 14px;font-size:12.5px}

@media(max-width:560px){
  .c0-row2{grid-template-columns:1fr}
  .c0-help-item .k{width:72px}
  .c0-att-meta .nm{max-width:80px}
  .c0-share-link-row{flex-direction:column}
  .c0-share-foot{flex-direction:column-reverse;align-items:stretch}
  .c0-share-foot .btn{width:100%}
}

/* explosion-detail compact bottom action bar (live styles) — see .bulk-bar block below */

/* ─── explosion-detail topbar action cluster (kept for any legacy refs) ─── */
.c0-topbar-actions{
  display:inline-flex;align-items:center;gap:6px;
  margin-right:6px;
}
.c0-bulk-btn,.c0-fig-btn{
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  padding:7px 12px;border-radius:8px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:600;font-family:inherit;
  transition:all .15s var(--ease-out);
}
.c0-bulk-btn .ico,.c0-fig-btn .ico{font-size:14px}
.c0-bulk-btn .n,.c0-fig-btn .n{
  background:var(--accent);color:#fff;border-radius:10px;
  padding:1px 7px;font-size:11px;font-weight:700;line-height:1.2;
  min-width:18px;text-align:center;
}
.c0-bulk-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.c0-bulk-btn.has{background:var(--accent);color:#fff;border-color:var(--accent)}
.c0-bulk-btn.has .n{background:#fff;color:var(--accent)}
.c0-bulk-btn:disabled{opacity:.5;cursor:not-allowed}
.c0-fig-btn:hover{border-color:#F59E0B;color:#F59E0B;background:#FFFBEB}
:root[data-theme="black"] .c0-fig-btn:hover{background:rgba(252,211,77,.12);color:#FCD34D;border-color:#FCD34D}
.c0-cart-sel{
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  padding:6px 8px;border-radius:6px;cursor:pointer;
  font-size:11.5px;font-weight:500;font-family:inherit;
  outline:none;cursor:pointer;
}
.c0-cart-sel:hover{border-color:var(--accent)}
.c0-cart-sel:focus{border-color:var(--accent)}

/* compact mode on narrow screens */
@media(max-width:780px){
  .c0-topbar-actions .lbl{display:none}
  .c0-bulk-btn,.c0-fig-btn{padding:7px 10px}
  .c0-cart-sel{display:none}  /* fall back to default cart on small screens */
}

/* ─── explosion-detail compact bottom action bar (replaces sidebar design) ─── */
/* the page's own <style> block sets position:fixed; this block styles the inner contents */
.bulk-bar .bulk-bar-inner{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;max-width:1100px;
  font-size:13px;color:var(--ink);
  gap:16px;
}
.bulk-bar .bulk-bar-left,
.bulk-bar .bulk-bar-right{display:flex;align-items:center;gap:10px}
.bulk-bar .sel{font-size:13px;color:var(--muted);font-weight:500;min-width:64px}
.bulk-bar .sel b{color:var(--accent);font-size:15px;font-weight:700;margin:0 2px}
.bulk-bar .bulk-clear{font-size:12px;color:var(--muted);cursor:pointer;padding:4px 8px;border-radius:6px;transition:color .15s,background .15s}
.bulk-bar .bulk-clear:hover{color:var(--danger);background:var(--bg)}
.bulk-bar .bulk-sep{width:1px;height:20px;background:var(--line);margin:0 2px}

/* override topbar-targeted c0-bulk-btn / c0-fig-btn:
   transparent backgrounds (don't block content underneath) + fit in bottom bar */
.bulk-bar .c0-bulk-btn,
.bulk-bar .c0-fig-btn{
  padding:7px 12px;font-size:12.5px;border-radius:8px;
  background:transparent;border:1px solid transparent;color:var(--ink);
  backdrop-filter:blur(6px);
}
.bulk-bar .c0-bulk-btn:hover:not(:disabled){
  background:rgba(24,95,165,.08);border-color:var(--accent);color:var(--accent);
}
.bulk-bar .c0-bulk-btn.has{background:rgba(24,95,165,.12);border-color:var(--accent);color:var(--accent)}
.bulk-bar .c0-bulk-btn.has .n{background:var(--accent);color:#fff}
.bulk-bar .c0-bulk-btn .ico,
.bulk-bar .c0-fig-btn .ico{font-size:14px}
.bulk-bar .c0-bulk-btn:hover:not(:disabled){transform:none}
.bulk-bar .c0-fig-btn:hover{background:rgba(245,158,11,.08);border-color:#F59E0B;color:#F59E0B}
:root[data-theme="black"] .bulk-bar .c0-fig-btn:hover{background:rgba(252,211,77,.12);color:#FCD34D;border-color:#FCD34D}
:root[data-theme="black"] .bulk-bar .c0-bulk-btn:hover:not(:disabled),
:root[data-theme="black"] .bulk-bar .c0-bulk-btn.has{background:rgba(91,168,230,.14);color:#5BA8E6;border-color:#5BA8E6}
:root[data-theme="black"] .bulk-bar .c0-bulk-btn.has .n{background:#5BA8E6;color:#16263D}

.bulk-bar .c0-cart-sel{padding:6px 8px;font-size:12px;border-radius:6px}

/* on narrow screens hide labels + counter to save space */
@media(max-width:780px){
  .bulk-bar .lbl{display:none}
  .bulk-bar .bulk-bar-inner{gap:8px}
  .bulk-bar .sel{display:none}
  .bulk-bar .bulk-clear{display:none}
}
.bulk-bar .sel{font-size:13px;font-weight:600;color:var(--ink)}
.bulk-bar .sel b{color:var(--accent);font-size:18px}
.bulk-bar .acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bulk-bar .warn{
  background:#FEF3C7;border:1px solid #FDE68A;color:#854F0B;
  padding:8px 12px;border-radius:8px;font-size:12px;
  display:flex;gap:8px;align-items:center;width:100%;margin-bottom:6px;
}
:root[data-theme="black"] .bulk-bar .warn{background:rgba(254,243,199,.15);color:#FCD34D}
.bulk-bar .warn b{font-weight:700}
.bulk-bar .warn ul{margin:4px 0 0 18px;list-style:disc}
.bulk-bar .warn li{font-size:11.5px;line-height:1.5}

/* pos-table checkbox column */
.pos-table td.check-cell{width:44px;text-align:center;vertical-align:middle}
.pos-table th.check-cell{width:44px;text-align:center}
.pos-table .row-chk{
  width:18px;height:18px;cursor:pointer;accent-color:var(--accent);
}
.pos-table .row-add{
  background:none;border:1px solid var(--line);border-radius:6px;padding:5px 9px;
  font-size:13px;cursor:pointer;color:var(--muted);
  transition:all .15s var(--ease-out);
}
.pos-table .row-add:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
/* per-row action group — 🛒 + 📩 */
.pos-table .row-acts{display:inline-flex;gap:4px;align-items:center}
.pos-table .row-ask{
  background:none;border:1px solid var(--line);border-radius:6px;padding:5px 9px;
  font-size:13px;cursor:pointer;color:var(--muted);
  transition:all .15s var(--ease-out);
}
.pos-table .row-ask:hover{background:#F59E0B;color:#fff;border-color:#F59E0B;transform:translateY(-1px)}
:root[data-theme="black"] .pos-table .row-ask:hover{background:var(--warn);color:#1F1300;border-color:var(--warn)}
/* widen the action column to fit two buttons */
.pos-table th:last-child, .pos-table td:last-child{width:96px;min-width:96px}
.pos-table tr.selected td{background:var(--accent-soft)}
.pos-table tr{transition:background .15s var(--ease-out)}

/* spec inline (merged into name-cn line) */
.pos-table .spec-inline{
  display:inline-block;margin-left:6px;
  font-size:11px;color:var(--muted);font-weight:400;
  padding:1px 6px;background:var(--bg);border-radius:4px;
  vertical-align:middle;
}

/* qty stepper — minus / number input / plus */
.qty-stepper{
  display:inline-flex;align-items:stretch;
  border:1px solid var(--line);border-radius:6px;overflow:hidden;
  background:var(--surface);height:30px;
  transition:border-color .15s var(--ease-out);
}
.qty-stepper:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px rgba(24,95,165,.12)}
.qty-step{
  background:var(--bg);border:0;color:var(--muted);
  width:26px;cursor:pointer;font-size:14px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
  user-select:none;transition:background .12s,color .12s;
}
.qty-step:hover{background:var(--accent);color:#fff}
.qty-step:active{transform:scale(.92)}
.qty-input{
  border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);
  width:48px;text-align:center;font-size:13px;font-weight:600;
  color:var(--ink);font-family:inherit;outline:none;background:var(--surface);
  -moz-appearance:textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pos-table tr.selected .qty-stepper{border-color:var(--accent)}

/* position group header (within pos-table) */
.pos-table tr.pos-group-head td{
  background:linear-gradient(90deg,#FFFBEB,#FEF3C7);
  border-top:2px solid #FDE68A;padding:10px 14px;
  font-size:12.5px;color:#854F0B;font-weight:600;
}
:root[data-theme="black"] .pos-table tr.pos-group-head td{background:rgba(254,243,199,.12);color:#FCD34D;border-top-color:rgba(252,211,77,.3)}
.pos-table tr.pos-group-head .pn-num-big{
  display:inline-block;background:var(--accent);color:#fff;
  font-family:Consolas,monospace;font-weight:700;font-size:13px;
  padding:2px 9px;border-radius:6px;margin-right:10px;
}
.pos-table tr.pos-group-head .n-cands{
  background:rgba(133,79,11,.15);color:inherit;
  padding:1px 8px;border-radius:10px;font-size:11px;font-weight:700;margin-left:8px;
}
:root[data-theme="black"] .pos-table tr.pos-group-head .n-cands{background:rgba(252,211,77,.18)}
.pos-table tr.pos-group-head .c0-from-pos{
  float:right;background:#fff;color:var(--accent);
  border:1px solid var(--accent);border-radius:16px;
  padding:4px 12px;font-size:11.5px;font-weight:600;
  cursor:pointer;display:inline-flex;align-items:center;gap:4px;
  transition:all .18s var(--ease-out);
}
.pos-table tr.pos-group-head .c0-from-pos:hover{
  background:var(--accent);color:#fff;transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(24,95,165,.25);
}
:root[data-theme="black"] .pos-table tr.pos-group-head .c0-from-pos{background:var(--surface);color:var(--accent);border-color:var(--accent)}
:root[data-theme="black"] .pos-table tr.pos-group-head .c0-from-pos:hover{background:var(--accent);color:#fff}
.pos-table tr.dup-warn td{box-shadow:none}
.pos-table tr.dup-warn .pn-num::after{
  content:"⚠";color:var(--warn);margin-left:4px;font-size:11px;
}
/* ─── 🎯 智能批量推荐 modal (Phase 2.5) ─── */
.rec-modal{position:fixed;inset:0;z-index:300;background:rgba(15,23,42,.45);
           display:flex;align-items:flex-start;justify-content:center;
           padding:48px 16px;animation:none}
.rec-modal.open{display:flex}
.rec-card{background:var(--surface);border-radius:14px;
         box-shadow:0 20px 60px rgba(15,23,42,.25);width:min(720px,96vw);
         max-height:88vh;display:flex;flex-direction:column;overflow:hidden;
         animation:none}
.rec-head{display:flex;justify-content:space-between;align-items:flex-start;
          padding:20px 24px 14px;border-bottom:1px solid var(--line)}
.rec-eyebrow{font-size:11.5px;font-weight:700;color:var(--accent);
             text-transform:uppercase;letter-spacing:.8px;margin-bottom:3px}
.rec-head h2{font-size:20px;font-weight:700;margin:0;color:var(--ink)}
.rec-close{background:transparent;border:none;font-size:18px;color:var(--muted);
           cursor:pointer;padding:4px 8px;border-radius:6px;line-height:1}
.rec-close:hover{background:var(--bg);color:var(--ink)}
.rec-toolbar{display:flex;gap:24px;flex-wrap:wrap;padding:16px 24px;
             background:var(--bg);border-bottom:1px solid var(--line)}
.rec-field label{display:block;font-size:11.5px;font-weight:700;
                 color:var(--muted);text-transform:uppercase;letter-spacing:.5px;
                 margin-bottom:6px}
.rec-tier{display:flex;gap:0;background:var(--surface);
          border:1px solid var(--line);border-radius:10px;overflow:hidden}
.rec-tier-btn{background:transparent;border:none;padding:7px 14px;
               font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;
               border-right:1px solid var(--line);transition:all .15s var(--ease-out)}
.rec-tier-btn:last-child{border-right:none}
.rec-tier-btn:hover{color:var(--ink);background:var(--accent-soft)}
.rec-tier-btn.on{background:var(--accent);color:#fff}
.rec-hint{font-size:10.5px;color:var(--muted);margin-top:4px}
.rec-cart-radios{display:flex;gap:8px;flex-wrap:wrap}
.rec-cart-radio{display:inline-flex;align-items:center;gap:5px;
                padding:6px 10px;background:var(--surface);border:1px solid var(--line);
                border-radius:8px;font-size:12.5px;cursor:pointer}
.rec-cart-radio input{accent-color:var(--accent)}
.rec-cart-radio:hover{border-color:var(--accent)}
.rec-body{flex:1;overflow-y:auto;padding:16px 24px}
.rec-fig-list{display:flex;flex-direction:column;gap:8px}
.rec-fig{background:var(--surface);border:1px solid var(--line);
         border-radius:10px;overflow:hidden}
.rec-fig>summary{display:flex;align-items:center;gap:10px;
                 padding:10px 14px;cursor:pointer;font-size:13px;
                 font-weight:600;color:var(--ink);list-style:none;
                 background:var(--bg)}
.rec-fig>summary::-webkit-details-marker{display:none}
.rec-fig-check{display:inline-flex;align-items:center}
.rec-fig-check input{accent-color:var(--accent);cursor:pointer}
.rec-fig-id{font-family:Consolas,monospace;color:var(--accent);font-size:13px;font-weight:700}
.rec-fig-name{color:var(--muted);font-weight:500;flex:1;font-size:12px}
.rec-fig-n{font-size:11px;color:var(--muted);background:var(--surface);
           border:1px solid var(--line);padding:1px 8px;border-radius:10px}
.rec-part-list{list-style:none;padding:6px 14px 10px;margin:0;
               display:flex;flex-direction:column;gap:2px}
.rec-part{display:grid;grid-template-columns:18px 88px 1fr 60px 70px;
          gap:10px;align-items:center;padding:6px 6px;border-radius:6px;
          font-size:12.5px}
.rec-part:hover{background:var(--bg)}
.rec-part-check input{accent-color:var(--accent);cursor:pointer}
.rec-part-pn{font-family:Consolas,monospace;color:var(--accent);font-weight:600;
             font-size:12px}
.rec-part-name{color:var(--ink);white-space:nowrap;overflow:hidden;
               text-overflow:ellipsis}
.rec-part-qty{color:var(--muted);font-size:11.5px;text-align:right}
.rec-part-qty b{color:var(--ink);font-weight:600}
.rec-part-price{color:var(--ink);font-weight:600;text-align:right;
                font-variant-numeric:tabular-nums}
.rec-empty{padding:48px 24px;text-align:center;color:var(--muted)}
.rec-foot{display:flex;justify-content:space-between;align-items:center;
          padding:14px 24px;border-top:1px solid var(--line);background:var(--bg);
          gap:14px;flex-wrap:wrap}
.rec-summary{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--muted)}
.rec-selectall{display:inline-flex;align-items:center;gap:5px;cursor:pointer;
               font-weight:600;color:var(--ink)}
.rec-selectall input{accent-color:var(--accent)}
.rec-summary b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.rec-actions{display:flex;gap:8px}

/* ============================================================
 *  STAXX Brand Refresh - PDF reference theme
 *  Scoped to data-theme="brand" so the existing themes remain available.
 * ============================================================ */
:root[data-theme="brand"]{
  --bg:#F2F2F2;
  --surface:#FFFFFF;
  --surface2:#F8F8F8;
  --nav:#0F0F0F;
  --line:#D8D8D8;
  --ink:#0F0F0F;
  --muted:#6B6B6B;
  --accent:#FFCC29;
  --accent-soft:#FFF2B8;
  --accent-dark:#1B1B1B;
  --ok:#216E4E;
  --warn:#8A5A12;
  --danger:#B42318;
  --radius:6px;
  --radius-lg:8px;
  --content-max:1200px;
  --content-pad-x:0px;
  --content-pad-y:42px;
  --topbar-h:100px;
  --topbar-pad-x:clamp(18px,5vw,72px);
  --footer-pad-y:34px;
}

:root[data-theme="brand"] body{
  background:var(--bg);
  color:var(--ink);
  /* Keep Latin and CJK glyphs on a compatible, readable baseline.  The
     condensed display stack made the hero copy look vertically stretched. */
  font-family:"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
}
:root[data-theme="brand"] button,
:root[data-theme="brand"] input,
:root[data-theme="brand"] textarea,
:root[data-theme="brand"] select{
  font-family:inherit;
}
:root[data-theme="brand"] a{color:inherit}
:root[data-theme="brand"] .topbar{
  display:grid;
  grid-template-columns:minmax(190px,1fr) auto;
  grid-template-rows:54px 46px;
  height:var(--topbar-h);
  padding:0 var(--topbar-pad-x);
  gap:0;
  background:var(--nav);
  border:0;
  position:sticky;
  top:0;
  z-index:1000;
  isolation:isolate;
}
:root[data-theme="brand"] .brand{
  grid-column:1;
  grid-row:1;
  align-self:center;
  gap:12px;
  color:#fff;
  font-family:"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  letter-spacing:.4px;
}
:root[data-theme="brand"] .brand img.logo-light{display:none !important}
:root[data-theme="brand"] .brand img.logo-dark{display:inline-block !important;height:34px;width:auto}
:root[data-theme="brand"] .brand .brand-text{color:#fff}
:root[data-theme="brand"] .brand .brand-text b{font-size:17px;letter-spacing:.7px}
:root[data-theme="brand"] .topbar-right,
:root[data-theme="brand"] .topbar-right.nav-shell{
  grid-column:2;
  grid-row:1;
  align-self:center;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  width:auto;
  min-width:0;
  flex:0 1 auto;
  color:#fff;
}
:root[data-theme="brand"] .topbar > nav{
  grid-column:1 / -1;
  grid-row:2;
  width:auto;
  margin:0 calc(-1 * var(--topbar-pad-x));
  padding:0 var(--topbar-pad-x);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  background:var(--accent);
  overflow:hidden;
  flex:0 0 auto;
}
:root[data-theme="brand"] nav a{
  color:#0F0F0F;
  padding:11px 27px 9px;
  min-height:46px;
  border:0;
  border-bottom:3px solid transparent;
  font-size:13px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease;
}
:root[data-theme="brand"] nav a:hover,
:root[data-theme="brand"] nav a.on{
  color:#0F0F0F;
  background:rgba(255,255,255,.28);
  border-bottom-color:#0F0F0F;
}
:root[data-theme="brand"] .topnav-search{
  height:34px;
  background:transparent;
  border:1px solid #5A5A5A;
  border-radius:4px;
}
:root[data-theme="brand"] .topnav-search:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(255,204,41,.18);
}
:root[data-theme="brand"] .topnav-search input{
  width:166px;
  color:#fff;
  background:transparent;
}
:root[data-theme="brand"] .topnav-search input::placeholder{color:#BDBDBD}
:root[data-theme="brand"] .topnav-search button{color:var(--accent)}
:root[data-theme="brand"] .topnav-search button:hover{color:#fff}
:root[data-theme="brand"] .lang button,
:root[data-theme="brand"] .theme button{
  color:#fff;
  background:#0F0F0F;
  border-color:#5A5A5A;
  border-radius:4px;
}
:root[data-theme="brand"] .lang button:hover,
:root[data-theme="brand"] .theme button:hover{border-color:var(--accent);background:#202020}
:root[data-theme="brand"] .user-chip{
  height:34px;
  margin-left:3px;
  border-color:#5A5A5A;
  border-radius:4px;
  background:#0F0F0F;
}
:root[data-theme="brand"] .user-chip .link:hover,
:root[data-theme="brand"] .user-chip .link.on{background:#242424}
:root[data-theme="brand"] .user-chip .avt{background:var(--accent);color:#0F0F0F}
:root[data-theme="brand"] .user-chip .nm{color:#fff}
:root[data-theme="brand"] .user-chip .role,
:root[data-theme="brand"] .user-chip .logout{color:#BDBDBD}
:root[data-theme="brand"] .user-chip .logout:hover{background:var(--accent);color:#0F0F0F}
:root[data-theme="brand"] .lang-menu,
:root[data-theme="brand"] .theme-menu{
  top:40px;
  background:#171717;
  border-color:#454545;
  box-shadow:0 12px 28px rgba(0,0,0,.28);
}
:root[data-theme="brand"] .lang-menu .opt,
:root[data-theme="brand"] .theme-menu .opt{color:#fff}
:root[data-theme="brand"] .lang-menu .opt:hover,
:root[data-theme="brand"] .theme-menu .opt:hover,
:root[data-theme="brand"] .lang-menu .opt.on,
:root[data-theme="brand"] .theme-menu .opt.on{background:#2A2A2A;color:var(--accent)}
:root[data-theme="brand"] .lang-menu .opt .desc,
:root[data-theme="brand"] .theme-menu .opt .desc{color:#A7A7A7}
:root[data-theme="brand"] .float-carts{
  top:auto;
  bottom:24px;
  right:22px;
  gap:8px;
  opacity:.94;
}
:root[data-theme="brand"] .f-cart{
  width:44px;
  height:44px;
  border-radius:6px;
  border-color:#D1D1D1;
  box-shadow:0 3px 10px rgba(15,15,15,.12);
}
:root[data-theme="brand"] .f-cart:hover{border-color:var(--accent);box-shadow:0 5px 14px rgba(15,15,15,.18)}
:root[data-theme="brand"] .f-cart .n{background:var(--accent);color:#0F0F0F}
:root[data-theme="brand"] .f-cart.is-empty .n{background:#515151;color:#fff}
:root[data-theme="brand"] .f-cart::after{background:#0F0F0F}

:root[data-theme="brand"] body.home-page .hero{
  min-height:520px;
  position:relative;
  overflow:hidden;
  color:#fff;
  border:0;
  background-color:#151515;
  background-image:linear-gradient(90deg,rgba(15,15,15,.82) 0%,rgba(15,15,15,.56) 42%,rgba(15,15,15,.18) 100%),var(--brand-hero-image,url("../../assets/images/brands/STAXX/staxx-warehouse-hero.png"));
  background-position:center;
  background-size:cover;
}
:root[data-theme="brand"] body.home-page .hero .inner{
  position:relative;
  z-index:1;
  max-width:none;
  width:100%;
  min-height:520px;
  /* Keep the copy on the image's dark negative space while preserving the
     left alignment needed for fast part-number scanning. */
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:64px 8% 58px;
  text-align:left;
}
:root[data-theme="brand"] body.home-page .hero-copy{
  width:min(100%,760px);
  text-align:left;
}
:root[data-theme="brand"] body.home-page .hero-kicker{
  margin-bottom:12px;
  color:var(--accent);
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
:root[data-theme="brand"] body.home-page .hero h1{
  max-width:720px;
  color:var(--accent);
  font-size:clamp(35px,4.4vw,56px);
  line-height:1.08;
  letter-spacing:-.02em;
  font-weight:700;
}
:root[data-theme="brand"] body.home-page .hero h1 span{display:block;color:var(--accent)}
:root[data-theme="brand"] body.home-page .hero h1 span:nth-child(2){
  margin-top:12px;
  color:#fff;
  font-size:.44em;
  line-height:1.28;
  letter-spacing:.02em;
  font-weight:600;
}
:root[data-theme="brand"] body.home-page .hero p{
  max-width:680px;
  margin:18px 0 24px;
  color:#E5E5E5;
  font-size:15px;
  line-height:1.6;
}
:root[data-theme="brand"] body.home-page .hero-campaign{display:block;max-width:720px;margin:0 0 18px}
:root[data-theme="brand"] body.home-page .hero-campaign:empty{display:none}
:root[data-theme="brand"] body.home-page .hero-campaign .promo-card{
  display:flex;
  align-items:center;
  gap:15px;
  padding:10px 14px;
  border-left:4px solid var(--accent);
  background:rgba(15,15,15,.45);
  color:#fff;
}
:root[data-theme="brand"] body.home-page .hero-campaign .promo-badge{
  flex:none;
  color:#0F0F0F;
  background:var(--accent);
  padding:7px 10px;
  font-size:16px;
  font-weight:800;
}
:root[data-theme="brand"] body.home-page .hero-campaign .promo-copy{min-width:0}
:root[data-theme="brand"] body.home-page .hero-campaign .promo-title{font-size:15px;font-weight:800}
:root[data-theme="brand"] body.home-page .hero-campaign .promo-sub{margin:2px 0 0;color:#D7D7D7;font-size:12px}
:root[data-theme="brand"] .search{
  max-width:720px;
  margin:0;
  border:0;
  border-radius:4px;
  background:#fff;
  box-shadow:none;
}
:root[data-theme="brand"] .search input{color:#0F0F0F;padding:14px 16px}
:root[data-theme="brand"] .search input::placeholder{color:#8A8A8A}
:root[data-theme="brand"] .search button{
  min-width:92px;
  padding:0 20px;
  background:var(--accent);
  color:#0F0F0F;
  font-weight:800;
  text-transform:uppercase;
}
:root[data-theme="brand"] .search button:hover{background:#FFE06B}
:root[data-theme="brand"] .hintrow{
  justify-content:flex-start;
  gap:0;
  margin-top:20px;
  color:#C7C7C7;
}
:root[data-theme="brand"] .hintrow b{color:var(--accent)}
:root[data-theme="brand"] .hintrow span{padding:0 18px;border-left:1px solid rgba(255,255,255,.24)}
:root[data-theme="brand"] .hintrow span:first-child{padding-left:0;border-left:0}
:root[data-theme="brand"] .wrap{max-width:var(--content-max);padding:var(--content-pad-y) var(--content-pad-x)}
:root[data-theme="brand"] h2.sec{
  gap:10px;
  margin-bottom:18px;
  font-size:21px;
  font-weight:800;
  letter-spacing:-.015em;
}
:root[data-theme="brand"] h2.sec:before{
  width:5px;
  height:20px;
  border-radius:0;
  background:var(--accent);
}
:root[data-theme="brand"] .pills{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:0}
:root[data-theme="brand"] .pill{
  gap:0;
  border-color:#D4D4D4;
  border-radius:6px;
  background:#fff;
  box-shadow:none;
}
:root[data-theme="brand"] .pill:hover{border-color:#B99600;box-shadow:0 8px 18px rgba(15,15,15,.1);transform:translateY(-2px)}
:root[data-theme="brand"] .pill .av{aspect-ratio:4/3;background:#fff}
:root[data-theme="brand"] .pill .av img{width:82%;height:82%}
:root[data-theme="brand"] .pill .ttl{padding:12px 14px 14px;border-top:1px solid #E7E7E7}
:root[data-theme="brand"] .pill b{font-size:15px;font-weight:800}
:root[data-theme="brand"] .pill .meta{font-size:12px;color:var(--muted)}
:root[data-theme="brand"] .model-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#8B8B8B;font-size:14px;font-weight:800;letter-spacing:.05em}
:root[data-theme="brand"] .grid5{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
:root[data-theme="brand"] .grid4{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
:root[data-theme="brand"] .card{
  border-color:#D3D3D3;
  border-radius:6px;
  background:#fff;
  box-shadow:none;
  padding:12px;
}
:root[data-theme="brand"] .card:hover{border-color:#B99600;box-shadow:0 7px 16px rgba(15,15,15,.1);transform:translateY(-2px)}
:root[data-theme="brand"] .thumb{height:148px;border-radius:3px;background:#F8F8F8;color:#777}
:root[data-theme="brand"] .thumb.alt{background:#F8F8F8}
:root[data-theme="brand"] .thumb img{max-height:90%;max-width:90%}
:root[data-theme="brand"] .pn{color:#5E5E5E;font-size:11px;letter-spacing:.01em}
:root[data-theme="brand"] .card h3{font-size:14px;margin:7px 0 3px;font-weight:800}
:root[data-theme="brand"] .card .price{font-size:16px;color:#0F0F0F;font-weight:800}
:root[data-theme="brand"] .card .price small{color:#717171}
:root[data-theme="brand"] .card .mini{color:#777}
:root[data-theme="brand"] .promise{margin-top:12px;background:#fff;border-color:#D8D8D8}
:root[data-theme="brand"] .promise b{color:#0F0F0F;font-size:18px}
:root[data-theme="brand"] .promise span{color:#6B6B6B}
:root[data-theme="brand"] #promoBanner{padding-top:10px;padding-bottom:24px}
:root[data-theme="brand"] #promoBanner .promo-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:22px 24px;
  color:#fff;
  background:#0F0F0F;
  border-left:5px solid var(--accent);
}
:root[data-theme="brand"] #promoBanner .promo-copy{min-width:0}
:root[data-theme="brand"] #promoBanner .promo-title{font-size:19px;font-weight:800}
:root[data-theme="brand"] #promoBanner .promo-sub{margin:3px 0 0;color:#C7C7C7;font-size:12px}
:root[data-theme="brand"] #promoBanner .promo-link{
  flex:none;
  padding:9px 14px;
  color:#0F0F0F;
  background:var(--accent);
  font-size:12px;
  font-weight:800;
}
:root[data-theme="brand"] #promoBanner .promo-link:hover{background:#FFE06B}
:root[data-theme="brand"] .c0-page-head,
:root[data-theme="brand"] .sales-head{
  background:linear-gradient(120deg,#0F0F0F 0%,#2A2A2A 100%);
  border-left:5px solid var(--accent);
  border-radius:6px;
}
:root[data-theme="brand"] .c0-page-head h1,
:root[data-theme="brand"] .sales-head h1{color:#fff}
:root[data-theme="brand"] .c0-page-head p,
:root[data-theme="brand"] .sales-head p{color:#E5E5E5}
:root[data-theme="brand"] .camp,
:root[data-theme="brand"] .camp.green,
:root[data-theme="brand"] .camp.violet,
:root[data-theme="brand"] .camp.gray{
  background:linear-gradient(135deg,#0F0F0F 0%,#2A2A2A 100%);
  border-left:5px solid var(--accent);
  border-radius:6px;
}
:root[data-theme="brand"] .camp.orange{
  background:linear-gradient(135deg,#FFCC29 0%,#D5A900 100%);
  border-left:5px solid #0F0F0F;
  border-radius:6px;
  color:#0F0F0F;
}
:root[data-theme="brand"] .camp.orange h2,
:root[data-theme="brand"] .camp.orange .sub,
:root[data-theme="brand"] .camp.orange .period,
:root[data-theme="brand"] .camp.orange .bigoff,
:root[data-theme="brand"] .camp.orange .toggle-arrow{color:#0F0F0F}
:root[data-theme="brand"] body.home-page .hero h1,
:root[data-theme="brand"] body.home-page .hero h2,
:root[data-theme="brand"] body.home-page .hero h3,
:root[data-theme="brand"] body.home-page .hero h4{font-family:inherit}
:root[data-theme="brand"] footer{background:#0F0F0F;color:#BDBDBD}
:root[data-theme="brand"] footer b{color:#fff}
:root[data-theme="brand"] footer{
  min-height:174px;
  padding:42px 0 30px;
  font-family:inherit;
  font-stretch:normal;
  text-rendering:optimizeLegibility;
}
:root[data-theme="brand"] footer .footer-wrap{
  display:grid;
  max-width:1035px;
  grid-template-columns:minmax(0,550px) minmax(120px,130px) minmax(0,1fr);
  align-items:start;
  gap:18px 48px;
  padding:0;
}
:root[data-theme="brand"] .footer-logo{width:195px;height:auto;max-height:38px;object-fit:contain;object-position:left center}
:root[data-theme="brand"] .footer-brand-name{display:none}
:root[data-theme="brand"] .footer-company{margin-top:6px;max-width:330px;font-size:12px;line-height:1.45;letter-spacing:0;color:#BDBDBD}
:root[data-theme="brand"] .footer-social{display:flex;align-items:center;gap:17px;margin-top:13px;color:#fff;font-size:18px;line-height:1}
:root[data-theme="brand"] .footer-social-link{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;color:#fff;text-decoration:none;line-height:1;transition:color .15s ease,opacity .15s ease}
:root[data-theme="brand"] .footer-social-link svg{display:block;width:18px;height:18px;fill:currentColor}
:root[data-theme="brand"] .footer-social-link:hover{color:var(--accent)}
:root[data-theme="brand"] .footer-social-link[aria-disabled="true"]{cursor:default;opacity:.92}
:root[data-theme="brand"] .footer-social-link[aria-disabled="true"]:hover{color:#fff}
:root[data-theme="brand"] .footer-contact-block b{display:block;margin-bottom:9px;color:#fff;font-size:15px;line-height:1.25;font-weight:700;letter-spacing:0}
:root[data-theme="brand"] .footer-contact-row{display:flex;align-items:flex-start;gap:9px;margin-top:6px;font-size:12px;line-height:1.5;letter-spacing:0;color:#BDBDBD}
:root[data-theme="brand"] .footer-contact-link{color:#BDBDBD;text-decoration:none}
:root[data-theme="brand"] .footer-contact-link:hover{color:#fff;text-decoration:underline}
:root[data-theme="brand"] .footer-globe{display:flex;align-items:center;justify-content:center;height:18px}
:root[data-theme="brand"] .footer-globe svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
:root[data-theme="brand"] footer .footer-contact-row[hidden]{display:none !important}
:root[data-theme="brand"] .footer-icon{flex:none;width:18px;color:var(--accent);font-size:17px;line-height:1.2;text-align:center}
:root[data-theme="brand"] .footer-pin{position:relative;width:18px;height:19px;margin-top:1px}
:root[data-theme="brand"] .footer-pin::before{content:"";position:absolute;left:3px;top:1px;width:10px;height:10px;border:2px solid var(--accent);border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
:root[data-theme="brand"] .footer-pin::after{content:"";position:absolute;left:7px;top:5px;width:3px;height:3px;border-radius:50%;background:var(--accent)}
:root[data-theme="brand"] .footer-location-block{padding-top:21px}
:root[data-theme="brand"] .footer-location-block .footer-contact-row{margin-top:0}
:root[data-theme="brand"] .footer-copyright{display:none}
:root[data-theme="brand"] .btn{border-radius:4px;font-weight:800}
:root[data-theme="brand"] .btn.acc{background:var(--accent);color:#0F0F0F}
:root[data-theme="brand"] .btn.acc:hover{background:#FFE06B}
:root[data-theme="brand"] .btn.ghost{color:#0F0F0F;border-color:#0F0F0F}
/* Keep the brand accent for navigation and highlights.  Interior pages use a
   quieter charcoal for action clusters so catalogue data stays readable. */
:root[data-theme="brand"] body:not(.home-page) .btn.acc{
  background:#1F232B;
  color:#fff;
  box-shadow:0 4px 12px rgba(15,15,15,.16);
}
:root[data-theme="brand"] body:not(.home-page) .btn.acc:hover{background:#343A46}
:root[data-theme="brand"] body:not(.home-page) .btn.ghost{
  color:#1F232B;
  border-color:#1F232B;
}
:root[data-theme="brand"] body:not(.home-page) .btn.ghost:hover{
  background:#F2F3F5;
  border-color:#343A46;
}
:root[data-theme="brand"] body:not(.home-page) .btn-guide{
  background:#1F232B;
  color:#fff;
  box-shadow:0 4px 14px rgba(15,15,15,.18);
}
:root[data-theme="brand"] body:not(.home-page) .btn-guide:hover{
  background:#343A46;
  box-shadow:0 8px 22px rgba(15,15,15,.24);
}
:root[data-theme="brand"] body:not(.home-page) .btn-guide-smart{
  color:#1F232B;
  border-color:#1F232B;
}
:root[data-theme="brand"] body:not(.home-page) .btn-guide-smart:hover{
  background:#F2F3F5;
  box-shadow:0 4px 12px rgba(15,15,15,.12);
}
/* Use the same restrained action color for selected controls throughout
   interior pages (sidebar filters, tabs, pagers and toolbars). */
:root[data-theme="brand"] body:not(.home-page) .sb-all.active,
:root[data-theme="brand"] body:not(.home-page) .sb-child.active,
:root[data-theme="brand"] body:not(.home-page) .cb-item.sel,
:root[data-theme="brand"] body:not(.home-page) .pager button.on,
:root[data-theme="brand"] body:not(.home-page) .vt-btn.on,
:root[data-theme="brand"] body:not(.home-page) .people-tabs button.is-active,
:root[data-theme="brand"] body:not(.home-page) .content-tabs button.is-active,
:root[data-theme="brand"] body:not(.home-page) .admin-side-nav a.is-active,
:root[data-theme="brand"] body:not(.home-page) .cart-tabs .tab.on,
:root[data-theme="brand"] body:not(.home-page) .filter-bar a.on,
:root[data-theme="brand"] body:not(.home-page) .xlsx-importer .tog.on,
:root[data-theme="brand"] body:not(.home-page) .zoom-toolbar .zt.on,
:root[data-theme="brand"] body:not(.home-page) .zoom-toolbar .zlvls button.on,
:root[data-theme="brand"] body:not(.home-page) .cat-chip.on,
:root[data-theme="brand"] body:not(.home-page) .ch-pill.on,
:root[data-theme="brand"] body:not(.home-page) .rec-tier-btn.on,
:root[data-theme="brand"] body:not(.home-page) .c0-bulk-btn.has{
  background:#1F232B;
  border-color:#1F232B;
  color:#fff;
}
:root[data-theme="brand"] body:not(.home-page) .sb-type.open .chev{
  background:#1F232B;
  color:#fff;
}
:root[data-theme="brand"] body:not(.home-page) .sb-type.open .chev:hover{background:#343A46}
:root[data-theme="brand"] body:not(.home-page) .sb-type.active .cnt{background:#1F232B;color:#fff}
:root[data-theme="brand"] body:not(.home-page) .pager button:hover:not(:disabled),
:root[data-theme="brand"] body:not(.home-page) .vt-btn:hover:not(.on),
:root[data-theme="brand"] body:not(.home-page) .content-tabs button:hover,
:root[data-theme="brand"] body:not(.home-page) .people-tabs button:hover{
  border-color:#1F232B;
  color:#1F232B;
  background:#F2F3F5;
}
:root[data-theme="brand"] body:not(.home-page) .search-result button,
:root[data-theme="brand"] body:not(.home-page) .qty-row .add,
:root[data-theme="brand"] body:not(.home-page) .c0-share-mail{
  background:#1F232B;
  color:#fff;
}
:root[data-theme="brand"] body:not(.home-page) .search-result button:hover,
:root[data-theme="brand"] body:not(.home-page) .qty-row .add:hover,
:root[data-theme="brand"] body:not(.home-page) .c0-share-mail:hover{background:#343A46}
:root[data-theme="brand"] body:not(.home-page) .pos-table tr.pos-group-head .c0-from-pos{
  color:#1F232B;
  border-color:#1F232B;
}
:root[data-theme="brand"] body:not(.home-page) .pos-table tr.pos-group-head .c0-from-pos:hover{
  background:#1F232B;
  color:#fff;
  box-shadow:0 4px 10px rgba(15,15,15,.18);
}
/* Interior content hierarchy: keep the brand yellow for navigation, focus,
   hover and status signals, while using charcoal for identifiers, totals and
   neutral metadata.  This makes dense catalogue pages easier to scan. */
:root[data-theme="brand"] body:not(.home-page) .type-head .r b,
:root[data-theme="brand"] body:not(.home-page) .filter-bar .r b,
:root[data-theme="brand"] body:not(.home-page) .filter-bar .l .badge-flt,
:root[data-theme="brand"] body:not(.home-page) .filter-bar .l .badge-flt b,
:root[data-theme="brand"] body:not(.home-page) .result-count b,
:root[data-theme="brand"] body:not(.home-page) .mrow .pn-big,
:root[data-theme="brand"] body:not(.home-page) .mrow .action-row .quick b,
:root[data-theme="brand"] body:not(.home-page) .vhero .info .tagline,
:root[data-theme="brand"] body:not(.home-page) .mini-head .sub b,
:root[data-theme="brand"] body:not(.home-page) .pn,
:root[data-theme="brand"] body:not(.home-page) .part-no,
:root[data-theme="brand"] body:not(.home-page) .order-no,
:root[data-theme="brand"] body:not(.home-page) .sku,
:root[data-theme="brand"] body:not(.home-page) .fig-id,
:root[data-theme="brand"] body:not(.home-page) .fig-info .pn-big,
:root[data-theme="brand"] body:not(.home-page) .pos-table .pn-num,
:root[data-theme="brand"] body:not(.home-page) .pos-table .pn-link,
:root[data-theme="brand"] body:not(.home-page) .rec-fig-id,
:root[data-theme="brand"] body:not(.home-page) .rec-part-pn,
:root[data-theme="brand"] body:not(.home-page) .info .pn-big,
:root[data-theme="brand"] body:not(.home-page) table.spec td b,
:root[data-theme="brand"] body:not(.home-page) .fig-pill .pn,
:root[data-theme="brand"] body:not(.home-page) .related-grid .card .pn,
:root[data-theme="brand"] body:not(.home-page) .c0-item .body .pn,
:root[data-theme="brand"] body:not(.home-page) .c0-draft-pn .pn,
:root[data-theme="brand"] body:not(.home-page) .search-result .pn,
:root[data-theme="brand"] body:not(.home-page) .draft-item .info .pn,
:root[data-theme="brand"] body:not(.home-page) .people-table .key,
:root[data-theme="brand"] body:not(.home-page) .queue-table .order-no,
:root[data-theme="brand"] body:not(.home-page) .bundle-card .part-chip .pn,
:root[data-theme="brand"] body:not(.home-page) .camp .body .item-row .pn{
  color:#1F232B;
}
:root[data-theme="brand"] body:not(.home-page) .filter-bar .l .badge-flt{
  background:#F2F3F5;
  border:1px solid #C9CDD4;
}
:root[data-theme="brand"] body:not(.home-page) .mrow .pn-big::before{
  background:#1F232B;
}
:root[data-theme="brand"] body:not(.home-page) .mrow .tags .tag:not(.ok):not(.warn):not(.complete),
:root[data-theme="brand"] body:not(.home-page) .tag.blue{
  background:#F2F3F5;
  color:#1F232B;
  border-color:#C9CDD4;
}
:root[data-theme="brand"] body:not(.home-page) .fig-card .fig-thumb{
  color:#1F232B;
}
:root[data-theme="brand"] body:not(.home-page) .mrow .stats b,
:root[data-theme="brand"] body:not(.home-page) .stat-card b,
:root[data-theme="brand"] body:not(.home-page) .kpi-card b,
:root[data-theme="brand"] body:not(.home-page) .coupon-kpi b,
:root[data-theme="brand"] body:not(.home-page) .c0-stat b,
:root[data-theme="brand"] body:not(.home-page) .stats-row .card > b,
:root[data-theme="brand"] body:not(.home-page) .bundle-card .price-block .now,
:root[data-theme="brand"] body:not(.home-page) .summary-bar b,
:root[data-theme="brand"] body:not(.home-page) .parts-table .price,
:root[data-theme="brand"] body:not(.home-page) .parts-table .qty-cell,
:root[data-theme="brand"] body:not(.home-page) .part-card .price,
:root[data-theme="brand"] body:not(.home-page) .camp .body .item-row .price,
:root[data-theme="brand"] body:not(.home-page) .pi-sum .row.tot,
:root[data-theme="brand"] body:not(.home-page) .tile .count{
  color:#1F232B;
}
:root[data-theme="brand"] body:not(.home-page) .stats-row .card > b[style*="color:var(--accent)"],
:root[data-theme="brand"] body:not(.home-page) .order-hero > div:last-child > div[style*="font-size:28px"],
:root[data-theme="brand"] body:not(.home-page) table.lines tfoot td.r[style*="color:var(--accent)"]{
  color:#1F232B !important;
}
:root[data-theme="brand"] body:not(.home-page) a.pn:hover,
:root[data-theme="brand"] body:not(.home-page) .queue-table .order-no:hover,
:root[data-theme="brand"] body:not(.home-page) .people-table .key:hover{
  color:#B99600;
}
:root[data-theme="brand"] input,
:root[data-theme="brand"] textarea,
:root[data-theme="brand"] select{border-radius:4px}
:root[data-theme="brand"] input:focus,
:root[data-theme="brand"] textarea:focus,
:root[data-theme="brand"] select:focus{border-color:#B99600;outline:2px solid rgba(255,204,41,.28);outline-offset:1px}

/* The homepage keeps the black/yellow STAXX signature.  Interior pages use
   a neutral black/white treatment so catalogue data stays quieter and more
   legible while the homepage keeps its campaign emphasis. */
:root[data-theme="brand"] body:not(.home-page){
  --accent:#1F232B;
  --accent-soft:#F2F3F5;
  --accent-dark:#0F0F0F;
}
/* Keep the primary navigation yellow on every page; the neutral palette is
   reserved for the interior page content and its controls. */
:root[data-theme="brand"] body:not(.home-page) .topbar > nav{background:#FFCC29}
:root[data-theme="brand"] body:not(.home-page) .topnav-search:focus-within{
  border-color:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.16);
}
:root[data-theme="brand"] body:not(.home-page) .topnav-search button{color:#fff}
:root[data-theme="brand"] body:not(.home-page) .lang button:hover,
:root[data-theme="brand"] body:not(.home-page) .theme button:hover{border-color:#fff}
:root[data-theme="brand"] body:not(.home-page) .user-chip .avt{background:#fff;color:#0F0F0F}
:root[data-theme="brand"] body:not(.home-page) .user-chip .logout:hover{background:#fff;color:#0F0F0F}
:root[data-theme="brand"] body:not(.home-page) .lang-menu .opt:hover,
:root[data-theme="brand"] body:not(.home-page) .theme-menu .opt:hover,
:root[data-theme="brand"] body:not(.home-page) .lang-menu .opt.on,
:root[data-theme="brand"] body:not(.home-page) .theme-menu .opt.on{color:#fff}
:root[data-theme="brand"] body:not(.home-page) .f-cart:hover{border-color:#1F232B}
:root[data-theme="brand"] body:not(.home-page) .f-cart .n{background:#fff;color:#0F0F0F}
:root[data-theme="brand"] body:not(.home-page) .search button{background:#1F232B;color:#fff}
:root[data-theme="brand"] body:not(.home-page) .search button:hover{background:#343A46;color:#fff}
:root[data-theme="brand"] body:not(.home-page) .pill:hover,
:root[data-theme="brand"] body:not(.home-page) .card:hover{border-color:#1F232B}
:root[data-theme="brand"] body:not(.home-page) .camp.orange{
  background:linear-gradient(135deg,#F2F2F2 0%,#D7D7D7 100%);
  color:#0F0F0F;
}
:root[data-theme="brand"] body:not(.home-page) footer .footer-social-link:hover{color:#fff}
:root[data-theme="brand"] body:not(.home-page) footer .footer-icon{color:#fff}
:root[data-theme="brand"] body:not(.home-page) footer .footer-pin::before{border-color:#fff}
:root[data-theme="brand"] body:not(.home-page) footer .footer-pin::after{background:#fff}
:root[data-theme="brand"] body:not(.home-page) input:focus,
:root[data-theme="brand"] body:not(.home-page) textarea:focus,
:root[data-theme="brand"] body:not(.home-page) select:focus{
  border-color:#1F232B;
  outline:2px solid rgba(31,35,43,.18);
  outline-offset:1px;
}

/* Same-document route shell. The header and footer stay mounted while this
   view is replaced, so navigation does not flash a new document. */
/* Keep the route view in the root transition snapshot. A named view
   transition is rendered in the browser top layer and can cover the sticky
   header while a same-document route is changing. */
#spaView{min-height:1px}
body.spa-navigating #spaView{cursor:progress}
::view-transition-old(root),
::view-transition-new(root){animation-duration:.16s;animation-timing-function:var(--ease-out)}
.spa-route-error{
  min-height:42vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:48px 20px;background:var(--bg);color:var(--ink);text-align:center;
}
.spa-route-error span{color:var(--muted);max-width:520px}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

@media(max-width:1100px){
  :root[data-theme="brand"] nav a{padding-left:17px;padding-right:17px}
  :root[data-theme="brand"] .topnav-search input{width:130px}
}
@media(max-width:900px){
  :root[data-theme="brand"],
  :root[data-theme="brand"] body{overflow-x:hidden}
  :root[data-theme="brand"] .topbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:54px 46px;
    height:100px;
    padding:0 16px;
  }
  :root[data-theme="brand"] .brand{min-width:0}
  :root[data-theme="brand"] .topbar-right{min-width:0}
  :root[data-theme="brand"] .toggles,
  :root[data-theme="brand"] .lang,
  :root[data-theme="brand"] .user-chip{flex:none}
  :root[data-theme="brand"] .topbar-right,
  :root[data-theme="brand"] .topbar-right.nav-shell{
    grid-column:2;
    grid-row:1;
    width:auto;
    justify-content:flex-end;
  }
  :root[data-theme="brand"] .topbar-right .topnav-search{display:none}
  :root[data-theme="brand"] .topbar-right .topnav-search-shell{display:none}
  :root[data-theme="brand"] .topbar > nav{margin:0 -16px;padding:0 16px;justify-content:flex-start;overflow-x:auto}
  :root[data-theme="brand"] nav a{padding-left:19px;padding-right:19px}
  :root[data-theme="brand"] body.home-page .hero .inner{padding:52px 22px 45px}
  :root[data-theme="brand"] .wrap{padding-left:22px;padding-right:22px}
  :root[data-theme="brand"] .grid5{grid-template-columns:repeat(2,minmax(0,1fr))}
  :root[data-theme="brand"] body.home-page .hero{min-height:430px}
  :root[data-theme="brand"] body.home-page .hero .inner{min-height:430px}
  :root[data-theme="brand"] footer .footer-wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 30px}
  :root[data-theme="brand"] .footer-location-block{padding-top:0}
}
@media(max-width:640px){
  :root[data-theme="brand"] .topbar{height:96px;grid-template-rows:50px 46px}
  :root[data-theme="brand"] .brand img.logo-dark{height:28px}
  :root[data-theme="brand"] .brand .brand-text{display:none}
  :root[data-theme="brand"] .user-chip .info{display:none}
  :root[data-theme="brand"] .lang button{padding:0 7px}
  :root[data-theme="brand"] body.home-page .hero,
  :root[data-theme="brand"] body.home-page .hero .inner{min-height:450px}
  :root[data-theme="brand"] body.home-page .hero .inner{padding:48px 18px 38px}
  :root[data-theme="brand"] body.home-page .hero h1{font-size:39px}
  :root[data-theme="brand"] body.home-page .hero h1 span:nth-child(2){font-size:.46em}
  :root[data-theme="brand"] body.home-page .hero p{font-size:13px}
  :root[data-theme="brand"] .hintrow{gap:12px;flex-wrap:wrap}
  :root[data-theme="brand"] .pills,
  :root[data-theme="brand"] .grid4,
  :root[data-theme="brand"] .grid5{grid-template-columns:1fr}
  :root[data-theme="brand"] #promoBanner .promo-card{align-items:flex-start;flex-direction:column}
  :root[data-theme="brand"] .float-carts{top:calc(var(--topbar-h) + 12px);bottom:auto;right:10px}
  :root[data-theme="brand"] footer .footer-wrap{grid-template-columns:1fr;gap:20px}
}
@media(prefers-reduced-motion:reduce){
  :root[data-theme="brand"] .pill:hover,
  :root[data-theme="brand"] .card:hover{transform:none}
}
@media(max-width:360px){
  :root[data-theme="brand"] .topbar{padding-left:12px;padding-right:12px}
  :root[data-theme="brand"] .brand img.logo-dark{height:24px;max-width:120px}
}

/* Keep interior action controls consistent.  The homepage and primary
   navigation retain the STAXX black/yellow treatment; authenticated pages
   use one calm blue-grey action color with an explicit white foreground. */
:root[data-theme="brand"] body:not(.home-page){
  --action:#536F83;
  --action-hover:#405B6E;
  --action-soft:#EDF3F6;
  --action-line:#8FA8B8;
}
:root[data-theme="brand"] body:not(.home-page) .btn.acc,
:root[data-theme="brand"] body:not(.home-page) .btn-guide,
:root[data-theme="brand"] body:not(.home-page) .search-result button,
:root[data-theme="brand"] body:not(.home-page) .qty-row .add,
:root[data-theme="brand"] body:not(.home-page) .c0-share-mail,
:root[data-theme="brand"] body:not(.home-page) .search button{
  background:var(--action);
  color:#fff;
  border-color:var(--action);
}
:root[data-theme="brand"] body:not(.home-page) .btn.acc:hover,
:root[data-theme="brand"] body:not(.home-page) .btn-guide:hover,
:root[data-theme="brand"] body:not(.home-page) .search-result button:hover,
:root[data-theme="brand"] body:not(.home-page) .qty-row .add:hover,
:root[data-theme="brand"] body:not(.home-page) .c0-share-mail:hover,
:root[data-theme="brand"] body:not(.home-page) .search button:hover{
  background:var(--action-hover);
  border-color:var(--action-hover);
  color:#fff;
}
:root[data-theme="brand"] body:not(.home-page) .btn.ghost{
  color:var(--action);
  border-color:var(--action);
}
:root[data-theme="brand"] body:not(.home-page) .btn.ghost:hover{
  background:var(--action-soft);
  color:var(--action-hover);
  border-color:var(--action-hover);
}
:root[data-theme="brand"] body:not(.home-page) .chip.on,
:root[data-theme="brand"] body:not(.home-page) .sb-all.active,
:root[data-theme="brand"] body:not(.home-page) .sb-child.active,
:root[data-theme="brand"] body:not(.home-page) .cb-item.sel,
:root[data-theme="brand"] body:not(.home-page) .pager button.on,
:root[data-theme="brand"] body:not(.home-page) .vt-btn.on,
:root[data-theme="brand"] body:not(.home-page) .people-tabs button.is-active,
:root[data-theme="brand"] body:not(.home-page) .content-tabs button.is-active,
:root[data-theme="brand"] body:not(.home-page) .admin-side-nav a.is-active,
:root[data-theme="brand"] body:not(.home-page) .cart-tabs .tab.on,
:root[data-theme="brand"] body:not(.home-page) .filter-bar a.on,
:root[data-theme="brand"] body:not(.home-page) .xlsx-importer .tog.on,
:root[data-theme="brand"] body:not(.home-page) .zoom-toolbar .zt.on,
:root[data-theme="brand"] body:not(.home-page) .zoom-toolbar .zlvls button.on,
:root[data-theme="brand"] body:not(.home-page) .cat-chip.on,
:root[data-theme="brand"] body:not(.home-page) .ch-pill.on,
:root[data-theme="brand"] body:not(.home-page) .rec-tier-btn.on,
:root[data-theme="brand"] body:not(.home-page) .c0-bulk-btn.has{
  background:var(--action);
  border-color:var(--action);
  color:#fff;
}
:root[data-theme="brand"] body:not(.home-page) .sb-type.open .chev{
  background:var(--action);
  color:#fff;
}
:root[data-theme="brand"] body:not(.home-page) .sb-type.open .chev:hover{
  background:var(--action-hover);
}
:root[data-theme="brand"] body:not(.home-page) .sb-type.active .cnt{
  background:var(--action);
  color:#fff;
}
:root[data-theme="brand"] body:not(.home-page) .pos-table tr.pos-group-head .c0-from-pos{
  color:var(--action);
  border-color:var(--action);
}
:root[data-theme="brand"] body:not(.home-page) .pos-table tr.pos-group-head .c0-from-pos:hover{
  background:var(--action);
  border-color:var(--action);
  color:#fff;
}
/* Counts inside a selected control are part of its active state. Keep them
   white even when the control is empty, so a zero never falls back to the
   muted text color used by an inactive badge. */
:root[data-theme="brand"] body:not(.home-page) .cart-tabs .tab.on .n,
:root[data-theme="brand"] body:not(.home-page) .cart-tabs a.on .badge-count,
:root[data-theme="brand"] body:not(.home-page) .sb-all.active .cnt,
:root[data-theme="brand"] body:not(.home-page) .sb-type.active .cnt,
:root[data-theme="brand"] body:not(.home-page) .sb-child.active .cnt-mini,
:root[data-theme="brand"] body:not(.home-page) .cb-item.sel .cb-n{
  color:#fff !important;
}

/* ============================================================
 * Readability pass · bilingual UI
 *
 * The catalogue is used for long scanning sessions.  Keep the brand's
 * display hierarchy, but raise the body, form, table and supporting-copy
 * baselines so Chinese and Latin text have the same comfortable rhythm.
 * These rules are intentionally at the end of the shared sheet and use
 * !important where page-level inline styles are cloned by the SPA router.
 * ============================================================ */
body{
  font-size:15px;
  line-height:1.65;
}
body .topnav-search input{font-size:14px !important;}
body nav a{font-size:14px !important;}
body .cartbtn{font-size:14px !important;}
body .user-chip .nm{font-size:13px !important;}
body .user-chip .role{font-size:12.5px !important;}
body .user-chip .admin-shortcut{font-size:13px !important;}
body .crumb{font-size:13.5px !important;line-height:1.5;}
body .btn{font-size:14px !important;line-height:1.35;}
body input,
body select,
body textarea{font-size:14px !important;line-height:1.45;}
body label{font-size:13.5px !important;line-height:1.45;}
body table{font-size:13.5px !important;line-height:1.5;}
body th{font-size:13px !important;line-height:1.45;}
body table small{font-size:12.5px !important;line-height:1.4;}
body .mini{font-size:13px !important;line-height:1.55;}
body .hint,
body .note,
body .meta,
body .subline,
body .desc,
body .period,
body .eligible,
body .rule,
body .status,
body .status-pill,
body .role-pill,
body .filter-bar a,
body .results-meta,
body .search-result,
body .search-result .meta{font-size:13px !important;line-height:1.55;}
body .pn,
body .part-no,
body .order-no,
body .sku,
body .fig-id{font-size:12.5px !important;}
body .price small{font-size:12px !important;}
body .tag,
body .part-tag{font-size:12px !important;line-height:1.35;}
body .chip,
body .cat-chip,
body .ch-pill,
body .vt-btn,
body .pager button,
body .filter-bar .l .badge-flt{font-size:13px !important;}
body .cart-tabs a{font-size:14px !important;}
body .cart-tabs a .badge-count,
body .cart-tabs .tab .n{font-size:12.5px !important;}
body .promise span{font-size:13px !important;}
body .hintrow{font-size:13.5px !important;line-height:1.5;}
body footer{font-size:13px !important;line-height:1.55;}
body .sub{font-size:13.5px !important;line-height:1.55;}
body footer .footer-wrap > div,
body footer .footer-company,
body footer .footer-contact-row{font-size:13px !important;line-height:1.55;}

/* Header menus and compact controls still need readable labels in both
   languages; purely decorative swatches/icons keep their original sizes. */
body .lang button{font-size:13.5px !important;}
body .lang-menu .opt .lang-row,
body .theme-menu .opt .swatch-row{font-size:13.5px !important;}
body .lang-menu .opt .desc,
body .theme-menu .opt .desc{font-size:12px !important;line-height:1.45;}
body .badge-count,
body .f-cart .n,
body .c0-fab .cnt,
body .c0-bulk-btn .n,
body .c0-fig-btn .n{font-size:12px !important;}
body .f-cart::after{font-size:12.5px !important;}

/* Home keeps its larger hero scale while its campaign and model metadata
   follow the same readable baseline as the interior pages. */
body.home-page .hero-kicker{font-size:13px !important;}
body.home-page .hero-campaign .promo-sub,
body.home-page .hero-campaign .promo-title{font-size:13px !important;}
body.home-page .hero-campaign .promo-title{font-size:16px !important;}
body.home-page .pill .meta{font-size:13px !important;}
body.home-page .card p{font-size:13px !important;}

/* Interior page components with their own compact CSS blocks. */
body .admin-side-kicker,
body .admin-side-label,
body .admin-side-brand span:last-child,
body .admin-side-links a,
body .admin-side-nav a,
body .admin-table,
body .admin-card .meta,
body .admin-fields label,
body .admin-table th,
body .admin-card p,
body .admin-drop,
body .admin-msg{font-size:13px !important;}
body .people-stat span,
body .people-table th,
body .people-field label,
body .people-card-head input,
body .people-msg,
body .queue-stat span,
body .queue-table th,
body .queue-footer,
body .queue-msg,
body .ops-import-stat span,
body .ops-stat span,
body .ops-table .subline,
body .ops-table th,
body .ops-field label,
body .ops-drop,
body .ops-errors,
body .ops-pagination,
body .ops-table .fit-list,
body .ops-warnings,
body .ops-import-help,
body .ops-msg{font-size:13px !important;line-height:1.5;}
body .admin-card .row-actions .btn,
body .status-pill,
body .role-pill{font-size:13px !important;}

body .c0-attach-row .at .nm,
body .c0-attach-row .more,
body .c0-ctx-strip .chip,
body .c0-draft-pn .rank,
body .c0-draft-pn .add,
body .c0-item .body .ts,
body .c0-item .thumb .mini-num,
body .c0-draft .hd a,
body .c0-draft-note,
body .c0-draft-pn .note,
body .c0-form .hint,
body .c0-meta-strip,
body .c0-draft-pn .pn,
body .c0-form .meta-row,
body .c0-item .actions .btn,
body .c0-side .card li,
body .c0-attach-head .mini,
body .c0-row2 label,
body .c0-row2 select,
body .c0-row2 input,
body .c0-share-link-row input,
body .c0-share-link-row .btn{font-size:13px !important;line-height:1.5;}
body .c0-att-meta .sz{font-size:12px !important;}

body .checkout-field > span,
body .checkout-summary .summary-kicker,
body .checkout-total-label,
body .checkout-total-note,
body .line-meta .mini,
body .three-carts .row2 .meta,
body .three-carts .rec-flag,
body .three-carts .col .btn,
body table.checkout th,
body table.checkout select,
body .freight-weight-editor .mini,
body .freight-advanced summary,
body .c0-strip .body .snip,
body .move-row .src,
body .move-row select{font-size:13px !important;line-height:1.5;}

body .cat-col a span,
body .cart-hero .ship,
body .flag{font-size:13px !important;}

body .sb-type .chev{font-size:11px !important;}
body .sb-head{font-size:13px !important;line-height:1.45;}
body .sb-type .cnt,
body .sb-all .cnt,
body .sb-child .cnt,
body .sb-child .cnt-mini,
body .sb-child .name-mini,
body .mrow .img-side .badge,
body .mrow .img-side .tonnage,
body .mrow .stats span,
body .mrow .tags .tag,
body .mrow .action-row .quick,
body .mrow .action-row .btn-guide .lbl-en{font-size:12.5px !important;line-height:1.4;}
body .thumb [style*="font-size:10px"]{font-size:12.5px !important;}
body .thumb [style*="font-size:11px"],
body .thumb-mini [style*="font-size:10px"],
body .thumb-mini [style*="font-size:11px"],
body .part-card [style*="font-size:10px"],
body .part-card [style*="font-size:11px"]{font-size:12.5px !important;}
body #trendLabels{font-size:12.5px !important;line-height:1.45;}
body #c0kb > .sub{font-size:13.5px !important;}
body .bundle-card > div:first-child > div[style*="border-top"]{font-size:13px !important;line-height:1.55;}
body .camp .badge-cta{font-size:13px !important;}
body .order-hero > div:last-child > div[style*="font-size:11px"]{font-size:13px !important;line-height:1.5;}
body .meta-card a[href*="profile-address"]{font-size:13px !important;}
body .admin-side .role-tag{font-size:12.5px !important;}
body .who .role-tag{font-size:12.5px !important;}
body #limitText{font-size:12.5px !important;}
body .profile-side .role.full,
body .profile-side .role.purchase,
body .profile-side .role.finance{font-size:12.5px !important;}

body .cart-3 .c3-btn .lbl,
body .cart-3 .c3-btn::after,
body .pos-table .price-cell small,
body .pos-table .qty-badge,
body .pos-table .thumb-mini .mini-num,
body .zoom-toolbar .zoom-hint,
body .pos-modal-foot kbd,
body .pos-table .fit-mini,
body .zoom-toolbar .zlvls button,
body .fig-info .stats span,
body .figure-zoom-controls .figure-zoom-help,
body .pos-table .cart-pick .cp-btn::after,
body .pos-table .rec-mark.none,
body .zoom-toolbar .zt,
body .pos-table .name-en,
body .pos-table .pn-link,
body .pos-table th,
body .spec-inline{font-size:12.5px !important;line-height:1.45;}
body .pos-table .pn-num,
body .pos-table .pn-num-big,
body .rec-fig-id,
body .rec-part-pn{font-size:13px !important;}

body .login-brand-text small{font-size:10px !important;line-height:1.2;}
body .login-kicker,
body .login-card-head .eyebrow,
body .login-foot,
body .login-card .foot,
body .login-card label,
body .login-point,
body .login-card .err,
body .login-bar .lang-mini button{font-size:13px !important;line-height:1.5;}

body .pi-parties h4,
body table.pi th,
body .pi-sign,
body .pi-terms,
body .kpi-card span,
body .pill-tag,
body table.as th,
body .new-form .att-chip,
body .timeline .step .when,
body .audit-row .when,
body .timeline .step,
body .track-card .step .when,
body .track-card .step,
body table.lines th,
body .audit-row,
body .stats-row .card .mini,
body table.orders th,
body .xlsx-importer .row-qty,
body .xlsx-importer .tpl-btn,
body .xlsx-importer .empty,
body .xlsx-importer .preview-head,
body .xlsx-importer .tog,
body .xlsx-importer p,
body .xlsx-importer table.preview,
body .xlsx-importer textarea{font-size:13px !important;line-height:1.5;}

body .cart-pick .opt .badge,
body .cart-pick .opt.savings .savings-badge,
body .cart-pick .opt .meta,
body .cart-pick .opt .price-big small,
body .related-grid .card .pn,
body .bundles .card .pn,
body .fig-pill .name,
body .fig-pill .pn,
body .info .tag,
body .related-grid .card .name,
body .related-grid .card .price,
body .qty-row .lbl,
body .related-grid .no-related,
body .cart-pick .opt h4{font-size:13px !important;line-height:1.5;}

body .rec-mini label,
body .rec-warn button,
body .combobox .cb-n,
body .combobox .cb-tag,
body .combobox > input,
body .combobox input,
body .parts-table .models,
body .parts-table th,
body .parts-table .pn,
body .parts-table .price small,
body .parts-table .qty-cell small,
body .pager button,
body .rec-cart-btn,
body .rec-mini .rec-go,
body .rec-mini input[type=number],
body .toolbar select,
body .toolbar input{font-size:13px !important;line-height:1.5;}

body .modlist .grp,
body .addr-card .meta-row,
body .addr-card .actions,
body .modal label,
body .info-banner,
body .cat-card .meta,
body .detail-card .pill,
body .tree .node .role,
body .tree .node .actions a,
body .detail-card .meta,
body .stat-card span,
body .course .meta,
body .ch-card .channel-contact,
body .ch-card .meta,
body .ch-pill,
body .event-row .label .hint,
body .token-card .meta,
body .token-card .pill,
body .api-endpoint .verb,
body .api-endpoint,
body .code-block,
body .token-card .val,
body .actions .hint,
body .pref-row .label .hint,
body .theme-opt,
body .dl-row .meta,
body .dl-row .icon{font-size:13px !important;line-height:1.5;}

body .bundle-card .part-chip,
body .bundle-card .part-chip .pn,
body .bundle-card .price-block .save,
body .bundle-card .cart-select,
body .summary-bar .mini,
body .camp .body .rule b,
body .camp .body .item-row,
body .coupon .body .period,
body .coupon .code .copy,
body .coupon .face .off,
body .coupon-kpi span,
body .section-title .count,
body .coupon .body .eligible{font-size:13px !important;line-height:1.5;}

body .search-result button,
body .sales-card .ctx-strip .chip,
body .sales-meta-row,
body .draft-item .info .note,
body .draft-item .info .nm,
body .draft-item .rank,
body .draft-item .rm,
body .sales-head .ref,
body .save-bar .info,
body .draft-final label,
body .draft-final textarea,
body .draft-item .info .pn,
body .search-empty,
body .draft-final{font-size:13px !important;line-height:1.5;}

body .c0-stat span,
body .c0kb-card .kw,
body .c0kb-card .desc-side .ts,
body .c0kb-card .meta-row,
body .c0kb-card .rec-side h5,
body .contact-strip .item .mini,
body .tile .count,
body .tile .desc,
body .c0kb-card .empty-rec,
body .c0kb-card .rec .pn,
body .c0kb-card .rec .name{font-size:13px !important;line-height:1.5;}

body .fig-card .fig-id,
body .fig-card .fig-meta,
body .model-switcher .ms-lbl,
body .model-switcher .ms-n,
body .stat-card span,
body .fig-card .fig-thumb .ribbon,
body .fig-card .fig-status,
body .mini-head .sub{font-size:13px !important;line-height:1.5;}

/* Preserve intentionally display-sized brand marks and numeric counters. */
body .theme button,
body .theme button .swatch,
body .lang button .flag,
body .lang button .chev,
body .f-cart,
body .f-cart .ic,
body .qty button,
body .cartline .del,
body .rec-close,
body .zoom-close,
body .c0-help-btn,
body .c0-head .x{font-size:initial !important;}

@media(max-width:640px){
  body{font-size:14.5px;}
  body .hintrow{font-size:13px !important;}
  body .crumb{font-size:13px !important;}
  body table{font-size:13px !important;}
}

/* The model tree is the primary filter on the vehicles page.  Keep its
   selected state aligned with the yellow brand navigation, with black text
   for the same contrast used by the home page. */
:root[data-theme="brand"] body.vehicles-page .sb-all.active,
:root[data-theme="brand"] body.vehicles-page .sb-type.active,
:root[data-theme="brand"] body.vehicles-page .sb-child.active{
  background:#FFCC29;
  border-color:#FFCC29;
  color:#0F0F0F !important;
}
:root[data-theme="brand"] body.vehicles-page .sb-type.active .chev,
:root[data-theme="brand"] body.vehicles-page .sb-type.active.open .chev{
  background:rgba(15,15,15,.12);
  color:#0F0F0F !important;
}
:root[data-theme="brand"] body.vehicles-page .sb-all.active .cnt,
:root[data-theme="brand"] body.vehicles-page .sb-type.active .cnt,
:root[data-theme="brand"] body.vehicles-page .sb-child.active .cnt-mini{
  background:rgba(15,15,15,.12);
  color:#0F0F0F !important;
}

/* ============================================================
 * Unified interaction palette · brand theme
 *
 * Every page now uses the same interaction language: STAXX yellow is the
 * filled action and selected state, black is its foreground, and white with
 * a black outline is the secondary action.  This block intentionally comes
 * last so page-level styles cannot reintroduce the former blue/charcoal
 * active states.  Semantic success, warning and danger treatments remain
 * untouched.
 * ============================================================ */
:root[data-theme="brand"] body:not(.home-page){
  --action:#FFCC29;
  --action-hover:#FFE06B;
  --action-soft:#FFF6CC;
  --action-line:#D9A900;
}

/* Keep the primary navigation on the same yellow scale while preserving its
   existing full-width yellow bar. */
:root[data-theme="brand"] nav a.on{
  color:#0F0F0F !important;
  background:#FFE06B !important;
  border-bottom-color:#0F0F0F !important;
}

/* Filled actions.  Plain .btn controls are treated as primary unless they
   explicitly opt into the ghost or danger treatment. */
:root[data-theme="brand"] body:not(.home-page) .btn:not(.ghost):not(.danger),
:root[data-theme="brand"] body:not(.home-page) .btn.acc,
:root[data-theme="brand"] body:not(.home-page) .btn-guide,
:root[data-theme="brand"] body:not(.home-page) .btn-cta,
:root[data-theme="brand"] body:not(.home-page) .search button,
:root[data-theme="brand"] body:not(.home-page) .search-result button,
:root[data-theme="brand"] body:not(.home-page) .qty-row .add,
:root[data-theme="brand"] body:not(.home-page) .c0-share-mail,
:root[data-theme="brand"] body:not(.home-page) .c0-draft-pn .add{
  background:#FFCC29 !important;
  border-color:#FFCC29 !important;
  color:#0F0F0F !important;
  box-shadow:0 4px 12px rgba(217,169,0,.18);
}
:root[data-theme="brand"] body:not(.home-page) .btn:not(.ghost):not(.danger):hover:not(:disabled),
:root[data-theme="brand"] body:not(.home-page) .btn.acc:hover:not(:disabled),
:root[data-theme="brand"] body:not(.home-page) .btn-guide:hover:not(:disabled),
:root[data-theme="brand"] body:not(.home-page) .btn-cta:hover:not(:disabled),
:root[data-theme="brand"] body:not(.home-page) .search button:hover:not(:disabled),
:root[data-theme="brand"] body:not(.home-page) .search-result button:hover:not(:disabled),
:root[data-theme="brand"] body:not(.home-page) .qty-row .add:hover:not(:disabled),
:root[data-theme="brand"] body:not(.home-page) .c0-share-mail:hover:not(:disabled),
:root[data-theme="brand"] body:not(.home-page) .c0-draft-pn .add:hover:not(:disabled){
  background:#FFE06B !important;
  border-color:#D9A900 !important;
  color:#0F0F0F !important;
  box-shadow:0 7px 18px rgba(217,169,0,.24);
}

/* Secondary actions stay quiet and readable on every light surface. */
:root[data-theme="brand"] body:not(.home-page) .btn.ghost:not(.danger),
:root[data-theme="brand"] body:not(.home-page) .btn-guide-smart,
:root[data-theme="brand"] body:not(.home-page) .btn-ghost,
:root[data-theme="brand"] body:not(.home-page) .rec-go,
:root[data-theme="brand"] body:not(.home-page) .rec-cart-btn,
:root[data-theme="brand"] body:not(.home-page) .c0-fig-btn,
:root[data-theme="brand"] body:not(.home-page) .c0-bulk-btn:not(.has),
:root[data-theme="brand"] body:not(.home-page) .c0-from-pos,
:root[data-theme="brand"] body:not(.home-page) .cart-pick .cp-btn,
:root[data-theme="brand"] body:not(.home-page) .cart-3 .c3-btn:not(.active),
:root[data-theme="brand"] body:not(.home-page) .zoom-toolbar .zlvls button:not(.on){
  background:#FFFFFF !important;
  border-color:#0F0F0F !important;
  color:#0F0F0F !important;
}
:root[data-theme="brand"] body:not(.home-page) .btn.ghost:not(.danger):hover:not(:disabled),
:root[data-theme="brand"] body:not(.home-page) .btn-guide-smart:hover:not(:disabled),
:root[data-theme="brand"] body:not(.home-page) .btn-ghost:hover:not(:disabled),
:root[data-theme="brand"] body:not(.home-page) .rec-go:hover:not(:disabled),
:root[data-theme="brand"] body:not(.home-page) .rec-cart-btn:hover:not(:disabled),
:root[data-theme="brand"] body:not(.home-page) .c0-fig-btn:hover:not(:disabled),
:root[data-theme="brand"] body:not(.home-page) .c0-bulk-btn:not(.has):hover:not(:disabled),
:root[data-theme="brand"] body:not(.home-page) .c0-from-pos:hover:not(:disabled),
:root[data-theme="brand"] body:not(.home-page) .cart-pick .cp-btn:hover:not(:disabled),
:root[data-theme="brand"] body:not(.home-page) .cart-3 .c3-btn:not(.active):hover:not(:disabled),
:root[data-theme="brand"] body:not(.home-page) .zoom-toolbar .zlvls button:not(.on):hover:not(:disabled){
  background:#FFF6CC !important;
  border-color:#D9A900 !important;
  color:#0F0F0F !important;
}

/* Selected filters, tabs, pagers and toolbars. */
:root[data-theme="brand"] body:not(.home-page) .chip.on,
:root[data-theme="brand"] body:not(.home-page) .catlist div.on,
:root[data-theme="brand"] body:not(.home-page) .modlist a.on,
:root[data-theme="brand"] body:not(.home-page) .promo-tabs a.on,
:root[data-theme="brand"] body:not(.home-page) .sb-all.active,
:root[data-theme="brand"] body:not(.home-page) .sb-type.active,
:root[data-theme="brand"] body:not(.home-page) .sb-child.active,
:root[data-theme="brand"] body:not(.home-page) .cb-item.sel,
:root[data-theme="brand"] body:not(.home-page) .pager button.on,
:root[data-theme="brand"] body:not(.home-page) .vt-btn.on,
:root[data-theme="brand"] body:not(.home-page) .people-tabs button.is-active,
:root[data-theme="brand"] body:not(.home-page) .content-tabs button.is-active,
:root[data-theme="brand"] body:not(.home-page) .admin-side-nav a.is-active,
:root[data-theme="brand"] body:not(.home-page) .cart-tabs a.on,
:root[data-theme="brand"] body:not(.home-page) .cart-tabs .tab.on,
:root[data-theme="brand"] body:not(.home-page) .filter-bar a.on,
:root[data-theme="brand"] body:not(.home-page) .xlsx-importer .tog.on,
:root[data-theme="brand"] body:not(.home-page) .zoom-toolbar .zt.on,
:root[data-theme="brand"] body:not(.home-page) .zoom-toolbar .zlvls button.on,
:root[data-theme="brand"] body:not(.home-page) .cat-chip.on,
:root[data-theme="brand"] body:not(.home-page) .ch-pill.on,
:root[data-theme="brand"] body:not(.home-page) .rec-tier-btn.on,
:root[data-theme="brand"] body:not(.home-page) .c0-bulk-btn.has,
:root[data-theme="brand"] body:not(.home-page) .queue-stat.on,
:root[data-theme="brand"] body:not(.home-page) .user-chip .link.on,
:root[data-theme="brand"] body:not(.home-page) .user-chip .admin-shortcut.on{
  background:#FFCC29 !important;
  border-color:#FFCC29 !important;
  color:#0F0F0F !important;
}

/* Option cards use the softer tint so the selected border remains visible
   without turning a whole form into a solid yellow block. */
:root[data-theme="brand"] body:not(.home-page) .addr-pick.selected,
:root[data-theme="brand"] body:not(.home-page) .cart-radio .opt.on,
:root[data-theme="brand"] body:not(.home-page) #defaultCart .opt.on,
:root[data-theme="brand"] body:not(.home-page) .cart-default .opt.on,
:root[data-theme="brand"] body:not(.home-page) .theme-opt.on,
:root[data-theme="brand"] body:not(.home-page) .tree .node.on{
  background:#FFF6CC !important;
  border-color:#FFCC29 !important;
  color:#0F0F0F !important;
}
:root[data-theme="brand"] body:not(.home-page) .addr-pick .addr-radio.on,
:root[data-theme="brand"] body:not(.home-page) .addr-pick.selected .addr-radio.on{
  border-color:#D9A900 !important;
}
:root[data-theme="brand"] body:not(.home-page) .addr-pick .addr-radio.on:after{
  background:#FFCC29 !important;
}

/* Dark dropdowns and compact cart selectors need the same foreground rule. */
:root[data-theme="brand"] body:not(.home-page) .lang-menu .opt.on,
:root[data-theme="brand"] body:not(.home-page) .theme-menu .opt.on,
:root[data-theme="brand"] body:not(.home-page) .cart-3 .c3-btn.active{
  background:#FFCC29 !important;
  border-color:#FFCC29 !important;
  color:#0F0F0F !important;
  box-shadow:0 0 0 2px rgba(217,169,0,.22) !important;
}
:root[data-theme="brand"] body:not(.home-page) .lang-menu .opt.on .desc,
:root[data-theme="brand"] body:not(.home-page) .theme-menu .opt.on .desc,
:root[data-theme="brand"] body:not(.home-page) .cart-3 .c3-btn.active .lbl{
  color:#0F0F0F !important;
}

/* The account chip has its own nested text colors in the header; reset those
   descendants when the profile link is the active item. */
:root[data-theme="brand"] body:not(.home-page) .user-chip .link.on .nm,
:root[data-theme="brand"] body:not(.home-page) .user-chip .link.on .role{
  color:#0F0F0F !important;
}

/* Counts and badges inside selected controls are black on a translucent
   black chip, including zero counts. */
:root[data-theme="brand"] body:not(.home-page) .cart-tabs a.on .badge-count,
:root[data-theme="brand"] body:not(.home-page) .cart-tabs .tab.on .n,
:root[data-theme="brand"] body:not(.home-page) .sb-all.active .cnt,
:root[data-theme="brand"] body:not(.home-page) .sb-type.active .cnt,
:root[data-theme="brand"] body:not(.home-page) .sb-child.active .cnt-mini,
:root[data-theme="brand"] body:not(.home-page) .cb-item.sel .cb-n,
:root[data-theme="brand"] body:not(.home-page) .c0-bulk-btn.has .n{
  background:rgba(15,15,15,.12) !important;
  color:#0F0F0F !important;
}
:root[data-theme="brand"] body:not(.home-page) .sb-type.active .chev,
:root[data-theme="brand"] body:not(.home-page) .sb-type.active.open .chev{
  background:rgba(15,15,15,.12) !important;
  color:#0F0F0F !important;
}
:root[data-theme="brand"] body:not(.home-page) .admin-side-nav a.is-active .side-dot{
  background:#0F0F0F !important;
}

/* Boolean toggles and progress indicators are selected states too. */
:root[data-theme="brand"] body:not(.home-page) .toggle.on{
  background:#FFCC29 !important;
  border-color:#D9A900 !important;
}
:root[data-theme="brand"] body:not(.home-page) .toggle.on:before{
  background:#0F0F0F !important;
}
:root[data-theme="brand"] body:not(.home-page) .status-strip .pip.on,
:root[data-theme="brand"] body:not(.home-page) .timeline .step.on{
  color:#0F0F0F !important;
}
:root[data-theme="brand"] body:not(.home-page) .status-strip .pip.on:before,
:root[data-theme="brand"] body:not(.home-page) .timeline .step.on:before{
  background:#FFCC29 !important;
  box-shadow:0 0 0 4px #FFF6CC !important;
}

/* Selected table rows and image thumbnails use the same tint/border while
   retaining their dense layout. */
:root[data-theme="brand"] body:not(.home-page) .pos-table tr.selected td,
:root[data-theme="brand"] body:not(.home-page) .pos-table tbody tr.selected td,
:root[data-theme="brand"] body:not(.home-page) .parts-table tr.rec-row.checked td{
  background:#FFF6CC !important;
}
:root[data-theme="brand"] body:not(.home-page) .pos-table tr.selected .qty-stepper,
:root[data-theme="brand"] body:not(.home-page) .gallery .thumbs img.on{
  border-color:#FFCC29 !important;
  box-shadow:0 0 0 2px rgba(255,204,41,.28) !important;
}

/* The explosion image action is a filled primary button even before the
   zoom level is selected. */
:root[data-theme="brand"] body:not(.home-page) .zoom-toolbar .zt{
  background:#FFCC29 !important;
  border-color:#FFCC29 !important;
  color:#0F0F0F !important;
}
:root[data-theme="brand"] body:not(.home-page) .zoom-toolbar .zt:hover:not(:disabled){
  background:#FFE06B !important;
  border-color:#D9A900 !important;
  color:#0F0F0F !important;
}

/* Disabled controls stay visibly disabled instead of looking selected. */
:root[data-theme="brand"] body:not(.home-page) button:disabled,
:root[data-theme="brand"] body:not(.home-page) .btn:disabled{
  opacity:.52;
  box-shadow:none;
}

/* Semantic destructive buttons keep their warning signal instead of joining
   the primary action palette. */
:root[data-theme="brand"] body:not(.home-page) .btn.danger,
:root[data-theme="brand"] body:not(.home-page) .btn.ghost.danger{
  background:#FFF5F5 !important;
  border-color:#ECC3C3 !important;
  color:#A32D2D !important;
  box-shadow:none;
}
:root[data-theme="brand"] body:not(.home-page) .btn.danger:hover:not(:disabled),
:root[data-theme="brand"] body:not(.home-page) .btn.ghost.danger:hover:not(:disabled){
  background:#FBE7E7 !important;
  border-color:#D98A8A !important;
  color:#8B2424 !important;
}