page {
  background: #f2f3f7;
}

.shop-page {
  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
}

/* 头部 */
.shop-page .header {
  position: relative;
  height: 380rpx;
  padding: 20rpx 30rpx;
  box-sizing: border-box;
}

.shop-page .header .bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 0;
}

.shop-page .header .bg-mask {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .7);
}

.shop-page .header .search {
  position: relative;
  background: rgba(255, 255, 255, .4);
  height: 60rpx;
  border-radius: 60rpx;
  display: flex;
  align-items: center;
}

.shop-page .header .search .icon {
  width: 24rpx;
  height: 24rpx;
  font-size: 0;
  margin-left: 20rpx;
}

.shop-page .header .search .text {
  flex: 1;
  color:#fff;
  margin-left: 10rpx;
}


.shop-page .header .shop-info {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 170rpx;
  margin-top: 20rpx;
  height: 152rpx;
}

.shop-page .header .shop-info .logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 140rpx;
  height: 140rpx;
  font-size: 0;
  border: 6rpx solid #fff;
  border-radius: 50%;
  overflow: hidden;
}

.shop-page .header .shop-info .text-box {
  flex: 1;
  margin-right: 30rpx;
}

.shop-page .header .shop-info .text-box .name {
  font-size: 32rpx;
  font-weight: 600;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
}

.shop-page .header .shop-info .text-box .focus-box {
  margin-top: 10rpx;
  display: flex;
  align-items: center;
}

.shop-page .header .shop-info .text-box .focus-box .self {
  padding: 2rpx 6rpx;
  line-height: 20rpx;
  color: #fff;
  background: #fc1b35;
  border-radius: 4rpx;
  margin-right: 10rpx;
  font-size: 20rpx;
}

.shop-page .header .shop-info .text-box .focus-box .focus {
  font-size: 22rpx;
  color: #fff;
}

.shop-page .header .shop-info .collect {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120rpx;
  height: 48rpx;
  color: #fff;
  background: #fc1b35;
  border-radius: 60rpx;
}

.shop-page .header .shop-info .collect .img {
  width: 24rpx;
  height: 24rpx;
  font-size: 0;
  margin-right: 6rpx;
}

.shop-page .header .shop-info .collect .text {
  font-weight: 600;
}

/* 店铺首页-店铺信息 */
.shop-index .shop-info {
  background: #fff;
  border-radius: 10rpx 10rpx 0 0;
  margin-top: -20rpx;
  position: relative;
  display: flex;
  align-items: center;
  padding: 26rpx 30rpx 30rpx 200rpx;
}

.shop-index .shop-info .logo {
  position: absolute;
  top: -40rpx;
  left: 30rpx;
  width: 140rpx;
  height: 140rpx;
  font-size: 0;
  border: 6rpx solid #fff;
  border-radius: 50%;
  overflow: hidden;
}

.shop-index .shop-info .text-box {
  flex: 1;
  margin-right: 30rpx;
}

.shop-index .shop-info .text-box .name {
  font-size: 32rpx;
  font-weight: 600;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-index .shop-info .text-box .focus-box {
  margin-top: 10rpx;
  display: flex;
  align-items: center;
}

.shop-index .shop-info .text-box .focus-box .self {
  padding: 2rpx 6rpx;
  line-height: 20rpx;
  color: #fff;
  background: #fc1b35;
  border-radius: 4rpx;
  margin-right: 10rpx;
  font-size: 18rpx;
}

.shop-index .shop-info .text-box .focus-box .focus {
  font-size: 20rpx;
  color: #999;
}

.shop-index .shop-info .collect {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120rpx;
  height: 48rpx;
  color: #fff;
  background: #fc1b35;
  border-radius: 60rpx;
}

.shop-index .shop-info .collect .img {
  width: 24rpx;
  height: 24rpx;
  font-size: 0;
  margin-right: 6rpx;
}

.shop-index .shop-info .collect .text {
  font-weight: 600;
}

.shop-index .shop-des {
  background: #fff;
  padding: 0 30rpx 30rpx;
  color: #999;
  line-height: 36rpx;
}

/* 店铺首页-广告 */
.shop-index .shop-adv {
  background: #fff;
  padding: 0 30rpx 30rpx;
  background: linear-gradient(to bottom, #fff, #f2f3f7);
  font-size: 0;
}

.shop-index .shop-adv image {
  width: 690rpx;
  height: 200rpx;
  border-radius: 10rpx;
}

/* 店铺首页-店铺热销 */
.shop-index .shop-prods .shop-tit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  border-radius: 10rpx 10rpx 0 0;
}

.shop-index .shop-prods .shop-tit .text {
  font-weight: 600;
  font-size: 28rpx;
  margin-left: 4rpx;
}

.shop-index .shop-prods .shop-tit .text-arrow {
  color: #999;
  margin-right: 10rpx;
}

.shop-index .shop-prods .shop-tit .text-arrow::after {
  border-top: 2rpx solid #999;
  border-right: 2rpx solid #999;
}

/* 店铺商品-筛选栏 */
.shop-prods .header .sortbar {
  position: relative;
  display: flex;
  align-items: center;
  color: #fff;
  margin-top: 40rpx;
}

.shop-prods .header .sortbar .item {
  flex: 1;
  text-align: center;
  height: 46rpx;
  line-height: 46rpx;
  font-size: 26rpx;
  font-weight: 600;
  position: relative;
}

.shop-prods .header .sortbar .item.active {
  background: #fff;
  border-radius: 40rpx;
  color: #fc1b35;
}

.shop-prods .header .sortbar .item .arrow {
  display: inline-block;
  vertical-align: top;
  margin-left: 10rpx;
  margin-top: 18rpx;
  width: 0;
  height: 0;
  border: 8rpx solid transparent;
  border-top: 8rpx solid #fff;
  border-radius: 4rpx;
}

.shop-prods .header .sortbar .item .arrow.cur {
  margin-top: 10rpx;
  border-top: 8rpx solid transparent;
  border-bottom: 8rpx solid #fff;
}

.shop-prods .header .sortbar .item.active .arrow {
  border-top: 8rpx solid #fc1b35;
}

.shop-prods .header .sortbar .item.active .arrow.cur {
  border-top: 8rpx solid transparent;
  border-bottom: 8rpx solid #fc1b35;
}

.shop-prods .header .sortbar .list-style {
  width: 32rpx;
  height: 32rpx;
  font-size: 0;
  padding: 0 10rpx 0 40rpx;
  border-left: 2rpx solid #999;
  margin-left: 40rpx;
}

/* 店铺商品-商品列表 */
.shop-prods .prods-box {
  margin-top: -20rpx;
  position: relative;
}

.shop-prods .prods-box.add-bg {
  background: #f2f3f7;
  border-radius: 10rpx 10rpx 0 0;
}

/* 店铺分类 */
.shop-category .category {
  top: 280rpx;
}

.shop-category .category .main {
  height: calc(100% - 100rpx - env(safe-area-inset-bottom));
}

/* 店铺tabbar */
.shop-page .shop-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom);
  max-width: 750rpx;
  margin: auto;
  height: 100rpx;
  background: #fff;
  border-radius: 10rpx 10rpx 0 0;
  box-shadow: 0 -6rpx 6rpx rgba(0,0,0,.01);
  display: flex;
  align-items: center;
}

.shop-page .shop-tabbar .item {
  flex: 1;
  text-align: center;
}

.shop-page .shop-tabbar .item .icon {
  width: 36rpx;
  height: 36rpx;
  font-size: 0;
  margin: auto;
}

.shop-page .shop-tabbar .item .text {
  font-size: 20rpx;
  margin-top: 6rpx;
}

.shop-page .shop-tabbar .item.active .text {
  color: #fc1b35;
}