/* Hero CSS-only 直接替换版
   只负责 Hero 显示效果
   不修改 PHP / JS / 图片
*/

.zzhome-hero-slider {
  position: relative;
  overflow: hidden;
}

.zzhero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.zzhero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.zzhero-slide.is-active {
  opacity: 1;
}

/* 第二张狗+胸背场景优化 */
.zzhero-slide:nth-child(2) {
  background-position: 60% center;
}

/* 第三张保持 */
.zzhero-slide:nth-child(3) {
  background-position: center center;
}

/* Hero遮罩 */
.zzhome-hero-slider::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(248, 241, 232, 0.97) 0%,
    rgba(248, 241, 232, 0.93) 19%,
    rgba(248, 241, 232, 0.78) 33%,
    rgba(248, 241, 232, 0.4) 46%,
    rgba(248, 241, 232, 0.12) 56%,
    rgba(248, 241, 232, 0) 66%
  );
  z-index: 1;
  pointer-events: none;
}

/* 保留唯一底部圆点 */
.zzhero-dots-main,
.zzhero-dots[data-main-hero-dots] {
  position: absolute;
  left: 50%;
  bottom: 25px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 5;
}

.zzhero-dots-main button,
.zzhero-dots[data-main-hero-dots] button {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(9, 77, 61, 0.32);
  background: #f6f0e8;
  padding: 0;
  cursor: pointer;
}

.zzhero-dots-main button.active,
.zzhero-dots[data-main-hero-dots] button.active {
  background: #0b5b49;
  border-color: #0b5b49;
}

/* Hero高度保持 */
.zzhome-hero-slider {
  min-height: 700px;
}
@media (max-width: 768px) {
  /* 整体 */

  .zzhome-hero-slider {
    display: flex !important;

    flex-direction: column !important;

    height: auto !important;

    min-height: 0 !important;

    overflow: hidden !important;

    background: #f8f1e8 !important;
  }

  /* 去掉PC遮罩 */

  .zzhome-hero-slider::before {
    display: none !important;
  }

  /* =====================
   文字区域
===================== */

  .zzhome-hero-slider .zzhome-shell {
    order: 1 !important;
  }

  .zzhome-hero-slider .zzhome-hero-inner {
    position: relative !important;

    inset: auto !important;

    display: block !important;

    padding-top: 0 !important;
  }

  /* =====================
   图片区域
===================== */

  .zzhero-slides {
    order: 2 !important;

    position: relative !important;

    inset: auto !important;

    width: 100% !important;

    height: 260px !important;

    overflow: hidden !important;
  }

  .zzhero-slide {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;

    height: 100% !important;

    opacity: 0 !important;

    background-size: cover !important;

    background-repeat: no-repeat !important;

    background-color: #f8f1e8 !important;
  }

  .zzhero-slide.is-active {
    opacity: 1 !important;
  }

  /* 第一张 */

  .zzhero-slide:nth-child(1) {
    background-image: url("../images/home-slider/hero-mobile-1.webp") !important;

    background-position: center center !important;
  }

  /* 第二张 狗 */

  .zzhero-slide:nth-child(2) {
    background-image: url("../images/home-slider/hero-mobile-2.webp") !important;

    background-position: 30% center !important;
  }

  /* 第三张 猫砂盆 */
  .zzhero-slide:nth-child(3) {
    background-image: url("../images/home-slider/hero-mobile-3.webp") !important;

    background-position: 65% center !important;
  }

  /* =====================
   圆点
===================== */

  .zzhero-dots-main,
  .zzhero-dots[data-main-hero-dots] {
    order: 3 !important;

    position: relative !important;

    left: auto !important;

    bottom: auto !important;

    transform: none !important;

    width: 100% !important;

    height: 40px !important;

    display: flex !important;

    justify-content: center !important;

    align-items: center !important;
  }
}