/* ============================================================
   Potauto 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 .logo{height:24px;width:auto;display:block;flex:none;margin-right:4px}
.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 12px;display:flex;align-items:center;font-size:14px;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}
.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.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}

/* ---------- 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 .ax{height:44px;width:auto} .lg-top a{font-weight:600;color:var(--muted);font-size:14px}
.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-hero .kicker{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;letter-spacing:.14em;color:#2563EB;font-weight:700;text-transform:uppercase;margin-bottom:22px}
.lg-hero h1{font-size:clamp(40px,5.6vw,72px);line-height:1.02;letter-spacing:-.035em;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:58px;width:auto;display:block;margin-bottom:12px}
.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:#2563EB} .login-card button.block:hover{background:#1D4ED8}
.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:#2563EB;background:#E8EEF9;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 .ax{height:36px}
  .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){ .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} }