:root{
  --ink:#14181d; --muted:#5d6874; --line:#e3e7ec; --bg:#ffffff; --soft:#f6f8fa;
  --brand:#1f5d4c; --brand-ink:#ffffff; --accent:#c9822f; --radius:10px;
  --maxw:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:8px; top:8px; background:#fff; padding:8px 12px; border:1px solid var(--line); z-index:9}

/* header */
.top{border-bottom:1px solid var(--line); background:#fff; position:sticky; top:0; z-index:5}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; flex-wrap:wrap}
.brand{display:flex; align-items:baseline; gap:10px; color:inherit}
.brandmark{font-weight:800; letter-spacing:.14em; font-size:19px}
.brandsub{color:var(--muted); font-size:12px}
.nav{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.nav a{color:var(--ink); font-size:15px}
.nav a.cta{background:var(--brand); color:var(--brand-ink); padding:9px 14px; border-radius:var(--radius); font-weight:600}
.nav a.cta:hover{text-decoration:none; opacity:.92}

/* 语言切换器：页面右上角 · 竖向排列 · 每项两列（代码 + 语言名） */
.langswitch{display:grid; gap:3px; margin-left:auto; padding-left:14px; border-left:1px solid var(--line); font-size:12.5px}
.langswitch a{display:grid; grid-template-columns:2.1em 1fr; align-items:baseline; gap:8px; color:var(--muted); line-height:1.3}
.langswitch a b{font-weight:700; color:var(--ink); letter-spacing:.06em; font-size:11.5px; text-align:right}
.langswitch a:hover{text-decoration:none}
.langswitch a:hover span{color:var(--brand); text-decoration:underline}
.gw-switch{margin:20px auto 0; border-left:0; padding-left:0; display:inline-grid; text-align:left}

/* hero */
.hero{background:linear-gradient(180deg,#f2f6f4 0%,#ffffff 100%); border-bottom:1px solid var(--line); padding:64px 0 56px}
.hero.small{padding:44px 0 36px}
.hero h1{font-size:36px; line-height:1.2; margin:0 0 14px; max-width:22em}
.lede{font-size:18px; color:var(--muted); max-width:46em; margin:0 0 22px}
.btn{display:inline-block; background:var(--brand); color:var(--brand-ink); padding:12px 20px; border-radius:var(--radius); font-weight:600; border:0; cursor:pointer; font-size:16px}
.btn:hover{text-decoration:none; opacity:.92}
.btn.ghost{background:transparent; color:var(--brand); border:1px solid var(--brand); margin-top:18px}

/* sections */
section{padding:44px 0}
section h2{font-size:24px; margin:0 0 20px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
article h3{font-size:17px; margin:0 0 8px}
article p{margin:0 0 10px; color:#2b333c}
.props{padding:40px 0}
.props article{background:var(--soft); border:1px solid var(--line); border-radius:var(--radius); padding:18px}
.band{background:var(--soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.mode{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px}
.fee{margin-top:auto; font-weight:700; color:var(--brand)}
.note{color:var(--muted); font-size:14px; max-width:60em}
.pendingnote{margin-top:18px; color:var(--muted); font-size:13px; max-width:70em}

/* category cards */
.card{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; display:flex; flex-direction:column}
.card img{aspect-ratio:4/3; object-fit:cover; width:100%}
.card .body{padding:14px}
.card h3{font-size:16px; margin:0 0 6px}
.card p{margin:0; font-size:14px; color:var(--muted)}
.card .status{margin-top:8px; font-size:12px; color:var(--accent); font-weight:600}
.card .ph{background:repeating-linear-gradient(45deg,#f4f6f8,#f4f6f8 10px,#eef1f4 10px,#eef1f4 20px); border-bottom:1px dashed #c9d2da}
.card.pending{border-style:dashed}

/* 义乌全品类卡：横跨 2 格 —— 14 单格 + 2 格 = 16 格，恰好 4 整行、无空格 */
.card.wide{grid-column:span 2; background:var(--soft)}
.card.wide img{aspect-ratio:16/9}
.card.wide h3{color:var(--brand)}
@media (max-width:600px){ .card.wide{grid-column:auto} }

/* What we handle：零 JS 页签（radio + label，纯 CSS，无脚本）；CSS 失效时两面板都显示，不失内容 */
.catin{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.cats-head{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px}
.cats-head h2{margin:0}
.tab-pills{display:inline-flex; gap:4px; background:var(--soft); border:1px solid var(--line); border-radius:999px; padding:4px}
.tab-pills label{cursor:pointer; padding:7px 16px; border-radius:999px; font-size:14px; font-weight:600; color:var(--muted); white-space:nowrap}
#tab-toys:checked ~ .cats-head label[for="tab-toys"],
#tab-yiwu:checked ~ .cats-head label[for="tab-yiwu"]{background:#fff; color:var(--brand); box-shadow:0 1px 2px rgba(0,0,0,.07)}
#tab-toys:focus-visible ~ .cats-head label[for="tab-toys"],
#tab-yiwu:focus-visible ~ .cats-head label[for="tab-yiwu"]{outline:2px solid var(--brand); outline-offset:2px}
.panel-yiwu{display:none}
#tab-yiwu:checked ~ .panel-toys,
#tab-yiwu:checked ~ .toys-note{display:none}
#tab-yiwu:checked ~ .panel-yiwu{display:block}
.card .cta{display:inline-block; margin-top:10px; font-size:13.5px; font-weight:600; color:var(--brand); cursor:pointer}
.card .cta:hover{text-decoration:underline}
@media (max-width:600px){ .cats-head{flex-direction:column; align-items:flex-start} }

/* 子图画廊：点主图展开（纯 HTML details，无脚本）；+: 角标提示可点 */
.gal{margin:0}
.gal summary{cursor:pointer; position:relative; list-style:none}
.gal summary::-webkit-details-marker{display:none}
.gal summary::after{content:"+"; position:absolute; right:8px; bottom:8px; width:26px; height:26px; border-radius:50%; background:rgba(20,24,29,.74); color:#fff; font-size:17px; line-height:26px; text-align:center}
.gal[open] summary::after{content:"\2212"}
.subgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:4px; background:var(--soft); border-top:1px solid var(--line)}
.subgrid img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block; border-radius:4px}
.sublink{position:relative; display:block; line-height:0}

/* 款号标注（选品/上架对号用；也是 B2B 报价引用号） */
.gal-static{position:relative}
.imgcode{position:absolute; left:8px; bottom:8px; background:rgba(20,24,29,.76); color:#fff; padding:2px 8px; border-radius:6px; font-size:12px; font-weight:600; letter-spacing:.02em}
.subcode{position:absolute; left:4px; bottom:4px; background:rgba(20,24,29,.72); color:#fff; padding:1px 5px; border-radius:4px; font-size:10px; font-weight:600}
.card p.code{margin:6px 0 0; font-size:12.5px; color:var(--brand); font-weight:600}

/* 族页 */
.famgrid{display:grid; gap:14px}
.famgrid.cols1{grid-template-columns:minmax(0,520px)}
.famgrid.cols2{grid-template-columns:1fr 1fr}
.famgrid.cols3{grid-template-columns:repeat(3,1fr)}
.famgrid figure{margin:0; position:relative; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff}
.famgrid img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block}
.crumbs{font-size:13px; color:var(--muted); margin:0 0 10px}
.crumbs a{color:var(--muted)}
.fameta{display:flex; flex-wrap:wrap; gap:8px 20px; font-size:14px; color:var(--muted); margin:12px 0 0}
.fameta b{color:var(--ink)}
.card h3 a{color:inherit}
.card .more{display:inline-block; margin-top:8px; font-size:13.5px; font-weight:600}
@media (max-width:600px){ .famgrid.cols1,.famgrid.cols2,.famgrid.cols3{grid-template-columns:1fr 1fr} }

/* table */
.tbl{width:100%; border-collapse:collapse; font-size:15px}
.tbl td{border-bottom:1px solid var(--line); padding:12px 10px; vertical-align:top}
.tbl td:first-child{font-weight:600; width:34%}

/* compliance list */
.rulelist{list-style:none; padding:0; margin:0}
.rulelist li{border-left:3px solid var(--brand); background:var(--soft); padding:14px 16px; margin:0 0 12px; max-width:70em}

/* rfq form */
.rfq{max-width:720px}
.fields{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px}
.fields label{display:flex; flex-direction:column; gap:6px; font-size:14px; color:#2b333c}
.fields input,.fields textarea{border:1px solid var(--line); border-radius:8px; padding:10px 12px; font:inherit; background:#fff}
.fields label.wide{grid-column:1 / -1}

/* footer */
.foot{border-top:1px solid var(--line); background:#fff; padding:36px 0 18px; color:var(--muted); font-size:14px}
.foot-top{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:26px}
.foot-links{display:grid; grid-template-columns:1fr 1fr; gap:2px 16px}
.foot-links a{margin:0}
/* 法务信息下沉为横排：与上方三栏同列宽（原为窄栏 11 行，整块失衡） */
.foot-legal{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:5px 26px; margin-top:26px; padding-top:18px; border-top:1px solid var(--line)}
.foot-legal .legal{margin:0}
.legal .lbl{color:var(--muted)}
.legal .lbl::after{content:": "}
.foot h4{font-size:14px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink); margin:0 0 10px}
.foot-col a,.foot-col p{display:block; margin:0 0 6px}
.foot-blurb{color:#2b333c}
.foot-loc{color:var(--muted)}
.legal{font-size:14px; line-height:1.5}
.legal-local{font-size:14px}
.foot-bottom{display:flex; justify-content:space-between; gap:12px; margin-top:16px; font-size:14px; flex-wrap:wrap}

/* gateway */
.gateway{display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--soft)}
.gw{text-align:center; padding:32px 24px; max-width:720px}
.gw-brand{font-weight:800; letter-spacing:.22em; font-size:26px; color:var(--brand); margin-bottom:18px}
.gw h1{font-size:28px; margin:0 0 12px}
.gw-sub{color:var(--muted); margin:0 0 28px}
.gw-langs{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.gw-lang{display:flex; flex-direction:column; gap:4px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px}
.gw-lang strong{font-size:17px; color:var(--ink)}
.gw-lang span{font-size:13px; color:var(--muted)}
.gw-foot{margin-top:28px; font-size:12.5px; color:var(--muted)}

@media (max-width:860px){
  .grid3,.grid4{grid-template-columns:1fr 1fr}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-legal{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .hero h1{font-size:27px}
  .grid2,.grid3,.grid4,.fields,.gw-langs{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  .foot-legal{grid-template-columns:1fr}
  .top .wrap{min-height:auto; padding-top:10px; padding-bottom:10px}
  .nav{gap:12px}
  .brandsub{display:none}
  .langswitch{border-left:0; padding-left:0; gap:2px; font-size:12px}
  .langswitch a{grid-template-columns:2em 1fr; gap:6px}
}

/* FAQ：原生 details，零 JS */
.qa{max-width:52rem}
.qa details{border-top:1px solid var(--line); padding:13px 0}
.qa details:last-child{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer; font-weight:600; color:var(--ink)}
.qa details[open] summary{margin-bottom:6px}
.qa p{margin:0; color:var(--muted); font-size:14.5px; line-height:1.6}

/* 导航项变多后窄屏要能换行 */
/* 文章列表 / 文章正文 / 工具 */
.posts{list-style:none; padding:0; margin:0; max-width:52rem}
.posts li{border-top:1px solid var(--line); padding:14px 0}
.posts li a{font-weight:600; color:var(--ink)}
.posts .meta{display:block; font-size:12.5px; color:var(--muted); margin-top:2px}
.posts p{margin:6px 0 0; color:var(--muted); font-size:14.5px}
.article{max-width:52rem}
.article h2{margin-top:26px}
.article p{margin:0 0 14px; line-height:1.65}
.article ul{margin:0 0 14px; padding-left:22px}
.article li{margin:0 0 6px; line-height:1.6}
.article blockquote{margin:18px 0; padding:12px 16px; border-left:3px solid var(--brand); background:var(--soft); color:var(--ink)}
.article blockquote p{margin:0}
.hero .meta{font-size:12.5px; color:var(--muted); margin:0 0 6px}
.tool{max-width:52rem}
.tool-out{margin:18px 0 0}
.tool-line{display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--line); font-size:15px}
.tool-line b{font-variant-numeric:tabular-nums}
.tool-line.v-good b{color:#1f5d4c}
.tool-line.v-mid b{color:#c9822f}
.tool-line.v-bad b{color:#a8322a}

/* 视频卡（短视频自托管用原生 <video>；长视频只放封面+外链） */
.videos{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.vcard{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff}
.vcard video,.vcard img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block; background:#0d1117}
.vcard .body{padding:14px}
.vcard h3{font-size:16px; margin:0 0 6px}
.vcard p{margin:0; font-size:14px; color:var(--muted)}
.vlink{position:relative; display:block}
.vlink span{position:absolute; left:12px; bottom:12px; background:rgba(0,0,0,.72); color:#fff; padding:6px 10px; border-radius:6px; font-size:13px}
@media (max-width:860px){ .videos{grid-template-columns:1fr} }

/* 两个基地（主页定位段） */
.bases{padding:30px 0}
.bases h2{margin:0 0 16px}
.base{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px}
.base h3{margin:0 0 8px; font-size:17px}
.base p{margin:0; color:var(--muted); font-size:15px}

/* 主页视频段（整段由构建器按内容门控生成：无视频则整段不存在） */
.videos-home{padding:30px 0; background:var(--soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.videos-home h2{margin:0 0 16px}
.videos-home .note{margin:14px 0 0}
.vpending{position:relative}
.vpill{position:absolute; left:12px; bottom:12px; background:rgba(0,0,0,.72); color:#fff; padding:6px 10px; border-radius:6px; font-size:13px}

@media (max-width:860px){
  .nav{flex-wrap:wrap; gap:10px 14px}
}

/* 数字条（对标同行做法；数字全部为我们自己的实测值） */
.statsband{background:var(--soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding-top:22px; padding-bottom:22px}
.stat b{display:block; font-size:26px; color:var(--brand); line-height:1.1}
.stat span{display:block; font-size:13.5px; color:var(--muted); margin-top:5px; line-height:1.45}
@media (max-width:860px){
  .stats{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .stats{grid-template-columns:1fr}
}
