/*
Theme Name: XUYONG Clone
Theme URI: https://www.xuyong.com/
Author: 深圳市旭永实业有限公司
Description: 深圳市旭永实业有限公司官网主题。手写经典主题，1:1 还原设计稿，中英双语（英文主域 / cn 子域）。区块 markup 与 CSS 全在主题里，内容模型由 XUYONG Core 插件提供。
Version: 1.2.11
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: xuyong
*/

/*
 * 真正的样式在 assets/css/css.css（设计稿原样搬过来，不改）。
 * 这个文件只承担主题头信息，以及少量 WordPress 特有元素的补丁。
 */

/* Model-specific specifications, including long protocols and certification marks. */
.product-parameter-group { margin-top: 16px; border: 1px solid #dce2eb; border-radius: 4px; overflow: hidden; }
.product-parameter-group > summary { padding: 16px 20px; background: #eaeef4; color: #15345a; font-size: 16px; font-weight: 700; cursor: pointer; overflow-wrap: anywhere; }
.product-parameter-group > summary:focus-visible { outline: 2px solid #15345a; outline-offset: -3px; }
.product-parameter-group .dtl-cansu-list { margin-top: 0; }
.product-parameter-groups .dtl-cansu-list li { grid-template-columns: minmax(0, 28fr) minmax(0, 72fr); }
.product-parameter-groups .dtl-cansu-list li .item { min-width: 0; white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 575px) {
    .product-parameter-groups .dtl-cansu-list li { grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); }
    .product-parameter-groups .dtl-cansu-list li .item { padding: 10px; }
}

/* WordPress 编辑器/核心类：设计稿里没有对应样式，这里给最小实现。 */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.alignleft  { float: left;  margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter{ display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 14px; color: #888; text-align: center; margin-top: 8px; }

/* 表单提交结果提示。设计稿没有这个状态，按主色做一条与表单同宽的提示条。 */
.xy-form-message {
	margin: 0 0 24px;
	padding: 14px 20px;
	border-radius: 6px;
	font-size: 16px;
	line-height: 1.6;
}
.xy-form-message.is-ok    { background: #eaf5ff; color: #0b62a4; border: 1px solid #b8dcf7; }
.xy-form-message.is-error { background: #fdeceb; color: #a4291f; border: 1px solid #f5c4c0; }

/* 蜜罐字段：给机器人看，不给人看。用 !important 顶掉可能的行内覆盖。 */
.xy-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* 「获取验证码」在请求中的禁用态。 */
.getEcode.is-busy { opacity: .55; pointer-events: none; }

/* 列表为空时的占位，避免整块区域塌成空白让人以为页面坏了。 */
.xy-empty {
	padding: 60px 0;
	text-align: center;
	color: #888;
	font-size: 18px;
}

/*
 * 设计稿之外的补充
 * ---------------
 * .foot-copy 在 css.css 里没有：设计稿的页脚没有版权/备案行，而中文站上线
 * 必须挂备案号，所以补一条低调的行，配色跟着页脚的深色背景走。
 */
.foot-copy {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, .15);
	font-size: 14px;
	line-height: 1.8;
	color: rgba(255, 255, 255, .6);
}
.foot-copy a { color: rgba(255, 255, 255, .6); margin-left: 10px; }
.foot-copy a:hover { color: #fff; }

/*
 * 客户 logo 滚动条：设计稿里每张 logo 包在 <a href="javascript:;"> 里，
 * 那是个点了没反应的死链。这里没有链接时改用 <span>，补一条同样的
 * display:block，视觉完全一致。
 */
.idxPartner.swiper .swiper-slide > span { display: block; }

/*
 * 首页「智能智造解决方案」的四个标签，同理：设计稿是 <a href="#">，
 * 没填链接时输出 <span>。样式全挂在 li a 上，这里把同一份抄给 span，
 * 视觉完全一致。
 */
.idx-pc-sol-list li span {
	display: inline-block;
	background: #F0F5FF;
	border: 1px solid #C4D2E8;
	border-radius: 7px;
	font-size: 12px;
	text-align: center;
	padding: 0 20px;
	line-height: 40px;
}
@media (min-width: 1200px) {
	.idx-pc-sol-list li span { font-size: 18px; }
}

/*
 * 中文字体栈补全
 * -------------
 * css.css 里写的是 font-family:'PingFangSC-Regular',Arial,Helvetica,sans-serif，
 * 而苹方现在只从系统本地取（见 assets/css/fonts.css 的说明）。Arial 没有汉字，
 * 非苹果系统会掉到浏览器的默认中文字体，字重和行宽都不受控。这里把常见系统的
 * 中文字体显式补进去，Windows / Android 上的观感尽量贴近设计稿。
 */
body {
	font-family: 'PingFangSC-Regular', 'PingFang SC', 'Hiragino Sans GB',
		'Microsoft YaHei UI', 'Microsoft YaHei', 'Source Han Sans SC',
		'Noto Sans CJK SC', Arial, Helvetica, sans-serif;
}
body.lang-en {
	font-family: 'Roboto-Regular', 'Roboto', Arial, Helvetica, sans-serif;
}

/*
 * 英文站的位图 LOGO
 * ----------------------------------------------------
 * 中文 LOGO 是内联 SVG，css.css 靠 `.full-head .logo svg *{fill}` 直接改填充色，
 * 一份源文件就能同时服务透明页头（白字）和白底页头（主色字）。客户 2026-08-26
 * 给的英文 LOGO 只有位图，改不了填充色，所以按颜色出了三张 PNG：
 *
 *   logo-en.png       主色 #0073c2  —— 白底页头 / 992px 以下（页头始终白底）
 *   logo-en-bai.png   白           —— 992px 以上的透明页头和 .glass 深色玻璃
 *   logo-en-foot.png  #cdd5df      —— 深色页脚，对应 SVG 版的填充色
 *
 * 两张图在首页会同时用到：滚过 50px 时 custom.js 给 .full-head 加 .white，
 * 页头从透明变白底，LOGO 要跟着从白版换回主色版。所以这里不是「PC 一张、
 * 移动一张」的重复下载，而是同一个页面里两种状态各要一张。
 *
 * 切换用 display 而不是 opacity/visibility：隐藏的那张要从无障碍树里彻底
 * 拿掉，否则读屏会连着念到两个同名的站点 LOGO。
 */
.logo .logo-en--light {
	display: none;
}
.foot-logo img {
	display: block;
	height: 38px;
	width: auto;
	margin: 0 auto;
}

@media (min-width: 992px) {
	.full-head .logo .logo-en--dark {
		display: none;
	}
	.full-head .logo .logo-en--light {
		display: block;
	}
	.full-head.hasbai .logo .logo-en--dark,
	.full-head.white .logo .logo-en--dark {
		display: block;
	}
	.full-head.hasbai .logo .logo-en--light,
	.full-head.white .logo .logo-en--light {
		display: none;
	}
}

/*
 * 首页「智能智造解决方案」区，环绕大图的五个浮动标签（英文站）
 * ------------------------------------------------------------
 * css.css 给这五个标签写死了宽高（.idx-sol-pos1~5 的 width / height:3.90625vw），
 * 高度只够两行中文。设计稿的五句中文是 12~21 字，放得下；对应的英文是 49~82
 * 个字符，长 3~4 倍，需要 3~5 行 —— 而 .idx-sol-txt 是 align-items:center，
 * 超出的部分上下各溢出一半，文字会直接穿出那个带边框和阴影的圆角框。
 *
 * 这里只改英文站，中文站保持设计稿原样：
 *
 * 1) height:auto + min-height —— 关键的一条。宽高写死才是「出界」的根因，
 *    改成能往下长之后，无论字号估得准不准、以后业务方把文案改多长，都只会
 *    把框撑高，不会再裁切。min-height 保证短句仍是设计稿的原始高度。
 * 2) 字号收一档 + 行高 1.35 —— 把「长高」的幅度压到最小。实测这五句里有四句
 *    因此正好维持 3.90625vw 的原始高度，视觉和设计稿一致。
 * 3) clamp 下限 11px —— 标签从 992px 起显示（.mb-hide），纯 vw 在小屏上会掉到
 *    8px 以下。设计稿原本的 0.9375vw 在 992px 下也只有 9.3px，这里顺带兜住。
 * 4) pos3 / pos5 是五个里最窄、句子又最长的两个，各加宽 2vw 才够排 3 行。
 *    pos3 右边缘 60vw→62vw，和 pos4 的 left:61vw 有 1vw 水平交叠，但两者
 *    top 相差 8vw（43vw vs 35vw），纵向不相交，不会碰上。
 */
body.lang-en .idx-sol-txt {
	font-size: clamp(11px, .78125vw, 15px);
	line-height: 1.35;
	height: auto;
	min-height: 3.90625vw;
	padding-top: .35vw;
	padding-bottom: .35vw;
}
body.lang-en .idx-sol-pos3 { width: 10vw; }
body.lang-en .idx-sol-pos5 { width: 13vw; }

/*
 * 区块大标题（.fs56）跟页脚 CTA 标题同一档
 * ----------------------------------------------------
 * 客户 2026-08-26：「全部页面的这些标题字缩小，大小同等底部的」——
 * 底部指页脚 CTA 的「获取最新的行业方案与案例」（.foot-get-case-head）。
 *
 * 设计稿里两者差了快一倍：
 *   .fs56               20 / 24@768 / 30@992 / 36@1200 / 48@1400 / 56@1600
 *   .foot-get-case-head 20 /         / 24@992 / 30@1200
 * 这里把 .fs56 逐档对齐成后者，最大就停在 30px。
 *
 * 改 .fs56 而不是逐个模板加类：全站 16 处用到它，且**只**用在区块/页面标题上
 * （首页 Banner 的大标题走的是自己的 .ban-* 类，不受影响），所以这一条正好
 * 就是「全部页面的这些标题」的范围，不会误伤 Banner。
 *
 * 写在 style.css 而不是改 css.css：css.css 是设计稿原样，一律不动。
 * 层叠上 style.css 排在 css.css 之后、选择器权重相同，所以后面这几条
 * 覆盖得掉 css.css 里 1400 / 1600 那两档 —— 媒体查询不增加权重。
 */
.fs56 { font-size: 20px; }
@media (min-width: 992px)  { .fs56 { font-size: 24px; } }
@media (min-width: 1200px) { .fs56 { font-size: 30px; } }

/*
 * 解决方案列表页的纯文字卡片
 * ----------------------------------------------------
 * 客户 2026-08-26：/solutions/ 参考智能装备页按分类分区，但不要图片。
 * 复用 .sol-list-case 的排版（间距、标题、摘要、hover 的「查看详情」按钮
 * 全都现成），这里只处理「图没了之后」多出来的三个问题：
 *
 * 1) 没有图就没有视觉边界，卡片会糊成一大片文字。补一个浅色描边和内边距，
 *    把每一条重新框出来。
 * 2) 设计稿的 .title 是 line-clamp:1 —— 那是给「图在上、标题一行」的卡片写的。
 *    纯文字卡片里标题就是主角，而「XY-HWMS 危废品管理系统」这类名字在
 *    四列布局下必然折行，一行截断会把型号后面的字全吃掉。放到 2 行。
 * 3) 卡片矮了很多，600px 就两列会显得空。往上再加两档，宽屏铺到四列，
 *    和智能装备页一屏的信息密度对齐。
 */
.sol-list-case--text li .wrap {
	padding: 24px;
	border: 1px solid #e3e8f0;
	border-radius: 5px;
	background: #fff;
	transition: border-color .3s, box-shadow .3s;
}
.sol-list-case--text li .wrap:hover {
	border-color: var(--main-color);
	box-shadow: 0 10px 30px rgba(0, 115, 194, .10);
}
.sol-list-case--text li .title {
	-webkit-line-clamp: 2;
	margin-top: 0;
}

@media (min-width: 992px) {
	.sol-list-case--text li { width: 33.3333%; }
}
@media (min-width: 1400px) {
	.sol-list-case--text li { width: 25%; }
}

/*
 * 关于我们：三块图都缩小
 * ----------------------------------------------------
 * 客户 2026-08-26：「这个页面的字提和图不要搞这么大」，并逐块标了
 * 荣誉资质「图缩小50%」、专利及软件著作「图缩小50%」、
 * 「还有这些合作logo图也缩小」。字号那半由上面的 .fs56 一条统管。
 */

/* 荣誉资质：两张证书并排，把宽度上限对半砍。 */
.inab-flex-zizi .item {
	max-width: 220px;
}

/*
 * 专利及软件著作：3D 层叠轮播，逐档对半砍。
 *
 * 光改宽度不够 —— site.js 里那圈层叠是按「每张相对中心张的进度 p」算位移的，
 * 位移量原本写死 185px（正好是 1600px 断点下 370px 卡片的一半）。卡片砍一半
 * 而位移不动，证书之间就会裂开一大截、不再叠在一起。所以 site.js 那边改成
 * 从卡片实际宽度算位移，这里只管尺寸，两边不会再各自漂移。
 */
.patentSwiper .swiper .swiper-slide { width: 70px; }
@media (min-width: 600px)  { .patentSwiper .swiper .swiper-slide { width: 125px; } }
@media (min-width: 992px)  { .patentSwiper .swiper .swiper-slide { width: 145px; } }
@media (min-width: 1200px) { .patentSwiper .swiper .swiper-slide { width: 160px; } }
@media (min-width: 1400px) { .patentSwiper .swiper .swiper-slide { width: 170px; } }
@media (min-width: 1600px) { .patentSwiper .swiper .swiper-slide { width: 185px; } }

/*
 * 合作 logo：格子不动，只把图缩进格子里。
 *
 * 改图不改列数：七列的节奏是设计稿定的，动列数会牵扯整块的视觉比例；
 * 而客户要的只是「图小一点」。图小了格子里自然留白，正好是 logo 墙的常见做法。
 */
.inab-list-partner .pic {
	max-width: 72%;
	margin: 0 auto;
}

/* Initially show two rows; the More button reveals the remaining logos. */
.inab-list-partner:not(.is-expanded) li:nth-child(n+7) { display: none; }
@media (min-width: 768px) {
    .inab-list-partner:not(.is-expanded) li:nth-child(n+7) { display: block; }
    .inab-list-partner:not(.is-expanded) li:nth-child(n+11) { display: none; }
}
@media (min-width: 992px) {
    .inab-list-partner:not(.is-expanded) li:nth-child(n+11) { display: block; }
    .inab-list-partner:not(.is-expanded) li:nth-child(n+15) { display: none; }
}

.inab-partner-more {
	margin-top: 24px;
	text-align: center;
}
.inab-partner-more__btn {
	display: inline-block;
	padding: 10px 30px;
	border: 1px solid #c4d2e8;
	border-radius: 5px;
	background: #fff;
	color: #606268;
	font-size: 14px;
	line-height: 24px;
	cursor: pointer;
	transition: .3s;
}
.inab-partner-more__btn:hover {
	background: var(--main-color);
	border-color: var(--main-color);
	color: #fff;
}
/* 同 .floating-contact__button[hidden]：UA 样式表的 [hidden] 拦不住上面那条
   display:inline-block，作者样式里得自己写一遍。 */
.inab-partner-more__btn[hidden] { display: none; }

/*
 * 联系我们：销售联系人卡片
 * ----------------------------------------------------
 * 设计稿没有这一块（客户 2026-08-26 新加）。版式跟着同页上面那排
 * .in-list-contact 走：同样的浅色卡片、同样的圆角和间距，不引入新的视觉语言。
 *
 * 二维码定死 120px 见方：企业微信的个人码本身就是方的，让它跟着栏宽缩放的话，
 * 窄屏上会缩到扫不出来 —— 这块内容的唯一用途就是被手机扫，尺寸不能妥协。
 */
.in-list-sales {
	display: flex;
	flex-wrap: wrap;
	margin-left: -10px;
	margin-right: -10px;
}
.in-list-sales li {
	width: 100%;
	padding: 10px;
}
.in-list-sales li .wrap {
	display: flex;
	align-items: center;
	gap: 20px;
	height: 100%;
	padding: 24px;
	border: 1px solid #e3e8f0;
	border-radius: 5px;
	background: #fff;
	transition: border-color .3s, box-shadow .3s;
}
.in-list-sales li .wrap:hover {
	border-color: var(--main-color);
	box-shadow: 0 10px 30px rgba(0, 115, 194, .10);
}
.in-list-sales .qr {
	flex: 0 0 120px;
	width: 120px;
}
.in-list-sales .qr img {
	display: block;
	width: 100%;
	height: auto;
}
.in-list-sales .info {
	min-width: 0; /* flex 子项默认 min-width:auto，长邮箱会把卡片撑破 */
}
.in-list-sales .area {
	margin-top: 6px;
	color: #606268;
	font-size: 14px;
	line-height: 1.6;
}
.in-list-sales .row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.6;
	word-break: break-all; /* 邮箱没有空格，窄屏上不断词就会横向溢出 */
}
.in-list-sales .row i {
	color: var(--main-color);
	font-size: 16px;
}
.in-list-sales .row a {
	color: #606268;
}
.in-list-sales .row a:hover {
	color: var(--main-color);
}

@media (min-width: 768px) {
	.in-list-sales li { width: 50%; }
}
@media (min-width: 1200px) {
	.in-list-sales li { width: 33.3333%; }
}

/*
 * 锚点跳转要给固定页头让位
 * ----------------------------------------------------
 * `.full-head` 是 position:fixed，浏览器跳锚点时把目标顶到视口 y=0，
 * 于是目标最上面那截正好压在页头底下。悬浮条的「在线咨询」指向
 * /contact-cn/#xy-form，落地时「在线留言」这个标题看不见 —— 用户点的是
 * 「在线咨询」，落地却不知道自己到了哪一块。
 *
 * 两处一起改才成立：
 * 1) 锚点从表单本体挪到**包含标题的那个 section**（见 inc/sections.php）。
 *    原来锚点在表单上，标题在它上方 85px，无论偏移给多少都在屏幕外。
 * 2) scroll-margin-top 顶掉页头的高度，再多留 20px 喘气。
 *    页头高度是分档的（实测 50 / 70@992 / 80@1200 / 90@1400），
 *    所以这里也得分档，给一个固定值在窄屏上会空出一大块。
 *
 * 用 scroll-margin-top 而不是「负 margin + 等高 padding」那种老写法：
 * 后者会真的改变布局盒子，相邻区块的间距全得跟着补。
 */
#xy-form {
	scroll-margin-top: 70px;
}
@media (min-width: 992px)  { #xy-form { scroll-margin-top: 90px; } }
@media (min-width: 1200px) { #xy-form { scroll-margin-top: 100px; } }
@media (min-width: 1400px) { #xy-form { scroll-margin-top: 110px; } }

/*
 * 登录后给 WordPress 管理条让位
 * ----------------------------------------------------
 * `#wpadminbar` 和 `.full-head` 都是 `position:fixed; top:0`，而管理条的
 * z-index 是 99999、页头是 999 —— 于是后台登录着看前台时，网站导航头最上面
 * 那截被管理条压住。核心给 `html` 加的 `margin-top` 救不了这个：
 * fixed 定位是相对视口的，不吃祖先的 margin。
 *
 * 高度直接读核心的 `--wp-admin--admin-bar--height`（WP 定义在 html 上，
 * 32px，≤782px 时 46px），不自己写死两个数 —— 以后核心调高度会自动跟上。
 *
 * ≤600px 单独处理：那一档核心把管理条改成 `position:absolute`，它会跟着页面
 * 滚走。纯 CSS 在这一档只能二选一 —— top:0 会在滚动位置 0 时被压住 46px，
 * top:46px 会在滚动之后于页头上方留一条永久空隙。所以这里给的 top:0 只是个
 * 兜底，实际由 site.js 里那段（只对 body.admin-bar 生效）把偏移量跟着管理条
 * 的实时位置走：滚动位置 0 让开 46px，滚过去归零，两种毛病都没有。
 * JS 没跑起来时退化成「滚一下就自己好了」，不会比现在更糟。
 */
body.admin-bar .full-head {
	top: var(--wp-admin--admin-bar--height, 32px);
}
/* 手机抽屉菜单是从页头底下拉出来的，跟着一起让位。 */
body.admin-bar .ys_phnav_menu {
	top: calc(50px + var(--wp-admin--admin-bar--height, 46px));
	height: calc(100% - 50px - var(--wp-admin--admin-bar--height, 46px));
}

@media screen and (max-width: 600px) {
	body.admin-bar .full-head {
		top: 0;
	}
	body.admin-bar .ys_phnav_menu {
		top: 50px;
		height: calc(100% - 50px);
	}
}

/*
 * 巨幕导航下拉项左侧的圆点，对齐第一行而不是整块垂直居中
 * ----------------------------------------------------
 * css.css 里圆点是 `top:50%; transform:translateY(-50%)`，相对整个 <a> 盒子
 * 垂直居中。条目只有一行时（盒高 = line-height 24px）正好落在那行中间，没问题；
 * 一旦条目折行，盒子变成 48px / 72px，圆点就跑到行与行之间去了。
 *
 * 下拉每格 .item 占 25%（.zbei-inner 840px），<a> 可用文字宽约 158px，
 * 英文条目最长 48 个字符（XY-LIMS Laboratory Information Management System），
 * 普遍要折 2~3 行，所以英文站最明显。
 *
 * 这条**不加 lang-en 限定**：单行条目下 top:12px 和 top:50% 渲染完全一致，
 * 中文站现有观感不受影响；而中文最长的几条（XY-MES 生产制造执行管理系统、
 * XY-ExSCS 防爆智能存储柜/工作站等）同样会折行，一并修正。
 *
 * 12px = <a> 的 line-height 24px 的一半，即第一行行盒的垂直中心。
 */
.zbei-sort-infolist .item a::before {
	top: 12px;
	transform: none;
}


/*
 * 右侧栏悬浮联系条
 * ----------------------------------------------------
 * 设计稿里没有这个组件（assets/css/kefu.css 那条是设计稿自带的客服栏，没用上）。
 * 形态按客户点名的参考站 xyiconex.com：48px 的深色方块竖排贴在右侧边缘、
 * 垂直居中，hover 时向左飞出一条带号码的标签。
 * 底色是墨蓝，hover 换成旭永主色。
 *
 * 贴边而不是留 18px 间距：右侧居中的条比右下角的条更容易挡住正文，
 * 贴边能把占用的横向空间压到最小，参考站也是贴边的。
 */
.floating-contact {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1000; /* 页头 .full-head 是 999，悬浮条要压在它上面。 */
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.floating-contact__button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	background-color: #081422;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.15);
	box-shadow: 0 10px 24px rgba(8, 20, 34, 0.18);
	cursor: pointer;
	transition: background-color 0.18s cubic-bezier(0.23, 1, 0.32, 1);
}
/* 竖排贴边的一条，按钮之间只隔 1px；再给 hover 加位移会在条上戳出一个缺口，
   所以只换底色。 */
.floating-contact__button:hover {
	background-color: var(--main-color);
	color: #fff;
}
.floating-contact__button--whatsapp {
	background-color: #1faa54; /* WhatsApp 自己的绿，认得出来才点得下去。 */
	border-color: rgba(255, 255, 255, 0.2);
}
.floating-contact__button--whatsapp:hover {
	background-color: #25c463;
}

/*
 * 拖动把手（客户 2026-08-26：「侧边栏控件需要可以移动的」）
 * ----------------------------------------------------
 * 比按钮矮一半，只做抓握用，不承载信息。三条横线是通用的「可拖」语汇，
 * 配 cursor:grab 让人一看就知道能拽。
 *
 * touch-action:none 是必需的：触屏上不写这一条，浏览器会先把手指的移动
 * 认成页面滚动、然后才发 pointercancel，条根本拖不动。
 */
.floating-contact__handle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 22px;
	padding: 0;
	background-color: #081422;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-bottom: 0;
	box-shadow: 0 10px 24px rgba(8, 20, 34, 0.18);
	cursor: grab;
	touch-action: none;
}
.floating-contact__handle:hover {
	background-color: var(--main-color);
}
.floating-contact.is-dragging .floating-contact__handle {
	cursor: grabbing;
}
.floating-contact__grip {
	width: 18px;
	height: 8px;
	/* 三条 1px 横线：用重复渐变画，省一个图标字形。 */
	background-image: repeating-linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0.75) 0 1px,
		transparent 1px 4px
	);
}

/*
 * 自定义位置之后，设计稿那套 top:50% + translateY(-50%) 必须整个让开：
 * 两套定位同时生效的话，条会落在「像素坐标再往上挪半个自己」的地方。
 * right / top 的具体值由 site.js 写成行内样式。
 */
.floating-contact.is-moved {
	top: 0;
	transform: none;
}

/* 拖动过程中关掉过渡，否则条会黏在指针后面一路追。 */
.floating-contact.is-dragging .floating-contact__button,
.floating-contact.is-dragging .floating-contact__handle {
	transition: none;
}
/* 拖的时候标签别弹出来挡视线。 */
.floating-contact.is-dragging .floating-contact__button::after {
	opacity: 0;
}

/*
 * 返回顶部按钮滚过一屏才出现，靠 hidden 属性切换。
 * 浏览器自带的 `[hidden]{display:none}` 来自 UA 样式表，级联上输给上面那条
 * `display:inline-flex`，所以必须在作者样式里自己写一遍，否则按钮一直都在。
 */
.floating-contact__button[hidden] {
	display: none;
}

/* 图标只有一个，hover 时把按钮的用途用一条标签说出来。 */
.floating-contact__button::after {
	content: attr(data-label);
	position: absolute;
	right: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%) translateX(6px);
	background-color: #081422;
	color: #fff;
	padding: 6px 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	letter-spacing: 0.04em;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s cubic-bezier(0.23, 1, 0.32, 1),
		transform 0.18s cubic-bezier(0.23, 1, 0.32, 1);
}
.floating-contact__button:hover::after,
.floating-contact__button:focus-visible::after {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}

/* 小屏：按钮收到 44px（仍在 44×44 的点击目标下限上），标签藏起来 —— 触屏没有
   hover，弹出来的那条只会挡住正文。 */
@media (max-width: 820px) {
	.floating-contact {
		right: 0;
		gap: 1px;
	}
	.floating-contact__button {
		width: 44px;
		height: 44px;
	}
	.floating-contact__handle {
		width: 44px;
	}
	.floating-contact__button::after {
		display: none;
	}
}


/*
 * 首页第三屏：标题压进画面右侧的留白里
 * ----------------------------------------------------
 * 底图（ban-idx3.webp）左边六成是实验台和仪器，右边四成是空白墙面，
 * 文案本来就该落在右边那块。css.css 里 .slide-box3 没有宽度，靠
 * .ban-flex-slide3 的 justify-content:flex-end 把它推到右侧，
 * 中文标题「日化、精细化工研发管理系统」12 个字放得下，看不出问题；
 * 英文标题「R&D Management System for Home Care and Fine Chemicals」
 * 53 个字符在 50px 下要 1400px 宽，一路顶回容器左端，正好盖在仪器上，
 * 深蓝的字压在同样深的仪器上直接看不清。
 *
 * 所以给盒子一个上限宽度，逼它折行留在右侧；英文再把字号收一档，
 * 免得三行 50px 把整块撑得比留白还高。992px 以下不限宽 —— 那个尺寸下
 * 图和字都小，限宽只会挤成一列窄条。
 */
@media (min-width: 992px) {
	.slide-box3 {
		width: 100%;
		max-width: 42%;
	}
	body.lang-en .slide-box3 h2 {
		font-size: clamp(22px, 2.2vw, 42px);
	}
	body.lang-en .slide-box3 .ban-sub {
		font-size: clamp(13px, 1.05vw, 20px);
	}
}

/*
 * 产品详情：图集下面的视频按钮
 * ----------------------------------------------------
 * 复用 Banner 那颗 .ban-vdplay（蓝框白底、居中），这里只补一个上间距，
 * 让它和缩略图条拉开距离。
 */
.product-vdplay {
	margin-top: 18px;
}


/*
 * 巨幕菜单里的大类标题
 * ----------------------------------------------------
 * 解决方案下的行业大类（石油化工行业 / 日化、精细化工行业）没有落地页，
 * 渲染成 <span> 而不是 <a>（见 inc/nav-walkers.php 的 xuyong_nav_is_heading）。
 * 设计稿里 .zbei-sort-name 本来就自带字号和颜色，这里只把它拉开成一条
 * 分组小标题：加粗、字距略开，和下面那一格格条目区分开。
 *
 * <a> 和 <span> 两种都套同一套排版（客户 2026-08-26 指定：智能装备下拉的
 * 产品分类要和解决方案的行业大类看起来一样）。智能装备的大类是真有落地页的
 * 分类归档链接，所以额外给一个 hover 色 —— 可点和不可点的区别靠交互反馈
 * 表达，而不是靠字重差异。
 */
.zbei-sort-name > span,
.zbei-sort-name > a {
	display: block;
	font-weight: 600;
	letter-spacing: .02em;
	color: #000;
}
.zbei-sort-name > a:hover {
	color: var(--main-color);
}

/*
 * 手机导航里同样的大类。设计稿只给 .ys_ph_nav a 写了排版
 * （display / padding / 字号），换成 <span> 要把这几条补回来，
 * 否则整行会塌成没有上下留白的一行小字。
 */
.ys_ph_nav .ys_phnav_txt {
	display: inline-block;
	vertical-align: middle;
	max-width: calc(100% - 40px);
	padding: 1em 0;
	font-size: 14px;
	line-height: 1.5;
	color: #000;
}
.ys_ph_nav ul .ys_phnav_txt {
	font-size: 12px;
	font-weight: 600;
}

/* 2026-09-07: align proportions and typography with the revision request. */
.sol-list-case--text li .brief { font-size: 14px; }
.idxPartner.swiper .swiper-slide img { width: 72%; height: auto; margin: 0 auto; }
.inab-flex-one { max-width: 1120px; margin: 0 auto; align-items: center; }
.inab-flex-zizi .item { max-width: 300px; }
.inab-content, .inab-teidian { font-size: 16px; margin-top: 24px; }
.patentSwiper .swiper .swiper-slide { width: 110px; }
@media (min-width: 600px) { .patentSwiper .swiper .swiper-slide { width: 180px; } }
@media (min-width: 992px) { .patentSwiper .swiper .swiper-slide { width: 230px; } }
@media (min-width: 1400px) { .patentSwiper .swiper .swiper-slide { width: 260px; } }
.business-address p { padding: 24px; text-align: center; background: #f5f7fc; line-height: 1.7; }
.zoomSwiper .swiper-slide:not(.swiper-slide-active) { pointer-events: none; }
.thumbSwiper .product-video-thumb button:focus-visible { outline: 2px solid #087caf; outline-offset: -3px; }

.floating-business summary { list-style: none; cursor: pointer; font-size: 23px; }
.floating-business summary::-webkit-details-marker { display: none; }
.floating-business__panel { position: fixed; right: 64px; top: 50%; transform: translateY(-50%); width: 270px; max-width: calc(100vw - 82px); max-height: calc(100dvh - 120px); overflow: auto; padding: 20px; background: #fff; color: #263747; border: 1px solid #dce5ed; box-shadow: 0 8px 28px #0002; border-radius: 6px; font-size: 14px; line-height: 1.6; }
.floating-business__person { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e4eaf0; }
.floating-business__person a { display: block; color: #14638c; overflow-wrap: anywhere; }

.xy-column-intro { padding: 44px 0 12px; }
.xy-column-intro__text { max-width: 960px; margin: 20px auto 0; text-align: center; color: #606268; font-size: 16px; line-height: 1.75; }
.xy-column-intro + .section-in-solution, .xy-column-intro + .section-in-product { padding-top: 36px; }
@media (max-width: 767px) { .xy-column-intro { padding-top: 28px; } .xy-column-intro__text { font-size: 14px; } }

/* Video covers in both gallery sizes; playback stays inside the same frame. */
.product-video-preview { position: relative; display: grid; place-items: center; width: 100%; min-height: 220px; background: #fff; cursor: pointer; }
.zoomSwiper .product-video-preview img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.product-video-preview:focus-visible { outline: 3px solid #0073c2; outline-offset: -3px; }
.thumbSwiper .product-video-thumb button.pic { position: relative; display: block; width: 100%; margin: 0; padding: 0; aspect-ratio: 1; background: #fff; border: 1px solid #eee; cursor: pointer; }
.thumbSwiper .product-video-thumb button.pic img { width: 100%; height: 100%; object-fit: contain; }
.product-video-frame { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #fff; }
.product-video-frame .product-video-preview { width: 100%; height: 100%; min-height: 0; }
.zoomSwiper .product-video-frame .product-video-preview img { width: 100%; height: 100%; object-fit: contain; }
.product-video-player { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.product-video-frame [hidden] { display: none; }

/* Original icon geometry from xuyongyun.com: .image-big-video and .video-icon.
   Only the selectors and stacking order are adapted to our gallery. */
.product-video-play-icon { display: block; box-sizing: border-box; width: 80px; height: 80px; position: absolute; inset: 0; margin: auto; border: 5px solid #fff; border-radius: 50%; background: transparent; box-shadow: none; pointer-events: none; z-index: 334; }
.product-video-play-icon::before { content: ""; display: block; box-sizing: border-box; width: 0; height: 0; border-left: 20px solid #fff; border-top: 15px solid transparent; border-bottom: 15px solid transparent; position: absolute; left: 50%; top: 50%; transform: translate(-40%, -50%); }
.thumbSwiper .product-video-play-icon { width: 30px; height: 30px; border-width: 2px; }
.thumbSwiper .product-video-play-icon::before { border-left-width: 10px; border-top-width: 8px; border-bottom-width: 8px; }