:root {
    /* 网站主题色变量 */
    --primary: #005500;      /* 主色调 - 深绿色 */
    --secondary: #8a9a5b;    /* 次要色 - 橄榄绿 */
    --accent: #d4c06f;       /* 强调色 - 金色 */
    --light: #f8f4e9;        /* 浅色背景 */
    --dark: #4d3a1f;         /* 深色背景 */
    --text: #5d4a2d;         /* 主要文本颜色 */
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 确保元素的宽度和高度包括内边距和边框 */
}
html, body {
  height: 100%;
}
body {
    font-family: 'Noto Serif SC', serif; /* 设置全局字体为 Noto Serif SC */
    color: var(--text);                  /* 使用定义的文本颜色变量 */
    background: var(--light);            /* 设置背景浅色 */
    line-height: 1.6;                    /* 设置行高 */
}


/* 顶部品牌区域样式 */
.brand-top {
    background: var(--primary);          /* 使用主色调作为背景色 */
    color: white;                        /* 设置文字颜色为白色 */
    justify-content: center;             /* 水平居中对齐内容 */
    align-items: center;                 /* 垂直居中对齐内容 */
    position: relative;                  /* 相对定位 */
    z-index: 1000;                       /* 设置堆叠顺序 */
}

.brand-info {
    display: flex;                        /* 使用 flex 布局 */
    align-items: center;                  /* 垂直居中对齐内容 */
    gap: 15px;                            /* 子元素间距 */
    justify-content: center;              /* 水平居中对齐内容 */
}

.brand-logo {
    display: flex;                        /* 使用 flex 布局 */
    align-items: center;                  /* 垂直居中对齐内容 */
    gap: 15;                              /* 子元素间距 */
	margin-top: 10px;                     /* 上边距 */
	margin-bottom: 0px;                  /* 下边距 */
}

.contact-info {
    display: flex;                        /* 使用 flex 布局 */
    gap: 20px;                            /* 子元素间距 */
    justify-content: center;              /* 水平居中对齐内容 */
}

.contact-item {
    display: flex;                        /* 使用 flex 布局 */
    align-items: center;                  /* 垂直居中对齐内容 */
    gap: 8px;                             /* 子元素间距 */
    font-size: 14px;                      /* 设置联系信息字体大小 */
	margin-top: 10px;                     /* 上边距 */
	margin-bottom: 10px;                  /* 下边距 */
}
.contact-fbt {
    display: flex;                        /* 使用 flex 布局 */
    gap: 50px;                            /* 子元素间距 */
    justify-content: center;              /* 水平居中对齐内容 */
	margin-top: 0px;                     /* 上边距 */
	margin-bottom: 0px;                  /* 下边距 */
}

.contact-fbt2 {
    align-items: center;                  /* 垂直居中对齐内容 */
    font-size: 16px;                      /* 设置自然之味健康之礼字体大小 */
}
nav {
  background: var(--light);                             /* 使用CSS变量设置浅色背景 */
  padding: 5px 30px;                                      /* 左右内边距30px，上下为0 */
  border-bottom: 1px solid rgba(139, 115, 75, 0.1);     /* 底部半透明边框 */
  position: sticky;                                     /* 粘性定位 */
  top: 0;   /* 距离视口顶部0px时固定 */
  z-index: 999; /* 确保导航栏在最顶层 */
  box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* 底部轻微阴影 */
  display: flex; /* 启用Flex布局 */
  justify-content: center; /* 内容居中对齐 */
  align-items: center; /* 垂直居中 */
  max-width: 100%; /* 确保宽度不超过视口 */
  margin: 0 auto; /* 水平居中 */
}

/* 导航内容容器布局 */
.nav-container {
  display: flex; /* 启用Flex布局 */
  justify-content: center; /* 内容居中对齐 */
  align-items: center; /* 垂直居中 */
  max-width: 1200px; /* 最大宽度限制 */
  margin: 0 auto; /* 水平居中 */
  padding: 0 20px; /* 添加左右内边距（可选） */
}

/* 主导航链接列表样式 */
.main-nav {
  display: flex; /* 启用Flex布局 */
  list-style: none; /* 移除列表默认样式 */
}
/* 单个导航项样式 */
.nav-item {
  position: relative; /* 相对定位（用于伪元素定位） */
  padding: 10px 30px; /* 内边距 */
  font-weight: 600; /* 粗体 */
  font-size: 16px; /* 字体大小 */
  color: var(--dark); /* 文字颜色使用CSS变量 */
  cursor: pointer; /* 鼠标指针样式 */
  transition: all 0.3s ease; /* 所有属性过渡效果 */
  display: flex; /* 启用Flex布局 */
  align-items: center; /* 垂直居中 */
}

/* 导航项底部指示条（伪元素） */
.nav-item::after {
  content: ''; /* 必须内容属性 */
  position: absolute; /* 绝对定位 */
  bottom: 0; /* 定位到底部 */
  left: 50%; /* 从左侧50%位置开始 */
  width: 0; /* 初始宽度为0 */
  height: 3px; /* 高度 */
  background: var(--secondary); /* 使用CSS变量设置颜色 */
  transform: translateX(-50%); /* 水平居中 */
  transition: width 0.3s ease; /* 宽度过渡动画 */
}

/* 悬停/激活状态下的指示条效果 */
.nav-item:hover::after, 
.nav-item.active::after {
  width: 80%; /* 展开至80%宽度 */
}

/* 悬停/激活状态文字效果 */
.nav-item:hover, 
.nav-item.active {
  color: var(--primary); /* 使用CSS变量改变文字颜色 */
}

/* 导航项内图标样式 */
.nav-item i {
  margin-right: 8px; /* 图标右侧间距 */
  font-size: 18px; /* 图标大小 */
  color: var(--secondary); /* 使用CSS变量设置颜色 */
}
/* 导航链接样式 */
.nav-item a {
    text-decoration: none;             /* 去掉文本装饰（如下划线） */
    color: inherit;                    /* 继承父元素的颜色属性 */
}
/* 欢迎区域 */
.welcome-section {
    padding: 60px 40px 40px; /* 设置上下内边距为80px，左右内边距为40px */
    text-align: center; /* 文本居中对齐 */
    background: var(--light-beige); /* 使用CSS变量设置浅米色背景 */
    position: relative; /* 相对定位，为装饰元素或绝对定位子元素提供定位上下文 */
}

.section-title {
    font-size: 2.8rem; /* 标题字体大小 */
    color: var(--primary); /* 使用CSS变量设置主绿色 */
    margin-bottom: 20px; /* 标题下边距 */
    font-family: 'Ma Shan Zheng', cursive; /* 使用特殊手写字体 */
    position: relative; /* 相对定位，为伪元素提供定位上下文 */
    display: inline-block; /* 行内块级显示（便于添加伪元素） */
}

.section-title::after {
    content: ''; /* 生成空内容伪元素 */
    position: absolute; /* 绝对定位 */
    bottom: -10px; /* 距离底部10px */
    left: 50%; /* 水平居中起点 */
    transform: translateX(-50%); /* 水平平移实现完全居中 */
    width: 100px; /* 宽度100px */
    height: 4px; /* 高度4px */
    background: var(--accent); /* 使用CSS变量设置强调色背景 */
}

.welcome-text {
    max-width: 800px; /* 最大宽度800px */
    margin: 40px auto; /* 上下外边距40px，水平居中 */
    font-size: 1.2rem; /* 正文字体大小 */
    line-height: 1.8; /* 舒适的行高 */
}
/* 特产展示区域 */
.products-section {
    padding: 20px 5%; /* 上下内边距60px，左右内边距5%响应式 */
    background: var(--light-beige); /* 使用CSS变量设置浅米色背景 */
}

.products-grid {
    display: grid; /* 启用Grid布局 */
    grid-template-columns: repeat(3, minmax(100px, 1fr)); /* 自适应列宽，最小320px，最大均分剩余空间 */
    gap: 40px; /* 网格项之间的间距40px */
    max-width: 1300px; /* 最大宽度1300px */
    margin: 0 auto; /* 水平居中 */
}

.product-card {
    background: white; /* 卡片背景设为白色 */
    border-radius: 12px; /* 圆角效果 */
    overflow: hidden; /* 隐藏超出部分（确保圆角生效） */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* 添加阴影增强层次感 */
    transition: all 0.4s ease; /* 所有属性的过渡效果 */
    position: relative; /* 相对定位，为内部元素提供定位上下文 */
}

.product-card:hover {
    transform: translateY(-12px); /* 悬停时垂直向上移动12px */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); /* 悬停时增加阴影效果 */
}

.product-img {
    height: 280px; /* 图片区域高度280px */
    overflow: hidden; /* 隐藏超出部分（确保图片裁剪生效） */
    position: relative; /* 相对定位，为标签提供定位上下文 */
}

.product-img img {
    width: 100%; /* 宽度填充容器 */
    height: 100%; /* 高度填充容器 */
    object-fit: cover; /* 保持纵横比并裁剪图片以适应容器 */
    transition: transform 0.5s ease; /* 缩放变换的过渡效果 */
}

.product-card:hover .product-img img {
    transform: scale(1.05); /* 悬停时图片放大1.05倍 */
}

.product-tag {
    position: absolute; /* 绝对定位 */
    top: 20px; /* 距离顶部20px */
    right: 20px; /* 距离右侧20px */
    background: rgba(255, 255, 255, 0.85); /* 半透明白色背景 */
    padding: 8px 20px; /* 标签内边距 */
    border-radius: 30px; /* 圆角效果 */
    font-weight: 600; /* 加粗字体 */
    color: var(--primary-green); /* 使用CSS变量设置主绿色文本颜色 */
}

.product-content {
    padding: 25px; /* 内容区域内边距25px */
}

.product-content h3 {
    font-family: 'Noto Serif SC', serif; /* 使用衬线字体 */
    font-size: 1.7rem; /* 标题字体大小 */
    color: var(--primary); /* 使用CSS变量设置深色文本颜色 */
    margin-bottom: 15px; /* 标题下边距 */
}

.product-desc {
    font-size: 1.05rem; /* 描述字体大小 */
    color: var(--text); /* 描述文本颜色 */
    font-style: italic; /* 斜体字 */
    padding: 15px 0; /* 上下内边距15px */
    margin: 20px 0; /* 上下外边距20px */
    border-top: 1px dashed #ddd; /* 顶部虚线边框 */
    border-bottom: 1px dashed #ddd; /* 底部虚线边框 */
}

.product-details {
    display: flex; /* 启用Flexbox布局 */
    flex-wrap: wrap; /* 自动换行 */
    margin-bottom: 25px; /* 下边距25px */
}

.detail-item {
    display: flex; /* 启用Flexbox布局 */
    align-items: center; /* 垂直居中对齐子元素 */
    margin-right: 20px; /* 右边外边距20px */
    margin-bottom: 12px; /* 下边距12px */
    color: #666; /* 灰色文本颜色 */
}

.detail-item i {
    color: var(--tea-green); /* 使用CSS变量设置茶绿色图标颜色 */
    margin-right: 8px; /* 图标与文本之间的间距8px */
}

.product-price {
    display: flex; /* 启用Flexbox布局 */
    justify-content: space-between; /* 子元素两端对齐 */
    align-items: center; /* 垂直居中对齐子元素 */
}

.price {
    font-size: 1.8rem; /* 价格字体大小 */
    font-weight: 600; /* 加粗字体 */
    color: var(--primary); /* 使用CSS变量设置主绿色文本颜色 */
}

.price span {
    font-size: 1rem; /* 辅助价格字体大小 */
    color: #777; /* 辅助价格文本颜色 */
    font-weight: normal; /* 正常字体粗细 */
}

.origin-tag {
    position: absolute; /* 绝对定位 */
    top: 20px; /* 距离顶部20px */
    left: 20px; /* 距离左侧20px */
    background: rgba(255, 255, 255, 0.85); /* 半透明白色背景 */
    padding: 8px 15px; /* 标签内边距 */
    border-radius: 30px; /* 圆角效果 */
    font-weight: 600; /* 加粗字体 */
    color: var(--primary); /* 使用CSS变量设置主色文本颜色 */
    font-size: 0.9rem; /* 标签字体大小 */
}
.btn {
    padding: 10px 25px; /* 内边距10px上下，25px左右 */
    background: var(--secondary); /* 背景颜色使用自定义属性 --secondary */
    color: white; /* 字体颜色为白色 */
    border: none; /* 无边框 */
    border-radius: 50px; /* 圆角边框半径为50px */
    font-weight: 600; /* 字体加粗 */
    cursor: pointer; /* 鼠标指针变为手型 */
    transition: all 0.3s ease; /* 所有变化过渡效果持续0.3秒 */
    display: flex; /* 使用弹性盒布局 */
    align-items: center; /* 垂直居中对齐 */
    gap: 8px; /* 子元素间距8px */
    text-decoration: none; /* 无下划线 */
}

.btn:hover {
    background: #7a8a4b; /* 悬停时背景颜色变为#7a8a4b */
    transform: translateY(-2px); /* 悬停时向上移动2px */
    box-shadow: 0 5px 15px rgba(138, 154, 91, 0.3); /* 悬停时的投影效果 */
}
/* 特色推荐区域 */
.featured-section {
    padding: 100px 5%; /* 上下100px内边距，左右5%响应式内边距 */
    background: var(--light-beige); /* 使用CSS变量设置浅米色背景 */
    position: relative; /* 相对定位，为装饰元素或绝对定位子元素提供定位上下文 */
}

/* 特色内容容器 */
.featured-container {
    max-width: 1000px; /* 容器最大宽度限制 */
    margin: 0 auto; /* 水平居中 */
    display: flex; /* 启用Flexbox布局 */
    align-items: center; /* 垂直居中对齐子元素 */
    gap: 60px; /* 子元素之间的间距60px */
}

/* 特色图片区域 */
.featured-img {
    flex: 1; /* 占据可用空间的1份 */
    border-radius: 15px; /* 圆角效果 */
    overflow: hidden; /* 隐藏超出部分（确保圆角生效） */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); /* 添加阴影增强层次感 */
}

/* 特色图片样式 */
.featured-img img {
    width: 100%; /* 宽度填充容器 */
    display: block; /* 块级显示（消除图片底部间隙） */
    transition: transform 0.5s ease; /* 缩放变换的过渡效果 */
}

/* 图片悬停效果 */
.featured-img:hover img {
    transform: scale(1.05); /* 悬停时轻微放大图片 */
}

/* 特色内容区域 */
.featured-content {
    flex: 1; /* 占据可用空间的1份（与图片等宽） */
}

/* 特色标题样式 */
.featured-content h2 {
    font-size: 2.2rem; /* 标题字体大小 */
    color: var(--primary); /* 使用CSS变量设置主绿色 */
    margin-bottom: 25px; /* 标题下边距 */
    font-family: 'Ma Shan Zheng', cursive; /* 使用特殊手写字体 */
}

/* 特色描述文本 */
.featured-content p {
    font-size: 1.1rem; /* 正文字体大小 */
    line-height: 1.8; /* 舒适的行高 */
    color: #555; /* 深灰色文本 */
    margin-bottom: 20px; /* 段落下边距 */
}
/* 底部区域样式 */
footer {
    background: var(--dark); /* 设置背景颜色为变量 --dark 的值 */
    color: rgba(255,255,255,0.8); /* 设置文字颜色为白色，透明度为0.8 */
    padding: 30px 20px 20px; /* 设置内边距：上60px，左右40px，下30px */
}
.footer-container {
    display: grid; /* 使用网格布局 */
    grid-template-columns: repeat(4, minmax(100px, 1fr)); /* 每行四个列，每列最小宽度300像素，最大宽度为可用空间的一份 */
    gap: 10px; /* 设置列间距为40px */
    max-width: 1200px; /* 设置最大宽度为1200px */
    margin: 0 auto; /* 居中对齐 */
}
.footer-col h3 {
    color: white; /* 设置标题颜色为白色 */
    font-size: 1.5rem; /* 设置字体大小为1.5倍根元素字体大小 */
    margin-bottom: 10px; /* 设置下边距为25px */
    position: relative; /* 设置定位为相对定位 */
    padding-bottom: 10px; /* 设置下边距填充为10px */
}
.footer-col h3::after {
    content: ''; /* 生成伪元素内容为空 */
    position: absolute; /* 设置绝对定位 */
    bottom: 0; /* 定位到元素的底部 */
    left: 0; /* 定位到元素的左边 */
    width: 50px; /* 设置宽度为50px */
    height: 2px; /* 设置高度为2px */
    background: var(--accent); /* 设置背景颜色为变量 --accent 的值 */
}
	
.footer-links {
    list-style: none; /* 移除默认的列表符号 */
    padding: 0; /* 移除内边距 */
    margin: 0; /* 移除外边距 */
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 将子元素排列成列方向 */
}

.footer-links li {
    margin-bottom: 10px; /* 设置每个列表项的下边距为15px */
}
.footer-links a {
    color: rgba(255,255,255,0.7); /* 设置链接颜色为白色，透明度为0.7 */
    text-decoration: none; /* 移除文本装饰 */
    transition: color 0.3s ease; /* 设置颜色过渡效果，持续时间0.3秒 */
    display: flex; /* 使用弹性盒布局 */
    align-items: center; /* 垂直居中对齐 */
    gap: 10px; /* 设置子元素之间的间距为10px */
}
.footer-links a:hover {
    color: white; /* 鼠标悬停时，链接颜色变为白色 */
}
.copyright {
    text-align: center; /* 设置文本居中对齐 */
    padding-top: 20px; /* 设置上边距填充为20px */
    margin-top: 20px; /* 设置上边距为20px */
    border-top: 1px solid rgba(255,255,255,0.1); /* 设置顶部边框为1px实线，颜色为白色，透明度为0.1 */
}
@viewport {
  width: device-width;
  zoom: 1.0;
}

@media screen and (max-width: 768px) {
  body {
    min-width: 1200px; /* 强制保持桌面版宽度 */
    overflow-x: auto; /* 允许横向滚动 */
  }
  .brand-top, .nav-container {
    min-width: 1200px;
  }
}
/* 防止移动端文字自动调整 */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 为所有文本元素设置固定大小 */
body, p, h1, h2, h3, h4, h5, h6, 
.nav-item, .contact-item, .slide-content {
  -webkit-text-size-adjust: none !important;
  text-size-adjust: none !important;
}