/* 外贸站前台样式。主色/强调色由后台设置注入 --brand / --accent。
   视觉方向：出口货运的“装箱单 / 货签”语言——冷灰纸面、墨蓝文字、信号黄只用于行动按钮。 */
:root{
  --ink:#17202A; --paper:#F3F5F3; --white:#FFFFFF; --steel:#56636F; --line:#D3D9D5; --mist:#E7ECE9;
  --brand:#1E4E79; --accent:#F2B705; --ok:#1F7A4D; --err:#B3261E;
  --display:"Archivo","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans","Segoe UI",Roboto,"Noto Sans","Noto Sans Arabic","Hiragino Sans","Noto Sans JP",sans-serif;
  --r:3px; --wrap:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--body)}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--display);font-stretch:82%;line-height:1.1;margin:0 0 .5em;letter-spacing:-.005em}
h1{font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:750}
h2{font-size:clamp(1.4rem,2.4vw,1.85rem);font-weight:700}
h3{font-size:1.1rem;font-weight:650}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.narrow{max-width:760px}
.center{text-align:center}
.muted{color:var(--steel)}
.lead{font-size:1.1rem;color:var(--steel)}
.sr,.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:-999px;top:0;background:var(--ink);color:#fff;padding:8px 12px;z-index:50}
.skip:focus{inset-inline-start:8px}
.section{padding-block:56px}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.section-head h1,.section-head h2{margin:0}
.empty{padding:32px;background:var(--white);border:1px dashed var(--line);color:var(--steel)}

/* 按钮 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:10px 22px;
  border:2px solid transparent;border-radius:var(--r);font:600 1rem/1.2 var(--body);text-decoration:none;cursor:pointer;
  background:var(--ink);color:#fff}
.btn:hover{filter:brightness(1.08);color:#fff}
.btn-sm{min-height:38px;padding:6px 14px;font-size:.92rem}
.btn-block{width:100%}
.btn-primary{background:var(--brand);color:#fff}
.btn-accent{background:var(--accent);color:var(--ink)}
.btn-accent:hover{color:var(--ink)}
.btn-line{background:transparent;border-color:currentColor;color:#fff}
.btn-line-dark{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-line-dark:hover{color:var(--ink)}
.btn-amt,.h-amt{font-variant-numeric:tabular-nums;padding-inline-start:10px;margin-inline-start:2px;border-inline-start:1px solid currentColor}
.linkbtn{background:none;border:0;color:var(--err);cursor:pointer;font:inherit;text-decoration:underline;padding:0}

/* 顶栏 */
.topbar{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.topbar-in{display:flex;align-items:center;gap:20px;min-height:68px}
.brand{font:800 1.35rem/1 var(--display);font-stretch:75%;color:var(--ink);text-decoration:none;letter-spacing:.01em;margin-inline-end:auto}
.brand img{max-height:42px;width:auto}
.mainnav{display:flex;align-items:center;gap:22px}
.mainnav>a{color:var(--ink);text-decoration:none;font-weight:500}
.mainnav>a[aria-current]{box-shadow:inset 0 -3px 0 var(--accent)}
.mainnav>a.btn{color:var(--ink)}
.badge{display:inline-block;min-width:22px;padding:1px 6px;border-radius:11px;background:var(--brand);color:#fff;font-size:.78rem;text-align:center}
.langpick{position:relative}
.langpick summary{cursor:pointer;list-style:none;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r);font-size:.92rem}
.langpick summary::-webkit-details-marker{display:none}
.langpick summary::after{content:"";display:inline-block;margin-inline-start:8px;border:5px solid transparent;border-top-color:currentColor;transform:translateY(3px)}
.langpick ul{position:absolute;inset-inline-end:0;top:calc(100% + 6px);margin:0;padding:6px;list-style:none;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);min-width:190px;max-height:70vh;overflow:auto;z-index:30}
.langpick li a{display:block;padding:7px 10px;color:var(--ink);text-decoration:none;border-radius:var(--r)}
.langpick li a:hover,.langpick li a[aria-current]{background:var(--mist)}
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer}
.nav-toggle span:not(.sr){display:block;width:24px;height:2px;background:var(--ink);margin:5px 0}

/* 提示 */
.flashes{padding-top:16px}
.flash{padding:12px 16px;border-radius:var(--r);border-inline-start:4px solid;background:var(--white);margin:0 0 10px}
.flash-ok{border-color:var(--ok)}
.flash-error{border-color:var(--err);color:var(--err)}

/* 首屏 */
.hero{background:var(--ink) var(--hero-img,none) center/cover;color:var(--paper);position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,32,42,.94) 35%,rgba(23,32,42,.6));z-index:-1}
.hero-in{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:center;padding-block:72px}
.hero h1{font-size:clamp(2.6rem,6vw,4.9rem);font-stretch:68%;font-weight:800;line-height:.95;letter-spacing:-.01em;margin-bottom:22px;max-width:14ch}
.hero-sub{font-size:1.15rem;max-width:52ch;color:#C9D2D9}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 36px}
.facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 28px}
.facts li{font-weight:600;padding-inline-start:16px;position:relative}
.facts li::before{content:"";position:absolute;inset-inline-start:0;top:.35em;width:6px;height:.9em;background:var(--accent)}

/* “货签”卡片：表单、报价单等核心交互块 */
.label-card{background:var(--white);color:var(--ink);padding:28px;border-radius:var(--r);border-top:6px solid var(--accent);
  box-shadow:0 1px 0 var(--line)}
.label-card h1,.label-card h2{margin-bottom:.25em}
.hero-form{box-shadow:0 24px 50px -24px rgba(0,0,0,.6)}

/* 表单 */
form label{display:block;font-size:.9rem;font-weight:500;color:var(--steel);margin-bottom:14px}
input,select,textarea{display:block;width:100%;margin-top:5px;padding:10px 12px;font:400 1rem/1.4 var(--body);color:var(--ink);
  background:var(--white);border:1px solid #B9C2BD;border-radius:var(--r)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:0;border-color:var(--brand)}
textarea{resize:vertical}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 14px}
fieldset{border:0;padding:0;margin:4px 0 18px}
legend{font-weight:600;margin-bottom:8px}
.radio{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);color:var(--ink);margin-bottom:8px;cursor:pointer}
.radio input{width:auto;margin:0}
.radio:has(input:checked){border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}

/* 分类条 */
.catbar{display:flex;gap:8px;overflow-x:auto;padding-block:18px;border-bottom:1px solid var(--line)}
.catbar a,.chips a{white-space:nowrap;padding:7px 14px;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;background:var(--white);font-size:.93rem}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.chips a[aria-current]{background:var(--ink);color:#fff;border-color:var(--ink)}
.search{display:flex;gap:8px;min-width:min(100%,360px)}
.search input{margin:0}

/* 产品网格 */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.pcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column}
.pcard:hover{border-color:var(--steel)}
.pcard-img{aspect-ratio:4/3;background:var(--mist);display:flex;align-items:center;justify-content:center;overflow:hidden}
.pcard-img img{width:100%;height:100%;object-fit:contain}
.pcard-body{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.pcard h3{font-family:var(--body);font-size:1rem;font-weight:600;line-height:1.35;font-stretch:100%}
.pcard h3 a{color:var(--ink);text-decoration:none}
.pcard-sum{font-size:.9rem;color:var(--steel);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard-price{margin:auto 0 2px;font-weight:600;color:var(--brand);font-variant-numeric:tabular-nums}
.pcard-price small,.pricebox small{color:var(--steel);font-weight:400}
.pcard-moq{margin:0;font-size:.85rem;color:var(--steel)}

/* 为什么选择我们 */
.why{background:var(--white);border-block:1px solid var(--line)}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px 40px;margin-top:12px}
.why-item{border-inline-start:3px solid var(--accent);padding-inline-start:16px}
.why-item p{color:var(--steel);margin:0}

/* 产品详情 */
.product{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:start}
.gallery-main{aspect-ratio:1/1;background:var(--white);border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.gallery-main img{max-height:100%;object-fit:contain}
.thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.thumbs button{width:72px;height:72px;padding:2px;border:1px solid var(--line);background:var(--white);cursor:pointer;border-radius:var(--r)}
.thumbs button[aria-current]{border:2px solid var(--brand)}
.thumbs img{width:100%;height:100%;object-fit:contain}
.buybox h1{font-size:clamp(1.7rem,3vw,2.4rem)}
.pricebox{display:grid;grid-template-columns:1fr 1fr;margin:24px 0;border:1px solid var(--line);background:var(--white)}
.pricebox div{padding:14px 16px}
.pricebox div+div{border-inline-start:1px solid var(--line)}
.pricebox dt{font-size:.85rem;color:var(--steel)}
.pricebox dd{margin:0;font:700 1.5rem/1.2 var(--display);font-stretch:85%;font-variant-numeric:tabular-nums}
.buyform{display:grid;grid-template-columns:140px 1fr;gap:12px;align-items:end;margin-bottom:12px}
.buyform label{margin:0}
.product-detail{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:start;padding-bottom:40px}
.prose{white-space:pre-line;max-width:72ch}
.prose-p p{max-width:68ch}
.tablewrap{overflow-x:auto}
.specs{width:100%;border-collapse:collapse;background:var(--white);margin-bottom:24px}
.specs th,.specs td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}
.specs th{width:38%;font-weight:500;color:var(--steel);background:#FAFBFA}

/* 购物车 / 订单 */
.lines{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--line)}
.lines th,.lines td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:start;vertical-align:middle}
.lines th{font-size:.85rem;color:var(--steel);font-weight:500}
.num{text-align:end!important;font-variant-numeric:tabular-nums}
.line-item{display:flex;gap:12px;align-items:center}
.line-item img{width:56px;height:56px;object-fit:contain;background:var(--mist)}
.line-item small{display:block;color:var(--steel)}
.qty{width:110px;margin:0}
.totals{max-width:380px;margin-inline-start:auto;margin-top:18px}
.totals p{display:flex;justify-content:space-between;margin:0;padding:6px 0;font-variant-numeric:tabular-nums}
.totals .grand{border-top:2px solid var(--ink);margin-top:6px;padding-top:10px;font-size:1.2rem}
.actions{display:flex;gap:14px;justify-content:flex-end;align-items:center;flex-wrap:wrap;margin-top:20px}
.two-col{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start}
.summary{background:var(--white);border:1px solid var(--line);padding:24px;border-radius:var(--r);position:sticky;top:88px}
.sumlist{list-style:none;margin:0 0 8px;padding:0}
.sumlist li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.kv{display:grid;gap:12px;margin:20px 0 28px}
.kv div{display:grid;grid-template-columns:160px 1fr;gap:12px}
.kv dt{color:var(--steel)}
.kv dd{margin:0}
.contact-list{display:grid;gap:18px;margin-top:20px}
.contact-list dt{color:var(--steel);font-size:.9rem}
.contact-list dd{margin:0;font-size:1.15rem}
.status{display:inline-block;padding:2px 10px;border-radius:var(--r);background:var(--mist);font-weight:600}
.status-paid,.status-completed{background:#DDF1E5;color:var(--ok)}
.status-shipped,.status-processing{background:#DCE8F4;color:var(--brand)}
.status-cancelled{background:#F6DEDC;color:var(--err)}
.paybox{margin-bottom:20px}
.paybox h2{display:flex;justify-content:space-between;align-items:baseline}
.quotation .q-head{display:flex;justify-content:space-between;gap:20px;border-bottom:2px solid var(--ink);padding-bottom:16px;margin-bottom:16px}
.q-brand{font:800 1.4rem/1 var(--display);font-stretch:75%;margin-bottom:6px}
.q-meta{text-align:end}
.q-meta p{margin:0;color:var(--steel)}
.q-note{margin:20px 0;padding:14px;background:var(--paper);border-radius:var(--r)}

/* 页脚 */
.footer{background:var(--ink);color:#C3CCD3}
.footer a{color:#fff}
.footer-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;padding-block:44px}
.footer-brand{font:800 1.4rem/1 var(--display);font-stretch:75%;color:#fff}
.footer-h{color:#fff;font-weight:600}
.footer p{margin-bottom:.5em}
.footer-base{border-top:1px solid #2C3A47;padding-block:16px;font-size:.85rem}

/* WhatsApp 悬浮按钮 */
.wa{position:fixed;inset-inline-end:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;align-items:center;gap:8px;
  background:#25D366;color:#fff;text-decoration:none;border-radius:999px;padding:10px 16px 10px 12px;font-weight:600;box-shadow:0 8px 24px -8px rgba(0,0,0,.45)}
.wa:hover{color:#fff;filter:brightness(1.05)}

/* 响应式 */
@media (max-width:960px){
  .hero-in,.product,.product-detail,.two-col{grid-template-columns:1fr}
  .hero-in{gap:36px;padding-block:48px}
  .summary{position:static}
  .footer-in{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .nav-toggle{display:block}
  .mainnav{display:none;position:absolute;inset-inline:0;top:100%;background:var(--white);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;padding:12px 20px 20px;gap:4px}
  .mainnav.open{display:flex}
  .mainnav>a{padding:10px 0}
  .langpick ul{position:static;margin-top:6px}
  .grid2,.grid3{grid-template-columns:1fr}
  .footer-in{grid-template-columns:1fr}
  .kv div{grid-template-columns:1fr;gap:2px}
  .wa span{display:none}
  .wa{padding:12px}
  .label-card{padding:20px}
  .buyform{grid-template-columns:1fr}
  .lines thead{display:none}
  .lines td{display:block;border:0;padding:6px 14px}
  .lines tr{display:block;border-bottom:1px solid var(--line);padding:8px 0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.product-detail h2{margin-top:8px}
.product-detail .prose{margin-bottom:36px}