/*
Theme Name: Hubogen Astra Child
Theme URI: https://huibojian.com
Description: Hubogen child theme for Astra - product catalog cards & brand styling.
Author: Hubogen
Template: astra
Version: 1.0.0
Text Domain: hubogen-astra-child
*/

/* ============================================================
   CJK-first typography
   The site content is Chinese. A CJK-first stack stops the Astra
   default (Montserrat, latin-only) from falling back to a random
   system font for Chinese glyphs, and keeps latin ICBs (OEM, GMP,
   HACCP, ISO 22000) on a clean grotesque.
   ============================================================ */
:root {
	--hb-font-cjk: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB",
	               "Noto Sans SC", "Source Han Sans SC", "WenQuanYi Micro Hei",
	               -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	               Helvetica, Arial, sans-serif;
}

body,
button, input, select, textarea,
.ast-button, .ast-custom-button,
h1, h2, h3, h4, h5, h6,
.entry-title, .widget-title, .site-title, .site-description {
	font-family: var(--hb-font-cjk);
}

/* Chinese text wants a touch more line-height than latin. */
body,
.entry-content p,
.entry-content li {
	line-height: 1.85;
}

/* Chinese has no italics — use a weight shift for emphasis instead. */
.entry-content em {
	font-style: normal;
	font-weight: 600;
}

/* ============ Product catalog cards ============ */
.hubogen-products-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
	margin: 32px 0;
}

.hubogen-product-card {
	background: #ffffff;
	border: 1px solid #e5e9e7;
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow .25s ease, transform .25s ease;
}

.hubogen-product-card:hover {
	box-shadow: 0 8px 24px rgba(15, 110, 86, .12);
	transform: translateY(-3px);
}

.hubogen-product-card__media {
	display: block;
	aspect-ratio: 1 / 1;
	background: #f6f8f7;
	overflow: hidden;
}

.hubogen-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hubogen-product-card__body {
	padding: 18px 20px 22px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.hubogen-product-card__form {
	display: inline-block;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #0F6E56;
	background: rgba(15, 110, 86, .08);
	border-radius: 4px;
	padding: 3px 9px;
	margin-bottom: 10px;
	align-self: flex-start;
}

.hubogen-product-card__title {
	font-size: 18px;
	line-height: 1.35;
	margin: 0 0 10px;
}

.hubogen-product-card__title a {
	color: #012851;
	text-decoration: none;
}

.hubogen-product-card__title a:hover {
	color: #0F6E56;
}

.hubogen-product-card__excerpt {
	font-size: 14px;
	line-height: 1.6;
	color: #4a5a55;
	margin: 0 0 16px;
	flex: 1;
}

.hubogen-product-card__cta {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	color: #ffffff;
	background: #0F6E56;
	border-radius: 6px;
	padding: 10px 18px;
	text-decoration: none;
	text-align: center;
	transition: background .2s ease;
}

.hubogen-product-card__cta:hover {
	background: #0B5443;
	color: #ffffff;
}

.hubogen-products-empty {
	text-align: center;
	padding: 64px 20px;
	color: #6b7b76;
}

@media (max-width: 600px) {
	.hubogen-products-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

/* ============ Single product ============ */
.hubogen-single-product__media {
	margin-bottom: 28px;
	border-radius: 12px;
	overflow: hidden;
	background: #f6f8f7;
}

.hubogen-single-product__media img {
	width: 100%;
	height: auto;
	display: block;
}

.hubogen-single-product__title {
	margin: 8px 0 22px;
}

.hubogen-single-product__cta {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid #e5e9e7;
}

/* ============================================================
   Content imagery — restrained, consistent presentation
   Applied to figures inserted in page bodies.

   Design rules (locked):
   1. No image may exceed ~62vh of viewport height, whatever its
      natural aspect ratio. Portrait phone photos (958x1920) would
      otherwise render ~1640px tall and dominate the page.
   2. Landscape photos render at a fixed 16:9 frame, object-fit:cover.
   3. Certificates keep their document ratio but are width-capped.
   ============================================================ */

.entry-content .wp-block-image {
	margin: 34px auto;
}

.entry-content .wp-block-image img {
	border-radius: 10px;
	box-shadow: 0 4px 20px rgba(1, 40, 81, .07);
	display: block;
	width: 100%;
	height: auto;
}

/* Centred accents are narrower than the text column. */
.entry-content .wp-block-image.aligncenter {
	max-width: 760px;
}

/* ---- Landscape photography: lock to a cinematic 16:9 frame ----
   NOTE (orientation pass 2026-10-01, rev 2): `line-gummy-nc.jpg` was NOT
   in fact rotated — the original 958x1920 is a correct *portrait* capture
   of a long gummy line, and the earlier 90 deg "fix" broke it. It has been
   restored to the pristine original and now falls through to the PORTRAIT
   rule below (height="1920"), which is correct.
   `hero-lab-portrait.jpg` genuinely WAS camera-tilted ~25 deg; it is now
   deskewed + max-rect cropped to 956x755 — hence the 956 key here.
   1920 / 1500 / 1200 = native landscape lab & line shots; 878 = the
   deskewed formulation shot. */
.entry-content .wp-block-image.aligncenter img[width="1920"],
.entry-content .wp-block-image.aligncenter img[width="1500"],
.entry-content .wp-block-image.aligncenter img[width="1200"] {
	aspect-ratio: 16 / 9;
	height: auto;
	object-fit: cover;
	object-position: center;
	max-height: 62vh;
}

/* Deskewed (camera-tilt corrected) shots — natural ratio preserved so the
   subject is never over-cropped; only the height is capped. */
.entry-content .wp-block-image.aligncenter img[width="956"],
.entry-content .wp-block-image.aligncenter img[width="878"] {
	height: auto;
	width: 100%;
	object-fit: contain;
	max-height: 62vh;
}

/* The deskewed formulation shot sits high in frame — bias the crop upward
   so the technician's head is never clipped by the 16:9 lock. */
.entry-content .wp-block-image.aligncenter img[src*="lab-formula-nc"] {
	object-position: center 30%;
}

/* ---- Wide (full-bleed) landscape lede image ----
   NOTE: 4:3 source photos must NOT be crushed into 21:9 — that crops
   heads off. Use 16:9 as the wide ratio for standard photos, and only
   go cinematic on genuinely wide (>2:1) sources. */
.entry-content .wp-block-image.alignwide img {
	aspect-ratio: 16 / 9;
	height: auto;
	object-fit: cover;
	object-position: center;
	max-height: 58vh;
}

/* Square-ish sources (4:3) keep more of the frame. */
.entry-content .wp-block-image.alignwide img[width="1000"],
.entry-content .wp-block-image.alignwide img[width="1200"] {
	aspect-ratio: 3 / 2;
	max-height: 56vh;
}

/* ---- Square dosage / product shots: keep 1:1, cap width ---- */
.entry-content .wp-block-image.aligncenter img[width="800"] {
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: cover;
	max-height: 46vh;
}

/* ---- Portrait shots must never tower: cap by height, crop centre ----
   LIVE USE (2026-10-01 rev 2): `line-gummy-nc.jpg` (958x1920) is a
   legitimate portrait capture of the gummy production line and matches
   `img[width="958"]` / `img[height="1920"]` here. Do NOT "fix" it by
   rotating — the pristine original is correct.
   `img[width="1080"]` is defensive only (legacy portrait size). */
.entry-content .wp-block-image.aligncenter img[height="1920"],
.entry-content .wp-block-image.aligncenter img[width="958"],
.entry-content .wp-block-image.aligncenter img[width="1080"] {
	aspect-ratio: 4 / 5;
	height: auto;
	object-fit: cover;
	object-position: center 30%;
	max-height: 62vh;
	max-width: 620px;
	margin-left: auto;
	margin-right: auto;
}

/* ---- Certificate / document: keep the document ratio ---- */
.entry-content .wp-block-image.aligncenter:has(img[src*="cert-"]) {
	max-width: 500px;
}

.entry-content .wp-block-image.aligncenter:has(img[src*="cert-"]) img {
	aspect-ratio: auto;
	max-height: 72vh;
	object-fit: contain;
	background: #fff;
}

/* ---- Column walls (dosage grids): uniform square tiles ----
   NOTE: the inner figure carries .aligncenter, whose max-width:760px
   would otherwise fight the column width and collapse the grid. Every
   width/height constraint must be re-declared at higher specificity. */
.entry-content .wp-block-columns .wp-block-column,
.entry-content .wp-block-columns.alignwide .wp-block-column {
	flex: 1 1 0;
	min-width: 0;
	margin-bottom: 0;
}

.entry-content .wp-block-columns .wp-block-image,
.entry-content .wp-block-columns .wp-block-image.aligncenter {
	max-width: 100%;
	width: 100%;
	margin: 0;
}

.entry-content .wp-block-columns .wp-block-image img,
.entry-content .wp-block-columns .wp-block-image.aligncenter img {
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: none;
	object-fit: cover;
	object-position: center;
	border-radius: 10px;
}

/* Stack into 2 columns on tablet so tiles stay legible. */
@media (max-width: 921px) {
	.entry-content .wp-block-columns:not(.is-not-stacked-on-mobile) .wp-block-column {
		flex-basis: calc(50% - 12px) !important;
	}
}

/* Keep captions quiet. */
.entry-content .wp-block-image figcaption {
	font-size: 13px;
	color: #6b7b76;
	text-align: center;
	margin-top: 10px;
}

/* Mobile: go edge-to-edge, but keep the height discipline. */
@media (max-width: 921px) {
	.entry-content .wp-block-image.aligncenter {
		max-width: 100%;
		margin: 26px 0;
	}
	.entry-content .wp-block-image.aligncenter img {
		max-height: 54vh;
	}
	.entry-content .wp-block-image.alignwide img {
		aspect-ratio: 16 / 10;
		max-height: 48vh;
	}
}

/* ============================================================
   WhatsApp floating button
   Fixed bottom-right, sits above Astra's back-to-top so they
   never collide. Brand green #25D366 with the official glyph
   drawn as inline SVG inside the anchor (no icon font needed).
   ============================================================ */
.hb-wa-float {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 9998;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25D366;
	box-shadow: 0 6px 18px rgba(15, 110, 86, .28), 0 2px 6px rgba(0, 0, 0, .18);
	color: #ffffff !important;
	text-decoration: none !important;
	transition: transform .18s ease, box-shadow .18s ease;
}

.hb-wa-float:hover,
.hb-wa-float:focus-visible {
	transform: translateY(-2px) scale(1.04);
	box-shadow: 0 10px 24px rgba(15, 110, 86, .34), 0 3px 8px rgba(0, 0, 0, .2);
}

.hb-wa-float svg {
	width: 30px;
	height: 30px;
	display: block;
	fill: currentColor;
}

/* Keep the label readable for screen readers only. */
.hb-wa-float .hb-wa-float__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* On phones nudge it clear of the thumb zone edge. */
@media (max-width: 544px) {
	.hb-wa-float {
		right: 14px;
		bottom: 14px;
		width: 52px;
		height: 52px;
	}
	.hb-wa-float svg { width: 27px; height: 27px; }
}

/* Small hover tooltip on wide screens. */
@media (min-width: 922px) {
	.hb-wa-float::after {
		content: "Chat on WhatsApp";
		position: absolute;
		right: 68px;
		top: 50%;
		transform: translateY(-50%) translateX(6px);
		background: #0F6E56;
		color: #fff;
		font-size: 13px;
		line-height: 1;
		white-space: nowrap;
		padding: 9px 12px;
		border-radius: 8px;
		opacity: 0;
		pointer-events: none;
		transition: opacity .18s ease, transform .18s ease;
	}
	.hb-wa-float:hover::after,
	.hb-wa-float:focus-visible::after {
		opacity: 1;
		transform: translateY(-50%) translateX(0);
	}
}

/* ============================================================
   Cookie consent banner (GDPR minimal)
   Added 2026-10-01 · pairs with hubogen-site-enhance.php v1.1.0
   ============================================================ */
.hb-consent {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 99998;
	background: #ffffff;
	border-top: 1px solid rgba(15, 110, 86, 0.18);
	box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.08);
	font-family: 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
}
.hb-consent[hidden] { display: none; }
.hb-consent__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 16px 22px;
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
}
.hb-consent__text {
	margin: 0;
	flex: 1 1 420px;
	font-size: 14px;
	line-height: 1.55;
	color: #333;
}
.hb-consent__text a {
	color: #0F6E56;
	text-decoration: underline;
}
.hb-consent__actions {
	display: flex;
	gap: 10px;
	flex: 0 0 auto;
}
.hb-consent__btn {
	font: 600 13px/1 'Montserrat', sans-serif;
	letter-spacing: .02em;
	text-transform: uppercase;
	padding: 11px 20px;
	border-radius: 100px;
	cursor: pointer;
	border: 1px solid #0F6E56;
	transition: background-color .18s ease, color .18s ease;
}
.hb-consent__btn--ghost {
	background: #ffffff;
	color: #0F6E56;
}
.hb-consent__btn--ghost:hover,
.hb-consent__btn--ghost:focus-visible {
	background: rgba(15, 110, 86, 0.07);
}
.hb-consent__btn--primary {
	background: #0F6E56;
	color: #ffffff;
}
.hb-consent__btn--primary:hover,
.hb-consent__btn--primary:focus-visible {
	background: #0b5544;
}
@media (max-width: 544px) {
	.hb-consent__inner { padding: 14px 16px; gap: 14px; }
	.hb-consent__actions { width: 100%; }
	.hb-consent__btn { flex: 1 1 auto; text-align: center; padding: 12px 14px; }
}
/* === HB dosage-form body (2026-10-05) === */
.hb-dosage-body{max-width:100%;margin:18px 0 10px;font-size:16px;line-height:1.75;color:#2b2b2b}
.hb-dosage-body h2{font-size:20px;font-weight:600;margin:28px 0 10px;color:#0F6E56;line-height:1.35}
.hb-dosage-body h2:first-child{margin-top:6px}
.hb-dosage-body p{margin:0 0 14px}
.hb-dosage-body ul{margin:0 0 16px;padding-left:20px}
.hb-dosage-body li{margin:0 0 7px}
.hb-dosage-body a{color:#0F6E56;text-decoration:underline;text-underline-offset:2px}
.hb-dosage-body a:hover{color:#085041}
.hb-disclaimer{margin-top:22px;font-size:13px;line-height:1.6;color:#6b6b6b}
.hubogen-products-header__title{margin-bottom:6px}
@media(max-width:767px){.hb-dosage-body{font-size:15px;line-height:1.7}.hb-dosage-body h2{font-size:18px;margin:22px 0 8px}}


/* ==== Hubogen certificate wall ==== */
.hb-cert-wall {
	align-items: flex-start;
	gap: 20px;
}
.hb-cert-wall .wp-block-column {
	flex-basis: 31%;
}
.hb-cert-wall .wp-block-image {
	margin: 0;
}
.hb-cert-wall img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: contain;
	background: #ffffff;
	border: 1px solid rgba(15, 110, 86, .16);
	border-radius: 6px;
	padding: 10px;
	box-sizing: border-box;
}
.hb-cert-wall .wp-element-caption {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
	color: #43514c;
}
@media (max-width: 781px) {
	.hb-cert-wall {
		gap: 26px;
	}
	.hb-cert-wall .wp-block-column {
		flex-basis: 100% !important;
	}
}


/* ============================================================
   2026-10-08 · V2 — catalog card repair
   ============================================================

   ROOT CAUSE (measured in Chromium at 1440px, 2026-10-08)
   -------------------------------------------------------
   `post_class()` emits `ast-article-post ast-grid-common-col ast-full-width`
   on every `.hubogen-product-card`, because the loop uses post_class().
   Astra then matches `.ast-separate-container .ast-article-post` and applies
   the *single blog post* padding:

       >=1200px : padding: 5.34em 6.67em   -> 80.10px / 100.05px   (1em = 15px)
       <=1200px : padding: 3.34em 2.4em    -> 50.10px /  36.00px
       <= 921px : padding: 1.5em  2.14em   -> 22.50px /  32.10px
       <= 544px : padding: 1.5em  1em      -> 22.50px /  15.00px

   A blog post is one column wide, so 200px of side padding is fine. A catalog
   card is 282px wide, so the same padding leaves an 80px content box — the
   thumbnail collapsed to 80x80, titles wrapped one word per line and the card
   grew to 924px tall. Mobile looked fine only because the <=544px tier drops
   to 15px. Hence "it is ugly on desktop, fine on the phone".

   `.hentry` also adds `margin: 0 0 1.5em`, which breaks the grid's even
   vertical rhythm, so it is reset too.

   The fix is scoped to `.hubogen-products-grid` so it can never affect a real
   blog post. `!important` is used because Astra re-declares the same padding
   inside four different media queries, each with equal specificity — relying
   on source order alone would be fragile.

   Deliberately NOT reset: the equivalent padding on
   `.ast-separate-container .ast-article-single` (the single PRODUCT page).
   There it yields a 1000px measure inside a 1200px container, which is a
   good line length — verified visually before leaving it in place.
   ============================================================ */

.hubogen-products-grid .hubogen-product-card {
	padding: 0 !important;
	margin: 0 !important;
	float: none !important;
	width: auto !important;
	max-width: none !important;
	min-height: 0;
	background: #ffffff;
}

/* Slightly wider tracks so the 1200px container lands on 4 tidy columns. */
.hubogen-products-grid {
	grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
	gap: 26px;
}

/* Card imagery: uniform white packshot frame, no cropping of the bottle. */
.hubogen-product-card__media {
	background: #ffffff;
	border-bottom: 1px solid #eef1ef;
	padding: 14px;
	box-sizing: border-box;
}

.hubogen-product-card__media img {
	object-fit: contain;
}

/* Two-line title / three-line excerpt keeps every card's baseline aligned. */
.hubogen-product-card__title {
	font-size: 17px;
	line-height: 1.4;
	margin: 0 0 10px;
	min-height: calc(1.4em * 2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hubogen-product-card__excerpt {
	font-size: 14px;
	line-height: 1.65;
	margin: 0 0 18px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Full-width CTA reads as a designed card action rather than a stray chip. */
.hubogen-products-grid .hubogen-product-card__cta {
	display: block;
	text-align: center;
}


/* ============================================================
   2026-10-08 · V2 — single product page
   ============================================================

   Was: media(1000x1000) -> gallery(19 images, flat 3-col) -> h1 -> content.
   The h1 sat at y=4091 on a 5108px page: the buyer scrolled four screens
   before learning the product's name, and 19 structurally different images
   were tiled into one undifferentiated grid (designed 1000x1339 panels were
   crushed to 327px, so their text was unreadable).
   ============================================================ */

/* ---- HERO: photo left, buy-box right ---- */
.hsp-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.hsp-hero__frame {
	margin: 0;
	aspect-ratio: 1 / 1;
	background: #ffffff;
	border: 1px solid #e5e9e7;
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}

.hsp-hero__frame img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Thumbnail rail — swaps the hero image, no lightbox library needed. */
.hsp-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
	gap: 10px;
	margin-top: 14px;
}

.hsp-thumb {
	padding: 0;
	margin: 0;
	cursor: pointer;
	aspect-ratio: 1 / 1;
	background: #ffffff;
	border: 1px solid #e5e9e7;
	border-radius: 9px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.hsp-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	padding: 5px;
	box-sizing: border-box;
}

.hsp-thumb:hover {
	border-color: #9dc4b8;
}

.hsp-thumb.is-active {
	border-color: #0F6E56;
	box-shadow: 0 0 0 2px rgba(15, 110, 86, .18);
}

/* ---- hero copy column ---- */
.hsp-badges {
	margin: 0 0 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hsp-badges .hubogen-product-card__form {
	margin-bottom: 0;
}
/* ============================================================
   2026-11-02 · Hero badge 三标签 + Who it's for 适应人群
   成分(主攻, 实底醒目) → 剂型(实底) → 功效(辅助, 浅色描边弱化)
   ============================================================ */

/* 成分标签：实底 teal，最醒目（买家主搜维度） */
.hsp-badges .hubogen-product-card__form--ingredient {
	background: #0F6E56;
	color: #ffffff;
}

/* 功效标签：浅色描边，弱化（辅助维度） */
.hsp-badges .hubogen-product-card__form--benefit {
	background: #ffffff;
	color: #0F6E56;
	border: 1px solid rgba(15, 110, 86, .45);
}

/* Who it's for 适应人群：轻量一行，紧跟摘要 */
.hsp-hero__who {
	margin: 0 0 24px;
	font-size: 14px;
	line-height: 1.6;
	color: #4a5a55;
}
.hsp-hero__who-label {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #0F6E56;
	margin-right: 6px;
}



.hsp-hero__title {
	font-size: clamp(28px, 3.1vw, 40px);
	line-height: 1.2;
	letter-spacing: -.01em;
	margin: 0 0 16px;
	color: #012851;
}

.hsp-hero__lead {
	font-size: 16px;
	line-height: 1.7;
	color: #4a5a55;
	margin: 0 0 24px;
}

/* Spec block — every value comes from real post meta, never invented. */
.hsp-facts {
	margin: 0 0 26px;
	padding: 18px 20px;
	background: #f7faf9;
	border: 1px solid #e8efec;
	border-radius: 10px;
}

.hsp-facts__row {
	display: grid;
	grid-template-columns: 128px minmax(0, 1fr);
	gap: 12px;
	padding: 7px 0;
}

.hsp-facts__row + .hsp-facts__row {
	border-top: 1px solid #eaf1ee;
}

.hsp-facts dt {
	margin: 0;
	font-size: 12.5px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #6b7b76;
}

.hsp-facts dd {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	font-weight: 500;
	color: #1f2d29;
}

.hsp-cta {
	display: inline-block;
	font-size: 15px;
	font-weight: 600;
	color: #ffffff;
	background: #0F6E56;
	border-radius: 8px;
	padding: 14px 26px;
	text-decoration: none;
	transition: background .2s ease, transform .2s ease;
}

.hsp-cta:hover,
.hsp-cta:focus-visible {
	background: #0B5443;
	color: #ffffff;
	transform: translateY(-1px);
}

.hsp-hero__note {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.55;
	color: #6b7b76;
}

/* ---- TRUST BADGES: certification strip (常驻, 信任背书不折叠) ----
   Sits directly under the hero buy-box. One compact row of the five
   certifications every buyer needs to see before deciding. Deliberately
   NOT folded and NOT part of the shared shortcodes — it is a landing-page
   trust signal that must be visible above the fold without any click. */
.hsp-trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin: 0 0 4px;
	padding: 14px 18px;
	background: #f7faf9;
	border: 1px solid #e8efec;
	border-radius: 10px;
}

.hsp-trust__item {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	font-size: 13px;
	line-height: 1.5;
	color: #4a5a55;
	white-space: nowrap;
}

.hsp-trust__item strong {
	font-weight: 600;
	color: #0F6E56;
	letter-spacing: .02em;
}

.hsp-trust__item + .hsp-trust__item::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #b7ccc4;
	margin-right: 9px;
}

@media (max-width: 544px) {
	.hsp-trust {
		padding: 12px 14px;
		gap: 8px 12px;
	}
	.hsp-trust__item {
		font-size: 12px;
	}
}

/* ---- DUAL CTA: WhatsApp (primary) + Email (secondary) ----
   The product page carries two enquiry channels side by side so a buyer who
   cannot or will not use WhatsApp still has a form to fall back to. The
   WhatsApp button stays the visual lead; the email button is a ghost variant
   so the two read as one deliberate pair, not two competing buttons. */
.hsp-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-bottom: 4px;
}

.hsp-cta--ghost {
	background: #ffffff;
	color: #0F6E56;
	border: 1px solid #0F6E56;
}

.hsp-cta--ghost:hover,
.hsp-cta--ghost:focus-visible {
	background: #f2f8f6;
	color: #0B5443;
	border-color: #0B5443;
}

/* In the centred footer CTA the pair is wrapped by text-align:center, so the
   flex row needs its own centring. */
.hsp-footer-cta .hsp-cta-row {
	justify-content: center;
}

/* ---- section rhythm ---- */
.hsp-section {
	margin-top: 66px;
	padding-top: 44px;
	border-top: 1px solid #e5e9e7;
}

.hsp-section--body {
	margin-top: 56px;
}

.hsp-section__title {
	font-size: 24px;
	line-height: 1.3;
	margin: 0 0 10px;
	color: #012851;
}

.hsp-section__intro {
	max-width: 760px;
	margin: 0 0 26px;
	font-size: 15px;
	line-height: 1.7;
	color: #4a5a55;
}

/* Long-form body copy keeps a comfortable measure even though the hero uses
   the full 1000px column. */
.hsp-prose {
	max-width: 820px;
}

/* ---- designed detail panels ----
   Native 1000x1339. Two-up gives each panel ~470px on a 1000px column, which
   keeps the designed headline legible; each is also clickable to full size
   for the small print. */
.hsp-gallery--panel {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.hsp-panel {
	display: block;
	background: #ffffff;
	border: 1px solid #e5e9e7;
	border-radius: 12px;
	overflow: hidden;
	transition: box-shadow .22s ease, transform .22s ease;
}

.hsp-panel:hover {
	box-shadow: 0 10px 30px rgba(1, 40, 81, .10);
	transform: translateY(-2px);
}

.hsp-panel img {
	width: 100%;
	height: auto;
	display: block;
}

/* ---- closing CTA ---- */
.hsp-footer-cta {
	margin-top: 66px;
	padding: 40px 32px;
	background: #f7faf9;
	border: 1px solid #e8efec;
	border-radius: 14px;
	text-align: center;
}

.hsp-footer-cta h2 {
	margin: 0 0 10px;
	font-size: 22px;
	line-height: 1.3;
	color: #012851;
}

.hsp-footer-cta p {
	max-width: 620px;
	margin: 0 auto 22px;
	font-size: 15px;
	line-height: 1.7;
	color: #4a5a55;
}

/* ---- responsive ---- */
@media (max-width: 921px) {
	.hsp-hero {
		gap: 32px;
	}
	.hsp-hero__title {
		font-size: clamp(26px, 4.6vw, 34px);
	}
	.hsp-gallery--panel {
		grid-template-columns: 1fr;
	}
	.hsp-section {
		margin-top: 46px;
		padding-top: 32px;
	}
	.hsp-footer-cta {
		margin-top: 46px;
	}
}

/* The hero only stacks on true phones. Deliberately NOT at 921px: a stacked
   hero at 768px measured the h1 at y=1061 — i.e. below the fold, which is the
   exact hierarchy failure this pass exists to fix. Two columns of ~318px keep
   the title in view. */
@media (max-width: 700px) {
	/* minmax(0, 1fr) is REQUIRED here, not plain 1fr. A bare `1fr` is
	   minmax(auto, 1fr), whose min is min-content — and a 12-thumb flex row
	   has a min-content width of ~856px, so the track expanded to 856px and
	   the page gained 487px of horizontal overflow (measured at 390px). */
	.hsp-hero {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}
	/* Phones get a single scrollable thumbnail row instead of three wrapped
	   rows. Measured: the wrapped strip cost ~220px of vertical space and
	   pushed the h1 to y=994 at a 700px viewport — just past the fold. One
	   scrollable row keeps the title on the first screen at every width and
	   matches how mobile commerce galleries behave. */
	.hsp-thumbs {
		display: flex;
		overflow-x: auto;
		gap: 8px;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}
	.hsp-thumb {
		flex: 0 0 64px;
		width: 64px;
		height: 64px;
	}
}

@media (max-width: 544px) {
	.hsp-facts__row {
		grid-template-columns: 100px minmax(0, 1fr);
		gap: 10px;
	}
	.hsp-footer-cta {
		padding: 30px 20px;
	}
	.hsp-hero__frame {
		padding: 12px;
	}
	.hsp-thumbs {
		grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
		gap: 8px;
	}
}
/* ==========================================================================
   2026-10-09  Why this block is flex, not grid
   --------------------------------------------------------------------------
   Below 921px the Spectra plugin re-declares this container as
     display: flex; flex-flow: row nowrap;
   and keeps only the *presence* of grid properties. Writing
     grid-template-columns: minmax(0,1fr) on a flex box does nothing for the
   axis that matters: with flex-wrap: nowrap all 73 children are laid out on a
   single horizontal line. Measured at 768px that put the twelfth child at
   x=7921 on a 768px viewport — a 7,230px horizontal overflow and a page
   height collapsing from ~11,400px to ~4,400px. Only /contact/ was affected
   because no other page in the site carries a 73-child flat grid.
   The correct override is therefore flex-flow: column, which stacks the
   children on the cross axis instead of the main axis.
   ========================================================================== */

/* ==========================================================================
   2026-10-09  /contact/ SureForms control hardening
   --------------------------------------------------------------------------
   Two complaints after a click on the contact form:

   A) Submit button ("Send Enquiry") appeared as white text on white.
      The theme ships this pair:
        .wp-block-button .wp-block-button__link:hover,
        .wp-block-button .wp-block-button__link:focus {
          color: rgb(255,255,255);
          background-color: var(--ast-global-color-5);   /* = #ffffff */
        }
      i.e. on hover/focus Astra paints white text on a white background, so
      the label disappears and only the 1px border remains. The SureForms
      submit button inherits that. We pin an explicit, legible pair for every
      interactive state so the label can never vanish.

   B) The TomSelect dropdown panel rendered as a dark slab with dark text.
      Server-rendered HTML is a plain white panel with #012851 text (verified
      headless: bg rgb(255,255,255), option color rgb(1,40,81)). A dark slab
      therefore comes from the client (forced dark mode / high-contrast
      extension / OS-level colour inversion), not from this stylesheet. We
      declare colour-scheme and hard foreground/background pairs so the panel
      stays legible even when the browser tries to invert it.
   ========================================================================== */

/* -- A. submit button: keep white-on-teal in every state ------------------ */
.srfm-form .srfm-submit-button,
.srfm-form .srfm-button.srfm-submit-button,
.wp-block-button .srfm-submit-button,
form.srfm-form button[type="submit"] {
	background-color: #0F6E56 !important;
	border-color: #0F6E56 !important;
	color: #ffffff !important;
}
.srfm-form .srfm-submit-button:hover,
.srfm-form .srfm-submit-button:focus,
.srfm-form .srfm-submit-button:focus-visible,
.srfm-form .srfm-submit-button:active,
.wp-block-button .srfm-submit-button:hover,
form.srfm-form button[type="submit"]:hover,
form.srfm-form button[type="submit"]:focus {
	background-color: #0B5443 !important;
	border-color: #0B5443 !important;
	color: #ffffff !important;
	outline: 2px solid #0F6E56;
	outline-offset: 2px;
}
.srfm-form .srfm-submit-button:disabled,
.srfm-form .srfm-submit-button[disabled] {
	background-color: #0F6E56 !important;
	color: #ffffff !important;
	opacity: 0.7;
}

/* -- B. dropdown: force a light, legible panel ---------------------------- */
.srfm-form .ts-wrapper,
.srfm-form .ts-control,
.srfm-form .ts-dropdown,
.srfm-form .ts-dropdown-content {
	color-scheme: light;
	color: #012851;
	background-color: #ffffff;
}
.srfm-form .ts-control {
	background-color: rgba(1, 40, 81, 0.02);
	border: 1px solid rgba(1, 40, 81, 0.25);
	color: #012851;
}
.srfm-form .ts-control > input,
.srfm-form .ts-control > input::placeholder {
	color: #012851;
	opacity: 1;
}
.srfm-form .ts-dropdown {
	background-color: #ffffff !important;
	border: 1px solid rgba(1, 40, 81, 0.15);
	box-shadow: 0 8px 24px rgba(1, 40, 81, 0.12);
}
.srfm-form .ts-dropdown .option,
.srfm-form .ts-dropdown-content .option {
	color: #012851 !important;
	background-color: transparent;
}
.srfm-form .ts-dropdown .option:hover,
.srfm-form .ts-dropdown .option.active,
.srfm-form .ts-dropdown-content .option.active {
	background-color: rgba(15, 110, 86, 0.10) !important;
	color: #085041 !important;
}

/* -- C. text fields: the theme sets very low-contrast input colour ------- */
.srfm-form input.srfm-input-common,
.srfm-form textarea.srfm-input-common,
.srfm-form select.srfm-dropdown-common {
	color: #012851;
	background-color: #ffffff;
}
.srfm-form input.srfm-input-common::placeholder,
.srfm-form textarea.srfm-input-common::placeholder {
	color: rgba(1, 40, 81, 0.55);
	opacity: 1;
}
.srfm-form .srfm-block-label,
.srfm-form label {
	color: #012851;
}

/* ==========================================================================
   HB-FIX-20261009c : 桌面导航下拉面板在未展开时仍然渲染 → 首屏竖向白带
   --------------------------------------------------------------------------
   【根因 · 已定位到具体一行规则】
   Astra 在 <head> 的 inline <style> 中输出（无 :hover 限定、恒生效）：

     .ast-desktop .ast-desktop-header-content
       .astra-menu-animation-fade > .menu-item > .sub-menu { opacity:1; visibility:visible }

   特异性 = (0,4,0)，且位于所有外链 CSS 之后。
   它压掉了两处本该隐藏下拉的规则：
     a) main.min.css  .main-header-menu .sub-menu{…;visibility:hidden}        → (0,2,0)
     b) menu-animation .astra-menu-animation-fade > .menu-item > .sub-menu
                       {opacity:0;visibility:hidden;transition:opacity .3s}   → (0,3,0)
   结果：.sub-menu 恒为 visibility:visible / opacity:1，仅靠 left:-999em 移到
   视口外。任何重绘/过渡/横滚中间帧都会让它以 240×636 的 #fff 面板 + z-index
   99999 落在首屏上 → 那道竖向白带（用户截图 x≈432、宽≈165 即为过渡中间帧）。

   【处置】用 (0,6,0) 特异性、且带状态限定把「未展开」态压回隐藏。
   关键：不能无条件 visibility:hidden，否则下拉将无法显示；
   因此把关闭态绑定到 :not(:hover) / :not(.ast-submenu-expanded) / :not(.focus)。
   ========================================================================== */

/* ① 未展开态：彻底不参与绘制（display:none 最稳，不依赖 transition 收敛） */
.ast-desktop .ast-desktop-header-content .main-header-menu .menu-item:not(:hover):not(.focus):not(.ast-submenu-expanded) > .sub-menu,
.ast-desktop .ast-builder-menu-1 .main-header-menu .menu-item:not(:hover):not(.focus):not(.ast-submenu-expanded) > .sub-menu,
.ast-desktop .main-header-menu .menu-item:not(:hover):not(.focus):not(.ast-submenu-expanded) > .sub-menu {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: none !important;
}

/* ② 同理：三级菜单未展开态 */
.ast-desktop .main-header-menu .sub-menu .menu-item:not(:hover):not(.focus):not(.ast-submenu-expanded) > .sub-menu {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: none !important;
}

/* ③ 展开态：显式恢复，压过 Astra 的 (0,4,0) 那行 */
.ast-desktop .ast-desktop-header-content .main-header-menu .menu-item:hover > .sub-menu,
.ast-desktop .ast-desktop-header-content .main-header-menu .menu-item.focus > .sub-menu,
.ast-desktop .ast-desktop-header-content .main-header-menu .menu-item.ast-submenu-expanded > .sub-menu,
.ast-desktop .main-header-menu .menu-item:hover > .sub-menu,
.ast-desktop .main-header-menu .menu-item.focus > .sub-menu,
.ast-desktop .main-header-menu .menu-item.ast-submenu-expanded > .sub-menu,
.ast-desktop .main-header-menu .menu-item:hover > .astra-full-megamenu-wrapper,
.ast-desktop .main-header-menu .menu-item.focus > .astra-full-megamenu-wrapper {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ④ 移动端折叠面板：保持可见，不套用 ①/② */
.ast-mobile-header-content .main-header-menu .sub-menu,
.ast-mobile-header-wrap .main-header-menu .sub-menu,
.ast-header-break-point .main-header-menu .sub-menu {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
}

/* ==========================================================================
   HB-FIX-20261009d : 下拉栏"空白" —— 白底白字
   --------------------------------------------------------------------------
   根因（Astra transparent-header 内联样式）：
     .ast-theme-transparent-header [CLASS*="ast-builder-menu-"]
       .main-header-menu .menu-item > .menu-link { color:<顶栏白> }
   该规则让顶栏文字在透明头（覆盖在 hero 上）时变白；但它同时命中了
   .sub-menu 内的 .menu-link，而 .sub-menu 自身背景是 #fff
   （Astra 基础：.main-header-menu .sub-menu{background:#fff}）。
   白字 + 白底 → 下拉项不可见，表现为"点开是空白"。
   （另：menu-link 的 background-color:transparent 也在同一 transparent 规则组里）
   处置：显式把 sub-menu 内文字恢复为品牌深色 #012851，并补齐 hover 反色。
   ========================================================================== */

/* ① 下拉项常规：深色文字 */
.ast-desktop .ast-theme-transparent-header .main-header-menu .menu-item .sub-menu .menu-link,
.ast-desktop .main-header-menu .sub-menu .menu-link,
.ast-mobile-header-content .main-header-menu .sub-menu .menu-link,
.main-header-menu .sub-menu .menu-link {
  color: #012851 !important;
}

/* ② 下拉项 hover/focus：品牌绿 + 浅底，保持可读 */
.ast-desktop .main-header-menu .sub-menu .menu-item:hover > .menu-link,
.ast-desktop .main-header-menu .sub-menu .menu-item.focus > .menu-link,
.ast-desktop .main-header-menu .sub-menu .menu-link:hover,
.ast-desktop .main-header-menu .sub-menu .menu-link:focus,
.ast-mobile-header-content .main-header-menu .sub-menu .menu-item:hover > .menu-link {
  color: #0F6E56 !important;
  background-color: #EDF5F2 !important;
}

/* ③ 当前页（current-menu-item）高亮 */
.main-header-menu .sub-menu .current-menu-item > .menu-link,
.main-header-menu .sub-menu .current_page_item > .menu-link {
  color: #0F6E56 !important;
  font-weight: 600 !important;
}

/* ④ 同步修正下拉字体栈（此前被中文字体覆盖） */
.ast-desktop .main-header-menu .sub-menu .menu-link,
.ast-mobile-header-content .main-header-menu .sub-menu .menu-link {
  font-family: 'Montserrat', 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
}

/* ==========================================================================
   HB-FIX-20261009e : 首屏信任三连 + 区块底色三阶（对标吸收 #1 / #11）
   --------------------------------------------------------------------------
   对标依据（同行对标学习报告 2026-10-09）：
     吸收 #11：Hero 下方必须立刻出现「信任三连」（认证徽章 / 媒体背书 / 价值点）。
               SMP 用 3 徽章；Sun 用 3 条 value bullets；Makers 用媒体背书带。
     吸收 #1 ：区块底色走「白 → 极浅同色系 → 更浅」三阶，而非只用一色。
   处置：① 新增 .hb-trustbar（首屏下方 3 徽章带，浅底）；② 提供三阶底色工具类。
   ========================================================================== */

/* ---------- ① 首屏信任三连（3 徽章带） ---------- */
.hb-trustbar {
  background: #F7F9F8;
  border-top: 1px solid rgba(15, 110, 86, 0.12);
  border-bottom: 1px solid rgba(15, 110, 86, 0.12);
  padding: 22px 20px;
}
.hb-trustbar__inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 14px 40px;
}
.hb-trustbar__item {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Montserrat', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 13.5px; font-weight: 600; letter-spacing: .2px;
  color: #012851; white-space: nowrap;
}
.hb-trustbar__item svg { flex: 0 0 auto; }
.hb-trustbar__item strong { color: #0F6E56; font-weight: 700; }
@media (max-width: 767px) {
  .hb-trustbar { padding: 16px 14px; }
  .hb-trustbar__inner { gap: 10px 20px; }
  .hb-trustbar__item { font-size: 12.5px; }
}

/* ---------- ② 区块底色三阶（同色系，呼应 teal 品牌色） ---------- */
.hb-band-1 { background-color: #FFFFFF; }
.hb-band-2 { background-color: #F7F9F8; }
.hb-band-3 { background-color: #EEF3F1; }

/* ==========================================================================
/* ==========================================================================
/* ==========================================================================
/* ==========================================================================
/* ==========================================================================
/* ==========================================================================
   HB-NAV-VISUAL-20261009 : 下拉面板视觉重塑（P2）
   --------------------------------------------------------------------------
   用户反馈（2026-10-09）：
     「导航下拉背景白色，破坏视觉美感」
   活站实测（computed style）：
     bg=rgb(255,255,255)、borderRadius=0px、border=""、
     boxShadow=rgba(0,0,0,.1) 0 4px 10px -2px、padding=14px 10px、minWidth=0px
   → 纯白平板、直角、无边框、无品牌色关联，与 teal 主视觉割裂。

   设计目标（沿用品牌色 #0F6E56 / #012851 / #F7F9F8）：
     1. 面板：极浅瓷面 #FFFFFF 主体 + 顶部 2px teal 指示条 + 12px 圆角 + 分层阴影
     2. 单列面板：268px（现状）、内边距 12px、项目圆角 6px
     3. 多列面板：Products 520px / Ingredients 600px，列间加细分隔线
     4. hover：teal 浅底 #EDF5F2 + teal 文字 + 左侧 2px teal 条（方向感）
     5. 移动端：面板改全宽、去圆角、保持 teal 顶条
   ========================================================================== */

/* ---------- ① 面板本体 ---------- */
.ast-desktop .main-header-menu .sub-menu {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(15, 110, 86, 0.14) !important;
  border-top: 2px solid #0F6E56 !important;
  border-radius: 0 0 12px 12px !important;
  box-shadow: 0 12px 32px -8px rgba(1, 40, 81, 0.18),
              0 2px 8px -2px rgba(1, 40, 81, 0.08) !important;
  padding: 12px 10px 14px !important;
  min-width: 232px !important;
  overflow: hidden;
}

/* ---------- ② 项目：圆角 + 左侧 teal 指示条（hover 显现） ---------- */
.ast-desktop .main-header-menu .sub-menu > li > .menu-link {
  position: relative;
  border-radius: 6px !important;
  padding: 8px 14px !important;
  transition: background-color .16s ease, color .16s ease, padding-left .16s ease;
}
.ast-desktop .main-header-menu .sub-menu > li > .menu-link::before {
  content: "";
  position: absolute; left: 5px; top: 50%; transform: translateY(-50%);
  width: 2px; height: 0; border-radius: 2px;
  background: #0F6E56;
  transition: height .16s ease;
}
.ast-desktop .main-header-menu .sub-menu > li > .menu-link:hover::before,
.ast-desktop .main-header-menu .sub-menu > li.current-menu-item > .menu-link::before,
.ast-desktop .main-header-menu .sub-menu > li.current_page_item > .menu-link::before {
  height: 16px;
}
.ast-desktop .main-header-menu .sub-menu > li > .menu-link:hover {
  background-color: #EDF5F2 !important;
  color: #0B5443 !important;
  padding-left: 18px !important;
}

/* ---------- ③ Products 多列（13 项 → 2 列网格） ---------- */
.ast-desktop .main-header-menu .menu-item-2478:hover > .sub-menu,
.ast-desktop .main-header-menu .menu-item-2478:focus > .sub-menu,
.ast-desktop .main-header-menu .menu-item-2478.ast-submenu-expanded > .sub-menu,
.ast-desktop .ast-desktop-header-content .main-header-menu .menu-item-2478:hover > .sub-menu,
.ast-desktop .ast-desktop-header-content .main-header-menu .menu-item-2478.ast-submenu-expanded > .sub-menu {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(210px, 1fr));
  width: 508px !important;
  max-width: 94vw;
  padding: 14px 12px 16px !important;
  column-gap: 8px; row-gap: 2px;
  align-items: start;
}
.ast-desktop .main-header-menu .menu-item-2478 > .sub-menu > li {
  width: 100% !important;
  align-self: start !important;
}

/* ---------- ④ Ingredients 多列（15 项：10 入口/成分族 + 5 应用） ----------
   ⚠️ 陷阱记录（HB-BUG-20261009，两次踩坑）：
     坑 1：首版用 `grid-auto-flow: column` + `grid-template-rows: repeat(10,auto)`，
           每个 <li> 作为 grid item 默认 align-self:stretch → 拉伸到 10 行高 511px → header 崩。
     坑 2：CRITICAL —— 本块曾写 `position: relative`（为给 ::after 定位），
           **把 Astra 的 `.main-header-menu .sub-menu{position:absolute}` 覆盖成 relative**，
           导致下拉面板占文档流 → li 高 434px → header 70px→504px，导航整体崩掉。
           🔴 铁律：给 .sub-menu 写任何规则时**绝不可写 position**（除非显式写 absolute）。
   处置：只用 display:grid + 尺寸 + align-self:start；position 交给 Astra。 */
.ast-desktop .main-header-menu .menu-item-2492:hover > .sub-menu,
.ast-desktop .main-header-menu .menu-item-2492:focus > .sub-menu,
.ast-desktop .main-header-menu .menu-item-2492.ast-submenu-expanded > .sub-menu,
.ast-desktop .ast-desktop-header-content .main-header-menu .menu-item-2492:hover > .sub-menu,
.ast-desktop .ast-desktop-header-content .main-header-menu .menu-item-2492.ast-submenu-expanded > .sub-menu {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(214px, 1fr));
  width: 500px !important;
  max-width: 94vw;
  padding: 14px 12px 16px !important;
  column-gap: 16px; row-gap: 1px;
  align-items: start;
}
.ast-desktop .main-header-menu .menu-item-2492 > .sub-menu > li {
  width: 100% !important;
  align-self: start !important;   /* 🔴 关键：阻止 grid item 被拉伸 */
}
/* 标签不折行：本项目最长标签 "Adaptogens & Mushrooms"（22 字符），
   2 列 @214px 内可单行容纳，避免折行破坏列节奏 */
.ast-desktop .main-header-menu .menu-item-2492 > .sub-menu > li > .menu-link {
  white-space: nowrap;
}
/* 两列之间不加竖线（row-major 流下竖线会横切语义组，反而误导） */
/* 应用项：用浅色左标记 + 稍浅字色，与成分族做视觉区分 */
.ast-desktop .main-header-menu .menu-item-2492 > .sub-menu > li.hb-menu-app > .menu-link {
  color: #0B5443 !important;
}
.ast-desktop .main-header-menu .menu-item-2492 > .sub-menu > li.hb-menu-app > .menu-link::before {
  background: #7FD9C0; height: 16px;
}
/* 应用分组表头「All Applications」：呼应 All Ingredients，加下分隔线区隔两个语义组
   （grid row-major 流下无法用竖线，故用该行上缘横线 + 加粗字重） */
.ast-desktop .main-header-menu .menu-item-2492 > .sub-menu > li.hb-menu-apphead > .menu-link {
  color: #012851 !important;
  font-weight: 600 !important;
  margin-top: 6px;
  border-top: 1px solid #E3EAE7;
  padding-top: 12px !important;
}
.ast-desktop .main-header-menu .menu-item-2492 > .sub-menu > li.hb-menu-apphead > .menu-link::before {
  background: #0F6E56; height: 16px;
}

/* ---------- ⑤ By Channel（10 项 → 2 列） ---------- */
.ast-desktop .main-header-menu .menu-item-2637 > .sub-menu {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(190px, 1fr));
  width: 448px !important;
  max-width: 94vw;
  padding: 14px 12px 16px !important;
  column-gap: 8px; row-gap: 2px;
  align-items: start;
}
.ast-desktop .main-header-menu .menu-item-2637 > .sub-menu > li {
  width: 100% !important;
  align-self: start !important;
}

/* ---------- ⑥ 单列面板宽度（Markets / Capabilities / Resources） ---------- */
.ast-desktop .main-header-menu .menu-item-2514 > .sub-menu,
.ast-desktop .main-header-menu .menu-item-2524 > .sub-menu,
.ast-desktop .main-header-menu .menu-item-2533 > .sub-menu {
  width: 272px !important;
}

/* ---------- ⑦ 顶级项当前的 teal 下划线（呼应面板顶条） ---------- */
.ast-desktop .main-header-menu > .menu-item > .menu-link { position: relative; }
.ast-desktop .main-header-menu > .menu-item > .menu-link::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px;
  height: 2px; border-radius: 2px; background: #0F6E56;
  transform: scaleX(0); transform-origin: center;
  transition: transform .18s ease;
}
.ast-desktop .main-header-menu > .menu-item:hover > .menu-link::after,
.ast-desktop .main-header-menu > .menu-item.current-menu-item > .menu-link::after {
  transform: scaleX(1);
}

/* ---------- ⑧ 移动端：面板全宽、去圆角、保留 teal 顶条 ---------- */
@media (max-width: 921px) {
  .ast-header-break-point .main-header-menu .sub-menu,
  .ast-mobile-header-content .main-header-menu .sub-menu,
  .ast-mobile-header-wrap .main-header-menu .sub-menu {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 6px 0 !important;
    border: 0 !important;
    border-top: 2px solid #0F6E56 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: #F7F9F8 !important;
  }
  .ast-header-break-point .main-header-menu .sub-menu > li > .menu-link,
  .ast-mobile-header-content .main-header-menu .sub-menu > li > .menu-link {
    white-space: normal; padding: 9px 20px !important;
  }
}

/* ==========================================================================
   HB-FOOTER-CONTRAST-20261009 : 页脚对比度修复（P2）
   --------------------------------------------------------------------------
   活站实测（computed style，底色 rgb(1,22,39) 近黑深蓝）：
     footer 根  : color = rgba(1,40,81,0.78)   ← 🔴 深蓝 78% 压深底，任何继承它的文字近乎不可见
     a          : color = rgb(15,110,86)       ← 🔴 teal 在 #011627 上对比度 ≈ 2.4:1（远低于 WCAG AA 4.5:1）
     .widget-title : #FFFFFF ✅（本来就对）
     .widget_nav_menu : 部分 rgba(255,255,255,.65) / 部分 #F9F8F8（不一致）
   处置：① 根 color 统一为浅色；② 链接改浅 teal（在深底上达标）；③ 统一导航组文字色。
   ========================================================================== */

/* ① 根：把所有未被显式覆盖的继承文字拉回浅色 */
.site-footer,
.site-footer p,
.site-footer li,
.site-footer span,
.site-footer div:not([class*="menu"]):not([class*="social"]) {
  color: #E7EFEC;
}
.site-footer .widget-title,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4 {
  color: #FFFFFF;
}

/* ② 链接：深底上改用浅 teal（对比度 ≈ 6.1:1，达 AA） */
.site-footer a,
.site-footer .widget a,
.site-footer .menu-item a {
  color: #7FD9C0 !important;
  transition: color .16s ease;
}
.site-footer a:hover,
.site-footer .widget a:hover,
.site-footer .menu-item a:hover {
  color: #FFFFFF !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ③ 导航组：把不一致的两组色统一 */
.site-footer .widget_nav_menu,
.site-footer .widget_nav_menu .menu-item,
.site-footer .widget_nav_menu li {
  color: #E7EFEC !important;
}

/* ④ 版权行 */
.site-footer .ast-footer-copyright,
.site-footer .ast-footer-copyright p,
.site-footer .ast-footer-copyright a {
  color: #C9D6D1 !important;
}
.site-footer .ast-footer-copyright a:hover { color: #FFFFFF !important; }

/* ⑤ 分隔线（若有）在深底上更克制 */
.site-footer .site-footer-primary-section {
  border-color: rgba(255, 255, 255, 0.10) !important;
}

/* ⑥ WhatsApp / tel 类强调链接保持可辨但不刺眼 */
.site-footer a[href*="wa.me"],
.site-footer a[href^="tel:"] {
  color: #7FD9C0 !important;
  font-weight: 600;
}

/* ==========================================================================
   HB-TABLE-SCROLL-20261010b : 移动端宽表横向滚动（修正版）
   --------------------------------------------------------------------------
   上一版失败复盘（重要）：
     我写了 min-width:500px + white-space:nowrap，但 overflow-x:auto 加在
     figure.wp-block-table 上 —— 实测 figure 宽 350px 却没能裁住 table，
     table 被撑到 685–960px，反而把溢出从 187px 放大到最高 590px。
   根因：容器链里有 min-width:auto（flex/grid 默认），overflow-x:auto
         未建立有效裁剪上下文。
   修正：① wrapper 明确建立滚动上下文：display:block + max-width:100%
            + overflow-x:auto + **min-width:0**（关键）
         ② min-width:0 贯穿父链
         ③ 全局兜底 html/body overflow-x:hidden
   ========================================================================== */
@media (max-width: 921px) {
  .entry-content .wp-block-table,
  .entry-content figure.wp-block-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;      /* 🔴 关键：解除 flex/grid 的 auto 最小宽 */
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  .entry-content,
  .entry-content > * {
    min-width: 0 !important;
    max-width: 100%;
  }
  .entry-content .wp-block-table > table {
    min-width: 520px;
    width: auto;
    margin-bottom: 0;
  }
  .entry-content .wp-block-table th,
  .entry-content .wp-block-table td { white-space: nowrap; }

  .entry-content .wp-block-table::-webkit-scrollbar { height: 6px; }
  .entry-content .wp-block-table::-webkit-scrollbar-thumb {
    background: rgba(1,40,81,.22); border-radius: 3px;
  }
  .entry-content .wp-block-table::-webkit-scrollbar-track { background: transparent; }
}

@media (max-width: 544px) {
  .entry-content .wp-block-table > table { min-width: 480px; }
  .entry-content .wp-block-table th,
  .entry-content .wp-block-table td { font-size: 13px; padding: 8px 10px; }
}

@media (max-width: 921px) {
  .entry-content > table {
    display: block; max-width: 100%; min-width: 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
}

/* 全局兜底：防止任何元素把 body 撑出横向滚动 */
@media (max-width: 921px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  .site, .site-content, .ast-container, .content-area, main, article { min-width: 0; max-width: 100%; }
}

/* ============================================================================
   HB-VISUAL-20261010 · 同行视觉学习改造 · 第一阶段（色彩体系 + 版式节奏）
   依据：_视觉学习与改造报告_20261010.md 第三/六章
   目标：① 压缩 navy 大面积背景 6 段 → 2 段
        ② 新增暖中性层 #FAF6EF 打破全冷调
        ③ 强调色 teal 面积从 >25% 压到 ≤10%
        ④ 建立 白 → #F4F9F7 → #FAF6EF → 深带 四层渐进
   红线：本文件【绝不写 .sub-menu 的 position】
   ============================================================================ */

/* ---------- 1. 新增暖中性底变量 ---------- */
:root{
  --hb-sand:      #FAF6EF;   /* 暖砂：新增，打破全冷调 */
  --hb-sand-2:    #F3EDE3;
  --hb-mist:      #F4F9F7;   /* 极浅 teal 灰：区块交替底 */
  --hb-mist-2:    #E8F3F0;   /* 图标 chip 底 */
  --hb-teal:      #0F6E56;
  --hb-navy:      #012851;
  --hb-ink:       #46564F;
}

/* ---------- 2. 图标 chip（同行标准：44–56px 实心图标 + 圆形浅底） ---------- */
.hb-icon-chip{
  display:inline-flex; align-items:center; justify-content:center;
  width:72px; height:72px; border-radius:50%;
  background: var(--hb-mist-2);
  margin-bottom: 18px;
}
.hb-icon-chip img,
.hb-icon-chip svg{ width:38px; height:38px; object-fit:contain; display:block; }
.hb-icon-chip.hb-icon-chip--sm{ width:56px; height:56px; margin-bottom:14px; }
.hb-icon-chip.hb-icon-chip--sm img,
.hb-icon-chip.hb-icon-chip--sm svg{ width:30px; height:30px; }

/* ---------- 3. 卡片规范（同行：圆角16 浅底 无边框 底色交替） ---------- */
.hb-card{
  background:#fff;
  border:none !important;
  border-radius:16px;
  padding:34px 30px 30px;
  height:100%;
  box-shadow: 0 1px 2px rgba(1,40,81,.04);
  transition: box-shadow .25s ease, transform .25s ease;
}
.hb-card:hover{ box-shadow:0 6px 22px rgba(1,40,81,.09); transform:translateY(-2px); }
.hb-card--mist{ background: var(--hb-mist); }
.hb-card--sand{ background: var(--hb-sand); }
.hb-card h3, .hb-card h4{
  font-size:16px !important; font-weight:700 !important;
  text-transform:uppercase; letter-spacing:.5px;
  color: var(--hb-navy) !important; margin:0 0 12px !important;
}
.hb-card p{ font-size:15px; line-height:1.65; color:var(--hb-ink); margin:0; }

/* ---------- 4. 区块留白节奏（同行：60–140px，非均匀） ---------- */
.hb-sec-tight  > .wp-block-group__inner-container,
.hb-sec-tight  { padding-top:60px !important;  padding-bottom:60px !important; }
.hb-sec-loose  > .wp-block-group__inner-container,
.hb-sec-loose  { padding-top:120px !important; padding-bottom:120px !important; }

/* ---------- 5. 暖色区块（新增层，替代原来被刷成 navy 的段） ---------- */
.hb-sec-sand{
  background: var(--hb-sand) !important;
}
.hb-sec-mist{
  background: var(--hb-mist) !important;
}

/* ---------- 6. CTA 色带（同行：深色渐变 + 白字 + 大按钮，每 3–4 区块 1 条） ---------- */
.hb-cta-band{
  background: linear-gradient(135deg, #0B3A56 0%, #012851 100%) !important;
  border-radius:0 !important;
}

/* ---------- 7. 统计数字块（同行：hero 上浮 proof panel） ---------- */
.hb-statgrid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:18px;
}
.hb-stat{
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px; padding:20px 18px; text-align:center;
  backdrop-filter: blur(6px);
}
.hb-stat b{
  display:block; font-size:30px; font-weight:700; line-height:1.1;
  color:#fff; letter-spacing:-.5px;
}
.hb-stat span{
  display:block; margin-top:6px; font-size:12px; font-weight:600;
  letter-spacing:1px; text-transform:uppercase; color:#7FD9C0;
}

/* ---------- 8. 减弱过度使用的主色（把多余的 teal 底改回浅底） ---------- */
/* Astra 全局色 7 = navy，被当作大背景刷；此处只保留 hero 遮罩与底部 CTA */
.hb-demote-navy{ background: var(--hb-mist) !important; }

/* ---------- 9. 图片规范（同行：区块图不加圆角由容器裁；卡片图 1:1） ---------- */
.hb-img-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.hb-img-square img{ aspect-ratio:1/1; object-fit:contain; display:block; width:100%; }

/* ---------- 10. 移动端兜底 ---------- */
@media (max-width:921px){
  .hb-icon-chip{ width:60px; height:60px; margin-bottom:14px; }
  .hb-icon-chip img, .hb-icon-chip svg{ width:32px; height:32px; }
  .hb-card{ padding:26px 22px 22px; }
  .hb-stat b{ font-size:24px; }
  .hb-sec-loose{ padding-top:75px !important; padding-bottom:75px !important; }
}

/* ===== HB-VISUAL-20261010-END ===== */

/* ============================================================================

/* ============================================================================

/* ============================================================================
   HB-VISUAL-20261010-LAYOUT · 第二阶段（图文交错 / 统计块 / CTA 带）
   配合 _home_visual2.php 注入的 hb-duo / hb-stat-band-wrap / hb-cta-band 结构
   红线：本文件【绝不写 .sub-menu 的 position】
   ============================================================================ */

/* ---------- 0. 本阶段新增的暖/浅底工具类 ---------- */
.hb-sec-mist { background: var(--hb-mist) !important; }
.hb-sec-sand { background: var(--hb-sand) !important; }

/* ---------- 1. 50/50 图文左右交错 ---------- */
.hb-duo { background:#fff; }
.hb-duo.hb-sec-mist { background: var(--hb-mist) !important; }
.hb-duo.hb-sec-sand { background: var(--hb-sand) !important; }
.hb-duo .hb-duo-cols { gap: 60px; margin: 0 !important; }
.hb-duo .hb-duo-cols > .wp-block-column { margin: 0 !important; }
.hb-duo .hb-duo-img { margin: 0 !important; }
.hb-duo .hb-duo-img img {
  width: 100%; height: auto; aspect-ratio: 3 / 2;
  object-fit: cover; display: block; border-radius: 14px;
}
.hb-duo .hb-duo-text { padding: 0 !important; }
.hb-duo .hb-eyebrow {
  font-size: 13px !important; font-weight: 700 !important;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--hb-teal) !important; margin: 0 0 12px !important;
}
.hb-duo .hb-duo-h2, .hb-duo .hb-duo-text h2 {
  font-size: 31px !important; line-height: 1.24 !important;
  font-weight: 700 !important; color: var(--hb-navy) !important;
  margin: 0 0 18px !important;
}
.hb-duo .hb-duo-text p {
  font-size: 16px !important; line-height: 1.72 !important;
  color: var(--hb-ink) !important; margin: 0 0 16px !important;
}
.hb-duo .hb-duo-text ul { margin: 8px 0 0 !important; padding-left: 0 !important; list-style: none !important; }
.hb-duo .hb-duo-text ul li {
  position: relative; padding-left: 28px; margin-bottom: 11px;
  font-size: 15px !important; line-height: 1.6 !important; color: var(--hb-ink) !important;
}
.hb-duo .hb-duo-text ul li::before {
  content: ""; position: absolute; left: 2px; top: 6px;
  width: 13px; height: 7px;
  border-left: 2.5px solid var(--hb-teal); border-bottom: 2.5px solid var(--hb-teal);
  transform: rotate(-45deg);
}
/* 交错：--flip 时图片靠右（DOM 里文字在前） */
@media (min-width: 922px) {
  .hb-duo--flip .hb-duo-cols { flex-direction: row-reverse; }
}
@media (max-width: 921px) {
  .hb-duo .hb-duo-cols { gap: 30px; }
  .hb-duo .hb-duo-h2, .hb-duo .hb-duo-text h2 { font-size: 25px !important; }
}

/* ---------- 2. 统计块带 ---------- */
.hb-stat-band-wrap {
  max-width: 1140px; margin: 40px auto 0; padding: 0 24px;
  position: relative; z-index: 4;
}
.hb-statgrid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
}
.hb-stat {
  background: #fff; border: 1px solid var(--hb-mist-2);
  border-radius: 14px; padding: 22px 14px; text-align: center;
  box-shadow: 0 10px 30px rgba(1,40,81,.08);
}
.hb-stat b {
  display: block; font-size: 32px; font-weight: 700; line-height: 1.05;
  color: var(--hb-teal); letter-spacing: -.5px;
}
.hb-stat span {
  display: block; margin-top: 7px; font-size: 11px; font-weight: 700;
  letter-spacing: 1.3px; text-transform: uppercase; color: #7A8B85;
}
@media (max-width: 921px) {
  .hb-stat-band-wrap { margin-top: 0; }
  .hb-statgrid { grid-template-columns: repeat(2, 1fr); }
  .hb-stat b { font-size: 25px; }
}
@media (max-width: 560px) {
  .hb-statgrid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hb-stat { padding: 16px 10px; }
}

/* ---------- 3. CTA 深色带 ---------- */
.hb-cta-band { background: linear-gradient(135deg,#0B3A56 0%,#012851 100%) !important; }
.hb-cta-band .hb-cta-h3, .hb-cta-band h3 {
  font-size: 28px !important; font-weight: 700 !important;
  color: #fff !important; margin: 0 0 10px !important; line-height: 1.3 !important;
}
.hb-cta-band .hb-cta-p, .hb-cta-band p {
  font-size: 16px !important; line-height: 1.65 !important;
  color: #E7EFEC !important; margin: 0 !important;
}
.hb-cta-band .wp-block-button__link {
  background: #fff !important; color: var(--hb-navy) !important;
  border-radius: 999px !important; padding: 16px 34px !important;
  font-size: 15px !important; font-weight: 700 !important;
  border: 2px solid #fff !important; text-decoration: none !important;
  transition: background .22s ease, color .22s ease;
}
.hb-cta-band .wp-block-button__link:hover {
  background: transparent !important; color: #fff !important;
}
@media (max-width: 921px) {
  .hb-cta-band .hb-cta-h3, .hb-cta-band h3 { font-size: 22px !important; }
  .hb-cta-band .wp-block-button { margin-top: 18px; }
}


/* ---------- 4. 覆盖 Astra 在 columns 内强制的 1:1 图比（提高特异性） ---------- */
.entry-content .hb-duo .hb-duo-cols .hb-duo-img img,
.entry-content .wp-block-columns .hb-duo-img img,
.hb-duo .hb-duo-cols .hb-duo-img img {
  aspect-ratio: 3 / 2 !important;
  height: auto !important;
  object-fit: cover !important;
}
.entry-content .hb-duo .hb-duo-cols .hb-duo-img,
.entry-content .wp-block-columns .hb-duo-img { margin: 0 !important; }

/* ===== HB-VISUAL-20261010-LAYOUT-END ===== */


/* ===== HB-VISUAL-20261010-FEAT START =====
   icon-chip 特性带 + ingredients 组图样式
   🔴 红线：本块【绝不写 .sub-menu 的 position】
   ========================================== */
.hb-featgrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
  max-width:1140px;
  margin:36px auto 0;
}
.hb-feat{
  background:#fff;
  border:1px solid #E4EDE9;
  border-radius:16px;
  padding:28px 24px 26px;
  box-shadow:0 1px 2px rgba(1,40,81,.04);
  transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.hb-feat:hover{
  box-shadow:0 14px 34px rgba(1,40,81,.10);
  transform:translateY(-3px);
  border-color:#CFE2DB;
}
.hb-feat .hb-icon-chip,
.hb-feat > .hb-icon-chip{
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px; height:52px;
  border-radius:14px;
  background:var(--hb-mist,#F4F9F7);
  border:1px solid #DCEAE4;
  margin:0 0 18px;
}
.hb-feat .hb-icon-chip img,
.hb-feat > .hb-icon-chip img{
  width:28px; height:28px;
  object-fit:contain;
  aspect-ratio:1 / 1 !important;
  display:block;
}
.hb-feat h3{
  font-size:17px;
  line-height:1.32;
  font-weight:700;
  color:#0B3A2E;
  margin:0 0 10px;
  letter-spacing:-.01em;
}
.hb-feat p{
  font-size:14.5px;
  line-height:1.62;
  color:#46564F;
  margin:0;
}
.hb-faq-list{
  max-width:1140px;
  margin:24px auto 0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.hb-faq{
  background:#fff;
  border:1px solid #E4EDE9;
  border-radius:14px;
  box-shadow:0 1px 2px rgba(1,40,81,.04);
  overflow:hidden;
}
.hb-faq summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 22px;
  cursor:pointer;
  font-size:16px;
  font-weight:700;
  color:#0B3A2E;
  line-height:1.4;
  list-style:none;
  transition:background .2s ease;
}
.hb-faq summary::-webkit-details-marker{display:none;}
.hb-faq summary::after{
  content:"+";
  font-size:22px;
  font-weight:400;
  color:#0F6E56;
  line-height:1;
  transition:transform .22s ease;
  flex-shrink:0;
}
.hb-faq[open] summary::after{
  content:"\2212";
  transform:rotate(180deg);
}
.hb-faq summary:hover{
  background:#F4F9F7;
}
.hb-faq-body{
  padding:0 22px 20px;
}
.hb-faq-body p{
  font-size:15px;
  line-height:1.7;
  color:#46564F;
  margin:0;
}

.hb-next-1{
  grid-template-columns:1fr;
  max-width:380px;
  margin-left:auto;
  margin-right:auto;
}

.hb-next-2{
  grid-template-columns:repeat(2,1fr);
  max-width:760px;
}
@media (max-width:640px){
  .hb-next-2{grid-template-columns:1fr;}
}

.page-id-2550 .entry-content h2.wp-block-heading:not(.hb-duo-h2){text-align:center !important;margin-top:56px !important;margin-bottom:24px !important;}
.hb-benefitgrid{
  display:grid;
  gap:24px;
  margin:28px auto 0;
}
.hb-benefitgrid.hb-benefit-1{grid-template-columns:1fr;max-width:380px;}
.hb-benefitgrid.hb-benefit-2{grid-template-columns:repeat(2,1fr);max-width:760px;}
.hb-benefitgrid.hb-benefit-3{grid-template-columns:repeat(3,1fr);max-width:960px;}
.hb-benefitgrid.hb-benefit-4{grid-template-columns:repeat(4,1fr);max-width:1140px;}
.hb-benefitcard{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #E4EDE9;
  border-radius:16px;
  overflow:hidden;
  text-decoration:none;
  box-shadow:0 1px 2px rgba(1,40,81,.04);
  transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.hb-benefitcard:hover{
  box-shadow:0 14px 34px rgba(1,40,81,.10);
  transform:translateY(-3px);
  border-color:#CFE2DB;
  text-decoration:none;
}
.hb-benefitcard .hb-benefit-img{
  width:100%;
  aspect-ratio:16 / 10;
  overflow:hidden;
  background:var(--hb-mist,#F4F9F7);
}
.hb-benefitcard .hb-benefit-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 45%;
  display:block;
}
.hb-benefitcard .hb-benefit-body{
  padding:18px 20px 20px;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.hb-benefitcard .hb-benefit-t{
  font-size:16px;
  font-weight:700;
  color:#0B3A2E;
  letter-spacing:-.01em;
}
.hb-benefitcard .hb-benefit-s{
  font-size:13.5px;
  color:#0F6E56;
  font-weight:500;
}
@media (max-width:640px){
  .hb-benefitgrid{grid-template-columns:1fr !important;max-width:100% !important;}
}

.hb-nextgrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  max-width:1140px;
  margin:28px auto 0;
}
.hb-next{
  display:flex;
  flex-direction:column;
  gap:6px;
  background:#fff;
  border:1px solid #E4EDE9;
  border-radius:14px;
  padding:20px 22px;
  text-decoration:none;
  box-shadow:0 1px 2px rgba(1,40,81,.04);
  transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.hb-next:hover{
  box-shadow:0 12px 30px rgba(1,40,81,.10);
  transform:translateY(-3px);
  border-color:#CFE2DB;
  text-decoration:none;
}
.hb-next-t{
  font-size:16px;
  font-weight:700;
  color:#0B3A2E;
  letter-spacing:-.01em;
}
.hb-next-s{
  font-size:13.5px;
  color:#0F6E56;
  font-weight:500;
}
@media (max-width:1024px){
  .hb-nextgrid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .hb-nextgrid{grid-template-columns:1fr;}
}

.hb-mistake{
  background:#F4F9F7;
  border-left:4px solid #0F6E56;
  border-radius:0 14px 14px 0;
  padding:22px 26px;
  margin:0 0 8px;
  max-width:1140px;
  margin-left:auto;
  margin-right:auto;
}
.hb-mistake p{
  font-size:16px;
  line-height:1.7;
  color:#1E3A2F;
  margin:0;
}

.hb-feat-3{
  grid-template-columns:repeat(3,1fr);
}
@media (max-width:1024px){
  .hb-feat-3{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .hb-feat-3{grid-template-columns:1fr;}
}

.hb-feat-6{
  grid-template-columns:repeat(3,1fr);
}
@media (max-width:1024px){
  .hb-feat-6{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .hb-feat-6{grid-template-columns:1fr;}
}


/* ---- ingredients 每组的主题图（16:10 稳定比例，避免裁掉主体） ---- */
.hb-ing-photo{
  margin:0 0 18px !important;
  border-radius:14px;
  overflow:hidden;
  background:var(--hb-mist,#F4F9F7);
}
.entry-content .hb-ing-photo img,
.hb-ing-photo img{
  width:100% !important;
  height:auto !important;
  aspect-ratio:16 / 10 !important;
  object-fit:cover !important;
  object-position:center 45% !important;
  border-radius:14px;
  display:block;
  margin:0 !important;
}
/* 名称与说明之间补一个间隔，避免 "AshwagandhaKSM-66®" 连在一起 */
.hb-ing-list li strong,
.hb-ing-list li a{
  margin-right:.42em;
}
.hb-ing-list li span{
  display:block;
  margin-top:3px;
}
/* 组卡片本身更稳重一些 */
.hb-ing-group{
  background:#fff;
  border:1px solid #E4EDE9;
  border-radius:16px;
  padding:22px 22px 20px;
  box-shadow:0 1px 2px rgba(1,40,81,.04);
}

@media (max-width:1024px){
  .hb-featgrid{grid-template-columns:repeat(2,1fr);gap:20px;}
}
@media (max-width:640px){
  .hb-featgrid{grid-template-columns:1fr;gap:16px;}
  .hb-feat{padding:22px 20px;}
  .entry-content .hb-ing-photo img,
  .hb-ing-photo img{aspect-ratio:16 / 9 !important;}
}
/* ===== HB-VISUAL-20261010-FEAT-END ===== */


/* ===== HB-VISUAL-20261010-FIX START =====
   hero 高度收紧 + 首屏信息密度
   · 首页 hero 是 spectra-is-root-container.has-image-background，实测 1128px / vh900 = 1.253
   · 目标 ~0.86（保留冲击力，同时把统计条拉进或贴近首屏）
   · 只作用于【首页】(.home)，不影响内页
   🔴 红线：本块【绝不写 .sub-menu 的 position】
   ========================================== */
.home .spectra-is-root-container.has-image-background:first-of-type{
  min-height:0 !important;
  height:auto !important;
  padding-top:118px !important;
  padding-bottom:84px !important;
  box-sizing:border-box;
}
.home .spectra-is-root-container.has-image-background:first-of-type h1{
  margin-top:0;
  font-size:52px !important;
  line-height:1.08 !important;
}
.home .spectra-is-root-container.has-image-background:first-of-type p{
  font-size:17.5px !important;
  line-height:1.58 !important;
  max-width:620px;
}
/* 首屏 CTA 按钮与副文案之间收紧 */
.home .spectra-is-root-container.has-image-background:first-of-type .wp-block-buttons{
  margin-top:26px !important;
}
@media (max-width:921px){
  .home .spectra-is-root-container.has-image-background:first-of-type{
    padding-top:92px !important;
    padding-bottom:64px !important;
  }
  .home .spectra-is-root-container.has-image-background:first-of-type h1{
    font-size:38px !important;
  }
}
/* 统计条在 hero 之后更贴近，形成「首屏钩子 → 数据背书」的连续读感 */
.home .hb-stat-band-wrap{
  margin-top:34px !important;
}
/* ---- 页脚上方最后的 CTA 若与页脚同色，给一点分离 ---- */
.hb-cta-band + .site-footer,
.hb-cta-band + footer{
  margin-top:0;
}
/* ===== HB-VISUAL-20261010-FIX-END ===== */

/* ===== HB-VISUAL-20261010-ING START =====
   ingredients 页：组卡改为 2 栏目录式 + 图片按源比例 3:2 显示（零裁切）
   · 源图 g7_ingredient = 1200x800 (3:2)，容器也用 3:2 → cover 裁切 = 0
   · 2 栏网格让单卡宽 ~460px，图 460x307，完整可见且页面紧凑
   🔴 红线：本块【绝不写 .sub-menu 的 position】
   ========================================== */
.hb-ing-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:30px;
  align-items:stretch;
  margin:0;
}
.hb-ing-group{
  background:#fff;
  border:1px solid #E4EDE9;
  border-radius:16px;
  padding:20px 20px 18px;
  box-shadow:0 1px 2px rgba(1,40,81,.04);
  transition:box-shadow .22s ease, transform .22s ease;
}
.hb-ing-group:hover{
  box-shadow:0 12px 30px rgba(1,40,81,.09);
  transform:translateY(-2px);
}
/* 图片：严格 3:2，与源图一致 → 不裁切 */
.entry-content .hb-ing-photo img,
.hb-ing-photo img{
  width:100% !important;
  height:auto !important;
  aspect-ratio:3 / 2 !important;
  object-fit:cover !important;
  object-position:center !important;
  border-radius:12px;
  display:block;
  margin:0 !important;
}
.hb-ing-photo{
  margin:0 0 16px !important;
  border-radius:12px;
  overflow:hidden;
  background:var(--hb-mist,#F4F9F7);
  line-height:0;
}
/* 组标题收紧一点，2 栏下更紧凑 */
.hb-ing-group__title{
  font-size:20px !important;
  line-height:1.25 !important;
  margin:0 0 10px !important;
  color:#012851;
  letter-spacing:-.01em;
}
.hb-ing-list{
  margin:0 !important;
  padding-left:18px !important;
}
.hb-ing-list li{
  margin:0 0 9px !important;
  line-height:1.5 !important;
  font-size:14px;
  color:#46564F;
}
.hb-ing-list li:last-child{ margin-bottom:0 !important; }

@media (max-width:921px){
  .hb-ing-grid{ grid-template-columns:1fr; gap:20px; }
}
@media (max-width:640px){
  .hb-ing-group{ padding:16px; }
  .hb-ing-group__title{ font-size:18px !important; }
}
/* ===== HB-VISUAL-20261010-ING-END ===== */

/* ===== HB-VISUAL-20261010-HDR START =====
   移动端 + 桌面端 头部可读性修复 —— 全站 70 页实测后落地
   （本块为幂等块，重复执行前会先剥离旧块）

   ①【logo 隐形】桌面端 + 移动端 : 68/70 页品牌标识完全不可见
      Astra 透明头部通过内联 SVG 滤镜 #ast-img-color-filter-2
      (feColorMatrix 灰度化 + feFuncR/G/B/A tableValues="1 1")
      把 header logo 强制刷成【纯白】；而本站除 5 页外，头部实际叠在白底内容上，
      白 logo × 白背景 对比度 = 1.06:1 → logo 完全消失。
      实测「logo 正后方」亮度 bgL 与两种 logo 的对比度（移动/桌面取更差一侧）：
        certifications/zinc/...   bgL=0.943   白=1.06 ✗   原色=13.57 ✓
        home                      bgL=.44/.22 白=2.14 ✗   原色= 3.73 ✓
        about                     bgL=.47/.49 白=1.96 ✗   原色= 7.06 ✓
        products                  bgL=.22/.24 白=3.58 ~   原色= 3.62 ✓
        capabilities(1259)        bgL=.15/.23 白=3.78 ✓   原色= 2.79 ✗
        contact(12)               bgL=.09/.08 白=7.66 ✓   原色= 1.79 ✗
      → 仅 /capabilities/ 与 /contact/ 保留白 logo，其余 68 页还原原色（深蓝+青）。
      修复后实测：移动 min=3.59 / 桌面 min=3.73，0 页低于 3:1
      （对齐 WCAG 1.4.11 非文本对比度 3:1）。

   ②【标题被压字】移动端 : 52 页标题首行落在 70px 透明头部带之内
      Astra 桌面端靠 #primary{margin:4em 0}=60px 撑开头部留白；移动端被
        .ast-separate-container #primary{margin:0}
        .ast-theme-transparent-header #primary{padding:0}
      两处覆盖 → 留白归零；而 .site-header 是 position:absolute 的 70px 透明条
      → 52 页 .entry-content 首个元素就是 h1，文字顶端 y=23.5，
        比头部下沿(70)还高 46.5px，被 logo 与汉堡按钮直接压字；
        /ingredients/ 的 .hb-page-hero 眉标同样只差 0.7px。
      → 移动端为这两类首块让出 84px / 74px，文字顶端落到 y=107.5（余量 37.5px）。
      选择器只命中「首块就是标题」的页面：hero 页(首块自带 92–118px padding)
      与自带 Astra 标题栏的 13 页不受影响。

   🔴 红线：本块【绝不写 .sub-menu 的 position】
   ========================================== */
body:not(.page-id-1259):not(.page-id-12) .site-branding .custom-logo {
  filter: none !important;
}

@media (max-width: 921px) {
  .entry-content > h1:first-child {
    padding-top: 84px;
  }
  .entry-content > section.hb-page-hero:first-child {
    padding-top: 74px;
  }
}
/* ===== HB-VISUAL-20261010-HDR-END ===== */

/* ===== HB-VISUAL-20261010-MOB START =====
   移动端可读性 & 可点性修复 —— 全站 70 页实测后落地
   （幂等块，重复执行前会先剥离旧块）

   ①【正文偏小】移动端 375px 下，1235 个正文文本块的字号分布：
        13.0px 24.6% | 13.7px 43.2% | 14.0px 6.2% | 15.0px 4.9% | 16.0px 2.2%
      → 约 79% 的正文落在 13.0–14.0px，低于移动端 16px 可读基准。
      → 移动端把 .entry-content p 抬到 16px / 行高 1.75。
        本规则【不加 !important】且置于文件末尾，因此只作用于「未显式指定字号」
        的那部分段落；已显式设定 13.5/14/14.5px 的图注、元信息段落不受影响
        （certifications 页 27 段中 12 段变化、其余 15 段保持原样）。
        实测三种字号下页面横向溢出均为 0，换行位置一致，无版式回归。
      · 补充：表单控件本来就是 16px（.srfm-input-* / .ts-control 实测 16px），
        所以 16px 之后全站移动端正文与表单口径统一。
      · 勘误：早前把 SureForms 的 18 个【隐藏原生 select】（实测 1×15px、fs=9.576px）
        误判为「iOS 聚焦自动放大风险」；本次复核可见控件全部为 16px，
        **iOS 自动放大并不会发生**，故本条不作处理。

   ②【触摸目标过小】头部 logo 链接实测仅 80×20px（oem 页 74×18px），
      低于 44×44px 建议值 → 加内边距抬到 44px 高，再用等量负外边距抵消，
      版面不发生任何位移（实测 20px → 44px，落位不变）。

   ③【/ingredients/ 的 CTA 没样式】该页 CTA 写作 <a class="hb-btn">，
      而 .hb-btn 在 CSS 中【零定义】（grep 计数 = 0）→ 渲染成 18px 高的
      裸文字链接（背景透明、青色文字）；另外 8 个同样使用 .hb-cta-band 的页面
      （home/about/products/capabilities/oem/odm/private-label/quality-control）
      用的是白色胶囊按钮 .wp-block-button__link → 视觉不一致且点击目标过小。
      → 把 .hb-btn 对齐 .wp-block-button__link 的规格（白底/深蓝字/999px 圆角/48px 高）。
        实测 hb-btn 全站只出现在 /ingredients/ 一页，且必在 .hb-cta-band 内
        → 零外溢风险（脚本已核对：hb-btn 不在 cta-band 内的页面数 = 0）。
        修复后实测 109.3×18px（透明底）→ 197.2×59.8px（白底 + 深蓝字）。

   🔴 红线：本块【绝不写 .sub-menu 的 position】
   ========================================== */

@media (max-width: 921px) {
  /* ① 移动端正文 16px */
  .entry-content p {
    font-size: 16px;
    line-height: 1.75;
  }
  /* ② 头部 logo 可点区域抬到 44px（负外边距抵消，视觉零位移） */
  .site-branding .custom-logo-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 12px 0;
    margin: -12px 0;
  }
}

/* ③ CTA 按钮规格对齐（桌面/移动通用） */
.hb-cta-band .hb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 34px;
  margin-top: 18px;
  background: #ffffff !important;
  color: #012851 !important;
  border: 2px solid #ffffff !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  transition: background .22s ease, color .22s ease;
}
.hb-cta-band .hb-btn:hover {
  background: transparent !important;
  color: #ffffff !important;
}
/* ===== HB-VISUAL-20261010-MOB-END ===== */

/* ===== HB-VISUAL-20261010-FDA START =====
   全站页脚 FDA + B2B 免责声明（样式块）

   背景：改造前，免责声明只写在 /（首页）与 /faq/ 的【正文】里各 1 次；
         其余 68 个已发布页面 0 次（实测 grep "Food and Drug Administration"）。
         逐页维护既易漏，也会随编辑被删。
   做法：正文不动，改由子主题在 Astra 的 astra_footer_content_bottom 钩子上
         输出一次 —— 该钩子位于 <footer id="colophon" class="site-footer"> 内部、
         在 builder 各行之后（见 astra/inc/markup-extras.php::astra_footer_markup），
         因此每页恰好渲染 1 条，且无需逐页维护。
   配色：strips 落在 .site-footer 的 #011627 底上。
         rgba(255,255,255,.68) × #011627 ≈ 7.0:1，rgba(255,255,255,.86) ≈ 9.4:1，
         均高于 WCAG AA 正文 4.5:1。
   🔴 注意：本块不碰 .sub-menu，不碰 .entry-content（移动端 16px 正文字号不受影响）。
   ========================================== */
.hb-fda {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.hb-fda p {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.68) !important;
}
.hb-fda p:last-child {
  margin-bottom: 0;
}
.hb-fda strong {
  color: rgba(255, 255, 255, 0.86);
  font-weight: 600;
}
@media (max-width: 921px) {
  .hb-fda {
    padding: 18px 0 22px;
  }
  .hb-fda p {
    font-size: 12px;
    line-height: 1.7;
  }
}
/* ===== HB-VISUAL-20261010-FDA-END ===== */

/* ===== HB-VISUAL-20261010-STICKY START =====
   导航栏 sticky 固定 —— 用户反馈「顶端导航随下拉隐藏，客户要滑很久」
   根因：Astra 免费版无 sticky header 功能（需 Pro 插件），且全站启用透明 header
   （.ast-theme-transparent-header）时 .site-header 为 position:absolute，随页滚走。
   修复：给 .site-header（body 直接子元素）加 position:sticky 固定顶部，
   滚动后给白色背景（覆盖透明 header 的透底问题）。
   桌面/移动统一作用于 .site-header，避免子元素 sticky 因父容器高度失效。
   ========================================== */

/* 桌面 + 移动统一：站点 header 固定顶部 */
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}

/* 主 header 条（桌面）给白底，避免透明 header 滚动透字 */
.ast-main-header-wrap {
  background: #ffffff !important;
  box-shadow: 0 1px 0 rgba(15, 110, 86, 0.10);
}

/* 移动 header 条给白底 */
.ast-mobile-header-wrap {
  background: #ffffff !important;
  box-shadow: 0 1px 0 rgba(15, 110, 86, 0.10);
}

/* 透明 header 的 logo 滚动后还原原色（深蓝+青），避免白底上白 logo 消失 */
.ast-theme-transparent-header .site-header .custom-logo,
.ast-theme-transparent-header .site-header .site-title a {
  filter: none !important;
}
/* ===== HB-VISUAL-20261010-STICKY END ===== */
/* ===== HB-VISUAL-20261010-STICKY START =====
   导航栏固定顶部 —— 用户反馈「顶端导航随下拉隐藏，客户要滑很久」
   根因：Astra 免费版无 sticky header 功能（需 Pro 插件），且全站启用透明 header
   （.ast-theme-transparent-header）时 .site-header 为 position:absolute，随页滚走。
   修复：桌面端 .site-header 用 position:sticky（桌面 overflow 正常，sticky 有效）；
   移动端 body 有 overflow-x:hidden 导致 sticky 失效，改用 position:fixed + 补偿 padding。
   ========================================== */

/* 桌面端：sticky 固定 */
@media (min-width: 922px) {
  .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
  }
}

/* 移动端：fixed 固定（overflow-x:hidden 使 sticky 失效，fixed 不受影响） */
@media (max-width: 921px) {
  .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
  }
  /* 补偿 header 占位（fixed 脱离文档流） */
  #content {
    padding-top: 70px !important;
  }
}

/* 主 header 条（桌面）给白底，避免透明 header 滚动透字 */
.ast-main-header-wrap {
  background: #ffffff !important;
  box-shadow: 0 1px 0 rgba(15, 110, 86, 0.10);
}

/* 移动 header 条给白底 */
.ast-mobile-header-wrap {
  background: #ffffff !important;
  box-shadow: 0 1px 0 rgba(15, 110, 86, 0.10);
}

/* 透明 header 的 logo 滚动后还原原色（深蓝+青），避免白底上白 logo 消失 */
.ast-theme-transparent-header .site-header .custom-logo,
.ast-theme-transparent-header .site-header .site-title a {
  filter: none !important;
}
/* ===== HB-VISUAL-20261010-STICKY END ===== */

/* ==========================================================================
   HB-FIX-20261012 : 全站视觉问题统一修复（用户逐张截图登记 40 项）
   1) 导航白底白字（STICKY 把 header 设白底，但透明 header 文字仍是白色）
   2) 表单输入框无边框+透明背景 → 隐形输入框
   3) 按钮 hover 白底白字
   4) H1 巨字（产品页/成分页/能力页）
   5) 下拉菜单卡片化（圆角+阴影）
   ========================================================================== */

/* ① 导航栏：白底配深色文字（覆盖透明 header 的白色文字） */
.ast-theme-transparent-header .main-header-menu .menu-item > .menu-link,
.ast-theme-transparent-header [CLASS*="ast-builder-menu-"] .main-header-menu .menu-item > .menu-link,
.ast-main-header-wrap .main-header-menu .menu-item > .menu-link,
.ast-mobile-header-wrap .main-header-menu .menu-item > .menu-link {
  color: #012851 !important;
}
.ast-theme-transparent-header .main-header-menu .menu-item:hover > .menu-link,
.ast-main-header-wrap .main-header-menu .menu-item:hover > .menu-link {
  color: #0F6E56 !important;
}
/* 当前项高亮 */
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current_page_item > .menu-link {
  color: #0F6E56 !important;
}

/* ② 表单输入框：可见边框 + 白底 + 聚焦 teal 描边 */
.srfm-form input.srfm-input-common,
.srfm-form textarea.srfm-input-common,
.srfm-form select.srfm-dropdown-common,
.srfm-form .srfm-input-common {
  border: 1px solid #c9d4d0 !important;
  background-color: #ffffff !important;
  border-radius: 6px !important;
  color: #012851 !important;
  box-shadow: none !important;
}
.srfm-form input.srfm-input-common:focus,
.srfm-form textarea.srfm-input-common:focus,
.srfm-form select.srfm-dropdown-common:focus,
.srfm-form .srfm-input-common:focus {
  border-color: #0F6E56 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.12) !important;
}
/* placeholder 深灰，醒目 */
.srfm-form input::placeholder,
.srfm-form textarea::placeholder {
  color: #6b7a8a !important;
  opacity: 1 !important;
}
/* 标签深色加粗 */
.srfm-form .srfm-block-label,
.srfm-form label {
  color: #1a2b3c !important;
  font-weight: 600 !important;
}
/* 说明文字（副标题/提示）改深灰，消除白字 */
.srfm-form .srfm-description,
.srfm-form .srfm-form-description,
.srfm-form .srfm-block-description {
  color: #3a4a5a !important;
}

/* ③ 通用按钮 hover：深色底白字（覆盖 Astra 的白底白字） */
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus {
  background-color: #0B5443 !important;
  color: #ffffff !important;
}
.wp-block-button .wp-block-button__link.has-teal-background-color:hover {
  background-color: #0B5443 !important;
  color: #ffffff !important;
}

/* ④ H1 巨字：产品页/成分页/能力页 H1 限制字号 */
.single-hubogen_product h1.entry-title,
.single-hubogen_product .wp-block-heading[class*="has-"],
.single-hubogen_product h1,
.page h1.wp-block-heading {
  font-size: 34px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.5px !important;
}
@media (max-width: 767px) {
  .single-hubogen_product h1,
  .page h1.wp-block-heading {
    font-size: 26px !important;
  }
}

/* ⑤ 下拉菜单卡片化：圆角 + 阴影 + 内边距 */
.ast-desktop .main-header-menu .sub-menu {
  border-radius: 10px !important;
  box-shadow: 0 12px 32px rgba(1, 40, 81, 0.14) !important;
  border: 1px solid rgba(1, 40, 81, 0.06) !important;
  padding: 8px 0 !important;
  overflow: hidden !important;
}
.ast-desktop .main-header-menu .sub-menu .menu-link {
  padding: 10px 20px !important;
}

/* ==========================================================================
   HB-FIX-20261012 END
   ========================================================================== */

/* HB-FIX-20261012: 全站悬浮 CTA 按钮 */
.hb-float-cta {
  position: fixed; right: 24px; bottom: 24px; z-index: 9998;
  background: #0F6E56; color: #ffffff !important;
  padding: 14px 24px; border-radius: 999px;
  font-weight: 600; font-size: 15px; text-decoration: none !important;
  box-shadow: 0 8px 24px rgba(15,110,86,0.32);
  transition: transform .2s ease, opacity .25s ease, background .2s ease;
}
.hb-float-cta:hover { background: #0B5443; transform: translateY(-2px); }
.hb-float-cta.is-hidden { opacity: 0; pointer-events: none; transform: translateY(10px); }
@media (max-width: 921px) {
  .hb-float-cta { right: 16px; bottom: 16px; padding: 12px 18px; font-size: 14px; }
}

/* HB-FIX-20261012: 合作流程时间线（About） */
.hb-steps-lead { color:#3a4a5a; margin-bottom:18px; }
.hb-steps { display:flex; gap:0; margin:24px 0 8px; flex-wrap:wrap; }
.hb-step { position:relative; flex:1 1 0; min-width:150px; padding:20px 16px 16px 16px; }
.hb-step:before { content:""; position:absolute; left:0; right:0; top:34px; height:2px; background:#d7e3df; }
.hb-step:first-child:before { left:50%; }
.hb-step:last-child:before { right:50%; }
.hb-step__n { position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; background:#0F6E56; color:#fff; font-weight:700; font-size:14px; }
.hb-step__name { display:block; margin-top:12px; font-weight:700; color:#012851; font-size:15px; }
.hb-step__desc { display:block; margin-top:6px; color:#4a5b6a; font-size:13px; line-height:1.45; }
.hb-step__time { display:inline-block; margin-top:8px; font-size:12px; font-weight:600; color:#0F6E56;
  background:#E8F3EF; border-radius:999px; padding:3px 10px; }
@media (max-width: 921px) {
  .hb-steps { flex-direction:column; }
  .hb-step { padding-left:44px; }
  .hb-step:before { left:15px; right:auto; top:0; bottom:0; width:2px; height:auto; }
  .hb-step:first-child:before { left:15px; top:34px; }
  .hb-step:last-child:before { right:auto; bottom:50%; }
  .hb-step__n { position:absolute; left:0; top:20px; }
}

/* HB-FIX-20261012: 页脚导航四栏 */
.hb-footer-nav { display:flex; flex-wrap:wrap; gap:32px; max-width:1200px; margin:0 auto; padding:40px 0 24px; justify-content:space-between; }
.hb-footer-col { flex:0 1 auto; }
.hb-footer-col h4 { margin:0 0 10px; font-size:14px; letter-spacing:.02em; text-transform:uppercase; color:#0F6E56; }
.hb-footer-col ul { list-style:none; margin:0; padding:0; }
.hb-footer-col li { margin:0 0 6px; }
.hb-footer-col a { color:#33475b; text-decoration:none; font-size:14px; }
.hb-footer-col a:hover { color:#0F6E56; text-decoration:underline; }
@media (max-width:767px){ .hb-footer-nav{gap:20px;padding:28px 18px 16px;} .hb-footer-col{flex:1 1 45%;} }
@media (min-width:768px) and (max-width:921px){ .hb-footer-col{flex:1 1 40%;} }


/* ==========================================================================
   HB-FIX-20261012b: Spectra/SureForms 说明文字「白底白字」
   --------------------------------------------------------------------------
   现象：首页 Quote 表单区块的说明文字不可见（用户截图两次反馈）
         P.uagb-desc-text "A real person reviews every enquiry…"
         STRONG "sales@huibojian.com"（内嵌于 uagb-block-hb-foot）
   实测对比度 = 1.06（色 rgb(255,255,255) / 底 rgb(247,249,248)）

   根因链（浏览器实测，非推断）：
     1) #494 区块原始标记 {"backgroundColor":"teal","textColor":"white"}
        → WP 输出 class: has-white-color has-teal-background-color
     2) WP 核心样式 .has-white-color{color:#fff !important} 生效
     3) Astra 调色板仅 ast-global-color-0~8，未注册 teal
        → .has-teal-background-color 全站无背景规则
        → 该 group 实测 background-color: rgba(0,0,0,0)，color: rgb(255,255,255)
     4) 同组内 H2/H3/LEGEND/LABEL 由 Astra 自身规则(更高特异性)保持深蓝，故仅说明文字落空

   选型实测（浏览器内注入候选 CSS，比对全页计算样式 diff）：
     C1 容器 color 无 !important ......... 变化 0 处  → 打不过核心 !important，无效
     C2 容器 color + !important ........... 变化 9 处  → 仅"继承"元素，✓ 采用
     C3 仅 .uagb-desc-text + !important ... 变化 2 处  → 精准但漏掉同组隐藏继承元素
     C4 容器 * + !important ............... 变化 29 处 → ✗ 把红色必填星号染成深蓝，破坏语义

   C2 不影响的元素（已实测确认）：H2/H3.uagb-heading-text、LEGEND.srfm-block-legend、
     SPAN.srfm-required(红)、.srfm-error-message(红)、OPTION 等，
     因其自带 color 声明，继承永远让位于自身声明。
   ========================================================================== */
.wp-block-group.has-teal-background-color { color: rgba(1, 40, 81, 0.78) !important; }
/* HB-FIX-20261012b END */


/* ==========================================================================
   HB-FIX-20261012c: 页面 hero 白字可读性（补 scrim 遮罩）
   --------------------------------------------------------------------------
   现象：内页/首页 hero 的白色标题与副标题直接压在偏亮的工厂实拍图上，
        副标题 15px 对比度仅 3.27，不达 WCAG AA 正文门槛（4.5）

   实测（隐藏文字/采样文字上下 8px 像素带 测真实底色亮度，含阳性对照）：
     页面       修前 H1        修前 P(15px)    实测底色
     home       2.92 ❌        3.33 ❌         ≈灰 150 / 139
     products   3.53 ✅        3.27 ❌         ≈灰 135 / 141
     quality    3.51 ✅        3.27 ❌         ≈灰 136 / 141
     capabilities / certifications 同为 3.5 / 3.27

   根因（实测）：cover 标记为
     <div class="wp-block-cover alignfull" style="background-image:url(...F1-banner-factory-1.webp)">
   全站 has-background-dim = 0 处、cover__background = 0 处
   → **完全没有遮罩层**，白字直接压原始照片（左侧深色是照片自带的绿色区域，非渐变）

   作用范围核验：全站每页最多 1 个 .wp-block-cover，就是 page hero；
     全部 dim=false、同一张图、内部只有白字；CTA 带/按钮均不是 cover
     → 零附带风险

   选型实测（注入候选 CSS 后复测同一批文字）：
     S1 均匀 rgba(1,40,81,.55)  → home 7.10/7.57  products 7.86/7.57  ✅
     S2 均匀 rgba(1,40,81,.62)  → 8.04/8.49  8.75/8.48                ✅
     S3 中段渐变 .40/.68/.40    → 7.60/8.65  9.00/8.67                ✅ 采用（数值最优且照片上下更亮）
     S4 teal→navy 100deg        → 6.33/6.42  6.51/6.41                ❌ 左侧强 teal 使 teal 按钮融进背景

   实现：cover 内已有 .wp-block-cover__inner-container{z-index:1;position:relative}，
       故 scrim 用 ::before{z-index:0} 正好垫在文字之下、图片之上。
   ========================================================================== */
/* HB-FIX-20261027-noscrim: 用户定案——banner 不再加任何深蓝渐变遮罩层，全局永久禁用 */
.wp-block-cover.alignfull::before { content: none !important; }
/* HB-FIX-20261012c END */

/* HB-FIX-20261013-footer-contact: 页脚公司简介栏联系方式（对标同行左栏） */
.footer-widget-area[data-section="sidebar-widgets-footer-widget-1"] .hb-f-contact{margin:0 0 14px;display:flex;flex-wrap:wrap;gap:48px;align-items:center;justify-content:center;}
.footer-widget-area[data-section="sidebar-widgets-footer-widget-1"] .hb-f-item{display:inline-flex;align-items:center;gap:6px;font-size:14px;line-height:1.6;}
.footer-widget-area[data-section="sidebar-widgets-footer-widget-1"] .hb-f-whatsapp{font-size:20px;font-weight:700;}
.footer-widget-area[data-section="sidebar-widgets-footer-widget-1"] .hb-f-whatsapp a{color:#25D366 !important;font-size:20px;font-weight:700;text-decoration:none;}
.footer-widget-area[data-section="sidebar-widgets-footer-widget-1"] .hb-f-whatsapp a:hover{text-decoration:underline;}
.footer-widget-area[data-section="sidebar-widgets-footer-widget-1"] .hb-f-contact a{color:rgb(127,217,192);text-decoration:underline;}

/* HB-FIX-20261013-footer-fullwidth: 3 个空 widget 移除后，简介栏占满整行（限宽防拉伸） */
.site-footer-primary-section-2,.site-footer-primary-section-3,.site-footer-primary-section-4{display:none;}
.site-footer-primary-section-1{width:100%!important;flex:1 1 100%!important;}
.site-footer-primary-section-1 .footer-widget-area-inner{max-width:1200px;}
.site-primary-footer-inner-wrap{grid-template-columns:1fr!important;}

/* HB-FIX-20261013-banner3: 无字版banner（4:1）。文字置顶于图顶部深蓝安全区，scrim 上重下轻保产品鲜亮 */
.wp-block-cover.hb-img-banner{background-size:cover !important;background-position:center;}
.wp-block-cover.hb-img-banner::before{content:none !important;}
.hb-img-banner .wp-block-cover__inner-container{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:34px;}
.hb-img-banner .hb-banner-sub{font-size:15px;margin:6px 0 14px;text-shadow:0 1px 4px rgba(1,40,81,.7);}
.wp-block-cover.hb-img-banner{align-items:flex-start;}
/* 副文案胶囊底：防移动端白字压白罐 */
.hb-img-banner .hb-banner-sub{background:rgba(1,40,81,.55);padding:6px 16px;border-radius:999px;backdrop-filter:blur(2px);}




/* ===== 首页 hero banner 加高 75vh（2026-10-14）===== */
.wp-block-cover.hb-img-banner{min-height:75vh !important;}
.hb-img-banner .wp-block-cover__inner-container{padding-top:4vh;}
.hb-img-banner h1.wp-block-heading{font-size:clamp(2.4rem,4.6vw,3.8rem) !important;line-height:1.15;max-width:26ch;text-shadow:0 2px 8px rgba(1,40,81,.6);}
@media (max-width:768px){
  .wp-block-cover.hb-img-banner{min-height:58vh !important;}
  .hb-img-banner .wp-block-cover__inner-container{padding-top:4vh;}
}

/* ===== 公司介绍区：解除栏内 1:1 强制，恢复横版自然比例（2026-10-14，对齐嘉倍康）===== */
.hb-about-block .wp-block-image img{aspect-ratio:1024/687 !important;height:auto !important;object-fit:cover !important;max-width:100%;}
.hb-about-block{padding-left:0;padding-right:0;}
.hb-about-block .wp-block-column{padding:0 24px;}

/* ===== 爆品区满宽后加左右呼吸边距（2026-10-14）===== */
.product-grid{padding:0 40px;}
.product-grid .wp-block-column{padding:0 8px;}

/* ===== 爆品卡片独立按钮（2026-10-14）===== */
.hb-card-btn-wrap{margin-top:10px;}
.hb-card-btn{display:inline-block;padding:6px 16px;border:1.5px solid #0F6E56;border-radius:999px;color:#0F6E56;font-size:13px;font-weight:600;text-decoration:none;transition:all .2s;}
.hb-card-btn:hover{background:#0F6E56;color:#fff;}

/* === Dosage grid 4x2 (2026-10-14) === */
.dosage-grid{padding:0 40px;}
.dosage-grid .wp-block-column{padding:0 12px;}
.hb-dosage-card img{border-radius:12px;width:100%;height:auto;transition:transform .25s ease;}
.hb-dosage-card a:hover img{transform:translateY(-4px);}
.hb-dosage-card h4{margin:10px 0 4px;font-size:17px;}
.hb-dosage-card h4 a{color:#1a1a1a;text-decoration:none;}
.hb-dosage-card h4 a:hover{color:#0F6E56;}
.hb-dosage-desc{font-size:13px;color:#555;line-height:1.5;margin:0 0 6px;}
.hb-dosage-more{font-size:15px;color:#444;margin-top:22px;}
@media (max-width:768px){.dosage-grid{padding:0 20px;flex-wrap:wrap;}.dosage-grid .wp-block-column{flex-basis:45% !important;width:45% !important;margin-bottom:14px;}}
.hb-dosage-more + .wp-block-button{text-align:center;margin-top:14px;margin-bottom:40px;}

/* === Category grid 3x2 (2026-10-14) === */
.category-grid{padding:0 40px;margin-top:6px;}
.category-grid .wp-block-column{padding:0 14px;}
.hb-cat-card img{border-radius:12px;width:100%;height:auto;transition:transform .25s ease;}
.hb-cat-card a:hover img{transform:translateY(-4px);}
.hb-cat-card h4{margin:12px 0 4px;font-size:18px;}
.hb-cat-card h4 a{color:#1a1a1a;text-decoration:none;}
.hb-cat-card h4 a:hover{color:#0F6E56;}
.hb-cat-desc{font-size:14px;color:#555;line-height:1.5;margin:0 0 10px;}
.category-grid + *{margin-top:26px;}
@media (max-width:768px){.category-grid{padding:0 20px;flex-wrap:wrap;}.category-grid .wp-block-column{flex-basis:45% !important;width:45% !important;margin-bottom:14px;}}

/* === Real certificate wall + lightbox (2026-10-14) === */
.cert-real-wall{max-width:1200px;margin:0 auto;padding:0 40px;}
.cert-real-wall .wp-block-column{padding:0 10px;}
.hb-cert-card a{display:block;cursor:zoom-in;border:1px solid #e8e8e8;border-radius:10px;overflow:hidden;background:#fff;transition:box-shadow .2s ease;}
.hb-cert-card a:hover{box-shadow:0 8px 24px rgba(0,0,0,.14);}
.hb-cert-card img{width:100%;height:auto;display:block;}
.hb-cert-card h5{margin:10px 0 2px;font-size:15px;}
.hb-cert-card h5 a{color:#1a1a1a;text-decoration:none;}
.hb-cert-meta{font-size:12px;color:#666;margin:0 0 6px;}
.hb-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.86);display:none;align-items:center;justify-content:center;z-index:99999;cursor:zoom-out;}
.hb-lightbox.open{display:flex;}
.hb-lightbox img{max-width:92vw;max-height:92vh;box-shadow:0 10px 60px rgba(0,0,0,.55);border-radius:6px;background:#fff;}
.hb-lb-close{position:absolute;top:14px;right:26px;color:#fff;font-size:36px;line-height:1;font-family:Arial,sans-serif;opacity:.85;user-select:none;}
@media (max-width:768px){.cert-real-wall{flex-wrap:wrap;padding:0 20px;}.cert-real-wall .wp-block-column{flex-basis:45% !important;width:45% !important;margin-bottom:14px;}}

/* ===== About Customization hover block (2026-10-14) ===== */
.entry-content .hb-cust-block{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-top:64px;}
.hb-cust-banner{background:#0F6E56;color:#fff;text-align:center;padding:30px 16px;}
.hb-cust-banner h2{margin:0 0 8px;color:#fff;font-size:clamp(1.6rem,2.6vw,2.3rem);}
.hb-cust-banner p{margin:0;opacity:.92;letter-spacing:.5px;font-size:clamp(.85rem,1.2vw,1.05rem);}
.hb-cust-tabs{display:none;}
.hb-cust-stage{position:relative;width:100%;background:#f2f2f2;line-height:0;}
.hb-cust-stage img.hb-cust-panel{position:absolute;inset:0;width:100%;height:auto;opacity:0;transition:opacity .25s ease;pointer-events:none;}
.hb-cust-stage img.hb-cust-panel.active{position:relative;opacity:1;}
.hb-cust-hot{position:absolute;width:7.4%;height:23.5%;transform:translate(-50%,-50%);border-radius:50%;cursor:pointer;z-index:5;}
.hb-cust-hot:hover{background:rgba(15,110,86,.08);}
@media(max-width:768px){
  .hb-cust-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:14px 10px 4px;background:#f2f2f2;}
  .hb-cust-tab{padding:7px 13px;border:1px solid #0F6E56;border-radius:18px;background:#fff;color:#0F6E56;font-size:13px;cursor:pointer;}
  .hb-cust-tab.active{background:#0F6E56;color:#fff;}
  .hb-cust-hot{display:none;}
}
@media(max-width:768px){
  .hb-cust-stage img.hb-cust-panel{height:280px;object-fit:cover;object-position:78% center;}
}

/* FAQ details spacing (2026-10-14) */
.entry-content .wp-block-details{margin:0 auto 14px;padding:14px 18px;background:#fff;border:1px solid #e6e6e6;border-radius:8px;}
.entry-content .wp-block-details summary{font-weight:600;cursor:pointer;}

/* ===== 询盘表单双列布局 + 高度压缩 (2026-10-15) ===== */
.srfm-form .srfm-block-single{flex:0 1 calc(50% - 8px) !important;max-width:calc(50% - 8px);padding:0 6px;margin-bottom:14px;box-sizing:border-box;}
/* 长字段独占整行 */
.srfm-form .srf-input-hb-pname-block,
.srfm-form .srfm-textarea-block{flex:0 1 100% !important;max-width:100%;}
/* 字段间距收紧 */
.srfm-form .srfm-block-wrap{margin-bottom:0;}
/* 移动端单列 */
@media(max-width:768px){
  .srfm-form .srfm-block-single{flex:0 1 100% !important;max-width:100%;}
}

/* ===== About 页两大厂区图：统一高度 + 横版 + 层次 (2026-10-15) ===== */
.entry-content .hb-facility-grid .wp-block-image img{aspect-ratio:auto;height:380px !important;width:100%;object-fit:cover;object-position:center;border-radius:12px;}
.hb-facility-grid{gap:20px;}
/* 内页 banner 高度下调 */
@media(min-width:769px){
  .page-id-495 .entry-content > .wp-block-cover{min-height:430px;}
}
@media(max-width:768px){
  .entry-content .hb-facility-grid .wp-block-image img{height:240px !important;}
}

/* About 图组引导标题：降级字号+均匀间距 (2026-10-15) */
.entry-content .hb-plant-title{font-size:26px !important;margin-top:36px !important;margin-bottom:20px !important;}

/* About 数据带：背景满宽 + 卡格居中 4 列 (2026-10-15) */
.page-id-495 .hb-stat-band-wrap{grid-column:1/-1;width:100vw;margin-left:calc(50% - 50vw);max-width:none;padding:30px 40px;background:#0F6E56;margin-top:0;box-sizing:border-box;}
.page-id-495 .hb-statgrid{max-width:1200px;margin:0 auto;grid-template-columns:repeat(4,1fr);}

/* About 厂区图与数据带间距收紧 (2026-10-15) */
.page-id-495 .hb-stat-band-wrap{margin-top:40px;}

/* About 三工厂卡 (2026-10-15) */
.hb-factory-cards{margin-top:8px;}
.hb-factory-cards .wp-block-column{background:#fff;border:1px solid #e8eceb;border-radius:12px;padding:28px 24px;box-sizing:border-box;}
.hb-factory-cards .wp-block-column:empty{display:none;}
.hb-factory-cards h3{font-size:19px;margin:0 0 14px;color:#1a3a5c;}
.hb-factory-cards p{font-size:14.5px;line-height:1.75;color:#44546a;margin:0;}

/* About 数据带与工厂节标题间距 (2026-10-15) */
.page-id-495 .entry-content h2.hb-fact-title{margin-top:40px;}

/* About 剂型标签区 (2026-10-15) */
.hb-dosage-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:900px;margin:0 auto;padding:0 20px;}
.hb-dosage-tag{display:inline-block;padding:10px 22px;border:1.5px solid #0F6E56;border-radius:999px;color:#0F6E56;font-size:15px;font-weight:600;text-decoration:none;transition:all .2s;}
.hb-dosage-tag:hover{background:#0F6E56;color:#fff;}
.hb-dosage-more{border-style:dashed;color:#6b7a8f;border-color:#c3ccd6;}
.hb-dosage-more:hover{background:#6b7a8f;border-color:#6b7a8f;color:#fff;}
.page-id-495 .hb-wm-title{margin-top:44px;}

/* About 剂型图卡导航条 (2026-10-15) */
.entry-content .hb-dosage-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;width:100vw;max-width:100vw;margin:24px 0 0 calc(50% - 50vw);padding:0 40px;box-sizing:border-box;}
.hb-dosage-card{display:flex;flex-direction:column;align-items:center;text-decoration:none;gap:10px;}
.hb-dosage-card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;border:1px solid #e8eceb;transition:transform .2s;}
.hb-dosage-card:hover img{transform:translateY(-4px);box-shadow:0 8px 20px rgba(15,110,86,.15);}
.hb-dosage-card span{font-size:15px;font-weight:600;color:#1a3a5c;}
@media(max-width:768px){.hb-dosage-grid{grid-template-columns:repeat(3,1fr);gap:12px;padding:0 16px;}}
@media(max-width:480px){.hb-dosage-grid{grid-template-columns:repeat(2,1fr);}}

/* About 产线图文卡 (2026-10-15) */
.entry-content .hb-line-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;width:100vw;max-width:100vw;margin:24px 0 0 calc(50% - 50vw);padding:0 40px;box-sizing:border-box;}
.hb-line-card{background:#fff;border:1px solid #e8eceb;border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(20,40,60,.05);}
.hb-line-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
.hb-line-info{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;}
.hb-line-name{font-size:15.5px;font-weight:700;color:#1a3a5c;}
.hb-line-cap{font-size:13px;color:#6b7a8f;}
.hb-line-cap b{font-size:22px;color:#0F6E56;font-weight:800;margin-right:4px;}
.hb-line-title{margin-top:44px;text-align:center;}
@media(max-width:900px){.entry-content .hb-line-grid{grid-template-columns:repeat(2,1fr);padding:0 16px;}}
@media(max-width:560px){.entry-content .hb-line-grid{grid-template-columns:1fr;}}

/* About 剂型/产线两节标题与图卡间距统一覆盖 (2026-10-15) */
.page-id-495 .entry-content h2.hb-wm-title{margin:48px 0 24px !important;}
.page-id-495 .entry-content h3.hb-line-title{margin:48px 0 24px !important;}
.page-id-495 .entry-content .hb-dosage-grid{margin-top:0 !important;}
.page-id-495 .entry-content .hb-line-grid{margin-top:0 !important;}

/* About 研发左图右文 (2026-10-15) */
.hb-rd-cols{align-items:center;margin-top:8px;}
.hb-rd-cols .wp-block-column:first-child .wp-block-image img{border-radius:14px;}
.hb-rd-list{list-style:none;padding:0;margin:0;}
.hb-rd-list li{padding:10px 0 10px 30px;position:relative;border-bottom:1px solid #eef1f0;font-size:14.5px;color:#44546a;line-height:1.6;}
.hb-rd-list li:last-child{border-bottom:none;}
.hb-rd-list li::before{content:"✓";position:absolute;left:2px;color:#0F6E56;font-weight:800;}
.page-id-495 .hb-rd-title,.page-id-495 .hb-qc-title{margin-top:48px;margin-bottom:0;}

/* About 研发封面块：内容限宽居中 + 与产线卡对齐 (2026-10-15) */
.page-id-495 .spectra-is-root-container:has(.hb-duo-text) .wp-block-columns{max-width:1200px !important;margin-left:auto !important;margin-right:auto !important;}
.page-id-495 .hb-rd-title{margin-top:48px;margin-bottom:28px;}
.page-id-495 .hb-rd-title + p{margin-top:8px;}

/* About 研发封面块居中（覆盖 hb-duo group 内 columns）(2026-10-15) */
.page-id-495 .wp-block-group.hb-duo .wp-block-columns{max-width:1200px !important;margin-left:auto !important;margin-right:auto !important;}
.page-id-495 .wp-block-group.hb-duo{padding-top:28px !important;}

/* About 质量流程时间线 (2026-10-15) */
.hb-qc-flow{display:flex;align-items:flex-start;gap:6px;max-width:1240px;margin:28px auto 0;padding:0 24px;}
.hb-qc-step{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;}
.hb-qc-step img{width:96px;height:96px;object-fit:contain;}
.hb-qc-step b{font-size:11.5px;letter-spacing:1px;color:#0F6E56;font-weight:800;}
.hb-qc-name{font-size:15px;font-weight:700;color:#1a3a5c;line-height:1.35;}
.hb-qc-desc{font-size:13px;color:#6b7a8f;line-height:1.5;}
.hb-qc-arrow{font-size:26px;color:#0F6E56;margin-top:36px;flex-shrink:0;}
@media(max-width:900px){
  .hb-qc-flow{flex-direction:column;align-items:center;gap:4px;}
  .hb-qc-arrow{transform:rotate(90deg);margin:6px 0;}
}

/* About 证书徽章带 (2026-10-15) */
.hb-cert-band{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;max-width:1240px;margin:28px auto 0;padding:0 24px;}
.hb-cert-badge{display:flex;flex-direction:column;align-items:center;gap:8px;width:190px;background:#fff;border:1px solid #e8eceb;border-radius:14px;padding:22px 14px 18px;text-decoration:none;transition:transform .2s,box-shadow .2s;}
.hb-cert-badge:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(15,110,86,.15);}
.hb-cert-badge img{width:120px;height:150px;object-fit:contain;}
.hb-cert-name{font-size:15px;font-weight:700;color:#1a3a5c;}
.hb-cert-no{font-size:12px;color:#6b7a8f;text-align:center;line-height:1.4;}
.page-id-495 .hb-cert-title{margin-top:56px;}
@media(max-width:768px){.hb-cert-badge{width:calc(50% - 18px);}}

/* About 质量流程条+证书徽章带边界对齐 1200 (2026-10-15) */
.hb-qc-flow{max-width:1200px;padding:0;}
.hb-cert-band{max-width:1200px;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
.hb-cert-badge{width:auto;}
@media(max-width:768px){.hb-cert-band{grid-template-columns:repeat(2,1fr);}}

/* About 总结收尾区 (2026-10-15) */
.hb-summary{background:#0F6E56;padding-top:54px;padding-bottom:54px;margin-top:0;}
.hb-summary-cols{max-width:1140px;margin:0 auto;}
.hb-summary-img img{border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.28);}
.hb-summary-text{color:#eaf4f1;}
.hb-summary-text p{color:#d7e9e4;font-size:15px;line-height:1.7;}
.hb-eyebrow-light{color:#7fd4bd;font-size:12px;letter-spacing:2px;font-weight:700;margin:0 0 12px;}
.hb-summary-h2{color:#ffffff;font-size:32px;line-height:1.25;margin:0 0 16px;}
.hb-summary-text ul{list-style:none;padding:0;margin:0 0 24px;}
.hb-summary-text ul li{padding:8px 0 8px 30px;position:relative;color:#eaf4f1;font-size:14.5px;line-height:1.6;}
.hb-summary-text ul li::before{content:"✓";position:absolute;left:2px;color:#7fd4bd;font-weight:800;}
.hb-summary-btn{display:inline-block;background:#fff;color:#0F6E56;font-weight:700;font-size:15px;padding:13px 28px;border-radius:999px;text-decoration:none;transition:all .2s;}
.hb-summary-btn:hover{background:#eaf4f1;transform:translateY(-2px);}
.hb-summary-btn span{font-size:18px;line-height:0;}
@media(max-width:768px){.hb-summary{padding-top:44px;padding-bottom:44px;}.hb-summary-h2{font-size:26px;}}

/* About 总结区加宽+图文间距 (2026-10-16) */
.hb-summary{padding-left:48px;padding-right:48px;}
.hb-summary .wp-block-columns{max-width:1400px !important;gap:144px;}
@media(max-width:768px){.hb-summary{padding-left:20px;padding-right:20px;}.hb-summary-cols{gap:32px;}}

/* About 总结区限高：左图压缩 (2026-10-16) */
.hb-summary .hb-summary-img img{max-height:320px !important;width:auto !important;object-fit:cover;}

/* About 总结区统一协调 (2026-10-16) */
.hb-summary{background:#0F6E56;padding:52px 48px !important;margin-top:0;}
.hb-summary .wp-block-columns{max-width:1400px !important;gap:72px !important;}
.hb-summary .hb-summary-img img{max-height:420px !important;width:100% !important;object-fit:cover;}

/* Who We Work With 客户方案大图 (2026-10-16) */
.hb-customer-img img{border-radius:14px;}

/* Who We Work With 标题居中+间距 (2026-10-16) */
.hb-who-title{margin-bottom:32px;}

/* About 时效时间轴 (2026-10-16) */
.hb-timeline{display:flex;align-items:flex-start;justify-content:center;gap:6px;max-width:1240px;margin:28px auto 0;padding:0 24px;}
.hb-tl-step{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;}
.hb-tl-step b{font-size:26px;font-weight:800;color:#0F6E56;line-height:1;}
.hb-tl-step span{font-size:11px;color:#6b7a8f;letter-spacing:.5px;}
.hb-tl-step i{font-style:normal;font-size:13.5px;font-weight:600;color:#1a3a5c;margin-top:6px;}
.hb-tl-arrow{font-size:22px;color:#0F6E56;margin-top:10px;flex-shrink:0;}
.hb-timeline-title{margin-top:56px;}
@media(max-width:900px){.hb-timeline{flex-direction:column;align-items:center;gap:4px;}.hb-tl-arrow{transform:rotate(90deg);margin:4px 0;}}

/* About 展会照片墙 (2026-10-16) */
.hb-expo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1200px;margin:28px auto 0;padding:0;}
.hb-expo-item{margin:0;}
.hb-expo-item img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block;}
.hb-expo-title{margin-top:56px;}
@media(max-width:768px){.hb-expo-grid{grid-template-columns:repeat(2,1fr);}}

/* About 客户好评区 (2026-10-16) */
.hb-rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1200px;margin:28px auto 0;padding:0;}
.hb-rev-item{margin:0;}
.hb-rev-item img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:top;border-radius:12px;display:block;border:1px solid #e8eceb;}
.hb-rev-title{margin-top:56px;}
@media(max-width:768px){.hb-rev-grid{grid-template-columns:1fr;max-width:560px;}}

/* About 全页节标题间距字号统一 (2026-10-16) */
.page-id-495 .entry-content h2.has-text-align-center{margin-top:56px !important;margin-bottom:24px !important;font-size:34px !important;line-height:1.25 !important;}
.page-id-495 .hb-summary-h2{font-size:34px !important;line-height:1.25 !important;}

/* PRODUCTS 页节标题间距字号统一 (2026-10-16) */
.page-id-1257 .entry-content h2:not(.hb-duo-h2):not(.wp-block-spectra-content):not(.uagb-heading-text){margin-top:56px !important;margin-bottom:24px !important;font-size:34px !important;line-height:1.25 !important;}

/* PRODUCTS 页 banner 高度对齐首页 hero (2026-10-16) */
.page-id-1257 .wp-block-cover{min-height:75vh !important;}
@media(max-width:768px){.page-id-1257 .wp-block-cover{min-height:58vh !important;}}

/* PRODUCTS banner 文字白光晕（浅图上保可读） (2026-10-16) */
.page-id-1257 .wp-block-cover h1,.page-id-1257 .wp-block-cover .wp-block-cover__inner-container p{text-shadow:0 2px 16px rgba(255,255,255,.95),0 0 36px rgba(255,255,255,.85),0 0 60px rgba(255,255,255,.6);}

/* PRODUCTS banner 背景强制 cover 显示完整亮区 (2026-10-16) */
.page-id-1257 .wp-block-cover{background-size:cover !important;background-position:center center !important;}

/* PRODUCTS banner 去除全局深蓝 scrim（浅色图+深色文字不需遮罩） (2026-10-16) */
.page-id-1257 .wp-block-cover.alignfull::before{background:none !important;}

/* PRODUCTS banner 标题放大+左移定位 (2026-10-16) */
.page-id-1257 .wp-block-cover__inner-container{display:flex !important;flex-direction:column;align-items:flex-start !important;justify-content:center !important;padding-left:7vw !important;padding-right:7vw !important;width:100% !important;max-width:none !important;}
.page-id-1257 .wp-block-cover h1{font-size:clamp(3.2rem,6vw,5rem) !important;line-height:1.05 !important;text-align:left !important;font-weight:800 !important;margin:0 0 16px !important;}
.page-id-1257 .wp-block-cover .wp-block-cover__inner-container p{font-size:clamp(1rem,1.6vw,1.25rem) !important;text-align:left !important;max-width:520px;}

/* About banner 加高+左文右图+去遮罩（对齐 PRODUCTS 样式） (2026-10-16) */
.page-id-495 .wp-block-cover{min-height:75vh !important;background-size:cover !important;background-position:center !important;}
.page-id-495 .wp-block-cover.alignfull::before{background:none !important;}
.page-id-495 .wp-block-cover__inner-container{display:flex !important;flex-direction:column;align-items:flex-start !important;justify-content:center !important;padding-left:7vw !important;padding-right:7vw !important;width:100% !important;max-width:none !important;}
.page-id-495 .wp-block-cover h1{font-size:clamp(3rem,5.5vw,4.5rem) !important;line-height:1.08 !important;text-align:left !important;font-weight:800 !important;margin:0 0 16px !important;text-shadow:0 2px 18px rgba(0,0,0,.65),0 0 44px rgba(0,0,0,.45) !important;}
.page-id-495 .wp-block-cover .wp-block-cover__inner-container p{font-size:clamp(1rem,1.5vw,1.2rem) !important;text-align:left !important;max-width:540px !important;text-shadow:0 1px 12px rgba(0,0,0,.6) !important;}

/* PRODUCTS 标题区 spectra content 占满宽（居中平铺） (2026-10-16) */
.hb-title-h2,.hb-title-p{width:100% !important;text-align:center !important;}

/* PRODUCTS 标题区强制块级居中（绕过 spectra flex/grid） (2026-10-16) */
.hb-title-section .wp-block-spectra-container{display:block !important;}
.hb-title-section .wp-block-spectra-content{width:100% !important;text-align:center !important;}
.hb-title-section{padding-left:24px !important;padding-right:24px !important;}

/* PRODUCTS 剂型卡配图 (2026-10-17) */
.hb-dosage-card-img{margin:0 0 4px;}
.hb-dosage-card-img img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;display:block;}

/* PRODUCTS 剂型详情卡片化 (2026-10-17) */
.hb-df-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;max-width:1200px;margin:28px auto 0;padding:0;}
.hb-df-card{background:#fff;border-radius:14px;box-shadow:0 4px 16px rgba(0,0,0,.08);padding:20px;}
.hb-df-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.hb-df-card h3{font-size:16px;font-weight:700;color:#1a3a5c;padding:0 0 8px;margin:0;}
.hb-df-card p{font-size:13px;color:#44546a;padding:0;line-height:1.6;margin:0;}
@media(max-width:900px){.hb-df-cards{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.hb-df-cards{grid-template-columns:1fr;}}

/* PRODUCTS 类目卡片化 (2026-10-17) */
.hb-cat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1200px;margin:28px auto 0;padding:0;}
.hb-cat-card{background:#fff;border-radius:14px;box-shadow:0 4px 16px rgba(0,0,0,.08);padding:20px;}
.hb-cat-card h3{font-size:16px;font-weight:700;color:#1a3a5c;margin:0 0 10px;}
.hb-cat-doses{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.hb-cat-doses span{background:#E1F5EE;color:#0F6E56;font-size:12px;padding:3px 10px;border-radius:999px;line-height:1.4;}
.hb-cat-ingr{font-size:12.5px;color:#6b7a8f;line-height:1.55;margin:0;}
@media(max-width:900px){.hb-cat-cards{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.hb-cat-cards{grid-template-columns:1fr;}}

/* PRODUCTS 定制能力卡片化 (2026-10-17) */
.hb-cust-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1200px;margin:28px auto 0;padding:0;}
.hb-cust-card{background:#fff;border-radius:14px;box-shadow:0 4px 16px rgba(0,0,0,.08);padding:20px;}
.hb-cust-card h3{font-size:15px;font-weight:700;color:#1a3a5c;margin:0 0 8px;line-height:1.35;}
.hb-cust-card p{font-size:13px;color:#6b7a8f;line-height:1.55;margin:0;}
@media(max-width:900px){.hb-cust-cards{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.hb-cust-cards{grid-template-columns:1fr;}}

/* PRODUCTS 配方挑战卡片化 (2026-10-17) */
.hb-chal-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1200px;margin:24px auto 0;padding:0;}
.hb-chal-card{background:#fff;border-radius:14px;box-shadow:0 4px 16px rgba(0,0,0,.08);padding:20px;}
.hb-chal-card h3{font-size:15px;font-weight:700;color:#1a3a5c;margin:0 0 8px;line-height:1.35;}
.hb-chal-card p{font-size:13px;color:#6b7a8f;line-height:1.55;margin:0;}
@media(max-width:900px){.hb-chal-cards{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.hb-chal-cards{grid-template-columns:1fr;}}



/* PRODUCTS MOQ 数据卡 + Category Detail 类目卡 (2026-10-21) */
.hb-moq-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1200px;margin:28px auto 0;padding:0;}
.hb-moq-card{background:#fff;border-radius:14px;box-shadow:0 4px 16px rgba(0,0,0,.08);padding:22px 20px;text-align:center;border-top:3px solid #0F6E56;}
.hb-moq-num{font-size:30px;font-weight:800;color:#0F6E56;line-height:1.1;margin:0 0 6px;}
.hb-moq-unit{font-size:12px;color:#6b7a8f;font-weight:600;letter-spacing:.5px;text-transform:uppercase;}
.hb-moq-card h3{font-size:15px;font-weight:700;color:#1a3a5c;margin:10px 0 6px;line-height:1.3;}
.hb-moq-card p{font-size:12.5px;color:#6b7a8f;line-height:1.5;margin:0;}
@media(max-width:900px){.hb-moq-cards{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.hb-moq-cards{grid-template-columns:1fr;}}

.hb-catdetail-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1200px;margin:28px auto 0;padding:0;}
.hb-catdetail-card{background:#fff;border-radius:14px;box-shadow:0 4px 16px rgba(0,0,0,.08);padding:20px;}
.hb-catdetail-card h3{font-size:15px;font-weight:700;color:#1a3a5c;margin:0 0 10px;line-height:1.3;}
.hb-catdetail-card p{font-size:12.5px;color:#6b7a8f;line-height:1.55;margin:0;}
@media(max-width:900px){.hb-catdetail-cards{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.hb-catdetail-cards{grid-template-columns:1fr;}}



/* PRODUCTS 产能图文卡 (2026-10-21) */
.hb-cap-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1200px;margin:10px auto 40px;padding:0;}
.hb-cap-card{background:#fff;border-radius:14px;box-shadow:0 4px 16px rgba(0,0,0,.08);padding:0 0 18px;text-align:center;overflow:hidden;}
.hb-cap-card img{width:100%;height:auto;display:block;aspect-ratio:2.2/1;object-fit:cover;}
.hb-cap-card h3{font-size:16px;font-weight:700;color:#1a3a5c;margin:14px 0 4px;line-height:1.3;}
.hb-cap-card p{font-size:13px;color:#6b7a8f;margin:0;line-height:1.5;}
@media(max-width:900px){.hb-cap-cards{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.hb-cap-cards{grid-template-columns:1fr;}}

/* PRODUCTS 类目卡落地页内链 (2026-10-21) */
.hb-cat-link{display:inline-block;margin-top:10px;font-size:13px;font-weight:600;color:#0F6E56;text-decoration:none;}
.hb-cat-link:hover{text-decoration:underline;}

/* PRODUCTS 样品一致性流程卡 (2026-10-21) */
.hb-sample-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;max-width:1200px;margin:24px auto 0;padding:0;}
.hb-sample-card{background:#fff;border-radius:14px;box-shadow:0 4px 16px rgba(0,0,0,.08);padding:18px 16px;text-align:center;border-top:3px solid #0F6E56;position:relative;}
.hb-sample-num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#E1F5EE;color:#0F6E56;font-weight:800;font-size:15px;margin-bottom:10px;}
.hb-sample-card h3{font-size:14px;font-weight:700;color:#1a3a5c;margin:0 0 6px;line-height:1.3;}
.hb-sample-card p{font-size:12px;color:#6b7a8f;line-height:1.5;margin:0;}
@media(max-width:1024px){.hb-sample-cards{grid-template-columns:repeat(3,1fr);}}
@media(max-width:600px){.hb-sample-cards{grid-template-columns:1fr;}}

/* PRODUCTS 规格超范围双栏对比卡 (2026-10-21) */
.hb-spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1200px;margin:24px auto 0;padding:0;}
.hb-spec-card{background:#fff;border-radius:14px;box-shadow:0 4px 16px rgba(0,0,0,.08);overflow:hidden;}
.hb-spec-head{padding:12px 20px;font-size:15px;font-weight:700;color:#fff;}
.hb-spec-ok .hb-spec-head{background:#0F6E56;}
.hb-spec-check .hb-spec-head{background:#C9821E;}
.hb-spec-card ul{margin:0;padding:18px 20px 18px 38px;}
.hb-spec-card li{font-size:13.5px;color:#44546a;line-height:1.6;margin:0 0 8px;}
.hb-spec-card li:last-child{margin-bottom:0;}
@media(max-width:800px){.hb-spec-grid{grid-template-columns:1fr;}}

/* PRODUCTS 页工厂实拍图带 (2026-10-21) */
.hb-fac-band{background:#f6faf8;}
.hb-fac-band .hb-fac-h2{font-size:clamp(1.6rem,2.6vw,2.1rem);color:#0F3D2E;margin:0 0 10px;}
.hb-fac-band .hb-fac-sub{text-align:center;max-width:760px;margin:0 auto 30px;color:#44546a;font-size:15.5px;line-height:1.7;}
.hb-fac-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.hb-fac-grid .wp-block-image{margin:0;}
.hb-fac-grid img{aspect-ratio:auto;height:380px !important;width:100%;object-fit:cover;object-position:center;border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,.08);display:block;}
@media(max-width:860px){.hb-fac-grid{grid-template-columns:1fr;}.hb-fac-grid img{height:240px !important;}}

/* ===== Ingredients 页顶 banner（纯图满宽，文字区在其下方） ===== */
.wp-block-cover.alignfull.hb-ing-banner{position:relative;left:50%;transform:translateX(-50%);width:100vw !important;max-width:100vw !important;margin-left:0 !important;margin-right:0 !important;min-height:675px !important;align-items:flex-start !important;}
.wp-block-cover.hb-ing-banner{background-size:cover !important;background-position:center 45%;}
.wp-block-cover.hb-ing-banner .wp-block-cover__image-background{display:none;}
.wp-block-cover.hb-ing-banner .wp-block-cover__inner-container{width:100%;}
@media(max-width:900px){
  .wp-block-cover.alignfull.hb-ing-banner{min-height:380px !important;}
}

/* Ingredients 页 banner 顶到 header 下方，消除 ast-separate-container 顶部白边 */
.page-id-2473 .content-area{margin-top:0 !important;}
.page-id-2473 .wp-block-cover.alignfull::before{background:none !important;}

/* Ingredients banner 标题：置于图片顶部空白带（浅底深 teal 字） */
.wp-block-cover.hb-ing-banner .wp-block-cover__inner-container{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%;padding-top:70px;}
.page-id-2473 .wp-block-cover.hb-ing-banner h1.hb-ing-title{font-size:clamp(2.6rem,4.5vw,3.8rem) !important;font-weight:800 !important;color:#0F6E56 !important;line-height:1.1 !important;margin:0 !important;text-align:center !important;}
@media(max-width:900px){
  .wp-block-cover.hb-ing-banner .wp-block-cover__inner-container{padding-top:40px;}
  .hb-ing-title{font-size:2rem !important;}
}
.page-id-2473 article.ast-article-single{padding-top:0 !important;}
/* ===== HB-ING-20261022-TWOREGION START =====
   成分页两区改造：区域一 By Ingredient（3:2 原料图，2 栏）+ 区域二 By Benefit（1:1 成品图，4 栏）
   幂等块：重复追加前先 grep 本标记 */
.hb-ing-region-head{
  max-width:820px;
  margin:0 auto 34px;
  text-align:center;
}
.hb-ing-region-head .hb-region-eyebrow{
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#0F6E56;
  font-weight:700;
  margin:0 0 8px !important;
}
.hb-ing-region-head h2{
  font-size:clamp(1.6rem,2.6vw,2.2rem);
  color:#012851;
  margin:0 0 10px !important;
  line-height:1.2;
}
.hb-ing-region-head p{
  color:#46564F;
  font-size:15px;
  line-height:1.6;
  margin:0 !important;
}
/* 区域二：功效区网格（4 栏，1:1 成品图） */
.hb-ben-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
  align-items:stretch;
  margin:0;
}
.hb-ben-photo{
  margin:0 0 14px !important;
  border-radius:12px;
  overflow:hidden;
  background:var(--hb-mist,#F4F9F7);
  line-height:0;
}
.hb-ben-photo img{
  width:100% !important;
  height:auto !important;
  aspect-ratio:1 / 1 !important;
  object-fit:cover !important;
  object-position:center !important;
  border-radius:12px;
  display:block;
  margin:0 !important;
}
/* Immune 占位卡（图位空出，等用户补图） */
.hb-ben-photo.hb-ph-pending{
  aspect-ratio:1 / 1;
  border:2px dashed #BFD6CD;
  border-radius:12px;
  background:#F4F9F7;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 0 14px !important;
  line-height:1.4;
}
.hb-ben-photo.hb-ph-pending span{
  color:#7A938A;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;
  padding:0 14px;
}
@media (max-width:1024px){
  .hb-ben-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .hb-ben-grid{grid-template-columns:1fr;gap:16px;}
}
/* ===== HB-ING-20261022-TWOREGION END ===== */

/* ===== HB-ING-20261022-REGIONBG START =====
   两区背景修复：region 段刷 mist 浅绿底，与 banner / lead 区延续，白卡浮起 */
.hb-ing-region{
  background: var(--hb-mist) !important;
  max-width:none !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  padding-top: 70px;
  padding-bottom: 70px;
}
.hb-page-hero{
  background: var(--hb-mist) !important;
  max-width:none !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  padding-top: 56px;
  padding-bottom: 56px;
}
.hb-page-hero .hb-page-hero__inner{
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}
/* ===== HB-ING-20261022-REGIONBG END ===== */
/* ===== HB-ING-20261022-MENU START =====
   Ingredients 子导航：8 成分两列 + By Benefit 横条兜底（幂等块） */
#menu-item-2492 > .sub-menu{
  display:grid;
  grid-template-columns:1fr 1fr;
  width:460px;
  padding:8px;
  gap:2px 8px;
}
#menu-item-2492 > .sub-menu > li{
  width:100%;
}
/* 成分 8 项：压制 current-menu-item 高亮（URL 含页内锚点导致全部标记），保持白底深字 */
#menu-item-2492 > .sub-menu > li:not(:last-child) > a,
#menu-item-2492 > .sub-menu > li:not(:last-child) > a:hover,
#menu-item-2492 > .sub-menu > li:not(:last-child):hover > a,
#menu-item-2492 > .sub-menu > li:not(:last-child).current-menu-item > a{
  background:#fff !important;
  color:#012851 !important;
}
#menu-item-2492 > .sub-menu > li:not(:last-child) > a:hover,
#menu-item-2492 > .sub-menu > li:not(:last-child):hover > a{
  background:#F1F7F4 !important;
  color:#0F6E56 !important;
}
/* By Benefit 横条（第 9 项）跨两列 */
#menu-item-2492 > .sub-menu > li:last-child{
  grid-column:1 / -1;
  margin-top:6px;
}
#menu-item-2492 > .sub-menu > li:last-child > a,
#menu-item-2492 > .sub-menu > li:last-child > a:hover,
#menu-item-2492 > .sub-menu > li:last-child:hover > a,
#menu-item-2492 > .sub-menu > li.current-menu-item > a{
  display:block;
  background:#0F6E56 !important;
  color:#fff !important;
  border-radius:6px;
  padding:10px 14px;
  font-weight:600;
}
#menu-item-2492 > .sub-menu > li:last-child > a:hover,
#menu-item-2492 > .sub-menu > li:last-child:hover > a{
  background:#0B5745 !important;
  color:#fff !important;
}
/* ===== HB-ING-20261022-MENU END ===== */
/* ===== HB-ING-20261022-MORELIB START =====
   成分页「更多成分/功效」标签云承接区（幂等块） */
.hb-more-library{
  background: var(--hb-mist) !important;
  max-width:none !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  padding:56px 0 64px;
}
.hb-more-library > *{
  max-width:1140px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:24px;
  padding-right:24px;
}
.hb-more-library .hb-more-eyebrow{
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#0F6E56;
  font-weight:700;
  margin:0 auto 16px !important;
}
.hb-more-library .hb-more-ing,
.hb-more-library .hb-more-ben{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.hb-more-library .hb-more-ing{ margin-bottom:22px; }
.hb-tag{
  display:inline-block;
  background:#fff;
  border:1px solid #E4EDE9;
  border-radius:999px;
  padding:6px 15px;
  font-size:13px;
  line-height:1.4;
  color:#46564F;
  text-decoration:none;
}
.hb-tag.hb-tag-link{
  color:#0F6E56;
  border-color:#BFD6CD;
  font-weight:600;
}
.hb-tag.hb-tag-link:hover{
  background:#0F6E56;
  color:#fff;
  border-color:#0F6E56;
}
.hb-more-library .hb-more-ben-head{
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#0F6E56;
  font-weight:700;
  margin:0 auto 12px !important;
  padding-top:18px;
  border-top:1px solid #E4EDE9;
}
.hb-more-library .hb-more-foot{
  margin:20px auto 0 !important;
  font-size:14px;
  color:#0F6E56;
  font-weight:600;
}
/* ===== HB-ING-20261022-MORELIB END ===== */

/* ===== HB-ING-20261022-FULLWIDTH2 START =====
   LIBRARY 区(hb-duo)满宽对齐 + article 底部白边清零（幂等块） */
.page-id-2473 .entry-content > .hb-duo{
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  max-width:none !important;
}
.page-id-2473 article.ast-article-single{
  padding-bottom:0 !important;
  margin-bottom:0 !important;
}
.page-id-2473 .entry-content{
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}
/* ===== HB-ING-20261022-FULLWIDTH2 END ===== */

/* ===== HB-ING-20261022-DUOINNER START =====
   LIBRARY 区满宽后内部内容居中限宽（幂等块） */
.page-id-2473 .hb-duo .wp-block-group__inner-container,
.page-id-2473 .hb-duo .hb-duo-cols{
  max-width:1140px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
/* ===== HB-ING-20261022-DUOINNER END ===== */

/* ===== HB-ING-20261022-SCROLLMARGIN START =====
   锚点跳转落点下移，避开 sticky header 遮挡（幂等块） */
#ing-vitamins, #ing-minerals, #ing-botanicals, #ing-amino,
#ing-omega, #ing-probiotics, #ing-nootropics, #ing-specialty,
#benefits{
  scroll-margin-top: 92px;
}
/* ===== HB-ING-20261022-SCROLLMARGIN END ===== */

/* HB-CAP-20261022: Capabilities 页浅色 hero（对齐 Products/About 左文右图风格） */
.page-id-1259 .wp-block-cover.alignfull::before{background:none !important;}
.page-id-1259 .wp-block-cover.hb-cap-hero{min-height:75vh !important;background-size:cover !important;background-position:center;}
.page-id-1259 .wp-block-cover__inner-container{display:flex !important;flex-direction:column;align-items:flex-start !important;justify-content:center !important;padding-left:7vw !important;padding-right:7vw !important;width:100% !important;max-width:none !important;}
.page-id-1259 .wp-block-cover h1{font-size:clamp(2.4rem,4.6vw,3.8rem) !important;line-height:1.12 !important;max-width:26ch;margin-bottom:0.25em;}
.page-id-1259 .wp-block-cover .wp-block-cover__inner-container p{font-size:clamp(1.05rem,1.6vw,1.3rem) !important;text-align:left !important;max-width:540px;line-height:1.55;}
@media (max-width: 767px) {
  .page-id-1259 .wp-block-cover.hb-cap-hero{min-height:58vh !important;}
}

/* HB-CAP-20261022c: Capabilities 引言区标题居中 + 与 banner 拉开间距 */
.page-id-1259 .hb-intro-title{margin-top:64px !important;margin-bottom:20px !important;text-align:center !important;font-size:clamp(1.9rem,3vw,2.6rem) !important;}

/* HB-CAP-20261022d: Capabilities 各 H2 区块统一上间距（呼吸节奏） */
.page-id-1259 .entry-content h2.wp-block-heading{margin-top:56px !important;}
.page-id-1259 .entry-content h2.wp-block-heading.hb-intro-title{margin-top:64px !important;}
.page-id-1259 .entry-content h2.wp-block-heading + p, .page-id-1259 .entry-content h3.wp-block-heading + p{margin-top:6px !important;}

/* HB-CAP-20261022e: Our Core Capabilities 2x2 图文卡 */
.page-id-1259 .hb-cap4{gap:32px !important;margin-top:32px !important;}
.page-id-1259 .hb-cap4 + .hb-cap4{margin-top:32px !important;}
.page-id-1259 .hb-cap4-img{margin:0 0 18px !important;}
.page-id-1259 .hb-cap4-img img{width:100% !important;height:auto !important;aspect-ratio:4/3 !important;object-fit:cover !important;border-radius:14px !important;}
.page-id-1259 .hb-cap4 h3{font-size:1.35rem !important;margin:0 0 10px !important;color:var(--hb-navy) !important;}
.page-id-1259 .hb-cap4 p{font-size:0.98rem !important;line-height:1.7 !important;color:var(--hb-ink) !important;margin:0 !important;}
@media (max-width: 921px) {
  .page-id-1259 .hb-cap4{gap:28px !important;}
  .page-id-1259 .hb-cap4 .wp-block-column{flex-basis:100% !important;}
}

/* ===== HB-CAP-20261022f START =====
   Capabilities 页 4 核心能力卡对齐成分页 hb-ing-group 结构（白底卡框 + 圆角 + hover 上浮）
   · 用户定案：用成分页图文结构，名称不加链接（纯 strong 文字）
   · 图比例从 4:3 统一到 3:2，对齐成分页 hb-ing-photo
   ========================================== */
.page-id-1259 .hb-cap4 .wp-block-column{
  background:#fff;
  border:1px solid #E4EDE9;
  border-radius:16px;
  padding:20px 20px 18px;
  box-shadow:0 1px 2px rgba(1,40,81,.04);
  transition:box-shadow .22s ease, transform .22s ease;
}
.page-id-1259 .hb-cap4 .wp-block-column:hover{
  box-shadow:0 12px 30px rgba(1,40,81,.09);
  transform:translateY(-2px);
}
.page-id-1259 .hb-cap4-img img{
  aspect-ratio:3/2 !important;
  border-radius:12px !important;
}
.page-id-1259 .hb-cap4 h3{
  font-size:20px !important;
  line-height:1.25 !important;
  letter-spacing:-.01em;
}
/* ===== HB-CAP-20261022f END ===== */

/* ===== HB-CAP-20261022g START =====
   Our Core Capabilities 主标题居中
   ========================================== */
.page-id-1259 h2#our-core-capabilities{
  text-align:center !important;
}
/* ===== HB-CAP-20261022g END ===== */

/* ===== HB-CAP-20261022h START =====
   清除 hb-cap4 排容器的 45px 内边距（多余空白根因）
   ========================================== */
.page-id-1259 .hb-cap4{
  padding:0 !important;
}
/* ===== HB-CAP-20261022h END ===== */

/* ===== HB-CAP-20261022i START =====
   PROJECT RUNS (hb-duo) 内容边界对齐页面主容器
   · 修复：duoCols 1140 偏左 → 与 entry-content 同宽 1200 居中
   ========================================== */
.page-id-1259 .hb-duo{
  padding-left:20px !important;
  padding-right:20px !important;
}
.page-id-1259 .hb-duo .hb-duo-cols{
  max-width:1200px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  width:100% !important;
}
/* ===== HB-CAP-20261022i END ===== */

/* ===== HB-CAP-20261022j START =====
   Capabilities 页表格美化（teal 表头 + 斑马纹 + 圆角 + hover）
   · 仅作用于 page-id-1259 的 wp-block-table
   ========================================== */
.page-id-1259 .wp-block-table{
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(1,40,81,.06);
  border:1px solid #E4EDE9;
}
.page-id-1259 .wp-block-table table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin:0;
}
.page-id-1259 .wp-block-table thead th{
  background:#0F6E56;
  color:#fff;
  font-size:14px;
  font-weight:600;
  text-align:left;
  padding:14px 16px;
  border-bottom:1px solid #0F6E56;
}
.page-id-1259 .wp-block-table tbody td{
  font-size:14px;
  padding:12px 16px;
  border-bottom:1px solid #EEF3F1;
  color:#1B3A34;
  vertical-align:top;
}
.page-id-1259 .wp-block-table tbody tr:nth-child(even) td{
  background:#F6FAF8;
}
.page-id-1259 .wp-block-table tbody tr:last-child td{
  border-bottom:none;
}
.page-id-1259 .wp-block-table tbody tr:hover td{
  background:#EDF6F2;
}
/* ===== HB-CAP-20261022j END ===== */

/* ===== HB-CAP-20261022k START =====
   Project Timeline 标题居中
   ========================================== */
.page-id-1259 h2#project-timeline{
  text-align:center !important;
}
/* ===== HB-CAP-20261022k END ===== */

/* ===== HB-CAP-20261022l START =====
   Capabilities 页所有 H2 主标题统一居中
   · 排除 .hb-duo-h2（PROJECT RUNS 图文块标题，保持左对齐）
   · 覆盖此前逐个加的 our-core-capabilities / project-timeline
   ========================================== */
.page-id-1259 .entry-content h2.wp-block-heading:not(.hb-duo-h2){
  text-align:center !important;
}
/* ===== HB-CAP-20261022l END ===== */

/* ===== HB-CAP-20261022m START =====
   How Formulation Development Actually Works 6 步编号步骤卡（v2：.hb-step-h 精确锚定）
   ========================================== */
.page-id-1259 .entry-content{
  counter-reset: hb-step;
}
.page-id-1259 .entry-content h3.hb-step-h{
  position:relative;
  padding-left:44px !important;
  margin-top:36px !important;
  font-size:19px !important;
  counter-increment: hb-step;
}
.page-id-1259 .entry-content h3.hb-step-h::before{
  content:counter(hb-step);
  position:absolute;
  left:0;
  top:2px;
  width:28px;
  height:28px;
  border-radius:50%;
  background:#0F6E56;
  box-shadow:0 0 0 4px #EAF3F0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:700;
  font-size:14px;
}
.page-id-1259 .entry-content h3.hb-step-h + p{
  padding-left:44px !important;
  margin-top:10px !important;
}
/* ===== HB-CAP-20261022m END ===== */

/* ===== HB-CAP-20261022n START =====
   Sampling 段编号从 1 重新计数（独立于 6 步研发）
   ========================================== */
.page-id-1259 .entry-content h2#sampling-scale-up-protocol{
  counter-reset: hb-step;
}
/* ===== HB-CAP-20261022n END ===== */

/* ===== HB-CAP-20261022o START =====
   Sampling 段改用独立计数器 hb-sstep（Chromium 中 reset 不跨兄弟作用域）
   ========================================== */
.page-id-1259 .entry-content h2#sampling-scale-up-protocol ~ h3.hb-step-h{
  counter-increment: hb-sstep;
}
.page-id-1259 .entry-content h2#sampling-scale-up-protocol ~ h3.hb-step-h::before{
  content: counter(hb-sstep);
}
/* ===== HB-CAP-20261022o END ===== */

/* ===== HB-CAP-20261022p START =====
   Order Execution 段用独立计数器 hb-ostep（从 1 计数）
   ========================================== */
.page-id-1259 .entry-content h2#order-execution-change-control ~ h3.hb-step-h{
  counter-increment: hb-ostep;
}
.page-id-1259 .entry-content h2#order-execution-change-control ~ h3.hb-step-h::before{
  content: counter(hb-ostep);
}
/* ===== HB-CAP-20261022p END ===== */



/* ===== HB-CAP-20261022q2 START =====
   Capabilities 页 CTA：保留左右分栏，整体对齐主容器 1200px 居中、左右留白对称
   ========================================== */
.page-id-1259 .hb-cta-band{
  padding-left:20px !important;
  padding-right:20px !important;
}
.page-id-1259 .hb-cta-band .wp-block-columns{
  max-width:1200px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  width:100% !important;
}
/* ===== HB-CAP-20261022q2 END ===== */

/* ===== HB-CAP-20261022r START =====
   CTA 按钮在右栏内贴右对齐（与主容器右缘一致）
   ========================================== */
.page-id-1259 .hb-cta-band .wp-block-buttons{
  display:flex !important;
  justify-content:flex-end !important;
}
/* ===== HB-CAP-20261022r END ===== */

/* HB-CAP-20261022s: Capabilities page standalone section images - cap width/height, centered */
.page-id-1259 .entry-content > figure.wp-block-image.size-large:not(.hb-cap4-img){
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}
.page-id-1259 .entry-content > figure.wp-block-image.size-large:not(.hb-cap4-img) img{
  width:100%;
  height:auto;
}

/* HB-CONTACT-20261023: Contact page content blocks (What Happens Next / channels / trust) */
.hb-contact-next{max-width:1200px;margin:40px auto 8px;padding:0 24px;}
.hb-contact-h2{text-align:center;margin-bottom:8px;}
.hb-contact-steps{gap:24px;margin-top:8px;}
.hb-contact-steps .wp-block-column{background:#F7F9F8;border:1px solid #E4EDE9;border-radius:14px;padding:24px 20px;text-align:center;}
.hb-contact-step-num{font-size:32px;font-weight:800;color:#0F6E56;line-height:1;margin-bottom:12px;letter-spacing:1px;}
.hb-contact-steps h3{font-size:16px;font-weight:700;color:#1a3a5c;margin-bottom:8px;}
.hb-contact-steps p:not(.hb-contact-step-num){font-size:13.5px;color:#6b7a8f;line-height:1.55;}

.hb-contact-channels{max-width:760px;margin:32px auto 8px;padding:0 24px;}
.hb-contact-channels .wp-block-column{background:#fff;border:1px solid #E4EDE9;border-radius:14px;padding:24px 22px;text-align:center;}
.hb-contact-channels h3{font-size:16px;font-weight:700;color:#0F6E56;margin-bottom:8px;}
.hb-contact-channels a{font-weight:600;color:#1a3a5c;text-decoration:none;}
.hb-contact-channels a:hover{color:#0F6E56;}
.hb-contact-channels p{font-size:13.5px;color:#6b7a8f;line-height:1.55;}

.hb-contact-trust{max-width:1200px;margin:28px auto 0;padding:0 24px;}
.hb-contact-trust p{font-size:13px;color:#6b7a8f;letter-spacing:.3px;}
@media(max-width:768px){
  .hb-contact-steps .wp-block-column,.hb-contact-channels .wp-block-column{margin-bottom:14px;}
}

/* HB-CONTACT-20261023b: spacing between banner and form heading */
.srfm-form-container-1218{padding-top:32px;}

/* HB-PROD-20261023: PRODUCTS 页主标题统一居中 + 首屏标题间距 */
.page-id-1257 .entry-content h2:not(.hb-duo-h2):not(.uagb-heading-text){text-align:center !important;}
.page-id-1257 .entry-content .wp-block-spectra-content[class*="spectra"][data-spectra]{text-align:center !important;}
.page-id-1257 .hb-title-section h2{margin-top:0 !important;margin-bottom:12px !important;text-align:center !important;}

/* HB-PROD-20261023b: 首屏 title-section 标题间距统一 56/24 */
.page-id-1257 .hb-title-section h2{margin-top:56px !important;margin-bottom:24px !important;}

/* HB-SVC-LINKS-20261023 — Capabilities 页 8 服务链接卡 */
.hb-svc4{margin-top:24px;row-gap:24px}
.hb-svc-col{background:#F6FAF9;border:1px solid #E2ECEA;border-radius:10px;padding:22px 20px}
.hb-svc-col h3{font-size:1.02rem;margin:0 0 8px !important}
.hb-svc-col h3 a{color:#0F6E56;text-decoration:none}
.hb-svc-col h3 a:hover{text-decoration:underline}
.hb-svc-col p{font-size:0.9rem;margin:0;color:#445}

/* HB-BREADCRUMB-20261023 — 全站面包屑 */
.hb-breadcrumb-wrap{max-width:1200px;margin:0 auto;padding:14px 20px 0;font-size:0.82rem}
.hb-breadcrumb a{color:#0F6E56;text-decoration:none}
.hb-breadcrumb a:hover{text-decoration:underline}
.hb-breadcrumb .separator{margin:0 6px;color:#999}

/* HB-PRODFILTER-20261023 — 产品归档页搜索框 + 剂型筛选 chips */
.hb-prod-filter{max-width:1200px;margin:0 auto 28px;padding:0 20px}
.hb-prod-search{display:flex;gap:8px;max-width:420px;margin-bottom:16px}
.hb-prod-search input[type="search"]{flex:1;padding:10px 14px;border:1px solid #D7E2DF;border-radius:8px;font-size:0.95rem}
.hb-prod-search input[type="search"]:focus{outline:none;border-color:#0F6E56;box-shadow:0 0 0 3px rgba(15,110,86,.12)}
.hb-prod-search button{background:#0F6E56;color:#fff;border:none;border-radius:8px;padding:0 18px;font-size:0.95rem;cursor:pointer}
.hb-prod-search button:hover{background:#0C5A47}
.hb-prod-chips{display:flex;flex-wrap:wrap;gap:10px}
.hb-chip{display:inline-block;padding:8px 16px;border:1px solid #D7E2DF;border-radius:999px;font-size:0.88rem;color:#334;text-decoration:none;transition:all .15s}
.hb-chip:hover{border-color:#0F6E56;color:#0F6E56}
.hb-chip.is-active{background:#0F6E56;color:#fff;border-color:#0F6E56}

/* HB-QC-20261023 — Quality & Compliance 总览页 4 卡 */
.hb-qc4{margin-top:20px;row-gap:20px}
.hb-qc-col{background:#F6FAF9;border:1px solid #E2ECEA;border-radius:10px;padding:24px 22px}
.hb-qc-col h3{font-size:1.05rem;margin:0 0 8px !important}
.hb-qc-col h3 a{color:#0F6E56;text-decoration:none}
.hb-qc-col h3 a:hover{text-decoration:underline}
.hb-qc-col p{font-size:0.92rem;margin:0;color:#445;line-height:1.55}

/* HB-QC-CRUMB-20261023 — QC 总览返回链接 */
.hb-qc-crumb{font-size:0.85rem;margin-bottom:18px}
.hb-qc-crumb a{color:#0F6E56;text-decoration:none}
.hb-qc-crumb a:hover{text-decoration:underline}

/* HB-BENEFIT-20261023 — 功效筛选两级 chips */
.hb-prod-chips--form{margin-bottom:10px;align-items:center}
.hb-prod-chips--benefit{border-top:1px dashed #E2ECEA;padding-top:12px;align-items:center}
.hb-chip-label{font-size:0.8rem;font-weight:600;color:#0F6E56;letter-spacing:.02em;text-transform:uppercase;margin-right:2px}

/* =========================================================================
   HB-SIDEBAR-20261024: 左侧边栏产品目录 + 爆品区
   Layout: left sidebar (hot picks + dosage-form tree) + right product grid
   ========================================================================= */

/* 主容器：flex 两列，左侧栏 280px，右侧自适应 */
.hubogen-catalog {
	display: flex;
	gap: 32px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 24px 20px 40px;
	align-items: flex-start;
}

.hubogen-catalog__side {
	flex: 0 0 280px;
	min-width: 0;
	position: sticky;
	top: 90px;
	align-self: flex-start;
	z-index: 40; /* 弹出二级面板不被右侧产品卡盖住 */
}

.hubogen-catalog__main {
	flex: 1 1 auto;
	min-width: 0;
}

/* 独立爆品页：通栏无侧栏 */
.hubogen-catalog--full {
	display: block;
}

/* 目录页 H1 压小（2026-10-24：剂型页标题过大） */
.hubogen-catalog .hubogen-products-header__title {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	line-height: 1.25;
	margin: 0 0 18px;
}

/* ---------- 爆品区侧栏入口（链接到 /hot-picks/） ---------- */
.hb-hot-entry {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 20px;
	padding: 14px 16px;
	background: #0F6E56;
	color: #fff;
	border-radius: 12px;
	text-decoration: none;
	font-size: 1rem;
	font-weight: 700;
	transition: background .15s;
}
.hb-hot-entry:hover {
	background: #0C5A47;
	color: #fff;
}
.hb-hot-entry__arrow {
	font-size: 1.3rem;
	line-height: 1;
}

/* ---------- 左侧树形目录（悬停弹出二级面板，对标国际站） ---------- */
.hb-cat-nav {
	background: #fff;
	border: 1px solid #E4ECE9;
	border-radius: 12px;
}
.hb-cat-nav__title {
	font-size: 0.82rem;
	font-weight: 700;
	color: #0F6E56;
	text-transform: uppercase;
	letter-spacing: .05em;
	margin: 0;
	padding: 14px 16px 10px;
	border-bottom: 1px solid #E4ECE9;
}
.hb-cat-tree {
	list-style: none;
	margin: 0;
	padding: 8px 0;
}
.hb-cat-tree__item {
	margin: 0;
	position: relative;
}
.hb-cat-tree__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 16px;
	font-size: 0.92rem;
	font-weight: 500;
	color: #334;
	text-decoration: none;
	transition: background .15s, color .15s;
}
.hb-cat-tree__link:hover {
	background: #F2F7F5;
	color: #0F6E56;
}
.hb-cat-tree__link--all {
	font-weight: 700;
	color: #0F6E56;
}
.hb-cat-tree__count {
	font-size: 0.76rem;
	color: #8AA39C;
	background: #EFF4F2;
	border-radius: 999px;
	padding: 1px 8px;
}
.hb-cat-tree__item.is-current > .hb-cat-tree__link {
	color: #C4362B;
	font-weight: 700;
}
/* 悬停弹出二级面板：一级右侧浮层，对标国际站 flyout */
.hb-cat-tree__sub {
	list-style: none;
	margin: 0;
	padding: 8px 0;
	background: #fff;
	border: 1px solid #E4ECE9;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(20,40,35,.14);
	min-width: 210px;
	position: absolute;
	left: calc(100% - 8px);
	top: -10px;
	display: none;
	z-index: 30;
}
.hb-cat-tree__item--has-children:hover > .hb-cat-tree__sub {
	display: block;
}
.hb-cat-tree__item--has-children > .hb-cat-tree__link::after {
	content: '\203A'; /* › 右箭头，提示可弹出 */
	margin-left: 4px;
	color: #8AA39C;
	font-size: 1rem;
}
.hb-cat-tree__subitem {
	margin: 0;
}
.hb-cat-tree__sublink {
	display: block;
	padding: 8px 18px;
	font-size: 0.88rem;
	color: #445;
	text-decoration: none;
	white-space: nowrap;
	transition: color .12s, background .12s;
}
.hb-cat-tree__sublink:hover {
	color: #0F6E56;
	background: #F2F7F5;
}
.hb-cat-tree__subitem.is-current > .hb-cat-tree__sublink {
	color: #0F6E56;
	font-weight: 600;
}

/* ---------- 搜索框（右侧主区顶部） ---------- */
.hb-prod-search {
	display: flex;
	gap: 8px;
	max-width: 420px;
	margin-bottom: 20px;
}
.hb-prod-search input[type="search"] {
	flex: 1;
	padding: 10px 14px;
	border: 1px solid #D7E2DF;
	border-radius: 8px;
	font-size: 0.95rem;
}
.hb-prod-search input[type="search"]:focus {
	outline: none;
	border-color: #0F6E56;
	box-shadow: 0 0 0 3px rgba(15,110,86,.12);
}
.hb-prod-search button {
	background: #0F6E56;
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 0 18px;
	font-size: 0.95rem;
	cursor: pointer;
}
.hb-prod-search button:hover {
	background: #0C5A47;
}

/* ---------- 响应式：窄屏侧栏折叠 ---------- */
@media (max-width: 900px) {
	.hubogen-catalog {
		flex-direction: column;
		gap: 20px;
	}
	.hubogen-catalog__side {
		flex: 1 1 auto;
		width: 100%;
		position: static;
	}
	/* 移动端：hover 不可用，二级面板回退为平铺 */
	.hb-cat-tree__sub {
		position: static;
		display: block;
		box-shadow: none;
		border: none;
		border-radius: 0;
		background: #FAFCFB;
		min-width: 0;
	}
	.hb-cat-tree__item--has-children > .hb-cat-tree__link::after {
		content: none;
	}
}

/* =========================================================================
   HB-CATWIDTH-20261024: 产品目录相关页加宽（突破 Astra 1200px）+ 产品网格 4 列
   对标国际站满屏 4 列布局，便于后续大批量上架产品。
   作用范围：产品归档 / 剂型 / 功效 / Hot Picks 页（不影响全站其它 1200px 页面）
   ========================================================================= */
body.post-type-archive-hubogen_product .ast-container,
body.tax-hubogen_dosage_form .ast-container,
body.tax-hubogen_benefit .ast-container,
body.page-template-page-hot-picks .ast-container {
	max-width: 1560px;
	padding-left: 24px;
	padding-right: 24px;
}

body.post-type-archive-hubogen_product .content-area,
body.tax-hubogen_dosage_form .content-area,
body.tax-hubogen_benefit .content-area,
body.page-template-page-hot-picks .content-area {
	width: 100%;
}

body.post-type-archive-hubogen_product .hubogen-catalog,
body.tax-hubogen_dosage_form .hubogen-catalog,
body.tax-hubogen_benefit .hubogen-catalog,
body.page-template-page-hot-picks .hubogen-catalog {
	max-width: 1560px;
}

/* 产品网格固定 4 列（主区够宽时） */
body.post-type-archive-hubogen_product .hubogen-products-grid,
body.tax-hubogen_dosage_form .hubogen-products-grid,
body.tax-hubogen_benefit .hubogen-products-grid,
body.page-template-page-hot-picks .hubogen-products-grid {
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

/* 中屏回退 3 列 */
@media (max-width: 1200px) {
	body.post-type-archive-hubogen_product .hubogen-products-grid,
	body.tax-hubogen_dosage_form .hubogen-products-grid,
	body.tax-hubogen_benefit .hubogen-products-grid,
	body.page-template-page-hot-picks .hubogen-products-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* 移动端降列：中屏 2 列、小屏 1 列（高特异性匹配，覆盖上面固定 3 列） */
@media (max-width: 768px) {
	body.post-type-archive-hubogen_product .hubogen-products-grid,
	body.tax-hubogen_dosage_form .hubogen-products-grid,
	body.tax-hubogen_benefit .hubogen-products-grid,
	body.page-template-page-hot-picks .hubogen-products-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}
}
@media (max-width: 544px) {
	body.post-type-archive-hubogen_product .hubogen-products-grid,
	body.tax-hubogen_dosage_form .hubogen-products-grid,
	body.tax-hubogen_benefit .hubogen-products-grid,
	body.page-template-page-hot-picks .hubogen-products-grid {
		grid-template-columns: 1fr;
	}
}

/* ============ HB-PAGINATION-20261024 产品目录分页（数字页码+Go to Page） ============ */
.hb-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 28px 0 8px;
}
.hb-pagination__num,
.hb-pagination__arrow,
.hb-pagination__dots {
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8e6;
  border-radius: 8px;
  background: #fff;
  color: #1f2937;
  font-size: 0.95rem;
  text-decoration: none;
  line-height: 1;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.hb-pagination__arrow { font-size: 1.15rem; padding: 0 6px; }
.hb-pagination__dots { border: none; background: transparent; min-width: 20px; }
a.hb-pagination__num:hover,
a.hb-pagination__arrow:hover {
  border-color: #0F6E56;
  color: #0F6E56;
  background: #f2faf7;
}
.hb-pagination__num.is-current {
  background: #0F6E56;
  border-color: #0F6E56;
  color: #fff;
  font-weight: 600;
}
.hb-pagination__goto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 14px;
  font-size: 0.9rem;
  color: #4b5563;
}
.hb-pagination__goto input {
  width: 58px;
  height: 36px;
  border: 1px solid #e2e8e6;
  border-radius: 8px;
  text-align: center;
  font-size: 0.95rem;
  -moz-appearance: textfield;
}
.hb-pagination__goto input::-webkit-outer-spin-button,
.hb-pagination__goto input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hb-pagination__goto input:focus { outline: none; border-color: #0F6E56; }
.hb-pagination__goto button {
  height: 36px;
  padding: 0 16px;
  border: 1px solid #0F6E56;
  border-radius: 999px;
  background: #0F6E56;
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.hb-pagination__goto button:hover { background: #0c5a47; }
@media (max-width: 640px) {
  .hb-pagination__goto { margin-left: 0; width: 100%; justify-content: center; }
}

/* ============ HB-DOSAGE-COPY-20261024 剂型长文视觉优化（lead/规格卡/FAQ折叠） ============ */
.hb-dosage-body .hb-lead {
  font-size: 17px;
  line-height: 1.7;
  color: #1f2937;
  background: #f2faf7;
  border-left: 4px solid #0F6E56;
  padding: 14px 18px;
  border-radius: 8px;
  margin-bottom: 22px;
}
.hb-dosage-body .hb-spec-grid {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.hb-dosage-body .hb-spec-grid li {
  margin: 0;
  padding: 12px 14px;
  background: #f8faf9;
  border: 1px solid #e8efec;
  border-radius: 10px;
  font-size: 14.5px;
  line-height: 1.55;
}
.hb-dosage-body .hb-spec-grid li strong {
  display: block;
  color: #0F6E56;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 3px;
}
.hb-dosage-body .hb-faq {
  border: 1px solid #e8efec;
  border-radius: 10px;
  margin: 0 0 10px;
  background: #fff;
  overflow: hidden;
}
.hb-dosage-body .hb-faq summary {
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 600;
  color: #1f2937;
  list-style: none;
  position: relative;
  padding-right: 40px;
}
.hb-dosage-body .hb-faq summary::-webkit-details-marker { display: none; }
.hb-dosage-body .hb-faq summary::after {
  content: +;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #0F6E56;
  transition: transform 0.2s ease;
}
.hb-dosage-body .hb-faq[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.hb-dosage-body .hb-faq p {
  margin: 0;
  padding: 0 18px 16px;
  font-size: 15px;
  color: #44546a;
}
.hb-dosage-body .hb-disclaimer {
  font-size: 12.5px;
  color: #8a8f98;
  border-top: 1px solid #eef2f0;
  padding-top: 16px;
  margin-top: 24px;
}
@media (max-width: 767px) {
  .hb-dosage-body .hb-spec-grid { grid-template-columns: 1fr; }
}

/* HB-PROD-SPEC-TABLE-20261024: 产品详情页正文规格表（对齐 hero 规格框视觉） */
.entry-content table.hb-spec{width:100%;max-width:1040px;margin:20px auto 26px;border-collapse:collapse;background:#f8f9f7;border-radius:8px;overflow:hidden;}
.entry-content table.hb-spec tr{border-bottom:1px solid #e8e8e4;}
.entry-content table.hb-spec tr:last-child{border-bottom:none;}
.entry-content table.hb-spec th{width:220px;text-align:left;padding:11px 18px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#6b7a6e;vertical-align:top;}
.entry-content table.hb-spec td{padding:11px 18px;font-size:14.5px;color:#2d3a33;line-height:1.55;}
@media(max-width:640px){.entry-content table.hb-spec th{width:130px;}.entry-content table.hb-spec th,.entry-content table.hb-spec td{padding:9px 12px;}}

/* HB-HIDE-ENTRY-TITLE-20261024: 制造类 6 子页隐藏 Astra 默认 entry-title（改由 banner 图内标题承接 H1） */
.page-id-1573 .entry-title,
.page-id-1574 .entry-title,
.page-id-1575 .entry-title,
.page-id-1576 .entry-title,
.page-id-1578 .entry-title,
.page-id-1579 .entry-title,
.page-id-1573 .entry-header,
.page-id-1574 .entry-header,
.page-id-1575 .entry-header,
.page-id-1576 .entry-header,
.page-id-1578 .entry-header,
.page-id-1579 .entry-header,
.page-id-3919 .entry-header{display:none;}
.page-id-1573 .ast-article-single,
.page-id-1574 .ast-article-single,
.page-id-1575 .ast-article-single,
.page-id-1576 .ast-article-single,
.page-id-1578 .ast-article-single,
.page-id-1579 .ast-article-single,
.page-id-3919 .ast-article-single{padding-top:0 !important;}
/* HB-HIDE-ENTRY-TITLE-QC3-20261024: Quality & Compliance 3 子页同步模板修复 */
.page-id-1577 .entry-title,
.page-id-1580 .entry-title,
.page-id-1581 .entry-title,
.page-id-3919 .entry-title,
.page-id-1614 .entry-title,
.page-id-1577 .entry-header,
.page-id-1580 .entry-header,
.page-id-1581 .entry-header{display:none;}
.page-id-1577 .ast-article-single,
.page-id-1580 .ast-article-single,
.page-id-1581 .ast-article-single{padding-top:0 !important;}
.page-id-1577 .hb-qc-crumb,
.page-id-1580 .hb-qc-crumb,
.page-id-1581 .hb-qc-crumb{display:none;}

/* HB-BANNER-FULL-20261024: 9个导航子页 banner 按图片比例2.357:1完整显示，无裁切无蒙层 */
.page-id-1573 .wp-block-cover,
.page-id-1574 .wp-block-cover,
.page-id-1575 .wp-block-cover,
.page-id-1576 .wp-block-cover,
.page-id-1577 .wp-block-cover,
.page-id-1578 .wp-block-cover,
.page-id-1579 .wp-block-cover,
.page-id-1580 .wp-block-cover,
.page-id-1581 .wp-block-cover,
.page-id-10 .wp-block-cover, .page-id-3919 .wp-block-cover{
    min-height:auto !important;
    aspect-ratio:2.357/1 !important;
    background-size:cover !important;
    background-position:center !important;
}

/* HB-BANNER-NOSCRIM-20261024: 9个导航子页去掉全局深蓝scrim（用户定案：不要蒙层），图原色完整显示 */
.page-id-1573 .wp-block-cover.alignfull::before,
.page-id-1574 .wp-block-cover.alignfull::before,
.page-id-1575 .wp-block-cover.alignfull::before,
.page-id-1576 .wp-block-cover.alignfull::before,
.page-id-1577 .wp-block-cover.alignfull::before,
.page-id-1578 .wp-block-cover.alignfull::before,
.page-id-1579 .wp-block-cover.alignfull::before,
.page-id-1580 .wp-block-cover.alignfull::before,
.page-id-1581 .wp-block-cover.alignfull::before,
.page-id-10 .wp-block-cover.alignfull::before, .page-id-3919 .wp-block-cover.alignfull::before{
    content:none !important;
}
/* 去蒙层后白字压亮图不可读：文字改品牌深蓝，副文加浅色胶囊（亮图反色适配） */
.page-id-1573 .wp-block-cover .wp-block-cover__inner-container h1,
.page-id-1574 .wp-block-cover .wp-block-cover__inner-container h1,
.page-id-1575 .wp-block-cover .wp-block-cover__inner-container h1,
.page-id-1576 .wp-block-cover .wp-block-cover__inner-container h1,
.page-id-1577 .wp-block-cover .wp-block-cover__inner-container h1,
.page-id-1578 .wp-block-cover .wp-block-cover__inner-container h1,
.page-id-1579 .wp-block-cover .wp-block-cover__inner-container h1,
.page-id-1580 .wp-block-cover .wp-block-cover__inner-container h1,
.page-id-1581 .wp-block-cover .wp-block-cover__inner-container h1,
.page-id-10 .wp-block-cover .wp-block-cover__inner-container h1, .page-id-3919 .wp-block-cover .wp-block-cover__inner-container h1{
    color:#012851 !important;
    text-shadow:0 1px 6px rgba(255,255,255,.55);
}
.page-id-1573 .wp-block-cover .wp-block-cover__inner-container p,
.page-id-1574 .wp-block-cover .wp-block-cover__inner-container p,
.page-id-1575 .wp-block-cover .wp-block-cover__inner-container p,
.page-id-1576 .wp-block-cover .wp-block-cover__inner-container p,
.page-id-1577 .wp-block-cover .wp-block-cover__inner-container p,
.page-id-1578 .wp-block-cover .wp-block-cover__inner-container p,
.page-id-1579 .wp-block-cover .wp-block-cover__inner-container p,
.page-id-1580 .wp-block-cover .wp-block-cover__inner-container p,
.page-id-1581 .wp-block-cover .wp-block-cover__inner-container p,
.page-id-10 .wp-block-cover .wp-block-cover__inner-container p, .page-id-3919 .wp-block-cover .wp-block-cover__inner-container p{
    color:#012851 !important;
    text-shadow:none;
    background:rgba(255,255,255,.78);
    padding:5px 16px;
    border-radius:999px;
    display:table;
    width:fit-content;
    margin:0 auto;
}

/* HB-PAGE10-GAP-20261024: News页压缩面包屑与banner间80px空带 */
.page-id-10 .ast-article-single{padding-top:0 !important;}

/* HB-PAGE10-GAP2-20261024: cover块45px上下padding造成banner顶部空带，去padding（内容inner居中） */
.page-id-10 .wp-block-cover{padding-top:0 !important;padding-bottom:0 !important;}

/* HB-PAGE10-GAP3-20261024: content-area 60px margin-top 是空带真凶，压缩为0 */
.page-id-10 .content-area{margin-top:0 !important;}

/* HB-GAP-ALL-20261024: 全部cover页统一压缩content-area 60px margin-top空带（与page10一致） */
.page-id-1573 .content-area,
.page-id-1574 .content-area,
.page-id-1575 .content-area,
.page-id-1576 .content-area,
.page-id-1577 .content-area,
.page-id-1578 .content-area,
.page-id-1579 .content-area,
.page-id-1580 .content-area,
.page-id-1581 .content-area,
.page-id-3919 .content-area{margin-top:0 !important;}

/* HB-H2ALIGN-20261024: 9 服务页 H2 统一居中 + 上下间距（对齐 Capabilities/products 页定案 56px/24px） */
.page-id-1573 .entry-content h2.wp-block-heading,
.page-id-1574 .entry-content h2.wp-block-heading,
.page-id-1575 .entry-content h2.wp-block-heading,
.page-id-1576 .entry-content h2.wp-block-heading,
.page-id-1577 .entry-content h2.wp-block-heading,
.page-id-1578 .entry-content h2.wp-block-heading,
.page-id-1579 .entry-content h2.wp-block-heading,
.page-id-1580 .entry-content h2.wp-block-heading,
.page-id-1581 .entry-content h2.wp-block-heading{text-align:center !important;margin-top:56px !important;margin-bottom:24px !important;}
.page-id-3919 .entry-content h2.wp-block-heading{text-align:center !important;margin-top:56px !important;margin-bottom:24px !important;}

/* HB-1576-HALO-20261024: 1576 底图全站最亮，深蓝 H1 对比度不足；单页加白光晕加强可读性（不加蒙层，维持 NOSCRIM 定案） */
.page-id-1576 .wp-block-cover .wp-block-cover__inner-container h1{
    text-shadow:0 1px 4px rgba(255,255,255,.95),0 0 18px rgba(255,255,255,.85),0 0 36px rgba(255,255,255,.65) !important;
}

/* HB-COLS-FLEX-20261026: 部分页面(1577)未加载 WP 核心 columns flex 规则，列塌成堆叠、卡图占满整行(910px)。镜像 WP 核心默认值修复 */
.entry-content .wp-block-columns{display:flex;flex-wrap:wrap;align-items:normal;gap:32px;}
.entry-content .wp-block-columns>.wp-block-column{flex-grow:1;min-width:0;}
@media(max-width:781px){.entry-content .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column{flex-basis:100%!important;}}

/* HB-P10-NEWS-20261026: news 页双 H1 隐藏 + H2 居中对齐（对齐 3919/9服务页定案） */
.page-id-10 .entry-header{display:none !important;}
.page-id-10 .entry-title{display:none !important;}
.page-id-10 .entry-content h2.wp-block-heading{text-align:center !important;margin-top:56px !important;margin-bottom:24px !important;}

/* HB-POST-TITLE-20261026: 博客文章页 H1 过大(70px/uppercase/98px 行高)，压到与正文 H2 协调的 34px */
.single-post .entry-content h1,
.single-post .ast-article-single h1{
  font-size:34px !important;
  line-height:1.25 !important;
  margin-top:0 !important;
  margin-bottom:16px !important;
}

/* HB-FAQ-20261026: FAQ 页(1585) entry-title 隐藏(正文 DUO-A 已有 H2 标题) + H2 居中 56/24 */
.page-id-1585 .entry-content h2.wp-block-heading:not(.hb-duo-h2){text-align:center !important;margin-top:56px !important;margin-bottom:24px !important;}

/* HB-GLOSSARY-20261026: Glossary 页(2396) H2 居中 56/24（排除 hb-duo-h2 栏内标题与 uagb 表单标题），隐藏空 entry-header */
.page-id-2396 .entry-header{display:none !important;}
.page-id-2396 .entry-content h2.wp-block-heading:not(.hb-duo-h2){text-align:center !important;margin-top:56px !important;margin-bottom:24px !important;}

/* HB-MARKETS-20261026: markets 页(2650) H2 居中 56/24（排除 hb-duo-h2 图文块栏内标题与 uagb 表单标题） */
.page-id-2650 .entry-content h2.wp-block-heading:not(.hb-duo-h2){text-align:center !important;margin-top:56px !important;margin-bottom:24px !important;}

/* HB-APPGRID-20261026: applications 页(2651) 12 类功效卡片网格 + 中等 hero + 反链样式 */
.hb-appgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:1140px;margin:40px auto 0;padding:0 24px;}
.hb-app{background:#fff;border:1px solid #E3EBE7;border-radius:14px;padding:0 0 22px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s ease,transform .2s ease;}
.hb-app:hover{box-shadow:0 10px 28px rgba(15,110,86,.12);transform:translateY(-2px);}
.hb-app-img{aspect-ratio:3/2;background:linear-gradient(135deg,#E8F1EE,#D5E6E0);display:flex;align-items:center;justify-content:center;}
.hb-app-img span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#5B7A70;}
.hb-app h3{font-size:20px;line-height:1.3;margin:18px 22px 8px;}
.hb-app h3 a{color:#123B31;text-decoration:none;}
.hb-app h3 a:hover{color:#0F6E56;}
.hb-app .hb-ing{font-size:13px;color:#0F6E56;margin:0 22px 10px;font-weight:600;}
.hb-app p:not(.hb-ing){font-size:14px;color:#46564F;margin:0 22px;line-height:1.6;}
.hb-app p:last-child{margin-bottom:0;}
.hb-hero-mid .wp-block-cover__inner-container{max-width:1140px;margin:0 auto;text-align:center;}
.hb-hero-mid h1{color:#fff;font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.15;margin-bottom:16px;}
.hb-hero-mid p.wp-block-paragraph:not(.hb-eyebrow){color:#DCE9E4;font-size:18px;max-width:820px;margin:0 auto;line-height:1.6;}
.hb-eyebrow--light{color:#9DC4B8;}
.hb-backlink{margin-bottom:20px;}
.hb-backlink a{color:#0F6E56;text-decoration:none;font-size:15px;font-weight:600;}
.hb-backlink a:hover{text-decoration:underline;}
.page-id-2651 .entry-content h2.wp-block-heading:not(.hb-duo-h2){text-align:center !important;margin-top:56px !important;margin-bottom:24px !important;}
@media(max-width:900px){.hb-appgrid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.hb-appgrid{grid-template-columns:1fr;}}

/* HB-APP-SUB-20261026: 12 个功效应用子页隐藏 entry-header（防双 H1，正文 H1 为唯一 H1） */
.page-id-2380 .entry-header,.page-id-2382 .entry-header,.page-id-2383 .entry-header,.page-id-2384 .entry-header,.page-id-2385 .entry-header,.page-id-2386 .entry-header,.page-id-3983 .entry-header,.page-id-3984 .entry-header,.page-id-3985 .entry-header,.page-id-3986 .entry-header,.page-id-3987 .entry-header,.page-id-3988 .entry-header{display:none !important;}
.page-id-2380 h1.entry-title,.page-id-2382 h1.entry-title,.page-id-2383 h1.entry-title,.page-id-2384 h1.entry-title,.page-id-2385 h1.entry-title,.page-id-2386 h1.entry-title,.page-id-3983 h1.entry-title,.page-id-3984 h1.entry-title,.page-id-3985 h1.entry-title,.page-id-3986 h1.entry-title,.page-id-3987 h1.entry-title,.page-id-3988 h1.entry-title{display:none !important;}

/* HB-TAGCLOUD-20261026: applications 页胶囊标签云（More Applications + Key Ingredients） */
.hb-tagcloud{max-width:1140px;margin:48px auto 0;padding:0 24px;}
.hb-tagcloud h2{font-size:26px !important;color:#123B31 !important;margin:0 0 8px !important;}
.hb-tagcloud .hb-tagcloud-h2{margin-top:40px !important;}
.hb-tagcloud-sub{font-size:15px;color:#46564F;text-align:center;margin:0 0 20px;}
.hb-tags{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
.hb-tag{display:inline-flex;align-items:center;padding:10px 20px;border-radius:999px;border:1.5px solid #C9DED6;background:#fff;color:#0F6E56;font-size:14px;font-weight:600;text-decoration:none;transition:all .2s ease;}
.hb-tag:hover{border-color:#0F6E56;background:#0F6E56;color:#fff;transform:translateY(-1px);}
.hb-tag--hot{background:#0F6E56;color:#fff;border-color:#0F6E56;}
.hb-tag--hot:hover{background:#0B5945;border-color:#0B5945;}
.hb-tag--static{cursor:default;background:#F4F7F5;color:#7A8A82;border-color:#E2EBE6;pointer-events:none;}
.hb-tagcloud-foot{text-align:center;font-size:15px;color:#46564F;margin-top:24px;}
.hb-tagcloud-foot a{color:#0F6E56;font-weight:600;}
.page-id-3989 .entry-header{display:none !important;}
.page-id-3989 h1.entry-title{display:none !important;}
.page-id-3989 .entry-content h2.wp-block-heading:not(.hb-duo-h2){text-align:center !important;margin-top:56px !important;margin-bottom:24px !important;}

/* HB-APP-IMG-20261026: applications 12卡场景图 + hero 背景 */
.hb-app-img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.hb-hero-mid{background-image:url('https://huibojian.com/wp-content/uploads/2026/10/hb-app-hero.webp');background-size:cover;background-position:center;}
.hb-hero-mid .hb-eyebrow--light{color:#8FD4BC !important;}
.hb-hero-mid p.wp-block-paragraph:not(.hb-eyebrow){color:#FFFFFF !important;text-shadow:0 1px 3px rgba(10,40,34,.6);}

/* HB-APP-CLICK-20261026: 12卡整卡可点击 */
.hb-app{position:relative;}
.hb-app h3 a::after{content:"";position:absolute;inset:0;z-index:1;}


/* HB-APP-INGREDIENT-FIX-20261030: 恢复绿字成分链接可点击，浮到整卡覆盖层之上 */
.hb-app .hb-ing a{position:relative;z-index:2;}
.hb-app .hb-ing a:hover{color:#0F6E56;text-decoration:underline;}
/* HB-HERO-FULL-20261026: applications hero 贴顶满宽 + 亮图浅遮罩 */
.page-id-2651 .content-area.primary{margin-top:0 !important;}
.page-id-2651 article.page{padding-top:0 !important;}
.page-id-2651 .hb-breadcrumb-wrap{display:none !important;}
.page-id-2651 .hb-hero-mid{width:100vw !important;max-width:100vw !important;margin-left:calc(50% - 50vw) !important;margin-right:calc(50% - 50vw) !important;}

/* HB-HERO-NOOVERLAY-20261026: 移除有色遮罩，纯亮图+白字投影 */
.page-id-2651 .hb-hero-mid{background-image:url("https://huibojian.com/wp-content/uploads/2026/10/hb-app-hero.webp") !important;}

/* HB-HERO-BREADCRUMB-20261026: 恢复 applications 面包屑 */
.page-id-2651 .hb-breadcrumb-wrap{display:block !important;}

/* HB-HERO-BGCOLOR-FIX-20261026: 清掉 wp:cover 内联深墨绿底色 */
.page-id-2651 .hb-hero-mid{background-color:transparent !important;}

/* HB-HERO-SCRIM-FIX-20261026: applications 页禁用全站 cover 深蓝 scrim（首页保留） */
.page-id-2651 .hb-hero-mid.alignfull::before{display:none !important;}

/* HB-HERO-DARKTEXT-20261026: 亮图配深字（白字压浅木底不可读） */
.page-id-2651 .hb-hero-mid h1{color:#123B31 !important;text-shadow:none !important;}
.page-id-2651 .hb-hero-mid p.wp-block-paragraph:not(.hb-eyebrow){color:#1E4A40 !important;text-shadow:none !important;}
.page-id-2651 .hb-hero-mid .hb-eyebrow--light{color:#0F6E56 !important;}

/* HB-HERO-CARDBOX-20261026: 文字区白色半透明卡底（亮图+白卡+深字定案） */
.page-id-2651 .hb-hero-mid .wp-block-cover__inner-container{background:rgba(255,255,255,.88);border-radius:14px;padding:36px 48px;max-width:900px;box-shadow:0 4px 24px rgba(20,50,44,.08);}

/* HB-HERO-CARDBOX-FROST-20261026: 白卡调磨砂玻璃（透明度60%+模糊透木纹） */
.page-id-2651 .hb-hero-mid .wp-block-cover__inner-container{background:rgba(255,255,255,.60) !important;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}

/* HB-INGREF-20261026: 成分库引导条 */
.hb-ingref{max-width:1140px;margin:0 auto;padding:18px 28px;border:1px solid #D5E6E0;border-radius:12px;background:#F0F7F4;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.hb-ingref span{color:#123B31;font-weight:600;font-size:16px;}
.hb-ingref a{display:inline-block;background:#0F6E56;color:#fff !important;padding:10px 20px;border-radius:8px;text-decoration:none;font-weight:600;font-size:15px;}

/* ===== markets 页 banner 遮罩豁免（2026-10-27，防 ::before 深蓝 scrim 覆盖） ===== */
.page-id-2650 .wp-block-cover.alignfull::before{content:none !important;}
.page-id-2650 .content-area.primary{margin-top:0 !important;}
.page-id-2650 article.page{padding-top:0 !important;}
.page-id-2650 .wp-block-cover.alignfull{width:100vw !important;max-width:100vw !important;margin-left:calc(50% - 50vw) !important;margin-right:calc(50% - 50vw) !important;}
.page-id-2650 .wp-block-cover h1{text-shadow:0 2px 14px rgba(0,0,0,.45) !important;}
.page-id-2650 .wp-block-cover p{text-shadow:0 2px 12px rgba(0,0,0,.5) !important;}

/* HB-ING-HERO-20261027: multivitamin(2550) 成分页 420px banner，对齐服务页 hero 模式（去scrim+深蓝标题+白胶囊副文+压空带） */
.page-id-2550 .wp-block-cover.alignfull::before{content:none !important;}
.page-id-2550 .wp-block-cover .wp-block-cover__inner-container h1{color:#012851 !important;text-shadow:0 1px 6px rgba(255,255,255,.55);}
.page-id-2550 .wp-block-cover .wp-block-cover__inner-container p{color:#012851 !important;text-shadow:none;background:rgba(255,255,255,.78);padding:5px 16px;border-radius:999px;display:table;width:fit-content;margin:0 auto;}
.page-id-2550 .content-area{margin-top:0 !important;}

/* ==========================================================================
   HB-FIX-20261027-hero-bleed: 内页成分页 hero（hb-ing-hero）满宽 + 禁 dim 覆盖
   用户定案 2026-10-27：banner 一律不加任何遮罩覆盖层（scrim/dim 全禁）
   ========================================================================== */
.wp-block-cover.alignfull.hb-ing-hero{position:relative;left:50%;transform:translateX(-50%);width:100vw !important;max-width:100vw !important;margin-left:0 !important;margin-right:0 !important;height:420px !important;min-height:420px !important;max-height:420px !important;align-items:center !important;background-size:cover !important;background-repeat:no-repeat !important;background-position:center center !important;}
@media (max-width:768px){.wp-block-cover.alignfull.hb-ing-hero{height:300px !important;min-height:300px !important;max-height:300px !important;}}
/* 全局禁用 cover 的 dim 覆盖 span（has-background-dim），防止以后插 banner 再出现覆盖层 */
.wp-block-cover .wp-block-cover__background.has-background-dim{display:none !important;}

/* HB-FIX-20261027-hero-topgap: hero 页 banner 贴面包屑，去掉 Astra article 顶 padding 与面包屑下距 */
.page-id-2550 .ast-article-single{padding-top:0 !important;}
.page-id-2550 .hb-breadcrumb-wrap{margin-bottom:0 !important;}

.page-id-1587 .entry-content h2.wp-block-heading:not(.hb-duo-h2){text-align:center;margin-top:56px;margin-bottom:24px}

.hb-ing-hero .hb-ing-hero-title{text-align:center;}
.hb-ing-hero .hb-ing-hero-sub{text-align:center;}

.hb-feat-5{grid-template-columns:repeat(3,1fr);}
@media (max-width:1024px){.hb-feat-5{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.hb-feat-5{grid-template-columns:1fr;}}

.page-id-1586 .entry-content h2.wp-block-heading:not(.hb-duo-h2){text-align:center;margin-top:56px;margin-bottom:24px}

/* HB-FIX-20261028-hero-pad: 含 hb-ing-hero banner 的页面清顶 padding + 面包屑贴紧 + 副文白字 */
.ast-article-single:has(.hb-ing-hero){padding-top:0 !important;}
.ast-breadcrumbs:has(+ .ast-article-single .hb-ing-hero){margin-bottom:0;}
.hb-ing-hero .hb-ing-hero-sub{color:#fff !important;text-shadow:0 2px 6px rgba(0,0,0,.85),0 0 16px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.7);}
.hb-ing-hero .hb-ing-hero-title{text-shadow:0 2px 6px rgba(0,0,0,.85),0 0 16px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.7);}

/* HB-FIX-20261028-primary: 含 hb-ing-hero 的页面清 #primary 上边距，banner 贴面包屑 */

/* HB-FIX-20261028-primary: 含 hb-ing-hero 的页面清 #primary 上边距，banner 贴面包屑 */
#primary:has(.hb-ing-hero){margin-top:0 !important;}

/* HB-FIX-20261028-crumb: 含 hero 页面面包屑下边距归零 + site-content 贴紧，消除 banner 上残留白边 */
body:has(.hb-ing-hero) .hb-breadcrumb-wrap{padding-bottom:0;margin-bottom:0;}
body:has(.hb-ing-hero) .site-content{margin-top:0;}

.page-id-1588 .entry-content h2.wp-block-heading:not(.hb-duo-h2){text-align:center;margin-top:56px;margin-bottom:24px}

.page-id-1589 .entry-content h2.wp-block-heading:not(.hb-duo-h2){text-align:center;margin-top:56px;margin-bottom:24px}
.page-id-2414 .entry-content h2.wp-block-heading:not(.hb-duo-h2){text-align:center;margin-top:56px;margin-bottom:24px}
.page-id-2415 .entry-content h2.wp-block-heading:not(.hb-duo-h2){text-align:center;margin-top:56px;margin-bottom:24px}
.page-id-2416 .entry-content h2.wp-block-heading:not(.hb-duo-h2){text-align:center;margin-top:56px;margin-bottom:24px}

/* HB-FIX-20261028-ingredient-20pages: 20 个成分页 H2 居中 */
.page-id-2417 .entry-content h2.wp-block-heading:not(.hb-duo-h2){text-align:center;margin-top:56px;margin-bottom:24px}
.page-id-2418 .entry-content h2.wp-block-heading:not(.hb-duo-h2){text-align:center;margin-top:56px;margin-bottom:24px}
.page-id-2419 .entry-content h2.wp-block-heading:not(.hb-duo-h2){text-align:center;margin-top:56px;margin-bottom:24px}
.page-id-2420 .entry-content h2.wp-block-heading:not(.hb-duo-h2){text-align:center;margin-top:56px;margin-bottom:24px}
.page-id-2421 .entry-content h2.wp-block-heading:not(.hb-duo-h2){text-align:center;margin-top:56px;margin-bottom:24px}
.page-id-2422 .entry-content h2.wp-block-heading:not(.hb-duo-h2){text-align:center;margin-top:56px;margin-bottom:24px}
.page-id-2423 .entry-content h2.wp-block-heading:not(.hb-duo-h2){text-align:center;margin-top:56px;margin-bottom:24px}
.page-id-2424 .entry-content h2.wp-block-heading:not(.hb-duo-h2){text-align:center;margin-top:56px;margin-bottom:24px}
.page-id-2425 .entry-content h2.wp-block-heading:not(.hb-duo-h2){text-align:center;margin-top:56px;margin-bottom:24px}
.page-id-2426 .entry-content h2.wp-block-heading:not(.hb-duo-h2){text-align:center;margin-top:56px;margin-bottom:24px}
.page-id-2548 .entry-content h2.wp-block-heading:not(.hb-duo-h2){text-align:center;margin-top:56px;margin-bottom:24px}
.page-id-2549 .entry-content h2.wp-block-heading:not(.hb-duo-h2){text-align:center;margin-top:56px;margin-bottom:24px}
.page-id-2551 .entry-content h2.wp-block-heading:not(.hb-duo-h2){text-align:center;margin-top:56px;margin-bottom:24px}
.page-id-2552 .entry-content h2.wp-block-heading:not(.hb-duo-h2){text-align:center;margin-top:56px;margin-bottom:24px}
.page-id-3835 .entry-content h2.wp-block-heading:not(.hb-duo-h2){text-align:center;margin-top:56px;margin-bottom:24px}
.page-id-4094 .entry-content h2.wp-block-heading:not(.hb-duo-h2){text-align:center;margin-top:56px;margin-bottom:24px}
.page-id-4095 .entry-content h2.wp-block-heading:not(.hb-duo-h2){text-align:center;margin-top:56px;margin-bottom:24px}
.page-id-4096 .entry-content h2.wp-block-heading:not(.hb-duo-h2){text-align:center;margin-top:56px;margin-bottom:24px}
.page-id-4097 .entry-content h2.wp-block-heading:not(.hb-duo-h2){text-align:center;margin-top:56px;margin-bottom:24px}
.page-id-4098 .entry-content h2.wp-block-heading:not(.hb-duo-h2){text-align:center;margin-top:56px;margin-bottom:24px}

/* HB-FIX-20261028-feat4: 4 卡 Formats 用 2x2 网格，消除 3+1 换行留白 */
.hb-feat-4{grid-template-columns:repeat(2,1fr);}
@media (max-width:640px){.hb-feat-4{grid-template-columns:1fr;}}

/* HB-FIX-20261028-功效页H2: 正文H2居中+上下间距(56/24)，hero图文区的duo-h2保持左对齐 */
.page-id-2380 .entry-content h2.wp-block-heading:not(.hb-duo-h2),
.page-id-2382 .entry-content h2.wp-block-heading:not(.hb-duo-h2),
.page-id-2383 .entry-content h2.wp-block-heading:not(.hb-duo-h2),
.page-id-2384 .entry-content h2.wp-block-heading:not(.hb-duo-h2),
.page-id-2385 .entry-content h2.wp-block-heading:not(.hb-duo-h2),
.page-id-2386 .entry-content h2.wp-block-heading:not(.hb-duo-h2),
.page-id-3983 .entry-content h2.wp-block-heading:not(.hb-duo-h2),
.page-id-3984 .entry-content h2.wp-block-heading:not(.hb-duo-h2),
.page-id-3985 .entry-content h2.wp-block-heading:not(.hb-duo-h2),
.page-id-3986 .entry-content h2.wp-block-heading:not(.hb-duo-h2),
.page-id-3987 .entry-content h2.wp-block-heading:not(.hb-duo-h2),
.page-id-3988 .entry-content h2.wp-block-heading:not(.hb-duo-h2),
.page-id-3989 .entry-content h2.wp-block-heading:not(.hb-duo-h2),
.page-id-4223 .entry-content h2.wp-block-heading:not(.hb-duo-h2),
.page-id-4224 .entry-content h2.wp-block-heading:not(.hb-duo-h2),
.page-id-4225 .entry-content h2.wp-block-heading:not(.hb-duo-h2){
  text-align:center !important;
  margin-top:56px !important;
  margin-bottom:24px !important;
}

/* HB-FIX-20261028-功效页H1: 正文H1居中(与成分页视觉一致)，上间距留白 */
.page-id-2380 .entry-content h1.wp-block-heading,
.page-id-2382 .entry-content h1.wp-block-heading,
.page-id-2383 .entry-content h1.wp-block-heading,
.page-id-2384 .entry-content h1.wp-block-heading,
.page-id-2385 .entry-content h1.wp-block-heading,
.page-id-2386 .entry-content h1.wp-block-heading,
.page-id-3983 .entry-content h1.wp-block-heading,
.page-id-3984 .entry-content h1.wp-block-heading,
.page-id-3985 .entry-content h1.wp-block-heading,
.page-id-3986 .entry-content h1.wp-block-heading,
.page-id-3987 .entry-content h1.wp-block-heading,
.page-id-3988 .entry-content h1.wp-block-heading,
.page-id-3989 .entry-content h1.wp-block-heading,
.page-id-4223 .entry-content h1.wp-block-heading,
.page-id-4224 .entry-content h1.wp-block-heading,
.page-id-4225 .entry-content h1.wp-block-heading{
  text-align:center !important;
}

/* HB-FIX-20261030-footer-spacing: 页脚各区块间距精简（公司介绍删后 100px 顶部留白过大） */
.site-footer .site-primary-footer-wrap{padding-top:40px;padding-bottom:24px;}
.site-footer .site-below-footer-wrap{padding-top:16px;}

/* ============================================================
 * HB-TEAM-20261030: 团队成员卡片展示样式
 * 用于联系页 [hb_team] shortcode 渲染的员工通讯录
 * ============================================================ */
.hb-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin: 24px 0;
}
.hb-team-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #ffffff;
    border: 1px solid #e5e9e7;
    border-radius: 12px;
    padding: 20px;
    transition: box-shadow .2s ease, transform .2s ease;
}
.hb-team-card:hover {
    box-shadow: 0 8px 24px rgba(15, 110, 86, .10);
    transform: translateY(-2px);
}
.hb-team-avatar {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: #f0f5f3;
}
.hb-team-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hb-team-info {
    flex: 1;
    min-width: 0;
}
.hb-team-name {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 700;
    color: #012851;
    line-height: 1.3;
}
.hb-team-role {
    margin: 0 0 2px;
    font-size: 14px;
    color: #0F6E56;
    font-weight: 600;
}
.hb-team-region {
    margin: 0 0 8px;
    font-size: 13px;
    color: #6b7a75;
}
.hb-team-contact {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}
.hb-team-contact a {
    color: #0F6E56;
    text-decoration: none;
}
.hb-team-contact a:hover {
    text-decoration: underline;
}
@media (max-width: 600px) {
    .hb-team-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== HB-PHONE-DROPDOWN-FIX-20261030: 修复 WhatsApp 电话区号下拉菜单深色/低对比问题 =====
   SureForms phone 组件内置深蓝 #012851 文字色，未跟随表单 teal 主题色，
   在部分环境/设备下对比度偏低，呈「深灰底深字」难以辨认。
   强制白底 + 深色高对比文字 + teal hover 高亮，统一品牌色。 */
.srfm-form .iti__country-list,
.srfm-form .iti__dropdown-content {
    background-color: #ffffff !important;
    border: 1px solid #E3EBE7 !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(15, 110, 86, 0.12) !important;
    color-scheme: light !important;
}
.srfm-form .iti__country-list .iti__country,
.srfm-form .iti__country {
    color: #123B31 !important;
    background-color: #ffffff !important;
}
.srfm-form .iti__country-list .iti__country .iti__country-name,
.srfm-form .iti__country .iti__country-name {
    color: #123B31 !important;
}
.srfm-form .iti__country-list .iti__country .iti__dial-code,
.srfm-form .iti__country .iti__dial-code {
    color: #46564F !important;
}
/* hover / 高亮：teal 浅底 + 深字 */
.srfm-form .iti__country-list .iti__country.iti__highlight,
.srfm-form .iti__country.iti__highlight,
.srfm-form .iti__country-list .iti__country.iti__active,
.srfm-form .iti__country.iti__active {
    background-color: #E8F1EE !important;
}
.srfm-form .iti__country-list .iti__country.iti__highlight .iti__country-name,
.srfm-form .iti__country.iti__highlight .iti__country-name,
.srfm-form .iti__country-list .iti__country.iti__active .iti__country-name,
.srfm-form .iti__country.iti__active .iti__country-name {
    color: #0F6E56 !important;
}
/* 搜索框 */
.srfm-form .iti__search-input,
.srfm-form input.iti__search-input {
    background-color: #ffffff !important;
    color: #123B31 !important;
    border: 1px solid #E3EBE7 !important;
    border-radius: 6px !important;
}
.srfm-form .iti__search-input::placeholder {
    color: #8AA39A !important;
}
/* 当前选中区号文字 */
.srfm-form .iti__selected-dial-code {
    color: #123B31 !important;
}

/* ===== HB-FORM-BTN-SPACING-20261030: 提交按钮贴底修复 =====
   SureForms 表单容器 .srfm-form-container 底部 padding 为 0，
   提交按钮贴到表单底部。加底部留白。 */
.srfm-form-container {
    padding-bottom: 32px !important;
}
/* =========================================================================
   HB-SIDEBAR-ING-20261103: 侧边栏改版 = Popular Ingredients 胶囊 + Dosage/Benefit 分组
   ========================================================================= */

/* 侧边栏 nav 之间间距（爆品区下方，多 nav 分组） */
.hb-cat-sidebar .hb-cat-nav {
	margin-bottom: 16px;
}
.hb-cat-sidebar .hb-cat-nav:last-child {
	margin-bottom: 0;
}

/* 成分胶囊容器 */
.hb-cat-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px 14px 16px;
}
.hb-cat-chips .hb-chip {
	font-size: 0.82rem;
	padding: 6px 12px;
	line-height: 1.3;
}
.hb-cat-chips .hb-chip--all {
	border-style: dashed;
	color: #0F6E56;
	font-weight: 600;
}
.hb-cat-chips .hb-chip--all:hover {
	background: #0F6E56;
	color: #fff;
	border-style: solid;
}

/* 折叠标题（Dosage / Benefit）——默认展开，标题可点击切换 */
.hb-cat-nav--fold .hb-cat-nav__title.hb-cat-fold-trigger {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	user-select: none;
}
.hb-cat-fold-arrow {
	font-size: 1.1rem;
	line-height: 1;
	color: #8AA39C;
	transition: transform .18s;
}
.hb-cat-nav--fold.is-collapsed .hb-cat-fold-arrow {
	transform: rotate(-90deg);
}
/* 折叠体 */
.hb-cat-fold-body {
	transition: max-height .18s ease;
}
.hb-cat-nav--fold.is-collapsed .hb-cat-fold-body {
	display: none;
}

/* 当前项高亮沿用 .hb-cat-tree__item.is-current（已存在） */

@media (max-width: 900px) {
	.hb-cat-chips {
		padding: 10px 12px 14px;
	}
}
/* =========================================================================
   HB-SIDEBAR-FOLD-ALL-20261103: View all ingredients 折叠 + 修正折叠组样式
   ========================================================================= */

/* View all ingredients 折叠触发（button，放在 Popular Ingredients nav 内） */
.hb-cat-fold--all {
	border-top: 1px solid #E4ECE9;
	margin-top: 4px;
}
.hb-cat-fold__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: none;
	padding: 10px 16px;
	font-size: 0.85rem;
	font-weight: 600;
	color: #0F6E56;
	cursor: pointer;
	text-align: left;
}
.hb-cat-fold__trigger:hover {
	color: #0C5A47;
}
.hb-cat-fold-arrow {
	font-size: 1.1rem;
	line-height: 1;
	color: #8AA39C;
	transition: transform .18s;
}
.hb-cat-fold--all.is-open .hb-cat-fold-arrow {
	transform: rotate(90deg);
}
.hb-cat-fold__body {
	display: none;
	padding: 0 14px 14px;
}
.hb-cat-fold--all.is-open .hb-cat-fold__body {
	display: block;
}
.hb-cat-fold__body .hb-cat-chips {
	padding: 0;
}

/* Dosage form 折叠标题（沿用 .hb-cat-fold-trigger，默认展开） */
.hb-cat-nav--fold.is-collapsed .hb-cat-fold-arrow {
	transform: rotate(-90deg);
}
.hb-cat-nav--fold.is-collapsed .hb-cat-fold-body {
	display: none;
}
/* View all ingredients 按钮：还原为句首大写（不被全局 button uppercase 影响） */
.hb-cat-fold__trigger {
	text-transform: none !important;
}
/* View all 折叠区底部指引文案 */
.hb-cat-fold__hint {
	margin: 10px 0 0;
	padding: 10px 12px;
	font-size: 0.8rem;
	line-height: 1.5;
	color: #5A6B65;
	background: #F4F9F7;
	border-radius: 8px;
}
.hb-cat-fold__hint a {
	color: #0F6E56;
	font-weight: 600;
	text-decoration: none;
}
.hb-cat-fold__hint a:hover {
	text-decoration: underline;
}

/* ============================================================
   2026-11-03 · 共享内容短代码库样式
   [hb_certifications] / [hb_moq] / [hb_factory]
   ============================================================ */
.hb-cert-block, .hb-moq-block, .hb-factory-block { margin: 0 0 8px; }
.hb-cert-block .wp-block-heading, .hb-moq-block .wp-block-heading, .hb-factory-block .wp-block-heading { margin: 0 0 16px; }
.hb-cert-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; }
.hb-cert-list li { margin: 0; padding: 10px 14px; background: #f6f8f7; border: 1px solid rgba(15, 110, 86, .14); border-radius: 8px; font-size: 14px; color: #2d3a33; line-height: 1.55; }
.hb-cert-list li strong { color: #0F6E56; }
.hb-moq-block p, .hb-factory-block p { font-size: 14.5px; line-height: 1.7; color: #2d3a33; }
.hb-moq-block table.hb-spec { margin: 14px 0 0; }
@media (max-width: 640px) {
	.hb-cert-list { grid-template-columns: 1fr; }
}

/* ============================================================
   2026-11-02 · 共享短代码补充样式
   [hb_customization] / [hb_faq]
   ============================================================ */
.hb-custom-block, .hb-faq-block { margin: 0 0 8px; }
.hb-custom-block .wp-block-heading, .hb-faq-block .wp-block-heading { margin: 0 0 16px; }
.hb-custom-block h3.wp-block-heading, .hb-faq-block h3.wp-block-heading { font-size: 17px; margin: 22px 0 10px; color: #1a3a5c; }
.hb-process-list { margin: 0; padding: 0 0 0 22px; counter-reset: hbstep; list-style: none; }
.hb-process-list li { counter-increment: hbstep; position: relative; margin: 0 0 12px; padding-left: 34px; font-size: 14.5px; line-height: 1.6; color: #2d3a33; }
.hb-process-list li::before { content: counter(hbstep); position: absolute; left: 0; top: 0; width: 24px; height: 24px; line-height: 24px; text-align: center; background: #0F6E56; color: #fff; border-radius: 50%; font-size: 13px; font-weight: 700; }
.hb-process-list li strong { color: #1a3a5c; }
.hb-faq-item { border-bottom: 1px solid #e8eceb; padding: 4px 0 14px; }
.hb-faq-item:last-child { border-bottom: none; }
.hb-faq-item h3.wp-block-heading { margin: 14px 0 6px; }
.hb-faq-item p { margin: 0; font-size: 14.5px; line-height: 1.7; color: #44546a; }

/* ============================================================
   2026-11-02 · [hb_customization] 图标卡片样式
   ============================================================ */
.hb-custom-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 20px 0 4px; }
.hb-custom-card { background: #fff; border: 1px solid #e8eceb; border-radius: 12px; padding: 22px 18px; transition: box-shadow .2s ease, transform .2s ease; }
.hb-custom-card:hover { box-shadow: 0 8px 24px rgba(15, 110, 86, .10); transform: translateY(-2px); }
.hb-custom-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(15, 110, 86, .08); color: #0F6E56; margin-bottom: 14px; }
.hb-custom-icon svg { width: 24px; height: 24px; }
.hb-custom-card h3.wp-block-heading { font-size: 16px; margin: 0 0 8px; color: #1a3a5c; }
.hb-custom-card p { margin: 0; font-size: 13.5px; line-height: 1.6; color: #44546a; }
@media (max-width: 900px) { .hb-custom-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hb-custom-grid { grid-template-columns: 1fr; } }

/* ============================================================
   2026-11-02 · 共享短代码折叠样式（accordion）
   ============================================================ */
.hb-fold { margin: 0 0 12px; border: 1px solid #e8eceb; border-radius: 10px; background: #fff; overflow: hidden; }
.hb-fold__trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 18px; background: #f8faf9; border: none; cursor: pointer; text-align: left; }
.hb-fold__trigger:hover { background: #f1f6f4; }
.hb-fold__title { font-size: 16px; font-weight: 700; color: #1a3a5c; }
.hb-fold__arrow { position: relative; width: 12px; height: 12px; flex: none; margin-left: 14px; }
.hb-fold__arrow::before, .hb-fold__arrow::after { content: ''; position: absolute; background: #0F6E56; border-radius: 2px; transition: transform .2s ease; }
.hb-fold__arrow::before { left: 1px; top: 5px; width: 10px; height: 2px; }
.hb-fold__arrow::after { left: 5px; top: 1px; width: 2px; height: 10px; }
.hb-fold[aria-expanded="true"] .hb-fold__arrow::after, .hb-fold.is-open .hb-fold__arrow::after { transform: rotate(90deg); opacity: 0; }
.hb-fold__body { padding: 18px; }
.hb-fold__body[hidden] { display: none; }
/* ============================================================
   2026-11-02 · 折叠标题可发现性增强（保持全折叠，只提升「可点击」视觉）
   目标：让买家一眼看出「这里有可展开的信任信息」，而不是扫过去。
   ============================================================ */

/* 触发按钮更像一个「可点的卡片」，而不是一段普通文字 */
.hb-fold {
	border: 1px solid #dfe7e3;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.hb-fold:hover {
	border-color: #0F6E56;
	box-shadow: 0 2px 10px rgba(15, 110, 86, .08);
}

.hb-fold__trigger {
	padding: 18px 20px;
	background: #f8faf9;
	transition: background .18s ease;
}
.hb-fold__trigger:hover {
	background: #eef5f2;
}

/* 标题左侧加一个 teal 圆点图标，视觉锚点 */
.hb-fold__title {
	position: relative;
	padding-left: 20px;
	font-size: 16.5px;
	font-weight: 700;
	color: #1a3a5c;
}
.hb-fold__title::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #0F6E56;
}

/* 右侧「Tap to view」引导小字：紧贴标题之后，靠右对齐 */
.hb-fold__trigger::after {
	content: 'Tap to view';
	display: inline-block;
	margin-left: auto;   /* 推到最右，与 title 拉开 */
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #8aa39a;
	flex: none;
}
.hb-fold[aria-expanded="true"] .hb-fold__trigger::after,
.hb-fold.is-open .hb-fold__trigger::after {
	content: 'Tap to hide';
}

/* 右侧箭头换成更显眼的「+」号，放到一个 teal 圆圈里，紧跟引导小字 */
.hb-fold__arrow {
	order: 2;   /* 保证箭头在最右，Tap to view 在箭头左侧 */
	width: 24px;
	height: 24px;
	flex: none;
	margin-left: 10px;
	border: 1.5px solid #0F6E56;
	border-radius: 50%;
	background: transparent;
}
.hb-fold__arrow::before,
.hb-fold__arrow::after {
	content: '';
	position: absolute;
	background: #0F6E56;
	border-radius: 2px;
	transition: transform .2s ease;
}
.hb-fold__arrow::before {
	left: 6px;
	top: 11px;
	width: 12px;
	height: 2px;
}
.hb-fold__arrow::after {
	left: 11px;
	top: 6px;
	width: 2px;
	height: 12px;
}
/* 展开态：竖线消失，只剩横线（减号效果） */
.hb-fold[aria-expanded="true"] .hb-fold__arrow::after,
.hb-fold.is-open .hb-fold__arrow::after {
	transform: rotate(90deg);
	opacity: 0;
}

/* 移动端：引导小字隐藏，避免挤占空间 */
@media (max-width: 544px) {
	.hb-fold__trigger::after {
		display: none;
	}
}


.hb-fold__body .hb-cert-block, .hb-fold__body .hb-moq-block, .hb-fold__body .hb-factory-block, .hb-fold__body .hb-custom-block, .hb-fold__body .hb-faq-block { margin: 0; }
.hb-fold__body h2.wp-block-heading { margin-top: 0; }


/* ============================================================
   Hero quick-lead form (lightweight enquiry bar in the banner)
   ============================================================ */
.hb-hero-quick {
	max-width: 720px;
	margin: 22px auto 0;
}
.hb-hero-quick__row {
	display: flex;
	gap: 10px;
	align-items: stretch;
}
.hb-hero-quick__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 52px;
	padding: 0 16px;
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: 10px;
	background: rgba(255, 255, 255, .96);
	color: #1a1a1a;
	font-size: 15px;
	font-family: inherit;
	outline: none;
}
.hb-hero-quick__input:focus {
	border-color: #0F6E56;
	box-shadow: 0 0 0 3px rgba(15, 110, 86, .18);
}
.hb-hero-quick__input::placeholder {
	color: #7a7a7a;
}
.hb-hero-quick__btn {
	flex: 0 0 auto;
	height: 52px;
	padding: 0 22px;
	border: 0;
	border-radius: 10px;
	background: #0F6E56;
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	white-space: nowrap;
	transition: background .18s ease, transform .18s ease;
}
.hb-hero-quick__btn:hover {
	background: #0b5743;
	transform: translateY(-1px);
}

@media (max-width: 544px) {
	.hb-hero-quick {
		margin-top: 16px;
	}
	.hb-hero-quick__row {
		flex-direction: column;
		gap: 8px;
	}
	.hb-hero-quick__input,
	.hb-hero-quick__btn {
		height: 48px;
		width: 100%;
	}
}


/* ============================================================
   Mobile sticky inquiry bar (bottom, fixed)
   ============================================================ */
.hb-mobile-cta {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9997;
	height: 60px;
	padding: 8px 14px;
	background: #ffffff;
	border-top: 1px solid #e6e6e6;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
	align-items: center;
	gap: 10px;
}
.hb-mobile-cta__quote {
	flex: 1 1 auto;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: #0F6E56;
	color: #ffffff !important;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none !important;
	text-align: center;
}
.hb-mobile-cta__quote:active {
	background: #0b5743;
}
.hb-mobile-cta__wa {
	flex: 0 0 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: #25D366;
	color: #ffffff !important;
}
.hb-mobile-cta__wa svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

@media (max-width: 767px) {
	.hb-mobile-cta {
		display: flex;
	}
	/* Hide the round floating WhatsApp button on mobile so it does not
	   overlap the sticky bar at the bottom edge. */
	.hb-wa-float {
		display: none;
	}
	/* Add bottom padding so page content is not hidden behind the bar. */
	body {
		padding-bottom: 60px;
	}
}

/* ============================================================
   Lead Magnet — Product Catalogue download CTA
   ============================================================ */
.hb-catalog-cta {
	margin: 48px auto 0;
	max-width: 1200px;
	padding: 0 20px;
}
.hb-catalog-cta__inner {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #0F6E56 0%, #0b5743 100%);
	border-radius: 18px;
	padding: 44px 48px;
	text-align: center;
}
.hb-catalog-cta__inner h2 {
	color: #ffffff !important;
	font-size: 28px;
	line-height: 1.25;
	margin: 0 0 12px !important;
	font-weight: 700;
}
.hb-catalog-cta__inner p {
	color: rgba(255, 255, 255, .92);
	font-size: 16px;
	line-height: 1.65;
	margin: 0 auto 26px;
	max-width: 640px;
}
.hb-catalog-form {
	max-width: 560px;
	margin: 0 auto;
}
.hb-catalog-form__row {
	display: flex;
	gap: 10px;
	align-items: stretch;
}
.hb-catalog-form__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 54px;
	padding: 0 18px;
	border: 0;
	border-radius: 10px;
	background: #ffffff;
	color: #1a1a1a;
	font-size: 15px;
	font-family: inherit;
	outline: none;
}
.hb-catalog-form__input:focus {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .45);
}
.hb-catalog-form__input::placeholder {
	color: #8a8a8a;
}
.hb-catalog-form__btn {
	flex: 0 0 auto;
	height: 54px;
	padding: 0 26px;
	border: 0;
	border-radius: 10px;
	background: #ffffff;
	color: #0F6E56;
	font-size: 15px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	white-space: nowrap;
	transition: transform .18s ease, box-shadow .18s ease;
}
.hb-catalog-form__btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.hb-catalog-note {
	font-size: 13px !important;
	margin: 14px 0 0 !important;
	color: rgba(255, 255, 255, .7) !important;
}

@media (max-width: 600px) {
	.hb-catalog-cta {
		margin-top: 32px;
		padding: 0 14px;
	}
	.hb-catalog-cta__inner {
		padding: 32px 22px;
	}
	.hb-catalog-cta__inner h2 {
		font-size: 22px;
	}
	.hb-catalog-form__row {
		flex-direction: column;
		gap: 8px;
	}
	.hb-catalog-form__input,
	.hb-catalog-form__btn {
		width: 100%;
		height: 50px;
	}
}

/* ============================================================
   Product archive intro (SEO lead-in copy under the H1)
   ============================================================ */
.hubogen-archive-intro {
	max-width: 820px;
	margin: -6px 0 22px;
}
.hubogen-archive-intro p {
	font-size: 16px;
	line-height: 1.7;
	color: #46564F;
	margin: 0;
}