/**
 * 发卡中心页面样式（page-card.php）
 *
 * 商品卡片网格 + 购买记录列表 + 购买确认弹窗。
 * 配色全部复用主题变量（--pcgh-*），自动跟随主题主色与亮/暗色。
 */

.pcgh-card-store {
	width: calc(100% - 24px);
	max-width: 1200px;
	margin: 28px auto;
	background: var(--pcgh-surface);
	border: 1px solid var(--pcgh-border);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 20px 48px -26px rgba(0, 0, 0, .5);
	color: var(--pcgh-text);
}

/* ---------------- 顶部主视觉 ---------------- */
.pcgh-card-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, var(--pcgh-primary), var(--pcgh-primary-2, var(--pcgh-primary)));
	padding: 30px 34px 28px;
	color: #fff;
}

.pcgh-card-hero::before,
.pcgh-card-hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.pcgh-card-hero::before {
	width: 300px;
	height: 300px;
	bottom: -180px;
	left: -90px;
	background: radial-gradient(circle, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%);
}

.pcgh-card-hero::after {
	width: 260px;
	height: 260px;
	top: -140px;
	right: -70px;
	background: radial-gradient(circle, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 70%);
}

.pcgh-card-hero__inner {
	position: relative;
	z-index: 1;
}

.pcgh-card-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .18);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .3px;
}

.pcgh-card-hero__pulse {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 0 rgba(255, 255, 255, .7);
	animation: pcgh-card-pulse 2s infinite;
}

@keyframes pcgh-card-pulse {
	0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); }
	70% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.pcgh-card-hero__title {
	margin: 12px 0 8px;
	font-size: 24px;
	font-weight: 800;
	color: #fff;
}

.pcgh-card-hero__intro {
	margin: 0;
	max-width: 720px;
	font-size: 13.5px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .9);
}

.pcgh-card-hero__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
}

.pcgh-card-hero__tag {
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	font-size: 12px;
}

.pcgh-card-hero__link {
	margin-left: auto;
	font-size: 12px;
	color: rgba(255, 255, 255, .92);
	text-decoration: none;
	border-bottom: 1px dashed rgba(255, 255, 255, .5);
}

/* ---------------- 主体 ---------------- */
.pcgh-card-body {
	padding: 22px 24px 26px;
}

.pcgh-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
}

.pcgh-card-item {
	display: flex;
	flex-direction: column;
	background: var(--pcgh-surface-2, var(--pcgh-surface));
	border: 1px solid var(--pcgh-border);
	border-radius: 14px;
	overflow: hidden;
	transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.pcgh-card-item:hover {
	border-color: var(--pcgh-primary);
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -20px rgba(0, 0, 0, .55);
}

.pcgh-card-item.is-soldout {
	opacity: .72;
}

.pcgh-card-item__cover {
	position: relative;
	height: 118px;
	background: linear-gradient(135deg, var(--pcgh-primary), var(--pcgh-primary-2, var(--pcgh-primary)));
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.pcgh-card-item__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pcgh-card-item__cover-ph {
	color: rgba(255, 255, 255, .85);
}

.pcgh-card-item__cover-ph svg {
	width: 44px;
	height: 44px;
}

.pcgh-card-item__main {
	flex: 1;
	padding: 14px 14px 10px;
}

.pcgh-card-item__name {
	margin: 0;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--pcgh-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pcgh-card-item__desc {
	margin: 6px 0 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--pcgh-text-2, var(--pcgh-text));
	opacity: .78;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pcgh-card-item__meta {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-top: 12px;
}

/* 价格区固定两行：第一行「价格 + 划线原价 + 积分芯片」，第二行「会员价 / 门槛徽标」。 */
.pcgh-card-item__meta-line {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 8px;
	min-width: 0;
}

.pcgh-card-item__price {
	color: var(--pcgh-primary);
	font-size: 20px;
	font-weight: 800;
}

.pcgh-card-item__price em {
	font-style: normal;
	font-size: 13px;
	margin-right: 1px;
}

/* 积分价徽标：与现金价并列显示。 */
.pcgh-card-item__points {
	font-size: 12px;
	font-weight: 700;
	color: var(--pcgh-primary);
	border: 1px solid color-mix(in srgb, var(--pcgh-primary) 35%, transparent);
	border-radius: 999px;
	padding: 1px 8px;
	white-space: nowrap;
}

/* 会员等级门槛徽标：提示该商品的兑换所需等级。 */
.pcgh-card-item__level {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 12px;
	font-weight: 600;
	color: #d97706;
	border: 1px solid color-mix(in srgb, #d97706 35%, transparent);
	border-radius: 999px;
	padding: 1px 8px;
	white-space: nowrap;
}

.pcgh-card-item__level-icon svg {
	width: 13px;
	height: 13px;
}

.pcgh-card-item__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 14px 14px;
}

.pcgh-card-item__foot .pcgh-btn {
	flex: 1 1 130px;
	justify-content: center;
}

/* 积分兑换按钮：描边样式，与「立即购买」的实心主色区分。 */
.pcgh-card-item__foot .pcgh-card-redeem {
	border-color: var(--pcgh-primary);
	color: var(--pcgh-primary);
	background: transparent;
}

.pcgh-card-item__foot .pcgh-card-redeem:hover {
	background: color-mix(in srgb, var(--pcgh-primary) 12%, transparent);
}

/* 会员等级不足时的兑换按钮：改为开通会员引导链接（暖色描边）。 */
.pcgh-card-item__foot .pcgh-card-redeem--locked {
	border-color: #d97706;
	color: #d97706;
	text-decoration: none;
}

.pcgh-card-item__foot .pcgh-card-redeem--locked:hover {
	background: color-mix(in srgb, #d97706 12%, transparent);
}

.pcgh-card-item__foot .pcgh-btn.is-disabled,
.pcgh-card-item__foot .pcgh-btn:disabled {
	opacity: .6;
	cursor: not-allowed;
}

/* ---------------- 空状态 ---------------- */
.pcgh-card-empty {
	padding: 46px 20px;
	text-align: center;
	color: var(--pcgh-text-2, var(--pcgh-text));
}

.pcgh-card-empty__icon svg {
	width: 46px;
	height: 46px;
	opacity: .5;
}

.pcgh-card-empty__title {
	margin: 12px 0 4px;
	font-size: 15px;
	font-weight: 700;
	color: var(--pcgh-text);
}

.pcgh-card-empty__desc {
	margin: 0;
	font-size: 13px;
	opacity: .8;
}

/* ---------------- 购买记录 ---------------- */
.pcgh-card-orders {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px dashed var(--pcgh-border);
}

.pcgh-card-orders__head {
	margin-bottom: 14px;
}

.pcgh-card-orders__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--pcgh-text);
}

.pcgh-card-orders__icon svg {
	width: 19px;
	height: 19px;
}

.pcgh-card-orders__tip {
	margin: 6px 0 0;
	font-size: 12.5px;
	color: var(--pcgh-text-2, var(--pcgh-text));
	opacity: .8;
}

.pcgh-card-orders__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pcgh-card-order {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	background: var(--pcgh-surface-2, var(--pcgh-surface));
	border: 1px solid var(--pcgh-border);
	border-radius: 12px;
}

.pcgh-card-order__info {
	flex: 0 0 190px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pcgh-card-order__name {
	font-size: 14px;
	font-weight: 600;
	color: var(--pcgh-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pcgh-card-order__time {
	font-size: 12px;
	color: var(--pcgh-text-2, var(--pcgh-text));
	opacity: .75;
}

.pcgh-card-order__code {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.pcgh-card-order__key {
	flex: 1;
	min-width: 0;
	padding: 6px 10px;
	border-radius: 8px;
	background: var(--pcgh-surface);
	border: 1px dashed var(--pcgh-border);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	color: var(--pcgh-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pcgh-card-order__copy {
	flex: 0 0 auto;
	padding: 6px 12px;
	border-radius: 8px;
	border: 1px solid var(--pcgh-primary);
	background: transparent;
	color: var(--pcgh-primary);
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background .16s ease, color .16s ease;
}

.pcgh-card-order__copy:hover {
	background: var(--pcgh-primary);
	color: #fff;
}

.pcgh-card-order__pending {
	font-size: 12.5px;
	color: #d97706;
}

.pcgh-card-order__amount {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 700;
	color: var(--pcgh-primary);
}

.pcgh-card-orders__empty {
	margin: 0;
	padding: 16px;
	font-size: 13px;
	color: var(--pcgh-text-2, var(--pcgh-text));
	opacity: .8;
	text-align: center;
}

/* ---------------- 购买确认弹窗 ---------------- */
.pcgh-card-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
}

.pcgh-card-modal.is-open {
	display: block;
}

.pcgh-card-modal__mask {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .5);
}

.pcgh-card-modal__panel {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 40px);
	max-width: 380px;
	background: var(--pcgh-surface);
	border: 1px solid var(--pcgh-border);
	border-radius: 18px;
	padding: 24px 22px 20px;
	box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .6);
}

.pcgh-card-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 30px;
	height: 30px;
	border: none;
	background: transparent;
	color: var(--pcgh-text-2, var(--pcgh-text));
	cursor: pointer;
	border-radius: 50%;
}

.pcgh-card-modal__close svg {
	width: 18px;
	height: 18px;
}

/* 仅在支持真正悬停的设备上启用 hover 样式：触屏设备若存在 :hover 规则，
   首次点击会被浏览器当成「触发悬停」而吞掉，导致关闭按钮要点很多次才生效。 */
@media (hover: hover) and (pointer: fine) {
	.pcgh-card-modal__close:hover {
		background: var(--pcgh-surface-2, var(--pcgh-surface));
	}
}

.pcgh-card-modal__title {
	margin: 0 0 14px;
	font-size: 17px;
	font-weight: 700;
	color: var(--pcgh-text);
}

.pcgh-card-modal__product {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--pcgh-surface-2, var(--pcgh-surface));
	margin-bottom: 14px;
}

.pcgh-card-modal__name {
	font-size: 14px;
	font-weight: 600;
	color: var(--pcgh-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pcgh-card-modal__price {
	flex: 0 0 auto;
	font-size: 20px;
	font-weight: 800;
	color: var(--pcgh-primary);
}

.pcgh-card-modal__price em {
	font-style: normal;
	font-size: 13px;
}

.pcgh-card-modal__methods {
	display: flex;
	gap: 10px;
	margin-bottom: 16px;
}

.pcgh-card-method {
	flex: 1;
	padding: 11px 0;
	border-radius: 10px;
	border: 1px solid var(--pcgh-border);
	background: transparent;
	color: var(--pcgh-text);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.pcgh-card-method.is-active {
	border-color: var(--pcgh-primary);
	background: color-mix(in srgb, var(--pcgh-primary) 12%, transparent);
	color: var(--pcgh-primary);
}

.pcgh-card-modal__submit {
	width: 100%;
	padding: 13px 0;
	border: none;
	border-radius: 12px;
	background: var(--pcgh-primary);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: filter .16s ease;
}

.pcgh-card-modal__submit:hover {
	filter: brightness(1.06);
}

.pcgh-card-modal__submit:disabled {
	opacity: .65;
	cursor: not-allowed;
}

.pcgh-card-modal__note {
	margin: 12px 0 0;
	font-size: 12px;
	text-align: center;
	color: var(--pcgh-text-2, var(--pcgh-text));
	opacity: .8;
}

/* 积分兑换弹窗：积分价显示 */
.pcgh-card-modal__price--points {
	font-size: 18px;
}

/* 积分兑换结果：卡密展示 + 复制 */
.pcgh-card-redeem-result__code {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.pcgh-card-redeem-result .pcgh-card-modal__submit {
	margin-top: 14px;
}

/* ---------------- 合并购买弹窗：支付模式与等级价 ---------------- */

/* 切换视图 / 面板依赖 hidden 属性，显式兜底，避免被其它 display 规则覆盖。 */
.pcgh-card-modal [hidden] {
	display: none !important;
}

/* 支付方式切换：现金支付 / 积分支付（外观与渠道按钮一致）。 */
.pcgh-card-modal__modes {
	display: flex;
	gap: 10px;
	margin-bottom: 14px;
}

.pcgh-card-mode {
	flex: 1;
	padding: 10px 0;
	border-radius: 10px;
	border: 1px solid var(--pcgh-border);
	background: transparent;
	color: var(--pcgh-text);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.pcgh-card-mode.is-active {
	border-color: var(--pcgh-primary);
	background: color-mix(in srgb, var(--pcgh-primary) 12%, transparent);
	color: var(--pcgh-primary);
}

/* 弹窗内门槛提示（积分通道被会员门槛挡住时显示原因）。 */
.pcgh-card-modal__gate {
	margin: 0 0 12px;
	font-size: 12.5px;
	text-align: center;
	color: #d97706;
}

.pcgh-card-modal__note--inline {
	margin: 0 0 4px;
}

/* 弹窗内「会员等级价格」明细：卡片上原本逐行的清单移到这里。 */
.pcgh-card-modal__vip {
	margin: 0 0 12px;
	padding: 9px 11px;
	border: 1px dashed color-mix(in srgb, var(--pcgh-border) 70%, transparent);
	border-radius: 10px;
	background: var(--pcgh-surface-2, var(--pcgh-surface));
}

.pcgh-card-modal__vip-title {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 700;
	color: #d97706;
}

.pcgh-card-modal__vip-icon svg {
	width: 13px;
	height: 13px;
}

.pcgh-card-modal__vip-list {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-top: 6px;
}

.pcgh-card-modal__vip-item {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 12.5px;
	color: var(--pcgh-text-2, var(--pcgh-text));
}

.pcgh-card-modal__vip-item.is-current {
	font-weight: 700;
	color: var(--pcgh-primary);
}

/* 「我的等级」徽标：用真实节点而非 ::after，避免被等级名的省略号截断。 */
.pcgh-card-modal__vip-tag {
	padding: 0 6px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--pcgh-primary) 16%, transparent);
	font-size: 10.5px;
	font-weight: 600;
	line-height: 16px;
}

.pcgh-card-modal__vip-lv {
	flex: 0 1 auto;
	min-width: 0;
	font-style: normal;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pcgh-card-modal__vip-price {
	flex: 0 0 auto;
	font-weight: 800;
	color: inherit;
}

/* 该等级不支持当前支付方式（未配该通道价格）：弱化显示。 */
.pcgh-card-modal__vip-price.is-off {
	font-weight: 600;
	opacity: .5;
}

/* 卡片价格：划线原价（仅在确有优惠时显示）。 */
.pcgh-card-item__price-old {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--pcgh-text-2, var(--pcgh-text));
	opacity: .65;
	text-decoration: line-through;
}

/* 不可购买时的开通会员引导链接。 */
.pcgh-card-item__foot .pcgh-card-buy--locked {
	border-color: #d97706;
	color: #d97706;
	text-decoration: none;
}

.pcgh-card-item__foot .pcgh-card-buy--locked:hover {
	background: color-mix(in srgb, #d97706 12%, transparent);
}

/* ---------------- 商品分类筛选 ---------------- */
/* 发卡页入口按钮（使用教程 / 下载软件）：位于分类标签「全部」上方，链接由后台配置。 */
.pcgh-card-tools {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 12px;
}

.pcgh-card-tool {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 18px;
	border-radius: 999px;
	border: 1px solid var(--pcgh-border);
	background: var(--pcgh-surface-2, var(--pcgh-surface));
	color: var(--pcgh-text);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}

.pcgh-card-tool i,
.pcgh-card-tool svg {
	width: 16px;
	height: 16px;
}

.pcgh-card-tool:hover {
	border-color: var(--pcgh-primary);
	color: var(--pcgh-primary);
	transform: translateY(-1px);
}

.pcgh-card-tool--download {
	border-color: transparent;
	background: var(--pcgh-primary);
	color: #fff;
}

.pcgh-card-tool--download:hover {
	border-color: transparent;
	background: var(--pcgh-primary);
	color: #fff;
	opacity: .92;
}

/* 横向滚动的圆角标签条：分类多时也不撑破布局。 */
.pcgh-card-cats {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	margin-bottom: 14px;
	padding-bottom: 4px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.pcgh-card-cats::-webkit-scrollbar {
	display: none;
}

.pcgh-card-cat {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 14px;
	border-radius: 999px;
	border: 1px solid var(--pcgh-border);
	background: var(--pcgh-surface-2, var(--pcgh-surface));
	color: var(--pcgh-text);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.pcgh-card-cat.is-active {
	border-color: var(--pcgh-primary);
	background: color-mix(in srgb, var(--pcgh-primary) 14%, transparent);
	color: var(--pcgh-primary);
}

.pcgh-card-cat__count {
	font-size: 11px;
	font-weight: 700;
	opacity: .6;
}

.pcgh-card-cat-empty {
	margin: 0;
	padding: 34px 16px;
	text-align: center;
	font-size: 13px;
	color: var(--pcgh-text-2, var(--pcgh-text));
	opacity: .75;
}

/* 卡片封面左上角的分类角标。 */
.pcgh-card-item__cat {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1;
	padding: 1px 8px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .35);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
}

/* 分类筛选后隐藏的卡片 / 空态：卡片是 display:flex，会盖掉 [hidden]，需显式兜底。 */
.pcgh-card-item[hidden],
.pcgh-card-cat-empty[hidden] {
	display: none !important;
}

/* ---------------- 卡片上的会员价徽标 ---------------- */
/* 明细列表已移入购买弹窗，卡片只保留「最低会员价」徽标，以控制卡片高度。 */
.pcgh-card-item__vip-from {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 1px 8px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, #d97706 35%, transparent);
	font-size: 12px;
	font-weight: 700;
	color: #d97706;
	white-space: nowrap;
}

/* 已享优惠徽标（本人等级已生效）：改用主题主色区分于「起价」提示。 */
.pcgh-card-item__vip-from--own {
	border-color: color-mix(in srgb, var(--pcgh-primary) 40%, transparent);
	color: var(--pcgh-primary);
}

/* 无现金价时，用积分价充当主价格。 */
.pcgh-card-item__price--points {
	font-size: 16px;
}

/* 现金价与积分价都没有：灰字占位，避免价格区空白像是坏了。 */
.pcgh-card-item__price-none {
	font-size: 13px;
	font-weight: 600;
	color: var(--pcgh-text-2, var(--pcgh-text));
	opacity: .6;
}

/* ---------------- 响应式 ---------------- */
@media (max-width: 640px) {
	.pcgh-card-store {
		width: calc(100% - 16px);
		border-radius: 16px;
		margin: 16px auto;
	}

	.pcgh-card-hero {
		padding: 22px 18px 20px;
	}

	.pcgh-card-hero__title {
		font-size: 20px;
	}

	.pcgh-card-body {
		padding: 16px 14px 20px;
	}

	.pcgh-card-grid {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	.pcgh-card-item__cover {
		height: 96px;
	}

	.pcgh-card-order {
		flex-wrap: wrap;
		gap: 8px;
	}

	.pcgh-card-order__info {
		flex: 1 1 100%;
	}

	.pcgh-card-order__code {
		flex: 1 1 70%;
	}

	.pcgh-card-order__amount {
		margin-left: auto;
	}
}

/* ---------------- 手机端：保持双列（H5 紧凑版） ----------------
   双列卡片可用宽度很窄，所有元素都要收一档：字号降 1~2px、间距收紧、
   圆角/内边距同步缩小，避免价格与徽标换行错位、按钮被挤出卡片。 */
@media (max-width: 640px) {
	.pcgh-card-cats {
		gap: 6px;
		margin-bottom: 12px;
	}

	.pcgh-card-cat {
		padding: 5px 11px;
		font-size: 12px;
	}

	.pcgh-card-cat__count {
		font-size: 10px;
	}

	.pcgh-card-item__cat {
		top: 6px;
		left: 6px;
		padding: 0 6px;
		font-size: 10px;
	}

	.pcgh-card-item__main {
		padding: 10px 10px 8px;
	}

	.pcgh-card-item__name {
		font-size: 14px;
	}

	.pcgh-card-item__desc {
		margin-top: 4px;
		font-size: 11.5px;
		line-height: 1.5;
		-webkit-line-clamp: 1;
	}

	.pcgh-card-item__meta {
		gap: 5px;
		margin-top: 9px;
	}

	.pcgh-card-item__meta-line {
		gap: 3px 6px;
	}

	.pcgh-card-item__price {
		font-size: 17px;
	}

	.pcgh-card-item__price em {
		font-size: 11.5px;
	}

	.pcgh-card-item__price-old {
		font-size: 11px;
	}

	.pcgh-card-item__points,
	.pcgh-card-item__level {
		font-size: 10.5px;
		padding: 1px 6px;
	}

	.pcgh-card-item__level-icon svg {
		width: 11px;
		height: 11px;
	}

	.pcgh-card-item__vip-from {
		font-size: 10.5px;
		padding: 1px 6px;
	}

	.pcgh-card-item__price--points {
		font-size: 14px;
	}

	.pcgh-card-item__price-none {
		font-size: 11.5px;
	}

	.pcgh-card-item__foot {
		padding: 0 10px 10px;
	}

	.pcgh-card-item__foot .pcgh-btn {
		flex: 1 1 100%;
		min-height: 36px;
		padding: 0 10px;
		font-size: 12.5px;
	}

	/* 弹窗：贴边留白更小、内部可滚动，避免小屏溢出被裁切。 */
	.pcgh-card-modal__panel {
		width: calc(100% - 24px);
		max-height: 86vh;
		overflow-y: auto;
		padding: 20px 16px 16px;
		border-radius: 16px;
	}

	.pcgh-card-modal__title {
		font-size: 16px;
		margin-bottom: 12px;
	}

	.pcgh-card-modal__price {
		font-size: 18px;
	}

	.pcgh-card-modal__product {
		padding: 10px 12px;
		margin-bottom: 12px;
	}

	.pcgh-card-mode,
	.pcgh-card-method {
		padding: 9px 4px;
		font-size: 13px;
	}

	.pcgh-card-modal__submit {
		padding: 12px 0;
		font-size: 14.5px;
	}
}

/* 超窄屏（≤360px）：双列再收一档，优先保证价格与按钮不被挤压。 */
@media (max-width: 360px) {
	.pcgh-card-grid {
		gap: 8px;
	}

	.pcgh-card-item__cover {
		height: 84px;
	}

	.pcgh-card-item__main {
		padding: 8px 8px 6px;
	}

	.pcgh-card-item__name {
		font-size: 13px;
	}

	.pcgh-card-item__price {
		font-size: 16px;
	}

	.pcgh-card-item__desc {
		display: none;
	}

	/* 超窄屏优先保证价格行不换行：划线原价与会员价徽标让位。 */
	.pcgh-card-item__price-old,
	.pcgh-card-item__vip-from {
		display: none;
	}

	.pcgh-card-item__foot {
		padding: 0 8px 8px;
	}
}