@charset "utf-8";
/* ==========================================================================
   MiningMachinery.top — Design System Layer ("Industrial Steel")
   --------------------------------------------------------------------------
   Governed by /DESIGN.md. Loaded AFTER skin/default/style.css and index.css.
   Purpose: override the inherited Destoon 8.0 default theme without touching
   template structure or the fixed 1390px grid.
   Rules of engagement:
     - never change column widths (content-box layout, 1390px grid)
     - express borders as inset box-shadow so box metrics never shift
     - one accent = one meaning (pine = action, amber = commercial figure)
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700&display=swap");

:root {
  --ink: #0C1A17;
  --ink-2: #3C4F49;
  --ink-3: #6E8079;
  --canvas: #FFFFFF;
  --sand: #FAF7F2;
  --surface: #F4F7F5;
  --surface-alt: #EDF2EF;
  --hairline: #E1E8E4;
  --hairline-2: #CBD6D0;
  --brand: #0B5D4E;
  --brand-hover: #08493D;
  --aloe: #C9F0DE;
  --brand-tint: #EDFAF4;
  --accent: #B4671B;
  --accent-soft: #FBEEDD;
  --on-brand: #FFFFFF;

  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  --ring: inset 0 0 0 1px var(--hairline);
  --ring-strong: inset 0 0 0 1px var(--hairline-2);
  --card: 0 1px 2px rgba(12, 26, 23, .04), 0 2px 8px rgba(12, 26, 23, .04);
  --card-hover: 0 2px 4px rgba(12, 26, 23, .06), 0 10px 24px rgba(12, 26, 23, .09);

  --font-display: "Inter Tight", "Inter", -apple-system, "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   1. Base typography
   -------------------------------------------------------------------------- */
body {
  font: 13.5px/1.65 var(--font-body);
  color: var(--ink-2);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -.01em;
}
input, textarea, select, button {
  font-family: var(--font-body);
}
::selection { background: var(--aloe); color: var(--ink); }

/* Tabular figures wherever numbers are compared */
.price, .m-latest li span, .m-tit span, .MOQ, .num,
.m-footer .foot p, #destoon_kw { font-variant-numeric: tabular-nums; }

/* Accessible focus, brand-coloured, only for keyboard users */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   2. Top utility bar
   -------------------------------------------------------------------------- */
#m-topnav {
  background: var(--canvas);
  color: var(--ink-3);
  border-bottom: 1px solid var(--hairline);
  height: 36px;
  line-height: 36px;
  font-size: 12px;
}
#m-topnav .fl a, #m-topnav .fl span, #m-topnav dd, #m-topnav dd a,
#m-topnav a.font_c1, #m-topnav a.font_c2 {
  color: var(--ink-3);
  font-size: 12px;
}
#m-topnav a:hover, #m-topnav .fl a:hover, #m-topnav dd a:hover {
  color: var(--brand);
}
#m-topnav .tnr, #m-topnav dd { height: 36px; line-height: 36px; }

/* DESIGN.md: "all interactive rows >= 38px". The utility-bar rows are 36px but
   the anchors inside them were plain inline boxes only 14px tall, so the hit
   area was the glyphs rather than the row. Making each direct-child anchor
   fill the row turns the whole strip into a target and lifts the bar to 38px.
   Only direct children are touched — the `.u-menu` dropdown keeps its own
   spacing. */
#m-topnav { height: 38px; line-height: 38px; }
#m-topnav .tnr, #m-topnav dd { height: 38px; line-height: 38px; }
#m-topnav .tnr > dd > a {
  display: inline-block;
  height: 38px;
  line-height: 38px;
}

/* --------------------------------------------------------------------------
   3. Header — logo, search, action pills
   -------------------------------------------------------------------------- */
#header { height: 136px; }
.pdt20 { padding-top: 16px; }
.logo { height: 96px; line-height: 96px; }
.logo img { height: 76px; }

.m-search { margin-top: 8px; }

#search .text {
  border: 2px solid var(--hairline-2);
  border-right: 0;
  border-radius: var(--r-pill) 0 0 var(--r-pill);
  color: var(--ink);
  font-size: 14px;
  background: var(--canvas);
  transition: border-color .18s ease, background .18s ease;
}
#search .text:focus {
  border-color: var(--brand);
  background: #fff;
}
#search .button {
  background: var(--brand);
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background .18s ease;
}
#search .button:hover { background: var(--brand-hover); }

.header_search .header_select a.header_select_sort span em {
  font-size: 14px;
  color: var(--brand);
  font-weight: 600;
}
.header_search .header_select .header_select_sort { border-right-color: var(--hairline); }
.header_search .header_select ul {
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-md);
  box-shadow: var(--card-hover);
  overflow: hidden;
  top: 58px;
}
.header_search .header_select ul li a { font-size: 13.5px; color: var(--ink-2); }
.header_search .header_select ul li a:hover { background: var(--brand-tint); color: var(--brand); }
.header_search .on a.header_select_sort { border-right: 2px solid var(--brand); }

.keySearch { font-size: 13px; color: var(--ink-3); }
.keySearch span {
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.keySearch a { color: var(--ink-3); }
.keySearch a:hover { color: var(--brand); }

.btnLink { margin-top: 4px; }
.btnLink a {
  height: 44px;
  line-height: 42px;
  padding: 0 18px;
  margin-left: 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--brand);
  color: var(--brand);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  background: var(--canvas);
}
.btnLink a:first-child {
  background: var(--brand);
  color: var(--on-brand);
}
.btnLink a:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  color: var(--on-brand);
}

/* --------------------------------------------------------------------------
   4. Primary navigation
   -------------------------------------------------------------------------- */
.m-nav {
  height: 48px;
  line-height: 48px;
  background: var(--ink);
  border-top: 1px solid var(--ink);
}
.navh { height: 48px; font-size: 13.5px; }
.navh dt {
  background: var(--brand);
  width: 236px;
  padding-left: 24px;
  margin-right: 26px;
  font-weight: 600;
  letter-spacing: .01em;
}
.navh dt a { color: var(--on-brand); }
.navh dd { padding-right: 23px; }
.navh dd a {
  height: 48px;
  line-height: 48px;
  color: rgba(243, 247, 245, .82);
  font-weight: 500;
  letter-spacing: .01em;
  transition: color .15s ease, box-shadow .15s ease;
}
.navh dd a:hover {
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--aloe);
}
.navh dd.active a {
  color: var(--aloe);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--aloe);
}

/* --------------------------------------------------------------------------
   5. Category sidebar
   -------------------------------------------------------------------------- */
.siderMenu {
  background: var(--canvas);
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--ring);
  overflow: hidden;
  /* legacy theme pins this to 630px; with only 4 categories that leaves a
     470px white void. Size to content instead. */
  height: auto;
  min-height: 0;
  padding-bottom: 4px;
}
.sideList_tit h2 {
  height: 40px;
  line-height: 40px;
  background: var(--canvas);
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background-image: none;
  position: relative;
  transition: background .15s ease;
}
.sideList_tit h2 a {
  font-size: 13.5px;
  color: var(--ink-2);
  padding-left: 22px;
  font-weight: 500;
  display: block;
}
.sideList_tit h2::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -4px;
  border-right: 1.5px solid var(--hairline-2);
  border-bottom: 1.5px solid var(--hairline-2);
  transform: rotate(-45deg);
  transition: border-color .15s ease;
}
.sideList_tit h2:hover { background: var(--brand-tint); }
.sideList_tit h2:hover a { color: var(--brand); }
.sideList_tit h2:hover::after { border-color: var(--brand); }

.sideList_tit.active { border: 0; background: var(--brand-tint) !important; }
.sideList_tit.active h2 {
  background: var(--brand-tint);
  border-left: 0;
  box-shadow: inset 3px 0 0 var(--brand);
}
.sideList_tit.active h2 a,
.sideList_tit.active h2 a:hover { color: var(--brand); font-weight: 600; }

.i-list {
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--card-hover);
  background: var(--canvas);
  left: 256px;
}
.i-list .i-list-l .pro_list a { color: var(--ink-2); font-size: 13px; }
.i-list .i-list-l .pro_list a:hover { color: var(--brand); }
.i-list .i-list-l p.more {
  background: var(--surface);
  color: var(--ink-3);
  border-radius: var(--r-pill);
  font-size: 12px;
}
.i-list .i-list-r { background: var(--surface); }
.i-list .i-list-r ul li .u-img { border: 1px solid var(--hairline); border-radius: var(--r-sm); }
.i-list .i-list-r ul li .u-img:hover { border-color: var(--brand); }
.i-list .i-list-r ul li p a { color: var(--ink-3); }
.i-list .i-list-r ul li p a:hover { color: var(--brand); }

/* --------------------------------------------------------------------------
   6. Hero slider
   -------------------------------------------------------------------------- */
.banner {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--card);
  background: var(--surface-alt);
}
.fullSlide .m-hd ul li {
  width: 22px;
  height: 4px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .55);
  margin-left: 6px;
  transition: background .2s ease, width .2s ease;
}
.fullSlide .m-hd ul .active { background: #fff; width: 34px; }

.fullSlide .prev, .fullSlide .next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-top: -21px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 2px 10px rgba(12, 26, 23, .18);
  opacity: 0;
  font-size: 0;
  transition: opacity .2s ease, transform .2s ease;
}
.banner:hover .fullSlide .prev,
.banner:hover .fullSlide .next { opacity: 1; }
.fullSlide .prev { left: 14px; }
.fullSlide .next { left: auto; right: 14px; }
.fullSlide .prev::after, .fullSlide .next::after {
  content: "";
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--ink);
  border-right: 2px solid var(--ink);
}
.fullSlide .prev::after { transform: rotate(-135deg); margin-left: 3px; }
.fullSlide .next::after { transform: rotate(45deg); margin-right: 3px; }
.fullSlide .prev:hover, .fullSlide .next:hover { transform: scale(1.06); }

/* --------------------------------------------------------------------------
   7. Welcome / login side panel
   -------------------------------------------------------------------------- */
.login_sider {
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--ring);
  overflow: hidden;
  background: var(--canvas);
}
.login_sider .login_mes { border-bottom: 1px solid var(--hairline); }
.login_sider .login_mes em,
.login_sider .login_mes b {
  font-family: var(--font-display);
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0;
}
.login_sider .btn_sign {
  width: 128px;
  height: 34px;
  line-height: 34px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--brand);
  box-shadow: none;
}
.login_sider .btn_sign a { font-size: 13px; font-weight: 600; }
.login_sider .btn_sign a:hover { font-size: 13px; opacity: .9; }
.login_sider .link_join { color: var(--ink-3); font-size: 12.5px; }
.login_sider .link_join a { color: var(--brand); font-size: 12.5px; font-weight: 600; }
.login_sider .links a { color: var(--ink-3); }
.login_sider .links a:hover { color: var(--brand); }
.help .tabTit a {
  border-bottom: 2px solid var(--hairline);
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 500;
}
.help .tabTit a.active { border-bottom-color: var(--brand); color: var(--brand); font-weight: 600; }
.help dl dt { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.help dl dd a { font-size: 13px; color: var(--ink-3); }
.help dl dd a:hover { color: var(--brand); }

/* --------------------------------------------------------------------------
   8. Section headers
   -------------------------------------------------------------------------- */
.m-tit {
  height: 52px;
  line-height: 52px;
  background: transparent;
  box-shadow: inset 0 -1px 0 var(--hairline);
  margin-bottom: 4px;
}
.m-tit h3, .m-tit h3.tit_c1 {
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.015em;
  width: auto;
}
.m-tit h3.tit_c2 { color: var(--ink); }
.m-tit h3 span { font-size: 12.5px; color: var(--ink-3); padding-left: 8px; }
.m-more, .li_more a {
  font-size: 12.5px !important;
  color: var(--ink-3) !important;
  font-weight: 500 !important;
  letter-spacing: .01em;
}
.m-more:hover, .li_more a:hover { color: var(--brand) !important; }

.floor_title {
  height: 56px;
  line-height: 56px;
  background: transparent;
  margin-bottom: 12px;
  padding: 0 2px;
  box-shadow: inset 0 -1px 0 var(--hairline);
}
.floor_title h2, .floor_title h2 a {
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.015em;
}
.sell_floor_cat a { font-size: 12.5px; color: var(--ink-3); }
.sell_floor_cat a:hover { color: var(--brand); }

/* --------------------------------------------------------------------------
   9. Content cards
   -------------------------------------------------------------------------- */
.box455, .box260 > .m-company, .box920r > .m-tit,
.m-meeting, .m-tab {
  border-radius: var(--r-lg);
}
.box455 {
  background: var(--canvas);
  box-shadow: var(--ring);
  border-radius: var(--r-lg);
}
.box455 .m-tit { box-shadow: none; margin-bottom: 0; }

.box260 .m-company {
  background: var(--canvas);
  box-shadow: var(--ring);
  border-radius: var(--r-lg);
  height: auto;
  min-height: 200px;
}
.box260 .m-company .m-tit { box-shadow: none; }

/* Latest Buying / Latest Products rows */
.m-latest { height: auto; min-height: 225px; padding-top: 6px; }
.m-latest li {
  display: flex;
  align-items: center;
  gap: 10px;
  width: auto;
  height: 34px;
  line-height: 34px;
  padding: 0 2px;
  background: none;
  border-bottom: 1px dashed var(--hairline);
  transition: background .14s ease;
}
.m-latest li:hover { background: var(--brand-tint); }
.m-latest li a {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  float: none;
  font-size: 13px;
  color: var(--ink-2);
}
.m-latest li a:hover { color: var(--brand); }
.m-latest li span {
  float: none;
  order: 2;
  width: auto;
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: .02em;
}

/* Featured products grid */
.floor_sec_l { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--card); }
.floor_sec_r { background: var(--canvas); border-radius: var(--r-lg); box-shadow: var(--ring); }
.floor_sec_r ul li {
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--canvas);
  transition: transform .2s ease, box-shadow .2s ease;
}
.floor_sec_r ul li:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-hover);
}
.floor_sec_r ul li .image { border-radius: var(--r-md) var(--r-md) 0 0; background: var(--surface); }
.floor_sec_r ul li h3 {
  font-size: 12.5px;
  line-height: 18px;
  color: var(--ink-2);
  padding: 0 8px;
  font-weight: 500;
  margin: 8px 0 2px;
}
.floor_sec_r ul li h3 a { color: var(--ink-2); }
.floor_sec_r ul li h3 a:hover { color: var(--brand); }
.floor_sec_r ul li .price {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  padding: 0 8px;
}
.floor_sec_r ul li .price .right { color: var(--accent); }
.floor_sec_r ul li .in {
  background: var(--brand);
  border-radius: var(--r-pill);
  padding: 0 10px;
  height: 20px;
  line-height: 20px;
  font-size: 11px;
  font-weight: 600;
  margin-right: 8px;
}
.floor_sec_r ul li .in:hover { background: var(--brand-hover); }

/* Banner pairs */
.ad-duo { gap: 16px; }
.ad-duo .ad-duo-item img { border-radius: var(--r-lg); box-shadow: var(--card); }

/* Tabs */
.tabMenu { height: 52px; }
.tabMenu li {
  height: 52px;
  line-height: 52px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  margin: 0 4px;
  padding: 0 14px;
}
.tabMenu li.active {
  border-bottom: 2px solid var(--brand);
  color: var(--ink);
  font-weight: 600;
}
.iList ul li { background: none; border-bottom: 1px dashed var(--hairline); }
.iList ul li a { color: var(--ink-2); font-size: 13px; }
.iList ul li a:hover { color: var(--brand); }
.iList .iNews dd .newInfo a { color: var(--ink); font-size: 14px; }
.iList .iNews dd .newInfo a:hover { color: var(--brand); }
.iList .iNews dd .newInfo p { color: var(--ink-3); }
.iList .iNews dd .imgbox { border-radius: var(--r-sm); overflow: hidden; }

/* --------------------------------------------------------------------------
   10. Global buttons & form controls
   -------------------------------------------------------------------------- */
input[type="submit"], input[type="button"], .btn, .btn-main {
  background: var(--brand);
  border: 0;
  border-radius: var(--r-pill);
  color: var(--on-brand);
  font-weight: 600;
  font-size: 13.5px;
  padding: 0 22px;
  height: 38px;
  line-height: 38px;
  cursor: pointer;
  transition: background .18s ease;
}
input[type="submit"]:hover, input[type="button"]:hover,
.btn:hover, .btn-main:hover { background: var(--brand-hover); }

input[type="text"], input[type="password"], input[type="email"],
input[type="tel"], input[type="number"], textarea, select {
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--canvas);
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
input[type="tel"]:focus, input[type="number"]:focus, textarea:focus, select:focus {
  border-color: var(--brand);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(11, 93, 78, .12);
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
.m-footer {
  background: var(--ink);
  margin-top: 24px;
}
.m-footer .footer { margin-top: 0; padding: 52px 0 24px; }
.m-footer ul li h3 {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  height: 22px;
  line-height: 22px;
  margin-bottom: 14px;
}
.m-footer ul li a {
  color: #9BAEA8;
  font-size: 13px;
  height: 28px;
  line-height: 28px;
  transition: color .14s ease;
}
.m-footer ul li a:hover { color: var(--aloe); }
.m-footer .foo_left span { color: #9BAEA8; font-size: 12.5px; }
.m-footer .foo_left img { opacity: .92; }

/* Typographic brand mark, replacing skin/default/image/logo_w.png — that file
   carried the cloned source site's wordmark, so the brand is set in type instead.
   Specificity has to clear `.footer .foo_left span` (0,2,1) in style.css. */
.m-footer .foo_left .foo-brand {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #fff;
  margin-bottom: 8px;
}
.m-footer .foo_left .foo-brand-tld {
  /* style.css forces `display:block` on every .foo_left span, which pushes the
     ".com" onto its own line. */
  display: inline;
  font-size: inherit;
  font-weight: 500;
  color: var(--aloe);
}
.m-footer ul li.last a { border-radius: var(--r-pill); font-size: 13.5px; font-weight: 600; height: 44px; line-height: 44px; }
.m-footer ul li.last a.btn_service { background: var(--brand); }
.m-footer ul li.last a.btn_Exhi { background: transparent; box-shadow: inset 0 0 0 1px rgba(201, 240, 222, .45); color: var(--aloe); }
.m-footer .foot { border-top: 1px solid rgba(255, 255, 255, .09); padding-top: 20px; }
.m-footer .foot p { color: #7E908B; font-size: 12.5px; }
.m-footer .foot p a { color: #9BAEA8; }
.m-footer a:hover, .m-footer .foot p a:hover { color: var(--aloe); }

/* --------------------------------------------------------------------------
   12. Empty-state collapse
   A data loop that returned nothing must not leave a white void — a blank
   block reads as a broken site to a procurement evaluator.
   Implemented in skin/default/sap-ui.js (not CSS): the installed Chrome/WebKit
   baseline on buyer machines cannot be assumed to support :has(), and this
   must work for every visitor. The JS adds `.sap-solo` to a surviving sibling.
   -------------------------------------------------------------------------- */
.sap-solo {
  float: none !important;
  clear: both !important;
  /* .box455 is content-box: content width + 48px horizontal padding = 1120 */
  width: 1072px !important;
}

/* --------------------------------------------------------------------------
   13. Supply listing grid (/sell/, /sell/search.php)
   sell.css already defines a 4-column card grid (.tulist dl, 254px content
   box + 10px padding = 4 per row in the 1160px column). This layer keeps
   those box metrics untouched and only re-finishes the card.
   -------------------------------------------------------------------------- */
.tulist > dl {
  background: var(--canvas);
  border: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--ring);
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
}
.tulist > dl:hover {
  box-shadow: var(--card-hover);
  transform: translateY(-2px);
  border-color: transparent;
}
.tulist > dl:nth-of-type(4n) { margin-right: 0; }
.tulist dl ul { height: auto; margin: 0; padding: 0; }
.tulist dl ul > a { display: block; }
.tulist dl ul > a img {
  width: 234px;
  height: 234px;
  display: block;
  object-fit: cover;
  border-radius: var(--r-md);
  background: var(--surface);
}
.tulist dl ul > a:hover img { filter: brightness(1.03); }
.tulist dl img[src=""],
.tulist dl img:not([src]) { display: none; }

.tulist li {
  font-size: 12.5px;
  line-height: 1.55;
  height: auto;
  color: var(--ink-3);
  padding: 0;
}
.tulist li a { color: var(--ink-2); font-size: 12.5px; }
.tulist li.price {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
  line-height: 26px;
  height: auto;
  padding-top: 6px;
  font-variant-numeric: tabular-nums;
}
.tulist li.price span { float: right; }
.tulist li.price span a {
  background: var(--brand);
  border-radius: var(--r-pill);
  padding: 0 12px;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  font-weight: 600;
  color: var(--on-brand);
  margin-top: 1px;
  transition: background .15s ease;
}
.tulist li.price span a:hover { background: var(--brand-hover); color: #fff; }
.tulist li.price span.y a { background: var(--accent); }
.tulist li.price span.y a:hover { background: #9a5815; color: #fff; }
.tulist li a.px13 {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
  letter-spacing: -.005em;
  /* 标题固定占两行高度：float 布局下卡片高度不一致会让矮卡下方留缝，
     后续卡片被塞进缝隙 → 整行错位。两行保底 + 超出省略可让所有卡片等高。 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 38px;
}
.tulist li a.px13:hover { color: var(--brand); }
.tulist li.com {
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.6;
  height: auto;
  width: auto;
  padding-top: 2px;
}
.tulist li.com a {
  color: var(--brand);
  text-decoration: none;
  font-weight: 500;
  font-size: 12px;
}
.tulist li.com a:hover { color: var(--brand-hover); text-decoration: none; }
.tulist li.local {
  border-top: 1px solid var(--hairline);
  background: none;
  padding: 8px 0 0;
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: .01em;
}
.tulist li.local img { vertical-align: -2px; }
.blb, .blb1 {
  border: 0;
  line-height: 1.6;
  margin: 0;
  color: var(--ink-2);
  transition: box-shadow .18s ease;
}

/* --------------------------------------------------------------------------
   14. Small refinements
   -------------------------------------------------------------------------- */
.m { background: transparent; }
.bgfff { background: var(--canvas); }
a { text-decoration: none; }
img { border: 0; }

/* Keep legacy sprite icons from looking muddy on the new surfaces */
.im0l p { background: var(--brand); }

/* --------------------------------------------------------------------------
   14. Ad-slot placement (audit 2026-10-17)
   The banner-phase-2 rules in style.css size every ad row as flex children of
   the 1390px `.m` shell, so rows render wider than the content column they
   headline and images get upscaled. These rules pin each slot to its declared
   pixel size (never up, never crop) and align the row to the column it belongs
   to. `box-shadow` instead of `border` — the grid is content-box.
   -------------------------------------------------------------------------- */

/* Duo banner (pid=52): 2 x 680x227 native + 30px gutter = 1390 */
.ad-duo{display:flex;flex-wrap:nowrap;gap:30px;justify-content:center;max-width:1390px;margin:15px auto 0;}
.ad-duo .ad-duo-item{flex:0 0 680px;min-width:0;}
.ad-duo .ad-duo-item img{width:680px;height:227px;display:block;border-radius:var(--r-lg);box-shadow:var(--card);}

/* Category tiles (pid=53): FIVE in one row. 33.333% flex turns 5 items into 3+2. */
.ad-grid-wrap{display:flex;flex-wrap:nowrap;gap:15px;justify-content:center;max-width:1390px;margin:15px auto 0;}
.ad-grid-wrap .ad-grid-wrap-item{flex:0 0 calc(20% - 12px);min-width:0;}
.ad-grid-wrap .ad-grid-wrap-item img{width:100%;height:auto;display:block;border-radius:var(--r-md);box-shadow:var(--card);}

/* Recommended banner row (pid=55-59). `.m` IS the ad row here
   (class="m ad-pages"), so the shell must stay 1390px and centred — only the
   inner flex area is narrowed, via padding, so the row lands exactly on the
   content column it headlines. box-sizing is scoped to this class on purpose:
   the site grid is content-box and a global switch would collapse it. */
.ad-pages{display:flex;flex-wrap:nowrap;gap:20px;justify-content:flex-start;
          box-sizing:border-box;width:1390px;margin:12px auto;padding:0;}
.ad-pages .ad-pages-item{flex:0 0 550px;min-width:0;}
.ad-pages .ad-pages-item img{width:550px;height:310px;display:block;border-radius:var(--r-lg);box-shadow:var(--card);}

/* /sell/ — align to .main_sell_l (1160px): 1390 - 1160 = 230 */
.ad-pages-sell{padding-right:230px;}
/* /news/ /company/ — align to .m3l (1060px): 2 x 520 + 20 gutter = 1060 */
.ad-pages-list{padding-right:330px;}
.ad-pages-list .ad-pages-item{flex:0 0 520px;}
.ad-pages-list .ad-pages-item img{width:520px;height:292px;}
/* /brand/ /buy/ — no sidebar column; centre the two native banners */
.ad-pages-wide{padding:0 135px;}

/* Footer / compact leaderboards stay native and centred inside the shell */
.ad-footer-leader img,.ad-compact img{border-radius:var(--r-md);}
.ad-compact img{box-shadow:var(--card);}

/* --------------------------------------------------------------------------
   15. Layout integrity
   Three separate defects that all let a block claim the wrong amount of
   space: no space reserved for ad creatives, legacy 1390px children inside
   padded panels, and listing rails sized wider than their own column.
   -------------------------------------------------------------------------- */

/* 15.1 Reserved space for ad creatives.
   Each creative is served at its declared slot size but carries no
   width/height attribute, so before decode the band is 0px tall and every
   section below it jumps when the image lands (CLS). aspect-ratio reserves
   the box up front; the ratios mirror destoon_ad_place. Measured on the
   live files: 1390x290, 680x227, 550x275, 728x90, 468x60, 1440x100. */
.ad-top img                          { aspect-ratio: 1390 / 290; }
.ad-duo .ad-duo-item img             { aspect-ratio: 680 / 227; }
.ad-grid-wrap .ad-grid-wrap-item img { aspect-ratio: 550 / 275; }
.ad-footer-leader img                { width: 728px; aspect-ratio: 728 / 90; }
.ad-compact img                      { width: 468px; aspect-ratio: 468 / 60; }
.banner-sts img                      { aspect-ratio: 1440 / 100; }

/* 15.2 Legacy 1390px children inside a 24px-padded panel.
   .m-companyLogo / .m-newsProList are 1390px wide with padding:6px 24px, so
   their content box is 1342px; a 1390px child overhangs by 48px and is
   silently clipped by .mainbox. 100% keeps the row inside its own panel. */
.companyLogo,
.newsProList { width: 100%; }

/* 15.3 Listing columns.
   sell.css sizes .main_sell_r .tulist at 250px inside a 226px column, and
   .main_sell_l .tulist at 1190px for a card run that only needs 1156px.
   Pin both to the column they actually live in. */
.main_sell_r .tulist { width: 226px; }
.main_sell_l .tulist { width: 1160px; }
/* The right rail uses 204px mini-cards, not the 234px listing cards that
   section 13 assigns to .tulist images. */
.main_sell_r .tulist dl ul > a img { width: 204px; height: 150px; }

/* --------------------------------------------------------------------------
   16. Latest Products — card grid
   The legacy panel was a text ticker: common.js runs
   `jQuery(".box455").slide({mainCell:".m-latest", effect:"topLoop", vis:6})`,
   so a 23-row list scrolled six rows at a time inside a fixed 254px box and
   17 products were never reachable. The grid therefore deliberately does NOT
   carry `.m-latest` — with no `mainCell` match the ticker initialises to a
   no-op and leaves the markup alone.
   -------------------------------------------------------------------------- */
.box455 { height: auto; }

.sap-latest-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 4px 0 0;
  list-style: none;
}
.sap-latest-cards > li {
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.5;
  border-radius: var(--r-lg);
  box-shadow: var(--ring);
  background: var(--canvas);
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
}
.sap-latest-cards > li:hover {
  box-shadow: var(--card-hover);
  transform: translateY(-2px);
}
.sap-latest-cards .image { background: var(--surface); }
.sap-latest-cards .image img {
  display: block;
  width: 100%;
  height: 152px;
  object-fit: cover;
}
.sap-latest-cards h3 {
  height: 38px;
  margin: 8px 10px 2px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  line-height: 19px;
  letter-spacing: -.005em;
  color: var(--ink);
  overflow: hidden;
}
.sap-latest-cards h3 a { color: var(--ink); font-size: 13px; }
.sap-latest-cards h3 a:hover { color: var(--brand); }
.sap-latest-cards .price { padding: 0 10px 10px; }
.sap-latest-cards .price .in {
  display: inline-block;
  height: 24px;
  line-height: 24px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: var(--on-brand);
  font-size: 12px;
  font-weight: 600;
}
.sap-latest-cards .price .in:hover { background: var(--brand-hover); color: #fff; }

/* ---- category list CTA (sell/list.htm, article/list.htm) ------------------ */
.sap-list-cta {
  margin: 0 0 14px;
  padding: 13px 18px;
  border-radius: var(--r-md);
  background: var(--sand);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-2);
}
.sap-list-cta a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sap-list-cta a:hover { color: var(--brand-hover); }

/* ---- product detail gallery (sell/show.htm) ------------------------------ */
/* `#mid_pic` ships with width="400" inside a 382px cell, so the photo spilled
   19px into the sidebar. Cap it to the column and let height follow the
   intrinsic 4:3 ratio; the album/zoom JS measures geometry at click time. */
#mid_div { max-width: 100%; }
#mid_pic, #mid_div img { max-width: 100%; height: auto; }

/* ---- 采集缩略图防变形 (SAP-THUMB-FIT v1) --------------------------------- */
/* 采集来的主图比例什么都有：1060x458、225x300、300x300、400x207……
   模板里这些位置是写死宽高的 <img>（254x204 / 204x204 / 147x150 / 106x86），
   浏览器会把非方图硬拉进方框 —— 产品被压扁，一眼就看出是"搬来的图"。

   两道防线，缺一不可：
     ① 数据层：api/fabu.php 的 spider_make_thumb1() 把每张主图做成
        600x600 白底方图写进 sell.thumb1；列表页优先读 thumb1
        （方图配方框，本来就不会拉伸），详情页主图仍读 thumb 原图。
     ② 展示层：就是下面这条。万一 thumb1 缺失回落到原图、或者某个模板框
        本身不是方形，也按 contain 完整显示 —— 宁可留白，绝不压扁。

   selector 只命中采集图目录，不碰 logo / 广告位 / 编辑器上传的图。 */
img[src*="/file/spider/"],
img[src*="/file/spider_thumb/"] {
  object-fit: contain;
  background: #fff;
}