/*
Theme Name: TopShoe B2B
Theme URI: https://topshoevendor.com/
Description: Astra 子主题 —— 外贸鞋子批发站 B2B 视觉与布局层。信息密集的目录风：宽容器、五列商品墙、参数表化商品页、红色 CTA。
Author: TopShoe
Template: astra
Version: 1.0.0
Text Domain: topshoe-b2b
*/

/* =========================================================
   1. 设计 Token
   ========================================================= */
:root {
	--tsv-ink: #111827;
	--tsv-ink-2: #1f2937;
	--tsv-muted: #6b7280;
	--tsv-hint: #9ca3af;
	--tsv-line: #e5e7eb;
	--tsv-line-2: #f3f4f6;
	--tsv-bg: #ffffff;
	--tsv-bg-2: #f9fafb;
	--tsv-red: #c8102e;
	--tsv-red-dark: #9e0b24;
	--tsv-red-soft: #fef2f2;
	--tsv-amber: #f59e0b;
	--tsv-amber-soft: #fffbeb;
	--tsv-green: #0f766e;
	--tsv-green-soft: #ecfdf5;
	--tsv-blue: #185fa5;
	--tsv-blue-soft: #eff6ff;
	--tsv-r: 6px;
	--tsv-r-lg: 10px;
	--tsv-wrap: 1400px;
	--tsv-gap: 16px;
}

/* =========================================================
   2. 基础与容器
   ========================================================= */
body,
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single {
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	color: var(--tsv-ink);
	-webkit-font-smoothing: antialiased;
}

.ast-container,
.ast-container-fluid,
.site-content .ast-container {
	max-width: var(--tsv-wrap);
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

h1, h2, h3, h4, .entry-title {
	color: var(--tsv-ink);
	font-weight: 600;
	letter-spacing: -0.01em;
}

a { color: var(--tsv-ink-2); }
a:hover { color: var(--tsv-red); }

/* 全站去掉圆角玩具感 */
.ast-button, .button, input[type="submit"], button:not(.tsv-del) { border-radius: var(--tsv-r); }

/* =========================================================
   3. 顶栏（语言 / 币种 / 登录 / WhatsApp）
   ========================================================= */
.tsv-topbar {
	background: var(--tsv-ink);
	color: #d1d5db;
	font-size: 12px;
	line-height: 1;
}

.tsv-topbar__in {
	max-width: var(--tsv-wrap);
	margin: 0 auto;
	padding: 8px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.tsv-topbar a { color: #d1d5db; text-decoration: none; }
.tsv-topbar a:hover { color: #fff; }
.tsv-topbar__right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.tsv-topbar__sep { color: #4b5563; }
.tsv-topbar__wa { color: #34d399; font-weight: 500; }

/* =========================================================
   4. 页头与导航
   ========================================================= */
.ast-primary-header-bar,
.site-primary-header-wrap {
	border-bottom: 1px solid var(--tsv-line);
}

/* ---------------------------------------------------------
   页头改成两行结构。
   Astra 默认把 logo + 9 项主菜单 + 账号/购物车挤在一行，
   于是 logo 折成两行、菜单折成两排、购物车金额竖着断字，
   页头能撑到 229px。改成「上排 logo + 账号，下排整行主菜单」。
   --------------------------------------------------------- */
.site-title { margin: 0; }

.site-title a {
	font-size: 22px;
	line-height: 1.25;
	white-space: nowrap;
}

.site-primary-header-wrap .ast-builder-grid-row {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center;
	column-gap: 24px;
	row-gap: 0;
}

/* basis 必须给 0：给 auto 时该栏会索要 max-content 宽度，
   把右侧账号区挤到第二行去。 */
.site-primary-header-wrap .site-header-primary-section-left {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	flex: 1 1 0%;
	column-gap: 24px;
	min-width: 0;
}

.site-primary-header-wrap .site-header-primary-section-right { flex: 0 0 auto; }

/* 主菜单整行落到第二排 */
.site-primary-header-wrap #ast-hf-menu-1 {
	flex: 1 1 100%;
	order: 3;
	justify-content: flex-start;
	padding-top: 4px;
	margin-top: 6px;
}

/* Astra 给菜单加了 flex-wrap:wrap，栏宽算不出来会乱折 */
.main-header-menu { flex-wrap: nowrap; }

.main-header-menu > .menu-item > .menu-link {
	padding-left: 9px;
	padding-right: 9px;
	font-size: 13px;
	white-space: nowrap;
}

.ast-primary-header-bar .site-primary-header-wrap,
.ast-primary-header-bar .ast-builder-grid-row {
	min-height: 0;
}

.ast-primary-header-bar { padding-top: 13px; padding-bottom: 11px; }

.main-header-menu > .menu-item > .menu-link,
.ast-builder-menu .menu-item > .menu-link {
	font-size: 14px;
	font-weight: 500;
	color: var(--tsv-ink);
	text-transform: none;
	letter-spacing: 0;
}

.main-header-menu > .menu-item:hover > .menu-link { color: var(--tsv-red); }

/* Mega Menu 面板 */
.main-header-menu .sub-menu {
	border: 1px solid var(--tsv-line);
	border-radius: var(--tsv-r-lg);
	box-shadow: none;
	padding: 10px;
	min-width: 220px;
}

.main-header-menu .sub-menu .menu-link { font-size: 13px; font-weight: 400; padding: 8px 12px; border-radius: var(--tsv-r); }
.main-header-menu .sub-menu .menu-link:hover { background: var(--tsv-bg-2); color: var(--tsv-red); }

/* 搜索框 */
.ast-header-search .search-field,
.ast-builder-header-search input[type="search"] {
	border: 1px solid var(--tsv-line);
	border-radius: var(--tsv-r);
	font-size: 13px;
	height: 38px;
}

/* 页头询价车 / 购物车计数 */
.tsv-head-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	margin-left: 4px;
	background: var(--tsv-red);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	border-radius: 9px;
	vertical-align: middle;
}

/* =========================================================
   5. 按钮体系
   ========================================================= */
.tsv-btn,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.single_add_to_cart_button {
	background: var(--tsv-red) !important;
	border-color: var(--tsv-red) !important;
	color: #fff !important;
	border-radius: var(--tsv-r);
	font-weight: 500;
	font-size: 14px;
	padding: 12px 22px;
	text-transform: none;
	letter-spacing: 0;
	transition: background .15s ease;
}

.tsv-btn:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.single_add_to_cart_button:hover {
	background: var(--tsv-red-dark) !important;
	border-color: var(--tsv-red-dark) !important;
}

.tsv-btn--ghost,
.tsv-inquiry-btn {
	background: #fff !important;
	border: 1px solid var(--tsv-ink) !important;
	color: var(--tsv-ink) !important;
}

.tsv-btn--ghost:hover,
.tsv-inquiry-btn:hover {
	background: var(--tsv-ink) !important;
	color: #fff !important;
}

.tsv-inquiry-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 12px 0 0;
	padding: 12px 20px;
	border-radius: var(--tsv-r);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	width: 100%;
}

/* =========================================================
   6. 信任条
   ========================================================= */
.tsv-trustbar {
	border-top: 1px solid var(--tsv-line);
	border-bottom: 1px solid var(--tsv-line);
	background: var(--tsv-bg);
}

.tsv-trustbar__in {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: var(--tsv-line);
}

.tsv-trustbar__item {
	background: var(--tsv-bg);
	padding: 18px 16px;
	text-align: center;
}

.tsv-trustbar__k {
	font-size: 13px;
	font-weight: 500;
	color: var(--tsv-ink);
	margin: 0 0 3px;
}

.tsv-trustbar__v {
	font-size: 12px;
	color: var(--tsv-muted);
	margin: 0;
}

/* =========================================================
   7. Hero
   ========================================================= */
.tsv-hero {
	position: relative;
	background: #0f2337;
	color: #fff;
	overflow: hidden;
}

/* 背景光晕：左上红、右下蓝，给深色块一点纵深 */
.tsv-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(880px 420px at 8% -6%, rgba(200, 16, 46, .26), transparent 62%),
		radial-gradient(760px 420px at 102% 106%, rgba(24, 95, 165, .30), transparent 60%);
}

.tsv-hero__wrap {
	position: relative;
	z-index: 1;
	max-width: var(--tsv-wrap);
	margin: 0 auto;
	padding: 0 20px;
}

/* 首页页头是 position:absolute 叠在 Hero 上的（Astra 透明页头），
   所以上内边距必须留够一条页头的高度，否则眉标会被页头压住。 */
.tsv-hero__in {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
	gap: 56px;
	align-items: center;
	padding: 124px 0 52px;
}

.tsv-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #ffd7de;
	background: rgba(200, 16, 46, .2);
	border: 1px solid rgba(255, 122, 140, .34);
	padding: 6px 13px;
	border-radius: 999px;
	margin-bottom: 18px;
}

.tsv-hero__eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #ff5a75;
	box-shadow: 0 0 0 3px rgba(255, 90, 117, .22);
}

.tsv-hero__h1 {
	font-size: 42px;
	line-height: 1.14;
	color: #fff;
	margin: 0 0 16px;
	font-weight: 600;
	letter-spacing: -.02em;
}

.tsv-hero__p {
	font-size: 15.5px;
	line-height: 1.75;
	color: #b7c6d7;
	margin: 0 0 28px;
	max-width: 560px;
}

.tsv-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* Hero 主视觉 */
.tsv-hero__media { position: relative; margin: 0; }

.tsv-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1200 / 831;
	object-fit: cover;
	border-radius: 14px;
	box-shadow: 0 18px 46px rgba(3, 12, 22, .45);
}

.tsv-hero__badge {
	position: absolute;
	left: 14px;
	bottom: 14px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	font-weight: 500;
	color: #fff;
	background: rgba(9, 20, 34, .76);
	border: 1px solid rgba(255, 255, 255, .18);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	padding: 7px 13px;
	border-radius: 999px;
}

/* 底部指标条 */
.tsv-hero__stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid rgba(255, 255, 255, .13);
}

.tsv-hero__stat {
	padding: 22px 22px 30px;
	border-left: 1px solid rgba(255, 255, 255, .13);
}

.tsv-hero__stat:first-child { border-left: 0; padding-left: 0; }

.tsv-hero__stat b {
	display: block;
	font-size: 27px;
	font-weight: 600;
	color: #fff;
	line-height: 1.12;
	letter-spacing: -.02em;
}

.tsv-hero__stat span {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	color: #93a5b8;
}

/* =========================================================
   8. 分类宫格
   ========================================================= */
/* auto-fit：有多少张卡就铺满几列，不会在 3 列栅格里留下空位 */
.tsv-catgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: var(--tsv-gap);
}

.tsv-catcard {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--tsv-line);
	border-radius: var(--tsv-r-lg);
	overflow: hidden;
	text-decoration: none;
	background: var(--tsv-bg);
	transition: border-color .18s ease, box-shadow .18s ease;
}

.tsv-catcard__media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--tsv-bg-2);
}

.tsv-catcard__media img,
.tsv-catcard__ph {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

/* 没有分类图时的占位纹理，避免出现纯白白框 */
.tsv-catcard__ph {
	background: repeating-linear-gradient(135deg, #eef1f5 0 14px, #f7f9fb 14px 28px);
}

.tsv-catcard__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 16px 18px 18px;
}

.tsv-catcard__t {
	font-size: 16px;
	font-weight: 600;
	color: var(--tsv-ink);
	margin: 0 0 5px;
	letter-spacing: -.01em;
}

.tsv-catcard__d { font-size: 12.5px; color: var(--tsv-muted); margin: 0 0 14px; }

.tsv-catcard__go { margin-top: auto; font-size: 13px; font-weight: 500; color: var(--tsv-red); }

.tsv-catcard:hover {
	border-color: var(--tsv-ink);
	box-shadow: 0 10px 26px rgba(15, 32, 50, .10);
}

.tsv-catcard:hover .tsv-catcard__media img { transform: scale(1.045); }

/* 「全部款式」深色卡：补位用，同时是强 CTA */
.tsv-catcard--all { background: #0f2337; border-color: #0f2337; }
.tsv-catcard--all .tsv-catcard__media { background: #0f2337; }

.tsv-catcard--all .tsv-catcard__ph {
	background:
		repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 14px, rgba(255, 255, 255, 0) 14px 28px),
		#0f2337;
}

.tsv-catcard--all .tsv-catcard__t { color: #fff; }
.tsv-catcard--all .tsv-catcard__d { color: #95a8bb; }
.tsv-catcard--all .tsv-catcard__go { color: #ff8199; }
.tsv-catcard--all:hover { border-color: #0f2337; box-shadow: 0 10px 26px rgba(15, 32, 50, .22); }

/* =========================================================
   9. 区块标题
   ========================================================= */
.tsv-sec { padding: 46px 0; }
.tsv-sec--alt { background: var(--tsv-bg-2); }

.tsv-sec__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 22px;
}

.tsv-sec__t { font-size: 22px; font-weight: 600; margin: 0 0 4px; color: var(--tsv-ink); }
.tsv-sec__d { font-size: 13px; color: var(--tsv-muted); margin: 0; }
.tsv-sec__more { font-size: 13px; color: var(--tsv-red); font-weight: 500; text-decoration: none; white-space: nowrap; }

/* =========================================================
   10. 商品墙与商品卡
   ========================================================= */
.woocommerce ul.products,
ul.products {
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--tsv-gap);
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.woocommerce ul.products li.product,
ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	background: var(--tsv-bg);
	border: 1px solid var(--tsv-line);
	border-radius: var(--tsv-r-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color .15s ease;
}

.woocommerce ul.products li.product:hover,
ul.products li.product:hover { border-color: var(--tsv-ink-2); }

.woocommerce ul.products li.product a img,
ul.products li.product img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0 !important;
	display: block;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	color: var(--tsv-ink);
	/* 只留上内边距：底部留白会让第三行露出几个像素。
	   高度 = 12px 上内边距 + 2×20px 行高，正好两行。 */
	padding: 12px 14px 0;
	margin: 0 0 6px;
	height: 52px;
	display: block;
	overflow: hidden;
}

.woocommerce ul.products li.product .price {
	padding: 0 14px 12px;
	margin: 0;
	font-size: 15px;
	color: var(--tsv-red);
	font-weight: 600;
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
	margin: auto 14px 14px !important;
	width: calc(100% - 28px);
	text-align: center;
	font-size: 13px;
	padding: 10px 12px;
}

/* 徽标排成一行：竖着堆两枚会盖掉鞋子主体，且视觉重心被拉到左上角 */
.tsv-card-badges {
	position: absolute;
	top: 8px;
	left: 8px;
	right: 8px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 4px;
	z-index: 2;
}

.woocommerce ul.products li.product { position: relative; }

.tsv-badge {
	display: inline-block;
	font-size: 10px;
	line-height: 1;
	padding: 4px 7px;
	border-radius: 3px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	background: var(--tsv-ink);
	color: #fff;
}

.tsv-badge--drop { background: var(--tsv-green); }
.tsv-badge--moq { background: var(--tsv-amber); color: #422006; }
.tsv-badge--hot { background: var(--tsv-red); }

/* 卡片上的分类名跟标题同字号同色，两行标题被截断后它看上去像
   第三行残留。分类导航已经在归档页顶部用分类条给了，这里撤掉。 */
.woocommerce ul.products li.product .ast-woo-product-category { display: none; }

.tsv-card-meta {
	padding: 0 14px 10px;
	font-size: 11px;
	color: var(--tsv-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 分类页筛选栏 */
.tsv-filterbar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 12px 0;
	border-bottom: 1px solid var(--tsv-line);
	margin-bottom: 22px;
	font-size: 13px;
}

.tsv-filterbar select,
.woocommerce-ordering select {
	border: 1px solid var(--tsv-line);
	border-radius: var(--tsv-r);
	font-size: 13px;
	height: 36px;
	padding: 0 10px;
}

.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count { font-size: 13px; color: var(--tsv-muted); }

/* =========================================================
   11. 商品详情页
   ========================================================= */
.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 460px;
	gap: 44px;
	align-items: start;
}

.single-product div.product .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

.single-product div.product .summary {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	position: sticky;
	top: 20px;
}

.single-product .product_title { font-size: 24px; line-height: 1.35; margin: 0 0 10px; }

.single-product .single-product-category a,
.single-product .posted_in a {
	font-size: 12px;
	color: var(--tsv-muted);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.single-product .product_meta { font-size: 12px; color: var(--tsv-muted); border-top: 1px solid var(--tsv-line-2); padding-top: 12px; }

.single-product .woocommerce-product-details__short-description { font-size: 14px; line-height: 1.7; color: #374151; }

/* 阶梯价表 */
.tsv-ladder {
	border: 1px solid var(--tsv-line);
	border-radius: var(--tsv-r-lg);
	padding: 0;
	margin: 0 0 20px;
	overflow: hidden;
	background: var(--tsv-bg);
}

.tsv-ladder__title {
	font-size: 14px;
	font-weight: 600;
	margin: 0;
	padding: 12px 16px;
	background: var(--tsv-bg-2);
	border-bottom: 1px solid var(--tsv-line);
	color: var(--tsv-ink);
}

.tsv-ladder__table { width: 100%; border-collapse: collapse; margin: 0; }

.tsv-ladder__table td {
	padding: 11px 16px;
	border-bottom: 1px solid var(--tsv-line-2);
	font-size: 14px;
	color: var(--tsv-ink);
	vertical-align: middle;
}

.tsv-ladder__table tr:last-child td { border-bottom: 0; }
.tsv-ladder__table tr.is-active td { background: var(--tsv-amber-soft); font-weight: 600; }
.tsv-ladder__table tr.is-active td:first-child { box-shadow: inset 3px 0 0 var(--tsv-amber); }
.tsv-ladder__qty { color: var(--tsv-muted); font-weight: 400; }
.tsv-ladder__price { text-align: right; color: var(--tsv-red); font-weight: 600; white-space: nowrap; }
.tsv-ladder__price small { color: var(--tsv-muted); font-weight: 400; font-size: 12px; }
.tsv-ladder__label { font-size: 12px; color: var(--tsv-muted); text-align: right; }

.tsv-ladder--locked {
	padding: 16px;
	background: var(--tsv-amber-soft);
	border-color: #fde68a;
	font-size: 13px;
	color: #92400e;
	line-height: 1.6;
}

/* 规格清单 */
.tsv-spec { list-style: none; margin: 0; padding: 0; font-size: 13px; border-top: 1px solid var(--tsv-line-2); }
.tsv-spec li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--tsv-line-2); }
.tsv-spec li span { color: var(--tsv-muted); }
.tsv-spec li b { color: var(--tsv-ink); font-weight: 500; text-align: right; }

/* 价格区间 */
.tsv-price-range { font-size: 22px; font-weight: 600; color: var(--tsv-red); }
.tsv-unit { color: var(--tsv-muted); font-weight: 400; font-size: 13px; }
.tsv-locked {
	display: inline-block;
	font-size: 13px;
	color: #92400e;
	background: var(--tsv-amber-soft);
	border: 1px solid #fde68a;
	padding: 5px 10px;
	border-radius: 4px;
}

/* 加购区 */
.single-product form.cart { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.single-product .quantity input.qty { height: 46px; border: 1px solid var(--tsv-line); border-radius: var(--tsv-r); }
.single-product .single_add_to_cart_button { height: 46px; padding: 0 30px; flex: 1; min-width: 160px; }
.single-product .tsv-inquiry-btn { height: 46px; padding: 0 22px; }

/* 商品页信任徽标 */
.tsv-pdp-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}

.tsv-pdp-trust span {
	font-size: 12px;
	padding: 6px 10px;
	border-radius: 4px;
	background: var(--tsv-green-soft);
	color: var(--tsv-green);
	border: 1px solid #a7f3d0;
}

.tsv-pdp-trust span.is-amber { background: var(--tsv-amber-soft); color: #92400e; border-color: #fde68a; }
.tsv-pdp-trust span.is-blue { background: var(--tsv-blue-soft); color: var(--tsv-blue); border-color: #bfdbfe; }

.tsv-pdp-contacts {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--tsv-line-2);
}

.tsv-pdp-contacts a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	text-decoration: none;
	padding: 8px 14px;
	border: 1px solid var(--tsv-line);
	border-radius: var(--tsv-r);
	color: var(--tsv-ink);
}

.tsv-pdp-contacts a:hover { border-color: var(--tsv-green); color: var(--tsv-green); }

.tsv-pdp-contacts a.tsv-pdp-contacts__wa {
	border-color: #25d366;
	background: #f0fdf4;
	color: #0f6e56;
	font-weight: 500;
	white-space: nowrap;
}

.tsv-pdp-contacts a.tsv-pdp-contacts__wa:hover {
	background: #25d366;
	border-color: #25d366;
	color: #ffffff;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 0; border-bottom: 1px solid var(--tsv-line); }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: transparent; border: 0; border-radius: 0; margin: 0 24px 0 0; padding: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 14px 0; font-size: 14px; font-weight: 500; color: var(--tsv-muted); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--tsv-ink); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs .panel { font-size: 14px; line-height: 1.8; color: #374151; padding: 22px 0; }

/* 属性表 */
.woocommerce table.shop_attributes { border: 1px solid var(--tsv-line); border-radius: var(--tsv-r); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.woocommerce table.shop_attributes th { background: var(--tsv-bg-2); font-size: 13px; width: 200px; }
.woocommerce table.shop_attributes td, .woocommerce table.shop_attributes th { border: 0; border-bottom: 1px solid var(--tsv-line-2); padding: 10px 16px; }

/* =========================================================
   12. 购物车 / 结算
   ========================================================= */
.woocommerce-cart table.cart,
.woocommerce table.shop_table { border: 1px solid var(--tsv-line); border-radius: var(--tsv-r-lg); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.woocommerce table.shop_table th { background: var(--tsv-bg-2); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--tsv-muted); font-weight: 500; }
.woocommerce table.shop_table td { font-size: 14px; }

.tsv-cart-hint {
	margin-top: 5px;
	font-size: 12px;
	color: var(--tsv-green);
	background: var(--tsv-green-soft);
	display: inline-block;
	padding: 3px 8px;
	border-radius: 4px;
}

.tsv-neutral-note {
	font-size: 12px;
	color: var(--tsv-muted);
	background: var(--tsv-bg-2);
	border-left: 3px solid var(--tsv-line);
	padding: 10px 14px;
	border-radius: 0 var(--tsv-r) var(--tsv-r) 0;
	line-height: 1.6;
}

/* =========================================================
   13. 询盘车
   ========================================================= */
.tsv-inq-wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: start; }

.tsv-inq-table { width: 100%; border-collapse: collapse; border: 1px solid var(--tsv-line); border-radius: var(--tsv-r-lg); overflow: hidden; }
.tsv-inq-table th { background: var(--tsv-bg-2); font-size: 12px; color: var(--tsv-muted); font-weight: 500; text-align: left; padding: 11px 14px; }
.tsv-inq-table td { padding: 12px 14px; border-top: 1px solid var(--tsv-line-2); font-size: 14px; vertical-align: middle; }
.tsv-inq-table img { width: 52px; height: 52px; object-fit: cover; border-radius: var(--tsv-r); vertical-align: middle; margin-right: 10px; }
.tsv-inq-table input[type="number"], .tsv-inq-table input[type="text"] { width: 100%; border: 1px solid var(--tsv-line); border-radius: var(--tsv-r); height: 36px; }

.tsv-inq-form {
	border: 1px solid var(--tsv-line);
	border-radius: var(--tsv-r-lg);
	padding: 22px;
	background: var(--tsv-bg);
}

.tsv-inq-form h3 { font-size: 16px; margin: 0 0 6px; }
.tsv-inq-form p.sub { font-size: 12px; color: var(--tsv-muted); margin: 0 0 16px; }
.tsv-inq-form .field { margin-bottom: 12px; }
.tsv-inq-form label { display: block; font-size: 12px; font-weight: 500; color: var(--tsv-ink-2); margin-bottom: 4px; }
.tsv-inq-form input, .tsv-inq-form select, .tsv-inq-form textarea {
	width: 100%;
	border: 1px solid var(--tsv-line);
	border-radius: var(--tsv-r);
	font-size: 13px;
	padding: 10px 12px;
}
.tsv-inq-form .req { color: var(--tsv-red); }

.tsv-inq-empty { padding: 46px 20px; text-align: center; border: 1px dashed var(--tsv-line); border-radius: var(--tsv-r-lg); }
.tsv-inq-empty p { font-size: 14px; color: var(--tsv-muted); margin: 0 0 16px; }

/* =========================================================
   14. 页脚
   ========================================================= */
.site-footer, .ast-footer-overlay { background: var(--tsv-ink); color: #9ca3af; }
.site-footer a { color: #d1d5db; }
.site-footer a:hover { color: #fff; }
.site-footer .widget-title, .site-footer h4 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.site-footer, .site-footer p, .site-footer li { font-size: 13px; }

/* 页脚 CTA 那行大字：Astra 由构建器写死了 #333，落在 #111827 的
   深底上对比度只有 1.4:1 —— 实机上基本是一行看不见的字。
   这条必须 !important，因为来源是 Astra 生成的构建器样式。 */
.site-above-footer-wrap .ast-builder-html-element,
.site-above-footer-wrap .ast-builder-html-element p,
.site-above-footer-wrap .ast-builder-html-element span {
	color: #e5e7eb !important;
	letter-spacing: .03em;
}

.site-above-footer-wrap .widget-title,
.site-above-footer-wrap h4 { color: #fff; }

/* 页脚订阅表单：默认是「深底 + 黑字 + 透明底」，输入的内容看不见。
   订阅组件（hostinger-reach）自带样式特异性不低，这里用 !important
   压过去 —— 否则会出现「深色底上打黑字」这种明显不可用状态。 */
.site-footer input[type="text"],
.site-footer input[type="email"],
.site-footer input[type="tel"],
.site-footer input[type="search"] {
	background: rgba(255, 255, 255, .07) !important;
	border: 1px solid rgba(255, 255, 255, .22) !important;
	color: #fff !important;
	box-shadow: none;
}

.site-footer input[type="text"]::placeholder,
.site-footer input[type="email"]::placeholder,
.site-footer input[type="tel"]::placeholder,
.site-footer input[type="search"]::placeholder { color: #9ca3af; }

.site-footer input[type="text"]:focus,
.site-footer input[type="email"]:focus { border-color: rgba(255, 255, 255, .5); }

/* 底栏是白底，却继承了 .site-footer 的 #9ca3af（对比度 2.9:1）。 */
.site-below-footer-wrap { color: var(--tsv-muted); }
.site-below-footer-wrap a { color: var(--tsv-ink-2); }

/* =========================================================
   15. 响应式
   ========================================================= */
@media (max-width: 1200px) {
	.woocommerce ul.products, ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.single-product div.product { grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; }
	.tsv-hero__h1 { font-size: 35px; }
}

@media (max-width: 992px) {
	.woocommerce ul.products, ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.single-product div.product { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.single-product div.product .summary { position: static; }
	/* 移动端页头同样是叠加式，且顶栏会折行变高，上边距要留足 */
	.tsv-hero__in { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 118px 0 44px; }
	.tsv-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tsv-hero__stat:nth-child(odd) { border-left: 0; padding-left: 0; }
	.tsv-hero__stat:nth-child(3),
	.tsv-hero__stat:nth-child(4) { border-top: 1px solid rgba(255, 255, 255, .13); }
	.tsv-inq-wrap { grid-template-columns: minmax(0, 1fr); }
	/* 窄屏放不下 9 个菜单项，交回给 Astra 的折行/汉堡逻辑 */
	.main-header-menu { flex-wrap: wrap; }
}

@media (max-width: 640px) {
	.woocommerce ul.products, ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tsv-trustbar__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tsv-sec { padding: 30px 0; }
	.tsv-hero__h1 { font-size: 27px; }
	.tsv-hero__in { padding: 108px 0 34px; gap: 22px; }
	.tsv-hero__stat { padding: 16px 16px 22px; }
	.tsv-hero__stat b { font-size: 23px; }
	.tsv-sec__head { flex-direction: column; align-items: flex-start; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title { min-height: 0; }
}

/* =========================================================
   16. Astra 容器复位（务必保持在文件最后）
   ---------------------------------------------------------
   Astra 会注入 `.site-content .ast-container{display:flex}`，
   把我们区块里的容器变成横向 flex，导致内容被压成窄列。
   这里用更高特异性（3 个类）强制复位成块级容器。
   ========================================================= */
.site-content .tsv-sec > .ast-container,
.site-content .tsv-block > .ast-container,
.site-content section.tsv-sec > .ast-container {
	display: block;
	flex-direction: initial;
	flex-wrap: initial;
	width: 100%;
	max-width: var(--tsv-wrap);
	margin-left: auto;
	margin-right: auto;
}

/* 区块内的标题行与内容块恢复正常的整行宽度 */
.site-content .tsv-sec > .ast-container > * { width: 100%; }

/* =========================================================
   17. 商品卡 CTA（替代 Astra 悬停图标按钮）
   ========================================================= */
ul.products li.product .ast-on-card-button { display: none !important; }

ul.products li.product .astra-shop-summary-wrap {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.tsv-card-cta {
	display: block;
	margin: 12px 0 0;
	padding: 10px 12px;
	text-align: center;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: #fff;
	background: var(--tsv-ink);
	border-radius: var(--tsv-r);
	text-decoration: none;
	margin-top: auto;
	transition: background-color .15s ease;
}

.tsv-card-cta:hover,
.tsv-card-cta:focus {
	background: var(--tsv-red);
	color: #fff;
}

/* =========================================================
   18. 全站取消侧边栏 + 收敛容器内边距
   ---------------------------------------------------------
   Astra 当前布局是「左侧栏」，商品网格被压到 990px；
   容器内边距变量又被设成 6.67em（≈107px），再压到 777px，
   5 列商品卡每张只剩 142px。批发站要的是满屏商品墙。
   ========================================================= */
.site-content .ast-container { display: block !important; }

.site-content .content-area,
.site-content .content-area.primary,
.site-content .ast-left-sidebar .content-area,
.site-content .ast-right-sidebar .content-area,
.site-content .ast-both-sidebar .content-area {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	flex: 1 1 100% !important;
}

.ast-woocommerce-container {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

#secondary,
.site-content #secondary.widget-area {
	display: none !important;
}

/* =========================================================
   19. 商品归档页（商店 / 分类）
   ---------------------------------------------------------
   Astra 的 separate-container 把归档内容包成一张 1320px 的白卡片，
   坐在 #f5f7f9 灰底上，左右各露出 20px 灰边；页头 H1 走的是 Astra
   的流体字号 —— 实测 66px / 行高 92px，比全站任何标题都大一圈。
   这里统一成「满宽白底 + 34px 页头 + 真正的工具栏行结构」。
   ========================================================= */

.post-type-archive-product .site-content,
.tax-product_cat .site-content,
.tax-product_tag .site-content,
.single-product .site-content {
	background: var(--tsv-bg);
}

/* 内容区改成白底后，body 的 #f5f7f9 会在内容结束、页脚开始之间
   露出一条灰缝。整页背景一并转白。 */
.post-type-archive-product,
.tax-product_cat,
.tax-product_tag,
.single-product { background: var(--tsv-bg); }

.post-type-archive-product .ast-woocommerce-container,
.tax-product_cat .ast-woocommerce-container,
.tax-product_tag .ast-woocommerce-container {
	background: transparent !important;
	padding: 18px 0 60px !important;
}

/* 面包屑 */
.woocommerce-breadcrumb {
	font-size: 12px;
	line-height: 1.5;
	color: var(--tsv-hint);
	margin: 0;
	padding: 0;
}

.woocommerce-breadcrumb a { color: var(--tsv-muted); text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--tsv-red); }

/* 页头标题：Astra 的流体 h1 在 1905 视口下算到 66px，压回 34px */
.woocommerce-products-header { margin: 0; }

.woocommerce-products-header__title.page-title,
h1.page-title {
	font-size: 34px;
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: -.015em;
	margin: 10px 0 0;
}

/* 商店页简介（来自 Shop 页面正文）。
   注意：WooCommerce 原模板用 .term-description，Astra 换成了
   .page-description，两个都写上。 */
.woocommerce-products-header .term-description,
.woocommerce-products-header .page-description,
.term-description,
.page-description {
	font-size: 13.5px;
	line-height: 1.75;
	color: var(--tsv-muted);
	max-width: 780px;
	margin: 12px 0 0;
}

.term-description p,
.page-description p { margin: 0; }

/* 分类快捷条：只列有货的分类，把「空分类」这种死路挡在外面 */
.tsv-catchips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 20px 0 0;
}

.tsv-catchips a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	line-height: 1;
	padding: 9px 13px;
	border: 1px solid var(--tsv-line);
	border-radius: 999px;
	background: var(--tsv-bg);
	color: var(--tsv-ink-2);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.tsv-catchips a em {
	font-style: normal;
	font-size: 11.5px;
	color: var(--tsv-hint);
}

.tsv-catchips a:hover { border-color: var(--tsv-ink); color: var(--tsv-ink); }
.tsv-catchips a:hover em { color: var(--tsv-ink-2); }

.tsv-catchips a.is-active {
	background: var(--tsv-ink);
	border-color: var(--tsv-ink);
	color: #fff;
}

.tsv-catchips a.is-active em { color: #d1d5db; }

/* 计数 + 排序工具栏。WooCommerce 原本让两者各自浮动，高度不同、
   基线不齐，中间还夹着换行；这里改成一行两端对齐。 */
.tsv-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	flex-wrap: wrap;
	padding: 12px 0;
	margin: 26px 0 20px;
	border-top: 1px solid var(--tsv-line);
	border-bottom: 1px solid var(--tsv-line);
}

.tsv-toolbar__count { font-size: 13px; color: var(--tsv-muted); }
.tsv-toolbar__sort { margin: 0; }
.tsv-toolbar .woocommerce-result-count { margin: 0; padding: 0; float: none; }
.tsv-toolbar .woocommerce-ordering { margin: 0; float: none; }

/* 商品少的时候不要铺满 5 列 —— 2 个商品占 5 列，右边会空出 3 整列
   （1905 视口下约 780px 的空白）。

   特异性要压过 Astra 的
   `.woocommerce ul.products:not(.elementor-grid).columns-5`（0,4,1），
   所以这里挂上 .ast-woocommerce-container 把它抬到 (0,4,2)。
   只作用在商品归档页，避免影响首页的 [products] 区块。 */
@media (min-width: 1201px) {
	.post-type-archive-product .ast-woocommerce-container ul.products:not(:has(> li:nth-child(5))),
	.tax-product_cat .ast-woocommerce-container ul.products:not(:has(> li:nth-child(5))) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* 只剩 1–2 个商品时，两张卡贴着左边会像「栅格坏了」。
	   改成两列定宽居中，读起来像刻意做的精选位。 */
	.post-type-archive-product .ast-woocommerce-container ul.products:not(:has(> li:nth-child(3))),
	.tax-product_cat .ast-woocommerce-container ul.products:not(:has(> li:nth-child(3))) {
		grid-template-columns: repeat(2, minmax(0, 400px));
		justify-content: center;
	}

	/* 只剩 1 个：两列轨道会把它留在偏左的轨道里，改单列才真正居中 */
	.post-type-archive-product .ast-woocommerce-container ul.products:not(:has(> li:nth-child(2))),
	.tax-product_cat .ast-woocommerce-container ul.products:not(:has(> li:nth-child(2))) {
		grid-template-columns: minmax(0, 400px);
		justify-content: center;
	}

	.post-type-archive-product .ast-woocommerce-container ul.products:not(:has(> li:nth-child(5))) li.product img,
	.tax-product_cat .ast-woocommerce-container ul.products:not(:has(> li:nth-child(5))) li.product img {
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 640px) {
	.woocommerce-products-header__title.page-title,
	h1.page-title { font-size: 26px; }

	.tsv-catchips { gap: 6px; }
	.tsv-catchips a { font-size: 12px; padding: 8px 11px; }
	.tsv-toolbar { margin: 20px 0 16px; }
}

/* =========================================================
   20. 正文 / 页脚邮箱链接
   ---------------------------------------------------------
   由 functions.php 的 render_block 过滤器自动包成 <a href="mailto:">，
   这里只负责外观：跟周围文字同色 + 一条细下划线。
   不这样做的话，Astra 默认会给它一段亮蓝（ast-global-color-0 = #0084d6），
   在深红+墨黑的主色系里很突兀，而且邮箱本来就不该是第二种强调色。
   ========================================================= */
a.tsv-mailto {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid;
	transition: color .15s ease;
}

a.tsv-mailto:hover,
a.tsv-mailto:focus {
	color: var(--tsv-red);
}

/* 下划线跟着字色走：border-color 不写就是 currentColor，
   所以悬停变红时下划线会一起变红，不用另外声明。 */

/* 联系卡里邮箱是整块的主角（h5，字号大），下划线加粗一档才压得住 */
h1 a.tsv-mailto,
h2 a.tsv-mailto,
h3 a.tsv-mailto,
h4 a.tsv-mailto,
h5 a.tsv-mailto,
h6 a.tsv-mailto {
	border-bottom-width: 2px;
}

/* 页脚这栏的文字是白色（p 实测 rgb(255,255,255)），链接必须跟着白，
   否则就是「#333 印在 #111827 上」——跟第 14 节那行大字同一个坑。
   Astra 页脚构建器是内联输出的，规则长这样：
     .footer-widget-area[data-section="sidebar-widgets-footer-widget-3"]
       .footer-widget-area-inner a { color: var(--ast-global-color-3) }
   权重 (0,3,1)，比 `.site-footer a.tsv-mailto` 的 (0,2,1) 高，
   而它内联在前、我们的表在后 —— 平手也轮不到我们，只能上 !important。 */
.site-footer a.tsv-mailto { color: #fff !important; }

.site-footer a.tsv-mailto:hover,
.site-footer a.tsv-mailto:focus { color: #fca5a5 !important; }


/* =========================================================
   21. 内页横幅（照片背景 + 居中白字大标题）
   ---------------------------------------------------------
   对齐 Contact Us 页自带区块横幅的实测几何（1905 视口）：
     落地高度 396px = 上下内边距 152px x2 + 行高 92px
     标题 66px / 700 / #fff / 居中，黑色遮罩 50%
   两处横幅因此肉眼无差 —— 那边是 Spectra 区块，这边是主题钩子。

   横幅由 functions.php 第 21 节的 tsv_render_page_banner() 输出，
   挂在 astra_header_after（在 .ast-container 之外），所以这里
   不需要任何 100vw / 负边距的通栏 hack。
   ========================================================= */
.tsv-banner {
	position: relative;
	background-color: #0f2337;      /* 图没解码出来时的兜底深色，避免白闪 */
	background-size: cover;
	background-position: 50% 0%;
	background-repeat: no-repeat;
	padding: 152px 0;
	text-align: center;
	overflow: hidden;
}

/* 遮罩单独一层：以后想调暗/调亮只动这一个值，不碰背景图 */
.tsv-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .5);
	pointer-events: none;
}

.tsv-banner__in {
	position: relative;
	z-index: 1;
	max-width: var(--tsv-wrap);
	margin: 0 auto;
	padding: 0 20px;
}

.tsv-banner__t {
	margin: 0;
	font-size: 66px;
	line-height: 1.4;
	font-weight: 700;
	color: #fff;
	letter-spacing: -.01em;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .28);
}

/* 有横幅的页面必须撤掉 Astra 那行重复标题，否则一个页面两个 H1。
   普通页面在 .entry-header 里，商品归档在 .woocommerce-products-header 里，
   两处都要写。 */
body.tsv-has-banner .entry-header { display: none; }

body.tsv-has-banner .woocommerce-products-header__title.page-title { display: none; }

/* 归档页的面包屑紧贴横幅下沿，而它写的正是横幅上那行字，重复且抢位。 */
body.tsv-has-banner .woocommerce-breadcrumb { display: none; }

/* 去掉 H1 之后归档头会顶到横幅边上，补回一点呼吸 */
body.tsv-has-banner .woocommerce-products-header { padding-top: 6px; }

/* 响应式：152px 内边距 + 66px 字号原样搬到手机上会吃掉整屏 */
@media (max-width: 1199px) {
	.tsv-banner { padding: 116px 0; }
	.tsv-banner__t { font-size: 50px; }
}

@media (max-width: 921px) {
	.tsv-banner { padding: 84px 0; }
	.tsv-banner__t { font-size: 38px; }
}

@media (max-width: 544px) {
	.tsv-banner { padding: 60px 0; }
	.tsv-banner__t { font-size: 27px; letter-spacing: 0; }
}


/* =========================================================
   22. About 页正文容器（顺带修掉一个老毛病）
   ---------------------------------------------------------
   About(59) 和 Contact(60) 是仅有的两个「页面构建器模板」页面
   （ast-page-builder-template），Astra 不给它们输出 .ast-container。
   Contact 的正文全是 Spectra 区块，自带内层宽度，看不出问题；
   About 的正文是普通 Gutenberg 段落 —— 实测 .entry-content 宽
   1890px、左右内边距 0，一行 200 多个字符，横跨整个屏幕。
   这里补一个居中的正文列，并给顶部留出与横幅之间的呼吸。
   （不影响 Contact：那条规则只认 page-id-59。）
   ========================================================= */
body.page-id-59 .entry-content {
	max-width: 980px;
	margin: 0 auto;
	padding: 40px 20px 64px;
}

body.page-id-59 .entry-content > * { max-width: 100%; }


/* =========================================================
   23. 首页视觉密度升级
   ---------------------------------------------------------
   问题：首页九个区块全是 46px 内边距 + 22px 同号标题 + 1px 描边卡片，
   标题一样粗、卡片一样浅、底色在白 / #f9fafb 之间来回，滚下来一片糊，
   没有视觉锚点。

   三条对策：
   ① 每个区块标题前面加一行小字（kicker）：小字 + 粗标题 + 说明，
      三段节奏替代「一排同粗细标题」；
   ② 中段「Why buyers work with us」整块翻成深色，数字放大到 40px ——
      页面中段有个硬锚点，不再是九块浅色平铺；
   ③ 收尾 CTA 铺一张鞋墙照片 + 深色罩，给页面一个明确的结束动作。

   ⚠️ 全部视觉改动都锁在 body.page-id-61（首页）。
   oem-odm(3512) 和 dropshipping(3511) 也在用 .tsv-sec 和同样的
   46px 节奏，不锁页面的话会把那两个长页一起改掉。
   ========================================================= */

/* 23.1 区块小标（kicker）—— 放在哪算哪，不属于任何单页面 */
.tsv-sec__kicker {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 9px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--tsv-red);
}

/* 小标前面那小截红线：把标题和上方的留白分开，比纯文字小标更有形 */
.tsv-sec__kicker::before {
	content: "";
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: var(--tsv-red);
	flex: 0 0 auto;
}

/* 深色底上的小标：红字压在深蓝上对比不足，换亮红 */
.tsv-sec__kicker--dark { color: #ff8199; }
.tsv-sec__kicker--dark::before { background: #ff8199; }

/* 23.2 首页区块节奏：留白放宽，标题放大 */
body.page-id-61 .tsv-sec { padding: 60px 0; }
body.page-id-61 .tsv-sec__head { margin-bottom: 26px; }
body.page-id-61 .tsv-sec__t { font-size: 28px; letter-spacing: -.02em; }
body.page-id-61 .tsv-sec__d { font-size: 14px; }

/* 23.3 浅色栅格卡片（OEM 四格）
   原来是内联的 1px #e5e7eb 描边 —— 白卡描在 #f9fafb 底上几乎看不见边，
   看着就是四块没有边界的文字。改成白卡 + 极浅投影 + 悬停抬起。 */
.tsv-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--tsv-gap);
}

.tsv-tile {
	background: var(--tsv-bg);
	border: 1px solid var(--tsv-line);
	border-radius: 12px;
	padding: 22px;
	box-shadow: 0 1px 2px rgba(15, 32, 50, .04);
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.tsv-tile:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(15, 32, 50, .10);
	border-color: #d8dde5;
}

.tsv-tile__t { font-size: 15px; font-weight: 600; color: var(--tsv-ink); margin: 0 0 7px; }
.tsv-tile__d { font-size: 13px; line-height: 1.65; color: var(--tsv-muted); margin: 0; }

/* 23.4 深色数据带（Why buyers work with us） */
.tsv-band {
	position: relative;
	background-color: #0f2337;
	overflow: hidden;
}

/* 两团柔光：左上偏冷、右下偏红，让纯色面有纵深，不至于是一块死蓝 */
.tsv-band::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(900px 380px at 12% -10%, rgba(94, 146, 196, .28), rgba(15, 35, 55, 0) 70%),
		radial-gradient(700px 320px at 92% 108%, rgba(200, 16, 46, .20), rgba(15, 35, 55, 0) 70%);
}

/* 极淡 135° 斜纹：深色大面上加一层"布纹"，肉眼几乎看不出，
   但和纯色相比不会那么像没加载完的背景 */
.tsv-band::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .5;
	background-image: repeating-linear-gradient(
		135deg,
		rgba(255, 255, 255, .035) 0 2px,
		rgba(255, 255, 255, 0) 2px 12px
	);
}

.tsv-band > .ast-container { position: relative; z-index: 2; }
.tsv-band .tsv-sec__t { color: #fff; }
.tsv-band .tsv-sec__d { color: #9db0c2; }

/* 数据卡：半透明玻璃片，顶部一道红条。原来这四张是白底 1px 描边，
   在白底区块里根本看不出是卡片。 */
.tsv-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--tsv-gap);
	margin-bottom: 26px;
}

.tsv-stat {
	position: relative;
	padding: 26px 22px 22px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .055);
	border: 1px solid rgba(255, 255, 255, .12);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
	transition: background .2s ease, transform .2s ease, border-color .2s ease;
}

.tsv-stat::before {
	content: "";
	position: absolute;
	left: 22px;
	top: 0;
	width: 34px;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: var(--tsv-red);
}

.tsv-stat:hover {
	background: rgba(255, 255, 255, .10);
	border-color: rgba(255, 255, 255, .22);
	transform: translateY(-2px);
}

.tsv-stat__n {
	display: block;
	margin-bottom: 8px;
	font-size: 40px;
	line-height: 1.05;
	font-weight: 600;
	letter-spacing: -.03em;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.tsv-stat__l { display: block; font-size: 13px; line-height: 1.5; color: #a7b8c9; }

/* 引语卡：深底上放白卡，页面的第三个视觉层次 */
.tsv-quotes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--tsv-gap);
}

.tsv-quote {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 22px 22px 20px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(3, 12, 22, .22);
}

/* 引号用真引号字符而不是写死在正文里：换语种 / 改文案都不会漏一个引号 */
.tsv-quote__t { margin: 0 0 14px; font-size: 13.5px; line-height: 1.8; color: #374151; }

.tsv-quote__t::before {
	content: "\201C";
	display: block;
	margin-bottom: 6px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 40px;
	line-height: .6;
	color: var(--tsv-red);
	opacity: .3;
}

.tsv-quote__a {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--tsv-line-2);
	font-size: 12px;
	color: var(--tsv-muted);
}

.tsv-quote__a::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tsv-red);
	flex: 0 0 auto;
}

.tsv-quote__who { font-weight: 500; color: var(--tsv-ink-2); }

/* 23.5 收尾 CTA：鞋墙照片 + 深色罩
   原来是一块 #f9fafb 灰底加两行字，页面到这里没有"结束感"。
   照片用的是首页 hero 那张鞋墙（同一张图的两种用法：hero 里清晰展示，
   这里压深当纹理底），不额外增加素材。 */
.tsv-cta {
	position: relative;
	text-align: center;
	overflow: hidden;
	background-color: #0f2337;
	background-image: url("https://topshoevendor.com/wp-content/uploads/2026/09/hero-wholesale-shoes.jpg");
	background-repeat: no-repeat;
	background-position: 50% 38%;
	background-size: cover;
}

.tsv-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	/* 两层：外圈压深让鞋墙还能看出是鞋，中心再压一层保证白字对比度。
	   只留线性层的话文字正好落在鞋面上，#fff 压在中间调灰上只有 3:1 左右。 */
	background:
		radial-gradient(780px 300px at 50% 58%, rgba(8, 18, 30, .74), rgba(8, 18, 30, 0) 72%),
		linear-gradient(180deg, rgba(9, 20, 33, .92), rgba(9, 20, 33, .82));
}

/* CTA 是窄栏居中版式，但第 16 节有一条
   `.site-content .tsv-sec > .ast-container { max-width: 1400px; width:100% }`（0,3,0），
   比这里的 (0,2,0) 高，所以 max-width 必须用 (0,4,0) 写回来，否则容器还是 1400 宽。
   同一条规则里的 `> * { width: 100% }` 还会把行内的 .tsv-sec__kicker 撑满整行 ——
   盒子占满一行，里面的文字就贴左边了，所以小标要单独把 width 收回去。 */
.site-content .tsv-sec.tsv-cta > .ast-container {
	position: relative;
	z-index: 2;
	display: block;
	max-width: 780px;
	margin-left: auto;
	margin-right: auto;
}

.site-content .tsv-sec.tsv-cta > .ast-container > .tsv-sec__kicker { width: auto; }

.tsv-cta__t {
	margin: 0 0 12px;
	font-size: 30px;
	line-height: 1.28;
	font-weight: 600;
	letter-spacing: -.02em;
	color: #fff;
}

.tsv-cta__d { margin: 0 0 26px; font-size: 14.5px; line-height: 1.75; color: #c9d6e2; }
.tsv-cta__btns { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* 深底上的描边按钮（.tsv-btn--ghost 是白底黑框，压在照片上看不见） */
.tsv-btn--onDark {
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, .55) !important;
	color: #fff !important;
}

.tsv-btn--onDark:hover {
	background: #fff !important;
	border-color: #fff !important;
	color: var(--tsv-ink) !important;
}

/* 23.6 FAQ 折叠块：从"一条细线框"改成白卡
   原来五个 details 各自 1px 描边、紧挨着排，看着像一张表格而不是卡片列表。
   所属区块已切到 tsv-sec--alt（浅灰），白卡才有边界感。 */
.tsv-faq {
	background: var(--tsv-bg);
	border: 1px solid var(--tsv-line);
	border-radius: 12px;
	padding: 16px 20px;
	margin-bottom: 10px;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.tsv-faq:hover { border-color: #d8dde5; }

.tsv-faq[open] {
	border-color: #d8dde5;
	box-shadow: 0 8px 24px rgba(15, 32, 50, .07);
}

.tsv-faq__q {
	font-size: 15px;
	font-weight: 600;
	color: var(--tsv-ink);
	cursor: pointer;
}

.tsv-faq__a {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.75;
	color: var(--tsv-muted);
}

/* 23.7 响应式 */
@media (max-width: 1080px) {
	.tsv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tsv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tsv-quotes { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	body.page-id-61 .tsv-sec { padding: 44px 0; }
	body.page-id-61 .tsv-sec__t { font-size: 23px; }
	.tsv-tiles { grid-template-columns: 1fr; }
	.tsv-stats { gap: 12px; }
	.tsv-stat { padding: 20px 16px 18px; }
	.tsv-stat::before { left: 16px; }
	.tsv-stat__n { font-size: 30px; }
	.tsv-cta__t { font-size: 23px; }
}


/* =========================================================
   24. 首页浅色化改版（深色底全部换掉）
   ---------------------------------------------------------
   反馈：整页深色（顶栏 #111827、Hero #0f2337 + 光晕、数据带 #0f2337、
   CTA 深照片罩），要求换浅色系，同时把「鞋子生产批发」的定位顶出来。

   思路：不用死白。女鞋属于时尚类目，纯白打底会像后台界面，
   所以浅色区统一走「暖白 → 米色」的暖调，靠细边框 + 柔阴影 + 白卡
   建立层次，而不是靠明暗对比。

   ⚠️ 24.1 顶栏是全局的（每个页面都有）；其余全部锁 body.page-id-61。
   ========================================================= */

/* ---- 24.1 顶栏：深墨底 → 白底细线 ---- */
.tsv-topbar {
	background: var(--tsv-bg);
	color: var(--tsv-muted);
	border-bottom: 1px solid var(--tsv-line);
}

.tsv-topbar a { color: var(--tsv-ink-2); }
.tsv-topbar a:hover { color: var(--tsv-red); }
.tsv-topbar__sep { color: #d1d5db; }
.tsv-topbar__wa { color: #0f766e; }

/* ---- 24.2 Hero：深蓝 + 光晕 → 暖白渐变 + 极淡网格 ---- */
body.page-id-61 .tsv-hero {
	background-color: #fbfaf8;
	background-image:
		radial-gradient(880px 500px at 88% 4%, rgba(200, 16, 46, .07), transparent 62%),
		radial-gradient(760px 460px at 4% 100%, rgba(24, 95, 165, .07), transparent 60%),
		linear-gradient(180deg, #fdfcfa 0%, #f6f2ec 100%);
	color: var(--tsv-ink);
}

/* 54px 细网格：给浅色大面一点内容感，否则是一片没有信息的米白。
   用 mask 让网格在下沿渐隐，避免线条到 Hero 底部突然被切断。 */
body.page-id-61 .tsv-hero::before {
	background-image:
		linear-gradient(rgba(17, 24, 39, .032) 1px, transparent 1px),
		linear-gradient(90deg, rgba(17, 24, 39, .032) 1px, transparent 1px);
	background-size: 54px 54px;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .3) 70%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .3) 70%, transparent 100%);
}

body.page-id-61 .tsv-hero__in { padding-bottom: 40px; }

body.page-id-61 .tsv-hero__eyebrow {
	color: var(--tsv-red);
	background: rgba(200, 16, 46, .07);
	border-color: rgba(200, 16, 46, .22);
}

body.page-id-61 .tsv-hero__eyebrow::before {
	background: var(--tsv-red);
	box-shadow: 0 0 0 3px rgba(200, 16, 46, .14);
}

body.page-id-61 .tsv-hero__h1 { color: var(--tsv-ink); }
body.page-id-61 .tsv-hero__p { color: var(--tsv-muted); }

/* 主视觉：浅底上用原来的冷黑投影会发脏，换成暖调柔影 */
body.page-id-61 .tsv-hero__media img {
	border: 1px solid rgba(17, 24, 39, .06);
	box-shadow: 0 24px 56px rgba(60, 42, 28, .16), 0 2px 6px rgba(60, 42, 28, .05);
}

body.page-id-61 .tsv-hero__badge {
	color: var(--tsv-ink);
	background: rgba(255, 255, 255, .92);
	border-color: rgba(17, 24, 39, .1);
	box-shadow: 0 4px 14px rgba(60, 42, 28, .12);
}

/* 指标条：从「深底上的分隔线」改成四张白卡 */
body.page-id-61 .tsv-hero__stats {
	border-top: 0;
	gap: 14px;
	padding-bottom: 52px;
}

body.page-id-61 .tsv-hero__stat {
	padding: 20px 22px 18px;
	background: var(--tsv-bg);
	border: 1px solid var(--tsv-line);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15, 32, 50, .04);
}

body.page-id-61 .tsv-hero__stat:first-child {
	border-left: 1px solid var(--tsv-line);
	padding-left: 22px;
}

body.page-id-61 .tsv-hero__stat b { font-size: 30px; color: var(--tsv-ink); }
body.page-id-61 .tsv-hero__stat span { color: var(--tsv-muted); }

/* ---- 24.3 「全部款式」深色卡 → 浅色描边卡 ---- */
.tsv-catcard--all { background: var(--tsv-bg); border-color: var(--tsv-line); }
.tsv-catcard--all .tsv-catcard__media { background: #fdf7f8; }

.tsv-catcard--all .tsv-catcard__ph {
	background:
		repeating-linear-gradient(135deg, rgba(200, 16, 46, .05) 0 14px, rgba(200, 16, 46, 0) 14px 28px),
		#fdf7f8;
}

.tsv-catcard--all .tsv-catcard__t { color: var(--tsv-ink); }
.tsv-catcard--all .tsv-catcard__d { color: var(--tsv-muted); }
.tsv-catcard--all .tsv-catcard__go { color: var(--tsv-red); }

.tsv-catcard--all:hover {
	border-color: var(--tsv-red);
	box-shadow: 0 10px 26px rgba(15, 32, 50, .1);
}

/* ---- 24.4 数据带：深蓝大面 → 暖米浅带 + 白卡 ---- */
body.page-id-61 .tsv-band {
	background-color: #f7f3ee;
	background-image: linear-gradient(180deg, #fbf8f4 0%, #f1ebe3 100%);
	border-top: 1px solid var(--tsv-line);
	border-bottom: 1px solid var(--tsv-line);
}

body.page-id-61 .tsv-band::before {
	background:
		radial-gradient(900px 380px at 12% -10%, rgba(200, 16, 46, .06), rgba(247, 243, 238, 0) 70%),
		radial-gradient(700px 320px at 92% 108%, rgba(24, 95, 165, .07), rgba(247, 243, 238, 0) 70%);
}

/* 斜纹原来是白色半透明（深底上才看得见），浅底要翻成深色半透明 */
body.page-id-61 .tsv-band::after {
	background-image: repeating-linear-gradient(
		135deg,
		rgba(17, 24, 39, .028) 0 2px,
		rgba(17, 24, 39, 0) 2px 12px
	);
}

body.page-id-61 .tsv-band .tsv-sec__t { color: var(--tsv-ink); }
body.page-id-61 .tsv-band .tsv-sec__d { color: var(--tsv-muted); }

body.page-id-61 .tsv-stat {
	background: var(--tsv-bg);
	border: 1px solid var(--tsv-line);
	box-shadow: 0 1px 2px rgba(15, 32, 50, .04);
}

body.page-id-61 .tsv-stat:hover {
	background: var(--tsv-bg);
	border-color: #d8dde5;
	box-shadow: 0 14px 30px rgba(15, 32, 50, .09);
}

body.page-id-61 .tsv-stat__n { color: var(--tsv-ink); }
body.page-id-61 .tsv-stat__l { color: var(--tsv-muted); }

body.page-id-61 .tsv-quote {
	border: 1px solid var(--tsv-line);
	box-shadow: 0 1px 2px rgba(15, 32, 50, .05);
}

/* ---- 24.5 收尾 CTA：深照片罩 → 浅照片罩（照片留作纹理） ---- */
body.page-id-61 .tsv-cta {
	background-color: #f7f3ee;
}

/* 鞋墙照片仍做底纹，但压成浅色：文字是深墨，对比度反而比原来的白字更高。
   外层线性 + 中心径向双层，保证照片透出来但文字区足够干净。 */
body.page-id-61 .tsv-cta::before {
	background:
		radial-gradient(760px 320px at 50% 56%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .66) 74%),
		linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(250, 247, 243, .93));
}

body.page-id-61 .tsv-cta__t { color: var(--tsv-ink); }
body.page-id-61 .tsv-cta__d { color: var(--tsv-muted); }

/* 副按钮原来是「深底描边白字」，现在没有深底了，翻成白底墨框 */
body.page-id-61 .tsv-btn--onDark {
	background: var(--tsv-bg) !important;
	border-color: var(--tsv-ink) !important;
	color: var(--tsv-ink) !important;
}

body.page-id-61 .tsv-btn--onDark:hover {
	background: var(--tsv-ink) !important;
	border-color: var(--tsv-ink) !important;
	color: #fff !important;
}

/* ---- 24.6 小标深色变体：页面已无深色底，统一回红（内容里也去掉了该类） ---- */
body.page-id-61 .tsv-sec__kicker--dark { color: var(--tsv-red); }
body.page-id-61 .tsv-sec__kicker--dark::before { background: var(--tsv-red); }

/* ---- 24.7 工厂区块（新增版面）：左车间照 + 右四步生产流程 ---- */
.tsv-factory__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
	gap: 44px;
	align-items: center;
}

.tsv-factory__media { position: relative; margin: 0; }

.tsv-factory__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1536 / 937;
	object-fit: cover;
	border-radius: 14px;
	border: 1px solid rgba(17, 24, 39, .06);
	box-shadow: 0 24px 52px rgba(60, 42, 28, .15), 0 2px 6px rgba(60, 42, 28, .05);
}

.tsv-factory__cap {
	position: absolute;
	left: 14px;
	bottom: 14px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 13px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	color: var(--tsv-ink);
	background: rgba(255, 255, 255, .92);
	border: 1px solid rgba(17, 24, 39, .08);
	box-shadow: 0 4px 14px rgba(60, 42, 28, .12);
}

.tsv-factory__cap::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tsv-red);
	flex: 0 0 auto;
}

.tsv-steps {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tsv-step {
	position: relative;
	display: flex;
	gap: 16px;
	padding-bottom: 22px;
}

.tsv-step:last-child { padding-bottom: 0; }

/* 序号之间的连接竖线：四步要读起来像一条流程，而不是四条并列的说明 */
.tsv-step::before {
	content: "";
	position: absolute;
	left: 17px;
	top: 34px;
	bottom: 0;
	width: 1px;
	background: var(--tsv-line);
}

.tsv-step:last-child::before { display: none; }

.tsv-step__n {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--tsv-bg);
	border: 1px solid var(--tsv-line);
	color: var(--tsv-red);
	font-size: 12.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.tsv-step__b { display: block; padding-top: 2px; }
.tsv-step__b b { display: block; font-size: 15px; font-weight: 600; color: var(--tsv-ink); margin-bottom: 5px; }
.tsv-step__b span { display: block; font-size: 13.5px; line-height: 1.7; color: var(--tsv-muted); }

/* ---- 24.8 两栏分区块（代发）+ 四宫格指标 ---- */
.tsv-split {
	display: grid;
	grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
	gap: 44px;
	align-items: center;
}

.tsv-split__t {
	font-size: 28px;
	line-height: 1.3;
	font-weight: 600;
	color: var(--tsv-ink);
	margin: 0 0 14px;
	letter-spacing: -.02em;
}

.tsv-split__d { font-size: 15px; line-height: 1.75; color: var(--tsv-muted); margin: 0 0 24px; }
.tsv-split__btns { display: flex; gap: 12px; flex-wrap: wrap; }

.tsv-quad {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.tsv-quad__i {
	background: var(--tsv-bg);
	border: 1px solid var(--tsv-line);
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 1px 2px rgba(15, 32, 50, .04);
}

.tsv-quad__i b {
	display: block;
	font-size: 22px;
	font-weight: 600;
	color: var(--tsv-ink);
	letter-spacing: -.02em;
}

.tsv-quad__i span { display: block; margin-top: 3px; font-size: 12px; color: var(--tsv-muted); }

/* 锁首页：oem-odm / dropshipping 也在用 .tsv-sec，浅色调只给首页 */
body.page-id-61 .tsv-sec--alt { background: #f8f6f3; }

/* ---- 24.9 响应式 ---- */
@media (max-width: 1080px) {
	.tsv-factory__grid,
	.tsv-split { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}

@media (max-width: 992px) {
	body.page-id-61 .tsv-hero__stat:first-child,
	body.page-id-61 .tsv-hero__stat:nth-child(odd) {
		border-left: 1px solid var(--tsv-line);
		padding-left: 20px;
	}

	body.page-id-61 .tsv-hero__stat:nth-child(3),
	body.page-id-61 .tsv-hero__stat:nth-child(4) {
		border-top: 1px solid var(--tsv-line);
	}
}

@media (max-width: 640px) {
	body.page-id-61 .tsv-hero__stat { padding: 16px 16px 14px; }
	body.page-id-61 .tsv-hero__stat:first-child,
	body.page-id-61 .tsv-hero__stat:nth-child(odd) { padding-left: 16px; }
	body.page-id-61 .tsv-hero__stat b { font-size: 24px; }
	.tsv-split__t { font-size: 23px; }
	.tsv-quad { gap: 10px; }
	.tsv-quad__i { padding: 16px; }
	.tsv-step__n { width: 30px; height: 30px; }
	.tsv-step::before { left: 15px; top: 30px; }
}

/* ---- 24.10 首页透明页头：白字 → 深墨 ----
   首页开着 Astra 透明页头（ast-theme-transparent-header），页头叠在 Hero 上，
   文字一直是白色 —— 那是配原来深蓝 Hero 的。Hero 换成暖白之后，
   白字直接糊在浅色底上，实测对比度不足 1.2:1，等于看不见。

   这里两层处理：
   ① 页头给一层半透明白，和 Hero 的暖白拉开一点层次；
   ② 页头内所有前景色压回深墨 —— 用 #masthead 提权，
      因为 Astra 那条透明页头配色规则是 (1,3,0)，普通类选择器赢不了它。
   ---- */
body.page-id-61.ast-theme-transparent-header .ast-primary-header-bar {
	background-color: rgba(255, 255, 255, .86) !important;
}

body.page-id-61.ast-theme-transparent-header #masthead,
body.page-id-61.ast-theme-transparent-header #masthead a,
body.page-id-61.ast-theme-transparent-header #masthead .site-title a,
body.page-id-61.ast-theme-transparent-header #masthead .menu-link,
body.page-id-61.ast-theme-transparent-header #masthead .ast-header-account-text,
body.page-id-61.ast-theme-transparent-header #masthead .ast-addon-cart-wrap,
body.page-id-61.ast-theme-transparent-header #masthead .ast-woo-header-cart-info-wrap,
body.page-id-61.ast-theme-transparent-header #masthead .ast-woo-header-cart-total,
body.page-id-61.ast-theme-transparent-header #masthead .astra-icon,
body.page-id-61.ast-theme-transparent-header #masthead .ast-header-custom-item,
body.page-id-61.ast-theme-transparent-header #masthead .ast-header-custom-item a {
	color: var(--tsv-ink) !important;
}

/* 页头里的 SVG 图标（购物车 / 账户）跟着文字色走 */
body.page-id-61.ast-theme-transparent-header #masthead svg {
	fill: currentColor;
}