/* =========================================================
 * 纯七商城 · 店面样式 v2.2（企业商城版）
 *
 * 设计契约（与 ZAXU 父主题严格共存）：
 *   1rem = 10px（父主题 html{font-size:62.5%}）
 *   颜色一律取父主题变量：--accent-color / --txt-color-* /
 *   --background-color-* / --content-background-color，深色模式自动跟随
 *   圆角只用父主题同一套 .4 / .6 / 1rem
 *   扁平语言：1px 发丝线分隔，不用渐变堆叠、不用玻璃拟态、不用大阴影
 *   企业感来自「结构」而非「装饰」：公告条 → 双栏 Hero → 信任条 →
 *   分类筛选 → 分区陈列 → 信息密度更高的卡片 → 明确 CTA 层级
 * ========================================================= */

:root {
	--cq-accent: var(--accent-color, #0088ff);

	/* accent 透明变体：先给降级色，再用 color-mix 跟随用户强调色 */
	--cq-accent-06: rgba(0, 136, 255, .06);
	--cq-accent-06: color-mix(in srgb, var(--cq-accent) 6%, transparent);
	--cq-accent-10: rgba(0, 136, 255, .1);
	--cq-accent-10: color-mix(in srgb, var(--cq-accent) 10%, transparent);
	--cq-accent-16: rgba(0, 136, 255, .16);
	--cq-accent-16: color-mix(in srgb, var(--cq-accent) 16%, transparent);
	--cq-accent-30: rgba(0, 136, 255, .3);
	--cq-accent-30: color-mix(in srgb, var(--cq-accent) 30%, transparent);

	--cq-text: var(--txt-color-100, #333333);
	--cq-muted: var(--txt-color-55, rgba(51, 51, 51, .58));
	--cq-faint: var(--txt-color-35, rgba(51, 51, 51, .38));
	--cq-line: var(--txt-color-15, rgba(51, 51, 51, .1));
	--cq-line-2: var(--txt-color-25, rgba(51, 51, 51, .2));

	/* 容器外框比内部发丝线更深一档，形成层次 */
	--cq-border: var(--txt-color-20, rgba(51, 51, 51, .14));
	--cq-border-strong: var(--txt-color-35, rgba(51, 51, 51, .3));

	--cq-surface: var(--content-background-color, #ffffff);
	--cq-bg: var(--background-color-100, #f4f4f4);
	--cq-panel: var(--background-color-05, rgba(51, 51, 51, .03));
	--cq-panel-2: var(--background-color-10, rgba(51, 51, 51, .06));

	--cq-mono: 'Chivo Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--cq-r: .6rem;
	--cq-r-sm: .4rem;
	--cq-r-lg: 1rem;

	--cq-ease: cubic-bezier(.22, .61, .24, 1);
	--cq-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* =========================================================
 * 0. 通用底座
 * ========================================================= */
.cq-shop,
.cq-page,
.cq-product,
.cq-cart-page,
.cq-checkout,
.cq-account,
.cq-result-page {
	color: var(--cq-text);
	font-size: 1.5rem;
	line-height: 1.6;
	box-sizing: border-box;
}

.cq-shop *,
.cq-page *,
.cq-product *,
.cq-cart-page *,
.cq-checkout *,
.cq-account *,
.cq-result-page * {
	box-sizing: border-box;
}

/* 只清列表符，不碰 margin/padding —— 否则会被 .cq-shop ul 的高特异性
 * 反向覆盖掉各组件自己设的间距（父主题未重置 ul 的默认外边距） */
.cq-shop ul,
.cq-page ul,
.cq-product ul,
.cq-cart-page ul,
.cq-checkout ul,
.cq-account ul,
.cq-result-page ul {
	list-style: none;
}

/* ---------- 按钮体系 ---------- */
.cq-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	height: 4.4rem;
	padding: 0 2rem;
	border: 1px solid transparent;
	border-radius: var(--cq-r-sm);
	background: transparent;
	color: var(--cq-text);
	font-family: inherit;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .01em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition:
		background-color .24s var(--cq-ease),
		border-color .24s var(--cq-ease),
		color .24s var(--cq-ease),
		transform .24s var(--cq-ease);
}

.cq-btn:active {
	transform: translateY(.1rem);
}

.cq-btn-lg {
	height: 5.2rem;
	padding: 0 2.8rem;
	font-size: 1.5rem;
}

.cq-btn-block {
	width: 100%;
}

.cq-btn-primary {
	background: var(--cq-accent);
	border-color: var(--cq-accent);
	color: #fff;
}

.cq-btn-primary:hover {
	background: var(--cq-accent);
	border-color: var(--cq-accent);
	color: #fff;
	filter: brightness(.93);
}

.cq-btn-outline {
	border-color: var(--cq-line-2);
	color: var(--cq-text);
}

.cq-btn-outline:hover {
	border-color: var(--cq-text);
	background: var(--cq-panel);
	color: var(--cq-text);
}

.cq-btn-ghost {
	border-color: transparent;
	color: var(--cq-text);
}

.cq-btn-ghost:hover {
	background: var(--cq-panel);
	color: var(--cq-text);
}

/* 父主题有 button,button[type='button']{border:none;background:transparent;
 * color:currentColor}（特异性 0,1,1），会压掉纯类选择器的变体样式。
 * 这里用 button.cq-btn-*（0,1,1 + 后加载）把外观夺回来。 */
button.cq-btn {
	border-width: 1px;
	border-style: solid;
}

button.cq-btn-primary {
	background-color: var(--cq-accent);
	border-color: var(--cq-accent);
	color: #fff;
}

button.cq-btn-primary:hover {
	background-color: var(--cq-accent);
	border-color: var(--cq-accent);
	color: #fff;
	filter: brightness(.93);
}

button.cq-btn-outline {
	background-color: transparent;
	border-color: var(--cq-border-strong);
	color: var(--cq-text);
}

button.cq-btn-outline:hover {
	background-color: var(--cq-panel);
	border-color: var(--cq-text);
	color: var(--cq-text);
}

button.cq-btn-ghost {
	background-color: transparent;
	border-color: transparent;
	color: var(--cq-muted);
}

button.cq-btn-ghost:hover {
	background-color: var(--cq-panel);
	color: var(--cq-text);
}

.cq-btn:disabled,
.cq-btn[disabled] {
	opacity: .38;
	cursor: not-allowed;
	transform: none;
	filter: none;
}

.cq-link {
	color: var(--cq-accent);
	text-decoration: none;
	font-weight: 600;
}

.cq-link:hover {
	opacity: .75;
}

/* =========================================================
 * 1. 公告条
 * ========================================================= */
.cq-announce {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	padding: 1.3rem 0;
	border-bottom: 1px solid var(--cq-line);
	font-size: 1.2rem;
	color: var(--cq-muted);
	letter-spacing: .01em;
}

.cq-announce-dot {
	flex: 0 0 auto;
	width: .6rem;
	height: .6rem;
	border-radius: 50%;
	background: var(--cq-accent);
	box-shadow: 0 0 0 .4rem var(--cq-accent-16);
	animation: cq-pulse 2.6s ease-in-out infinite;
}

@keyframes cq-pulse {
	0%, 100% { box-shadow: 0 0 0 .3rem var(--cq-accent-16); }
	50%      { box-shadow: 0 0 0 .6rem var(--cq-accent-06); }
}

.cq-announce-text {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cq-announce-link {
	flex: 0 0 auto;
	color: var(--cq-text);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.cq-announce-link span {
	display: inline-block;
	transition: transform .3s var(--cq-ease-out);
}

.cq-announce-link:hover {
	color: var(--cq-accent);
}

.cq-announce-link:hover span {
	transform: translateX(.4rem);
}

/* =========================================================
 * 2. Hero
 * ========================================================= */
.cq-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
	align-items: center;
	gap: clamp(2.4rem, 4vw, 5.6rem);
	padding: clamp(3.2rem, 4.4vw, 6.4rem) 0;
	border-bottom: 1px solid var(--cq-line);
}

.cq-hero-main {
	min-width: 0;
}

.cq-hero-eyebrow {
	margin: 0 0 1.8rem;
	font-family: var(--cq-mono);
	font-size: 1.1rem;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cq-faint);
}

.cq-hero-title {
	margin: 0 0 1.6rem;
	font-size: clamp(3.2rem, 4.4vw, 5.8rem);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -.03em;
	color: var(--cq-text);
}

.cq-hero-sub {
	margin: 0 0 3rem;
	max-width: 46rem;
	font-size: 1.6rem;
	line-height: 1.7;
	color: var(--cq-muted);
}

.cq-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.cq-hero-stats {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(2.4rem, 4vw, 4.8rem);
	margin: 3.6rem 0 0;
	padding: 2.4rem 0 0;
	border-top: 1px solid var(--cq-line);
}

.cq-hero-stats li {
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

.cq-hero-stats strong {
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	color: var(--cq-text);
}

.cq-hero-stats span {
	font-size: 1.2rem;
	letter-spacing: .06em;
	color: var(--cq-faint);
}

/* ---------- Hero 视觉 ---------- */
.cq-hero-visual {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: 1.2rem;
	min-width: 0;
}

.cq-hero-visual.is-single {
	grid-template-columns: 1fr;
}

.cq-hero-shot {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	border: 1px solid var(--cq-border);
	border-radius: var(--cq-r);
	background: var(--cq-panel);
}

.cq-hero-shot:nth-child(2) {
	margin-top: 4rem;
}

.cq-hero-visual.is-single .cq-hero-shot {
	aspect-ratio: 16 / 11;
	margin-top: 0;
}

.cq-hero-shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cq-hero-chip {
	position: absolute;
	left: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: .2rem;
	padding: 1.2rem 1.6rem;
	border-top: 1px solid var(--cq-line);
	border-right: 1px solid var(--cq-line);
	border-top-right-radius: var(--cq-r);
	background: var(--cq-surface);
	z-index: 2;
}

.cq-hero-chip-label {
	font-family: var(--cq-mono);
	font-size: 1rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cq-faint);
}

.cq-hero-chip strong {
	font-size: 1.6rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--cq-text);
}

/* 无图时的品牌占位面板 */
.cq-hero-panel {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 1.4rem;
	min-height: 34rem;
	padding: clamp(2.4rem, 3vw, 3.6rem);
	border: 1px solid var(--cq-border);
	border-radius: var(--cq-r);
	background: var(--cq-panel);
}

.cq-hero-panel-mark {
	font-family: var(--cq-mono);
	font-size: clamp(6rem, 9vw, 9.6rem);
	font-weight: 700;
	line-height: .8;
	letter-spacing: -.06em;
	color: var(--cq-accent);
	opacity: .18;
}

.cq-hero-panel-title {
	margin: 0;
	font-size: clamp(2rem, 2.4vw, 2.6rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.02em;
	color: var(--cq-text);
}

.cq-hero-panel-desc {
	margin: 0;
	font-size: 1.3rem;
	color: var(--cq-faint);
}

/* =========================================================
 * 3. 信任保障条
 * ========================================================= */
.cq-trust {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 2.6rem 0;
	border-bottom: 1px solid var(--cq-line);
}

.cq-trust li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 1.2rem;
	row-gap: .2rem;
	align-items: center;
	padding: 0 2.4rem;
	border-left: 1px solid var(--cq-line);
}

.cq-trust li:first-child {
	padding-left: 0;
	border-left: 0;
}

.cq-trust-ico {
	grid-row: 1 / 3;
	display: grid;
	place-items: center;
	width: 3.6rem;
	height: 3.6rem;
	border-radius: 50%;
	background: var(--cq-accent-10);
	color: var(--cq-accent);
}

.cq-trust-ico svg {
	width: 1.8rem;
	height: 1.8rem;
}

.cq-trust strong {
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--cq-text);
}

.cq-trust li > span:last-child {
	align-self: start;
	font-size: 1.2rem;
	color: var(--cq-faint);
}

/* =========================================================
 * 4. 分类筛选
 * ========================================================= */
.cq-cats {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	padding: 2.8rem 0 0;
}

.cq-cat {
	display: inline-flex;
	align-items: center;
	height: 3.4rem;
	padding: 0 1.6rem;
	border: 1px solid var(--cq-line);
	border-radius: 99rem;
	font-size: 1.3rem;
	font-weight: 500;
	color: var(--cq-muted);
	text-decoration: none;
	transition: all .24s var(--cq-ease);
}

.cq-cat:hover {
	border-color: var(--cq-line-2);
	color: var(--cq-text);
}

.cq-cat.is-active {
	background: var(--cq-text);
	border-color: var(--cq-text);
	color: var(--cq-bg);
	font-weight: 600;
}

/* =========================================================
 * 5. 分区标题
 * ========================================================= */
.cq-section {
	padding-top: clamp(3.6rem, 4vw, 5.6rem);
}

.cq-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2.4rem;
	margin-bottom: 2.4rem;
	padding-bottom: 1.6rem;
	border-bottom: 1px solid var(--cq-line);
}

.cq-section-eyebrow {
	margin: 0 0 .8rem;
	font-family: var(--cq-mono);
	font-size: 1rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cq-faint);
}

.cq-section-title {
	margin: 0;
	font-size: clamp(2.2rem, 2.4vw, 3rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--cq-text);
}

.cq-section-desc {
	margin: 0 0 .4rem;
	font-size: 1.3rem;
	color: var(--cq-faint);
	white-space: nowrap;
}

/* =========================================================
 * 6. 商品网格与卡片
 * ========================================================= */
.cq-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
	gap: clamp(1.2rem, 1.6vw, 2rem);
}

/* 热销区沿用同一卡片语言，靠标签区分，不额外加装饰 */

.cq-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--cq-border);
	border-radius: var(--cq-r);
	background: var(--cq-surface);
	transition: border-color .3s var(--cq-ease), transform .4s var(--cq-ease-out);
}

.cq-card:hover {
	border-color: var(--cq-border-strong);
	transform: translateY(-.3rem);
}

.cq-card.is-sold-out {
	opacity: .72;
}

.cq-card-media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--cq-panel);
}

.cq-card-media::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--cq-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .5s var(--cq-ease-out);
}

.cq-card:hover .cq-card-media::after {
	transform: scaleX(1);
}

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

.cq-card-ph {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	font-size: 3.2rem;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--cq-faint);
}

.cq-card-tags {
	position: absolute;
	top: 1rem;
	left: 1rem;
	right: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	z-index: 2;
	pointer-events: none;
}

.cq-tag {
	display: inline-flex;
	align-items: center;
	height: 2.2rem;
	padding: 0 .8rem;
	border-radius: .2rem;
	background: rgba(255, 255, 255, .94);
	color: #2b2b2b;
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .02em;
	white-space: nowrap;
}

.cq-tag-dark {
	background: rgba(24, 24, 24, .88);
	color: #fff;
}

.cq-tag-accent {
	background: var(--cq-accent);
	color: #fff;
}

.cq-card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: .8rem;
	padding: 1.6rem 1.6rem 1.6rem;
}

.cq-card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-family: var(--cq-mono);
	font-size: 1rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cq-faint);
}

.cq-card-title {
	margin: 0;
	font-size: 1.7rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -.01em;
	color: var(--cq-text);
}

.cq-card-title a {
	color: inherit;
	text-decoration: none;
}

.cq-card-title a:hover {
	color: var(--cq-accent);
}

.cq-card-excerpt {
	margin: 0;
	font-size: 1.3rem;
	line-height: 1.65;
	color: var(--cq-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cq-card-price-row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .8rem;
	margin-top: auto;
	padding-top: 1.4rem;
	border-top: 1px solid var(--cq-line);
}

.cq-price {
	display: inline-flex;
	align-items: baseline;
	color: var(--cq-text);
	font-variant-numeric: tabular-nums;
}

.cq-price-cur {
	margin-right: .2rem;
	font-size: 1.3rem;
	font-weight: 600;
}

.cq-price-num {
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.02em;
}

.cq-price-orig {
	font-size: 1.2rem;
	color: var(--cq-faint);
	text-decoration: line-through;
}

.cq-stock-warn {
	margin-left: auto;
	font-size: 1.1rem;
	font-weight: 600;
	color: #e8590c;
}

.cq-card-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .8rem;
	padding: 0 1.6rem 1.6rem;
}

.cq-card-actions .cq-btn {
	width: 100%;
	height: 4rem;
	padding: 0 .8rem;
	font-size: 1.3rem;
}

/* =========================================================
 * 7. 空状态
 * ========================================================= */
.cq-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding: clamp(4rem, 6vw, 8rem) 2rem;
	border: 1px dashed var(--cq-line-2);
	border-radius: var(--cq-r);
	text-align: center;
	background: var(--cq-panel);
}

.cq-empty-title {
	margin: 0;
	font-size: 1.8rem;
	font-weight: 600;
	color: var(--cq-text);
}

.cq-empty-desc {
	margin: 0 0 .8rem;
	font-size: 1.4rem;
	color: var(--cq-muted);
}

/* =========================================================
 * 8. 商品详情购买面板
 * ========================================================= */
.cq-product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 40rem);
	align-items: start;
	gap: clamp(2.4rem, 3vw, 4.8rem);
	margin-top: clamp(3.2rem, 4vw, 5.6rem);
	padding-top: clamp(3.2rem, 4vw, 5.6rem);
	border-top: 1px solid var(--cq-line);
}

.cq-product-media {
	min-width: 0;
}

.cq-product-thumb {
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--cq-border);
	border-radius: var(--cq-r);
	background: var(--cq-panel);
}

.cq-product-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cq-product-thumb-ph {
	display: grid;
	place-items: center;
}

.cq-product-thumb-ph span {
	font-size: 4.8rem;
	font-weight: 700;
	color: var(--cq-faint);
}

/* 右侧购买卡 */
.cq-buy {
	position: sticky;
	top: calc(var(--site-header-height, 9rem) + 2rem);
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 2.4rem;
	border: 1px solid var(--cq-border);
	border-radius: var(--cq-r);
	background: var(--cq-surface);
}

.cq-buy-eyebrow {
	margin: 0 0 1.6rem;
	font-family: var(--cq-mono);
	font-size: 1rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cq-faint);
}

.cq-buy-price-box {
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--cq-line);
}

.cq-buy-label {
	display: block;
	margin-bottom: .8rem;
	font-size: 1.2rem;
	color: var(--cq-faint);
	letter-spacing: .04em;
}

.cq-buy-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 1rem;
}

.cq-buy-price .cq-price-num {
	font-size: 3.6rem;
}

.cq-buy-price .cq-price-cur {
	font-size: 1.8rem;
}

.cq-buy-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
	padding: 2rem 0;
	border-bottom: 1px solid var(--cq-line);
}

.cq-buy-facts > div {
	padding: 0 1.4rem;
	border-left: 1px solid var(--cq-line);
}

.cq-buy-facts > div:first-child {
	padding-left: 0;
	border-left: 0;
}

.cq-buy-facts dt {
	margin-bottom: .4rem;
	font-family: var(--cq-mono);
	font-size: 1rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cq-faint);
}

.cq-buy-facts dd {
	margin: 0;
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--cq-text);
}

.cq-buy-facts dd .is-out {
	color: #e03131;
}

.cq-qty-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.2rem;
	padding: 2rem 0;
}

.cq-qty-label {
	font-size: 1.3rem;
	color: var(--cq-muted);
}

.cq-stepper {
	display: inline-flex;
	align-items: center;
	height: 4.2rem;
	overflow: hidden;
	border: 1px solid var(--cq-line-2);
	border-radius: var(--cq-r-sm);
}

.cq-step {
	width: 4.2rem;
	height: 100%;
	border: 0;
	background: transparent;
	color: var(--cq-text);
	font-family: inherit;
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s var(--cq-ease);
}

.cq-step:hover {
	background: var(--cq-panel);
}

.cq-qty {
	width: 5.6rem;
	height: 100%;
	border: 0;
	border-left: 1px solid var(--cq-line);
	border-right: 1px solid var(--cq-line);
	background: transparent;
	color: var(--cq-text);
	font-family: inherit;
	font-size: 1.5rem;
	font-weight: 600;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.cq-qty::-webkit-outer-spin-button,
.cq-qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.cq-qty-max {
	font-size: 1.2rem;
	color: var(--cq-faint);
}

.cq-buy-note {
	margin: 0 0 1.6rem;
	padding: 1.2rem 1.4rem;
	border-left: 2px solid var(--cq-accent);
	background: var(--cq-accent-06);
	font-size: 1.3rem;
	line-height: 1.6;
	color: var(--cq-muted);
}

.cq-buy-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.cq-buy-msg {
	margin: 1.2rem 0 0;
	min-height: 1.8rem;
	font-size: 1.3rem;
	color: var(--cq-accent);
}

.cq-buy-guarantee {
	margin: 2rem 0 0;
	padding: 2rem 0 0;
	border-top: 1px solid var(--cq-line);
	display: flex;
	flex-direction: column;
	gap: .8rem;
}

.cq-buy-guarantee li {
	position: relative;
	padding-left: 1.8rem;
	font-size: 1.25rem;
	line-height: 1.5;
	color: var(--cq-muted);
}

.cq-buy-guarantee li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--cq-accent);
	font-size: 1.2rem;
	font-weight: 700;
}

/* =========================================================
 * 9. 页面壳（购物车 / 结算 / 会员中心 / 结果页）
 * ========================================================= */
.cq-page {
	padding-bottom: 4rem;
}

.cq-page-head {
	margin-bottom: clamp(2.4rem, 3vw, 3.6rem);
	padding-bottom: 2.4rem;
	border-bottom: 1px solid var(--cq-line);
}

.cq-page-eyebrow {
	margin: 0 0 1rem;
	font-family: var(--cq-mono);
	font-size: 1rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cq-faint);
}

.cq-page-title {
	margin: 0;
	font-size: clamp(2.6rem, 3vw, 4rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.025em;
	color: var(--cq-text);
}

.cq-page-desc {
	margin: 1.2rem 0 0;
	max-width: 62rem;
	font-size: 1.4rem;
	line-height: 1.7;
	color: var(--cq-muted);
}

.cq-block-title {
	margin: 3.2rem 0 1.4rem;
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--cq-text);
}

.cq-backline {
	margin: 0 0 1.6rem;
}

.cq-back {
	font-size: 1.3rem;
	color: var(--cq-muted);
	text-decoration: none;
}

.cq-back:hover {
	color: var(--cq-accent);
}

/* =========================================================
 * 10. 表格（购物车 / 清单 / 订单）
 * ========================================================= */
.cq-items-table {
	width: 100%;
	margin: 0;
	/* 父主题给 table 加了外框，商城表格只用横线 */
	border: 0;
	border-collapse: collapse;
	font-size: 1.4rem;
	color: var(--cq-text);
}

.cq-items-table th {
	padding: 0 0 1.2rem;
	/* 父主题有 th,td{border:.1rem solid}，必须整体清掉再只留底边 */
	border: 0;
	border-bottom: 1px solid var(--cq-line);
	font-family: var(--cq-mono);
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: left;
	color: var(--cq-muted);
	white-space: nowrap;
}

.cq-items-table td {
	padding: 1.6rem 0;
	border: 0;
	border-bottom: 1px solid var(--cq-line);
	vertical-align: middle;
	word-break: normal;
}

.cq-items-table tbody tr:last-child td {
	border-bottom: 0;
}

.cq-items-table a {
	color: var(--cq-text);
	text-decoration: none;
	font-weight: 500;
}

.cq-items-table a:hover {
	color: var(--cq-accent);
}

.cq-cart-thumb {
	display: inline-block;
	width: 6rem;
	height: 6rem;
	margin-right: 1.2rem;
	object-fit: cover;
	border: 1px solid var(--cq-line);
	border-radius: var(--cq-r-sm);
	vertical-align: middle;
}

input.cq-cart-qty {
	width: 7rem;
	height: 3.6rem;
	padding: 0 .8rem;
	border: 1px solid var(--cq-line-2);
	border-radius: var(--cq-r-sm);
	background: transparent;
	color: var(--cq-text);
	font-family: inherit;
	font-size: 1.4rem;
	text-align: center;
}

.cq-cell-summary {
	max-width: 32rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 表格内的删除按钮不等同抽屉里的 × */
.cq-items-table .cq-drawer-del {
	height: 3.2rem;
	padding: 0 1rem;
	border: 1px solid var(--cq-line);
	border-radius: var(--cq-r-sm);
	color: var(--cq-muted);
	font-size: 1.2rem;
	white-space: nowrap;
	transition: all .2s var(--cq-ease);
}

.cq-items-table .cq-drawer-del:hover {
	border-color: rgba(224, 49, 49, .4);
	background: rgba(224, 49, 49, .06);
	color: #e03131;
}

.cq-codes-row td {
	padding-top: 0;
	border-bottom: 0;
}

/* ---------- 购物车页 ---------- */
.cq-cart-main {
	display: block;
}

.cq-cart-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 2rem;
	margin-top: 2.4rem;
	padding-top: 2.4rem;
	border-top: 1px solid var(--cq-line-2);
}

.cq-cart-total {
	display: flex;
	align-items: baseline;
	gap: 1.2rem;
}

.cq-cart-total-label {
	font-size: 1.3rem;
	color: var(--cq-muted);
}

.cq-cart-total-num {
	font-size: 2.8rem;
	font-weight: 700;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	color: var(--cq-text);
}

.cq-cart-btns {
	display: flex;
	align-items: center;
	gap: 1rem;
}

/* =========================================================
 * 11. 结算页
 * ========================================================= */
.cq-checkout-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 38rem);
	align-items: start;
	gap: clamp(2rem, 2.6vw, 3.6rem);
}

.cq-form-block {
	margin-bottom: 1.6rem;
	padding: 2.4rem;
	border: 1px solid var(--cq-border);
	border-radius: var(--cq-r);
	background: var(--cq-surface);
}

.cq-form-block[hidden] {
	display: none;
}

.cq-form-title {
	margin: 0 0 1.8rem;
	padding-bottom: 1.2rem;
	border-bottom: 1px solid var(--cq-line);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--cq-text);
}

.cq-field {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	margin-bottom: 1.6rem;
}

.cq-field:last-child {
	margin-bottom: 0;
}

.cq-field label {
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--cq-muted);
}

.cq-field label em {
	font-style: normal;
	color: #e03131;
}

.cq-field input,
.cq-field textarea,
.cq-coupon-row input {
	width: 100%;
	padding: 1.2rem 1.4rem;
	border: 1px solid var(--cq-line-2);
	border-radius: var(--cq-r-sm);
	background: transparent;
	color: var(--cq-text);
	font-family: inherit;
	font-size: 1.4rem;
	line-height: 1.5;
	transition: border-color .22s var(--cq-ease), background-color .22s var(--cq-ease);
}

.cq-field input::placeholder,
.cq-field textarea::placeholder,
.cq-coupon-row input::placeholder {
	color: var(--cq-faint);
}

.cq-field input:focus,
.cq-field textarea:focus,
.cq-coupon-row input:focus {
	border-color: var(--cq-accent);
	background: var(--cq-accent-06);
	outline: none;
}

.cq-field textarea {
	resize: vertical;
	min-height: 8.4rem;
}

.cq-field-tip {
	margin: 0;
	font-size: 1.1rem;
	color: var(--cq-faint);
}

.cq-coupon-row {
	display: flex;
	gap: .8rem;
}

.cq-coupon-row input {
	flex: 1 1 auto;
	min-width: 0;
}

.cq-coupon-msg {
	margin: 1rem 0 0;
	min-height: 1.8rem;
	font-size: 1.3rem;
	color: var(--cq-muted);
}

.cq-order-items {
	margin-top: 1.6rem;
	padding: 2.4rem;
	border: 1px solid var(--cq-border);
	border-radius: var(--cq-r);
	background: var(--cq-surface);
}

/* ---------- 订单摘要卡 ---------- */
.cq-checkout-aside {
	position: sticky;
	top: calc(var(--site-header-height, 9rem) + 2rem);
	min-width: 0;
}

.cq-summary-card {
	padding: 2.4rem;
	border: 1px solid var(--cq-line-2);
	border-radius: var(--cq-r);
	background: var(--cq-surface);
}

.cq-summary-title {
	margin: 0 0 1.8rem;
	padding-bottom: 1.2rem;
	border-bottom: 1px solid var(--cq-line);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--cq-text);
}

.cq-sum-list {
	margin: 0 0 1.6rem;
	padding: 0;
}

.cq-sum-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.6rem;
	padding: .7rem 0;
	font-size: 1.4rem;
}

.cq-sum-row dt {
	margin: 0;
	color: var(--cq-muted);
}

.cq-sum-row dd {
	margin: 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--cq-text);
}

.cq-sum-row dd.is-discount {
	color: #e8590c;
}

.cq-sum-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.6rem;
	margin-bottom: 2rem;
	padding-top: 1.6rem;
	border-top: 1px solid var(--cq-line-2);
}

.cq-sum-total span {
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--cq-text);
}

.cq-sum-total strong {
	font-size: 3rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	color: var(--cq-text);
}

.cq-summary-tip {
	margin: 1.6rem 0 0;
	font-size: 1.2rem;
	line-height: 1.6;
	color: var(--cq-faint);
}

/* =========================================================
 * 12. 支付成功 / 结果页
 * ========================================================= */
.cq-result {
	margin-top: clamp(2.4rem, 3vw, 4rem);
	padding: clamp(2.4rem, 3vw, 3.6rem);
	border: 1px solid var(--cq-border);
	border-radius: var(--cq-r);
	background: var(--cq-surface);
}

.cq-result[hidden] {
	display: none;
}

.cq-result-eyebrow {
	margin: 0 0 1rem;
	font-family: var(--cq-mono);
	font-size: 1rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cq-accent);
}

.cq-result-title {
	margin: 0 0 2rem;
	font-size: clamp(2rem, 2.4vw, 2.8rem);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--cq-text);
}

.cq-result-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	gap: 1px;
	margin: 0 0 1.6rem;
	border: 1px solid var(--cq-line);
	border-radius: var(--cq-r);
	background: var(--cq-line);
	overflow: hidden;
}

.cq-result-facts > div {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 1.8rem 2rem;
	background: var(--cq-surface);
}

.cq-result-facts > div > span:first-child {
	font-family: var(--cq-mono);
	font-size: 1rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cq-faint);
}

.cq-result-facts code {
	padding: 0;
	background: none;
	font-family: var(--cq-mono);
	font-size: 1.3rem;
	color: var(--cq-text);
	word-break: break-all;
}

.cq-result-facts strong {
	font-size: 1.5rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--cq-text);
}

.cq-result-facts .cq-amount {
	font-size: 2rem;
}

.cq-discount {
	display: block;
	font-style: normal;
	font-size: 1.1rem;
	color: #e8590c;
}

.cq-result-tip {
	margin: 2rem 0 0;
	font-size: 1.3rem;
	line-height: 1.7;
	color: var(--cq-muted);
}

.cq-result-tip a {
	color: var(--cq-accent);
	font-weight: 600;
	text-decoration: none;
}

/* ---------- 卡密列表 ---------- */
.cq-code-list {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 0 0 1.6rem;
}

.cq-code-list code {
	display: inline-block;
	padding: .7rem 1.2rem;
	border: 1px solid var(--cq-line-2);
	border-radius: var(--cq-r-sm);
	background: var(--cq-panel);
	color: var(--cq-text);
	font-family: var(--cq-mono);
	font-size: 1.3rem;
	letter-spacing: .04em;
	word-break: break-all;
	user-select: all;
}

/* ---------- 状态徽标 ---------- */
.cq-status {
	display: inline-flex;
	align-items: center;
	height: 2.4rem;
	padding: 0 .9rem;
	border-radius: .2rem;
	background: var(--cq-panel-2);
	color: var(--cq-muted);
	font-size: 1.2rem;
	font-weight: 600;
	white-space: nowrap;
}

.cq-status.is-completed {
	background: rgba(47, 191, 113, .14);
	color: #237a4b;
}

.cq-status.is-processing,
.cq-status.is-shipped {
	background: var(--cq-accent-16);
	color: var(--cq-accent);
}

.cq-status.is-pending {
	background: rgba(250, 176, 5, .16);
	color: #96650a;
}

.cq-status.is-expired,
.cq-status.is-cancelled,
.cq-status.is-failed {
	background: rgba(224, 49, 49, .12);
	color: #c92a2a;
}

.cq-status.is-refund {
	background: rgba(232, 89, 12, .14);
	color: #c04a0c;
}

.cq-type-tag {
	display: inline-block;
	margin-left: .4rem;
	padding: .1rem .6rem;
	border: 1px solid var(--cq-line-2);
	border-radius: .2rem;
	font-size: 1rem;
	color: var(--cq-faint);
	vertical-align: middle;
}

/* =========================================================
 * 13. 会员中心 · 游客查单
 * ========================================================= */
.cq-guest-query {
	padding: clamp(2.4rem, 3vw, 3.6rem);
	border: 1px solid var(--cq-border);
	border-radius: var(--cq-r);
	background: var(--cq-surface);
}

.cq-guest-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
	align-items: end;
	gap: 1.2rem;
	margin-bottom: .8rem;
}

.cq-guest-form .cq-field {
	margin-bottom: 0;
}

.cq-gq-btn {
	height: 4.6rem;
	padding: 0 2.4rem;
}

.cq-gq-msg {
	margin: 1rem 0 0;
	min-height: 1.8rem;
	font-size: 1.3rem;
	color: var(--cq-muted);
}

.cq-gq-result {
	margin-top: 1.6rem;
	padding-top: 1.6rem;
	border-top: 1px solid var(--cq-line);
}

.cq-gq-result[hidden] {
	display: none;
}

.cq-gq-result h4 {
	margin: 2rem 0 1rem;
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--cq-text);
}

.cq-detail-grid {
	margin-bottom: 0;
}

.cq-acct-login {
	margin: 2.4rem 0 0;
	padding-top: 1.6rem;
	border-top: 1px solid var(--cq-line);
	font-size: 1.3rem;
	color: var(--cq-muted);
}

.cq-acct-login a {
	color: var(--cq-accent);
	font-weight: 600;
	text-decoration: none;
}

/* ---------- 分页 ---------- */
.cq-pager {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-top: 2.4rem;
}

.cq-pager a {
	display: inline-grid;
	place-items: center;
	min-width: 3.6rem;
	height: 3.6rem;
	padding: 0 .8rem;
	border: 1px solid var(--cq-line);
	border-radius: var(--cq-r-sm);
	font-size: 1.3rem;
	color: var(--cq-muted);
	text-decoration: none;
	transition: all .2s var(--cq-ease);
}

.cq-pager a:hover {
	border-color: var(--cq-line-2);
	color: var(--cq-text);
}

.cq-pager a.is-current {
	background: var(--cq-text);
	border-color: var(--cq-text);
	color: var(--cq-bg);
	font-weight: 600;
}

/* =========================================================
 * 14. 悬浮购物车 + 抽屉
 * ========================================================= */
#cq-cart-fab {
	position: fixed;
	right: 2rem;
	bottom: 2rem;
	display: grid;
	place-items: center;
	width: 5.2rem;
	height: 5.2rem;
	border: 1px solid var(--cq-line-2);
	border-radius: 50%;
	background: var(--cq-surface);
	color: var(--cq-text);
	box-shadow: 0 6px 24px rgba(0, 0, 0, .1);
	cursor: pointer;
	z-index: 9990;
	transition: transform .3s var(--cq-ease-out), box-shadow .3s var(--cq-ease);
}

#cq-cart-fab:hover {
	transform: translateY(-.2rem);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
}

.cq-fab-count {
	position: absolute;
	top: -0.2rem;
	right: -0.2rem;
	display: grid;
	place-items: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 .5rem;
	border-radius: 99rem;
	background: var(--cq-accent);
	color: #fff;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1;
}

.cq-fab-count[hidden] {
	display: none;
}

#cq-drawer {
	position: fixed;
	inset: 0;
	z-index: 9998;
	visibility: hidden;
	pointer-events: none;
}

#cq-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}

.cq-drawer-mask {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .38);
	opacity: 0;
	transition: opacity .32s var(--cq-ease);
}

#cq-drawer.is-open .cq-drawer-mask {
	opacity: 1;
}

.cq-drawer-panel {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	width: min(40rem, 92vw);
	height: 100%;
	background: var(--cq-surface);
	border-left: 1px solid var(--cq-line);
	transform: translateX(100%);
	transition: transform .38s var(--cq-ease-out);
}

#cq-drawer.is-open .cq-drawer-panel {
	transform: translateX(0);
}

.cq-drawer-panel header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 2rem 2.4rem;
	border-bottom: 1px solid var(--cq-line);
}

.cq-drawer-panel header strong {
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--cq-text);
}

button.cq-drawer-close {
	border: 0;
	background: transparent;
	color: var(--cq-muted);
	font-family: inherit;
	font-size: 1.3rem;
	cursor: pointer;
}

.cq-drawer-close:hover {
	color: var(--cq-text);
}

.cq-drawer-list {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 1.2rem 2.4rem;
}

.cq-drawer-item {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	padding: 1.2rem 0;
	border-bottom: 1px solid var(--cq-line);
}

.cq-drawer-item img,
.cq-drawer-ph {
	flex: 0 0 auto;
	width: 5.2rem;
	height: 5.2rem;
	object-fit: cover;
	border: 1px solid var(--cq-line);
	border-radius: var(--cq-r-sm);
	background: var(--cq-panel);
}

.cq-drawer-info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: .2rem;
}

.cq-drawer-info strong {
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--cq-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cq-drawer-info span {
	font-size: 1.2rem;
	color: var(--cq-muted);
	font-variant-numeric: tabular-nums;
}

.cq-drawer-del {
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	color: var(--cq-faint);
	font-family: inherit;
	font-size: 1.9rem;
	line-height: 1;
	cursor: pointer;
	transition: color .2s;
}

.cq-drawer-del:hover {
	color: #e03131;
}

.cq-drawer-empty {
	margin: 2rem 0;
	font-size: 1.4rem;
	color: var(--cq-muted);
}

.cq-drawer-empty a {
	color: var(--cq-accent);
	font-weight: 600;
}

.cq-drawer-panel footer {
	padding: 2rem 2.4rem;
	border-top: 1px solid var(--cq-line);
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

.cq-drawer-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	font-size: 1.4rem;
	color: var(--cq-muted);
}

.cq-drawer-total strong {
	font-size: 2.2rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--cq-text);
}

.cq-drawer-panel footer .cq-btn-primary {
	width: 100%;
}

/* =========================================================
 * 15. 二维码支付弹层
 * ========================================================= */
.cq-qr-mask {
	position: fixed;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 2rem;
	background: rgba(0, 0, 0, .5);
	opacity: 0;
	transition: opacity .3s var(--cq-ease);
	z-index: 9999;
}

.cq-qr-mask.is-open {
	opacity: 1;
}

.cq-qr-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.6rem;
	width: min(34rem, 100%);
	padding: 3.2rem 2.8rem;
	border-radius: var(--cq-r-lg);
	background: var(--cq-surface);
	text-align: center;
	transform: translateY(1.2rem) scale(.98);
	transition: transform .34s var(--cq-ease-out);
}

.cq-qr-mask.is-open .cq-qr-box {
	transform: translateY(0) scale(1);
}

.cq-qr-title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--cq-text);
}

.cq-qr-box img {
	width: 22rem;
	height: 22rem;
	object-fit: contain;
	border: 1px solid var(--cq-line);
	border-radius: var(--cq-r-sm);
	background: #fff;
}

.cq-qr-tip {
	margin: 0;
	font-size: 1.25rem;
	color: var(--cq-muted);
}

button.cq-qr-close {
	height: 4rem;
	padding: 0 2.4rem;
	border: 1px solid var(--cq-border-strong);
	border-radius: var(--cq-r-sm);
	background: transparent;
	color: var(--cq-text);
	font-family: inherit;
	font-size: 1.4rem;
	cursor: pointer;
}

.cq-qr-close:hover {
	background: var(--cq-panel);
}

/* =========================================================
 * 16. 响应式
 * ========================================================= */
@media (max-width: 1100px) {
	.cq-hero {
		grid-template-columns: 1fr;
		gap: 3.6rem;
	}

	.cq-hero-visual {
		max-width: 56rem;
	}

	.cq-hero-shot:nth-child(2) {
		margin-top: 3.2rem;
	}

	.cq-product {
		grid-template-columns: 1fr;
	}

	.cq-buy {
		position: static;
		top: auto;
	}

	.cq-checkout-grid {
		grid-template-columns: 1fr;
	}

	.cq-checkout-aside {
		position: static;
		top: auto;
	}
}

@media (max-width: 860px) {
	.cq-trust {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 2rem;
	}

	.cq-trust li:nth-child(3) {
		padding-left: 0;
		border-left: 0;
	}

	.cq-section-head {
		align-items: flex-start;
		flex-direction: column;
		gap: 1rem;
	}

	.cq-section-desc {
		white-space: normal;
	}

	.cq-guest-form {
		grid-template-columns: 1fr;
	}

	.cq-gq-btn {
		width: 100%;
	}

	.cq-cart-footer {
		flex-direction: column;
		align-items: stretch;
	}

	.cq-cart-btns {
		flex-direction: column;
		align-items: stretch;
	}

	.cq-cart-btns .cq-btn {
		width: 100%;
	}
}

@media (max-width: 640px) {
	.cq-announce-text {
		white-space: normal;
	}

	/* 移动端公告只留正文，避免和一个箭头抢一行 */
	.cq-announce-link {
		display: none;
	}

	.cq-trust {
		padding: 2rem 0;
	}

	.cq-trust li {
		padding: 0 1.2rem;
		row-gap: 0;
	}

	/* 两列太窄，副标题换行反而更乱，只留标题 */
	.cq-trust li > span:last-child {
		display: none;
	}

	.cq-trust-ico {
		width: 3.2rem;
		height: 3.2rem;
	}

	.cq-trust strong {
		font-size: 1.35rem;
	}

	/* 分类：横向滑动比换行更像商城 */
	.cq-cats {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: .4rem;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.cq-cats::-webkit-scrollbar {
		display: none;
	}

	.cq-cat {
		flex: 0 0 auto;
	}

	.cq-section-desc {
		display: none;
	}

	/* 卡片标签瘦身：只保留促销 / 售罄这类关键信息 */
	.cq-card-tags {
		top: .8rem;
		left: .8rem;
		right: .8rem;
	}

	.cq-tag {
		height: 2rem;
		padding: 0 .6rem;
		font-size: 1rem;
	}

	.cq-card-tags .cq-tag:not(.cq-tag-accent):not(.cq-tag-dark) {
		display: none;
	}

	.cq-hero {
		padding: 2.8rem 0;
	}

	.cq-hero-title {
		font-size: 3.4rem;
	}

	.cq-hero-sub {
		font-size: 1.45rem;
		margin-bottom: 2.4rem;
	}

	.cq-hero-actions .cq-btn-primary {
		flex: 1 1 auto;
	}

	.cq-hero-actions .cq-btn-outline,
	.cq-hero-actions .cq-btn-ghost {
		flex: 0 0 auto;
	}

	.cq-hero-stats {
		gap: 2.4rem;
		margin-top: 2.8rem;
	}

	.cq-hero-stats strong {
		font-size: 2.2rem;
	}

	.cq-hero-visual {
		grid-template-columns: 1fr;
	}

	.cq-hero-shot:nth-child(2) {
		display: none;
	}

	.cq-hero-visual.is-single .cq-hero-shot,
	.cq-hero-shot:first-child {
		aspect-ratio: 16 / 11;
	}

	.cq-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.2rem;
	}

	.cq-card-body {
		padding: 1.2rem 1.2rem 1rem;
		gap: .6rem;
	}

	.cq-card-title {
		font-size: 1.45rem;
	}

	.cq-card-excerpt {
		display: none;
	}

	.cq-price-num {
		font-size: 2rem;
	}

	.cq-card-actions {
		grid-template-columns: 1fr;
		padding: 0 1.2rem 1.2rem;
	}

	.cq-card-actions .cq-btn {
		height: 3.6rem;
		font-size: 1.25rem;
	}

	.cq-card-actions .cq-btn-outline {
		display: none;
	}

	/* 移动端表格 → 卡片式堆叠 */
	.cq-items-table thead {
		display: none;
	}

	.cq-items-table,
	.cq-items-table tbody,
	.cq-items-table tr,
	.cq-items-table td {
		display: block;
		width: 100%;
	}

	.cq-items-table tr {
		position: relative;
		padding: 1.4rem 0;
		border-bottom: 1px solid var(--cq-line);
	}

	.cq-items-table td {
		padding: .3rem 0;
		border-bottom: 0;
	}

	.cq-codes-row td {
		padding-top: .6rem;
	}

	.cq-form-block,
	.cq-order-items,
	.cq-summary-card,
	.cq-guest-query,
	.cq-result {
		padding: 1.8rem;
	}

	.cq-buy {
		padding: 1.8rem;
	}

	.cq-buy-facts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.cq-buy-price .cq-price-num {
		font-size: 3rem;
	}

	.cq-cart-total-num {
		font-size: 2.4rem;
	}

	.cq-sum-total strong {
		font-size: 2.6rem;
	}

	#cq-cart-fab {
		right: 1.4rem;
		bottom: 1.4rem;
		width: 4.6rem;
		height: 4.6rem;
	}
}

/* =========================================================
 * 17. 无障碍 / 减少动效
 * ========================================================= */
@media (prefers-reduced-motion: reduce) {
	.cq-shop *,
	.cq-page *,
	.cq-product *,
	#cq-cart-fab,
	#cq-drawer,
	.cq-qr-mask {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}

	.cq-card:hover {
		transform: none;
	}
}