/* 头部 */
.component-shop-head {
  .header {
    position: relative;
    height: 380rpx;
    padding: 30rpx;
    box-sizing: border-box;
    .bg {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      font-size: 0;
    }
    .bg-mask {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, .7);
    }
    .search {
      position: relative;
      background: rgba(255, 255, 255, .4);
      height: 60rpx;
      border-radius: 60rpx;
      display: flex;
      align-items: center;
      .icon {
        width: 24rpx;
        height: 24rpx;
        font-size: 0;
        margin-left: 20rpx;
      }
      .text {
        flex: 1;
        color: #fff;
        margin-left: 10rpx;
        font-size: 24rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 90%;
        white-space: nowrap;
      }
    }
    .shop-info {
      position: relative;
      display: flex;
      align-items: center;
      padding-left: 170rpx;
      margin-top: 20rpx;
      height: 152rpx;
      .logo {
        position: absolute;
        top: 0;
        left: 0;
        width: 140rpx;
        height: 140rpx;
        font-size: 0;
        border: 6rpx solid #fff;
        border-radius: 50%;
        overflow: hidden;
        background: #fff;
      }
      .text-box {
        flex: 1;
        margin-right: 30rpx;
        .name {
          font-size: 32rpx;
          font-weight: 600;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          color: #fff;
        }
        .focus-box {
          margin-top: 10rpx;
          display: flex;
          align-items: center;
          .self {
            padding: 2rpx 6rpx;
            line-height: 20rpx;
            color: #fff;
            background: #fc1b35;
            border-radius: 4rpx;
            margin-right: 10rpx;
            font-size: 20rpx;
          }
          .focus {
            font-size: 22rpx;
            color: #fff;
          }
        }
      }
      .collect {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 120rpx;
        height: 48rpx;
        color: #fff;
        background: #fc1b35;
        border-radius: 60rpx;
        .img {
          width: 24rpx;
          height: 24rpx;
          font-size: 0;
          margin-right: 6rpx;
        }
        .text {
          font-size: 24rpx;
          font-weight: 600;
          line-height: 24rpx;
        }
      }
    }
  }
}

/* 店铺商品-筛选栏 */
.component-shop-head {
  .header {
    .sortbar {
      font-size: 12px;
      position: relative;
      display: flex;
      align-items: center;
      color: #fff;
      margin-top: 40rpx;
      .item {
        flex: 1;
        text-align: center;
        height: 46rpx;
        line-height: 46rpx;
        font-size: 26rpx;
        font-weight: 600;
        position: relative;
        .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;
        }
        .arrow.cur {
          margin-top: 10rpx;
          border-top: 8rpx solid transparent;
          border-bottom: 8rpx solid #fff;
        }
      }
      .item.active {
        background: #fff;
        border-radius: 40rpx;
        color: #fc1b35;
        .arrow {
          border-top: 8rpx solid #fc1b35;
        }
        .arrow.cur {
          border-top: 8rpx solid transparent;
          border-bottom: 8rpx solid #fc1b35;
        }
      }
      .list-style {
        width: 32rpx;
        height: 32rpx;
        font-size: 0;
        padding: 0 10rpx 0 40rpx;
        border-left: 2rpx solid #999;
        margin-left: 40rpx;
      }
    }
  }
}

/* 清除搜索关键字 */
.clear-key {
  display: block;
  line-height: 1em;
  padding: 2rpx 8rpx;
  border-radius: 50%;
  background: #bbb;
  color: #6a6a6a;
  margin-left: 40rpx;
  margin-right: 30rpx;
  font-size: 26rpx;
}
