/* Mall Mobile UI 1.0 */
:root{
	/* primitive */
	--mall-white:#ffffff;
	--mall-gray-25:#fbfcfd;
	--mall-gray-50:#f5f7fa;
	--mall-gray-100:#edf1f5;
	--mall-gray-200:#dfe5ec;
	--mall-gray-400:#8b98a7;
	--mall-gray-600:#536170;
	--mall-gray-900:#17212b;
	--mall-green-50:#eaf8f2;
	--mall-green-100:#d8f3e8;
	--mall-green-600:#08a66c;
	--mall-green-700:#07875b;
	--mall-red-50:#fff0ed;
	--mall-red-600:#f04438;
	--mall-orange-500:#ff8a00;
	--mall-blue-600:#1677ff;
	--mall-space-1:4px;
	--mall-space-2:8px;
	--mall-space-3:12px;
	--mall-space-4:16px;
	--mall-space-5:20px;
	--mall-space-6:24px;
	--mall-radius-1:4px;
	--mall-radius-2:8px;
	--mall-radius-pill:999px;
	--mall-shadow-card:0 8px 22px rgba(23,33,43,.07);
	--mall-shadow-bar:0 -8px 24px rgba(23,33,43,.10);

	/* semantic */
	--mall-bg:var(--mall-gray-50);
	--mall-surface:var(--mall-white);
	--mall-surface-soft:var(--mall-gray-25);
	--mall-text:var(--mall-gray-900);
	--mall-text-muted:var(--mall-gray-600);
	--mall-text-subtle:var(--mall-gray-400);
	--mall-border:var(--mall-gray-200);
	--mall-brand:var(--mall-green-600);
	--mall-brand-hover:var(--mall-green-700);
	--mall-brand-soft:var(--mall-green-50);
	--mall-price:var(--mall-red-600);
	--mall-warning:var(--mall-orange-500);
	--mall-link:var(--mall-blue-600);

	/* component */
	--mall-shell-width:480px;
	--mall-page-pad:14px;
	--mall-control-height:44px;
	--mall-card-radius:var(--mall-radius-2);
	--mall-card-padding:var(--mall-space-3);
	--mall-focus-ring:0 0 0 3px rgba(8,166,108,.14);
}
*{box-sizing:border-box;}
html{min-height:100%;background:var(--mall-bg);}
body.mall-page{
	min-height:100vh;
	margin:0;
	background:var(--mall-bg);
	color:var(--mall-text);
	font-family:"PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif;
	font-size:14px;
	line-height:1.5;
	-webkit-font-smoothing:antialiased;
	overflow-x:hidden;
}
body.mall-page a{color:inherit;}
.mall-shell{
	width:100%;
	max-width:var(--mall-shell-width);
	margin:0 auto;
	padding-left:var(--mall-page-pad);
	padding-right:var(--mall-page-pad);
}
.mall-main{padding-top:var(--mall-space-3);padding-bottom:var(--mall-space-6);}
.mall-appbar,.mall-topbar{
	position:sticky;
	top:0;
	z-index:20;
	background:rgba(255,255,255,.96);
	border-bottom:1px solid var(--mall-border);
	backdrop-filter:blur(14px);
}
.mall-appbar-inner,.mall-topbar-inner{
	min-height:52px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:var(--mall-space-3);
}
.mall-logo{min-width:0;text-decoration:none;}
.mall-logo span{
	display:block;
	max-width:260px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	font-size:16px;
	font-weight:800;
	letter-spacing:0;
}
.mall-logo em{
	display:block;
	margin-top:1px;
	color:var(--mall-text-subtle);
	font-size:11px;
	font-style:normal;
	font-weight:700;
}
.mall-contact{
	flex:0 0 auto;
	max-width:150px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	border:1px solid var(--mall-border);
	border-radius:var(--mall-radius-pill);
	padding:5px 9px;
	color:var(--mall-text-muted);
	font-size:12px;
	font-weight:700;
}
.mall-topbar-inner{position:relative;justify-content:center;}
.mall-topbar h1{margin:0;font-size:16px;font-weight:800;}
.mall-back-link{
	display:inline-flex;
	align-items:center;
	min-height:32px;
	color:var(--mall-link);
	text-decoration:none;
	font-size:13px;
	font-weight:800;
}
.mall-topbar .mall-back-link{position:absolute;left:var(--mall-page-pad);}
.mall-store-card{
	overflow:hidden;
	border:1px solid var(--mall-border);
	border-radius:var(--mall-card-radius);
	background:
		linear-gradient(135deg,var(--mall-surface) 0,var(--mall-surface) 58%,var(--mall-green-50) 100%);
	box-shadow:var(--mall-shadow-card);
}
.mall-store-head{
	padding:var(--mall-space-4) var(--mall-space-4) var(--mall-space-3);
}
.mall-store-head > div{min-width:0;}
.mall-store-head p{margin:0 0 4px;color:var(--mall-brand);font-size:12px;font-weight:800;}
.mall-store-head h1{
	margin:0;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	font-size:24px;
	line-height:1.16;
	font-weight:900;
}
.mall-store-notice{
	margin:0 var(--mall-space-4);
	padding:var(--mall-space-3);
	border-radius:var(--mall-radius-2);
	background:rgba(255,255,255,.72);
	color:var(--mall-text-muted);
	line-height:1.7;
}
.mall-store-services{
	display:flex;
	flex-wrap:wrap;
	gap:var(--mall-space-2);
	padding:0 var(--mall-space-4) var(--mall-space-4);
	margin-top:var(--mall-space-4);
}
.mall-store-services span{
	border-radius:var(--mall-radius-pill);
	background:var(--mall-green-50);
	color:var(--mall-green-700);
	padding:5px 9px;
	font-size:12px;
	font-weight:800;
}
.mall-category{
	display:flex;
	gap:var(--mall-space-2);
	margin:var(--mall-space-3) calc(var(--mall-page-pad) * -1) 0;
	padding:0 var(--mall-page-pad) var(--mall-space-2);
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;
	scrollbar-width:none;
}
.mall-category::-webkit-scrollbar{display:none;}
.mall-category a{
	flex:0 0 auto;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:34px;
	border:1px solid var(--mall-border);
	border-radius:var(--mall-radius-pill);
	background:var(--mall-surface);
	color:var(--mall-text-muted);
	padding:0 14px;
	text-decoration:none;
	font-size:13px;
	font-weight:800;
}
.mall-category a.active{
	border-color:var(--mall-brand);
	background:var(--mall-brand);
	color:var(--mall-white);
}
.mall-section-head{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:var(--mall-space-3);
	margin:var(--mall-space-2) 0 var(--mall-space-3);
}
.mall-section-head h2{margin:0;font-size:18px;font-weight:900;}
.mall-section-head span{color:var(--mall-text-subtle);font-size:12px;font-weight:700;}
.mall-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--mall-space-3);}
.mall-card{
	min-width:0;
	overflow:hidden;
	border:1px solid var(--mall-border);
	border-radius:var(--mall-card-radius);
	background:var(--mall-surface);
	box-shadow:var(--mall-shadow-card);
}
.mall-card-media{display:block;background:var(--mall-gray-100);text-decoration:none;}
.mall-card-media img,.mall-detail-media img,.mall-summary-media img{
	display:block;
	width:100%;
	aspect-ratio:1/1;
	object-fit:cover;
	background:var(--mall-gray-100);
}
.mall-empty-cover{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	aspect-ratio:1/1;
	background:linear-gradient(135deg,var(--mall-gray-100),var(--mall-green-100));
	color:var(--mall-text-subtle);
	font-size:13px;
	font-weight:800;
}
.mall-card-body{padding:var(--mall-card-padding);}
.mall-card-title{
	min-height:40px;
	margin:0;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	font-size:14px;
	line-height:1.42;
	font-weight:900;
}
.mall-card-desc{
	margin:5px 0 0;
	display:-webkit-box;
	-webkit-line-clamp:1;
	-webkit-box-orient:vertical;
	overflow:hidden;
	color:var(--mall-text-muted);
	font-size:12px;
}
.mall-price{margin-top:8px;color:var(--mall-price);font-size:20px;line-height:1.1;font-weight:900;}
.mall-card-foot{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:var(--mall-space-2);
	margin-top:var(--mall-space-2);
}
.mall-card-foot span{
	min-width:0;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	color:var(--mall-text-subtle);
	font-size:11px;
	font-weight:700;
}
.mall-mini-btn,.mall-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border:0;
	border-radius:var(--mall-radius-2);
	text-decoration:none;
	cursor:pointer;
	font:inherit;
	font-weight:900;
	transition:background-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.mall-mini-btn{
	flex:0 0 auto;
	min-width:48px;
	height:30px;
	background:var(--mall-brand);
	color:var(--mall-white);
	font-size:12px;
}
.mall-btn{min-height:var(--mall-control-height);padding:0 var(--mall-space-5);}
.mall-btn-primary{background:var(--mall-brand);color:var(--mall-white);}
.mall-btn-primary:hover,.mall-mini-btn:hover{background:var(--mall-brand-hover);color:var(--mall-white);}
.mall-btn-quiet,.mall-btn.secondary{background:var(--mall-gray-100);color:var(--mall-text);}
.mall-btn:focus-visible,.mall-mini-btn:focus-visible{outline:0;box-shadow:var(--mall-focus-ring);}
.mall-empty-state{
	grid-column:1/-1;
	display:flex;
	min-height:190px;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	border:1px dashed var(--mall-border);
	border-radius:var(--mall-card-radius);
	background:var(--mall-surface);
	color:var(--mall-text-muted);
	text-align:center;
}
.mall-empty-icon{
	width:52px;
	height:52px;
	margin-bottom:var(--mall-space-3);
	border-radius:50%;
	background:
		radial-gradient(circle at 50% 42%,var(--mall-green-600) 0 5px,transparent 6px),
		linear-gradient(var(--mall-green-100),var(--mall-green-100));
}
.mall-empty-state strong{color:var(--mall-text);font-size:16px;}
.mall-empty-state p{margin:4px 0 0;color:var(--mall-text-subtle);}
.mall-detail{
	overflow:hidden;
	border:1px solid var(--mall-border);
	border-radius:var(--mall-card-radius);
	background:var(--mall-surface);
	box-shadow:var(--mall-shadow-card);
}
.mall-detail-media{background:var(--mall-gray-100);}
.mall-detail-info{padding:var(--mall-space-4);}
.mall-detail-title{margin:0;font-size:21px;line-height:1.3;font-weight:900;}
.mall-meta{margin:8px 0 0;color:var(--mall-text-muted);line-height:1.7;}
.mall-goods-tags{display:flex;flex-wrap:wrap;gap:var(--mall-space-2);margin-top:var(--mall-space-3);}
.mall-goods-tags span{
	border-radius:var(--mall-radius-pill);
	background:var(--mall-gray-100);
	color:var(--mall-text-muted);
	padding:5px 9px;
	font-size:12px;
	font-weight:800;
}
.mall-detail-actions{margin-top:var(--mall-space-4);}
.mall-content{
	margin-top:var(--mall-space-3);
	border:1px solid var(--mall-border);
	border-radius:var(--mall-card-radius);
	background:var(--mall-surface);
	padding:var(--mall-space-4);
	box-shadow:var(--mall-shadow-card);
}
.mall-content h3{margin:0 0 8px;font-size:16px;font-weight:900;}
.mall-content p{margin:0;color:var(--mall-text-muted);line-height:1.9;}
.mall-mobile-buy{
	position:fixed;
	left:50%;
	right:auto;
	bottom:0;
	z-index:30;
	width:100%;
	max-width:var(--mall-shell-width);
	transform:translateX(-50%);
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:var(--mall-space-3);
	padding:10px var(--mall-page-pad) calc(10px + env(safe-area-inset-bottom));
	background:rgba(255,255,255,.97);
	border-top:1px solid var(--mall-border);
	box-shadow:var(--mall-shadow-bar);
}
.mall-mobile-buy span,.mall-submit-bar span{display:block;color:var(--mall-text-subtle);font-size:12px;font-weight:800;}
.mall-mobile-buy strong,.mall-submit-bar strong{display:block;color:var(--mall-price);font-size:21px;line-height:1.1;}
body.mall-detail-page{padding-bottom:76px;}
.mall-checkout-summary,.mall-form-panel,.mall-order-box,.mall-order-status{
	border:1px solid var(--mall-border);
	border-radius:var(--mall-card-radius);
	background:var(--mall-surface);
	box-shadow:var(--mall-shadow-card);
}
.mall-checkout-summary{
	display:grid;
	grid-template-columns:86px 1fr;
	gap:var(--mall-space-3);
	align-items:center;
	padding:var(--mall-space-3);
}
.mall-summary-media{overflow:hidden;border-radius:var(--mall-radius-2);background:var(--mall-gray-100);}
.mall-summary-info h2{margin:0;font-size:16px;line-height:1.35;font-weight:900;}
.mall-summary-info p{
	margin:5px 0 0;
	display:-webkit-box;
	-webkit-line-clamp:1;
	-webkit-box-orient:vertical;
	overflow:hidden;
	color:var(--mall-text-muted);
	font-size:12px;
}
.mall-summary-price{margin-top:7px;color:var(--mall-price);font-size:19px;font-weight:900;}
.mall-form{display:block;margin-top:var(--mall-space-3);}
.mall-form-panel{margin-bottom:var(--mall-space-3);padding:var(--mall-space-4);}
.mall-form-panel h2{margin:0 0 var(--mall-space-3);font-size:16px;font-weight:900;}
.mall-form-row{margin-bottom:var(--mall-space-3);}
.mall-form-row:last-child{margin-bottom:0;}
.mall-form-row label{display:block;margin-bottom:6px;color:var(--mall-text);font-size:13px;font-weight:800;}
.mall-form-row input,.mall-form-row textarea{
	width:100%;
	border:1px solid var(--mall-border);
	border-radius:var(--mall-radius-2);
	background:var(--mall-surface-soft);
	color:var(--mall-text);
	font:inherit;
	outline:0;
	padding:11px var(--mall-space-3);
}
.mall-form-row input{height:var(--mall-control-height);}
.mall-form-row input:focus,.mall-form-row textarea:focus{border-color:var(--mall-brand);box-shadow:var(--mall-focus-ring);background:var(--mall-white);}
.mall-paytypes{display:grid;grid-template-columns:1fr 1fr;gap:var(--mall-space-3);}
.mall-paytype{position:relative;display:block;cursor:pointer;}
.mall-paytype input{position:absolute;opacity:0;pointer-events:none;}
.mall-paytype span{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:var(--mall-control-height);
	border:1px solid var(--mall-border);
	border-radius:var(--mall-radius-2);
	background:var(--mall-surface-soft);
	color:var(--mall-text);
	font-weight:900;
}
.mall-paytype input:checked + span{
	border-color:var(--mall-brand);
	background:var(--mall-brand-soft);
	color:var(--mall-brand-hover);
	box-shadow:var(--mall-focus-ring);
}
.mall-submit-bar{
	position:sticky;
	bottom:0;
	z-index:25;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:var(--mall-space-3);
	margin:var(--mall-space-4) calc(var(--mall-page-pad) * -1) calc(var(--mall-space-6) * -1);
	padding:10px var(--mall-page-pad) calc(10px + env(safe-area-inset-bottom));
	background:rgba(255,255,255,.97);
	border-top:1px solid var(--mall-border);
	box-shadow:var(--mall-shadow-bar);
}
.mall-order-status{
	padding:var(--mall-space-5) var(--mall-space-4);
	background:linear-gradient(135deg,var(--mall-green-700),var(--mall-green-600));
	color:var(--mall-white);
}
.mall-order-status span{
	display:inline-flex;
	margin-bottom:10px;
	border-radius:var(--mall-radius-pill);
	background:rgba(255,255,255,.16);
	padding:5px 9px;
	font-size:12px;
	font-weight:900;
}
.mall-order-status strong{display:block;font-size:27px;line-height:1.1;}
.mall-order-status p{margin:8px 0 0;color:rgba(255,255,255,.82);}
.mall-order-box{margin-top:var(--mall-space-3);overflow:hidden;}
.mall-order-row{
	display:grid;
	grid-template-columns:82px minmax(0,1fr);
	gap:var(--mall-space-3);
	padding:12px var(--mall-space-3);
	border-bottom:1px solid var(--mall-border);
}
.mall-order-row:last-child{border-bottom:0;}
.mall-order-row span{color:var(--mall-text-subtle);font-size:13px;font-weight:800;}
.mall-order-row strong{min-width:0;color:var(--mall-text);font-size:13px;font-weight:800;word-break:break-all;text-align:right;}
.mall-order-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--mall-space-3);margin-top:var(--mall-space-3);}
@media (min-width:540px){
	body.mall-page{
		background:
			linear-gradient(90deg,var(--mall-gray-50),var(--mall-gray-100) 50%,var(--mall-gray-50));
	}
	.mall-shell{padding-left:18px;padding-right:18px;}
	.mall-main{padding-bottom:32px;}
}
@media (max-width:360px){
	:root{--mall-page-pad:12px;}
	.mall-store-head h1{font-size:22px;}
	.mall-grid{gap:var(--mall-space-2);}
	.mall-card-body{padding:10px;}
	.mall-paytypes{grid-template-columns:1fr;}
	.mall-btn{padding-left:var(--mall-space-4);padding-right:var(--mall-space-4);}
}