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

.hp-site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--bg1);
  border-bottom: 1px solid var(--line1);
  isolation: isolate;
}

.hp-announcement {
  height: 38px;
  background: var(--brand-soft);
  border-bottom: 1px solid var(--line1);
  color: var(--t3);
  font-size: 12px;
}

.hp-announcement-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: var(--container);
  height: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

.hp-announcement-text {
  min-width: 0;
  color: var(--brand-deep);
  font-weight: 600;
}

.hp-header-main {
  background: var(--bg1);
}

.hp-header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: var(--container);
  height: var(--header-h);
  margin: 0 auto;
  padding: 0 20px;
}

.hp-logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  color: var(--t1);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  text-decoration: none;
}

.hp-logo:hover {
  color: var(--t1);
}

.hp-logo-mark {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: var(--r-3);
}

.hp-logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  color: var(--bg0);
}

.hp-logo-mark svg {
  width: 17px;
  height: 17px;
}

.hp-logo-image {
  display: block;
  width: auto;
  max-width: 96px;
  height: auto;
  max-height: 40px;
  flex: 0 1 auto;
  object-fit: contain;
  border-radius: var(--r-3);
}

.hp-logo[data-hp-logo-size="compact"] .hp-logo-image {
  max-height: 32px;
}

.hp-logo[data-hp-logo-size="standard"] .hp-logo-image {
  max-height: 40px;
}

.hp-logo[data-hp-logo-size="large"] .hp-logo-image {
  max-height: 48px;
}

.hp-logo-copy,
.hp-logo-primary,
.hp-logo-secondary {
  display: block;
}

.hp-logo-secondary {
  margin-top: 2px;
  color: var(--t4);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hp-header-search,
.hp-mobile-search-form {
  position: relative;
  min-width: 0;
}

.hp-header-search {
  flex: 0 0 22%;
}

.hp-search-input {
  width: 100%;
  min-height: 44px;
  padding: 12px 76px 12px 40px;
  border: 1px solid var(--line2);
  border-radius: var(--r-5);
  background: var(--bg0);
  color: var(--t1);
  font-size: 14px;
}

.hp-search-input:focus {
  border-color: var(--brand-txt);
  box-shadow: var(--sh-focus);
}

.hp-search-input::placeholder {
  color: var(--t4);
}

.hp-search-icon {
  position: absolute;
  top: 50%;
  left: 14px;
  z-index: var(--z-local-base);
  display: inline-flex;
  color: var(--t4);
  transform: translateY(-50%);
  pointer-events: none;
}

.hp-search-icon svg {
  width: 15px;
  height: 15px;
}

.hp-search-submit {
  position: absolute;
  top: 5px;
  right: 5px;
  height: 34px;
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-3);
  background: var(--brand);
  color: var(--bg0);
  font-size: 13px;
  font-weight: 600;
}

/*
 * 🔴 2026-09-15 修（2026-09-14 审计乙窗口 乙-7）：原来是 overflow: hidden，
 * 而菜单项既不换行也不收缩、电脑上又没有汉堡入口。
 * 四个 B2B 页和 Resources 全部公开之后顶部一共七项，
 * 在 1100~1280px 这种并不算窄的电脑窗口上就放不下 ——
 * 【最后一项被裁掉一半或整个消失，而且没有任何别的入口点得到它】。
 * 实测：1100px + 三个联系渠道时，Wholesale / Resources / Private Label 都不完整。
 *
 * 改成允许换行：放不下就折到第二行。页头会高一点，但【一个入口都不会丢】。
 * 🔴 不用 overflow:auto —— 横向滚动条在电脑上没人会去拖，等于还是找不到。
 * 🔴 手机那一档的汉堡菜单没动：那一档本来就是对的。
 */
.hp-primary-nav {
  flex: 1;
  min-width: 0;
}

.hp-primary-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hp-primary-menu > li {
  flex: 0 0 auto;
  margin: 0;
}

.hp-primary-menu a {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--r-3);
  color: var(--t2);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.hp-primary-menu a:hover {
  background: var(--brand-soft);
  color: var(--brand-txt);
}

.hp-primary-menu a[aria-current="page"] {
  color: var(--brand-txt);
}

.hp-header-tools {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.hp-header-language {
  padding-right: 14px;
  padding-left: 14px;
  white-space: nowrap;
}

.hp-header-language svg {
  width: 16px;
  height: 16px;
}

.hp-icon-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--line2);
  border-radius: var(--r-5);
  background: var(--bg0);
  color: var(--t2);
  text-decoration: none;
}

.hp-icon-button:hover {
  border-color: var(--brand-txt);
  color: var(--brand-txt);
}

.hp-icon-button svg {
  width: 16px;
  height: 16px;
}

.hp-mobile-search {
  display: none;
}

.hp-site-footer {
  margin-top: 0;
  border-top: 1px solid var(--line1);
  background: var(--bg2);
}

/* 🔴 2026-09-20 站长看电脑端页脚,原话:
   「电脑端底部，你排版的目的是为了压紧不浪费空间，不刻意，而是自然舒服」。
   给了五个方案,他选了【C 一排紧跟 logo】。

   根因不是栏数:品牌那一栏原本吃掉 1.4 份宽度,而它是空的 ——
   地址 / 电话 / 邮箱三项站长都没填,那一栏里只有一个 logo。
   再加上「产品」栏只有一条链接,分栏怎么排都必然留出空洞。

   做法:电脑端照搬【手机端 2026-09-19 已经在用的那一套】——
   整块 flex 横排、栏目标题视觉隐藏(不是 display:none,读屏仍读得到)、
   链接紧跟 logo 平铺。页脚总高 1440px 上 250 → 137px(矮 45%)。
   🔴 代价当面告诉过他:电脑端不再显示「产品 / 关于我们」两个小标题。
      链接数量和地址一条没少,所以 SEO 不受影响。
   🔴 分栏用的 grid-template-columns 一并删掉 —— 两档都不再是 grid,
      留着就是死规则,以后有人照着改会以为它还生效。

   🔴🔴 这些规则【必须关在 min-width: 641px 里】,本轮为此红过一次:
      媒体查询【不增加权重】。写成不带媒体查询的
      `.hp-footer-grid .hp-footer-menu`(0,2,0),会把 ≤640 档里
      `.hp-footer-menu`(0,1,0)那条压掉 —— 手机行距当场从 2px 涨到 10px、
      页脚从 154 涨到 170px,等于把 2026-09-19【页脚压紧】那一轮推翻。
      同一个坑本轮在包装规格那一块也踩过一次。改这里之前先读这一段。 */
.hp-footer-grid {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}

@media (min-width: 641px) {
  /* 🔴 2026-09-20 站长把 7 个分类加进页脚之后,链接排不下换了行,
     第二排却从【页面最左边】起(跑到 logo 底下),和第一排对不齐。
     他的原话:「第二排应该对齐第一排开始出字的地方」。

     原因:brand 和两个栏目是同级 flex 项,一行放不下时整个栏目块
     换到下一条 flex 线的行首 —— 那就是容器左沿,也就是 logo 底下。

     改法:电脑端用两列网格,【logo 固定占左边那一列,所有栏目一律进右边那一列】,
     一栏一行。于是第二排、第三排都从同一条竖线起,正是他要的。 */
  /* 🔴 2026-09-20 站长:「压紧,压最紧看看」。给了 161 / 115 / 89px 三档,
     他选了【最紧那档 89px】(原来 250px,矮 64%)。
     压的是四处:外框上下留白、两排之间、链接自己的上下内边距、版权行留白。
     🔴 代价当面告诉过他:链接上下内边距压到 0 之后,
        鼠标可点范围就只剩文字那一行高,点起来比原来难一点。他知情选的。
     ⚠️ 手机端一个字没动 —— 这些全在 min-width: 641px 里。 */
  .hp-footer-grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    row-gap: 2px;
    column-gap: 40px;
    padding: 8px 24px 4px;
  }

  .hp-footer-grid .hp-footer-menu a {
    padding: 0;
  }

  /* 🔴 这里必须写成 `.hp-site-footer .hp-footer-bottom`(0,2,0)。
     只写 `.hp-footer-bottom`(0,1,0)和后面那条基础规则权重相同,
     而基础规则写在后面 —— 它的 `padding: 16px 24px` 简写会把这两行盖掉,
     页脚会停在 113px 下不去(差的正好是 16+16-4-4=24px)。
     🔴 本轮为「同权重、后面压前面」这件事已经栽过两次,见本段上面那条注释。 */
  .hp-site-footer .hp-footer-bottom {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .hp-footer-grid > .hp-footer-brand {
    grid-column: 1;
    grid-row: 1;
  }

  /* 🔴 2026-09-20 站长最后定的:**一组一排** —— 第一排放分类,其余的放第二排。
     (中间试过「所有链接连成一条流、排满才换行」,他看过之后说不要。)

     所以每个栏目是这一列里的【整整一行】,行内的链接左对齐、词距一律 26px。
     🔴 `.hp-footer-menu` 必须 display:contents ——
        不然 <ul> 自己又成一层 flex,间距和对齐会跟着它走,不跟这一行走。
     🔴 这一版是【写明的】规则,不是靠后面的规则压前面的。上一版就是那样出的事:
        两条同权重(0,2,0)的规则一前一后,后面那条把 display:contents 盖掉,
        结果第一排右边白白空出 474px(下一条只要 227px),
        站长问「第一排右边是空白,什么原因」—— 那是 bug,不是排版选择。 */
  .hp-footer-links {
    display: flex;
    flex-wrap: wrap;
    row-gap: 2px;
    grid-column: 2;
    grid-row: 1;
  }

  .hp-footer-links > .hp-footer-column {
    display: flex;
    flex: 0 0 100%;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 26px;
  }

  .hp-footer-links .hp-footer-menu {
    display: contents;
  }

  /* 🔴 横排之后栏目标题是多余的,但【只是视觉上多余】——
     视觉隐藏,不是 display:none,读屏软件仍然读得到每组链接叫什么。
     手机端 ≤640 那一档 2026-09-19 就是这么做的,现在电脑端也照这一套。 */
  .hp-footer-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

.hp-footer-grid > * {
  min-width: 0;
}

.hp-logo[data-hp-footer-logo] {
  font-size: 17px;
}

.hp-certifications,
.hp-contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.hp-contact-links {
  padding: 0;
  list-style: none;
}

.hp-contact-channel-item {
  min-width: 0;
  margin: 0;
}

.hp-certification-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: var(--r-3);
  background: var(--bg0);
  color: var(--t3);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}

.hp-certification-chip svg {
  width: 14px;
  height: 14px;
  margin-right: 6px;
}

.hp-contact-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line2);
  border-radius: var(--r-5);
  background: var(--bg0);
  color: var(--t3);
  text-decoration: none;
}

.hp-contact-link:hover {
  border-color: var(--brand-txt);
  color: var(--brand-txt);
}

.hp-contact-link svg {
  width: 18px;
  height: 18px;
}

.hp-contact-link[data-hp-contact-presentation="text"],
.hp-contact-link[data-hp-contact-presentation="dialog"] {
  width: auto;
  max-width: 100%;
  height: auto;
  min-height: 44px;
  justify-content: flex-start;
  gap: 8px;
  padding: 6px 12px;
}

.hp-contact-link .hp-content-contact-copy,
.hp-contact-link .hp-content-contact-copy > span {
  display: block;
  min-width: 0;
}

.hp-contact-link .hp-content-contact-copy strong {
  display: block;
  color: var(--t2);
  font-size: 12px;
}

.hp-contact-link .hp-content-contact-copy > span {
  margin-top: 2px;
  color: var(--t3);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.hp-contact-link[data-hp-contact-presentation="qr"] {
  width: 64px;
  height: 64px;
  padding: 4px;
}

.hp-contact-link .hp-contact-qr-image {
  display: block;
  width: 54px;
  height: 54px;
  object-fit: contain;
  border-radius: var(--r-2);
}

.hp-footer-heading {
  margin: 0 0 14px;
  color: var(--t1);
  font-size: 13px;
  font-weight: 800;
}

.hp-footer-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hp-footer-menu li {
  margin: 0;
}

.hp-footer-menu a {
  display: block;
  padding: 5px 0;
  color: var(--t3);
  font-size: 13px;
  text-decoration: none;
}

.hp-footer-menu a:hover {
  color: var(--brand-txt);
}

.hp-footer-download-heading {
  margin: 20px 0 10px;
  color: var(--t2);
  font-size: 12px;
  font-weight: 800;
}

.hp-download-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hp-download-list li {
  min-width: 0;
  margin: 0;
}

.hp-download-link {
  display: flex;
  min-width: 0;
  min-height: 44px;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 10px 14px;
  border: 1px solid var(--line2);
  border-radius: var(--r-5);
  background: var(--bg0);
  color: var(--t1);
  text-decoration: none;
}

.hp-download-link:hover {
  border-color: var(--brand-txt);
  color: var(--brand-txt);
}

.hp-download-label,
.hp-download-meta {
  min-width: 0;
  overflow-wrap: anywhere;
}

.hp-download-label {
  font-size: 14px;
  font-weight: 700;
}

.hp-download-meta {
  color: var(--t3);
  font-size: 12px;
}

/* 🔴 2026-09-30 页脚方案 B(站长选的):地址 / 电话 / 邮箱 / 资质接在「© 2026 HotPico」后面,
   用「·」隔开;放不下就整组折行,法务链接照旧靠右。
   原来页脚里的 Email us 红按钮、logo 底下的地址块、PDF 卡片三套样式已随之删掉 ——
   那三样前台不再输出,留着就是死规则。 */
.hp-footer-facts {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  min-width: 0;
}

.hp-footer-fact {
  overflow-wrap: anywhere;
}

.hp-footer-sep {
  color: var(--t4);
}

.hp-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 16px 24px;
  border-top: 1px solid var(--line1);
  color: var(--t4);
  font-size: 12px;
}
.hp-floating-chat {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.hp-floating-chat-label {
  color: var(--t3);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.hp-action.hp-floating-chat-link {
  padding-right: 12px;
  padding-left: 12px;
  overflow-wrap: normal;
  transition: transform var(--dur-1) var(--ease);
  white-space: nowrap;
}

.hp-floating-chat-link:hover {
  transform: translateY(-2px);
}

.hp-floating-chat-link:focus-visible {
  outline: 2px solid var(--brand-txt);
  outline-offset: 3px;
}

.hp-action.hp-menu-toggle {
  display: none;
  padding-right: 14px;
  padding-left: 14px;
  white-space: nowrap;
}

.hp-menu-toggle svg,
.hp-mobile-navigation-tools svg {
  width: 18px;
  height: 18px;
}

.hp-mobile-navigation {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: var(--z-header-pop);
  max-height: calc(100vh - var(--header-h));
  border-top: 1px solid var(--line1);
  background: var(--bg1);
  box-shadow: var(--sh2);
  overflow-y: auto;
}

.hp-mobile-navigation-inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 16px 20px 20px;
}

.hp-mobile-primary-menu {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hp-mobile-primary-menu li {
  min-width: 0;
  margin: 0;
}

.hp-mobile-primary-menu a {
  display: flex;
  min-height: 44px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--line2);
  border-radius: var(--r-5);
  background: var(--bg0);
  color: var(--t2);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
}

.hp-mobile-primary-menu a:hover,
.hp-mobile-primary-menu a[aria-current="page"] {
  border-color: var(--brand-txt);
  color: var(--brand-txt);
}

.hp-mobile-navigation-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line1);
}

.hp-contact-dialog {
  width: min(calc(100% - 32px), 440px);
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid var(--line2);
  border-radius: var(--r-6);
  background: var(--bg1);
  color: var(--t1);
  box-shadow: var(--sh3);
}

.hp-contact-dialog::backdrop {
  background: var(--video-play-bg);
}

.hp-contact-dialog-card {
  padding: 24px;
}

/* WeChat QR. Capped rather than fixed so any upload works: a bare square code,
   or WeChat's own "my QR" screenshot which is roughly 3:4 with an avatar above.
   contain keeps either intact — a cropped QR is an unscannable QR. 220px is the
   floor for scanning off a desktop screen and still fits inside a 320px phone. */
.hp-wechat-qr-figure {
  margin: 0 0 16px;
  text-align: center;
}

.hp-wechat-qr {
  width: 100%;
  max-width: 220px;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-1);
}

.hp-wechat-qr-hint {
  margin: 8px 0 0;
  color: var(--fg2);
  font-size: 12px;
  line-height: 1.5;
}

.hp-contact-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.hp-contact-dialog-header form {
  margin: 0;
}

.hp-contact-dialog-title {
  color: var(--t1);
  font-size: 20px;
}

.hp-contact-dialog-label {
  display: block;
  margin-bottom: 6px;
  color: var(--t2);
  font-size: 14px;
  font-weight: 700;
}

.hp-contact-dialog-account {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.hp-contact-dialog-account input {
  min-width: 0;
  font-size: 16px;
}

.hp-contact-dialog-status,
.hp-contact-dialog-note {
  margin: 10px 0 0;
  color: var(--t3);
  font-size: 13px;
}

.hp-contact-dialog-status {
  font-weight: 700;
}

.hp-contact-dialog-qr {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 20px auto 0;
}

.hp-contact-dialog-qr-image {
  display: block;
  width: 260px;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line2);
  border-radius: var(--r-5);
}

.hp-mobile-tabbar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-tabbar);
  display: flex;
  height: calc(var(--mobile-tab-h) + env(safe-area-inset-bottom));
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  border-top: 1px solid var(--line1);
  background: var(--bg0);
  isolation: isolate;
}

.hp-mobile-tabbar-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  height: var(--mobile-tab-h);
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--t2);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.hp-mobile-tabbar-item > span {
  white-space: nowrap;
}

.hp-mobile-tabbar-item:hover {
  background: var(--brand-soft);
  color: var(--brand-txt);
}

.hp-mobile-tabbar-spacer {
  height: calc(var(--mobile-tab-h) + env(safe-area-inset-bottom));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hp-logo-mark,
  :root:not([data-theme="light"]) .hp-search-submit {
    color: var(--t1);
  }

  :root:not([data-theme="light"]) .hp-announcement-text {
    color: var(--brand-light);
  }
}

:root[data-theme="dark"] .hp-logo-mark,
:root[data-theme="dark"] .hp-search-submit {
  color: var(--t1);
}

:root[data-theme="dark"] .hp-announcement-text {
  color: var(--brand-light);
}

@media (min-width: 1100px) {
  .hp-mobile-tabbar,
  .hp-mobile-tabbar-spacer {
    display: none;
  }
}

/* 🔴 2026-09-11 折叠断点 1400 → 1100，和上面隐藏移动标签栏的断点对齐。
   原来 1100–1399 这一段是个死区：移动标签栏已经被藏了，桌面导航也还没出来，
   访客只剩一个汉堡按钮 —— 而 1280、1366 正是办公笔记本最常见的宽度，
   美国采购多半就在这一档，网站在他们眼里变成了「手机版」。
   实测（5 个菜单项：Products / Factory / Quality Control / Wholesale / Private Label）：
   logo 150 + 菜单 500 + 右侧工具 144 + 内边距 40 + 间距 32 = 866px 就够了，
   1100 还留了 230px 余量给以后新增的菜单项。 */
@media (min-width: 1100px) {
  .hp-mobile-navigation {
    display: none;
  }
}

@media (max-width: 1099px) {
  .hp-primary-nav,
  .hp-header-tools .hp-header-language,
  .hp-theme-toggle {
    display: none;
  }

  /* Script-failure fallback. Overrides the drawer's `hidden` attribute and drops
     it out of the absolute overlay so the menu and language link read as an
     ordinary list under the header. Only applies while the nav guard marker is
     absent, i.e. scripting is off or header-footer.js never bound the toggle. */
  html:not([data-hp-nav-js]) .hp-mobile-navigation[hidden] {
    display: block;
    position: static;
    max-height: none;
    box-shadow: none;
    overflow-y: visible;
  }

  html:not([data-hp-nav-js]) .hp-action.hp-menu-toggle {
    display: none;
  }

  .hp-action.hp-menu-toggle {
    display: inline-flex;
  }
}

@media (max-width: 1099px) {
  .hp-header-tools .hp-floating-chat {
    display: none;
  }

  .hp-footer-menu a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .hp-certification-chip[href] {
    min-height: 44px;
  }
}

@media (max-width: 1024px) {
  .hp-footer-grid,
  .hp-footer-grid[data-hp-columns] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .hp-header-inner {
    gap: 10px;
    padding: 0 12px;
  }

  .hp-header-search {
    display: none;
  }

  .hp-mobile-search {
    display: block;
    padding: 8px 12px;
    border-top: 1px solid var(--line1);
    background: var(--bg1);
  }

  .hp-mobile-search .hp-search-input {
    min-height: 44px;
    padding: 12px 16px 12px 38px;
    font-size: 16px;
  }

  .hp-mobile-search .hp-search-icon {
    left: 12px;
  }

  .hp-announcement {
    height: auto;
  }

  .hp-announcement-inner {
    min-height: 38px;
    padding: 8px 12px;
  }

  .hp-mobile-primary-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (pointer: coarse), (max-width: 768px) {
  .hp-search-submit {
    top: 0;
    right: 0;
    bottom: 0;
    height: auto;
    min-height: 44px;
    border-radius: 0 var(--r-5) var(--r-5) 0;
  }
}

@media (max-width: 640px) {
  /* 🔴 2026-09-18 站长:「页脚搞成横行来排,再极度减少高度」→ 看过预览后「可以,去改」。
     原来是两栏网格(栏目标题 + 竖排链接),手机上占掉大半屏。
     现在:品牌和各条链接横向排成一行(中间用 · 分隔),版权和法务链接排第二行。
     数值照 桌面/最紧_四列_横排页脚.html 的页脚(padding 10px 12px · 链接 12px ·
     版权行 11.5px · 行列间距 6/10)。电脑端完全不动,见桌面正控制。 */
  /*
   * 🔴🔴 2026-09-19 返工。2026-09-18 那一版横排【在线上是坏的】,本地复现不出来:
   * 本地页脚只有一个菜单、一条链接;线上还有一栏是四条长链接
   * (Wholesale Chili and Spice Supply 这种)。我当时给链接写了 white-space:nowrap,
   * 于是线上每条长链接各占一整行,栏目之间那个「·」还会掉成孤零零的一行。
   * 站长的原话:「尾部,你看看上下之间空了好多出来」。
   *
   * 这一版的做法:
   *   · 长链接【允许折行】——nowrap 是坏事的根源
   *   · 分隔点【全部去掉】——它挂在链接自己身上,链接一换行它就跟到行首,
   *     怎么调都会有孤点。行距和间隙已经够分开了,不需要它
   *   · 行距压到 2px
   * 🔴 教训:页脚这一块本地和线上的内容【组合不一样】,本地全绿证明不了线上好看。
   *    下次动页脚,先让站长截一张线上的图。
   */
  .hp-footer-grid,
  .hp-footer-grid[data-hp-columns] {
    display: flex;
    grid-template-columns: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 10px;
    /* 🔴 2026-09-19 第六轮,站长:「同时外面的框也压紧,留一丝丝呼吸感就行」。
       上下 8 → 4px。左右 12px 没动 —— 他说的是这个板块的高度。 */
    padding: 4px 12px;
  }

  /* 上面那条 grid-column 在 flex 下失效,写出来是为了不留误导性的死规则。 */
  .hp-footer-brand {
    grid-column: auto;
  }

  /* 🔴 手机档:那个外壳当作不存在,栏目仍然是 .hp-footer-grid 的直接成员,
     2026-09-19【页脚压紧】那一轮的排法因此一个字都没变。 */
  .hp-footer-links {
    display: contents;
  }

  /* 🔴 横排之后栏目标题(Products / About)是多余的,但【只是视觉上多余】。
     所以是视觉隐藏,不是 display:none —— 读屏软件仍然读得到每一组链接叫什么。
     电脑端照常显示。 */
  .hp-footer-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .hp-footer-grid > .hp-footer-column {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 10px;
  }

  .hp-footer-menu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 10px;
  }

  /*
   * 🔴🔴 2026-09-19 第六轮,这一条才是「这个板块高度太高了」的真根因。
   *
   * 站长:「文字和文字上下的距离压紧……这个板块高度太高了。」
   * 查出来:<li> 自己【继承 16px / 1.6 的行高】,所以每一行的盒子是 25.59px,
   * 里面装的链接文字只有 15px —— 每行白白胖 10.6px,线上四条链接换三行就是 32px。
   * 下面那条 .hp-footer-menu a 只管了 <a>,从来没人管过 <li>。
   *
   * 🔴 又一次「压的是外层,里层那个容器从来没人动过」。前几轮压的是 gap 和
   *    外框内边距 —— 都不是这一条。判据得量【行盒比文字高出多少】,
   *    只读 gap 或 padding 永远查不出来。
   */
  .hp-footer-menu li {
    font-size: 12px;
    line-height: 1.25;
  }

  .hp-footer-menu a {
    display: inline;
    min-height: 0;
    padding: 0;
    font-size: 12px;
    line-height: 1.25;
    /* 🔴 这里原来是 white-space: nowrap。线上四条长链接因此各占一整行,
       页脚反而更高 —— 正是站长看到的那一片空白。允许折行才是对的。 */
    white-space: normal;
  }

  .hp-logo[data-hp-footer-logo] {
    font-size: 14px;
  }

  .hp-footer-bottom {
    justify-content: flex-start;
    gap: 2px 10px;
    /* 🔴 2026-09-19 第六轮:上下 6 → 4px,和上面那个外框同档。 */
    padding: 4px 12px;
    font-size: 11.5px;
  }

  .hp-footer-bottom a {
    line-height: 1.25;
  }

}

@media (max-width: 389px) {
  .hp-header-inner {
    gap: 6px;
    padding: 0 8px;
  }

  .hp-header-tools {
    gap: 4px;
  }
}

@media (max-width: 480px) {
  .hp-contact-dialog-card {
    padding: 20px;
  }

  .hp-contact-dialog-account {
    grid-template-columns: minmax(0, 1fr);
  }

  .hp-contact-dialog-account .hp-action {
    width: 100%;
  }
}

@media (max-width: 359px) {
  .hp-logo-copy {
    display: none;
  }

  .hp-logo {
    gap: 0;
  }
}

.hp-action {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--r-5);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  white-space: normal;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}

.hp-action-primary {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--on-brand);
}

.hp-action-primary:hover {
  border-color: var(--brand-deep);
  background: var(--brand-deep);
  color: var(--on-brand);
}

.hp-action-secondary {
  border-color: var(--line2);
  background: var(--bg0);
  color: var(--t1);
}

.hp-action-secondary:hover {
  border-color: var(--brand-txt);
  color: var(--brand-txt);
}

.hp-action-on-brand {
  border-color: var(--on-brand);
  background: var(--on-brand);
  color: var(--brand-deep);
}

.hp-action-on-brand:hover {
  border-color: var(--brand-soft2);
  background: var(--brand-soft2);
  color: var(--t1);
}

.hp-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.hp-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--t1);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.5;
}

.hp-section-title::before {
  width: 4px;
  height: 18px;
  border-radius: var(--r-1);
  background: var(--brand);
  content: "";
}

.hp-product-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.hp-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line2);
  border-radius: var(--r-pill);
  background: var(--bg0);
  color: var(--t2);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.hp-pill:hover {
  border-color: var(--brand-txt);
  background: var(--bg0);
  color: var(--brand-txt);
}

.hp-pill.hp-is-active {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--on-brand);
}

.hp-product-grid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 16px;
}

.hp-product-card {
  position: relative;
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line1);
  border-radius: var(--r-5);
  background: var(--bg0);
  color: var(--t1);
  text-decoration: none;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}

.hp-product-card[hidden] {
  display: none;
}

.hp-product-card:hover {
  color: var(--t1);
}

.hp-product-card-image {
  position: relative;
  display: flex;
  min-height: 0;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg2);
}

.hp-product-card-image-element {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hp-product-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
}

.hp-product-card-title {
  display: -webkit-box;
  min-height: calc(1.3em * 2);
  margin: 0;
  overflow: hidden;
  color: var(--t1);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.hp-product-card-inquiry {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 6px;
  padding: 5px 9px;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  color: var(--brand-txt);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

@media (hover: hover) and (pointer: fine) {
  .hp-product-card:hover {
    border-color: var(--brand-txt);
    box-shadow: var(--sh2);
    transform: translateY(-2px);
  }
}

@media (max-width: 1024px) {
  .hp-product-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }

  /* 🔴 2026-09-12 首页商品数改成 10（服务端一个值，电脑手机拿到同一份 HTML）。
     各档都要【排满整行】、不留孤零零的尾巴：
       一行 5 个 → 10（两整行）· 一行 3 个 → 9（三整行）· 一行 2 个 → 10（五整行）
     所以只有「一行 3 个」这一档需要截断，下面这条就是它。

     🔴 手机（一行 2 个）原本截到 6 个，2026-09-12 站长拍板改成全部显示 10 个。
     理由是实测发现：被样式藏起来的那几张图【照样会下载】，
     藏起来既省不了流量、又少了被点的机会 —— 那就没有理由藏。
     10 个在两列下正好五整行，也不留尾巴。

     只选首页那个网格：目录页用的是同一个 data 属性，不能只靠它选。 */
  .hp-home-product-grid > :nth-child(n+10) {
    display: none;
  }

  .hp-product-card-body {
    padding-right: 12px;
    padding-left: 12px;
  }
}

@media (max-width: 640px) {
  /* 🔴 2026-09-19 站长看线上:「首页和分类页的产品之间空隙太大,上下左右都是」。
     根因:.hp-product-grid 的 gap 一直是 16px —— 那是【电脑端的值】,
     手机断点一次都没覆盖过它。前几轮压的是板块、页面壳、右栏,都不是这一条。
     🔴 他挑的是 6px,不是 0 或 2:两张白卡各有 1px 边框,贴太近会挨成一条粗线,
     看着像表格。首页和分类页共用这一条(归档页的网格没有自己的 gap)。 */
  .hp-product-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 6px;
  }

  /* 🔴 2026-09-18 站长看过视觉预览后拍板,原话:
     「移动端,"Price on request"这个不要,而且显示还是只要 2 排,不要 3 排」。
     他先否决了两条更有效的办法 ——「缩短标题」和「标题放三行」—— 只要这一条。

     🔴 助手实测提醒过、他仍然拍板:留白 12px→8px 每行只多一两个字母
     (43 个真实商品名,两行完整显示从 13 个只涨到 14 个)。
     真正的收益是卡片矮了约 41px、一屏多看商品。
     以后别人重读这段时不要以为这是为了「让名字显示完」。

     🔴 红线 8/9 的边界:这【不是】输出空标签再用 CSS 藏。
     这个元素有内容,桌面照常输出且可见,只在手机视口隐藏。
     verify_mobile_card_density 里有一条桌面正控制专门盯着这件事 ——
     没有它,把元素整个删掉也能让手机端断言变绿。 */
  .hp-product-card-inquiry {
    display: none;
  }

  /*
   * 旧规矩(2026-09-12,站长原话):「标题没有图片那么宽,当然要点点呼吸」。
   * 当时左右从 12px 收到 8px,呼吸还留着;上下从 16px 收到 12px。
   *
   * 🔴🔴 2026-09-19 左右那一半【被站长本人推翻】。他看线上手机版说:
   * 「移动端,图片是大了一些,但是标题横向没有跟着适应变大,首页和分类页修复下」。
   *
   * 根因:上一轮把页面壳压到左右 8px,图片跟着变宽了,标题却还缩在里面 ——
   * 图片是贴着白卡两边的,标题左右各缩进 8px,所以标题那一行【比图片窄 16px】。
   * 看起来就是「图变大了、字还挤在中间被切掉」。
   * 实测 390px:图片 182px,标题只有 166px。
   *
   * 🔴 只归零【左右】,上下 12px 一个字没动 —— 他说的是「横向」。
   * 🔴 我给了他两条路,他只选了这一条(标题和图片对齐),
   *    【明确没有选】「两行改三行」。所以 line-clamp:2 没动,
   *    名字太长的照样带「…」,这是他知情的选择,不是漏做。
   * 🔴 以后看到「要点点呼吸」那句旧话,别照着把左右加回去 —— 它已经作废了。
   * 🔴 电脑端不动:901/1024 仍是左右 12px、1440 仍是 16px,
   *    verify_mobile_card_density 里有一条正控制专门盯着。
   *
   * 🔴🔴 2026-10-01 站长又改回一点(他本人定的,不是我加的):
   * 「产品图片下面的标题,太靠左边了,来一丝丝呼吸」。给了四张线上截图,他选 B:左右 0 → 6px,
   * 标题字重 400 → 600(见本档最下面 .hp-product-card-title)。上下 12px、两行、13px 都没动。
   * 别再照 9-19 那段改回 0,也别照 9-12 那段改成 8px —— 现在是 6px。
   */
  .hp-product-card-body {
    padding: 12px 6px;
  }

  /* 🔴 2026-09-13 修：手机上原本只显示 9 个。
     上面那条截断写在 (max-width: 1024px) 里，而媒体查询是【叠加】的 ——
     手机宽度同时满足 1024 和 640 两档，截断跟着生效了。
     手机是两列，藏掉一个就剩 9 个:四行 + 最后一行孤零零挂 1 个,
     正是 09-12 定「各档都要排满整行」时要避免的尾巴。这里把它撤销回来。

     🔴 撤销值必须跟 .hp-product-card 自己的 display 一致（现在是 flex）:
     display:revert / initial / unset 在 <a> 上都会变成 inline，卡片会散架。
     工具/verify_home_count_and_nav.php ②h 锁住了这个一致性。

     为什么不把截断改成 (min-width:641px) and (max-width:1024px):
     视口宽度可以是小数，640 < 宽 < 641 时那种写法两边都不生效，
     会漏出 3 列 10 个的尾巴;撤销写法在同一区间仍然正确显示 9 个。 */
  .hp-home-product-grid > :nth-child(n+10) {
    display: flex;
  }


  /* 🔴 2026-10-01 站长:「字体不好看,能不能用规格标签里的字体」。规格表用的就是同一种系统字体,
     只是更粗(值是 700);他从 A 粗体 / B 半粗 / C 半粗字大一号 里选了 B = 600。
     换成要下载的网络字体没给:手机打开会慢,还要多连一个外面的网站。只在手机这一档,电脑端仍是 400。 */
  .hp-product-card-title {
    font-size: 13px;
    font-weight: 600;
  }
}

/* Content pages and native block-editor output. */
.hp-page-entry {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 56px 24px 72px;
}

.hp-page-entry > .hp-entry-title {
  max-width: 760px;
  margin: 0 auto 32px;
  color: var(--t1);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
}

/* 🔴 2026-09-11 正文行宽 760px → 55ch（约 538px）。
   浏览器实测（Terms 页真实正文，16px）：平均每个字符 7.17px，
   原来的 760px 一行排到【106 个字符】。排版上公认的舒适区间是 50–75 个，
   超出之后眼睛从行尾回到下一行行首容易串行 —— 采购读的是长段产品说明，
   读起来累就少读一段。55ch 实测约 75 个字符，正好落在区间上沿。
   注意 ch 是「0」这个字形的宽度，不等于实际字符数：
   直接写 70ch 量出来仍有 98 个字符，所以这里按实测倒推，不靠估。 */
.hp-entry-content {
  width: 100%;
  max-width: 55ch;
  min-width: 0;
  margin: 0 auto;
  color: var(--t2);
  font-size: 16px;
  line-height: 1.8;
}

.hp-entry-content > * {
  margin-bottom: 24px;
}

.hp-entry-content > :last-child {
  margin-bottom: 0;
}

.hp-entry-content p,
.hp-entry-content li,
.hp-entry-content dd,
.hp-entry-content figcaption {
  color: var(--t2);
}

.hp-entry-content h2,
.hp-entry-content h3,
.hp-entry-content h4 {
  color: var(--t1);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.3;
}

.hp-entry-content h2 {
  margin-top: 48px;
  margin-bottom: 18px;
  font-size: 28px;
}

.hp-entry-content h3 {
  margin-top: 36px;
  margin-bottom: 16px;
  font-size: 22px;
}

.hp-entry-content h4 {
  margin-top: 28px;
  margin-bottom: 12px;
  font-size: 18px;
}

.hp-entry-content > h2:first-child,
.hp-entry-content > h3:first-child,
.hp-entry-content > h4:first-child {
  margin-top: 0;
}

.hp-entry-content ul,
.hp-entry-content ol {
  padding-left: 24px;
}

.hp-entry-content li + li {
  margin-top: 8px;
}

.hp-entry-content li::marker {
  color: var(--brand-txt);
  font-weight: 700;
}

.hp-entry-content blockquote,
.hp-entry-content .wp-block-quote {
  margin-right: 0;
  margin-left: 0;
  padding: 20px 24px;
  border-left: 4px solid var(--brand);
  border-radius: var(--r-5);
  background: var(--brand-soft);
  color: var(--t2);
}

.hp-entry-content blockquote > :last-child,
.hp-entry-content .wp-block-quote > :last-child {
  margin-bottom: 0;
}

.hp-entry-content blockquote cite,
.hp-entry-content .wp-block-quote cite {
  display: block;
  margin-top: 12px;
  color: var(--t3);
  font-size: 14px;
  font-style: normal;
}

.hp-entry-content hr,
.hp-entry-content .wp-block-separator {
  margin-top: 40px;
  margin-bottom: 40px;
  border: 0;
  border-top: 1px solid var(--line1);
}

.hp-entry-content figure {
  max-width: 100%;
  margin-right: 0;
  margin-left: 0;
}

.hp-entry-content .wp-block-image img,
.hp-entry-content .wp-block-gallery img,
.hp-entry-content .wp-block-video video {
  display: block;
  width: 100%;
  border-radius: var(--r-5);
}

.hp-entry-content figcaption,
.hp-entry-content .wp-element-caption {
  margin-top: 10px;
  color: var(--t3);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

.hp-entry-content .wp-block-gallery,
.hp-entry-content .wp-block-gallery.has-nested-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.hp-entry-content .wp-block-gallery > *,
.hp-entry-content .wp-block-gallery.has-nested-images > figure.wp-block-image {
  width: auto;
  min-width: 0;
  margin: 0;
}

.hp-entry-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
  width: 100%;
}

.hp-entry-content .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2),
.hp-entry-content .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2) ~ figure.wp-block-image:not(#individual-image),
.hp-entry-content .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(1) {
  width: 100%;
}

.hp-entry-content .wp-block-gallery img {
  height: 100%;
  object-fit: cover;
}

.hp-entry-content .wp-block-video {
  overflow: hidden;
  border-radius: var(--r-5);
  background: var(--video-bg);
}

.hp-entry-content .wp-block-video figcaption,
.hp-entry-content .wp-block-video .wp-element-caption {
  color: var(--video-caption-fg);
}

.hp-entry-content .wp-block-cover {
  min-height: 320px;
  padding: 32px;
  overflow: hidden;
  border-radius: var(--r-6);
  color: var(--on-brand);
}

.hp-entry-content .wp-block-cover :where(p, h2, h3, h4) {
  color: var(--on-brand);
}

.hp-entry-content .wp-block-cover > :last-child {
  margin-bottom: 0;
}

.hp-entry-content .wp-block-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.hp-entry-content .wp-block-columns:has(> .wp-block-column:nth-child(3)) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hp-entry-content .wp-block-columns:has(> .wp-block-column:nth-child(4)) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hp-entry-content .wp-block-columns:has(> .wp-block-column:nth-child(5)) {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.hp-entry-content .wp-block-columns:has(> .wp-block-column:nth-child(6)) {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.hp-entry-content .wp-block-column {
  min-width: 0;
}

.hp-entry-content .wp-block-group {
  padding: 24px;
  border: 1px solid var(--line1);
  border-radius: var(--r-6);
  background: var(--bg0);
  box-shadow: var(--sh1);
}

.hp-entry-content .wp-block-group > :last-child {
  margin-bottom: 0;
}

.hp-entry-content .wp-block-spacer {
  max-height: 96px;
  margin-bottom: 0;
}

.hp-entry-content .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hp-entry-content .wp-block-button__link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: 1px solid var(--brand);
  border-radius: var(--r-5);
  background: var(--brand);
  color: var(--on-brand);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.hp-entry-content .wp-block-button__link:hover {
  border-color: var(--brand-deep);
  background: var(--brand-deep);
  color: var(--on-brand);
}

.hp-entry-content .wp-block-button.is-style-outline > .wp-block-button__link {
  background: var(--bg0);
  color: var(--brand-txt);
}

.hp-entry-content .wp-block-table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line1);
  border-radius: var(--r-5);
  background: var(--bg0);
  -webkit-overflow-scrolling: touch;
}

.hp-entry-content .wp-block-table table {
  display: table;
  width: 100%;
  min-width: 720px;
  margin: 0;
  border-collapse: collapse;
}

.hp-entry-content .wp-block-table th,
.hp-entry-content .wp-block-table td {
  padding: 12px 16px;
  border: 1px solid var(--line1);
  color: var(--t2);
  text-align: left;
  vertical-align: top;
}

.hp-entry-content .wp-block-table th {
  background: var(--bg2);
  color: var(--t1);
  font-weight: 800;
}

.hp-entry-content .wp-block-table tbody tr:nth-child(even) {
  background: var(--bg1);
}

.hp-entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background: var(--bg2);
}

.hp-entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(even) {
  background: var(--bg0);
}

.hp-entry-content .wp-block-table figcaption {
  padding: 10px 16px;
}

.hp-entry-content .hp-company-info,
.hp-entry-content .hp-content-certifications,
.hp-entry-content .hp-content-contacts {
  margin: 24px 0;
}

.hp-downloads {
  width: 100%;
  max-width: 760px;
  margin: 32px auto 0;
  padding: 20px;
  border: 1px solid var(--line1);
  border-radius: var(--r-6);
  background: var(--bg0);
}

.hp-downloads > h2 {
  margin: 0 0 14px;
  color: var(--t1);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3;
}

.hp-how-to-order-actions {
  width: 100%;
  max-width: 760px;
  margin: 24px auto 0;
}

.hp-entry-content .hp-company-info {
  overflow: hidden;
  border: 1px solid var(--line1);
  border-radius: var(--r-6);
  background: var(--bg0);
  box-shadow: var(--sh1);
}

.hp-entry-content .hp-company-info-row {
  display: grid;
  grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
  gap: 24px;
  padding: 16px 20px;
}

.hp-entry-content .hp-company-info-row + .hp-company-info-row {
  border-top: 1px solid var(--line1);
}

.hp-entry-content .hp-company-info dt {
  color: var(--t3);
  font-size: 14px;
  font-weight: 700;
}

.hp-entry-content .hp-company-info dd {
  min-width: 0;
  margin: 0;
  color: var(--t1);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.hp-entry-content .hp-content-certifications,
.hp-entry-content .hp-content-contacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  list-style: none;
}

.hp-entry-content .hp-content-certifications li,
.hp-entry-content .hp-content-contacts li {
  min-width: 0;
  margin: 0;
}

.hp-entry-content .hp-content-certification,
.hp-entry-content .hp-content-contact {
  display: flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--line1);
  border-radius: var(--r-5);
  background: var(--bg0);
  color: var(--t2);
  text-decoration: none;
}

.hp-entry-content button.hp-content-contact {
  width: 100%;
  text-align: left;
}

.hp-entry-content a.hp-content-certification:hover,
.hp-entry-content a.hp-content-contact:hover,
.hp-entry-content button.hp-content-contact:hover {
  border-color: var(--brand-txt);
  color: var(--brand-txt);
}

.hp-entry-content .hp-content-component-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-4);
  background: var(--brand-soft);
  color: var(--brand-txt);
}

.hp-entry-content .hp-content-component-icon svg {
  width: 18px;
  height: 18px;
}

.hp-entry-content .hp-content-contact-copy,
.hp-entry-content .hp-content-contact-copy > span {
  display: block;
  min-width: 0;
}

.hp-entry-content .hp-content-contact-copy strong {
  display: block;
  color: var(--t1);
  font-size: 14px;
}

.hp-entry-content .hp-content-contact-copy > span {
  margin-top: 2px;
  color: var(--t3);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.hp-entry-content .hp-content-contact .hp-contact-qr-image {
  display: block;
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: var(--r-3);
}

@media (max-width: 767px) {
  .hp-page-entry {
    padding: 36px 20px 64px;
  }

  .hp-page-entry > .hp-entry-title {
    margin-bottom: 24px;
    font-size: 30px;
  }

  .hp-entry-content h2 {
    font-size: 24px;
  }

  .hp-entry-content h3 {
    font-size: 20px;
  }

  .hp-entry-content .wp-block-columns,
  .hp-entry-content .wp-block-columns:has(> .wp-block-column:nth-child(n)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .hp-entry-content .wp-block-cover {
    min-height: 240px;
    padding: 24px;
  }

  .hp-entry-content .hp-company-info-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

/* 🔴 2026-09-30 审查 Y19:普通内容页(隐私政策、服务条款等 page.php 出的页)手机上的大标题。
   上面 ≤767 那一档把它从 38px 压到 30px 就停了,而站长 2026-09-18 给商品页、归档页、首页定的
   手机档是 19px / 1.05(规范 08 第三节),文章页 09-19 也跟上了 —— 这几页一直没沾到。
   第六次「电脑端的值、手机那一档没覆盖到」。B2B 四页那一份在 b2b-pages.css。
   🔴 只动标题的字号和行高。标题下方的间距、页面壳的边距、正文的字号行高【故意没动】——
      规范 08 第五节:法务页 / B2B 四页的段距和正文行高是明确保留的,他这次说的也只是标题。
   🔴 必须写在上面 ≤767 那一档【后面】:两条规则权重相同,靠源码顺序(规范 08 六之四、六之八)。
   verify_page_title_mobile_scale 六页 × 三档盯着,并量着那几样没动的。 */
@media (max-width: 640px) {
  .hp-page-entry > .hp-entry-title {
    font-size: 19px;
    line-height: 1.05;
  }
}

@media (max-width: 540px) {
  .hp-page-entry {
    padding-right: 16px;
    padding-left: 16px;
  }

  .hp-entry-content .wp-block-gallery,
  .hp-entry-content .wp-block-gallery.has-nested-images,
  .hp-entry-content .hp-content-certifications,
  .hp-entry-content .hp-content-contacts {
    grid-template-columns: minmax(0, 1fr);
  }

  .hp-download-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Content-center templates and media facades. */
.hp-post-entry > .hp-entry-title {
  margin-bottom: 12px;
}

.hp-post-meta {
  display: flex;
  max-width: 760px;
  align-items: center;
  gap: 16px;
  margin: 0 auto 28px;
  color: var(--t3);
  font-size: 14px;
}

.hp-post-featured {
  width: 100%;
  max-width: 760px;
  margin: 0 auto 32px;
  overflow: hidden;
  border-radius: var(--r-6);
  background: var(--bg2);
}

.hp-post-featured-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* 🔴 2026-09-19 第七轮:文章页的文字列【比特色图宽】。站长原话:
   「电脑端,文章页标题也显示不完就换行,文案的宽度应该比图片宽些」。
   改之前三个宽度各不相同:标题 760px · 特色图 760px · 正文 55ch(实测 554.3px),
   正文比图片窄了 205.7px —— 那就是他看到的「文案比图片窄」。

   🔴 只挂在 `.hp-post-entry` 底下,不许写到 `.hp-entry-content` 上:
      那个类是【所有内容页共用的】,B2B 四页、法务页、首页说明都吃它。
      他说的是文章页,不扩大范围。verify_article_typography 里有一组
      以 /terms/ 当对照页的断言,专门盯着这一条有没有漏出去。

   🔴 960px 是【量出来的,不是估的】:这条真标题在 38px/800 下排成一行
      需要 948.89px(克隆成 max-content 量的),960 留 11px 余量。
      视口 ≥1008px(960 + 壳左右各 24)时标题才排得下一行;
      901~1007px 这一档可用宽度不够,标题仍是两行 —— 那是视口限制,
      不是没改对,断言里写清楚了。

   🔴 正文 800px 是【按他的话反推的下限】,不是舒服值:
      要「比图片宽」,图片是 760px,所以正文必须 >760。800px 实测一行约 91 个字符。
      2026-09-11 把正文收到 55ch 的理由是「一行 50~75 个字符最好读」,
      写在上面那段注释里 —— 这一轮是站长明确要求推翻它的一半(只对文章页)。
      👉 别拿旧注释把它改回 55ch;也别以为 91 字符是没量过就写下的数。 */
.hp-post-entry > .hp-entry-title,
.hp-post-entry > .hp-post-meta {
  max-width: 960px;
}

.hp-post-entry > .hp-entry-content {
  max-width: 800px;
}

.hp-post-archive {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 56px 24px 72px;
}

.hp-post-archive-header {
  max-width: 760px;
  margin-bottom: 32px;
}

.hp-post-archive-title {
  margin-bottom: 12px;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.hp-post-archive-description {
  margin: 0;
  color: var(--t2);
  font-size: 16px;
  line-height: 1.7;
}

.hp-post-archive-list-after-downloads {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line1);
}

.hp-test-content-banner {
  margin: 0 0 24px;
  padding: 16px 18px;
  border: 2px solid var(--brand);
  border-radius: var(--r-3);
  background: var(--brand-soft);
  color: var(--brand-deep);
}

.hp-test-content-banner p {
  margin: 0;
  color: inherit;
}

.hp-test-content-banner strong {
  color: inherit;
}

.hp-post-archive-list-title {
  margin-bottom: 24px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.hp-post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.hp-post-card {
  min-width: 0;
}

.hp-post-card-link {
  display: flex;
  height: 100%;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line1);
  border-radius: var(--r-5);
  background: var(--bg0);
  color: var(--t1);
  text-decoration: none;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}

.hp-post-card-link:hover {
  color: var(--t1);
}

.hp-post-card-image {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg2);
}

.hp-post-card-image-element {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-post-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px;
}

.hp-post-card-date {
  margin-bottom: 8px;
  color: var(--t3);
  font-size: 13px;
}

.hp-post-card-title {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
}

.hp-post-card-summary {
  display: -webkit-box;
  overflow: hidden;
  color: var(--t2);
  font-size: 14px;
  line-height: 1.7;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.hp-post-pagination {
  margin-top: 32px;
}

.hp-post-pagination > div {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.hp-post-pagination a,
.hp-post-pagination span {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid var(--line2);
  border-radius: var(--r-5);
  background: var(--bg0);
  color: var(--t2);
  text-decoration: none;
}

.hp-post-pagination span[aria-current="page"] {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--on-brand);
}

.hp-post-empty {
	padding: 48px 24px;
  border: 1px solid var(--line1);
  border-radius: var(--r-6);
  background: var(--bg0);
  color: var(--t2);
	text-align: center;
}

.hp-post-empty h2 {
	margin-bottom: 10px;
	color: var(--t1);
	font-size: 24px;
}

.hp-post-empty p {
	max-width: 560px;
	margin: 0 auto 24px;
	line-height: 1.7;
}

.hp-related-section {
	width: calc(100% - 48px);
	max-width: var(--container);
	margin: 24px auto 64px;
	padding-top: 32px;
	border-top: 1px solid var(--line1);
}

.hp-related-section + .hp-related-section {
	margin-top: 0;
}

.hp-related-title {
	margin-bottom: 24px;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -.02em;
}

.hp-related-product-grid + .hp-related-page-grid {
	margin-top: 24px;
}

.hp-lazy-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-5);
  background: var(--video-bg);
}

.hp-lazy-embed-trigger {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--video-bg);
}

.hp-lazy-embed-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-lazy-embed-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--video-play-border);
  border-radius: var(--r-pill);
  background: var(--video-play-bg);
  box-shadow: var(--video-play-shadow);
  color: var(--video-fg);
  transform: translate(-50%, -50%);
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}

.hp-lazy-embed-play::before {
  width: 0;
  height: 0;
  margin-left: 4px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 15px solid currentcolor;
  content: "";
}

.hp-lazy-embed-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (hover: hover) and (pointer: fine) {
  .hp-post-card-link:hover {
    border-color: var(--brand-txt);
    box-shadow: var(--sh2);
    transform: translateY(-2px);
  }

  .hp-lazy-embed-trigger:hover .hp-lazy-embed-play {
    border-color: var(--brand);
    background: var(--brand);
    transform: translate(-50%, -50%) scale(1.06);
  }
}

@media (max-width: 900px) {
  .hp-post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .hp-post-archive {
    padding: 36px 20px 64px;
  }

  .hp-post-empty > .hp-button {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

	.hp-post-archive-title {
		font-size: 30px;
	}

	.hp-post-archive-list-title {
		font-size: 24px;
	}

	.hp-related-section {
		width: calc(100% - 40px);
		margin-bottom: 48px;
	}

	.hp-related-title {
		font-size: 24px;
	}
}

@media (max-width: 540px) {
  .hp-post-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .hp-post-archive {
    padding-right: 16px;
    padding-left: 16px;
  }

	.hp-post-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.hp-related-section {
		width: calc(100% - 32px);
	}
}

/* ───── 🔴🔴 2026-09-19 第七轮:手机上文章页上下压紧 ─────
   站长原话:「移动端,文字上下不要留太多呼吸,可以不要呼吸感,
             各自板块和各文字上下要压紧」。

   🔴 根因又是那个形状 —— 这是第四次:文章页【整份没有 ≤640px 那一档】。
      前几轮压的是首页、分类页、商品页、询价页、页脚,没有一次是这条路。
      所以手机上一直在用电脑端的值:壳上下 36/64 · 段与段 24 · 图下 32 ·
      H2 上 48 下 18。以后碰排版先查这一条。

   🔴 数值全部沿用他这几天【已经拍板过】的那一档,不是新发明的:
      · 板块之间 6px —— 和商品卡、询价页板块同一个数
      · 标题 → 它下面那行 2px —— 和询价页「标签 → 自己的输入框」同一个数
      · 页面壳上 6px / 下 10px —— 和首页、分类页、询价页同一个数
   🔴 小标题(H2)上 10px / 下 4px 是【关系,不是越小越好】:
      上面必须比下面松,否则小标题会黏在上一段尾巴上,读起来像同一段。
      他要的是压紧,不是压平 —— 断言里专门有一条守着这个关系。

   🔴 左右页边距【本轮不动】(仍是 16px)。他说的是「上下」,不扩大范围。
   🔴 正文行高 1.8 和字号 16px【本轮不动】。规范 08 第五节:正文那一档保留,
      采购要一段段读。动手前当面问过他,他同意行高不动。
   🔴 手机上文章标题仍是 30px —— 别的页面他早就定成 19px 了,这一条
      【没有一起改】,因为他这次说的是「上下之间」,不是字号。已当面告诉他。

   🔴 全部挂在 `.hp-post-entry` 底下:`.hp-page-entry` / `.hp-entry-content`
      是所有内容页共用的壳,直接改会连 B2B 四页和法务页一起压掉,那不是他要的。
      位置也必须在这里 —— 上面 ≤767px 那一档里的 `.hp-page-entry > .hp-entry-title`
      和本块权重相同,靠的是源码顺序(规范 08 六之四踩过:写在 ≤640 大块里却没生效)。 */
@media (max-width: 640px) {
  .hp-post-entry {
    padding-top: 6px;
    padding-bottom: 10px;
  }

  /* 🔴 2026-09-19 第八轮:标题字号压到 19px / 行高 1.05。
     站长看完第七轮报告后定的(他只回了一个「改」字)。
     这一档就是他 2026-09-18 给【商品页、归档页 h1 和首页主标题】定的那一档 ——
     文章页当时整份没跟上,和本块那个根因是同一个形状,不是新发明的数。
     🔴 压的是字号,【不是内容】:不截断、不插硬换行、不改他填的标题。
        规范 08 第三节「三行标题本身不是问题」仍然有效,
        断言里有一条正控制专门量标题有没有被截断。 */
  .hp-post-entry > .hp-entry-title {
    margin-bottom: 2px;
    font-size: 19px;
    line-height: 1.05;
  }

  .hp-post-entry > .hp-post-meta {
    margin-bottom: 6px;
  }

  .hp-post-entry > .hp-post-featured {
    margin-bottom: 6px;
  }

  /* 段与段、段与列表之间 */
  .hp-post-entry > .hp-entry-content > * {
    margin-bottom: 6px;
  }

  /* 🔴 相邻外边距会合并:段的 6px 和小标题的 10px 取大的那个,所以段→H2 是 10px。 */
  .hp-post-entry > .hp-entry-content > h2,
  .hp-post-entry > .hp-entry-content > h3,
  .hp-post-entry > .hp-entry-content > h4 {
    margin-top: 10px;
    margin-bottom: 4px;
  }
}

/* ───── 🔴🔴 2026-09-19 第九轮:手机上文章【列表页】压紧 ─────
   站长原话(他用手机看线上 /resources/ 提的):
     「移动端文章列表页,你看看这个根本没有压紧。去掉呼吸感。压缩紧,
       标题也太大了,比下面文字大点就行了」

   🔴 这是【第五次】撞上「电脑端的值、手机断点从没覆盖过」,而且这次更隐蔽:
      列表页在 ≤767 那一档【有】规则,但只改了两个字号(38→30、28→24),
      间距一个都没改 —— 壳上下 36/64、板块 32、卡片之间 24、白卡内边距 20,
      全是电脑端的值。**「有那一档」不等于「那一档管了间距」。**

   🔴 单页(single.php)和列表页(home.php)是【两条路】。
      上一轮压的是单页,这一页一个字没沾到 —— 这就是延续文件九之三
      那条「同一件事有没有第二条路」。

   🔴 数值沿用他已经拍板过的那一档:板块/卡片之间 6px · 标题到下一行 2px ·
      页面壳上 6 下 10 · 白卡内边距 8px(和询价页白卡同档)。

   🔴 字号:「比下面文字大点就行」——
      · 大标题 30 → 19px/1.05(和商品页、分类页、首页主标题同一档)
      · 小标题(Technical articles)24 → 16px
      · 🔴 卡片标题 20 → 16px:**这一条是必须跟着改的**,
        不改的话卡片标题(20)会比页面主标题(19)还大,层级当场倒挂。
      · 描述 16px、摘要 14px、日期 13px 【都没动】—— 他说的是标题,不是正文。
        断言里有一条正控制专门守着「大标题仍然比描述大」。 */
@media (max-width: 640px) {
  .hp-post-archive {
    padding-top: 6px;
    padding-bottom: 10px;
  }

  .hp-post-archive-header {
    margin-bottom: 10px;
  }

  .hp-post-archive-title {
    margin-bottom: 2px;
    font-size: 19px;
    line-height: 1.05;
  }

  .hp-post-archive-list-title {
    margin-bottom: 6px;
    font-size: 16px;
  }

  /* 🔴 有下载区时列表整块会多一段上外边距和上内边距。
     本地没有配置下载文档,这一条【在本地测不到】,报告里写明了。 */
  .hp-post-archive-list-after-downloads {
    margin-top: 10px;
    padding-top: 10px;
  }

  .hp-post-grid {
    gap: 6px;
  }

  .hp-post-card-body {
    padding: 8px;
  }

  .hp-post-card-date {
    margin-bottom: 2px;
  }

  .hp-post-card-title {
    margin-bottom: 4px;
    font-size: 16px;
  }

  .hp-post-pagination {
    margin-top: 10px;
  }
}

/* 法务链接下沉到版权行(2026-09-07):它们必须有,但没人想点,
   所以缩小放在 © 旁边,不再占一整栏。手机上自动换行到第二行。 */
.hp-footer-legal-nav {
  display: flex;
  flex: 0 1 auto;
}

.hp-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hp-footer-legal li {
  margin: 0;
}

.hp-footer-legal a {
  color: inherit;
}

/*
 * 🔴🔴 2026-09-19 第六轮,站长点名的那一条:
 * 「2026 后面的 4 个下划线的英文,可以缩短间距,让显示一排」。
 *
 * 🔴 光缩间距【不够】,实测过才知道:
 *    四条文字(Refund / Shipping / Privacy / Terms of Service)在 11.5px 下
 *    一共 325.52px,360px 手机上可用宽度只有 336px ——
 *    间距压到 0 也只剩 10px 富余,换个安卓字体立刻又掉下去。
 *    所以字号一起压到 10.5px:文字总宽 300.78px + 三个 6px 间距 = 318.78px,
 *    留 17px 富余,最窄那一档也稳。
 * 🔴 版权那行「© 2026 HotPico」仍是 11.5px,没跟着压 —— 他说的是后面那四个。
 * 🔴 验证里有两条正控制盯着:字号不许低于 10px;
 *    「四条文字 + 三个间距」必须真的放得进可用宽度(不是靠撑出屏幕挤成一排)。
 *
 * 🔴🔴 这一段【必须写在 .hp-footer-legal 基础规则后面】,不能塞进上面那个
 *    ≤640px 的大块 —— 那个块在本文件 1024 行一带,基础规则在 2356 行,
 *    同权重时后者赢,写在上面等于白写。2026-09-19 第一版就是这么失效的:
 *    间距量出来还是 18px,360px 上照旧两排。
 */
@media (max-width: 640px) {
  .hp-footer-legal {
    gap: 2px 6px;
    font-size: 10.5px;
  }
}

/* 手机端:商品页那三个动作改由底部常驻条承载(2026-09-07 站长要求)。
   1100px 是底部条本来就有的断点,沿用同一个 —— 条在的地方面板就不出,
   两者不会同时出现,也不会两边都没有。 */
@media (max-width: 1099px) {
  .hp-product-contact-panel {
    display: none;
  }
}

@media (min-width: 1100px) {
  .hp-mobile-tabbar-item--share,
  [data-hp-tabbar-inquiry] {
    display: none;
  }
}

.hp-mobile-tabbar-item--share {
  padding: 0;
}

.hp-mobile-tabbar-item--share .hp-share-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

/* 首页分类入口(2026-09-07):由页内筛选按钮改成指向各分类页的链接,
   沿用原来的胶囊样式,视觉不变,行为从"筛选"变成"跳转"。 */
.hp-product-category-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
}

.hp-product-category-links .hp-pill {
  text-decoration: none;
}

@media (max-width: 640px) {
  /* 🔴 2026-09-18 当天先改三列,站长又看了四列预览后拍板改四列,原话:
     「首页和分类页一排4列如何,字体相应变小变合适按钮」→「可以,去改」。
     🔴 这一次字号【是他要求压小的】(13 → 11.5px),和规范 08 原来「字号不许压」
        那条冲突,以他这次的裁决为准,规范 08 已同步更新。
     🔴 min-height:44px 不许动 —— 手指点得中,W3C 最小可点尺寸。 */
  .hp-product-category-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    /* 🔴 2026-09-19 站长:「板块与板块之间不需要距离」。
       这一排按钮下面原来空着 20px 才到商品网格,是首页最显眼的一段空白。 */
    margin-bottom: 2px;
  }

  .hp-product-category-links > .hp-pill {
    min-width: 0;
    justify-content: center;
    padding: 6px 4px;
    border-radius: 14px;
    font-size: 11.5px;
    text-align: center;
    /* 🔴 2026-09-30 审查 O4:这里原来是 hyphens: auto。只有 Safari 内核会照做 —— iPhone 上按钮变成
       「Chili Season-ings」「View all prod-ucts」,安卓 Chrome 一直是整词换行。美国手机大半是 iPhone。
       改成 manual:两边都只在空格处换行。verify_pill_no_mid_word_break 用 Safari 内核盯着。 */
    hyphens: manual;
  }
}

/* 手机底部条(2026-09-07 站长选的方案 C):
   WhatsApp 与「发送询价」两个实心主按钮并排,分享缩成右侧图标按钮。
   高度都给到 46px,手指点得中。 */
.hp-mobile-tabbar {
  gap: 8px;
  padding: 8px 10px;
  align-items: center;
}

.hp-tabbar-main {
  flex: 1 1 0;
  min-width: 0;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.hp-tabbar-main svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

.hp-tabbar-main span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hp-tabbar-main--whatsapp {
  background: var(--success);
  color: var(--bg1);
}

.hp-tabbar-main--inquiry {
  background: var(--brand);
  color: var(--on-brand);
}

.hp-tabbar-share {
  flex: 0 0 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line1);
  border-radius: 10px;
  color: var(--t2);
  text-decoration: none;
}

.hp-tabbar-share svg {
  width: 19px;
  height: 19px;
}

.hp-tabbar-share-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 「查看全部产品」并入分类那一排,做成实心胶囊和分类区分开(2026-09-08)。 */
.hp-pill-catalog {
  background: var(--brand);
  color: var(--on-brand);
  border-color: var(--brand);
}