/* ==================== HEADER ==================== */
header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 23px 15px; /* 左右 padding 15px，与屏幕边缘有间隔 */
  background-color: transparent;
}

header .blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

header.scrolled .blur {
  opacity: 1;
}

header .parent {
  position: relative;
  width: 100%; /* 宽度 100% */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header .left {
  display: flex;
  align-items: center;
}

header .logo-link {
  display: inline-block;
}

header .logo {
  height: 26px;
  width: auto;
  display: block;
  object-fit: contain;
}

header .shopcart-link {
  display: inline-flex;
  align-items: center;
  padding: 5px;
  margin-right: 20px;
}

header .shopcart-icon {
  width: 24px;
  height: 24px;
  display: block;
  object-fit: contain;
}

header .right {
  display: flex;
  align-items: center;
}

header .links {
  display: flex;
  align-items: center;
  gap: 20px; /* 菜单项间距改为 20px */
  list-style: none;
}

header .links a {
  position: relative;
  color: var(--text-light);
  text-decoration: none;
  font-size: 0.875em; /* 14px (14/16 = 0.875em) */
  font-weight: 400;
  font-family: var(--font-family-chillax-semibold); /* 使用 Chillax-Semibold 字体 */
  transition: var(--transition-base);
  padding: 5px 0;
  text-transform: uppercase;
}

header .links a .line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--text-light);
  transition: width var(--transition-base);
}

header .links a:hover .line {
  width: 100%;
}

header .lang-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 20px;
  position: relative;
}

header .lang-switch .white-circle {
  position: absolute;
  left: -10px;
  width: 8px;
  height: 8px;
  background: var(--text-primary);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s;
}

header .lang-switch .lang.active .white-circle {
  opacity: 1;
}

header .lang-switch .lang a {
  color: var(--text-primary);
  text-decoration: none;
  font-size: 18px;
}

header .lang-switch .slash {
  width: 1px;
  height: 16px;
  background: var(--text-primary);
  opacity: 0.3;
}

header .burger {
  display: none;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  margin-left: 20px;
  padding: 5px;
  align-items: flex-start;
}

header .burger .line {
  background: var(--text-light);
  transition: var(--transition-base);
  display: block;
}

header .burger .line-1,
header .burger .line-2 {
  width: 30px;
  height: 1px;
}

/* ==================== HOME HERO ==================== */
.home-hero {
  position: relative;
  width: 100%;
  /* 不设置固定高度，由内部元素的 margin/padding 决定 */
  overflow: hidden;
  background-color: var(--bg-dark);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* hero 全屏，不需要 padding */
}

.home-hero .hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  transform: scale(1.17) translateY(-1.93%);
  will-change: transform;
  z-index: 0;
}

.home-hero .back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(360deg, 
    var(--bg-dark) 20.29%, 
    rgba(25, 86, 73, 0.79) 40.44%, 
    rgba(25, 86, 73, 0.47) 50.34%, 
    rgba(25, 86, 73, 0.15) 75.89%, 
    rgba(25, 86, 73, 0) 90.83%);
  z-index: 1;
  pointer-events: none;
}

.home-hero .parent {
  position: relative;
  z-index: 10;
  width: auto; /* 宽度由内容决定 */
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 不设置固定高度，由内容决定 */
}

.home-hero .title-block {
  text-align: center;
  margin-bottom: 0;
  width: auto; /* 宽度由内容决定，文字换行处理 */
}

.home-hero .title-block h1 {
  font-size: clamp(60px, 12vw, 100px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--text-light);
  margin: 0;
  margin-top: 35vh; /* 参考 mova.beer，使用 35vh */
  font-family: var(--font-family-chillax-semibold);
}

.home-hero .title-block h1 span {
  display: inline-block;
}

.home-hero .cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列 grid 布局 */
  gap: 15px; /* card 之间的间隔 15px */
  width: auto; /* 宽度由内容决定 */
  justify-items: center; /* 内容居中 */
  margin-top: 62px; /* 参考 mova.beer 的间距 */
  margin-bottom: 0;
  padding-bottom: 80px; /* 底部留白 */
}

.home-hero .card {
  background: var(--bg-card);
  backdrop-filter: blur(10px);
  border: none;
  padding: 30px; 
  text-decoration: none;
  color: var(--text-primary);
  transition: background-color 0.3s ease;
  opacity: 1;
  /* 不设置初始 transform，由 GSAP 控制 */
  will-change: transform, opacity;
}

.home-hero .card:hover {
  background: rgba(235, 226, 210, 0.9);
  /* 只改变背景色，不移动位置 */
}

.home-hero .card .child {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 上面段落靠顶，下面段落靠底 */
  min-height: 100%; /* 确保占满 card 高度 */
}

.home-hero .card .font-d-60-w {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
  color: var(--text-primary);
  width: 342px; /* 段落固定宽度 342px */
} 

.home-hero .card .font-n-16-g {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--text-secondary);
  margin: 0;
  width: 342px; /* 段落固定宽度 342px */
  margin-top: auto; /* 推到底部 */
  padding-top: 180px;
}

/* 删除箭头图标样式 */

/* ==================== HOME ABOUT ==================== */
.home-about {
  padding: 80px 15px; /* 板块上下 80px，左右 15px */
  background-color: transparent; /* 继承网页背景色 #195649 */
}

.home-about .container-fluid {
  max-width: 100%; /* 移除宽度限制，让内容更宽 */
  margin: 0 auto;
  padding: 0 15px; /* 内部左右间距 */
}

.home-about .padding-15-15 {
  padding: 0px 15px; /* 参考 mova 网站：只有左右 padding */
}

.home-about .m-padding-20 {
  padding: 20px;
}

.home-about .top-text {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-light); /* 使用 light 颜色 */
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 40px;
  text-align: center; /* 水平居中 */
  opacity: 0;
  transform: translateY(20px);
}

/* 移除 title-section，标题现在在 row 内的 col-xs-12 中 */

.home-about .row {
  display: flex; /* 使用 flex 布局，参考 mova.beer */
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  align-items: stretch; /* 让所有列拉伸到相同高度 */
}

/* 左列：33.333% */
.home-about .col-lg-4 {
  flex: 0 0 33.3333333333%;
  max-width: 33.3333333333%;
  padding: 0 15px !important; /* 只有左右 padding 15px，不要上下，使用 !important 覆盖 col-sm-7 的 padding */
  position: relative;
  min-height: 1px;
  display: flex; /* 使用 flex 让内容可以拉伸 */
  flex-direction: column;
}

/* 中列：41.666% */
.home-about .col-lg-5 {
  flex: 0 0 41.6666666667%;
  max-width: 41.6666666667%;
  padding: 0 15px !important; /* 只有左右 padding 15px，不要上下，使用 !important 覆盖 col-sm-5 的 padding */
  position: relative;
  min-height: 1px;
}

/* 右列：25% */
.home-about .col-lg-3 {
  flex: 0 0 25%;
  max-width: 25%;
  padding: 0 15px !important; /* 只有左右 padding 15px，不要上下，使用 !important 覆盖 col-sm-12 的 padding */
  position: relative;
  min-height: 1px;
}

/* 第一行：标题列，占满 100% 宽度 */
.home-about .col-xs-12 {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 15px; /* 左右 padding 15px */
  position: relative;
  min-height: 1px;
  text-align: center; /* 标题水平居中 */
  /* margin-bottom 移到 overflow-hidden 上 */
}

/* 移动端和响应式列样式保留 */
.home-about .col-md-4,
.home-about .col-sm-7,
.home-about .col-sm-5,
.home-about .col-sm-12 {
  padding: 15px;
}

.home-about .overflow-hidden {
  overflow: hidden;
  margin-bottom: 80px; /* 从 col-xs-12 移到这里 */
}

.home-about .font-d-100-w {
  font-size: 60px; /* 改为 60px */
  font-family: var(--font-family-chillax-semibold); /* 使用 Chillax-Semibold 字体 */
  font-weight: 600; /* Semibold 对应的 weight */
  line-height: 1.1;
  color: var(--text-light); /* 使用 light 颜色 */
  margin: 0; /* 移除 margin，由 title-section 控制间距 */
}

.home-about .font-d-100-w span {
  display: inline-block;
}

/* lazy-image-parent - 参考 mova 网站，只保留基本样式 */
.home-about .lazy-image-parent {
  overflow: hidden;
}

/* 图片宽度设置 - 参考 mova 网站 */
.home-about .lazy-image-parent.image-1 {
  width: 100%;
}

.home-about .lazy-image-parent.image-2 {
  width: 60%;
}

.home-about .lazy-image-parent.image-4 {
  width: 100%;
}

/* clip - 参考 mova 网站，移除所有固定高度设置 */
/* 只保留默认的 block 显示，不设置任何高度相关属性 */

/* 图片 - 参考 mova 网站，使用自然高度 */
.home-about .lazy-image-parent img {
  width: 100%;
  height: auto; /* 使用自然高度 */
  display: block; /* 移除图片底部间隙 */
  object-fit: cover; /* 如果需要裁剪效果 */
}

.home-about .font-n-36-w {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 300;
  line-height: 1.4;
  color: var(--text-light); /* 使用 light 颜色 */
  margin: 0 0 30px 0;
}

.home-about .font-n-16-g {
  font-size: 16px;
  font-weight: 400;

  color: var(--text-light); /* 使用 light 颜色 */
}

/* 文字段落最大宽度设置 - 参考 mova 网站 */
.home-about .text-1 {
  max-width: 60%;
  margin-top: 25px;
}

.home-about .text-2 {
  max-width: 80%;
  margin-top: 100px;
  font-size: 2.25em; /* 36px（如果基准字体是 16px） */
  line-height: 1.2;
  text-transform: uppercase; /* 文字全部大写 */
}

.home-about .simple-anim-global-text {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
}

.home-about .for-flex {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-direction: column;
  flex-wrap: wrap;
}

/* 文字和按钮组合，作为一个整体 */
.home-about .text-button-group {
  display: flex;
  flex-direction: column;
  height: 100%; /* 确保容器有高度 */
}

/* PC 端：text-4 在上，detail button 在中，image-4 在下 */
.home-about .text-button-group .text-4 {
  order: 1;
}

.home-about .text-button-group .detail {
  order: 2;
}

.home-about .text-button-group .image-4 {
  order: 3;
  margin-top: auto; /* PC端：让 image-4 在底部 */
}

.home-about .for-mobile-structure {
  margin-bottom: 30px;
}

.home-about .line-anim {
  width: 1px;
  background: var(--text-secondary);
  opacity: 0.2;
  margin-bottom: 30px;
}

/* 最右列的 line-anim - 参考 mova 网站 */
.home-about .last {
  position: relative; /* 为绝对定位的 line-anim 提供定位上下文 */
}

.home-about .last .line-anim {
  position: absolute;
  width: 1px;
  height: 100%; /* 适应列的高度 */
  background: rgba(255, 255, 255, 0.2);
  opacity: 0.5; /* 透明度改为 0.5 */
  top: 0;
  left: 0;
  margin-bottom: 0; /* 移除 margin，因为使用绝对定位 */
}

.home-about .detail {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-light);
  text-decoration: none;
  font-size: 1.25em; /* 20px（如果基准字体是 16px） */
  margin-top: 20px;
  opacity: 0;
  transform: translateY(30px);
  transition: var(--transition-base);
  padding: 12px 20px; /* 左右间距一致 */
  border: 2px solid rgba(255, 255, 255, 0.5); /* 边框改为 2px */
  border-radius: 32px; /* 圆角 */
  background: transparent; /* 透明背景 */
}

.home-about .detail:hover {
  gap: 15px;
}

.home-about .detail:hover .arrow-icon {
  transform: translateX(5px); /* hover 时箭头向右移动，保持动画效果 */
}

/* 箭头样式和位置 */
.home-about .detail .arrow-icon {
  width: 23px;
  height: 18px;
  margin-left: auto; /* 箭头靠右 */
  transition: transform 0.3s ease; /* 添加过渡动画 */
}

.home-about .hide-1,
.home-about .hide-2 {
  display: none;
}

/* ==================== MOBILE MENU ==================== */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #16322c;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-100%);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
  overflow-y: auto;
  padding: 0 0 100px;
  display: none;
}

.mobile-menu.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.mobile-menu .close-menu-block {
  position: absolute;
  top: 23px;
  right: 20px;
  z-index: 10000;
  cursor: pointer;
}

.mobile-menu .close-menu {
  width: 30px;
  height: 30px;
  display: block;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.mobile-menu .close-menu:hover {
  opacity: 0.7;
}

.mobile-menu .menu-content {
  padding: 80px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.mobile-menu .menu-links {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.mobile-menu .menu-link {
  color: var(--text-light);
  text-decoration: none;
  font-size: 24px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: var(--transition-base);
  opacity: 0;
  transform: translateY(20px);
}

.mobile-menu.active .menu-link {
  animation: menuItemFadeIn 0.6s ease forwards;
}

.mobile-menu.active .menu-link:nth-child(1) {
  animation-delay: 0.1s;
}

.mobile-menu.active .menu-link:nth-child(2) {
  animation-delay: 0.2s;
}

.mobile-menu.active .menu-link:nth-child(3) {
  animation-delay: 0.3s;
}

.mobile-menu.active .menu-link:nth-child(4) {
  animation-delay: 0.4s;
}

.mobile-menu .menu-link:hover {
  opacity: 0.7;
}

@keyframes menuItemFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .home-about .col-lg-4,
  .home-about .col-lg-5,
  .home-about .col-lg-3 {
    width: 50%;
  }
}

@media (max-width: 768px) {
  /* Header 移动端样式 */
  header {
    padding: 23px 15px; /* 移动端也使用 15px，与屏幕边缘有间隔 */
  }

  header .links {
    gap: 0;
  }

  /* 移动端隐藏所有导航文字链接，但保留购物车图标 */
  header .links > a.font-n-18 {
    display: none !important;
  }

  /* 移动端显示购物车图标 */
  header .shopcart-link {
    display: inline-flex !important;
    margin-right: 15px;
  }

  /* 显示汉堡菜单 */
  header .burger {
    display: flex;
    margin-left: 0;
    gap: 8px;
  }

  /* 移动端 burger 菜单线条样式 */
  header .burger .line-1,
  header .burger .line-2 {
    width: 30px;
    height: 2px;
    background: var(--text-light);
  }

  /* 显示移动端菜单 */
  .mobile-menu {
    display: block;
  }

  /* 确保右侧区域正确对齐 */
  header .right {
    margin-left: auto;
  }

  /* Hero 移动端样式 */

  .home-hero .parent {
    padding: 0;
    width: auto; /* 宽度由内容决定 */
  }

  .home-hero .title-block {
    margin-bottom: 0;
  }

  .home-hero .title-block h1 {
    font-size: 50px;
    line-height: 1.1;
    margin-top: 20vh; /* 移动端使用 20vh，参考 mova.beer */
  }

  .home-hero .cards {
    display: grid;
    grid-template-columns: 1fr; /* 移动端单列 */
    gap: 15px; /* 移动端 card 间隔 15px */
    width: auto; /* 宽度由内容决定 */
    margin-top: 40px; /* 移动端间距 */
    padding-bottom: 60px; /* 移动端底部留白 */
  }

  .home-hero .card {
    /* 移动端使用全宽，避免最小宽度限制 */
    width: 100%;
    min-width: auto;
    padding: 0;
    margin: 0 0 15px 0;
  }

  .home-hero .card .font-d-60-w {
    font-size: 20px;
    line-height: 1.4;
    width: 342px; /* 段落固定宽度 342px */
    padding: 15px 15px 0 15px; /* 移动端 padding 改为 15px */
  }

  .home-hero .card .font-n-16-g {
    font-size: 14px;
    width: 342px; /* 段落固定宽度 342px */
    padding: 0 15px 15px 15px; /* 移动端 padding 改为 15px */
    margin-top: auto; /* 推到底部 */
  }

  /* About 移动端样式 */
  .home-about {
    padding: 0; /* 移动端全屏，padding 改为 0 */
    padding-bottom: 40px; /* 移动端底部间距 */
  }

  .home-about .container-fluid {
    padding: 0 15px; /* 移动端内部左右间距 */
  }

  .home-about .padding-15-15 {
    padding: 15px 0;
  }

  .home-about .m-padding-0 {
    padding: 0;
  }

  .home-about .m-padding-20 {
    padding: 20px;
  }

  /* 移动端 row 改为单列布局 */
  .home-about .row {
    display: flex;
    flex-direction: column; /* 移动端单列 */
  }

  .home-about .col-xs-12 {
    padding: 0 !important; /* 删除移动端 padding */
  }

  /* col-lg-4 移动端：全屏图片，padding 为 0 */
  .home-about .col-lg-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important; /* padding 改为 0，不继承 PC 端的 padding: 0 15px !important */
  }

  /* col-lg-5 移动端：宽度和 card 一致（342px + padding 30px） */
  .home-about .col-lg-5 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important; /* padding 改为 0，不继承 PC 端的 padding: 0 15px !important */
    display: flex;
    flex-direction: column;
    align-items: center; /* 内容居中 */
  }

  /* col-lg-3 移动端 */
  .home-about .col-lg-3 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important; /* padding 改为 0，不继承 PC 端的 padding: 0 15px !important */
  }

  /* 其他响应式列 */
  .home-about .col-sm-7,
  .home-about .col-sm-5,
  .home-about .col-sm-12,
  .home-about .col-md-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 15px 0 !important; /* 移动端上下 padding，使用 !important 确保生效 */
  }

  .home-about .font-d-100-w {
    font-size: 36px;
    /* margin-bottom: 40px; 删除 */
  }

  /* 移动端：overflow-hidden 的 margin-bottom 改为 40px */
  .home-about .overflow-hidden {
    margin-bottom: 40px !important; /* 移动端改为 40px */
  }

  .home-about .font-n-36-w {
    font-size: 24px;
  }

  .home-about .font-n-16-g {
    font-size: 16px;
  }

  .home-about .top-text {
    font-size: 12px;
    margin-bottom: 30px;
  }

  .home-about .hide-1 {
    display: block;
  }

  .home-about .hide-2 {
    display: none;
  }

  .home-about .for-flex {
    flex-direction: column;
  }

  /* 移动端：调整布局，第一段文字在 image-2 上面 */
  .home-about .for-mobile-structure {
    margin-bottom: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* 内容居中 */
  }

  /* 移动端：text-1 段落放在 image-2 上面，宽度改为 100% */
  .home-about .for-mobile-structure .text-1 {
    order: -1; /* 放在 image-2 上面 */
    width: 100% !important; /* 改为 100%，不指定固定宽度 */
    /* padding: 0 30px; 删除 */
    margin-top: 0;
    margin-bottom: 20px;
    max-width: 100%; /* 覆盖桌面端的 max-width: 60% */
  }

  /* 移动端：image-2 宽度改为 100% */
  .home-about .for-mobile-structure .lazy-image-parent.image-2 {
    width: 100% !important; /* 改为 100%，不指定固定宽度 */
    padding: 0; /* 删除 padding */
    margin: 0 auto; /* 居中 */
  }

  /* 移动端：text-2 在 image-2 下面，宽度改为 100% */
  .home-about .col-lg-5 .text-2 {
    width: 100% !important; /* 改为 100%，不指定固定宽度 */
    /* padding: 0 30px; 删除 */
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%; /* 覆盖桌面端的 max-width: 80% */
  }

  .home-about .lazy-image-parent {
    margin-bottom: 0;
  }

  /* 移动端也移除 padding-bottom，使用自然高度 */

  .home-about .line-anim {
    display: none;
  }

  /* 移动端 col-lg-3：调整 text-button-group 内元素顺序 */
  /* text-4 在上，image-4 在中，detail button 在下 */
  .home-about .text-button-group .text-4 {
    order: 1;
  }

  .home-about .text-button-group .image-4 {
    order: 2;
    margin-top: 20px !important; /* 移动端添加 20px 上边距 */
    margin-bottom: 20px; /* image-4 和 detail button 之间的间距 */
  }

  .home-about .text-button-group .detail {
    order: 3;
    margin-top: 0; /* 移动端移除 margin-top，因为已经在 image-4 下面 */
  }
}

/* 超小屏幕优化 */
@media (max-width: 480px) {
  .home-hero .title-block h1 {
    font-size: 40px;
  }

  .home-hero .card {
    padding: 25px 15px;
  }

  .home-hero .card .font-d-60-w {
    font-size: 18px;
    line-height: 1.4;
  }

  .home-about .font-d-100-w {
    font-size: 32px;
  }

  .home-about .container-fluid {
    padding: 0 15px;
  }
}

/* ==================== WHY TRUEMUSH ==================== */
.home-why {
  padding: 80px 15px;
  background-color: var(--bg-card); /* #EBE2D2 */
}

.home-why .container-fluid {
  max-width: 1236px;
  margin: 0 auto;
  padding: 0;
}

.home-why .why-head {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--bg-card);
  padding-top: 20px;
  padding-bottom: 20px;
}

.home-why .top-text {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(20px);
}

.home-why .why-title {
  text-align: center;
  font-family: var(--font-family-chillax-semibold);
  font-size: 60px;
  line-height: 1.1;
  color: var(--text-primary);
  margin: 0 0 40px;
}

.home-why .why-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}

.home-why .why-card {
  display: grid; /* 一行内部 3 列等分：编号 / 文本 / 图标 */
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
  align-items: center;
  min-height: 320px;
  border-radius: 34px;
  padding: 30px 24px 24px 24px;
  color: var(--text-primary);
  overflow: hidden;
  will-change: transform;
}

.home-why .card-1 {
  background: #FFF7EC;
}

.home-why .card-2 {
  background: #D9CDB7;
}

.home-why .card-3 {
  background: #C4B497;
}

.home-why .why-card-body {
  display: contents; /* 让编号和文本直接参与父 grid 的 3 列布局 */
}

.home-why .why-number {
  font-family: var(--font-family-chillax-medium);
  font-size: 24px;
  line-height: 1.2;
  grid-column: 1;
  justify-self: flex-start;
  align-self: flex-start; /* 左上角对齐 */
}

.home-why .why-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  grid-column: 2;
  justify-self: flex-start;
  align-self: flex-start;
}

.home-why .why-card-title {
  margin: 0;
  font-family: var(--font-family-hanken-medium);
  font-size: 60px;
  line-height: 1.1;
}

.home-why .why-desc {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-family-primary);
  font-size: 18px;
  line-height: 1.4;
}

.home-why .why-desc p {
  margin: 0;
}

.home-why .why-icon {
  grid-column: 3;
  width: 100%;
  max-width: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  align-self: center; /* 居中 */
}

.home-why .why-icon img {
  width: 100%;
  height: auto;
  object-fit: contain;
  max-width: clamp(96px, 9vw, 140px);
  max-height: 140px;
}

.home-why .card-3 .why-icon img {
  max-width: clamp(110px, 10vw, 166px);
  max-height: 166px;
}

@media (min-width: 768px){
  .home-why .why-head{position:static;}
}

@media (max-width: 767px) {
  .home-why {
    padding: 80px 15px;
  }

  .home-why .why-title {
    font-size: clamp(32px, 6vw, 40px);
  }

  .home-why .why-stack {
    height: auto; /* 移动端不做叠加，按自然高度展示 */
  }

  .home-why .why-card {
    position: static;
    min-height: 0;
    border-radius: 24px;
    padding: 24px 18px 18px 18px;
    display: flex;               /* 移动端改为纵向排布 */
    flex-direction: column;
    gap: 18px;
  }

  /* 重新排布内部元素顺序与对齐 */
  .home-why .why-number{
    font-size: clamp(16px, 4.5vw, 18px);
    order: 0;
  }
  .home-why .why-card-title{
    font-size: clamp(32px, 7vw, 36px);
    order: 1;
  }
  .home-why .why-desc{
    font-size: clamp(14px, 4.2vw, 16px);
    line-height: 1.45;
    order: 2;
  }
  .home-why .why-icon{
    width: 60%;                  /* 图标缩放并居中 */
    max-width: 160px;
    align-self: center;
    order: 3;
  }

  .home-why .why-number {
    font-size: clamp(16px, 4.5vw, 18px);
  }

  .home-why .why-card-title {
    font-size: clamp(32px, 7vw, 36px);
  }

  .home-why .why-desc {
    font-size: clamp(14px, 4.2vw, 16px);
    line-height: 1.45;
  }

  .home-why .why-icon {
    width: 36%;
    max-width: none;
  }

  .home-why .why-icon img {
    max-width: clamp(96px, 28vw, 140px);
    max-height: clamp(96px, 28vw, 140px);
  }

  .home-why .card-3 .why-icon img {
    max-width: clamp(110px, 32vw, 166px);
    max-height: clamp(110px, 32vw, 166px);
  }
}

/* ---------- Footer ---------- */
/* ==================== FOOTER PC端样式 ==================== */
.site-footer{background:var(--bg-card);padding:80px 15px 15px}

.footer-main{border:1px solid var(--bg-card);border-radius:34px;background:var(--bg-dark);padding:0;overflow:hidden}

.footer-cta{border:none;border-radius:16px;background:var(--bg-card);padding:40px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;margin:32px}
.footer-cta__title{font-family:var(--font-family-hanken-medium);font-size:60px;line-height:1.2;color:var(--text-primary);margin:0;font-weight:600}
@media(max-width:767px){.footer-cta__title{font-size:clamp(28px,7vw,34px);}}
.btn-cta{padding:1.25em 1.5em;background:var(--bg-dark);color:var(--text-light);border-radius:999px;font-size:1.5em;letter-spacing:.6px;font-weight:400;transition:opacity .2s;border:none;text-decoration:none;display:inline-block;font-family:var(--font-family-chillax-regular);line-height:1}
.btn-cta:hover{opacity:.8}

.footer-content{background:var(--bg-dark);color:var(--text-light);padding:64px 32px 32px;display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.footer-logo{width:346px;margin-bottom:24px}
.footer-contact{margin:0 0 6.875em;font-size:1.5em;line-height:1.4;font-family:var(--font-family-chillax-regular);color:var(--text-light)}
.footer-slogan{font-family:var(--font-family-chillax-semibold);font-size:60px;line-height:1.1;margin:0;color:#16322C}
@media(max-width:767px){.footer-slogan{font-size:clamp(28px,7vw,36px);line-height:1.2}}
.footer-right{display:flex;flex-direction:column}
.footer-links{margin-top:5.625em}
.footer-links ul{list-style:none;padding:0 0 6.25em 0;margin:0;display:flex;flex-direction:column;gap:12px}
.footer-links a{color:var(--text-light);font-size:1.5em;font-family:var(--font-family-chillax-regular);text-decoration:none}
.footer-links a:hover{opacity:.8}
.footer-copy{font-size:1.5em;line-height:1.3;color:var(--text-light);margin:0;font-family:var(--font-family-chillax-regular)}

/* ==================== FOOTER 移动端样式 ==================== */
@media(max-width:767px){
  .site-footer{padding:0px 15px 15px}
  /* Footer CTA 移动端 */
  .footer-cta{flex-direction:column;align-items:flex-start;text-align:left;padding:32px 24px;margin:24px}
  /* Footer Content 移动端 */
  .footer-content{grid-template-columns:1fr;gap:40px;padding:48px 24px 64px}
  /* Footer Logo 移动端 - 去掉底部间距 */
  .footer-logo{margin-bottom:0}
  /* Footer Contact 移动端 - 调整底部间距为1.5em */
  .footer-contact{margin:0}
  /* Footer Left 移动端 - 使用display:contents让子元素成为grid项 */
  .footer-left{display:contents}
  /* Footer 元素顺序调整 - 让slogan显示在links下面 */
  .footer-logo{order:1}
  .footer-contact{order:2}
  .footer-right{order:3}
  .footer-slogan{order:4;margin-top:0}
  /* Footer Links 移动端 - 调整顶部间距为1.5em */
  .footer-links{margin-top:1.5em}
  /* Footer Links UL 移动端 - 调整底部内边距为1.25em */
  .footer-links ul{padding:0 0 1.25em 0}
  .footer-copy{margin-top:24px}
}

/* ==================== HOME MUSHROOMS ==================== */
.home-mushrooms {
  padding: 80px 15px; /* 与其他大模块一致 */
  background-color: var(--bg-card); /* #EBE2D2 */
}

.home-mushrooms .container-fluid {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 15px; /* 内部左右间距，与 about 一致 */
}

.home-mushrooms .top-text {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-primary) !important; /* #195649 - 确保颜色可见 */
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 40px;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
}

.home-mushrooms__wrapper {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* 左侧大图（PC端） */
.home-mushrooms__featured {
  flex: 1;
  position: relative;
  display: none; /* 移动端隐藏 */
}

.featured-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 600px;
  cursor: pointer;
}

.featured-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.featured-card:hover .featured-image {
  transform: scale(1.05);
}

.featured-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.featured-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px 40px;
  z-index: 20;
  color: var(--text-light);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.featured-title {
  font-size: clamp(28px, 3.75em, 60px); /* 响应式：移动端最小28px，PC端最大60px */
  font-weight: 300; /* Light */
  font-family: var(--font-family-hanken-light);
  line-height: 1.2;
  margin: 0;
}

.featured-price {
  font-size: clamp(18px, 1.5em, 24px); /* 响应式：移动端最小18px，PC端最大24px */
  font-weight: 500; /* Medium */
  font-family: var(--font-family-hanken-medium);
  margin: 0;
}

.featured-cart-btn {
  position: absolute;
  bottom: 30px;
  right: 40px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 30;
  text-decoration: none;
}

.featured-cart-btn img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* 移动端大图 */
.home-mushrooms__featured-mobile {
  display: block;
  margin-bottom: 20px;
}

.featured-card-mobile {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1; /* 正方形 */
  cursor: pointer;
}

.featured-image-mobile {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.featured-card-mobile:hover .featured-image-mobile {
  transform: scale(1.05);
}

.featured-overlay-mobile {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.featured-content-mobile {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  z-index: 20;
  color: var(--text-light);
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.featured-title-mobile {
  font-size: 28px; /* 移动端：28px (约1.75em) */
  font-weight: 300; /* Light */
  font-family: var(--font-family-hanken-light);
  line-height: 1.2;
  margin: 0;
}

.featured-price-mobile {
  font-size: 18px; /* 移动端：18px (约1.125em) */
  font-weight: 500; /* Medium */
  font-family: var(--font-family-hanken-medium);
  margin: 0;
}

.featured-cart-btn-mobile {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 30;
  text-decoration: none;
}

.featured-cart-btn-mobile img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* 右侧产品网格（桌面端） */
.home-mushrooms__products {
  flex: 1;
  display: none; /* 移动端隐藏 */
}

.home-mushrooms__products.desktop-only {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px; /* 2x2 产品间距 15px */
}

.product-card {
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.product-card:hover {
  transform: translateY(-2px);
}

.product-card:hover .product-image img {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

.product-image {
  width: 100%;
  max-height: 570px;
  overflow: hidden;
  margin-bottom: 15px;
  aspect-ratio: 3 / 4; /* 保持图片比例 */
}

.product-image img {
  width: 100%;
  height: 100%;
  max-height: 570px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.product-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.product-name {
  color: var(--text-primary);
  font-size: clamp(18px, 1.5em, 24px); /* 响应式：移动端最小18px，PC端最大24px */
  font-weight: 500; /* Medium */
  font-family: var(--font-family-hanken-medium);
  margin: 0;
  line-height: 1.3;
}

.product-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  padding-right: 50px; /* 为购物车按钮留出空间 */
}

.product-price {
  color: var(--text-primary);
  font-size: clamp(14px, 1em, 16px); /* 响应式：移动端最小14px，PC端最大16px */
  font-weight: 500; /* Medium */
  font-family: var(--font-family-hanken-medium);
}

.product-weight {
  color: var(--text-weight); /* #9E8F7B */
  font-size: clamp(12px, 0.875em, 14px); /* 响应式：移动端最小12px，PC端最大14px */
  font-weight: 500; /* Medium */
  font-family: var(--font-family-hanken-medium);
}

.product-cart-btn {
  position: absolute;
  top: calc(1.5em + 8px); /* 与 product-meta 顶部对齐（product-name高度 + gap） */
  right: 0; /* 在 product-info 的右侧 */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-cart-btn); /* #FFF7EC */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  padding: 0;
  text-decoration: none;
}

.product-cart-btn img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* 移动端产品轮播 */
.home-mushrooms__products-mobile {
  display: block;
  width: 100%;
  overflow: visible; /* 让右侧产品可见 */
}

.mushrooms-swiper {
  width: 100%;
  padding-bottom: 20px;
  overflow: visible; /* 让右侧产品可见 */
}

.mushrooms-swiper .swiper-wrapper {
  display: flex;
}

.mushrooms-swiper .swiper-slide {
  width: calc(100vw - 60px); /* 每个slide占满视口宽度减去左右padding，右侧显示部分下一个产品 */
  flex-shrink: 0;
}

/* 响应式 */
@media (min-width: 768px) {
  .home-mushrooms__wrapper {
    flex-direction: row;
    gap: 30px; /* 大图和右侧产品间距 30px */
  }
  
  .home-mushrooms__featured {
    display: block;
  }
  
  .home-mushrooms__featured-mobile {
    display: none;
  }
  
  .home-mushrooms__products.desktop-only {
    display: grid;
  }
  
  .home-mushrooms__products-mobile {
    display: none;
  }
  
  .mobile-only {
    display: none;
  }
  
  .desktop-only {
    display: block;
  }
}

@media (max-width: 767px) {
  .home-mushrooms {
    padding: 0; /* 移动端全屏 */
    padding-bottom: 40px; /* 移动端底部间距 */
  }
  
  .home-mushrooms .container-fluid {
    padding: 0 15px; /* 移动端内部左右间距 */
  }
  
  .home-mushrooms .top-text {
    font-size: 12px;
    margin-bottom: 30px;
    padding-top: 40px;
  }
  
  /* 移动端大图文字调整 */
  .featured-title-mobile {
    font-size: 28px !important; /* 移动端：28px，比PC端60px小很多 */
  }
  
  .featured-price-mobile {
    font-size: 18px !important; /* 移动端：18px，比PC端24px小 */
  }
  
  /* 移动端产品卡片文字调整 */
  .product-name {
    font-size: 18px !important; /* 移动端：18px，比PC端24px小 */
  }
  
  .product-price {
    font-size: 14px !important; /* 移动端：14px，比PC端16px小 */
  }
  
  .product-weight {
    font-size: 12px !important; /* 移动端：12px，比PC端14px小 */
  }
  
  .home-mushrooms__products.desktop-only {
    display: none !important; /* 移动端强制隐藏桌面端产品列表 */
  }
  
  .home-mushrooms__products-mobile {
    display: block !important; /* 移动端显示移动端产品列表 */
  }
  
  .mobile-only {
    display: block;
  }
  
  .desktop-only {
    display: none !important; /* 移动端强制隐藏所有桌面端元素 */
  }
}