/* Notion-grade light design system — authored for Asquad B2B export templates.
   Design DNA: notion.so DESIGN.md (modified Inter, warm-white canvas #ffffff, warm
   near-black text rgba(0,0,0,0.95), warm-gray neutrals #f6f5f4/#615d59/#a39e98 with
   yellow-brown undertone, Notion Blue #0075de single accent, whisper borders
   1px rgba(0,0,0,0.1), multi-layer sub-0.05 shadows, 4px button radius, pill badges).
   NOT a copy of Notion's content — colour/type/layout language only. */
:root {
  --bg: #ffffff;
  --bg-warm: #f6f5f4;
  --bg-warm-2: #efeeec;
  --ink: rgba(0, 0, 0, 0.95);
  --ink-2: #615d59;
  --ink-3: #a39e98;
  --dark: #31302e;
  --blue: #0075de;
  --blue-active: #005bab;
  --navy: #213183;
  --badge-bg: #f2f9ff;
  --badge-text: #097fe8;
  --teal: #2a9d99;
  --green: #1aae39;
  --orange: #dd5b00;
  --border: rgba(0, 0, 0, 0.1);
  --border-soft: rgba(0, 0, 0, 0.06);
  --shadow-card: rgba(0, 0, 0, 0.04) 0px 4px 18px, rgba(0, 0, 0, 0.027) 0px 2.025px 7.84688px,
    rgba(0, 0, 0, 0.02) 0px 0.8px 2.925px, rgba(0, 0, 0, 0.01) 0px 0.175px 1.04062px;
  --shadow-deep: rgba(0, 0, 0, 0.01) 0px 1px 3px, rgba(0, 0, 0, 0.02) 0px 3px 7px,
    rgba(0, 0, 0, 0.02) 0px 7px 15px, rgba(0, 0, 0, 0.04) 0px 14px 28px,
    rgba(0, 0, 0, 0.05) 0px 23px 52px;
  --maxw: 1200px;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", -apple-system, system-ui, "Segoe UI", Helvetica, Arial,
    "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-feature-settings: "lnum", "locl";
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  display: block;
}
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.125px;
  text-transform: uppercase;
  color: var(--blue);
}
/* badge pill */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.125px;
  color: var(--badge-text);
  background: var(--badge-bg);
  border-radius: 9999px;
  padding: 5px 12px;
}
.badge .g {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}
/* nav */
nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -0.25px;
  font-size: 19px;
  color: var(--ink);
}
.brand .dot {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--ink);
  position: relative;
  flex-shrink: 0;
}
.brand .dot::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 2px;
  border: 2px solid #fff;
  border-top: none;
  border-right: none;
}
.brand img {
  height: 28px;
  width: auto;
  border-radius: 6px;
}
.navlinks {
  display: flex;
  gap: 30px;
}
.navlinks a {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  transition: color 0.15s;
}
.navlinks a:hover {
  color: var(--ink);
}
.nav-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.33;
  padding: 9px 16px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: rgba(0, 0, 0, 0.05);
  color: var(--ink);
  transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease;
  cursor: pointer;
  font-family: inherit;
}
.btn:hover {
  background: rgba(0, 0, 0, 0.08);
  transform: scale(1.02);
}
.btn:active {
  transform: scale(0.97);
}
.btn-primary {
  background: var(--blue);
  color: #fff;
}
.btn-primary:hover {
  background: var(--blue-active);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  padding-left: 6px;
  padding-right: 6px;
}
.btn-ghost:hover {
  background: transparent;
  text-decoration: underline;
  transform: none;
}
/* hero — 两态（Shopify image-banner 范式）
   · 有照片 → 整幅出血 <img> + 均匀一层淡遮罩 + 白字
   · 无照片 → 本模板自己的干净纸面纯白底 + 深色字（原来的渐变光晕已移除）
   两态同高、内容同为底部左对齐；文档感靠细描边与朴素排版维持，不靠装饰。 */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 76vh;
  overflow: hidden;
  isolation: isolate;
  text-align: left;
}
.hero-inner {
  width: 100%;
  padding-top: 96px;
  padding-bottom: 72px;
}
.hero .badge {
  margin-bottom: 24px;
}
.hero .cta-row {
  justify-content: flex-start;
}
.hero .strip .lbl {
  text-align: left;
}
.hero .logos {
  justify-content: flex-start;
}
/* 无照片态 —— 干净纸面 */
.hero--plain {
  background: var(--bg);
  color: var(--ink);
}
/* 有照片态 —— 图就是主角 */
.hero--media {
  color: #fff;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-media .hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero--media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.3);
}
.hero--media h1 {
  color: #fff;
}
.hero--media .sub {
  color: rgba(255, 255, 255, 0.88);
}
.hero--media .cta-note {
  color: rgba(255, 255, 255, 0.72);
}
.hero--media .badge {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.hero--media .btn {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}
.hero--media .btn:hover {
  background: rgba(255, 255, 255, 0.24);
}
.hero--media .btn-primary {
  background: var(--blue);
  border-color: transparent;
}
.hero--media .btn-primary:hover {
  background: var(--blue-active);
}
.hero--media .strip {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.24);
}
.hero--media .strip .lbl {
  color: rgba(255, 255, 255, 0.66);
}
.hero--media .logos span {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}
h1 {
  font-size: clamp(40px, 6.5vw, 64px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -2.125px;
  color: var(--ink);
  margin: 0 auto 22px;
  max-width: 16ch;
  text-wrap: balance;
}
.hero h1 {
  margin-left: 0;
  margin-right: 0;
  max-width: 17ch;
}
.hero .sub {
  margin-left: 0;
  margin-right: 0;
}
.sub {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.125px;
  color: var(--ink-2);
  max-width: 54ch;
  margin: 0 auto 32px;
}
.cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.cta-note {
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-3);
}
/* trust strip */
.strip {
  margin-top: 72px;
  padding: 28px 32px;
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.strip .lbl {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.125px;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  margin-bottom: 18px;
}
.logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 12px;
}
.logos span {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 7px 16px;
}
/* sections */
section.block {
  padding: 88px 0;
}
/* 陈列区块的外壳恒渲染：内部 gate 关闭时渲染成完全空的 <section>，
   这里把 padding 收掉，避免默认站上留下成片空白（warm 的还会是一条暖色空带）。 */
section.block:empty {
  padding: 0;
}
section.warm {
  background: var(--bg-warm);
}
.sec-head {
  max-width: 62ch;
  margin: 0 auto 52px;
  text-align: center;
}
.sec-head.left {
  margin-left: 0;
  text-align: left;
}
.sec-head h2 {
  font-size: clamp(32px, 4.4vw, 48px);
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1.02;
  margin: 14px 0 18px;
  color: var(--ink);
  text-wrap: balance;
}
.sec-head p {
  font-size: 18px;
  font-weight: 400;
  color: var(--ink-2);
  line-height: 1.55;
}
.grid {
  display: grid;
  gap: 20px;
}
.g3 {
  grid-template-columns: repeat(3, 1fr);
}
.g4 {
  grid-template-columns: repeat(4, 1fr);
}
/* feature card */
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px;
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-deep);
}
.ic {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--badge-bg);
  color: var(--blue);
  margin-bottom: 18px;
}
.ic svg {
  width: 21px;
  height: 21px;
}
.card h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.25px;
  line-height: 1.27;
  margin-bottom: 10px;
  color: var(--ink);
}
.card p {
  font-size: 16px;
  font-weight: 400;
  color: var(--ink-2);
  line-height: 1.5;
}
/* product card — 竖构图图册页（playbook §2）：3:4 铺满 + hover 切第二张图。
   去柔影、去 hover 位移、收圆角，但保留本模板的细描边语言（文档感的来源）。 */
.prod {
  display: block;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.18s ease;
}
.prod:hover {
  border-color: rgba(0, 0, 0, 0.22);
}
.prod .img {
  aspect-ratio: 3 / 4;
  background: var(--bg-warm);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
/* 主图与 rollover 第二图叠放，都铺满 3:4 画面 */
.prod .img .pc-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease, opacity 0.45s ease;
}
.prod .img .pc-img-2 {
  opacity: 0;
}
.prod:hover .pc-img {
  transform: scale(1.03);
}
.prod:hover .pc-img-2 {
  opacity: 1;
}
/* 无图占位 —— 干净中性纸面 + 一枚极淡圆角方描边（notion 的圆角矩形语汇，非渐变球） */
.prod .img .glow {
  position: absolute;
  inset: 0;
  background: var(--bg-warm);
}
.prod .img .glow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1.5px solid var(--border);
  border-radius: 10px;
}
.prod .meta {
  padding: 18px 20px 20px;
}
.prod h4 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.25px;
  line-height: 1.3;
  margin: 0 0 6px;
  color: var(--ink);
}
.prod p {
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-2);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* trust / metrics band */
.metrics {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-warm);
  padding: 48px 40px;
}
.metricgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.metric .n {
  font-size: clamp(34px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--ink);
}
.metric .n span {
  color: var(--blue);
}
.metric .l {
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-2);
  margin-top: 12px;
  line-height: 1.4;
}
/* page header (about/contact/products) */
.pagehead {
  position: relative;
  padding: 80px 0 32px;
  background: var(--bg-warm);
  border-bottom: 1px solid var(--border);
}
.pagehead h1 {
  font-size: clamp(36px, 5.4vw, 54px);
  letter-spacing: -1.875px;
  line-height: 1.04;
  margin: 0 0 16px;
  max-width: 18ch;
}
.pagehead.center {
  text-align: center;
}
.pagehead.center h1 {
  margin-left: auto;
  margin-right: auto;
}
.crumb {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  margin-bottom: 22px;
}
.crumb a {
  color: var(--ink-2);
}
.crumb a:hover {
  color: var(--blue);
  text-decoration: underline;
}
.prose {
  max-width: 66ch;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink-2);
}
.prose.center {
  margin: 0 auto;
  text-align: center;
}
.prose p {
  margin-bottom: 18px;
}
.prose p:last-child {
  margin-bottom: 0;
}
/* contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.field {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 26px 28px;
  box-shadow: var(--shadow-card);
}
.field h4 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.125px;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.field a,
.field p {
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
}
.field a:hover {
  color: var(--blue);
  text-decoration: underline;
}
.field p {
  font-weight: 400;
  color: var(--ink-2);
}
/* detail */
.detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.detail .hero-img {
  aspect-ratio: 4 / 3;
  max-height: 420px;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  background: var(--bg-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.detail .hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.detail .hero-img .img-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--ink-2);
}
.detail .hero-img .img-empty span {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--ink-3);
}
.detail h1 {
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: -1.5px;
  margin: 12px 0 16px;
  text-align: left;
  max-width: none;
}
.spectable {
  margin: 26px 0 30px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-card);
}
.spectable .srow {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 15px;
}
.spectable .srow:last-child {
  border-bottom: none;
}
.spectable .srow .k {
  color: var(--ink-2);
}
.spectable .srow .v {
  color: var(--ink);
  font-weight: 600;
  text-align: right;
}
.spec-note {
  margin: 26px 0 30px;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-warm);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-2);
}
/* gallery (thumbnail row) */
.gallery {
  min-width: 0;
}
.thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.thumb {
  width: 66px;
  height: 66px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-warm);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.thumb:hover {
  border-color: var(--blue);
}
.thumb.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue);
}
/* price block */
.price-ladder,
.price-variant {
  width: 100%;
  margin: 22px 0 26px;
  border: 1px solid var(--border);
  border-radius: 12px;
  border-collapse: collapse;
  overflow: hidden;
  font-size: 14px;
  background: #fff;
  box-shadow: var(--shadow-card);
}
.price-ladder th,
.price-variant th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.125px;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--bg-warm);
  padding: 11px 20px;
  border-bottom: 1px solid var(--border);
}
.price-ladder th:last-child,
.price-variant th:last-child {
  text-align: right;
}
.price-ladder td,
.price-variant td {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--ink);
  font-weight: 500;
}
.price-ladder td:first-child,
.price-variant td:first-child {
  color: var(--ink-2);
  font-weight: 400;
}
.price-ladder td:last-child,
.price-variant td:last-child {
  text-align: right;
  font-weight: 600;
  color: var(--blue-active);
}
.price-ladder tr:last-child td,
.price-variant tr:last-child td {
  border-bottom: none;
}
.price-range {
  margin: 22px 0 26px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.25px;
  color: var(--blue-active);
}
.price-inquire {
  display: inline-flex;
  align-items: center;
  margin: 22px 0 26px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--badge-bg);
  font-size: 15px;
  font-weight: 500;
  color: var(--badge-text);
}
/* certification chips */
.cert-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: #fff;
  box-shadow: var(--shadow-card);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}
/* trade facts (MOQ / lead time / customization) */
.facts {
  margin: 0 0 30px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.facts:empty {
  display: none;
}
.fact {
  display: flex;
  gap: 16px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 14px;
}
.fact:last-child {
  border-bottom: none;
}
.fact-k {
  flex: 0 0 108px;
  color: var(--ink-3);
  font-weight: 500;
}
.fact-v {
  color: var(--ink);
  font-weight: 500;
  /* 与规格表值列同规则：右对齐，数字不悬在行中 */
  margin-left: auto;
  text-align: right;
}
/* save to inquiry list (fav-btn 收藏协议) */
.fav-btn-card {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink-2);
  cursor: pointer;
  transition: transform 0.12s ease, color 0.15s ease, border-color 0.15s ease;
  box-shadow: var(--shadow-card);
}
.fav-btn-card:hover {
  color: var(--blue);
  transform: scale(1.06);
}
.fav-btn-card:active {
  transform: scale(0.97);
}
.fav-btn-card.is-active {
  color: var(--blue);
  border-color: var(--blue);
}
.fav-btn-card.is-active svg {
  fill: var(--blue);
  stroke: var(--blue);
}
.fav-btn-detail.is-active {
  color: var(--blue-active);
}
.fav-btn-detail.is-active svg {
  fill: currentColor;
}
.fav-btn .fav-label-added {
  display: none;
}
.fav-btn.is-active .fav-label-add {
  display: none;
}
.fav-btn.is-active .fav-label-added {
  display: inline;
}
/* rich product detail (detail-rich 商品详情页) */
/* 富详情按「好读的文章」排版（playbook §3.1 例外）：measure 收到 ~72ch、行高 1.65，
   不套零售调性。 */
.detail-rich {
  max-width: 72ch;
  margin: 0 auto;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink-2);
}
.detail-rich h1,
.detail-rich h2,
.detail-rich h3 {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.25px;
  line-height: 1.2;
  margin: 32px 0 12px;
  max-width: none;
  text-align: left;
}
.detail-rich h1 {
  font-size: 30px;
  letter-spacing: -0.75px;
}
.detail-rich h2 {
  font-size: 25px;
  letter-spacing: -0.5px;
}
.detail-rich h3 {
  font-size: 20px;
}
.detail-rich p {
  margin: 0 0 14px;
}
.detail-rich img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.detail-rich ul,
.detail-rich ol {
  margin: 0 0 14px;
  padding-left: 22px;
}
.detail-rich li {
  margin-bottom: 6px;
}
.detail-rich hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 28px 0;
}
.detail-rich a {
  color: var(--blue);
}
.detail-rich a:hover {
  text-decoration: underline;
}
.detail-rich table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 14px;
  background: #fff;
}
.detail-rich th,
.detail-rich td {
  border: 1px solid var(--border);
  padding: 10px 14px;
  text-align: left;
}
.detail-rich th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.125px;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--bg-warm);
}
.detail-rich blockquote {
  margin: 20px 0;
  padding: 12px 20px;
  border-left: 3px solid var(--blue);
  border-radius: 0 8px 8px 0;
  background: var(--bg-warm);
}
/* product card price */
.card-price {
  display: block;
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--blue-active);
}
/* pagination */
.pager {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin-top: 48px;
}
.pager .pageinfo {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  padding: 0 8px;
}
.pager-nums {
  display: flex;
  gap: 6px;
  align-items: center;
}
.pager-num {
  min-width: 40px;
  padding: 9px 12px;
  justify-content: center;
}
.pager-num.is-current {
  background: var(--ink);
  color: #fff;
  pointer-events: none;
}
.pager-gap {
  color: var(--ink-3);
  font-size: 13px;
  padding: 0 2px;
  user-select: none;
}
/* final CTA */
.final {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(0, 117, 222, 0.08), transparent 60%),
    var(--bg-warm);
  box-shadow: var(--shadow-card);
  padding: 72px 40px;
  text-align: center;
  overflow: hidden;
}
.final h2 {
  font-size: clamp(30px, 4.4vw, 48px);
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1.04;
  margin-bottom: 16px;
  color: var(--ink);
}
.final p {
  font-size: 18px;
  font-weight: 400;
  color: var(--ink-2);
  max-width: 48ch;
  margin: 0 auto 30px;
  line-height: 1.5;
}
/* footer */
footer {
  border-top: 1px solid var(--border);
  background: var(--bg-warm);
  padding: 60px 0 56px;
}
.foot {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 32px;
}
.foot h5 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.125px;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
}
.foot a {
  display: block;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-2);
  margin-bottom: 11px;
  transition: color 0.15s;
}
.foot a:hover {
  color: var(--blue);
}
.foot .desc {
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 36ch;
  margin-top: 16px;
}
.foot .brand {
  font-size: 18px;
}
.legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 48px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-3);
  flex-wrap: wrap;
  gap: 12px;
}
/* ── collapsible rows（Shopify Dawn 范式）─────────────────────────
   规格 / 认证 / 交易条款折叠；价格与询盘 CTA 始终常显。原生 details，无 JS 也能展开。
   视觉沿用本模板的细描边分隔线 —— 像文档里的可折叠小节。 */
.acc {
  border-top: 1px solid var(--border);
  margin: 0;
}
.acc:last-of-type {
  border-bottom: 1px solid var(--border);
  margin-bottom: 26px;
}
.acc-sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 2px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.1px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.acc-sum::-webkit-details-marker {
  display: none;
}
.acc-sum::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 1.6px solid var(--ink-3);
  border-bottom: 1.6px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}
.acc[open] > .acc-sum::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.acc-sum:hover {
  color: var(--blue);
}
.acc-sum:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.acc-body {
  padding: 0 0 18px;
}
/* 折叠体内既有组件去掉自身外边距，交给 .acc-body 统一控 */
.acc-body .spectable,
.acc-body .cert-chips,
.acc-body .facts {
  margin: 0;
}

/* ── 详情页图库：crossfade + lightbox ───────────────────────── */
.detail .hero-img .main-img {
  transition: opacity 0.18s ease;
  cursor: zoom-in;
}
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(0, 0, 0, 0.78);
  animation: lb-in 0.2s ease;
  cursor: zoom-out;
}
@keyframes lb-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
}
.lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}
.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.24);
}
.lightbox-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ══ 陈列区块（lookbook / testimonial / press / promo）══════════
   外壳 section[id] 恒渲染，内部无内容时整段不渲染 → 区块自然收起。 */

/* lookbook 拼贴（Shopify Collage）—— 圆角矩形 + 细描边，notion 的卡片语汇 */
.lookbook {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
}
.lookbook .lb-cell {
  display: block;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-warm-2);
  aspect-ratio: 4 / 5;
}
.lookbook .lb-cell:first-child {
  grid-row: span 2;
  aspect-ratio: auto;
}
.lookbook .lb-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.lookbook .lb-cell:hover img {
  transform: scale(1.04);
}

/* 客户证言 —— 居中引言，落在文档纸面板里 */
.testimonial {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-warm);
  padding: 56px 40px;
}
.testimonial .tq {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.75px;
  color: var(--ink);
  margin-bottom: 22px;
  text-wrap: balance;
}
.testimonial .tname {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.testimonial .trole {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-2);
  margin-top: 2px;
}
/* 证言块坐在 warm 区块上时面板换白底（同 promo-band 的做法）——
   暖底叠暖面板会只剩一圈描边，面板感消失。 */
section.warm .testimonial {
  background: #fff;
}

/* 媒体 / 客户名录（Shopify Logo list）—— 复用 hero trust strip 的面板语言 */
.press-strip {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-warm);
  padding: 32px 32px 34px;
  text-align: center;
}
.press-strip .press-lbl {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.125px;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 20px;
}
.press-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 40px;
}
.press-row span {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.25px;
  color: var(--ink-2);
}

/* 招商横幅（Shopify Image with text）—— 文档纸面板 + 主按钮 */
.promo-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  padding: 44px 44px;
}
.promo-band .promo-copy {
  max-width: 62ch;
}
.promo-band .promo-copy h2 {
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.1;
  margin: 10px 0 10px;
  color: var(--ink);
  text-wrap: balance;
}
.promo-band .promo-copy p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-2);
}
.promo-band .btn {
  flex: none;
}

/* responsive */
@media (max-width: 900px) {
  .g3,
  .g4,
  .metricgrid,
  .foot {
    grid-template-columns: 1fr 1fr;
  }
  .detail {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .navlinks {
    display: none;
  }
  section.block {
    padding: 60px 0;
  }
  .hero {
    min-height: 66vh;
  }
  .hero-inner {
    padding-top: 72px;
    padding-bottom: 56px;
  }
  .lookbook {
    grid-template-columns: 1fr 1fr;
  }
  .promo-band {
    padding: 34px 28px;
  }
}
@media (max-width: 560px) {
  .wrap {
    padding: 0 20px;
  }
  .g3,
  .g4,
  .metricgrid,
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .foot {
    grid-template-columns: 1fr 1fr;
  }
  h1 {
    letter-spacing: -1px;
  }
  .final {
    padding: 52px 24px;
  }
  .lookbook {
    grid-template-columns: 1fr;
  }
  .lookbook .lb-cell:first-child {
    grid-row: auto;
    aspect-ratio: 4 / 5;
  }
  .testimonial {
    padding: 40px 24px;
  }
  .press-strip {
    padding: 26px 20px 28px;
  }
}

/* reduced-motion：关掉缩放 / crossfade / lightbox 动画，
   rollover 的 opacity 切换保留（那是功能，不是动效）。 */
@media (prefers-reduced-motion: reduce) {
  .prod .img .pc-img {
    transition: opacity 0.45s ease;
  }
  .prod:hover .pc-img {
    transform: none;
  }
  .lookbook .lb-cell img {
    transition: none;
  }
  .lookbook .lb-cell:hover img {
    transform: none;
  }
  .detail .hero-img .main-img {
    transition: none;
  }
  .lightbox {
    animation: none;
  }
  .acc-sum::after {
    transition: none;
  }
  .btn:hover,
  .btn:active {
    transform: none;
  }
}