/* ============================================================
   EverBag — B2B reusable bag manufacturer site
   ============================================================ */
:root{
  --g900:#0b2f46; --g800:#11476a; --g700:#1c76b0; --g600:#2489c9; --g500:#399ee0;
  --amber:#b45309; --wa:#25d366;
  --ink:#101828; --muted:#6b6355; --line:#e6ddc8; --alt:#f6f2e7; --card:#ffffff;
  --shadow:0 12px 32px rgba(16,24,40,.08);
  --radius:14px;
  --hero-image:url("../img/hero-tone-wide.webp");
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  color:var(--ink); background:#fff; line-height:1.6; font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
.skip-link{position:fixed;left:12px;top:10px;z-index:120;background:#fff;color:var(--g900);
  border:2px solid var(--g700);border-radius:8px;padding:9px 14px;font-weight:700;transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{outline:3px solid #f59e0b;outline-offset:3px}
.container{width:min(1180px,92%);margin-inline:auto}
h1,h2,h3,h4{line-height:1.25;color:var(--g900)}
.kicker{color:var(--g700);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem}
.kicker.on-dark{color:#9cd4f0}
.muted{color:var(--muted)}
.center{text-align:center}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;
  border-radius:10px;padding:13px 24px;font-size:.95rem;cursor:pointer;border:1px solid transparent;
  transition:all .2s ease;font-family:inherit}
.btn-primary{background:var(--g600);color:#fff}
.btn-primary:hover{background:var(--g800);transform:translateY(-1px)}
.btn-outline{border-color:rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.06)}
.btn-outline:hover{background:rgba(255,255,255,.15)}
.btn-ghost{border-color:var(--g600);color:var(--g700);background:#fff}
.btn-ghost:hover{background:#eaf7ee}
.btn-wa{background:var(--wa);color:var(--g900)}
.btn-wa:hover{background:#1eb75a;transform:translateY(-1px)}
.btn-sm{padding:9px 16px;font-size:.88rem}

/* ---------- header ---------- */
#site-header{min-height:72px}
.site-header{position:sticky;top:0;z-index:70;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:box-shadow .25s}
.site-header.scrolled{box-shadow:0 8px 24px rgba(16,24,40,.09)}
.nav-wrap{display:flex;align-items:center;gap:20px;height:72px}
.logo{display:flex;align-items:center;gap:10px;font-size:1.2rem;font-weight:800;color:var(--g800);
  white-space:nowrap;flex-shrink:0}
.logo svg,.logo img{width:34px;height:34px;flex-shrink:0;object-fit:contain}
.logo em{font-style:normal;color:var(--g600)}
.nav-links{display:flex;gap:2px;margin-left:auto;align-items:center}
.nav-links a{padding:8px 13px;border-radius:8px;font-weight:500;font-size:.93rem;color:#344054}
.nav-links a:hover{background:#eaf4fa;color:var(--g700)}
.nav-links a.active{color:var(--g700);font-weight:700}

/* ---------- multi-level nav dropdowns ---------- */
/* Font/size are pinned explicitly so the header reads identically on the home
   page (body font Inter) and every interior page (system stack). */
.nav-top,.nav-drop a{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  text-transform:none;letter-spacing:0;
}
.nav-item{position:relative}
.nav-top{display:inline-flex;align-items:center;gap:5px;font-size:.93rem;font-weight:500}
.nav-caret{width:11px;height:11px;flex-shrink:0;opacity:.65;transition:transform .2s ease}
.nav-item.has-drop:hover .nav-caret,
.nav-item.has-drop:focus-within .nav-caret{transform:rotate(180deg)}
.nav-drop{
  position:absolute;top:100%;left:0;z-index:90;min-width:232px;
  display:flex;flex-direction:column;gap:1px;padding:7px;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 16px 34px rgba(16,24,40,.13);
  opacity:0;visibility:hidden;transform:translateY(-5px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.nav-item.has-drop:hover>.nav-drop,
.nav-item.has-drop:focus-within>.nav-drop{opacity:1;visibility:visible;transform:translateY(0)}
.nav-drop a{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:7px;
  font-size:.88rem;font-weight:500;color:#344054;white-space:nowrap;
}
.nav-drop a:first-child{font-weight:700;color:var(--g700)}
.nav-drop a:hover{background:#eaf4fa;color:var(--g700)}
.nav-drop-icon{width:18px;height:18px;flex-shrink:0;opacity:.75}
.nav-drop a:hover .nav-drop-icon{opacity:1}
.static-nav a .nav-drop-icon{width:18px;height:18px;flex-shrink:0;opacity:.75;margin-right:2px}
.nav-item.drop-right>.nav-drop{left:auto;right:0}
/* The Products menu carries 12 categories plus "All Products" -- a single
   column runs past the fold on a laptop, so it breaks into two even columns.
   "All Products" keeps the full width at the top so it still reads as the
   parent of the list rather than as the first category. */
.nav-drop.drop-2col{display:grid;grid-template-columns:1fr 1fr;gap:1px 6px;min-width:452px}
.nav-drop.drop-2col>a:first-child{grid-column:1/-1;border-bottom:1px solid var(--line);margin-bottom:4px;padding-bottom:10px}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.hamburger span{width:24px;height:2px;background:var(--g800);border-radius:2px;transition:.25s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero-home{background:linear-gradient(100deg,rgba(11,46,25,.9) 0%,rgba(11,46,25,.66) 46%,rgba(11,46,25,.28) 100%),
  var(--hero-image) center/cover no-repeat;color:#fff}
.hero{padding:104px 0 92px}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.35rem);color:#fff;max-width:18ch;margin:14px 0 18px;line-height:1.12}
.hero .lead{max-width:56ch;color:#e2efe6;font-size:1.08rem;margin-bottom:30px}
.hero .btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{border:1px solid rgba(255,255,255,.35);color:#eaf5ed;font-size:.82rem;
  padding:7px 15px;border-radius:999px;background:rgba(255,255,255,.07);backdrop-filter:blur(4px)}

/* Height was purely content-driven (no min-height), so width kept growing on
   a wider screen while height stayed fixed at ~300px -- the band's aspect
   ratio ran from ~4.7:1 at 1440px wide to ~8.4:1 at 2560px, cropping deeper
   into the banner photo the wider the monitor. max(floor, 16.6vw) converges
   to a ~6:1 cap at any width instead of growing unbounded. */
.page-hero{background:linear-gradient(100deg,rgba(11,46,25,.92),rgba(11,46,25,.62)),
  var(--hero-image) right 38%/cover no-repeat;color:#fff;padding:66px 0;
  min-height:max(240px,16.6vw)}
.page-hero h1{color:#fff;font-size:clamp(1.8rem,3.6vw,2.5rem);margin:12px 0 10px}
.page-hero p{max-width:64ch;color:#dcefe2}
.breadcrumb{font-size:.84rem;color:#a9d0e8}
.breadcrumb a{color:#d6ecf7}.breadcrumb a:hover{color:#fff}

/* ---------- stats ---------- */
.stats{background:var(--g800);color:#c7e2d0;padding:30px 0}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat b{display:block;font-size:clamp(1.5rem,2.6vw,1.9rem);color:#fff;font-weight:800}
.stat span{font-size:.85rem}

/* ---------- sections ---------- */
.section{padding:76px 0}
.section.alt{background:var(--alt)}
.sec-head{max-width:660px;margin-bottom:42px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{font-size:clamp(1.6rem,3vw,2.15rem);margin:10px 0 12px}
.sec-head p{color:var(--muted);line-height:1.7}

/* ---------- grids & cards ---------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .25s,transform .25s}
.pcard:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.pcard .ph{aspect-ratio:4/3;overflow:hidden;background:#eef1ee}
.pcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.pcard:hover .ph img{transform:scale(1.05)}
.pcard .body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.pcard h3{font-size:1.05rem}
.tag{align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:.04em;
  background:#e2f1fa;color:var(--g700);border-radius:999px;padding:3px 11px}
.pcard .meta{font-size:.84rem;color:var(--muted)}
.pcard .meta b{color:#344054;font-weight:600}
.textlink{color:var(--g700);font-weight:700;font-size:.92rem;margin-top:auto}
.textlink:hover{color:var(--g600)}

/* ---------- industry pages ---------- */
.ind-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ind-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:6px;overflow:hidden;transition:border-color .3s ease,box-shadow .3s ease}
.ind-card:hover{border-color:var(--g700);box-shadow:0 2px 10px rgba(15,45,70,.08)}
.ind-card img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#f1ede0;transition:transform .35s ease}
.ind-card:hover img{transform:scale(1.025)}
.ind-card-name{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:18px 20px 0;color:var(--g900);font-weight:700;font-size:1.05rem}
.ind-card-name em{font-style:normal;color:var(--g700);transition:transform .25s ease}
.ind-card:hover .ind-card-name em{transform:translateX(3px)}
.ind-card small{display:block;padding:6px 20px 18px;color:var(--muted);font-size:.85rem}

.cat-lite-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ccard-lite{display:flex;flex-direction:column;gap:3px;padding:16px 18px;background:#fff;
  border:1px solid var(--line);border-radius:8px;transition:border-color .2s,background .2s}
.ccard-lite:hover{border-color:var(--g700);background:#eaf4fa}
.ccard-lite span{font-weight:700;color:var(--g900);font-size:.98rem}
.ccard-lite small{color:var(--muted);font-size:.82rem}

@media(max-width:900px){
  .ind-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .cat-lite-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .ind-grid{grid-template-columns:1fr}
  .cat-lite-grid{grid-template-columns:1fr}
}

.ccard{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;display:block}
.ccard img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.ccard:hover img{transform:scale(1.06)}
.ccard .lbl{position:absolute;inset:auto 0 0 0;padding:34px 18px 16px;color:#fff;font-weight:700;
  background:linear-gradient(transparent,rgba(11,46,25,.85));display:flex;justify-content:space-between;align-items:center}
.ccard .lbl small{font-weight:500;color:#cfe0ec;font-size:.78rem}

/* ---------- feature items ---------- */
.feat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
.feat .ic{width:46px;height:46px;border-radius:12px;background:#e2f1fa;color:var(--g700);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.feat .ic svg{width:24px;height:24px}
.feat h3{font-size:1.05rem;margin-bottom:8px}
.feat p{font-size:.92rem;color:var(--muted)}

/* ---------- 工厂视频（factory-tour.html） ---------- */
.fac-video{margin:26px 0 0}
.fac-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;
  background:#0d1520;border-radius:var(--radius);border:1px solid var(--line)}
.fac-video figcaption{margin-top:12px;font-size:.9rem;color:var(--muted)}

/* 带图的 feat 卡（custom.html 面料网格）。.feat 全站 55 个文件用了 105 次，
   所以样式挂在限定类上，不动裸 .feat。
   height:auto 是必须的：img 带 width/height 属性时会映射成 CSS presentational
   hint 压过 aspect-ratio，IMAGE-SPEC 末尾那条坑已经因此修过三处。 */
.feat--media{padding:0;overflow:hidden}
.feat--media>img{display:block;width:100%;height:auto;aspect-ratio:4/3;
  object-fit:cover;background:#f1ede0}
.feat--media>h3{padding:20px 24px 0}
.feat--media>p{padding:8px 24px 26px;margin:0}

/* ---------- steps ---------- */
.steps{counter-reset:step;display:grid;gap:16px}
.step{counter-increment:step;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 22px 22px 74px;position:relative}
.step::before{content:counter(step,decimal-leading-zero);position:absolute;left:20px;top:20px;
  width:38px;height:38px;border-radius:50%;background:var(--g600);color:#fff;font-weight:800;font-size:.9rem;
  display:flex;align-items:center;justify-content:center}
.step h3{font-size:1rem;margin-bottom:5px}
.step p{font-size:.9rem;color:var(--muted)}
@media(min-width:900px){.steps.cols3{grid-template-columns:repeat(3,1fr)}
  .steps.cols3 .step{padding:76px 20px 22px}}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table{width:100%;border-collapse:collapse;min-width:640px}
th{background:var(--g800);color:#fff;text-align:left;padding:13px 16px;font-size:.83rem;letter-spacing:.05em;text-transform:uppercase}
td{padding:13px 16px;border-top:1px solid var(--line);font-size:.92rem;color:#344054;vertical-align:top}
tr:hover td{background:#faf8f2}
table.spec{min-width:0}
table.spec td:first-child{color:var(--muted);width:40%}
table.spec tr:hover td{background:transparent}

/* ---------- product detail ---------- */
.pd{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.pd .ph{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#f1ede0;aspect-ratio:1/1}
.pd .ph img{width:100%;height:100%;object-fit:cover}
.pd h1{font-size:clamp(1.5rem,3vw,2rem);margin:10px 0 8px}
.pd .lead{color:var(--muted);margin-bottom:20px}
.pd .btn-row{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}
.featlist li{padding:9px 0 9px 26px;position:relative;font-size:.93rem;color:#344054;border-bottom:1px dashed var(--line)}
.featlist li::before{content:"";position:absolute;left:2px;top:16px;width:8px;height:8px;border-radius:50%;background:var(--g600)}

/* ---------- testimonials ---------- */
.tcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;gap:14px}
.tcard .stars{color:var(--amber);letter-spacing:2px;font-size:.95rem}
.tcard p{color:#344054;font-size:.94rem;line-height:1.7;flex:1}
.tcard .who{font-size:.85rem;color:var(--muted)}
.tcard .who b{color:var(--ink);display:block}

/* ---------- CTA banner ---------- */
.cta-band{background:linear-gradient(110deg,var(--g800),var(--g700) 60%,var(--g600));
  border-radius:20px;color:#fff;padding:52px 7%;text-align:center}
.cta-band h2{color:#fff;font-size:clamp(1.5rem,3vw,2rem);margin-bottom:12px}
.cta-band p{color:#d5ecdc;max-width:56ch;margin:0 auto 26px}
.cta-band .btn-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-band .btn-ghost{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.cta-band .btn-ghost:hover{background:rgba(255,255,255,.12)}
.cta-band .btn-primary{background:#fff;color:var(--g800)}
.cta-band .btn-primary:hover{background:#eaf4fa}

/* ---------- forms ---------- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.field{margin-bottom:16px}
.field.full{grid-column:1/-1}
label{display:block;font-size:.84rem;font-weight:600;margin-bottom:6px;color:#344054}
.req{color:#dc2626}
input,select,textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:.93rem;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(22,163,74,.18);border-color:var(--g600)}
textarea{min-height:120px;resize:vertical}
input[type=file]{padding:9px 13px;font-size:.86rem;cursor:pointer}
.field-hint{font-size:.76rem;color:var(--muted);margin-top:5px}

/* ---------- artwork dropzone (JS-enhanced file input) ---------- */
/* The real input is hidden only once JS has replaced it with the drop zone,
   so a no-JS visitor still gets a working file picker. */
.visually-hidden-input{position:absolute!important;width:1px;height:1px;opacity:0;pointer-events:none}
.dropzone{border:1px dashed var(--line);border-radius:10px;background:#fff;padding:10px;transition:border-color .2s,background .2s}
.dropzone.is-over{border-color:var(--g600);background:#eaf4fa}
.dropzone-cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:64px;
  padding:10px 14px;border:0;border-radius:8px;background:transparent;cursor:pointer;
  font:inherit;font-size:.86rem;color:#344054;text-align:left}
.dropzone-cta:hover{background:var(--alt)}
.dropzone-cta svg{width:22px;height:22px;flex-shrink:0;color:var(--g700)}
.dropzone-cta b{color:var(--g700)}
.dropzone-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.dz-item{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--alt)}
.dz-thumb{width:44px;height:44px;flex-shrink:0;border-radius:6px;overflow:hidden;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:.66rem;font-weight:800;color:var(--muted);letter-spacing:.04em}
.dz-thumb img{width:100%;height:100%;object-fit:cover}
.dz-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dz-meta b{font-size:.82rem;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dz-meta small{font-size:.72rem;color:var(--muted)}
.dz-remove{flex-shrink:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--muted);cursor:pointer;transition:.18s}
.dz-remove:hover{border-color:#f04438;color:#d92d20;background:#fef3f2}
.dz-remove svg{width:14px;height:14px}
.form-note{font-size:.8rem;color:var(--muted);margin-top:12px}
.form-note a{text-decoration:underline;color:var(--g700)}
.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.form-status{min-height:1.4em;margin-top:12px;font-size:.86rem;font-weight:600;color:var(--muted)}
.form-status.success{color:var(--g700)}
.form-status.error{color:#b91c1c}
.form-status.notice{color:#92400e}
.form-card button:disabled{cursor:wait;opacity:.72}

.info-card{background:var(--g800);color:#d6ecdd;border-radius:var(--radius);padding:30px}
.info-card h3{color:#fff;margin-bottom:18px}
.info-card li{display:flex;gap:13px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:.92rem}
.info-card li:last-child{border-bottom:0}
.info-card svg{width:20px;height:20px;flex-shrink:0;color:#8fdcab;margin-top:2px}
.info-card b{display:block;color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}
.info-card a{color:#fff;font-weight:600}
.info-card a:hover{text-decoration:underline}

/* ---------- FAQ ---------- */
details.faq{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}
details.faq summary{cursor:pointer;padding:17px 20px;font-weight:600;font-size:.97rem;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:12px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font-size:1.3rem;color:var(--g600);font-weight:700;flex-shrink:0}
details.faq[open] summary::after{content:"–"}
details.faq .ans{padding:0 20px 18px;color:var(--muted);font-size:.92rem;line-height:1.7}

/* ---------- cert chips ---------- */
.certs{display:flex;gap:10px;flex-wrap:wrap}
.cert{border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 16px;
  font-size:.85rem;font-weight:600;color:var(--g800);display:flex;align-items:center;gap:8px}
.cert svg{width:16px;height:16px;color:var(--g600)}

/* ---------- image + text rows ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split .ph{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.split h2{font-size:clamp(1.5rem,3vw,2rem);margin:10px 0 14px}
.split p{color:var(--muted);margin-bottom:14px;line-height:1.75}

/* ---------- blog ---------- */
.bcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .25s,transform .25s}
.bcard:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.bcard .ph{aspect-ratio:16/9;overflow:hidden}
.bcard .ph img{width:100%;height:100%;object-fit:cover}
.bcard .body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.bcard h3{font-size:1.05rem;line-height:1.4}
.bcard .meta{font-size:.78rem;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap}
.bcard p{font-size:.88rem;color:var(--muted);flex:1}

.prose{max-width:760px;margin-inline:auto}
.prose .hero-img{border-radius:var(--radius);margin:26px 0;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9}
.prose .hero-img img{width:100%;height:100%;object-fit:cover}
.prose h2{font-size:1.4rem;margin:34px 0 12px}
.prose p{margin-bottom:16px;color:#344054;line-height:1.8}
.prose ul{padding-left:1.2em;margin-bottom:16px;list-style:disc}
.prose li{margin-bottom:8px;color:#344054;line-height:1.7}
.prose a{color:var(--g700);font-weight:600;text-decoration:underline}
.art-head{max-width:760px;margin-inline:auto}
.art-head h1{font-size:clamp(1.7rem,3.4vw,2.4rem);margin:14px 0 12px}
.art-meta{display:flex;gap:14px;color:var(--muted);font-size:.85rem;flex-wrap:wrap}

/* ---------- footer ---------- */
.site-footer{background:var(--g900);color:#c2d9e6;padding-top:58px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(5,1fr);gap:30px;padding-bottom:44px}
@media(max-width:1100px){.foot-grid{grid-template-columns:1.4fr repeat(3,1fr)}}
@media(max-width:860px){.foot-grid{grid-template-columns:repeat(2,1fr)}}
.foot-title{color:#fff;font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px}
.site-footer a{display:block;padding:5px 0;font-size:.9rem;color:#c2dccb}
.site-footer a:hover{color:#fff}
.nav-links .mobile-quote{display:none}
.foot-brand p{font-size:.88rem;margin:14px 0 18px;max-width:34ch;line-height:1.7}
.foot-contact li{padding:6px 0;font-size:.88rem}
.foot-contact b{color:#fff;font-weight:600}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding:18px 0;font-size:.8rem;
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:#9dbfae}

/* ---------- floating widgets ---------- */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:80;width:56px;height:56px;border-radius:50%;
  background:var(--wa);display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(37,211,102,.45);transition:transform .2s}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:30px;height:30px;color:#fff}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);z-index:90;
  background:var(--g900);color:#fff;padding:13px 22px;border-radius:12px;font-size:.9rem;
  opacity:0;pointer-events:none;transition:.35s;max-width:90%;text-align:center;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- filter bar ---------- */
.filterbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:30px}
.fchip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 18px;
  font-size:.86rem;font-weight:600;color:#344054;cursor:pointer;transition:.2s;font-family:inherit}
.fchip:hover{border-color:var(--g600);color:var(--g700)}
.fchip.active{background:var(--g600);border-color:var(--g600);color:#fff}
/* Category chips on the catalog pages. Baishun blue, not the green from the
   reference screenshot. Active fill is --g700 (#1c76b0) rather than --g600:
   white on #2489c9 measures 3.56:1 and fails AA for this text size, white on
   #1c76b0 measures 5.07:1. */
.cat-chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px}
.cat-chip{display:inline-flex;align-items:center;min-height:42px;padding:9px 17px;
  border:1px solid var(--line);border-radius:10px;background:#fff;
  color:#344054;font-size:.9rem;font-weight:600;line-height:1.2;
  transition:border-color .18s,color .18s,background .18s}
.cat-chip:hover{border-color:var(--g700);color:var(--g700)}
.cat-chip[aria-current="page"]{background:var(--g700);border-color:var(--g700);color:#fff}
@media(max-width:640px){.cat-chips{gap:7px}.cat-chip{padding:8px 13px;font-size:.84rem;min-height:38px}}
.search{margin-left:auto;position:relative}
.search input{padding-left:38px;border-radius:999px;min-width:230px}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--muted)}
.resultcount{font-size:.85rem;color:var(--muted);margin-bottom:18px}
.empty{padding:60px 0;text-align:center;color:var(--muted)}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .pd{grid-template-columns:1fr;gap:28px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .stats .wrap{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:940px){
  .nav-links{position:fixed;top:72px;left:0;right:0;background:#fff;flex-direction:column;
    align-items:stretch;padding:14px 5%;gap:2px;border-bottom:1px solid var(--line);
    box-shadow:0 20px 30px rgba(16,24,40,.1);display:none;
    max-height:calc(100vh - 72px);overflow-y:auto;overscroll-behavior:contain}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 10px;font-size:1rem}
  .hamburger{display:flex}
  .nav-quote{display:none}
  .nav-links .mobile-quote{display:flex;margin:6px 0 0}
  /* flatten dropdowns into an indented list -- hover menus don't work on touch */
  .nav-item{position:static}
  .nav-caret{display:none}
  .nav-drop{
    position:static;opacity:1;visibility:visible;transform:none;
    min-width:0;padding:0 0 6px 12px;border:0;border-radius:0;box-shadow:none;background:transparent;
    border-left:2px solid var(--line);margin:0 0 4px 10px;
  }
  .nav-drop a{padding:10px 10px;font-size:.94rem}
}
@media(max-width:640px){
  :root{--hero-image:url("../img/hero-800.webp")}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:26px}
  .form-grid{grid-template-columns:1fr}
  .section{padding:56px 0}
  .hero{padding:72px 0 60px}
  .foot-grid{grid-template-columns:1fr}
  .search{margin-left:0;width:100%}
  .search input{width:100%}
}

/* ---------- quote estimator ---------- */
.est{background:var(--g900);color:#cfe9d9;border-radius:12px;padding:22px;text-align:center}
.est b{font-size:clamp(1.8rem,4vw,2.2rem);color:#fff;display:block;margin-bottom:4px}
.est span{font-size:.9rem;color:#a9d0e8}
.est .unit{font-size:.8rem;display:block;color:#8fc7a3;margin-bottom:8px;letter-spacing:.08em;text-transform:uppercase}

/* ---------- lead popup ---------- */
.leadpop{position:fixed;inset:0;z-index:95;display:none;align-items:center;justify-content:center;
  background:rgba(11,46,25,.55);backdrop-filter:blur(3px);padding:16px}
.leadpop.show{display:flex}
.leadpop .lcard{background:#fff;border-radius:18px;max-width:430px;width:100%;padding:34px 30px;
  position:relative;box-shadow:0 30px 80px rgba(0,0,0,.28);text-align:center;animation:pop .35s ease}
@keyframes pop{from{transform:translateY(26px);opacity:0}to{transform:none;opacity:1}}
.leadpop .x{position:absolute;top:10px;right:14px;border:0;background:none;font-size:1.5rem;cursor:pointer;color:var(--muted);line-height:1}
.leadpop h3{color:var(--g900);font-size:1.35rem;margin:12px 0 10px}
.leadpop p{font-size:.9rem;color:var(--muted);line-height:1.65;margin-bottom:18px}
.leadpop .no{display:block;width:100%;margin-top:12px;border:0;background:none;font:inherit;
  font-size:.82rem;color:var(--muted);cursor:pointer;text-decoration:underline}
.leadpop .badge0{display:inline-block;background:#e2f1fa;color:var(--g700);font-weight:700;font-size:.78rem;border-radius:999px;padding:4px 14px;letter-spacing:.06em}

/* ---------- sticky mobile CTA bar ---------- */
.mobbar{display:none}
@media(max-width:720px){
  .mobbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:85;background:#fff;
    border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(16,24,40,.1)}
  .mobbar a{flex:1;text-align:center;padding:13px 8px;font-weight:700;font-size:.92rem;display:flex;align-items:center;justify-content:center;gap:7px}
  .mobbar .a1{color:var(--g700)}
  .mobbar .a2{background:var(--g600);color:#fff}
  .mobbar svg{width:18px;height:18px}
  .wa-float{bottom:74px}
  body{padding-bottom:50px}
  .leadpop .lcard{padding:28px 20px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ---------- black-gold homepage ---------- */
@font-face{font-family:"Montserrat";src:url("../fonts/montserrat-latin-wght-normal.woff2") format("woff2-variations");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");font-weight:100 900;font-style:normal;font-display:swap}

body[data-page="home"]{
  /* Unified to the site's warm kraft palette -- was a separate near-black
     "black-gold" theme. --lux-hero-text/-muted stay light on purpose: the
     hero section keeps its dark photo-overlay treatment for legibility,
     everything below it is now light like the rest of the site. */
  --lux-bg:#f6f2e7;--lux-bg-2:#ffffff;--lux-card:#ffffff;
  --lux-gold:#1c76b0;--lux-gold-hi:#2489c9;--lux-text:#101828;--lux-muted:#6b6355;
  --lux-line:#e6ddc8;--lux-max:1280px;
  --lux-hero-text:#F7F5EF;--lux-hero-muted:#D4D1CA;
  /* Hero-only accent. The brand blues are too dark to read straight off the
     photo: measured against the actual pixels behind the text, #1C76B0 tops
     out at 1.68:1 and #2489C9 at 2.16:1 with no scrim -- and #1C76B0 never
     clears 4.5:1 even under the old 88% blackout. That blackout is the only
     reason they worked, and it also killed the image. Lifting the hue to
     this tint clears AA on the bare photo, so the scrim can go. */
  --lux-hero-accent:#6ACBFE;
  background:var(--lux-bg);color:var(--lux-text);font-family:"Inter","Segoe UI",sans-serif;
}
body[data-page="home"] .lux-container{width:min(var(--lux-max),88%);margin-inline:auto}
body[data-page="home"] h1,body[data-page="home"] h2,body[data-page="home"] h3{font-family:"Montserrat","Segoe UI",sans-serif;color:var(--lux-text)}
body[data-page="home"] .lux-section{padding:clamp(76px,8vw,124px) 0;background:var(--lux-bg)}
body[data-page="home"] .lux-section[id],body[data-page="home"] #main-content{scroll-margin-top:88px}
body[data-page="home"] .lux-section:nth-of-type(even){background:var(--lux-bg-2)}
body[data-page="home"] .lux-eyebrow{color:var(--lux-gold);font:700 .78rem/1.2 "Montserrat",sans-serif;letter-spacing:.18em;text-transform:uppercase}
body[data-page="home"] .lux-section-head{max-width:760px;margin-bottom:48px}
body[data-page="home"] .lux-section-head.is-centered{margin-inline:auto;text-align:center}
body[data-page="home"] .lux-section-head h2{font-size:clamp(2rem,3.5vw,3.5rem);line-height:1.08;margin:14px 0}
body[data-page="home"] .lux-section-head h2 em{color:var(--lux-gold);font-style:italic}
body[data-page="home"] .lux-section-head p{color:var(--lux-muted);font-size:1.04rem;max-width:64ch}
body[data-page="home"] .lux-section .lux-container>h2{font-size:clamp(2rem,3.5vw,3.5rem);line-height:1.08;margin:14px 0 18px}
body[data-page="home"] .lux-section .lux-container>p:not(.lux-eyebrow){max-width:68ch;color:var(--lux-muted)}
body[data-page="home"] .lux-btn{min-height:52px;border-radius:10px;padding:14px 28px;font:800 .92rem/1 "Montserrat",sans-serif;letter-spacing:.03em;text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;gap:13px;transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease}
body[data-page="home"] .lux-btn-gold{
  background:linear-gradient(135deg,#155F91 0%,#117BB5 100%);
  color:#fff;
  border:1px solid rgba(10,70,110,.15);
  box-shadow:0 4px 12px rgba(15,45,70,.12);
}
body[data-page="home"] .lux-btn-gold svg{width:16px;height:16px;flex-shrink:0}
body[data-page="home"] .lux-btn-gold:hover{
  background:linear-gradient(135deg,#124f7a 0%,#0d6a9c 100%);
  border-color:rgba(10,70,110,.24);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(15,45,70,.2);
}

/* Header CTA specifically -- the button the brief calls out by name.
   (mobile hides this via the existing .nav-quote{display:none} rules) */
body[data-page="home"] .home-header .nav-quote{
  width:auto;min-width:250px;max-width:270px;height:58px;min-height:0;
  padding:0 26px;
}
body[data-page="home"] .lux-btn-outline{background:#fff;color:var(--lux-text);border:1px solid var(--lux-line)}
body[data-page="home"] .lux-btn-outline:hover{border-color:var(--lux-gold);color:var(--lux-gold)}
/* Hero sits on a dark photo overlay regardless of the page theme below it --
   pin its text/button treatment to the light-on-dark pairing so it stays
   legible against the image. */
body[data-page="home"] .lux-hero-content h1,body[data-page="home"] .lux-hero-content h1 em{color:var(--lux-hero-text)}
body[data-page="home"] .lux-hero-content h1 em{color:var(--lux-hero-accent)}
body[data-page="home"] .lux-hero .lux-btn-outline{background:rgba(10,10,15,.28);color:var(--lux-hero-text);border-color:rgba(247,245,239,.48)}
body[data-page="home"] .lux-section .lux-container>.lux-btn{margin-top:32px}

body[data-page="home"] #site-header{min-height:76px}
body[data-page="home"] .home-header{height:76px;background:rgba(246,242,231,.94);border-bottom:1px solid var(--lux-line);backdrop-filter:blur(14px)}
body[data-page="home"] .home-header .nav-wrap{height:76px;gap:24px}
/* Home wordmark inherits the shared .logo treatment (dark navy + brand blue,
   1.2rem) so it reads identically to every interior page. nowrap stops it
   collapsing onto two lines when the nav gets wide. */
body[data-page="home"] .home-wordmark em{color:var(--g600)}
body[data-page="home"] .home-mark{width:34px;height:34px;flex-shrink:0;object-fit:contain}
/* Home nav inherits the shared .nav-links / .nav-drop treatment defined at the
   top of this file -- it used to carry its own uppercase Montserrat styling,
   which made the header look like a different site from every interior page. */
body[data-page="home"] .home-header .nav-links .mobile-quote{display:none}
body[data-page="home"] .home-header .hamburger span{background:var(--lux-gold)}
body[data-page="home"] .skip-link{background:var(--lux-card);color:var(--lux-text);border-color:var(--lux-gold)}
/* Full-bleed hero: the photo covers the whole band and the copy sits over the
   empty dark half on its left, with no visible seam between them. The photo's
   product cluster is right- and bottom-weighted, so anchoring the background
   to right-bottom keeps the whole arrangement in frame and pushes what little
   `cover` has to crop into the empty top-left. Vertical rhythm scales with
   viewport height so the band still fits above the fold on a short window. */
body[data-page="home"] .lux-hero{position:relative;isolation:isolate;min-height:calc(100svh - 76px);display:grid;align-items:center;overflow:hidden;background:#0a0a0f}
body[data-page="home"] .lux-hero-media{position:absolute;inset:0;z-index:-2;background:#0a0a0f url("../img/hero-tone-wide.webp") right bottom/cover no-repeat}
/* Desktop runs the photo bare -- the new hero art is lit on the left and the
   old 97%->0% blackout threw all of that away. Readability is carried by
   --lux-hero-accent instead of by darkening the image. Mobile still gets a
   shade (see the max-width:720px block): there the text sits over the
   products, not over open background, so it genuinely needs one. */
body[data-page="home"] .lux-hero-shade{position:absolute;inset:0;z-index:-1;background:none}
body[data-page="home"] .lux-hero-content{padding-block:clamp(24px,5vh,88px);position:relative;z-index:1}
/* The shared .lux-eyebrow colour is tuned for the cream sections; on the bare
   hero photo it measures 1.68:1. Only the hero copy switches. */
body[data-page="home"] .lux-hero-content .lux-eyebrow{color:var(--lux-hero-accent)}
/* The two small accent lines need a tighter column than the rest. Measured on
   the bare photo: small text stays above 4.5:1 only while it is left of the
   cream pouch, which sits at ~405px (1440) / ~657px (1920). The proof line had
   no max-width at all and ran to 746px, straight across the pouch -- 1.48:1,
   and no scrim strength fixes that because the pouch is brighter than the
   text. 480px measures 5.19-6.45:1 across 1366/1440/1920 and still wraps to
   two lines. h1 is exempt: at 63px it only needs 3.0:1, and .lux-chips carry
   their own 52% panel, so both stay on the wider 660px column.
   Both selectors go through .lux-hero-content on purpose: the 660px rule
   above is `.lux-hero-content>*`, the same specificity as a bare
   `.lux-hero-proof`, and it is declared later -- so the shorter selector
   silently lost the tie and the 480px never applied. */
body[data-page="home"] .lux-hero-content .lux-eyebrow,
body[data-page="home"] .lux-hero-content .lux-hero-proof{max-width:min(480px,100%)}
/* Keep every hero block inside the shaded half. .lux-hero-shade fades to fully
   transparent at 72% of the viewport, but these children are block/flex boxes
   that span the whole container (~94%), so the chips row and the proof line
   were landing on the brightest part of the photo with zero mask behind them.
   Constrain the children, not .lux-hero-content itself -- it also carries
   .lux-container, whose margin-inline:auto would re-centre the whole column.
   Narrower rules (h1's 11ch) still win; min() no-ops on small screens. */
body[data-page="home"] .lux-hero-content>*{max-width:min(660px,100%)}
body[data-page="home"] .lux-hero-content h1{max-width:11ch;font-size:clamp(2.4rem,4.4vw,4.6rem);line-height:1.0;letter-spacing:-.05em;margin:clamp(10px,1.8vh,24px) 0 clamp(14px,2.2vh,28px)}
body[data-page="home"] .lux-hero-content h1 em{color:var(--lux-hero-accent);font-style:italic}
body[data-page="home"] .lux-hero-lead{max-width:46ch;color:#D4D1CA;font-size:clamp(.95rem,1.15vw,1.14rem);line-height:1.6}
body[data-page="home"] .lux-hero-proof{margin-top:clamp(10px,1.6vh,20px);color:var(--lux-hero-accent);font-weight:700;font-size:clamp(.85rem,.95vw,1rem)}
body[data-page="home"] .lux-chips{display:flex;gap:8px;flex-wrap:wrap;margin:clamp(14px,2.4vh,28px) 0 clamp(16px,2.6vh,30px)}
body[data-page="home"] .lux-chips span{padding:8px 13px;border:1px solid rgba(201,168,76,.4);background:rgba(10,10,15,.52);color:#E6E2D8;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
body[data-page="home"] .lux-actions{display:flex;gap:14px;flex-wrap:wrap}

body[data-page="home"] .lux-factory-head{max-width:820px}
body[data-page="home"] .lux-factory-head h2{font-size:clamp(2rem,3vw,3rem);line-height:1.08;margin:14px 0 18px}
body[data-page="home"] .lux-factory-head p:not(.lux-eyebrow){color:var(--lux-muted)}
/* 3:2 cells against ~1.6 source photos -- the shots carry the BAISHUN PACK
   wordmark burnt into the top-left, so what little `cover` trims comes off the
   right edge and leaves the mark whole. */
body[data-page="home"] .lux-factory-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:38px}
body[data-page="home"] .lux-factory-strip figure{margin:0;overflow:hidden}
/* height:auto is load-bearing -- the width/height HTML attributes map to CSS
   presentational hints, and a specified height beats aspect-ratio. */
body[data-page="home"] .lux-factory-strip img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:left center;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
body[data-page="home"] .lux-factory-strip figure:hover img{transform:scale(1.04)}
body[data-page="home"] .lux-factory-strip figcaption{margin-top:9px;color:var(--lux-muted);font-size:.76rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
body[data-page="home"] .lux-factory-cta{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-top:34px;padding:clamp(24px,3vw,34px);background:var(--lux-card);border:1px solid var(--lux-line)}
body[data-page="home"] .lux-factory-cta h3{margin-bottom:8px}
body[data-page="home"] .lux-factory-cta p{max-width:62ch;margin:0;color:var(--lux-muted)}
/* 带视频的 CTA 条：左文案右视频。视频**只在桌面端显示**（2026-08-16 按 Jacken 要求），
   移动端 display:none，连 poster 都不会去拉，不给手机端增加任何字节。 */
body[data-page="home"] .lux-factory-cta--video{align-items:stretch}
body[data-page="home"] .lux-factory-cta-copy{flex:1 1 380px;min-width:0;
  display:flex;flex-direction:column;justify-content:center;gap:20px}
body[data-page="home"] .lux-factory-video{flex:1 1 420px;min-width:0;margin:0}
body[data-page="home"] .lux-factory-video video{display:block;width:100%;height:auto;
  aspect-ratio:16/9;background:#0d1520;border:1px solid var(--lux-line)}
body[data-page="home"] .lux-stats{background:var(--lux-bg-2);border-block:1px solid var(--lux-line)}
body[data-page="home"] .lux-stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
body[data-page="home"] .lux-stat{padding:34px 24px;border-right:1px solid var(--lux-line)}
body[data-page="home"] .lux-stat:last-child{border-right:0}
body[data-page="home"] .lux-stat strong{display:block;color:var(--lux-gold);font:800 clamp(1.75rem,2.8vw,2.7rem)/1 "Montserrat",sans-serif}
body[data-page="home"] .lux-stat span{display:block;margin-top:10px;color:var(--lux-muted);font-size:.84rem}
body[data-page="home"] .lux-stats>p{text-align:center;padding:12px 20px;color:#8a8272;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;border-top:1px solid rgba(0,0,0,.06)}
body[data-page="home"] .lux-glance-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:38px}
/* ---- Product Families: fixed 3-col grid, 12 categories (4 rows x 3 cols) ---- */
body[data-page="home"] .lux-products{padding-top:80px;padding-bottom:90px}
body[data-page="home"] .lux-products .lux-container{max-width:1200px}
body[data-page="home"] .lux-products h2{margin-bottom:10px}
body[data-page="home"] .lux-products>.lux-container>p:not(.lux-eyebrow){margin-bottom:32px}
/* Programme links (added 2026-08-15): body copy and links resolve to the same
   muted colour here, so without this the solutions entry points read as plain
   text and nobody clicks them. */
body[data-page="home"] .lux-products-programmes a{color:var(--lux-gold);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
body[data-page="home"] .lux-products-programmes a:hover{color:var(--lux-gold-hi)}

body[data-page="home"] .lux-product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:0}

body[data-page="home"] .home-product-card{
  display:flex;min-width:0;flex-direction:column;
  background:#fff;border:1px solid var(--lux-line);border-radius:6px;
  overflow:hidden;
  transition:border-color .3s ease,box-shadow .3s ease;
}
body[data-page="home"] .home-product-card:hover{
  border-color:var(--lux-gold);
  box-shadow:0 2px 10px rgba(15,45,70,.08);
}
/* height:auto is load-bearing, same trap as .lux-factory-strip img: the
   height="480" HTML attribute becomes a presentational hint, and a specified
   height beats aspect-ratio. Without it these 12 cards ignored 4/3 entirely
   and rendered at a fixed 480px tall -- 382x480 (0.80) on desktop and
   166x480 (0.35) on a phone, i.e. tall portrait crops of landscape photos. */
body[data-page="home"] .home-product-card>img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:#f1ede0;
  transition:transform .35s ease;
}
body[data-page="home"] .home-product-card:hover>img{transform:scale(1.025)}
body[data-page="home"] .home-product-card>.hpc-name{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:20px 22px 0;color:var(--lux-text);font:700 1.08rem/1.3 "Montserrat",sans-serif;
}
body[data-page="home"] .home-product-card .hpc-arrow{
  font-style:normal;color:var(--lux-gold);font-size:1.05rem;line-height:1;
  transition:transform .25s ease;flex-shrink:0;
}
body[data-page="home"] .home-product-card:hover .hpc-arrow{transform:translateX(3px)}
body[data-page="home"] .home-product-card>small{
  display:block;padding:6px 22px 18px;color:var(--lux-muted);font-size:.86rem;line-height:1.45;
}
body[data-page="home"] .home-product-card.is-typographic{min-height:100%;justify-content:flex-end;background:radial-gradient(circle at 30% 20%,rgba(28,118,176,.14),transparent 34%),linear-gradient(135deg,#f6f2e7,#ffffff)}
body[data-page="home"] .home-product-card.is-typographic>.hpc-name{margin-top:auto;font-size:1.35rem}

body[data-page="home"] .hpc-catalog-cta{display:flex;justify-content:center;margin-top:40px}
body[data-page="home"] .hpc-catalog-cta .lux-btn-outline{
  background:#fff;color:var(--lux-text);border:1px solid var(--lux-line);
  min-height:0;padding:13px 30px;
}
body[data-page="home"] .hpc-catalog-cta .lux-btn-outline:hover{
  background:var(--lux-gold);color:#fff;border-color:var(--lux-gold);
}

@media(max-width:639px){
  body[data-page="home"] .lux-product-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  body[data-page="home"] .home-product-card>img{aspect-ratio:1/1}
  body[data-page="home"] .home-product-card>.hpc-name{padding:14px 14px 0;font-size:.92rem}
  body[data-page="home"] .home-product-card>small{display:none}
}
body[data-page="home"] .lux-material-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
body[data-page="home"] .lux-material-ic{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:16px;border:1px solid var(--lux-line);border-radius:10px;color:var(--lux-gold)}
body[data-page="home"] .lux-material-ic svg{width:22px;height:22px}
body[data-page="home"] .lux-material-card .lux-material-best{margin:0 0 10px;color:var(--lux-gold);font-size:.78rem;font-weight:800;letter-spacing:.04em}
body[data-page="home"] .lux-material-note{max-width:78ch;margin-top:24px;font-size:.9rem;line-height:1.7}
/* --- Logo finishes (定制工艺六宫格) --- */
body[data-page="home"] .lux-finish-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
body[data-page="home"] .lux-finish-card{display:flex;flex-direction:column;overflow:hidden}
body[data-page="home"] .lux-finish-card .media{margin:-26px -26px 20px;aspect-ratio:4/3;overflow:hidden;background:var(--lux-line)}
body[data-page="home"] .lux-finish-card .media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
body[data-page="home"] .lux-finish-card:hover .media img{transform:scale(1.04)}
body[data-page="home"] .lux-finish-ic{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:16px;border:1px solid var(--lux-line);border-radius:10px;color:var(--lux-gold)}
body[data-page="home"] .lux-finish-ic svg{width:22px;height:22px}
body[data-page="home"] .lux-finish-card .lux-finish-best{margin:0 0 10px;color:var(--lux-gold);font-size:.78rem;font-weight:800;letter-spacing:.04em}
body[data-page="home"] .lux-finish-note{max-width:78ch;margin-top:24px;font-size:.9rem;line-height:1.7}
body[data-page="home"] .lux-finishes .lux-actions{margin-top:26px}
/* --- Custom Projects case wall (规格标签，不写品牌名) --- */
body[data-page="home"] .lux-case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
body[data-page="home"] .lux-case-card{overflow:hidden;background:var(--lux-card);border:1px solid var(--lux-line)}
body[data-page="home"] .lux-case-card .media{aspect-ratio:4/3;overflow:hidden;background:var(--lux-line)}
body[data-page="home"] .lux-case-card .media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
body[data-page="home"] .lux-case-card:hover .media img{transform:scale(1.04)}
body[data-page="home"] .lux-case-spec{padding:14px 18px 16px;color:var(--lux-text);font-size:.82rem;font-weight:700;letter-spacing:.02em}
body[data-page="home"] .lux-case-spec span{display:block;margin-top:2px;color:var(--lux-gold);font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
body[data-page="home"] .lux-direct-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--lux-line);border:1px solid var(--lux-line);margin-top:38px}
body[data-page="home"] .lux-direct-card ul{margin-top:18px;color:var(--lux-muted)}
body[data-page="home"] .lux-direct-card li{position:relative;padding:8px 0 8px 20px;border-top:1px solid rgba(0,0,0,.08)}
body[data-page="home"] .lux-direct-card li::before{content:"";position:absolute;left:0;top:18px;width:5px;height:5px;background:var(--lux-gold)}
body[data-page="home"] .lux-industry-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:180px;gap:14px;margin-top:38px}
body[data-page="home"] .lux-industry-card:nth-child(1),body[data-page="home"] .lux-industry-card:nth-child(4){grid-column:span 6;grid-row:span 2}
body[data-page="home"] .lux-industry-card{grid-column:span 3;position:relative;overflow:hidden}
body[data-page="home"] .lux-industry-card img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
body[data-page="home"] .lux-industry-card::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(10,10,15,.9))}
body[data-page="home"] .lux-industry-card span{position:absolute;left:20px;right:20px;bottom:18px;z-index:1;color:var(--lux-text);font:700 .92rem/1.25 "Montserrat",sans-serif;text-transform:uppercase;letter-spacing:.05em}
body[data-page="home"] .lux-industry-card:hover img{transform:scale(1.045)}
body[data-page="home"] .lux-estimator-shell{display:grid;grid-template-columns:.75fr 1.25fr;gap:48px;align-items:center;background:var(--lux-card);border:1px solid var(--lux-line);padding:clamp(28px,5vw,64px)}
body[data-page="home"] .lux-estimator-copy h2{font-size:clamp(2rem,3.5vw,3.5rem);line-height:1.08;margin:14px 0 18px}
body[data-page="home"] .lux-estimator-copy p:not(.lux-eyebrow){color:var(--lux-muted)}
body[data-page="home"] .lux-estimator-tool label{color:var(--lux-text)}
body[data-page="home"] .lux-estimator-tool select{background:#fff;border-color:var(--lux-line);border-radius:4px;color:var(--lux-text)}
body[data-page="home"] .lux-estimator-tool .est{background:var(--lux-bg);border:1px solid var(--lux-line);border-radius:4px;color:var(--lux-muted);margin-bottom:18px}
body[data-page="home"] .lux-estimator-tool .est b{color:var(--lux-text)}
body[data-page="home"] .lux-estimator-tool .est span,body[data-page="home"] .lux-estimator-tool .est .unit{color:var(--lux-gold)}
body[data-page="home"] .lux-quality-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
body[data-page="home"] .lux-quality-ic{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:16px;border:1px solid var(--lux-line);border-radius:10px;color:var(--lux-gold)}
body[data-page="home"] .lux-quality-ic svg{width:22px;height:22px}
body[data-page="home"] .lux-quality-card .lux-quality-step{margin:0 0 8px;color:var(--lux-gold);font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
body[data-page="home"] .lux-quality-card .lux-actions{margin-top:0}
body[data-page="home"] .lux-process-grid{counter-reset:lux-step;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:38px}
body[data-page="home"] .lux-process-card{counter-increment:lux-step;position:relative;padding:84px 26px 28px;border-top:1px solid var(--lux-line)}
body[data-page="home"] .lux-process-card::before{content:counter(lux-step,decimal-leading-zero);position:absolute;top:22px;color:var(--lux-gold);font:800 2.1rem/1 "Montserrat",sans-serif}
body[data-page="home"] .lux-process-card>span{display:none}
body[data-page="home"] .lux-process-card:not(:last-child){border-right:1px solid rgba(0,0,0,.08)}
body[data-page="home"] .lux-process-card p{margin-top:10px;color:var(--lux-muted)}
body[data-page="home"] .lux-faq-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:64px;align-items:start}
body[data-page="home"] .lux-faq-intro h2{font-size:clamp(2rem,3.5vw,3.5rem);line-height:1.08;margin:14px 0 18px}
body[data-page="home"] .lux-faq-intro p:not(.lux-eyebrow){color:var(--lux-muted)}
body[data-page="home"] .lux-evidence-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
body[data-page="home"] .lux-evidence-card strong{display:block;color:var(--lux-gold);font:800 clamp(1.8rem,3vw,2.8rem)/1 "Montserrat",sans-serif}
body[data-page="home"] .lux-evidence-card span{display:block;margin-top:10px;color:var(--lux-muted);text-transform:uppercase;letter-spacing:.08em;font-size:.75rem}

/* ---------- client reviews (placeholder content, see review-note) ---------- */
body[data-page="home"] .lux-review-note{display:flex;align-items:center;gap:10px;margin-top:38px;margin-bottom:18px;color:var(--lux-gold);font:800 .74rem/1.2 "Montserrat",sans-serif;letter-spacing:.09em;text-transform:uppercase}
body[data-page="home"] .lux-review-note .note-mark{display:inline-grid;flex:0 0 18px;width:18px;height:18px;place-items:center;border-radius:50%;color:#fff;background:var(--lux-gold);font-size:.68rem}
body[data-page="home"] .lux-review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
body[data-page="home"] .lux-review-card{display:flex;flex-direction:column;padding:28px 26px 22px;background:var(--lux-card);border:1px solid var(--lux-line);border-top:3px solid var(--lux-gold)}
body[data-page="home"] .lux-review-card .stars{color:var(--amber);font-size:1.2rem;letter-spacing:.1em;line-height:1}
body[data-page="home"] .lux-review-card blockquote{min-height:128px;margin:26px 0 22px;color:var(--lux-text);font-family:Georgia,"Times New Roman",serif;font-size:.98rem;font-style:italic;line-height:1.72}
body[data-page="home"] .lux-review-card__footer{display:flex;align-items:center;gap:13px;padding-top:18px;border-top:1px solid var(--lux-line)}
body[data-page="home"] .lux-review-card .avatar{width:52px;height:52px;flex:0 0 52px;object-fit:cover;border:2px solid var(--lux-bg);border-radius:50%}
body[data-page="home"] .lux-reviewer{min-width:0;display:flex;flex:1;flex-direction:column;gap:2px}
body[data-page="home"] .lux-reviewer strong{color:var(--lux-text);font-size:.92rem;line-height:1.25}
body[data-page="home"] .lux-reviewer>span:last-child{color:var(--lux-muted);font-size:.8rem}
body[data-page="home"] .lux-review-country{display:flex;align-items:center;gap:6px;color:var(--lux-text);font-size:.9rem;font-weight:700}
body[data-page="home"] .lux-review-country img{width:24px;height:16px;object-fit:cover;border:1px solid var(--lux-line);border-radius:3px}
@media (max-width:900px){body[data-page="home"] .lux-review-grid{grid-template-columns:1fr;max-width:560px}body[data-page="home"] .lux-review-card blockquote{min-height:0}}
body[data-page="home"] .lux-featured{padding-top:0}
body[data-page="home"] .lux-featured-custom{max-width:78ch;margin-top:10px;padding-left:14px;border-left:2px solid var(--lux-gold);color:var(--lux-text);font-weight:600}
body[data-page="home"] .lux-featured-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:38px}
body[data-page="home"] .lux-featured-card{display:flex;flex-direction:column;overflow:hidden;background:var(--lux-card);border:1px solid var(--lux-line);transition:transform .25s,border-color .25s}
body[data-page="home"] .lux-featured-card:hover{transform:translateY(-5px);border-color:var(--lux-gold)}
body[data-page="home"] .lux-featured-card .media{aspect-ratio:1/1;overflow:hidden}
body[data-page="home"] .lux-featured-card img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
body[data-page="home"] .lux-featured-card:hover img{transform:scale(1.045)}
body[data-page="home"] .lux-featured-card .content{padding:16px 18px 20px}
body[data-page="home"] .lux-featured-card .cat{display:block;color:var(--lux-gold);font:700 .68rem/1.2 "Montserrat",sans-serif;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
body[data-page="home"] .lux-featured-card h3{font-size:.98rem;line-height:1.35;margin:0}
body[data-page="home"] .lux-featured-more{display:flex;justify-content:center;margin-top:36px}
body[data-page="home"] .lux-resource-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:38px}
body[data-page="home"] .lux-resource-card{display:flex;flex-direction:column;overflow:hidden;transition:transform .25s,border-color .25s}
body[data-page="home"] .lux-resource-card:hover{transform:translateY(-5px);border-color:var(--lux-gold)}
body[data-page="home"] .lux-resource-card .media{aspect-ratio:16/10;overflow:hidden;margin:-1px -1px 0}
body[data-page="home"] .lux-resource-card img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
body[data-page="home"] .lux-resource-card:hover img{transform:scale(1.045)}
body[data-page="home"] .lux-resource-card .content{padding-top:22px}
body[data-page="home"] .lux-quote-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
body[data-page="home"] .lux-quote-copy h2{font-size:clamp(2rem,3.5vw,3.5rem);line-height:1.08;margin:14px 0 18px}
body[data-page="home"] .lux-quote-copy p:not(.lux-eyebrow),body[data-page="home"] .lux-quote-copy ul{color:var(--lux-muted)}
body[data-page="home"] .lux-quote-copy ul{margin-top:26px}
body[data-page="home"] .lux-quote-copy li{position:relative;padding:10px 0 10px 22px;border-top:1px solid rgba(0,0,0,.08)}
body[data-page="home"] .lux-quote-copy li::before{content:"";position:absolute;left:0;top:20px;width:6px;height:6px;background:var(--lux-gold)}

body[data-page="home"] .lux-glance-card,body[data-page="home"] .lux-material-card,body[data-page="home"] .lux-finish-card,body[data-page="home"] .lux-direct-card,body[data-page="home"] .lux-quality-card,body[data-page="home"] .lux-evidence-card,body[data-page="home"] .lux-resource-card{background:var(--lux-card);border:1px solid var(--lux-line);padding:26px}
body[data-page="home"] .lux-glance-card h3,body[data-page="home"] .lux-material-card h3,body[data-page="home"] .lux-finish-card h3,body[data-page="home"] .lux-direct-card h3,body[data-page="home"] .lux-quality-card h3,body[data-page="home"] .lux-evidence-card h3,body[data-page="home"] .lux-resource-card h3{margin-bottom:10px;color:var(--lux-text)}
body[data-page="home"] .lux-glance-card p,body[data-page="home"] .lux-material-card p,body[data-page="home"] .lux-finish-card p,body[data-page="home"] .lux-direct-card p,body[data-page="home"] .lux-quality-card p,body[data-page="home"] .lux-evidence-card p,body[data-page="home"] .lux-resource-card p{color:var(--lux-muted)}
body[data-page="home"] details.faq{background:var(--lux-card);border-color:var(--lux-line);border-radius:4px}
body[data-page="home"] details.faq summary{color:var(--lux-text)}
body[data-page="home"] details.faq summary::after{color:var(--lux-gold)}
body[data-page="home"] details.faq>p{padding:0 20px 18px;color:var(--lux-muted);font-size:.92rem;line-height:1.7}
body[data-page="home"] .lux-rfq{background:var(--lux-card);border:1px solid var(--lux-line);padding:clamp(24px,4vw,42px)}
body[data-page="home"] .lux-rfq label{color:var(--lux-text)}
body[data-page="home"] .lux-rfq input,body[data-page="home"] .lux-rfq select,body[data-page="home"] .lux-rfq textarea{background:#fff;border-color:var(--lux-line);border-radius:4px;color:var(--lux-text)}
body[data-page="home"] .lux-rfq input:focus,body[data-page="home"] .lux-rfq select:focus,body[data-page="home"] .lux-rfq textarea:focus{outline:3px solid var(--lux-gold-hi);border-color:var(--lux-gold)}
body[data-page="home"] .lux-rfq .form-note{color:var(--lux-muted)}
body[data-page="home"] .lux-rfq .form-note a{color:var(--lux-gold-hi)}
body[data-page="home"] .lux-rfq .form-status.success{color:#7FD6A3}
body[data-page="home"] .lux-rfq .form-status.error{color:#F87171}
body[data-page="home"] .lux-rfq .form-status.notice{color:var(--lux-gold-hi)}

body[data-page="home"] .home-footer{background:var(--g900);border-top:1px solid rgba(255,255,255,.12);color:#c2d9e6}
body[data-page="home"] .home-footer .logo,body[data-page="home"] .home-footer .foot-title{color:#fff}
body[data-page="home"] .home-footer a{color:#c2d9e6}
body[data-page="home"] .home-footer a:hover{color:var(--lux-gold-hi)}
body[data-page="home"] .home-footer .foot-contact b{color:#fff}
body[data-page="home"] .home-footer .foot-bottom{color:#8fb0c2;border-top-color:rgba(255,255,255,.12)}
body[data-page="home"] .quote-float{position:fixed;right:24px;bottom:28px;z-index:82;min-height:48px;display:flex;align-items:center;padding:0 22px;background:var(--lux-gold);color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:.04em;box-shadow:0 14px 38px rgba(0,0,0,.32)}
body[data-page="home"] .wa-float{left:24px;right:auto;bottom:28px}
body[data-page="home"] .toast{background:var(--lux-card);color:var(--lux-text);border:1px solid var(--lux-line)}
body[data-page="home"].reveal-ready .reveal.is-pending{opacity:0;transform:translateY(22px)}
body[data-page="home"].reveal-ready .reveal.is-visible{opacity:1;transform:none;transition:opacity .55s ease,transform .55s ease}
body[data-page="home"] .image-missing{background:radial-gradient(circle at 35% 25%,rgba(28,118,176,.16),transparent 38%),linear-gradient(135deg,#f6f2e7,#ffffff)}
body[data-page="home"] .image-missing img{visibility:hidden}

@media(max-width:1100px){
  body[data-page="home"] .lux-glance-grid,body[data-page="home"] .lux-material-grid,body[data-page="home"] .lux-finish-grid,body[data-page="home"] .lux-case-grid,body[data-page="home"] .lux-quality-grid{grid-template-columns:repeat(2,1fr)}
  body[data-page="home"] .lux-process-grid{grid-template-columns:repeat(2,1fr)}
  body[data-page="home"] .lux-resource-grid{grid-template-columns:repeat(2,1fr)}
  body[data-page="home"] .lux-featured-grid{grid-template-columns:repeat(2,1fr)}
  /* the 250-270px fixed-width header CTA doesn't fit next to 6 nav links
     below ~1100px -- shrink it back to a compact auto-width button rather
     than letting it force horizontal overflow (it still hides below 940px) */
  body[data-page="home"] .home-header .nav-quote{min-width:0;width:auto;height:48px;padding:0 18px;font-size:.82rem}
  body[data-page="home"] .home-header .nav-wrap{gap:14px}
  .nav-links>.nav-item>.nav-top{padding:8px 9px;font-size:.85rem}
}
@media(max-width:940px){
  body[data-page="home"] .home-header .nav-quote{display:none}
  body[data-page="home"] .home-header .nav-links .mobile-quote{display:flex}
  body[data-page="home"] .home-header .nav-links{top:76px;background:#f6f2e7;border-color:var(--lux-line);box-shadow:0 24px 50px rgba(0,0,0,.18)}
  body[data-page="home"] .home-header .hamburger{min-width:44px;min-height:44px}
  body[data-page="home"] .home-header .hamburger span{background:var(--lux-gold)}
  body[data-page="home"] .lux-estimator-shell,body[data-page="home"] .lux-faq-layout,body[data-page="home"] .lux-quote-grid{grid-template-columns:1fr}
  body[data-page="home"] .lux-factory-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-page="home"] .lux-industry-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:230px}
  body[data-page="home"] .lux-industry-card,body[data-page="home"] .lux-industry-card:nth-child(1),body[data-page="home"] .lux-industry-card:nth-child(4){grid-column:span 1;grid-row:span 1}
}
@media(max-width:720px){
  body[data-page="home"]{padding-bottom:52px}
  body[data-page="home"] .lux-container{width:calc(100% - 40px)}
  body[data-page="home"] .lux-section{padding:68px 0}
  /* Portrait viewport: stop using the photo as a full-bleed backdrop. A 1.6
     landscape shot behind a ~0.47 phone screen gets `cover`-cropped to a
     narrow vertical strip -- measured, only 27-33% of the image width
     survived, and that strip happened to land on the black tote, so the hero
     read as a black rectangle. The old fix was a 42%->90%->solid scrim, which
     then buried what little was left (mean luminance 0.21 -> 0.09, non-black
     pixels 70% -> 25%). No crop or scrim tuning can recover a product group
     from a 30%-wide slice, so the image stops being a backdrop here and
     becomes a band below the copy at its own 1.6 ratio: nothing is cropped,
     every product is visible, and the text sits on flat navy with no scrim. */
  body[data-page="home"] .lux-hero{min-height:auto;display:flex;flex-direction:column;background:#0a0a0f}
  /* 2026-08-16：改为「文案覆盖在图片上」，用专出的竖版图 hero-tone-portrait.webp
     （887×1774，1:2）。**不要换回横图**——1.78 的横图铺竖屏 cover 后只剩约 39%
     宽度，实测产品组被裁得认不出（证据截图 shots/mob/hero-overlay-mobile.png）。

     裁切几何（已实测五档机型，文案块高 771~811px）：
       375px 宽 → 容器比 0.465，图 0.50 相对更宽 → 只从左右各裁 3.5%，产品区零裁切
       430px 宽 → 容器比 0.554，图相对更高 → 从**顶部**裁 10.8%，切掉的是留空氛围区
     所以锚点必须是 `center bottom`：裁切只发生在顶部，产品组永远完整。
     换图前先看 IMAGE-SPEC.md C-2-b 的安全区定义。 */
  body[data-page="home"] .lux-hero{min-height:auto;position:relative}
  body[data-page="home"] .lux-hero-media{position:absolute;inset:0;z-index:0;
    width:100%;aspect-ratio:auto;background-color:#0a0a0f;
    background-repeat:no-repeat;background-position:center bottom;background-size:cover;
    background-image:url("../img/hero-tone-portrait.webp");
    background-image:image-set(url("../img/hero-tone-portrait-640.webp") 1x,
                               url("../img/hero-tone-portrait.webp") 2x)}
  /* 遮罩比上一版轻得多（旧值 92%/86%）：这张图本身上半部就是深色雾面，
     再压 90% 会把仅有的层次埋掉。下半部产品区只压到 58%，保证白字可读
     的同时产品还看得见。 */
  body[data-page="home"] .lux-hero-shade{display:block;position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg,rgba(8,11,20,.72) 0%,rgba(8,11,20,.62) 38%,
      rgba(8,11,20,.52) 62%,rgba(8,11,20,.58) 100%)}
  body[data-page="home"] .lux-hero-content{position:relative;z-index:2;padding:44px 0 56px}
  /* 四个 chip 正好落在产品区（浅色收纳袋）上，桌面那档 .52 底色在这里不够，
     提到 .74 并加一点模糊，保证白字压在浅色产品上仍可读。 */
  body[data-page="home"] .lux-chips span{background:rgba(8,11,20,.74);
    backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
  body[data-page="home"] .lux-hero-content h1{font-size:clamp(2.1rem,9vw,3rem);max-width:12ch}
  body[data-page="home"] .lux-actions{display:grid}
  body[data-page="home"] .lux-actions .lux-btn{width:100%}
  body[data-page="home"] .lux-stats-grid{grid-template-columns:repeat(2,1fr)}
  body[data-page="home"] .lux-stat:nth-child(2){border-right:0}
  body[data-page="home"] .lux-glance-grid,body[data-page="home"] .lux-material-grid,body[data-page="home"] .lux-finish-grid,body[data-page="home"] .lux-case-grid,body[data-page="home"] .lux-quality-grid,body[data-page="home"] .lux-process-grid,body[data-page="home"] .lux-evidence-grid,body[data-page="home"] .lux-resource-grid{grid-template-columns:1fr}
  body[data-page="home"] .lux-featured-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  /* keep the four shots 2x2 on phones -- stacking them full width made
     the section four screens tall */
  body[data-page="home"] .lux-factory-strip{gap:8px}
  body[data-page="home"] .lux-factory-cta{align-items:flex-start}
  body[data-page="home"] .lux-factory-video{display:none}
  body[data-page="home"] .lux-direct-grid{grid-template-columns:1fr}
  body[data-page="home"] .lux-industry-grid{grid-template-columns:1fr;grid-auto-rows:260px}
  body[data-page="home"] .quote-float{display:none}
  body[data-page="home"] .wa-float{display:none}
  body[data-page="home"] .mobbar{background:#f6f2e7;border-color:var(--lux-line)}
  body[data-page="home"] .mobbar .a1{color:var(--lux-gold)}
  body[data-page="home"] .mobbar .a2{background:var(--lux-gold);color:#fff}
}
@media(prefers-reduced-motion:reduce){
  body[data-page="home"].reveal-ready .reveal.is-pending{opacity:1;transform:none}
}

/* ---------- generated catalog browsing ---------- */
.catalog-site-header .nav-wrap{height:72px;min-height:72px;flex-wrap:nowrap;padding:0}
.catalog-site-header .catalog-desktop-nav{display:flex;margin-left:auto}
.catalog-site-header .catalog-nav-menu{display:none}
.catalog-site-header .catalog-nav-menu>summary{display:none}
.catalog-site-header .static-nav{align-items:center;gap:2px}
.catalog-site-header .static-nav a{display:inline-flex;min-height:44px;align-items:center;padding:8px 10px;border-radius:8px;color:#344054;font-size:.93rem;font-weight:500;white-space:nowrap}
.catalog-site-header .static-nav a:hover{background:#eaf4fa;color:var(--g700)}
.catalog-site-header .catalog-desktop-nav{display:flex}
.catalog-site-header .nav-drop a{min-height:0;display:flex}
/* group headings shown in the mobile/flat nav only */
.static-nav-group{
  margin:10px 0 2px;padding:0 10px;
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.catalog-desktop-nav .static-nav-group{display:none}
.catalog-site-header .catalog-header-quote{flex:0 0 auto}
.catalog-page .catalog-section .container{min-width:0}
.catalog-page .catalog-filter-panel{margin:0 0 20px}
.catalog-page .catalog-filter-panel>summary{display:inline-flex;min-height:48px;align-items:center;gap:10px;padding:10px 16px;border:1px solid #b8c9bd;border-radius:10px;background:#fff;color:var(--g800);font-size:.92rem;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(16,24,40,.05)}
.catalog-page .catalog-filter-panel>summary::-webkit-details-marker{display:none}
.catalog-page .catalog-filter-panel>summary::marker{content:""}
.catalog-page .catalog-filter-panel>summary::after{content:"+";display:grid;width:22px;height:22px;place-items:center;border-radius:50%;background:#eaf7ee;color:var(--g800);font-size:1rem;line-height:1}
.catalog-page .catalog-filter-panel[open]>summary::after{content:"−"}
.catalog-page .catalog-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:12px;padding:18px;max-width:100%;border:1px solid var(--line);border-radius:12px;background:#f8faf8}
.catalog-page .catalog-search{grid-column:1/-1;min-width:0}
.catalog-page .catalog-search label{display:block;margin-bottom:7px;color:#344054;font-size:.86rem;font-weight:700}
.catalog-page .catalog-search input{width:100%;min-height:46px;padding:10px 13px;border:1px solid #b8c2b9;border-radius:9px;background:#fff;color:var(--ink);font:inherit}
.catalog-page .catalog-controls fieldset{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));align-content:start;gap:2px 8px;min-width:0;margin:0;padding:8px 10px 10px;border:1px solid var(--line);border-radius:10px;background:#fff}
.catalog-page .catalog-controls fieldset[data-filter-group="closure"]{grid-column:1/-1}
.catalog-page .catalog-controls legend{padding:0 4px;font-size:.84rem;font-weight:700;color:#344054}
.catalog-page .catalog-controls fieldset label{display:flex;min-width:0;align-items:center;gap:8px;min-height:44px;margin:0;padding:4px 6px;border-radius:7px;color:#25354a;font-size:.86rem;line-height:1.3;cursor:pointer}
.catalog-page .catalog-controls fieldset label:hover{background:#f0f7f2}
.catalog-page .catalog-controls input[type="checkbox"]{flex:0 0 18px;width:18px;height:18px;margin:0;accent-color:var(--g700)}
.catalog-page .catalog-clear{min-height:44px;padding:10px 18px;border:2px solid var(--g700);border-radius:10px;background:#fff;color:var(--g800);font:inherit;font-size:.9rem;font-weight:700;cursor:pointer}
.catalog-page .catalog-clear:disabled{cursor:default;opacity:.52}
.catalog-page .resultcount[data-visible-count="1"]{text-align:center}
.catalog-page .catalog-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.catalog-page .catalog-grid[data-visible-count="1"]{grid-template-columns:minmax(280px,360px);justify-content:center}
.catalog-page .catalog-card{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:0 6px 18px rgba(16,24,40,.06)}
.catalog-page .catalog-card-link{display:flex;min-height:100%;flex-direction:column;padding-bottom:18px;color:var(--ink)}
.catalog-page .catalog-card img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#f1ede0}
.catalog-page .catalog-card .tag,.catalog-page .catalog-card h2,.catalog-page .catalog-card p,.catalog-page .catalog-card .textlink{margin-left:18px;margin-right:18px}
.catalog-page .catalog-card .tag{align-self:flex-start;margin-top:18px}
.catalog-page .catalog-card h2{margin-top:10px;font-size:1.05rem;line-height:1.35}
.catalog-page .catalog-card p{margin-top:8px;color:var(--muted);font-size:.86rem}
.catalog-page .catalog-card .textlink{margin-top:auto;padding-top:14px}
.catalog-page .catalog-pagination{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:30px}
.catalog-page .catalog-pagination:empty{display:none}
.catalog-page .catalog-pagination a{display:inline-flex;min-width:44px;min-height:44px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;background:#fff;font-weight:700;color:var(--g800)}
.catalog-page .catalog-pagination a[aria-current="page"]{border-color:var(--g700);background:var(--g700);color:#fff}
.catalog-page .catalog-empty{grid-column:1/-1;padding:48px 24px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;text-align:center}
.catalog-page .catalog-empty p{margin:10px 0 20px;color:var(--muted)}
.catalog-page .catalog-empty .btn-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.catalog-page .catalog-empty .btn{min-height:44px}
.catalog-page :focus-visible{outline:3px solid #075a2c;outline-offset:3px}

body[data-page="catalog-product"] .catalog-product-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:start;width:min(1180px,calc(100% - 40px));margin:34px auto 70px}
body[data-page="catalog-product"] .catalog-product-copy{min-width:0}
body[data-page="catalog-product"] .catalog-product-copy h1{margin:12px 0 8px;font-size:clamp(1.7rem,3vw,2.4rem)}
body[data-page="catalog-product"] .catalog-product-copy .lead{margin:18px 0;color:var(--muted)}
body[data-page="catalog-product"] .catalog-product-copy .btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
body[data-page="catalog-product"] .catalog-product-copy .btn{min-height:44px}
body[data-page="catalog-product"] .product-gallery{display:grid;grid-template-columns:repeat(4,minmax(44px,1fr));gap:10px;min-width:0;max-width:100%}
body[data-page="catalog-product"] .gallery-item{display:block;min-width:44px;min-height:44px;overflow:hidden;border:2px solid transparent;border-radius:10px;background:#f1ede0;aspect-ratio:1}
body[data-page="catalog-product"] .gallery-item:first-child{grid-column:1/-1}
body[data-page="catalog-product"] .gallery-item[aria-current="true"]{border-color:var(--g700)}
body[data-page="catalog-product"] .gallery-item picture{display:block;width:100%;height:100%}
body[data-page="catalog-product"] .gallery-item img{display:block;width:100%;height:100%;max-width:100%;object-fit:cover;aspect-ratio:1}
body[data-page="catalog-product"] .related-products{padding:0 0 72px}
body[data-page="catalog-product"] .breadcrumb{color:#536273}
body[data-page="catalog-product"] .breadcrumb a{color:#075a2c;text-decoration:underline;text-underline-offset:2px}
body[data-page="catalog-product"] .breadcrumb a:hover{color:#063f22}
body[data-page="catalog-product"] :focus-visible{outline:3px solid #075a2c;outline-offset:3px}

.variant-selector{margin:20px 0;padding-top:16px;border-top:1px solid var(--line)}
.variant-selector-title{font-weight:600;font-size:.88rem;color:var(--g800);margin:0 0 10px}
.variant-swatch-row{display:flex;flex-wrap:wrap;gap:8px}
.variant-swatch{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 8px;border:1.5px solid var(--line);border-radius:999px;background:#fff;cursor:pointer;font-size:.82rem;font-weight:600;color:var(--g800);transition:border-color .15s,background .15s}
.variant-swatch:hover{border-color:var(--g600)}
.variant-swatch.is-active{border-color:var(--g700);background:#f0f7f2}
.variant-swatch-dot{width:18px;height:18px;border-radius:50%;background:var(--swatch-color,#ccc);border:1px solid rgba(0,0,0,.15);flex-shrink:0}
.variant-selector-note{margin-top:10px;font-size:.76rem;color:var(--muted);line-height:1.6}
.rfq-section{padding:56px 0}
.rfq-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px}
.rfq-item h3{font-size:.98rem;margin:0 0 8px}
.rfq-item p{color:var(--muted);font-size:.88rem;line-height:1.6;margin:0}
.faq-section{padding:0 0 56px}
.faq-section h2{font-size:clamp(1.4rem,2.6vw,1.8rem);margin:0 0 20px}

/* ---------- factory tour: real-site photos + published site scale ---------- */
.fac-shot{margin:0;display:flex;flex-direction:column;gap:10px}
/* object-position:left top is load-bearing -- every factory shot carries the
   BAISHUN PACK wordmark burnt into the TOP-LEFT corner, and this fixed-height
   `cover` cell crops in whichever axis the photo overflows:
     desktop (~1.36 cell): the 1.78 photos overflow horizontally -> centred
       crop trims ~12% off each side and cuts the wordmark to "SHUN PACK";
     mobile  (~1.55 cell): the 1.33 photos overflow vertically instead ->
       centred crop trims ~7% off the top and slices the wordmark in half.
   Anchoring the top-left corner pins the wordmark in both axes and pushes
   every crop to the right/bottom. Do not relax this to `center`. */
.fac-shot img{width:100%;height:280px;object-fit:cover;object-position:left top;border-radius:var(--radius);border:1px solid var(--line);background:var(--alt)}
.fac-shot figcaption{font-size:.85rem;color:var(--muted);line-height:1.6}
.scale-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px}
.scale-card strong{display:block;color:var(--g700);font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:800;line-height:1.1}
.scale-card span{display:block;margin:6px 0 10px;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.scale-card p{margin:0;font-size:.88rem;color:var(--muted);line-height:1.65}
.fac-note{margin:22px 0 0;font-size:.84rem;color:var(--muted);line-height:1.7;max-width:80ch}
/* "The address is real" trio: the building shot is the only portrait asset on
   the site (896x1200) and the flat 280px-tall grid cell cropped it to a strip.
   Giving it a full-height feature column lets it run tall next to the two
   landscape shots stacked beside it. */
.fac-identity{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:18px;align-items:stretch}
.fac-identity>.fac-feature{height:100%}
.fac-identity>.fac-feature img{flex:1;height:auto;min-height:340px}
.fac-identity-col{display:grid;gap:18px;align-content:start}
/* Floor gallery grouped by production stage instead of one flat 14-up wall. */
.fac-stage+.fac-stage{margin-top:40px}
.fac-stage-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;
  margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.fac-stage-head span{color:var(--g700);font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.fac-stage-head h3{margin:0;font-size:1.12rem}
.fac-stage-head p{flex:1 1 100%;margin:0;color:var(--muted);font-size:.88rem;line-height:1.6}
@media(max-width:640px){
  .fac-shot img{height:220px}
  .fac-identity{grid-template-columns:1fr}
  .fac-identity>.fac-feature img{min-height:0;height:300px;flex:none}
}

@media(min-width:900px) and (max-width:1179px){
  .catalog-page .catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:721px) and (max-width:899px){
  .catalog-page .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-page="catalog-product"] .catalog-product-layout{grid-template-columns:1fr}
}
/* The catalog header nav grew from 7 plain links to 7 items with three
   dropdowns (~915px wide). It has to collapse to the hamburger well before
   720px or it overflows the viewport horizontally. */
@media(max-width:1000px){
  .catalog-site-header{position:relative}
  .catalog-site-header .nav-wrap{height:72px;min-height:72px;gap:12px}
  .catalog-site-header .logo{font-size:1.05rem}
  .catalog-site-header .catalog-desktop-nav{display:none}
  .catalog-site-header .catalog-nav-menu{display:block;margin-left:auto}
  .catalog-site-header .catalog-nav-menu>summary{display:flex;min-width:44px;min-height:44px;align-items:center;justify-content:center;padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--g800);font-size:.88rem;font-weight:700;cursor:pointer}
  .catalog-site-header .catalog-nav-menu>summary::-webkit-details-marker{display:none}
  .catalog-site-header .catalog-nav-menu>summary::marker{content:""}
  .catalog-site-header .catalog-nav-menu:not([open])>.static-nav{display:none}
  .catalog-site-header .catalog-nav-menu[open]>.static-nav{position:absolute;z-index:80;top:71px;left:0;right:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:10px 4%;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;box-shadow:0 12px 24px rgba(16,24,40,.12);max-height:calc(100vh - 71px);overflow-y:auto;overscroll-behavior:contain}
  /* long labels ("Retail & Promotional Bags") must wrap here, otherwise
     nowrap blows the 1fr column out past the viewport */
  .catalog-site-header .catalog-nav-menu[open]>.static-nav a{white-space:normal;text-align:center;line-height:1.3}
  .catalog-site-header .catalog-nav-menu[open]>.static-nav .static-nav-group{grid-column:1/-1;text-align:left}
  .catalog-site-header .static-nav a{justify-content:center;min-height:44px;padding:9px 8px}
  .catalog-site-header .catalog-header-quote{display:none}
  .catalog-page{padding-bottom:64px;overflow-x:hidden}
  .catalog-page .catalog-controls{display:grid;grid-template-columns:minmax(0,1fr)}
  .catalog-page .catalog-filter-panel>summary{width:100%;justify-content:space-between}
  .catalog-page .catalog-controls fieldset,.catalog-page .catalog-search{grid-column:1;width:100%}
  .catalog-page .catalog-controls fieldset{grid-template-columns:1fr}
  .catalog-page .catalog-grid{grid-template-columns:1fr}
  body[data-page="catalog-product"]{padding-bottom:64px;overflow-x:hidden}
  body[data-page="catalog-product"] .catalog-product-layout{grid-template-columns:1fr;width:min(100% - 32px,1180px);gap:28px;margin-top:24px}
  body[data-page="catalog-product"] .product-gallery{grid-template-columns:repeat(3,minmax(44px,1fr))}
}
@media(prefers-reduced-motion:reduce){
  .catalog-page .catalog-card,.catalog-page .catalog-card img,.catalog-page .catalog-clear,
  body[data-page="catalog-product"] .gallery-item,body[data-page="catalog-product"] .gallery-item img{transition:none!important;animation:none!important}
}

/* ---------- credential cards (certifications page) ---------- */
.cred-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
.cred-card h3{font-size:1.05rem;margin-bottom:12px;color:var(--g800)}
.cred-card p{font-size:.9rem;line-height:1.65;margin-bottom:10px;color:#344054}
.cred-card .cred-what{color:#344054}
.cred-card .cred-limit{color:var(--muted);padding-top:10px;border-top:1px dashed var(--line)}
.cred-card .cred-ask{color:var(--g700);margin-bottom:0}
.cred-card strong{color:var(--g800)}

/* ---------- listing card: colourway depth ---------- */
/* A merged style can cover dozens of SKUs; without this the category page
   reads as though the range is tiny. */
.catalog-card-media{position:relative;display:block}
.catalog-card-variants{
  position:absolute;right:8px;bottom:8px;
  background:rgba(11,47,70,.88);color:#fff;
  font-size:.7rem;font-weight:700;letter-spacing:.02em;
  padding:3px 9px;border-radius:999px;backdrop-filter:blur(3px);
}
.cc-swatch-row{display:flex;align-items:center;gap:4px;margin:2px 0 10px;flex-wrap:wrap}
.cc-swatch{
  width:14px;height:14px;border-radius:3px;flex-shrink:0;
  background-color:var(--swatch-color,#ccc);
  border:1px solid rgba(0,0,0,.16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
}
.cc-swatch-more{font-size:.72rem;color:var(--muted);font-weight:600;margin-left:2px}

/* ---------- contextual "where to go next" links on content pages ---------- */
.next-steps{padding-top:0;padding-bottom:48px}
.next-steps .prose{max-width:760px;margin-inline:auto}
.next-steps h2{font-size:1.25rem;margin-bottom:14px}
.next-steps-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.next-steps-list li{padding:14px 0;border-bottom:1px solid var(--line);font-size:.95rem;line-height:1.6;color:#344054}
.next-steps-list a{color:var(--g700);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.next-steps-list a:hover{color:var(--g800)}

/* ---------- industries hub: quick-reference comparison ---------- */
.ind-compare{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.ind-compare-row{display:grid;grid-template-columns:220px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.ind-compare-row a{font-weight:700;color:var(--g700)}
.ind-compare-row a:hover{text-decoration:underline}
.ind-compare-concern{font-size:.92rem;color:#344054;line-height:1.6}
.ind-compare-concern strong{color:var(--g800)}
@media(max-width:720px){.ind-compare-row{grid-template-columns:1fr}}

/* ============================================================
   移动端专项（2026-08-16）
   主力断点沿用全站既有的 720px，不新增断点。
   ============================================================ */
@media(max-width:720px){
  /* iOS Safari 在 input 聚焦时，只要 computed font-size < 16px 就会自动放大整页，
     用户必须手动捏合缩回，且缩回后不恢复原比例。基础值 .93rem = 14.9px 正好踩线，
     询盘表单（contact 的 10 个字段、首页 estimator 与 RFQ）全部中招。
     这里只在触屏断点提到 16px，桌面视觉不变。 */
  input,select,textarea{font-size:16px}
  input[type=file]{font-size:15px}

  /* footer 链接实测 33px 高（.9rem 行高 + 5px 上下内边距），相邻两条间距不足，
     指尖误触率高。提到 44px（Apple HIG / WCAG 2.5.5 建议值）。 */
  .site-footer a{padding:11px 0}
  .foot-contact li{padding:4px 0}
}

/* ---------- contact 表单：从产品页带过来的产品回显卡 ---------- */
/* 买家从产品页点 Request a Quote 跳到表单后，仍能看见自己问的是哪一款。
   由 main.js 在 ?img= 存在时注入（contact.html 不加载 catalog 数据，
   无法按 SKU 反查图片，路径必须由产品页带过来）。 */
.inq-product-card{display:flex;align-items:center;gap:14px;margin-bottom:22px;padding:12px;
  border:1px solid var(--line);border-radius:12px;background:var(--alt)}
.inq-product-card img{width:72px;height:72px;flex:none;object-fit:cover;
  border-radius:9px;border:1px solid var(--line);background:#fff}
.inq-product-meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.inq-product-kicker{font-size:.72rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.inq-product-meta strong{font-size:.98rem;line-height:1.35;color:var(--ink)}
.inq-product-sku{font-size:.8rem;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
@media(max-width:720px){
  .inq-product-card{gap:11px;padding:10px}
  .inq-product-card img{width:60px;height:60px}
}