/* ============================================================
   products-v2.css —— products.html 复用首页组件（2026-10-29 v2）
   做法：把 new/index.html 的 header/footer/.sol 卡片 CSS 与变量
   原样搬来（同一套 DOM + 同一套 CSS），不再另起平行覆盖。
   变量对齐首页（--canvas/--world/--dust/--gut/--sec-v/--content-w…）。
   ============================================================ */

/* ---- 首页变量补齐（theme-v2 没有这些名）---- */
:root{
  --canvas:#EEF1F2; --canvas-2:#E2E6E8;
  --world:#0D1114;  --world-2:#151A1E;
  --dust:#5A6570;
  --line-l:rgba(238,241,242,.16);
  --gut:clamp(20px,3.6vw,64px);
  --sec-v:clamp(72px,7.5vw,96px);
  --content-w:1320px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --r-ctrl:8px;
}

/* ---- header（首页原样；products 页常驻 solid 深炭，白字可读）---- */
header{ position: sticky; top:0; z-index:80; display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:14px var(--gut); color:#fff; background:rgba(13,17,20,.86); backdrop-filter:blur(16px) saturate(1.3); border-bottom:1px solid var(--line-l); }
.brand img{height:24px;width:auto;display:block}
.foot-logo{height:28px;width:auto;display:block;margin-bottom:12px}height:30px;width:auto;display:block}
.brand{ display:flex; align-items:baseline; gap:8px; color:#fff; text-decoration:none; }
.brand b{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:24px; letter-spacing:-.02em; }
.brand b em{ font-style:normal; color:var(--accent); }
nav{ display:flex; gap:30px; }
nav a{ font-size:13px; letter-spacing:.02em; position:relative; padding-block:4px; color:#fff; text-decoration:none; opacity:.92; }
nav a::after{ content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0; background:var(--accent); transition:width .25s var(--ease); }
nav a:hover::after{ width:100%; }
nav a:hover{ opacity:1; }
nav a.active{ color:var(--accent); opacity:1; }
.tools{ display:flex; align-items:center; gap:14px; }
.btn{ display:inline-flex; align-items:center; gap:10px; border-radius:999px; padding:12px 22px; font-size:14px; font-weight:600; letter-spacing:.02em; text-decoration:none; transition:transform .25s var(--ease), background .25s, color .25s, border-color .25s; border:1px solid transparent; cursor:pointer; }
.btn:hover{ transform:translateY(-2px); }
.btn-sm{ padding:9px 18px; font-size:13px; }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:#fff; color:var(--ink); }
.btn-ghost{ border:1px solid rgba(255,255,255,.5); color:#fff; }
.btn-ghost:hover{ background:#fff; color:var(--ink); }

/* 语言切换 */
.lang-switch{ position:relative; }
.lang-btn{ display:inline-flex; align-items:center; gap:6px; font-size:12px; letter-spacing:.06em; color:#fff; opacity:.9; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.25); background:transparent; cursor:pointer; }
.lang-menu{ position:absolute; top:calc(100% + 8px); right:0; background:var(--world); border:1px solid var(--line-l); border-radius:12px; padding:6px; display:none; min-width:120px; z-index:99; }
.lang-switch.open .lang-menu{ display:flex; flex-direction:column; }
.lang-menu button{ text-align:left; font-size:13px; color:#fff; padding:8px 10px; border-radius:8px; background:transparent; border:0; cursor:pointer; }
.lang-menu button:hover{ background:var(--world-2); color:var(--accent); }
.lang-menu button.active{ color:var(--accent); }

/* ---- hero：浅灰底 + 首页同款字号/字距/橙色 kicker ---- */
.page-hero{ background:var(--canvas); padding: clamp(48px,6vw,80px) 0 clamp(36px,4vw,52px); }
.page-hero::before{ display:none; }
.page-hero .container{ position:relative; max-width:var(--content-w); padding-inline:var(--gut); }
.crumbs{ display:flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--dust); }
.crumbs a{ color:var(--dust); text-decoration:none; }
.crumbs a:hover{ color:var(--accent); }
.crumbs .sep{ opacity:.5; }
.crumbs .cur{ color:var(--accent); font-weight:600; }
.page-hero h1{ color:var(--ink); font-family:var(--font-head); font-size: clamp(2.2rem,4.6vw,3.4rem); font-weight:700; letter-spacing:-.03em; line-height:1.05; margin:16px 0 16px; }
.page-hero p{ color:var(--ink-2); max-width:62ch; font-size:1.02rem; line-height:1.7; }

/* ---- filter / search ---- */
.filter-bar{ padding:6px 0 4px; }
.filter-pill{ border:1px solid var(--line); background:#fff; border-radius:999px; padding:8px 16px; font-size:.88rem; font-weight:500; color:var(--ink-2); cursor:pointer; transition:background .2s,color .2s,border-color .2s; }
.filter-pill:hover{ border-color:var(--accent); color:var(--accent); }
.filter-pill.active{ background:var(--accent); color:#fff; border-color:var(--accent); }
.search-box input{ border-radius:999px; background:#fff; border:1px solid var(--line); padding:11px 16px 11px 40px; }

/* ---- 产品卡：首页 .sol 磁贴同款（场景图铺满 + 底部渐变 + 型号/名称压图 + 橙色询价）---- */
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media(max-width:960px){ .product-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .product-grid{ grid-template-columns:1fr; } }
.product-sol{ position:relative; isolation:isolate; border-radius:var(--r-card); overflow:hidden; background:var(--world); color:#fff; min-height:340px; display:flex; flex-direction:column; justify-content:flex-end; padding:22px; text-decoration:none; }
.product-sol img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .5s var(--ease); }
.product-sol::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(13,17,20,.10) 40%,rgba(13,17,20,.92) 100%); }
.product-sol:hover img{ transform:scale(1.04); }
.product-sol .mono{ font-family:"Space Grotesk","Noto Sans Arabic","Noto Sans Thai",monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:500; margin-bottom:10px; color:var(--accent); }
.product-sol h3{ font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:clamp(18px,2vw,26px); letter-spacing:-.01em; margin-bottom:6px; color:#fff; }
.product-sol p{ font-size:13.5px; color:rgba(255,255,255,.78); line-height:1.55; max-width:34ch; margin:0 0 14px; }
.product-sol .sol-cta{ display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-top:4px; font-size:13px; font-weight:600; color:#fff; background:var(--accent); border-radius:999px; padding:10px 18px; text-decoration:none; align-self:flex-start; }
.product-sol .sol-cta:hover{ background:#fff; color:var(--ink); }

/* ---- CTA band / footer（深炭）---- */
.cta-band{ background:var(--world); }
.cta-band h2{ font-family:var(--font-head); color:#fff; }
footer{ background:var(--world); color:rgba(255,255,255,.7); padding-block:var(--sec-v); }
.foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; }
footer h5{ font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
footer p, footer a{ font-size:13.5px; color:rgba(255,255,255,.6); line-height:1.7; text-decoration:none; }
footer a:hover{ color:var(--accent); }
.foot-brand b{ font-family:"Space Grotesk",sans-serif; font-size:22px; color:#fff; }
.foot-brand b em{ font-style:normal; color:var(--accent); }
.foot-brand p{ margin-top:12px; max-width:34ch; }
.foot-cols a{ display:block; }
.foot-bottom{ border-top:1px solid var(--line-l); padding-top:24px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12px; color:rgba(255,255,255,.5); }
.footer .wrap{ max-width:var(--content-w); margin-inline:auto; padding-inline:var(--gut); }
@media(max-width:860px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .foot-grid{ grid-template-columns:1fr; } }

/* 移动端：导航/CTA 收起（首页同款无汉堡，这里简单隐藏避免溢出） */
/* 移动端汉堡菜单（≤760px） */
.nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; padding:9px; background:none; border:0; cursor:pointer; }
.nav-toggle span{ display:block; height:2px; width:100%; background:#fff; border-radius:2px; transition:.3s ease; }
header.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
header.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
header.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media(max-width:760px){
  .nav-toggle{ display:flex; }
  nav{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; background:rgba(13,17,20,.97); backdrop-filter:blur(16px); padding:6px 0; border-bottom:1px solid var(--line-l); }
  header.nav-open nav{ display:flex; }
  nav a{ padding:14px var(--gut); font-size:15px; border-bottom:1px solid rgba(255,255,255,.07); }
  nav a::after{ display:none; }
  header .btn-sm{ display:none; }
}

/* ===== 页头 banner（2026-10-29 船东：products 页也要 banner，别只有白底文字）===== */
.page-hero{
  background:
    linear-gradient(180deg, rgba(13,17,20,.42) 0%, rgba(13,17,20,.82) 100%),
    url('../images/scenes/wp-c21-3150-scene-v2.webp') center 42%/cover no-repeat;
  color:#fff; padding: clamp(90px,10vw,150px) 0 clamp(48px,5vw,72px);
}
.page-hero .crumbs, .page-hero .crumbs a, .page-hero .crumbs .cur{ color:rgba(255,255,255,.78); }
.page-hero .crumbs .sep{ color:rgba(255,255,255,.5); }
.page-hero h1{ color:#fff; }
.page-hero p{ color:rgba(255,255,255,.85); }