/*
 * 产品枢纽页（/water-meters/）专用样式：
 * 1. cs-demand-*  顶部能力展示条（原统计条位置，四格纯文本：口径覆盖 / 源头工厂 / 精度不漂移 / 无欠费增长）
 * 2. cs-ptabs-*   「The Full Range」页内切换窗口（按技术分类分页签切换产品分组）
 * theme.css 是 Tailwind 构建产物，本页新增样式一律使用这里的自定义类名。
 */

/* ---------- 能力展示条（纯文本，不带链接） ---------- */

.cs-demand-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.45rem;
	padding: 1.4rem 1.1rem;
	border: 1px solid #e0f2fe;
	border-radius: 1rem;
	background: #fff;
	text-align: center;
}

.cs-demand-value {
	font-size: 1.3rem;
	line-height: 1.25;
	font-weight: 800;
	color: #082f49;
}

.cs-demand-label {
	font-size: 0.8rem;
	line-height: 1.5;
	font-weight: 500;
	color: #0369a1;
}

@media (min-width: 1024px) {
	.cs-demand-card {
		padding: 1.6rem 1.3rem;
	}

	.cs-demand-value {
		font-size: 1.5rem;
	}
}

/* ---------- 全系列页内切换窗口 ---------- */

.cs-ptabs-nav {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 0.5rem;
	margin-bottom: 1.75rem;
	padding-bottom: 0.25rem;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.cs-ptabs-nav::-webkit-scrollbar {
	display: none;
}

.cs-ptabs-tab {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	flex: 0 0 auto;
	padding: 0.55rem 1.05rem;
	border: 1px solid #bae6fd;
	border-radius: 999px;
	background: #fff;
	font-size: 0.85rem;
	font-weight: 700;
	color: #075985;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cs-ptabs-tab:hover {
	border-color: #38bdf8;
	background: #f0f9ff;
}

.cs-ptabs-tab.is-active {
	background: #0c4a6e;
	border-color: #0c4a6e;
	color: #fff;
}

.cs-ptabs-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.35rem;
	height: 1.35rem;
	padding: 0 0.35rem;
	border-radius: 999px;
	background: #f0f9ff;
	color: #0369a1;
	font-size: 0.7rem;
	font-weight: 800;
}

.cs-ptabs-tab.is-active .cs-ptabs-count {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

.cs-ptabs-panel.is-active {
	display: block;
}

.cs-ptabs-panel[hidden] {
	display: none;
}

.cs-ptabs-more {
	margin-top: 2rem;
	text-align: center;
}

.cs-ptabs-more a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.65rem 1.4rem;
	border: 1px solid #bae6fd;
	border-radius: 999px;
	background: #fff;
	font-size: 0.85rem;
	font-weight: 700;
	color: #075985;
	text-decoration: none;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.cs-ptabs-more a:hover {
	border-color: #38bdf8;
	background: #f0f9ff;
}