@font-face {
	font-display: swap;
	font-family: "GTF Adieu TRIAL";
	font-style: normal;
	font-weight: 400;
	src: url("../fonts/GTFAdieuTRIAL-Regular.otf") format("opentype");
}

@font-face {
	font-display: swap;
	font-family: "GTF Adieu TRIAL";
	font-style: normal;
	font-weight: 700;
	src: url("../fonts/GTFAdieuTRIAL-Bold.otf") format("opentype");
}

@font-face {
	font-display: swap;
	font-family: "GTF Adieu TRIAL";
	font-style: normal;
	font-weight: 300;
	src: url("../fonts/GTFAdieuTRIAL-Light.otf") format("opentype");
}

@font-face {
	font-display: swap;
	font-family: "Source Han Sans CN";
	font-style: normal;
	font-weight: 400;
	src: url("../fonts/SourceHanSansCN-Regular.otf") format("opentype");
}

:root {
	--phomi-blue: #70c7d1;
	--phomi-font: "GTF Adieu TRIAL";
}

html,
body {
	margin: 0;
	overflow-x: hidden;
}

body.page-template-page-esolar-facade,
body.page-template-page-esolar-facade #page,
body.page-template-page-esolar-facade #content,
body.page-template-page-esolar-facade .site-content,
body.page-template-page-esolar-facade .ast-container,
body.page-template-page-esolar-facade .content-area,
body.page-template-page-esolar-facade .site-main,
body.page-template-page-esolar-facade .entry-content {
	margin: 0;
	max-width: none;
	padding: 0;
}

html:has(body.page-template-page-esolar-facade) {
	margin-top: 0 !important;
}

body.page-template-page-esolar-facade .site-header,
body.page-template-page-esolar-facade .site-footer,
body.page-template-page-esolar-facade #wpadminbar {
	display: none;
}

.ast-plain-container.ast-no-sidebar #primary.phomi-esolar,
#primary.phomi-esolar,
.phomi-esolar {
	background: #fff;
	color: #000;
	font-family: var(--phomi-font);
	margin: 0;
	min-height: 100vh;
	padding: 0;
}

/* 压过 Astra 全局 h1-h6 默认颜色,让标题继承所在区块的文字颜色 */
body.page-template-page-esolar-facade h1,
body.page-template-page-esolar-facade h2,
body.page-template-page-esolar-facade h3,
body.page-template-page-esolar-facade h4,
body.page-template-page-esolar-facade h5,
body.page-template-page-esolar-facade h6 {
	color: inherit;
}

body.page-template-page-esolar-facade .phomi-inquiry h2 {
	color: var(--phomi-blue);
}

.phomi-esolar *,
.phomi-esolar *::before,
.phomi-esolar *::after {
	box-sizing: border-box;
}

.phomi-esolar img {
	display: block;
	max-width: 100%;
}

.phomi-header {
	height: 4.6875vw;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 40;
}

.phomi-header__inner {
	height: 100%;
	margin: 0 auto;
	max-width: 1920px;
	position: relative;
}

.phomi-logo {
	aspect-ratio: 2269 / 875;
	display: block;
	left: 15.104167vw;
	line-height: 0;
	position: absolute;
	top: 0.572917vw;
	width: 8.333333vw;
}

.phomi-logo img {
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.phomi-nav {
	left: 26.822917vw;
	position: absolute;
	top: 1.822917vw;
	white-space: nowrap;
}

.phomi-nav ul {
	align-items: flex-start;
	display: flex;
	gap: 2.1875vw;
	list-style: none;
	margin: 0;
	padding: 0;
}

.phomi-nav li {
	line-height: 1;
	position: relative;
}

.phomi-nav a {
	align-items: center;
	color: #fff;
	display: inline-flex;
	font-size: 0.729167vw;
	font-weight: 400;
	line-height: 1.041667vw;
	text-decoration: none;
	transition: color 0.28s ease, opacity 0.28s ease, transform 0.28s ease;
}

.phomi-nav > ul > li:nth-child(-n+6) > a,
.phomi-nav > ul > li:last-child > a {
	/* text-transform: uppercase; */
}

.phomi-nav .has-menu > a::after {
	border-bottom: 1px solid currentColor;
	border-right: 1px solid currentColor;
	content: "";
	height: 0.260417vw;
	margin-left: 0.416667vw;
	position: relative;
	top: -0.026042vw;
	transform: rotate(45deg);
	transition: transform 0.24s ease;
	width: 0.260417vw;
}

.phomi-nav > ul > li > a:hover,
.phomi-nav > ul > li > a:focus-visible {
	color: #fff;
	opacity: 1;
	transform: translateY(-1px) scale(1.08);
}

.phomi-nav .has-menu:hover > a::after,
.phomi-nav .has-menu:focus-within > a::after {
	transform: rotate(225deg);
}

.phomi-mega-menu {
	background: #fff;
	height: 346px;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	top: 90px;
	transform: translateY(-8px);
	transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s ease;
	visibility: hidden;
	width: 100vw;
	z-index: 30;
}

.phomi-mega-menu::before {
	pointer-events: none;
	content: "";
	height: 90px;
	left: 0;
	position: absolute;
	top: -90px;
	width: 100%;
}

.phomi-mega-menu__panel {
	background: #1a1a1a;
	height: 320px;
	position: relative;
	width: 100%;
}

.phomi-menu-scrim {
	background: rgba(0, 0, 0, 0.5);
	bottom: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	right: 0;
	top: 436px;
	transition: opacity 0.24s ease, visibility 0.24s ease;
	visibility: hidden;
	z-index: 15;
}

.phomi-nav .phomi-mega-card {
	color: #fff;
	display: block !important;
	left: 455px;
	position: absolute;
	text-decoration: none;
	top: 50px;
	transition: filter 0.28s ease, transform 0.28s ease;
	width: 310px;
}

.phomi-nav .phomi-mega-card img {
	height: 186px;
	object-fit: cover;
	width: 310px;
}

.phomi-nav .phomi-mega-card span {
	color: #fff;
	display: block;
	font-size: 14px;
	font-weight: 400;
	line-height: 28px;
	margin-top: 8px;
	text-align: left;
	/* text-transform: capitalize; */
}

.phomi-nav .phomi-mega-card:nth-child(2) {
	left: 805px;
}

.phomi-nav .phomi-mega-card:nth-child(3) {
	left: 1155px;
}

.phomi-nav .has-mega-menu--about .phomi-mega-card:nth-child(1) {
	left: 295px;
}

.phomi-nav .has-mega-menu--about .phomi-mega-card:nth-child(2) {
	left: 635px;
}

.phomi-nav .has-mega-menu--about .phomi-mega-card:nth-child(3) {
	left: 975px;
}

.phomi-nav .has-mega-menu--about .phomi-mega-card:nth-child(4) {
	left: 1315px;
}

.phomi-nav .has-mega-menu--case .phomi-mega-menu {
	height: 596px;
}

.phomi-nav .has-mega-menu--case .phomi-mega-menu__panel {
	height: 570px;
}

.phomi-nav .has-mega-menu--application .phomi-mega-card:nth-child(1),
.phomi-nav .has-mega-menu--case .phomi-mega-card:nth-child(1) {
	left: 280px;
}

.phomi-nav .has-mega-menu--application .phomi-mega-card:nth-child(2),
.phomi-nav .has-mega-menu--case .phomi-mega-card:nth-child(2) {
	left: 620px;
}

.phomi-nav .has-mega-menu--application .phomi-mega-card:nth-child(3),
.phomi-nav .has-mega-menu--case .phomi-mega-card:nth-child(3) {
	left: 960px;
}

.phomi-nav .has-mega-menu--application .phomi-mega-card:nth-child(4),
.phomi-nav .has-mega-menu--case .phomi-mega-card:nth-child(4) {
	left: 1300px;
}

.phomi-nav .has-mega-menu--application .phomi-mega-card:nth-child(5),
.phomi-nav .has-mega-menu--case .phomi-mega-card:nth-child(5) {
	left: 450px;
	top: 310px;
}

.phomi-nav .has-mega-menu--application .phomi-mega-card:nth-child(6),
.phomi-nav .has-mega-menu--case .phomi-mega-card:nth-child(6) {
	left: 790px;
	top: 310px;
}

.phomi-nav .has-mega-menu:hover .phomi-mega-menu,
.phomi-nav .has-mega-menu:focus-within .phomi-mega-menu,
.phomi-header.is-mega-active .has-mega-menu.is-mega-open .phomi-mega-menu {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
	visibility: visible;
}

.phomi-esolar-hero {
	background: none;
	display: block;
	height: auto;
	min-height: 0;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.phomi-esolar-hero__media {
	line-height: 0;
	position: relative;
	width: 100%;
}

.phomi-esolar-hero__media::after {
	background: linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08));
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.phomi-esolar-hero__media img {
	display: block;
	height: auto;
	width: 100%;
}

.phomi-esolar-hero .phomi-header,
.phomi-esolar-hero .phomi-menu-scrim {
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 2;
}

.phomi-esolar-hero__copy {
	bottom: 3.645833vw;
	color: #fff;
	left: 3.645833vw;
	position: absolute;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	z-index: 2;
}

.phomi-esolar-hero__copy h1 {
	color: #fff;
	/* 70px @ 1920 → 3.645833vw，随屏宽等比缩放，上限 70px */
	font-size: min(70px, 3.645833vw);
	font-weight: 700;
	line-height: 1;
	margin: 0;
	max-width: calc(100vw - 7.291666vw);
	/* text-transform: uppercase; */
}

.phomi-esolar-hero__copy p {
	color: #fff;
	/* 20px @ 1920 → 1.041667vw，随屏宽等比缩放，上限 20px */
	font-size: min(20px, 1.041667vw);
	font-weight: 400;
	line-height: 1.2;
	margin: 4px 0 0;
	/* text-transform: none; */
}

.phomi-esolar-intro {
	background: #000;
	color: #fff;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 41.09375vw;
	min-height: 52.083333vw;
	overflow: hidden;
	/* bug#3904：区块高度靠 min-height(52.08vw) 撑着，宽度变小后文案下方的黑色区域会被压没；
	   固定 62px 底部留白，与 technology / edisplay 同一区域保持一致。 */
	padding: 6.25vw 2.552083vw 62px 3.645833vw;
	position: relative;
}

.phomi-esolar-eyebrow {
	color: #79bdc8;
	font-size: clamp(18px, 1.25vw, 24px);
	font-weight: 300;
	line-height: 1.666667;
	margin: 0 0 0.729167vw;
}

.phomi-esolar-eyebrow .phomi-eyebrow-brand {
	/* text-transform: lowercase; */
}

.phomi-esolar-eyebrow .phomi-eyebrow-reg {
	color: #444444;
	display: inline-block;
	font-size: 40px;
	position: relative;
	top: 4px;
	font-weight: 300;
	line-height: 1;
	margin: 0 3px 0 1px;
	vertical-align: middle;
}

.phomi-esolar-eyebrow .phomi-eyebrow-suffix {
	/* text-transform: capitalize; */
}

body.page-template-page-esolar-facade .phomi-esolar-intro h2 {
	color: var(--phomi-blue);
	font-size: clamp(42px, 3.125vw, 60px);
	font-weight: 400;
	line-height: 1;
	margin: 0;
	max-width: 1025px;
	/* text-transform: uppercase; */
}

.phomi-esolar-intro__copy {
	min-width: 0;
}

.phomi-esolar-intro__copy > p:last-child {
	font-size: clamp(16px, 1.041667vw, 20px);
	font-weight: 300;
	line-height: 1.5;
	margin: 3.385417vw 0 0;
	max-width: 1057px;
	overflow-wrap: break-word;
}

.phomi-esolar-intro__visual {
	position: absolute;
	right: 2.637vw;
	top: 0;
	width: 36.1835vw;
	height: 43.524vw;
}

/* 桌面端：让文案子元素直接参与 grid，图片按 grid 区域（从标题所在行开始）绝对定位，
   顶部与左侧大标题对齐；图片不参与文档流，不改变区块高度，文案始终留在左列内换行。
   底部按原设计在渐隐结束处裁掉（原先靠区块 overflow 恰好裁到这里）。 */
@media (min-width: 1025px) {
	.phomi-esolar-intro {
		align-content: start;
		grid-template-rows: auto auto 1fr;
	}

	.phomi-esolar-intro__copy {
		display: contents;
	}

	.phomi-esolar-intro__copy > * {
		align-self: start;
		grid-column: 1;
		min-width: 0;
	}

	.phomi-esolar-intro__visual {
		clip-path: inset(0 0 7.672vw 0);
		grid-column: 2;
		grid-row: 2 / -1;
	}

}

.phomi-esolar-intro__visual::after {
	background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%);
	bottom: 7.672vw;
	content: "";
	height: 21.510vw;
	left: 0;
	position: absolute;
	width: 100%;
}

.phomi-esolar-intro__visual img,
.phomi-esolar-intro__visual video {
	height: 100%;
	object-fit: cover;
	object-position: center top;
	width: 100%;
	mask-composite: intersect;
	mask-image: var(--esolar-mask-a, none), var(--esolar-mask-b, none);
	mask-position: -3.451px -12.555px, 0 -19.458px;
	mask-repeat: no-repeat;
	mask-size: 641.975px 700.649px, 723.334px 779.17px;
	-webkit-mask-composite: source-in;
	-webkit-mask-image: var(--esolar-mask-a, none), var(--esolar-mask-b, none);
	-webkit-mask-position: -3.451px -12.555px, 0 -19.458px;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 641.975px 700.649px, 723.334px 779.17px;
}

@media (min-width: 1025px) {
	/* bug#3983：原来用 ::after 黑色渐变盖住图片、再由 clip-path 裁底。浏览器缩放时裁切线落在小数像素上，
	   图片和黑色遮罩各自按抗锯齿覆盖率混合，裁切线那一行会漏出一条亮线。
	   改为把同样的渐隐作为图片自身的第三层 mask（区块底色为黑，透明 = 渐隐到黑），裁切线处图片已完全透明。
	   必须写在上面两条基础规则之后，否则同优先级下会被基础规则按源码顺序覆盖。 */
	.phomi-esolar-intro__visual::after {
		content: none;
	}

	.phomi-esolar-intro__visual img,
	.phomi-esolar-intro__visual video {
		mask-image: var(--esolar-mask-a, none), var(--esolar-mask-b, none), linear-gradient(to top, transparent 0, transparent 7.672vw, #000 29.182vw);
		mask-position: -3.451px -12.555px, 0 -19.458px, 0 0;
		mask-size: 641.975px 700.649px, 723.334px 779.17px, 100% 100%;
		-webkit-mask-image: var(--esolar-mask-a, none), var(--esolar-mask-b, none), linear-gradient(to top, transparent 0, transparent 7.672vw, #000 29.182vw);
		-webkit-mask-position: -3.451px -12.555px, 0 -19.458px, 0 0;
		-webkit-mask-size: 641.975px 700.649px, 723.334px 779.17px, 100% 100%;
	}
}

.phomi-esolar-advantages,
.phomi-esolar-applications {
	background: #f9f9f9;
}

.phomi-esolar-advantages {
	padding: 6.25vw 3.645833vw 6.770833vw;
}

.phomi-esolar-section-heading {
	border-bottom: 1px solid #000;
	padding-bottom: 2.96875vw;
}

.phomi-esolar-section-heading h2,
.phomi-esolar-textures h2,
.phomi-esolar-applications h2,
.phomi-esolar-parameters h2 {
	color: #000;
	font-size: clamp(36px, 2.5vw, 48px);
	font-weight: 400;
	line-height: 1.333333;
	margin: 0;
	/* text-transform: uppercase; */
}

.phomi-esolar-section-heading p {
	color: #000;
	font-size: clamp(18px, 1.25vw, 24px);
	font-weight: 300;
	line-height: 1.083333;
	margin: 0.729167vw 0 0;
}

.phomi-esolar-advantages__grid {
	display: grid;
	gap: 5.208333vw;
	padding-top: 3.385417vw;
}

.phomi-esolar-advantage {
	align-items: start;
	display: grid;
	gap: 3.75vw;
	grid-template-columns: minmax(0, 40.3125vw) minmax(0, 48.645833vw);
}

.phomi-esolar-advantage.is-reversed {
	grid-template-columns: minmax(0, 40.3125vw) minmax(0, 40.3125vw);
	padding-left: 0;
}

.phomi-esolar-advantage.is-reversed .phomi-esolar-advantage__copy {
	order: 2;
}

.phomi-esolar-advantage h3 {
	color: #000;
	font-size: clamp(24px, 1.666667vw, 32px);
	font-weight: 300;
	line-height: 1.875;
	margin: 0;
}

.phomi-esolar-advantage p {
	color: #666;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.714286;
	margin: 0.833333vw 0 0;
	max-width: 774px;
}

.phomi-esolar-advantage__media {
	height: 16.875vw;
	min-height: 230px;
	overflow: hidden;
	width: 100%;
}

.phomi-esolar-advantage__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s ease;
	width: 100%;
}

.phomi-esolar-advantage:hover .phomi-esolar-advantage__media img,
.phomi-esolar-advantage:focus-within .phomi-esolar-advantage__media img {
	transform: scale(1.1);
}

.phomi-esolar-textures {
	background: #fff;
	padding: 6.25vw 3.645833vw 6.25vw;
	text-align: center;
}

.phomi-esolar-textures__grid {
	display: grid;
	gap: 3.125vw 1.354167vw;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 3.645833vw;
	text-align: left;
}

.phomi-esolar-textures__page {
	display: contents;
}

.phomi-esolar-textures__page[hidden] {
	display: none;
}

.phomi-esolar-textures article > .phomi-esolar-textures__media {
	display: block;
	overflow: hidden;
}

.phomi-esolar-textures article img {
	display: block;
	height: 19.270833vw;
	min-height: 260px;
	object-fit: cover;
	transition: transform 0.45s ease;
	width: 100%;
}

.phomi-esolar-textures article:hover img,
.phomi-esolar-textures article:focus-within img {
	transform: scale(1.1);
}

.phomi-esolar-textures h3 {
	color: #000;
	font-size: clamp(15px, 0.9375vw, 18px);
	font-weight: 300;
	line-height: 1.777778;
	margin: 1.041667vw 0 0;
	/* text-transform: capitalize; */
}

.phomi-esolar-textures p {
	color: #666;
	font-size: 12px;
	font-weight: 300;
	line-height: 1.666667;
	margin: 0.208333vw 0 0;
}

.phomi-esolar-applications {
	padding: 6.25vw 3.645833vw;
}

.phomi-esolar-applications__grid {
	display: grid;
	gap: 3.333333vw 1.354167vw;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 3.645833vw;
}

/* 右对齐容器：在 block / flex section 下都可靠（responsive ≤1024 会把 section 设为 flex，float 无效） */
.phomi-esolar-applications__cta {
	display: flex;
	justify-content: flex-end;
	margin-top: clamp(24px, 2.604167vw, 50px);
	width: 100%;
}

.phomi-esolar-applications article .phomi-esolar-applications__media {
	height: 20vw;
	min-height: 260px;
	overflow: hidden;
	width: 100%;
}

.phomi-esolar-applications article:nth-child(-n+3) .phomi-esolar-applications__media {
	height: 19.270833vw;
}

.phomi-esolar-applications article .phomi-esolar-applications__media img,
.phomi-esolar-applications article .phomi-esolar-applications__media video {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s ease;
	width: 100%;
}

.phomi-esolar-applications article:hover .phomi-esolar-applications__media img,
.phomi-esolar-applications article:hover .phomi-esolar-applications__media video,
.phomi-esolar-applications article:focus-within .phomi-esolar-applications__media img,
.phomi-esolar-applications article:focus-within .phomi-esolar-applications__media video {
	transform: scale(1.1);
}

.phomi-esolar-applications h3 {
	color: #000;
	font-size: clamp(18px, 1.25vw, 24px);
	font-weight: 300;
	line-height: 1;
	margin: 1.458333vw 0 0;
}

.phomi-esolar-applications p {
	color: #666;
	display: -webkit-box;
	font-size: clamp(14px, 0.9375vw, 18px);
	font-weight: 300;
	line-height: 1.444444;
	margin: 1.041667vw 0 0;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.phomi-esolar-applications article:nth-child(-n+3) p {
	font-size: 16px;
	line-height: 26px;
}

.phomi-esolar-applications article a {
	display: block;
	text-decoration: none;
}

.phomi-esolar-applications article a h3 {
	color: #000;
}

.phomi-esolar-applications article a:hover h3 {
	color: var(--phomi-blue);
}

.phomi-esolar-outline-link {
	align-items: center;
	border: var(--phomi-btn-border-width) solid #000;
	box-sizing: border-box;
	color: #000;
	display: flex;
	flex: 0 0 auto;
	/* 18px @ 1920 */
	font-size: clamp(13px, 0.9375vw, 18px);
	gap: clamp(6px, 0.625vw, 12px);
	/* 60px @ 1920 */
	height: clamp(40px, 3.125vw, 60px);
	justify-content: center;
	line-height: 1.2;
	margin: 0;
	padding-inline: clamp(12px, 1.25vw, 28px);
	text-decoration: none;
	transition: transform 0.28s ease;
	white-space: nowrap;
	/* 216px @ 1920 */
	width: min(100%, clamp(140px, 11.25vw, 216px));
}

.phomi-esolar-outline-link:hover,
.phomi-esolar-outline-link:focus-visible {
	transform: scale(1.05);
}

.phomi-esolar-outline-link img {
	display: block;
	flex: 0 0 auto;
	/* icon 随屏宽等比，上限配合 60px 按钮高度 */
	height: clamp(20px, 1.666667vw, 32px);
	object-fit: contain;
	width: clamp(20px, 1.666667vw, 32px);
}

.phomi-esolar-parameters {
	background: #fff;
	clear: both;
	padding: 6.25vw 3.645833vw;
	text-align: center;
}

.phomi-esolar-accordion {
	margin-top: 4.166667vw;
	text-align: left;
}

.phomi-esolar-accordion__item {
	border-top: 1px solid #d8d8d8;
}

.phomi-esolar-accordion__item:last-child {
	border-bottom: 1px solid #d8d8d8;
}

.phomi-esolar-accordion__item > button {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: #000;
	cursor: pointer;
	display: flex;
	/* 18px @ 1920，随屏宽等比缩放 */
	font-family: var(--phomi-font);
	font-size: clamp(14px, 0.9375vw, 18px);
	font-weight: 400;
	justify-content: space-between;
	line-height: 1;
	/* 76px @ 1920 */
	min-height: clamp(52px, 3.958333vw, 76px);
	padding: 0;
	text-align: left;
	/* text-transform: uppercase; */
	width: 100%;
}

.phomi-esolar-accordion__item i {
	/* 40px @ 1920 */
	flex-shrink: 0;
	height: clamp(28px, 2.083333vw, 40px);
	position: relative;
	width: clamp(28px, 2.083333vw, 40px);
}

.phomi-esolar-accordion__item i::before,
.phomi-esolar-accordion__item i::after {
	background: #000;
	content: "";
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

.phomi-esolar-accordion__item i::before {
	height: max(1px, min(2px, 0.104167vw));
	/* 28px @ 1920 */
	width: clamp(18px, 1.458333vw, 28px);
}

.phomi-esolar-accordion__item i::after {
	height: clamp(18px, 1.458333vw, 28px);
	transition: transform 0.2s ease;
	width: max(1px, min(2px, 0.104167vw));
}

.phomi-esolar-accordion__item.is-open i::after {
	transform: translate(-50%, -50%) scaleY(0);
}

.phomi-esolar-table {
	padding-bottom: 1.875vw;
	width: 100%;
}

.phomi-esolar-table > div {
	display: grid;
	/* 423px @ 1920 → 22.03125vw */
	grid-template-columns: minmax(0, min(423px, 22.03125vw)) minmax(0, 1fr);
	/* 70px @ 1920 */
	min-height: clamp(48px, 3.645833vw, 70px);
}

.phomi-esolar-table > div:nth-child(odd):not(.is-heading) {
	background: #f2f2f2;
}

.phomi-esolar-table > div.is-heading {
	background: var(--phomi-blue);
	color: #fff;
	/* 60px @ 1920 */
	min-height: clamp(40px, 3.125vw, 60px);
}

.phomi-esolar-table span {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	/* 14px @ 1920 */
	font-size: clamp(11px, 0.729167vw, 14px);
	font-weight: 300;
	/* 24px @ 1920 */
	line-height: clamp(16px, 1.25vw, 24px);
	min-width: 0;
	overflow-wrap: break-word;
	/* 25px @ 1920 */
	padding: clamp(8px, 0.625vw, 12px) clamp(12px, 1.302083vw, 25px);
	word-break: normal;
}

.phomi-esolar-table .is-heading span {
	/* 16px @ 1920 */
	font-size: clamp(12px, 0.833333vw, 16px);
}

/* Authoritative Honors & Industry Certifications：与 eCovering 页（product.css）保持一致 */
.phomi-esolar .phomi-product-certifications {
	align-items: center;
	display: grid;
	gap: 1.166667vw;
	grid-template-columns: 1.45fr 1.5fr;
	margin: 0 auto;
	max-width: 1600px;
	padding: 180px 0 90px;
	width: 83.333333vw;
}

.phomi-esolar .phomi-product-certifications__image {
	height: 500px;
	margin-left: auto;
	width: 605px;
}

.phomi-esolar .phomi-product-certifications__image img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.phomi-esolar .phomi-product-certifications > div:last-child {
	display: flex;
	flex-direction: column;
	gap: 74px;
}

.phomi-esolar .phomi-product-certifications h2 {
	color: #000;
	font-family: "GTF Adieu TRIAL";
	font-size: clamp(28px, 2.083vw, 40px);
	font-weight: 300;
	letter-spacing: 0;
	line-height: 32px;
	margin: -25px 0 0;
}

.phomi-esolar .phomi-product-certifications ul {
	display: flex;
	flex-direction: column;
	gap: 33px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.phomi-esolar .phomi-product-certifications li {
	font-family: "GTF Adieu TRIAL";
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 20px;
	margin: 0;
	padding-left: 28px;
	position: relative;
}

.phomi-esolar .phomi-product-certifications li::before {
	background: url("../../../../uploads/figma-assets/cert-list-icon.png") center / contain no-repeat;
	content: "";
	height: 18px;
	left: 0;
	position: absolute;
	top: 1px;
	width: 16px;
}

@media (max-width: 1180px) {
	.phomi-esolar .phomi-product-certifications {
		grid-template-columns: 1fr;
	}

	.phomi-esolar .phomi-product-certifications__image {
		margin: 0 auto;
		max-width: 100%;
	}

	.phomi-esolar .phomi-product-certifications h2 {
		margin-top: 24px;
	}
}

@media (max-width: 720px) {
	.phomi-esolar .phomi-product-certifications {
		padding: 56px 22px;
		width: 100%;
	}
}

.phomi-esolar-solution {
	background: var(--solution-image) center / cover no-repeat;
	color: #fff;
	height: 52.083333vw;
	min-height: 720px;
	overflow: hidden;
	position: relative;
}

.phomi-esolar-solution::after {
	background: rgba(0, 0, 0, 0.08);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

.phomi-esolar-solution .phomi-solution-bg-video {
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
	z-index: 0;
}

.phomi-esolar-solution__copy,
.phomi-esolar-solution__tabs {
	z-index: 1;
}

.phomi-esolar-solution__copy {
	left: 3.645833vw;
	position: absolute;
	top: 6.25vw;
}

.phomi-esolar-solution h2 {
	color: #fff;
	font-size: clamp(52px, 4.166667vw, 80px);
	font-weight: 300;
	line-height: 1;
	margin: 0;
}

.phomi-esolar-solution__stack {
	font-size: clamp(18px, 1.25vw, 24px);
	font-weight: 300;
	line-height: 0.666667;
	margin: 1.5625vw 0 3.125vw;
	/* text-transform: capitalize; */
}

.phomi-esolar-solution__copy p:last-child {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.428571;
	margin: 0;
	max-width: 737px;
	/* text-transform: capitalize; */
}

.phomi-esolar-solution__copy[hidden] {
	display: none;
}

.phomi-esolar-solution__tabs {
	bottom: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	left: 0;
	position: absolute;
	width: 100%;
}

.phomi-esolar-solution__tabs a {
	align-items: center;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 0;
	box-shadow: none;
	color: #fff;
	display: flex;
	font: 24px / 1 var(--phomi-font);
	font-weight: 300;
	height: 100px;
	justify-content: center;
	text-decoration: none;
}

.phomi-esolar-solution__tabs a:not(.is-active) {
	background: rgba(0, 0, 0, 0.02);
}

/* ---- Way to install (shared template) — eSolarFacade overrides ---- */

@media (min-width: 1025px) {
	body.page-template-page-esolar-facade .phomi-install-section h2 {
		font-size: clamp(48px, 3.125vw, 60px);
		font-weight: 300;
		line-height: 44px;
	}

	/* bug#3977：按 1920 设计稿（706 / 313 / 761px）等比缩放，避免浏览器缩放时列变窄而高度固定导致图片被裁切 */
	body.page-template-page-esolar-facade .phomi-install-section__panel {
		column-gap: 16.302083vw;
		grid-template-columns: minmax(0, 36.770833vw) minmax(0, 39.635417vw);
		row-gap: 40px;
	}

	body.page-template-page-esolar-facade .phomi-install-section__diagram {
		aspect-ratio: 706 / 611;
		height: auto;
		min-height: 0;
		width: 100%;
	}

	body.page-template-page-esolar-facade .phomi-install-section__preview {
		aspect-ratio: 761 / 591;
		height: auto;
		margin-top: 0.677083vw;
		min-height: 0;
	}

	body.page-template-page-esolar-facade .phomi-install-section__copy h3 {
		font-weight: 300;
	}

	body.page-template-page-esolar-facade .phomi-install-section__copy p {
		font-weight: 300;
	}
}

@media (max-width: 1180px) {
	.phomi-logo {
		left: 32px;
		top: 12px;
		width: 132px;
	}

	.phomi-nav {
		left: 210px;
		top: 26px;
	}

	.phomi-nav ul {
		gap: 18px;
	}

	.phomi-nav a {
		font-size: 12px;
		line-height: 16px;
	}

	.phomi-nav .has-menu > a::after {
		height: 5px;
		width: 5px;
	}
}

@media (max-width: 1024px) {
	.phomi-esolar-intro,
	.phomi-esolar-advantage,
	.phomi-esolar-advantage.is-reversed,

	.phomi-esolar-intro {
		padding: 96px 32px 0;
	}

	.phomi-esolar-intro__visual {
		height: auto;
		margin-top: 40px;
		overflow: hidden;
		position: static;
		right: auto;
		top: auto;
		width: 100%;
	}

	/* 窄屏下 visual 变成流式宽度，1920 设计稿里的固定 px 遮罩会把图片裁掉、露出大片黑底，
	   这里与 eDisplay 技术区域保持一致：去掉遮罩，保留底部渐隐。
	   bug#3904：原来 max-height + object-fit: cover 会把竖图下半部分裁掉，
	   改为按原比例完整显示，高度上限 680px（与桌面端媒体高度一致），竖图自动居中。 */
	.phomi-esolar-intro__visual img,
	.phomi-esolar-intro__visual video {
		display: block;
		height: auto;
		margin: 0 auto;
		mask-image: none;
		max-height: min(680px, 80vh);
		max-width: 100%;
		object-fit: contain;
		object-position: center top;
		width: auto;
		-webkit-mask-image: none;
	}

	/* bug#3983：同桌面端，用等效的 mask 渐隐代替 ::after 黑色遮罩，避免缩放时容器底边漏出亮线。 */
	.phomi-esolar-intro__visual {
		mask-image: linear-gradient(to top, transparent 0, #000 max(40%, 141px));
		-webkit-mask-image: linear-gradient(to top, transparent 0, #000 max(40%, 141px));
	}

	.phomi-esolar-intro__visual::after {
		content: none;
	}

	.phomi-esolar-advantage.is-reversed .phomi-esolar-advantage__copy {
		order: 0;
	}

	.phomi-esolar-advantage__media,
	.phomi-esolar-textures article > .phomi-esolar-textures__media,
	.phomi-esolar-applications article .phomi-esolar-applications__media {
		height: 320px;
	}

	.phomi-esolar-advantage__media img,
	.phomi-esolar-textures article img,
	.phomi-esolar-applications article .phomi-esolar-applications__media img,
	.phomi-esolar-applications article .phomi-esolar-applications__media video {
		height: 100%;
		min-height: 0;
	}

	.phomi-esolar-textures__grid,
	.phomi-esolar-applications__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.phomi-footer {
		grid-template-columns: repeat(3, 1fr);
		padding-left: 32px;
		padding-right: 32px;
	}
}

@media (max-width: 760px) {
.phomi-header {
		height: 78px;
	}

	.phomi-logo {
		left: 20px;
		width: 128px;
	}

	.phomi-nav {
		left: 20px;
		overflow-x: auto;
		right: 20px;
		top: 52px;
		width: calc(100vw - 40px);
	}

	.phomi-nav ul {
		gap: 18px;
		width: max-content;
	}

	.phomi-nav::-webkit-scrollbar {
		display: none;
	}

	.phomi-nav {
		scrollbar-width: none;
	}

	.phomi-nav a {
		font-size: 12px;
		line-height: 16px;
	}

	.phomi-mega-menu {
		display: none;
	}

	.phomi-esolar-hero__copy {
		bottom: 48px;
		left: 24px;
		right: 24px;
	}

	.phomi-esolar-hero__copy h1 {
		max-width: calc(100vw - 48px);
		overflow-wrap: anywhere;
	}

	.phomi-esolar-intro h2,
	.phomi-esolar-intro__copy > p:last-child {
		overflow-wrap: anywhere;
	}

	body.page-template-page-esolar-facade .phomi-esolar-intro h2 {
		white-space: normal;
	}

	.phomi-esolar-advantages,
	.phomi-esolar-textures,
	.phomi-esolar-applications,
	.phomi-esolar-parameters {
		padding: 72px 24px;
	}

	.phomi-esolar-textures__grid,
	.phomi-esolar-applications__grid {
		grid-template-columns: 1fr;
	}

	.phomi-esolar-solution {
		min-height: 620px;
	}

	.phomi-esolar-solution__copy {
		left: 24px;
		right: 24px;
		top: 90px;
	}

	.phomi-esolar-solution__tabs a {
		font-size: 16px;
		height: 72px;
	}

	

	

	

	

	.phomi-footer {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 420px) {
	.phomi-esolar-intro {
		padding: 88px 24px 0;
	}

	.phomi-esolar-intro h2,
	.phomi-esolar-solution h2 {
		font-size: 38px;
	}

	.phomi-esolar-section-heading h2,
	.phomi-esolar-textures h2,
	.phomi-esolar-applications h2,
	.phomi-esolar-parameters h2 {
		font-size: 34px;
	}

	.phomi-esolar-advantage__media,
	.phomi-esolar-textures article > .phomi-esolar-textures__media,
	.phomi-esolar-applications article .phomi-esolar-applications__media {
		height: 260px;
		min-height: 260px;
	}

	.phomi-esolar-advantage__media img,
	.phomi-esolar-textures article img,
	.phomi-esolar-applications article .phomi-esolar-applications__media img,
	.phomi-esolar-applications article .phomi-esolar-applications__media video {
		height: 100%;
		min-height: 0;
	}