/* ==========================================================================
   Boren Label Materials — site stylesheet
   Light theme · blue→teal brand · no framework · single file, ~14KB
   ========================================================================== */

:root{
  --brand:#2563eb;
  --brand-2:#0d9488;
  --brand-grad:linear-gradient(100deg,#2563eb 0%,#0d9488 100%);
  --ink:#0f172a;
  --ink-2:#334155;
  --sub:#64748b;
  --line:#e2e8f0;
  --line-2:#cbd5e1;
  --bg:#ffffff;
  --bg-soft:#f8fafc;
  --bg-soft-2:#f1f5f9;
  --ok:#0f766e;
  --ok-bg:#ecfdf5;
  --warn:#b45309;
  --warn-bg:#fffbeb;
  --radius:10px;
  --shadow:0 1px 2px rgba(15,23,42,.06),0 8px 24px -12px rgba(15,23,42,.16);
  --maxw:1200px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%; height:auto; display:block;}
a{color:var(--brand); text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{line-height:1.25; color:var(--ink); margin:0 0 .5em;}
h1{font-size:clamp(1.7rem,3.4vw,2.5rem); letter-spacing:-.02em;}
h2{font-size:clamp(1.3rem,2.2vw,1.75rem); letter-spacing:-.01em;}
h3{font-size:1.12rem;}
h4{font-size:.98rem;}
p{margin:0 0 1em;}
ul,ol{margin:0 0 1em; padding-left:1.25em;}
li{margin:.25em 0;}
hr{border:none; border-top:1px solid var(--line); margin:2rem 0;}

.container{max-width:var(--maxw); margin:0 auto; padding:0 20px;}
.narrow{max-width:840px;}

/* ---------- top bar ---------- */
.topbar{background:var(--ink); color:#cbd5e1; font-size:.82rem;}
.topbar .container{display:flex; gap:18px; align-items:center; justify-content:space-between; min-height:38px; flex-wrap:wrap;}
.topbar a{color:#e2e8f0;}
.topbar strong{color:#fff;}
.topbar .tb-right{display:flex; gap:16px; flex-wrap:wrap;}

/* ---------- header ---------- */
.site-head{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
.site-head .container{display:flex; align-items:center; gap:20px; min-height:68px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; color:var(--ink); letter-spacing:-.02em; font-size:1.06rem;}
.brand:hover{text-decoration:none;}
.brand .mark{width:34px;height:34px;border-radius:8px;background:var(--brand-grad);display:grid;place-items:center;color:#fff;font-size:.82rem;font-weight:800;letter-spacing:-.03em;}
.brand small{display:block; font-size:.68rem; font-weight:600; color:var(--sub); letter-spacing:.04em; text-transform:uppercase;}
nav.catalog{margin-left:8px;}
nav.main{margin-left:auto;}
nav.catalog ul,nav.main ul{display:flex; gap:4px; list-style:none; margin:0; padding:0; align-items:center;}
nav.catalog li,nav.main li{position:relative;}
nav.catalog a,nav.main a{display:block; padding:9px 12px; border-radius:8px; color:var(--ink-2); font-size:.92rem; font-weight:600;}
nav.catalog a:hover,nav.main a:hover{background:var(--bg-soft-2); color:var(--ink); text-decoration:none;}
.has-drop>a::after{content:""; display:inline-block; margin-left:6px; border:4px solid transparent; border-top-color:currentColor; transform:translateY(2px);}
.drop{
  display:none; position:absolute; top:calc(100% + 6px); left:0; min-width:290px;
  background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
  padding:8px; max-height:70vh; overflow:auto;
}
.has-drop:hover>.drop,.has-drop:focus-within>.drop{display:block;}
.drop a{display:flex; justify-content:space-between; gap:12px; padding:7px 10px; border-radius:7px; font-weight:500; font-size:.88rem;}
.drop a span{color:var(--sub); font-variant-numeric:tabular-nums; font-size:.8rem;}
.head-cta{margin-left:6px;}
.head-cta a{display:inline-block; padding:10px 16px; border-radius:9px; background:var(--brand-grad); color:#fff; font-weight:700; font-size:.88rem;}
.head-cta a:hover{text-decoration:none; filter:brightness(1.06);}

/* ---------- buttons ---------- */
.btn{display:inline-block; padding:12px 20px; border-radius:9px; font-weight:700; font-size:.92rem; border:1px solid transparent; cursor:pointer;}
.btn:hover{text-decoration:none;}
.btn-primary{background:var(--brand-grad); color:#fff;}
.btn-primary:hover{filter:brightness(1.07);}
.btn-ghost{border-color:var(--line-2); color:var(--ink); background:#fff;}
.btn-ghost:hover{background:var(--bg-soft);}
.btn-light{background:#fff; color:var(--brand); border-color:#fff;}
.btn-row{display:flex; gap:12px; flex-wrap:wrap; margin:1.25rem 0;}

/* ---------- breadcrumb ---------- */
.breadcrumb{font-size:.84rem; color:var(--sub); padding:14px 0 0;}
.breadcrumb ol{display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0;}
.breadcrumb li:not(:last-child)::after{content:"/"; margin-left:6px; color:var(--line-2);}
.breadcrumb a{color:var(--sub);}
.breadcrumb [aria-current]{color:var(--ink); font-weight:600;}

/* ---------- hero ---------- */
.hero{background:linear-gradient(180deg,#eff6ff 0%,#f0fdfa 55%,#fff 100%); border-bottom:1px solid var(--line); padding:54px 0 44px;}
.hero h1{max-width:22ch;}
.hero .lede{font-size:1.08rem; color:var(--ink-2); max-width:62ch;}
.eyebrow{display:inline-block; font-size:.76rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-2); margin-bottom:10px;}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:1.5rem;}

/* ---------- stats strip ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:2rem 0;}
.stats div{background:#fff; padding:16px 18px;}
.stats b{display:block; font-size:1.6rem; letter-spacing:-.02em; background:var(--brand-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-variant-numeric:tabular-nums;}
.stats span{font-size:.82rem; color:var(--sub);}

/* ---------- sections ---------- */
.section{padding:46px 0;}
.section.soft{background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; flex-wrap:wrap;}
.section-head p{color:var(--sub); margin:0; max-width:62ch;}

/* ---------- grids & cards ---------- */
.grid{display:grid; gap:16px;}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}
.g3{grid-template-columns:repeat(auto-fill,minmax(268px,1fr));}
.g4{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px; transition:.15s; display:flex; flex-direction:column;}
.card:hover{border-color:var(--line-2); box-shadow:var(--shadow); transform:translateY(-1px);}
.card h3{margin:0 0 6px; font-size:1rem;}
.card h3 a{color:var(--ink);}
.card p{color:var(--sub); font-size:.88rem; margin:0 0 10px;}
.card .meta{margin-top:auto; padding-top:10px; border-top:1px solid var(--line); display:flex; justify-content:space-between; font-size:.78rem; color:var(--sub);}
.tile{display:flex; flex-direction:column; gap:4px; padding:16px; border:1px solid var(--line); border-radius:var(--radius); background:#fff;}
.tile:hover{border-color:var(--brand); box-shadow:var(--shadow); text-decoration:none;}
.tile b{color:var(--ink); font-size:.95rem;}
.tile em{font-style:normal; color:var(--sub); font-size:.8rem;}
.tile .go{color:var(--brand); font-weight:700; font-size:.82rem; margin-top:6px;}

/* ---------- chips / badges ---------- */
.chip{display:inline-block; padding:4px 10px; border-radius:999px; background:var(--bg-soft-2); color:var(--ink-2); font-size:.78rem; font-weight:600;}
.chip.on{background:#e0e7ff; color:#3730a3;}
.badge{display:inline-block; padding:3px 9px; border-radius:6px; font-size:.75rem; font-weight:700;}
.badge-ok{background:var(--ok-bg); color:var(--ok);}
.badge-brand{background:#eef2ff; color:#3730a3;}
.chips{display:flex; flex-wrap:wrap; gap:7px; margin:10px 0;}

/* ---------- tables ---------- */
table.spec{width:100%; border-collapse:collapse; font-size:.9rem; margin:6px 0 1rem;}
table.spec th,table.spec td{border:1px solid var(--line); padding:9px 12px; text-align:left; vertical-align:top;}
table.spec th{background:var(--bg-soft); font-weight:700; width:34%; color:var(--ink-2);}
table.spec tr:hover td{background:#fbfdff;}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.88em;}

/* ---------- feature list ---------- */
ul.checks{list-style:none; padding:0; margin:.5rem 0 1rem;}
ul.checks li{position:relative; padding-left:26px; margin:.4em 0; color:var(--ink-2);}
ul.checks li::before{content:""; position:absolute; left:0; top:.45em; width:14px; height:14px; border-radius:4px; background:var(--brand-grad);}
ul.checks li::after{content:""; position:absolute; left:4.5px; top:.62em; width:5px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);}

/* ---------- 3-layer construction ---------- */
.construction{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:1rem 0 1.5rem;}
.layer{border:1px solid var(--line); border-radius:var(--radius); padding:16px; background:#fff;}
.layer b{display:block; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-2); margin-bottom:6px;}
.layer strong{display:block; font-size:1rem; margin-bottom:8px; color:var(--ink);}
.layer span{font-size:.86rem; color:var(--sub);}
.layer.face{border-top:3px solid #2563eb;}
.layer.glue{border-top:3px solid #0d9488;}
.layer.liner{border-top:3px solid #64748b;}

/* ---------- callout ---------- */
.callout{border-left:4px solid var(--brand); background:#f0f7ff; padding:14px 18px; border-radius:0 var(--radius) var(--radius) 0; margin:1.25rem 0; font-size:.92rem;}
.callout.ok{border-left-color:var(--ok); background:var(--ok-bg);}
.callout.warn{border-left-color:var(--warn); background:var(--warn-bg);}
.callout p:last-child{margin-bottom:0;}

/* ---------- media placeholder ---------- */
.media{border:1px dashed var(--line-2); border-radius:var(--radius); background:var(--bg-soft); padding:18px; text-align:center;}
.media svg{margin:0 auto 8px;}
.media b{display:block; font-size:.92rem;}
.media code{font-size:.78rem; color:var(--sub);}

/* ---------- filter bar ---------- */
.filterbar{display:grid; grid-template-columns:2fr 1fr 1fr auto; gap:10px; align-items:end; padding:16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-soft); margin:1.25rem 0;}
.filterbar label{display:block; font-size:.76rem; font-weight:700; color:var(--sub); text-transform:uppercase; letter-spacing:.06em; margin-bottom:5px;}
.filterbar input,.filterbar select{width:100%; padding:10px 12px; border:1px solid var(--line-2); border-radius:8px; font-size:.9rem; background:#fff; color:var(--ink);}
.filterbar .count{font-size:.85rem; color:var(--sub); white-space:nowrap; padding-bottom:10px;}
.prod-card{border:1px solid var(--line); border-radius:var(--radius); background:#fff; padding:14px; display:flex; flex-direction:column; gap:6px;}
.prod-card:hover{border-color:var(--brand); box-shadow:var(--shadow);}
.prod-card .code{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.8rem; font-weight:700; color:var(--brand);}
.prod-card .nm{font-weight:700; font-size:.94rem; color:var(--ink);}
.prod-card .spec-line{font-size:.8rem; color:var(--sub);}
.prod-card .tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:4px;}
.prod-card .tags i{font-style:normal; font-size:.7rem; padding:2px 7px; border-radius:999px; background:var(--bg-soft-2); color:var(--ink-2);}
.empty{padding:40px; text-align:center; color:var(--sub);}

/* ---------- pagination-ish note ---------- */
.toolbar{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:1rem 0; font-size:.86rem; color:var(--sub);}

/* ---------- footer ---------- */
footer.site-foot{background:var(--ink); color:#94a3b8; padding:46px 0 22px; font-size:.88rem; margin-top:10px;}
footer.site-foot a{color:#cbd5e1;}
footer.site-foot h4{color:#fff; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:12px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px;}
.foot-grid ul{list-style:none; padding:0; margin:0;}
.foot-grid li{margin:.34em 0;}
.foot-bottom{border-top:1px solid #1e293b; margin-top:28px; padding-top:16px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.8rem; color:#64748b;}
.foot-brand{display:flex; align-items:center; gap:10px; color:#fff; font-weight:800; margin-bottom:10px;}

/* ---------- cta band ---------- */
.cta-band{background:var(--brand-grad); color:#fff; border-radius:14px; padding:34px; display:flex; justify-content:space-between; align-items:center; gap:22px; flex-wrap:wrap; margin:2.5rem 0;}
.cta-band h2{color:#fff; margin:0 0 6px;}
.cta-band p{color:#e0f2fe; margin:0;}

/* ---------- catalogue: left filter sidebar + right grid ---------- */
.cat-wrap{display:grid; grid-template-columns:262px minmax(0,1fr); gap:26px; align-items:start; margin-top:1.4rem;}
.filters{position:sticky; top:84px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px 16px 10px; max-height:calc(100vh - 104px); overflow:auto;}
.f-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
.f-head h2{font-size:.98rem; margin:0;}
#reset{border:none; background:none; color:var(--brand); font-weight:700; font-size:.8rem; cursor:pointer; padding:4px;}
#reset:hover{text-decoration:underline;}
.f-search input{width:100%; padding:9px 12px; border:1px solid var(--line-2); border-radius:8px; font-size:.88rem; background:#fff; color:var(--ink);}
.f-search input:focus{outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand);}
.f-group{border-top:1px solid var(--line); margin-top:12px; padding-top:8px;}
.f-group summary{cursor:pointer; font-weight:700; font-size:.86rem; color:var(--ink); list-style:none; display:flex; justify-content:space-between; align-items:center; padding:4px 0;}
.f-group summary::-webkit-details-marker{display:none;}
.f-group summary::after{content:"+"; color:var(--sub); font-weight:400; font-size:1rem;}
.f-group[open] summary::after{content:"\2013";}
.f-group summary b{color:var(--sub); font-weight:600; font-size:.78rem; margin-left:6px;}
.f-group ul{list-style:none; margin:6px 0 8px; padding:0; max-height:230px; overflow:auto;}
.f-item{display:flex; align-items:center; gap:8px; padding:5px 2px; font-size:.85rem; color:var(--ink-2); cursor:pointer; border-radius:6px;}
.f-item:hover{color:var(--ink);}
.f-item input{accent-color:var(--brand); margin:0; flex:none;}
.f-item span{margin-left:auto; color:var(--sub); font-size:.76rem; font-variant-numeric:tabular-nums;}
.cat-head{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px;}
.cat-head .count{font-size:.9rem; color:var(--sub);}
.cat-head .count span{color:var(--ink); font-weight:800; font-variant-numeric:tabular-nums;}
.sort{font-size:.84rem; color:var(--sub); display:flex; gap:8px; align-items:center;}
.sort select{padding:7px 10px; border:1px solid var(--line-2); border-radius:8px; background:#fff; font-size:.84rem; color:var(--ink);}
#grid{grid-template-columns:repeat(auto-fill,minmax(236px,1fr));}

/* ---------- enquiry form (contact page) ---------- */
.rfq-intro{font-size:1.02rem; color:var(--ink-2); margin:0 0 1.1rem;}
.rfq-form{border:1px solid var(--line); border-radius:14px; background:var(--bg-soft); padding:22px; box-shadow:var(--shadow);}
.rfq-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 18px;}
.fld{display:block;}
.fld span{display:block; font-size:.76rem; font-weight:700; color:var(--ink-2); text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px;}
.fld span b{color:#dc2626;}
.fld span em{font-style:normal; text-transform:none; font-weight:400; color:var(--sub); letter-spacing:0; margin-left:6px;}
.fld input,.fld textarea{width:100%; padding:11px 12px; border:1px solid var(--line-2); border-radius:9px; background:#fff; color:var(--ink); font:inherit; font-size:.94rem;}
.fld input:focus,.fld textarea:focus{outline:2px solid rgba(37,99,235,.22); border-color:var(--brand);}
.fld-wide{margin-top:14px;}
.fld textarea{resize:vertical; min-height:96px;}
.rfq-form button.btn{font-family:inherit;}
.rfq-err{margin:10px 0 0; color:#b91c1c; font-size:.86rem; font-weight:600;}
.rfq-note{font-size:.8rem; color:var(--sub); margin:10px 0 0;}
.rfq-banner{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:0 0 16px; padding:11px 14px;
  border-radius:10px; background:var(--ok-bg); border:1px solid #99f6e4; color:#0f766e; font-size:.9rem;}
.rfq-tag{font-weight:700;}
.rfq-banner strong{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:#fff;
  border:1px solid #99f6e4; border-radius:6px; padding:1px 7px;}
.rfq-banner-hint{opacity:.85;}
.rfq-out{margin:16px 0 0; padding:16px; border-radius:10px; background:#fff; border:1px solid var(--line-2);}
.rfq-out .btn-row{margin:10px 0 0;}
.rfq-copied{color:var(--ok); font-weight:600;}
@media (max-width:760px){
  .rfq-grid{grid-template-columns:1fr;}
  .rfq-form{padding:16px;}
}
@media (max-width:920px){
  .cat-wrap{grid-template-columns:1fr;}
  .filters{position:static; max-height:none;}
  .f-group ul{max-height:180px;}
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .foot-grid{grid-template-columns:1fr 1fr;}
  .filterbar{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  .site-head .container{flex-wrap:wrap; padding:10px 16px; gap:10px;}
  nav.catalog{order:3; margin-left:0;}
  nav.main{order:4; margin-left:0; width:auto; flex:1;}
  nav.catalog ul,nav.main ul{overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch;}
  nav.catalog a,nav.main a{white-space:nowrap; font-size:.86rem; padding:8px 10px;}
  .drop{position:fixed; left:12px; right:12px; min-width:0;}
  .head-cta{margin-left:auto;}
  .construction{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr 1fr;}
  .filterbar{grid-template-columns:1fr;}
  .hero{padding:36px 0 30px;}
  .foot-grid{grid-template-columns:1fr;}
}
@media print{
  .site-head,.topbar,.cta-band,footer.site-foot{display:none;}
}
p.quote-cta{
  font-size:.9rem; line-height:1.6; color:var(--ink-2);
  background:var(--bg-soft); border:1px solid var(--line);
  border-left:3px solid var(--brand-2, #0d9488);
  border-radius:10px; padding:12px 14px; margin:.9rem 0 0;
}

/* 语言切换按钮（页头）：轻量描边样式，区别于报价主按钮 */
.head-cta a.lang{background:transparent;color:var(--ink-2);border:1px solid var(--line-2);font-weight:600;padding:9px 12px;}
.head-cta a.lang:hover{border-color:var(--brand);color:var(--brand);filter:none;}

/* 顶栏定位分隔符 */
.tb-sep{margin:0 8px;opacity:.5;}

/* ---------- Hero 快速找料 ---------- */
.hero-find{display:flex; gap:10px; max-width:640px; margin:1.6rem 0 12px;}
.hero-find input{flex:1 1 auto; padding:13px 16px; border:1px solid var(--line-2); border-radius:9px; font-size:.95rem; background:#fff; color:var(--ink); box-shadow:var(--shadow);}
.hero-find input:focus{outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand);}
.hero-find .btn{white-space:nowrap;}
.quick-chips{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:.84rem; color:var(--sub); max-width:680px;}
.quick-chips a{padding:5px 12px; border-radius:999px; background:#fff; border:1px solid var(--line); color:var(--ink-2); font-weight:600; font-size:.8rem;}
.quick-chips a:hover{border-color:var(--brand); color:var(--brand); text-decoration:none;}

/* ---------- 三大价值支柱 ---------- */
.pillars{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin-top:1.4rem;}
.pillar{background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px 20px; display:flex; flex-direction:column;}
.pillar:hover{border-color:var(--line-2); box-shadow:var(--shadow);}
.pillar h3{font-size:1.08rem; margin:0 0 4px;}
.pillar .p-tag{align-self:flex-start; display:inline-block; padding:4px 12px; border-radius:999px; background:var(--brand-grad); color:#fff; font-size:.78rem; font-weight:800; letter-spacing:.02em; margin-bottom:12px;}
.pillar ul.checks{margin-bottom:0;}
@media (max-width:760px){
  .hero-find{flex-direction:column;}
  .hero-find .btn{width:100%;}
}