/* ============================================================
   BookLove — site styles
   Rebuilt 1:1 from the BookLove website design document.
   Palette:  primary #2B58DE · ink #10131D · muted #6B7280
   Type 字体标准:  OPPO Sans = 中文 + 英文标题 + 数字（全站默认）· Manrope = 大块英文介绍 · Darker Grotesque = 仅 logo · Raleway = 次级
   ============================================================ */

/* 微官网面向中国市场：不引用 Google Fonts（fonts.googleapis.com 在大陆被墙，
   微信内置浏览器会卡首屏）。中文用自托管 OPPO Sans，拉丁字回退到系统字体。 */

/* OPPO Sans (中文) — self-hosted official woff2, free for commercial use */
@font-face { font-family: "OPPO Sans"; font-style: normal; font-weight: 300 450; font-display: swap; src: url("assets/fonts/OPPOSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "OPPO Sans"; font-style: normal; font-weight: 451 800; font-display: swap; src: url("assets/fonts/OPPOSans-Medium.woff2") format("woff2"); }

:root {
  /* 中性白色系：纯白背景 / 冷调浅灰分区 / 近黑墨色文字 / 蓝色强调。
     变量名 --blue 即蓝色强调色。 */
  --blue: #2b58de;        /* 强调色 = 蓝 */
  --blue-600: #2b58de;
  --blue-700: #2247c0;
  --blue-ink: #2b58de;
  --ink: #10131d;         /* 近黑墨色 */
  --ink-2: #20232e;
  --muted: #6b7280;       /* 中性灰 */
  --muted-2: #8a90a0;
  --line: #e6e8ee;
  --line-soft: #eef0f4;
  --bg: #ffffff;          /* 纯白 */
  --bg-2: #fbfbfc;
  --bg-band: #f4f5f7;     /* 冷调浅灰 */
  --bg-panel: #f2f3f6;
  --white: #fff;
  --espresso: #14161d;    /* 深色段背景（中性近黑） */
  --radius-lg: 26px;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow-card: 0 18px 40px -24px rgba(28, 39, 84, 0.22);
  --shadow-soft: 0 12px 30px -18px rgba(28, 39, 84, 0.18);
  --maxw: 1280px;
  --pad: clamp(20px, 5vw, 80px);
  --font-display: "OPPO Sans", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-body: "OPPO Sans", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.wide { max-width: 1440px; }

/* accent word inside a heading */
.accent { color: var(--blue); }
.muted { color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body); font-weight: 600; font-size: 16px;
  border-radius: 999px; padding: 15px 34px; cursor: pointer; border: 1.6px solid transparent;
  transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  line-height: 1; white-space: nowrap;
}
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 12px 26px -12px rgba(43, 88, 222, .55); }
.btn-primary:hover { background: var(--blue-700); transform: translateY(-1px); }
.btn-outline { background: transparent; border-color: var(--blue); color: var(--blue); }
.btn-outline:hover { background: rgba(43, 88, 222, .07); }
.btn-sm { padding: 11px 26px; font-size: 14px; }
.btn-block { display: flex; width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(251, 251, 252, .92);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header .header-inner {
  display: flex; align-items: center; column-gap: 22px;  /* 仅列间距；换行时不产生 row-gap，避免移动端 logo 下方空一截 */
  padding: 14px var(--pad);  /* 通栏：与首页通栏大图对齐，logo 贴左、导航贴右，仅留 --pad 边距 */
}
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); }
.brand-logo { width: 30px; height: 30px; color: var(--blue); flex: none; }
.brand-img { height: 34px; width: auto; display: block; }
.footer-brand .brand-img { height: clamp(28px, 3.6vw, 36px); }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-family: var(--font-display); font-weight: 500; font-size: 23px; letter-spacing: -.01em; }
.brand-tagline { font-size: 10px; color: var(--muted); letter-spacing: .14em; margin-top: 3px; text-transform: lowercase; }

/* 微信版头部已移除右侧购物袋/搜索/语言图标，导航靠右对齐，与左侧 logo 平衡，随窗口自适应留白 */
.site-nav { display: flex; gap: clamp(18px, 2.6vw, 42px); margin-left: auto; }
.site-nav a {
  font-size: 16px; color: var(--ink-2); font-weight: 500; padding: 6px 2px; position: relative;
}
.site-nav a:hover { color: var(--blue); }
.site-nav a[aria-current="page"] { color: var(--blue); }

/* 头部仅保留 品牌 + 导航 + 移动端汉堡（已移除语言切换 / 搜索 / 购物袋图标）*/
.nav-toggle { display: none; }

/* ---------- Footer ---------- */
.footer { padding: 0 var(--pad) 34px; }
.footer-inner {
  max-width: 1320px; margin: 0 auto; border-top: 1px solid var(--line);
  padding: clamp(24px, 4.5vw, 36px) 0 0; text-align: center;
}
.footer-brand { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: clamp(14px, 2.4vw, 20px); }
.footer-brand .brand-name { color: var(--blue); }
.footer-brand .brand-logo { color: var(--blue); }
.footer-nav { display: flex; justify-content: center; }
/* 链接始终一行、居中：字号/间距随宽度收放，窄屏自动缩小不换行 */
.footer-links { display: flex; flex-wrap: nowrap; justify-content: center; gap: clamp(8px, 2.4vw, 18px); white-space: nowrap; }
.footer-links a { font-weight: 600; color: var(--ink-2); font-size: clamp(10px, calc(1.3vw + 7px), 13px); white-space: nowrap; }
.footer-links a:hover { color: var(--blue); }
.footer-bottom { display: flex; justify-content: center; padding-top: clamp(12px, 2vw, 16px); }
.footer-bottom .copy { font-size: 11px; color: var(--muted); text-align: center; }
.footer-bottom .copy a { color: var(--muted); text-decoration: none; display: block; margin-top: 4px; }
.footer-bottom .credit { font-size: 13px; color: var(--blue); }
.footer-bottom .credit a { text-decoration: underline; }

/* ---------- Generic section heading w/ divider rules ---------- */
.rule-heading { border-top: 1px solid var(--line); }
.rule-heading h2 {
  text-align: center; font-size: clamp(20px, 2.4vw, 28px); font-weight: 300;
  padding: clamp(18px, 2.4vw, 32px) 16px; margin: 0; color: var(--ink);
}
.rule-heading h2 a { display: inline-flex; align-items: center; gap: .45em; transition: color .15s; }
.rule-heading h2 a::after { content: "→"; font-size: .62em; opacity: .45; transition: transform .15s, opacity .15s; }
.rule-heading h2 a:hover { color: var(--blue); }
.rule-heading h2 a:hover::after { transform: translateX(5px); opacity: 1; }
.rule-heading .app-section { padding-top: 0; }
.rule-heading .app-section h2 { font-size: clamp(20px, 2.4vw, 28px); }
.section { padding: clamp(56px, 7vw, 96px) 0; }
.section-band { background: var(--bg-band); }
.section-head { text-align: center; max-width: 760px; margin: 0 auto clamp(34px, 5vw, 58px); }
.section-head h2 { font-size: clamp(28px, 3.8vw, 42px); font-weight: 300; }
.section-head p { color: var(--muted); margin: 14px auto 0; }
.eyebrow { color: var(--blue); font-weight: 600; }

/* ---------- Breadcrumb + page hero ---------- */
.page-hero { text-align: center; padding: clamp(26px, 4vw, 48px) var(--pad) clamp(40px, 6vw, 70px); }
.page-hero.band { background: var(--bg-band); }
.page-hero h1 { font-size: clamp(34px, 5vw, 52px); font-weight: 300; }
.page-hero .lede { color: var(--blue); max-width: 760px; margin: 18px auto 0; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; }
/* 关于页：页头标题/副标题字号 + 更紧凑的间距与灰底（仅本页，手机/桌面统一） */
body[data-page="about"] .page-hero { padding: clamp(18px, 3vw, 34px) var(--pad) clamp(24px, 4.5vw, 48px); }
body[data-page="about"] .page-hero h1 { font-size: 28px; }
body[data-page="about"] .page-hero .lede { font-size: 14px; margin-top: 10px; }
/* 关于页：我们的故事 字号（仅本页） */
body[data-page="about"] .story h2 { font-size: 22px; }
body[data-page="about"] .story p { font-size: 13px; }
/* 关于页：「更多故事」按钮与正文的间距，与设计模块按钮保持一致（22px） */
body[data-page="about"] .story .btn { margin-top: 22px; }
/* 关于页：由我们设计 字号（仅本页） */
body[data-page="about"] .tech-text h2 { font-size: 22px; }
body[data-page="about"] .tech-text p { font-size: 13px; }
/* 关于页：由我们设计 灰底下边缘上收 30px（仅本页） */
body[data-page="about"] .section-band { padding-bottom: calc(clamp(56px, 7vw, 96px) - 30px); }
/* 关于页：何处寻见我们 主/副标题字号，与我们的故事一致（仅本页） */
body[data-page="about"] .section-head h2 { font-size: 22px; }
body[data-page="about"] .section-head p { font-size: 13px; }
/* 关于页：展厅卡片 城市名/国家+地址 字号（仅本页，覆盖手机端的 18/13.5px） */
body[data-page="about"] .store-card h3 { font-size: 15px; }
body[data-page="about"] .store-card .store-body p { font-size: 11px; }

/* ===== 客户服务页：字号对齐关于页的层级（仅本页，手机/桌面统一） ===== */
/* 页头 */
body[data-page="care"] .page-hero h1 { font-size: 28px; }
body[data-page="care"] .page-hero .lede { font-size: 14px; }
/* 区块主标题（技术服务 / 维修与质保 / 常见问题） */
body[data-page="care"] .tech-service h2,
body[data-page="care"] .warranty h2,
body[data-page="care"] .section-head h2 { font-size: 22px; }
/* 小标题：服务标签、面板小标题、FAQ 问句 */
body[data-page="care"] .ts-tab,
body[data-page="care"] .ts-panel h3,
body[data-page="care"] .faq-q { font-size: 15px; }
/* 引导文字 + 正文段落 */
body[data-page="care"] .tech-service .intro,
body[data-page="care"] .warranty .intro,
body[data-page="care"] .ts-panel p,
body[data-page="care"] .faq-a p { font-size: 13px; }

/* ===== 我们的技术 + 人体工学页（共用 data-page="technologies"）：字号对齐关于页层级 ===== */
body[data-page="technologies"] .page-hero h1 { font-size: 28px; }
body[data-page="technologies"] .page-hero .lede { font-size: 14px; }
body[data-page="technologies"] .tech-text h2 { font-size: 22px; }
body[data-page="technologies"] .tech-text p { font-size: 13px; }
/* 人体工学页专有：区块标题/副标题 + 四点原则卡片 */
body[data-page="technologies"] .section-head h2 { font-size: 22px; }
body[data-page="technologies"] .section-head p { font-size: 13px; }
body[data-page="technologies"] .principle h3 { font-size: 15px; }
body[data-page="technologies"] .principle p { font-size: 13px; }
/* 妙控拨片页专有：与桌控 App 模块标题/正文 */
body[data-page="technologies"] .app-section h2 { font-size: 22px; }
body[data-page="technologies"] .app-section p { font-size: 13px; }

/* ===== 联系我们页：字号对齐客户服务（care）字体标准 ===== */
body[data-page="contact"] h1 { font-size: 28px; }
/* 妙控拨片页（body.dpg）：如何使用 6 张卡片，桌面端 3 列（3×2）；平板/手机用 2 列（不再单列） */
@media (min-width: 1025px) { body.dpg .principles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { body.dpg .principles { grid-template-columns: repeat(2, 1fr); } }
/* 妙控拨片页：如何优雅使用 卡片正文再调小一点 */
body.dpg .principle p { font-size: 12px; }
/* 妙控拨片页：「一枚拨片」配图收紧白边（裁成 3:2，去掉上下大片留白；拨片居中不会被裁到） */
body.dpg .tech-media img[src*="dpg-paddle"] { aspect-ratio: 3 / 2; }
/* 妙控拨片页：收紧「一枚拨片」与「如何优雅使用」之间的间距 */
body.dpg .tight-b { padding-bottom: clamp(28px, 3.5vw, 48px); }
body.dpg .tight-t { padding-top: clamp(28px, 3.5vw, 48px); }
/* 妙控拨片页：「轻轻地，提醒你」绿光 / 琥珀光 双状态对照 */
.reminder-states { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); max-width: 880px; margin: 0 auto; }
.reminder-card { margin: 0; }
.reminder-img { border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; background: #f1f2f5; box-shadow: var(--shadow-soft); }
.reminder-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 64%; display: block; }
.reminder-card figcaption { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.reminder-card .reminder-dot { width: 10px; height: 10px; border-radius: 999px; flex: none; }
.reminder-card .reminder-dot-green { background: #34c759; box-shadow: 0 0 8px rgba(52,199,89,.65); }
.reminder-card .reminder-dot-amber { background: #ff9f0a; box-shadow: 0 0 8px rgba(255,159,10,.65); }
/* 人体工学页（body.erg）：模块间白段稍微缩小（仅本页，不影响共用 data-page 的技术页） */
body.erg .section:not(.section-band) { padding: clamp(44px, 5.5vw, 78px) 0; }
/* 人体工学页：为舒适调校 四张卡片高度适当调小（缩内边距 + 图标/标题下间距） */
body.erg .principle { padding-top: clamp(16px, 1.6vw, 22px); padding-bottom: clamp(16px, 1.6vw, 22px); }
body.erg .principle .picon { margin-bottom: 12px; }
body.erg .principle h3 { margin-bottom: 6px; }

/* =========================================================
   HOME
   ========================================================= */
.home-hero {
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch;
  min-height: clamp(360px, 38vw, 560px);
}
.hero-copy {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: clamp(32px, 4vw, 60px) clamp(24px, 3vw, 54px);
}
.home-hero h1 { font-size: clamp(30px, 3vw, 52px); line-height: 1.14; font-weight: 300; }
.home-hero .lede { color: var(--muted); font-size: clamp(16px, 1.4vw, 19px); margin: 20px 0 32px; max-width: 440px; }
.home-hero .hero-media { overflow: hidden; }
.home-hero .hero-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/11; display: block; }

/* category strip */
.cat-strip {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  max-width: 1440px; margin: 0 auto;
}
.cat-strip-inner { display: grid; grid-template-columns: repeat(3, 1fr); }
.cat-item {
  display: flex; align-items: center; justify-content: center; gap: 20px; padding: 26px clamp(16px, 3vw, 46px);
  color: var(--ink-2);
}
.cat-item + .cat-item { border-left: 1px solid var(--line); }
.cat-item svg { width: 64px; height: 46px; color: #9aa1ad; flex: none; stroke-width: 1.4; fill: none; stroke: currentColor; }
.cat-item img.cat-ico { width: 64px; height: 46px; object-fit: contain; flex: none; }
.cat-item span { font-size: 17px; line-height: 1.25; }
.cat-item:hover { color: var(--blue); }

/* desk control app */
.app-section { text-align: center; padding: clamp(40px, 5vw, 60px) 0 0; }
.app-section h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 300; }
.app-section p { color: var(--muted); max-width: 620px; margin: 16px auto 26px; }
.app-screens {
  margin-top: clamp(28px, 4vw, 46px);
  padding: clamp(20px, 2.5vw, 32px) var(--pad);
}
.app-screens img { max-width: 1080px; margin: 0 auto; width: 100%; }

/* partners / logo strip */
.partners { padding: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.logo-strip { display: block; }
.logo-strip img { display: block; width: 100%; max-width: none; opacity: .9; }
.partners.framed .logo-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 0; }

/* 核心部件 · 全球供应链地图（桌面：地图+连线+两侧标签；手机：地图+编号列表） */
/* 整张图（地图+连线+文字）= 一个 SVG，随宽度等比缩放、永不错位 */
.supply-svg { display: block; width: 100%; max-width: 1120px; margin: 0 auto; height: auto; }
.supply-dot { fill: var(--blue); }
.supply-dot-glow { fill: var(--blue); opacity: .16; }
.supply-line { stroke: #c3ccdf; stroke-width: 1; fill: none; }
.supply-svg .s-t { font-family: var(--font-display); font-weight: 600; font-size: 15px; fill: var(--ink); }
.supply-svg .s-co { fill: var(--blue); }
.supply-svg .s-d { font-family: var(--font-body); font-weight: 400; font-size: 12px; fill: var(--muted); }
/* 数据块也做成一个 SVG：左右两半锁定，整体随宽度等比缩放、永不上下排列 */
.supply-stats { display: block; width: 100%; max-width: 820px; height: auto; margin: clamp(30px, 4vw, 52px) auto 0; }
.st-panel { fill: var(--bg-2); stroke: var(--line); stroke-width: 1; }
.st-div { stroke: var(--line); stroke-width: 1; }
.st-n { font-family: var(--font-display); font-weight: 700; font-size: 44px; fill: var(--blue); }
.st-t { font-family: var(--font-body); font-weight: 600; font-size: 15px; fill: var(--ink-2); }
.st-s { font-family: var(--font-body); font-weight: 400; font-size: 13px; fill: var(--muted); }
.st-ic { fill: none; stroke: var(--muted-2); stroke-width: 1.4; }

/* product grid + cards */
.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.2vw, 30px); }
.pcard {
  display: grid; grid-template-columns: 1fr 1fr; background: #fff; border-radius: 20px;
  overflow: hidden; box-shadow: var(--shadow-card); border: 1.5px solid transparent;
}
.pcard.is-active { border-color: var(--blue); }
.pcard .pcard-media { background: #fff; display: grid; place-items: center; padding: 18px; }
.pcard .pcard-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; aspect-ratio: 1/1; }
/* 全部产品：桌面 3 列「图上文下」目录卡片；手机回到图左文右紧凑横排（见 @media 860） */
body[data-page="shop"] .product-grid { grid-template-columns: repeat(3, 1fr); align-items: start; }
body[data-page="shop"] .pcard { grid-template-columns: 1fr; }
body[data-page="shop"] .pcard .pcard-media { padding: 0; aspect-ratio: 1 / 1; }
body[data-page="shop"] .pcard .pcard-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; border-radius: 0; }
body[data-page="shop"] .pcard .pcard-body { justify-content: flex-start; padding: clamp(16px, 1.8vw, 22px) clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 24px); }
body[data-page="shop"] .pcard h3 { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.25; margin-bottom: 6px; }
body[data-page="shop"] .pcard .model { font-size: 13px; margin-bottom: 10px; }
body[data-page="shop"] .pcard .pcard-link { padding-top: 8px; }
/* Home cards: square image cell (shows the full product) that the text panel matches in height, so the two halves stay aligned. */
body[data-page="home"] .product-grid { align-items: start; }            /* each card sizes itself — a taller neighbour can't stretch this card and leave a gap under its image */
body[data-page="home"] .pcard .pcard-media { padding: 0; aspect-ratio: 1 / 1; }
body[data-page="home"] .pcard .pcard-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; border-radius: 0; }
body[data-page="home"] .pcard .pcard-body { justify-content: center; }  /* text centers within the square so it lines up with the image */
.pcard .pcard-body { background: var(--bg-panel); padding: clamp(18px, 2vw, 26px); display: flex; flex-direction: column; }
.pcard h3 { font-size: clamp(19px, 1.5vw, 23px); font-weight: 300; line-height: 1.25; margin-bottom: 12px; }
.pcard .model { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.pcard .model strong { color: var(--ink); font-weight: 600; }
.pcard .opt-label { font-size: 14px; color: var(--muted); margin: 10px 0 8px; }
.pcard .opt-label .val { color: var(--muted-2); }
.pcard .pcard-desc { color: var(--muted); font-size: 15px; line-height: 1.55; }
.pcard .pcard-link { margin-top: auto; padding-top: 20px; color: var(--blue); font-size: 15px; font-weight: 500; }
.pcard .pcard-link:hover { text-decoration: underline; }

/* 全部产品 · 样册式（大图卡 + 名称/描述在图下，按品类分组；非电商列表） */
.lb-group + .lb-group { margin-top: clamp(44px, 5.5vw, 80px); }
.lb-group-head { font-size: clamp(14px, 1.3vw, 16px); font-weight: 600; letter-spacing: .08em; color: var(--muted-2); margin: 0 0 clamp(18px, 2.2vw, 28px); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.lookbook { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 2.6vw, 40px); }
.lb-card { display: block; color: inherit; }
.lb-media { border-radius: 18px; overflow: hidden; background: var(--bg-band); aspect-ratio: 1 / 1; }
.lb-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.lb-card:hover .lb-media img { transform: scale(1.03); }
.lb-body { padding: clamp(14px, 1.5vw, 20px) 2px 0; }
.lb-body h3 { font-size: clamp(19px, 1.8vw, 25px); font-weight: 300; letter-spacing: -.01em; line-height: 1.25; color: var(--ink); margin: 0 0 7px; }
.lb-body p { color: var(--muted); font-size: clamp(14px, 1.3vw, 16px); line-height: 1.55; margin: 0; max-width: 30em; }
@media (max-width: 640px) { .lookbook { grid-template-columns: 1fr; gap: 26px; } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1.4px solid var(--line); background: #fff; border-radius: 999px;
  padding: 8px 16px; font-size: 13px; color: var(--muted); cursor: pointer; font-family: var(--font-body);
  transition: .15s;
}
.chip.is-active, .chip:hover { border-color: var(--blue); color: var(--blue); }

.swatches { display: flex; gap: 10px; margin-top: 4px; }
.swatch { width: 22px; height: 22px; border-radius: 999px; border: 1px solid rgba(0,0,0,.12); cursor: pointer; }
.swatch.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--blue); }

.center-btn { display: flex; justify-content: center; margin-top: clamp(30px, 4vw, 48px); }

/* core principles */
.principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 1.8vw, 26px); }
.principle {
  background: #fff; border-radius: 18px; padding: clamp(22px, 2vw, 30px); box-shadow: var(--shadow-soft);
}
.principle .picon { width: 40px; height: 40px; color: var(--blue); margin-bottom: 22px; }
.principle .picon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; }
.principle h3 { font-size: 19px; font-weight: 500; margin-bottom: 10px; }
.principle p { color: var(--muted); font-size: 15px; margin: 0; }
/* 门店卡（about 页"寻见我们"）：方块代表图在上、城市+地址在下 */
.store-card { padding: clamp(16px,1.6vw,22px); }
.store-card .store-img { aspect-ratio: 1; border-radius: 12px; overflow: hidden; margin-bottom: clamp(14px,1.6vw,20px); background: #f2f3f6; }
.store-card .store-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.store-card h3 { font-size: 19px; font-weight: 500; margin: 0 0 8px; }
/* 展厅查找（about 页：输入城市 → 显示就近展厅地址） */
.showroom-finder { max-width: 720px; margin: clamp(40px,6vw,72px) auto 0; }
.finder-head { text-align: center; margin-bottom: 22px; }
.finder-head h3 { font-size: 20px; font-weight: 600; margin: 0 0 8px; color: var(--ink); }
.finder-head p { color: var(--muted); font-size: 11px; line-height: 1.6; margin: 0; }
.finder-input { position: relative; }
.finder-input > svg { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; stroke: #9aa6c4; fill: none; stroke-width: 2; stroke-linecap: round; }
.finder-input input { width: 100%; border: 1.5px solid #b9c6ee; background: #fafbff; border-radius: 999px; padding: 15px 24px 15px 52px; font-family: var(--font-body); font-size: 15px; color: var(--ink); }
.finder-input input::placeholder { color: #9aa6c4; }
.finder-input input:focus { outline: none; border-color: var(--blue); background: #fff; }
.finder-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.finder-chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 16px; font-size: 13.5px; color: var(--muted); cursor: pointer; font-family: inherit; }
.finder-chip:hover { border-color: var(--blue); color: var(--blue); }
.finder-results { margin-top: 18px; display: grid; gap: 12px; }
.finder-card { display: flex; align-items: flex-start; gap: 14px; border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; background: #fff; animation: finderIn .28s ease both; }
.finder-card .fc-pin { color: var(--blue); flex: 0 0 auto; margin-top: 1px; }
.finder-card h4 { font-size: 13px; font-weight: 600; margin: 0 0 4px; color: var(--ink); }
.finder-card .fc-region { color: var(--muted); font-size: 10px; font-weight: 400; margin-left: 8px; }
.finder-card p { color: var(--muted); font-size: 11px; line-height: 1.55; margin: 0; }
.finder-empty { text-align: center; color: var(--muted); font-size: 12px; line-height: 1.6; padding: 6px 0; }
.finder-empty a { color: var(--blue); }
@keyframes finderIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* lifestyle band */
.lifestyle { max-width: 1320px; margin: 0 auto; padding: 0 var(--pad); }
.lifestyle-frame { position: relative; border-radius: 22px; overflow: hidden; }
.lifestyle-frame img { width: 100%; aspect-ratio: 16/7; object-fit: cover; }

/* testimonials */
.tst { text-align: center; }
.tst-shell { position: relative; max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 18px; }
.tst-card {
  background: #fff; border: 1px solid #dfe6fb; border-radius: 18px; padding: clamp(26px, 3vw, 40px);
  text-align: left; box-shadow: var(--shadow-soft); position: relative; flex: 1; display: none;
}
.tst-card.is-active { display: block; }
.tst-card .quote { color: var(--blue); font-size: 46px; font-family: Georgia, serif; line-height: .6; font-weight: 700; }
.tst-card p { color: var(--ink-2); margin: 18px 0 18px; font-size: 16px; }
.tst-card .bought { color: var(--ink); font-size: 15px; }
.tst-card .bought a, .tst-card .bought .ref { color: var(--blue); }
.tst-arrow {
  width: 44px; height: 44px; flex: none; border: none; background: none; color: var(--blue); cursor: pointer;
  display: grid; place-items: center;
}
.tst-arrow svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dots { display: flex; gap: 9px; justify-content: center; margin: 28px 0; }
.dots button { width: 9px; height: 9px; border-radius: 999px; border: none; background: #c7cede; cursor: pointer; padding: 0; }
.dots button.is-active { width: 26px; background: var(--blue); }

/* FAQ */
.faq { max-width: 1080px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; background: none; border: none; cursor: pointer; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 26px 4px; font-family: var(--font-body); font-size: clamp(16px, 1.5vw, 19px); color: var(--ink-2);
}
.faq-icon { flex: none; width: 30px; height: 30px; border: 1.5px solid #c8cdd8; border-radius: 999px; position: relative; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; inset: 0; margin: auto; background: #888f9d; }
.faq-icon::before { width: 12px; height: 1.6px; }
.faq-icon::after { width: 1.6px; height: 12px; transition: transform .2s; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a p { color: var(--muted); font-size: 15px; margin: 0 0 26px; max-width: 92%; }
.faq-item.open .faq-icon { border-color: var(--ink-2); }
.faq-item.open .faq-icon::after { transform: rotate(90deg); }
.faq-actions { display: flex; gap: 16px; justify-content: center; margin-top: 40px; }

/* =========================================================
   SHOP
   ========================================================= */
.shop-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin-bottom: 30px;
}
.shop-count { font-size: 15px; color: var(--ink-2); font-weight: 600; }
.shop-filters { display: flex; gap: 12px; flex-wrap: wrap; }
.filter-chip {
  border: 1.5px solid #c8d2f1; background: #fff; color: var(--ink-2); border-radius: 999px;
  padding: 10px 26px; font-size: 14px; font-weight: 500; cursor: pointer; font-family: var(--font-body); transition: .15s;
}
.filter-chip.is-active { background: var(--blue); border-color: var(--blue); color: #fff; }
.filter-chip:not(.is-active):hover { border-color: var(--blue); color: var(--blue); }
.shop-sort { font-size: 15px; color: var(--muted); }
.shop-sort b { color: var(--blue); font-weight: 600; }

/* =========================================================
   PRODUCT DETAIL
   ========================================================= */
.pdp { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(30px, 4vw, 64px); align-items: start; padding-top: 12px; }
.pdp-gallery { display: grid; grid-template-columns: 92px 1fr; gap: 16px; }
.pdp-thumbs { display: flex; flex-direction: column; gap: 14px; }
.pdp-thumbs img { border-radius: 12px; border: 1.5px solid var(--line); aspect-ratio: 1/1; object-fit: cover; cursor: pointer; }
.pdp-thumbs img.is-active { border-color: var(--blue); }
.pdp-main { border-radius: 18px; overflow: hidden; background: var(--bg-band); }
.pdp-main img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.pdp-info .tag { color: var(--muted); font-size: 16px; margin-bottom: 14px; }
.pdp-info h1 { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.12; font-weight: 300; }
.pdp-info .model { color: var(--muted); margin: 22px 0 26px; font-size: 16px; }
.pdp-info .model strong { color: var(--ink); font-weight: 600; }
.pdp-info .opt-label { font-size: 16px; color: var(--ink-2); margin: 22px 0 12px; }
.pdp-info .opt-label .val { color: var(--muted); }
.pdp-cta { margin-top: 36px; }
.ship-note { margin-top: 16px; font-size: 13px; color: var(--muted); }
.ship-note::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 999px; background: var(--blue); vertical-align: middle; }

/* product details feature row */
.pd-details { text-align: center; }
.pd-details h2 { font-size: clamp(26px, 3.2vw, 38px); font-weight: 300; margin-bottom: 28px; }
.pd-details .desc { max-width: 880px; margin: 0 auto 14px; color: var(--muted); }
.pd-details .desc.note { margin-bottom: 40px; }
.feature-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; text-align: left; }
.feature-card { background: #fff; border-radius: 16px; padding: 30px; box-shadow: var(--shadow-soft); }
.feature-card .picon { width: 38px; height: 38px; color: var(--blue); margin-bottom: 20px; }
.feature-card .picon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.3; }
.feature-card h3 { font-size: 20px; font-weight: 500; margin-bottom: 10px; }
.feature-card p { color: var(--muted); font-size: 15px; margin: 0; }

/* =========================================================
   APPLE 风产品展示 —— 大字 / 大留白 / 去卡片描边阴影 / 黑白灰
   苹果近似色：浅灰 var(--bg-band)、近黑 var(--espresso)、文字灰 #86868b
   ========================================================= */
/* 居中分区标题（替代细体 section-head，用于 ap- 各段） */
.ap-head { text-align: center; max-width: 820px; margin: 0 auto clamp(36px, 5vw, 60px); }
.ap-head h2 { font-size: clamp(22px, 4.4vw, 56px); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; }
.ap-head p { color: var(--muted); font-size: clamp(12px, 1.8vw, 21px); margin: 16px auto 0; line-height: 1.45; }

/* 英雄区：超大标题 + 产品图在纯白上留白主导 */
.ap-hero { text-align: center; padding: clamp(48px, 8vw, 120px) var(--pad) clamp(20px, 3vw, 40px); }
.ap-eyebrow { color: var(--blue); font-weight: 600; font-size: clamp(15px, 1.5vw, 19px); margin: 0 0 14px; }
.ap-hero h1 { font-size: clamp(40px, 8vw, 88px); font-weight: 700; letter-spacing: -.035em; line-height: 1.04; }
.ap-tagline { font-size: clamp(19px, 2.4vw, 29px); color: var(--muted); font-weight: 400; max-width: 720px; margin: 20px auto 0; line-height: 1.32; }
.ap-hero-media { margin: clamp(28px, 4vw, 56px) auto 0; max-width: 1120px; }
.ap-hero-media img { width: 100%; display: block; border-radius: clamp(14px, 1.6vw, 24px); }
/* 首页 Hero 双按钮 + 功能段「了解更多」链接 */
.ap-hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: clamp(24px, 3vw, 36px); }
.ap-more { display: inline-block; margin-top: 22px; color: var(--blue); font-weight: 600; }
.ap-more:hover { text-decoration: underline; }

/* 自动播放产品视频段（演示升降） */
.ap-video { max-width: 1120px; margin: 0 auto; border-radius: clamp(14px, 1.6vw, 24px); overflow: hidden; background: #000; }
.ap-video video { width: 100%; display: block; }

/* 深色数字段：大数字陈列在中性近黑 espresso 上 */
.ap-show.dark .ap-head h2 { color: var(--bg-band); }
.ap-show.dark .ap-spec .n { color: #f4f6f9; }
.ap-show.dark .ap-spec .n span { color: #9aa1ad; }
.ap-show.dark .ap-spec .l { color: #9aa1ad; }

/* 功能聚焦：左右图文交替，大留白、大标题，图片自身圆角、无灰框 */
.ap-feature { padding: clamp(64px, 10vw, 140px) var(--pad); }
.ap-feature.band { background: var(--bg-band); }
.ap-feature.dark { background: var(--espresso); color: var(--bg-band); }
.ap-feature-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 88px); align-items: center; }
.ap-feature-inner.reverse .ap-feature-media { order: 2; }
.ap-feature-media { border-radius: 24px; overflow: hidden; }
.ap-feature-media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.ap-feature-copy h2 { font-size: clamp(28px, 4.2vw, 54px); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; }
.ap-feature-copy p { color: var(--muted); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.6; margin: 22px 0 0; }
.ap-feature.dark .ap-feature-copy p { color: #9aa1ad; }

/* 创始人的话：手写信实拍图，通栏、原比例、不裁切 */
.founder-photo img { display: block; width: 100%; height: auto; }

/* 苹果首页式「海报」：文案压在产品大图之上，图文合成一张精致海报，整块点进详情。
   顶部一层柔和深色渐变遮罩，保证白色文字在任意照片上都清晰可读。 */
.ap-poster { position: relative; display: block; overflow: hidden; color: #fff; }
.ap-poster > img { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; transition: transform .6s ease; }
a.ap-poster:hover > img { transform: scale(1.03); }
.ap-poster::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 62%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(14,16,24,.52) 0%, rgba(14,16,24,.30) 30%, rgba(14,16,24,.08) 60%, transparent 100%);
}
.ap-poster-copy { position: absolute; top: 0; left: 0; right: 0; z-index: 2; text-align: center; padding: clamp(26px, 5vw, 60px) var(--pad) 0; }
.ap-poster-copy h2 { color: #fff; font-size: clamp(22px, 3.8vw, 46px); font-weight: 700; letter-spacing: -.03em; line-height: 1.06; text-shadow: 0 1px 22px rgba(0,0,0,.30); }
/* 产品名里的英文（Boss / Yoga / Alba 等）：衬线斜体点睛。默认白色；Boss 单独用金色。 */
.name-en { font-family: var(--font-display); font-style: normal; font-weight: 600; color: #fff; margin-left: .16em; letter-spacing: 0; }
.name-en.gold { color: #e6c389; }   /* 仅 Boss 用香槟金 */
.ap-poster-copy .sub { color: rgba(255,255,255,.94); font-size: clamp(12px, 1.8vw, 18px); margin: 10px auto 0; max-width: 34em; line-height: 1.4; text-shadow: 0 1px 16px rgba(0,0,0,.32); }
/* 各通栏块（Hero 视频 / 创始人信 / 产品海报）之间留约十几像素的白色间隙 */
.founder-photo, .ap-poster { margin-top: 6px; }

/* HERO：通栏视频（原始 16:9、宽度铺满、不裁切），品牌主张标题 + 副标题水平垂直居中压在视频上 */
.hero { position: relative; overflow: hidden; aspect-ratio: 16 / 9; }
.hero-media { display: block; width: 100%; height: auto; }   /* 非轮播场景：原始比例铺满 */
/* 顶部 banner 双视频轮播：两段 16:9 视频堆叠、淡入淡出（均为 16:9，cover 不裁切）*/
.hero .hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.hero .hero-media.is-active { opacity: 1; }
.hero-dots { position: absolute; left: 0; right: 0; bottom: clamp(12px, 2.4vw, 22px); z-index: 3; display: flex; gap: 9px; justify-content: center; pointer-events: none; }
.hero-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.5); transition: background .3s, width .3s; }
.hero-dot.is-active { background: #fff; width: 20px; border-radius: 4px; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(14,16,24,.28) 0%, rgba(14,16,24,.40) 48%, rgba(14,16,24,.26) 75%, rgba(14,16,24,.10) 100%); }
.hero-copy { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--pad); transform: translateY(-17%); }
/* 中文标题用正字距更舒展透气、字重转轻以贴合全站极简风（深色蒙版+阴影保证可读）*/
.hero-title { color: #fff; font-size: clamp(26px, 5vw, 56px); font-weight: 500; letter-spacing: .08em; line-height: 1.2; margin: 0; text-shadow: 0 2px 24px rgba(0,0,0,.42); }
.hero-sub { color: rgba(255,255,255,.92); font-size: clamp(15px, 1.9vw, 22px); margin: 8px auto 0; line-height: 1.5; letter-spacing: .14em; text-shadow: 0 1px 18px rgba(0,0,0,.42); }

/* 全幅功能段：纯黑/浅灰整段，居中大标题 + 一张大图 */
.ap-show { text-align: center; padding: clamp(64px, 10vw, 130px) var(--pad); }
.ap-show.dark { background: var(--espresso); color: var(--bg-band); }
.ap-show.band { background: var(--bg-band); }
.ap-show h2 { font-size: clamp(30px, 4.6vw, 60px); font-weight: 700; letter-spacing: -.03em; line-height: 1.06; max-width: 900px; margin: 0 auto; }
.ap-show .sub { font-size: clamp(17px, 1.9vw, 23px); max-width: 680px; margin: 20px auto 0; line-height: 1.5; color: var(--muted); }
.ap-show.dark .sub { color: #9aa1ad; }
.ap-show-media { margin: clamp(36px, 5vw, 64px) auto 0; max-width: 980px; }
.ap-show-media img { width: 100%; border-radius: 24px; display: block; }

/* 产品亮点：无边框浅灰圆角块（去掉投影卡片感） */
.ap-highlights { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ap-hl { background: #fff; border-radius: 20px; padding: clamp(24px, 2.4vw, 34px); box-shadow: var(--shadow-soft); }
.ap-hl .picon { width: 40px; height: 40px; color: var(--blue); margin-bottom: 18px; }
.ap-hl .picon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.3; }
.ap-hl h3 { font-size: clamp(18px, 1.5vw, 21px); font-weight: 600; margin: 0 0 8px; letter-spacing: -.01em; }
.ap-hl p { color: var(--muted); font-size: 15px; margin: 0; line-height: 1.55; }
/* 苹果式横版图片卡：16:9 整图填充 + 文字压在底部。
   文字字号/间距用容器单位 cqw（跟随卡片宽度），让文字与图片成为一个整体、共同缩放、比例永不变。 */
.ap-hl.photo { position: relative; container-type: inline-size; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; color: #fff; }
.ap-hl.photo .ap-hl-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ap-hl.photo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(10,12,18,.82) 0%, rgba(10,12,18,.40) 26%, transparent 58%); }
.ap-hl.photo .ap-hl-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 6cqw 4.2cqw; }
.ap-hl.photo h3 { color: #fff; font-size: 4.7cqw; margin: 0 0 1.1cqw; text-shadow: 0 0.3cqw 5cqw rgba(0,0,0,.4); }
.ap-hl.photo p { color: rgba(255,255,255,.92); font-size: 3.2cqw; line-height: 1.45; margin: 0; text-shadow: 0 0.3cqw 4cqw rgba(0,0,0,.4); }

/* 关键参数：大数字陈列 */
.ap-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); max-width: 1000px; margin: 0 auto; text-align: center; }
.ap-spec .n { font-size: clamp(42px, 6vw, 80px); font-weight: 700; color: var(--ink); letter-spacing: -.03em; line-height: 1; }
.ap-spec .n span { font-size: .4em; font-weight: 600; color: var(--muted); margin-left: 4px; }
.ap-spec .l { color: var(--muted); font-size: 16px; margin-top: 16px; }

/* 技术规格表 */
.ap-spectable { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line); text-align: left; }
.ap-spectable > div { display: grid; grid-template-columns: 180px 1fr; gap: 20px; padding: 18px 2px; border-bottom: 1px solid var(--line); }
.ap-spectable dt { color: var(--muted); font-size: 16px; margin: 0; }
.ap-spectable dd { color: var(--ink-2); font-size: 16px; margin: 0; line-height: 1.5; }
.spec-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 999px; border: 1px solid rgba(0,0,0,.15); vertical-align: middle; margin-right: 8px; }

/* 结尾联系（轻 CTA，非购买） */
.pdp-contact { text-align: center; }
.pdp-contact h2 { font-size: clamp(28px, 4vw, 48px); font-weight: 700; letter-spacing: -.03em; }
.pdp-contact p { color: var(--muted); max-width: 560px; margin: 18px auto 32px; }

/* =========================================================
   FORMS (Review / Contact)
   ========================================================= */
.form-page { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 5vw, 80px); align-items: start; }
.form-page.contact-page { align-items: start; }
.lede-form { color: var(--blue); font-size: 20px; margin: 8px 0 30px; font-weight: 500; }
.field-form { display: grid; gap: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field {
  width: 100%; border: 1.5px solid #b9c6ee; background: #fafbff; border-radius: 999px;
  padding: 16px 26px; font-family: var(--font-body); font-size: 16px; color: var(--ink);
}
.field::placeholder { color: #9aa6c4; }
textarea.field { border-radius: 24px; min-height: 150px; resize: vertical; }
.field:focus { outline: none; border-color: var(--blue); background: #fff; }
.form-fine { font-size: 12px; color: var(--muted); margin-top: 18px; }
.form-fine a { color: var(--blue); }
.contact-photo { border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; }
.contact-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* WeChat-native contact methods（加微信 / 电话 / 公众号）
   桌面：三栏竖卡；移动端（≤760）：紧凑横向列表行 —— 见底部 media query。 */
.contact-lede { color: var(--muted); font-size: 14px; line-height: 1.7; max-width: 32em; margin: 12px 0 0; }
.contact-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px,1.8vw,22px); margin-top: clamp(30px,4vw,52px); }
.cmethod {
  background: #f6f7fa; border-radius: 16px;
  padding: clamp(28px,2.8vw,40px) clamp(20px,2.2vw,28px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.cmethod .visual { width: min(72%,156px); aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #fff; display: grid; place-items: center; margin-bottom: clamp(16px,2vw,22px); }
.cmethod .visual img { width: 100%; height: 100%; display: block; }
.cmethod .visual.icon { background: linear-gradient(160deg,#eef3ff,#e7f1fb); }
.cmethod .visual.icon svg { width: 40%; height: 40%; stroke: var(--blue); }
.cmethod h3 { font-size: 15px; margin: 0 0 7px; }
.cmethod p { color: var(--muted); font-size: 13px; line-height: 1.62; margin: 0; max-width: 22em; }
.cmethod .tel { font-size: 18px; font-weight: 700; color: var(--blue); text-decoration: none; letter-spacing: .01em; margin: 0 0 10px; display: inline-block; }
.cmethod .tel:hover { text-decoration: underline; }

/* address strip */
.address-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.address-strip .container { display: flex; gap: 6px 28px; padding-top: 24px; padding-bottom: 24px; flex-wrap: wrap; align-items: baseline; }
.address-strip .org { font-weight: 600; font-size: 14px; color: var(--ink); }
.address-strip .addr { color: var(--muted); font-size: 13px; max-width: 520px; }

/* review testimonial column */
.review-aside { background: linear-gradient(160deg, #eef3ff, #e7f1fb 60%, #f4f9fe); border: 1px solid var(--line); border-radius: 18px; padding: clamp(24px, 3vw, 40px); }

/* =========================================================
   OUR TECHNOLOGIES
   ========================================================= */
.tech-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 70px); align-items: center;
  background: #fff; border-radius: 22px; padding: clamp(28px, 3.4vw, 56px); box-shadow: var(--shadow-soft);
  margin-bottom: clamp(22px, 2.6vw, 34px);
}
.tech-row.reverse .tech-media { order: -1; }
.tech-media { border-radius: 16px; overflow: hidden; }
.tech-media img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.tech-text h2 { font-size: clamp(24px, 2.8vw, 34px); font-weight: 300; margin-bottom: 16px; }
.tech-text p { color: var(--muted); margin: 0 0 22px; }

/* =========================================================
   CUSTOMER CARE
   ========================================================= */
.manuals { text-align: center; }
.manuals h2 { font-size: clamp(26px, 3.2vw, 38px); font-weight: 300; }
.manuals .sub { color: var(--muted); max-width: 560px; margin: 14px auto 38px; }
.manual-track { display: flex; gap: 22px; overflow-x: auto; padding: 6px 2px 22px; scroll-snap-type: x mandatory; }
.manual-card {
  flex: 0 0 clamp(220px, 23vw, 270px); scroll-snap-align: start; background: #fff;
  border-radius: 16px; box-shadow: var(--shadow-soft); padding: 30px 24px; text-align: center;
}
.manual-card h3 { font-size: 19px; font-weight: 300; line-height: 1.3; min-height: 50px; }
.manual-card .micon { height: 120px; display: grid; place-items: center; color: #aeb4c0; margin: 14px 0; }
.manual-card .micon svg { width: 130px; height: 110px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.manual-card a { color: var(--blue); font-weight: 600; text-decoration: underline; font-size: 15px; }

/* technical service tabs */
.tech-service { background: var(--bg-band); }
.tech-service h2 { color: var(--blue); font-size: clamp(24px, 3vw, 34px); font-weight: 300; }
.tech-service .intro { color: var(--blue); max-width: 720px; margin: 18px 0 40px; }
/* 技术服务：桌面左右栏（tab | 面板），手机手风琴（就地展开）。
   交错 DOM（.ts-item 内含 tab + panel）+ display:contents，使同一份 DOM 两种排布通吃。 */
.ts-grid { display: grid; grid-template-columns: 360px 1fr; column-gap: clamp(30px, 4vw, 64px); align-items: start; }
.ts-item { display: contents; }
.ts-tab {
  grid-column: 1;
  text-align: left; background: none; border: none; cursor: pointer; font-family: var(--font-body);
  padding: 16px 0 16px 26px; color: var(--muted-2); font-size: 16px; position: relative; line-height: 1.35;
  border-left: 2px solid #d6dbe6;
}
.ts-tab.is-active { color: var(--blue); font-weight: 600; border-left-color: var(--blue); }
.ts-tab::before {
  content: ""; position: absolute; left: -6px; top: 22px; width: 10px; height: 10px; border-radius: 999px;
  background: #cdd3e0;
}
.ts-tab.is-active::before { background: var(--blue); }
.ts-panel { grid-column: 2; grid-row: 1 / span 5; display: none; }
.ts-panel.is-active { display: block; }
.ts-panel h3 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 300; color: var(--ink); margin-bottom: 18px; }
.ts-panel p { color: var(--muted); margin: 0; }

/* warranty accordion */
.warranty h2 { text-align: center; font-size: clamp(26px, 3.4vw, 40px); font-weight: 300; }
.warranty .intro { text-align: center; max-width: 820px; margin: 18px auto 30px; color: var(--muted); }
.acc-item { border-top: 1px solid var(--line); }
.acc-item:last-child { border-bottom: 1px solid var(--line); }
.acc-q {
  width: 100%; background: none; border: none; cursor: pointer; text-align: left; display: grid;
  grid-template-columns: 320px 1fr; gap: 30px; align-items: start; padding: 26px 4px;
  font-family: var(--font-body);
}
.acc-q .acc-title { color: var(--blue); font-size: 18px; line-height: 1.4; }
.acc-q .acc-body { color: var(--muted); font-size: 15px; }
.acc-q .acc-body ul { margin: 12px 0 0; padding-left: 18px; }
.acc-q .acc-body li { margin-bottom: 8px; }
.acc-q .acc-body li b, .acc-q .acc-body strong { color: var(--ink-2); }
.acc-q .acc-body p + p { margin-top: 12px; }

/* =========================================================
   ABOUT
   ========================================================= */
.story { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(30px, 4vw, 70px); align-items: center; }
.story h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 300; margin-bottom: 18px; }
.story p { color: var(--muted); margin: 0; }
.story-photo { border-radius: 18px; overflow: hidden; }
.story-photo img { width: 100%; object-fit: cover; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px) {
  .principles { grid-template-columns: repeat(2, 1fr); }
  .acc-q { grid-template-columns: 1fr; gap: 10px; }
  /* 技术服务：≤1024 改为手风琴——点击就地展开，面板紧随其 tab，不再跑到最底部 */
  .ts-grid { display: block; }
  .ts-item { display: block; border-top: 1px solid var(--line); }
  .ts-item:last-child { border-bottom: 1px solid var(--line); }
  .ts-tab { width: 100%; border-left: none; padding: 18px 40px 18px 0; color: var(--ink); }
  .ts-tab::before { display: none; }
  .ts-tab::after { content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 300; color: var(--muted); line-height: 1; }
  .ts-tab.is-active { color: var(--blue); }
  .ts-tab.is-active::after { content: "–"; color: var(--blue); }
  .ts-panel { padding: 0 0 20px; }
  .ts-panel h3 { display: none; }
}
@media (max-width: 860px) {
  .nav-toggle { display: none; }
  /* A 方案 · 单行：logo 左、导航靠右（沿用桌面 margin-left:auto），收紧以适配窄屏 */
  .site-header .brand-img { height: 28px; }
  .site-nav { gap: clamp(10px, 2.8vw, 16px); }
  .site-nav a { font-size: clamp(11px, 2.9vw, 13.5px); }
  .home-hero, .product-grid, .feature-cards, .tech-row, .story, .form-page, .footer-news,
  .cat-strip-inner, .pdp { grid-template-columns: 1fr; }
  .pcard { grid-template-columns: 1fr; }
  .pcard .pcard-media img { aspect-ratio: 4/3; }
  /* 全部产品页：手机保持图左文右的紧凑横排（桌面才是 3 列图上文下） */
  body[data-page="shop"] .product-grid { grid-template-columns: 1fr; }
  body[data-page="shop"] .pcard { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body[data-page="shop"] .pcard .pcard-body { justify-content: center; }
  .principles { grid-template-columns: 1fr 1fr; }
  .tech-row.reverse .tech-media { order: 0; }
  .pdp-gallery { grid-template-columns: 1fr; }
  .pdp-thumbs { flex-direction: row; }
  .cat-item + .cat-item { border-left: none; border-top: 1px solid var(--line); }
  .footer-news .news-right { justify-self: stretch; max-width: none; }
  .field-row { grid-template-columns: 1fr; }
  .ap-spectable > div { grid-template-columns: 120px 1fr; gap: 14px; }
  .ap-highlights { grid-template-columns: repeat(2, 1fr); }
  .ap-feature-inner { grid-template-columns: 1fr; gap: clamp(20px, 4vw, 32px); }
  .ap-feature-inner.reverse .ap-feature-media { order: 0; }
  /* 手机端：不再强裁，产品图按原始比例完整显示（避免宽图被切掉左右两端） */
  .ap-poster > img { aspect-ratio: auto; object-fit: contain; }
}
@media (max-width: 560px) {
  .principles { grid-template-columns: 1fr; }
  /* 门店卡：单列时改成紧凑横排（方图在左、城市+地址在右），不做大图竖排 */
  .store-card { display: flex; flex-direction: row; align-items: center; gap: 16px; text-align: left; }
  .store-card .store-img { width: 92px; flex: 0 0 92px; margin-bottom: 0; }
  .store-card .store-body { flex: 1 1 auto; min-width: 0; }
  .store-card h3 { font-size: 18px; margin: 0 0 5px; }
  .store-card .store-body p { font-size: 13.5px; line-height: 1.55; }
  body { font-size: 16px; }
  .ap-specs { grid-template-columns: 1fr; gap: 32px; }
  .ap-highlights { grid-template-columns: 1fr; }
}

/* 滚动渐入：仅在 JS 开启后隐藏，无 JS 时全部可见（不会丢内容） */
.reveal-on .reveal { opacity: 0; transform: translateY(20px); }
.reveal-on .reveal.in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.6,.2,1); }

@media (max-width: 760px) {
  /* 首页：寄语 ↔ 展厅查找 间距再收紧 20px（section 上 padding 56 + 此 margin 0 = 56px）*/
  body[data-page="home"] .showroom-finder { margin-top: 0; }
  /* 移动端：三张卡片改成紧凑的横向列表行（左图右文），不再是大方框纵向堆叠 */
  .contact-methods { grid-template-columns: 1fr; gap: 12px; margin-top: clamp(22px,5vw,30px); }
  .cmethod { flex-direction: row; align-items: center; text-align: left; gap: 16px; padding: 16px 18px; }
  .cmethod .visual { width: 84px; flex: 0 0 84px; margin-bottom: 0; border-radius: 10px; }
  .cmethod .visual.icon svg { width: 38%; height: 38%; }
  .cmethod .cm-body { flex: 1 1 auto; min-width: 0; }
  .cmethod h3 { font-size: 15px; margin: 0 0 4px; }
  .cmethod p { font-size: 13px; line-height: 1.55; max-width: none; }
  .cmethod .tel { font-size: 16px; margin: 0 0 4px; }
}