/* =========================================================================
   style.css — Guangzhou Wholesale Guide
   ========================================================================= */
:root{
  --nav:#0f172a;
  --nav2:#16213c;
  --ink:#0f172a;
  --body:#334155;
  --muted:#64748b;
  --line:#e2e8f0;
  --bg:#f6f8fb;
  --card:#ffffff;
  --accent:#ff7a1a;
  --accent-dark:#e06200;
  --teal:#0e9f8f;
  --ok:#15803d;
  --err:#b91c1c;
  --radius:14px;
  --shadow:0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","WenQuanYi Micro Hei",sans-serif;
  background:var(--bg); color:var(--body); line-height:1.6; -webkit-text-size-adjust:100%;
}
h1,h2,h3,h4{color:var(--ink); line-height:1.25; margin:0 0 .5em}
h1{font-size:1.9rem; letter-spacing:-.02em}
h2{font-size:1.35rem; margin-top:.2em}
h3{font-size:1.05rem; margin-top:1.4em}
p{margin:0 0 1em}
a{color:var(--accent-dark); text-decoration:none}
img{max-width:100%}
.wrap{width:100%; max-width:1080px; margin:0 auto; padding:0 18px}
.muted{color:var(--muted)}
.tiny{font-size:.82rem}
.section{padding:34px 18px}

/* ---------------------------------------------------------------- header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg,var(--nav),var(--nav2));
  color:#fff; box-shadow:0 2px 12px rgba(15,23,42,.18);
}
.header-inner{display:flex; align-items:center; gap:14px; min-height:60px; padding-top:8px; padding-bottom:8px}
.logo{display:flex; align-items:center; gap:9px; color:#fff; flex-shrink:0}
.logo-mark{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--accent); color:#fff; font-weight:800; font-size:.85rem; letter-spacing:.02em;
}
.logo-text{display:flex; flex-direction:column; line-height:1.15}
.logo-text strong{font-size:.95rem; letter-spacing:.04em}
.logo-text em{font-style:normal; font-size:.72rem; color:#9fb0c9}
.nav{display:flex; gap:16px; margin-inline-start:auto; flex-wrap:wrap}
.nav a{color:#cbd5e1; font-size:.9rem; padding:6px 0; border-bottom:2px solid transparent}
.nav a:hover{color:#fff; border-color:var(--accent)}
.langpick{margin-inline-start:12px}
.langpick select{
  background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.22);
  border-radius:8px; padding:6px 8px; font-size:.85rem;
}
.langpick select option{color:#111}

/* ------------------------------------------------------------------ hero */
.hero-photo{position:relative; overflow:hidden; isolation:isolate}
.hero-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
}
.hero-photo::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(12,20,36,.94) 0%, rgba(12,20,36,.82) 45%, rgba(12,20,36,.55) 100%);
}
.hero-photo .wrap{position:relative}
.hero-photo h1{text-shadow:0 2px 18px rgba(0,0,0,.5)}
/* 列表页把 h1 当视觉上的 h2 用，保持排版一致 */
main h1:not(.hero h1):not(.mhead h1):not(.post-head h1){font-size:1.35rem; margin-top:.2em}
.hero-photo p{max-width:62ch}

/* who we are */
.whocards{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:16px; margin-top:16px}
.whocard{
  display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); color:var(--body); transition:.16s;
}
.whocard:hover{transform:translateY(-2px); color:var(--body)}
.whocard img{width:100%; height:170px; object-fit:cover; display:block}
.whocard div{padding:14px 16px 16px}
.whocard h3{margin:0 0 6px; font-size:1.02rem; color:var(--ink)}
.whocard p{margin:0; font-size:.88rem; color:var(--muted)}

/* 产能 */
.capgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-top:14px}
.capgrid div{background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px; text-align:center}
.capgrid strong{display:block; font-size:1.5rem; color:var(--accent); line-height:1.1}
.capgrid span{font-size:.78rem; color:var(--muted)}

/* 图廊 */
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; margin-top:14px}
.gallery-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.gallery figure{margin:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff}
.gallery img{width:100%; height:170px; object-fit:cover; display:block}
.gallery figcaption{font-size:.76rem; color:var(--muted); padding:7px 10px; line-height:1.35}
.wide{margin:14px 0}
.wide img{width:100%; border-radius:var(--radius); display:block}
.wide figcaption{font-size:.8rem; color:var(--muted); margin-top:6px}

/* 流程 */
.steps{list-style:none; padding:0; margin:16px 0 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; counter-reset:st}
.steps li{background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px}
.steps b{display:block; color:var(--ink); margin-bottom:5px; font-size:.95rem}
.steps span{font-size:.86rem; color:var(--muted)}

/* FAQ */
.faq{margin-top:14px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer; padding:13px 16px; font-weight:600; color:var(--ink); font-size:.95rem}
.faq summary:hover{background:#f8fafc}
.faq details[open] summary{border-bottom:1px solid var(--line); color:var(--accent)}
.faq details p{padding:12px 16px 16px; margin:0; font-size:.9rem; color:var(--body)}

/* 服务网格 */
.svcgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin-top:14px}
.svcgrid div{background:#fff; border:1px solid var(--line); border-radius:12px; padding:15px}
.svcgrid h3{margin:0 0 6px; font-size:.98rem}
.svcgrid p{margin:0; font-size:.87rem; color:var(--muted)}

/* 面包屑 */
.crumbs{font-size:.8rem; color:var(--muted); margin-bottom:10px}
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0}
.crumbs li.sep{color:#cbd5e1}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent)}

.factory .lead{font-size:1.05rem; color:var(--muted); margin-bottom:6px}

@media (max-width:600px){
  .whocard img{height:145px}
  .gallery img{height:150px}
}

/* RTL */
[dir="rtl"] .steps b,
[dir="rtl"] .whocard h3{text-align:start}

  background:
    radial-gradient(900px 380px at 12% -10%, rgba(255,122,26,.30), transparent 60%),
    radial-gradient(700px 320px at 92% 0%, rgba(14,159,143,.28), transparent 60%),
    linear-gradient(180deg,#0f172a,#1c2b47);
  color:#e8eef7; padding:44px 0 40px;
}
.hero-badge{
  display:inline-block; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  padding:5px 10px; border-radius:999px; margin-bottom:14px;
}
.hero h1{color:#fff; max-width:22ch; font-size:2.1rem}
.hero p{color:#c3d0e2; max-width:62ch; font-size:1rem}
.hero-cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px}

/* ------------------------------------------------------------------ btn */
.btn{
  display:inline-block; border:0; cursor:pointer; font-size:.95rem; font-weight:600;
  padding:12px 20px; border-radius:10px; transition:.15s; text-align:center;
}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 6px 18px rgba(255,122,26,.30)}
.btn-primary:hover{background:var(--accent-dark); color:#fff}
.btn-ghost{background:#eef2f7; color:var(--ink)}
.btn-ghost:hover{background:#e2e8f0; color:var(--ink)}
.btn-ghost.danger{color:var(--err)}
.btn-block{display:block; width:100%; margin-top:14px}
.btn:visited{color:#fff}
.btn-ghost:visited{color:var(--ink)}

/* ----------------------------------------------------------------- stats */
.stats{background:#fff; border-bottom:1px solid var(--line)}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:18px}
.stats-grid div{text-align:center}
.stats-grid strong{display:block; font-size:1.4rem; color:var(--ink)}
.stats-grid span{font-size:.78rem; color:var(--muted)}

/* ----------------------------------------------------------------- cards */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; margin-top:16px}
.mcard,.gcard{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow); display:block; color:var(--body);
  transition:.16s; position:relative; overflow:hidden;
}
.mcard:hover,.gcard:hover{transform:translateY(-2px); box-shadow:0 10px 28px rgba(15,23,42,.12); color:var(--body)}
.mcard-head h3{margin:0; font-size:1.05rem}
.mcard-zh{font-size:.8rem; color:var(--muted)}
.mcard-meta{font-size:.82rem; color:var(--muted); margin:6px 0 8px}
.mcard-desc{font-size:.9rem; margin:8px 0 12px}
.mcard-cats{display:flex; flex-wrap:wrap; gap:6px}
.mcard-foot{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px}
.mcard-price{font-weight:700; color:var(--ink); font-size:.9rem}
.mcard .bar{height:5px; background:#eef2f7; border-radius:999px; margin:-4px 0 10px}
.mcard .bar i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--accent),#ffb066)}
.gcard-icon{font-size:1.4rem}
.gcard h3{margin:4px 0 6px}
.gcard p{font-size:.9rem; margin:0 0 10px}
.linklike{font-weight:700; color:var(--accent-dark); font-size:.88rem}

/* ---------------------------------------------------------------- chips */
.chip{
  display:inline-block; font-size:.76rem; background:#eef2f7; color:#475569;
  border:1px solid var(--line); border-radius:999px; padding:3px 9px;
}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.filters{display:flex; flex-wrap:wrap; gap:7px; margin:14px 0 4px}
.chip-btn{cursor:pointer; background:#fff}
.chip-btn.active{background:var(--ink); color:#fff; border-color:var(--ink)}
.badge{font-size:.72rem; border-radius:999px; padding:3px 9px; font-weight:600}
.badge-1{background:#e7f7f3; color:#0b7a6d; border:1px solid #bfe8e0}
.badge-2{background:#eef2ff; color:#3730a3; border:1px solid #c7d2fe}

/* ------------------------------------------------------------------ form */
.form-card{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:22px; box-shadow:var(--shadow);
}
/* 首页首屏询价表单：紧跟自我简介，用暖色描边 + 顶部色条吸引注意 */
.lead-early{padding-top:26px}
.lead-early .form-card{
  border:1px solid rgba(255,122,26,.55);
  box-shadow:0 2px 4px rgba(255,122,26,.08), 0 14px 40px rgba(255,122,26,.12);
  position:relative; overflow:hidden;
}
.lead-early .form-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg,var(--accent),var(--accent-dark));
}
.lead-early .form-card h2{font-size:1.35rem}
@media (max-width:600px){
  .lead-early{padding-top:18px}
  .lead-early .form-card{padding:18px 16px}
}
.form-card h2{margin-bottom:4px}
/* 反垃圾蜜罐：视觉隐藏但对表单提交可见 */
.hp-field{position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
label{display:block; margin-bottom:12px; font-size:.85rem; color:var(--ink); font-weight:600}
label span{display:block; margin-bottom:5px}
input,select,textarea{
  width:100%; font:inherit; font-size:.95rem; font-weight:400; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:11px 12px;
}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(255,122,26,.45); border-color:var(--accent)}
textarea{resize:vertical}
.form-msg{margin-top:12px; padding:11px 13px; border-radius:10px; font-size:.9rem}
.form-msg.info{background:#eef4ff; color:#1d4ed8; border:1px solid #cfe0ff}
.form-msg.ok{background:#e9f7ef; color:var(--ok); border:1px solid #b7e4c7}
.form-msg.err{background:#fdecec; color:var(--err); border:1px solid #f6c6c6}

/* ---------------------------------------------------------------- finder */
.finder{background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:var(--shadow)}
.finder .btn{margin-top:6px}

/* ------------------------------------------------------------ market pg */
.back{display:inline-block; font-size:.88rem; margin-bottom:12px}
.mhead h1{margin-bottom:2px}
.mhead{display:flex; flex-direction:column; gap:6px; align-items:flex-start; margin-bottom:14px}
.info{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:6px 16px; margin:0 0 8px;
}
.info>div{display:flex; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:.92rem}
.info>div:last-child{border-bottom:0}
.info .k{width:150px; flex-shrink:0; color:var(--muted); font-size:.84rem}
.info .v{color:var(--ink)}
.floors,.tips,.points,.why{margin:6px 0 0; padding-inline-start:20px}
.floors li,.tips li,.points li{margin-bottom:7px}
.tips li::marker{color:var(--accent)}
.lead{font-size:1.02rem; color:var(--ink)}
.why li{margin-bottom:8px}

/* ---------------------------------------------------------------- leads */
.leads-actions{display:flex; gap:10px; margin:12px 0 16px; flex-wrap:wrap}
.tablewrap{overflow-x:auto; background:#fff; border:1px solid var(--line); border-radius:var(--radius)}
.leadtable{border-collapse:collapse; width:100%; font-size:.85rem; min-width:640px}
.leadtable th,.leadtable td{padding:10px 12px; border-bottom:1px solid var(--line); text-align:start; vertical-align:top}
.leadtable th{background:#f1f5f9; color:var(--ink); font-size:.8rem; white-space:nowrap}

/* --------------------------------------------------------------- footer */
.site-footer{background:var(--nav); color:#94a3b8; padding:30px 0 18px; margin-top:30px}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1.2fr; gap:22px}
.site-footer h4{color:#fff; font-size:.9rem; margin-bottom:8px}
.site-footer a{display:block; color:#94a3b8; font-size:.88rem; margin-bottom:5px}
.site-footer a:hover{color:#fff}
.site-footer p{font-size:.86rem}
.footmail a{color:var(--accent)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); margin-top:20px; padding-top:14px;
  font-size:.8rem; color:#7c8ba1;
}

/* ---------------------------------------------------------------- toast */
.toast{
  position:fixed; inset-inline:0; bottom:0; margin:auto; max-width:420px;
  background:var(--ink); color:#fff; font-size:.86rem; text-align:center;
  padding:11px 16px; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.25);
  transform:translateY(140%); transition:.28s; z-index:99;
}
.toast.show{transform:translateY(-16px)}

/* -------------------------------------------------------------- articles */
.acards{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; margin-top:16px}
.acard{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column;
  color:var(--body); transition:.16s;
}
.acard:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(15,23,42,.13); color:var(--body)}
.acard-img{display:block; height:150px; overflow:hidden; background:linear-gradient(135deg,#1c2b47,#0f172a)}
.acard-img img{width:100%; height:100%; object-fit:cover; display:block}
.acard-noimg{display:grid; place-items:center; color:#fff; font-weight:800; letter-spacing:.08em; font-size:1.1rem}
.acard-body{display:block; padding:14px 16px 16px}
.acard-meta{display:block; font-size:.76rem; color:var(--muted); margin-bottom:5px; letter-spacing:.01em}
.acard-body h3{margin:0 0 6px; font-size:1.02rem}
.acard-body p{font-size:.88rem; color:var(--muted); margin:0 0 10px}
.section-more{margin-top:16px}

/* post */
.post{max-width:760px}
.post-cover{width:100%; border-radius:var(--radius); margin:10px 0 18px; display:block}
.post-head{margin-bottom:8px}
.post-head h1{font-size:1.75rem; margin:6px 0 8px}
.notice{
  background:#fff7ed; border:1px solid #fed7aa; color:#9a3412;
  border-radius:10px; padding:10px 13px; font-size:.86rem; margin:10px 0 18px;
}
.post-body{font-size:1.02rem; color:#26313f}
.post-body h2{margin-top:1.7em; font-size:1.22rem; padding-top:.3em}
.post-body h3{margin-top:1.4em; font-size:1.05rem}
.post-body p{margin:0 0 1.05em}
.post-body ul,.post-body ol{margin:0 0 1.1em; padding-inline-start:22px}
.post-body li{margin-bottom:.45em}
.post-body strong{color:var(--ink)}
.post-body img{width:100%; border-radius:10px; border:1px solid var(--line); margin:14px 0; display:block}
.post-body table{
  width:100%; border-collapse:collapse; font-size:.9rem; margin:14px 0;
  display:block; overflow-x:auto;
}
.post-body th,.post-body td{border:1px solid var(--line); padding:8px 10px; text-align:start}
.post-body th{background:#f1f5f9; color:var(--ink)}
.post-body blockquote{
  margin:16px 0; padding:12px 16px; background:#f8fafc;
  border-inline-start:4px solid var(--accent); border-radius:0 10px 10px 0; color:#475569;
}
.post-body blockquote p:last-child{margin-bottom:0}
.post-body code{
  background:#f1f5f9; padding:2px 6px; border-radius:5px; font-size:.9em; color:#0f172a;
}
.post-body hr{border:0; border-top:1px solid var(--line); margin:26px 0}
.post-related{margin-top:26px}
.post-cta{
  margin-top:26px; padding:18px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); text-align:center;
}
.post-cta p{margin:0 0 12px; font-weight:600; color:var(--ink)}
.post .acards{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}

@media (max-width:600px){
  .post-head h1{font-size:1.35rem}
  .acard-img{height:130px}
}

/* ----------------------------------------------------------- region band */
.regionband{background:#fff; border-block:1px solid var(--line)}
.region-cards{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px}
.rcard{
  display:block; padding:16px; border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg,#fbfdff,#f4f8fc); color:var(--body); box-shadow:var(--shadow);
}
.rcard:hover{color:var(--body); border-color:#cbd5e1}
.rcard b{display:block; color:var(--ink); font-size:1rem; margin-bottom:5px}
.rcard span{font-size:.88rem; color:var(--muted)}
.region-row{max-width:420px}
.region-tip{
  margin-top:12px; padding:11px 14px; border-radius:10px; font-size:.88rem;
  background:#fff7ed; border:1px solid #fed7aa; color:#9a3412;
}
.mcard-price em{font-style:normal; font-weight:600; color:var(--muted); font-size:.85em}
@media (max-width:700px){ .region-cards{grid-template-columns:1fr} }

/* ------------------------------------------------------------------ RTL */
[dir="rtl"] .nav{margin-inline-start:0; margin-inline-end:auto}
[dir="rtl"] .stats-grid div{direction:ltr}
[dir="rtl"] .info .k{text-align:start}

/* ------------------------------------------------------------ responsive */
@media (max-width:860px){
  .nav{display:none}
  .langpick{margin-inline-start:auto}
  .grid-3{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  h1,.hero h1{font-size:1.55rem}
  .grid-2{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .info .k{width:120px}
  .section{padding:26px 14px}
  .wrap{padding:0 14px}
}