@charset "UTF-8";
/* ==========================================================================
   捷造光电官网 · 前台增强样式
   在 main.css（HTML5 UP "Solid State"）之后加载，负责：
   1. 新增组件（留言表单、要点清单、图注、空状态）
   2. 响应式硬化：手机 / 平板 / 桌面 / 超宽屏
   3. 后台可调的聚焦区块左右位置覆盖
   ========================================================================== */

:root {
	--jz-bg:            #2e3141;
	--jz-bg-panel:      #353849;
	--jz-bg-panel-2:    #3f4e85;
	--jz-bg-panel-3:    #45558d;
	--jz-accent:        var(--jz-a6, #4c5c96);
	--jz-accent-soft:   var(--jz-a10, #6d7fc4);
	--jz-accent-bright: var(--jz-a11, #8fa4e8);
	--jz-text:          #ffffff;
	--jz-text-dim:      rgba(255, 255, 255, 0.72);
	--jz-line:          rgba(255, 255, 255, 0.16);
	--jz-danger:        #e2777a;
	--jz-success:       #7fd6a2;
	--jz-radius:        5px;
	--jz-gap:           1.5em;
	--jz-tap:           44px;   /* 移动端最小点按尺寸 */
}

/* --------------------------------------------------------------------------
   1. 全局硬化
   -------------------------------------------------------------------------- */

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* 任何元素都不应把页面撑出横向滚动条 */
#page-wrapper { overflow-x: hidden; }

img, video, iframe, table { max-width: 100%; }
img { height: auto; }

/* 超长英文/网址换行，避免撑破窄屏 */
p, li, h1, h2, h3, h4, td, th, .content { overflow-wrap: break-word; word-wrap: break-word; }

/* 键盘可达性：统一焦点样式 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--jz-accent-bright);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   2. 聚焦区块的左右位置覆盖（后台可选 自动 / 左 / 右）
   自动 = 不输出类名，由模板的 :nth-child(2n-1) 负责交替
   -------------------------------------------------------------------------- */

.wrapper.spotlight.align-left .inner {
	-moz-flex-direction: row;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	text-align: left;
}

.wrapper.spotlight.align-left .image { margin: 0 3em 2em 0; }

.wrapper.spotlight.align-right .inner {
	-moz-flex-direction: row-reverse;
	-webkit-flex-direction: row-reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
	text-align: right;
}

.wrapper.spotlight.align-right .image { margin: 0 0 2em 3em; }

/* --------------------------------------------------------------------------
   3. 新增组件
   -------------------------------------------------------------------------- */

/* 3.1 要点清单（对勾样式） */
ul.check-list {
	list-style: none;
	padding-left: 0;
}

	ul.check-list > li {
		padding-left: 1.9em;
		position: relative;
	}

		ul.check-list > li:before {
			content: '\2713';
			color: var(--jz-accent-bright);
			font-weight: 700;
			left: 0;
			position: absolute;
			top: 0;
		}

/* 3.2 图注 */
p.image-caption {
	color: var(--jz-text-dim);
	font-size: 0.85em;
	margin: -1em 0 2em 0;
	text-align: center;
}

/* 3.3 空状态 */
p.empty-note {
	background-color: rgba(255, 255, 255, 0.04);
	border-left: 3px solid var(--jz-accent);
	border-radius: var(--jz-radius);
	color: var(--jz-text-dim);
	padding: 1.25em 1.5em;
}

/* 3.4 表格：窄屏横向滚动 + 滚动提示 */
.table-wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	position: relative;
}

	.table-wrapper table { min-width: 32em; }

	.table-wrapper.has-scroll {
		box-shadow: inset -12px 0 12px -12px rgba(0, 0, 0, 0.55);
	}

p.table-hint {
	color: var(--jz-text-dim);
	display: none;
	font-size: 0.8em;
	margin: -0.5em 0 1.5em 0;
}

	.table-wrapper.has-scroll + p.table-hint { display: block; }

/* 3.5 留言表单 */
.message-form {
	margin: 0 auto 3em auto;
	max-width: 46em;
	text-align: left;
}

	.message-form .field label {
		display: block;
		font-size: 0.85em;
		letter-spacing: 0.03em;
		margin-bottom: 0.5em;
		opacity: 0.85;
	}

		.message-form .field label .req { color: var(--jz-danger); }

	.message-form input[type="text"],
	.message-form input[type="email"],
	.message-form input[type="tel"],
	.message-form textarea {
		width: 100%;
	}

	.message-form textarea { resize: vertical; min-height: 8em; }

	/* 蜜罐字段：移出视口而非 display:none，让脚本机器人仍会填 */
	.hp-field {
		position: absolute !important;
		left: -9999px !important;
		top: auto;
		width: 1px;
		height: 1px;
		overflow: hidden;
	}

	p.form-note {
		color: var(--jz-text-dim);
		font-size: 0.8em;
		line-height: 1.6;
		margin: 1em 0 0 0;
		text-align: left;
	}

	.form-result {
		border-radius: var(--jz-radius);
		display: none;
		font-size: 0.9em;
		line-height: 1.7;
		margin-top: 1.25em;
		padding: 1em 1.25em;
		text-align: left;
	}

	.form-result.is-visible { display: block; }

	.form-result.success {
		background-color: rgba(127, 214, 162, 0.12);
		border-left: 3px solid var(--jz-success);
		color: var(--jz-success);
	}

	.form-result.error {
		background-color: rgba(226, 119, 122, 0.12);
		border-left: 3px solid var(--jz-danger);
		color: var(--jz-danger);
	}

	.message-form button[type="submit"]:disabled,
	.message-form button[type="submit"].is-busy {
		cursor: progress;
		opacity: 0.6;
	}

	/* 页脚里的表单：页脚默认居中，这里恢复左对齐 */
	#footer .inner .message-form { text-align: left; }
	#footer .inner .message-form ul.actions { text-align: left; }

/* 3.6 回到顶部 */
#jz-to-top {
	align-items: center;
	background-color: var(--jz-accent);
	border-radius: 50%;
	border: 0;
	bottom: 1.5em;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
	/*
	 * 【必须显式清零内边距，并锁死盒模型】
	 * 模板给 button 设了 `padding: 0 2.25em`，而且**只在 ≤480px 的媒体查询里**
	 * 才把它清零。整站又是 `box-sizing: border-box`，于是在 480px 以上：
	 *   左右内边距合计 4.5em  >  按钮宽度 2.75em
	 * 浏览器只能把实际宽度撑到约 4.5em，而高度仍是 2.75em ——
	 * border-radius: 50% 画出来就变成了椭圆（实测宽高比 1.64）。
	 * 这里把 padding 归零、盒模型写死，任何视口下都是 2.75em × 2.75em 的正圆。
	 */
	box-sizing: border-box;
	padding: 0;
	line-height: 1;
	min-width: 0;
	min-height: 0;
	color: #fff;
	cursor: pointer;
	display: flex;
	height: 2.75em;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	right: 1.5em;
	transition: opacity 0.25s ease, transform 0.25s ease;
	transform: translateY(0.75em);
	width: 2.75em;
	z-index: 90;
}

	#jz-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
	#jz-to-top:hover { background-color: var(--jz-accent-soft); }
	#jz-to-top:before { content: '\25B2'; font-size: 0.8em; line-height: 1; }

/* 3.7 导航当前页高亮 */
#menu .links li a.active { color: var(--jz-accent-bright); }

/* --------------------------------------------------------------------------
   3.8 图片只缩不放（放大不超过 1:1）

   模板里图片普遍是 width: 100%，也就是「跟着容器走」：窗口越宽，
   图片被拉得越大，一旦超过原始像素就开始发虚。实测在 2560px 宽的显示器上：

     · 首页聚焦圆形图  276×276 → 显示 327×327   放大 1.18×
     · 产品卡片图      506×295 → 显示 572×333   放大 1.13×
     · 详情页大图      960×320 → 显示 1210×403  放大 1.26×

   这里统一改成「只缩不放」：
     容器比图片窄  → 按容器缩小（max-width: 100%）
     容器比图片宽  → 保持原始尺寸并居中，不再拉伸
   -------------------------------------------------------------------------- */

/* 3.8.1 大图区块（image 区块输出的 .image.fit / .image.main） */
.image.fit img,
.image.main img,
.wrapper .inner > .image img {
	width: auto;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* 3.8.2 卡片网格里的配图（产品列表、应用卡片） */
.features article .image img {
	width: auto;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/*
 * 3.8.3 聚焦区块的圆形图
 *
 * 这里不能只把 img 改成 width:auto —— 模板给 .image 设了
 * border-radius: 100% + overflow: hidden，img 一旦不铺满，
 * 圆形里就会露出空缺。正确做法是让**容器**按图片原始尺寸收缩
 * （width: fit-content），img 再 width:100% 正好铺满且不放大。
 * flex: 0 1 auto 是为了不被 flex 布局强行撑开。
 */
.wrapper.spotlight .image,
.wrapper.spotlight:nth-child(2n - 1) .image,
.wrapper.spotlight.align-left .image,
.wrapper.spotlight.align-right .image,
.wrapper.spotlight:nth-child(2n - 1).align-left .image,
.wrapper.spotlight:nth-child(2n - 1).align-right .image {
	/*
	 * flex: 0 0 auto —— 不参与 flex 伸缩。
	 * 用 0 1 auto（可收缩）时，实测在 2560px 宽屏上被同行的文字挤成了
	 * 212px（原图 276px）。不收缩后宽度由 max-content 决定，
	 * 再靠 max-width: 100% 兜住窄屏，两种情况都不会变形。
	 */
	-moz-flex: 0 0 auto;
	-webkit-flex: 0 0 auto;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	width: -moz-max-content;
	width: -webkit-max-content;
	width: max-content;
	max-width: 100%;
}

	.wrapper.spotlight .image img {
		width: 100%;
		height: auto;
	}

/* --------------------------------------------------------------------------
   3.9 产品分类

   分类由后台「产品分类」统一维护，每个分类都有一个实时生成的前台页面
   /category/<网址标识>.html。这两条规则分别处理：
     · 产品详情页页头「所属分类：xxx」
     · 产品列表区块标题下方的「查看该分类全部产品 →」
   -------------------------------------------------------------------------- */

p.product-category {
	border-top: solid 1px rgba(255, 255, 255, 0.1);
	display: inline-block;
	font-size: 0.8em;
	letter-spacing: 0.05em;
	margin: -0.5em 0 1.5em 0;
	padding-top: 0.6em;
	text-transform: uppercase;
}

	p.product-category a { border-bottom: 0; }
	p.product-category a:hover { color: #fff; }

/* 列表区块下的分类入口：贴着标题下方，不要抢正文的视线 */
.category-link {
	font-size: 0.82em;
	letter-spacing: 0.03em;
	margin: -1em 0 1.75em 0;
}

	.category-link a { border-bottom: 0; opacity: 0.85; }
	.category-link a:hover { opacity: 1; }

/*
 * 分类栏目底部「查看「XX」全部 N 个产品 →」按钮。
 *
 * 产品页现在是「每个分类只亮出前几个产品」，剩下的一律进各自的分类页看。
 * 这个按钮就是那个入口，做成居中、稍微低调一点的样式，
 * 免得每段结尾都有一个抢眼的实心按钮。
 */
.category-more {
	margin: -0.75em 0 2.5em 0;
	text-align: center;
}

	.category-more a.button {
		background-color: transparent;
		box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
		font-size: 0.8em;
		padding: 0 1.75em;
	}

	.category-more a.button:hover {
		background-color: rgba(255, 255, 255, 0.05);
		box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4);
	}

/* 分类说明：跟在分类标题下面的一句小字 */
p.category-intro {
	font-size: 0.9em;
	margin: -0.75em 0 1.5em 0;
	opacity: 0.8;
}

/* 后台页面列表里的分类标签做成链接后，保持与普通标签一致的外观 */
a.tag.is-prod { border-bottom: 0; }
a.tag.is-prod:hover { color: #fff; text-decoration: none; }

/* --------------------------------------------------------------------------
   4. 响应式：桌面 / 平板 / 手机
   -------------------------------------------------------------------------- */

/* 4.1 宽屏（>= 1281px）：适度放宽内容宽度，避免大屏两侧过空 */
@media screen and (min-width: 1281px) {
	.wrapper .inner { max-width: 62em; }
}

/* 4.2 平板（<= 980px） */
@media screen and (max-width: 980px) {
	:root { --jz-gap: 1.25em; }

	.wrapper .inner { width: 100%; }

	/* 长中文标题在中小屏更容易折断 */
	#header h1 { font-size: 0.9em; }
	#header h1 a { letter-spacing: 0.02em; }
}

/* 4.3 手机横屏 / 小平板（<= 736px） */
@media screen and (max-width: 736px) {
	:root { --jz-gap: 1em; }

	/*
	 * 聚焦区块改为上下堆叠并居中。
	 * 必须带上 :nth-child(2n-1) 变体：模板里
	 * `.wrapper.spotlight:nth-child(2n-1) .inner` 的特异度是 (0,3,1)，
	 * 仅写 `.wrapper.spotlight .inner` (0,3,0) 压不住它，手机上首块就不会堆叠。
	 */
	.wrapper.spotlight .inner,
	.wrapper.spotlight:nth-child(2n - 1) .inner,
	.wrapper.spotlight.align-left .inner,
	.wrapper.spotlight.align-right .inner,
	.wrapper.spotlight:nth-child(2n - 1).align-left .inner,
	.wrapper.spotlight:nth-child(2n - 1).align-right .inner {
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		text-align: center;
	}

	.wrapper.spotlight .image,
	.wrapper.spotlight:nth-child(2n - 1) .image,
	.wrapper.spotlight.align-left .image,
	.wrapper.spotlight.align-right .image,
	.wrapper.spotlight:nth-child(2n - 1).align-left .image,
	.wrapper.spotlight:nth-child(2n - 1).align-right .image {
		margin: 0 auto 1.75em auto;
		/* 手机上限制最大宽度；用 min() 防止 16em 在超窄屏上超出可用宽度。
		   不要再写 width: 100%，那会盖掉 3.8.3 的 fit-content 把图放大。 */
		max-width: min(16em, 100%);
	}

	/*
	 * 注意：这里**不能**再给聚焦图设 border-radius。
	 * 模板原本是 border-radius: 100%（正圆），之前为了"避免产品图被切掉"
	 * 在这里改成了 --jz-radius（圆角方形），结果手机上就成了"房形"，
	 * 和电脑端的圆形不一致。现在保持模板的圆形，两端表现统一。
	 */

	.wrapper.spotlight .content { text-align: center; }

	/* 表单半宽字段提前折行，避免手机上过窄 */
	form > .fields > .field.half,
	form > .fields > .field.third,
	form > .fields > .field.quarter { width: calc(100% - 1.5em); }

	/* 卡片单列提前到 620px 以下 */
	.message-form { max-width: 100%; }

	/* 点按目标 */
	ul.actions li > a.button,
	ul.actions li > button,
	#menu .links li a { min-height: var(--jz-tap); }

	#jz-to-top { bottom: 1em; right: 1em; }

	/* 页脚表单说明文字 */
	p.form-note { font-size: 0.78em; }
}

/* 4.4 手机竖屏（<= 620px）：卡片单列 */
@media screen and (max-width: 620px) {
	.features { display: block; }

	.features article {
		margin: 0 0 1.75em 0 !important;
		width: 100%;
	}
}

/* 4.5 小屏手机（<= 480px） */
@media screen and (max-width: 480px) {
	h2 { font-size: 1.2em; }
	h3 { font-size: 1.05em; }

	#banner h2 { font-size: 1.6em; line-height: 1.3; }
	#banner p { font-size: 0.9em; }
	#banner .logo { max-width: 12em; margin-left: auto; margin-right: auto; }

	.wrapper .inner { padding-left: 0; padding-right: 0; }

	.table-wrapper table { min-width: 26em; font-size: 0.85em; }

	/* 按钮占满宽度更好点 */
	ul.actions:not(.fixed) { width: 100%; }
	ul.actions:not(.fixed) li { display: block; width: 100%; }
	ul.actions:not(.fixed) li > a.button,
	ul.actions:not(.fixed) li > button { display: block; width: 100%; }
}

/* 4.6 超窄屏（<= 360px） */
@media screen and (max-width: 360px) {
	#header h1 { font-size: 0.78em; }
	#banner h2 { font-size: 1.4em; }
	.table-wrapper table { min-width: 22em; }
}

/* --------------------------------------------------------------------------
   5. 打印
   -------------------------------------------------------------------------- */
@media print {
	#header, #menu, #footer .message-form, #jz-to-top { display: none !important; }
	body { background: #fff; color: #000; }
	.wrapper, .wrapper.spotlight { background: #fff !important; }
}