/*
 * 钱包站 hero 区布局修正
 *
 * 问题：原模板 hero 主视觉是透明底PNG（局部主体+ 浅色背景透出），
 *      换成实拍 JPG 后整幅不透明且尺寸更大，把 hero 标题文字完全盖住
 *      （实测：一革一纹 / 你的专属皮具 不可见）。
 *
 * 方案：不动原模板样式，只对 hero 图片容器限定宽度并靠右，
 *      让左侧文字区保持干净可读。不影响其他区块。
 */

@media (min-width: 992px) {
  /* 主视觉容器：限定宽度 + 右移，给左侧文字让出空间 */
  section.hero_area.style_two .hero_left_wrapper {
    left: auto;
    right: 4%;
    top: 50%;
    transform: translateY(-50%);
    max-width: 34%;
    z-index: 1;
  }

  /* 主图本身：按容器宽度缩放，避免高分辨率实拍图撑爆版面 */
  section.hero_area.style_two .hero_left_img {
    max-width: 100%;
    line-height: 0;
  }

  section.hero_area.style_two .hero_left_img > img {
    width: 100%;
    max-width: 100%;
    height: auto !important;
    display: block;
  }

  /* 装饰件处理说明：
     原模板这些位置放的是带PRINTMAX 品牌标识的立方体、带"Package/Mockup"
     烧字的胶囊角标 —— 都不能留。硬造替代图反而会压住主图（实测重叠）。
     所以直接隐藏，只保留干净的主视觉图与文字。
     勾线点阵（.hero_wrappe_shpa）和返回顶部按钮不受影响。 */
  section.hero_area.style_two .hero_left_img img {
    /*主视觉以外的装饰图：直接隐藏 */
    display: none;
  }

  /* 主视觉（直接子元素的第一张）单独恢复显示 */
  section.hero_area.style_two .hero_left_img > img {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 420px;
    height: auto !important;
    border-radius: 4px;
    box-shadow: 0 18px 44px rgba(20, 40, 35, 0.16);
  }

  /* 隐藏承载旧装饰件的容器（其背景图是原模板的纹理拼贴，会形成脏色块） */
  section.hero_area.style_two .hero_left_img > div {
    display: none;
  }

  /* 左侧文字区提升层级，确保压在图上方且可读 */
  section.hero_area.style_two .hero_content.style_two {
    position: relative;
    z-index: 5;
    max-width: 50%;
  }

  /* 文字加一点柔和投影，提升在浅色/图片上的对比度 */
  section.hero_area.style_two .hero_content.style_two h1,
  section.hero_area.style_two .hero_content.style_two h4 {
    text-shadow: 0 2px 18px rgba(255, 255, 255, 0.85),
                 0 1px 3px rgba(255, 255, 255, 0.9);
  }
}

/* 平板：图移到文字下方，避免互相挤压 */
@media (min-width: 768px) and (max-width: 991px) {
  section.hero_area.style_two .hero_left_wrapper {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    margin: 30px auto 0;
    max-width: 60%;
  }
  section.hero_area.style_two .hero_content.style_two {
    position: relative;
    z-index: 5;
    text-align: center;
  }
  section.hero_area.style_two .hero_content.style_two h1,
  section.hero_area.style_two .hero_content.style_two h4 {
    text-shadow: 0 2px 18px rgba(255, 255, 255, 0.85);
  }
}

/* 手机：图在文字下方，缩小避免过长滚动 */
@media (max-width: 767px) {
  section.hero_area.style_two .hero_left_wrapper {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    margin: 24px auto 0;
    max-width: 78%;
  }
  section.hero_area.style_two .hero_left_img {
    position: relative;
    width: 100%;
  }
  section.hero_area.style_two .hero_left_img > img {
    width: 100%;
    height: auto;
  }
  /* 手机上装饰小图收敛，避免拥挤遮挡 */
  section.hero_area.style_two .img_two,
  section.hero_area.style_two .img_wrapper_two {
    display: none;
  }
  section.hero_area.style_two .hero_content.style_two {
    position: relative;
    z-index: 5;
  }
  section.hero_area.style_two .hero_content.style_two h1,
  section.hero_area.style_two .hero_content.style_two h4 {
    text-shadow: 0 2px 14px rgba(255, 255, 255, 0.9);
  }
}