/* ============================================================
   Chusoon Custom Styles (Electro Child Theme)
   电气自动化配件外贸站 · 工业蓝 + 橙色强调
   ============================================================ */

:root {
	--cs-blue: #1e3a5f;
	--cs-blue-deep: #12233d;
	--cs-orange: #f68b1e;
	--cs-bg: #f4f7fb;
}

/* ---------- 通用 ---------- */
.cs-section { padding: 54px 0; }
.cs-section-alt { background: #eef3f9; }
.cs-kicker { color: var(--cs-orange); font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; font-size: 12.5px; }
.cs-title { font-size: 30px; font-weight: 800; color: var(--cs-blue); margin: 6px 0 10px; }
.cs-lead { color: #5a6b7d; max-width: 760px; }

/* ---------- Hero ---------- */
.cs-hero {
	background:
		radial-gradient(1000px 420px at 85% -10%, rgba(246,139,30,.32), transparent 60%),
		linear-gradient(135deg, #12233d 0%, #1e3a5f 55%, #24507e 100%);
	color: #fff; padding: 76px 0 70px; position: relative; overflow: hidden;
}
.cs-hero::after {
	content: ""; position: absolute; inset: auto -6% -40% 55%; height: 110%; background:
		linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
	background-size: 34px 34px; transform: skewX(-12deg);
}
.cs-hero .container { position: relative; z-index: 2; }
.cs-hero-badge {
	display: inline-block; background: rgba(246,139,30,.16); color: #ffc98a; border: 1px solid rgba(246,139,30,.45);
	padding: 7px 16px; border-radius: 40px; font-size: 12.5px; font-weight: 600; letter-spacing: .6px; margin-bottom: 18px;
}
.cs-hero h1 { font-size: 44px; line-height: 1.16; font-weight: 800; max-width: 640px; letter-spacing: -0.5px; }
.cs-hero p.cs-hero-sub { color: #c6d4e4; font-size: 17px; max-width: 600px; margin: 16px 0 26px; }
.cs-hero .btn-hero {
	display: inline-block; background: var(--cs-orange); color: #fff !important; padding: 13px 30px;
	border-radius: 6px; font-weight: 700; margin-right: 10px; border: 1px solid var(--cs-orange);
}
.cs-hero .btn-hero:hover { background: #dd7a13; color: #fff !important; }
.cs-hero .btn-hero-ghost { background: transparent; border-color: rgba(255,255,255,.55); color: #fff !important; }
.cs-hero .btn-hero-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.cs-stats { display: flex; gap: 40px; margin-top: 46px; flex-wrap: wrap; }
.cs-stat b { display: block; font-size: 30px; color: #ffc98a; }
.cs-stat span { font-size: 13px; color: #aebfd1; }

/* ---------- 分类磁贴 ---------- */
.cs-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cs-cat {
	background: #fff; border: 1px solid #e4eaf1; border-radius: 12px; padding: 26px 20px; text-align: center;
	color: var(--cs-blue); display: block; transition: all .2s ease; position: relative; overflow: hidden;
}
.cs-cat::before { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%; background: var(--cs-orange); transform: scaleX(0); transition: transform .25s; }
.cs-cat:hover { box-shadow: 0 12px 26px rgba(30,58,95,.14); transform: translateY(-4px); color: var(--cs-blue); text-decoration: none; }
.cs-cat:hover::before { transform: scaleX(1); }
.cs-cat .cs-cat-icon { width: 60px; height: 60px; line-height: 60px; border-radius: 14px; font-size: 26px; color: #fff; margin: 0 auto 14px; }
.cs-cat h3 { font-size: 16px; font-weight: 700; margin: 0 0 4px; color: var(--cs-blue); }
.cs-cat span { font-size: 12.5px; color: #8496a8; }

/* ---------- 价值主张 ---------- */
.cs-values { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.cs-value { text-align: center; padding: 26px 16px; }
.cs-value i { font-size: 34px; color: var(--cs-orange); }
.cs-value h3 { font-size: 16.5px; margin: 14px 0 8px; color: var(--cs-blue); font-weight: 700; }
.cs-value p { font-size: 13.5px; color: #5f7183; margin: 0; }

/* ---------- 关于 / 为什么选我们 ---------- */
.cs-split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.cs-about-points { list-style: none; padding: 0; margin: 18px 0 22px; }
.cs-about-points li { padding: 8px 0 8px 30px; position: relative; color: #40546a; }
.cs-about-points li::before { content: "\2713"; position: absolute; left: 0; top: 8px; width: 20px; height: 20px; background: #e6f4ec; color: #1e9e5a; border-radius: 50%; text-align: center; font-size: 12px; line-height: 20px; font-weight: 700; }
.cs-chip { display: inline-block; background: #eef4fb; border: 1px solid #dce7f3; color: var(--cs-blue); border-radius: 8px; padding: 10px 16px; margin: 0 8px 8px 0; font-size: 13px; font-weight: 600; }
.cs-video-note { display: flex; gap: 16px; align-items: center; background: #fff; border: 1px solid #e6ecf3; border-radius: 14px; padding: 18px 20px; max-width: 460px; }
.cs-video-note i { font-size: 30px; color: var(--cs-orange); }

/* ---------- 流程 ---------- */
.cs-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; counter-reset: step; }
.cs-step { background: #fff; border: 1px solid #e7ecf3; border-radius: 14px; padding: 26px 20px 22px; position: relative; }
.cs-step .n { font-size: 30px; font-weight: 800; color: rgba(30,58,95,.14); position: absolute; top: 14px; right: 18px; }
.cs-step h3 { font-size: 16px; color: var(--cs-blue); font-weight: 700; margin: 8px 0; }
.cs-step p { font-size: 13.5px; color: #60738a; margin: 0; }

/* ---------- CTA ---------- */
.cs-cta {
	background:
		radial-gradient(700px 300px at 12% 0%, rgba(246,139,30,.3), transparent 60%),
		linear-gradient(120deg, #12233d, #1e3a5f);
	border-radius: 16px; color: #fff; padding: 48px 44px; display: flex; gap: 30px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.cs-cta h2 { font-size: 26px; margin: 0 0 8px; font-weight: 800; }
.cs-cta p { color: #b9c9da; margin: 0; }
.cs-cta a { background: var(--cs-orange); color: #fff; padding: 12px 28px; border-radius: 6px; font-weight: 700; }
.cs-cta a:hover { background: #dd7a13; color: #fff; }

/* ---------- 产品区块标题 ---------- */
.cs-products-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 8px; }
.cs-products-head .btn { font-weight: 600; }

/* WooCommerce 产品网格在此页面下统一样式 */
ul.products { list-style: none; padding: 0; }
ul.products li.product { text-align: left; }

/* 响应式 */
@media (max-width: 991px) {
	.cs-cats, .cs-values, .cs-steps { grid-template-columns: repeat(2,1fr); }
	.cs-split { grid-template-columns: 1fr; gap: 24px; }
	.cs-hero h1 { font-size: 32px; }
}
@media (max-width: 575px) {
	.cs-cats, .cs-values, .cs-steps { grid-template-columns: 1fr; }
	.cs-stats { gap: 22px; }
	.cs-cta { padding: 30px 22px; }
}

/* 联系页表单标题区微调 */
.page-template-default .entry-content h2 { color: var(--cs-blue); }