/* ============================================================
   首页焦点货架 · 商品卡增强 · 迷你购物车 · 手机工具栏
   接在 main.css + woocommerce.css + night.css 之后加载；
   深色适配全部走 .qh-night，浅色站保持原样。
   ============================================================ */

/* ---------- 1. Hero 焦点货架 ---------- */

.qh-shelf {
	position: relative;
	padding: 30px 0 18px;
	overflow: clip;
	isolation: isolate;
}

.qh-shelf__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(90% 130% at 12% -6%, rgba(255, 255, 255, .94), rgba(255, 255, 255, .62) 48%, rgba(255, 255, 255, .16) 76%, transparent 92%);
}

.qh-night .qh-shelf__scrim {
	display: none;
}

.qh-shelf__aura {
	position: absolute;
	inset: -14% -18% auto;
	height: 720px;
	z-index: -1;
	pointer-events: none;
	opacity: .42;
	background:
		radial-gradient(58% 58% at 20% 26%, rgba(168, 85, 247, .30), transparent 72%),
		radial-gradient(52% 52% at 84% 14%, rgba(219, 39, 119, .24), transparent 70%),
		radial-gradient(44% 44% at 52% 88%, rgba(124, 58, 237, .22), transparent 72%);
	filter: blur(22px);
	transition: opacity .4s ease;
}

.qh-night .qh-shelf__aura {
	opacity: .95;
}

.qh-shelf__head {
	position: relative;
	max-width: 780px;
	transform: translate3d(calc(var(--qh-shelf-sy, 0) * -1.4px), calc(var(--qh-shelf-sy, 0) * -.5px), 0);
	will-change: transform;
}

.qh-shelf__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 10px;
	padding: 5px 13px;
	border: 1px solid rgba(168, 85, 247, .34);
	border-radius: 999px;
	background: rgba(168, 85, 247, .12);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--qh-primary, #7c3aed);
}

.qh-night .qh-shelf__eyebrow {
	border-color: rgba(192, 132, 252, .34);
	background: rgba(168, 85, 247, .16);
	color: #e9d5ff;
}

.qh-shelf__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--qh-primary, #a855f7);
	box-shadow: 0 0 0 4px rgba(168, 85, 247, .18);
	animation: qh-shelf-pulse 2.6s ease-in-out infinite;
}

.qh-shelf__title {
	margin: 0 0 10px;
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 1.03;
	letter-spacing: -.025em;
	font-weight: 800;
	color: var(--qh-ink, #0f2042);
	transform: translate3d(calc(var(--qh-shelf-sy, 0) * -2.6px), 0, 0);
	will-change: transform;
}

.qh-night .qh-shelf__title {
	background: linear-gradient(104deg, #ffffff 12%, #f3e8ff 42%, #c084fc 74%, #f9a8d4 96%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: 0 18px 60px rgba(168, 85, 247, .28);
}

.qh-shelf__sub {
	margin: 0;
	max-width: 560px;
	font-size: 14.5px;
	line-height: 1.68;
	color: var(--qh-muted, #5a6b86);
}

.qh-night .qh-shelf__sub {
	color: #b7abd6;
}

/* 舞台 */

.qh-shelf__stage {
	/* 卡片宽度按屏宽给，高度不再写死：让图片自己决定卡片多高，
	   这样宽图不会在上下留出大块空玻璃；--qh-shelf-h 只作为上限 */
	--qh-shelf-h: clamp(280px, calc(100vh - 340px), 680px);
	--qh-shelf-card: min(56vw, 980px);
	--qh-shelf-gap: 0px;
	--qh-shelf-peek: 132px;
	--qh-shelf-side: .88;

	position: relative;
	height: auto;
	min-height: 200px;
	margin-top: 18px;
	padding: 2px 0 12px;
	/* 横向手势留给 JS，纵向仍然滚动页面 */
	touch-action: pan-y;
	transition: height .3s ease;
}

.qh-shelf__track {
	position: relative;
	display: block;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.qh-shelf-slide {
	position: absolute;
	top: 0;
	left: 50%;
	width: var(--qh-shelf-card);
	height: auto;
	z-index: var(--qh-z, 1);
	transform: translate3d(calc(-50% + var(--qh-x, 0px)), calc(var(--qh-mag, 0) * -9px), 0) scale(var(--qh-s, .94));
	opacity: var(--qh-o, 1);
	pointer-events: none;
	transition: transform .66s cubic-bezier(.19, .86, .23, 1), opacity .45s ease;
}

.qh-shelf-slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.qh-shelf-slide.is-far {
	opacity: 0;
}

.qh-shelf-slide__card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: auto;
	max-height: var(--qh-shelf-h, 680px);
	border-radius: 22px;
	overflow: hidden;
	background: #fff;
	border: 1px solid #eef2f8;
	box-shadow: 0 16px 38px rgba(15, 32, 66, .10);
	transition: transform .6s cubic-bezier(.2, .8, .25, 1), box-shadow .5s ease, border-color .5s ease;
	transform: rotateY(0deg);
}

.qh-night .qh-shelf-slide__card {
	/* ???????????????????????"??" */
	background: #150a26;
	border-color: rgba(168, 85, 247, .22);
	box-shadow: 0 26px 64px rgba(0, 0, 0, .52), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.qh-night .qh-shelf-slide.is-active .qh-shelf-slide__card {
	border-color: rgba(192, 132, 252, .42);
	box-shadow: 0 40px 96px rgba(0, 0, 0, .6), 0 0 0 1px rgba(192, 132, 252, .28), inset 0 1px 0 rgba(255, 255, 255, .10);
}

.qh-shelf-slide__media {
	position: relative;
	text-decoration: none;
	display: block;
	flex: 0 0 auto;
	height: auto;
	margin: 0;
	border-radius: 0;
	overflow: hidden;
	background: #f7f9fc;
}

.qh-night .qh-shelf-slide__media {
	background: rgba(255, 255, 255, .05);
}

.qh-shelf-slide__media img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	max-height: calc(var(--qh-shelf-h, 680px) - 4px);
	object-fit: contain;
	padding: 0;
	transition: transform .9s cubic-bezier(.2, .8, .2, 1);
}

.qh-shelf-slide.is-active .qh-shelf-slide__media img {
	transform: none;
}

.qh-shelf-slide__media::after {
	content: "";
	position: absolute;
	inset: -20%;
	pointer-events: none;
	background: linear-gradient(112deg, transparent 36%, rgba(255, 255, 255, .46) 47%, rgba(255, 255, 255, .10) 54%, transparent 64%);
	transform: translateX(-140%);
	opacity: 0;
}

.qh-shelf-slide.is-active .qh-shelf-slide__media::after {
	animation: qh-shelf-sheen 1.1s .12s cubic-bezier(.3, .7, .3, 1) 1;
}

.qh-shelf-slide__chip {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .04em;
	color: #6d28d9;
	background: rgba(255, 255, 255, .82);
	border: 1px solid rgba(124, 58, 237, .18);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.qh-night .qh-shelf-slide__chip {
	color: #e9d5ff;
	background: rgba(30, 16, 52, .72);
	border-color: rgba(192, 132, 252, .32);
}

/* 箭头 / 进度 */

.qh-shelf__arrow {
	position: absolute;
	top: 42%;
	z-index: 4;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(148, 163, 184, .34);
	background: rgba(255, 255, 255, .86);
	color: #43536d;
	cursor: pointer;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 10px 26px rgba(15, 32, 66, .12);
	transition: transform .3s ease, background .3s ease, color .3s ease, border-color .3s ease;
}

.qh-shelf__arrow:hover {
	transform: scale(1.06);
	background: #fff;
	color: #7c3aed;
	border-color: rgba(124, 58, 237, .38);
}

.qh-shelf__arrow[data-qh-shelf-prev] {
	left: -8px;
}

.qh-shelf__arrow[data-qh-shelf-next] {
	right: -8px;
}

.qh-shelf__arrow[data-qh-shelf-prev] .qh-icon {
	transform: rotate(180deg);
}

.qh-night .qh-shelf__arrow {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(168, 85, 247, .34);
	color: #e9d5ff;
	box-shadow: 0 16px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.qh-night .qh-shelf__arrow:hover {
	background: rgba(168, 85, 247, .22);
	color: #fff;
	border-color: rgba(192, 132, 252, .6);
}

.qh-shelf__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 6px;
}

.qh-shelf__dots {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.qh-shelf__dots button {
	box-sizing: content-box;
	width: 26px;
	height: 4px;
	padding: 9px 0;
	border: 0;
	border-radius: 999px;
	background: rgba(148, 163, 184, .38);
	background-clip: content-box;
	cursor: pointer;
	touch-action: manipulation;
	transition: width .45s cubic-bezier(.2, .8, .25, 1), background .35s ease;
}

.qh-shelf__dots .is-active button {
	width: 46px;
	background: linear-gradient(90deg, #7c3aed, #db2777);
}

.qh-night .qh-shelf__dots button {
	background: rgba(255, 255, 255, .18);
}

.qh-night .qh-shelf__dots .is-active button {
	background: linear-gradient(90deg, #a855f7, #ec4899);
}

.qh-shelf__counter {
	white-space: nowrap;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .16em;
	font-variant-numeric: tabular-nums;
	color: #8b98ad;
}

.qh-shelf__hint {
	font-size: 11.5px;
	letter-spacing: .02em;
	color: #9aa7bb;
}

.qh-night .qh-shelf__counter,
.qh-night .qh-shelf__hint {
	color: #8d82ab;
}

@keyframes qh-shelf-sheen {
	0% {
		transform: translateX(-140%);
		opacity: 0;
	}

	18% {
		opacity: .9;
	}

	100% {
		transform: translateX(140%);
		opacity: 0;
	}
}

@keyframes qh-shelf-pulse {
	0%,
	100% {
		box-shadow: 0 0 0 3px rgba(168, 85, 247, .16);
	}

	50% {
		box-shadow: 0 0 0 7px rgba(168, 85, 247, .04);
	}
}

/* ---------- 2. 商品卡：换图 + 快速加购 + 轻微 3D ---------- */

.qh-card__media {
	position: relative;
	isolation: isolate;
}

.qh-card {
	transform: perspective(900px) rotateX(var(--qh-rx, 0deg)) rotateY(var(--qh-ry, 0deg));
	transition: transform .34s ease, box-shadow .34s ease, border-color .34s ease;
}

.qh-card:hover {
	transform: translateY(-4px) perspective(900px) rotateX(var(--qh-rx, 0deg)) rotateY(var(--qh-ry, 0deg));
}

.qh-card__media img.qh-card__alt {
	position: absolute;
	inset: 20px;
	width: auto;
	height: auto;
	max-height: none;
	opacity: 0;
	transform: scale(1.07);
	transition: opacity .48s ease, transform .68s cubic-bezier(.2, .8, .2, 1);
	pointer-events: none;
}

.qh-card:hover .qh-card__media img.qh-card__alt,
.qh-card:focus-within .qh-card__media img.qh-card__alt {
	opacity: 1;
	transform: scale(1.01);
}

.qh-card__quick {
	position: absolute;
	text-decoration: none;
	left: 50%;
	bottom: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .02em;
	color: #fff;
	background: rgba(30, 20, 60, .62);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 10px 26px rgba(15, 32, 66, .22);
	cursor: pointer;
	opacity: 0;
	transform: translate(-50%, 14px);
	transition: opacity .32s ease, transform .38s cubic-bezier(.2, .8, .25, 1), background .3s ease;
}

.qh-card__quick:hover {
	background: linear-gradient(120deg, #7c3aed, #a855f7 52%, #db2777);
}

.qh-card:hover .qh-card__quick,
.qh-card:focus-within .qh-card__quick {
	opacity: 1;
	transform: translate(-50%, 0);
}

.qh-card__quick .qh-icon {
	width: 14px;
	height: 14px;
}

/* ---------- 3. 迷你购物车抽屉 ---------- */

.qh-minicart__bd {
	position: fixed;
	inset: 0;
	z-index: 89;
	background: rgba(6, 3, 14, .5);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .34s ease;
}

.qh-minicart__bd.is-open {
	opacity: 1;
	pointer-events: auto;
}

.qh-minicart {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	display: flex;
	flex-direction: column;
	width: min(400px, 94vw);
	background: #fff;
	border-left: 1px solid #eef2f8;
	box-shadow: -30px 0 80px rgba(15, 32, 66, .16);
	transform: translateX(103%);
	transition: transform .44s cubic-bezier(.22, .86, .28, 1);
	visibility: hidden;
}

.qh-minicart.is-open {
	transform: none;
	visibility: visible;
}

.qh-night .qh-minicart {
	background: linear-gradient(180deg, rgba(28, 14, 46, .96), rgba(14, 7, 26, .98));
	border-left-color: rgba(168, 85, 247, .24);
	box-shadow: -30px 0 90px rgba(0, 0, 0, .6);
	color: #ded6f5;
}

.qh-minicart__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 18px 14px;
	border-bottom: 1px solid rgba(148, 163, 184, .18);
}

.qh-night .qh-minicart__head {
	border-bottom-color: rgba(168, 85, 247, .18);
}

.qh-minicart__title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .01em;
}

.qh-minicart__count {
	margin-left: 8px;
	font-size: 12px;
	font-weight: 600;
	color: #8b98ad;
}

.qh-minicart__close {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid rgba(148, 163, 184, .28);
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background .25s ease, transform .25s ease;
}

.qh-minicart__close:hover {
	background: rgba(148, 163, 184, .14);
	transform: rotate(90deg);
}

.qh-minicart__body {
	flex: 1;
	overflow-y: auto;
	padding: 14px 16px;
}

.qh-minicart__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.qh-minicart__item {
	display: grid;
	grid-template-columns: 62px 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 10px;
	border-radius: 14px;
	border: 1px solid rgba(148, 163, 184, .2);
	background: rgba(148, 163, 184, .05);
	animation: qh-cart-in .4s cubic-bezier(.2, .8, .25, 1) both;
}

.qh-night .qh-minicart__item {
	border-color: rgba(168, 85, 247, .2);
	background: rgba(255, 255, 255, .04);
}

.qh-minicart__item > img,
.qh-minicart__thumb {
	width: 62px;
	height: 62px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .06);
	object-fit: contain;
	padding: 4px;
}

.qh-minicart__name {
	margin: 0 0 3px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
}

.qh-minicart__meta {
	margin: 0;
	font-size: 11.5px;
	color: #8b98ad;
}

.qh-minicart__price {
	font-size: 13.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.qh-minicart__empty {
	padding: 40px 12px;
	text-align: center;
	color: #8b98ad;
	font-size: 13px;
	line-height: 1.7;
}

.qh-minicart__foot {
	padding: 16px 18px 20px;
	border-top: 1px solid rgba(148, 163, 184, .18);
}

.qh-night .qh-minicart__foot {
	border-top-color: rgba(168, 85, 247, .18);
}

.qh-minicart__sum {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 12px;
	font-size: 13px;
	color: #66768f;
}

.qh-minicart__sum strong {
	font-size: 19px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--qh-ink, #0f2042);
}

.qh-night .qh-minicart__sum {
	color: #a9a0c8;
}

.qh-night .qh-minicart__sum strong {
	color: #f6f2ff;
}

.qh-minicart__note {
	margin: 10px 0 0;
	font-size: 11px;
	line-height: 1.6;
	color: #9aa7bb;
	text-align: center;
}

.qh-minicart__checkout {
	justify-content: center;
	background: linear-gradient(120deg, #4058bd, #5566d6);
}

.qh-night .qh-minicart__checkout {
	background: linear-gradient(120deg, #7c3aed, #a855f7 52%, #db2777);
	box-shadow: 0 14px 30px rgba(124, 58, 237, .35);
}

body.qh-minicart-open {
	overflow: hidden;
}

@keyframes qh-cart-in {
	from {
		opacity: 0;
		transform: translateY(10px) scale(.98);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ---------- 4. 手机端底部工具栏 ---------- */

.qh-mobilebar {
	position: fixed;
	left: 10px;
	right: 10px;
	bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	z-index: 72;
	display: none;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px;
	padding: 8px;
	border-radius: 20px;
	border: 1px solid rgba(168, 85, 247, .26);
	background: rgba(20, 10, 36, .78);
	backdrop-filter: blur(20px) saturate(140%);
	-webkit-backdrop-filter: blur(20px) saturate(140%);
	box-shadow: 0 18px 46px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.qh-mobilebar__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 7px 4px;
	border-radius: 14px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .02em;
	color: #b9aede;
	text-decoration: none;
	transition: background .25s ease, color .25s ease, transform .25s ease;
}

.qh-mobilebar__item .qh-icon {
	width: 20px;
	height: 20px;
}

.qh-mobilebar__item:active {
	transform: scale(.94);
}

.qh-mobilebar__item.is-active,
.qh-mobilebar__item:hover {
	color: #fff;
	background: linear-gradient(120deg, rgba(124, 58, 237, .55), rgba(219, 39, 119, .45));
}

.qh-mobilebar__count {
	position: absolute;
	transform: translate(14px, -6px);
	min-width: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: linear-gradient(120deg, #a855f7, #ec4899);
	font-size: 9px;
	font-weight: 800;
	line-height: 16px;
	color: #fff;
	text-align: center;
}

@media (max-width: 899px) {
	.qh-mobilebar {
		display: grid;
	}

	body.qh-has-mobilebar {
		padding-bottom: 92px;
	}

	.qh-shelf {
		padding: 20px 0 10px;
	}

	.qh-shelf__eyebrow {
		margin-bottom: 9px;
	}

	.qh-shelf__title {
		margin-bottom: 8px;
		font-size: clamp(23px, 7.4vw, 34px);
	}

	.qh-shelf__stage {
		--qh-shelf-card: min(74vw, 340px);
		--qh-shelf-peek: 22px;
		--qh-shelf-side: .94;
		--qh-shelf-h: calc(var(--qh-shelf-card) * .78);

		margin-top: 16px;
	}

	.qh-shelf__arrow {
		display: none;
	}

	.qh-shelf__hint {
		display: none;
	}

	.qh-shelf__bar {
		gap: 10px;
		margin-top: 2px;
	}

	.qh-shelf__counter {
		font-size: 11px;
		letter-spacing: .1em;
	}

	.qh-shelf__dots {
		gap: 6px;
	}

	.qh-shelf__dots button {
		width: 20px;
	}

	.qh-shelf__dots .is-active button {
		width: 34px;
	}

}

	/* 手机上不需要那行说明，把位置让给图片 */
	@media (max-width: 600px) {
		.qh-shelf__sub {
			display: none;
		}
	}

@media (prefers-reduced-motion: reduce) {
	.qh-shelf__aura,
	.qh-shelf__dot {
		animation: none;
	}

	.qh-shelf__head,
	.qh-shelf__title {
		transform: none !important;
	}

	.qh-shelf__track {
		transition: none;
	}

	.qh-shelf-slide,
	.qh-shelf-slide__card,
	.qh-card {
		transition: none;
		transform: none !important;
	}

	.qh-shelf-slide.is-active .qh-shelf-slide__media::after {
		animation: none;
	}

	.qh-card__quick {
		transition: none;
	}
}

/* ????????????????????????"????" */
.qh-shelf-slide.is-prev .qh-shelf-slide__card,
.qh-shelf-slide.is-next .qh-shelf-slide__card {
	filter: brightness(.68) saturate(.92);
}

.qh-shelf-slide:not(.is-active) .qh-shelf-slide__chip {
	opacity: 0;
}