/*!
 * DIAMLUME — P1-02 Filter 右侧抽屉
 *
 * 参数来源：《DIAMLUME 网站最终返工与验收要求》第三节 P1-02
 *          「可执行标注｜Filter 固定执行参数」（基准 1600×1000，浏览器 100%）
 *
 *   抽屉宽 880px（左边 = 视口宽 − 880），左右内边距 50 / 70
 *   标题 Cormorant Garamond 48px / 行高 58px，距顶 70
 *   关闭按钮 32×32，right 54 / top 49（中心 x=1530 / y=65）
 *   组标题 Manrope 14px / 20px，色 #B7832F，标题下 25
 *   复选框 18×18px，文字左距 32px（18 + 14），行步长 43px
 *   两列：350px + 40px 间距 + 370px（分组起点 x=770 / 1160）
 *   分组距顶 150 / 500px（.dl-filter__group 最小高 350px）
 *   MAIN STONE 组内两列 185px×2，每列 6 行 × 43px
 *   底部按钮高 65px，CLEAR ALL 350px / APPLY 380px / 间距 30px，距底 100px
 *
 * 文档未给出、由本站按既有抽屉惯例补齐的部分：
 *   展开/收起过渡与遮罩、hover / focus-visible、动态数量字色、
 *   面板 z-index（正文附录示例为 1000；本站页眉为 1000、搜索面板 1200、
 *   购物袋 1300，故取 1250 —— 确认稿要求遮罩覆盖页眉，同级值依赖 DOM 顺序不可靠）
 */

/* ============================================================
   0. 变量
   ============================================================ */
.dl-filter {
	--dl-ink: #1D1A18;
	--dl-sub: #716B64;
	--dl-accent: #B7832F;
	--dl-panel: #FAF9F7;
	--dl-pad-l: 50px;
	--dl-pad-r: 70px;
	--dl-col-a: 350px;
	--dl-col-gap: 40px;
	--dl-col-b: 370px;
	--dl-step: 43px;
}

/* ============================================================
   1. 遮罩 + 面板外壳
   ============================================================ */
.dl-filter {
	position: fixed;
	inset: 0;
	z-index: 1250;
	background: rgba(29, 26, 24, .52);
	opacity: 0;
	visibility: hidden;
	transition: opacity .28s ease, visibility .28s ease;
}

.dl-filter.is-open {
	opacity: 1;
	visibility: visible;
}

.dl-filter__mask {
	position: absolute;
	inset: 0;
	cursor: pointer;
}

.dl-filter__panel {
	position: absolute;
	right: 0;
	top: 0;
	width: 880px;
	max-width: 100vw;
	height: 100vh;
	height: 100dvh;
	box-sizing: border-box;
	background: var(--dl-panel);
	color: var(--dl-ink);
	font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 14px;
	line-height: 20px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform: translateX(100%);
	transition: transform .34s cubic-bezier(.22, .61, .36, 1);
}

.dl-filter.is-open .dl-filter__panel {
	transform: translateX(0);
}

/*
 * 悬浮客服/聊天按钮必须让位
 * .shoushi-ai-chat 的 z-index 为 99998（远高于抽屉的 1250），实测会落在
 * 右下角 APPLY 按钮上，既挡视线也可能吞掉点击。抽屉展开期间直接隐藏。
 */
html.dl-filter-open .shoushi-ai-chat,
html.dl-filter-open .shoushi-whatsapp {
	visibility: hidden !important;
	pointer-events: none !important;
}

/* ============================================================
   2. header（标题 + 关闭）
   ============================================================ */
.dl-filter__form {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	margin: 0;
}

.dl-filter__header {
	height: 150px;
	flex: none;
	box-sizing: border-box;
	padding: 70px var(--dl-pad-r) 0 var(--dl-pad-l);
	position: relative;
}

/*
 * 标题必须 !important —— 根因（两条，与分类页 H1 同源）：
 *   1) Avada 的 responsive typography JS 会给页面内 <h2> 补上
 *      class="fusion-responsive-typography-calculated" 并写入**内联**
 *      `line-height: 1.15`；内联优先级高于任何选择器，不加 !important 会得到
 *      48 × 1.15 = 55.2px 而不是执行参数要求的 58px。
 *   2) kinnstudio.css 的 `.shoushi-kinn h2 {line-height:1.15}`（特异性 11）
 *      同样会压过 `.dl-filter__title`（10）。
 */
.dl-filter__title {
	margin: 0;
	font-family: "Cormorant Garamond", Georgia, serif !important;
	font-size: 48px !important;
	font-weight: 400 !important;
	line-height: 58px !important;
	letter-spacing: 0 !important;
	color: var(--dl-ink) !important;
}

.dl-filter__close {
	position: absolute;
	right: 54px;
	top: 49px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--dl-ink);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dl-filter__close svg {
	width: 16px;
	height: 16px;
	display: block;
}

.dl-filter__close:hover {
	opacity: .6;
}

/* ============================================================
   3. body（可滚动 · 四组两列）
   ============================================================ */
.dl-filter__body {
	flex: 1;
	min-height: 0;
	overflow: auto;
	overscroll-behavior: contain;
	padding: 0 var(--dl-pad-r) 0 var(--dl-pad-l);
	display: grid;
	grid-template-columns: var(--dl-col-a) var(--dl-col-b);
	column-gap: var(--dl-col-gap);
	row-gap: 0;
	align-content: start;
}

.dl-filter__group {
	min-height: 350px;
}

.dl-filter__group-title {
	margin: 0 0 25px;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: .02em;
	color: var(--dl-accent);
}

/* 选项行：复选框 18 + 间距 14 = 文字左距 32 */
.dl-filter__option {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: var(--dl-step);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: var(--dl-sub);
	cursor: pointer;
}

.dl-filter__option input {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	margin: 0;
	flex: none;
	border: 1px solid var(--dl-sub);
	background: transparent;
	border-radius: 0;
	cursor: pointer;
	position: relative;
}

.dl-filter__option input:checked {
	background: var(--dl-ink);
	box-shadow: inset 0 0 0 3px var(--dl-panel);
}

.dl-filter__option input:focus-visible {
	outline: 2px solid var(--dl-ink);
	outline-offset: 2px;
}

.dl-filter__option:hover .dl-filter__label,
.dl-filter__option input:checked ~ .dl-filter__label {
	color: var(--dl-ink);
}

.dl-filter__count {
	font-size: 12px;
	line-height: 18px;
	color: #ADA69E;
	font-variant-numeric: tabular-nums;
}

/* MAIN STONE 组内两列，每列 6 项（纵向填充） */
.dl-filter__stones {
	display: grid;
	grid-template-columns: 185px 185px;
	grid-auto-flow: column;
	grid-template-rows: repeat(6, var(--dl-step));
}

/* ============================================================
   4. footer（固定底部，不遮选项）
   ============================================================ */
.dl-filter__footer {
	flex: none;
	box-sizing: border-box;
	padding: 35px var(--dl-pad-r);
	display: grid;
	grid-template-columns: var(--dl-col-a) 380px;
	gap: 30px;
}

.dl-filter__btn {
	height: 65px;
	font-family: "Manrope", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 22px;
	letter-spacing: .06em;
	border: 2px solid var(--dl-ink);
	border-radius: 0;
	background: transparent;
	color: var(--dl-ink);
	cursor: pointer;
}

.dl-filter__btn:hover {
	background: rgba(29, 26, 24, .06);
}

.dl-filter__btn:focus-visible {
	outline: 2px solid var(--dl-ink);
	outline-offset: 3px;
}

.dl-filter__apply {
	background: var(--dl-ink);
	color: #FFFFFF;
}

.dl-filter__apply:hover {
	background: #35302C;
}

/* ============================================================
   5. 窄屏：单列分组 + 滚动，字号层级不变
   ============================================================ */
@media (max-width: 879px) {
	.dl-filter__panel {
		width: 100vw;
	}

	.dl-filter__header {
		height: 120px;
		padding: 36px 24px 0;
	}

	.dl-filter__body {
		padding: 0 24px;
		grid-template-columns: 1fr;
		column-gap: 0;
	}

	.dl-filter__group {
		min-height: 0;
		padding-bottom: 24px;
	}

	.dl-filter__stones {
		grid-template-columns: 1fr 1fr;
	}

	.dl-filter__footer {
		padding: 20px 24px;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	.dl-filter__close {
		right: 20px;
		top: 30px;
	}
}