body{
background-color: #F7F9FA;
}
/* 广告图 */
.market-main{
	margin-top: 24px;
	overflow-x: hidden;
}
.banner-box{
	height: 380px;
}
.banner-box .banner-img{
	width: 100%;
	height: 380px;
	overflow:hidden;
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	background-size:cover;
}
/* 按钮外层容器：避免按钮之间有默认间隙 */
.auth-type-buttons {
    margin: 40px 0 ;
    text-align: center;
  font-size: 0; /* 清除 inline-block 元素的默认间隙 */
}
.auth-type-button-group{
    background: #F3F8FF;
    border-radius: 60px;
}
/* 按钮基础样式 */
.auth-btn {
    margin: 0 1px;
  padding: 30px 150px !important;
    border:none;
  color: #333333; /* 未选中时文字色 */
  cursor: pointer;
  background: #F3F8FF;
  display: inline-flex; /* 图标+文字水平排列 */
  align-items: center; /* 图标+文字垂直居中 */
  gap: 8px; /* 图标与文字的间距（比 margin 更灵活） */
  font-size: 26px !important; /* 恢复文字大小 */
  transition: all 0.2s; /* 样式切换过渡，更流畅 */
  border-radius: 60px;
  outline: none; /* 关键：去除点击时的黑框（焦点轮廓） */
  box-shadow: none !important; /* 去除可能的阴影边框 */
}

.auth-btn:focus {
  outline: none; /* 去除点击时的黑框（焦点轮廓） */
  box-shadow: none !important; /* 去除可能的阴影边框 */
}

/* 按钮选中状态样式 */
.auth-btn-active {
  background-color: #282C31; /* 选中时背景色（和你页面中“查看更多”蓝色匹配） */
  color: #FFFFFF; /* 选中时文字色 */
  border:none; /* 选中时边框色 */
  outline: none;
}

/* 图标基础样式：控制图标大小 */
.auth-btn-icon {
  width: 18px; 
  height: 18px;
  object-fit: contain; /* 保持图标比例，避免拉伸 */
}
.auth-btn .default-icon {
    display: inline-block; /* 默认显示第一个图标 */
    width: 32px;
    height: 32px;
}
.auth-btn .active-icon {
    display: none; /* 默认隐藏第二个图标 */
    width: 46px; /* 预设置选中状态尺寸（隐藏时也占对应空间，避免跳动） */
    height: 46px;
}

/* 2. 按钮选中状态（有 auth-btn-active 类）：显示 active-icon，隐藏 default-icon */
.auth-btn.auth-btn-active .default-icon {
    display: none; /* 选中时隐藏第一个图标 */
}
.auth-btn.auth-btn-active .active-icon {
    display: inline-block; /* 选中时显示第二个图标 */
}


/* 商品楼层 */
.floor{
	margin-top: 40px;
}
.floor .title .title-box{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.floor .title .title-box .title-left{
	/* display: flex; */
	/* align-items: baseline; */
}
.floor .title .title-box .title-left .heading{
	font-weight: bold;
	font-size: 24px;
}
.floor .title .title-box .title-left .subtitle{
	font-size: 16px;
    color: #666;
    margin-top: 20px;
}
.floor .title .title-box button{
	padding: 0;
}
.floor .title .title-box button:focus{
	box-shadow: none;
}
.floor .mt-40{
	margin-top: 40px;
}
.floor .content{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
.floor .content .item{
	width: 264px;
	margin-top: 20px;
	/* background-color: #fff; */
    border: 1px solid #F2F2F2;
    border-radius: 8px;
	-ms-flex-negative: 0;
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
	cursor: pointer;
}
.floor .content .item.mr-20{
	margin-right: 20px;
}
.floor .content .item .top{
	padding: 8px;
	padding-bottom: 0;
	box-sizing: border-box;
}
.floor .content .item .top img{
	width: 244px;
	border-radius: 7px;
}
.floor .content .item .bottom{
	padding: 10px 10px;
	box-sizing: border-box;
	font-size: 16px;
	font-weight: 600;
}
.floor .content .item .title{
	color: #333;
	overflow: hidden;
    white-space: nowrap;
	text-overflow: ellipsis;
	margin-bottom: 3px;
	font-size:16px;
}
.floor .content .item .bottom .price{
	height: 22px;
	line-height: 22px;
	font-size: 18px;
	color: #FF0000;
	font-weight: 600;
}
.floor .content .item .bottom .tag-line{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}
.floor .content .item .bottom .tag{
	display: inline-block;
	line-height: 20px;
	height: 20px;
	padding: 0 8px 0 7px;
	font-size: 11px;
	color: #fff;
    border-radius: 4px; 
    position: relative; /* 关键：让伪元素相对当前标签定位 */
	margin-bottom: 7px;
    margin-right: 4px;
}
.floor .content .item .bottom .tag::after {
    content: '';
    position: absolute;
    width: 8px; /* 斜切宽度，可微调 */
    height: 100%;
    border-radius:0 4px 4px 0;
    background-color: inherit; /* 继承标签背景色，让斜切部分颜色一致 */
    top: 0;
    right: -3px; /* 调整位置，使斜切与标签自然衔接 */
    transform: skewX(-15deg); /* 倾斜角度，匹配视觉斜切感 */
}

/* 标签列表容器 - 即使无标签也保持块级结构 */
.floor .content .item .bottom .tag-list {
    display: block;
    min-height: 20px; /* 与标签高度一致，进一步确保空容器占位 */
}

.floor .content .item .bottom .tag-line .sales{
	color: #8C8C8C;
	font-size: 12px;
	font-weight: normal;
}
.floor .content .item .bottom .tag1{
	background-color: rgb(56, 75, 97);
	;
}
.floor .content .item .bottom .tag2{
	background-color: rgb(250, 100, 0);
}
.floor .content .item .bottom .tag3{
	background-color: rgb(35, 178, 110);
}