/* ==========================================================================
   Sunrise Home Textiles — 视觉层
   配色: 深松绿 + 陶土橙 + 暖砂白, 用于家居纺织品的 B2B 画册场景
   ========================================================================== */

:root {
	--sr-ink: #12312e;
	--sr-ink-2: #1c4642;
	--sr-clay: #c0723f;
	--sr-clay-dark: #a15c2f;
	--sr-sand: #f7f3ec;
	--sr-sand-2: #efe8dc;
	--sr-text: #23211e;
	--sr-muted: #6d7975;
	--sr-line: #e3dacd;
	--sr-white: #ffffff;
	--sr-radius: 14px;
	--sr-maxw: 1200px;
	--sr-shadow: 0 1px 2px rgba(18, 49, 46, .04), 0 12px 32px rgba(18, 49, 46, .08);
}

/* ---------- 基础排版 ---------- */

body,
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--sr-text);
}

h1, h2, h3, h4,
.entry-title,
.ast-single-post .entry-title {
	font-family: "Fraunces", Georgia, "Times New Roman", serif;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--sr-ink);
}

a { color: var(--sr-clay-dark); }
a:hover { color: var(--sr-clay); }

.sr-eyebrow {
	display: inline-block;
	font-family: "Inter", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sr-clay);
	margin-bottom: 14px;
}

/* ---------- 通用按钮 ---------- */

.sr-btn,
.sr-quote-btn,
.sr-submit,
button.sr-submit,
a.sr-btn {
	display: inline-block;
	font-family: "Inter", sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1;
	padding: 15px 28px;
	border-radius: 999px;
	border: 1px solid var(--sr-clay);
	background: var(--sr-clay);
	color: #fff !important;
	text-decoration: none;
	transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.sr-btn:hover,
.sr-quote-btn:hover,
.sr-submit:hover,
a.sr-btn:hover {
	background: var(--sr-clay-dark);
	border-color: var(--sr-clay-dark);
	color: #fff;
	transform: translateY(-1px);
}

.sr-btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, .45);
	color: #fff !important;
}

.sr-btn--ghost:hover {
	background: rgba(255, 255, 255, .12);
	border-color: #fff;
}

.sr-btn--dark {
	background: var(--sr-ink);
	border-color: var(--sr-ink);
}

.sr-btn--dark:hover {
	background: var(--sr-ink-2);
	border-color: var(--sr-ink-2);
}

/* ---------- 版心 ---------- */

.sr-section {
	max-width: var(--sr-maxw);
	margin: 0 auto;
	padding: 76px 24px;
}

.sr-section--tight { padding-top: 48px; padding-bottom: 48px; }
.sr-section--sand { background: var(--sr-sand); max-width: none; }
.sr-section--sand > .sr-inner { max-width: var(--sr-maxw); margin: 0 auto; }
.sr-band { background: var(--sr-sand); }
.sr-band--ink { background: var(--sr-ink); }

.sr-section-head {
	max-width: 660px;
	margin-bottom: 46px;
}

.sr-section-head p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--sr-muted);
	margin: 12px 0 0;
}

.sr-section-head h2 { font-size: 38px; line-height: 1.18; margin: 0; }

/* ---------- 首屏 ---------- */

.sr-hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(120% 140% at 82% 12%, #2b6560 0%, rgba(43, 101, 96, 0) 55%),
		linear-gradient(150deg, #0f2b28 0%, #14332f 55%, #1d4a44 100%);
	color: #fff;
}

/* 织物质感的斜纹网格 */
.sr-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .5;
	background-image:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 7px),
		repeating-linear-gradient(0deg, rgba(0, 0, 0, .07) 0 2px, transparent 2px 7px);
}

.sr-hero-inner {
	position: relative;
	z-index: 2;
	max-width: var(--sr-maxw);
	margin: 0 auto;
	padding: 108px 24px 116px;
}

.sr-hero .sr-eyebrow { color: #e9b184; }

.sr-hero h1 {
	font-size: 56px;
	line-height: 1.08;
	color: #fff;
	margin: 0 0 22px;
	max-width: 15em;
}

.sr-hero .sr-lede {
	font-size: 18px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .78);
	max-width: 40em;
	margin: 0 0 34px;
}

.sr-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.sr-hero-facts {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	max-width: var(--sr-maxw);
	margin: 0 auto;
	padding: 0 24px 56px;
}

.sr-hero-facts span {
	font-size: 13px;
	letter-spacing: .05em;
	color: rgba(255, 255, 255, .6);
}

.sr-hero-facts strong {
	display: block;
	font-family: "Fraunces", serif;
	font-size: 22px;
	font-weight: 600;
	color: #fff;
	letter-spacing: 0;
	margin-bottom: 4px;
}

/* ---------- 首屏: 照片背景版 ---------- */

.sr-hero--photo {
	background-color: #0d2725;
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
}

/* 照片版不需要那层 CSS 织纹 */
.sr-hero--photo::after { display: none; }

/* 左侧压暗给文字让位, 底部再加一层让数据条可读 */
.sr-hero-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		/*
		 * 顶部深色一路渐变到底部米色。
		 * 用一串递进的色标做成缓入缓出的曲线（而不是两点直线），
		 * 否则深色区结束的地方会留下一条看得出来的折痕。
		 */
		linear-gradient(
			to top,
			rgba(247, 243, 236, 1) 0%,
			rgba(247, 243, 236, .97) 7%,
			rgba(247, 243, 236, .90) 15%,
			rgba(247, 243, 236, .78) 22%,
			rgba(247, 243, 236, .65) 30%,
			rgba(247, 243, 236, .50) 37%,
			rgba(247, 243, 236, .35) 44%,
			rgba(247, 243, 236, .22) 52%,
			rgba(247, 243, 236, .10) 59%,
			rgba(247, 243, 236, .03) 67%,
			rgba(247, 243, 236, 0) 74%
		),
		linear-gradient(
			100deg,
			rgba(9, 28, 26, .96) 0%,
			rgba(9, 28, 26, .90) 28%,
			rgba(9, 28, 26, .62) 48%,
			rgba(9, 28, 26, .20) 68%,
			rgba(9, 28, 26, 0) 86%
		);
}

.sr-hero--photo .sr-hero-inner { min-height: 520px; display: flex; flex-direction: column; justify-content: center; }
.sr-hero--photo .sr-hero-facts { padding-bottom: 84px; }

/* 首屏底部已经渐变到米色, 数据条换成深色字才看得清 */
.sr-hero--photo .sr-hero-facts span { color: var(--sr-muted); }
.sr-hero--photo .sr-hero-facts strong { color: var(--sr-ink); }

/* ---------- 两栏正文 ---------- */

.sr-two-col {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 44px;
}

.sr-two-col p:first-child { margin-top: 0; }

/* ---------- 产品页: 左侧竖排目录 + 右侧工作方式介绍 ---------- */

.sr-catalog-split {
	/* 五个按钮横排在上方, "工作方式" 接在下面 —— 与首页的排法一致 */
	display: block;
	margin: 8px 0 76px;
}

.sr-cat-index { position: static; }
.sr-cat-index__title { font-size: 38px; line-height: 1.18; margin: 12px 0 16px; max-width: 18em; }
.sr-cat-index__note { font-size: 16px; line-height: 1.6; color: var(--sr-muted); margin: 0; max-width: 46em; }
.sr-cat-index ul { list-style: none; margin: 0; padding: 0; }
.sr-cat-index li { margin: 0; }

/* 产品页的五条产品线: 沿用首页那套圆形按钮, 排成一横排 */
.sr-cat-index ul {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	/* 底部留出高低错落 + 选中态指向角的空间 */
	margin: 34px 0 62px;
}

/* 产品页顺序: 五个产品线按钮在最上面, "工作方式" 落到产品网格之后 */
.sr-cat-index { margin-top: 0; }
.sr-how { margin-top: 0; }
.sr-how--bottom { margin-top: 84px; padding-top: 64px; border-top: 1px solid var(--sr-line); }

/* ---------------------------------------------------------------------------
   商店页(/products/)改用与首页一致的"产品线切换器"，
   所以把 WooCommerce 自己那套整站网格和分页藏起来, 避免下面重复铺一遍。
   只作用于商店页(.post-type-archive-product), 分类归档页的网格不受影响。
   --------------------------------------------------------------------------- */
.post-type-archive-product ul.products,
.post-type-archive-product .woocommerce-pagination {
	/* 必须 !important: Astra 主题的 .woocommerce ul.products 权重相同且排在我们后面,
	   不加就会把 WooCommerce 那套整站网格又显示出来, 造成"点不点都出一堆产品" */
	display: none !important;
}

.sr-cat-index .sr-switch__btn--go { width: 100%; }

.sr-how h2 { font-size: 34px; line-height: 1.2; margin: 8px 0 16px; }
.sr-how .sr-steps { margin-top: 34px; }

/* 独立的"工作方式"区块: 左标题 + 右步骤 */
.sr-how-section h2 { font-size: 34px; line-height: 1.2; margin: 8px 0 16px; }
.sr-how-section .sr-steps { margin-top: 6px; }

@media (max-width: 980px) {
	.sr-how h2 { font-size: 27px; }
}

/* 窄屏: 五个按钮从一排退成多排 */
@media (max-width: 1000px) { .sr-cat-index ul { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 100px; } }
@media (max-width: 820px)  { .sr-cat-index ul { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 120px; } }
@media (max-width: 640px)  { .sr-cat-index ul { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 90px; } }

/* 首页的系列卡片: 六个 -> 3 列排成 3+3。
   用双类名提高权重 —— 否则会被后面 .sr-grid 的 auto-fit 规则覆盖。 */
.sr-grid.sr-grid--cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .sr-grid.sr-grid--cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sr-grid.sr-grid--cats { grid-template-columns: 1fr; } }

/* ---------- 分类卡片 ---------- */

.sr-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.sr-cat {
	position: relative;
	display: block;
	padding: 30px 26px 28px;
	background: var(--sr-white);
	border: 1px solid var(--sr-line);
	border-radius: var(--sr-radius);
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sr-cat:hover {
	transform: translateY(-3px);
	box-shadow: var(--sr-shadow);
	border-color: var(--sr-sand-2);
}

.sr-cat-mark {
	width: 42px;
	height: 42px;
	border-radius: 10px;
	margin-bottom: 18px;
	background: linear-gradient(135deg, var(--sr-ink) 0%, var(--sr-ink-2) 100%);
}

.sr-cat h3 {
	font-size: 21px;
	margin: 0 0 8px;
	color: var(--sr-ink);
}

.sr-cat p {
	font-size: 14.5px;
	line-height: 1.62;
	color: var(--sr-muted);
	margin: 0 0 16px;
}

.sr-cat span.sr-more {
	font-size: 13px;
	font-weight: 600;
	color: var(--sr-clay-dark);
}

/* ---------- 卖点 ---------- */

.sr-feature {
	padding: 28px 0 0;
	border-top: 2px solid var(--sr-ink);
}

.sr-feature h3 { font-size: 19px; margin: 0 0 10px; }
.sr-feature p { font-size: 14.5px; line-height: 1.68; color: var(--sr-muted); margin: 0; }

/* ---------- 行动条 ---------- */

.sr-cta {
	background: var(--sr-ink);
	color: #fff;
	border-radius: 18px;
	padding: 52px 48px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
}

.sr-cta h2 { color: #fff; font-size: 32px; margin: 0 0 10px; }
.sr-cta p { color: rgba(255, 255, 255, .72); margin: 0; max-width: 46em; font-size: 16px; line-height: 1.6; }

/* ---------- WooCommerce: 产品卡片 ---------- */

.woocommerce ul.products { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin: 0; }
.woocommerce ul.products li.product { width: 100% !important; margin: 0 !important; float: none !important; }

.woocommerce ul.products li.product .astra-shop-thumbnail-wrap,
.woocommerce ul.products li.product a img {
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 16px;
}

.woocommerce ul.products li.product img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--sr-sand-2);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: "Fraunces", serif;
	font-size: 18px !important;
	font-weight: 600;
	color: var(--sr-ink) !important;
	padding: 0 !important;
	margin-bottom: 6px !important;
	line-height: 1.35;
}

.woocommerce ul.products li.product .sr-quote-btn {
	margin-top: 12px;
	padding: 11px 20px;
	font-size: 13px;
	border-radius: 999px;
}

/* 隐藏 Astra 在产品图上的悬浮按钮 (Read more) */
.woocommerce ul.products li.product .ast-on-card-button,
.ast-on-card-button,
.ast-quick-view-trigger {
	display: none !important;
}

.woocommerce ul.products li.product .astra-shop-summary-wrap { padding: 0; }

.woocommerce ul.products li.product .ast-woo-product-category {
	display: block;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sr-clay) !important;
	margin-bottom: 6px;
}

/* 询盘按钮单独一行, 与标题拉开距离 */
.woocommerce ul.products li.product .sr-quote-btn {
	display: inline-block;
	margin-top: 14px;
}

/* 分类卡片: 整块可点, 内部元素不参与网格布局 */
.sr-grid > .sr-cat { display: flex; flex-direction: column; }
.sr-cat .sr-more { margin-top: auto; }

/* 产品详情 */
.woocommerce div.product .product_title {
	font-size: 38px;
	line-height: 1.15;
	margin-bottom: 14px;
}

.woocommerce div.product .woocommerce-product-gallery__wrapper,
.woocommerce div.product .woocommerce-product-gallery img {
	border-radius: 14px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: "Inter", sans-serif;
	font-weight: 600;
}

.sr-quote-btn--lg { margin-top: 8px; padding: 17px 34px; font-size: 15px; }

/* 规格表 (产品描述里用) */
.sr-spec {
	width: 100%;
	border-collapse: collapse;
	margin: 22px 0 0;
	font-size: 15px;
}

.sr-spec th,
.sr-spec td {
	padding: 13px 16px;
	border-bottom: 1px solid var(--sr-line);
	text-align: left;
	vertical-align: top;
}

.sr-spec th {
	width: 34%;
	background: var(--sr-sand);
	color: var(--sr-ink);
	font-weight: 600;
	font-family: "Inter", sans-serif;
}

/* ---------- 询盘表单 ---------- */

.sr-form {
	background: var(--sr-white);
	border: 1px solid var(--sr-line);
	border-radius: var(--sr-radius);
	padding: 34px;
	box-shadow: var(--sr-shadow);
}

.sr-form-row {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	margin-bottom: 18px;
}

.sr-form-full { display: block; margin-bottom: 18px; }

.sr-form label span {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--sr-ink);
	margin-bottom: 7px;
}

.sr-form label em { color: var(--sr-clay); font-style: normal; }

.sr-form input[type="text"],
.sr-form input[type="email"],
.sr-form textarea {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--sr-line);
	border-radius: 10px;
	background: #fdfcf9;
	font-family: "Inter", sans-serif;
	font-size: 15px;
	color: var(--sr-text);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.sr-form input:focus,
.sr-form textarea:focus {
	outline: none;
	border-color: var(--sr-clay);
	box-shadow: 0 0 0 3px rgba(192, 114, 63, .12);
}

.sr-honeypot { position: absolute; left: -9999px; }

.sr-form-note {
	border-radius: var(--sr-radius);
	padding: 26px 28px;
	border: 1px solid var(--sr-line);
	background: var(--sr-white);
}

.sr-form-note--ok { border-color: #b6d7bd; background: #f1f8f2; }
.sr-form-note strong { display: block; font-size: 18px; color: var(--sr-ink); margin-bottom: 6px; }
.sr-form-note span { color: var(--sr-muted); font-size: 15px; }

/* ---------- 联系信息块 ---------- */

.sr-contact-line {
	padding: 18px 0;
	border-bottom: 1px solid var(--sr-line);
}

.sr-contact-line dt {
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sr-clay);
	font-weight: 600;
	margin-bottom: 5px;
}

.sr-contact-line dd { margin: 0; font-size: 16px; color: var(--sr-text); line-height: 1.5; }

/* ---------- 表格/列表通用 ---------- */

.sr-prose p { font-size: 16px; line-height: 1.75; color: #3a3833; }
.sr-prose h2 { font-size: 32px; margin: 42px 0 14px; }
.sr-prose h3 { font-size: 22px; margin: 32px 0 10px; }

/* 工作方式四步 —— 做成卡片, 与商品卡同一套视觉语言 */
.sr-steps {
	counter-reset: sr;
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 20px;
	/* 四步固定 2×2, 避免 auto-fit 排出 3+1 的孤卡 */
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px) { .sr-steps { grid-template-columns: 1fr; } }
.sr-steps li {
	position: relative;
	padding: 24px 22px 26px;
	margin: 0;
	background: var(--sr-white);
	border: 1px solid var(--sr-line);
	border-radius: 14px;
	transition: box-shadow .18s ease, transform .18s ease;
}
.sr-steps li:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(18, 49, 46, .07);
}
.sr-steps li::before {
	counter-increment: sr;
	content: counter(sr);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--sr-ink);
	color: #fff;
	font-family: "Inter", sans-serif;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 14px;
}
.sr-steps h3 { font-size: 18px; margin: 0 0 8px; }
.sr-steps p { margin: 0; color: var(--sr-muted); font-size: 14.5px; line-height: 1.65; }

/* 信息卡: 经营范围 / 地址 —— 同样用白底圆角卡 */
.sr-info-card {
	background: var(--sr-white);
	border: 1px solid var(--sr-line);
	border-radius: 14px;
	padding: 32px 30px;
}
.sr-info-card h2 { font-size: 26px; margin: 8px 0 18px; }
.sr-info-card > :last-child { margin-bottom: 0; }
.sr-info-card ul { margin: 0; }
.sr-info-card dl { margin: 0; }

.sr-grid--info {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
}

/* ---------- 按品类铺的产品展示 ---------- */

/* ---------- 产品线切换器: 缩略图 + 名称, 选中态填色 ---------- */

.sr-switch {
	display: grid;
	/* 五条产品线排成一排 */
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	/* 高低错落 + 选中态指向角都需要额外的底部空间, 否则会压到下面的产品区 */
	margin-bottom: 92px;
}

.sr-switch__btn {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--sr-ink) !important;
	font-family: "Inter", sans-serif;
	text-decoration: none !important;
	cursor: pointer;
	box-shadow: none;
	/* 偶数位往下错开, 五个圆就形成高低起伏 */
	transform: translateY(var(--sr-step, 0px));
	transition: transform .2s ease;
}

.sr-switch__btn:nth-child(even) { --sr-step: 30px; }

.sr-switch__thumb {
	flex: 0 0 auto;
	display: block;
	width: 98px;
	height: 98px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--sr-sand-2);
	border: 2px solid #e6c6a6;
	box-shadow: 0 8px 20px rgba(18, 49, 46, .10);
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.sr-switch__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}

.sr-switch__meta {
	display: block;
	min-width: 0;
	text-align: center;
}

.sr-switch__label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none !important;
}

/* 短名: 只在手机上显示(全名在窄屏塞不下) */
.sr-switch__label-short { display: none; }

/* 名字长短差很多, 统一成两行高度, 五个圆下方的文字才会齐 */
.sr-switch__btn .sr-switch__meta {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sr-switch__btn .sr-switch__label {
	min-height: 2.6em;
}

.sr-switch__count {
	display: block;
	margin-top: 3px;
	font-size: 11px;
	font-weight: 500;
	color: var(--sr-muted);
	text-decoration: none !important;
	transition: color .18s ease;
}

.sr-switch__btn:hover {
	transform: translateY(calc(var(--sr-step, 0px) - 4px));
}

.sr-switch__btn:hover .sr-switch__thumb {
	border-color: var(--sr-clay);
	box-shadow: 0 14px 28px rgba(161, 92, 47, .20);
	transform: scale(1.04);
}

.sr-switch__btn:hover .sr-switch__count { color: var(--sr-clay); }

/* 选中态: 圆环加粗成深绿 + 外发光, 名字加粗 */
.sr-switch__btn.is-active .sr-switch__thumb {
	border-color: var(--sr-ink);
	border-width: 3px;
	box-shadow: 0 0 0 5px rgba(18, 49, 46, .09), 0 12px 26px rgba(18, 49, 46, .18);
}

.sr-switch__btn.is-active .sr-switch__label { color: var(--sr-ink); font-weight: 700; }
.sr-switch__btn.is-active .sr-switch__count { color: var(--sr-clay-dark); }

/* 选中态: 整颗胶囊填深绿 + 加长的向下箭头, 指住下面的展示区 */
.sr-switch__btn.is-active::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -19px;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	border-top: 19px solid var(--sr-ink);
}

/*
 * 默认只显示选中的那个面板。
 * 不依赖 JS 是否加载成功 —— 哪怕脚本丢了, 也只会显示第一类,
 * 不会把五类产品全部堆在一起。
 * 完全禁用 JS 的浏览器由 <noscript> 里的样式放行, 内容不丢。
 */
.sr-zone-panel { display: none; }
.sr-zone-panel.is-active { display: block; }

.sr-pgrid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
}

.sr-zone-panel .sr-pcard { flex: none; }

.sr-zone-empty {
	font-family: "Inter", sans-serif;
	font-size: 15px;
	color: var(--sr-muted);
	background: var(--sr-white);
	border: 1px dashed #ddcdb2;
	border-radius: 14px;
	padding: 34px 28px;
	margin: 0;
	text-align: center;
}

/* 五个按钮尽量保持一排。
   原来的断点是 1200px, 笔记本窗口稍微窄一点就会掉成 3+2 两行 —— 这里下调到
   1000px, 常见的 1280/1440/1512 分辨率都能保持"一排五个"。 */
@media (max-width: 1000px) { .sr-switch { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .sr-switch { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sr-showcase { margin-bottom: 60px; }
.sr-showcase:last-child { margin-bottom: 0; }

.sr-showcase__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--sr-line);
}

.sr-showcase__title { font-size: 25px; line-height: 1.2; margin: 0; }

.sr-showcase__all {
	font-family: "Inter", sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: var(--sr-clay-dark) !important;
	text-decoration: none;
	white-space: nowrap;
}

.sr-showcase__all:hover { color: var(--sr-clay) !important; }

/* 品类展示里的卡片保持固定宽度, 产品少时不至于被拉成一张巨卡 */
.sr-scroller__track--fixed .sr-pcard { flex: 0 0 262px; }

/* ---------- Astra 覆盖 ---------- */

.ast-desktop .ast-primary-header-bar,
.ast-mobile-header-wrap .ast-primary-header-bar {
	border-bottom: 1px solid var(--sr-line);
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(180%) blur(10px);
}

.site-header .site-title a,
.ast-site-title-wrap .site-title a {
	font-family: "Fraunces", serif !important;
	font-weight: 600;
	color: var(--sr-ink) !important;
	letter-spacing: -0.01em;
}

/* 手写 HTML 的页面: 隐藏 Astra 的空标题容器, 去掉那条约 22px 的缝 */
.sr-raw-page .entry-header,
.sr-raw-page .ast-breadcrumbs-wrapper { display: none !important; }

.sr-raw-page .entry-header .entry-title { display: none; }

/* ---------------------------------------------------------------------------
   全站统一底色。
   首页是米色 (#f7f3ec), 而 Astra 给其他页面铺的是纯白 —— 从首页点到产品页
   会看到一条明显的色差分界。这里把所有页面的底色都换成同一个米色, 视觉上就
   连起来了。想恢复"首页米色 / 其余白色"的差异, 删掉这一段即可。
   --------------------------------------------------------------------------- */
body,
.site,
.site-content,
.ast-separate-container .site-content,
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single,
.woocommerce-page .site-content,
.post-type-archive-product .site-content,
.single-product .site-content,
.archive .site-content {
	background-color: var(--sr-sand);
}

.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post {
	padding-left: 0;
	padding-right: 0;
}

.ast-separate-container .ast-article-single .ast-post-format,
.ast-separate-container .ast-article-single > .entry-content { padding: 0; }

/* ---------------------------------------------------------------------------
   容器内边距的调整只作用于手写 HTML 的页面 (.sr-raw-page)。
   商店页 / 产品详情页 / 归档页保持 Astra 默认版心, 否则内容会贴到屏幕边缘。
   --------------------------------------------------------------------------- */

.sr-raw-page.ast-separate-container .ast-article-single,
.sr-raw-page.ast-separate-container .ast-article-post {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	background: transparent;
	box-shadow: none;
	border: none;
}

.sr-raw-page .site-content .ast-container,
.sr-raw-page .ast-container {
	padding: 0 !important;
	margin: 0 !important;
	max-width: 100% !important;
	background: transparent;
}

/* Astra 给内容主区加了 60px 上边距, 手写页面要清掉, 否则首屏顶不齐页头 */
.sr-raw-page #primary,
.sr-raw-page #secondary,
.sr-raw-page .content-area {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.sr-raw-page .site-content { padding-top: 0 !important; }

.sr-raw-page.ast-separate-container .site-content { background: transparent; }

.sr-raw-page .ast-article-single > .entry-content,
.sr-raw-page .ast-article-post > .entry-content { max-width: 100%; }

.sr-fullbleed {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}

/* 商店/归档页统一版心宽度, 与其他页面视觉一致 */
.woocommerce-page .ast-container,
.post-type-archive-product .ast-container,
.single-product .ast-container,
.archive .ast-container {
	max-width: var(--sr-maxw);
	margin-left: auto;
	margin-right: auto;
}

.ast-single-post .entry-content > .sr-fullbleed:first-child { margin-top: 0; }

/* 页脚 */
.site-below-footer-wrap,
.ast-footer-copyright {
	font-size: 14px;
	color: var(--sr-muted);
	background: var(--sr-sand);
	border-top: 1px solid var(--sr-line);
}

/* 隐藏 Astra 的购物车图标 */
.ast-site-header-cart { display: none !important; }

/* ---------- 全站浮动询盘卡 ---------- */

/* ---------- 商品横向滚动区 ---------- */

.sr-scroller {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	padding: 4px 4px 14px;
}

.sr-scroller__track {
	display: flex;
	gap: 22px;
}

.sr-pcard {
	/* 产品少时自动撑满一行, 产品多了溢出即可横向滚动 */
	flex: 1 0 262px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	background: var(--sr-white);
	border: 1px solid var(--sr-line);
	border-radius: 14px;
	overflow: hidden;
	transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.sr-pcard:hover {
	transform: translateY(-3px);
	box-shadow: var(--sr-shadow);
	border-color: var(--sr-sand-2);
}

.sr-pcard__media { display: block; background: var(--sr-sand-2); }
.sr-pcard__media img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: contain;
}

.sr-pcard__body {
	padding: 16px 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sr-pcard__cat {
	font-family: "Inter", sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sr-clay);
}

.sr-pcard__title { font-size: 17px; line-height: 1.35; margin: 0; }
.sr-pcard__title a { color: var(--sr-ink) !important; text-decoration: none; }
.sr-pcard__title a:hover { color: var(--sr-clay-dark) !important; }

.sr-btn--sm { align-self: flex-start; margin-top: 6px; padding: 10px 18px; font-size: 13px; }

.sr-scroller__hint {
	font-family: "Inter", sans-serif;
	font-size: 13px;
	color: var(--sr-muted);
	margin: 8px 4px 0;
}

/* 滚动条 */
.sr-scroller::-webkit-scrollbar { height: 8px; }
.sr-scroller::-webkit-scrollbar-track { background: rgba(18, 49, 46, .06); border-radius: 99px; }
.sr-scroller::-webkit-scrollbar-thumb { background: #cdbfa9; border-radius: 99px; }
.sr-scroller::-webkit-scrollbar-thumb:hover { background: #b9a78c; }

.sr-float {
	position: fixed;
	right: 24px;
	bottom: 104px;
	z-index: 999;
	width: 268px;
	padding: 24px 22px 20px;
	background: var(--sr-ink);
	color: #fff;
	border-radius: 14px;
	box-shadow: 0 18px 44px rgba(10, 30, 28, .30);
	animation: sr-float-bob 6s ease-in-out infinite;
}

@keyframes sr-float-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

.sr-float-off .sr-float { display: none !important; }

.sr-float__close {
	position: absolute;
	top: 6px;
	right: 8px;
	padding: 4px 8px;
	background: none;
	border: 0;
	border-radius: 6px;
	color: rgba(255, 255, 255, .5);
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
}

.sr-float__close:hover {
	color: #fff;
	background: rgba(255, 255, 255, .12);
}

.sr-float__eyebrow {
	display: block;
	font-family: "Inter", sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #e9b184;
	margin-bottom: 9px;
}

.sr-float__text {
	font-size: 14.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .82);
	margin: 0 0 16px;
}

.sr-float__text strong { color: #fff; font-weight: 600; }

.sr-float__btn {
	display: inline-block;
	padding: 11px 20px;
	border-radius: 999px;
	background: var(--sr-clay);
	color: #fff !important;
	font-family: "Inter", sans-serif;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background .16s ease;
}

.sr-float__btn:hover { background: var(--sr-clay-dark); }

@media (prefers-reduced-motion: reduce) {
	.sr-float { animation: none; }
}

/* ---------- 响应式 ---------- */

@media (max-width: 900px) {
	.sr-float {
		right: 12px;
		bottom: 84px;
		width: min(260px, calc(100vw - 24px));
		padding: 18px 18px 16px;
	}
	.sr-float__text { font-size: 13.5px; }

	.sr-hero h1 { font-size: 38px; }
	.sr-hero-inner { padding: 72px 24px 76px; }
	.sr-section { padding: 56px 22px; }
	.sr-section-head h2 { font-size: 29px; }
	.sr-cta { padding: 36px 28px; }
	.sr-cta h2 { font-size: 25px; }
	.woocommerce div.product .product_title { font-size: 29px; }
	.sr-form { padding: 24px; }
}

/* ---------------------------------------------------------------------------
   手机端专项微调（640px 以下）
   手机屏幕窄, 原来五个产品线按钮竖着排一长串、产品也一次只露一个，太浪费。
   这里统一改成两列:
   1) 五个产品线按钮 2 列排布;
   2) 产品网格 2 列, 一屏能看到 4 个产品;
   3) 卡片缩紧（图仍是 1:1 正方形, 但只有半屏宽）;
   4) 右下角询盘浮窗缩小, 少挡内容。
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
	/* 手机端: 五个圆全部显示在一排, 仍然高低错落。
	   屏幕只有 390px, 分给每个圆约 64px —— 全名塞不下, 所以改用短名
	   (Cotton / Bathrobes / Coral Fleece / Blankets / Hair Caps)。 */
	.sr-switch {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 3px;
		overflow: visible;
		padding: 0;
		/* 底部留够: 高低错落 + 选中态指向角都在这里 */
		margin-bottom: 44px;
	}
	.sr-switch__btn { width: auto; gap: 6px; }
	.sr-switch__btn:nth-child(even) { --sr-step: 16px; }
	.sr-switch__thumb { width: 56px; height: 56px; }

	/* 手机上显示短名, 藏掉全名 */
	.sr-switch__label { display: none; }
	.sr-switch__btn .sr-switch__label { min-height: 0; }
	.sr-switch__label-short {
		display: block;
		min-height: 2.5em;
		font-size: 9.5px;
		font-weight: 600;
		line-height: 1.25;
	}
	.sr-switch__count { font-size: 8.5px; margin-top: 1px; white-space: nowrap; }
	.sr-switch__btn.is-active::after { border-left-width: 7px; border-right-width: 7px; border-top-width: 10px; bottom: -10px; }

	.sr-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.sr-pcard__body { padding: 12px 13px 15px; gap: 6px; }
	.sr-pcard__cat { font-size: 9.5px; letter-spacing: .06em; }
	.sr-pcard__title { font-size: 13.5px; line-height: 1.4; }
	.sr-pcard__title a { text-decoration: none !important; }
	.sr-pcard .sr-btn--sm { padding: 8px 14px; font-size: 12px; }

	.sr-float {
		width: 178px;
		right: 10px;
		bottom: 78px;
		padding: 12px 13px 13px;
	}
	.sr-float__text { font-size: 12.5px; line-height: 1.45; }
	.sr-float .sr-btn { padding: 8px 14px; font-size: 12px; }
}