/*
Theme Name: HW Solar
Theme URI: https://hw-solar.com/
Description: HW Solar 品牌子主题。继承 Sunpal 主题（父主题）的全部视觉样式，但把 Logo、导航、
             公司信息、页脚联系方式、首页文案与数字全部改为「后台可编辑」，不再硬编码。
Author: HW Solar
Author URI: https://hw-solar.com/
Template: sunpal
Version: 1.3.2
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hw-solar
Tags: business, custom-logo, custom-menu, translation-ready
*/

/* ==========================================================================
   子主题自带样式：只放「父主题没有、但 HW Solar 需要」的东西。
   父主题的 static/css/*.css 与 style.css 由父主题自己加载，此处不重复。
   ========================================================================== */

/* 文字版 Logo（未在后台上传 Logo 图片时显示） */
.logo .hw-logo-text {
	display: flex;
	align-items: center;
	gap: 8px;
	line-height: 1;
	white-space: nowrap;
}

.logo .hw-logo-text .hw-logo-mark {
	display: inline-block;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: linear-gradient(135deg, #0f7a3d 0%, #35b25c 55%, #8ed46a 100%);
	flex: 0 0 auto;
}

.logo .hw-logo-text .hw-logo-words {
	display: flex;
	flex-direction: column;
}

.logo .hw-logo-text .hw-logo-words b {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: .5px;
	color: #0f7a3d;
}

.logo .hw-logo-text .hw-logo-words em {
	font-size: 11px;
	font-style: normal;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: #666;
}

/* 自定义 Logo：父主题 .logo a{height:60%} 配 .logo img{max-height:100%}，
   图片又自带 width/height 属性，结果是「高度被压扁、宽度还是原图的 631px」，
   方形徽标被拉成一根横条。这里把高度定死、宽度交回浏览器按比例算。 */
.logo a,
.logo .custom-logo-link {
	height: auto;
}

.logo img,
.logo .custom-logo,
.logo img.hw-logo-img {
	width: auto;
	/* 46px × 1.2：头部 Logo 整体放大约 20%。
	   后面那个 min() 是保险：头部栏高度 0.7rem 是按视口宽度缩放的
	   （sunpal 的 rem.js），窄一些的笔记本上头部栏会变矮，
	   让 Logo 最多占头部高度的 92%，不至于顶到上下边框。 */
	height: min(55px, calc(var(--header_height) * .92));
	max-width: 360px;  /* 300px × 1.2：宽度一起放大，宽扁的 Logo 才不会被压扁 */
	max-height: 55px;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   首页首屏
   父主题的 .banner .swiper-slide 高度靠 padding-bottom:37% 撑，宽度完全交给
   Swiper 的 JS 去写。JS 一不执行（本站就被插件坑过一次）slide 宽度就是 0，
   首屏整块空白。所以按「有几张图」分三种形态，全部不依赖脚本：
     .hw-banner-text   0 张图 → 纯 CSS 文字首屏
     .hw-banner-single 1 张图 → CSS 给满宽度
     （2 张以上才用 Swiper 轮播，脚本在 assets/js/hw-banner.js）
   -------------------------------------------------------------------------- */

/* 轮播/单图都先给宽度兜底；Swiper 会用自己的行内样式覆盖它 */
.banner .swiper-slide {
	width: 100%;
}

/* 文字首屏 */
.banner .hw-hero-text {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 90px 6%;
	min-height: 530px;
	background: linear-gradient(120deg, #0a5330 0%, #0f7a3d 55%, #24a05b 100%);
	overflow: hidden;
}

/* 用细网格暗示光伏板，避免一大块纯色显得空 */
.banner .hw-hero-text::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
	background-size: 72px 72px;
	pointer-events: none;
}

.banner.hw-banner-text .hw-hero-text > * {
	position: relative;
	z-index: 1;
}

/* 文字首屏：slide 不再靠 padding 撑高，交给 .hw-hero-text 自己撑 */
.banner.hw-banner-text .swiper-wrapper {
	display: block;
}

.banner.hw-banner-text .swiper-slide {
	display: block;
	padding-bottom: 0;
}

/* 单图：不初始化 Swiper，用 CSS 摆平 */
.banner.hw-banner-single .swiper-wrapper,
.banner.hw-banner-single .swiper-slide {
	display: block;
}

/* 没有轮播时不要留没用的箭头和圆点 */
.banner.hw-banner-text .banner-pagination,
.banner.hw-banner-text .banner-button-prev,
.banner.hw-banner-text .banner-button-next,
.banner.hw-banner-single .banner-pagination,
.banner.hw-banner-single .banner-button-prev,
.banner.hw-banner-single .banner-button-next {
	display: none;
}

@media (max-width: 1024px) {
	.banner .hw-hero-text {
		min-height: 440px;
		padding: 70px 6%;
	}
}

.banner .hw-hero-text h1 {
	color: #fff;
	font-size: 44px;
	font-weight: 700;
	line-height: 1.25;
	max-width: 1000px;
}

/* 仅供屏幕阅读器与搜索引擎识别的主标题 */
.hw-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.banner .hw-hero-text p {
	color: rgba(255, 255, 255, .92);
	font-size: 17px;
	line-height: 1.8;
	margin-top: 18px;
	max-width: 820px;
}

.banner .hw-hero-text .hw-hero-btns {
	margin-top: 30px;
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: center;
}

.banner .hw-hero-text .hw-hero-btns a {
	display: inline-block;
	padding: 13px 30px;
	border-radius: 4px;
	font-size: 15px;
	background: #fff;
	color: #0b5c2e;
	font-weight: 600;
}

.banner .hw-hero-text .hw-hero-btns a.ghost {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .75);
	color: #fff;
}

@media (max-width: 767px) {
	.banner .hw-hero-text h1 { font-size: 26px; }
	.banner .hw-hero-text p { font-size: 14px; }
	.banner .hw-hero-text { min-height: 380px; padding: 56px 6%; }
	.logo .hw-logo-text .hw-logo-words b { font-size: 19px; }
	.logo img,
	.logo .custom-logo,
	.logo img.hw-logo-img { height: 46px; max-height: 46px; } /* 38px × 1.2 */

	/* 产品卡在小屏两列 */
	.h_products .h_product_list ul li,
	.h_products .h_product_list .active_our { width: 48% !important; min-height: 120px; }
}

@media (max-width: 480px) {
	/* 手机上产品卡一行一个，标题才不会被挤断 */
	.h_products .h_product_list ul li,
	.h_products .h_product_list .active_our { width: 100% !important; }
}

/* 产品卡片：没有缩略图时不要留空框 */
.h_product_list li .img.is-empty,
.h_product_list li .i_tit.is-empty {
	display: none;
}

/* 服务卡片：没有上传图标时用色块占位，避免布局塌陷 */
.service_list li .hw-svc-placeholder {
	width: 72px;
	height: 72px;
	margin: 0 auto;
	border-radius: 50%;
	background: linear-gradient(135deg, #0f7a3d, #8ed46a);
}

/* 页脚联系信息的链接颜色跟随父主题，仅修正换行 */
.footer .hw-footer-contact .hw-contact-line {
	word-break: break-word;
}

/* 内页 H1（父主题内页原本没有 H1） */
.hw-page-title {
	padding: 120px 0 30px;
}

/* 内页 hero：父主题用 .in_banner .tit h3，全站没有 H1。
   这里把标题换成 h1 并补一条同值规则，外观不变。
   同时给没有特色图的页面一个可见的底色——父主题没给 .in_banner 背景，
   白底白字时页面标题实际是看不见的。 */
.in_banner {
	background: linear-gradient(120deg, #0b5c2e 0%, #12854a 100%);
	min-height: 300px;
}

.in_banner .tit h1 {
	color: #fff;
	font-size: .5rem;
	font-weight: bold;
	line-height: 1.2;
}

/* 统计数字：父主题用 ::after 自动补 "+"，对「2023」这类数值是错的。
   改为由「单位/后缀」字段自己控制。 */
.h_about_list h3::after {
	content: none;
}

/* 售后段落没有背景图时用绿色色块，避免白字落在白底上看不见。 */
.h_after_service.hw-band {
	background: linear-gradient(120deg, #0b5c2e 0%, #12854a 100%);
	min-height: 300px;
	padding: 64px 0;
	box-sizing: border-box;
}

/* 产品区没有设背景图时的底色 */
.h_products.hw-plain {
	background: #f6f8f7;
}

/* 产品卡：父主题假设每张卡里都有一张大图，于是把「当前」那张放大到 35% 宽，
   并在它背后压一块灰底（.active_our::before）。我们的产品页还没有照片，
   那个效果只剩一块难看的灰。这里统一成等宽卡片网格，四张卡排成一行。
   （后台给某个产品页设了特色图，图片会自动出现在卡里。） */
.h_products .h_product_list ul.active {
	flex-wrap: wrap;
	justify-content: center;
	gap: 2% 2%;
}

.h_products .h_product_list ul li,
.h_products .h_product_list .active_our {
	width: 23.5% !important;
	min-height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	/* 原来是 2.4% 2%：百分比内边距按「包含块（整个 ul）宽度」解析，不是按卡片自己。
	   宽屏下 ul 有 1660px，上下各 40px 空白，卡片越高越显空。改成固定像素。 */
	padding: 22px 18px;
	border: 1px solid rgba(0, 0, 0, .06);
	box-sizing: border-box;
}

.h_products .h_product_list ul li.active_our::before {
	content: none;
}

.h_products .h_product_list ul li:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
}

.h_products .h_product_list ul h4 {
	border-bottom: 0;
	padding-bottom: 0;
	justify-content: center;
	font-size: .2rem;
	transition: color .3s ease;
}

.h_products .h_product_list ul li:hover h4 {
	color: var(--i_color2);
}

.h_products .h_product_list ul li .i_tit {
	width: 100%;
}

/* 页脚背景：父主题用的是参考站的浅色背景图，页脚文字写死成黑色。
   这里换成同色系的浅灰绿（保持「浅底 + 黑字」的组合，对比度才够），
   底部版权条仍是品牌绿底白字。想改成深色页脚就换下面这一行，
   同时把 .f_tit / .f_contact_list a 等文字颜色改成 #fff。 */
footer {
	background: linear-gradient(180deg, #ffffff 0%, #f1f6f2 100%);
	border-top: 1px solid rgba(0, 0, 0, .06);
}

/* 页脚 Logo 是白底方形图片，放在浅色页脚上比放在深绿底上自然 */
.f_logo img {
	max-height: 60px;
	width: auto;
}

/* 新闻列表：文章少于 3 篇时居中，不要挤在左边 */
.h_news ul {
	justify-content: center;
}

/* 文章没有特色图时，用一块浅绿占位，别留一个塌掉的空框 */
.h_news ul li .img.hw-news-noimg {
	background: linear-gradient(135deg, #e8f3ec, #d3e8dc);
}

/* 新闻卡片 */
.h_news ul li .i_tit h4 a {
	color: inherit;
}

.h_news ul li .date {
	display: block;
	margin-top: 8px;
	font-size: .13rem;
	color: #888;
}

.h_news ul li .category {
	font-size: .13rem;
	color: #0f7a3d;
}

.hw-page-title h1 {
	font-size: 36px;
	line-height: 1.3;
	font-weight: 700;
}

@media (max-width: 767px) {
	.hw-page-title { padding: 90px 0 20px; }
	.hw-page-title h1 { font-size: 24px; }
}

.hw-page-content {
	padding-bottom: 80px;
}

/* 面包屑 */
.hw-breadcrumb {
	font-size: 13px;
	color: #777;
	padding: 10px 0 0;
}

.hw-breadcrumb a {
	color: #0f7a3d;
}

/* --------------------------------------------------------------------------
   WPForms 表单（页脚询盘 / 右侧弹层 / 联系页）
   父主题把样式写死在 #wpforms-60、#wpforms-65 这种「表单 ID」上，
   一旦后台换了表单（ID 变了）样式就整块失效。这里改成按容器定位，
   换表单不用改 CSS；标签也不再隐藏——本主题的表单没有 placeholder，
   把 label 藏起来用户就不知道每个框该填什么。
   -------------------------------------------------------------------------- */
.f_form .wpforms-container,
#aside_sc_from .wpforms-container,
.hw-page-content .wpforms-container {
	width: 100%;
	margin: 0;
}

.f_form div.wpforms-container-full .wpforms-form .wpforms-field,
#aside_sc_from div.wpforms-container-full .wpforms-form .wpforms-field,
.hw-page-content div.wpforms-container-full .wpforms-form .wpforms-field {
	position: relative;
	padding: 0;
	margin: 0 0 14px;
}

.f_form div.wpforms-container-full .wpforms-form .wpforms-field-label,
#aside_sc_from div.wpforms-container-full .wpforms-form .wpforms-field-label,
.hw-page-content div.wpforms-container-full .wpforms-form .wpforms-field-label {
	display: block;
	font-size: 13px;
	line-height: 1.4;
	color: #444;
	margin-bottom: 6px;
}

.f_form div.wpforms-container-full .wpforms-form .wpforms-required-label,
#aside_sc_from div.wpforms-container-full .wpforms-form .wpforms-required-label,
.hw-page-content div.wpforms-container-full .wpforms-form .wpforms-required-label {
	color: #d63638;
	font-size: 13px;
}

.f_form div.wpforms-container-full .wpforms-form .wpforms-field-sublabel,
#aside_sc_from div.wpforms-container-full .wpforms-form .wpforms-field-sublabel,
.hw-page-content div.wpforms-container-full .wpforms-form .wpforms-field-sublabel {
	display: none !important;
}

.f_form div.wpforms-container-full .wpforms-form input[type="text"],
.f_form div.wpforms-container-full .wpforms-form input[type="email"],
.f_form div.wpforms-container-full .wpforms-form input[type="tel"],
.f_form div.wpforms-container-full .wpforms-form textarea,
#aside_sc_from div.wpforms-container-full .wpforms-form input[type="text"],
#aside_sc_from div.wpforms-container-full .wpforms-form input[type="email"],
#aside_sc_from div.wpforms-container-full .wpforms-form input[type="tel"],
#aside_sc_from div.wpforms-container-full .wpforms-form textarea,
.hw-page-content div.wpforms-container-full .wpforms-form input[type="text"],
.hw-page-content div.wpforms-container-full .wpforms-form input[type="email"],
.hw-page-content div.wpforms-container-full .wpforms-form input[type="tel"],
.hw-page-content div.wpforms-container-full .wpforms-form textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	height: 46px;
	line-height: 46px;
	padding: 0 14px;
	font-size: 15px;
	color: #222;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .14);
	border-radius: 4px;
	transition: border-color .3s ease;
}

.f_form div.wpforms-container-full .wpforms-form textarea,
#aside_sc_from div.wpforms-container-full .wpforms-form textarea,
.hw-page-content div.wpforms-container-full .wpforms-form textarea {
	height: 110px;
	line-height: 22px;
	padding: 12px 14px;
	resize: vertical;
}

.f_form div.wpforms-container-full .wpforms-form input:focus,
.f_form div.wpforms-container-full .wpforms-form textarea:focus,
#aside_sc_from div.wpforms-container-full .wpforms-form input:focus,
#aside_sc_from div.wpforms-container-full .wpforms-form textarea:focus {
	outline: none;
	border-color: #0f7a3d;
}

.f_form div.wpforms-container-full .wpforms-form .wpforms-field-row,
#aside_sc_from div.wpforms-container-full .wpforms-form .wpforms-field-row,
.hw-page-content div.wpforms-container-full .wpforms-form .wpforms-field-row {
	width: 100%;
	max-width: 100%;
}

.f_form div.wpforms-container-full .wpforms-form .wpforms-field-row-block,
#aside_sc_from div.wpforms-container-full .wpforms-form .wpforms-field-row-block,
.hw-page-content div.wpforms-container-full .wpforms-form .wpforms-field-row-block {
	width: calc(50% - 6px);
	float: left;
	padding: 0;
}

.f_form div.wpforms-container-full .wpforms-form .wpforms-field-row-block:last-child,
#aside_sc_from div.wpforms-container-full .wpforms-form .wpforms-field-row-block:last-child,
.hw-page-content div.wpforms-container-full .wpforms-form .wpforms-field-row-block:last-child {
	margin-left: 12px;
}

.f_form div.wpforms-container-full .wpforms-form .wpforms-submit-container,
#aside_sc_from div.wpforms-container-full .wpforms-form .wpforms-submit-container,
.hw-page-content div.wpforms-container-full .wpforms-form .wpforms-submit-container {
	text-align: left;
	padding: 0;
	margin: 4px 0 0;
}

.f_form div.wpforms-container-full .wpforms-form button[type="submit"],
.f_form div.wpforms-container-full .wpforms-form input[type="submit"],
#aside_sc_from div.wpforms-container-full .wpforms-form button[type="submit"],
.hw-page-content div.wpforms-container-full .wpforms-form button[type="submit"],
.f_form .wpforms-submit,
#aside_sc_from .wpforms-submit,
.hw-page-content .wpforms-submit {
	display: inline-block !important;
	width: auto !important;
	min-width: 190px;
	height: 48px !important;
	line-height: 46px !important;
	padding: 0 30px !important;
	margin: 0 !important;
	font-size: 15px !important;
	font-weight: 700;
	letter-spacing: .3px;
	color: #fff !important;
	background: #0f7a3d !important;
	border: 1px solid #0f7a3d !important;
	border-radius: 4px;
	text-transform: none;
	cursor: pointer;
	transition: background .3s ease, border-color .3s ease;
}

.f_form div.wpforms-container-full .wpforms-form button[type="submit"]:hover,
#aside_sc_from div.wpforms-container-full .wpforms-form button[type="submit"]:hover,
.hw-page-content div.wpforms-container-full .wpforms-form button[type="submit"]:hover,
.f_form .wpforms-submit:hover,
#aside_sc_from .wpforms-submit:hover,
.hw-page-content .wpforms-submit:hover {
	color: #fff !important;
	background: #0b5c2e !important;
	border-color: #0b5c2e !important;
}

.wpforms-error {
	font-size: 12px;
	color: #d63638;
}

/* 表单第一行（First / Last）要在小屏改成上下排 */
@media (max-width: 560px) {
	.f_form div.wpforms-container-full .wpforms-form .wpforms-field-row-block,
	#aside_sc_from div.wpforms-container-full .wpforms-form .wpforms-field-row-block,
	.hw-page-content div.wpforms-container-full .wpforms-form .wpforms-field-row-block {
		width: 100%;
		float: none;
	}

	.f_form div.wpforms-container-full .wpforms-form .wpforms-field-row-block:last-child,
	#aside_sc_from div.wpforms-container-full .wpforms-form .wpforms-field-row-block:last-child,
	.hw-page-content div.wpforms-container-full .wpforms-form .wpforms-field-row-block:last-child {
		margin-left: 0;
		margin-top: 14px;
	}
}

/* --------------------------------------------------------------------------
   电话栏：国旗 + 国际区号（.hw-phone-field，脚本 assets/js/hw-phone.js）
   选择器和输入框并排、边框拼在一起，看着像一个控件。
   -------------------------------------------------------------------------- */
.f_form div.wpforms-container-full .wpforms-form .hw-phone-input-wrap,
#aside_sc_from div.wpforms-container-full .wpforms-form .hw-phone-input-wrap,
.hw-page-content div.wpforms-container-full .wpforms-form .hw-phone-input-wrap {
	display: flex;
	align-items: stretch;
	width: 100%;
	max-width: 100%;
}

.f_form div.wpforms-container-full .wpforms-form .hw-phone-input-wrap .hw-phone-country,
#aside_sc_from div.wpforms-container-full .wpforms-form .hw-phone-input-wrap .hw-phone-country,
.hw-page-content div.wpforms-container-full .wpforms-form .hw-phone-input-wrap .hw-phone-country {
	flex: 0 0 auto;
	width: auto;
	max-width: 138px;
	height: 46px;
	line-height: 44px;
	margin: 0;
	padding: 0 4px 0 10px;
	font-size: 14px;
	color: #222;
	background: #f6f7f6;
	border: 1px solid rgba(0, 0, 0, .14);
	border-right: 0;
	border-radius: 4px 0 0 4px;
	box-sizing: border-box;
	cursor: pointer;
}

.f_form div.wpforms-container-full .wpforms-form .hw-phone-input-wrap .hw-phone-country:focus,
#aside_sc_from div.wpforms-container-full .wpforms-form .hw-phone-input-wrap .hw-phone-country:focus,
.hw-page-content div.wpforms-container-full .wpforms-form .hw-phone-input-wrap .hw-phone-country:focus {
	outline: none;
	border-color: #0f7a3d;
}

.f_form div.wpforms-container-full .wpforms-form .hw-phone-input-wrap input[type="tel"],
.f_form div.wpforms-container-full .wpforms-form .hw-phone-input-wrap input[type="text"],
#aside_sc_from div.wpforms-container-full .wpforms-form .hw-phone-input-wrap input[type="tel"],
#aside_sc_from div.wpforms-container-full .wpforms-form .hw-phone-input-wrap input[type="text"],
.hw-page-content div.wpforms-container-full .wpforms-form .hw-phone-input-wrap input[type="tel"],
.hw-page-content div.wpforms-container-full .wpforms-form .hw-phone-input-wrap input[type="text"] {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	border-radius: 0 4px 4px 0;
}

@media (max-width: 560px) {
	.f_form div.wpforms-container-full .wpforms-form .hw-phone-input-wrap .hw-phone-country,
	#aside_sc_from div.wpforms-container-full .wpforms-form .hw-phone-input-wrap .hw-phone-country,
	.hw-page-content div.wpforms-container-full .wpforms-form .hw-phone-input-wrap .hw-phone-country {
		max-width: 116px;
		font-size: 13px;
		padding-left: 8px;
	}
}

/* --------------------------------------------------------------------------
   页脚二维码（微信 / WhatsApp）

   位置：footer.php 里放在 .f_contact 的地址 <li> 之后 —— 也就是页脚左侧那一列的
   最下面（父主题 .f_box 是 flex-direction:row-reverse，.f_contact 在 DOM 里靠后，
   视觉上就落在最左边）。

   换图：外观 → 自定义 → 页脚二维码，从媒体库重新选一张即可，不用改代码。

   尺寸用 rem：父主题的根字号随视口在 90~120px 之间变（不是常规的 16px），
   所以 1rem ≈ 一个二维码的宽度，写 px 反而会跟版心脱节。
   ------------------------------------------------------------------------ */
.hw-qr {
	display: flex;
	flex-wrap: wrap;
	gap: .12rem;
	margin-top: .24rem;
}

.hw-qr-item {
	margin: 0;
	width: 1.7rem;
	max-width: calc(50% - .06rem);
	text-align: center;
}

/* 二维码本身多数是白底或透明底，统一给个白底卡片，
   这样在页脚浅灰绿的渐变背景上边界清楚，也更好扫。 */
.hw-qr-item img {
	display: block;
	width: 100%;
	/* height:auto 不能省：<img> 上的 height 属性会当成表现提示（presentational hint）
	   参与层叠，只写 aspect-ratio 的话高度会直接用属性值（例如 638px），方框就撑爆了。 */
	height: auto;
	/* 两张码强制同尺寸方框 + contain：
	   源图长宽比不一样时（微信 550x554、WhatsApp 543x559），
	   靠 height:auto 会出现「一张比另一张高一点」；
	   方框 + contain 让两张码永远渲染成一样大。
	   配合 tools\optimize-qr.ps1 归一化过的正方形源图，
	   码本体在两张图里占的比例也一致。 */
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 6px;
	padding: 4px;
	box-sizing: border-box;
}

.hw-qr-tip {
	margin-top: .07rem;
	font-size: .16rem;
	line-height: 1.2;
	color: var(--i_color);
	text-transform: uppercase;
}

/* 父主题把社交图标绝对定位在页脚左下角（bottom:.7rem; left:0），
   正好压在二维码这一块上。填了社交链接时给 .f_box 补上底部留白，
   把两样东西错开（手机端 .f_media 会变成普通文档流，不需要这个）。 */
@media (min-width: 768px) {
	.f_box.has-socials {
		padding-bottom: 1.15rem;
	}
}

/* ==========================================================================
   关于我们（page 49） · 联系我们（page 60）
   --------------------------------------------------------------------------
   参考站中间内容：
     https://www.sunpal-energy.com/about-sunpal
     https://www.sunpal-energy.com/contact-us
   页头和页脚不动，正文换成参考站那几段的结构，class 全部沿用父主题本来就有
   .in_about / .salesmap / .salesmap_cont / .salesmap_num / .salesmap_pic /
   .value_list / .contact_form / .contact_way / .i_tit / .i_more / .wrap /
   .p60 / .p100 / .mb30。

   这里只补父主题补不了的几条：
   A. 正文段落标题用 h3（h2 是页面模板给的页面标题），父主题 .i_tit 只给 h4
      定过字号，所以把同一套字号（含各断点）交给 .hw-tit；
   B. 内页正文默认卡在 .privacy_cont.wrap（92vw / 最大 1660px）里，
      参考站第二段深色统计带是通栏的 —— 只让关于我们这一页放开容器宽度，
      每一段内部再用自己的 .wrap 收住内容宽度；
   C. 父主题的 .salesmap_num 和 .value_list 都是 ul > li，
      而 Gutenberg 的列表项里不能嵌区块 —— 数字格和卡片改用 group，
      再把父主题给 li 的尺寸补到 group 上；
   D. 统计带的世界地图用公版 Natural Earth 数据自绘
      （tools\build-world-map.ps1），不走第三方地图素材的署名/传染授权；
      渐变底色按本站品牌绿改过 —— 想换回参考站的蓝，只改 .salesmap 那一行。
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. 正文段落标题的字号
   -------------------------------------------------------------------------- */
.privacy_cont article .hw-tit {
	font-size: .24rem;
	line-height: 1.35;
	color: var(--i_color);
	margin: 4% 0;
}

@media screen and (max-width: 1200px) {
	.privacy_cont article .hw-tit { font-size: .22rem; }
}

@media screen and (max-width: 1024px) {
	.privacy_cont article .hw-tit { font-size: .2rem; }
}

@media screen and (max-width: 768px) {
	.privacy_cont article .hw-tit { font-size: .18rem; }
}

@media screen and (max-width: 560px) {
	.privacy_cont article .hw-tit { font-size: .16rem; }
}

/* --------------------------------------------------------------------------
   B. 关于我们：正文容器通栏（内容宽度仍由每段内部的 .wrap 控制）
   -------------------------------------------------------------------------- */
.page-id-49 .privacy_cont.wrap {
	width: 100%;
	max-width: none;
}

/* 区块版的 group 渲染时，WordPress 会在里面再套一层
   .wp-block-group__inner-container（老式 group 结构）。
   多出来的这一层会让父主题那些「父 > 子」的规则全部落空：
   .in_about .wrap{display:flex}、.salesmap_num{display:flex}……
   这里只在自己搭的这几层容器上把这一层「取消掉」（display:contents），
   子块重新变成外层的直接子元素，父主题的布局规则就能正常命中。
   不动区块 47（RFQ 带）里那一层，避免影响它自己的排布。 */
.page-id-49 .in_about .wrap > .wp-block-group__inner-container,
.page-id-49 .salesmap_num > .wp-block-group__inner-container,
.page-id-49 .hw-values-row > .wp-block-group__inner-container,
.page-id-49 .hw-value-card > .wp-block-group__inner-container,
.page-id-49 .hw-value-card .img > .wp-block-group__inner-container,
.page-id-60 .hw-contact-way > .wp-block-group__inner-container {
	display: contents;
}

/* 横排（flex）里的子块不要再被区块默认 gap 顶出上下错位 */
.page-id-49 .in_about .wrap > .wp-block-group__inner-container > *,
.page-id-49 .salesmap_num > .wp-block-group__inner-container > *,
.page-id-49 .hw-values-row > .wp-block-group__inner-container > *,
.page-id-60 .hw-contact-way > .wp-block-group__inner-container > * {
	margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   C. 关于我们 · 第一段：左图 + 右文（父主题 .in_about）
   -------------------------------------------------------------------------- */
/* core/image 输出的 figure 带 block-library 的默认下边距，
   高度继续由父主题 .in_about .img::before 的 60% 撑起来。 */
.page-id-49 .in_about .img {
	margin-bottom: 0;
}

/* 公司名小标题：父主题只给 .in_about .i_tit h4 定过品牌绿 + 加粗，
   这里用的是 h3，补上同一条（参考站这一段标题就是绿色加粗体）。 */
.page-id-49 .in_about .i_tit h3 {
	color: var(--i_color2);
	font-weight: bold;
}

/* Contact Us 按钮：父主题 .i_more 是照 <a><b> 写的，
   区块编辑器输出的是 .wp-block-button > .wp-block-button__link。 */
.page-id-49 .in_about .wp-block-buttons,
.page-id-49 .in_about .wp-block-button {
	margin-bottom: 0;
}

.page-id-49 .in_about .wp-block-button.i_more .wp-block-button__link {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
	color: var(--i_color);
	font-size: .18rem;
	line-height: 1.2;
	text-decoration: none;
}

.page-id-49 .in_about .wp-block-button.i_more:hover .wp-block-button__link {
	color: #fff;
}

/* --------------------------------------------------------------------------
   D. 关于我们 · 第二段：统计带（父主题 .salesmap）
   参考站底色是蓝色渐变（#0856a1 → #6faceb），这里按本站品牌改成绿色。
   -------------------------------------------------------------------------- */
.page-id-49 .salesmap {
	background: linear-gradient(to bottom, #04592f, #0e9c58);
}

/* 世界地图：公版数据自绘的 SVG，父主题已把它绝对定位在右下角 */
.page-id-49 .salesmap_pic {
	background: url(static/images/world-map.svg) no-repeat center bottom / contain;
	aspect-ratio: 1200 / 473;
	height: auto;
	opacity: .22;
	max-width: 70%;
}

/* 统计带里的小标题：父主题只给 .salesmap_cont .i_tit h4 / p 定过白色，
   这里用的是 h3，得自己补 —— 否则会落到 .privacy_cont article * 的黑色上，
   在深绿底上几乎看不见。 */
.page-id-49 .salesmap_cont .i_tit h3 {
	color: #fff;
}

/* 数字格：补上父主题 .salesmap_num li 的宽度。
   注意必须用后代选择器 —— 区块版的 group 中间套了一层
   .wp-block-group__inner-container，直接子元素选择器命中不到。 */
.page-id-49 .salesmap_num .hw-salesmap-item {
	width: 40%;
}

/* 数字：父主题只给 .salesmap_num b / i 定过字号，这里给 h3 同一套 */
.page-id-49 .hw-salesmap-num {
	font-size: .6rem;
	line-height: 1.1;
	color: #fff;
	font-weight: bold;
	font-style: italic;
	margin: 0;
}

@media screen and (max-width: 1440px) {
	.page-id-49 .hw-salesmap-num { font-size: .52rem; }
}

@media screen and (max-width: 1366px) {
	.page-id-49 .hw-salesmap-num { font-size: .46rem; }
}

@media screen and (max-width: 1024px) {
	.page-id-49 .hw-salesmap-num { font-size: .36rem; }
}

@media screen and (max-width: 768px) {
	.page-id-49 .hw-salesmap-num { font-size: .3rem; }
}

@media screen and (max-width: 560px) {
	.page-id-49 .hw-salesmap-num { font-size: .24rem; }
}

@media screen and (max-width: 460px) {
	.page-id-49 .hw-salesmap-num { font-size: .2rem; }
}

/* --------------------------------------------------------------------------
   E. 关于我们 · 第三段：三张卡片（父主题 .value_list）
   参考站底图是一张大横图（本站没有合适的图），这里用浅绿渐变代替，
   白卡压在浅绿底上才看得清。
   -------------------------------------------------------------------------- */
.page-id-49 .value_list {
	background: linear-gradient(180deg, #f3f8f5 0%, #e2efe8 100%);
	padding: 3% 0;
	margin-top: 1rem;
}

.page-id-49 .hw-values-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding: 3% 0;
}

.page-id-49 .hw-value-card {
	width: 28%;
	min-height: 240px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 3% 2%;
	text-align: center;
	background: rgba(255, 255, 255, .94);
	border-radius: 5px;
	box-shadow: 0 8px 28px rgba(4, 60, 35, .07);
}

/* 圆形图标位：父主题 .value_list li .img 是给 <img> 写的，
   这里放的是 iconify-icon（页脚、服务卡、banner 箭头用的同一个组件）。 */
.page-id-49 .hw-value-card .img {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 132, 72, .1);
	transition: all .5s ease;
}

.page-id-49 .hw-value-card .img iconify-icon {
	font-size: .5rem;
	color: var(--i_color2);
	transition: all .5s ease;
}

.page-id-49 .hw-value-card:hover .img {
	background: var(--i_color2);
}

.page-id-49 .hw-value-card:hover .img iconify-icon {
	color: #fff;
}

.page-id-49 .hw-value-card:hover .hw-tit {
	color: var(--i_color2);
}

/* 断点跟父主题 .value_list li 保持一致（≤959px 竖排） */
@media screen and (max-width: 959px) {
	.page-id-49 .hw-value-card {
		width: 100%;
		margin: 10px auto;
	}
}

/* --------------------------------------------------------------------------
   F. 联系我们（page 60）
   表单大标题直接用父主题 .i_tit h3 的大字号（和参考站一样），
   所以这一页的标题不加 .hw-tit。
   -------------------------------------------------------------------------- */
.page-id-60 .hw-contact-way {
	display: flex;
	flex-wrap: wrap;
	gap: 0 2%;
}

/* 父主题把这条写在 .contact_way ul li 上，这里卡片是 group */
.page-id-60 .hw-contact-way .hw-contact-item {
	width: 31.8%;
	box-sizing: border-box;
	border: 1px solid #eaeaea;
	text-align: center;
	padding: 2% 0;
	margin-bottom: 3%;
}

.page-id-60 .hw-contact-way .hw-contact-item iconify-icon {
	font-size: .8rem;
	color: var(--i_color2);
}

.page-id-60 .hw-contact-way .i_tit h4 {
	margin-top: 5%;
	padding: 0 2%;
	font-weight: bold;
}

.page-id-60 .hw-contact-way .i_tit p {
	margin: 2% 0;
	padding: 0 2%;
}

/* 父主题的通用规则把 article 里的文字压成 14px/#666，链接要单独放开 */
.page-id-60 .hw-contact-way .i_tit a {
	color: var(--i_color2);
	font-size: inherit;
}

@media screen and (max-width: 767px) {
	.page-id-60 .hw-contact-way .hw-contact-item {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   G. 两页里的图标
   Vision / Mission / Values 和联系卡片的圆形图标，用的是 core/image 引
   iconify 的 SVG 直链（本站页脚、服务卡、banner 箭头本来就走 iconify）。
   -------------------------------------------------------------------------- */
.page-id-49 .hw-value-card .img .wp-block-image {
	margin: 0;
}

.page-id-49 .hw-value-card .img img {
	width: .42rem;
	height: .42rem;
	object-fit: contain;
}

/* 悬停时图标跟着圆圈一起变白（SVG 本身是品牌绿，用 filter 反白） */
.page-id-49 .hw-value-card:hover .img img {
	filter: brightness(0) invert(1);
}

.page-id-60 .contact_form .i_tit {
	text-align: center;
}

.page-id-60 .hw-contact-way .hw-contact-item .wp-block-image {
	margin: 0 auto;
}

.page-id-60 .hw-contact-way .hw-contact-item img {
	width: .8rem;
	height: .8rem;
	object-fit: contain;
}

/* 图标跟着父主题 .contact_way ul li iconify-icon 的那套阶梯缩 */
@media screen and (max-width: 1200px) {
	.page-id-60 .hw-contact-way .hw-contact-item img { width: .6rem; height: .6rem; }
}

@media screen and (max-width: 960px) {
	.page-id-60 .hw-contact-way .hw-contact-item img { width: .55rem; height: .55rem; }
}

@media screen and (max-width: 767px) {
	.page-id-60 .hw-contact-way .hw-contact-item img { width: .5rem; height: .5rem; }
}

/* 参考站的提交按钮居中（表单本身和首页共用同一个 WPForms 表单，
   所以只在本页居中，不动表单配置）。
   注意：本文件前面有一条 .hw-page-content div.wpforms-container-full …
   .wpforms-submit-container{text-align:left} 是给首页表单用的，
   它比这里的选择器权重高，所以这里带上表单 id 把它压过去。 */
.page-id-60 .contact_form #wpforms-6 .wpforms-submit-container {
	text-align: center;
}

/* --------------------------------------------------------------------------
   H. 产品详情页（66QL6-BDV）与“精选产品”同步区块

   父主题把所有内页正文压成 14px / #666 / 24px，产品页需要一套可读的
   标题、参数表和 CTA，所以在 .hw-product-detail / .hw-featured-product
   范围内重新定字号。样式统一放在子主题，页面正文只保留原生 Gutenberg 区块。
   -------------------------------------------------------------------------- */

/* 产品页：页面模板会在正文上方再输出一次页面标题，详情页只保留 banner 的 H1。 */
.hw-product-detail-page .privacy_cont.wrap > .tit {
	display: none;
}

/* 产品详情页以前靠这条把"特色图当 banner"藏掉（否则绿色 banner 会被拉成一张产品长图）。
   2026-10-23 源头已经改好：hw_in_banner() 不再取特色图，一律用后台「内页顶部 · 背景图」，
   所以这里放开，让详情页和其他内页显示同一张 banner。 */

.hw-product-detail-page .privacy_cont.wrap {
	margin-top: .35rem;
}

.privacy_cont article .hw-product-detail {
	color: #3d4843;
}

.privacy_cont article .hw-product-detail p,
.privacy_cont article .hw-product-detail li,
.privacy_cont article .hw-product-detail td,
.privacy_cont article .hw-product-detail th,
.privacy_cont article .hw-product-detail figcaption {
	color: #46524c;
	font-size: 16px;
	line-height: 1.75;
}

.privacy_cont article .hw-product-detail h2 {
	color: #111;
	font-size: 32px;
	line-height: 1.25;
	margin: 0 0 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid #e3eae6;
}

.privacy_cont article .hw-product-detail h3 {
	color: #0b5c2e;
	font-size: 22px;
	line-height: 1.35;
	margin: 30px 0 12px;
}

/* 首屏：产品图 + 型号 + 四个关键参数 + CTA */
.hw-product-hero {
	background: #f6f9f7;
	border: 1px solid #e3ebe6;
	border-radius: 6px;
	padding: 3%;
	margin-bottom: .5rem;
}

.hw-product-hero .wp-block-columns {
	align-items: center;
	gap: 5%;
	margin-bottom: 0;
}

.hw-product-hero .hw-product-media {
	background: #fff;
	border: 1px solid #edf1ef;
	border-radius: 4px;
	margin: 0;
	padding: 2%;
	text-align: center;
}

.hw-product-hero .hw-product-media img {
	display: block;
	width: 100%;
	max-width: 480px !important;
	height: auto !important;
	max-height: none;
	margin: 0 auto;
	object-fit: initial;
}

.privacy_cont article .hw-product-detail .hw-product-eyebrow {
	color: var(--i_color2);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.4;
	text-transform: uppercase;
	margin: 0 0 12px;
}

.privacy_cont article .hw-product-detail .hw-product-hero h2 {
	border: 0;
	font-size: 40px;
	line-height: 1.18;
	margin: 0 0 12px;
	padding: 0;
}

.privacy_cont article .hw-product-detail .hw-product-model {
	color: #69766f;
	font-size: 15px;
	line-height: 1.6;
	margin: 0 0 18px;
}

.privacy_cont article .hw-product-detail .hw-product-model strong {
	color: #1b2620;
	font-weight: 700;
}

.privacy_cont article .hw-product-detail .hw-product-intro {
	font-size: 16px;
	line-height: 1.8;
	margin-bottom: 24px;
}

.hw-product-hero .hw-product-facts {
	flex-wrap: nowrap !important;
	gap: 0 3%;
	margin: 22px 0 26px;
}

.hw-product-hero .hw-product-facts .wp-block-column {
	box-sizing: border-box;
	border-left: 3px solid var(--i_color2);
	padding-left: 14px;
}

.privacy_cont article .hw-product-detail .hw-product-fact-value {
	color: var(--i_color2);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.15;
	margin: 0;
	white-space: nowrap;
}

.privacy_cont article .hw-product-detail .hw-product-fact-label {
	color: #66736c;
	font-size: 12px;
	line-height: 1.4;
	margin: 5px 0 0;
}

.hw-product-actions {
	gap: 12px;
	margin-bottom: 0;
}

.hw-product-actions .wp-block-button__link {
	background: var(--i_color2);
	border: 1px solid var(--i_color2);
	border-radius: 0;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	padding: 15px 26px;
}

.hw-product-actions .wp-block-button__link:hover {
	background: #006c3a;
	border-color: #006c3a;
	color: #fff;
}

.hw-product-actions .hw-btn-outline .wp-block-button__link {
	background: transparent;
	color: var(--i_color2);
}

.hw-product-actions .hw-btn-outline .wp-block-button__link:hover {
	background: var(--i_color2);
	color: #fff;
}

/* 正文段落 */
.hw-product-section {
	margin-top: .55rem;
}

.hw-product-detail .hw-product-feature-list {
	columns: 2;
	column-gap: 6%;
	margin: 18px 0 0;
	padding-left: 1.1em;
}

.hw-product-detail .hw-product-feature-list li {
	break-inside: avoid;
	margin: 0 0 12px;
	padding-left: 2px;
}

/* 参数表：桌面自适应；窄屏保留表格语义并允许横向滚动，不截断数据。 */
.hw-product-detail .hw-spec-table {
	margin: 14px 0 20px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.hw-product-detail .hw-spec-table table {
	width: 100%;
	border: 1px solid #dfe7e2;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.55;
}

.hw-product-detail .hw-spec-table--wide table {
	min-width: 760px;
}

.hw-product-detail .hw-spec-table th {
	background: #edf6f1;
	border: 1px solid #dfe7e2;
	color: #0b5c2e;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.45;
	padding: 11px 12px;
	text-align: left;
	vertical-align: bottom;
}

.hw-product-detail .hw-spec-table td {
	border: 1px solid #e4ebe7;
	color: #3f4b45;
	font-size: 14px;
	line-height: 1.55;
	padding: 10px 12px;
	vertical-align: top;
}

.hw-product-detail .hw-spec-table tbody tr:nth-child(even) td {
	background: #fafcfb;
}

.hw-product-detail .hw-spec-table td:first-child,
.hw-product-detail .hw-spec-table th:first-child {
	font-weight: 600;
	width: 34%;
}

.hw-product-detail .hw-spec-table--wide td:not(:first-child),
.hw-product-detail .hw-spec-table--wide th:not(:first-child) {
	text-align: center;
	white-space: nowrap;
}

.hw-product-detail .hw-spec-table figcaption {
	color: #748079;
	font-size: 12px;
	line-height: 1.6;
	margin-top: 7px;
}

@media screen and (max-width: 767px) {
	.hw-product-detail .hw-spec-table--wide::before {
		content: "Swipe the table sideways to view all power classes.";
		display: block;
		color: #6c7972;
		font-size: 12px;
		line-height: 1.5;
		margin: 0 0 8px;
	}
}

/* 下载 / 询盘条 */
.hw-product-download {
	background: #fff;
	border: 1px solid #e3ebe6;
	padding: 22px 26px;
	margin: 26px 0 0;
}

.hw-product-download p {
	margin: 0 0 14px;
}

.hw-product-download .wp-block-button__link {
	background: var(--i_color2);
	border: 1px solid var(--i_color2);
	border-radius: 0;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	padding: 12px 22px;
}

.hw-product-download .wp-block-button__link:hover {
	background: #006c3a;
	border-color: #006c3a;
	color: #fff;
}

.hw-product-cta {
	background: linear-gradient(120deg, #0b5c2e 0%, #12854a 100%);
	color: #fff;
	padding: 42px 5%;
	margin-top: .55rem;
}

.privacy_cont article .hw-product-detail .hw-product-cta h2,
.privacy_cont article .hw-product-detail .hw-product-cta p {
	border: 0;
	color: #fff;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
}

.privacy_cont article .hw-product-detail .hw-product-cta h2 {
	font-size: 30px;
	margin-bottom: 12px;
}

.privacy_cont article .hw-product-detail .hw-product-cta p {
	font-size: 16px;
	max-width: 760px;
	margin-left: 0 !important;
	margin-right: auto !important;
	margin-bottom: 22px;
}

.hw-product-cta .wp-block-button__link {
	background: #fff;
	border: 1px solid #fff;
	border-radius: 0;
	color: #0b5c2e;
	font-size: 15px;
	font-weight: 700;
	padding: 15px 28px;
}

.hw-product-cta .wp-block-button__link:hover {
	background: transparent;
	color: #fff;
}

/* “精选产品”同步区块：产品列表页、太阳能板分类页共用。 */
.hw-featured-product {
	background: #f5f9f7;
	border: 1px solid #e1ebe5;
	padding: 24px 28px;
	margin: 0 0 36px;
}

.hw-featured-product .wp-block-columns {
	align-items: center;
	gap: 4%;
	margin-bottom: 0;
}

.hw-featured-product .wp-block-image {
	background: #fff;
	border: 1px solid #e7eeea;
	margin: 0;
	padding: 12px;
}

.hw-featured-product .wp-block-image img {
	display: block;
	width: 100%;
	max-height: 280px;
	margin: 0 auto;
	object-fit: contain;
}

.privacy_cont article .hw-featured-product .hw-featured-eyebrow {
	color: var(--i_color2);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.4;
	text-transform: uppercase;
	margin: 0 0 8px;
}

.privacy_cont article .hw-featured-product h2 {
	border: 0;
	color: #111;
	font-size: 28px;
	line-height: 1.28;
	margin: 0 0 10px;
	padding: 0;
}

.privacy_cont article .hw-featured-product p {
	font-size: 15px;
	line-height: 1.7;
	margin: 0 0 16px;
}

.hw-featured-product .wp-block-button__link {
	background: var(--i_color2);
	border-radius: 0;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	padding: 12px 22px;
}

/* 产品目录顶部的四款组件卡片。 */
.hw-featured-grid {
	display: block !important;
	margin: 0 0 40px;
}

.hw-featured-grid > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

.hw-featured-grid .hw-featured-card,
.hw-featured-grid .hw-featured-card > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.hw-featured-grid .hw-featured-card {
	background: #fff;
	border: 1px solid #e1ebe5;
	border-radius: 4px;
	box-sizing: border-box;
	padding: 18px;
}

.hw-featured-grid .hw-featured-card .wp-block-image {
	background: #f6f9f7;
	border: 1px solid #e7eeea;
	border-radius: 3px;
	margin: 0 0 16px;
	padding: 10px;
}

.hw-featured-grid .hw-featured-card .wp-block-image img {
	display: block;
	width: 100%;
	height: 190px;
	margin: 0 auto;
	object-fit: contain;
}

.privacy_cont article .hw-featured-grid .hw-featured-eyebrow {
	color: var(--i_color2);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	line-height: 1.4;
	margin: 0 0 7px;
	text-transform: uppercase;
}

.privacy_cont article .hw-featured-grid h3 {
	border: 0;
	color: #111;
	font-size: 20px;
	line-height: 1.3;
	margin: 0 0 8px;
	padding: 0;
}

.privacy_cont article .hw-featured-grid .hw-featured-model {
	color: #65736b;
	font-size: 13px;
	line-height: 1.55;
	margin: 0 0 12px;
}

.privacy_cont article .hw-featured-grid p {
	font-size: 14px;
	line-height: 1.65;
	margin: 0 0 16px;
}

.hw-featured-grid .wp-block-buttons {
	margin-top: auto;
}

.hw-featured-grid .wp-block-button__link {
	background: var(--i_color2);
	border-radius: 0;
	color: #fff;
	display: block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	padding: 12px 14px;
	text-align: center;
	width: 100%;
}

@media screen and (max-width: 1200px) {
	.privacy_cont article .hw-product-detail .hw-product-hero h2 { font-size: 34px; }
	.privacy_cont article .hw-product-detail h2 { font-size: 28px; }
	.privacy_cont article .hw-product-detail .hw-product-fact-value { font-size: 23px; }
	.hw-featured-grid > .wp-block-group__inner-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 1024px) {
	.hw-product-hero { padding: 5%; }
	.hw-product-hero .wp-block-columns { gap: 28px; }
	.hw-product-hero .hw-product-facts { flex-wrap: wrap !important; gap: 0 3%; }
	.hw-product-hero .hw-product-facts .wp-block-column {
		flex: 0 0 46% !important;
		max-width: 46%;
		margin-bottom: 16px;
	}
	.privacy_cont article .hw-product-detail .hw-product-hero h2 { font-size: 30px; }
	.privacy_cont article .hw-product-detail h2 { font-size: 26px; }
}

@media screen and (max-width: 767px) {
	.hw-product-hero { padding: 7% 6%; }
	.privacy_cont article .hw-product-detail .hw-product-hero h2 { font-size: 26px; }
	.privacy_cont article .hw-product-detail h2 { font-size: 23px; }
	.privacy_cont article .hw-product-detail h3 { font-size: 19px; }
	.hw-product-detail-page .in_banner .tit1 { width: 90%; }
	.hw-product-detail-page .in_banner .tit h1 { font-size: .36rem; }
	.hw-product-detail .hw-product-feature-list { columns: 1; }
	.hw-product-actions .wp-block-button,
	.hw-product-actions .wp-block-button__link { width: 100%; }
	.hw-product-actions .wp-block-button__link { text-align: center; }
	.hw-featured-product { padding: 20px; }
	.privacy_cont article .hw-featured-product h2 { font-size: 22px; }
	.hw-featured-grid > .wp-block-group__inner-container { grid-template-columns: 1fr; gap: 14px; }
	.hw-featured-grid .hw-featured-card .wp-block-image img { height: 220px; }
	.privacy_cont article .hw-product-detail .hw-product-cta h2 { font-size: 24px; }
	.hw-product-cta { padding: 32px 7%; }
}

/* --------------------------------------------------------------------------
   I. Products 页的分类卡片（同步区块 43）

   该区块来自区块主题，使用了 --wp--preset--spacing--50/70 等预设间距。
   切到当前经典主题后这些变量变成了 135px / 304px，卡片只剩 62px 文字宽。
   这里只在 Products 页把间距收回到正常卡片尺寸，并让内层群组不再按
   min-content 收缩。
   -------------------------------------------------------------------------- */
.page-id-50 .privacy_cont article .wp-block-group[style*="--wp--preset--spacing--70"] {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.page-id-50 .privacy_cont article .wp-block-columns {
	align-items: stretch;
	gap: 2%;
	margin-top: 36px !important;
}

.page-id-50 .privacy_cont article .wp-block-column {
	flex: 1 1 0;
	min-width: 0;
}

.page-id-50 .privacy_cont article .has-extra-tertiary-background-color {
	min-height: 230px;
	box-sizing: border-box;
	padding: 28px !important;
	margin-top: 18px !important;
	background: #f8fbf9 !important;
	border-color: #e1e9e4 !important;
	border-radius: 5px !important;
}

.page-id-50 .privacy_cont article .has-extra-tertiary-background-color > .wp-block-group__inner-container {
	display: contents;
}

.page-id-50 .privacy_cont article .has-extra-tertiary-background-color h3,
.page-id-50 .privacy_cont article .has-extra-tertiary-background-color h3 a {
	color: #111 !important;
	font-size: 20px !important;
	line-height: 1.35 !important;
	margin-top: 0 !important;
}

.page-id-50 .privacy_cont article .has-extra-tertiary-background-color p,
.page-id-50 .privacy_cont article .has-extra-tertiary-background-color p a {
	color: #4b5650 !important;
	font-size: 15px !important;
	line-height: 1.65 !important;
}

.page-id-50 .privacy_cont article .has-extra-tertiary-background-color p:last-child a {
	color: var(--i_color2) !important;
	font-weight: 600 !important;
}

@media screen and (max-width: 1024px) {
	.page-id-50 .privacy_cont article .has-extra-tertiary-background-color {
		padding: 22px !important;
	}
}

@media screen and (max-width: 767px) {
	.page-id-50 .privacy_cont article .wp-block-columns { gap: 0; }
	.page-id-50 .privacy_cont article .has-extra-tertiary-background-color {
		min-height: 0;
	}
}

/* Single-product category spotlight: image left, copy right. */
.privacy_cont article .hw-featured-section h2 {
	font-size: 26px;
	line-height: 1.3;
	margin: 0 0 18px;
}

.hw-featured-grid--single > .wp-block-group__inner-container {
	grid-template-columns: minmax(0, 1fr);
}

/* Solution 索引卡（/solution/ 页里的方案列表）。
   复用 .hw-featured-grid 的卡片外观，只把固定的 4 列换成自适应列：
   auto-fit 会收起空轨道，所以只有 1 个方案时卡片是一条正常宽度，不会缩成 1/4；
   上限 420px 保证方案少的时候不会被拉成整行宽。 */
.hw-featured-grid.hw-solution-grid > .wp-block-group__inner-container {
	grid-template-columns: repeat(auto-fit, minmax(300px, 420px));
	/* 列宽上限 420px，容器 1660px 时只排得下 3 列共 1260px，
	   默认会靠左堆、右边空 400px，整块看着偏左。补这条让轨道整体居中。 */
	justify-content: center;
}

/* 卡片内容居中： eyebrow / 标题 / 摘要都是 text-align: start，按钮容器也要真的居中
   （.wp-block-buttons 是 flex，只改 text-align 对它无效）。 */
.hw-featured-grid.hw-solution-grid .hw-featured-card {
	text-align: center;
}

.hw-featured-grid.hw-solution-grid .wp-block-buttons {
	justify-content: center;
}

/* 6 个方案详情页（Solution 的子页，body 上有 parent-pageid-51）里的两张图。
   原来 figure 占满正文宽度（1440 视口下 1325px），缩到一半并居中；
   手机端 50% 太小，恢复整宽。 */
.parent-pageid-51 .privacy_cont article figure.wp-block-image {
	width: 50%;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.parent-pageid-51 .privacy_cont article figure.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

@media screen and (max-width: 767px) {
	.parent-pageid-51 .privacy_cont article figure.wp-block-image {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   方案页正文排版（.hw-solution-body 只包在 6 个 Solution 子页的正文外层，
   不覆盖后面追加的 .hw-faq 区块）。
   取值来自 sunpal-energy.com 那篇 BESS 选型文章正文在 1440px 下的实测：
   段落 20px / 400 / #333 / 左对齐 / margin 20px 0，H2 24px 700，H3 20px 700，
   行高都是 normal。注意这是「文章版式」，左对齐；之前按 /utility-scale 做的
   居中大标题版式已按本条替换。
   -------------------------------------------------------------------------- */
.hw-solution-body p {
	color: #333;
	font-size: 20px;
	line-height: normal;
	margin: 20px 0;
	text-align: left;
}

.hw-solution-body h2 {
	color: #333;
	font-size: 24px;
	font-weight: 700;
	line-height: normal;
	margin: 20px 0;
	text-align: left;
}

.hw-solution-body h3 {
	color: #333;
	font-size: 20px;
	font-weight: 700;
	line-height: normal;
	margin: 20px 0;
	text-align: left;
}

.hw-solution-body > .wp-block-group__inner-container > *:first-child,
.hw-solution-body p:first-child {
	margin-top: 0;
}

.hw-solution-body p:last-child {
	margin-bottom: 0;
}

@media screen and (max-width: 767px) {
	.hw-solution-body p { font-size: 17px; margin: 16px 0; }
	.hw-solution-body h2 { font-size: 21px; }
	.hw-solution-body h3 { font-size: 18px; }
}

/* --------------------------------------------------------------------------
   /cases/ 案例网格：版式照 sunpal-energy.com/category/case 实测值 1:1 复刻
   （2026-10-22 他点名"样式设置成一模一样"）。参考站实测：
     列表 display:flex; flex-wrap:wrap; gap:0 1%
     卡片 width:32.66%; 背景 #fff; 无描边无圆角; margin-bottom:2%; transition:.5s
     悬停 margin-top:-10px（整卡上移，不是阴影）
     图框 .img::before padding-bottom:55%（≈1.82:1），img 绝对定位居中 + object-fit:cover
     文字块 padding:3% 4%；标题 font-weight:bold、两行截断（-webkit-line-clamp:2）
   我们比参考站多一行"地点 · 容量"，所以标题下方留了一行副标题的间距。
   -------------------------------------------------------------------------- */
.hw-case-grid {
	background: #f9f9f9;
	padding: 30px 0 10px;
}

.hw-case-grid > .wp-block-group__inner-container {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0 1%;
}

/* 卡片和它里面的 group 都是 constrained 布局，WordPress 会给内层容器加 max-width，
   结果卡片只占列宽的一小半。这里强制撑满，宽度由卡片自己决定。 */
.hw-case-grid .hw-case-card > .wp-block-group__inner-container {
	max-width: none;
	width: 100%;
}

.hw-case-grid .hw-case-ph,
.hw-case-grid .hw-case-ph > .wp-block-group__inner-container {
	max-width: none;
	width: 100%;
}

.hw-case-grid .hw-case-card {
	background: #fff;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	box-sizing: border-box;
	display: block;
	height: auto;
	margin: 0 0 2%;
	padding: 0;
	text-align: left;
	transition: .5s;
	width: 32.66%;
}

.hw-case-grid .hw-case-card:hover {
	box-shadow: none;
	margin-top: -10px;
	transform: none;
}

/* 图框：padding-bottom:55% 撑出比例，图片绝对定位居中裁切，和参考站同一套做法。
   height 必须带 !important，才能压过父主题 public.css 的 article img { height: initial !important }。 */
.hw-case-grid figure.wp-block-image {
	display: block;
	height: 0;
	margin: 0;
	overflow: hidden;
	padding-bottom: 55%;
	position: relative;
	width: 100%;
}

.hw-case-grid figure.wp-block-image img {
	display: block;
	height: 100% !important;
	left: 50%;
	object-fit: cover;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}

/* 占位卡（案例不满一页时才出现）：撑成和真实图框一样的 55% 盒子 */
.hw-case-grid .hw-case-ph {
	height: 0;
	margin: 0;
	overflow: hidden;
	padding-bottom: 55%;
	position: relative;
}

.hw-case-grid .hw-case-ph p {
	color: #9aa8a0;
	font-size: 13px;
	left: 50%;
	margin: 0;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

/* 文字块：参考站 .i_tit { padding: 3% 4% } + h4 { margin: 1rem 0 } 合成这里的间距 */
.hw-case-grid .hw-case-card h3 {
	-webkit-box-orient: vertical;
	color: #000;
	display: -webkit-box;
	font-size: 21.6px;
	font-weight: 700;
	-webkit-line-clamp: 2;
	line-height: 1.16;
	margin: 0;
	overflow: hidden;
	padding: 29px 17px 0;
	text-align: left;
	text-overflow: ellipsis;
}

.hw-case-grid .hw-case-meta {
	color: #333;
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
	padding: 8px 17px 29px;
	text-align: left;
}

.hw-case-pager {
	align-items: center;
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 30px;
}

.hw-case-pager .hw-case-page,
.hw-case-pager a.hw-case-page {
	border: 1px solid #dfe7e2;
	color: #333;
	display: inline-block;
	font-size: 14px;
	line-height: 1;
	min-width: 34px;
	padding: 9px 12px;
	text-align: center;
	text-decoration: none;
}

.hw-case-pager .hw-case-page.is-current {
	background: var(--i_color2, #12854a);
	border-color: var(--i_color2, #12854a);
	color: #fff;
}

@media screen and (max-width: 1024px) {
	.hw-case-grid .hw-case-card { width: 49%; }
}

/* 参考站在 767px 以下就是一列满宽（.case ul { display:block } / li { width:100% }），跟它一致 */
@media screen and (max-width: 767px) {
	.hw-case-grid .hw-case-card { width: 100%; }
	.hw-case-grid .hw-case-card:hover { margin-top: 0; }
}

.hw-featured-grid.hw-solution-grid .wp-block-post-title a,
.hw-featured-grid.hw-solution-grid .hw-featured-card h3 a {
	color: inherit;
	text-decoration: none;
}

.hw-featured-grid--single .hw-featured-card--spotlight {
	padding: 26px;
}

.hw-featured-grid--single .hw-featured-card--spotlight > .wp-block-group__inner-container {
	align-items: start;
	align-content: center;
	column-gap: 38px;
	display: grid;
	grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
	grid-template-rows: auto auto auto auto auto;
	height: 100%;
}

.hw-featured-grid--single .hw-featured-card--spotlight .wp-block-image {
	align-items: center;
	display: flex;
	grid-column: 1;
	grid-row: 1 / -1;
	justify-content: center;
	margin: 0;
	padding: 0;
}

.hw-featured-grid--single .hw-featured-card--spotlight .wp-block-image img {
	height: 340px;
	width: 100%;
}

.hw-featured-grid--single .hw-featured-card--spotlight h3,
.hw-featured-grid--single .hw-featured-card--spotlight p,
.hw-featured-grid--single .hw-featured-card--spotlight .wp-block-buttons {
	grid-column: 2;
	justify-self: stretch;
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100%;
}

.hw-featured-grid--single .hw-featured-card--spotlight .wp-block-buttons {
	justify-content: flex-start;
	margin-top: 22px;
	width: auto;
}

.hw-featured-grid--single .hw-featured-card--spotlight .wp-block-button__link {
	padding-left: 28px;
	padding-right: 28px;
	width: auto;
}

.privacy_cont article .hw-featured-grid--single .hw-featured-card--spotlight h3 {
	font-size: 30px;
	line-height: 1.22;
	margin: 0 0 10px;
}

.privacy_cont article .hw-featured-grid--single .hw-featured-card--spotlight p {
	font-size: 15px;
	line-height: 1.7;
}

@media screen and (max-width: 767px) {
	.hw-featured-grid--single .hw-featured-card--spotlight {
		padding: 18px;
	}

	.hw-featured-grid--single .hw-featured-card--spotlight > .wp-block-group__inner-container {
		display: flex;
		flex-direction: column;
	}

	.hw-featured-grid--single .hw-featured-card--spotlight .wp-block-image {
		display: block;
		margin: 0 0 16px;
		width: 100%;
	}

	.hw-featured-grid--single .hw-featured-card--spotlight .wp-block-image img {
		height: 240px;
	}

	.privacy_cont article .hw-featured-grid--single .hw-featured-card--spotlight h3 {
		font-size: 22px;
	}
}

/* Inverter directory: four columns on desktop, two on tablet. */
.hw-featured-grid--inverters > .wp-block-group__inner-container {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media screen and (max-width: 1200px) {
	.hw-featured-grid--inverters > .wp-block-group__inner-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 767px) {
	.hw-featured-grid--inverters > .wp-block-group__inner-container {
		grid-template-columns: 1fr;
	}
}

/* Inverter directory pagination: 16 product cards per page. */
.hw-featured-grid--inverters .hw-featured-card[hidden] {
	display: none !important;
}

body:not(.page-id-53) .hw-inverter-pagination {
	display: none !important;
}

.hw-inverter-pagination {
	border-top: 1px solid #e1ebe5;
	margin-top: 10px;
	padding: 18px 0 4px;
}

.hw-inverter-pagination__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: space-between;
}

.hw-inverter-pagination__summary {
	color: #65736b;
	font-size: 14px;
	line-height: 1.5;
}

.hw-inverter-pagination__pages {
	display: flex;
	gap: 8px;
}

.hw-inverter-pagination__button {
	background: #fff;
	border: 1px solid #cbdad1;
	border-radius: 3px;
	color: #0b5c2e;
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
	height: 42px;
	min-width: 42px;
	padding: 0 12px;
}

.hw-inverter-pagination__button:hover,
.hw-inverter-pagination__button:focus {
	border-color: #0b5c2e;
}

.hw-inverter-pagination__button.is-current {
	background: #0b5c2e;
	border-color: #0b5c2e;
	color: #fff;
}

@media screen and (max-width: 767px) {
	.hw-inverter-pagination__inner {
		align-items: flex-start;
		flex-direction: column;
		gap: 10px;
	}

	.hw-inverter-pagination__pages {
		width: 100%;
	}

	.hw-inverter-pagination__button {
		flex: 1 1 42px;
	}
}

/* --------------------------------------------------------------------------
   J. Products 总览：完整产品目录

   产品总览页按产品系列依次调用已有的同步产品区块。顶部提供分类跳转，
   下方每个系列保持独立区块，后台仍可单独编辑。这里只处理跳转面板、
   锚点间距和系列之间的留白。
   -------------------------------------------------------------------------- */
.hw-catalog-jump {
	background: #f5f9f7;
	border: 1px solid #dfeae3;
	border-radius: 6px;
	box-sizing: border-box;
	margin: 0 0 46px;
	padding: 30px 34px;
}

.privacy_cont article .hw-catalog-jump .hw-catalog-kicker {
	color: var(--i_color2);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.4;
	margin: 0 0 8px;
	text-transform: uppercase;
}

.privacy_cont article .hw-catalog-jump h2 {
	border: 0;
	color: #111;
	font-size: 28px;
	line-height: 1.3;
	margin: 0 0 10px;
	padding: 0;
}

.privacy_cont article .hw-catalog-jump p {
	color: #4b5650;
	font-size: 15px;
	line-height: 1.7;
	margin: 0 !important;
	max-width: 880px;
}

.hw-catalog-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}

.hw-catalog-nav .wp-block-button {
	margin: 0;
}

.hw-catalog-nav .wp-block-button__link {
	background: #fff;
	border: 1px solid #cfe0d5;
	border-radius: 4px;
	color: #0b5c2e;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	padding: 11px 17px;
}

.hw-catalog-nav .wp-block-button__link:hover,
.hw-catalog-nav .wp-block-button__link:focus {
	background: #0f7a3d;
	border-color: #0f7a3d;
	color: #fff;
}

.hw-catalog-section {
	margin: 0 0 54px;
	scroll-margin-top: 118px;
}

.hw-catalog-section:last-child {
	margin-bottom: 0;
}

.hw-catalog-section .hw-featured-grid {
	margin-bottom: 0;
}

/* 总览页每个品类只展示 4 张产品卡；完整清单仍在分类页。 */
.page-id-50 .hw-catalog-section .hw-featured-grid > .wp-block-group__inner-container > .hw-featured-card:nth-child(n+5) {
	display: none !important;
}

@media screen and (min-width: 1201px) {
	.page-id-50 #inverters .hw-featured-grid--inverters > .wp-block-group__inner-container {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.hw-catalog-more {
	margin-top: 22px;
}

.hw-catalog-more .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--i_color2);
	border-radius: 4px;
	color: var(--i_color2);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	padding: 11px 20px;
}

.hw-catalog-more .wp-block-button__link:hover,
.hw-catalog-more .wp-block-button__link:focus {
	background: var(--i_color2);
	border-color: var(--i_color2);
	color: #fff;
}

@media screen and (max-width: 767px) {
	.hw-catalog-jump {
		padding: 24px 20px;
	}

	.privacy_cont article .hw-catalog-jump h2 {
		font-size: 23px;
	}

	.hw-catalog-nav {
		gap: 8px;
	}

	.hw-catalog-nav .wp-block-button {
		flex: 1 1 calc(50% - 8px);
	}

	.hw-catalog-nav .wp-block-button__link {
		display: block;
		padding: 12px 10px;
		text-align: center;
		width: 100%;
	}

	.hw-catalog-section {
		margin-bottom: 40px;
		scroll-margin-top: 96px;
	}

	.hw-catalog-more .wp-block-button__link {
		padding: 12px 18px;
	}
}

/* --------------------------------------------------------------------------
   K. 太阳能板详情页主图（父分类 Solar Panels，page ID 52）

   4 个太阳能板详情页的主图统一为 500px 高，宽度按原图比例自适应，
   .parent-pageid-52 只命中太阳能板子页面，不影响逆变器/BESS/充电桩。
   -------------------------------------------------------------------------- */
.parent-pageid-52 .hw-product-hero .hw-product-media img {
	height: 500px !important;
	width: auto !important;
	max-width: 100% !important;
	object-fit: contain;
}

/* DQAC-7000 产品主图：固定 600px 高，保持图片原始比例 */
.page-id-479 .hw-product-hero .hw-product-media img {
	height: 600px !important;
	width: auto;
	max-width: 100% !important;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   L. 首页 Products 分类卡片缩略图

   6 个分类卡片（同步区块 43）各配一张缩略图，统一 150px 高的图框，
   object-fit: contain 保证 1.2:1 产品图和 1:1 充电桩图都不会变形。
   -------------------------------------------------------------------------- */
.hw-range-card .hw-range-thumb {
	margin: 0 0 14px;
}

.hw-range-card .hw-range-thumb img {
	display: block;
	width: 100%;
	height: 150px !important;
	max-width: 100%;
	margin: 0 auto;
	object-fit: contain;
}

@media screen and (max-width: 767px) {
	.hw-range-card .hw-range-thumb img {
		height: 130px !important;
	}
}

/* 首页 Products 区：分类页特色图作为卡片缩略图。
   原来写死 height:150px + width:100% + contain：卡片内宽在宽屏有 322px，
   而特色图都是 1.2:1 的画布，contain 后只画到 180×150，四周一大片白，
   图相对卡片显得很小。改成让图框按 6:5 走满卡片宽度——和 1.2:1 的画布同比例，
   于是三张 1.2:1 的图正好铺满，1:1 的充电桩图左右各留一点边，四张卡仍然等高。
   产品本身的视觉大小差异是图片自带白边造成的，要再统一得重做这四张特色图。 */
.h_products .h_product_list li > a {
	align-items: center;
	display: flex;
	flex-direction: column;
	width: 100%;
}

.h_products .h_product_list li .img {
	margin: 0 0 12px;
	width: 100%;
}

.h_products .h_product_list li .img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 6 / 5;
	margin: 0 auto;
	object-fit: contain;
}

.h_products .h_product_list ul.active {
	display: flex;
}

@media screen and (max-width: 767px) {
	/* 两列布局：仍然按 6:5 走满卡宽，只给个上限，免得卡片被撑得太高 */
	.h_products .h_product_list li .img img {
		max-height: 210px;
	}

	.h_products .h_product_list ul li,
	.h_products .h_product_list .active_our {
		width: 48% !important;
		padding: 18px 14px;
	}
}

@media screen and (max-width: 480px) {
	.h_products .h_product_list ul li,
	.h_products .h_product_list .active_our {
		width: 100% !important;
	}

	.h_products .h_product_list li .img img {
		max-height: 260px;
	}
}

/*
 * 首页公司简介右侧配图。
 * 父主题给 .h_about .video 设了 width:45% + padding-bottom:60%（1.667:1），
 * 1000×600 的世界地图刚好同比例；这里让图片绝对定位铺满容器，
 * object-fit:contain 保证地图边缘不会被裁掉。
 */
.h_about .video.hw-about-picture {
	background: #fff;
}

.h_about .video.hw-about-picture img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*
 * FAQ 手风琴（同步区块「HV — FAQ」）。
 * 版式对照 https://www.sunpal-energy.com/commercial 的 FAQs：
 * 灰底问题条 + 绿色 Q/A 标签 + 右侧加减号 + 浅灰答案区，一次只展开一条。
 * 内容仍是原生 core/details，后台可逐条编辑。
 */
.hw-faq {
	padding: 81px 0;
}

.hw-faq .hw-faq-title {
	margin: 0 0 35px;
	color: #000;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.3;
}

.hw-faq .hw-faq-list {
	box-sizing: border-box;
	padding: 6px 0;
	background: #fff;
}

.hw-faq details {
	margin: 0 0 2px;
	background: #f0f2f5;
	font-size: 0;
}

.hw-faq details:last-child {
	margin-bottom: 0;
}

.hw-faq details summary {
	position: relative;
	display: flex;
	align-items: center;
	gap: 9px;
	box-sizing: border-box;
	min-height: 50px;
	margin: 0;
	padding: 9px 50px 9px 18px;
	color: #000;
	font-size: 14.4px;
	line-height: 1.45;
	cursor: pointer;
	list-style: none;
}

.hw-faq details summary::-webkit-details-marker {
	display: none;
}

.hw-faq details summary::marker {
	content: "";
}

.hw-faq details summary::before {
	content: "Q :";
	flex: 0 0 auto;
	color: var(--i_color2);
	font-size: 19.8px;
	font-weight: 700;
	line-height: 1.2;
}

.hw-faq details summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 18px;
	width: 14px;
	height: 14px;
	transform: translateY(-50%);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%23333333' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hw-faq details[open] summary::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1 7h12' stroke='%23333333' stroke-width='1.6'/%3E%3C/svg%3E");
}

.hw-faq details summary:focus-visible {
	outline: 2px solid var(--i_color2);
	outline-offset: -2px;
}

.hw-faq details > .wp-block-paragraph {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	box-sizing: border-box;
	margin: 0;
	padding: 9px 18px;
	background: #f5f6f8;
	color: #333;
	font-size: 14.4px;
	line-height: 1.45;
}

.hw-faq details > .wp-block-paragraph::before {
	content: "A :";
	flex: 0 0 auto;
	color: var(--i_color2);
	font-size: 19.8px;
	font-weight: 700;
	line-height: 1.2;
}

@media screen and (max-width: 767px) {
	.hw-faq {
		padding: 56px 0;
	}

	.hw-faq .hw-faq-title {
		margin-bottom: 24px;
		font-size: 30px;
	}

	.hw-faq .hw-faq-list {
		padding: 0;
	}

	.hw-faq details summary {
		min-height: 0;
		gap: 6px;
		padding: 13px 44px 13px 14px;
		font-size: 13.5px;
	}

	.hw-faq details summary::before,
	.hw-faq details > .wp-block-paragraph::before {
		font-size: 17px;
	}

	.hw-faq details summary::after {
		right: 14px;
	}

	.hw-faq details > .wp-block-paragraph {
		gap: 6px;
		padding: 11px 14px;
		font-size: 13.5px;
	}
}

/* hw-woff2-fonts (2026-11-01)
   父主题 sunpal 的 @font-face 直接指向 static/font/*.OTF（两个共 109KB）。这里用同名
   family 覆盖成站内 woff2（53.7KB，省一半），OTF 留在第二个 src 兜底。
   @font-face 同名同 weight/style 时后定义的生效，本文件在父主题 style.css 之后加载。 */
@font-face {
	font-family: 'GilroyRegular';
	src: url('https://hw-solar.com/wp-content/uploads/2026/11/GILROY-REGULAR.woff2') format('woff2'),
		url('https://hw-solar.com/wp-content/themes/sunpal/static/font/GILROY-REGULAR.OTF') format('opentype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'GilroyBold';
	src: url('https://hw-solar.com/wp-content/uploads/2026/11/GILROY-BOLD.woff2') format('woff2'),
		url('https://hw-solar.com/wp-content/themes/sunpal/static/font/GILROY-BOLD.OTF') format('opentype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}