@charset "UTF-8";
/**
 * 贞匠装饰 自研主题 · 新增样式
 *
 * site.css 是从线上“实际生效规则集”合并去重得到的（原样保留），本文件只放
 * 去掉插件后必须由我们补上的部分：
 *   1. 轮播的淡入淡出堆叠（原由 Swiper JS 设置）
 *   2. 灯箱（原由 Elementor Lightbox 提供，其 CSS 未在生效集内）
 *   3. 预约表单的蜜罐、提交结果提示
 *   4. 折叠面板 / 文章元信息 的兜底
 *   5. 404 / 空结果
 * 原则：只补不覆盖 —— 所有选择器都带 .zj- 前缀或限定在缺失的类上，不改动 site.css 已有规则。
 */

/* ==================================================================
 * 1. 图片轮播（fade）
 * 原站用 Swiper 的 fade 效果：多张 slide 叠在同一位置交叉淡入淡出。
 * 去掉 Swiper 后用 grid 把 slide 堆到同一格，容器高度自动取最高的那张，
 * 避免切换时页面跳动。
 * ================================================================== */

.zj-carousel {
	position: relative;
}

.zj-carousel .zj-track {
	display: grid;
	box-sizing: border-box;
}

.zj-carousel .zj-slide {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.5s ease;
	pointer-events: none;
}

.zj-carousel .zj-slide.zj-slide-active {
	opacity: 1;
	pointer-events: auto;
}

.zj-carousel .swiper-slide-inner {
	display: block;
	margin: 0;
	line-height: 0;
}

.zj-carousel .swiper-slide-image {
	display: block;
	width: 100%;
	height: auto;
}

.zj-carousel .swiper-pagination {
	left: 0;
	right: 0;
	width: 100%;
	bottom: 10px;
	margin: 0;
}

.zj-carousel .zj-dot {
	cursor: pointer;
}

/* 无障碍：用户开启“减少动态效果”时不做淡入淡出 */
@media (prefers-reduced-motion: reduce) {
	.zj-carousel .zj-slide {
		transition: none;
	}
}

/* ==================================================================
 * 1b. 品牌 logo 走马灯（纯 CSS，无 JS）
 *
 * 复刻 Elementor image-carousel：一屏 4 个、间距 40px、
 * 每 5s 走一张（14 张 → 70s 走完一整组）、悬停暂停。
 *
 * 用容器查询单位 cqw 算单格宽度，这样任意视口下都恰好放下 4 个、
 * 间距恒为 40px，不需要 JS 测量，也不会在窄屏溢出。
 * ================================================================== */

.zj-brandstrip {
	container-type: inline-size;
	position: relative;
	overflow: hidden;
}

.zj-brandstrip .zj-brandstrip-track {
	display: flex;
	align-items: center;
	gap: 40px;
	width: max-content;
	animation: zj-brand-scroll 70s linear infinite;
	will-change: transform;
}

.zj-brandstrip:hover .zj-brandstrip-track,
.zj-brandstrip:focus-within .zj-brandstrip-track {
	animation-play-state: paused;
}

.zj-brandstrip .zj-brand {
	flex: 0 0 auto;
	/* 一屏 4 个 → 4 格 + 3 个 40px 间距 */
	width: calc((100cqw - 120px) / 4);
	display: block;
	line-height: 0;
}

.zj-brandstrip .zj-brand img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* figure 的浏览器默认外边距必须清掉，否则走马灯上下会多出空白 */
.zj-brandstrip .swiper-slide-inner {
	display: block;
	margin: 0;
	line-height: 0;
}

@keyframes zj-brand-scroll {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

/* 窄屏一屏放 2 个 */
@media (max-width: 767px) {
	.zj-brandstrip .zj-brandstrip-track {
		gap: 24px;
	}

	.zj-brandstrip .zj-brand {
		width: calc((100cqw - 24px) / 2);
	}
}

/* 无障碍：用户开启「减少动态效果」时不滚动，改为可横向滑动查看 */
@media (prefers-reduced-motion: reduce) {
	.zj-brandstrip {
		overflow-x: auto;
	}

	.zj-brandstrip .zj-brandstrip-track {
		animation: none;
	}
}

/* ==================================================================
 * 2. 灯箱
 * 原站的灯箱来自 Elementor Lightbox（其样式表未进入生效规则集），
 * 这里完整提供一套等价实现：全屏遮罩 + 图片 + 前后切换 + 标题。
 * ================================================================== */

html.zj-lb-lock {
	overflow: hidden;
}

.zj-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(12, 12, 12, 0.93);
	-webkit-tap-highlight-color: transparent;
}

.zj-lightbox.open {
	display: flex;
}

.zj-lightbox .zj-lb-figure {
	margin: 0;
	max-width: 92vw;
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.zj-lightbox .zj-lb-figure img {
	max-width: 92vw;
	max-height: 82vh;
	width: auto;
	height: auto;
	display: block;
	background: #1b1b1b;
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
}

.zj-lightbox .zj-lb-figure figcaption {
	margin-top: 14px;
	color: #f2f2f2;
	font-size: 14px;
	line-height: 1.6;
	text-align: center;
	max-width: 92vw;
}

.zj-lightbox .zj-lb-close,
.zj-lightbox .zj-lb-prev,
.zj-lightbox .zj-lb-next {
	position: absolute;
	border: 0;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
	line-height: 1;
	padding: 0;
	transition: background-color 0.2s ease;
}

.zj-lightbox .zj-lb-close:hover,
.zj-lightbox .zj-lb-prev:hover,
.zj-lightbox .zj-lb-next:hover {
	background: rgba(255, 255, 255, 0.26);
}

.zj-lightbox .zj-lb-close {
	top: 18px;
	right: 20px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 26px;
}

.zj-lightbox .zj-lb-prev,
.zj-lightbox .zj-lb-next {
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 84px;
	font-size: 40px;
}

.zj-lightbox .zj-lb-prev {
	left: 0;
	border-radius: 0 6px 6px 0;
}

.zj-lightbox .zj-lb-next {
	right: 0;
	border-radius: 6px 0 0 6px;
}

@media (max-width: 767px) {
	.zj-lightbox .zj-lb-prev,
	.zj-lightbox .zj-lb-next {
		width: 40px;
		height: 64px;
		font-size: 30px;
	}

	.zj-lightbox .zj-lb-close {
		top: 10px;
		right: 10px;
		width: 38px;
		height: 38px;
		font-size: 22px;
	}
}

/* ==================================================================
 * 3. 在线预约表单
 * ================================================================== */

/* 蜜罐：正常人看不见，也不会去填；机器人会把每个 input 都填上 */
.zj-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.zj-booking-result:empty {
	display: none;
}

.zj-booking-notice {
	margin: 0 0 22px;
	padding: 14px 18px;
	border: 1px solid transparent;
	border-left-width: 4px;
	border-radius: 4px;
	font-size: 15px;
	line-height: 1.7;
}

.zj-notice-ok {
	background: #f2faf4;
	border-color: #bfe3c8;
	border-left-color: #3f9c58;
	color: #24663a;
}

.zj-notice-err {
	background: #fdf3f3;
	border-color: #f0c8c8;
	border-left-color: #cc3333;
	color: #8d2323;
}

/* ==================================================================
 * 4. 折叠面板兜底
 * 原由 Elementor 在页面里内联输出样式；若某篇文章的正文没带那段内联样式，
 * 这里保证折叠仍然可用（只补齐结构，不改颜色）。
 * ================================================================== */

.elementor-toggle .elementor-tab-content[aria-hidden="false"] {
	display: block;
}

.elementor-toggle .elementor-tab-title .elementor-toggle-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* 正文里的图标（svg sprite）默认按文字大小走 */
.entry-content .icon,
.entry-footer .icon,
.zj-archive-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	fill: currentColor;
	vertical-align: -0.125em;
}

/* ==================================================================
 * 5. 文章页：相关文章、元信息
 *
 * 【已移除】原「Add Widget After Content」插件注入的【点击预约设计】CTA。
 * 甲方反馈该插件早已删除，页面上却还留着这条链接。它由 inc/single-parts.php
 * 的 zj_post_cta() 重建输出（single.php 里调用），2026-09-30 已连同
 * `.awac-wrapper` 的样式一并删除，全站不再出现。
 * ================================================================== */

.entry-footer {
	margin-top: 26px;
}

.entry-footer .entry-meta > span {
	display: inline-block;
	margin-right: 14px;
}

.entry-footer .meta-icon {
	margin-right: 5px;
	color: #8a8a8a;
}

/* 上一篇 / 下一篇：只有单向时不要留出半行空白 */
.post-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
	flex: 1 1 240px;
}

/* ------------------------------------------------------------------ *
 * 相关文章（YARPP thumbnails 模板）—— 手机端重排
 *
 * 桌面的版式来自 site.css 里 YARPP 插件自带的那套**写死像素**的规则：
 *
 *   .yarpp-thumbnails-horizontal .yarpp-thumbnail       { width:310px; height:350px; margin:5px }
 *   .yarpp-thumbnail > img                              { width:300px; height:300px; margin:5px }
 *   .yarpp-thumbnails-horizontal .yarpp-thumbnail-title { width:300px; max-height:2.8em; overflow:hidden }
 *
 * 在 1440px 下 4 张并排刚好铺满，观感是正常的；但手机竖屏内容宽只有 330px，
 * 于是出三个毛病：
 *
 *   1) **图片被压成正方形**。站内缩略图多数是 225×300（竖 3:4），少数 300×200（横 3:2），
 *      被 `width:300px;height:300px` 强行拉成等比方块 —— 室内照片被纵向挤压，最难看的就是这里。
 *   2) **一条塞一张、还比屏幕宽**。310px 的卡片立在 330px 的容器里，左右只剩 10px 余量，
 *      4 张竖着摞成 1476px，滑半天。
 *   3) 标题被 `max-height:2.8em` 拦腰截断，反而更容易在词中间断开。
 *
 * 所以手机端整块换成「左图右题」的紧凑列表：缩略图 108×81（4:3）用 object-fit:cover
 * 居中裁切（不再变形），标题 15px 最多两行、垂直居中。4 条总高约 400px，
 * 是原来的四分之一，且每一张图都保持真实比例。
 *
 * 桌面端**一个像素没动** —— 全部规则限定在 767px 以内，
 * 且选择器与 site.css 逐条同特异度、靠 theme.css 更靠后取胜，没有用 !important。
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
	.yarpp-thumbnails-horizontal {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.yarpp-thumbnails-horizontal .yarpp-thumbnail {
		align-items: center;
		background: #fff;
		border: 1px solid rgba(21, 47, 69, .09);
		border-radius: 10px;
		box-sizing: border-box;
		display: flex;
		gap: 12px;
		height: auto;
		margin: 0;
		padding: 8px;
		vertical-align: baseline;
		width: 100%;
	}

	.yarpp-thumbnails-horizontal .yarpp-thumbnail > img {
		border-radius: 6px;
		display: block;
		flex: 0 0 auto;
		height: 81px;
		margin: 0;
		object-fit: cover;
		width: 108px;
	}

	/* 没特色图时 YARPP 会塞一张 default 占位图，它带着 min-width/min-height:300px，
	   这里一并清零，免得把行撑开。 */
	.yarpp-thumbnails-horizontal .yarpp-thumbnail-default > img {
		min-height: 0;
		min-width: 0;
	}

	.yarpp-thumbnails-horizontal .yarpp-thumbnail-title {
		display: -webkit-box;
		flex: 1 1 auto;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.5;
		margin: 0;
		max-height: none;
		min-width: 0;
		overflow: hidden;
		width: auto;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
}

/* ==================================================================
 * 6. 归档 / 搜索 / 404
 * ================================================================== */

.no-results {
	padding: 40px 0 60px;
}

.no-results .page-title,
.no-results h2 {
	margin: 0 0 14px;
}

.no-results ul {
	margin: 0 0 22px;
	padding-left: 20px;
	list-style: disc;
}

.no-results .search-form {
	max-width: 420px;
}

.archive-description {
	margin-bottom: 26px;
	font-size: 15px;
	line-height: 1.8;
}

/* 归档卡片网格：与「装修资讯 / 工地巡检」列表页保持同一套间距 */
.singular-content-wrap > .elementor-posts-container {
	width: 100%;
}

/* ==================================================================
 * 7. 后台：预约列表的小宽度列，避免换行撑高行高
 * ================================================================== */

.column-zj_area,
.column-zj_service,
.column-zj_size,
.column-zj_name {
	width: 9%;
}

.column-zj_phone,
.column-zj_ip {
	width: 11%;
}

/* ==================================================================
 * 8. 被 Elementor JS 冻结的整宽 section —— 还原为纯 CSS 自适应
 *
 * 原站这些 section 带 `elementor-section-stretched`。Elementor 前端 JS 会在
 * 窗口尺寸变化时，把「视口宽度」算成像素写进 style 属性；抓取快照里因此留下
 * `width:1425px; left:-25px;`（1425 = 1440 − 滚动条 15px，left 用来补偿
 * .wrapper 的左右内边距）。插件移除后这个值再也不会更新，窄屏下 section 仍
 * 按 1425px 横向铺开 —— 这正是移动端首页排版错乱的原因。
 *
 * 这里改为负外边距撑破 .wrapper 的左右内边距，得到与原站一致的「整宽」视觉，
 * 且随视口自适应。.site-content .wrapper 的内边距：<64em 为 30px，>=64em 为 25px。
 * ================================================================== */

/* 必须带 !important：这些 section 的 HTML 里写着
   style="width: 1425px; left: -25px"（注意冒号后带空格），
   内联样式优先级高于任何选择器 —— 不带 !important 的话本规则形同虚设，
   窄屏下 section 依旧按 1425px 横向铺开，整页排版跟着崩。
   （踩过：当时只清理了 HTML 里不带空格的写法，重建时又重新引入。） */
.elementor-section.elementor-section-stretched {
	width: auto !important;
	left: auto !important;
	margin-left: -30px;
	margin-right: -30px;
}

@media screen and (min-width: 64em) {
	.elementor-section.elementor-section-stretched {
		margin-left: -25px;
		margin-right: -25px;
	}
}

/* ------------------------------------------------------------------
 * 8b. 窄屏下不许有元素宽过屏幕
 *
 * Elementor 的「自定义宽度」组件会生成 `.elementor-element-XXXX{width:530px;
 * max-width:530px}` 这类固定像素规则。原站靠前端 JS 在窄屏时改写，插件移除后
 * 改不动了 —— 于是首页「沪上幸福家庭」下方的英文段落固定 530px，在 390px 的
 * 手机屏上右边被硬生生截断。
 *
 * 这里只加约束、不改布局意图：max-width 永远优先于 width，所以宽度没超屏的
 * 元素完全不受影响，只有超屏的会被收到 100%。
 * ------------------------------------------------------------------ */
@media screen and (max-width: 63.9375em) {
	.elementor-widget__width-initial {
		max-width: 100% !important;
	}
}

/* ==================================================================
 * 9. 移动端导航抽屉
 *
 * 原站在 <64em 时收起 .site-primary-menu（display:none），只留一个 ☰ 按钮；
 * 但「展开之后」所需的规则没有进入抓取到的生效规则集，于是按钮点了没有任何
 * 反应 —— 也就是手机上「导航栏不见了」。
 *
 * 补全依据是原站自身的基础规则：.site-navigation a 的 `padding: 11px 30px`
 * 与 .site-primary-menu .site-navigation 的 `margin: 0 -30px`（负的正是
 * .wrapper 的内边距），说明原设计本就是一块移动端展开面板，只缺 display 触发。
 *
 * 桌面端（>=64em）行为完全不变。
 * ================================================================== */

@media screen and (max-width: 63.9375em) {

	/* 抽屉本体：占满 header 一整行，落在 logo 与 ☰ 按钮下方 */
	body.primary-menu-open .site-primary-menu,
	.site-primary-menu.toggled-on {
		display: block;
		flex-basis: 100%;
		width: 100%;
		order: 10;
	}

	/* ☰ ↔ ✕ 图标切换（脚本只维护 aria-expanded 与 body 上的开合类） */
	body.primary-menu-open .menu-toggle .icon-bars,
	.menu-toggle.toggled-on .icon-bars {
		display: none;
	}

	body.primary-menu-open .menu-toggle .icon-close,
	.menu-toggle.toggled-on .icon-close {
		display: inline-block;
	}

	/* 一级菜单：纵向排布（原站只在 >=64em 改成 inline-block），条目间一条细分隔线 */
	.site-navigation .primary-menu > li {
		display: block;
		border-top: 1px solid rgba(0, 0, 0, 0.08);
	}

	/* 点击箭头展开子菜单（脚本切换 li 上的 .sub-menu-open） */
	.site-navigation li.sub-menu-open > ul {
		display: block;
	}

	/* 抽屉内的搜索与菜单之间留一点间距 */
	.site-primary-menu .primary-search-wrapper {
		margin-top: 14px;
	}
}

/* ==================================================================
 * 10. 可关闭的提示条（Elementor alert）
 *
 * 首页两条提示右上角的 ×，原站由 Elementor 前端脚本直接移除元素实现。
 * 去掉插件后改由 site.js 接管，点击时给整条 alert 加 .zj-alert-dismissed。
 * 这里只定义「关掉之后」的状态 —— 原样保留的 site.css 不涉及这个类。
 * ================================================================== */

.elementor-alert.zj-alert-dismissed {
	display: none;
}

/* ==================================================================
 * 11. 入场动画的补白（Elementor Entrance Animation）
 *
 * 原站的动画分两半：@keyframes 与 `.fadeInUp{animation-name:...}` 都在样式表里
 * （site.css 已带全），而「什么时候开始播」由 Elementor 前端脚本控制 ——
 * 脚本随插件一起删掉后，没人再去摘除元素上固化的 .animated，
 * 于是动画在页面加载的那一瞬就全部播完了，往下滚时什么也看不到。
 * 时序交给 site.js 的 initReveal()，这里只补它需要的两条规则。
 * ================================================================== */

/* 带 _animation_delay 的元素，延迟期间保持动画起始态，
   否则延迟还没走完元素就已经完整露出来了（会「先闪一下」）。 */
.animated {
	animation-fill-mode: both;
}

/* 进入视口前藏起来。只在我们接管了时序（html.zj-anim）时生效 ——
   脚本没跑或中途报错时元素照常可见，不会整页白屏。 */
html.zj-anim .elementor-invisible {
	visibility: hidden;
}

/* 无障碍：用户开启「减少动态效果」时不播动画，直接显示 */
@media (prefers-reduced-motion: reduce) {
	html.zj-anim .elementor-invisible {
		visibility: visible;
	}

	.animated {
		animation: none !important;
	}
}

/* ------------------------------------------------------------------ *
 * 返回顶部
 *
 * site.css 里 #to_top_scrollup 只有 `display:none`，**没有任何显示规则** ——
 * 而 site.js 的 initToTop() 一直在给它加 `.show`。于是按钮存在、逻辑正常，
 * 却永远是隐形的。这里把 `.show` 补上。
 *
 * 尺寸坑：site.css 给了 `box-sizing: content-box`，所以 42px + padding 9px×2
 * 实际渲染成 60×60 —— 视觉上像一块膏药。这里显式改回 border-box，
 * 尺寸就是所见即所得。
 * 配色：珊瑚红 #e1716b（Astra 强调色，首屏「预约装修」主按钮同色）。
 * 中间试过一版站点内容区的按钮蓝 #142DFF，甲方比完还是要红 —— 于是回到这里，
 * 两个组件又同色了。换色只需改 --zj-brand-accent / -dark / -pale 三个变量。
 * ------------------------------------------------------------------ */
#to_top_scrollup {
	background: var(--zj-brand-accent);
	border: 0;
	border-radius: 50%;
	bottom: 24px;
	box-shadow: 0 3px 10px rgba(225, 113, 107, .38), 0 0 0 2px rgba(255, 255, 255, .92);
	box-sizing: border-box;
	color: #fff;
	display: block;
	height: 38px;
	opacity: 0;
	padding: 9px;
	right: 20px;
	transform: translateY(6px);
	transition: opacity .28s ease, transform .28s ease, background .28s ease;
	visibility: hidden;
	width: 38px;
}

#to_top_scrollup.show {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
}

#to_top_scrollup svg {
	display: block;
	height: 100%;
	width: 100%;
}

#to_top_scrollup:hover,
#to_top_scrollup:focus-visible {
	background: var(--zj-brand-accent-dark);
}

/* ------------------------------------------------------------------ *
 * 手机端底部联系条
 *
 * 两个按钮：左「拨打电话」实心珊瑚红（主 CTA），右「微信咨询」白底红描边。
 *
 * 这个红不是新造的：原站样式表把它赋给 `a` / `input.button` / `button.alt`，
 * 首屏那颗最大的「预约装修」按钮、导航与链接的 hover 全是它 —— 是品牌强调色。
 * 2026-09-30 曾按甲方要求试过一版站点内容区的按钮蓝 #142DFF
 * （首页「电话咨询」按钮与 1~7 序号圆牌同色），甲方比完还是要红，遂改回。
 * 换色只需改下面 :root 里的三个 --zj-brand-* 变量。
 *
 * 尺寸：按钮 36px 高（原 46px），整条 51px（原 63px）。
 * 两个固定条一上一下共占 124px，手机竖屏 812px 里近 1/6 都在导航上，
 * 所以这次一并收窄 —— **尺寸这一版甲方已确认合适，不要再动**。
 * ------------------------------------------------------------------ */
.zj-mobile-bar {
	display: none;
}

.zj-mb-toast {
	display: none;
}

/* 品牌强调色。当前值 = 珊瑚红 #E1716B（Astra 给 `a` / `input.button` 的色，
   首屏「预约装修」主按钮同色）；深压态 #C9574F，浅底 #FDF1F0。
   换色只改这一处，两个按钮、描边、返回顶部同时跟着走。 */
:root {
	--zj-brand-accent: #e1716b;
	--zj-brand-accent-dark: #c9574f;
	--zj-brand-accent-pale: #fdf1f0;
}

@media (max-width: 767px) {
	/* 手机端页头固定：页面浏览时导航常驻顶部。
	   只能用 position:fixed —— #page 上有 `overflow-x:hidden`，
	   它会让 position:sticky 失效（sticky 的滚动祖先不可滚动）。
	   页头高度由 site.js 实测写入 --zj-hd，body 据此预留内边距。 */
	.site-header {
		background: #fff;
		box-shadow: 0 1px 0 rgba(21, 47, 69, .07), 0 4px 16px rgba(21, 47, 69, .05);
		left: 0;
		position: fixed;
		right: 0;
		top: 0;
		z-index: 9995;
	}

	/* 固定页头与底部联系条各占一截，页面上下各预留等高内边距。
	   --zj-hd / --zj-mbb 由 site.js 实测写入，括号里的值是 JS 未执行时的兜底。 */
	body {
		padding-bottom: calc(var(--zj-mbb, 51px) + env(safe-area-inset-bottom, 0px));
		padding-top: var(--zj-hd, 73px);
	}

	/* 锚点跳转时给固定页头让位，否则目标区块顶部被压住 */
	html {
		scroll-padding-top: calc(var(--zj-hd, 73px) + 10px);
	}

	/* 页头收紧：site.css 给的是 `padding: 21px 30px`，页头因此高达 97px。
	   手机竖屏本来就短，再加一条固定页头就很挤，收到 9px 后是 73px
	   —— 高度由 logo(30px)+副标题(21px+4px 外边距)=55px 决定，字号一个没动。
	   --zj-hd 是 site.js 每次 resize 实测写入的，改了不用手动同步。 */
	.site-header-main {
		padding: 9px 18px;
	}

	.zj-mobile-bar {
		background: #fff;
		border-top: 1px solid #f0e8e6;
		bottom: 0;
		box-shadow: 0 -2px 12px rgba(21, 47, 69, .07);
		display: flex;
		gap: 8px;
		left: 0;
		padding: 7px 10px calc(7px + env(safe-area-inset-bottom, 0px));
		position: fixed;
		right: 0;
		z-index: 9990;
	}

	.zj-mb-btn {
		align-items: center;
		border-radius: 5px;
		cursor: pointer;
		display: flex;
		flex: 1 1 0;
		font-size: 14px;
		font-weight: 500;
		gap: 5px;
		justify-content: center;
		letter-spacing: .04em;
		line-height: 1;
		min-width: 0;
		padding: 9px 6px;
		text-decoration: none;
		transition: background .2s, color .2s, border-color .2s;
		-webkit-tap-highlight-color: transparent;
	}

	.zj-mb-btn svg {
		flex: 0 0 auto;
		fill: currentColor;
		height: 16px;
		width: 16px;
	}

	.zj-mb-btn-call {
		background: var(--zj-brand-accent);
		border: 1px solid var(--zj-brand-accent);
		color: #fff;
	}

	.zj-mb-btn-call:active {
		background: var(--zj-brand-accent-dark);
		border-color: var(--zj-brand-accent-dark);
	}

	.zj-mb-btn-wx {
		background: #fff;
		border: 1px solid var(--zj-brand-accent);
		color: var(--zj-brand-accent);
	}

	.zj-mb-btn-wx:active {
		background: var(--zj-brand-accent-pale);
	}

	/* 返回顶部上移，避让底部联系条 */
	#to_top_scrollup {
		bottom: calc(var(--zj-mbb, 51px) + 12px + env(safe-area-inset-bottom, 0px));
		height: 34px;
		padding: 8px;
		right: 12px;
		width: 34px;
	}

	.zj-mb-toast {
		background: rgba(21, 47, 69, .93);
		border-radius: 8px;
		bottom: calc(var(--zj-mbb, 51px) + 20px + env(safe-area-inset-bottom, 0px));
		color: #fff;
		display: block;
		font-size: 13.5px;
		left: 50%;
		max-width: 80%;
		opacity: 0;
		padding: 10px 18px;
		pointer-events: none;
		position: fixed;
		text-align: center;
		transform: translate(-50%, 8px);
		transition: opacity .25s, transform .25s;
		z-index: 9991;
	}

	.zj-mb-toast.show {
		opacity: 1;
		transform: translate(-50%, 0);
	}
}

/* ==================================================================
 * 12. Banner（页面头图）高度收紧
 *
 * 甲方：「首页 banner 高度也稍微收一些，其他页面的 banner 高度也都是稍微收一些」
 *
 * hero 的高度**只由** `.custom-header-content` 的上下内边距决定 ——
 * 标题 / 副标题 / 按钮的字号与外边距一个都不动，改的只有留白。
 *
 * site.css 里这套 padding 是一条 5 级阶梯（em 断点，site.css 原样如此）：
 *
 *   断点                首页        其它页
 *   < 48em  (768px)     112px       84px
 *   ≥ 48em              143px       98px
 *   ≥ 64em  (1024px)    174px      112px
 *   ≥ 85.375em (1366px) 205px      126px
 *   ≥ 100em (1600px)    236px      126px
 *
 * 下面按同一条阶梯整体收约 20%，断点值与 site.css 逐一对齐，
 * 保证任何视口宽度下都命中同一分支、不会出现某个尺寸突然跳回原高度。
 *
 *   断点                首页        其它页      降幅
 *   < 48em              90px        66px       -20%
 *   ≥ 48em             114px        78px       -20%
 *   ≥ 64em             139px        90px       -20%
 *   ≥ 85.375em         164px       100px       -20%
 *   ≥ 100em            188px       100px       -20%
 *
 * 实测收益（内容区自身高度不变）：
 *   桌面 1440px：首页 612 → 530px、其它页 312 → 260px
 *   手机  390px：首页 407 → 363px、其它页 214 → 178px
 *
 * 想再收或放松：只改这一节里的像素值即可，别处不用动。
 * ================================================================== */

.custom-header-content,
#feature-slider-section .slider-content-wrapper {
	padding: 90px 30px;
}

body:not(.home) .custom-header-content {
	padding: 66px 30px;
}

@media screen and (min-width: 48em) {
	.home .custom-header-content,
	#feature-slider-section .slider-content-wrapper {
		padding: 114px 40px;
	}

	body:not(.home) .custom-header-content {
		padding: 78px 40px;
	}
}

@media screen and (min-width: 64em) {
	.home .custom-header-content,
	#feature-slider-section .slider-content-wrapper {
		padding: 139px 50px;
	}

	body:not(.home) .custom-header-content {
		padding: 90px 50px;
	}
}

@media screen and (min-width: 85.375em) {
	.home .custom-header-content,
	#feature-slider-section .slider-content-wrapper {
		padding: 164px 50px;
	}

	body:not(.home) .custom-header-content {
		padding: 100px 50px;
	}
}

@media screen and (min-width: 100em) {
	.home .custom-header-content,
	#feature-slider-section .slider-content-wrapper {
		padding: 188px 50px;
	}

	body:not(.home) .custom-header-content {
		padding: 100px 50px;
	}
}

/* ==================================================================
 * 13. 在线预约页（page-id-17）纵向节奏
 *
 * 甲方：「整个表单往上放一些，预约装修服务与预约页面的 banner 中间的空白
 *        有点高。另外每个表单项的上下空间也有点高了，再小一些」
 *
 * 实测改前的两段空白 ——
 *   banner 底 →「预约装修服务」H2 顶 : 手机 52px ／ 桌面(1440) 73px
 *   H2 底 → 表单顶                  : 手机 20px ／ 桌面(1440) 20px
 *
 * 这两个数都不是某一处 padding 单独造成的，是两个来源叠出来的
 * （两个 section 自身的 padding 都是 0）：
 *
 *   1) `.site-content` 的 padding-top —— site.css 里是一条 4 级 em 阶梯：
 *        < 64em 42px ｜ ≥64em 56px ｜ ≥85.375em 63px ｜ ≥100em 112px
 *   2) `.elementor-widget-wrap.elementor-element-populated` 的 padding:10px
 *      （elementor-base.css 第 41 行，Elementor 列间距 "default" 就靠这圈 10px）
 *
 * 所以下面按同一条阶梯逐级收，断点值与 site.css 逐一对齐，保证任何视口下
 * 都命中同一分支、不会在某个宽度突然跳回原间距。
 * 只覆盖 padding-top：页面底部的留白（页脚上方）保持原样不动。
 *
 * 选择器一律带 `body.page-id-17`，预约页以外全站零影响。
 *
 *   断点                原值      改后     降幅
 *   < 64em              42px      24px     -43%
 *   ≥ 64em              56px      30px     -46%
 *   ≥ 85.375em          63px      34px     -46%
 *   ≥ 100em            112px      60px     -46%
 *
 *   H2 底 → 表单顶：标题列 padding-bottom 10→6、表单列 padding-top 10→6，
 *   合计 20 → 12px。
 *
 * 想再收或放松：只改这一节里的像素值即可，别处不用动。
 * ================================================================== */

body.page-id-17 .site-content {
	padding-top: 24px; /* 原 42px */
}

@media screen and (min-width: 64em) {
	body.page-id-17 .site-content {
		padding-top: 30px; /* 原 56px */
	}
}

@media screen and (min-width: 85.375em) {
	body.page-id-17 .site-content {
		padding-top: 34px; /* 原 63px */
	}
}

@media screen and (min-width: 100em) {
	body.page-id-17 .site-content {
		padding-top: 60px; /* 原 112px */
	}
}

/* 标题 section 的列：上边距清零（banner 与标题之间不再叠那 10px），
   下边距 10 → 6，与表单 section 的 6 合成 12px。
   只写 top / bottom，左右那 10px 仍是 elementor-base 的原值。 */
body.page-id-17 .elementor-element-17319c7 > .elementor-container > .elementor-column > .elementor-element-populated {
	padding-top: 0;
	padding-bottom: 6px;
}

body.page-id-17 .elementor-element-574a3bd > .elementor-container > .elementor-column > .elementor-element-populated {
	padding-top: 6px;
}