@charset "utf-8";

/* ========== 首页专属样式 - 现代商城风格 ========== */

/* 轮播图区域 */
.slide-cells{
	margin: 0 .2rem;
	border-radius: var(--radius-medium, 12px);
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.slide-cells .swiper-slide img{
	border-radius: var(--radius-medium, 12px);
}

/* 分区横幅 */
.quk{
	width: 100%;
	margin-top: 0.25rem;
	padding: 0 .2rem;
}
.quk a{
	position: relative;
	display: block;
	border-radius: var(--radius-medium, 12px);
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.quk a .quk-name{
	position: absolute;
	font-size: 0.4rem;
	z-index: 2;
	color: #fff;
	font-weight: 600;
	text-align: center;
	width: 100%;
	top: 50%;
	transform: translateY(-50%);
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.quk a .quk-name1{
	position: absolute;
	font-size: 0.36rem;
	z-index: 2;
	color: #fff;
	font-weight: 600;
	text-align: left;
	width: 100%;
	padding-left: 1rem;
	top: .3rem;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.quk a .quk-name .sname{
	font-size: 0.22rem;
	margin-top: .1rem;
	font-weight: 400;
}
.quk a .quk-name .sname::before{
	content: "";
	position: absolute;
	width: .5rem;
	height: 2px;
	background: rgba(255,255,255,0.7);
	margin: 0.12rem 0 0 -0.7rem;
	border-radius: 1px;
}
.quk a .quk-name .sname::after{
	content: "";
	position: absolute;
	width: .5rem;
	height: 2px;
	background: rgba(255,255,255,0.7);
	margin: 0.12rem 0 0 0.2rem;
	border-radius: 1px;
}
.quk a img{
	position: relative;
	z-index: 1;
	border-radius: var(--radius-medium, 12px);
	width: 100%;
}

/* 横幅与商品区域连接 - 顶部圆角底部直角 */
.quk:has(+ .brandxinren) a,
.quk:has(+ .brandAreaitem) a,
.quk:has(+ .tszc-content) a,
.quk:has(+ .cjjb_content) a {
	border-radius: var(--radius-medium, 12px) var(--radius-medium, 12px) 0 0;
	box-shadow: none;
}
.quk:has(+ .brandxinren) a img,
.quk:has(+ .brandAreaitem) a img,
.quk:has(+ .tszc-content) a img,
.quk:has(+ .cjjb_content) a img {
	border-radius: var(--radius-medium, 12px) var(--radius-medium, 12px) 0 0;
}
/* 商品区域底部阴影 */
.quk + .brandxinren,
.quk + .brandAreaitem,
.quk + .tszc-content,
.quk + .cjjb_content {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
/* 品牌卡片区域 - 5列网格布局 */
.brandxinren .brandCard, .brandjuhui .brandCard{
	width: calc(33.33% - 0.16rem);
	background-color: var(--card-bg, #fff);
	padding: 0.15rem 0.1rem 0.2rem;
	margin: 0.08rem;
	border-radius: var(--radius-small, 8px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	transition: transform 0.2s ease;
}
.brandxinren .brandCard:active, .brandjuhui .brandCard:active{
	transform: scale(0.96);
}
.brandxinren .brandCard img, .brandjuhui .brandCard img{
	border-radius: var(--radius-small, 8px);
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}
.brandAreaitem{
	margin-top: 0;
}
.brandAreaitem, .brandxinren, .brandjuhui {
	width: 100%;
	/* background: linear-gradient(180deg, #01B05A 0%, #019C50 100%); */
	font-size: 0;
	overflow-x: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	border-radius: 0 0 var(--radius-medium, 12px) var(--radius-medium, 12px);
	padding: 0.15rem 0.1rem;
	margin: 0 .2rem;
	width: calc(100% - .4rem);
}
/* .brandxinren {
	background: linear-gradient(180deg, #C77DFF 0%, #9D4EDD 100%);
}
.brandjuhui {
	background: linear-gradient(180deg, #FF8A80 0%, #FF5252 100%);
} */
.brandAreaitem .brandCard{
	width: calc(50% - 0.12rem);
	background-color: var(--card-bg, #fff);
	padding: 0.12rem;
	margin: 0.06rem;
	border-radius: var(--radius-medium, 12px);
	position: relative;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: transform 0.2s ease;
	overflow: hidden;
}
.brandAreaitem .brandCard:active{
	transform: scale(0.96);
}
.brandAreaitem .brandCard a{
	display: block;
	text-decoration: none;
}
.brandAreaitem .brandCard img{
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	display: block;
	border-radius: var(--radius-small, 8px);
	background-color: var(--bg-gray, #F5F6F8);
}


/* 商品价格样式 */
.top_zt .jiage{
	line-height: .4rem;
	font-size: .3rem;
	color: var(--accent-color, #FF5556);
	text-align: center;
	margin-top: 0.1rem;
	font-weight: 600;
}
.top_zt .jiage span{
	font-size: .2rem;
	font-weight: 400;
}

/* 商品名称样式 */
.brandAreaitem .brandCard .brandName,
.brandxinren .brandCard .brandName,
.brandjuhui .brandCard .brandName,
.shopwindows-container .shopwindows-layout .brandName,
.top_zt .brandName
{
	width: 100%;
	padding: 0 .04rem;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	color: var(--text-primary, #323233);
	font-size: .24rem;
	line-height: .36rem;
	height: 0.72rem;
	text-align: center;
	margin-top: .12rem;
}

/* 标签样式 */
.brandjuhui .brandCard .juh{
	position: absolute;
	top: 0;
	left: 0;
	width: 60%;
	display: none; /* 隐藏聚惠标签图片 */
	z-index: 2;
}
.brandAreaitem .brandCard .qiang{
	position: absolute;
	top: 0;
	left: 0;
	width: 45%;
	display: block;
	z-index: 2;
}

/* 价格样式 */
.brandAreaitem .brandCard .jiage, 
.brandxinren .brandCard .jiage, 
.brandjuhui .brandCard .jiage,
.shopwindows-container .shopwindows-layout .jiage{
	line-height: .4rem;
	font-size: .28rem;
	color: var(--accent-color, #FF5556);
	text-align: center;
	margin-top: 0.08rem;
	font-weight: 600;
}
.brandAreaitem .brandCard .jiage span, 
.brandxinren .brandCard .jiage span, 
.brandjuhui .brandCard .jiage span{
	font-size: .18rem;
	font-weight: 400;
}
/* 爆品特卖区域 */
.shopwindows-container {
	width: calc(100% - .4rem);
	margin: 0 .2rem;
	border-radius: 0 0 var(--radius-medium, 12px) var(--radius-medium, 12px);
	overflow: hidden;
}
.s-layout {
	display: flex;
	flex-direction: row;
	width: 100%;
	background: linear-gradient(180deg, #E040FB 0%, #9C27B0 100%);
	padding: .15rem;
	gap: .12rem;
}
.s-layout-left {
	width: 50%;
	background: var(--card-bg, #fff);
	border-radius: var(--radius-small, 8px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}
.s-layout-right {
	width: 50%;
	display: flex;
	flex-direction: column;
	gap: .12rem;
}
.s-layout-bottom-item, .s-layout-top-item {
	padding: .15rem;
	text-align: center;
}
.s-layout-left-item{
	padding: .2rem;
	text-align: center;
}
.s-layout-left-item img{
	width: 100%;
	max-width: 3.5rem;
	aspect-ratio: 1;
	object-fit: contain;
}
.s-layout-bottom img, .s-layout-top-item img{
	height: 1.4rem;
	margin: 0 auto;
	width: 1.4rem;
	display: block;
	object-fit: contain;
}
.s-layout-top {
	flex: 1;
	border-radius: var(--radius-small, 8px);
	background: var(--card-bg, #fff);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.s-layout-bottom {
	display: flex;
	flex-direction: row;
	flex: 1;
	border-radius: var(--radius-small, 8px);
	background: var(--card-bg, #fff);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 钜惠来袭区域 */
.tszc-content{
	margin: 0 .2rem;
	width: calc(100% - .4rem);
}

.tszc-content .top_zt{
	background: linear-gradient(180deg, #FF8A80 0%, #FF5252 100%);
	overflow: hidden;
	padding: .15rem;
	display: flex;
	gap: .12rem;
}
.tszc-content .top_zt a {
	width: calc(50% - 0.06rem);
	background-color: var(--card-bg, #fff);
	border-radius: var(--radius-small, 8px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	padding: .15rem;
	text-align: center;
	transition: transform 0.2s ease;
}
.tszc-content .top_zt a:active{
	transform: scale(0.98);
}
.tszc-content .top_zt img{
	border-radius: var(--radius-small, 8px);
	width: 80%;
	max-height: 2.8rem;
	object-fit: contain;
}
.tszc-content .bot_zt{
	background: linear-gradient(180deg, #FF5252 0%, #E53935 100%);
}

/* 品牌专区 - 4列网格 */
.cjjb_content {
	width: calc(100% - .4rem);
	margin: 0 .2rem;
	box-sizing: border-box;
	overflow: hidden;
	background: linear-gradient(180deg, #7C8EFF 0%, #536DFE 100%);
	padding: .2rem .15rem;
	border-radius: 0 0 var(--radius-medium, 12px) var(--radius-medium, 12px);
}
.cjjb_content ul {
	display: flex;
	flex-wrap: wrap;
	gap: .1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cjjb_content li {
	box-sizing: border-box;
	width: calc(25% - 0.08rem);
	list-style: none;
}
.cjjb_content li a {
	display: block;
	background: var(--card-bg, #fff);
	border-radius: var(--radius-small, 8px);
	padding: .1rem;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	transition: transform 0.2s ease;
}
.cjjb_content li a:active{
	transform: scale(0.95);
}
.cjjb_content li img {
	display: block;
	width: 100%;
	border-radius: var(--radius-small, 8px);
	aspect-ratio: 1;
	object-fit: contain;
}

/* ========== 分区标题装饰 - 参照"品牌特惠"样式 ========== */
.section-title{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: .4rem .3rem .25rem;
	background: linear-gradient(180deg, #FAFBFF 0%, var(--bg-color, #F7F8FA) 100%);
}
.section-title .title-text{
	font-size: .36rem;
	font-weight: 600;
	color: var(--text-primary, #323233);
	padding: 0 .3rem;
	position: relative;
}
.section-title .title-text::before,
.section-title .title-text::after{
	content: '';
	position: absolute;
	top: 50%;
	width: .6rem;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--primary-color, #019C50));
	border-radius: 1px;
}
.section-title .title-text::before{
	right: 100%;
	background: linear-gradient(90deg, var(--primary-color, #019C50), transparent);
}
.section-title .title-text::after{
	left: 100%;
}
/* 带装饰星星的标题 */
.section-title.with-stars .title-text::before,
.section-title.with-stars .title-text::after{
	content: '\2726';
	width: auto;
	height: auto;
	background: none;
	color: var(--primary-color, #019C50);
	font-size: .24rem;
	animation: starTwinkle 1.5s ease-in-out infinite;
}
@keyframes starTwinkle{
	0%, 100%{ opacity: 0.5; transform: scale(0.8); }
	50%{ opacity: 1; transform: scale(1.1); }
}

/* 渐变背景分区标题 */
.section-header{
	background: linear-gradient(135deg, #EBF3FF 0%, #F5F0FF 100%);
	padding: .3rem .2rem;
	margin: .25rem .2rem 0;
	border-radius: var(--radius-medium, 12px) var(--radius-medium, 12px) 0 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.section-header .header-left{
	display: flex;
	align-items: center;
	gap: .15rem;
}
.section-header .header-icon{
	width: .4rem;
	height: .4rem;
	background: var(--primary-gradient, linear-gradient(135deg, #019C50 0%, #01B05A 100%));
	border-radius: .08rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.section-header .header-icon img{
	width: .24rem;
	height: .24rem;
	filter: brightness(0) invert(1);
}
.section-header .header-title{
	font-size: .32rem;
	font-weight: 600;
	color: var(--text-primary, #323233);
}
.section-header .header-subtitle{
	font-size: .22rem;
	color: var(--text-secondary, #969799);
	margin-left: .15rem;
	padding: .04rem .12rem;
	background: rgba(25, 137, 250, 0.1);
	color: var(--primary-color, #019C50);
	border-radius: var(--radius-round, 999px);
}
.section-header .header-more{
	font-size: .24rem;
	color: var(--primary-color, #019C50);
	display: flex;
	align-items: center;
	gap: .05rem;
}
.section-header .header-more::after{
	content: '\276F';
	font-size: .2rem;
}

/* 首页列表区域标题样式更新 */
.list-header{
	margin: .3rem .2rem .2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.list-header .ltt{
	font-size: .34rem;
	font-weight: 600;
	color: var(--text-primary, #323233);
	position: relative;
	padding-left: .2rem;
}
.list-header .ltt::before{
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: .4rem;
	background: var(--primary-gradient, linear-gradient(135deg, #019C50 0%, #01B05A 100%));
	border-radius: 2px;
}

/* 药品分类面板标题 */
.panel-header{
	height: auto;
	padding: .25rem .3rem;
	border-bottom: 1px solid var(--border-color, #EBEDF0);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.panel-header .panel-tt{
	font-size: .32rem;
	font-weight: 600;
	color: var(--text-primary, #323233);
}
.panel-header .panel-more{
	color: var(--primary-color, #019C50);
	font-size: .24rem;
	display: flex;
	align-items: center;
	gap: .05rem;
}
.panel-header .panel-more::after{
	content: '\276F';
	font-size: .18rem;
}

/* ========== 首页增强样式 ========== */

/* 轮播图指示器位置修正(覆盖style.css中 bottom:.8rem 过高的问题) */
.slide-cells .swiper-container-horizontal>.swiper-pagination-bullets{
	bottom: 10px;
}
/* 轮播图指示器 - 胶囊风格 */
.slide-cells .swiper-pagination-bullet{
	width: .12rem;
	height: .06rem;
	border-radius: .03rem;
	background: rgba(255,255,255,0.5);
	opacity: 1;
	transition: all 0.3s ease;
}
.slide-cells .swiper-pagination-bullet-active{
	width: .16rem;
	background: #fff;
	opacity: 1;
}

/* 分类导航 - 增强 */
.index-menu .menu-list li{
	transition: transform 0.2s ease;
}
.index-menu .menu-list li:active{
	transform: scale(0.92);
}
.index-menu .me-box img{
	transition: transform 0.3s ease;
}
.index-menu .me-box:active img{
	transform: scale(1.1);
}
.index-menu .me-box p{
	color: var(--text-primary, #323233);
	font-weight: 500;
}

/* 商品价格 - 使用 DIN PRO 字体 */
.jiage{
	font-family: 'DIN-PRO', -apple-system, sans-serif;
}

/* 商品列表卡片增强 */
.list-cells .list-box{
	box-shadow: var(--shadow-card, 0 2px 12px rgba(0,0,0,0.06));
	border-radius: var(--radius-medium, 12px);
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.list-cells .list-box:active{
	transform: scale(0.98);
	box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.list-cells .list-photo img{
	aspect-ratio: 1;
	object-fit: cover;
	background-color: var(--bg-gray, #F5F6F8);
}
.list-cells .list-price{
	color: var(--accent-color, #FF5556) !important;
	font-family: 'DIN-PRO', -apple-system, sans-serif;
	font-weight: 600;
}

/* ========== 商品列表 - 列表模式(图左文右) ========== */
.goods-list-wrap{
	margin: 0 .2rem;
	width: calc(100% - .4rem);
	border-radius: var(--radius-medium, 12px);
	overflow: hidden;
	background-color: var(--card-bg, #fff);
}
.goods-list-item{
	display: flex;
	align-items: center;
	padding: .2rem;
	text-decoration: none;
	color: inherit;
	transition: background-color 0.15s ease;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.goods-list-item:last-child{
	border-bottom: none;
}
.goods-list-item:active{
	background-color: rgba(0, 0, 0, 0.02);
}
.goods-list-img{
	width: 1.6rem;
	height: 1.6rem;
	flex-shrink: 0;
	border-radius: var(--radius-small, 8px);
	overflow: hidden;
	background-color: var(--bg-gray, #F5F6F8);
}
.goods-list-img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.goods-list-info{
	flex: 1;
	margin-left: .2rem;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 1.6rem;
}
.goods-list-name{
	font-size: .26rem;
	line-height: .38rem;
	color: var(--text-primary, #323233);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	word-break: break-all;
}
.goods-list-price{
	font-size: .32rem;
	color: var(--accent-color, #FF5556);
	font-weight: 600;
	font-family: 'DIN-PRO', -apple-system, sans-serif;
	margin-top: .12rem;
}
.goods-list-price span{
	font-size: .22rem;
	font-weight: 400;
}

/* 药品分类标签 - 胶囊风格 */
.panel .cc-grid{
	padding: .2rem .25rem;
	display: flex;
	flex-wrap: wrap;
	gap: .15rem;
}
.panel .cc-grid li{
	width: auto;
	float: none;
	position: static;
}
.panel .cc-grid li a{
	display: inline-block;
	height: auto;
	line-height: 1;
	padding: .12rem .28rem;
	background: var(--bg-gray, #F5F6F8);
	border-radius: var(--radius-round, 999px);
	color: var(--text-secondary, #969799);
	font-size: .24rem;
	transition: all 0.2s ease;
	white-space: nowrap;
}
.panel .cc-grid li a:active{
	background: rgba(1, 156, 80, 0.1);
	color: var(--primary-color, #019C50);
}
.panel .cc-grid li::before,
.panel .cc-grid li::after{
	display: none !important;
}

/* Tab选项卡选中态 */
.list-tab li.active a{
	color: var(--primary-color, #019C50) !important;
	font-weight: 600;
}

/* 底部导航栏增强 (首页版本) */
.foot-space .pui-tabbar__item.active p,
.foot-space .pui-tabbar__item.active{
	color: var(--primary-color, #019C50);
}

/* 购物车徽章 */
.cart-badge{
	position: absolute;
	top: -0.05rem;
	right: 0.3rem;
	min-width: 0.3rem;
	height: 0.3rem;
	line-height: 0.3rem;
	padding: 0 0.06rem;
	background: var(--accent-color, #FF5556);
	color: #fff;
	font-size: 0.18rem;
	font-family: 'DIN-PRO', sans-serif;
	font-weight: 600;
	border-radius: var(--radius-round, 999px);
	text-align: center;
}