@charset "UTF-8";

/* ============================================================
   商家入驻 — 生活清洁主题 · 淡珊瑚 #FF5D6A
   （.sj-btn 供入驻步骤子页复用）
   ============================================================ */

:root{
	--sj-coral:#FF5D6A;
	--sj-coral-soft:#FF8A94;
	--sj-coral-deep:#E84A57;
	--sj-mist:#FFF6F7;
	--sj-ink:#3A2A2C;
	--sj-muted:#8A6A6E;
	--sj-line:rgba(255,93,106,.16);
	--sj-rose:#FF5D6A;
}

.sj-page{
	position:relative;
	overflow:hidden;
	padding:0 0 64px;
	background:var(--sj-mist);
	font-family:"Nunito","PingFang SC","Microsoft YaHei",sans-serif;
	color:var(--sj-ink);
}

.sj-bg{
	position:absolute;
	inset:0;
	z-index:0;
	pointer-events:none;
	background:
		radial-gradient(ellipse 70% 40% at 10% 0%,rgba(255,93,106,.12),transparent 55%),
		radial-gradient(ellipse 50% 35% at 95% 15%,rgba(255,138,148,.14),transparent 50%),
		linear-gradient(180deg,#FFF8F9 0%,#FFF0F2 50%,#FFE8EB 100%);
}
.sj-wash{
	position:absolute;
	border-radius:50%;
	filter:blur(70px);
	-webkit-filter:blur(70px);
}
.sj-wash--1{
	width:38vw;height:38vw;
	top:-8%;left:-6%;
	background:rgba(255,93,106,.16);
	animation:sjDrift 18s ease-in-out infinite;
}
.sj-wash--2{
	width:32vw;height:32vw;
	bottom:10%;right:-8%;
	background:rgba(255,168,176,.22);
	animation:sjDrift 22s ease-in-out infinite reverse;
}
@keyframes sjDrift{
	0%,100%{transform:translate(0,0);}
	50%{transform:translate(3vw,2vh);}
}
.sj-bubbles{
	position:absolute;
	inset:0;
	overflow:hidden;
}
.sj-bubbles span{
	position:absolute;
	bottom:-30px;
	border-radius:50%;
	border:1.5px solid rgba(255,93,106,.2);
	background:rgba(255,255,255,.4);
	animation:sjBubbleRise linear infinite;
}
.sj-bubbles span:nth-child(1){left:10%;width:12px;height:12px;animation-duration:12s;}
.sj-bubbles span:nth-child(2){left:25%;width:8px;height:8px;animation-duration:15s;animation-delay:2s;}
.sj-bubbles span:nth-child(3){left:40%;width:16px;height:16px;animation-duration:11s;animation-delay:4s;}
.sj-bubbles span:nth-child(4){left:55%;width:10px;height:10px;animation-duration:14s;animation-delay:1s;}
.sj-bubbles span:nth-child(5){left:70%;width:14px;height:14px;animation-duration:13s;animation-delay:3s;}
.sj-bubbles span:nth-child(6){left:82%;width:7px;height:7px;animation-duration:16s;animation-delay:5s;}
.sj-bubbles span:nth-child(7){left:18%;width:18px;height:18px;animation-duration:17s;animation-delay:6s;}
.sj-bubbles span:nth-child(8){left:90%;width:9px;height:9px;animation-duration:12s;animation-delay:.8s;}
@keyframes sjBubbleRise{
	0%{transform:translateY(0);opacity:0;}
	10%{opacity:.65;}
	100%{transform:translateY(-105vh);opacity:0;}
}

.sj-page > section{
	position:relative;
	z-index:1;
	max-width:1120px;
	margin:0 auto;
	padding:0 24px;
}

/* ---------- 按钮（步骤页共用） ---------- */
.sj-actions{
	display:flex;
	flex-wrap:wrap;
	gap:12px;
}
.sj-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:148px;
	padding:13px 28px;
	border-radius:999px;
	font-size:15px;
	font-weight:700;
	text-decoration:none;
	border:0;
	cursor:pointer;
	transition:transform .22s,box-shadow .22s,background .2s,color .2s;
	box-sizing:border-box;
}
.sj-btn--primary{
	color:#fff!important;
	background:linear-gradient(135deg,var(--sj-coral-soft),var(--sj-coral));
	box-shadow:0 10px 28px rgba(255,93,106,.32);
}
.sj-btn--primary:hover{
	transform:translateY(-2px);
	box-shadow:0 14px 34px rgba(255,93,106,.4);
	color:#fff!important;
	text-decoration:none;
}
.sj-btn--ghost{
	color:var(--sj-coral)!important;
	background:rgba(255,255,255,.65);
	border:1.5px solid rgba(255,93,106,.35);
}
.sj-btn--ghost:hover{
	background:#fff;
	color:var(--sj-coral-deep)!important;
	text-decoration:none;
}
.sj-btn--disabled{
	color:rgba(138,106,110,.55)!important;
	background:rgba(255,93,106,.08);
	border:1.5px solid rgba(255,93,106,.12);
	cursor:not-allowed;
	pointer-events:none;
}

/* ---------- Hero ---------- */
.sj-hero{
	padding-top:36px!important;
	padding-bottom:28px!important;
}
.sj-hero__inner{
	display:grid;
	grid-template-columns:1.1fr .9fr;
	gap:32px;
	align-items:center;
	min-height:420px;
}
.sj-hero__brand{
	margin:0 0 12px;
	font-family:"ZCOOL XiaoWei","PingFang SC",serif;
	font-size:clamp(28px,3.4vw,42px);
	color:var(--sj-coral);
	letter-spacing:.04em;
	line-height:1.2;
}
.sj-hero__title{
	margin:0 0 14px;
	font-size:clamp(26px,3vw,36px);
	font-weight:800;
	line-height:1.3;
	color:var(--sj-ink);
}
.sj-hero__title em{
	font-style:normal;
	color:var(--sj-coral);
}
.sj-hero__desc{
	margin:0 0 16px;
	font-size:15px;
	line-height:1.75;
	color:var(--sj-muted);
	max-width:460px;
	font-weight:500;
}
.sj-hero__desc strong{color:var(--sj-ink);font-weight:700;}
.sj-hero__tips{
	margin:0 0 24px;
	padding:0;
	list-style:none;
}
.sj-hero__tips li{
	position:relative;
	padding-left:16px;
	margin-bottom:8px;
	font-size:14px;
	color:var(--sj-muted);
	font-weight:600;
}
.sj-hero__tips li::before{
	content:'';
	position:absolute;
	left:0;top:8px;
	width:6px;height:6px;
	border-radius:50%;
	background:var(--sj-coral);
}

.sj-hero__visual{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}
.sj-scene{
	position:relative;
	width:280px;
	height:210px;
}
.sj-bottle{position:absolute;animation:sjSway 5s ease-in-out infinite;}
.sj-bottle--tall{left:36px;bottom:20px;width:64px;}
.sj-bottle--spray{left:130px;bottom:12px;width:56px;animation-delay:1.1s;}
@keyframes sjSway{
	0%,100%{transform:rotate(-2deg) translateY(0);}
	50%{transform:rotate(2deg) translateY(-6px);}
}
.sj-bottle__cap{
	width:28px;height:14px;margin:0 auto;
	background:linear-gradient(180deg,#FF8A94,#FF5D6A);
	border-radius:6px 6px 2px 2px;
}
.sj-bottle__neck{
	width:18px;height:16px;margin:0 auto;
	background:linear-gradient(180deg,#FFD4D8,#FFB8BF);
}
.sj-bottle__body{
	position:relative;
	width:64px;height:110px;margin-top:-2px;
	background:linear-gradient(160deg,#fff 0%,#FFE8EB 45%,#FFB8BF 100%);
	border:1.5px solid rgba(255,93,106,.28);
	border-radius:18px 18px 22px 22px;
	box-shadow:8px 16px 32px rgba(255,93,106,.16);
	overflow:hidden;
}
.sj-bottle__body--spray{
	width:56px;height:96px;
	border-radius:14px 14px 20px 20px;
}
.sj-bottle__body span{
	position:absolute;left:50%;top:38%;transform:translateX(-50%);
	width:34px;height:26px;border-radius:6px;background:rgba(255,93,106,.5);
}
.sj-bottle__body i{
	position:absolute;left:10px;top:12px;width:10px;height:55%;
	border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.7),transparent);
}
.sj-bottle__nozzle{
	width:36px;height:10px;margin-left:8px;
	background:linear-gradient(90deg,#FF8A94,#FF5D6A);
	border-radius:4px 10px 10px 4px;
}
.sj-bottle__trigger{
	width:14px;height:12px;margin:2px 0 0 22px;
	background:#E84A57;border-radius:3px;
}
.sj-sponge{
	position:absolute;right:28px;bottom:24px;
	width:70px;height:40px;
	background:linear-gradient(135deg,#FFB8BF,#FF8A94);
	border-radius:14px 18px 12px 16px;
	box-shadow:6px 10px 24px rgba(255,93,106,.2);
	animation:sjBob 4.5s ease-in-out infinite;
	overflow:hidden;
}
@keyframes sjBob{
	0%,100%{transform:translateY(0) rotate(0);}
	50%{transform:translateY(-8px) rotate(-4deg);}
}
.sj-sponge b{
	position:absolute;border-radius:50%;background:rgba(255,255,255,.35);
}
.sj-sponge b:nth-child(1){width:10px;height:10px;left:12px;top:10px;}
.sj-sponge b:nth-child(2){width:7px;height:7px;left:34px;top:16px;}
.sj-sponge b:nth-child(3){width:11px;height:11px;left:48px;top:8px;}
.sj-scene__bubbles i{
	position:absolute;border-radius:50%;
	border:1.5px solid rgba(255,93,106,.35);
	background:rgba(255,255,255,.5);
	animation:sjPop 3.5s ease-in-out infinite;
}
.sj-scene__bubbles i:nth-child(1){width:12px;height:12px;left:95px;top:24px;}
.sj-scene__bubbles i:nth-child(2){width:8px;height:8px;left:165px;top:44px;animation-delay:.5s;}
.sj-scene__bubbles i:nth-child(3){width:16px;height:16px;left:205px;top:14px;animation-delay:1s;}
.sj-scene__bubbles i:nth-child(4){width:6px;height:6px;left:72px;top:62px;animation-delay:1.5s;}
.sj-scene__bubbles i:nth-child(5){width:10px;height:10px;left:230px;top:72px;animation-delay:.3s;}
@keyframes sjPop{
	0%,100%{transform:translateY(0);opacity:.45;}
	50%{transform:translateY(-12px);opacity:1;}
}
.sj-hero__badge{
	margin:18px 0 0;
	padding:8px 18px;
	font-size:12px;
	font-weight:700;
	letter-spacing:.08em;
	color:var(--sj-coral-deep);
	background:rgba(255,93,106,.1);
	border:1px solid rgba(255,93,106,.18);
	border-radius:999px;
}

/* ---------- 招商展示（广告轮播） ---------- */
.sj-showcase{
	margin-top:8px!important;
	margin-bottom:40px!important;
}
.sj-showcase__head,
.sj-benefits__head,
.sj-flow-wrap__head,
.sj-guide__head{
	margin-bottom:18px;
}
.sj-showcase__head h2,
.sj-benefits__head h2,
.sj-flow-wrap__head h2,
.sj-guide__head h2{
	margin:0;
	font-size:22px;
	font-weight:800;
	color:var(--sj-ink);
}
.sj-showcase__head p,
.sj-benefits__head p,
.sj-flow-wrap__head p,
.sj-guide__head p{
	margin:6px 0 0;
	font-size:14px;
	color:var(--sj-muted);
	font-weight:500;
}
.sj-showcase__slide{
	position:relative;
	height:280px;
	border-radius:24px;
	overflow:hidden;
	border:1px solid rgba(255,255,255,.8);
	box-shadow:0 16px 48px rgba(255,93,106,.12);
}
.sj-showcase__slide .wst-slide-items,
.sj-showcase__slide .wst-slide-items li{
	height:280px!important;
	min-width:100%!important;
	border-radius:24px;
}
.sj-showcase__slide .wst-slide-numbox{bottom:14px;}
.sj-showcase__slide .wst-slide-controls span{
	background:rgba(255,255,255,.55)!important;
	color:var(--sj-coral)!important;
	border:0!important;
}
.sj-showcase__slide .wst-slide-controls span.curr{
	background:var(--sj-coral)!important;
	color:#fff!important;
}

/* ---------- 开店支持 ---------- */
.sj-benefits{margin-bottom:44px!important;}
.sj-benefits__list{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:0;
	margin:0;
	padding:0;
	list-style:none;
	border-top:1px solid var(--sj-line);
}
.sj-benefits__list li{
	padding:22px 18px 22px 0;
	border-bottom:1px solid var(--sj-line);
	margin-right:20px;
}
.sj-benefits__list li:last-child{margin-right:0;}
.sj-benefits__num{
	display:block;
	margin-bottom:10px;
	font-size:12px;
	font-weight:800;
	letter-spacing:.14em;
	color:var(--sj-coral-soft);
}
.sj-benefits__list strong{
	display:block;
	margin-bottom:6px;
	font-size:16px;
	font-weight:800;
	color:var(--sj-ink);
}
.sj-benefits__list em{
	font-style:normal;
	font-size:13px;
	line-height:1.55;
	color:var(--sj-muted);
	font-weight:500;
}

/* ---------- 入驻流程 ---------- */
.sj-flow-wrap{margin-bottom:44px!important;}
.sj-flow__progress{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:10px 16px;
	margin-bottom:28px;
	font-size:13px;
	color:var(--sj-muted);
	font-weight:600;
}
.sj-flow__progress strong{
	color:var(--sj-coral);
	font-weight:800;
}
.sj-flow__track{
	flex:1;
	min-width:160px;
	height:6px;
	background:rgba(255,93,106,.12);
	border-radius:999px;
	overflow:hidden;
}
.sj-flow__track i{
	display:block;
	height:100%;
	border-radius:999px;
	background:linear-gradient(90deg,var(--sj-coral-soft),var(--sj-coral));
}
.sj-flow__list{
	display:grid;
	grid-template-columns:repeat(5,1fr);
	gap:0;
	margin:0;
	padding:0;
	list-style:none;
}
.sj-flow__list li{
	position:relative;
	padding:0 16px 0 0;
}
.sj-flow__list li:not(:last-child)::after{
	content:'';
	position:absolute;
	top:18px;
	right:8px;
	width:calc(100% - 48px);
	height:2px;
	background:rgba(255,93,106,.15);
}
.sj-flow__step{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:36px;height:36px;
	margin-bottom:12px;
	border-radius:50%;
	font-size:12px;
	font-weight:800;
	color:var(--sj-muted);
	background:#fff;
	border:2px solid rgba(255,93,106,.2);
	position:relative;
	z-index:1;
}
.sj-flow__list strong{
	display:block;
	margin-bottom:4px;
	font-size:14px;
	font-weight:800;
	color:var(--sj-ink);
}
.sj-flow__list em{
	font-style:normal;
	font-size:12px;
	line-height:1.5;
	color:var(--sj-muted);
}
.sj-flow__list li.is-active .sj-flow__step{
	color:#fff;
	background:var(--sj-coral);
	border-color:transparent;
	box-shadow:0 6px 18px rgba(255,93,106,.35);
}
.sj-flow__list li.is-active strong{color:var(--sj-coral);}

/* ---------- 入驻指南 ---------- */
.sj-guide{margin-bottom:24px!important;}
.sj-guide-tabs.wst-tab-box{
	width:100%!important;
	margin:0!important;
	background:transparent!important;
}
.sj-guide-tabs .wst-tab-nav{
	display:flex!important;
	flex-wrap:wrap;
	gap:8px;
	height:auto!important;
	width:100%!important;
	border:0!important;
	background:transparent!important;
	padding:0 0 16px!important;
	margin:0!important;
	float:none!important;
}
.sj-guide-tabs .wst-tab-nav li{
	width:auto!important;
	float:none!important;
	padding:10px 18px!important;
	margin:0!important;
	border:1.5px solid var(--sj-line)!important;
	border-radius:999px!important;
	line-height:1.4!important;
	font-size:13px!important;
	font-weight:600!important;
	color:var(--sj-muted)!important;
	background:rgba(255,255,255,.7)!important;
	transition:all .25s;
}
.sj-guide-tabs .wst-tab-nav li:hover{
	color:var(--sj-coral)!important;
	border-color:rgba(255,93,106,.4)!important;
}
.sj-guide-tabs .wst-tab-nav li.on{
	color:#fff!important;
	border-color:transparent!important;
	background:var(--sj-coral)!important;
	box-shadow:0 6px 16px rgba(255,93,106,.28)!important;
}
.sj-guide-tabs .wst-tab-content{
	width:100%!important;
	min-height:240px!important;
	padding:22px 24px!important;
	border:1px solid rgba(255,255,255,.9)!important;
	border-radius:20px!important;
	background:rgba(255,255,255,.72)!important;
	backdrop-filter:blur(12px);
	-webkit-backdrop-filter:blur(12px);
	box-shadow:0 12px 40px rgba(255,93,106,.08);
}
.sj-guide-tabs .wst-tab-item{
	font-size:15px;
	line-height:1.85;
	color:var(--sj-ink);
}
.sj-guide-tabs .wst-tab-item img{
	max-width:100%;
	height:auto;
	border-radius:10px;
}
.sj-guide-tabs .wst-tab-item a{color:var(--sj-coral);}

/* ---------- 响应式 ---------- */
@media (max-width:960px){
	.sj-hero__inner{
		grid-template-columns:1fr;
		gap:20px;
		min-height:0;
	}
	.sj-hero__visual{order:-1;}
	.sj-scene{
		width:220px;height:160px;
		transform:scale(.9);
	}
	.sj-showcase__slide,
	.sj-showcase__slide .wst-slide-items,
	.sj-showcase__slide .wst-slide-items li{height:200px!important;}
	.sj-benefits__list{grid-template-columns:1fr 1fr;}
	.sj-benefits__list li{margin-right:12px;}
	.sj-flow__list{
		grid-template-columns:1fr;
		gap:18px;
	}
	.sj-flow__list li{padding:0;}
	.sj-flow__list li:not(:last-child)::after{
		top:auto;bottom:-10px;left:18px;right:auto;
		width:2px;height:16px;
	}
}
@media (max-width:560px){
	.sj-benefits__list{grid-template-columns:1fr;}
	.sj-benefits__list li{margin-right:0;}
	.sj-page > section{padding:0 16px;}
}