/* ============================================================
   JSB Product Catalog — front-end styles
   Visual language extracted from the existing home page:
   深藏青蓝 #081845 · 白 #ffffff · 哑光金 #C9A84C · 浅灰 #F8F9FB
   Fonts: Inter (body) + Plus Jakarta Sans (headings)
   All classes are prefixed .jsb- and never target home page styles.
   ============================================================ */
.jsb-product,
.jsb-hub,
.jsb-contact {
	--jsb-blue: #081845;
	--jsb-gold: #C9A84C;
	--jsb-gold-dark: #b5953d;
	--jsb-bg-light: #F8F9FB;
	--jsb-line: #E5E7EB;
	--jsb-text-muted: #4B5563;
	font-family: 'Inter', sans-serif;
	color: var(--jsb-blue);
	line-height: 1.6;
	box-sizing: border-box;
	/*
	 * The theme's content wrapper (#content .ast-container) is a flex row, so a
	 * child with width:auto is sized to its max-content and left-aligned —
	 * that pushed the whole product block (and the hero image column) off
	 * centre. Force the catalog root to fill the wrapper, cap it at the site
	 * max-width and centre it with auto margins instead.
	 */
	width: 100%;
	min-width: 0;
	margin-left: auto;
	margin-right: auto;
}
.jsb-product { max-width: 1240px; }
.jsb-hub { max-width: 1240px; }
.jsb-contact { max-width: 860px; }
.jsb-product *,
.jsb-hub *,
.jsb-contact * { box-sizing: border-box; }

.jsb-btn {
	display: inline-block;
	padding: 15px 32px;
	border-radius: 4px;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	text-decoration: none;
	transition: 0.3s;
	border: none;
}
.jsb-btn-gold { background: var(--jsb-gold); color: var(--jsb-blue); }
.jsb-btn-gold:hover { background: var(--jsb-gold-dark); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(201, 168, 76, 0.3); }
.jsb-btn-outline { border: 1.5px solid var(--jsb-blue); color: var(--jsb-blue); background: #fff; }
.jsb-btn-outline:hover { background: var(--jsb-blue); color: #fff; }
.jsb-btn-white { border: 1px solid rgba(255,255,255,0.5); color: #fff; background: transparent; }
.jsb-btn-white:hover { background: rgba(255,255,255,0.12); border-color: #fff; }

.jsb-section-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 32px; font-weight: 800; margin: 0 0 30px; color: var(--jsb-blue); }

/* ---------------- Breadcrumb ---------------- */
.jsb-crumbs { max-width: 1240px; margin: 0 auto; padding: 22px 20px 0; font-size: 13.5px; color: #6B7280; }
.jsb-crumbs a { color: var(--jsb-blue); text-decoration: none; font-weight: 600; }
.jsb-crumbs a:hover { color: var(--jsb-gold); }
.jsb-crumb-sep { margin: 0 8px; color: #B6BCC8; }
.jsb-crumb-current { color: var(--jsb-gold); font-weight: 700; }

/* ---------------- Hero ---------------- */
.jsb-hero {
	max-width: 1240px; margin: 30px auto 0; padding: 0 20px;
	/* Draft split: left 40% (image + badges) / right 60% (product info). */
	display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 56px; align-items: start;
}
/* Left media column: static (no sticky) so the hero copy card below the
   badges scrolls naturally and is never occluded by the image. */
.jsb-hero-media { position: static; }
.jsb-hero-media,
.jsb-hero-info { min-width: 0; }
.jsb-hero-img {
	background: #fff; border: 1px solid var(--jsb-line); border-radius: 12px; overflow: hidden;
	display: flex; align-items: center; justify-content: center; min-height: 340px;
	aspect-ratio: 1 / 1;
}
.jsb-hero-img img { width: 100%; height: auto; display: block; }
.jsb-img-placeholder { padding: 90px 20px; color: #9CA3AF; font-size: 15px; letter-spacing: 0.5px; }
.jsb-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.jsb-badge {
	background: var(--jsb-bg-light); border: 1px solid var(--jsb-gold); color: var(--jsb-blue);
	font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; letter-spacing: 0.3px;
}
/* 差异化短文案卡 — Products 后台"文案编写"主正文（post_content）经既有
   the_content 过滤器链渲染于左栏徽章下方。白底、细金边、圆角；自然高度，
   不做固定高度/内部滚动条；长词断行，最大宽度 100%。 */
.jsb-hero-copy {
	background: #fff;
	border: 1px solid var(--jsb-gold);
	border-radius: 10px;
	padding: 16px 18px;
	margin-top: 14px;
	max-width: 100%;
	min-width: 0;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--jsb-text-muted);
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
}
.jsb-hero-copy > *:first-child { margin-top: 0; }
.jsb-hero-copy > *:last-child { margin-bottom: 0; }
.jsb-hero-copy p { margin: 0 0 12px; }
.jsb-hero-copy ul,
.jsb-hero-copy ol { margin: 0 0 12px; padding-left: 20px; }
.jsb-hero-copy li { margin-bottom: 6px; }
.jsb-hero-copy li:last-child { margin-bottom: 0; }
.jsb-hero-copy h1,
.jsb-hero-copy h2,
.jsb-hero-copy h3,
.jsb-hero-copy h4,
.jsb-hero-copy h5,
.jsb-hero-copy h6 {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 800;
	color: var(--jsb-blue);
	margin: 16px 0 8px;
	line-height: 1.3;
}
.jsb-hero-copy a { color: var(--jsb-blue); text-decoration: underline; }
.jsb-hero-copy img { max-width: 100%; height: auto; border-radius: 6px; }
.jsb-hero-copy table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
.jsb-hero-copy th { background: var(--jsb-blue); color: #fff; text-align: left; padding: 8px 10px; font-size: 13px; }
.jsb-hero-copy td { padding: 7px 10px; border-bottom: 1px solid #EEF0F4; color: var(--jsb-blue); }
.jsb-product-code { font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--jsb-gold); margin-bottom: 8px; }
.jsb-product-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 40px; font-weight: 800; line-height: 1.15; margin: 0 0 14px; color: var(--jsb-blue); overflow-wrap: break-word; }
.jsb-product-subtitle { font-size: 17px; color: var(--jsb-text-muted); margin: 0 0 22px; overflow-wrap: break-word; }
/* Unified two-column spec table (Function / Dosage Form / Active Matrix / MOQ / Shelf Life / Packaging Options)
   in the hero right column — white bg, subtle row dividers, rounded corners, gold uppercase labels. */
.jsb-spec-table {
	width: 100%;
	margin: 0 0 4px;
	border: 1px solid var(--jsb-line);
	border-radius: 10px;
	border-collapse: separate;
	border-spacing: 0;
	background: #fff;
	overflow: hidden;
	table-layout: fixed;
}
.jsb-spec-table .jsb-spec-label,
.jsb-spec-table .jsb-spec-value {
	border-bottom: 1px solid #F1F3F7;
	padding: 13px 18px;
	text-align: left;
	vertical-align: top;
}
.jsb-spec-table .jsb-spec-row:last-child .jsb-spec-label,
.jsb-spec-table .jsb-spec-row:last-child .jsb-spec-value { border-bottom: none; }
.jsb-spec-table .jsb-spec-label {
	width: 150px;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--jsb-gold);
}
.jsb-spec-table .jsb-spec-value {
	font-size: 14.5px;
	color: var(--jsb-blue);
	overflow-wrap: break-word;
	word-break: break-word;
}
/* Source advantage detail — standalone matte-gold framed box right above the two hero CTAs. */
.jsb-advantage-detail {
	border: 1.5px solid var(--jsb-gold);
	background: #fff;
	border-radius: 8px;
	padding: 12px 16px;
	margin: 18px 0 14px;
	color: var(--jsb-text-muted);
	font-size: 14px;
	line-height: 1.55;
	overflow-wrap: break-word;
}
.jsb-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------------- Overview ---------------- */
.jsb-overview { max-width: 1240px; margin: 50px auto 0; padding: 0 20px; }
.jsb-overview-inner { background: var(--jsb-bg-light); border-radius: 12px; padding: 30px 34px; font-size: 15.5px; color: var(--jsb-text-muted); }

/* ---------------- Detail blocks (Formula / Manufacturing & Quality / Packaging / Compliance) ----------------
   Continuous vertical sections, no tabs / no click toggling. Each block is a white card with a gold
   underline H2 title; content typography mirrors the old tab panels. */
.jsb-detail-blocks { max-width: 1240px; margin: 60px auto 0; padding: 0 20px; display: grid; gap: 28px; }
.jsb-detail-block {
	background: #fff; border: 1px solid var(--jsb-line); border-radius: 12px;
	padding: 32px 36px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); min-width: 0;
}
.jsb-detail-title {
	font-family: 'Plus Jakarta Sans', sans-serif; font-size: 24px; font-weight: 800;
	color: var(--jsb-blue); margin: 0 0 16px; padding-bottom: 12px;
	border-bottom: 2px solid var(--jsb-gold);
}
.jsb-detail-body { font-size: 15px; color: var(--jsb-text-muted); overflow-wrap: break-word; min-width: 0; }
.jsb-detail-body h4 { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--jsb-blue); font-size: 16px; margin: 20px 0 8px; }
.jsb-detail-body h4:first-child { margin-top: 0; }
.jsb-detail-body table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
.jsb-detail-body th { background: var(--jsb-blue); color: #fff; text-align: left; padding: 10px 12px; font-size: 13px; }
.jsb-detail-body td { padding: 9px 12px; border-bottom: 1px solid #EEF0F4; color: var(--jsb-blue); }
.jsb-detail-body tr:nth-child(even) td { background: #FAFBFC; }
/* Structured Formula & Ingredients rows (admin fields) inside the Formula block. */
.jsb-formula-specs { margin-top: 18px; }
.jsb-formula-specs .jsb-spec-table { margin: 0; }
.jsb-advantage { background: var(--jsb-bg-light); border-left: 5px solid var(--jsb-gold); border-radius: 0 10px 10px 0; padding: 18px 22px; margin-bottom: 24px; }
.jsb-advantage h4 { margin: 0 0 6px !important; font-size: 15px !important; color: var(--jsb-blue); }
.jsb-advantage p { margin: 0; color: var(--jsb-text-muted); font-size: 14.5px; }
.jsb-sp-item { margin-bottom: 22px; }
.jsb-sp-item h4 { color: var(--jsb-blue); font-size: 15.5px; margin: 0 0 8px; }
.jsb-sp-item ul { margin: 0; padding-left: 20px; color: var(--jsb-text-muted); font-size: 14.5px; }
.jsb-sp-item li { margin-bottom: 5px; }
.jsb-pack-option { padding: 14px 16px; border: 1px solid var(--jsb-line); border-radius: 8px; margin-bottom: 10px; background: #fff; }
.jsb-pack-option strong { color: var(--jsb-blue); display: block; margin-bottom: 4px; }
.jsb-pack-option p { margin: 0; color: var(--jsb-text-muted); font-size: 14px; }

/* ---------------- Dual cards ---------------- */
.jsb-dual-cards { max-width: 1240px; margin: 60px auto 0; padding: 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch; }
.jsb-dual-card {
	background: #fff; border: 1px solid var(--jsb-line); border-top: 5px solid var(--jsb-gold);
	border-radius: 12px; padding: 30px; box-shadow: 0 4px 15px rgba(0,0,0,0.03);
	display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere;
}
.jsb-dual-card h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 20px; font-weight: 800; color: var(--jsb-blue); margin: 0 0 12px; }
.jsb-dual-card p { color: var(--jsb-text-muted); font-size: 14.5px; margin: 0 0 12px; }
.jsb-dual-detail { flex-grow: 1; }
.jsb-dual-card .jsb-btn { align-self: flex-start; margin-top: 14px; max-width: 100%; white-space: normal; text-align: center; }
/* Process card: numbered-dot timeline with a thin connector line. */
.jsb-dual-card ol,
.jsb-dual-card ul { margin: 0; padding: 0; list-style: none; }
.jsb-dual-steps { counter-reset: jsb-step; flex: 1 0 auto; display: flex; flex-direction: column; }
.jsb-dual-steps li {
	counter-increment: jsb-step;
	position: relative;
	display: flex;
	align-items: flex-start;
	margin: 0;
	padding: 0 0 22px 42px;
}
/* Vertical rhythm: the first three step rows absorb the card's spare height
   (the dual cards are stretched to equal height, which used to leave a large
   dead gap between step 4 and the CTA). Growing rows 1-3 spreads the four
   steps evenly across the card; the last row stays tight so only the CTA's
   own top padding separates it from the button. */
.jsb-dual-steps li:not(:last-child) {
	flex: 1 1 auto;
	padding-bottom: 34px;
}
.jsb-dual-steps li:last-child { padding-bottom: 0; }
.jsb-dual-steps li::before {
	content: counter(jsb-step);
	position: absolute; left: 0; top: 1px;
	width: 26px; height: 26px; border-radius: 50%;
	background: #fff; border: 1.5px solid var(--jsb-gold);
	color: var(--jsb-blue); font-size: 12px; font-weight: 800; line-height: 1;
	display: flex; align-items: center; justify-content: center;
	z-index: 1;
	box-shadow: 0 0 0 4px #fff; /* mask the connector line behind the dot */
}
.jsb-dual-steps li::after {
	content: ''; position: absolute; left: 12px; top: 29px; bottom: -14px;
	width: 2px; border-radius: 1px;
	/* Solid gold 2px connector so the timeline line is clearly visible on
	 * every product page (previously a very faint 0.4->0.15 alpha gradient
	 * that read as "no line" in browser acceptance).
	 * bottom: -14px ends the segment at the next row's dot centre (rows are
	 * adjacent, dot is 26px tall starting 1px into the row) so the line always
	 * disappears behind the dot's white mask ring — even when the first three
	 * rows grow to absorb the card's spare height. */
	background: var(--jsb-gold);
}
.jsb-dual-steps li:last-child::after { display: none; }
.jsb-step-text { flex: 1 1 auto; min-width: 0; }
.jsb-step-text strong { display: block; color: var(--jsb-blue); font-size: 14.5px; line-height: 1.4; margin: 0 0 4px; }
.jsb-step-text span { display: block; color: var(--jsb-text-muted); font-size: 13.5px; line-height: 1.55; }
/* CTA pinned to the card bottom so both cards align on desktop. */
.jsb-dual-card-cta { margin-top: auto; padding-top: 22px; min-width: 0; }
.jsb-dual-card-cta .jsb-btn { max-width: 100%; }
/* Right (guarantee) card: same bottom-aligned closing + CTA for a balanced height. */
.jsb-dual-card-guarantee { display: flex; flex-direction: column; }
.jsb-dual-card-guarantee p.jsb-dual-closing { margin-top: auto; }
.jsb-dual-pillars strong { display: block; color: var(--jsb-blue); font-size: 14.5px; margin-bottom: 2px; }
.jsb-dual-pillars span { color: var(--jsb-text-muted); font-size: 13.5px; line-height: 1.55; }
.jsb-dual-card p.jsb-dual-eyebrow { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--jsb-gold); margin: 0 0 16px; }
.jsb-dual-pillars li { position: relative; padding-left: 18px; margin-bottom: 15px; }
.jsb-dual-pillars li::before {
	content: ''; position: absolute; left: 0; top: 8px;
	width: 7px; height: 7px; border-radius: 50%; background: var(--jsb-gold);
}
.jsb-dual-card p.jsb-dual-closing {
	border-top: 1px dashed var(--jsb-gold); padding-top: 14px;
	margin: 18px 0 0; font-size: 13.5px; line-height: 1.6;
}

/* ---------------- Related ---------------- */
.jsb-related { max-width: 1240px; margin: 70px auto 0; padding: 0 20px; }

/* Related products: compact text-only cards (no images rendered). */
.jsb-related .jsb-card-grid { gap: 16px; }
.jsb-related-card {
	background: #fff; border: 1px solid var(--jsb-line); border-radius: 10px;
	padding: 16px 18px; display: flex; flex-direction: column; min-width: 0; transition: 0.35s;
}
.jsb-related-card:hover { border-color: var(--jsb-gold); transform: translateY(-3px); box-shadow: 0 14px 28px rgba(8, 24, 69, 0.08); }
.jsb-related-cat { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; color: var(--jsb-gold); margin-bottom: 6px; }
.jsb-related-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; font-weight: 800; margin: 0 0 6px; line-height: 1.35; overflow-wrap: break-word; }
.jsb-related-title a { color: var(--jsb-blue); text-decoration: none; }
.jsb-related-title a:hover { color: var(--jsb-gold); }
.jsb-related-sub { font-size: 12.5px; color: var(--jsb-text-muted); margin: 0 0 10px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jsb-related-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.jsb-related-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.jsb-related-actions .jsb-btn { padding: 8px 14px; font-size: 12px; white-space: nowrap; }

/* ---------------- CTA ---------------- */
.jsb-cta {
	background: var(--jsb-blue); color: #fff; text-align: center; margin-top: 70px;
	padding: 80px 20px; position: relative; overflow: hidden;
}
.jsb-cta::before { content: ''; position: absolute; top: -120px; right: -120px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(201,168,76,0.18) 0%, transparent 70%); }
.jsb-cta h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 36px; font-weight: 800; color: #fff; margin: 0 0 14px; }
.jsb-cta p { color: rgba(255,255,255,0.75); font-size: 16px; max-width: 760px; margin: 0 auto 34px; }
.jsb-cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---------------- FAQ ---------------- */
.jsb-faq { max-width: 1240px; margin: 70px auto 0; padding: 0 20px; }
.jsb-faq-list details {
	border: 1px solid var(--jsb-line); border-radius: 10px; margin-bottom: 10px; background: #fff; overflow: hidden;
}
.jsb-faq-list summary {
	cursor: pointer; padding: 16px 20px; font-weight: 700; font-size: 15px; color: var(--jsb-blue);
	list-style: none; display: flex; justify-content: space-between; align-items: center; font-family: 'Plus Jakarta Sans', sans-serif;
}
.jsb-faq-list summary::-webkit-details-marker { display: none; }
.jsb-faq-list summary::after { content: '+'; color: var(--jsb-gold); font-size: 20px; font-weight: 800; }
.jsb-faq-list details[open] summary::after { content: '−'; }
.jsb-faq-list details p { margin: 0; padding: 0 20px 16px; color: var(--jsb-text-muted); font-size: 14.5px; }
.jsb-faq-cta { text-align: center; margin-top: 26px; }

/* ---------------- Cards / grid (hubs, related) ---------------- */
.jsb-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.jsb-card { background: #fff; border: 1px solid var(--jsb-line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: 0.35s; }
.jsb-card:hover { border-color: var(--jsb-gold); transform: translateY(-6px); box-shadow: 0 18px 35px rgba(8, 24, 69, 0.1); }
.jsb-card-img { display: block; background: var(--jsb-bg-light); border-bottom: 1px solid var(--jsb-line); aspect-ratio: 1/1; overflow: hidden; }
.jsb-card-img img { width: 100%; height: 100%; object-fit: cover; }
.jsb-card-img-fallback { display: flex; align-items: center; justify-content: center; height: 100%; color: #9CA3AF; font-size: 13px; }
.jsb-card-body { padding: 18px; display: flex; flex-direction: column; flex-grow: 1; }
.jsb-card-cat { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; color: var(--jsb-gold); margin-bottom: 6px; }
.jsb-card-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 800; margin: 0 0 6px; line-height: 1.35; }
.jsb-card-title a { color: var(--jsb-blue); text-decoration: none; }
.jsb-card-title a:hover { color: var(--jsb-gold); }
.jsb-card-sub { font-size: 13px; color: var(--jsb-text-muted); margin: 0 0 12px; }
.jsb-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.jsb-chip { background: var(--jsb-bg-light); border: 1px solid var(--jsb-line); color: var(--jsb-blue); font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.jsb-card-actions { display: flex; gap: 10px; margin-top: auto; }
.jsb-card-actions .jsb-btn { padding: 9px 16px; font-size: 12.5px; }
.jsb-empty { color: var(--jsb-text-muted); font-size: 15px; padding: 20px 0; }

/* ---------------- Hub page (aggregate template v2) ---------------- */
.jsb-hub { max-width: 1240px; margin: 0 auto; padding: 10px 0 0; }
/* Alias: ghost CTA used on hub cards / FAQ row. */
.jsb-btn-ghost { border: 1.5px solid var(--jsb-blue); color: var(--jsb-blue); background: #fff; }
.jsb-btn-ghost:hover { background: var(--jsb-blue); color: #fff; }

/* Hide the theme-generated page title (e.g. "Joint Bone Health") on the 22 hub
   pages only — the body class is added by the plugin, so home / ordinary pages /
   product detail pages keep their theme titles untouched. The hub's own hero H1
   (jsb-hub-hero-title) remains visible. */
body.jsb-hub-page .entry-header { display: none; }

/* Hero — full-bleed deep-blue first screen on the 22 hub pages.
   .jsb-hub-hero markup is rendered exclusively by the [jsb_hub] shortcode on
   hub pages (never on product single pages, which keep the 40/60 .jsb-hero).
   width:100vw + calc(50% - 50vw) breaks the hero out of the centred .jsb-hub
   column (max-width 1240px, forced by the child theme) so it touches the
   viewport edges; .jsb-hub-hero-inner restores the 1240px reading column. */
.jsb-hub-hero {
	background: var(--jsb-blue);
	color: #fff;
	width: 100vw;
	max-width: none;
	margin: 0 calc(50% - 50vw);
	padding: 0;
	border: none;
	border-bottom: 2px solid var(--jsb-gold);
	border-radius: 0;
	box-shadow: none;
}
.jsb-hub-hero-inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 30px 20px 44px;
}
/* Breadcrumb now lives inside the dark hero — light text on deep blue. */
.jsb-hub-hero .jsb-crumbs {
	max-width: none;
	margin: 0;
	padding: 0 0 20px;
	color: rgba(255, 255, 255, 0.65);
}
.jsb-hub-hero .jsb-crumbs a { color: rgba(255, 255, 255, 0.85); }
.jsb-hub-hero .jsb-crumbs a:hover { color: var(--jsb-gold); }
.jsb-hub-hero .jsb-crumb-sep { color: rgba(255, 255, 255, 0.35); }
.jsb-hub-hero .jsb-crumb-current { color: var(--jsb-gold); }
/* Only the 22 hub pages: collapse the theme's 60px #primary top margin so the
   hero meets the sticky masthead (gap <= 2px). Home page, ordinary pages,
   product detail pages and menu items are never matched. */
body.jsb-hub-page #primary,
body.jsb-hub-page .content-area {
	margin-top: 0 !important;
}
.jsb-hub-hero-eyebrow {
	font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px;
	color: var(--jsb-gold); margin: 0 0 10px;
}
.jsb-hub-hero-title {
	font-family: 'Plus Jakarta Sans', sans-serif; font-size: 38px; font-weight: 800;
	line-height: 1.15; color: #fff; margin: 0 0 8px; overflow-wrap: break-word;
}
.jsb-hub-hero-sub { font-size: 16.5px; font-weight: 700; color: #DCE2F2; margin: 0 0 14px; }
.jsb-hub-hero-desc { font-size: 15.5px; color: rgba(255, 255, 255, 0.78); margin: 0 0 18px; max-width: 980px; line-height: 1.65; }
.jsb-hub-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.jsb-hub-badge {
	display: inline-flex; align-items: center; gap: 7px;
	background: rgba(255, 255, 255, 0.07); border: 1px solid var(--jsb-gold);
	color: #fff; font-size: 12.5px; font-weight: 700;
	padding: 7px 13px; border-radius: 999px;
}
.jsb-hub-badge::before { content: '\2713'; color: var(--jsb-gold); font-weight: 800; }

/* Market trends & consumer pain points (Block 2) — 3 cards, deep blue / white /
   matte gold, placed between the hero and the browser (sidebar + filter + grid). */
.jsb-hub-trends { margin: 26px 20px 0; }
.jsb-trends-head { margin-bottom: 18px; }
.jsb-trends-eyebrow {
	display: block; font-size: 12px; font-weight: 800; text-transform: uppercase;
	letter-spacing: 1.2px; color: var(--jsb-gold); margin: 0 0 6px;
}
.jsb-hub-trends .jsb-hub-section-title { margin-bottom: 0; }
.jsb-trends-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.jsb-trend-card {
	background: #fff; border: 1px solid var(--jsb-line); border-top: 4px solid var(--jsb-gold);
	border-radius: 12px; padding: 24px 22px; display: flex; flex-direction: column; min-width: 0;
	box-shadow: 0 4px 15px rgba(8, 24, 69, 0.05); overflow-wrap: break-word;
}
.jsb-trend-num {
	font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 800;
	letter-spacing: 1.6px; color: var(--jsb-gold); margin: 0 0 10px;
}
.jsb-trend-card h3 {
	font-family: 'Plus Jakarta Sans', sans-serif; font-size: 17.5px; font-weight: 800;
	color: var(--jsb-blue); margin: 0 0 10px; line-height: 1.3; overflow-wrap: break-word;
}
.jsb-trend-desc { font-size: 14px; color: var(--jsb-text-muted); margin: 0 0 12px; line-height: 1.6; }
/* Tag pills removed from all hub pages (no .jsb-trend-tags markup is rendered). */
.jsb-trend-solution {
	border-left: 3px solid var(--jsb-gold); background: var(--jsb-bg-light);
	border-radius: 0 8px 8px 0; padding: 12px 14px; margin-top: 12px;
	font-size: 13px; color: var(--jsb-blue); line-height: 1.55; overflow-wrap: break-word;
}
.jsb-trend-solution strong {
	display: block; font-size: 11px; font-weight: 800; text-transform: uppercase;
	letter-spacing: 0.6px; color: var(--jsb-gold); margin: 0 0 4px;
}

/* Browser layout: sidebar nav + main (filter + grid) */
.jsb-hub-layout { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 26px; padding: 0 20px; margin-top: 26px; align-items: start; }
.jsb-hub-side { background: #fff; border: 1px solid var(--jsb-line); border-radius: 12px; padding: 18px 16px; min-width: 0; }
.jsb-hub-side-group { margin-bottom: 20px; }
.jsb-hub-side-group:last-child { margin-bottom: 0; }
.jsb-hub-side-label {
	display: block; font-size: 11.5px; font-weight: 800; text-transform: uppercase;
	letter-spacing: 0.9px; color: #6B7280; margin: 0 0 8px;
}
.jsb-hub-side-links { display: flex; flex-direction: column; gap: 2px; }
.jsb-hub-side-link {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	text-decoration: none; color: var(--jsb-blue); font-size: 13.5px; font-weight: 600;
	padding: 8px 11px; border-radius: 8px; transition: 0.2s; min-width: 0;
}
.jsb-hub-side-link:hover { background: var(--jsb-bg-light); color: var(--jsb-gold); }
.jsb-hub-side-link.is-active { background: var(--jsb-blue); color: #fff; }
.jsb-hub-side-name { overflow-wrap: break-word; }
.jsb-hub-side-count {
	flex: 0 0 auto; min-width: 22px; text-align: center; font-size: 11px; font-weight: 800;
	background: var(--jsb-bg-light); border: 1px solid var(--jsb-line); color: #6B7280;
	border-radius: 999px; padding: 1px 7px;
}
.jsb-hub-side-link.is-active .jsb-hub-side-count { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.35); color: #fff; }

.jsb-hub-main { min-width: 0; }
.jsb-hub-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.jsb-hub-count { font-size: 14px; color: #6B7280; margin: 0 0 14px; }

/* Text-only product grid (no images) */
.jsb-hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.jsb-hub-card {
	background: #fff; border: 1px solid var(--jsb-line); border-radius: 12px;
	padding: 20px 20px 18px; display: flex; flex-direction: column; min-width: 0;
	transition: 0.3s;
}
.jsb-hub-card:hover { border-color: var(--jsb-gold); transform: translateY(-4px); box-shadow: 0 16px 32px rgba(8, 24, 69, 0.09); }
.jsb-hub-card-cat { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; color: var(--jsb-gold); margin-bottom: 7px; }
.jsb-hub-card-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 800; margin: 0 0 7px; line-height: 1.35; overflow-wrap: break-word; }
.jsb-hub-card-title a { color: var(--jsb-blue); text-decoration: none; }
.jsb-hub-card-title a:hover { color: var(--jsb-gold); }
.jsb-hub-card-sub { font-size: 13px; color: var(--jsb-text-muted); margin: 0 0 12px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.jsb-hub-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.jsb-hub-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.jsb-hub-card-actions .jsb-btn { padding: 9px 16px; font-size: 12.5px; white-space: nowrap; }

/* Empty states */
.jsb-hub-empty {
	background: #fff; border: 1px dashed var(--jsb-gold); border-radius: 12px;
	padding: 44px 36px; text-align: center;
}
.jsb-hub-empty p { font-size: 15.5px; color: var(--jsb-text-muted); max-width: 640px; margin: 0 auto 22px; line-height: 1.65; }
.jsb-hub-filter-empty { font-size: 13.5px; color: var(--jsb-text-muted); background: var(--jsb-bg-light); border-radius: 8px; padding: 14px 18px; margin: 14px 0 0; }
.jsb-hub-filter-empty a { color: var(--jsb-gold); font-weight: 700; text-decoration: none; }
.jsb-hub-filter-empty a:hover { text-decoration: underline; }

.jsb-hub-section-title {
	font-family: 'Plus Jakarta Sans', sans-serif; font-size: 24px; font-weight: 800;
	color: var(--jsb-blue); margin: 0 0 18px; padding-bottom: 12px; border-bottom: 2px solid var(--jsb-gold);
}

/* FAQ + CTA reuse existing .jsb-faq styles; CTA block below */
.jsb-hub-faq { margin: 56px 20px 0; }
.jsb-hub-faq .jsb-faq-list { margin-top: 4px; }
.jsb-hub-cta {
	background: var(--jsb-blue); color: #fff; text-align: center;
	margin: 64px 20px 20px; padding: 64px 28px; border-radius: 16px;
	position: relative; overflow: hidden;
}
.jsb-hub-cta::before {
	content: ''; position: absolute; top: -120px; right: -120px;
	width: 340px; height: 340px; border-radius: 50%;
	background: radial-gradient(circle, rgba(201, 168, 76, 0.22) 0%, transparent 70%);
}
.jsb-hub-cta h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 30px; font-weight: 800; color: #fff; margin: 0 0 12px; }
.jsb-hub-cta p { color: rgba(255, 255, 255, 0.78); font-size: 15.5px; max-width: 720px; margin: 0 auto 28px; line-height: 1.65; }
.jsb-hub-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Parent-page index ([jsb_hub_index]) */
.jsb-hub-index { background: #fff; border: 1px solid var(--jsb-line); border-radius: 12px; padding: 26px 28px; margin-top: 30px; }


.jsb-hub-nav { background: #fff; border: 1px solid var(--jsb-line); border-radius: 12px; padding: 22px 24px; margin-bottom: 22px; }
.jsb-hub-nav-label { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; color: #6B7280; margin: 6px 0 10px; }
.jsb-hub-nav-label:first-child { margin-top: 0; }
.jsb-hub-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.jsb-hub-chips:last-child { margin-bottom: 0; }
.jsb-hub-chip {
	background: var(--jsb-bg-light); border: 1px solid var(--jsb-line); color: var(--jsb-blue);
	font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; text-decoration: none; transition: 0.25s;
}
.jsb-hub-chip:hover { border-color: var(--jsb-gold); color: var(--jsb-gold); }
.jsb-hub-chip.is-active { background: var(--jsb-blue); border-color: var(--jsb-blue); color: #fff; }
.jsb-hub-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 18px; }
.jsb-filter-chip {
	background: #fff; border: 1.5px solid var(--jsb-line); color: var(--jsb-blue); font-weight: 700; font-size: 13.5px;
	padding: 9px 18px; border-radius: 999px; cursor: pointer; transition: 0.25s;
}
.jsb-filter-chip:hover { border-color: var(--jsb-gold); }
.jsb-filter-chip.is-active { background: var(--jsb-gold); border-color: var(--jsb-gold); color: var(--jsb-blue); }
.jsb-hub-count { font-size: 14px; color: #6B7280; margin-bottom: 16px; }

/* ---------------- Contact form ---------------- */
.jsb-contact { max-width: 860px; margin: 40px auto 0; padding: 0 20px; }
.jsb-contact-card { background: #fff; border: 1px solid var(--jsb-line); border-radius: 16px; padding: 40px 44px; box-shadow: 0 30px 60px rgba(8, 24, 69, 0.12); }
.jsb-contact-card h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 24px; font-weight: 800; color: var(--jsb-blue); margin: 0 0 8px; }
.jsb-contact-hint { font-size: 13.5px; color: #6B7280; margin: 0 0 26px; }
.jsb-f-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.jsb-f-field { margin-bottom: 18px; }
.jsb-f-field label { display: block; font-size: 12px; font-weight: 700; color: #6B7280; text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.3px; }
.jsb-f-field input,
.jsb-f-field select,
.jsb-f-field textarea {
	width: 100%; background: #F3F4F6; border: 1px solid var(--jsb-line); border-radius: 6px;
	padding: 12px; color: #1F2937; font-family: inherit; font-size: 14.5px;
}
.jsb-f-field input:focus, .jsb-f-field select:focus, .jsb-f-field textarea:focus { outline: 2px solid var(--jsb-gold); outline-offset: 1px; background: #fff; }
.jsb-f-submit { width: 100%; text-align: center; padding: 17px; font-size: 16px; box-shadow: 0 4px 15px rgba(201, 168, 76, 0.3); }
.jsb-f-privacy { font-size: 11px; color: #9CA3AF; text-align: center; margin: 14px 0 0; }

/* ---------------- Responsive ---------------- */
@media (max-width: 1100px) {
	.jsb-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jsb-trends-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
	.jsb-hero { grid-template-columns: 1fr; }
	.jsb-hero-media { position: static; }
	.jsb-card-grid { grid-template-columns: repeat(2, 1fr); }
	.jsb-dual-cards { grid-template-columns: 1fr; }
	.jsb-hub-layout { grid-template-columns: 1fr; }
	.jsb-hub-side { order: 1; }
	.jsb-hub-main { order: 2; }
	.jsb-hub-side-links { flex-direction: row; flex-wrap: wrap; }
	.jsb-hub-side-link { flex: 1 1 45%; }
}
@media (max-width: 640px) {
	.jsb-product-title { font-size: 30px; }
	.jsb-card-grid { grid-template-columns: 1fr; }
	.jsb-f-grid-2 { grid-template-columns: 1fr; }
	.jsb-detail-block { padding: 24px 20px; }
	.jsb-hub-hero { margin: 0 calc(50% - 50vw); padding: 0; }
	.jsb-hub-hero-inner { padding: 26px 20px 36px; }
	.jsb-hub-hero-title { font-size: 28px; }
	.jsb-hub-trends { margin: 24px 12px 0; }
	.jsb-trends-grid { grid-template-columns: 1fr; }
	.jsb-trend-card { padding: 20px 18px; }
	.jsb-hub-layout { padding: 0 12px; }
	.jsb-hub-grid { grid-template-columns: 1fr; }
	.jsb-hub-faq { margin: 44px 12px 0; }
	.jsb-hub-cta { margin: 48px 12px 12px; padding: 46px 20px; }
	.jsb-hub-cta h2 { font-size: 24px; }
	.jsb-hub-side-link { flex: 1 1 100%; }
	.jsb-hub-index { padding: 20px 16px; }
}

/* ---------------- Block 4: Upstream R&D & Ingredient Synergy Matrix ----------------
   White background, deep blue headings, matte gold accents. Synergy items form a
   2-column grid on desktop / 1 column on mobile; barriers are a distinct white card
   list below with gold check bullets. Internal links render as normal text links. */
.jsb-hub-synergy { margin: 56px 20px 0; }
.jsb-synergy-head { margin-bottom: 14px; }
.jsb-synergy-eyebrow {
	display: block; font-size: 12px; font-weight: 800; text-transform: uppercase;
	letter-spacing: 1.2px; color: var(--jsb-gold); margin: 0 0 6px;
}
.jsb-synergy-sub {
	font-family: 'Plus Jakarta Sans', sans-serif; font-size: 19px; font-weight: 800;
	color: var(--jsb-blue); margin: 0 0 14px; line-height: 1.3;
}
.jsb-synergy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.jsb-synergy-item {
	background: #fff; border: 1px solid var(--jsb-line); border-left: 4px solid var(--jsb-gold);
	border-radius: 10px; padding: 20px 22px; min-width: 0;
	box-shadow: 0 4px 15px rgba(8, 24, 69, 0.05); overflow-wrap: break-word;
	display: flex; flex-direction: column;
}
.jsb-synergy-item h4 {
	font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 800;
	color: var(--jsb-blue); margin: 0 0 8px; line-height: 1.3;
}
.jsb-synergy-item p { font-size: 14px; color: var(--jsb-text-muted); margin: 0 0 10px; line-height: 1.6; }
.jsb-synergy-links { margin: auto 0 0 !important; font-size: 13.5px; }
.jsb-synergy-links a {
	color: var(--jsb-gold-dark); font-weight: 700; text-decoration: none;
	border-bottom: 1px solid rgba(201, 168, 76, 0.45);
}
.jsb-synergy-links a:hover { text-decoration: underline; border-bottom-color: transparent; }

.jsb-barriers-title { margin-top: 26px; }
.jsb-barriers {
	background: #fff; border: 1px solid var(--jsb-line); border-radius: 12px;
	padding: 22px 24px; display: grid; gap: 16px;
}
.jsb-barrier {
	position: relative; padding-left: 30px; min-width: 0; overflow-wrap: break-word;
}
.jsb-barrier::before {
	content: '\2713'; position: absolute; left: 0; top: 1px;
	width: 20px; height: 20px; border-radius: 50%;
	background: var(--jsb-gold); color: #fff; font-size: 11px; font-weight: 800;
	display: flex; align-items: center; justify-content: center;
}
.jsb-barrier strong {
	display: block; font-family: 'Plus Jakarta Sans', sans-serif;
	color: var(--jsb-blue); font-size: 14.5px; font-weight: 800; margin-bottom: 3px;
}
.jsb-barrier span { display: block; color: var(--jsb-text-muted); font-size: 13.5px; line-height: 1.6; }

/* ---------------- Block 5: Recommended Dosage Forms & Custom Packaging ----------------
   3 format/packaging cards on desktop (1 column on mobile) + a bottom packaging CTA. */
.jsb-hub-packaging { margin: 56px 20px 0; }
.jsb-pack-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.jsb-pack-card {
	background: #fff; border: 1px solid var(--jsb-line); border-top: 4px solid var(--jsb-gold);
	border-radius: 12px; padding: 24px 22px; display: flex; flex-direction: column; min-width: 0;
	box-shadow: 0 4px 15px rgba(8, 24, 69, 0.05); overflow-wrap: break-word;
}
.jsb-pack-card h3 {
	font-family: 'Plus Jakarta Sans', sans-serif; font-size: 17px; font-weight: 800;
	color: var(--jsb-blue); margin: 0 0 14px; line-height: 1.3;
}
.jsb-pack-field { font-size: 13.5px; color: var(--jsb-text-muted); margin: 0 0 12px; line-height: 1.6; }
.jsb-pack-field:last-child { margin-bottom: 0; }
.jsb-pack-field strong {
	display: block; font-size: 11px; font-weight: 800; text-transform: uppercase;
	letter-spacing: 0.6px; color: var(--jsb-gold); margin: 0 0 4px;
}
.jsb-pack-cta {
	margin-top: 26px; background: var(--jsb-bg-light); border: 1px solid var(--jsb-line);
	border-radius: 12px; padding: 20px 24px;
	display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; text-align: center;
}
.jsb-pack-cta span { color: var(--jsb-blue); font-size: 14.5px; font-weight: 600; }
.jsb-pack-cta .jsb-btn { padding: 12px 24px; font-size: 14px; white-space: normal; }

/* ---------------- Block 4 / Block 5 responsive ---------------- */
@media (max-width: 1100px) {
	.jsb-pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.jsb-hub-synergy { margin: 44px 12px 0; }
	.jsb-synergy-grid { grid-template-columns: 1fr; }
	.jsb-barriers { padding: 18px 16px; gap: 14px; }
	.jsb-hub-packaging { margin: 44px 12px 0; }
	.jsb-pack-grid { grid-template-columns: 1fr; }
	.jsb-pack-card { padding: 20px 18px; }
	.jsb-pack-cta { flex-direction: column; }
}