@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
img[src*="21chips-mark"] { max-width: 88px; max-height: 66px; width: auto; height: auto; }
.mn-logo img[src*="21chips-mark"] { width: 34px; height: 28px; max-width: 34px; max-height: 28px; }
.sh-brand img[src*="21chips-mark"] { width: 44px; height: 36px; max-width: 44px; max-height: 36px; }
:root {
  --blue: #185FA5;
  --blue-hover: #0C447C;
  --red: #A32D2D;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  background: #f5f6f8;
  color: #1a1a1a;
  font-size: 12px;
  min-height: 100vh;
}
a { color: var(--blue); text-decoration: none; }
button, input, select, textarea { font-family: inherit; }

/* MallNav — same geometry as 51 */
.mall-nav {
  height: 52px;
  background: #fff;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.mn-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
  margin-right: 10px;
  color: #114C86;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .4px;
  flex: 0 0 auto;
}
.mn-logo img { width: 34px; height: 28px; object-fit: contain; }
.mn-links { display: flex; align-items: center; gap: 4px; }
.mn-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 14px;
  color: #666;
  font-size: 13px;
  font-weight: 400;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.mn-link:hover { background: #f0f4ff; color: var(--blue); }
.mn-link-active { background: #f0f4ff; color: var(--blue); font-weight: 500; }
.mn-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mn-service { color: #555; font-size: 12px; padding: 0 6px; }
.mn-cart {
  position: relative;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: #333;
  border-radius: 6px;
}
.mn-cart:hover { background: #f5f5f5; }
.mn-cart-num {
  position: absolute; top: -3px; right: -5px;
  background: var(--red); color: #fff;
  font-size: 9px; font-weight: 600;
  padding: 2px 4px; border-radius: 8px; line-height: 1;
}
.mn-user { font-size: 12px; color: #1a1a1a; padding: 5px 8px; border-radius: 6px; }
.mn-user:hover { color: var(--blue); background: #f5f8fc; }
.mn-btn {
  font-size: 12px; padding: 5px 14px; border-radius: 6px;
  border: 1px solid #ddd; background: transparent; color: #1a1a1a; cursor: pointer;
}
.mn-btn:hover { border-color: var(--blue); color: var(--blue); }
.mn-btn-blue { background: var(--blue); color: #fff; border-color: var(--blue); }
.mn-btn-blue:hover { background: var(--blue-hover); color: #fff; }

.page { width: min(1120px, calc(100% - 32px)); margin: 16px auto 40px; }
.page-title {
  font-size: 16px; font-weight: 650; color: #1a1a1a; margin: 0 0 4px;
}
.page-sub { margin: 0 0 14px; color: #888; font-size: 12px; }

.order-search {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 12px 16px 14px;
  margin-bottom: 10px;
}
.osf { display: flex; flex-direction: column; gap: 6px; }
.osf label { margin: 0; font-size: 12px; color: #888; }
.osf input, .osf select {
  height: 32px; border: 1px solid #ddd; border-radius: 6px;
  padding: 0 10px; font-size: 12px; color: #1a1a1a; outline: none; background: #fff;
}
.osf input:focus, .osf select:focus { border-color: var(--blue); }
.os-no { width: 150px; }
.os-date { width: 138px; }
.os-status { width: 140px; }
.osf-kw { flex: 1; min-width: 220px; position: relative; }
.osf-kw input { width: 100%; padding-left: 30px; }
.osf-kw .s-icon {
  position: absolute; left: 9px; bottom: 9px; color: #99a; pointer-events: none;
}
.date-sep { color: #bbb; padding-bottom: 8px; }
.search-go {
  height: 32px; padding: 0 22px; background: var(--blue); color: #fff;
  border: none; border-radius: 6px; font-size: 13px; cursor: pointer; font-weight: 500;
}
.search-go:hover { background: var(--blue-hover); }
.search-reset {
  height: 32px; padding: 0 14px; background: #fff; color: #666;
  border: 1px solid #ddd; border-radius: 6px; font-size: 12px; cursor: pointer;
}
.search-reset:hover { border-color: var(--blue); color: var(--blue); }
.result-bar {
  display: flex; align-items: center; gap: 8px;
  margin: 0 2px 10px; font-size: 12px; color: #666;
}
.result-bar .sp { margin-left: auto; color: #999; }
.result-bar b { color: var(--red); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 16px; border: 0; border-radius: 6px;
  background: var(--blue); color: #fff; font-size: 13px; font-weight: 500; cursor: pointer;
}
.btn:hover { background: var(--blue-hover); color: #fff; }
.btn-ghost {
  background: #fff; color: #555; border: 1px solid #ddd;
}
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); background: #fff; }
.btn-sm { height: 28px; padding: 0 12px; font-size: 12px; }

.f-opts { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.f-opt {
  padding: 3px 10px; border-radius: 5px; cursor: pointer;
  color: #555; border: 1px solid transparent; font-size: 12px;
}
.f-opt:hover { color: var(--blue); background: #f0f4ff; }
.f-opt.on { background: #e8f0fe; color: var(--blue); border-color: #b3cfe8; font-weight: 500; }
.f-cnt {
  font-size: 10px; background: #eef1f5; color: #888;
  border-radius: 8px; padding: 0 5px; line-height: 14px; margin-left: 2px;
}
.f-opt.on .f-cnt { background: var(--blue); color: #fff; }

.filter-bar {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid #eee; border-radius: 8px;
  padding: 8px 14px; margin-bottom: 10px; font-size: 12px; color: #666;
}
.filter-bar input {
  margin-left: auto; height: 28px; border: 1px solid #ddd; border-radius: 6px;
  padding: 0 10px; width: 200px; font-size: 12px; outline: none;
}
.filter-bar input:focus { border-color: var(--blue); }

.order-list { display: flex; flex-direction: column; gap: 12px; }
.order-card {
  background: #fff; border: 1px solid #eee; border-radius: 10px; overflow: hidden;
}
.order-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.order-head {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 16px; background: #f8fafc; border-bottom: 1px solid #f0f0f0; font-size: 12px;
}
.order-head .no { color: #333; font-weight: 650; }
.order-head .date { color: #999; }
.order-head .sp { margin-left: auto; }
.col-head, .order-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) minmax(140px, 1.1fr) 88px 110px 110px;
  gap: 12px;
  align-items: center;
  padding: 8px 16px;
  font-size: 12px;
}
.col-head {
  background: #fafbfc;
  border-bottom: 1px solid #f0f0f0;
  color: #888;
  font-weight: 650;
  letter-spacing: .2px;
}
.order-row { border-bottom: 1px solid #f5f5f5; padding: 12px 16px; }
.order-row:last-of-type { border-bottom: 0; }
.prod {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.thumb {
  width: 52px; height: 40px; border-radius: 6px; background: #f4f7fb;
  display: flex; align-items: center; justify-content: center; color: #9ab;
  font-size: 10px; font-weight: 700; flex: 0 0 auto;
}
.mpn { font-weight: 650; color: var(--blue); font-family: "SF Mono", Consolas, monospace; font-size: 12.5px; }
.brand { color: #999; margin-top: 2px; }
.desc { color: #555; line-height: 1.45; }
.desc small { display: block; color: #999; margin-top: 2px; }
.qty, .unit { color: #555; }
.unit, .line { font-variant-numeric: tabular-nums; }
.line { font-weight: 650; color: #1a1a1a; }
.order-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-top: 1px solid #f0f0f0; background: #fff;
}
.total { margin-left: auto; font-size: 12px; color: #666; }
.total b { color: #114C86; font-size: 15px; font-weight: 700; margin-left: 4px; }

.badge {
  display: inline-flex; align-items: center;
  border-radius: 4px; font-size: 12px; padding: 2px 8px; font-weight: 500;
}
.badge-ok { background: #e6f5ec; color: #1e7a44; }
.badge-warn { background: #fdf6e3; color: #c9910d; }
.badge-info { background: #e8f0fe; color: var(--blue); }
.badge-mute { background: #eef1f5; color: #778; }

.layout { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 12px; }
.side {
  background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 8px;
  height: fit-content;
}
.side a {
  display: block; padding: 9px 12px; border-radius: 6px;
  color: #333; font-size: 13px;
}
.side a:hover { background: #f5f8fc; color: var(--blue); }
.side a.on { background: #e8f0fe; color: var(--blue); font-weight: 650; }

.panel {
  background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 20px 22px;
}
.panel h1, .panel h2 { margin: 0 0 14px; font-size: 15px; font-weight: 650; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
label { display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
input[type=text], input[type=email], input[type=tel], input[type=password], select, textarea {
  width: 100%; height: 32px; border: 1px solid #ddd; border-radius: 6px;
  padding: 0 10px; font-size: 13px; color: #1a1a1a; outline: none; background: #fff;
}
textarea { height: 72px; padding: 8px 10px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); }
.ro { background: #f7f8fa; color: #888; }
.form-actions { display: flex; gap: 8px; margin-top: 16px; }
.addr {
  border: 1px solid #eee; border-radius: 8px; padding: 12px 14px; background: #fafbfc;
}
.addr b { font-size: 13px; }
.addr p { margin: 6px 0 0; color: #666; line-height: 1.5; font-size: 12px; }
.kv { display: grid; grid-template-columns: 108px 1fr; gap: 8px; font-size: 13px; }
.kv span { color: #888; }
.paybox {
  background: #f7fbff; border: 1px dashed #c5d8ea; border-radius: 8px;
  padding: 12px 14px; font-size: 12px; color: #33506b; line-height: 1.55;
}
.steps {
  display: flex; margin: 8px 0 16px; font-size: 12px; color: #aaa;
}
.st { flex: 1; text-align: center; position: relative; padding-top: 22px; }
.st:before {
  content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 2px; background: #e6e6e6;
}
.st:first-child:before { left: 50%; }
.st:last-child:before { right: 50%; }
.st i {
  position: absolute; top: 2px; left: 50%; width: 12px; height: 12px; margin-left: -6px;
  border-radius: 50%; background: #e6e6e6; z-index: 1;
}
.st.on { color: var(--blue); font-weight: 650; }
.st.on i { background: var(--blue); }
.st.done { color: #666; }
.st.done i { background: #9dc0de; }
.muted { color: #999; }
.empty { background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 48px 0; text-align: center; color: #bbb; font-size: 12px; }
.hidden { display: none !important; }
.okmsg { display: none; margin: 10px 0 0; color: #1e7a44; font-size: 12px; }
.okmsg.show { display: block; }

/* Cart */
.crumb {
  font-size: 13px; color: #9aa3af; margin: 0 0 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.crumb a { color: #6b7280; }
.crumb a:hover { color: var(--blue); text-decoration: underline; }
.crumb b, .crumb .here { color: #114C86; font-weight: 650; }
.crumb .sep { color: #c5cdd6; font-size: 12px; }
.steps-row { display: flex; align-items: center; margin-bottom: 16px; }
.stp { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #999; font-weight: 500; }
.stp .dot {
  width: 22px; height: 22px; border-radius: 50%; background: #e3e6ea; color: #888;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
}
.stp.on { color: var(--blue); }
.stp.on .dot { background: var(--blue); color: #fff; }
.step-line { width: 70px; height: 2px; background: #e3e6ea; margin: 0 12px; }
.cart-layout { display: grid; grid-template-columns: 1fr 300px; gap: 14px; align-items: start; }
.ccard { background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; overflow: hidden; }
.toolbar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px; border-bottom: 1px solid #e8e8e8; background: #fafbfc;
  font-size: 12px; color: #666;
}
.toolbar .sp { flex: 1; }
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th {
  font-size: 12px; color: #888; font-weight: 500; text-align: left;
  padding: 10px 12px; background: #fafbfc; border-bottom: 1px solid #e8e8e8; white-space: nowrap;
}
.cart-table td { padding: 12px; border-bottom: 1px solid #f2f2f2; vertical-align: middle; }
.cart-table tr:last-child td { border-bottom: none; }
.part-name { color: var(--blue); font-weight: 600; font-size: 13px; }
.part-sub { font-size: 11px; color: #999; margin-top: 3px; }
.sup { font-size: 11px; color: #777; margin-top: 2px; }
.sup .ok { color: #1e7a44; }
.stepper { display: inline-flex; border: 1px solid #ddd; border-radius: 6px; overflow: hidden; }
.stepper button {
  width: 26px; height: 28px; border: none; background: #fafafa; cursor: pointer; font-size: 14px; color: #555;
}
.stepper button:hover { background: #f0f4ff; color: var(--blue); }
.stepper input {
  width: 56px; height: 28px; border: none; border-left: 1px solid #eee; border-right: 1px solid #eee;
  text-align: center; font-size: 12px; outline: none; background: #fff;
}
.price { font-weight: 600; }
.price.hot { color: #114C86; }
.moq { font-size: 10px; color: #999; margin-top: 4px; }
.del-link { font-size: 12px; color: #999; cursor: pointer; background: none; border: 0; }
.del-link:hover { color: var(--red); }
.seller-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: #fafbfc; border-top: 1px solid #f0f0f0;
  font-size: 12px; color: #555;
}
.seller-bar b { margin-left: auto; color: #114C86; font-weight: 650; }
.summary {
  background: #fff; border: 1px solid #e8e8e8; border-radius: 8px;
  padding: 16px; position: sticky; top: 64px;
}
.summary h3 { font-size: 14px; margin: 0 0 12px; font-weight: 600; }
.sum-row { display: flex; justify-content: space-between; font-size: 12px; color: #666; padding: 5px 0; }
.sum-row b { color: #1a1a1a; }
.sum-total {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px dashed #e8e8e8; margin-top: 8px; padding-top: 10px;
  font-size: 13px; font-weight: 600;
}
.sum-total .amt { color: #114C86; font-size: 20px; font-weight: 700; }
.checkout-btn {
  width: 100%; height: 40px; border: none; border-radius: 8px;
  background: var(--blue); color: #fff; font-size: 14px; font-weight: 600;
  cursor: pointer; margin-top: 14px;
}
.checkout-btn:hover { background: var(--blue-hover); }
.checkout-btn:disabled { background: #c6cdd5; cursor: not-allowed; }
input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--blue); cursor: pointer; }

footer.site-foot {
  border-top: 1px solid #eee; background: #fff;
  padding: 16px 0 28px; color: #888; font-size: 12px;
}
.foot {
  width: min(1120px, calc(100% - 32px)); margin: 0 auto;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}

@media (max-width: 800px) {
  .layout, .grid-2 { grid-template-columns: 1fr; }
  .col-head { display: none; }
  .order-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
  }
  .prod { grid-column: 1 / -1; }
  .order-search { padding: 12px; }
  .os-no, .os-date, .os-status, .osf-kw { width: 100%; min-width: 0; }
  .filter-bar input { width: 100%; margin-left: 0; }
  .mn-links .hide { display: none; }
  .cart-layout { grid-template-columns: 1fr; }
  .summary { position: static; }
  .pd-layout { grid-template-columns: 1fr; }
  .pd-buy { position: static; }
}
.pd-id {
  display: flex; gap: 14px; align-items: flex-start;
  background: #fff; border: 1px solid #eee; border-radius: 10px;
  padding: 14px 16px; margin-bottom: 12px;
}
.pd-cover {
  width: 160px; height: 120px; min-width: 160px;
  border-radius: 8px; background: #f5f8fb; border: 1px solid #edf2f6;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.pd-cover img {
  width: 160px; height: 120px; object-fit: cover; object-position: center 40%; display: block;
}
.pd-cover.mark img { width: 72px; height: 58px; object-fit: contain; }
.zoom-wrap { position: relative; display: inline-block; }
.zoom-pop {
  display: none; position: absolute; left: calc(100% + 12px); top: 0; z-index: 80;
  width: 320px; height: 240px; padding: 10px; box-sizing: border-box;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
  box-shadow: 0 16px 40px rgba(23,40,59,.18);
  align-items: center; justify-content: center; pointer-events: none;
}
.zoom-wrap:hover .zoom-pop { display: flex; }
.zoom-pop img {
  max-width: 300px; max-height: 220px; width: auto; height: auto;
  object-fit: contain; display: block;
}
.pd-id-body { min-width: 0; flex: 1; }
.pd-mpn { font-size: 22px; font-weight: 700; color: #114C86; letter-spacing: .2px; line-height: 1.2; }
.pd-copy {
  margin-left: 8px; border: 1px solid #e2e8f0; background: #fff; color: #667;
  border-radius: 5px; font-size: 11px; height: 22px; padding: 0 8px; cursor: pointer; vertical-align: middle;
}
.pd-copy:hover { border-color: var(--blue); color: var(--blue); }
.pd-name { margin: 4px 0 2px; font-size: 13px; color: #333; font-weight: 500; }
.pd-meta { font-size: 12px; color: #667383; }
.pd-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.pd-ds { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600; }
.pd-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) 280px;
  gap: 14px;
  align-items: start;
}
.pd-specs {
  background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 16px 18px;
}
.pd-buy {
  background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 16px;
  position: sticky; top: 60px;
}
.pd-buy h3 { margin: 0 0 10px; font-size: 14px; font-weight: 650; }
.pd-qty-label { font-size: 12px; color: #888; margin-bottom: 6px; }
.pd-ext { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 2px; font-size: 12px; color: #6b7280; }
.pd-ext b { color: #114C86; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pd-unit { font-size: 11px; color: #6b7280; text-align: right; font-variant-numeric: tabular-nums; }
.ladder { margin: 12px 0 0; border: 1px solid #f0f0f0; border-radius: 8px; overflow: hidden; }
.pd-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.pd-cart, .pd-buynow {
  height: 40px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.pd-cart { background: #fff; color: var(--blue); border: 1px solid #c5d4ea; }
.pd-cart:hover { background: #e8f0fe; border-color: var(--blue); }
.pd-buynow { background: var(--blue); color: #fff; border: 1px solid var(--blue); }
.pd-buynow:hover { background: var(--blue-hover); border-color: var(--blue-hover); }
.pd-cart:disabled, .pd-buynow:disabled { background: #eef1f5; color: #9aa3ad; border-color: #e1e5ea; cursor: not-allowed; }
.pd-rfq {
  display: block; margin-top: 8px; height: 36px; line-height: 34px; text-align: center;
  border: 1px solid #dbe3ee; border-radius: 6px; color: #374151; font-size: 13px; font-weight: 500; background: #fff;
}
.pd-rfq:hover { border-color: var(--blue); color: var(--blue); }
.ladder-row {
  display: grid; grid-template-columns: 1fr 1fr; padding: 7px 10px;
  font-size: 12px; color: #555; border-top: 1px solid #f5f5f5;
}
.ladder-row:first-child { border-top: 0; color: #999; font-size: 11px; background: #fafbfc; }
.ladder-row:not(:first-child) { cursor: pointer; }
.ladder-row:not(:first-child):hover { background: #f3f6fa; }
.ladder-row.on, .ladder-row.on:hover { background: #e3edfb; color: #0C447C; font-weight: 700; box-shadow: inset 3px 0 0 #185FA5; }
.ladder-row b { text-align: right; font-variant-numeric: tabular-nums; color: #1a1a1a; font-weight: 600; }
.ladder-row.on b { color: #0C447C; font-weight: 700; }
.pd-hint { font-size: 11px; color: #a32d2d; margin: 4px 0 0; }
.pd-hint:empty { display: none; }
.pd-note { font-size: 11px; color: #aaa; margin-top: 8px; line-height: 1.4; }
.tag {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: #f0f4ff; color: var(--blue);
}
.pd-sec-title { font-size: 14px; font-weight: 650; margin-bottom: 10px; }
.pd-sec-note { font-weight: 400; color: #8a94a3; font-size: 13px; margin-left: 6px; }
.pd-pin-link { margin-left: 16px; }
.pd-pinout { margin-top: 22px; scroll-margin-top: 80px; }
.pd-pin-img {
  display: block; max-width: 720px; border: 1px solid #edf2f6; border-radius: 8px;
  background: #fff; padding: 10px; cursor: zoom-in;
}
.pd-pin-img img { display: block; width: 100%; height: auto; }
.pd-pin-note { margin-top: 8px; font-size: 12px; color: #8a94a3; }
.pd-spec-table { border: 1px solid #edf1f5; border-radius: 8px; overflow: hidden; }
.pd-spec-row {
  display: grid; grid-template-columns: 160px 1fr;
  border-top: 1px solid #f0f0f0; font-size: 12px;
}
.pd-spec-row:first-child { border-top: 0; }
.pd-spec-key { background: #fafbfc; color: #667383; padding: 7px 12px; }
.pd-spec-val { padding: 7px 12px; }
.ghost-btn {
  display: block; text-align: center; margin-top: 8px;
  height: 36px; line-height: 36px; border: 1px solid #dbe3ee;
  border-radius: 8px; color: #555; font-size: 13px;
}
.ghost-btn:hover { border-color: var(--blue); color: var(--blue); }
.empty { padding: 28px; text-align: center; color: #888; }
.filter-bar { margin: 8px 0 12px; color: #666; font-size: 12px; }
@media (max-width: 800px) {
  .catalog-row { grid-template-columns: 1fr; }
  .pd-layout { grid-template-columns: 1fr; }
  .pd-buy { position: static; }
  .pd-spec-row { grid-template-columns: 1fr; }
}

/* Search page — 51dianzi replica */
.search-hero {
  background: #fff;
  border-bottom: 1px solid #eee;
  padding: 16px 0 12px;
}
.search-hero-inner {
  width: min(1320px, calc(100% - 32px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.sh-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.sh-brand img { width: 44px; height: 36px; max-width: 44px; max-height: 36px; object-fit: contain; display: block; }
.sh-slogan { font-size: 12px; color: #888; line-height: 1.5; }
.sh-slogan b { color: var(--blue); font-weight: 600; display: block; font-size: 13px; }
.big-search { position: relative; flex: 1; min-width: 280px; max-width: 560px; height: 38px; }
.big-search input {
  width: 100%; height: 38px; padding: 0 96px 0 38px;
  border: 2px solid var(--blue); border-radius: 8px;
  font-size: 13px; color: #1a1a1a; outline: none; background: #fff;
}
.big-search .s-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: #999; display: flex; pointer-events: none;
}
.big-search .search-go {
  position: absolute; right: 3px; top: 3px; bottom: 3px;
  height: auto; padding: 0 18px; border-radius: 6px;
}
.sh-bom {
  height: 38px; padding: 0 14px; border: 1px solid #c9dcf0; border-radius: 8px;
  background: #f4f8fd; color: var(--blue); font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.sh-bom:hover { background: #e8f0fe; color: var(--blue-hover); }
.sp-page { width: min(1440px, calc(100% - 32px)); margin: 0 auto 48px; }
/* Toolbar: brands + sort + count in one strip on top of the table */
.sp-toolbar {
  display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap;
  background: #fff; border: 1px solid #d9dee6; border-bottom: 0;
  padding: 7px 12px; font-size: 12px; color: #6b7280; min-height: 42px;
}
.sp-toolbar[hidden] { display: none; }
.tb-group { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tb-label { color: #6b7280; margin-right: 4px; }
.tb-sep { width: 1px; height: 18px; background: #e3e8ee; }
.brand-chip, .sort-item {
  height: 26px; padding: 0 10px; border-radius: 5px; color: #374151;
  background: transparent; border: 0; cursor: pointer; font-size: 12px; font-weight: 400;
}
.brand-chip:hover, .sort-item:hover { background: #f1f5fa; }
.brand-chip.on, .sort-item.on { background: #e8f0fe; color: var(--blue); font-weight: 600; }
.sp-count { margin-left: auto; color: #6b7280; }
.sp-count b { color: #1a1a1a; font-weight: 600; }
.sp-crumb { margin: 10px 0 10px; }
/* Results table */
.sr-table {
  width: 100%; border-collapse: separate; border-spacing: 0; background: #fff;
  border: 1px solid #d9dee6; font-size: 12px; color: #1a1a1a;
  table-layout: fixed; font-family: Inter, "Segoe UI", Arial, sans-serif;
}
.sr-table > thead > tr > th {
  position: sticky; top: 52px; z-index: 6;
  text-align: left; font-weight: 600; color: #4b5563; font-size: 11px; letter-spacing: .2px;
  background: #f3f4f6; box-shadow: inset 0 -1px 0 #d9dee6;
  padding: 10px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sr-table > tbody > tr > td {
  vertical-align: middle; padding: 12px; border-bottom: 1px solid #e6e9ee;
  font-size: 12px; font-weight: 400; line-height: 1.4; color: #1a1a1a; background: #fff;
}
.sr-table > tbody > tr:last-child > td { border-bottom: 0; }
.sr-table > tbody > tr:hover > td { background: #fafbfd; }
.sr-table th.h-img { width: 136px; }
.sr-table th.h-part { width: 162px; }
.sr-table th.h-mfr { width: 122px; }
.sr-table th.h-desc { width: auto; }
.sr-table th.h-ds { width: 84px; }
.sr-table th.h-stock { width: 76px; }
.sr-table th.h-price { width: 152px; }
.sr-table th.h-qty { width: 116px; }
.sr-table th.h-ext { width: 96px; text-align: right; }
.sr-table th.h-act { width: 220px; }
.sr-table > tbody > tr > td.sr-img-cell { padding: 8px 8px 8px 12px; }
.sr-table > tbody > tr > td.sr-price { vertical-align: middle; padding: 8px 10px; }
.sr-table > tbody > tr > td.sr-qty { padding-left: 8px; padding-right: 8px; }
.sr-table > tbody > tr > td.sr-act { padding-left: 8px; padding-right: 12px; }
/* Variant groups: same die, alternative packaging */
.sr-table > tbody > tr.grp-row > td:first-child { box-shadow: inset 3px 0 0 #cfdcee; }
.sr-table > tbody > tr.grp-next > td { border-bottom: 1px dashed #e3e8ee; }
.sr-var-tag {
  display: inline-block; margin-top: 4px; font-size: 11px; color: #4b5563;
  background: #f3f5f8; border-radius: 3px; padding: 1px 6px;
}
.sr-img {
  width: 120px; height: 90px; min-width: 120px;
  border: 1px solid #edf2f6; border-radius: 4px; background: #f5f8fb;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.sr-img img { width: 120px; height: 90px; object-fit: cover; object-position: center 40%; display: block; }
.sr-img.mark { background: #f7f9fb; }
.sr-img.mark img { width: 30px; height: 24px; max-width: 30px; max-height: 24px; object-fit: contain; opacity: .35; }
.sr-mpn {
  display: block; color: #185FA5; font-size: 13px; font-weight: 600;
  text-decoration: none; line-height: 1.25; overflow-wrap: anywhere;
}
.sr-mpn:hover { text-decoration: underline; }
.sr-pack { display: block; margin-top: 4px; font-size: 11px; color: #6b7280; font-weight: 400; }
.sr-mfr { color: #1a1a1a; font-size: 12px; font-weight: 400; }
.sr-mfr-inline, .sr-meta-inline { display: none; }
.sr-desc {
  color: #1a1a1a; font-size: 12px; font-weight: 400; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.sr-cat { margin-top: 3px; font-size: 11px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-stock { color: #2f6b45; font-weight: 600; font-size: 12px; white-space: nowrap; }
.sr-ds { font-size: 12px; font-weight: 400; color: #185FA5; white-space: nowrap; }
.sr-ds:hover { text-decoration: underline; }
.sr-ds-cell { white-space: nowrap; overflow: hidden; }
.sr-ds-none { color: #9aa3af; }
/* Price ladder: selected tier is clearly marked; tiers are clickable */
.sr-ladder { width: 100%; border-collapse: separate; border-spacing: 0 1px; font-variant-numeric: tabular-nums; }
.sr-table .sr-ladder td {
  padding: 3px 8px; border: 0; font-size: 12px; line-height: 1.35;
  background: transparent; color: #1a1a1a; cursor: pointer;
}
.sr-table .sr-ladder td.br { text-align: left; color: #4b5563; font-weight: 400; width: 46%; border-radius: 4px 0 0 4px; }
.sr-table .sr-ladder td.px { text-align: right; color: #1a1a1a; font-weight: 600; border-radius: 0 4px 4px 0; }
.sr-table .sr-ladder tr:hover td { background: #f1f5fa; }
.sr-table .sr-ladder tr.on td,
.sr-table .sr-ladder tr.on:hover td { background: #dfeafb; color: #0C447C; font-weight: 700; }
.sr-table .sr-ladder tr.on td.br { box-shadow: inset 3px 0 0 #185FA5; }
.sr-ext { text-align: right; white-space: nowrap; }
.sr-ext b.e {
  display: block; font-size: 14px; font-weight: 700; color: #114C86; font-variant-numeric: tabular-nums;
}
.sr-ext .u { display: block; margin-top: 2px; font-size: 11px; color: #6b7280; font-variant-numeric: tabular-nums; }
.sr-actions { display: grid; grid-template-columns: auto auto; justify-content: end; align-items: center; gap: 6px; white-space: nowrap; }
.item-rfq {
  grid-column: 1 / -1; display: block; height: 30px; line-height: 28px; text-align: center;
  border: 1px solid #dbe3ee; border-radius: 4px; background: #fff;
  font-size: 12px; font-weight: 500; color: #4b5563; text-decoration: none;
}
.item-rfq:hover { color: var(--blue); border-color: var(--blue); background: #f8fbff; }
.item-cart, .item-buy {
  height: 32px; padding: 0 11px; border: 0; border-radius: 4px;
  font-size: 12px; font-weight: 600; cursor: pointer; flex: 0 0 auto;
}
.item-cart { background: #fff; color: var(--blue); border: 1px solid #c5d4ea; }
.item-cart:hover { background: #e8f0fe; border-color: var(--blue); }
.item-buy { background: var(--blue); color: #fff; min-width: 56px; }
.item-buy:hover { background: var(--blue-hover); }
.stepper { display: inline-flex; align-items: center; border: 1px solid #d9dee6; border-radius: 4px; height: 28px; background: #fff; }
.stepper button {
  width: 26px; height: 26px; border: 0; background: #fff; color: #555; cursor: pointer; font-size: 14px;
}
.stepper button:hover { color: var(--blue); background: #f1f5fa; }
.stepper .qty {
  width: 58px; height: 26px; border: 0; border-left: 1px solid #eee; border-right: 1px solid #eee;
  text-align: center; font-size: 12px; font-variant-numeric: tabular-nums;
}
/* Loading skeleton */
.sk {
  display: block; height: 10px; border-radius: 4px;
  background: linear-gradient(90deg, #eef1f5 25%, #f7f9fb 40%, #eef1f5 60%);
  background-size: 300% 100%; animation: sk-move 1.1s ease-in-out infinite;
}
.sk + .sk { margin-top: 8px; }
.sk-img { width: 120px; height: 90px; border-radius: 4px; }
@keyframes sk-move {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}
/* No result: request a quote */
.sp-rfq {
  background: #fff; border: 1px solid #d9dee6; padding: 28px 28px 26px; margin-top: 4px;
}
.sp-rfq h2 { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: #1a1a1a; }
.sp-rfq p { margin: 0 0 16px; font-size: 12px; color: #6b7280; line-height: 1.6; }
.sp-rfq .rfq-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-rfq .rfq-actions a { height: 34px; padding: 0 16px; font-size: 12px; font-weight: 600; border-radius: 4px; }
/* Messages three-column inbox */
.msg-shell {
  display: grid; grid-template-columns: 200px 320px minmax(0,1fr);
  min-height: calc(100vh - 52px - 48px); background: #fff; border-top: 1px solid #eee;
}
.msg-rail, .msg-list, .msg-pane { min-height: 0; }
.msg-rail {
  border-right: 1px solid #eee; padding: 16px 10px; background: #fafbfc;
}
.msg-rail h2 { font-size: 12px; font-weight: 600; color: #6b7280; margin: 0 10px 8px; }
.msg-rail a, .msg-rail button.rail-item {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; border: 0; background: transparent; text-align: left;
  padding: 8px 10px; border-radius: 6px; font-size: 13px; color: #1a1a1a; cursor: pointer;
}
.msg-rail .rail-item.on, .msg-rail .rail-item:hover { background: #e8f0fe; color: #185FA5; }
.msg-rail .rail-count { font-size: 11px; color: #6b7280; }
.msg-rail .rail-sec { margin-top: 18px; }
.msg-list { border-right: 1px solid #eee; display: flex; flex-direction: column; }
.msg-list-head { padding: 14px 16px 10px; border-bottom: 1px solid #eee; }
.msg-list-head h2 { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.msg-search {
  width: 100%; height: 32px; border: 1px solid #e2e8f0; border-radius: 16px;
  padding: 0 12px; font-size: 12px; background: #f5f6f8;
}
.msg-chips { display: flex; gap: 6px; margin-top: 10px; }
.msg-chip {
  height: 24px; padding: 0 10px; border: 0; border-radius: 12px; background: #f3f4f6;
  font-size: 12px; color: #6b7280; cursor: pointer;
}
.msg-chip.on { background: #e8f0fe; color: #185FA5; font-weight: 600; }
.msg-threads { overflow: auto; flex: 1; }
.msg-thread {
  display: flex; gap: 10px; padding: 12px 16px; cursor: pointer; border-bottom: 1px solid #f3f4f6;
}
.msg-thread:hover { background: #f8fafc; }
.msg-thread.on { background: #e8f0fe; }
.msg-av {
  width: 36px; height: 36px; border-radius: 8px; background: #185FA5; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex: 0 0 auto;
}
.msg-thread .t-title { font-size: 13px; font-weight: 600; color: #1a1a1a; }
.msg-thread .t-preview { font-size: 12px; color: #6b7280; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-thread .t-time { font-size: 11px; color: #6b7280; margin-left: auto; flex: 0 0 auto; }
.msg-pane { display: flex; flex-direction: column; min-width: 0; background: #f5f6f8; }
.msg-pane-head {
  background: #fff; border-bottom: 1px solid #eee; padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.msg-pane-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.msg-pane-head p { margin: 4px 0 0; font-size: 12px; color: #6b7280; }
.msg-body { flex: 1; padding: 20px; overflow: auto; }
.bubble { max-width: 68%; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5; margin-bottom: 10px; }
.bubble.in { background: #fff; color: #1a1a1a; border: 1px solid #eee; }
.bubble.out { background: #e8f0fe; color: #1a1a1a; margin-left: auto; }
.msg-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #9aa3af; font-size: 13px;
}
.composer {
  background: #fff; border-top: 1px solid #eee; padding: 12px 16px; display: flex; gap: 8px; align-items: flex-end;
}
.composer textarea {
  flex: 1; height: 64px; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 10px; resize: none; font-size: 13px;
}
.composer .btn { height: 36px; }
@media (max-width: 980px) {
  .msg-shell { grid-template-columns: 280px minmax(0,1fr); }
  .msg-rail { display: none; }
}

.sp-empty {
  background: #fff; border: 1px dashed #e2e8f0; border-radius: 10px;
  padding: 36px 20px; text-align: center; color: #888; margin-top: 8px;
}
.sp-empty[hidden] { display: none; }
.sp-pager { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.sp-pager[hidden] { display: none; }
.sp-pager button {
  min-width: 32px; height: 32px; border: 1px solid #e2e8f0; background: #fff;
  border-radius: 6px; color: #555; cursor: pointer; font-size: 12px;
}
.sp-pager button.on, .sp-pager button:hover { border-color: var(--blue); color: var(--blue); }
@media (max-width: 1360px) {
  .sr-table th.h-img { width: 112px; }
  .sr-table th.h-mfr, .sr-table td.sr-mfr-cell { display: none; }
  .sr-table th.h-act { width: 220px; }
  .sr-mfr-inline { display: block; margin-top: 3px; font-size: 11px; color: #374151; }
  .sr-img { width: 92px; height: 69px; min-width: 92px; }
  .sr-img img { width: 92px; height: 69px; }
  .sk-img { width: 92px; height: 69px; }
  .sr-actions { grid-template-columns: 1fr 1fr; justify-content: stretch; }
  .sr-actions .item-cart, .sr-actions .item-buy { width: 100%; }
}
@media (max-width: 1100px) {
  .sr-table th.h-ds, .sr-table td.sr-ds-cell, .sr-table th.h-stock, .sr-table td.sr-stock { display: none; }
  .sr-meta-inline { display: block; margin-top: 4px; font-size: 11px; color: #6b7280; }
  .sr-meta-inline .sr-stock { font-size: 11px; }
}
@media (max-width: 900px) {
  .sp-toolbar { border-bottom: 1px solid #d9dee6; }
  .sr-table, .sr-table > thead, .sr-table > tbody, .sr-table > tbody > tr, .sr-table > tbody > tr > td { display: block; }
  .sr-table > thead { display: none; }
  .sr-table > tbody > tr > td { border-bottom: 0; padding: 6px 12px; }
  .sr-table > tbody > tr { border-bottom: 1px solid #e6e9ee; padding: 8px 0; }
  .sr-table > tbody > tr > td.sr-mfr-cell, .sr-table > tbody > tr > td.sr-ds-cell, .sr-table > tbody > tr > td.sr-stock { display: none; }
  .sr-ext { text-align: left; }
  .sr-actions { grid-template-columns: minmax(96px, 1fr) minmax(56px, .72fr); justify-content: start; width: min(220px, 100%); }
  .item-rfq { grid-column: 1 / -1; margin-left: 0; }
  .sr-actions .item-cart, .sr-actions .item-buy { width: auto; }
  .sh-brand { width: 100%; }
}
@media (max-width: 640px) {
  .mall-nav { padding: 0 14px; }
  .mn-links, .mn-service, .mn-user { display: none; }
  .search-hero-inner { gap: 10px; }
  .sh-slogan { display: none; }
  .big-search { min-width: 0; flex: 1 1 100%; max-width: none; }
  .sh-bom { display: none; }
  .sh-brand { display: none; }
  .tb-sep { display: none; }
}

/* Explicit public demo disclosure; actual catalog search remains separate. */
.demo-banner { padding:11px 20px; background:#fff4db; border-bottom:1px solid #d9b760; color:#634513; font-size:13px; line-height:1.55; text-align:center; }
.demo-banner strong { color:#593a0d; }

@media(max-width:640px) {
  .mall-nav { height:auto; min-height:52px; flex-wrap:wrap; padding:8px 12px; }
  .mn-links { display:flex; order:3; width:100%; gap:0; flex-wrap:wrap; }
  .mn-links a { padding:0 9px; font-size:12px; }
  .mn-cart, .mn-user { display:none; }
  .msg-shell { grid-template-columns:1fr; }
  .msg-list { min-height:180px; max-height:300px; }
}

.msg-thread[hidden], .msg-no-match[hidden] { display:none !important; }
.msg-no-match { padding:20px 16px; color:#77889a; font-size:12px; }