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

.hp-home-shell {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 24px 64px;
}

.hp-home-heading {
  max-width: 1200px;
  margin: 0 0 24px;
  color: var(--t1);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.hp-home-screen + .hp-home-screen {
  margin-top: 48px;
}

.hp-hero-v,
.hp-hero-image-card,
.hp-hero-copy-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--r-6);
}

.hp-hero-p {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-6);
  background: var(--video-bg);
}

.hp-hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

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

.hp-hero-v-scrim {
  position: absolute;
  inset: 0;
  z-index: var(--z-local-base);
  background: var(--video-scrim);
  pointer-events: none;
}

.hp-hero-content {
  z-index: var(--z-local-content);
  color: var(--video-fg);
}

.hp-hero-v .hp-hero-content,
.hp-hero-image-card .hp-hero-content {
  position: absolute;
  top: 50%;
  left: 40px;
  width: min(52%, 640px);
  transform: translateY(-50%);
}

.hp-hero-body {
  max-width: 640px;
  font-size: 18px;
  line-height: 1.7;
}

.hp-hero-body p,
.hp-content-screen-body p {
  margin: 0;
}

.hp-hero-body p + p,
.hp-content-screen-body p + p {
  margin-top: 12px;
}

.hp-hero-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: var(--z-local-control);
  display: flex;
  /* 🔴 2026-09-20 站长:「电脑端播放按钮太小,大一点就行」。
     给了 56 / 64 / 72 / 80 四档他说都太小,又给 96 / 112 / 128 / 144,
     他定了 112。图标按同比例 20 → 40。
     ⚠️ 手机端【不动】,仍是 ≤767 那一档里的 48px —— 他明说「移动端正常,不动」。 */
  width: 112px;
  height: 112px;
  min-height: 112px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--video-play-border);
  border-radius: var(--r-3);
  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-hero-play:hover {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--video-fg);
}

.hp-hero-play-icon {
  width: 40px;
  height: 40px;
  margin-left: 6px;
  fill: currentcolor;
}

/* Load-failure notice for the hero video. Ships hidden and is revealed by
   front-page.js only when the media itself fails, so the buyer is told what
   happened instead of being left with a dead frame. The [hidden] rule keeps
   the attribute authoritative over this block's own display value. */
.hp-hero-video-error {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: var(--z-local-control);
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--r-1);
  background: var(--video-duration-bg);
  color: var(--video-fg);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.hp-hero-video-error[hidden] {
  display: none;
}

.hp-hero-duration {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: var(--z-local-control);
  padding: 3px 8px;
  border-radius: var(--r-1);
  background: var(--video-duration-bg);
  color: var(--video-fg);
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1.5;
  pointer-events: none;
}

.hp-hero-v.hp-is-playing .hp-hero-v-scrim,
.hp-hero-v.hp-is-playing .hp-hero-content,
.hp-hero-v.hp-is-playing .hp-hero-play,
.hp-hero-v.hp-is-playing .hp-hero-duration {
  display: none;
}

.hp-hero-copy-card {
  padding: 40px;
  border: 1px solid var(--line1);
  background: linear-gradient(135deg, var(--brand-soft), var(--bg2));
}

.hp-hero-copy-card .hp-hero-content {
  max-width: 760px;
  color: var(--t1);
}

.hp-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.hp-hero-trust-item {
  min-width: 0;
}

.hp-hero-trust-mark {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line1);
  border-radius: var(--r-pill);
  background: var(--bg0);
  color: var(--t2);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.hp-hero-trust-mark[href]:hover {
  border-color: var(--brand-txt);
  color: var(--brand-txt);
}

.hp-hero-trust-mark svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.hp-strength-list {
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line1);
  border-radius: var(--r-5);
  background: var(--line1);
}

.hp-strength-item {
  display: flex;
  min-width: 0;
  min-height: 108px;
  flex-direction: column-reverse;
  justify-content: center;
  gap: 4px;
  padding: 20px 16px;
  background: var(--bg0);
  text-align: center;
}

.hp-strength-item dt {
  color: var(--t3);
  font-size: 12px;
  line-height: 1.5;
}

.hp-strength-item dd {
  margin: 0;
  color: var(--t1);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
}

.hp-content-screen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 32px;
  border: 1px solid var(--line1);
  border-radius: var(--r-5);
  background: var(--bg0);
}

.hp-content-screen-copy {
  max-width: 820px;
}

.hp-content-screen h2 {
  margin: 0;
  color: var(--t1);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.hp-content-screen-body {
  margin-top: 12px;
  color: var(--t2);
  font-size: 15px;
  line-height: 1.7;
}

.hp-why {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  padding-left: 44px;
}

.hp-why::before {
  position: absolute;
  top: 32px;
  bottom: 32px;
  left: 24px;
  width: 4px;
  border-radius: var(--r-pill);
  background: var(--brand);
  content: "";
}

.hp-private-label {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  padding: 0;
  background: var(--brand-soft);
}

.hp-private-label.hp-has-media {
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
}

.hp-private-label-media {
  min-width: 0;
  min-height: 300px;
  overflow: hidden;
  background: var(--bg2);
}

.hp-private-label-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-private-label-panel {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
  padding: 36px;
}

.hp-cta {
  min-height: 236px;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding: 44px 32px;
  border-color: var(--brand-deep);
  background: var(--brand-deep);
  text-align: center;
}

.hp-cta .hp-content-screen-copy {
  max-width: 760px;
}

.hp-cta h2,
.hp-cta .hp-content-screen-body {
  color: var(--on-brand);
}

@media (hover: hover) and (pointer: fine) {
  .hp-hero-play:hover {
    transform: translate(-50%, -50%) scale(1.06);
  }
}

@media (max-width: 1024px) {
  .hp-home-shell {
    padding-top: 32px;
  }

  .hp-home-heading {
    font-size: 34px;
  }

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

@media (max-width: 767px) {
  .hp-home-shell {
    padding: 28px 12px 48px;
  }

  /*
   * 🔴 2026-09-08 站长:手机上标题太大,占掉半屏。分两次调:
   * 30px → 24px → 20px(他看过第一次后要求"再调小 2 档")。
   * 文字内容一个字没动,只是视觉缩小 —— Google 看的是文字不是字号,SEO 不受影响。
   * 🔴 仍然是两行,那是因为这句英文有 51 个字符,不是字号没生效。
   *    想一行只能改短 home_heading,但那句里塞着四个关键词
   *    (Guizhou / Chili Factory / Dried Chili / Chili Powder),不该为排版丢掉。
   * 🔴 电脑端一个字没动(38px / 34px 两档都保留),这是站长明确要求的。
   */
  .hp-home-heading {
    margin-bottom: 14px;
    font-size: 20px;
    letter-spacing: -.01em;
  }

  .hp-home-screen + .hp-home-screen {
    margin-top: 36px;
  }

  .hp-hero-v,
  .hp-hero-image-card {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    overflow: visible;
  }

  .hp-hero-p,
  .hp-hero-v-scrim,
  .hp-hero-play,
  .hp-hero-duration {
    grid-area: 1 / 1;
  }

  .hp-hero-v-scrim {
    position: relative;
    inset: auto;
    border-radius: var(--r-6);
  }

  .hp-hero-v .hp-hero-content,
  .hp-hero-image-card .hp-hero-content {
    position: static;
    width: 100%;
    grid-area: 2 / 1;
    padding: 20px;
    border-radius: var(--r-6);
    background: var(--bg2);
    color: var(--t1);
    transform: none;
  }

  .hp-hero-v.hp-is-playing .hp-hero-content {
    display: block;
  }

  .hp-hero-body {
    max-width: none;
    font-size: 14px;
    line-height: 1.5;
  }

  .hp-hero-play {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: 48px;
    height: 48px;
    min-height: 48px;
    align-self: center;
    justify-self: center;
    transform: none;
  }

  .hp-hero-duration {
    position: relative;
    right: auto;
    bottom: auto;
    align-self: end;
    justify-self: end;
    margin: 12px;
  }

  .hp-hero-play-icon {
    width: 18px;
    height: 18px;
  }

  .hp-hero-copy-card {
    padding: 28px 20px;
  }

  .hp-content-screen {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
    padding: 24px 20px;
  }

  .hp-why {
    display: flex;
    padding-left: 36px;
  }

  .hp-why::before {
    top: 24px;
    bottom: 24px;
    left: 20px;
  }

  .hp-private-label,
  .hp-private-label.hp-has-media {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 0;
    padding: 0;
  }

  .hp-private-label-media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .hp-private-label-panel {
    gap: 20px;
    padding: 24px 20px;
  }

  .hp-cta {
    align-items: center;
    gap: 20px;
    padding: 36px 20px;
  }

  .hp-content-screen h2 {
    font-size: 22px;
  }
}

@media (max-width: 640px) {
  /* 🔴 2026-09-18「最紧」档。站长看过 桌面/最紧_四列_横排页脚.html 后拍板:
     「移动端上下留白太多太多了……上下越挤越好」「再紧一点都不够紧,上下板块距离也很远」。
     🔴 电脑端一个像素都不许动 —— 所以全部关在 ≤640px 里,641~767 那一档也原样不动。
     数值取自那份预览的首页那一屏(.home{padding:6px 12px 10px;gap:6px} / h1 19px·1.05)。
     🔴 任务书的表格只点名了「商品页壳」,但它写的现值 28px 12px 48px 正是这条规则,
     而且他批准的预览里首页也是同一档 —— 按预览做,已在交接里写明这是照预览补的。 */
  /* 🔴 2026-09-19 左右 12 → 8px。站长看线上:「12 太远了,要不要再小些」
     「图片也小了一圈,把图片大一点点」。页边距收窄,商品图就直接变大一圈。
     给了他 12/8/4 三档的实测数字(390px 手机上图宽 178/182/186px),他挑了 8px。
     🔴 没有更小是有理由的,告诉过他:页边距管的不只是图,标题、描述、
     分类按钮那一排都跟着往外靠;而且安卓从屏幕边缘往里滑是「返回」手势,
     卡片贴太近容易误触。8px 是「还剩一丝边」的下限。 */
  .hp-home-shell {
    padding: 6px 8px 10px;
  }

  .hp-home-heading {
    margin-bottom: 6px;
    font-size: 19px;
    line-height: 1.05;
  }

  /* 🔴 2026-09-19 站长:「板块与板块之间不需要距离」→ 定为 2px(他自己选的,不是 0)。 */
  .hp-home-screen + .hp-home-screen {
    margin-top: 2px;
  }

  .hp-hero-duration {
    display: none;
  }

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

  .hp-strength-item {
    min-height: 96px;
    padding: 16px 10px;
  }

  .hp-strength-item dd {
    font-size: 20px;
  }
}

@media (hover: hover) and (pointer: fine) and (max-width: 767px) {
  .hp-hero-play:hover {
    transform: scale(1.06);
  }
}

.hp-pdp.hp-product-layout.hp-product-surface {
  position: relative;
  display: grid;
  width: 100%;
  max-width: var(--container);
  grid-template-columns: minmax(0,1.4fr) minmax(0,1fr);
  align-items: start;
  gap: 32px;
  margin: 0 auto;
  padding: 40px 24px 72px;
}

.hp-pdp.hp-product-layout.hp-product-surface::before,
.hp-pdp.hp-product-layout.hp-product-surface::after {
  content: none;
}

.hp-pdp.hp-product-layout.hp-product-surface > .hp-gal-main.hp-product-gallery {
  position: relative;
  width: 100%;
  min-width: 0;
  grid-column: 1;
  grid-row: 1;
  float: none;
  margin: 0;
}

.hp-pdp.hp-product-layout.hp-product-surface > div:not(.hp-gal-main) {
  position: static;
  width: 100%;
  min-width: 0;
  float: none;
  margin: 0;
}

.hp-pdp.hp-product-layout.hp-product-surface > .hp-product-description,
.hp-pdp.hp-product-layout.hp-product-surface > .hp-key-specs,
.hp-pdp.hp-product-layout.hp-product-surface > .hp-product-panel {
  grid-column: 1 / -1;
}

.hp-pdp-aside {
  display: flex;
  min-width: 0;
  grid-column: 2;
  grid-row: 1;
  flex-direction: column;
  gap: 16px;
  overscroll-behavior: contain;
}

/* Keep the original single-column grid items below the desktop breakpoint. */
.hp-pdp-aside-boundary {
  display: contents;
}

@media (min-width: 901px) {
  /* A grid row alone does not bound sticky scrolling in Chromium. Stretch a
     normal containing block across the gallery row so the aside stops before
     the full-width sections. The wrapper adds no spacing or content order. */
  .hp-pdp.hp-product-layout.hp-product-surface > .hp-pdp-aside-boundary {
    display: block;
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
  }

  .hp-pdp.hp-product-layout.hp-product-surface > div.hp-pdp-aside,
  .hp-pdp-aside-boundary > .hp-pdp-aside {
    position: sticky;
    top: calc(var(--hp-header-h, 72px) + 16px);
    align-self: start;
    max-height: calc(100vh - var(--hp-header-h, 72px) - 32px);
    overflow-y: auto;
  }
}

.hp-pdp-aside > h1 {
  margin: 0;
  color: var(--t1);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.hp-key-specs {
  display: flex;
  min-width: 0;
  align-items: stretch;
  flex-wrap: wrap;
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid var(--line1);
  border-bottom: 1px solid var(--line1);
}

.hp-key-spec {
  min-width: 112px;
  flex: 1 1 112px;
  padding: 0 14px;
  border-left: 1px solid var(--line1);
}

.hp-key-spec:first-child {
  padding-left: 0;
  border-left: 0;
}

.hp-key-spec dt {
  color: var(--t3);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.hp-key-spec dd {
  margin: 3px 0 0;
  color: var(--t1);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.hp-product-quote {
  width: 100%;
  min-height: 48px;
  font-size: 15px;
  font-weight: 700;
}

.hp-gal-main > .hp-product-gallery-wrapper {
  /* 2026-09-06: images used to sit edge to edge with no breathing room. */
  display: grid;
  gap: 16px;
  overflow: hidden;
  padding: 16px;
  border: 1px solid var(--line1);
  border-radius: var(--r-5);
  background: var(--bg2);
}

.hp-gal-main .hp-product-gallery-image {
  display: flex;
  width: 100%;
  height: auto;
  min-height: 0;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r-4, 10px);
  background: var(--bg1);
}

.hp-gal-main .hp-product-gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 🔴 2026-09-19 小图行【只在 ≤640px 显示】。电脑端和 641~900px 那一档一个像素都不许动,
   所以这里先整排关掉,手机断点里再打开。
   🔴 关的是显示,不是输出 —— 节点一直在初始 HTML 里,Google 看得到那几张图。 */
.hp-product-gallery-thumbs {
  display: none;
}

.hp-product-contact-panel {
	min-width: 0;
	padding: 20px;
	border: 1px solid var(--line1);
	border-radius: var(--r-5);
	background: var(--bg1);
}

.hp-inquiry-prompt {
	margin: 0;
	padding: 11px 14px;
	border: 1px solid var(--brand-soft2);
	border-radius: var(--r-5);
	background: var(--brand-soft);
	color: var(--brand-txt);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.45;
}

/* 🔴 2026-09-30 审查 Y23:窗口 1100~1219 宽时「Chat on WhatsApp」折成两行。
   原来是两列等宽的网格,右栏一窄,每个按钮只剩 186~203px,而这行字连图标要 206px 左右。
   改成可换行的 flex + 按钮里的字不许折行:
     · 两个按钮并排放得下、而且平分之后每个都装得下自己的字 → 照旧两个等宽(1220 以上和改前逐像素相同);
     · 并排放得下但平分不够 → 字多的那个按自己的字宽拿,另一个拿剩下的;
     · 并排放不下 → 自动变成上下两行,各占整行。
   🔴 不写死像素门槛:Windows 上同一行字比 Mac 宽(首页 H1 那次踩过),按「字到底多宽」来排才不会换台电脑又折。
   🔴 只有一个按钮时它自己占满整行(flex-grow),所以原来那条 :only-child 跨两列的规则不需要了,已删。
   这一块 1100px 以下整块隐藏(手机端由底部常驻条承担)。verify_product_whatsapp_one_line 九档盯着。 */
.hp-product-contact-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

.hp-product-contact-actions .hp-action {
	flex: 1 1 0;
	width: auto;
	min-width: max-content;
	min-height: 48px;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}

.hp-product-whatsapp {
	border-color: var(--success);
	background: var(--success);
	color: var(--bg1);
}

.hp-product-whatsapp:hover {
	border-color: var(--success-strong);
	background: var(--success-strong);
	color: var(--bg1);
}

.hp-product-whatsapp svg {
	width: 20px;
	height: 20px;
}

.hp-product-description {
	min-width: 0;
	padding: 20px;
	border: 1px solid var(--line1);
	border-radius: var(--r-5);
	background: var(--bg0);
}

.hp-product-description .hp-entry-content {
	max-width: none;
	margin: 0;
}

.hp-product-panel {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line1);
  border-radius: var(--r-5);
  background: var(--bg0);
}

.hp-product-panel h2 {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}

/* 🔴 2026-09-20 站长看线上:「规格标题太大了，小两圈，而且规格标题和正文
   呼吸太大，压紧，留一丝丝呼吸就行」。
   只收【包装规格】这一块 —— 他指的就是它，别的面板标题不跟着动。 */
.hp-product-pack-specs h2 {
  margin: 0 0 6px;
  font-size: 16px;
}

/* 🔴 2026-09-20 站长在电脑端看出【错版】:摘要行原来是 flex 换行，
   第一排排满之后「Net Weight」落到第二排，却仍带着左边框和左内边距，
   和上一排对不齐(他的截图就是这一处)。
   改成每行一项的两列网格:行数由内容决定，不存在「第二排第一个」
   这种对不齐的位置，标签列固定宽所以各行的值也都从同一条竖线起。
   🔴 标签列宽度是量出来的,不是估的:最长的标签 Country of Origin
      在 11px 下实测 <LABELPX>px。换标签/换字号必须重量 ——
      装不下就会折行,verify_origin_in_pack_specs 的几何断言会当场红。 */
@media (min-width: 641px) {
  .hp-product-pack-specs .hp-pack-spec-summary {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    /* 🔴 2026-09-20 站长看电脑端:「左右高低不同」。
       标签 11px、值 14px,而值还自带 3px 上边距 —— 用 start 对齐
       就是各自顶着自己的行盒,两边文字不在一条线上。
       改成按【文字基线】对齐,并把那 3px 上边距在本块里去掉。
       ⚠️ 手机档【仍然用 start】:那一档 200% 放大时 baseline 会让行盒
          比 dt/dd 的并集还高,verify_mobile_typography 的行距断言当场红
          (本轮踩过)。两档故意不一样,别顺手统一。 */
    align-items: baseline;
    row-gap: 4px;
    column-gap: 8px;
    padding: 8px 0;
  }

  .hp-product-pack-specs .hp-pack-spec-summary dd {
    margin-top: 0;
  }

  /* 🔴 整块共用【同一对列】,所以每一行的标签和值都从同一条竖线起。
     行自己不再是网格 —— 它一旦自己算宽度,各行就会各算各的,
     那正是站长截图里看到的错版。 */
  .hp-product-pack-specs .hp-pack-spec-summary > .hp-key-spec {
    display: contents;
  }
}

.hp-product-facts {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line1);
  border-radius: var(--r-5);
  background: var(--line1);
}

.hp-product-fact {
  min-width: 0;
  padding: 14px 16px;
  background: var(--bg1);
}

.hp-product-fact dt {
  color: var(--t3);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.hp-product-fact dd {
  margin: 6px 0 0;
  color: var(--t1);
  font-size: 15px;
  line-height: 1.7;
  white-space: pre-line;
}

.hp-wholesale-panel {
  border-color: var(--brand-soft2);
  background: var(--brand-soft);
}

@media (max-width: 900px) {
  .hp-pdp.hp-product-layout.hp-product-surface {
    grid-template-columns: minmax(0,1fr);
  }

  .hp-pdp.hp-product-layout.hp-product-surface > div:not(.hp-gal-main) {
    position: static;
  }

  .hp-pdp-aside {
    grid-column: 1;
  }

  /* 2026-09-06: single column below 900px — a sticky aside would pin a tall
     block over the content, so it scrolls normally here. Same weight as the
     desktop rule, otherwise the sticky leaks onto phones. */
  .hp-pdp.hp-product-layout.hp-product-surface > div.hp-pdp-aside {
    position: static;
    top: auto;
    max-height: none;
    overflow-y: visible;
  }

  .hp-pdp.hp-product-layout.hp-product-surface > .hp-gal-main.hp-product-gallery {
    grid-row: 2;
  }
}

@media (max-width: 767px) {
  .hp-pdp.hp-product-layout.hp-product-surface {
    gap: 24px;
    padding: 28px 12px 48px;
  }

  .hp-pdp-aside > h1 {
    font-size: 28px;
  }

  .hp-product-contact-panel,
  .hp-product-description,
  .hp-product-panel {
    padding: 18px;
  }

  .hp-product-panel h2 {
    font-size: 19px;
  }

  /* 🔴 2026-09-20 站长要求,同上:只收包装规格这一块的标题。 */
  .hp-product-pack-specs h2 {
    margin: 0 0 4px;
    font-size: 15px;
  }

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

  .hp-key-spec[data-hp-key-spec="category"] dd > a {
    display: inline-flex;
    min-width: 44px;
    max-width: 100%;
    min-height: 44px;
    align-items: center;
  }
}

/* 🔴 2026-09-18「最紧」档 · 商品页(≤640px,电脑端零变化)。
   站长原话:「首先都搞最紧,然后商品页,分类两个字再分类左边,做一排显示」。
   数值照 桌面/最紧_四列_横排页脚.html 的商品页那一屏。 */
@media (max-width: 640px) {
  .hp-pdp.hp-product-layout.hp-product-surface {
    /* 🔴 2026-09-19 站长:「板块与板块之间不需要距离」。
       问过他 0 还是 2px,他定 2px —— 0 的话两个白卡的边框会挨成一条粗线。 */
    gap: 2px;
    padding: 6px 12px 10px;
  }

  /*
   * 🔴 2026-09-19 第二次,同一天:站长看线上说
   * 「详情页分类这个卡片,他和上下之间的空隙好大,不要空隙,留一丝丝一点点呼吸就行了」。
   *
   * 上面那条 .hp-pdp 的 gap 管的是【外层网格】(图集 / 右栏 / 通栏正文之间)。
   * 标题、分类卡、规格卡、询价卡是【右栏内部】的兄弟,由 .hp-pdp-aside 自己的
   * gap:16px 撑着 —— 那一条从来没被手机断点覆盖过,所以上一轮压了外层也没用。
   *
   * 🔴 教训:压间距之前先看清楚这两块到底是【哪个容器】的兄弟。
   *    查的办法是量真实几何(相邻两块 top - bottom),不是读某一条 CSS 属性 ——
   *    少数一层容器就查不出来。verify_mobile_tightest 那条断言就是这么写的。
   */
  .hp-pdp-aside {
    gap: 2px;
  }

  .hp-pdp-aside > h1 {
    font-size: 19px;
    line-height: 1.05;
  }

  .hp-product-contact-panel,
  .hp-product-description,
  .hp-product-panel {
    padding: 8px;
  }

  /* ② 分类卡:原来标签在上、分类名在下两行,改成左标签右内容一排。
     52px 是预览里定的标签列宽;当前唯一的标签是 Category(11px),装得下。
     🔴 换成更长的标签要重量,量不下就让它折行,不许压字号。 */
  .hp-product-category-card > .hp-key-spec[data-hp-key-spec="category"] {
    display: grid;
    min-width: 0;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: baseline;
    gap: 10px;
    padding: 0;
    border: 0;
  }

  .hp-product-category-card > .hp-key-spec[data-hp-key-spec="category"] > dd {
    min-width: 0;
    margin: 0;
  }

  /*
   * 🔴🔴 2026-09-19 站长两次指着这个框说「简直就是空,不合适」「刚好和字差不多就行了」。
   *
   * 撑高它的是下面这条 min-height:44px —— 那是 W3C 的最小可点尺寸,
   * 本项目的任务书和 规范/08 都写过「不许动」。这一条是【站长本人推翻的】:
   * 我把代价原原本本告诉他了(分类名是链接,手指会更容易点歪),他仍然要压。
   * 记在这里,免得以后有人当成回归又把 44px 加回去。
   *
   * 卡片本身的上下内边距也跟着收到 4px —— 只去掉 44px 而留着 8px 内边距,
   * 框还是比字高出一截,他还会再说一次「空」。
   */
  .hp-product-category-card.hp-product-panel {
    padding: 4px 8px;
  }

  .hp-key-spec[data-hp-key-spec="category"] dd > a {
    min-width: 0;
    min-height: 0;
  }
}

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

.hp-catalog-shell {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 24px 72px;
}

.hp-catalog .hp-products-title {
  margin: 0;
  color: var(--t1);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.5;
}

.hp-catalog .hp-products-header > div {
  max-width: 760px;
  margin-top: 10px;
  color: var(--t2);
  font-size: 14px;
  line-height: 1.8;
}

.hp-catalog .hp-products-header > div p {
  margin: 0;
}

.hp-catalog-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 20px 0 4px;
  padding: 16px;
  border: 1px solid var(--line1);
  border-radius: var(--r-6);
  background: var(--bg0);
}

.hp-catalog-filter-row {
  display: grid;
  grid-template-columns: minmax(0, 120px) minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-width: 0;
}

.hp-catalog-filter-label {
  display: flex;
  min-height: 44px;
  align-items: center;
  color: var(--t2);
  font-size: 13px;
  font-weight: 800;
}

.hp-catalog-filter-options {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 8px;
}

.hp-catalog-filter-option {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid var(--line2);
  border-radius: var(--r-pill);
  background: var(--bg0);
  color: var(--t2);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.hp-catalog-filter-option:hover {
  border-color: var(--brand-txt);
  color: var(--brand-txt);
}

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

.hp-catalog ul.hp-product-grid {
  grid-template-columns: repeat(5,minmax(0,1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.hp-catalog ul.hp-product-grid::before,
.hp-catalog ul.hp-product-grid::after {
  content: none;
}

.hp-catalog-view .hp-catalog ul.hp-product-grid > li.hp-product-grid-item {
  width: auto;
  min-width: 0;
  float: none;
  margin: 0;
  padding: 0;
}

.hp-catalog-pagination {
  margin-top: 24px;
}

.hp-catalog-pagination nav {
  margin: 0;
}

.hp-catalog-view .hp-catalog .hp-catalog-pagination nav.hp-products-pagination ul.page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

.hp-catalog-view .hp-catalog .hp-catalog-pagination nav.hp-products-pagination ul.page-numbers > li {
  display: block;
  float: none;
  margin: 0;
  border: 0;
  overflow: visible;
}

.hp-catalog-view .hp-catalog-pagination nav ul li > a,
.hp-catalog-view .hp-catalog-pagination nav ul li > span {
  display: inline-flex;
  min-width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0 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;
  text-decoration: none;
}

.hp-catalog-view .hp-catalog-pagination nav ul li > span.current {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--on-brand);
}

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

@media (max-width: 767px) {
  .hp-catalog-shell {
    padding: 28px 24px 64px;
  }

  .hp-catalog-filter-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .hp-catalog-filter-label {
    min-height: 0;
  }

  .hp-catalog-view .hp-catalog-pagination nav ul li > a,
  .hp-catalog-view .hp-catalog-pagination nav ul li > span {
    min-width: 44px;
    height: 44px;
  }

}

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

  /* 🔴 2026-09-18「最紧」档 · 分类页(≤640px,电脑端零变化)。
     数值照 桌面/最紧_四列_横排页脚.html 的分类页那一屏
     (.cat{padding:6px 24px 10px} / h1 19px·1.05 / .cdesc 13px·1.4)。 */
  /* 🔴 2026-09-19 左右 24 → 8px,和首页【统一】。
     原来一个 12 一个 24,站长把两个页面的截图放一起才发现分类页的图更小一圈。
     🔴 规范 08 原写着「归档页左右 24px 保持」—— 那是助手上一轮自己定的,
     不是他定的。他这次点名要改,以他为准,规范已同步。 */
  .hp-catalog-shell {
    padding: 6px 8px 10px;
  }

  .hp-catalog .hp-products-title {
    font-size: 19px;
    line-height: 1.05;
  }

  .hp-catalog .hp-products-header > div {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.4;
  }

  /* ⑤ 站长:「分类页去掉分类两个字」。
     🔴 是【视觉隐藏】不是 display:none —— 读屏软件必须还读得到这个名字,
     否则视障采购就不知道下面那排按钮是按什么分的。
     电脑端照常显示(见桌面正控制)。和 2026-09-18 隐藏 Price on request 同一个边界:
     红线 8/9 管的是「空值不许输出空标签」,这里是有内容的元素只在手机视口隐藏。 */
  .hp-catalog-filter-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}


/* ── 包装规格表(2026-09-06 新增)────────────────────────
   同一产品的多种克重。有值才渲染,所以这里不需要空态样式。 */
.hp-product-pack-specs .hp-pack-spec-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 15px;
}

.hp-product-pack-specs .hp-pack-spec-table th,
.hp-product-pack-specs .hp-pack-spec-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line1);
  text-align: left;
}

.hp-product-pack-specs .hp-pack-spec-table thead th {
  color: var(--t2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.hp-product-pack-specs .hp-pack-spec-table tbody tr:last-child th,
.hp-product-pack-specs .hp-pack-spec-table tbody tr:last-child td {
  border-bottom: 0;
}

/* 🔴 2026-09-12：窄屏上不再硬挤，改成这一层横向滚动。
   本体宽度不超过容器，所以页面整体不会出现横向滚动条。 */
.hp-pack-spec-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
  .hp-product-pack-specs .hp-pack-spec-table th,
  .hp-product-pack-specs .hp-pack-spec-table td {
    padding: 9px 10px;
    font-size: 14px;
    /* 🔴 表头和单元格都不许拦腰折断单词：
       以前 PACKAGING 被折成「PACKAGIN / G」、Chaotianjiao 折成「Chaotianji / ao」。 */
    white-space: nowrap;
  }

  /* 列宽保住，装不下就让上面那层横向滚动 */
  .hp-product-pack-specs .hp-pack-spec-table {
    min-width: 520px;
  }

  /* Mobile summary only: preserve the shared category/facts layout.
     🔴 2026-09-19 站长看了线上手机版:「规格……字体间左右空隙太大上下距离太大,
     压到最低,甚至不需要距离」,并要求净含量那一串挤成一排。
     所以这里三处一起收:行距 8 → 2、标签列 84 → 66、标签到内容 12 → 6。 */
  .hp-pack-spec-summary {
    display: grid;
    /* 🔴 2026-09-20 契约更新(不是削弱):标签列从写死的 66px 改成 max-content。
       原来 66px 是按当时最长的 Net Weight(61.91px)定的,只留 4px 余量。
       本轮把 Country of Origin 并进这一块,它 96.61px —— 写死的 66px
       当场把它折成两行(实测 dt 高 31px)。
       max-content = 永远等于本页最长的那个标签,【富余为零】,
       所以比写死 66px 更难过:任何标签只要更长,列就跟着长,
       挤到值折行时 verify_origin_in_pack_specs 的行数断言当场红。 */
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
    row-gap: 2px;
    /* 🔴 2026-09-20:列距 6 → 4px。标签列加宽到 96.61px 之后,
       360px 屏上值列只剩 215.39px,而净含量那一串要 216.36px ——
       就差 0.97px 把它挤成两行。收 2px 的列距正好够,
       方向也和站长要的「压紧」一致。
       ⚠️ 现在余量只有约 1px:再加一个克重、或标签再长一点就会折行,
       verify_origin_in_pack_specs 的行数断言会当场红。 */
    column-gap: 4px;
    padding: 0;
    border: 0;
  }

  .hp-pack-spec-summary > .hp-key-spec {
    display: contents;
  }

  /* 🔴 2026-09-21 站长看线上手机版:「移动端详情页,去掉这个小标题
     Packaging Options」。
     🔴 做法是【视觉隐藏】,不是 display:none —— 规范 08 六之八的无障碍底线:
        栏目标题必须留给读屏软件,它是盲人用户判断「这一块是什么」的唯一依据。
        屏幕上的效果和删掉一模一样(宽高各 1px、裁剪掉、不占垂直空间)。
     🔴 只关在这一档里。规范 08 六之八那条教训:不带媒体查询的选择器会把
        电脑端一起压掉(2026-09-20 页脚那轮真踩过)。电脑端标题照旧显示,
        verify_origin_in_pack_specs 有一条正控制专门盯着它。 */
  .hp-product-pack-specs > h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* 🔴 2026-09-21 站长:「再压紧规格上下行间距,留一丝丝呼吸感」。
     能动的只剩【行高】:行距 2px 和值字号 12px 都是他自己定过的,
     verify_mobile_typography 的 A-row-gap-2 / A-value-font-size-12 锁着,不许动。
     1.35 → 1.2:行盒 16.19 → 14.4px。那 2px 行距原样保留,就是他要的那一丝。 */
  .hp-pack-spec-summary dt {
    line-height: 1.2;
  }

  .hp-pack-spec-summary dd {
    min-width: 0;
    margin: 0;
    /* 🔴 14 → 12px 是站长同意压的:净含量「250g · 500g · 1000g · 2500g · 25KG」
       在 14px 下放不下一行才换行,他要求「可以横向一排放」。 */
    font-size: 12px;
    /* 🔴 2026-09-21 站长要求再压紧:1.35 → 1.2(行盒 16.19 → 14.4px)。 */
    line-height: 1.2;
  }

  /* 🔴 2026-09-19 站长:「板块与板块之间不需要距离」,定为 2px。
     原来筛选区上下各 20px,是手机上最显眼的一段空白。 */
  .hp-catalog-filters {
    margin: 2px 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }

  /* 🔴 2026-09-18 与首页同一条裁决:分类页那排筛选标签也要四列等宽。
     这一块比首页更挤 —— 它在卡片里面,左右还有卡片内边距。
     原来是 flex 自适应换行(截图里看着像两列,其实是自然折的)。
     🔴 当天先改成三列 + 内边距 8·6,站长看过四列预览后又拍板改四列、
        字号 13 → 11.5px、内边距收到 6·4、圆角改小更像标签。原话「可以,去改」。
     🔴 min-height:44px 不许动 —— 手指点得中,W3C 最小可点尺寸,站长也认可。 */
  .hp-catalog-filter-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .hp-catalog-filter-option {
    padding: 6px 4px;
    border-radius: 14px;
    font-size: 11.5px;
    /* 🔴 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-19 第三次,站长看线上手机版提的:
   * 「移动端详情页正方形主图自适应应该撑满屏幕,然后图片下面可以放 5 个图片的微缩图」
   * 逐条确认后:「1 我建议自适应真撑满,2 点了也能换图,现有的左右滑动不变。
   *   但是一定注意不要和之前一样搞很多空隙进去,没必要,紧凑些,3 同意。」
   *
   * 上一版这里是「内边距 8 + 扣减 24 + 间距 16 = 下一张露头 16px」那一套。
   * 露头是在告诉采购「右边还有图,可以滑」,不是装饰 —— 撑满之后露头没有了,
   * 🔴 这个提示【没有取消,是换人承担了】:改由下面那排小图承担。
   *    verify_mobile_typography 那条 D-next-image-peek 也照这个口径换掉了,
   *    换上的是「小图行必须可见且张数等于图片数 + 主图确实还能横向滚动」。
   *
   * 🔴 撑满靠【破框】:商品页壳 .hp-pdp 左右有 12px,图集用负外边距顶出去。
   *    不许改 .hp-pdp 的 padding —— 那会把标题、卡片、正文一起顶到屏幕边,
   *    站长要的只是图。
   */
  /* 🔴 width 必须跟着改成 auto。上面第 611 行给图集写死了 width:100%,
     那个 100% 是对着【网格轨道】算的(壳减掉左右各 12px),
     只加负外边距的话图集只是整体左移 12px,宽度一点没长 ——
     实测 360px 屏上主图右边缘停在 336,离屏幕边还差 24px。
     🔴 这正是「量真实几何、别读 CSS 属性」救下来的一次:
        margin 写对了、padding 也归零了,断言照样红,因为撑满没撑到。 */
  .hp-pdp.hp-product-layout.hp-product-surface > .hp-gal-main.hp-product-gallery {
    width: auto;
    margin-right: -12px;
    margin-left: -12px;
  }

  /* 🔴 margin 那一句是 base.css 的 `figure { margin-block: 0 16px }` 留下的:
     图集下面一直挂着 16px 死空隙。小图行的 margin-top 6px 和它相邻会折叠,
     取大的那个 —— 实测量出来是 16px 不是 6px。
     站长这几轮反复说「不要搞很多空隙进去」,这 16px 正是其中一处。 */
  .hp-gal-main > .hp-product-gallery-wrapper {
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    overflow-x: auto;
    background: none;
    /* 🔴 2026-09-21 站长用手机看线上说:「图片左右滑动不是很自然,
       滑动不是就是下一张,要非常快滑动,慢慢滑动就不是下一张,
       不是别的网站那样正常的情况」。
       根因就是这一行原来写的 `proximity` —— 字面意思是「靠得够近才吸附」,
       也就是【允许松手后停在两张图中间】。慢拖 45%~60% 正好落在这个空档里:
       半张对半张,看起来像「滑了但没换图」;只有快速甩、靠惯性冲过半张才换。
       改成 mandatory = 松手必须落在一张完整的图上。
       🔴 实测证据在 工具/verify_gallery_swipe.php,改之前那几条是红的。 */
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
  }

  /* 图框的圆角也去掉:撑满之后圆角贴在屏幕边上,露出来的是页面底色,像没做完。
     🔴 图片本身不动 —— 仍是 1:1、仍是 object-fit:contain,站长明确说过「不动」。 */
  .hp-gal-main .hp-product-gallery-image {
    border-radius: 0;
    scroll-snap-align: start;
    /* 🔴 2026-09-21 同一轮顺带修掉的另一件(站长没提,是实测挖出来的):
       用力甩一下会【跳过中间那张】,五张图一甩直接到第三张。
       always = 一次手势最多翻一张,采购不会莫名其妙漏看一张图。 */
    scroll-snap-stop: always;
  }

  /*
   * 🔴 小图行【不跟着破框】,左右保持 12px 和商品页壳对齐。
   *    贴着屏幕边的话,手指从边缘往里滑「返回」时容易误触。
   * 🔴 一排永远按【5 等分】算,和这个商品有几张图无关 ——
   *    只有 2 张图的商品,小图也是这个宽度,不会撑成半个屏幕那么大。
   *    390px 上一格正好 70px,360px 上 64px,都还在 44px 之上。
   */
  .hp-product-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    margin: 6px 12px 0;
  }

  .hp-product-gallery-thumb {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--line1);
    border-radius: var(--r-4, 10px);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--bg1);
    cursor: pointer;
  }

  .hp-product-gallery-thumb[aria-current="true"] {
    border: 2px solid var(--brand);
  }

  /* 🔴 小图用的是 WordPress 的 thumbnail 尺寸(150×150 硬裁,本来就是正方形),
     所以 cover 不会再裁掉什么;它挡的是「某张图小到没生成 thumbnail、
     退回原图」时被拉变形。主图那一层仍然是 contain,一个字没动。 */
  .hp-product-gallery-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ── 分享当前页(2026-09-06)──────────────────────────── */
.hp-product-share {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
  flex-wrap: wrap;
}

.hp-product-share__link {
  color: var(--t2);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hp-product-share__link:hover,
.hp-product-share__link:focus-visible {
  color: var(--t1);
}

.hp-product-share__status {
  color: var(--t2);
  font-size: 13px;
}