/**
 * TOPEX — 区块标题 h2 样式（主题色 #b91504）
 *
 * 用法：在 h2 上添加对应 class 即可。
 *
 * 1) 胶囊边框（外圈白底描边 + 左侧红底白字）
 *    <h2 class="topex-h2-pill"><span>Products Description</span></h2>
 *    仅写 h2 文字时，the_content 会自动包一层 span
 *
 * 2) 渐变条（左实色向右渐隐）
 *    <h2 class="topex-h2-gradient">Products Description</h2>
 *
 * 3) 下划线强调（文字 + 底部分割线 + 左侧加粗色条）
 *    <h2 class="topex-h2-line">Product Picture</h2>
 */

:root {
	--topex-heading-red: #b91504;
}

/* —— 1. 胶囊边框：外圈白底描边 + 左侧红底标签 —— */
h2.topex-h2-pill,
.topex-h2-pill {
	display: grid;
	grid-template-columns: max-content 1fr;
	align-items: center;
	width: 100%;
	margin: 0 0 24px;
	padding: 4px;
	border: 1px solid var(--topex-heading-red);
	border-radius: 999px;
	background-color: #fff;
	box-sizing: border-box;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	color: #fff;
	min-height: 42px;
}

/* 左侧红底（与文字同宽，由 grid 第一列撑开） */
h2.topex-h2-pill::before,
.topex-h2-pill::before {
	content: "";
	grid-column: 1;
	grid-row: 1;
	z-index: 0;
	align-self: stretch;
	justify-self: stretch;
	width: 100%;
	min-height: 34px;
	background-color: var(--topex-heading-red);
	border-radius: 999px;
}

h2.topex-h2-pill > span,
.topex-h2-pill > span {
	position: relative;
	z-index: 1;
	grid-column: 1;
	grid-row: 1;
	display: inline-block;
	max-width: 100%;
	padding: 8px 22px;
	color: #fff;
	background: transparent;
	border-radius: 999px;
	box-sizing: border-box;
	font-size: 16px;
	line-height: 1.35;
}


/* —— 2. 渐变条 —— */
h2.topex-h2-gradient,
.topex-h2-gradient {
	display: block;
	width: 100%;
	margin: 0 0 24px;
	padding: 10px 24px;
	box-sizing: border-box;
	border: none;
	border-radius: 4px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	color: #fff;
	background: linear-gradient(
		90deg,
		var(--topex-heading-red) 0%,
		var(--topex-heading-red) 22%,
		rgba(185, 21, 4, 0.55) 45%,
		rgba(185, 21, 4, 0.15) 70%,
		rgba(185, 21, 4, 0) 100%
	);
}

/* —— 3. 下划线强调 —— */
h2.topex-h2-line,
.topex-h2-line {
	position: relative;
	margin: 0 0 20px;
	padding: 0 0 14px;
	border: none;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--topex-heading-red);
}

h2.topex-h2-line::before,
.topex-h2-line::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 52px;
	height: 4px;
	background-color: var(--topex-heading-red);
}

h2.topex-h2-line::after,
.topex-h2-line::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background-color: #e0e0e0;
	z-index: -1;
}

/* WPBakery / 编辑器内同效果 */
.wpb_text_column h2.topex-h2-pill,
.wpb_text_column h2.topex-h2-gradient,
.wpb_text_column h2.topex-h2-line,
.pd-template.pd-meto h2.topex-h2-pill,
.pd-template.pd-meto h2.topex-h2-gradient,
.pd-template.pd-meto h2.topex-h2-line {
	font-family: inherit;
}

@media (max-width: 767px) {
	h2.topex-h2-pill,
	.topex-h2-pill,
	h2.topex-h2-gradient,
	.topex-h2-gradient {
		font-size: 15px;
	}

	h2.topex-h2-line,
	.topex-h2-line {
		font-size: 17px;
	}
}