/* ============================================================
   WPC — B2B static site
   Palette: FANGSI warm greige + deep brown, light theme
   ============================================================ */
:root{
  --green-950:#1e2226;
  --green-900:#2a2e33;
  --green-800:#ed6a2e;
  --green-700:#ed6a2e;
  --green-600:#ed6a2e;
  --green-100:#fdebdd;
  --wood:#ff9c66;
  --wood-deep:#ed6a2e;
  --wood-soft:#fbd8bc;
  --sand:#fff6ef;
  --cream:#fbefe5;
  --ink:#1e2226;
  --muted:#6e7278;
  --line:#eae1d8;
  --white:#ffffff;
  --shadow:0 10px 30px rgba(30,34,38,.08);
  --shadow-lg:0 22px 50px rgba(30,34,38,.16);
  --radius:14px;
  --font:'Segoe UI','Helvetica Neue',Roboto,Arial,'PingFang SC','Microsoft YaHei',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);line-height:1.65;background:var(--white);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
b,strong{font-weight:700}
.container{max-width:1200px;margin-inline:auto;padding-inline:24px}
.sec{padding:88px 0}
.sec--sand{background:var(--sand)}
.sec--cream{background:var(--cream)}
.sec--green{background:linear-gradient(120deg,#f5f5f5,#ece9e4);color:#2a1a10}
.sec--woodband{background:linear-gradient(120deg,#ffb891,#ffcaa6);color:#2a1a10}
.sec-head{max-width:760px;margin-bottom:52px}
.sec-head.center{margin-inline:auto;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--green-700)}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--wood)}
.sec-head.center .eyebrow::after{content:"";width:26px;height:2px;background:var(--wood)}
.grp-title{display:flex;align-items:baseline;gap:14px;margin:10px 0 28px}
.grp-title span{font-size:20px;font-weight:800;color:var(--green-800);text-transform:uppercase;letter-spacing:.05em;display:inline-flex;align-items:center}
.grp-title span::before{content:"";width:5px;height:22px;background:var(--wood);border-radius:3px;margin-right:14px}
.grp-title small{font-size:13px;color:var(--muted);font-weight:500}
.sec--green .eyebrow,.sec--woodband .eyebrow{color:#ed6a2e}
.sec--green .eyebrow::before,.sec--woodband .eyebrow::before{background:#ed6a2e}
h1,h2,h3{line-height:1.18;font-weight:800;letter-spacing:-.01em}
.h2{font-size:clamp(28px,3.4vw,42px);margin:10px 0 14px}
.sec--green .h2,.sec--woodband .h2{color:#2a1a10}
.lead{font-size:17px;color:var(--muted)}
.sec--green .lead,.sec--woodband .lead{color:#40342a}
.grid{display:grid;gap:26px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.center{text-align:center}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 28px;border-radius:999px;font-weight:700;font-size:15px;border:1.5px solid transparent;cursor:pointer;transition:.25s;line-height:1}
.btn .arr{transition:transform .25s}
.btn:hover .arr{transform:translateX(4px)}
.btn--green{background:var(--wood);color:#2a1a10}
.btn--green:hover{background:var(--wood-deep)}
.btn--wood{background:var(--wood);color:#2a1a10}
.btn--wood:hover{background:var(--wood-deep)}
.btn--ghost{border-color:rgba(42,26,16,.4);color:#2a1a10;background:rgba(255,255,255,.45);backdrop-filter:blur(3px)}
.btn--ghost:hover{background:rgba(255,255,255,.75)}
.btn--outline{border-color:var(--green-800);color:var(--green-800);background:transparent}
.btn--outline:hover{background:var(--green-800);color:#fff}
.hero .btn--ghost{border-color:#ff9c66;color:#ed6a2e;background:rgba(255,255,255,.7)}
.hero .btn--ghost:hover{background:#ed6a2e;color:#fff}
.btn--sm{padding:10px 18px;font-size:13.5px}

/* ================= top bar & header ================= */
.topbar{background:#f0f0f0;color:#40342a;font-size:13px}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:38px}
.topbar a:hover{color:#c24e08}
.tb-links{display:flex;gap:20px;align-items:center}
.tb-links .dotsep{opacity:.35}
.site-head{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 2px 10px rgba(30,34,38,.03)}
.site-head .container{display:flex;align-items:center;gap:34px;min-height:104px}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{height:74px;width:auto;display:block}
.brand-logo-chip{background:#fff;border-radius:10px;padding:8px 14px;display:inline-flex;align-items:center}
.site-foot .brand-logo{height:54px}
.brand-mark{width:46px;height:46px;border-radius:8px;background:var(--green-800);display:grid;place-items:center;flex:none}
.brand-mark::after{content:"";width:24px;height:24px;background:var(--wood);border-radius:4px;display:block}
.brand-name{font-size:23px;font-weight:900;letter-spacing:.5px;color:var(--green-950);line-height:1}
.brand-name span{color:var(--green-800)}
.brand-sub{font-size:10.5px;letter-spacing:.24em;color:var(--muted);font-weight:700;margin-top:3px;text-transform:uppercase;display:block}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav>li{position:relative}
.nav>li>a{display:flex;align-items:center;gap:6px;padding:10px 15px;font-weight:600;font-size:15px;color:var(--ink);border-radius:8px;transition:.2s}
.nav>li>a:hover{color:var(--green-800);background:var(--cream)}
.nav>li.active>a{color:var(--green-800)}
.nav>li.active>a::after{content:"";position:absolute;left:15px;right:15px;bottom:4px;height:2px;border-radius:2px;background:var(--wood)}
.nav .caret{font-size:9px;transition:transform .2s}
.nav>li.drop:hover .caret,.nav>li.drop.open .caret{transform:rotate(180deg)}
.drop-menu{position:absolute;top:calc(100% + 10px);left:0;min-width:250px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:10px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.22s;z-index:70}
.nav>li.drop:hover .drop-menu,.nav>li.drop.open .drop-menu{opacity:1;visibility:visible;transform:translateY(0)}
.drop-menu a{display:block;padding:11px 14px;border-radius:8px;font-weight:600;font-size:14.5px}
.drop-menu a small{display:block;font-weight:400;color:var(--muted);font-size:12.5px;margin-top:2px}
.drop-menu a:hover{background:var(--cream);color:var(--green-800)}
.drop-label{display:block;padding:12px 14px 3px;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:700}
.drop-menu a.drop-top{font-weight:700}
.drop-menu a.drop-top small{font-weight:400}
.nav-cta{margin-left:14px}
.nav-toggle{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;position:relative}
.nav-toggle span{position:absolute;left:11px;right:11px;height:2px;background:var(--green-900);border-radius:2px;transition:.25s}
.nav-toggle span:nth-child(1){top:15px}
.nav-toggle span:nth-child(2){top:21px}
.nav-toggle span:nth-child(3){top:27px}
.nav-toggle.open span:nth-child(1){top:21px;transform:rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){top:21px;transform:rotate(-45deg)}

/* ================= hero ================= */
.hero{position:relative;min-height:640px;display:flex;align-items:center;color:var(--ink);overflow:hidden;background:#fff8f3}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,248,243,.97) 6%,rgba(255,248,243,.86) 46%,rgba(255,248,243,.16) 78%,rgba(255,248,243,.02))}
.hero .container{position:relative;z-index:2}
.hero-inner{max-width:680px;padding:96px 0 220px}
.hero .eyebrow{color:#ed6a2e}
.hero .eyebrow::before{background:#ed6a2e}
.hero h1{font-size:clamp(34px,5vw,58px);margin:16px 0 20px;font-weight:900}
.hero h1 em{font-style:normal;color:#ed6a2e}
.hero p{font-size:18px;color:#5d6167;max-width:560px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.trust-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(237,106,46,.5);border-radius:999px;padding:7px 14px;font-size:13px;color:#1e2226;background:rgba(255,255,255,.72);backdrop-filter:blur(3px)}
.trust-chip .dot{width:7px;height:7px;border-radius:50%;background:#ff9c66}

/* full-image carousel banner hero (pre-composed artwork: text + CTAs + capability badges baked into each image) */
.hero--banner{min-height:0;display:block;background:transparent}
.hero-carousel{position:relative;overflow:hidden}
.hero-track{display:flex;transition:transform .65s cubic-bezier(.25,.8,.3,1)}
.hero-slide{flex:0 0 100%;width:100%}
.hero-slide img{width:100%;height:auto;object-fit:contain;display:block}
.hero-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:46px;height:46px;border:0;border-radius:50%;background:rgba(20,16,12,.44);color:#fff;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.25s;backdrop-filter:blur(2px)}
.hero-nav:hover{background:rgba(20,16,12,.72)}
.hero-nav--prev{left:18px}
.hero-nav--next{right:18px}
.hero-dots{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:4;display:flex;gap:10px}
.hero-dot{width:10px;height:10px;border:0;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer;transition:.25s;padding:0}
.hero-dot.is-active{background:#ffb27a;width:26px;border-radius:999px}


/* page hero (inner pages) */
.page-hero{position:relative;min-height:320px;display:flex;align-items:flex-end;color:var(--ink);overflow:hidden;background:#fff8f3}
.page-hero .ph-media{position:absolute;inset:0}
.page-hero .ph-media img{width:100%;height:100%;object-fit:cover}
.page-hero .ph-media::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,248,243,.96) 10%,rgba(255,248,243,.86) 60%,rgba(255,248,243,.46))}
.page-hero .container{position:relative;z-index:2;padding-bottom:54px;padding-top:80px}
.crumbs{font-size:13px;color:#5d6167;margin-bottom:12px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs .sep{opacity:.5}
.page-hero h1{font-size:clamp(30px,4.2vw,46px);margin-bottom:10px}
.page-hero .lead{color:#5d6167;max-width:720px;margin:0}

/* dark page hero (products overview) — photo + scrim + white text */
.page-hero--dark{min-height:440px;background:#20242a;color:#fff}
.page-hero--dark .ph-media img{object-position:50% 60%}
.page-hero--dark .ph-media::after{background:linear-gradient(100deg,rgba(20,16,12,.82) 0%,rgba(20,16,12,.66) 42%,rgba(20,16,12,.28) 100%)}
.page-hero--dark h1{color:#fff}
.page-hero--dark .crumbs,.page-hero--dark .crumbs a{color:rgba(255,255,255,.72)}
.page-hero--dark .crumbs a:hover{color:#fff}
.page-hero--dark .lead{color:rgba(255,255,255,.80);max-width:660px}
.hero-tag{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#ffb891;margin-bottom:14px}
.hero-tag::before{content:"";width:26px;height:2px;background:var(--wood)}
.ph-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn--ghost-lt{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.10);backdrop-filter:blur(4px)}
.btn--ghost-lt:hover{background:rgba(255,255,255,.22);border-color:#fff}

/* factory hero — same dark 版式 as products.html, photo background.
   The image (assets/img/factory/hall.jpg, 1920x767, 2.50:1) is a bright, evenly lit
   workshop: mean luminance 159, with skylights / white walls / a polished floor that
   run p90 230-250 across the whole frame. Unlike the previous artwork it carries NO
   built-in left-to-right darkening, so this scrim has to do ALL the work itself:
   white copy needs the backdrop held under ~121 gray to keep 4.5:1, and at 230-250
   source that means alpha >= ~0.55 in the copy zone. Hence the heavier numbers here
   versus the .60/.50/.34/.16 used for the earlier self-darkening artwork — they are
   not interchangeable. The plateau from 30% to ~74% is what protects the lead
   paragraph, which runs out past half the frame; past ~74% the scrim drops away fast
   so the machine line and the bright hall still read. Below 1200px cover starts
   cropping in from the sides, so the frame is held near centre (the sizing line) —
   there is no dark panel to preserve any more, composition is the only concern. */
.page-hero--hall .ph-media img{object-position:50% 50%}
.page-hero--hall .ph-media::after{background:linear-gradient(100deg,rgba(18,15,12,.68) 0%,rgba(18,15,12,.62) 30%,rgba(18,15,12,.55) 55%,rgba(18,15,12,.42) 74%,rgba(18,15,12,.18) 89%,rgba(18,15,12,.05) 100%)}
@media(max-width:1200px){.page-hero--hall .ph-media img{object-position:50% 50%}}
@media(max-width:760px){
  .page-hero--hall .ph-media img{object-position:46% 50%}
  .page-hero--hall .ph-media::after{background:linear-gradient(100deg,rgba(18,15,12,.74) 0%,rgba(18,15,12,.66) 55%,rgba(18,15,12,.44) 100%)}
}

/* retired: flat bitmap banner hero (text baked into the artwork). Kept only so the
   class does not 404 if it is still referenced anywhere; the factory page now uses the
   dark hero above. Artwork + recomposites live in assets/img/factory/banner*.jpg. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.page-hero--banner{display:block;min-height:0;align-items:stretch;padding:0;background:#15130f;overflow:hidden}
.page-hero--banner .banner-link{display:block;line-height:0;color:inherit;text-decoration:none}
.page-hero--banner .banner-img{display:block;width:100%;height:max(31.25vw,min(195px,41.67vw));object-fit:cover;object-position:0 0}

/* ================= icon / feature ================= */
.ico{width:54px;height:54px;flex:none}
.feat-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:.25s}
.feat-card:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.feat-card h3{font-size:18px;margin:16px 0 8px}
.feat-card p{font-size:14.5px;color:var(--muted)}
.strip{background:var(--white);border-bottom:1px solid var(--line)}
.strip-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.strip-item{padding:26px 22px;border-left:1px solid var(--line);display:flex;gap:16px;align-items:flex-start}
.strip-item:first-child{border-left:0}
.strip-item h4{font-size:15.5px;margin-bottom:3px}
.strip-item p{font-size:13px;color:var(--muted)}
.strip-item .ico{width:44px;height:44px}

/* trust badge strip (products page — mirrors the reference's badge row) */
.trust-strip{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line)}
.trust-item{background:var(--cream);display:flex;align-items:center;gap:11px;padding:20px 18px;font-size:13px;font-weight:600;line-height:1.35;color:#40342a}
.trust-item .ico{width:26px;height:26px;flex:none;color:var(--green-800)}
@media(max-width:980px){.trust-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.trust-grid{grid-template-columns:repeat(2,1fr)}.trust-item{padding:16px 14px;font-size:12.5px}}

/* product category cards */
.cat-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:.25s}
.cat-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-5px)}
.cat-media{position:relative;overflow:hidden;background:var(--sand);aspect-ratio:4/3}
.cat-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.cat-card:hover .cat-media img{transform:scale(1.05)}
.cat-media .tag{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.94);color:var(--green-900);font-size:12px;font-weight:800;letter-spacing:.06em;padding:6px 12px;border-radius:999px;text-transform:uppercase}
.cat-body{padding:24px;display:flex;flex-direction:column;flex:1}
.cat-body h3{font-size:19px}
.cat-body .sub{color:var(--muted);font-size:13px;margin:3px 0 12px;display:block}
.cat-body p{font-size:14px;color:var(--muted);flex:1}
.cat-card--alt{border-color:var(--wood)}
.cat-card--alt .cat-body{background:#fdf7f2}
.cat-card--alt:hover{box-shadow:var(--shadow-lg);transform:translateY(-5px)}
.cat-link{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-weight:700;color:var(--green-800);font-size:14.5px}
.cat-link:hover{color:var(--wood-deep)}
.cat-link .arr{transition:transform .2s}
.cat-link:hover .arr{transform:translateX(4px)}
.pill-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.pill{font-size:12px;font-weight:700;color:var(--green-800);background:var(--green-100);padding:4px 11px;border-radius:999px}

/* numbered steps */
.step-num{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--green-800);color:#fff;font-weight:800;font-size:15px;margin-bottom:14px}

/* benefits (beyond the wood) */
.benefit-card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:var(--radius);padding:26px;transition:.25s}
.benefit-card:hover{background:#fff}
.benefit-card h3{font-size:17px;margin:14px 0 6px;color:#2a1a10}
.benefit-card p{font-size:13.8px;color:#40342a}
.benefit-card .ico{width:44px;height:44px;color:#ed6a2e}

/* beyond-the-wood — split head + hairline spec panel (replaces the card grid
   so it no longer mirrors the .feat-card grid in the section above) */
.sec-head--split{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:end;max-width:none;margin-bottom:44px}
.sec-head--split .h2{margin-bottom:0}
.sec-head--split .lead{margin-bottom:4px}
.proof-panel{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.proof-cell{background:#fff;display:flex;gap:15px;align-items:flex-start;padding:26px 26px 28px;transition:background .2s}
.proof-cell:hover{background:#fdf7f2}
.proof-cell .pico{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#fdf1e9;color:#ed6a2e}
.proof-cell .pico .ico{width:22px;height:22px}
.proof-cell h3{font-size:15.5px;margin:2px 0 5px;color:#2a1a10}
.proof-cell p{font-size:13.5px;line-height:1.55;color:#5c4b3d}
@media(max-width:980px){
  .sec-head--split{grid-template-columns:1fr;gap:16px;margin-bottom:34px}
  .proof-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .proof-grid{grid-template-columns:1fr}
  .proof-cell{padding:22px}
}

/* swatches (colors) */
.swatches{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px}
.sw{display:flex;flex-direction:column;align-items:center;gap:8px;width:86px}
.sw .dot{width:52px;height:52px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:.2s}
.sw:hover .dot{transform:translateY(-3px) scale(1.04)}
.sw small{font-size:12.5px;color:var(--muted);font-weight:600;text-align:center}
.sec--green .sw small{color:#40342a}
.dot-flag{background:linear-gradient(135deg,#ffb27f 33%,#ff9c66 33%,#ff9c66 66%,#fbd8bc 66%)}

/* spec table */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.spec{width:100%;border-collapse:collapse;min-width:560px;font-size:14.5px}
.spec th{background:#f0f0f0;color:#2a2e33;text-align:left;padding:13px 18px;font-weight:700;white-space:nowrap}
.spec td{padding:12px 18px;border-top:1px solid var(--line);vertical-align:top}
.spec tbody tr:nth-child(even){background:var(--cream)}
.spec tbody tr:hover{background:var(--green-100)}
.spec-note{font-size:13px;color:var(--muted);margin-top:10px}
.tbl-title{font-size:18px;font-weight:800;margin:34px 0 14px;display:flex;align-items:center;gap:10px}
.tbl-title::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--wood)}
.tbl-title:first-child{margin-top:0}

/* split feature rows */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.split.flip .split-media{order:2}
.split+.split{margin-top:70px}
.split-media .imgbox{box-shadow:var(--shadow-lg)}
.checks{margin-top:18px;display:grid;gap:10px}
.checks li{display:flex;gap:10px;font-size:15px}
.checks .ck{color:var(--green-700);font-weight:900;flex:none}
.checks .ck.wood{color:var(--wood-deep)}

/* imgbox */
.imgbox{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--sand)}
.imgbox img{width:100%;height:100%;object-fit:cover}
.r43{aspect-ratio:4/3}.r32{aspect-ratio:3/2}.r169{aspect-ratio:16/9}.r21{aspect-ratio:2/1}.r11{aspect-ratio:1/1}
.imgcap{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.92);color:var(--green-950);font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:999px}
a.imgbox,.app-linkbox{display:block;text-decoration:none;color:inherit}
.app-linkbox img{transition:transform .35s}
.app-linkbox:hover img{transform:scale(1.04)}

/* cta band */
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.cta-inner h2{font-size:clamp(24px,3vw,36px)}
.cta-inner p{color:#40342a;margin-top:6px;max-width:640px}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap}

/* series card */
.series-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:.25s}
.series-card:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.series-card .imgbox{background:#fff}
.series-card .imgbox img{object-fit:contain}
.series-card .body{padding:26px;flex:1}
.series-card h3{font-size:19px}
.series-card .ser{display:inline-block;margin:8px 0 12px;font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--wood-deep);text-transform:uppercase}
.series-card p{font-size:14.3px;color:var(--muted)}

/* faq */
.faq{max-width:820px;margin-inline:auto}
.faq details{border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:12px;overflow:hidden}
.faq summary{cursor:pointer;padding:18px 22px;font-weight:700;font-size:15.5px;display:flex;justify-content:space-between;align-items:center;gap:14px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none;width:26px;height:26px;border-radius:50%;background:var(--green-100);color:var(--green-800);display:grid;place-items:center;font-weight:800;transition:.25s}
.faq details[open] summary .pm{transform:rotate(45deg)}
.faq .a{padding:0 22px 18px;color:var(--muted);font-size:14.5px}

/* form & contact */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:13.5px;font-weight:700;color:var(--green-950)}
.field input,.field select,.field textarea{border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;font:inherit;font-size:14.5px;background:var(--cream);color:var(--ink);transition:.2s;width:100%}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green-700);background:#fff;box-shadow:0 0 0 3px rgba(237,106,46,.28)}
.form-note{font-size:12.5px;color:var(--muted);margin-top:12px}
.form-msg{display:none;background:var(--green-100);border:1px solid var(--green-700);color:var(--green-950);border-radius:10px;padding:14px 16px;font-size:14px;margin-top:16px}
.form-msg.show{display:block}
.info-list{display:grid;gap:0}
.info-item{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.info-item:last-child{border-bottom:0}
.info-item .ico{width:44px;height:44px}
.info-item h4{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:3px}
.info-item a,.info-item .val{font-size:16.5px;font-weight:700;color:var(--green-950)}
.info-item a:hover{color:var(--green-700)}

/* factory page */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:var(--radius);padding:26px;text-align:center}
.stat b{display:block;font-size:30px;color:#ed6a2e;line-height:1.1}
.stat span{font-size:13px;color:#55504a}
.mini-media{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* footer */
.site-foot{background:#f0f0f0;color:#6a635b;margin-top:0}
.foot-main{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:44px;padding:66px 0 46px}
.site-foot h4{color:#2a1a10;font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}
.site-foot .brand-name{color:#2a1a10}
.site-foot p{font-size:14px}
.foot-about{font-size:14px;margin:16px 0 18px;max-width:300px}
.foot-links li{margin-bottom:10px}
.foot-links a{font-size:14px;color:#6a635b;transition:.2s}
.foot-links a:hover{color:#c24e08;padding-left:4px}
.foot-contact li{display:flex;gap:10px;font-size:14px;margin-bottom:12px}
.foot-contact .fc-ico{color:#c24e08;font-weight:800}
.foot-contact a:hover{color:#c24e08}
.foot-bottom{border-top:1px solid rgba(0,0,0,.08);padding:20px 0;font-size:13px;color:#6a635b;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.foot-bottom a:hover{color:#c24e08}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* responsive */
@media(max-width:1020px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .strip-grid{grid-template-columns:repeat(2,1fr)}
  .strip-item{border-left:0;border-top:1px solid var(--line)}
  .strip-item:first-child{border-top:0}
  .split{grid-template-columns:1fr;gap:34px}
  .split.flip .split-media{order:0}
  .contact-grid{grid-template-columns:1fr}
  .foot-main{grid-template-columns:1fr 1fr}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .mini-media{grid-template-columns:1fr}
}
@media(max-width:760px){
  .sec{padding:64px 0}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .nav-toggle{display:block}
  .nav{position:fixed;inset:0 0 auto;background:#fff;flex-direction:column;align-items:stretch;padding:20px 24px 30px;box-shadow:var(--shadow-lg);display:none;gap:4px}
  .nav.open{display:flex;padding-top:96px}
  .nav>li>a{padding:14px 10px;font-size:16px}
  .nav .nav-cta{margin:10px 0 0;display:block}
  .nav-cta .btn{width:100%}
  .drop-menu{position:static;box-shadow:none;border:0;padding:0 0 0 16px;opacity:1;visibility:visible;transform:none;display:none;min-width:0}
  .nav>li.drop.open .drop-menu{display:block}
  .topbar .tb-links .hide-m{display:none}
  .topbar .container{justify-content:center}
  .hero{min-height:540px;align-items:flex-start;padding-top:64px}
  .hero .eyebrow{display:none}
  .hero-inner{padding:0 0 42px}
  .hero-tags{gap:8px}
  .hero-tag{font-size:11px;padding:6px 11px}
  .strip-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .foot-main{grid-template-columns:1fr;gap:34px;padding:52px 0 30px}
  .stat-grid{grid-template-columns:1fr 1fr}
}

/* --- CTA woodband on light orange: dark content --- */
.sec--woodband .h2{color:#2a1a10}
.sec--woodband .eyebrow{color:#a94a10}
.sec--woodband .eyebrow::before{background:#a94a10}
.sec--woodband .lead{color:#40342a}
.sec--woodband .btn--green{background:#ed6a2e;color:#fff}
.sec--woodband .btn--green:hover{background:#d4550c}

/* --- applications browse grid (image tiles linking to product pages) --- */
.app-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:172px;gap:14px}
.app-tile{position:relative;display:block;overflow:hidden;border-radius:var(--radius);background:var(--sand);transition:.28s}
.app-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.app-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,12,0) 42%,rgba(20,16,12,.62) 100%);pointer-events:none}
.app-tile:hover{box-shadow:var(--shadow-lg)}
.app-tile:hover img{transform:scale(1.05)}
.app-body{position:absolute;left:20px;right:20px;bottom:16px;z-index:2;display:flex;flex-direction:column;gap:2px}
.app-t{font-size:23px;font-weight:900;letter-spacing:.02em;text-transform:uppercase;color:#fff;line-height:1.05}
.app-s{font-size:13px;color:rgba(255,255,255,.86);font-weight:500}
.app-tile--decking{grid-column:1;grid-row:1/3}
.app-tile--cladding{grid-column:2;grid-row:1}
.app-tile--wallpanel{grid-column:3;grid-row:1}
.app-tile--decor{grid-column:2;grid-row:2}
.app-tile--ceiling{grid-column:3;grid-row:2}
.app-tile--fence{grid-column:1/4;grid-row:3}
@media(max-width:900px){
  .app-grid{grid-template-columns:1fr;grid-auto-rows:200px}
  .app-tile--decking,.app-tile--cladding,.app-tile--wallpanel,.app-tile--decor,.app-tile--ceiling,.app-tile--fence{grid-column:1;grid-row:auto}
}

/* ===== Product Range: ecotech 参考站产品卡模板 ===== */
.product-range{padding-bottom:12px}
/* ---------- Product Center — reference-style catalog grid ---------- */
.range-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:40px}
.range-head .h2{margin-bottom:8px}
.range-head .lead{max-width:640px}
.v-more{display:inline-flex;align-items:center;gap:8px;background:var(--wood);color:#fff;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:13px 22px;border-radius:999px;transition:.25s;white-space:nowrap;flex:0 0 auto}
.v-more:hover{background:var(--wood-deep);color:#fff;transform:translateY(-2px)}
.v-more .arr{transition:transform .2s}
.v-more:hover .arr{transform:translateX(4px)}
.v-more.sm{padding:10px 18px;font-size:12px}

/* centered head */
.pc-head{text-align:center;max-width:780px;margin:0 auto 28px}
.pc-head .eyebrow{justify-content:center}
.pc-head .eyebrow::after{content:"";width:26px;height:2px;background:var(--wood)}
.pc-title{font-size:clamp(30px,3.9vw,46px);font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--green-800);margin:12px 0 12px;line-height:1.1}
.pc-sub{font-size:16px;color:var(--muted);max-width:620px;margin:0 auto}

/* category tabs */
.pc-tabs{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 32px;margin:0 0 36px}
.pc-tab{position:relative;background:none;border:0;padding:6px 2px;font-family:inherit;font-size:14.5px;font-weight:600;color:var(--muted);letter-spacing:.02em;cursor:pointer;transition:.2s;display:inline-block}
.pc-tab:hover{color:var(--green-800)}
.pc-tab.is-active{color:var(--green-800);font-weight:800}
.pc-tab.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--green-800);border-radius:2px}

.pro-block{margin-bottom:58px}
.block-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px}
.block-small{display:block;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--wood)}
.block-title{font-size:26px;font-weight:800;color:var(--green-900);margin-top:3px}

/* catalog grid — 4 per view */
.pro-carousel{position:relative;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:4px 0 10px}
.pro-carousel::-webkit-scrollbar{display:none}
.pro-track{display:flex;gap:20px;align-items:stretch}
.pro-card{scroll-snap-align:start;flex:0 0 auto;width:calc((100% - 60px)/4);background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 12px 0;display:flex;flex-direction:column;transition:.25s}
.pro-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:var(--wood)}
.pro-card.is-hidden{display:none}
.pro-thumb{position:relative;display:block;width:100%;aspect-ratio:4/3;background:#fff;overflow:hidden;margin-bottom:12px}
.pro-thumb .pro-img{width:100%;height:100%;object-fit:contain;transition:transform .5s}
.pro-card:hover .pro-thumb .pro-img{transform:scale(1.05)}
.pro-title{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.4;padding:0 2px 16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s}
.pro-card:hover .pro-title{color:var(--wood-deep)}
.pro-text{display:none}

/* bottom nav — centered square arrows */
.pro-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;margin-top:26px}
.pro-arrow{flex-shrink:0}
.pro-arrow{display:none;align-items:center;justify-content:center;width:38px;height:38px;border-radius:6px;border:1px solid var(--line);background:#fff;color:var(--green-900);font-size:14px;cursor:pointer;transition:.2s}
.pro-arrow:hover{background:var(--green-800);color:#fff;border-color:var(--green-800)}
.pro-dots{display:flex;gap:7px}
.pro-dots .dot{width:8px;height:8px;border-radius:50%;background:var(--line);border:0;cursor:pointer;padding:0;transition:.25s}
.pro-dots .dot.is-active{width:22px;border-radius:999px;background:var(--green-800)}

@media(max-width:1020px){
  .pro-card{width:calc((100% - 40px)/3)}
}
@media(max-width:820px){
  .pro-card{width:calc((100% - 20px)/2)}
}
@media(max-width:560px){
  .pro-card{width:100%}
  .pc-tabs{gap:6px 20px}
}

/* pro-carousel: only show arrows/dots when there is overflow to paginate */
.pro-nav:not(.has-pages){display:none}
.pro-nav .pro-arrow{display:none}
.pro-nav.has-pages .pro-arrow{display:flex}

/* ============ new grille collection — finish swatch grid ============ */
.ng-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.ng-card{margin:0;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:.25s}
.ng-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:var(--wood)}
.ng-card.is-hidden{display:none}
.ng-media{aspect-ratio:1/1;background:#f4f3f1;overflow:hidden}
.ng-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.ng-card:hover .ng-media img{transform:scale(1.05)}
.ng-card figcaption{padding:11px 12px 13px;border-top:1px solid var(--line)}
.ng-card figcaption b{display:block;font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.35}
.ng-card figcaption span{display:block;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.ng-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:36px}
.ng-note{text-align:center;max-width:820px;margin:30px auto 0;font-size:13px;line-height:1.6}
.ng-pick{margin:26px 0 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 22px;font-size:13.5px;color:var(--muted)}
.ng-pick b{color:var(--ink);font-weight:700}
@media(max-width:1020px){.ng-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:820px){.ng-grid{grid-template-columns:repeat(3,1fr);gap:14px}}
@media(max-width:560px){.ng-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .ng-card figcaption{padding:9px 10px 11px}
  .ng-card figcaption b{font-size:12.5px}}

/* ============ inquiry popup widget (fangsi.group style, orange brand) ============ */
.inquiry-widget-btn {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ed6a2e;
  color: #fff;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  z-index: 998;
  box-shadow: 0 4px 20px rgba(237, 106, 46, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  animation: inquiryPulse 2s ease-in-out infinite;
}
.inquiry-widget-btn:hover {
  background: #d9571f;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 28px rgba(237, 106, 46, 0.55);
  animation: none;
}
.inquiry-widget-btn:active { transform: translateY(0) scale(0.95); }
@keyframes inquiryPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(237, 106, 46, 0.4); }
  50% { box-shadow: 0 4px 32px rgba(237, 106, 46, 0.65); }
}

/* WhatsApp float (stacked above the inquiry button) */
.wa-float {
  position: fixed;
  bottom: 100px;
  right: 32px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 998;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  transition: all 0.3s ease;
}
.wa-float:hover {
  background: #1ebe5a;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 28px rgba(37, 211, 102, 0.55);
}
.wa-float:active { transform: translateY(0) scale(0.95); }


/* Modal overlay */
.inquiry-widget-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 34, 38, 0.55);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.inquiry-widget-overlay.active { opacity: 1; visibility: visible; }

/* Modal dialog */
.inquiry-widget-dialog {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
  transform: translateY(30px) scale(0.96);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  position: relative;
}
.inquiry-widget-overlay.active .inquiry-widget-dialog { transform: translateY(0) scale(1); }

/* Dialog header */
.inquiry-widget-header {
  background: linear-gradient(165deg, #ed6a2e, #d9571f);
  color: #fff;
  padding: 24px 28px;
  border-radius: 16px 16px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.inquiry-widget-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.inquiry-widget-header h3 .iw-icon { font-size: 1.4rem; }
.inquiry-widget-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}
.inquiry-widget-close:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.6);
}

/* Dialog body */
.inquiry-widget-body { padding: 28px; }
.inquiry-widget-body .form-group { margin-bottom: 16px; }
.inquiry-widget-body input,
.inquiry-widget-body select,
.inquiry-widget-body textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--line, #e4ded6);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  background: #fff;
  color: var(--ink, #1e2226);
  transition: border-color 0.25s, box-shadow 0.25s;
  box-sizing: border-box;
}
.inquiry-widget-body input:focus,
.inquiry-widget-body select:focus,
.inquiry-widget-body textarea:focus {
  outline: none;
  border-color: #ed6a2e;
  box-shadow: 0 0 0 3px rgba(237, 106, 46, 0.12);
}
.inquiry-widget-body input.is-err,
.inquiry-widget-body select.is-err,
.inquiry-widget-body textarea.is-err { border-color: #e74c3c; }
.inquiry-widget-body select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
.inquiry-widget-body textarea { resize: vertical; min-height: 90px; }
.inquiry-widget-body .iw-honey {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}
.inquiry-widget-body .iw-submit {
  width: 100%;
  padding: 14px;
  background: #ed6a2e;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.25s, transform 0.15s;
  margin-top: 4px;
}
.inquiry-widget-body .iw-submit:hover { background: #d9571f; transform: translateY(-1px); }
.inquiry-widget-body .iw-submit:active { transform: translateY(0); }
.inquiry-widget-body .iw-submit.loading { pointer-events: none; opacity: 0.75; }

/* Dialog footer note */
.inquiry-widget-footer {
  text-align: center;
  padding: 0 28px 24px;
  font-size: 0.8rem;
  color: #8a847c;
}
.inquiry-widget-footer p { margin: 0; }

/* Scroll lock */
body.iw-scroll-lock { overflow: hidden; }

/* Toast (fangsi style, dynamic) */
.toast {
  position: fixed;
  bottom: 170px;
  right: 24px;
  background: #2e9e5b;
  color: #fff;
  padding: 14px 22px;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(30, 34, 38, 0.25);
  font-weight: 600;
  font-size: 0.92rem;
  z-index: 99999;
  animation: toastIn 0.3s ease-out;
  max-width: min(360px, 86vw);
}
.toast.toast--err { background: #d64545; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .inquiry-widget-btn { bottom: 24px; right: 20px; width: 48px; height: 48px; font-size: 1.2rem; }
  .inquiry-widget-overlay { align-items: flex-end; padding: 0; }
  .inquiry-widget-dialog { max-width: 100%; border-radius: 16px 16px 0 0; max-height: 85vh; }
  .inquiry-widget-header { border-radius: 16px 16px 0 0; padding: 20px; }
  .inquiry-widget-body { padding: 20px; }
  .inquiry-widget-footer { padding: 0 20px 20px; }
  .toast { bottom: 142px; right: 16px; }
  .wa-float { bottom: 82px; right: 20px; width: 48px; height: 48px; }
  .wa-float svg { width: 26px; height: 26px; }
}

/* ============ topbar: social tags + site search ============ */
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:18px}
.tb-right{display:flex;align-items:center;gap:18px;margin-left:auto}
.tb-tag{font-size:13px;color:#40342a}
.tb-social{display:flex;align-items:center;gap:8px}
.tb-social a{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.07);color:#40342a;transition:.2s}
.tb-social a:hover{background:var(--wood);color:#fff}
.tb-social svg{width:14px;height:14px;display:block}
.tb-search{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:999px;padding:6px 14px;font:inherit;font-size:12.5px;font-weight:600;color:#40342a;cursor:pointer;transition:.2s}
.tb-search:hover{border-color:var(--wood);color:#c24e08}
.tb-search svg{width:14px;height:14px;flex:none}
@media(max-width:760px){
  .tb-right .tb-tag{display:none}
  .tb-search span{display:none}
  .tb-search{padding:6px 9px}
}
@media(max-width:820px){
  .topbar .container{gap:12px}
  .tb-links{gap:14px}
  .tb-right{gap:12px;margin-left:auto}
}
@media(max-width:640px){
  .topbar .tb-social{display:none}
}
@media(max-width:520px){
  .topbar .tb-links .tb-mail,.topbar .tb-links .dotsep{display:none}
  .topbar .tb-links{gap:0}
}

/* site search overlay */
.search-panel{position:fixed;inset:0;z-index:120;background:rgba(20,16,12,.55);backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;padding:96px 20px 40px;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.search-panel.active{opacity:1;visibility:visible}
.search-box{width:min(640px,100%);background:#fff;border-radius:16px;box-shadow:0 28px 70px rgba(0,0,0,.32);overflow:hidden;transform:translateY(-14px);transition:transform .28s}
.search-panel.active .search-box{transform:none}
.search-row{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.search-row svg{width:18px;height:18px;color:var(--muted);flex:none}
.search-row input{flex:1;border:0;outline:none;font:inherit;font-size:16px;color:var(--ink);background:transparent}
.search-close{border:0;background:none;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px}
.search-close:hover{color:var(--green-800)}
.search-results{max-height:min(58vh,440px);overflow-y:auto;padding:8px}
.search-hit{display:block;padding:12px 14px;border-radius:10px;transition:.18s}
.search-hit:hover,.search-hit.is-cursor{background:var(--green-100)}
.search-hit b{display:block;font-size:14.5px;color:var(--ink)}
.search-hit small{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.search-empty{padding:26px 18px;text-align:center;font-size:13.5px;color:var(--muted)}
.search-hint{padding:10px 20px 16px;font-size:12px;color:var(--muted);border-top:1px solid var(--line)}

/* ============ product list toolbar: filter + sort ============ */
.cat-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin:0 0 30px;padding:14px 20px;background:#fff;border:1px solid var(--line);border-radius:999px}
.cat-toolbar .pc-tabs{margin:0;justify-content:flex-start;gap:6px 26px}
.cat-toolbar .pc-tab{font-size:14px}
.cat-sort{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);font-weight:600;white-space:nowrap}
.cat-sort select{font:inherit;font-size:13px;font-weight:600;color:var(--ink);background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer}
.cat-sort select:focus{outline:none;border-color:var(--wood)}
.cat-card.is-hidden{display:none}
.cat-empty{grid-column:1/-1;text-align:center;padding:40px 0;color:var(--muted);font-size:14px}
@media(max-width:760px){
  .cat-toolbar{border-radius:16px;padding:14px 16px;justify-content:center}
  .cat-toolbar .pc-tabs{justify-content:center}
}

/* ============ compact photo-free page head (support / legal pages) ============ */
.page-head{position:relative;padding:38px 0 40px;background:linear-gradient(180deg,var(--cream) 0%,#fff 100%);border-bottom:1px solid var(--line);overflow:hidden}
.page-head::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,var(--wood-deep) 0%,var(--wood) 42%,transparent 86%)}
.page-head::after{content:"";position:absolute;right:-90px;bottom:-130px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(237,106,46,.10),transparent 68%);pointer-events:none}
.page-head .container{position:relative;z-index:2}
.page-head .crumbs{margin-bottom:16px}
.page-head h1{font-size:clamp(27px,3.5vw,40px);line-height:1.14;margin:0 0 12px;color:var(--ink)}
.page-head .lead{color:var(--muted);max-width:760px;margin:0;font-size:16.5px;line-height:1.62}
.page-head .hero-tag{color:var(--wood-deep);margin-bottom:10px}
.page-head .hero-tag::before{background:var(--wood-deep)}
@media(max-width:760px){
  .page-head{padding:26px 0 28px}
  .page-head h1{font-size:clamp(23px,5.8vw,30px)}
  .page-head .lead{font-size:15px}
}

/* ============ policy / legal pages (centered document layout) ============ */
.page-head--legal{padding:72px 0 62px;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#fdfbf8 0%,#f9f3ec 58%,#fdfcf9 100%);border-bottom:1px solid var(--line)}
.page-head--legal::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--wood-deep) 0%,var(--wood) 42%,transparent 86%)}
.page-head--legal h1{font-family:Georgia,'Times New Roman','Songti SC','SimSun',serif;
  font-size:clamp(32px,4.4vw,52px);font-weight:600;letter-spacing:-.005em;line-height:1.14;
  color:#2b2e33;margin:0}
.legal-wrap{max-width:760px;margin-inline:auto;padding-top:56px;padding-bottom:78px}
.legal-updated{display:block;font-size:13px;color:#8d939a;margin-bottom:26px}
.legal-intro{font-size:16px;color:var(--muted);margin-bottom:4px}
.legal h2{font-family:Georgia,'Times New Roman','Songti SC','SimSun',serif;
  font-size:clamp(19px,2.1vw,23px);font-weight:700;color:#2b2e33;
  margin:46px 0 16px;padding-bottom:11px;border-bottom:1px solid rgba(237,106,46,.24);
  scroll-margin-top:110px}
.legal h2:first-of-type{margin-top:38px}
.legal h3{font-size:17px;margin:28px 0 8px;color:var(--green-950)}
.legal p,.legal li{font-size:15px;line-height:1.78;color:#4c5259}
.legal p+p{margin-top:13px}
.legal ul,.legal ol{margin:13px 0 0;padding-left:20px;display:grid;gap:9px}
.legal ul li::marker{color:var(--wood-deep)}
.legal strong{color:var(--ink)}
.legal a{color:var(--wood-deep);font-weight:600;text-decoration:underline;
  text-decoration-color:rgba(237,106,46,.45);text-decoration-thickness:1px;text-underline-offset:3px}
.legal a:hover{text-decoration-color:var(--wood-deep)}
.legal-note{background:var(--cream);border-left:3px solid var(--wood);border-radius:0 12px 12px 0;padding:18px 22px;margin:26px 0}
.legal-note p{font-size:14.5px}
.legal-cta{background:#fdfaf6;border:1px solid var(--line);border-radius:14px;padding:26px 30px;margin-top:50px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.legal-cta h3{margin:0;font-size:18px}
.legal-cta p{margin:5px 0 0;font-size:14px}
@media(max-width:760px){
  .page-head--legal{padding:38px 0 34px}
  .page-head--legal h1{font-size:clamp(28px,8vw,38px)}
  .legal-wrap{padding-top:34px;padding-bottom:52px}
  .legal p,.legal li{font-size:14.5px}
  .legal h2{margin-top:36px}
  .legal-cta{padding:22px}
}

/* ============ footer: social ============ */
.foot-social{display:flex;align-items:center;gap:9px;margin-top:4px}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.07);color:#4a443c;transition:.2s}
.foot-social a:hover{background:var(--wood);color:#fff;transform:translateY(-2px)}
.foot-social svg{width:17px;height:17px;display:block}
.foot-legal{display:flex;flex-wrap:wrap;gap:8px 20px}
.foot-legal a{font-size:12.5px;color:#6a635b}
.foot-legal a:hover{color:#c24e08}
.foot-main{grid-template-columns:1.3fr .85fr .9fr 1fr 1.05fr;gap:34px}
@media(max-width:1020px){.foot-main{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.foot-main{grid-template-columns:1fr}}

/* oakio-style 3-column circular image trio (decking "Durable WPC decking solutions") */
.oakio-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 40px;text-align:center;align-items:start}
.oakio-trio .oakio-item{max-width:380px;margin:0 auto}
.oakio-trio .circ-img{width:100%;max-width:280px;aspect-ratio:1/1;border-radius:50%;overflow:hidden;background:var(--sand);margin:0 auto 24px}
.oakio-trio .circ-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.oakio-trio .oakio-item:hover .circ-img img{transform:scale(1.04)}
.oakio-trio h3{font-size:20px;font-weight:700;color:var(--ink);margin:0 0 12px;letter-spacing:.01em}
.oakio-trio p{color:var(--muted);font-size:15px;line-height:1.65;margin:0;max-width:340px;margin-left:auto;margin-right:auto}
@media(max-width:860px){.oakio-trio{grid-template-columns:1fr;gap:40px}}

/* ============ product detail page: fangsi-group style ============ */
/* at-a-glance 4-fact card row */
.fact-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.fact{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;display:flex;flex-direction:column;gap:8px;transition:.25s}
.fact:hover{border-color:var(--wood);box-shadow:var(--shadow)}
.fact small{font-size:11.5px;font-weight:700;letter-spacing:.12em;color:var(--green-700);text-transform:uppercase}
.fact strong{font-size:17px;color:var(--ink);font-weight:700;line-height:1.35}
.fact p{font-size:13px;color:var(--muted);margin:0;line-height:1.55}
@media(max-width:820px){.fact-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.fact-row{grid-template-columns:1fr}}

/* applications: left orange-border text items (2 col desktop, 1 col mobile) */
.app-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 28px}
.app-item{padding:18px 22px;border-left:3px solid var(--wood);background:#fff;border-radius:0 12px 12px 0;transition:.25s}
.app-item:hover{background:#fdf7f2;transform:translateX(3px)}
.app-item h4{font-size:16.5px;color:var(--ink);margin:0 0 6px;font-weight:700}
.app-item p{font-size:14px;color:var(--muted);margin:0;line-height:1.65}
@media(max-width:760px){.app-list{grid-template-columns:1fr}}

/* proof-grid 4-column variant (Why choose us with 4 cards) */
.proof-grid.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.proof-grid.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.proof-grid.g4{grid-template-columns:1fr}}


/* oakio-trio: 2-item variant (used by interior-ceiling-trim) */
.oakio-trio.oakio-duo{grid-template-columns:repeat(2,1fr);max-width:760px;margin:0 auto;gap:36px}
.oakio-trio.oakio-duo .circ-img{max-width:220px}
@media(max-width:760px){.oakio-trio.oakio-duo{grid-template-columns:1fr}}


/* ===== Products catalog grid ===== */
.pg-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:44px 0 16px}
.pg-head:first-of-type{margin-top:10px}
.pg-head h3{margin:0;font-size:21px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.pg-head .pg-count{font-size:13px;font-weight:600;color:#8d939a}
.pg-head .pg-more{margin-left:auto;font-size:13.5px;font-weight:700;color:var(--green-700);text-decoration:none;white-space:nowrap}
.pg-head .pg-more:hover{color:var(--green-800)}
.pg-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
.pg-grid--6{grid-template-columns:repeat(6,1fr)}
.pg-tile{display:block;background:#fff;border:1px solid rgba(30,34,38,.09);border-radius:10px;overflow:hidden;text-decoration:none;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.pg-tile:hover{border-color:rgba(237,106,46,.55);box-shadow:0 10px 22px rgba(237,106,46,.13);transform:translateY(-3px)}
.pg-tile img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#fff}
.pg-tile .pg-cap{display:block;padding:9px 10px 10px;border-top:1px solid rgba(30,34,38,.06);font-size:12.5px;line-height:1.3;font-weight:600;color:#565b61;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-tile:hover .pg-cap{color:var(--green-700)}
.pg-out{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.pg-out a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px;background:#fff;border:1px solid rgba(30,34,38,.1);border-radius:12px;text-decoration:none;color:var(--ink);font-weight:700;font-size:14.5px}
.pg-out a .pg-sub{display:block;margin-top:3px;font-size:12px;font-weight:500;color:#8d939a}
.pg-out a .arr{color:var(--green-700);font-size:16px}
.pg-out a:hover{border-color:rgba(237,106,46,.5)}
.pg-out a:hover .pg-sub{color:var(--green-700)}
.pg-note{margin-top:34px;padding:18px 22px;background:var(--sand);border:1px dashed rgba(237,106,46,.45);border-radius:12px;font-size:14px;color:#565b61}
.pg-note a{font-weight:700;color:var(--green-700);white-space:nowrap}
.app-scene{margin-top:30px}
@media (max-width:1280px){.pg-grid{grid-template-columns:repeat(6,1fr)}}
@media (max-width:1020px){.pg-grid{grid-template-columns:repeat(5,1fr)}.pg-grid--6{grid-template-columns:repeat(4,1fr)}}
@media (max-width:820px){.pg-grid{grid-template-columns:repeat(4,1fr)}.pg-out{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pg-grid,.pg-grid--6{grid-template-columns:repeat(3,1fr)}}
@media (max-width:400px){.pg-grid,.pg-grid--6{grid-template-columns:repeat(2,1fr)}}

/* ============ products page — numbered range pill bar + grouped blocks (v41) ====
   2026-09-15: the three top-level ranges are presented as a FLAT NUMBERED PILL
   BAR (`All` / `01 Interior Wall Panel` / `02 Ceiling & Flooring` /
   `03 Outdoor Solutions`) instead of big image cards — the whole catalog
   structure reads at a glance. `.pg-block[data-cat]` stays regrouped below. */
.pg-pillbar{background:var(--sand);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0}
.pg-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.pg-pill{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;font-family:inherit;font-size:14px;font-weight:600;line-height:1;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:999px;cursor:pointer;white-space:nowrap;transition:background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease}
.pg-pill:hover{border-color:rgba(237,106,46,.5);color:var(--green-800)}
.pg-pill:focus-visible{outline:2px solid var(--green-800);outline-offset:3px}
.pg-pill.is-active{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 10px 22px rgba(30,34,38,.18)}
.pg-pill-n{font-size:11.5px;font-weight:800;letter-spacing:.12em;color:#a9adb3;transition:color .25s ease}
.pg-pill:hover .pg-pill-n{color:var(--green-800)}
.pg-pill.is-active .pg-pill-n{color:rgba(255,255,255,.72)}

/* main-range band that opens each grouped block */
.pg-band{display:flex;align-items:flex-start;gap:20px;padding:22px 26px;background:var(--sand);border-left:4px solid var(--wood);border-radius:4px 14px 14px 4px}
.pg-band-no{flex:none;font-size:26px;font-weight:800;line-height:1.05;letter-spacing:-.02em;color:var(--green-800)}
.pg-band-txt h3{margin:0;font-size:22px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.pg-band-txt p{margin:6px 0 0;max-width:760px;font-size:14px;line-height:1.55;color:rgba(30,34,38,.62)}
.pg-band + .pg-head{margin-top:28px}
.pg-block.is-hidden{display:none}
.pg-block:first-child{margin-top:58px}
.pg-block + .pg-block{margin-top:62px}
@media(max-width:1024px){.pg-pills{gap:9px}.pg-pill{padding:10px 17px;font-size:13.5px}}
@media(max-width:760px){
  .pg-pillbar{padding:16px 0}
  .pg-band{gap:14px;padding:18px 18px}
  .pg-band-no{font-size:22px}
  .pg-band-txt h3{font-size:19px}
  .pg-band + .pg-head{margin-top:22px}
  .pg-block:first-child{margin-top:44px}
  .pg-block + .pg-block{margin-top:46px}
}
@media(max-width:640px){
  .pg-pills{display:grid;grid-template-columns:1fr;gap:8px}
  .pg-pill{justify-content:center}
}

/* ---- home: WPC product categories — 6 big cards (v29) ---- */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:10px}
.cat-big{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(30,34,38,.09);border-radius:16px;overflow:hidden;text-decoration:none;box-shadow:0 14px 34px rgba(30,34,38,.07);transition:transform .35s ease,box-shadow .35s ease}
.cat-big:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(30,34,38,.13)}
.cat-big-media{display:block;aspect-ratio:4/3;overflow:hidden;background:#f4ede6}
.cat-big-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.cat-big:hover .cat-big-media img{transform:scale(1.06)}
.cat-big-body{display:flex;align-items:center;gap:14px;padding:20px 22px 22px}
.cat-big-txt{flex:1;min-width:0}
.cat-big-t{display:block;font-weight:700;font-size:19px;line-height:1.25;color:var(--ink)}
.cat-big-s{display:block;margin-top:6px;font-size:13.5px;line-height:1.45;color:rgba(30,34,38,.6)}
.cat-big-arr{flex:none;width:40px;height:40px;border-radius:50%;background:var(--sand);color:var(--green-800);display:flex;align-items:center;justify-content:center;font-size:18px;transition:background .3s,color .3s}
.cat-big:hover .cat-big-arr{background:var(--green-800);color:#fff}
@media(max-width:1024px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cat-grid{grid-template-columns:1fr;gap:16px}.cat-big-t{font-size:18px}.cat-big-media{aspect-ratio:16/10}}

/* ---- products page: wide 2-up link row (v40) ---- */
.pg-out.pg-out--2{grid-template-columns:repeat(2,1fr)}
.pg-out.pg-out--1{grid-template-columns:1fr}
@media(max-width:640px){.pg-out.pg-out--2{grid-template-columns:1fr}}

/* ---- home: Colors & Surface Finishes family list (v30) ---- */
.fin-list{display:grid;gap:10px;margin-top:24px}
.fin-row{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff;border:1px solid rgba(30,34,38,.09);border-radius:10px}
.fin-row .dot{width:14px;height:14px;border-radius:50%;flex:none}
.fin-row b{font-size:14.5px;color:var(--ink);flex:none;min-width:104px}
.fin-row span:last-child{font-size:13.5px;color:rgba(30,34,38,.6);line-height:1.4}
.fin-row--cta{border-style:dashed;border-color:rgba(237,106,46,.45)}
@media(max-width:640px){.fin-row{flex-wrap:wrap;gap:8px}.fin-row span:last-child{flex-basis:100%;padding-left:26px}}

/* ---- cladding 3-tile grid + home category number chips (v31) ---- */
.pg-grid--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.pg-grid--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pg-grid--3{grid-template-columns:repeat(3,1fr)}}
.app-num{position:absolute;top:14px;left:16px;z-index:2;font-size:11.5px;font-weight:800;letter-spacing:.16em;color:#fff;background:rgba(20,16,12,.45);padding:5px 11px;border-radius:999px}

/* ============ BLOG — listing page + standalone article pages ============
   2026-09-15: rebuilt to follow the fangsi.group/blog.html pattern —
   a LIGHT centred serif hero and a card grid on the listing page, and one
   standalone page per article under blog/. Layout rhythm borrowed from the
   reference; the palette stays FANGSI orange. No click-to-reveal anywhere. */
.blog-hero .crumbs{justify-content:center;margin-bottom:20px}
.blog-hero .lead{max-width:660px;margin:14px auto 0}

.blog-list{padding:64px 0 76px}
.blog-list-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
@media(max-width:1024px){.blog-list-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.blog-list-grid{grid-template-columns:1fr}.blog-list{padding:44px 0 56px}}

.blog-card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--wood)}
.blog-card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:#faf7f3}
.blog-card-media img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;display:block;transition:transform .45s ease}
.blog-card:hover .blog-card-media img{transform:scale(1.05)}
.blog-card-body{padding:20px 24px 24px;display:flex;flex-direction:column;flex:1}
.blog-card-cat{align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:#fbefe5;color:#ed6a2e;padding:6px 12px;border-radius:999px;margin-bottom:12px}
.blog-card h3{font-size:17px;line-height:1.4;margin:0 0 8px;color:var(--ink);font-weight:700;letter-spacing:-.005em}
.blog-card-excerpt{font-size:14.5px;color:#5f646a;line-height:1.6;margin:0 0 14px;flex:1}
.blog-card-more{font-size:13.5px;font-weight:700;color:var(--wood-deep);letter-spacing:.02em;align-self:flex-start}
.blog-card-more::after{content:" \2192"}
.blog-card:hover .blog-card-more{text-decoration:underline}

/* --- single article page (blog/<slug>.html) --- */
.blog-article{padding:52px 0 84px}
.blog-article .container{max-width:840px}
.blog-article-header{text-align:center;margin-bottom:40px}
.blog-article-header .article-eyebrow{margin-bottom:16px}
.blog-article-header h1{font-family:Georgia,'Times New Roman','Songti SC','SimSun',serif;
  font-size:clamp(27px,3.3vw,38px);line-height:1.26;font-weight:600;letter-spacing:-.005em;color:#2b2e33;margin:0 0 16px}
.blog-article-meta{color:#8d939a;font-size:14px;margin:0}
.blog-article-body{font-size:16px;line-height:1.85;color:#3f454b}
.blog-article-body p{margin:0 0 16px}
.blog-article-body h2{font-family:Georgia,'Times New Roman','Songti SC','SimSun',serif;
  font-size:clamp(19px,2.1vw,23px);font-weight:700;color:#2b2e33;
  margin:42px 0 16px;padding-bottom:11px;border-bottom:1px solid rgba(237,106,46,.24)}
.blog-article-body ul{margin:16px 0;padding-left:22px;list-style:disc outside}
.blog-article-body ul li{display:list-item;font-size:15px;line-height:1.75;color:#4c5259;margin-bottom:8px}
.blog-article-body li::marker{color:var(--wood-deep)}
.blog-article-body strong{color:var(--ink)}
.blog-note{background:var(--cream);border-left:3px solid var(--wood);border-radius:0 12px 12px 0;padding:18px 22px;margin:26px 0}
.blog-note p{margin:0;font-size:14.5px;line-height:1.7;color:#4c5259}
.blog-article-nav{margin-top:48px;padding-top:30px;border-top:1px solid var(--line);text-align:center}
.blog-article-nav a{color:var(--wood-deep);font-weight:700;font-size:14.5px}
.blog-article-nav a:hover{text-decoration:underline}
@media(max-width:760px){
  .blog-article{padding:34px 0 56px}
  .blog-article-header{margin-bottom:28px}
  .blog-article-body{font-size:15px}
}

/* article category pill — shared by the listing cards and the article header */
.article-eyebrow{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:#fbefe5;color:#ed6a2e;padding:6px 12px;border-radius:999px;margin-bottom:14px}

/* ============ PRODUCTS — navigation-center big category cards (v43) ============
   2026-09-15: products.html rebuilt from a 62-tile catalog into a navigation
   center: pill bar + ~16 second-level category cards, each with View Product
   and Get A Quote actions. Color tiles now live on the detail pages. */
.pg-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:30px}
.pg-card .cat-body h3{margin:0}
.pg-card .cat-body h3 a{color:var(--ink);text-decoration:none}
.pg-card .cat-body h3 a:hover{color:var(--green-800)}
.pg-acts{display:flex;gap:10px;margin-top:18px}
.pg-acts .btn{flex:1;text-align:center;justify-content:center;white-space:nowrap}
.pg-act-quote{border:1.5px solid var(--wood);color:var(--wood-deep);background:#fff}
.pg-act-quote:hover{background:var(--sand)}
/* v48 · 空间不够就换行：3 列(带侧边栏)时两个按钮并排需要 249px，卡片只有 159~218px，
   flex:1 的 min-width:auto 又压不下去 → 整行顶出卡片被裁。允许 wrap 后每个按钮各自占满一行。 */
.pg-card .pg-acts{flex-wrap:wrap}
.pg-card .pg-acts .btn{flex:1 1 auto;min-width:112px}
@media(max-width:1020px){.pg-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.pg-cards{grid-template-columns:1fr}.pg-acts .btn{padding:11px 10px;font-size:13px}}

/* ===== v44: products catalog sidebar (AOLO-style) ===== */
.pg-layout{display:grid;grid-template-columns:262px minmax(0,1fr);gap:38px;align-items:start;margin-top:34px}
.pg-side{position:sticky;top:96px}
.pg-side-box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 16px 16px;box-shadow:0 14px 34px rgba(30,34,38,.07)}
.pg-side-tit{margin:0 0 12px;padding:0 4px;font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--wood-deep)}
.pg-snav{display:flex;flex-direction:column;gap:6px}
.pg-pill--side{width:100%;display:flex;align-items:center;justify-content:flex-start;gap:9px;padding:10px 13px;font-size:13.5px;line-height:1.35;text-align:left;white-space:normal;border-radius:10px}
.pg-side-group{display:flex;flex-direction:column;gap:4px}
.pg-side-sub{margin:2px 0 6px;padding:0 0 0 8px;list-style:none;border-left:2px solid var(--sand);display:flex;flex-direction:column;gap:1px}
.pg-side-sub a{display:block;padding:5px 10px;font-size:13px;color:#4a5258;text-decoration:none;border-radius:8px}
.pg-side-sub a:hover{background:var(--sand);color:var(--green-800)}
.pg-side-cta{display:block;margin-top:12px;padding:11px 10px;border-radius:10px;background:var(--ink);color:#fff;font-size:13px;font-weight:600;text-decoration:none;text-align:center}
.pg-side-cta:hover{background:var(--green-800)}
.pg-layout .pg-block:first-child{margin-top:0}
.pg-layout .pg-block + .pg-block{margin-top:46px}
@media(max-width:1020px){
  .pg-layout{grid-template-columns:1fr;gap:24px;margin-top:26px}
  .pg-side{position:static}
  .pg-side-tit{margin-bottom:10px}
  .pg-snav{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px}
  .pg-side-group{display:contents}
  .pg-side-sub{margin:0;padding:0;border-left:0;flex-direction:row;flex-wrap:wrap;gap:6px;width:100%}
  .pg-sitem{width:auto;padding:7px 13px;font-size:12.5px;border:1px solid var(--line);border-radius:999px}
  .pg-side-cta{display:none}
  .pg-pill--side{width:auto;padding:10px 16px}
  .pg-layout .pg-block + .pg-block{margin-top:34px}
}

/* ===== v45: two-level catalog — sidebar category items + product cards ===== */
.pg-sitem{display:block;width:100%;text-align:left;padding:7px 12px;font-family:inherit;font-size:13px;line-height:1.4;color:#4a5258;background:none;border:0;border-radius:8px;cursor:pointer;transition:background .2s ease,color .2s ease}
.pg-sitem:hover{background:var(--sand);color:var(--green-800)}
.pg-sitem.is-active{background:var(--wood);color:#fff;font-weight:600}
.pg-prods[hidden]{display:none}
.pg-prods-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:0 0 16px;border-bottom:1px solid var(--line);margin-bottom:26px}
.pg-prods-kicker{display:block;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--wood-deep)}
.pg-prods-head h3{margin:6px 0 6px;font-size:22px}
.pg-prods-head p{margin:0;max-width:560px;font-size:14.5px;color:#4a5258}
.pg-prods-all{flex:0 0 auto;font-size:13.5px;font-weight:600;color:var(--green-800);text-decoration:none;white-space:nowrap}
.pg-prods-all:hover{text-decoration:underline}
.pd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pd-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 14px 16px;transition:box-shadow .25s ease,transform .25s ease}
.pd-card:hover{box-shadow:0 16px 34px rgba(30,34,38,.10);transform:translateY(-2px)}
.pd-media{display:block;aspect-ratio:1/1;background:#fff;border-radius:10px;overflow:hidden}
.pd-media img{width:100%;height:100%;object-fit:contain}
.pd-card h4{margin:12px 0 4px;font-size:14.5px;line-height:1.35}
.pd-card h4 a{color:var(--ink);text-decoration:none}
.pd-card h4 a:hover{color:var(--green-800)}
.pd-sub{margin:0 0 14px;font-size:12.5px;color:#7b8288}
.pd-btn{margin-top:auto;align-self:flex-start}
@media(max-width:1020px){.pd-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.pd-grid{grid-template-columns:1fr}}
@media(max-width:760px){.pg-prods-head{flex-direction:column;align-items:flex-start;gap:10px}}

/* ================= v46 single-product detail page (PDP) ================= */
.pdp{padding:38px 0 64px;background:#fff}
.pdp .crumbs{margin-bottom:20px}
.pdp-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:46px;align-items:start}
.pdp-gallery{display:grid;grid-template-columns:88px minmax(0,1fr);gap:16px}
.pdp-thumbs{display:flex;flex-direction:column;gap:12px}
.pdp-thumb{display:block;padding:0;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;overflow:hidden;aspect-ratio:1/1;transition:border-color .2s ease}
.pdp-thumb img{display:block;width:100%;height:100%;object-fit:contain}
.pdp-thumb:hover,.pdp-thumb.is-active{border-color:var(--wood-deep)}
.pdp-stage{position:relative;aspect-ratio:1/1;border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}
.pdp-stage img{display:block;width:100%;height:100%;object-fit:contain}
.pdp-zoom{position:absolute;right:14px;bottom:14px;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);font-size:17px;line-height:1;cursor:pointer}
.pdp-zoom:hover{background:var(--sand)}
.pdp-buy h1{margin:0 0 8px;font-size:clamp(22px,2.1vw,29px);line-height:1.25}
.pdp-model{margin:0 0 4px;font-size:13px;color:var(--muted)}
.pdp-price{display:inline-block;margin:8px 0 18px;font-size:15px;font-weight:700;color:var(--green-800);text-decoration:none;border-bottom:1px solid currentColor}
.pdp-price:hover{color:var(--wood-deep)}
.pdp-meta{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:9px}
.pdp-meta li{display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px;font-size:14px;color:var(--ink)}
.pdp-meta span{color:var(--muted)}
.pdp-actions{display:flex;flex-wrap:wrap;gap:12px}
.pdp-actions .btn{flex:1 1 148px;justify-content:center}
.pdp-share{display:flex;align-items:center;gap:10px;margin-top:20px;font-size:13.5px;color:var(--muted)}
.pdp-share a{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--cream);color:var(--green-800);text-decoration:none;transition:background .2s ease,color .2s ease}
.pdp-share a:hover{background:var(--wood);color:#fff}
.pdp-share svg{width:16px;height:16px;fill:currentColor}
.pdp-buy .checks{margin-top:22px}
.pdp-desc{padding:56px 0 72px}
.pdp-tabs{display:flex;gap:30px;border-bottom:1px solid var(--line);margin:6px 0 26px}
.pdp-tab{margin-bottom:-1px;padding:12px 0;border:0;border-bottom:2px solid transparent;background:none;font-family:inherit;font-size:15px;font-weight:600;color:var(--muted);cursor:pointer}
.pdp-tab:hover{color:var(--ink)}
.pdp-tab.is-active{color:var(--ink);border-bottom-color:var(--wood-deep)}
.pdp-panel[hidden]{display:none}
.pdp-attrs{list-style:none;margin:0;padding:0;max-width:860px}
.pdp-attrs li{display:grid;grid-template-columns:230px minmax(0,1fr);gap:14px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:14.5px}
.pdp-attrs span{color:var(--muted)}
.pdp-attrs b{font-weight:600;color:var(--ink)}
.pdp-body{max-width:860px;font-size:15.5px;line-height:1.8;color:#3d4348}
.pdp-body p{margin:0 0 14px}
.pdp-body ul{margin:0 0 16px;padding-left:20px}
.pdp-body li{margin-bottom:8px}
.pdp-body h3{margin:26px 0 10px;font-size:18px;color:var(--ink)}
.pdp-note{margin-top:20px;max-width:860px;font-size:13px;color:var(--muted)}
@media(max-width:1020px){
  .pdp-grid{grid-template-columns:1fr;gap:34px}
  .pdp-attrs li{grid-template-columns:180px minmax(0,1fr)}
}
@media(max-width:640px){
  .pdp{padding:26px 0 44px}
  .pdp-gallery{grid-template-columns:1fr}
  .pdp-thumbs{flex-direction:row;order:2;justify-content:center}
  .pdp-thumb{flex:1 1 0;max-width:76px}
  .pdp-attrs li{grid-template-columns:1fr;gap:2px;padding:10px 0}
  .pdp-tabs{gap:20px}
  .pdp-tab{font-size:14px}
}

/* ---- v47 · 产品总览大卡跨列对齐：描述吸余量 + 规格胶囊行定高 ---- */
/* 卡片行内每个元素落在同一水平线：描述盒 ≥4 行且吸收多余高度，
   规格胶囊固定占两行位并顶对齐，按钮行自然落在卡片底部。 */
.pg-card .cat-body>p{flex:1 1 auto;min-height:calc(14px * 1.65 * 4)}
.pg-card .pill-list{min-height:63px;align-content:flex-start}
@media(max-width:640px){
  /* 单列时不需要跨卡对齐，别浪费垂直空间 */
  .pg-card .cat-body>p{min-height:0}
  .pg-card .pill-list{min-height:0;align-content:flex-start}
}