/*
Theme Name: BeiLe Shop
Theme URI: https://www.beileinflatables.com/
Author: BeiLe Inflatables
Description: A WooCommerce catalogue and quote-focused storefront for BeiLe Inflatables.
Version: 3.2.1
Text Domain: beile-shop
*/

/* clothing3 用的就是这两款：正文 Figtree、标题与导航 Plus Jakarta Sans。
   自托管而不是外链 Google Fonts —— 少一个第三方依赖，也省掉一次跨域握手。
   两个都是可变字体，一个文件覆盖全部字重。 */
@font-face {
  font-family: "Figtree";
  src: url("assets/fonts/figtree-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  src: url("assets/fonts/figtree-latin-ext.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("assets/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* 中性色全部照 clothing3 实测值。模板只分三档文字：
     标题 #3b3b1a（比正文更暖更深）、链接与商品标题 #2a3c43、
     其余一律 #667085——它没有我们原来那种「正文比次要文字深一档」的中间层，
     所以 --ink-soft 和 --muted 指向同一个值，保留两个名字只是为了不改调用点。
     深色表面（顶条、福利条、索取目录带）也是 #2a3c43，和链接同色。
     按钮底单独一档 #30302c，比 --ink 更中性偏暖。
     对比度都验过：#667085 对白 4.97、对 #f7f7f7 4.64；白字对 #2a3c43 11.5。 */
  --ink: #2a3c43;
  --heading: #3b3b1a;
  --ink-soft: #667085;
  --muted: #667085;
  --line: #ebebeb;
  --hairline: #ebebeb;
  --soft: #f7f7f7;
  --white: #fff;
  --btn: #30302c;
  /* 模板页脚文字是 #797979，对白底只有 4.35 差一点，压到 #717171（4.70）。 */
  --footer-text: #717171;

  /* 强调色不跟模板。模板是 #e86831 橙，但它对白底只有 3.25:1 过不了 AA，
     而且客户 logo 是一枚红色圆标，橙按钮挨着红 logo 会浑。
     所以这里仍用客户 logo 的红压到 #d0121e（5.54:1）。
     真要换成模板橙的话：#e86831 压到 4.5 是 #cc4d17，改这三行就够。 */
  --accent: #d0121e;
  --accent-hover: #a90d17;
  --accent-soft: #fdeced;

  /* clothing3 的界面基本是直角的：整站只有按钮是 4px
     （--mfn-button-border-radius: 4px 4px 4px 4px），产品图、卡片、面板、
     输入框全是 0，圆的只有头像和图标按钮那几个 100% 的圆。
     所以这里分成两个 token：面（surface）一律直角，控件（control）才 4px。 */
  --radius: 0px;
  --radius-control: 4px;

  --font-body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;

  /* clothing3 的排版标度（1440px 实测）：正文 Figtree 16/26；标题 Plus Jakarta
     Sans 61/40/32/28/20/14，字重 600（只有 h1 是 700）；字距一律写绝对值 -1px，
     所以字号越大收得越松，而不是 em 那样等比。小号文字只有 13px 一档，
     按钮、次级链接、徽标全用它 —— 模板一共九档字号，别再往里塞 11.5/14.5。 */
  --container: 1440px;
  /* 模板页头 257px = 顶条 52（16+20+16）+ 主行 108（30+48+30）+ 分类导航行 97。
     我们没有第三行（分类走下拉），所以对齐前两行：52 + 108 = 160。 */
  --header-h: 108px;
  --ease: cubic-bezier(.2,.6,.3,1);
}

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

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.625;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; color: var(--heading); }
/* 深色区块里的标题不能是 #3b3b1a。自定义属性会继承，所以在区块上改写
   --heading 就够了，不用给每个标题选择器写一遍白色。 */
.promo, .cta-band, .catalogue, .page-hero, .trustbar { --heading: var(--white); }
/* 字距只给 h1/h2/h4 这几档展示级字号。h3/h5 在本主题里全是卡片标题（20px），
   -1px 在这个尺寸上会挤成一团，所以不给。 */
h1 { font-size: clamp(36px, 4.3vw, 61px); line-height: 1.2; font-weight: 700; letter-spacing: -1px; }
h2 { font-size: clamp(28px, 2.9vw, 40px); line-height: 1.2; letter-spacing: -1px; }
h3 { font-size: 20px; line-height: 1.5; }
h4 { font-size: 28px; line-height: 1.393; letter-spacing: -1px; }
h5 { font-size: 20px; line-height: 1.5; }
h6 { font-size: 14px; line-height: 1.286; font-weight: 500; }
h1, h2, h3 { text-wrap: balance; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed !important; top: 12px; left: 12px; z-index: 999;
  width: auto; height: auto; clip: auto; margin: 0;
  padding: 10px 16px; background: var(--ink); color: var(--white);
}

/* 模板：内容最宽 1440，窄于它时两侧各留 2%（1440 视口 → 28.8px，
   1366 → 27.3px，都实测对上了）。2% 在手机上只剩 8px，太贴边，
   窄屏另给固定 20px。 */
.container { width: min(96%, var(--container)); margin-inline: auto; }

/* ---------------------------------------------------------- 基础排版 */

/* clothing3 的板块是上 60px、下 20px：下方留白由下一块的 60px 顶上来，
   合起来 80px。带底色的那种上下都是 60px，否则色块会贴着内容收口。
   最后一块后面是页脚，没有下一块给它让位，也补回 60px。 */
.section { padding: 60px 0 20px; }
.section-soft { background: var(--soft); padding: 60px 0; }
.section:last-child { padding-bottom: 60px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 12px; color: var(--accent);
  font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 24px; height: 2px; background: currentColor; }
.eyebrow-light { color: #fff; }

.sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 28px; margin-bottom: 30px;
}
.sec-title {
  max-width: 800px; margin: 0;
  font-size: clamp(28px, 2.9vw, 40px); line-height: 1.2; letter-spacing: -1px;
}
/* 模板里商品网格那一档标题是 h3 的 32/42，比独立板块的 40/48 小一号。
   我们的标题全是 h2，用「右边有没有 VIEW ALL」来区分这两档，
   省得为一个字号在六个模板里加修饰类。 */
.sec-head:has(.text-link) .sec-title { font-size: clamp(26px, 2.3vw, 32px); line-height: 1.3125; }
.text-link {
  flex-shrink: 0; padding-bottom: 3px;
  border-bottom: 2px solid var(--ink);
  font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: normal; text-transform: uppercase;
  transition: color .2s, border-color .2s;
}
.text-link:hover { color: var(--accent); border-color: var(--accent); }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 28px; border: 2px solid var(--btn); border-radius: var(--radius-control);
  background: var(--btn); color: var(--white);
  font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: normal; text-transform: uppercase;
  transition: background .2s, border-color .2s, color .2s;
}
.btn:hover { background: var(--accent); border-color: var(--accent); }
.btn-light { background: var(--white); border-color: var(--white); color: var(--ink); }
.btn-light:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }
.btn-outline { background: transparent; color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--white); }

/* ---------------------------------------------------------- 页头 */

.site-topbar {
  background: var(--ink); color: #d8d9dc;
  font-size: 13px; letter-spacing: .08em;
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 52px; }
.topbar-note { margin: 0; text-transform: uppercase; }
.topbar-links { display: flex; gap: 22px; }
.topbar-links a:hover { color: var(--white); }

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--white);
  border-bottom: 1px solid var(--hairline);
  transition: box-shadow .25s;
}
.site-header.is-stuck { box-shadow: 0 6px 26px rgba(20, 21, 26, .09); }

/* 模板主行三列：左菜单 532 / 中字标 376 / 右图标 533（1600 视口实测）。
   1fr auto 1fr 让中间那列永远居中，和左右内容宽不宽无关——
   我们右边比模板多一个 REQUEST A QUOTE，用 space-between 的话 logo 会偏。 */
.header-main {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 24px;
  min-height: var(--header-h);
}
.brand { display: flex; align-items: center; gap: 12px; justify-self: center; }
.brand img { width: 46px; height: auto; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.2; }
.brand-copy strong { font-size: 17px; letter-spacing: -.02em; }
.brand-copy span { font-size: 11px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }

.main-navigation { justify-self: start; min-width: 0; }
.main-navigation ul {
  display: flex; align-items: center; gap: 26px;
  margin: 0; padding: 0; list-style: none;
}
/* 模板主行的功能菜单是 Figtree 15 w500，不加粗（w700 是第三行分类条那档，
   见 .catbar-item 上面那段）。 */
.main-navigation a {
  position: relative; display: block; padding: 6px 0;
  font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: normal; text-transform: uppercase;
}
.main-navigation a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--accent); transition: right .25s;
}
.main-navigation a:hover::after,
.main-navigation .current-menu-item > a::after { right: 0; }

/* 分类 mega menu：20 个分类铺成多列面板 */
.mega {
  /* 面板贴着主行的下沿展开，盖住第三行的分类条——top: 100% 是相对
     position: sticky 的 .site-header 算的，那会落到整个页头（含分类条）
     底下，离触发它的 PRODUCTS 差着一整行。 */
  position: absolute; left: 0; right: 0; top: var(--header-h); z-index: 5;
  /* z-index 不能省：分类条的每一项都是 position: relative（底部那条下划线
     要定位），在 DOM 里又排在面板后面，不给层级的话它们会透到面板上面。 */
  background: var(--white); border-top: 1px solid var(--hairline);
  box-shadow: 0 20px 40px rgba(20, 21, 26, .12);
}
.mega[hidden] { display: none; }
.mega-inner { padding: 32px 0 36px; }
.mega-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 4px 20px;
}
.mega-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: var(--radius);
  font-size: 15px; font-weight: 500; line-height: 1.5; transition: background .18s;
}
.mega-item:hover { background: var(--soft); color: var(--accent); }
.mega-item img { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
.mega-item span { display: flex; align-items: baseline; gap: 7px; }
.mega-item small { color: var(--muted); font-size: 13px; }
.mega-all {
  display: inline-block; margin-top: 20px;
  font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: normal; text-transform: uppercase;
  border-bottom: 2px solid var(--accent); padding-bottom: 2px;
}

/* 模板的图标区是四个 72×48 的方格紧挨着排，图标 24×24 居中，格间不留空。
   我们少一格心愿单，剩下 account / search / cart 三格。 */
.header-actions { display: flex; align-items: center; gap: 0; justify-self: end; }
.icon-button {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 48px; border-radius: var(--radius);
  transition: background .18s, color .18s;
}
.icon-button:hover { background: var(--soft); color: var(--accent); }
.icon-button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* 购物车那格模板量到 121px：24 留白 + 24 图标 + 10 间距 + 金额 + 24 留白。 */
.cart-link { width: auto; padding: 0 24px; gap: 10px; }
/* 角标定位挂在图标上而不是格子上——购物车那格因为带金额比别人宽，
   贴着格子右边算会跑到金额外面去。 */
.icon-badge { position: relative; display: inline-flex; }
.cart-total { font-size: 13px; font-weight: 700; line-height: 26px; color: var(--ink); white-space: nowrap; }
.cart-count {
  position: absolute; top: -5px; right: -12px;
  min-width: 18px; height: 17px; padding: 3px;
  border-radius: 9px; background: var(--accent); color: var(--white);
  font-size: 11px; font-weight: 400; line-height: 11px; text-align: center;
}
.cart-count.is-empty { display: none; }
.header-cta {
  margin-left: 10px; padding: 12px 22px; border-radius: var(--radius-control);
  background: var(--accent); color: var(--white);
  font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: normal; text-transform: uppercase;
  transition: background .2s;
}
.header-cta:hover { background: var(--accent-hover); }
.menu-toggle { display: none; }

/* 页头第三行。模板这行 97px（上 30 + 37 内容 + 30），整幅居中，
   文字是 Figtree 15 w500，和主行的功能菜单同一档字重。 */
.header-catbar { border-top: 1px solid var(--hairline); }
.catbar-inner {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0 34px;
  min-height: 97px;
}
.catbar-item {
  position: relative; padding: 6px 0;
  /* 实测模板这一行：Plus Jakarta Sans 13/19.5 w700，不加字距。
     和主行那排功能菜单（Figtree 15 w500）刚好反过来——小一号但更重，
     所以两行读起来是两个层级，不是同一排菜单换了行。 */
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700; line-height: 1.5; letter-spacing: normal;
  text-transform: uppercase; white-space: nowrap;
}
.catbar-item::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--accent); transition: right .25s;
}
.catbar-item:hover::after { right: 0; }
.catbar-all { font-weight: 700; }

.search-panel { border-top: 1px solid var(--hairline); background: var(--soft); }
.search-panel[hidden] { display: none; }
.beile-search { display: flex; gap: 10px; padding: 22px 0; }
.beile-search input[type="search"] {
  flex: 1; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius-control);
  background: var(--white);
}
.beile-search button {
  padding: 14px 28px; border-radius: var(--radius-control);
  background: var(--btn); color: var(--white);
  font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: normal; text-transform: uppercase;
}
.beile-search button:hover { background: var(--accent); }

/* ---------------------------------------------------------- 首屏轮播 */

.hero { position: relative; background: var(--soft); overflow: hidden; }
.hero-track { position: relative; }
.hero-slide { display: none; }
.hero-slide.is-active { display: block; }
.hero-slide img { width: 100%; height: auto; }

.hero-dots {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; gap: 9px;
}
.hero-dot {
  width: 9px; height: 9px; border-radius: 50%; padding: 0;
  background: rgba(20, 21, 26, .28); transition: background .2s, width .2s;
}
.hero-dot.is-active { width: 26px; border-radius: 5px; background: var(--accent); }

.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  background: rgba(255, 255, 255, .88); color: var(--ink);
  transition: background .2s;
}
.hero-arrow:hover { background: var(--white); color: var(--accent); }
.hero-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero-prev { left: 20px; }
.hero-next { right: 20px; }

/* ---------------------------------------------------------- 信任条 */

/* 模板里对位的是那条深色福利带：底色 #2a3c43（和顶条同一个色）、白字。
   我们原来是白底细线分格，200px 的高度配白底会空得发虚，改深色正好。 */
.trustbar { background: var(--ink); color: var(--white); }
.trustbar-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(255, 255, 255, .14);
}
.trust-item {
  display: flex; align-items: center; gap: 14px;
  /* 模板对位的那条深色福利带整体 201px。带高写成 min-height 而不是靠
     上下留白顶出来：四条说明的字数不一样，靠留白算的话哪条一换行整条带
     就跟着长高——这一版就先后量到 179 / 226 两个值。min-height 之后
     文案长短不再影响带高，内容仍由 align-items: center 居中。 */
  padding: 24px; min-height: 200px; background: var(--ink);
}
.trust-icon {
  width: 28px; height: 28px; flex-shrink: 0;
  /* 红图标压在 #2a3c43 上只有 1.47:1，等于看不见，深底上一律走白。 */
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
/* 模板这两行是同一档 16/26，标题只是加粗，不是「大标题 + 小说明」。 */
.trust-item strong { display: block; font-size: 16px; line-height: 26px; }
.trust-item span { display: block; font-size: 16px; line-height: 26px; color: rgba(255, 255, 255, .78); }

/* ---------------------------------------------------------- 分类宫格 */

/* clothing3 的分类条是一整块浅底、靠 1px 细线分格，不是 20 个各自带边框和
   投影的卡片。原来那版一屏 20 个描边小盒子，正是「圆角/盒子太多」的来源。
   分格线用 grid gap 让底色透出来，和上面的 trustbar 是同一个手法。 */
.cat-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.cat-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 28px 16px 24px; text-align: center;
  background: var(--soft);
  transition: background .2s, color .2s;
}
.cat-card:hover { background: var(--white); color: var(--accent); }
.cat-icon { display: flex; align-items: center; justify-content: center; height: 56px; }
.cat-icon img { width: auto; max-height: 56px; object-fit: contain; }
/* 模板的分类标签用正文字体 16/26 常规字重，不是标题体。 */
.cat-card h3 { margin: 0; font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.625; }
.cat-count { font-size: 13px; color: var(--muted); }

/* ---------------------------------------------------------- 产品卡 */

.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 22px; }

.pcard { display: flex; flex-direction: column; }
.pcard-media {
  position: relative; overflow: hidden;
  background: var(--soft);
  aspect-ratio: 1 / 1;
}
.pcard-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease);
}
.pcard:hover .pcard-media img { transform: scale(1.045); }
.pcard-flag {
  position: absolute; top: 12px; left: 12px;
  padding: 5px 10px;
  background: var(--ink); color: var(--white);
  font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase;
}
/* 「Made to order」在左上角，新品徽标走右上角，两个同时出现也不重叠。 */
.pcard-flag-new { left: auto; right: 12px; background: var(--accent); }

.pcard-body { display: flex; flex-direction: column; gap: 5px; padding-top: 14px; flex: 1; }
.pcard-sku { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pcard-title { margin: 0; font-size: 20px; line-height: 1.5; font-weight: 600; letter-spacing: normal; }
.pcard-title a:hover { color: var(--accent); }
.pcard-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 10px;
}
.pcard-price { font-size: 18px; font-weight: 400; line-height: 1.444; color: var(--accent); }
.pcard-cta {
  flex-shrink: 0; padding-bottom: 2px; border-bottom: 1.5px solid var(--line);
  font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: normal; text-transform: uppercase;
  color: var(--ink-soft); transition: color .2s, border-color .2s;
}
.pcard-cta:hover { color: var(--accent); border-color: var(--accent); }

/* ---------------------------------------------------------- 最新产品横排

   10 款排不进 4 列网格，做成横向轨道：一屏 4 张，其余滑动看。
   用 grid-auto-columns 而不是给卡片写死宽度，卡片本身还是 .pcard，
   和网格里的那套完全一致。 */

.prail { position: relative; }
.prail-track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 22px) / 4);
  gap: 22px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* 卡片有 hover 上浮和进场位移，轨道贴着边裁会把它们切掉。 */
  padding: 6px 2px 14px;
  /* 吸附位置要把左边那 2px 算进去。不写的话首张卡片的吸附点在 scrollLeft=2，
     页面一布局浏览器就自己吸过去，加上下面的 scroll-behavior:smooth 是一段滚动
     动画，Chrome 当成用户滚动，从此不再记录 LCP，整个首页一条 LCP 都没有
     （PageSpeed 报 NO_LCP，2026-10-21）。 */
  scroll-padding-inline: 2px;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.prail-track > * { scroll-snap-align: start; }
.prail-track::-webkit-scrollbar { height: 4px; }
.prail-track::-webkit-scrollbar-thumb { background: var(--line); }
.prail-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.prail-nav {
  position: absolute; top: 34%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--white); color: var(--ink);
  box-shadow: 0 6px 20px rgba(20, 21, 26, .12);
  cursor: pointer; z-index: 3;
}
.prail-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.prail-nav:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.prail-prev { left: -21px; }
.prail-next { right: -21px; }
.prail-nav[disabled] { opacity: .35; cursor: default; }
.prail-nav[disabled]:hover { background: var(--white); color: var(--ink); border-color: var(--line); }

/* ---------------------------------------------------------- 促销带 */

.promo, .cta-band {
  position: relative; padding: 110px 0;
  background-size: cover; background-position: center;
  color: var(--white);
}
.promo::before, .cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(15, 16, 20, .82) 0%, rgba(15, 16, 20, .45) 60%, rgba(15, 16, 20, .2) 100%);
}
.promo .container, .cta-band .container { position: relative; }
.promo-copy, .cta-copy { max-width: 560px; }
.promo-copy h2, .cta-copy h2 {
  margin: 0 0 14px; font-size: clamp(28px, 2.9vw, 40px); line-height: 1.2; letter-spacing: -1px;
}
.promo-copy p, .cta-copy p { margin: 0 0 24px; color: rgba(255, 255, 255, .88); }

/* ---------------------------------------------------------- 图文分栏 */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split-visual { position: relative; }
.split-visual img { width: 100%; border-radius: var(--radius); }
.split-pill {
  position: absolute; top: 20px; left: 20px;
  padding: 9px 16px;
  background: var(--white); color: var(--ink);
  font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase;
}
.split-copy p { color: var(--ink-soft); max-width: 54ch; }
.stat-row { display: flex; gap: 40px; margin: 28px 0; }
.stat strong { display: block; font-size: 40px; line-height: 1.2; letter-spacing: -1px; }
.stat span { font-size: 14px; color: var(--muted); }

/* ---------------------------------------------------------- 定制流程
   关于我们页的「01/02/03」。模板整页没有一处描边卡片，分栏靠的是列与列
   之间的一条细线，所以这里也不画框，只在列首竖一条 1px。 */

.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.process-step { padding: 4px 44px; border-left: 1px solid var(--line); }
.process-step:first-child { padding-left: 0; border-left: 0; }
.process-step:last-child { padding-right: 0; }
.process-num {
  display: block; margin-bottom: 14px;
  font-family: var(--font-display); font-size: 40px; font-weight: 600;
  line-height: 1.2; letter-spacing: -1px; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.process-step h3 { margin: 0 0 8px; }
.process-step p { margin: 0; color: var(--ink-soft); }

/* ---------------------------------------------------------- 合作伙伴 */

.partners { padding: 44px 0; border-block: 1px solid var(--hairline); }
.partners-label {
  margin: 0 0 22px; text-align: center;
  font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
/* logo 一行改成了无缝跑马灯，样式在文件末尾的「合作伙伴跑马灯」一节。 */

/* ---------------------------------------------------------- 品牌故事 */

.story-inner { max-width: 760px; }
.story-inner p { color: var(--ink-soft); margin: 0 0 16px; }
.story-inner .btn { margin-top: 12px; }

/* ---------------------------------------------------------- 索取目录 */

.catalogue { padding: 64px 0; background: var(--ink); color: var(--white); }
.catalogue-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap;
}
.catalogue h2 { margin: 0 0 8px; font-size: clamp(24px, 2.3vw, 32px); line-height: 1.3125; letter-spacing: -1px; }
.catalogue p { margin: 0; color: rgba(255, 255, 255, .74); max-width: 58ch; }

/* ---------------------------------------------------------- 内页头 */

.page-hero {
  position: relative; padding: 96px 0 84px;
  background-size: cover; background-position: center; color: var(--white);
}
.page-hero::before { content: ""; position: absolute; inset: 0; background: rgba(15, 16, 20, .58); }
.page-hero .container { position: relative; }
.page-hero h1 { margin: 8px 0 0; font-size: clamp(36px, 4.3vw, 61px); line-height: 1.2; letter-spacing: -1px; }
.breadcrumbs { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.breadcrumbs a:hover { color: var(--white); }

.content-wrap { width: min(calc(100% - 44px), 820px); margin: 64px auto 90px; }
.content-wrap h2 { font-size: 28px; line-height: 1.393; letter-spacing: -1px; }

/* ---------------------------------------------------------- 关于页
   版式照 clothing3 的 /about/：整幅首屏压一行超大品牌字、四六分栏（图出血到
   视口右缘）、浅底上留 4px 缝的白色团队卡、深色数字带。 */

/* 首屏：其他内页是 96/84 的窄带，这一页按模板放到整幅高度。 */
.page-hero-about { padding: 120px 0 0; overflow: hidden; }
.page-hero-copy { max-width: 660px; }
.page-hero-about h1 { margin: 8px 0 0; }
.page-hero-lead {
  margin: 20px 0 30px; max-width: 52ch;
  font-size: 18px; line-height: 1.667; color: rgba(255, 255, 255, .86);
}
/* 品牌大字：贴着首屏底边，字号跟着视口走，太窄时由 .page-hero-about 的
   overflow 从右边裁掉——模板那行也是横贯到边的。
   .78 的行高比字形本身矮，行盒底边会切进字肚子里，所以补一段跟着字号走的
   下内边距（写 em 而不是 px：窄屏字号只有桌面的三分之一）。 */
.hero-wordmark {
  display: block; position: relative; margin-top: 76px; padding-bottom: .16em;
  font-family: var(--font-display); font-weight: 800;
  font-size: min(11.6vw, 158px); line-height: .78; letter-spacing: -.045em;
  color: rgba(255, 255, 255, .17); white-space: nowrap;
}

/* 品牌故事：四六分栏。图规规矩矩待在容器里，不出血到视口边缘。 */
.about-story { padding: 100px 0; }
.about-story-inner {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: 96px; align-items: center;
}
.about-story-copy h2 {
  margin: 0 0 18px;
  font-size: clamp(24px, 2.1vw, 28px); line-height: 1.393; letter-spacing: -1px;
}
.about-story-copy p { margin: 0 0 16px; color: var(--ink-soft); }
.about-story-visual { margin: 0; }
/* 高宽比按模板来（那张 864×880，几乎是正方）。原来写 4/5 的话在 794px 的
   栏宽下要 993px 高，比整段正文还高出一大截，图就压过文字了。 */
.about-story-visual img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.check-list { list-style: none; margin: 24px 0 26px; padding: 0; display: grid; gap: 9px; }
/* 关于页的清单是那一栏的最后一块，26px 会把整栏的垂直居中带偏。 */
.check-list:last-child { margin-bottom: 0; }
.check-list li { position: relative; padding-left: 27px; color: var(--ink-soft); font-size: 16px; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 15px; height: 8px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* 团队：标题占左半，右侧四分之一放一句说明——模板就是这个错位。 */
.team-head {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 28px; align-items: end; margin-bottom: 34px;
}
.team-head p { margin: 0 0 0 auto; max-width: 360px; color: var(--muted); }

/* 卡片之间留 4px 的缝，浅色底透出来就是分隔线，不用真画边框。
   照片压在卡片底部（左右各让开 40px 的内边距，下边齐平），
   所以正文用 margin-top: auto 把图推下去，卡片再高也不会飘。 */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.team-card {
  display: flex; flex-direction: column;
  padding: 40px 40px 0; background: var(--white); border-radius: var(--radius);
}
.team-card h3 { margin: 0; font-size: 28px; line-height: 1.393; letter-spacing: -1px; }
.team-role { margin: 6px 0 0; font-size: 14px; font-weight: 500; line-height: 1.286; color: var(--muted); }
.team-bio { margin: 18px 0 0; color: var(--ink-soft); }
.team-mail {
  margin-top: 14px; align-self: flex-start;
  border-bottom: 1px solid var(--line);
  font-size: 14px; color: var(--ink-soft);
  transition: color var(--dur-base), border-color var(--dur-base);
}
.team-mail:hover { color: var(--accent); border-color: var(--accent); }
.team-card img {
  width: 100%; margin-top: auto; padding-top: 32px;
  aspect-ratio: 9 / 10; object-fit: cover;
  /* padding 走内容盒：默认的 border-box 会把这 32px 一起算进 aspect-ratio，
     图自己反而矮一截、脸被裁掉。 */
  box-sizing: content-box;
}

/* 数字带：模板压在同一块浅底里，是整条深色的横条。 */
.stat-bar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px; margin-top: 60px; padding: 40px 30px;
  background: var(--ink); color: var(--white);
}
.stat-bar .stat { text-align: center; }
.stat-bar .stat strong { color: var(--white); }
.stat-bar .stat span { color: rgba(255, 255, 255, .7); }

/* ---------------------------------------------------------- FAQ */

.faq-list { display: grid; gap: 12px; max-width: 900px; }
.faq-list details {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--white);
}
.faq-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; cursor: pointer;
  font-size: 16px; font-weight: 600; line-height: 1.5; list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; flex-shrink: 0; font-size: 22px; font-weight: 400; color: var(--accent);
}
.faq-list details[open] summary::after { content: "–"; }
.faq-answer { padding: 0 24px 22px; color: var(--ink-soft); }
.faq-answer > * { margin: 0; }
.faq-answer > * + * { margin-top: 14px; }
/* 第 07 条是一份带三段清单的手册，问答区要能排小标题和列表。 */
.faq-answer h3 { font-size: 16px; font-weight: 600; color: var(--ink); }
.faq-answer h3 + ul { margin-top: 8px; }
.faq-answer ul { padding-left: 20px; display: grid; gap: 8px; }
.faq-answer li { line-height: 1.7; }

/* ---------------------------------------------------------- 下载页 */

.download-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.download-card {
  padding: 32px 28px; border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .2s, transform .2s;
}
.download-card:hover { border-color: var(--ink); transform: translateY(-3px); }
.download-icon { display: block; font-size: 28px; color: var(--accent); margin-bottom: 14px; }
.download-card h3 { margin: 0 0 8px; font-size: 20px; }
.download-card p { margin: 0 0 16px; font-size: 16px; color: var(--muted); }
/* 卡片高度不一（说明有长有短），按钮统一贴底才排得齐。 */
.download-card { display: flex; flex-direction: column; }
.download-card .btn { margin-top: auto; align-self: flex-start; }
.download-meta {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  margin: 0 0 18px !important;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink) !important;
}
.download-meta span { color: var(--muted); letter-spacing: .04em; text-transform: none; }

/* 清单缺失时的兜底条。 */
.note-band {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 28px 30px; background: var(--soft);
}
.note-band p { margin: 0; max-width: 62ch; color: var(--ink-soft); }
@media (max-width: 860px) {
  .note-band { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------- 联系页 */

/* minmax(0, …)：下拉框按最长的选项撑开最小宽度，1fr 会被它顶宽、把左栏挤成一条。 */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 60px; }
.contact-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 20px; }
.contact-list li { display: flex; gap: 14px; }
.contact-list li > span:first-child {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-size: 15px;
}
.contact-list b { display: block; font-size: 16px; }
.contact-list a { font-size: 16px; color: var(--ink-soft); }
.contact-list a:hover { color: var(--accent); }

.contact-form {
  padding: 34px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft);
}
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 13px; font-weight: 700; letter-spacing: normal; text-transform: uppercase; }
.form-field input, .form-field textarea, .form-field select {
  padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--white);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--ink); outline: none; }
/* 下拉框的箭头自己画：系统默认的在 Safari 里是一个灰色胶囊，和输入框对不齐。 */
.form-field select {
  width: 100%; min-width: 0; appearance: none; padding-right: 40px; text-overflow: ellipsis;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232a3c43' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 15px center;
}
.form-field input[type="date"] { min-height: 50px; }
.form-notice {
  margin: 0 0 20px; padding: 14px 18px; border-radius: var(--radius);
  background: #e8f4ec; color: #17603c; font-size: 16px;
}
.form-notice.is-error { background: #fdecec; color: #a3121b; }
/* 跳回 #enquiry 时别让 sticky 页头压住提示 */
.contact-form { scroll-margin-top: calc(var(--header-h) + 24px); }

/* 从产品页「询价」过来时，表单上方标出问的是哪一款 */
.enquiry-product {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 20px; padding: 12px; border: 1px solid var(--line); background: var(--white);
}
.enquiry-product img { flex-shrink: 0; width: 64px; height: 64px; object-fit: cover; }
.enquiry-product-label { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; color: var(--ink-soft); }
.enquiry-product a { font-size: 16px; font-weight: 700; color: var(--ink); }
.enquiry-product a:hover { color: var(--accent); }
.enquiry-product-sku { display: block; font-size: 14px; color: var(--ink-soft); }

/* ---------------------------------------------------------- 悬浮客服 */

.service-rail { position: fixed; right: 20px; bottom: 22px; z-index: 70; }
.service-toggle {
  display: flex; align-items: center; gap: 9px;
  margin-left: auto; padding: 13px 20px; border-radius: 999px;
  background: var(--accent); color: var(--white);
  font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: normal;
  box-shadow: 0 10px 28px rgba(208, 18, 30, .32);
  transition: background .2s;
}
.service-toggle:hover { background: var(--accent-hover); }
.service-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* 面板绝对定位在气泡上方，不占 aside 的位置。收起时它是 visibility:hidden
   （不是 display:none，要留给过渡），留在文档流里的话 aside 就一直有 320×688
   那么大：气泡被顶到屏幕中上部，脚本摘掉 [hidden] 的那一刻整块跳上去
   （首页 CLS 0.54），透明的 aside 还会把右下角变成点不动的死区。 */
.service-panel {
  position: absolute; right: 0; bottom: calc(100% + 12px);
  width: min(320px, calc(100vw - 40px));
  max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 22px;
  border: 1px solid var(--line); background: var(--white);
  box-shadow: 0 20px 50px rgba(20, 21, 26, .18);
}
.service-panel[hidden] { display: none; }
.service-head { margin: 0 0 16px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.service-person + .service-person { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.service-name { margin: 0 0 8px; font-size: 16px; font-weight: 700; }
.service-name small { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
.service-person ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.service-person li, .service-person a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 13px;
}
.service-person a { padding: 4px 0; }
.service-person a:hover { color: var(--accent); }
.service-person span:last-child { color: var(--muted); text-align: right; overflow-wrap: anywhere; }
.service-copy { padding: 4px 0; }
.service-cta {
  display: block; margin-top: 18px; padding: 12px; border-radius: var(--radius-control);
  background: var(--btn); color: var(--white); text-align: center;
  font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: normal; text-transform: uppercase;
}
.service-cta:hover { background: var(--accent); }

/* ---------------------------------------------------------- 页脚 */

/* 模板页脚和它的普通板块同一套留白：上 60 下 20，底栏自己 107px。
   底色也照模板——它整块是白的，不是深色板。 */
.site-footer {
  padding: 60px 0 20px; border-top: 1px solid var(--line);
  background: var(--white); color: var(--footer-text); font-size: 14px;
}
.footer-main { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 44px; padding-bottom: 52px; }
.footer-brand img { width: 54px; margin-bottom: 16px; }
.footer-brand p { margin: 0 0 20px; max-width: 42ch; line-height: 1.6; }
.footer-social { display: flex; gap: 9px; }
.footer-social a {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line);
  font-size: 13px; font-weight: 700; color: var(--ink);
  transition: background .2s, border-color .2s, color .2s;
}
.footer-social a:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }
.footer-title {
  margin: 0 0 16px; color: var(--ink);
  /* 模板的页脚栏目名是 h6：Plus Jakarta Sans 14/18 w500，不加字距也不转大写。 */
  font-family: var(--font-display);
  font-size: 14px; font-weight: 500; line-height: 1.286; letter-spacing: normal; text-transform: none;
}
.footer-menu, .footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-menu a:hover, .footer-contact a:hover { color: var(--accent); }
.footer-contact li { display: grid; gap: 3px; }
.footer-contact b { color: var(--ink); font-size: 14px; }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 42px 0 44px; border-top: 1px solid var(--line);
  font-size: 13px;
}

/* ---------------------------------------------------------- WooCommerce */

.woocommerce-page main.site-main,
.woocommerce main.site-main { width: min(calc(100% - 44px), var(--container)); margin: 0 auto; padding: 54px 0 96px; }
.woocommerce .woocommerce-breadcrumb { margin-bottom: 24px; font-size: 13px; color: var(--muted); }
.woocommerce-products-header__title.page-title,
.woocommerce div.product .product_title {
  font-size: clamp(30px, 3.2vw, 40px); line-height: 1.2; letter-spacing: -1px;
}
.woocommerce .term-description { max-width: 70ch; color: var(--ink-soft); }

.woocommerce ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 22px; margin: 26px 0 0; padding: 0; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product { float: none !important; width: auto !important; margin: 0 !important; }
.woocommerce ul.products li.product a img {
  margin: 0 0 14px; background: var(--soft);
  aspect-ratio: 1 / 1; object-fit: cover;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  padding: 0; font-size: 20px; font-weight: 600; line-height: 1.5; letter-spacing: normal;
}
.woocommerce ul.products li.product .price { color: var(--accent); font-size: 18px; font-weight: 400; line-height: 1.444; }
.woocommerce ul.products li.product .button { margin-top: 10px; }

.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce div.product form.cart .button {
  padding: 13px 24px; border-radius: var(--radius-control);
  background: var(--btn); color: var(--white);
  font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: normal; text-transform: uppercase;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce div.product form.cart .button:hover {
  background: var(--accent); color: var(--white);
}
.woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--accent); }
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--accent-hover); }

.woocommerce span.onsale {
  min-width: auto; min-height: auto; padding: 7px 12px; border-radius: 0;
  background: var(--accent); font-size: 13px; font-weight: 700; letter-spacing: .06em; line-height: 1;
}
.woocommerce div.product div.images img { border-radius: var(--radius); }
.woocommerce div.product p.price, .woocommerce div.product span.price {
  color: var(--accent); font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -1px;
}
.woocommerce-product-details__short-description { color: var(--ink-soft); }
.woocommerce div.product .woocommerce-tabs ul.tabs li { border-radius: var(--radius) var(--radius) 0 0; }
.woocommerce table.shop_attributes th, .woocommerce div.product table th { text-align: left; }
.woocommerce div.product table { width: 100%; border-collapse: collapse; margin: 0 0 24px; }
.woocommerce div.product table th, .woocommerce div.product table td {
  padding: 11px 14px; border: 1px solid var(--line); font-size: 16px;
}
.woocommerce div.product table th { width: 180px; background: var(--soft); font-weight: 600; }
.woocommerce table.shop_table { border-color: var(--line); }
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info { border-top-color: var(--accent); }
.woocommerce .woocommerce-message::before, .woocommerce .woocommerce-info::before { color: var(--accent); }
/* 分页是页面级控件，不是网格的一部分，所以要靠间距和居中把它摘出来。
   WooCommerce 原本靠 li.product 的 margin-bottom 顶出上方的空白，而网格化时
   那条被 `margin: 0 !important` 清掉了（否则 grid gap 会和它叠加），
   ul.products 的 margin-bottom 同样是 0，于是分页紧贴着最后一行的按钮
   ——实测只差 1px，看着像卡片上多出来的一颗按钮。

   88px 是对着下方那 96px（main 的 padding-bottom）配的：上下相当，
   分页才读成独立的一条，而不是被上面的网格「吸」过去。只给 56px 时
   上 56 下 96，就近原则仍然把它归到网格里。

   居中是把 WooCommerce 自己的 text-align:center 补回来——它写在 nav 上，
   而这里的 ul 是 flex 容器，不吃 text-align，之前左对齐是这么丢掉的，
   不是有意为之。左贴时它正好落在第一列按钮的正下方，更像那张卡片的一部分。

   wrap 是给窄屏兜底：26 页时这一行有 9 个格子，320px 的屏放不下。 */
.woocommerce nav.woocommerce-pagination { margin-top: 88px; }
.woocommerce nav.woocommerce-pagination ul {
  border: 0; gap: 6px;
  display: flex; flex-wrap: wrap; justify-content: center;
}
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  min-width: 40px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-control);
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--btn); color: var(--white); border-color: var(--btn); }

/* 询价说明框，挂在单品页价格下方 */
.beile-quote-box {
  margin: 22px 0; padding: 22px 24px;
  border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius);
  background: var(--soft);
}
.beile-quote-box p { margin: 0 0 16px; font-size: 16px; color: var(--ink-soft); }

/* ---------------------------------------------------------- 响应式 */

@media (max-width: 1180px) {
  .cat-grid { grid-template-columns: repeat(4, 1fr); }
  .mega-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 1024px) {
  /* 模板的窄屏页头是另一套结构，这里不跟：主行回到 74px，
     否则 52 + 108 = 160px 的固定页头在手机上要吃掉五分之一首屏。 */
  :root { --header-h: 74px; }
  /* 抽屉是 position: fixed，不占 flex 轨道，所以这里两端对齐就是
     「左 logo / 右图标」，不用管 DOM 里 nav 排在最前。 */
  .header-main { display: flex; justify-content: space-between; gap: 16px; }
  /* 20 个分类在抽屉里的面板中一个不少，窄屏不用再来一行。 */
  .header-catbar { display: none; }
  /* 三个 72px 的格子加汉堡按钮在窄屏放不下；金额模板自己也是 hide-mobile。 */
  .icon-button { width: 48px; }
  .cart-link { padding: 0 12px; }
  .cart-total { display: none; }
  .header-cta { display: none; }
  .menu-toggle { display: inline-flex; }
  .main-navigation {
    position: fixed; inset: 0; z-index: 80;
    display: none; padding: 88px 30px 40px;
    background: var(--white); overflow-y: auto;
  }
  .main-navigation.is-open { display: block; }
  .main-navigation ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-navigation li { border-bottom: 1px solid var(--hairline); }
  .main-navigation a { padding: 16px 0; }
  .main-navigation a::after { display: none; }
  .mega { position: static; box-shadow: none; border: 0; }
  .mega-inner { padding: 20px 0 0; width: 100%; }
  .mega-grid { grid-template-columns: repeat(2, 1fr); }
  .split, .contact-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .about-story { padding: 72px 0; }
  .about-story-inner { grid-template-columns: 1fr; gap: 40px; }
  .about-story-visual img { aspect-ratio: 4 / 3; }
  .page-hero-about { padding: 96px 0 0; }
  .hero-wordmark { margin-top: 56px; }
}

@media (max-width: 1280px) {
  /* 箭头故意探出轨道半个身位（42px 的一半），容器留白从固定 22px 变成 2%
     之后，1025~1030 这一段留白只剩 20px，箭头外沿正好蹭到视口边：
     滚不动，但 scrollWidth 会进位 1px，也让箭头被切掉半像素。收到 8px。 */
  .prail-prev { left: -8px; }
  .prail-next { right: -8px; }
}

@media (max-width: 860px) {
  /* 2% 在手机上只剩 8px 太贴边，窄屏改固定 20px。 */
  .container { width: calc(100% - 40px); }
  .section { padding: 60px 0; }
  .woocommerce nav.woocommerce-pagination { margin-top: 64px; }
  .trustbar-grid { grid-template-columns: repeat(2, 1fr); }
  .pgrid, .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 26px 16px; }
  /* 价格涨到 18px、询价链接涨到 13px 之后，两个并排在半屏宽的卡片里放不下，
     会顶出几像素横向滚动。窄屏改成上下两行。 */
  .pcard-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
  .prail-track { grid-auto-columns: calc((100% - 16px) / 2); gap: 16px; }
  /* 窄屏本来就是手势滑动，箭头挤在容器边上会压到卡片。 */
  .prail-nav { display: none; }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .download-grid { grid-template-columns: 1fr; }
  /* 竖线换成横线：单栏下列与列的分隔改由上边框来做。 */
  .process-grid { grid-template-columns: 1fr; gap: 28px; }
  .process-step { padding: 26px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .process-step:first-child { border-top: 1px solid var(--line); }
  .team-head { grid-template-columns: 1fr; gap: 12px; }
  .team-head p { margin-left: 0; }
  .stat-bar { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; padding: 34px 24px; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .topbar-links { display: none; }
  .topbar-inner { min-height: 44px; }
  .trust-item { padding: 20px; min-height: 128px; }
  .promo, .cta-band { padding: 74px 0; }
  .promo::before, .cta-band::before { background: rgba(15, 16, 20, .62); }
  .hero-arrow { display: none; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .container { width: calc(100% - 30px); }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-main { grid-template-columns: 1fr; }
  .prail-track { grid-auto-columns: 78%; }
  .stat-row { gap: 24px; }
  .team-grid { grid-template-columns: 1fr; }
  .team-card { padding: 30px 30px 0; }
  .team-card h3 { font-size: 24px; }
  .page-hero-lead { font-size: 16px; }
  .brand-copy { display: none; }
  .service-rail { right: 14px; bottom: 14px; }
  /* 只藏视觉，不能 display:none：那样按钮就没有无障碍名称了。 */
  .service-toggle span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .service-toggle { padding: 14px; border-radius: 50%; }
}

/* 补：子页面沿用的小类 */
.section-intro { max-width: 60ch; margin: 14px 0 0; color: var(--ink-soft); }

/* 蜜罐字段：视觉与无障碍树里都不存在，但机器人读得到 */
.beile-hp {
  position: absolute !important;
  left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
.contact-plain { display: block; font-size: 16px; color: var(--ink-soft); }

/* ==========================================================================
   动效
   --------------------------------------------------------------------------
   三条红线（见 CLAUDE.md 与需求约定）：
   ① 只动 transform / opacity，不动会触发重排的属性；
   ② 首屏 LCP 元素（hero 图、h1）不参与 opacity:0 的进场揭示；
   ③ prefers-reduced-motion 下要把揭示元素显式还原成可见——文件开头那条
      `transition-duration:.01ms` 只压时长，救不了 `opacity:0`。

   揭示样式全部挂在 `.has-motion` 下（由 <head> 里的一行内联脚本添加），
   脚本没跑起来时页面是完整可见的，不会白屏。
   选择器统一裹 :where() 把权重压成 0，好让 `.pcard:hover` 这类交互态
   仍然能盖过揭示后的 `transform:none`。
   ========================================================================== */

:root {
  --dur-fast: .18s;
  --dur-base: .32s;
  --dur-slow: .6s;
  --ease-out: cubic-bezier(.16,.84,.44,1);
}

/* ---------------------------------------------------------- 进场揭示 */

/* 揭示用 animation 而不是 transition，是被组件样式逼出来的：
   .pcard / .review / .trust-item 这些本身就声明了自己的 transition，
   权重都高过这里的 :where()，一条 `transition: opacity, transform` 写在
   这儿会被它们整条盖掉——卡片于是不淡入、直接蹦出来。animation 和
   transition 各走各的通道，谁也盖不了谁。

   fill-mode 用 backwards 而不是 forwards：forwards 会一直按住 transform，
   动画跑完之后 `.pcard:hover` 的抬升就再也生效不了了。backwards 只管
   开跑之前（含延迟期间）的状态，跑完交还给正常层叠，末态由下面那条
   `opacity: 1` 负责。 */
:where(.has-motion [data-reveal]:not(.is-in)),
:where(.has-motion [data-reveal-group]:not(.is-in)) > * { opacity: 0; }
:where(.has-motion [data-reveal].is-in),
:where(.has-motion [data-reveal-group].is-in) > * {
  animation: beile-reveal .7s var(--ease-out) backwards;
}
/* 只写 from：省掉的那一半由元素自己的计算值补上，所以本来就半透明的
   元素（合作伙伴 logo 是 opacity .6）不会被动画的终点强行拉成不透明。
   隐藏态也挂在 :not(.is-in) 上，好让末态完全交还给正常层叠。 */
@keyframes beile-reveal {
  from { opacity: 0; transform: translateY(20px); }
}

/* 组内错峰。第 8 个之后不再加延迟，否则 20 个分类要排到 1.4 秒开外。 */
:where(.has-motion [data-reveal-group]) > :nth-child(2) { animation-delay: .07s; }
:where(.has-motion [data-reveal-group]) > :nth-child(3) { animation-delay: .14s; }
:where(.has-motion [data-reveal-group]) > :nth-child(4) { animation-delay: .21s; }
:where(.has-motion [data-reveal-group]) > :nth-child(5) { animation-delay: .28s; }
:where(.has-motion [data-reveal-group]) > :nth-child(6) { animation-delay: .33s; }
:where(.has-motion [data-reveal-group]) > :nth-child(7) { animation-delay: .38s; }
:where(.has-motion [data-reveal-group]) > :nth-child(n+8) { animation-delay: .42s; }

/* 分类宫格是 5 列 20 格，按列错峰形成一道从左往右的波，
   比按顺序排到第 20 个要自然得多。 */
:where(.has-motion .cat-grid) > :nth-child(5n+1) { animation-delay: 0s; }
:where(.has-motion .cat-grid) > :nth-child(5n+2) { animation-delay: .06s; }
:where(.has-motion .cat-grid) > :nth-child(5n+3) { animation-delay: .12s; }
:where(.has-motion .cat-grid) > :nth-child(5n+4) { animation-delay: .18s; }
:where(.has-motion .cat-grid) > :nth-child(5n+5) { animation-delay: .24s; }

/* 图片就位后淡入，替掉「加载完啪一下出现」。同样走 animation：
   产品图的 transition 里排着 hover 放大，用 transition 做淡入会打架。 */
/* data-no-fade 是显式的退出口。跑马灯里的 logo 被 transform 推到视口右侧
   很远的地方，lazy 图在真正靠近之前不会加载，也就拿不到 .is-loaded——
   那样轨道上会出现一个个空洞。它们只是 3 个文件重复铺开的装饰件，
   直接不参与淡入最省事。 */
:where(.has-motion) img[loading="lazy"]:not(.is-loaded):not([data-no-fade]) { opacity: 0; }
:where(.has-motion) img[loading="lazy"].is-loaded {
  animation: beile-fade .45s var(--ease-out) backwards;
}
@keyframes beile-fade { from { opacity: 0; } }

/* ---------------------------------------------------------- 首屏轮播 */

/* 叠层交叉淡入。首张用 position:relative 撑出容器高度，
   其余绝对定位盖在上面；它们的 src 由 site.js 按需放出，
   见 front-page.php 里的说明。 */
.hero-slide { position: absolute; inset: 0; display: block; opacity: 0; pointer-events: none; }
.hero-slide:first-child { position: relative; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-slide:first-child img { height: auto; }
.has-motion .hero-slide { transition: opacity .9s var(--ease-out); }
.hero-slide.is-active { opacity: 1; pointer-events: auto; z-index: 1; }

/* 缓慢推近，让静态 banner 有呼吸。 */
.has-motion .hero-slide.is-active img { animation: beile-hero-pan 9.5s var(--ease) both; }
@keyframes beile-hero-pan {
  from { transform: scale(1.001); }
  to   { transform: scale(1.065); }
}

/* 圆点兼进度条，跑满 6.5 秒正好换片；鼠标停在轮播上时和自动播放一起暂停。 */
.hero-dot { position: relative; overflow: hidden; }
.hero-dot.is-active { background: rgba(20, 21, 26, .18); }
.hero-dot.is-active::after {
  content: ""; position: absolute; inset: 0;
  background: var(--accent); border-radius: inherit;
  transform: scaleX(0); transform-origin: left;
}
.has-motion .hero-dot.is-active::after { animation: beile-dot-fill 6.5s linear forwards; }
.hero:hover .hero-dot.is-active::after { animation-play-state: paused; }
@keyframes beile-dot-fill { to { transform: scaleX(1); } }

.hero-arrow { opacity: .55; transition: background var(--dur-base), color var(--dur-base), opacity var(--dur-base), transform var(--dur-base) var(--ease-out); }
.hero:hover .hero-arrow { opacity: 1; }
.hero-prev:hover { transform: translateY(-50%) translateX(-3px); }
.hero-next:hover { transform: translateY(-50%) translateX(3px); }

/* ---------------------------------------------------------- 信任条 */

/* 图标全是描边路径，进场时按笔画画出来。
   路径长度各不相同，靠 markup 上的 pathLength="1" 归一化，
   这样一条 dasharray 规则能套所有图标。 */
:where(.has-motion) .trust-icon path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.has-motion [data-reveal-group].is-in .trust-icon path { animation: beile-draw 1.2s var(--ease-out) forwards; }
.has-motion [data-reveal-group].is-in > :nth-child(2) .trust-icon path { animation-delay: .1s; }
.has-motion [data-reveal-group].is-in > :nth-child(3) .trust-icon path { animation-delay: .2s; }
.has-motion [data-reveal-group].is-in > :nth-child(4) .trust-icon path { animation-delay: .3s; }
@keyframes beile-draw { to { stroke-dashoffset: 0; } }

.trust-item { transition: background var(--dur-base); }
/* 信任条是深底白字，hover 不能套 --soft（#f7f7f7）——白字压上去就是白底白字。
   往 --ink 上加一层极淡的白，提亮一档即可。 */
.trust-item:hover { background: #35474e; }
.trust-icon { transition: transform var(--dur-base) var(--ease-out); }
.trust-item:hover .trust-icon { transform: scale(1.12) rotate(-4deg); }

/* ---------------------------------------------------------- 分类宫格 */

.cat-card { position: relative; }
.cat-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.cat-card:hover::after { transform: scaleX(1); }
.cat-icon img { transition: transform .35s var(--ease-out); }
.cat-card:hover .cat-icon img { transform: translateY(-4px) scale(1.08); }

/* ---------------------------------------------------------- 产品卡 */

.pcard { position: relative; transition: transform var(--dur-base) var(--ease-out); }
/* 投影走伪元素的透明度，不动 box-shadow 本身——后者每帧都要重画。
   伪元素不填底色，所以盖不住卡片文字。 */
.pcard::before {
  content: ""; position: absolute; inset: -16px -14px -14px;
  box-shadow: 0 18px 40px rgba(20, 21, 26, .15);
  opacity: 0; transition: opacity var(--dur-base);
}
.pcard:hover { transform: translateY(-6px); }
.pcard:hover::before { opacity: 1; }

/* 悬停时从图底滑出的行动号召。整块图是标题链接的装饰性副本
   （aria-hidden + tabindex=-1），所以这段文字不会被读屏重复念一遍。 */
.pcard-quick {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 13px 14px;
  background: rgba(20, 21, 26, .88); color: var(--white);
  font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: normal; text-transform: uppercase;
  text-align: center;
  transform: translateY(100%); opacity: 0;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base);
}
.pcard:hover .pcard-quick, .pcard:focus-within .pcard-quick { transform: none; opacity: 1; }
.pcard-flag { transition: transform var(--dur-base) var(--ease-out); }
.pcard:hover .pcard-flag { transform: translateY(-2px); }

/* ---------------------------------------------------------- 促销带视差 */

/* 背景挪进独立的一层，动的是 transform 而不是 background-position，
   后者每帧都要重画整幅图。上下各多留 8% 给位移吃。 */
.promo, .cta-band { overflow: hidden; background-color: var(--ink); }
.promo-bg {
  position: absolute; inset: -8% 0; z-index: 0;
  background-size: cover; background-position: center;
}
.promo::before, .cta-band::before { z-index: 1; }
.promo .container, .cta-band .container { z-index: 2; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .promo-bg { animation: beile-parallax linear both; animation-timeline: view(); }
  }
}
@keyframes beile-parallax {
  from { transform: translateY(-6%); }
  to   { transform: translateY(6%); }
}

/* ---------------------------------------------------------- 数字滚动 */

/* 等宽数字，滚动时宽度不跳。 */
.stat strong { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- 定制流程 */

/* 没有卡片可以抬，光标落在哪一列就把那一列的数字点亮、分隔线压深。 */
.process-step { transition: border-color var(--dur-base); }
.process-step:hover { border-color: var(--ink); }
.process-num { transition: transform var(--dur-base) var(--ease-out); }
.process-step:hover .process-num { transform: translateY(-4px); }

/* ---------------------------------------------------------- 最新产品横排 */

@media (prefers-reduced-motion: no-preference) {
  .prail-track { scroll-behavior: smooth; }
}
.prail-nav { transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
.prail-nav:hover { transform: translateY(-50%) scale(1.08); }

/* ---------------------------------------------------------- 合作伙伴跑马灯 */

/* 三个 logo 居中排一行太空，改成无缝循环。轨道里放两组完全一样的内容，
   位移到 -50% 时正好接回起点，肉眼看不出接缝。 */
.partners-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.partners-track { display: flex; width: max-content; animation: beile-marquee 42s linear infinite; }
.partners-marquee:hover .partners-track { animation-play-state: paused; }
.partners-group { display: flex; align-items: center; gap: 56px; padding-right: 56px; }
.partners-group img {
  max-height: 46px; width: auto; flex-shrink: 0;
  filter: grayscale(1); opacity: .6;
  transition: filter var(--dur-base), opacity var(--dur-base), transform var(--dur-base) var(--ease-out);
}
.partners-group img:hover { filter: none; opacity: 1; transform: scale(1.06); }
@keyframes beile-marquee { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------- 按钮与链接 */

.btn { transition: background var(--dur-base), border-color var(--dur-base), color var(--dur-base), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20, 21, 26, .18); }
.btn:active { transform: translateY(0); }
.text-link { transition: color var(--dur-base), border-color var(--dur-base), transform var(--dur-base) var(--ease-out); }
.text-link:hover { transform: translateX(4px); }
.catalogue-inner .btn:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .4); }

/* ---------------------------------------------------------- 页头收放 */

/* 往下滚收起、往上滚落下。页头高度本身不做收缩：sticky 元素占着文档流，
   改它的高度会在那 300ms 里逐帧重排后面所有内容。顶栏滚走本身已经给出
   「页头变窄了」的观感，剩下的收缩交给 logo 的 transform。 */
.site-header { transition: box-shadow .25s, transform .35s var(--ease-out); }
.site-header.is-hidden { transform: translateY(-100%); }
.brand img { transition: transform .3s var(--ease-out); }
.site-header.is-compact .brand img { transform: scale(.84); }

/* 抽屉打开时页头留在原地并浮到遮罩之上。顶栏一起抬，否则会出现
   「顶栏被压暗、下面一条页头却是亮的」这种割裂。 */
.is-locked .site-topbar { position: relative; z-index: 90; }
.is-locked .site-header { transform: none; z-index: 90; }

/* 抽屉是页头的后代，页头整体抬高救不了被抽屉盖住的关闭按钮——
   它俩在同一个层叠上下文里，得让按钮自己压过抽屉的 z-index: 80。
   不抬就会出现「打开抽屉后叉号点不到」的死角。 */
.is-locked .menu-toggle { position: relative; z-index: 85; }

.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-menu { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ---------------------------------------------------------- mega menu 展开 */

/* 原来靠 hidden 属性开关，[hidden] 是 display:none，过渡不了。
   改成 class + visibility：visibility 既能过渡，又照样把面板移出
   Tab 顺序和无障碍树。hidden 属性仍留在 markup 里给没有脚本的情况兜底，
   site.js 初始化时摘掉它接管控制权。 */
.has-motion .mega {
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .24s var(--ease-out), transform .24s var(--ease-out), visibility .24s;
}
.has-motion .mega.is-open { opacity: 1; visibility: visible; transform: none; }
.has-motion .mega.is-open .mega-item { animation: beile-reveal .4s var(--ease-out) backwards; }
.has-motion .mega.is-open .mega-item:nth-child(5n+2) { animation-delay: .04s; }
.has-motion .mega.is-open .mega-item:nth-child(5n+3) { animation-delay: .08s; }
.has-motion .mega.is-open .mega-item:nth-child(5n+4) { animation-delay: .12s; }
.has-motion .mega.is-open .mega-item:nth-child(5n+5) { animation-delay: .16s; }

/* ---------------------------------------------------------- 搜索面板展开 */

/* 展开一块面板天生是布局动画——用 transform 缩放会把里面的输入框压扁。
   grid-template-rows 0fr→1fr 是代价最小的写法，而且只在用户点搜索时
   跑这一次，不是滚动或悬停里逐帧跑的东西。 */
.has-motion .search-panel {
  display: grid; grid-template-rows: 0fr;
  visibility: hidden;
  border-top-color: transparent;
  transition: grid-template-rows .34s var(--ease-out), border-color .34s, visibility .34s;
}
.has-motion .search-panel > .container { overflow: hidden; }
.has-motion .search-panel.is-open { grid-template-rows: 1fr; visibility: visible; border-top-color: var(--hairline); }
.has-motion .search-panel.is-open .beile-search { animation: beile-reveal .45s var(--ease-out) .12s backwards; }

/* ---------------------------------------------------------- 移动端抽屉 */

.nav-scrim {
  position: fixed; inset: 0; z-index: 75;
  background: rgba(15, 16, 20, .5);
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.nav-scrim.is-open { opacity: 1; visibility: visible; }

@media (max-width: 1024px) {
  /* 原来菜单是整屏白底盖住一切，而且面板里没有关闭入口——打开之后除了
     点某个链接跳走，没有别的退路。改成右侧抽屉＋遮罩：点遮罩、按 Esc、
     再点一次汉堡（此时是叉号，页头浮在遮罩之上）都能关。 */
  .has-motion .main-navigation {
    display: block; left: auto; right: 0;
    width: min(380px, 86vw);
    transform: translateX(100%); visibility: hidden;
    box-shadow: -20px 0 50px rgba(20, 21, 26, .18);
    transition: transform .38s var(--ease-out), visibility .38s;
  }
  .has-motion .main-navigation.is-open { transform: none; visibility: visible; }
  .has-motion .main-navigation.is-open li { animation: beile-reveal .45s var(--ease-out) backwards; }
  .has-motion .main-navigation.is-open li:nth-child(2) { animation-delay: .05s; }
  .has-motion .main-navigation.is-open li:nth-child(3) { animation-delay: .1s; }
  .has-motion .main-navigation.is-open li:nth-child(4) { animation-delay: .15s; }
  .has-motion .main-navigation.is-open li:nth-child(5) { animation-delay: .2s; }
  .has-motion .main-navigation.is-open li:nth-child(n+6) { animation-delay: .25s; }
}

/* ---------------------------------------------------------- 悬浮客服 */

/* 面板在气泡的正上方，所以从右下角（气泡那一侧）缩放出来。 */
.has-motion .service-panel {
  opacity: 0; visibility: hidden;
  transform: translateY(8px) scale(.96); transform-origin: bottom right;
  transition: opacity .24s var(--ease-out), transform .24s var(--ease-out), visibility .24s;
}
.has-motion .service-panel.is-open { opacity: 1; visibility: visible; transform: none; }

/* 一次性的呼吸提示：延迟 4 秒起跑三次就停，不做无限循环——
   常驻闪烁的浮动按钮只会让人想关掉它。用过一次之后永久不再提示。 */
.service-toggle { position: relative; }
.service-toggle::after {
  content: ""; position: absolute; inset: 0;
  border: 2px solid var(--accent); border-radius: inherit;
  opacity: 0; pointer-events: none;
}
.has-motion .service-toggle::after { animation: beile-pulse 2.6s var(--ease-out) 4s 3 backwards; }
.service-rail.is-used .service-toggle::after { animation: none; }
@keyframes beile-pulse {
  from { opacity: .5; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.45); }
}

/* ---------------------------------------------------------- 返回顶部 */

.to-top {
  position: fixed; right: 20px; bottom: 92px; z-index: 69;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0; border-radius: 50%;
  background: var(--white); color: var(--ink);
  box-shadow: 0 8px 24px rgba(20, 21, 26, .16);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .28s, transform .28s var(--ease-out), visibility .28s, color .2s;
}
/* .to-top 自己声明了 display:flex，会盖掉 hidden 属性自带的 display:none。 */
.to-top[hidden] { display: none; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--accent); }
.to-top-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top-ring circle { fill: none; stroke-width: 2; }
.to-top-track { stroke: var(--line); }
.to-top-bar { stroke: var(--accent); stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; }
.to-top-arrow {
  position: relative; width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 560px) {
  .to-top { right: 14px; bottom: 76px; }
}

/* ---------------------------------------------------------- 表单 */

.form-field label { transition: color var(--dur-base); }
.form-field:focus-within label { color: var(--accent); }
.form-field input, .form-field textarea { transition: border-color var(--dur-base), box-shadow var(--dur-base); }
.form-field input:focus, .form-field textarea:focus { box-shadow: 0 0 0 3px rgba(20, 21, 26, .08); }

/* 提交后的等待态。表单是整页提交，转圈只活到页面跳走为止，
   但没有它的话点完按钮几秒内毫无反馈，容易被连点。 */
.btn.is-sending { pointer-events: none; opacity: .8; }
.btn.is-sending::before {
  content: ""; width: 14px; height: 14px; flex-shrink: 0;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: beile-spin .7s linear infinite;
}
@keyframes beile-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------- 页面切换 */

/* 同源跳转之间的淡入淡出，目前只有 Chromium 系认。不支持的浏览器
   什么都不做，没有兜底负担。 */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* ---------------------------------------------------------- 减弱动效 */

/* 这一段必须放在全文件最后：上面的揭示样式把元素设成了 opacity:0，
   开头那条只压 transition-duration 的规则救不回来。 */
@media (prefers-reduced-motion: reduce) {
  .has-motion [data-reveal],
  .has-motion [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .has-motion img[loading="lazy"] { opacity: 1 !important; animation: none !important; }
  .has-motion .trust-icon path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .has-motion .hero-slide.is-active img { animation: none !important; }
  .has-motion .hero-dot.is-active::after { animation: none !important; transform: scaleX(1); }
  /* infinite 动画配上 .01ms 时长会变成每秒重跑十万次，必须整条关掉。 */
  .partners-track { animation: none !important; width: auto; }
  .partners-group { flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .partners-group + .partners-group { display: none; }
  .partners-marquee { -webkit-mask-image: none; mask-image: none; }
  .has-motion .service-toggle::after { animation: none !important; }
  .btn.is-sending::before { animation: none !important; }
}

/* ---------------------------------------------------------- 动效相关响应式 */

@media (max-width: 860px) {
  .partners-group { gap: 34px; padding-right: 34px; }
  .pcard-quick { display: none; }
}


/* ---------------------------------------------------------- SEO 关键词清单（2026-10-21）
   H1 的品牌落款、首页导语、商店页入口、关键词专题页、关于页的工艺与质检、
   FAQ 分组、下载页的文件说明。 */

/* 清单里的 H1 都是「主题 | BeiLe Inflatables」。文字照抄，品牌排成浅色小字。 */
.h1-brand {
  display: inline-block; font-size: .46em; font-weight: 500; letter-spacing: 0;
  color: var(--ink-soft); white-space: nowrap; vertical-align: .18em;
}
.page-hero .h1-brand { color: rgba(255, 255, 255, .78); }

/* 首页导语：banner 下面一条白底，左边 H1 和一段话，右边五个栏目入口。 */
.home-intro { padding: 56px 0 52px; border-bottom: 1px solid var(--hairline); }
.home-intro-inner { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.home-intro h1 { margin: 0 0 18px; font-size: clamp(30px, 3vw, 44px); line-height: 1.18; }
.home-intro p { margin: 0; max-width: 68ch; font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.home-intro p a { color: var(--ink); border-bottom: 1px solid currentColor; }
.home-intro p a:hover { color: var(--accent); }
.home-intro-links ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.home-intro-links li { border-bottom: 1px solid var(--line); }
.home-intro-links a {
  display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 12px;
  padding: 13px 0; transition: color .2s;
}
.home-intro-links a::after { content: "→"; color: var(--accent); transition: transform .2s; }
.home-intro-links a:hover { color: var(--accent); }
.home-intro-links a:hover::after { transform: translateX(4px); }
.home-intro-links strong { font-size: 13px; font-weight: 700; text-transform: uppercase; }
.home-intro-links span { font-size: 15px; color: var(--ink-soft); }

/* 商店页顶部：导语、按需求进入的专题页、20 个分类。 */
.shop-intro { margin: 0 0 8px; }
.shop-lead { max-width: 78ch; margin: 18px 0 0; font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.shop-intro-title { margin: 40px 0 16px; font-size: 22px; line-height: 1.3; letter-spacing: -.5px; }
.topic-groups { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.topic-group { padding: 20px 22px 22px 0; }
.topic-group + .topic-group { padding-left: 22px; border-left: 1px solid var(--line); }
.topic-group h3 { margin: 0 0 12px; font-size: 13px; font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.topic-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.topic-group a { font-size: 16px; font-weight: 600; color: var(--ink); }
.topic-group a:hover { color: var(--accent); }
.chip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip-list a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-control); font-size: 15px;
  transition: border-color .2s, color .2s;
}
.chip-list a:hover { border-color: var(--ink); color: var(--accent); }
.chip-list span { font-size: 13px; color: var(--muted); }
.shop-all-title { margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--line); }

/* 分类页顶部链回专题页。 */
.cat-topics { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 14px 0 0; font-size: 15px; }
.cat-topics > span:first-child { font-size: 13px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.cat-topics a { color: var(--ink); border-bottom: 1px solid currentColor; }
.cat-topics a:hover { color: var(--accent); }
.cat-topics span[aria-hidden] { color: var(--muted); }

/* ---- 关键词专题页 */
.topic-hero { padding: 56px 0 64px; background: var(--soft); }
.topic-hero-inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.topic-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.topic-crumbs a:hover { color: var(--accent); }
.topic-crumbs [aria-current] { color: var(--ink); }
.topic-hero h1 { margin: 14px 0 0; font-size: clamp(34px, 3.6vw, 54px); line-height: 1.15; }
.topic-lead { margin: 20px 0 0; max-width: 60ch; font-size: 18px; line-height: 1.667; color: var(--ink-soft); }
.topic-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.topic-hero-media { margin: 0; justify-self: end; width: min(100%, 520px); }
.topic-hero-media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--white); }

.topic-facts-wrap .sec-title { margin-bottom: 26px; }
.spec-list { margin: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; }
.spec-list > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.spec-list dt { font-size: 13px; font-weight: 700; line-height: 1.6; text-transform: uppercase; letter-spacing: .04em; }
.spec-list dd { margin: 0; color: var(--ink-soft); }

.topic-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 72px; }
.topic-section h2 { margin: 0 0 14px; font-size: clamp(24px, 2.1vw, 28px); line-height: 1.393; }
.topic-section p { margin: 0 0 14px; color: var(--ink-soft); }
.topic-section p:last-child { margin-bottom: 0; }
.topic-cats { margin: 30px 0 0; font-size: 15px; color: var(--ink-soft); }
.topic-cats a { color: var(--ink); border-bottom: 1px solid currentColor; }
.topic-cats a:hover { color: var(--accent); }

.order-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.order-card { padding: 30px 28px; background: var(--white); }
.order-card h3 { margin: 0 0 12px; font-size: 18px; }
.order-card p { margin: 0 0 10px; font-size: 15px; color: var(--ink-soft); }
.order-card p:last-child { margin-bottom: 0; }
.order-card .check-list { margin: 0; gap: 7px; }
.order-card .check-list li { font-size: 15px; }
.order-figure { font-family: var(--font-display); font-size: 28px !important; font-weight: 700; line-height: 1.2; color: var(--heading) !important; }
.order-note { font-size: 13px !important; }
.order-cta { margin: 30px 0 0; }

.topic-faq { max-width: 900px; }
.topic-faq .sec-title { margin-bottom: 22px; }
.topic-faq-item { padding: 22px 0; border-top: 1px solid var(--line); }
.topic-faq-item h3 { margin: 0 0 8px; font-size: 18px; }
.topic-faq-item p { margin: 0; color: var(--ink-soft); }
.topic-faq-more { margin: 0; padding-top: 22px; border-top: 1px solid var(--line); color: var(--ink-soft); }
.topic-faq-more a { color: var(--ink); border-bottom: 1px solid currentColor; }

.topic-links .shop-intro-title { margin-top: 0; }
.topic-links-block + .topic-links-block { margin-top: 44px; }
.link-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.link-cards a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px; border: 1px solid var(--line); transition: border-color .2s; }
.link-cards a:hover { border-color: var(--ink); }
.link-cards strong { font-size: 13px; font-weight: 700; text-transform: uppercase; }
.link-cards a:hover strong { color: var(--accent); }
.link-cards span { font-size: 14px; color: var(--muted); }

/* ---- 关于页：工艺、材料、质检 */
.make-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--line); border: 1px solid var(--line); }
.make-card { padding: 32px 34px; background: var(--white); }
.make-card h3 { margin: 0 0 10px; }
.make-card p { margin: 0; color: var(--ink-soft); }
.make-table-title { margin: 48px 0 16px; }
.table-scroll { overflow-x: auto; }
.spec-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15px; }
.spec-table th, .spec-table td { padding: 14px 16px 14px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.spec-table thead th { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom-color: var(--ink); }
.spec-table tbody th { width: 30%; font-weight: 600; }
.spec-table td { color: var(--ink-soft); }
.spec-table td:nth-child(2) { width: 14%; white-space: nowrap; }
.spec-table a { color: var(--ink); border-bottom: 1px solid var(--line); }
.spec-table a:hover { color: var(--accent); border-color: var(--accent); }
.make-note { margin: 14px 0 0; font-size: 14px; color: var(--muted); }

.about-qc-inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.qc-list { list-style: none; counter-reset: qc; margin: 28px 0 0; padding: 0; }
.qc-list li { counter-increment: qc; display: grid; grid-template-columns: 52px 150px minmax(0, 1fr); gap: 0 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.qc-list li::before { content: counter(qc, decimal-leading-zero); font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--accent); }
.qc-list strong { font-size: 15px; line-height: 1.6; }
.qc-list span { font-size: 15px; color: var(--ink-soft); }
.lead-panel { padding: 34px; background: var(--soft); }
.lead-panel h3 { margin: 0 0 8px; }
.lead-panel p { margin: 0; font-size: 15px; color: var(--ink-soft); }
.lead-bars { list-style: none; margin: 22px 0; padding: 0; display: grid; gap: 14px; }
.lead-bars li { display: grid; grid-template-columns: 120px minmax(0, 1fr) 84px; gap: 12px; align-items: center; font-size: 14px; }
.lead-bar { height: 10px; background: var(--white); }
.lead-bar span { display: block; height: 100%; background: var(--ink); }
.lead-count { text-align: right; font-weight: 600; }
.lead-note { font-size: 13px !important; color: var(--muted) !important; }

/* ---- FAQ 分组 */
.faq-intro { max-width: 62ch; margin: 0; font-size: 17px; color: var(--ink-soft); }
.faq-group + .faq-group { margin-top: 52px; }
.faq-group-title { margin: 0 0 18px; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.3; }
/* 问题是 H3，但视觉上沿用原来的问答条样式。 */
.faq-list summary h3 { margin: 0; font: inherit; color: var(--ink); letter-spacing: normal; }

/* ---- 下载页的文件说明 */
.download-sub { margin: 4px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.download-contents { margin: 0 0 18px; padding-left: 18px; display: grid; gap: 4px; font-size: 15px; color: var(--ink-soft); }
.download-facts { margin: 0 0 22px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: 14px; }
.download-facts div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; }
.download-facts dt { font-weight: 700; }
.download-facts dd { margin: 0; color: var(--ink-soft); overflow-wrap: anywhere; }

@media (max-width: 1180px) {
  .topic-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 8px; }
  .topic-group:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
  .link-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .order-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .home-intro-inner, .topic-hero-inner, .about-qc-inner { grid-template-columns: 1fr; gap: 36px; }
  .topic-hero-media { justify-self: start; width: min(100%, 420px); }
  .spec-list, .topic-body { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .home-intro { padding: 36px 0; }
  .home-intro p, .shop-lead, .topic-lead { font-size: 16px; }
  .topic-hero { padding: 36px 0 44px; }
  .topic-groups { grid-template-columns: 1fr 1fr; }
  .topic-group, .topic-group + .topic-group { padding: 16px 0; border-left: 0; }
  .topic-group:nth-child(even) { padding-left: 16px; }
  .make-grid { grid-template-columns: 1fr; }
  .make-card { padding: 26px 22px; }
  .link-cards { grid-template-columns: 1fr 1fr; }
  .qc-list li { grid-template-columns: 40px minmax(0, 1fr); }
  .qc-list li span { grid-column: 2; }
  .lead-panel { padding: 26px 22px; }
}

@media (max-width: 560px) {
  .home-intro-links a { grid-template-columns: 96px 1fr auto; }
  .spec-list > div { grid-template-columns: 1fr; gap: 4px; }
  .order-grid, .topic-groups, .link-cards { grid-template-columns: 1fr; }
  .topic-group:nth-child(even) { padding-left: 0; }
  .lead-bars li { grid-template-columns: 100px minmax(0, 1fr) 72px; }
}