/* ============================================================
   首页
   ============================================================ */

/* ---------- Hero：左对齐双栏（左文案 + 右搜索卡） ---------- */
.sa-hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(ellipse 980px 460px at 8% -30%, rgba(19, 213, 255, .16), transparent 66%),
		radial-gradient(ellipse 620px 380px at 96% 118%, rgba(127, 119, 221, .12), transparent 68%),
		var(--sa-bg);
	border-bottom: 1px solid var(--sa-border);
	padding: 64px 0 60px;
}

/* 网点纹理（深色下用极淡的白点），从左上往右下淡出 */
.sa-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
	background-size: 22px 22px;
	mask-image: linear-gradient(115deg, rgba(0, 0, 0, .85), transparent 62%);
	-webkit-mask-image: linear-gradient(115deg, rgba(0, 0, 0, .85), transparent 62%);
	pointer-events: none;
}

.sa-hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	/* 用比例而不是固定右栏宽度：版心从 1260（1440 屏）到 1880（3432 屏）
	   都保持「左文案 6 : 右搜索 4」，左侧标题区不会在中等屏被挤成 476px。 */
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	/* 数据条独立成行、通栏铺开。
	   第二十轮之前它挂在左列里：宽只有 945，撑不满版心；而且左列因此比
	   右侧搜索卡高出约 120px，居中对齐后首屏左右重量明显失衡。
	   提出来做通栏后，左列 236 / 右列 195，差 41px，视觉上就对齐了。 */
	grid-template-areas:
		"head side"
		"stats stats";
	gap: 34px 64px;
	align-items: center;
}

.sa-hero__head {
	grid-area: head;
	text-align: left;
	max-width: none;
	margin: 0;
	min-width: 0;
}

.sa-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--sa-primary);
	background: var(--sa-primary-soft);
	border: 1px solid rgba(19, 213, 255, .26);
	padding: 6px 14px;
	border-radius: var(--sa-r-pill);
	margin-bottom: 0;
}

.sa-hero__eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sa-success);
	box-shadow: 0 0 0 3px rgba(52, 211, 153, .18);
}

.sa-hero__title {
	font-size: 52px;
	line-height: 1.16;
	font-weight: 700;
	color: var(--sa-text);
	margin: 20px 0 16px;
	letter-spacing: -.035em;
	text-wrap: balance;
}

.sa-hero__sub {
	font-size: 17px;
	line-height: 1.75;
	color: var(--sa-text-2);
	margin: 0;
	max-width: 600px;
}

/* 两个主入口按钮 */
.sa-hero__acts {
	display: flex;
	justify-content: flex-start;
	gap: 12px;
	margin-top: 28px;
	flex-wrap: wrap;
}

/* 第一屏数据条
   第二十轮：原来是「文字 + 竖分隔 + 一条通栏上边框」。那条线只跨左列
   （968px），到右侧搜索卡下方就断了，看着像没画完；而且 24px 的白数字
   比标题还抢眼。改成一组独立胶囊：数字用主色收小，整体更像「标签」而不是
   一组强调数据，视觉重量交还给标题。 */
.sa-hero__stats {
	grid-area: stats;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 0;
}

/* 通栏后右端空出一大片，用一行小字收住视线（也说明数据口径） */
.sa-hero__stats li.sa-hero__stats-note {
	margin-left: auto;
	padding: 0;
	border: 0;
	background: none;
	font-size: 12px;
	color: var(--sa-text-3);
	letter-spacing: .01em;
}

.sa-hero__stats li {
	display: flex;
	align-items: baseline;
	gap: 6px;
	padding: 8px 15px;
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-r-pill);
	background: rgba(255, 255, 255, .035);
}

.sa-hero__stats b {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--sa-primary);
	font-family: var(--sa-mono);
}

.sa-hero__stats span {
	font-size: 12.5px;
	color: var(--sa-text-2);
}

/* 右侧：搜索卡 */
.sa-hero__side {
	grid-area: side;
	min-width: 0;
}

/* 大搜索框本体
   第二十轮：右列（搜索卡 + 热词）原本只有 175px 高，而左列文案 293px，
   居中后上下各空 59px，首屏右半边显得「轻」。把卡的内边距、输入框与
   按钮同步放大一档，右列抬到约 210px，左右重量就基本对上了。 */
.sa-hero__box {
	max-width: none;
	margin: 0;
	background: rgba(255, 255, 255, .055);
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-r-xl);
	padding: 20px;
	transition: border-color var(--sa-t), background-color var(--sa-t), box-shadow var(--sa-t);
}

.sa-hero__box:focus-within {
	border-color: rgba(19, 213, 255, .55);
	background: rgba(255, 255, 255, .075);
	box-shadow: 0 0 0 4px rgba(19, 213, 255, .14);
}

/* 搜索范围切换 */
.sa-hero__tabs {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

.sa-hero__tab {
	border: 0;
	background: transparent;
	color: var(--sa-text-3);
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	padding: 8px 14px;
	border-radius: var(--sa-r-sm);
	cursor: pointer;
	transition: background-color var(--sa-t), color var(--sa-t);
}

.sa-hero__tab:hover {
	color: var(--sa-text);
	background: rgba(255, 255, 255, .07);
	box-shadow: none;
}

.sa-hero__tab.is-active {
	background: var(--sa-primary-soft);
	color: var(--sa-primary);
	box-shadow: inset 0 0 0 1px var(--sa-primary-soft-2);
}

.sa-hero__tab.is-active:hover {
	background: var(--sa-primary-soft);
	color: var(--sa-primary);
}

/* 输入行 */
.sa-hero__field {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sa-hero__field input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--sa-text);
	font-size: 18px;
	padding: 16px 6px;
}

.sa-hero__field input[type="search"]::placeholder {
	color: var(--sa-text-3);
}

.sa-hero__field input[type="search"]:focus {
	box-shadow: none !important;
}

.sa-hero__go {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 0;
	background: var(--sa-primary);
	color: var(--sa-on-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: background-color var(--sa-t), transform var(--sa-t), box-shadow var(--sa-t);
}

.sa-hero__go:hover {
	background: var(--sa-primary-dark);
	box-shadow: 0 6px 18px rgba(19, 213, 255, .42);
}

.sa-hero__go svg {
	width: 19px;
	height: 19px;
	display: block;
}

/* 热门搜索 */
.sa-hero__chips {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
	padding-left: 6px;
}

.sa-hero__chips-label {
	color: var(--sa-text-3);
	font-size: 13px;
	margin-right: 2px;
}

.sa-hero__chips a {
	display: inline-flex;
	align-items: center;
	color: var(--sa-text-2);
	text-decoration: none;
	font-size: 13px;
	padding: 7px 13px;
	border-radius: var(--sa-r-pill);
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .08);
	transition: background-color var(--sa-t), border-color var(--sa-t), color var(--sa-t);
}

.sa-hero__chips a:hover {
	background: var(--sa-primary-soft);
	border-color: var(--sa-primary-soft-2);
	color: var(--sa-primary);
}

/* ---------- 四条价值点（紧贴 Hero） ----------
   第二十轮：原来是「一条 106px 厚、底色比页面亮一档的色带」，四个卖点
   平铺在里面，像一行说明文字，没有任何存在感。
   改成 4 张独立卡片：色带退回页面底色，卡片用 --sa-surface 浮起来，
   悬停有描边提亮 + 上浮。这样「hero → 4 张卡 → 社区」的层次才立得住。 */
.sa-trust {
	background: var(--sa-bg);
	border-bottom: 1px solid var(--sa-border);
	padding: 30px 0 34px;
}

.sa-trust__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

.sa-trust__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	min-width: 0;
	padding: 18px 18px 17px;
	background: var(--sa-surface);
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-r);
	transition: border-color var(--sa-t), background-color var(--sa-t), transform var(--sa-t);
}

.sa-trust__item:hover {
	border-color: var(--sa-border-strong);
	background: var(--sa-surface-2);
	transform: translateY(-1px);
}

.sa-trust__icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 13px;
	/* 第十九轮：平涂淡底 → 渐变底 + 内描边，与版块卡 / 话题头像同一套语言 */
	background: linear-gradient(140deg, rgba(19, 213, 255, .20), rgba(19, 213, 255, .04));
	box-shadow: inset 0 0 0 1px rgba(19, 213, 255, .18);
	color: var(--sa-primary);
	display: flex;
	align-items: center;
	justify-content: center;
}

.sa-trust__icon svg {
	width: 21px;
	height: 21px;
	display: block;
}

.sa-trust__body {
	min-width: 0;
}

.sa-trust__item strong {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: var(--sa-text);
	line-height: 1.4;
}

.sa-trust__item p {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--sa-text-3);
	line-height: 1.55;
}

/* ---------- 商品区 ---------- */
.sa-products .woocommerce {
	margin: 0;
}

/* ---------- 底部 CTA ---------- */
.sa-cta {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(ellipse 700px 320px at 12% -30%, rgba(19, 213, 255, .26), transparent 66%),
		radial-gradient(ellipse 620px 300px at 92% 140%, rgba(127, 119, 221, .20), transparent 64%),
		var(--sa-surface);
	border-top: 1px solid var(--sa-border);
	border-bottom: 1px solid var(--sa-border);
	padding: 52px 0;
	margin-top: 8px;
}

.sa-cta__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}

.sa-cta__title {
	color: #fff;
	font-size: 26px;
	font-weight: 600;
	margin: 0 0 8px;
	letter-spacing: -.015em;
}

.sa-cta__sub {
	color: var(--sa-text-2);
	font-size: 15px;
	margin: 0;
	max-width: 560px;
	line-height: 1.7;
}

.sa-cta__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.sa-cta .sa-btn--primary {
	background: var(--sa-primary);
	color: var(--sa-on-primary);
}

.sa-cta .sa-btn--primary:hover {
	background: var(--sa-primary-dark);
	box-shadow: 0 10px 26px rgba(19, 213, 255, .40);
}

.sa-cta .sa-btn--ghost {
	background: rgba(255, 255, 255, .07);
	color: #fff;
	border-color: var(--sa-border-strong);
}

.sa-cta .sa-btn--ghost:hover {
	background: rgba(255, 255, 255, .14);
	color: #fff;
	border-color: rgba(255, 255, 255, .34);
}

/* ---------- 首页内容区去容器边距 ---------- */
.sa-home > .sa-section:first-child {
	padding-top: 0;
}

/* ---------- 首页「市场 · 创作者上新」：把作品卡压矮 ----------
   作品封面是 600×600 方图，卡宽 452 时 1:1 缩略图就有 452px 高，
   整排卡片 639px 把这一区撑得很笨重（用户反馈"太高了"）。
   首页把缩略图裁成 4:3：方图上下各裁 12.5%，而作品图的内容都集中在
   中间约 55% 的高度里（上下本来就是留白底），裁不到东西。
   同时把给「店铺：xxx」预留的 50px 带收到 40px。
   ⚠ 选择器必须带 body.page-id-51 提权，才能压过 components.css 里的
     `.woocommerce ul.products li.product a img { aspect-ratio: 1/1 }`。 */
body.page-id-51 .woocommerce ul.products li.product a img {
	aspect-ratio: 4 / 3;
}

/* ⚠ 第二十二轮：这里原来单独把「店铺行预留带」收到 40px，
   但 components.css 已把带高与胶囊定位绑在同一个变量 --sa-store-band 上
   （margin-bottom 与 bottom 必须同源，各写各的必然脱节）。
   首页卡片更小、留白更紧，变量收到 30px 即可。 */
body.page-id-51 .woocommerce ul.products li.product {
	--sa-store-band: 30px;
}

/* 摘要区收紧：标题上边距 14→12，价格上边距 8→6，加购按钮矮一点 */
body.page-id-51 .woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding-top: 12px;
}

/* ⚠ 第二十三轮：价格与按钮改成同一行后，两者的上间距必须一致
   （价格用 padding-top、按钮用 margin-top），否则同一行里一高一低。首页卡更紧，统一收到 8px。 */
body.page-id-51 .woocommerce ul.products li.product .price {
	padding-top: 8px;
}

/* ⚠ 选择器要带 .astra-shop-summary-wrap：components.css 里同族的那条
   （第十七→二十三轮的商品卡按钮）已经升到 (0,6,2)，
   这里不加就会被整条盖掉，首页卡片按钮又回到默认上边距。 */
body.page-id-51 .woocommerce ul.products li.product .astra-shop-summary-wrap .button,
body.page-id-51 .woocommerce ul.products li.product .astra-shop-summary-wrap .add_to_cart_button {
	margin-top: 8px;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1599px) {
	.sa-hero__grid {
		gap: 28px 44px;
	}

	.sa-hero__title {
		font-size: 44px;
	}
}

@media (max-width: 1024px) {
	.sa-hero {
		padding: 48px 0 44px;
	}

	/* 窄屏改回上下堆叠：文案在上、搜索卡在下、数据条最后 */
	.sa-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"head"
			"side"
			"stats";
		gap: 28px;
	}

	.sa-hero__title {
		font-size: 34px;
	}

	.sa-hero__sub {
		max-width: 640px;
	}

	.sa-trust__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}
}

@media (max-width: 768px) {
	.sa-hero {
		padding: 36px 0 40px;
	}

	.sa-hero__grid {
		gap: 26px;
	}

	.sa-hero__eyebrow {
		font-size: 12px;
	}

	.sa-hero__title {
		font-size: 27px;
		letter-spacing: -.02em;
		margin: 16px 0 12px;
	}

	.sa-hero__sub {
		font-size: 14px;
	}

	.sa-hero__acts {
		margin-top: 20px;
	}

	.sa-hero__stats {
		gap: 8px;
	}

	.sa-hero__stats li {
		padding: 7px 12px;
	}

	.sa-hero__stats li.sa-hero__stats-note {
		display: none;
	}

	.sa-hero__box {
		border-radius: var(--sa-r-lg);
		padding: 14px;
	}

	.sa-hero__tabs {
		gap: 2px;
	}

	.sa-hero__tab {
		font-size: 12px;
		padding: 7px 10px;
	}

	.sa-hero__field input[type="search"] {
		font-size: 15px;
		padding: 9px 2px;
	}

	.sa-hero__go {
		width: 38px;
		height: 38px;
	}

	.sa-hero__chips {
		gap: 6px;
		margin-top: 14px;
	}

	.sa-hero__chips a {
		font-size: 12px;
		padding: 7px 11px;
	}

	.sa-trust {
		padding: 24px 0;
	}

	.sa-trust__grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.sa-cta {
		padding: 38px 0;
	}

	.sa-cta__title {
		font-size: 21px;
	}
}