/* ============================================
   产品详情页共用样式
   适用：product-info / product-specs / product-scenes / product-compat
   ============================================ */

/* --- 折叠区块通用 --- */

.mkl-collapsible {
	/* 每个折叠区块顶部分割线颜色 */
	border-top: 1px solid #E5E5EA;
	/* 每个折叠区块底部留白 */
	padding-bottom: 32px;
}

.mkl-collapsible-header {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	/* 标题行上下内边距（影响标题区域点击热区高度） */
	padding: 20px 0;
	background: none;
	border: none;
	cursor: pointer;
}

.mkl-collapsible-title {
	/* 区块标题字号：「产品信息」「技术规格」「兼容性」等 */
	font-size: 26px;
	font-weight: 600;
	color: #1D1D1F;
}

.mkl-collapsible-icon {
	/* 折叠箭头字号（与标题字号保持一致） */
	font-size: 34px;
	font-weight: 600;
	color: #1D1D1F;
	/* 箭头旋转动画：ease 更丝滑，参考 Apple */
	transition: transform .3s ease;
	display: inline-block;
	line-height: 1;
	/* 默认展开状态：箭头朝上（⌄ 旋转 180°） */
	transform: rotate(180deg);
}

.mkl-collapsible-header[aria-expanded="false"] .mkl-collapsible-icon {
	/* 折叠状态：箭头朝下（⌄ 原始方向） */
	transform: rotate(0deg);
}

.mkl-collapsible-body {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	/* 折叠/展开动画时长 */
	transition: max-height .35s ease;
}

.mkl-collapsible-body.collapsed {
	max-height: 0 !important;
}


/* --- info / compat 共用行布局 --- */

.mkl-info-inner {
	display: flex;
	gap: 0;
	
}

.mkl-info-row {
	display: flex;
	gap: 0;
	align-items: flex-start;  /* ← 新增，顶部对齐 */
	/* 行顶部空白（标签与上方分割线的距离）推荐范围 16–28px */
	padding-top: 20px;
	/* 行底部空白（内容与下方分割线的距离）推荐范围 16–28px */
	padding-bottom: 20px;
}

.mkl-info-row .mkl-row-content {
	/* 每行之间的分割线颜色 */
	border-bottom: 1px solid #E5E5EA;
	/* 内容文字与下方分割线的距离，推荐范围 12–24px */
	padding-bottom: 25px;
}

.mkl-info-row:last-child .mkl-row-content {
	border-bottom: none;
}

.mkl-row-label {
	/* 左侧标签列宽度 */
	flex: 0 0 250px;
	/* 左侧标签字号 */
	font-size: 20px;
	font-weight: 600;
	color: #1D1D1F;
	/* 标签顶部微调，0 = 与右侧内容顶部对齐，推荐范围 0–4px */
	padding-top: 5px;
}

.mkl-row-content {
	flex: 1;
	min-width: 0;
	/* 右侧内容区字号（概述正文、包装数量等） */
	font-size: 16px;
	color: #1D1D1F;
	/* 内容区行高 */
	line-height: 2.5;
	
}

.mkl-kv-pair {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	/* gap 控制 key 和 val 之间的空隙，推荐范围 16–60px */
	gap: 20px;
	padding: 0px 0;
	
}

.mkl-kv-key {
	/* 固定宽度，不是 min-width —— 这样 val 永远从 200+50=250px 开始 */
	width: 120px;
	flex-shrink: 0;  /* 禁止压缩，宽度绝对固定 */
}

.mkl-kv-key {
	/* key 字号（「数据线」「iOS」等） */
	font-size: 15px;
	color: #1D1D1F;
}

.mkl-kv-val {
	/* val 字号（「x1」「iOS 17 及以上」等） */
	font-size: 15px;
	color: #1D1D1F; /* 建议 val 用灰色与 key 区分，当前与 key 同色 */
	font-weight: 600;
}


/* --- 响应式 --- */
@media (max-width: 768px) {
	.mkl-info-inner { flex-direction: column; }
	.mkl-info-row { flex-direction: column; gap: 8px; padding: 18px 0; }
	/* 移动端标签字号 */
	.mkl-row-label { flex: none; font-size: 14px; }
	/* 移动端内容字号 */
	.mkl-row-content { font-size: 14px; }
	.mkl-kv-key, .mkl-kv-val { font-size: 14px; }
}
/* -----------------------------------------------
 * 产品信息区 — 文字层级
 * ----------------------------------------------- */

/* 型号 — 最小、最淡，纯辅助信息 */
/* font-size 建议 12~14px */
.product-model {
	font-family: "JetBrains Mono", monospace;
	font-size: 14px;
	font-weight: 500;
	color: #6E6E73;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* tagline 一句卖点 — 比正文略淡，不抢标题 */
/* font-size 建议 14~17px */
.product-tagline {
	font-size: 16px;
	font-weight: 400;
	color: #6E6E73;
	line-height: 1.6;
}
/* 购买按钮容器 */
.product-purchase .mkl-btn:focus {
    outline: none;
    box-shadow: none;
}