/* ============================================================
   VTL design system v3 — refined deep blue
   Navy #0A2A66 · accent sky #1CA4E0 · ink #101828
   Principles: quiet surfaces, one accent, strong type hierarchy,
   consistent 8px rhythm, no decoration that doesn't carry meaning.
   ============================================================ */
:root{
  --blue-900:#061B45; --blue-800:#0A2A66; --blue-700:#0F3A8A; --blue-600:#1A4FB0; --blue-500:#2F66CC;
  --blue-100:#E8EEF9; --blue-50:#F3F6FC;
  --accent:#1CA4E0; --accent-700:#127AA8; --accent-100:#E3F4FC;
  --brand:var(--blue-800); --brand-600:var(--blue-700); --brand-700:var(--blue-900); --brand-tint:var(--blue-100);
  --ink:#101828; --ink-2:#344054;
  --bg:#F4F6FA; --surface:#fff; --surface-2:#F8FAFC; --line:#E4E8EF; --line-2:#CDD5E0;
  --muted:#667085; --muted-2:#98A2B3;
  --ok:#067647; --ok-bg:#E6F4EE; --warn:#B42318; --warn-bg:#FDECEC; --amber:#93540A; --amber-bg:#FFF4E0; --info:#0F3A8A; --info-bg:#E8EEF9;
  --promo:#C2410C; --promo-bg:#FFF1E8;
  --r-sm:6px; --r:10px; --r-lg:14px; --r-xl:18px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow:0 1px 3px rgba(16,24,40,.06),0 10px 24px -8px rgba(16,24,40,.12);
  --shadow-lg:0 24px 60px -12px rgba(6,27,69,.35);
  --ring:0 0 0 3px rgba(26,79,176,.22);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box} html,body{margin:0}
body{font-family:var(--font);font-size:14.5px;line-height:1.5;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.hidden{display:none!important}
a{color:var(--blue-600);text-decoration:none} a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
h1{font-size:24px} h2{font-size:18px} h3{font-size:15px}
::selection{background:var(--accent-100)}

/* ---------- buttons ---------- */
button,.btn{font:inherit;font-size:14px;font-weight:600;cursor:pointer;border:1px solid transparent;border-radius:8px;padding:10px 16px;background:var(--brand);color:#fff;line-height:1.15;transition:background .15s,border-color .15s,box-shadow .15s,transform .05s;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;white-space:nowrap;box-shadow:var(--shadow-sm)}
button:hover,.btn:hover{background:var(--blue-700);text-decoration:none} button:active{transform:translateY(1px)}
button:focus-visible{outline:none;box-shadow:var(--ring)}
button.ghost,.btn.ghost{background:var(--blue-100);color:var(--blue-800);box-shadow:none} button.ghost:hover{background:#dbe5f6}
button.outline,.btn.outline{background:#fff;color:var(--ink-2);border-color:var(--line-2)} button.outline:hover,.btn.outline:hover{background:var(--surface-2);border-color:var(--muted-2);color:var(--ink)}
button.accent{background:var(--accent);color:#fff} button.accent:hover{background:var(--accent-700)}
button.danger{background:#fff;color:var(--warn);border-color:#F2C1BC;box-shadow:none} button.danger:hover{background:var(--warn-bg)}
button.small,.btn.small{padding:7px 12px;font-size:13px;border-radius:7px} button.block{width:100%}
button.link{background:none;color:var(--blue-600);box-shadow:none;padding:4px 6px} button.link:hover{background:var(--blue-50)}
button:disabled,button.busy{opacity:.5;cursor:not-allowed;pointer-events:none}

/* ---------- inputs ---------- */
input,select,textarea{font:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--line-2);border-radius:8px;width:100%;background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue-600);box-shadow:var(--ring)}
input:disabled,select:disabled{background:var(--surface-2);color:var(--muted-2)}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:32px}
label{font-size:12.5px;font-weight:600;color:var(--ink-2)} .field{margin-top:12px} .field label{display:block;margin-bottom:5px}
.row{display:flex;gap:12px;align-items:center} .wrap{max-width:1180px;margin:0 auto;padding:24px 20px} .spacer{flex:1}

/* ---------- app bar ---------- */
.appbar{position:sticky;top:0;z-index:30;background:linear-gradient(180deg,var(--blue-900),var(--blue-800));color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.appbar .inner{max-width:1180px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:18px;height:60px}
.appbar .tabrow{border-top:1px solid rgba(255,255,255,.08)}
.appbar .tabrow .tabs{max-width:1180px;margin:0 auto;padding:0 20px;display:flex;flex-wrap:wrap;align-items:stretch;gap:2px 4px;background:transparent}
.appbar .tabrow .tab{color:rgba(255,255,255,.72);border-radius:0;padding:11px 12px;display:flex;align-items:center;font-size:13.5px;white-space:nowrap;font-weight:600;border-bottom:2px solid transparent}
.appbar .tabrow .tab:hover{color:#fff;background:rgba(255,255,255,.06)}
.appbar .tabrow .tab.active{color:#fff;border-bottom-color:var(--accent)}
.appbar .logo{height:40px;width:auto;display:block;flex:none;margin-right:4px;background:#fff;border-radius:10px;padding:5px 10px}
.appbar .badge-role{font-size:11px;font-weight:700;color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.28);padding:3px 9px;border-radius:6px;letter-spacing:.06em;text-transform:uppercase;flex:none}
.appbar .tabs{background:transparent;padding:0;gap:2px;align-self:stretch;align-items:stretch}
.appbar .tab{color:rgba(255,255,255,.72);border-radius:0;padding:0 10px;display:flex;align-items:center;font-size:13.5px;white-space:nowrap;font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px}
.appbar .tab:hover{color:#fff;background:transparent} .appbar .tab.active{background:transparent;color:#fff;border-bottom-color:var(--accent);box-shadow:none}
.appbar button,.appbar .btn{box-shadow:none}
.appbar button.ghost{background:rgba(255,255,255,.1);color:#fff} .appbar button.ghost:hover{background:rgba(255,255,255,.18)}
.appbar .btn.outline,.appbar button.outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)} .appbar .btn.outline:hover,.appbar button.outline:hover{background:rgba(255,255,255,.1);color:#fff}
.appbar .cartbtn{background:var(--accent);color:#fff} .appbar .cartbtn:hover{background:var(--accent-700)}
.appbar .who{font-size:13px;color:rgba(255,255,255,.8);font-weight:500}
.subbar{background:var(--blue-800);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.subbar .inner{max-width:1180px;margin:0 auto;padding:14px 20px}
.crumbs{font-size:13px;color:rgba(255,255,255,.7)} .crumbs a{color:rgba(255,255,255,.85)} .crumbs b{color:#fff;font-weight:600}

/* ---------- cards, tabs, chips ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)} .card.pad{padding:18px}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--shadow-sm)}
.panel h3{font-size:14px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.tabs{display:inline-flex;gap:2px;background:#E9EDF3;padding:3px;border-radius:9px;flex-wrap:wrap}
.tab{padding:7px 14px;border-radius:7px;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;transition:.15s;user-select:none;white-space:nowrap} .tab:hover{color:var(--ink)} .tab.active{background:#fff;color:var(--blue-800);box-shadow:var(--shadow-sm)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:7px 13px;border-radius:999px;background:#fff;border:1px solid var(--line-2);font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:.15s;white-space:nowrap}
.chip:hover{border-color:var(--blue-600);color:var(--blue-800)} .chip.active{background:var(--blue-800);color:#fff;border-color:var(--blue-800)}
.sec{margin-top:28px} .sec h2{font-size:17px;margin-bottom:12px;display:flex;align-items:baseline;justify-content:space-between}
.sec .more{font-size:13px;font-weight:600;color:var(--blue-600)}

/* ---------- product grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:14px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .18s,border-color .18s,transform .18s;position:relative}
.pcard:hover{box-shadow:var(--shadow);border-color:var(--line-2);transform:translateY(-2px)}
.pcard .pimg{aspect-ratio:5/4;background:#fff center/contain no-repeat;background-size:auto 78%;display:flex;align-items:center;justify-content:center;color:var(--muted-2);font-size:12px;font-weight:500;border-bottom:1px solid var(--line);cursor:pointer}
.pcard .pimg.none{background:linear-gradient(180deg,#fff,var(--surface-2))}
.pcard .body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.pcard .pn{font-weight:700;font-size:14px;line-height:1.3;cursor:pointer} .pcard .pn:hover{color:var(--blue-600)}
.pcard .cat{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.pcard .fits{font-size:12.5px;color:var(--muted)}
.pcard .foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:8px;gap:8px}
.pcard .price{font-weight:700;font-size:16px;color:var(--ink);letter-spacing:-.01em} .pcard .price s{color:var(--muted-2);font-weight:500;font-size:12.5px;margin-right:6px}
.pcard .price.na{display:none}
.price .gstnote{font-size:10.5px;font-weight:500;color:var(--muted);margin-left:5px}
.badge{position:absolute;top:10px;left:10px;font-size:11px;font-weight:700;padding:4px 8px;border-radius:6px;z-index:1;letter-spacing:.02em}
.badge.promo{background:var(--promo);color:#fff} .badge.last{background:var(--amber-bg);color:var(--amber);border:1px solid #F2D9A8} .badge.out{background:#fff;color:var(--warn);border:1px solid #F2C1BC}
.stock{font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.stock::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.stock.in{color:var(--ok)} .stock.low{color:var(--amber)} .stock.out{color:var(--warn)} .stock.unk{color:var(--muted-2)}
.stepper{display:flex;align-items:center;gap:6px}
.stepper .qty{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;background:#fff}
.stepper .qty button{background:#fff;color:var(--ink-2);padding:7px 10px;border-radius:0;box-shadow:none;border:0;font-size:15px} .stepper .qty button:hover{background:var(--surface-2)}
.stepper .qty input{width:58px;text-align:center;font-size:14px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);border-radius:0;padding:7px 0;font-weight:600} .stepper .qty input:focus{box-shadow:none}
.stepper button.add{padding:8px 14px}
/* product cart control: Add to cart -> in-cart stepper */
.cartctl{display:flex;align-items:center;gap:8px;margin-top:8px;min-height:38px}
.cartctl button.add{flex:1;padding:9px 14px;font-weight:700}
.cartctl button.outbtn{background:var(--surface-2);color:var(--muted);border:1px dashed var(--line-2);box-shadow:none;cursor:not-allowed;flex:1}
.cartctl .qty{display:flex;align-items:center;border:1.5px solid var(--accent);border-radius:9px;overflow:hidden;background:#fff;flex:1}
.cartctl .qty button{background:#fff;color:var(--accent);padding:7px 12px;border-radius:0;box-shadow:none;border:0;font-size:17px;font-weight:700;flex:none} .cartctl .qty button:hover{background:var(--surface-2)}
.cartctl .qty input{flex:1;min-width:34px;width:100%;text-align:center;font-size:14.5px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);border-radius:0;padding:7px 0;font-weight:700;color:var(--ink)} .cartctl .qty input:focus{box-shadow:none}
.cartctl .incart-tag{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);flex:none}
.pcard.incart{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent),var(--shadow-sm);background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.pcard.incart::after{content:"✓ In cart";position:absolute;top:10px;right:10px;background:var(--accent);color:#fff;font-size:11px;font-weight:800;padding:4px 8px;border-radius:6px;z-index:1;letter-spacing:.02em}
.pcard.oos .pimg{opacity:.55;filter:grayscale(.4)}

/* ---------- status ---------- */
.status{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:6px;text-transform:capitalize;display:inline-flex;align-items:center;gap:6px;letter-spacing:.01em}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}
.st-submitted{background:var(--amber-bg);color:var(--amber)} .st-confirmed{background:var(--info-bg);color:var(--info)} .st-billed{background:#EEE8FB;color:#5B36B8}
.st-packed{background:#E6EDFB;color:#1E3A8A} .st-dispatched{background:#E0F1F9;color:#0E6A94} .st-delivered{background:var(--ok-bg);color:var(--ok)} .st-cancelled{background:var(--warn-bg);color:var(--warn)}

/* ---------- tables ---------- */
table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle}
th{background:var(--surface-2);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
tr:last-child td{border-bottom:0} tbody tr:hover{background:var(--blue-50)}
td.r,th.r{text-align:right;white-space:nowrap} td.n{font-variant-numeric:tabular-nums}
tbody tr.clickable{cursor:pointer}

/* ---------- KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;box-shadow:var(--shadow-sm);position:relative}
.kpi .n{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums} .kpi .l{color:var(--muted);font-size:11.5px;font-weight:600;margin-top:8px;text-transform:uppercase;letter-spacing:.05em} .kpi .sub{font-size:12px;color:var(--muted);font-weight:500;margin-top:2px}
.kpi::before{content:"";position:absolute;left:18px;top:14px;width:8px;height:8px;border-radius:50%;background:var(--blue-500);opacity:0}
.kpi.warn .n{color:var(--warn)} .kpi.ok .n{color:var(--ok)} .kpi.amber .n{color:var(--amber)}

/* ---------- empty / skeleton ---------- */
.empty{text-align:center;color:var(--muted);padding:48px 16px;font-size:14px} .empty .big{font-size:28px;margin-bottom:8px;opacity:.35}
.skel{background:linear-gradient(90deg,#eef1f5 25%,#f6f8fb 50%,#eef1f5 75%);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:8px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---------- login (Autoryx trade-portal layout) ---------- */
.login-scene{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(900px 500px at 100% 0%,#E3ECFB 0,transparent 60%),radial-gradient(700px 500px at 0% 100%,#EAF0FA 0,transparent 55%),#F5F7FB;color:var(--ink)}
.lg-top{display:flex;align-items:center;justify-content:space-between;padding:22px 36px}
.lg-top .pl{height:56px;width:auto} .lg-top .jx{text-align:right;line-height:1.15} .lg-top .jn{display:block;font-weight:900;font-size:22px;letter-spacing:.14em;color:#0A2A66} .lg-top .js{display:block;font-size:12px;font-weight:600;color:#6B7280;margin-top:2px}
.lg-ax{display:flex;align-items:center;gap:12px;margin-top:34px;padding-top:18px;border-top:1px solid #E3E8F0;max-width:520px;font-size:13px;color:#6B7280} .lg-ax img{height:26px;width:auto;flex:none} .lg-ax b{color:#141B2B}
.lg-main{flex:1;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:40px;max-width:1240px;width:100%;margin:0 auto;padding:20px 36px 40px}
.lg-axlinks{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px} .lg-axlinks a{display:inline-flex;align-items:center;padding:9px 14px;border-radius:999px;border:1px solid #D7DEE8;background:#fff;color:#141B2B;font-weight:600;font-size:14px;text-decoration:none} .lg-axlinks a.wa{background:#EAF8EE;border-color:#BFE6CB;color:#137A3A}
.lg-hero .axl{height:46px;width:auto;display:block;margin-bottom:22px}
.lg-hero .kicker{font-size:12.5px;letter-spacing:.12em;color:#2563EB;font-weight:800;text-transform:uppercase;margin-bottom:18px}
.lg-points{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px} .lg-points span{font-size:13px;font-weight:600;color:#1E3A8A;background:#EEF3FD;border:1px solid #D2DDF3;padding:7px 12px;border-radius:999px}
.lg-hero h1{font-size:clamp(38px,5.2vw,66px);line-height:1.04;letter-spacing:-.03em;font-weight:800;color:#141B2B;margin:0}
.lg-hero h1 span{color:#2563EB}
.lg-hero p{margin:24px 0 0;font-size:16px;line-height:1.6;color:#4B5565;max-width:520px} .lg-hero p b{color:#141B2B}
.login-card{background:#fff;border-radius:22px;padding:34px 36px;width:100%;max-width:560px;justify-self:end;box-shadow:0 20px 60px -20px rgba(20,27,43,.25),0 1px 2px rgba(20,27,43,.06);border:1px solid #E9EDF3}
.login-card .logo{height:78px;width:auto;display:block;margin-bottom:6px}
.login-card .powered-by{font-size:11px;color:#8A94A6;margin-bottom:14px;display:flex;align-items:center;gap:6px}
.login-card .powered-by a{display:inline-flex;align-items:center}
.login-card .powered-by .axlogo{height:16px;width:auto;display:block}
.login-card .signing{font-size:14px;color:#4B5565;padding-bottom:18px;border-bottom:1px solid #E9EDF3;margin-bottom:22px} .login-card .signing b{color:#141B2B}
.login-card h1{font-size:26px;letter-spacing:-.02em;margin-bottom:4px}
.login-card .sub{color:#6B7280;margin:0 0 6px;font-size:14px}
.login-card .field{margin-top:16px} .login-card label{font-size:14px;color:#141B2B}
.login-card input{padding:14px 16px;font-size:16px;border-radius:10px;border-color:#D7DEE8;background:#FAFBFD}
.login-card input:focus{background:#fff}
.login-card button.block{margin-top:22px;padding:15px 18px;font-size:16px;border-radius:12px;background:#0A2A66} .login-card button.block:hover{background:#0E3A8A}
.login-card .help{margin-top:26px;padding-top:20px;border-top:1px solid #E9EDF3}
.login-card .help .q{font-size:13.5px;color:#6B7280;margin-bottom:10px}
.login-card .help .row{flex-wrap:wrap;gap:10px}
.login-card .help a{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;border:1px solid #D7DEE8;background:#F5F7FB;color:#141B2B;font-weight:600;font-size:14px;text-decoration:none}
.login-card .help a.wa{background:#EAF8EE;border-color:#BFE6CB;color:#137A3A}
.login-card .help a svg{width:16px;height:16px}
.login-card .role-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#0A2A66;background:#FFF3C4;padding:4px 10px;border-radius:6px;margin-bottom:12px}
.lg-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:18px 36px;font-size:13px;color:#6B7280;border-top:1px solid #E9EDF3}
@media(max-width:900px){
  .lg-top{padding:16px 20px} .lg-top .pl{height:42px} .lg-top .jn{font-size:15px} .lg-top .js{display:none} .lg-hero .axl{height:34px}
  .lg-main{grid-template-columns:1fr;gap:18px;padding:4px 16px 28px;align-content:start}
  .lg-hero{order:2;text-align:left} .lg-hero .kicker{margin-bottom:10px;font-size:11px} .lg-hero h1{font-size:30px} .lg-hero h1 br{display:none} .lg-hero p{font-size:14px;margin-top:10px}
  .login-card{order:1;max-width:none;padding:24px 20px;border-radius:18px}
  .login-card .logo{height:48px}
  .lg-foot{padding:14px 20px;font-size:12px;justify-content:center;text-align:center}
}
.err{color:var(--warn);font-size:13px;margin-top:12px;background:var(--warn-bg);padding:9px 12px;border-radius:8px}
.warnbox{color:var(--amber);font-size:12.5px;background:var(--amber-bg);padding:7px 10px;border-radius:7px;margin-bottom:6px;font-weight:500}

/* ---------- modal (centered) ---------- */
.modal{position:fixed;inset:0;background:rgba(6,27,69,.5);z-index:60;display:flex;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(3px);animation:fade .15s ease-out}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal .box{background:#fff;border-radius:var(--r-lg);width:min(620px,100%);max-height:90vh;overflow:auto;box-shadow:var(--shadow-lg);animation:pop .18s ease-out}
@keyframes pop{from{transform:translateY(8px) scale(.985);opacity:0}to{transform:none;opacity:1}}
.modal .box.wide{width:min(960px,100%)}
.mhead{display:flex;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2}
.mhead h2{font-size:17px} .mbody{padding:20px 22px 22px}
.mbody h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:20px 0 8px;font-weight:700}
.mbody h4:first-child{margin-top:0}
.kv{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.kv td{padding:9px 12px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:top} .kv tr:last-child td{border-bottom:0}
.kv td.k{width:150px;color:var(--muted);font-weight:600;background:var(--surface-2);font-size:12.5px} .kv td.k2{width:150px;color:var(--muted);font-weight:600;background:var(--surface-2);border-left:1px solid var(--line);font-size:12.5px}
.cline{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:var(--r);padding:12px} .cline .g{flex:1;min-width:0}

/* ---------- drawer (cart) ---------- */
.scrim{position:fixed;inset:0;background:rgba(6,27,69,.45);z-index:50;backdrop-filter:blur(2px)}
.drawer{position:fixed;inset:0 0 0 auto;z-index:51;display:flex;justify-content:flex-end}
.drawer .panel{width:min(440px,100%);background:#fff;height:100%;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);border:0;border-radius:0;padding:0}
.drawer .dh{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center} .drawer .db{flex:1;overflow:auto;padding:16px 20px;display:flex;flex-direction:column;gap:10px} .drawer .df{padding:16px 20px;border-top:1px solid var(--line);background:var(--surface-2)}
.cartbtn{position:relative} .cartbtn .cbadge{position:absolute;top:-7px;right:-7px;background:var(--promo);color:#fff;border-radius:999px;font-size:11px;font-weight:700;min-width:19px;height:19px;display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid var(--blue-800)}
.cartbtn .cbadge.zero{display:none}

/* ---------- tracker ---------- */
.track{display:flex;margin:14px 0 18px;padding:4px 0}
.track .tk{flex:1;text-align:center;position:relative}
.track .tk:not(:first-child)::before{content:"";position:absolute;top:12px;left:-50%;width:100%;height:2px;background:var(--line);z-index:0}
.track .tk.done:not(:first-child)::before{background:var(--blue-600)}
.track .tk .dot{position:relative;z-index:1;width:24px;height:24px;border-radius:50%;margin:0 auto;background:#fff;border:2px solid var(--line-2);color:var(--muted-2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.track .tk.done .dot{background:var(--blue-600);border-color:var(--blue-600);color:#fff} .track .tk.now .dot{box-shadow:0 0 0 4px rgba(26,79,176,.18)}
.track .tk .tl{font-size:11.5px;font-weight:600;margin-top:6px;color:var(--muted)} .track .tk.done .tl{color:var(--ink)} .track .tk .tt{font-size:10.5px;color:var(--muted-2);margin-top:2px;min-height:12px}

/* ---------- promotions ---------- */
.promo-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.promo-strip.single{grid-template-columns:1fr}
.promo-card{border-radius:var(--r-lg);position:relative;overflow:hidden;min-height:150px;display:flex;flex-direction:column;justify-content:flex-end;cursor:pointer;color:#fff;background:linear-gradient(135deg,var(--blue-900),var(--blue-600));box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s}
.promo-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.promo-card .img{position:absolute;inset:0;background:center/cover no-repeat}
.promo-card .img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,27,69,.05) 20%,rgba(6,27,69,.82) 100%)}
.promo-card .txt{position:relative;z-index:1;padding:18px 20px}
.promo-card .pt{font-size:17px;font-weight:700;line-height:1.25;letter-spacing:-.01em} .promo-card .ps{font-size:13px;opacity:.85;margin-top:3px}
.promo-card .pb{position:absolute;right:14px;top:12px;z-index:1;background:#fff;color:var(--blue-800);padding:4px 9px;border-radius:6px;font-size:11.5px;font-weight:700;letter-spacing:.02em}
.promo-card.hasimg{min-height:200px}
.promo-strip.single .promo-card{min-height:220px}

/* ---------- category tiles ---------- */
.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.ctile{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;transition:.18s;text-align:center;color:var(--ink);text-decoration:none;display:block}
.ctile:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:var(--line-2);text-decoration:none}
.ctile .cimg{aspect-ratio:1/1;background:#fff center/72% no-repeat;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line)}
.ctile .cimg.none{background:linear-gradient(180deg,#fff,var(--surface-2))} .ctile .cimg svg{width:36px;height:36px;color:var(--line-2)}
.ctile .cname{font-weight:600;font-size:13px;padding:10px 8px 2px;line-height:1.25} .ctile .ccount{font-size:11.5px;color:var(--muted);padding-bottom:10px}

/* ---------- toast / misc ---------- */
.pa-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:11px 16px;border-radius:9px;opacity:0;transition:.25s;z-index:99;font-weight:500;font-size:13.5px;box-shadow:var(--shadow-lg);max-width:92vw}
.pa-toast.show{opacity:1;transform:translate(-50%,0)} .pa-toast.err{background:var(--warn)} .pa-toast.ok{background:var(--ok)}
.searchbar{display:flex;gap:8px;width:100%} .searchbar input{font-size:15px;padding:12px 16px;border:0;border-radius:9px} .searchbar button{border-radius:9px}
.count{color:var(--muted);font-size:13px;font-weight:500}
.loadmore{display:flex;justify-content:center;margin:18px 0}
.invbox{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .invbox input{width:180px}
.thumb{background:#fff center/contain no-repeat;border:1px solid var(--line);border-radius:6px}
hr.sep{border:0;border-top:1px solid var(--line);margin:16px 0}
@media(max-width:560px){ .cartctl{flex-wrap:wrap;gap:6px} .cartctl .incart-tag{display:none} .cartctl .qty{flex:1 1 100%;border-radius:10px} .cartctl .qty button{padding:10px 0;min-width:44px;font-size:19px} .cartctl .qty input{font-size:16px;padding:9px 0;min-width:40px} .pcard .cartctl button.add{width:100%;padding:10px 8px} .grid{grid-template-columns:repeat(2,1fr);gap:10px} .pcard .stepper{flex-wrap:wrap} .pcard .stepper .qty{flex:1} .pcard .stepper .qty input{width:100%;min-width:30px} .pcard .stepper button.add{flex:1 1 100%!important} .wrap{padding:16px 14px} .appbar .inner{height:56px;gap:10px} .appbar .logo{height:21px} .promo-card{min-height:130px} }

/* Autoryx credit footer on logged-in screens */
.app-foot{display:flex;align-items:center;justify-content:center;gap:6px;padding:22px 16px 30px;color:#9AA3B2;font-size:11px}
.app-foot a{display:inline-flex;align-items:center}
.app-foot .axlogo{height:15px;width:auto;display:block;opacity:.85}
.app-foot a:hover .axlogo{opacity:1}

/* Older Android browsers without CSS aspect-ratio: give image boxes a real height */
@supports not (aspect-ratio: 1 / 1) {
  .pcard .pimg{height:150px}
  .ctile .cimg{height:112px}
  .pdet .pimg{height:280px}
  .relcard .thumb{height:90px}
}
/* price: no negative tracking (it made ₹ swallow the first digit on some phones) */
.pcard .price{letter-spacing:normal}
.pcard .price b,.pcard .price strong{letter-spacing:normal}
/* install button in the app bar */
.appbar .installbtn{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3);box-shadow:none}
.appbar .installbtn:hover{background:rgba(255,255,255,.2)}

/* Tally read screens */
#pane-tally .kpi-row,#pane-salesnav .kpi-row,#modal .kpi-row{display:flex;gap:12px;flex-wrap:wrap}
#pane-tally .kpi-row .kpi,#pane-salesnav .kpi-row .kpi,#modal .kpi-row .kpi{flex:1;min-width:150px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
#pane-tally .kpi .n,#pane-salesnav .kpi .n,#modal .kpi .n{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
#pane-tally .kpi .l,#pane-salesnav .kpi .l,#modal .kpi .l{color:var(--muted);font-size:12px;font-weight:600;margin-top:6px}
#pane-tally .kpi .sub,#pane-salesnav .kpi .sub,#modal .kpi .sub{color:var(--muted);font-size:11.5px;margin-top:2px}
#pane-tally .kpi.amber .n,#pane-salesnav .kpi.amber .n,#modal .kpi.amber .n{color:var(--amber)} #pane-tally .kpi.warn .n,#pane-salesnav .kpi.warn .n,#modal .kpi.warn .n{color:var(--warn)} #pane-tally .kpi.ok .n,#pane-salesnav .kpi.ok .n,#modal .kpi.ok .n{color:var(--ok)}
#pane-salesnav .trend{display:flex;align-items:flex-end;gap:6px;height:130px;padding-top:10px}
#pane-salesnav .trend .col,#modal .trend .col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px}
#pane-salesnav .trend .b,#modal .trend .b{width:70%;background:var(--blue-600);border-radius:4px 4px 0 0;min-height:2px}
#pane-salesnav .trend .d,#modal .trend .d{font-size:10px;color:var(--muted);text-align:center}
#pane-account .kpi .n{font-size:20px} #pane-account .kpi .l{font-size:12px;color:var(--muted);font-weight:600;margin-top:5px} #pane-account .kpi .sub{font-size:11.5px;color:var(--muted)} #pane-account .kpi.warn .n{color:var(--warn)} #pane-account .kpi.ok .n{color:var(--ok)}
#modal .trend{display:flex;align-items:flex-end;gap:6px;height:130px;padding-top:10px}
#pane-tally .trend{display:flex;align-items:flex-end;gap:10px;height:170px;padding-top:10px}
#pane-tally .trend .col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px}
#pane-tally .trend .b{width:70%;background:var(--blue-600);border-radius:4px 4px 0 0;min-height:4px}
#pane-tally .trend .d{font-size:11px;color:var(--muted)}

/* loyalty */
.loy-strip{display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,#FFF7E0,#FFFDF5);border:1px solid #F5D66B;border-radius:12px;padding:10px 14px;margin-bottom:14px;text-decoration:none;color:var(--ink);flex-wrap:wrap}
.loy-strip .star{color:#D99A00;font-size:18px} .loy-strip .go{margin-left:auto;color:var(--blue-800);font-weight:700;font-size:13px}
.loy-card{background:linear-gradient(135deg,#FFF7E0,#fff);border-color:#F5D66B}
.stab{width:100%;border-collapse:collapse;font-size:13.5px} .stab td{padding:7px 6px;border-bottom:1px solid var(--line)} .stab .r{text-align:right}

/* product detail spec box */
.pdet .pdet-name{font-size:17px;font-weight:700;color:var(--ink);margin:12px 0 10px;line-height:1.3}
.pdet .specbox{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:6px 0 4px;background:#fff}
.pdet .spec-h{background:var(--surface-2);padding:8px 14px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.pdet .specbox table.kv{margin:0;width:100%} .pdet .specbox td{padding:9px 14px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:top}
.pdet .specbox tr:last-child td{border-bottom:0} .pdet .specbox td.k{color:var(--muted);width:120px;font-weight:600;white-space:nowrap}

/* fitment inside the details box */
.pdet .fitlist{display:flex;flex-wrap:wrap;gap:6px}
.pdet .fitchip{display:inline-block;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:3px 9px;font-size:12.5px;font-weight:600;color:var(--ink)}

/* phones: tables in the dealer / rep apps become cards (see PA.cardTables) */
@media (max-width: 640px) {
  table.mc, table.mc tbody { display: block; width: 100%; }
  table.mc thead { display: none; }
  table.mc tr { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 6px 14px; padding: 11px 13px; margin: 0 0 8px; border: 1px solid var(--line, #E5E9F0); border-radius: 12px; background: #fff; }
  table.mc td { display: block; padding: 0 !important; border: 0 !important; text-align: left !important; min-width: 0; overflow-wrap: anywhere; white-space: normal !important; }
  table.mc td::before { content: attr(data-label); display: block; font-size: 10.5px; font-weight: 600; color: var(--muted, #64748B); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 1px; }
  table.mc td:first-child { grid-column: 1 / -1; font-size: 15px; }
  table.mc td:first-child::before, table.mc td[data-label=""]::before { display: none; }
  table.mc td[colspan] { grid-column: 1 / -1; }
  table.mc td:empty { display: none; }
  table.mc input, table.mc select { max-width: 100%; }
  table.mc .qty { display: inline-flex; max-width: 100%; } table.mc .qty input { width: 54px; min-width: 0; } table.mc .qty button { padding: 7px 11px; }
  table.mc.mc-num td:first-child { display: none; } table.mc.mc-num td:nth-child(2) { grid-column: 1 / -1; font-size: 15px; } table.mc.mc-num td:nth-child(2)::before { display: none; }
  body[data-role=customer] .kv tr, body[data-role=fr] .kv tr { display: grid; grid-template-columns: 38% 62%; }
  body[data-role=customer] .kv td, body[data-role=fr] .kv td { width: auto !important; border-left: 0 !important; min-width: 0; overflow-wrap: anywhere; }
  .tk .tl { font-size: 10.5px; overflow-wrap: anywhere; } .tk .tt { font-size: 9.5px; }
}