/*
Theme Name: SCOTECH
Theme URI: https://www.scotech.com/
Author: 仿站构建（wp-theme-builder）
Author URI: https://www.scotech.com/
Description: 以 Jiangshan Scotech Electrical 官网为版式参考的浙江日新电气（Rsafele）外贸站主题 —— 变压器防护/在线监测制造企业官网。品牌色 #0c55e0（自定义器「主题色」可改），含首页 Banner 视频、新闻/文章切换、产品矩阵浮动动画、成就数字滚动、悬浮联系方式，并内置完整中文自定义器（Customizer）可视化配置全部内容。
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.6
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: scotech
Tags: business, corporate, industrial, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, sticky-post, translation-ready
*/

/* 主题实际样式全部在 assets/css/ 内按原站结构加载（main.css / home.css / iconfont.css / swiper.css / aos.css / language.css / inner.css）。此文件仅承载主题信息头。 */

:root {
	--rsafele-red: #e60012;
	--rsafele-ink: #14202b;
	--rsafele-muted: #5f6b76;
	--rsafele-soft: #f4f6f8;
	--rsafele-line: #dfe4e8;
}

.head-logo .custom-logo {
	width: auto;
	max-width: 190px;
	height: 60px;
	object-fit: contain;
}

.rsafele-home-products {
	padding: 90px 0;
	background: #f5f7f9;
}

.rsafele-home-product-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-top: 38px;
}

.rsafele-home-product-card {
	display: block;
	overflow: hidden;
	border: 1px solid var(--rsafele-line);
	border-radius: 8px;
	background: #fff;
	color: var(--rsafele-ink);
	transition: transform .25s ease, box-shadow .25s ease;
}

.rsafele-home-product-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 18px 45px rgba(20, 32, 43, .12);
}

.rsafele-home-product-card img {
	display: block;
	width: 100%;
	height: 260px;
	object-fit: contain;
	padding: 0;
	background: #fff;
}

.rsafele-home-product-info {
	padding: 20px 22px 24px;
	border-top: 1px solid var(--rsafele-line);
}

.rsafele-home-product-info h3 {
	margin: 0;
	font-size: 20px;
	line-height: 1.35;
}

.rsafele-home-product-info p {
	margin: 8px 0 0;
	color: var(--rsafele-muted);
}

.rsafele-catalog {
	padding: 80px 0 110px;
	background: #fff;
}

.rsafele-catalog-intro {
	max-width: 820px;
	margin-bottom: 70px;
}

.rsafele-eyebrow {
	margin: 0 0 12px;
	color: var(--rsafele-red);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.rsafele-catalog-intro h1 {
	margin: 0 0 18px;
	color: var(--rsafele-ink);
	font-size: clamp(38px, 5vw, 68px);
	line-height: 1;
}

.rsafele-catalog-intro > p:last-child {
	margin: 0;
	color: var(--rsafele-muted);
	font-size: 18px;
	line-height: 1.7;
}

.rsafele-catalog-group + .rsafele-catalog-group {
	margin-top: 76px;
}

.rsafele-catalog-heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 26px;
	padding-bottom: 16px;
	border-bottom: 2px solid var(--rsafele-ink);
}

.rsafele-catalog-heading h2 {
	margin: 0;
	color: var(--rsafele-ink);
	font-size: clamp(25px, 3vw, 38px);
	line-height: 1.2;
}

.rsafele-catalog-heading span {
	flex: none;
	color: var(--rsafele-muted);
	font-size: 14px;
}

.rsafele-product-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
}

.rsafele-product-card {
	overflow: hidden;
	border: 1px solid var(--rsafele-line);
	border-radius: 8px;
	background: #fff;
	transition: transform .25s ease, box-shadow .25s ease;
}

.rsafele-product-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(20, 32, 43, .1);
}

/* 参考站（scotech.com）的产品图是「无内边距、无灰底、贴着卡片宽度铺满」，
   我们原来是灰底 + 24px 内边距，图片缩在中间填不满 —— 客户反馈的就是这个。
   比例取 16:10（本站 16 张产品图长宽比的中位数约 1.63），配白底 contain：
   绝大多数图正好铺满整宽，个别过宽/过方的只在白底上留白，视觉上看不出来，
   同时不会像 cover 那样把产品裁掉（裁切正是客户最早提的「产品展示不完全」）。 */
.rsafele-product-image {
	display: block;
	aspect-ratio: 16 / 10;
	padding: 0;
	background: #fff;
}

.rsafele-product-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.rsafele-product-card-body {
	padding: 24px;
}

.rsafele-product-card-body h3 {
	margin: 0 0 14px;
	font-size: 20px;
	line-height: 1.35;
}

.rsafele-product-card-body h3 a {
	color: var(--rsafele-ink);
}

.rsafele-product-card-body p {
	margin: 0 0 20px;
	color: var(--rsafele-muted);
	line-height: 1.65;
}

.rsafele-product-link {
	color: var(--rsafele-red);
	font-weight: 700;
}

.rsafele-page {
	padding: 86px 0 110px;
	color: var(--rsafele-ink);
}

.rsafele-page .rsafele-lead {
	max-width: 980px;
	margin-bottom: 58px;
	font-size: 19px;
	line-height: 1.8;
}

.rsafele-page h2 {
	margin: 66px 0 20px;
	font-size: clamp(28px, 3.5vw, 44px);
	line-height: 1.2;
}

.rsafele-page p {
	line-height: 1.8;
}

.rsafele-two-column {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
}

.rsafele-service-card,
.rsafele-contact-card {
	padding: 32px;
	border: 1px solid var(--rsafele-line);
	border-radius: 8px;
	background: var(--rsafele-soft);
}

.rsafele-service-card h3,
.rsafele-contact-card h3 {
	margin: 0 0 14px;
	font-size: 22px;
}

.rsafele-service-card ul {
	margin: 0;
	padding-left: 20px;
	line-height: 1.8;
}

.rsafele-certificate-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

/* Quality 段下的 5 张体系证书要排成一行（客户参考图就是一排 5 张），
   Certificates 段的 4 张仍走上面的 4 列。 */
.rsafele-certificate-grid--quality {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.rsafele-certificate-grid a {
	display: block;
	overflow: hidden;
	border: 1px solid var(--rsafele-line);
	border-radius: 6px;
	background: #fff;
}

.rsafele-certificate-grid img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: contain;
}

.rsafele-contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
	gap: 54px;
	align-items: start;
}

.rsafele-contact-details {
	display: grid;
	gap: 18px;
}

.rsafele-contact-card a {
	color: var(--rsafele-red);
	font-weight: 700;
}

.rsafele-news-gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 36px 0;
}

.rsafele-news-gallery img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 6px;
}

.rsafele-news-video {
	width: 100%;
	margin: 36px 0;
	background: #000;
}

.single-product .product .summary .price {
	display: none;
}

.single-product .woocommerce-product-details__short-description {
	color: var(--rsafele-muted);
	font-size: 16px;
	line-height: 1.7;
}

.single-product .woocommerce-Tabs-panel h2,
.single-product .woocommerce-product-details__short-description h2 {
	color: var(--rsafele-ink);
}

@media (max-width: 1024px) {
	.rsafele-home-product-grid,
	.rsafele-product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rsafele-certificate-grid,
	.rsafele-certificate-grid--quality {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.head-logo .custom-logo {
		max-width: 145px;
		height: 44px;
	}

	.rsafele-home-products,
	.rsafele-catalog,
	.rsafele-page {
		padding: 54px 0 70px;
	}

	.rsafele-home-product-grid,
	.rsafele-product-grid,
	.rsafele-two-column,
	.rsafele-contact-grid {
		grid-template-columns: 1fr;
	}

	.rsafele-home-product-card img {
		height: 220px;
	}

	.rsafele-certificate-grid,
	.rsafele-certificate-grid--quality,
	.rsafele-news-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rsafele-catalog-heading {
		align-items: start;
		flex-direction: column;
	}
}

/* ===========================================================
   2026-07-25 客户反馈调整
   =========================================================== */

/* ① 首页新闻卡：缩略图改 16:9 宽幅
   原来 .img 是 <a>（inline），aspect-ratio/overflow 对它无效，
   395×395 的方图就按原始比例撑满，看起来是正方形。改成 block 才生效。 */
.home-stay .project-content ul li .img {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #f2f4f6;
}

.home-stay .project-content ul li .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ② 首页新闻标题：最多 3 行，超出省略。
   字号 2026-07-30 客户要求由 17px 调到 20px。 */
.home-stay .project-content ul li .info .title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 20px;
	line-height: 1.4;
}

/* ① 首页产品卡：同样改 16:9。产品是白底去背图，
   继续用 contain 保证不裁切到产品本体。 */
.rsafele-home-product-card img {
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: contain;
}

/* ③ 新闻正文图文混排：图片跟在对应段落之后，不再统一堆到文末 */
.article-body .rsafele-news-figure {
	margin: 26px 0 30px;
}

.article-body .rsafele-news-figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

/* 同一处标注了两张图时并排显示 */
.article-body .rsafele-news-figure-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.article-body .rsafele-news-video {
	display: block;
	width: 100%;
	margin: 26px 0 30px;
	border-radius: 6px;
	background: #000;
}

@media (max-width: 768px) {
	.article-body .rsafele-news-figure-2 {
		grid-template-columns: 1fr;
	}

	.home-stay .project-content ul li .info .title {
		font-size: 16px;
	}
}

/* ===========================================================
   2026-07-26 移动端底栏「返回顶部」调整
   原来它是 .bottom-btn 里的一个 .btn-item，里面的圆钮用
   position:absolute;left:44% 定位 —— 那是原站按它自己的项数写死的，
   搬过来后正好压在 E-mail 那一格上；加上购物车为空时 Bag 项隐藏，
   底栏右边还空出 20%。现在把它移出底栏，浮在底栏上方右侧。
   =========================================================== */

/* 桌面端仍用 .pc-back，这个移动端专用的藏起来 */
.m-back {
	display: none;
}

@media (max-width: 1024px) {
	.m-back {
		right: 16px;
		bottom: calc(70px + constant(safe-area-inset-bottom));
		bottom: calc(70px + env(safe-area-inset-bottom));
		display: flex;
		width: 38px;
		height: 38px;
		background: #fff;
		box-shadow: 0 3px 12px rgba(0, 0, 0, .16);
	}

	/* 滚动到 400px 后 style.js 给它加 .act，这里只管往上挪一点做出现动效 */
	.m-back.act {
		bottom: calc(78px + constant(safe-area-inset-bottom));
		bottom: calc(78px + env(safe-area-inset-bottom));
	}

	/* 原 .gotop .iconfont 是按 40px 圆钮写死的 top/left，这里改成居中 */
	.m-back .iconfont {
		position: static;
		color: #333;
		font-size: 18px;
		line-height: 1;
	}

	/* 底栏项数会变（teams 没填、购物车为空时 Bag 隐藏），
	   固定 20% 会在右边留白，改成平分 */
	.bottom-btn .btn-item {
		width: auto;
		flex: 1 1 0;
	}
}

/* ⑤ 内页锚点导航（About 页 What We Do / Quality / Service …） */
.rsafele-page-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 44px;
	padding: 0;
	list-style: none;
}

.rsafele-page-tabs a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 132px;
	height: 46px;
	padding: 0 22px;
	border: 1px solid var(--rsafele-line, #e3e7ec);
	border-radius: 4px;
	background: #fff;
	color: var(--rsafele-ink, #14202b);
	font-size: 16px;
	font-weight: var(--fontbold6, 600);
	text-align: center;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.rsafele-page-tabs a:hover,
.rsafele-page-tabs a:focus-visible {
	border-color: var(--color);
	background: var(--color);
	color: #fff;
}

/* 面包屑条的标题现在靠右（照参考站的 DOM 顺序），右侧那根 position:fixed 的悬浮
   联系栏（约 58px 宽 + right:16px）会压住它。
   算一下：.l-wrap 是 max-width:1450px 居中、右内边距 44px，所以标题右边缘在
   min(V,1450) 居中后的 (V-44) 或 (V/2+681)；要躲开悬浮栏得 ≤ V-74。
   解出来 V ≥ 1510 才天然不撞 —— 也就是 1025~1510px 这段常见笔记本宽度全会压住。
   这一段把右内边距顶到 78px（覆盖整段的最坏情况），更宽的屏幕不动，保持与正文对齐。 */
@media (min-width: 1025px) and (max-width: 1520px) {
	.crumbs .banner-content .l-wrap {
		padding-right: 78px;
	}
}

/* 页头是固定的（70px），About 页的锚点导航还会吸顶，所以从地址栏带 #tabs6 直接进来时
   要多留出高度，否则段落标题会被盖在导航底下。头部导航的 Faq 按钮就指向 /about-us/#tabs6。
   注意：这里**不能**给 html 加 scroll-behavior:smooth —— 锚点 tab 的滚动是
   assets/js/pages/about-us.js 用 $('html,body').animate() 做的，浏览器的原生平滑滚动
   会和它逐帧设置 scrollTop 打架，表现是滚动发飘、经常滚不到位。 */
.rsafele-page [id],
.about-us [id] {
	scroll-margin-top: 150px;
}

@media (max-width: 768px) {
	.rsafele-page-tabs {
		gap: 8px;
		margin-bottom: 30px;
	}

	.rsafele-page-tabs a {
		min-width: 0;
		height: 40px;
		padding: 0 14px;
		font-size: 14px;
	}
}

/* ===========================================================
   2026-07-30 客户补充需求
   =========================================================== */

/* 【首页】Welcome 段正文压到 3 行（客户「留下面三行内容」）。
   用 line-clamp 截断而不是删原文 —— 完整简介仍在库里，改主意时不用重写。 */
.home-company .text {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* 两段之间的 margin 会把行数算乱，压成一段连续文本 */
.home-company .text p {
	display: inline;
}
.home-company .text p + p::before {
	content: " ";
}

/* 【产品详情】Benefits 卡片字号放大突出（客户 0730 产品页第 4 条） */
.sc-pd-bullets li,
.sc-pd-grid .sc-pd-cell,
.sc-pd-benefits li {
	font-size: 18px;
	line-height: 1.55;
}
.sc-pd-benefits li b,
.sc-pd-bullets li b {
	font-size: 19px;
}

/* 【产品详情】相关产品的图被裁掉一部分（客户 0730 产品页第 5 条）。
   WooCommerce 相关产品卡沿用 shop loop 的图，之前是 cover 会裁切，
   产品是白底去背图，改 contain 完整显示。 */
.sc-woo .related.products ul.products li.product a img,
.sc-woo .up-sells ul.products li.product a img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background: #fff;
}

/* 【关于我们】正文两端对齐 + 统一字号（客户 0730 关于我们第 1 条） */
.about-us .kche-t114-des p,
.about-us .kche-wrap-width > p,
.about-us .kche-t141-item-text p:last-child,
.about-us .kche-faq-box {
	text-align: justify;
	font-size: 16px;
	line-height: 1.8;
}
/* 段内小标题（Pre-Sales · xxx / Before Your Order 这类）做成小标题样式 */
.about-us .kche-t141-item-text p:first-child strong,
.contact-us .kche-t141-item-text p:first-child strong {
	display: block;
	margin-bottom: 6px;
	color: #14202b;
	font-size: 18px;
	font-weight: 600;
}
.about-us .kche-t42 .kche-item-title p strong {
	font-size: 15px;
	font-weight: 600;
}

/* 【关于我们】What We Do 左侧厂区图：渲染图是 16:9 宽幅，
   t114 默认 40% 宽按原比例排，和右侧文字高度差太多，给个上限 */
.about-us .kche-t114 .kche-t114-img img {
	width: 100%;
	height: auto;
	display: block;
}

/* 【关于我们】宣传片位 */
.about-us .about-video {
	margin: 34px 0 0;
}
.about-us .about-video .iframe {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #000;
	border-radius: var(--borderradius);
}
.about-us .about-video .iframe iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* 【新闻详情】客户 0730：右侧默认小工具栏已在 single.php 去掉，正文通栏；
   封面图和正文改成「一左一右」—— 图片浮左，文字绕排在右侧。 */
.single-article .article-cover {
	float: left;
	width: 46%;
	max-width: 560px;
	margin: 0 32px 22px 0;
	overflow: hidden;
	border-radius: var(--borderradius);
}
.single-article .article-cover img {
	display: block;
	width: 100%;
	height: auto;
}
/* 正文结束后清浮动，否则后面的上一篇/下一篇会被图挤歪 */
.single-article .article-body::after {
	content: "";
	display: block;
	clear: both;
}
.single-article .article-body p {
	text-align: justify;
}

@media (max-width: 900px) {
	.single-article .article-cover {
		float: none;
		width: 100%;
		max-width: none;
		margin: 0 0 20px;
	}
}

/* 【产品详情】顶部改成参考站的紧凑格式：标题 +「Rsafele offers …」+ 询价按钮。
   产品图和短描述已在 inc/woocommerce.php 里摘掉（下面 Discover 区块已经有了），
   所以 summary 不再是右半栏，放开成通栏。 */
.sc-woo .single-product div.product .summary,
.single-product div.product .summary.entry-summary {
	float: none;
	width: 100%;
	max-width: 820px;
	margin: 0;
}
.single-product div.product .sc-offer-line {
	margin: 14px 0 22px;
	color: var(--rsafele-muted, #5f6b76);
	font-size: 18px;
	line-height: 1.7;
}
/* 询价按钮做成参考站那种描边按钮 */
.single-product div.product .summary .zc-inquiry-button,
.single-product div.product .summary .sc-enquiry-btn {
	margin-right: 12px;
}

/* 【新闻区】Photo 那一栏指向 /photo 图库页（客户 0730：news 对应 scotech.com/photo）。
   图库页顶部单独挂一条同款横条，只要横条不要列表容器的下边距。 */
.newspage-navonly {
	padding-bottom: 0;
}

/* ===========================================================
   2026-07-31 新闻列表改为参考站 photo 页版式
   基础样式来自 assets/css/pages/photo.css（.photo-mode1 / .img-list /
   .imgwidthN），这里只补参考站没有的两处：标题下的日期、以及把整块
   做成可点链接（参考站那是灯箱，我们是跳文章）。
   =========================================================== */

.newspage-photo .img-list li a {
	display: block;
	color: inherit;
}
.newspage-photo .img-list li .tit {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.45;
	margin-top: 16px;
	transition: color .2s linear;
	/* 标题长短不一时让卡片底部对齐好看些 */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.newspage-photo .img-list li:hover .tit {
	color: var(--color);
}
.newspage-photo .img-list li .photo-date {
	text-align: center;
	margin-top: 6px;
	color: #888;
	font-size: 14px;
	letter-spacing: .04em;
}
.newspage-photo .img-list li:hover .img {
	border-color: var(--color);
}
.newspage-photo .img-list li:hover .img img {
	transform: scale(1.04);
}

/* 分类描述填了才有的引子块：参考站右侧还有一张图，我们只用文字，放开整宽 */
.newspage-photo .photo-mode1 .info {
	width: 100%;
}

/* 横条和图格之间留白 */
.newspage-photo .common-main {
	margin-top: 0;
}

/* ===========================================================
   2026-07-31 /photo 灯箱位置修正
   参考站 photo.css 把弹窗写成 `position:absolute;top:10%;right:40px`，
   于是它是贴着屏幕右边弹出来的，不是居中 —— **参考站自己就是这样**
   （只有 ≤768px 那条断点才加了 left:50%+translateX 居中）。
   客户反馈「点击放大的位置不对」，这属于原站的毛病，不照抄，改成真正居中。
   另外原来 head80 + 图600 + 按钮46 + 内边距 ≈ 806px，笔记本屏（<850px 高）
   会顶出视口，所以同时给高度上限。
   只覆盖 ≥769px：≤768px 参考站本来就是居中的，别去动它。
   =========================================================== */
@media screen and (min-width: 769px) {
	.photo-dialog .photo-box {
		right: auto;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		max-height: 92vh;
		display: flex;
		flex-direction: column;
	}
	.photo-dialog .photo-box .box {
		overflow-y: auto;
	}
}

/* 图片区跟着视口高度收，别把弹窗撑出屏幕（各断点通用） */
.photo-dialog .photo-box .box .img {
	height: min(600px, 62vh);
}
@media screen and (max-width: 1440px) {
	.photo-dialog .photo-box .box .img { height: min(450px, 58vh); }
}
@media screen and (max-width: 1280px) {
	.photo-dialog .photo-box .box .img { height: min(320px, 52vh); }
}