/**
 * 产品属性列表 - baijia-product-attributes
 * 移动优先 + 三档响应式断点
 *
 * 关键设计：
 *  - 名称列宽通过 CSS 变量 --bj-name-w 注入，由本文件决定何时使用
 *  - 桌面/平板使用变量；手机端忽略变量，强制 row 横排 + 自适应窄列宽
 */

/* ---------- 通用 ---------- */
.baijia-attrs {
	width: 100%;
	box-sizing: border-box;
	--bj-name-w: 140px;            /* 兜底，PHP 控件会覆盖 */
}

.baijia-attrs * {
	box-sizing: border-box;
}

.baijia-attr-name {
	line-height: 1.4;
}

.baijia-attr-value {
	line-height: 1.5;
	word-break: break-word;
	overflow-wrap: anywhere;
	min-width: 0;
}

.baijia-attr-value > p:first-child { margin-top: 0; }
.baijia-attr-value > p:last-child  { margin-bottom: 0; }

.baijia-attr-image {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

.baijia-attr-image-link {
	display: inline-block;
	line-height: 0;
	cursor: zoom-in;
	max-width: 100%;
}

.baijia-attrs-empty {
	padding: 16px;
	color: #999;
	font-size: 14px;
	text-align: center;
	background: #fafafa;
	border: 1px dashed #e5e5e5;
	border-radius: 6px;
}

/* ---------- 兜底：边框 + 背景 ---------- */
.baijia-attrs.is-table .baijia-attr-row,
.baijia-attrs.is-grid  .baijia-attr-card {
	border: 1px solid #e5e5e5;
	background-color: #fff;
}

.baijia-attrs.is-table .baijia-attr-row:nth-child(even) {
	background-color: #f7f7f7;
}

/* ---------- 卡片网格 ---------- */
.baijia-attrs.is-grid {
	display: grid;
	grid-template-columns: 1fr;
}

.baijia-attrs.is-grid .baijia-attr-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	border-radius: 6px;
}

.baijia-attrs.is-grid .baijia-attr-name {
	width: 100%;
}

/* ---------- 列表布局：始终竖排 ---------- */
.baijia-attrs.is-list {
	display: flex;
	flex-direction: column;
}

.baijia-attrs.is-list .baijia-attr-row {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	border-radius: 6px;
}

/* =============================================================
   表格布局 - 桌面/平板
   ============================================================= */
.baijia-attrs.is-table {
	display: flex;
	flex-direction: column;
}

.baijia-attrs.is-table .baijia-attr-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 12px;
	border-radius: 6px;
}

/* 名称列宽走变量；高度始终自适应（绝不让 flex-basis 当成高度用） */
.baijia-attrs.is-table .baijia-attr-name {
	flex: 0 0 var(--bj-name-w);
	width: var(--bj-name-w);
	max-width: 100%;
}

.baijia-attrs.is-table .baijia-attr-value {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
}

/* =============================================================
   手机端 ≤ 767px：紧凑横排，强制覆盖 Elementor 内联样式
   ============================================================= */
@media (max-width: 767px) {

	.baijia-attrs.is-table {
		gap: 0 !important;
	}

	.baijia-attrs.is-table .baijia-attr-row {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
		gap: 8px !important;
		padding: 8px 10px !important;
		min-height: 0 !important;
		border-radius: 0 !important;
		border-top-width: 0 !important;
	}

	.baijia-attrs.is-table .baijia-attr-row:first-child {
		border-top-width: 1px !important;
		border-top-left-radius: 6px !important;
		border-top-right-radius: 6px !important;
	}

	.baijia-attrs.is-table .baijia-attr-row:last-child {
		border-bottom-left-radius: 6px !important;
		border-bottom-right-radius: 6px !important;
	}

	/* 手机端忽略桌面变量，使用窄而自适应的固定宽 */
	.baijia-attrs.is-table .baijia-attr-name {
		flex: 0 0 110px !important;
		width: 110px !important;
		max-width: 40% !important;
		font-size: 13px !important;
		line-height: 1.4 !important;
	}

	.baijia-attrs.is-table .baijia-attr-value {
		flex: 1 1 0 !important;
		width: auto !important;
		min-width: 0 !important;
		font-size: 13px !important;
		line-height: 1.5 !important;
	}

	.baijia-attrs.is-grid .baijia-attr-card,
	.baijia-attrs.is-list .baijia-attr-row {
		padding: 8px 10px !important;
		min-height: 0 !important;
	}

	.baijia-attr-image {
		max-width: 100% !important;
	}
}

@media (max-width: 380px) {
	.baijia-attrs.is-table .baijia-attr-name {
		flex: 0 0 92px !important;
		width: 92px !important;
		max-width: 38% !important;
	}
}