/* ==========================================================
   TRADE — air conditioning wholesale
   Site-specific only. Design system: ../shared/brand.css
   ========================================================== */
/* ---------- TRADE-specific ---------- */
.acctbar{background:var(--surface);border-bottom:1px solid var(--line);font-size:.86rem}
.acctbar .wrap{display:flex;align-items:center;gap:.7rem 1.2rem;flex-wrap:wrap;
  padding-top:.85rem;padding-bottom:.85rem}
.acctbar.pending{background:#FFF8EE;border-color:#F2DEBE}
.acctbar.verified{background:#EEFBF5;border-color:#C9EBDC}
.acctbar b{font-weight:800}
.acctbar .mini{border:1.5px solid var(--line-2);border-radius:999px;padding:.35rem .95rem;
  font-weight:700;font-size:.8rem;background:var(--surface)}
.acctbar .mini:hover{border-color:var(--g2);color:var(--g2)}

.main{display:grid;grid-template-columns:262px 1fr;gap:2rem;padding-top:2rem;
  padding-bottom:3rem;align-items:start}
@media(max-width:940px){.main{grid-template-columns:1fr}
  .side{position:static !important;max-height:none !important}}
.side{position:sticky;top:118px;max-height:calc(100vh - 140px);overflow:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1.15rem}
.fgroup{padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid var(--line)}
.fgroup:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.fgroup h4{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.7rem}
.fgroup label{display:flex;align-items:center;gap:.5rem;font-size:.86rem;
  padding:.18rem 0;cursor:pointer}
.fgroup label:hover{color:var(--g2)}
.fgroup input[type=checkbox]{accent-color:var(--g2);width:15px;height:15px;flex:0 0 auto}
.fgroup .cnt{margin-left:auto;font-size:.74rem;color:var(--muted-2)}
.rangerow{display:flex;gap:.4rem;align-items:center}
.rangerow input{padding:.4rem .55rem;font-size:.84rem}

.toolbar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.toolbar h1{font-size:1.35rem;flex:1;min-width:200px}
.toolbar h1 small{display:block;font-size:.8rem;font-weight:500;color:var(--muted);
  letter-spacing:0;margin-top:.15rem}

.thumb{height:132px;background:linear-gradient(135deg,#F1F3FA,#E6EAF6);position:relative;
  display:grid;place-items:center;border-bottom:1px solid var(--line)}
.thumb svg{width:52px;height:52px;opacity:.85}
.thumb .fg{position:absolute;top:.55rem;left:.55rem}
.cbody{padding:.85rem .95rem 1rem;display:flex;flex-direction:column;flex:1;gap:.45rem}
.sku{font-family:var(--mono);font-size:.7rem;color:var(--muted-2);letter-spacing:.02em}
.cbody h3{font-size:.92rem;font-weight:700;line-height:1.3}
.specs{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.1rem}
.spec{font-size:.68rem;font-weight:700;background:#EEF1F8;color:var(--muted);
  border-radius:5px;padding:.13rem .4rem}
.stock{font-size:.76rem;font-weight:700;margin-top:auto;padding-top:.4rem}
.stock.in{color:var(--ok)}.stock.low{color:var(--warn)}.stock.out{color:var(--stop)}
.pricebox{border-top:1px solid var(--line);margin-top:.55rem;padding-top:.6rem;
  display:flex;align-items:flex-end;justify-content:space-between;gap:.5rem}
.trade{font-size:1.22rem;font-weight:800;letter-spacing:-.02em}
.trade small{display:block;font-size:.64rem;font-weight:700;color:var(--muted);
  letter-spacing:.08em;text-transform:uppercase}
.rrp{font-size:.72rem;color:var(--muted-2)}
.locked{font-size:.8rem;color:var(--muted);font-weight:600}
.addbtn{background:var(--grad);color:#fff;border-radius:8px;padding:.5rem .9rem;
  font-weight:700;font-size:.82rem;white-space:nowrap}
.addbtn:hover{filter:brightness(1.08)}
.addbtn[disabled]{background:#E6EAF3;color:var(--muted-2);cursor:not-allowed;filter:none}
.instal{font-size:.7rem;color:var(--muted);margin-top:.2rem}
.empty{text-align:center;padding:3rem 1rem;color:var(--muted);
  background:var(--surface);border:1px dashed var(--line-2);border-radius:var(--r)}

.lt{display:flex;gap:.7rem;padding:.75rem 0;border-bottom:1px solid var(--line)}
.lt:last-child{border-bottom:0}
.lt .info{flex:1;min-width:0}
.lt h4{font-size:.85rem;font-weight:700}
.qty{display:flex;align-items:center;gap:.4rem;margin-top:.35rem}
.qty button{width:26px;height:26px;border:1px solid var(--line-2);border-radius:6px;
  font-weight:700;color:var(--muted)}
.qty button:hover{border-color:var(--g2);color:var(--g2)}
.qty span{min-width:28px;text-align:center;font-weight:700;font-size:.85rem}
.lp{font-weight:800;font-size:.9rem;white-space:nowrap}
.note{background:#F3F5FC;border:1px solid var(--line);border-radius:8px;
  padding:.7rem .8rem;font-size:.8rem;color:var(--muted);margin-bottom:.9rem}
.note.warn{background:#FFF8EE;border-color:#F2DEBE;color:#8A5A16}

.demobar{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--ink-2);
  color:#B9C2DA;font-family:var(--mono);font-size:.7rem;
  border-top:1px solid rgba(255,255,255,.1)}
.demobar .wrap{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  padding-top:.45rem;padding-bottom:.45rem}
.demobar strong{letter-spacing:.08em;text-transform:uppercase;color:#6C779A}
.demobar button{border:1px solid #2A3358;border-radius:999px;padding:.15rem .7rem;
  font-family:var(--mono);font-size:.7rem;color:#C9D2E8}
.demobar button.on{background:var(--grad);border-color:transparent;color:#fff}
body{padding-bottom:2.4rem}

/* --- 5. product / course cards: proper bordered boards --- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:1.15rem}
.card{background:var(--surface);border:1px solid var(--line-2);border-radius:14px;
  overflow:hidden;display:flex;flex-direction:column;transition:.18s;
  box-shadow:0 1px 0 rgba(16,22,41,.05),0 4px 12px -6px rgba(16,22,41,.16)}
.card:hover{border-color:var(--g2);
  box-shadow:0 0 0 3px rgba(83,108,255,.14),0 18px 34px -18px rgba(16,22,41,.4);
  transform:translateY(-3px)}
.thumb{height:150px;background:linear-gradient(160deg,#F3F6FD 0%,#E4E9F6 100%);
  position:relative;display:grid;place-items:center;border-bottom:1px solid var(--line-2)}
.thumb svg{width:56px;height:56px;opacity:.95}
.cbody{padding:.95rem 1rem 1rem;display:flex;flex-direction:column;flex:1;gap:.42rem}
.pricebox{border-top:1px solid var(--line-2);margin:.7rem -1rem -1rem;
  padding:.85rem 1rem;background:#F4F6FC;display:flex;align-items:flex-end;
  justify-content:space-between;gap:.5rem}
.side{background:var(--surface);border:1px solid var(--line-2);border-radius:14px;
  box-shadow:0 1px 0 rgba(16,22,41,.05),0 4px 12px -6px rgba(16,22,41,.14)}
.acctbar{border-bottom:1px solid var(--line-2)}
.empty{border:2px dashed var(--line-2);background:var(--surface)}


/* ---------- open a trade account ---------- */
.acctsec{background:var(--surface);border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2)}
.acctgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:2.5rem;align-items:start;
  max-width:1000px;margin:0 auto}
@media(max-width:880px){.acctgrid{grid-template-columns:1fr;gap:2rem}}
.acctwhat h3{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.8rem}
.acctwhat ul{list-style:none;display:grid;gap:.6rem}
.acctwhat li{display:flex;gap:.7rem;font-size:.92rem;color:var(--muted);line-height:1.5}
.acctwhat li::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--grad);margin-top:.5rem;flex:0 0 auto}
.acctwhat li b{color:var(--text);font-weight:700}
.acctform{background:var(--paper);border:1px solid var(--line-2);border-radius:14px;
  padding:1.6rem;box-shadow:0 1px 0 rgba(16,22,41,.05),0 8px 24px -14px rgba(16,22,41,.28)}
.acctform h3{font-size:1.15rem;margin-bottom:.2rem}
.acctform .lead{font-size:.86rem;color:var(--muted);margin-bottom:1.2rem}
.acctform .fld span i{font-style:normal;font-weight:500;text-transform:none;
  letter-spacing:0;color:var(--muted-2)}
.acctform input{background:var(--surface)}
.fielderr{font-size:.82rem;color:var(--stop);min-height:1.2em;margin-bottom:.5rem}
.smallprint{font-size:.8rem;color:var(--muted);margin-top:.9rem;text-align:center}
.smallprint a{color:var(--g2);font-weight:700}