/**
 * 全站通用：卡片容器组件
 * 用于：商品页左右大卡片、优惠券/关联推荐等横向条、列表项卡片、设置项等
 * 用法：给容器加 .sanxio-card，可选修饰 .sanxio-card--strip（条形容器）
 */

/* 基础卡片：大圆角 + 阴影 + 细边框，白底（内边距可被页面或父级覆盖） */
.sanxio-card {
	--sanxio-card-padding-x: var(--sanxio-card-padding-x, 16px);
	--sanxio-card-padding-y: var(--sanxio-card-padding-y, 16px);
	background: var(--md-sys-color-surface-container-lowest, #fff);
	border-radius: var(--md-sys-shape-corner-large, 12px);
	box-shadow: var(--md-sys-elevation-level1, 0 1px 3px rgba(0,0,0,.08));
	border: 1px solid var(--md-sys-color-outline-variant, rgba(0,0,0,.08));
	box-sizing: border-box;
	padding: var(--sanxio-card-padding-y) var(--sanxio-card-padding-x);
}

/* 条形容器：小圆角 + 浅底 + 细边框（与优惠券区、横向滚动条同款）
 * 高度由上下内边距决定，可用变量或修饰类调节，无需另做组件 */
.sanxio-card--strip {
	--sanxio-card-strip-padding-y: 10px;
	--sanxio-card-strip-padding-x: 12px;
	padding: var(--sanxio-card-strip-padding-y) var(--sanxio-card-strip-padding-x);
	background: var(--md-sys-color-surface-container, #f5f5f5);
	border: 1px solid var(--md-sys-color-outline-variant, #e7e0ec);
	border-radius: var(--md-sys-shape-corner-small, 8px);
	box-shadow: none;
}
/* 紧凑条：高度约减 20px（上下内边距改为 0），需更矮时用 */
.sanxio-card--strip--compact {
	--sanxio-card-strip-padding-y: 0;
}

/* 卡片标题行（可选，与内容区分） */
.sanxio-card__title {
	display: block;
	font-size: var(--md-sys-typescale-title-small-size, 16px);
	font-weight: 500;
	color: var(--md-sys-color-on-surface, #1c1b1f);
	margin: 0 0 12px;
	padding: 0;
}

/* 样式5（全站通用）：标题带背景色块（MD3 低疲劳蓝灰） */
:root {
	--sanxio-card-style5-head-bg: #eef5ff;
	--sanxio-card-style5-head-border: var(--md-sys-color-outline-variant, #d7e4f3);
	--sanxio-card-style5-head-min-height: 48px;
	--sanxio-card-style5-head-padding-y: 10px;
	--sanxio-card-style5-head-padding-x: 12px;
	--sanxio-card-style5-title-size: var(--md-sys-typescale-title-medium-size, 16px);
	--sanxio-card-style5-title-line-height: var(--md-sys-typescale-title-medium-line-height, 24px);
	--sanxio-card-style5-title-weight: var(--md-sys-typescale-title-medium-weight, 500);
	--sanxio-card-style5-border-color: var(--md-sys-color-outline-variant, #d7e4f3);
}

/* 兼容旧变量名（FAQ/商城详情已使用） */
:root {
	--sanxio-card-head-bg: var(--sanxio-card-style5-head-bg);
	--sanxio-card-head-border: var(--sanxio-card-style5-head-border);
	--sanxio-card-head-min-height: var(--sanxio-card-style5-head-min-height);
	--sanxio-card-head-padding-y: var(--sanxio-card-style5-head-padding-y);
	--sanxio-card-head-padding-x: var(--sanxio-card-style5-head-padding-x);
}

/* 样式5组件：.sanxio-card + .sanxio-card--style5 */
.sanxio-card--style5 {
	border-color: var(--sanxio-card-style5-border-color);
	padding: 0;
	overflow: hidden;
}
.sanxio-card--style5 > .sanxio-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: var(--sanxio-card-style5-head-min-height);
	padding: var(--sanxio-card-style5-head-padding-y) var(--sanxio-card-style5-head-padding-x);
	background: var(--sanxio-card-style5-head-bg);
	border-bottom: 1px solid var(--sanxio-card-style5-head-border);
	box-sizing: border-box;
}
.sanxio-card--style5 > .sanxio-card__head .sanxio-card__title {
	margin: 0;
	font-size: var(--sanxio-card-style5-title-size);
	line-height: var(--sanxio-card-style5-title-line-height);
	font-weight: var(--sanxio-card-style5-title-weight);
	color: var(--md-sys-color-on-surface, #1c1b1f);
}
.sanxio-card--style5 > .sanxio-card__body {
	padding: var(--sanxio-card-padding-y, 16px) var(--sanxio-card-padding-x, 16px);
	box-sizing: border-box;
}

/* FAQ/商城详情等新模板统一标题栏基础样式 */
.mdc-faq-card__head,
.mdc-show-detail-head {
	min-height: var(--sanxio-card-head-min-height);
	padding: var(--sanxio-card-head-padding-y) var(--sanxio-card-head-padding-x);
	background: var(--sanxio-card-head-bg);
	border-bottom: 1px solid var(--sanxio-card-head-border);
	box-sizing: border-box;
}

/* 无内边距变体：仅提供外框，内容自控 padding（如商品页左侧大卡） */
.sanxio-card--no-padding {
	padding: 0;
}

/* 固定高度 + 内容区滚动（如商品页左右卡片） */
.sanxio-card--scroll {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* 卡片底部统一操作区：按钮右对齐，可与 md3-btn-group 组合使用 */
.md3-card-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 12px;
}

.md3-card-actions .md3-btn {
	/* 默认根据内容自适应宽度，如需等宽可额外加 md3-btn-group 或手动加 flex:1 */
}

/* 深色主题：卡片标题栏同步为深色样式 */
:root[data-theme="dark"] .sanxio-card__head,
:root.theme-dark .sanxio-card__head,
:root[data-theme="dark"] .mdc-faq-card__head,
:root.theme-dark .mdc-faq-card__head,
:root[data-theme="dark"] .mdc-show-detail-head,
:root.theme-dark .mdc-show-detail-head {
	background: var(--md-sys-color-surface-container-high, #2a2a2a);
	border-bottom-color: var(--md-sys-color-outline-variant, #3c3c3c);
}

:root[data-theme="dark"] .sanxio-card__head .sanxio-card__title,
:root.theme-dark .sanxio-card__head .sanxio-card__title,
:root[data-theme="dark"] .mdc-faq-card__head,
:root.theme-dark .mdc-faq-card__head,
:root[data-theme="dark"] .mdc-show-detail-head,
:root.theme-dark .mdc-show-detail-head {
	color: var(--md-sys-color-on-surface, #f5f5f5);
}