page {
  //background: url('https://oss.wsdns.cn/20250621/33ca4ca532e647bc918a59d01f5d88a9.jpg?x-oss-process=image/resize,m_fixed,w_2000/quality,Q_90') no-repeat top center;
  //background-size: 100%;
  background: linear-gradient(to bottom, #e9fff2, #ffffff);
}

.home-page {
  padding: 24rpx 24rpx calc(32rpx + env(safe-area-inset-bottom));
}

.home-hero {
  position: relative;
  overflow: hidden;
  border-radius: 28rpx;
  background: linear-gradient(180deg, #bfefff 0%, #eafaff 40%, #fff7ec 100%);
  box-shadow: 0 18rpx 36rpx rgba(0, 0, 0, 0.06);
}

.home-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(360rpx 240rpx at 18% 16%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)),
    radial-gradient(320rpx 220rpx at 84% 18%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)),
    linear-gradient(180deg, rgba(0, 207, 255, 0.12), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.home-hero__content {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 18rpx;
  padding: 26rpx 24rpx 28rpx;
  min-height: 320rpx;
}

.home-hero__left {
  flex: 1;
  min-width: 0;
}

.home-hero__topRow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16rpx;
}

.home-hero__brand {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 8rpx 14rpx;
  border-radius: 999rpx;
  background: rgba(255, 214, 84, 0.92);
  color: #2a2a2a;
  font-weight: 700;
  font-size: 24rpx;
  line-height: 1;
}

.home-hero__brandText {
  line-height: 1;
}

.home-hero__tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 10rpx 18rpx;
  border-radius: 18rpx;
  background: linear-gradient(90deg, #22d64a 0%, #7df4b0 100%);
  box-shadow: 0 14rpx 24rpx rgba(36, 202, 148, 0.22);
}

.home-hero__tagText {
  font-size: 56rpx;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
}

.home-hero__date {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10rpx 14rpx;
  border-radius: 999rpx;
  background: rgba(255, 255, 255, 0.75);
}

.home-hero__dateText {
  font-size: 26rpx;
  font-weight: 700;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-hero__headline {
  margin-top: 22rpx;
}

.home-hero__headlineText {
  display: block;
  font-size: 42rpx;
  font-weight: 900;
  color: #0b0b0b;
  letter-spacing: 0.5px;
  line-height: 1.15;
}

.home-hero__right {
  width: 200rpx;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.home-hero__bottle {
  position: relative;
  width: 190rpx;
  height: 250rpx;
  border-radius: 28rpx;
  background:
    radial-gradient(240rpx 360rpx at 60% 30%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.18)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.1));
  border: 2rpx solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 18rpx 36rpx rgba(0, 0, 0, 0.12);
}

.home-hero__bottleCap {
  position: absolute;
  top: 14rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 88rpx;
  height: 26rpx;
  border-radius: 999rpx;
  background: linear-gradient(180deg, #d7e6f3, #b0cadd);
  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.12);
}

.home-hero__bottleLabel {
  position: absolute;
  left: 18rpx;
  right: 18rpx;
  bottom: 30rpx;
  padding: 12rpx 12rpx;
  border-radius: 18rpx;
  background: linear-gradient(90deg, rgba(0, 150, 255, 0.18), rgba(0, 255, 210, 0.18));
  border: 2rpx solid rgba(255, 255, 255, 0.45);
}

.home-hero__bottleLabelText {
  font-size: 30rpx;
  font-weight: 800;
  color: rgba(0, 80, 140, 0.95);
  text-align: center;
  display: block;
}

.ticket-card {
  margin-top: 18rpx;
  border-radius: 22rpx;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 18rpx 36rpx rgba(0, 0, 0, 0.06);
}

.ticket-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18rpx 20rpx;
  background: linear-gradient(90deg, #22d64a 0%, #2fa560 100%);
}

.ticket-card__title {
  color: #ffffff;
  font-weight: 800;
  font-size: 28rpx;
}

.ticket-card__count {
  color: rgba(255, 255, 255, 0.92);
  font-size: 28rpx;
}

.ticket-card__countNum {
  color: #ffffff;
  font-weight: 900;
}

.ticket-card__body {
  padding: 20rpx 10rpx 22rpx;
}

.shortcut-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12rpx;
}

.shortcut-grid__item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
}

.shortcut-grid__icon {
  width: 88rpx;
  height: 88rpx;
  border-radius: 18rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #20c26a;
  border: 2rpx solid rgba(32, 194, 106, 0.35);
}

.shortcut-grid__text {
  font-size: 24rpx;
  color: #333333;
}

.home-tabs {
  margin-top: 18rpx;
}

.home-tabs__inner {
  display: flex;
  gap: 18rpx;
  padding: 0 4rpx;
}

.home-tabs__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10rpx 18rpx;
  border-radius: 999rpx;
  background: transparent;
}

.home-tabs__item--active {
  background: rgba(32, 194, 106, 0.16);
}

.home-tabs__itemText {
  font-size: 28rpx;
  color: #2a2a2a;
  white-space: nowrap;
}

.home-tabs__item--active .home-tabs__itemText {
  color: #16b65a;
  font-weight: 800;
}

.goods-grid {
  margin-top: 18rpx;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18rpx;
}

.goods-card {
  border-radius: 22rpx;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 18rpx 36rpx rgba(0, 0, 0, 0.06);
}

.goods-card__imgWrap {
  padding: 18rpx 18rpx 0;
}

.goods-card__img {
  width: 100%;
  height: 280rpx;
  border-radius: 18rpx;
  background: #f4f4f4;
}

.goods-card__body {
  padding: 18rpx 18rpx 20rpx;
}

.goods-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 26rpx;
  font-weight: 700;
  color: #1c1c1c;
  min-height: 72rpx;
}

.goods-card__meta {
  margin-top: 10rpx;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10rpx;
}

.goods-card__sold {
  font-size: 22rpx;
  color: #9a9a9a;
  white-space: nowrap;
}

.goods-card__price {
  display: flex;
  align-items: baseline;
  gap: 4rpx;
  color: #27c86b;
  white-space: nowrap;
}

.goods-card__priceUnit {
  font-size: 22rpx;
  font-weight: 800;
}

.goods-card__priceValue {
  font-size: 36rpx;
  font-weight: 900;
}

.goods-card__actions {
  margin-top: 16rpx;
  display: flex;
  gap: 14rpx;
}

.goods-card__btn {
  flex: 1;
  height: 64rpx;
  border-radius: 999rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.goods-card__btn--ghost {
  border: 2rpx solid rgba(32, 194, 106, 0.7);
  background: #ffffff;
}

.goods-card__btn--primary {
  background: linear-gradient(90deg, #24d34c 0%, #6df09a 100%);
}

.goods-card__btnText {
  font-size: 24rpx;
  font-weight: 700;
  color: #18b85a;
  white-space: nowrap;
}

.goods-card__btnText--primary {
  color: #ffffff;
}

.buy-btn{
  height: 70px;
  background: linear-gradient(to bottom, #1cd98a, #24ca94);
  border-radius: 100px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .cart-icon{
    background: linear-gradient(to bottom, #bbe094, #4ee265);
    border-radius: 100px 0 0 100px;
    height: 70px;
  }
}

/* 轮播图容器样式，确保支持两种滑动操作 */
.banner-swiper-container {
  touch-action: pan-y !important; /* 允许垂直滑动 */

  .nut-swiper {
    touch-action: pan-y !important; /* 允许垂直滑动 */

    .nut-swiper-item {
      touch-action: pan-x pan-y !important; /* 允许水平和垂直滑动 */

      image {
        pointer-events: auto; /* 确保图片点击事件正常 */
        touch-action: manipulation; /* 优化触摸操作 */
      }
    }
  }

  /* 为Swiper容器添加特殊处理 */
  .nut-swiper--horizontal {
    touch-action: pan-y !important; /* 允许垂直滑动 */
  }
}

/* 吸顶状态下的样式 */
.nutui-sticky--fixed {
  .header-bg {
    height: 100%;
  }
}

/* 为Swiper添加更精确的触摸控制 */
.nut-swiper {
  touch-action: pan-y !important;

  .nut-swiper-inner {
    touch-action: pan-x pan-y !important;
  }
}

/* 自定义Swiper样式 */
.custom-swiper {
  touch-action: pan-y !important;

  .nut-swiper-item {
    touch-action: pan-x pan-y !important;
  }
}

/* 确保Swiper内部元素不会阻止页面滚动 */
.banner-swiper-container,
.custom-swiper,
.nut-swiper,
.nut-swiper-item {
  -webkit-overflow-scrolling: touch; /* iOS平台启用硬件加速滚动 */
}