/* 移除导航栏浮动效果 - 确保导航栏固定在顶部不随滚动变化 */
#navbar {
  position: relative;
  transform: none !important;
  box-shadow: none !important;
}

/* 导航字体颜色设置为黑色 */
.nav-actions a {
  color: #000000;
}
#nav-actions {
  color: #000000 !important;
}
#menu-toggle {
  color: #000000 !important;
}
.logo span {
  color: #000000;
}

/* 分类标题鼠标滑过样式 */
.category-item span {
    cursor: pointer; /* 显示手型指针，提示可点击 */
    position: relative;
    transition: color 0.3s ease;
    padding-bottom: 5px; /* 为下划线预留空间 */
}

.category-item span:hover {
    color: #868383; /* 滑过时光标颜色变化（使用强调色） */
}

/* 活跃状态样式增强 */
.category-item.active span {
    color: #868383; /* 活跃状态文字颜色 */
}

/* 产品页面特有样式 */
.products-section {
  margin-top: 10px; /* 减少顶部距离，因为导航不再浮动 */
  padding: 5px 10px;
}

.section-title {
  margin-bottom: 60px;
  color: #000;
}

.categories-container {
  display: flex; /* 横向排列 */
  justify-content: flex-start; /* 靠左对齐 */
  gap: 2rem; /* 两个分类之间的间距 */
  align-items: center; /* 垂直居中对齐 */
  flex-wrap: wrap; /* 适应小屏幕 */
}

.category-item h2 {
  font-size: 2.5rem;
  margin: 0; /* 去除默认margin */
  cursor: pointer; /* 提示可点击 */
  transition: color 0.3s ease;
}

.category-item h2:hover {
  color: #666; /* 悬停效果 */
}

/* 产品网格样式保持不变 */
.section-title{ 
  max-width: 1400px;
  margin: 0 auto;
}
/* 产品分类标题样式 */
.category-item a {
  font-size: 18px !important; /* 强制设置字体大小为18px */
  color:#000;
  margin-bottom: 20px; /* 与下方内容保持距离 */
  font-weight: 700;
}

/* 调整分类容器与产品网格的间距 */
.categories-container {
  margin-bottom: 30px; /* 增加与下方产品网格的距离 */
}

/* 改进的下拉菜单样式 */
.dropdown-menu {
  /*position: absolute;
  top: 100%;
  left: 0;*/
  min-width: 100%;
  width: 1400px;
  background: white;
  box-shadow: 0 5px 20px rgba(0,0,0,0.15);
  /*z-index: 1000;
  margin-top: 8px;*/
  padding: 20px;
  border-radius: 8px;
  display: none;
  border: 1px solid #e9ecef;
  animation: dropdownFadeIn 0.3s ease;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 下拉菜单内容使用弹性盒子布局 */
.dropdown-content {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
  align-items: center;
  max-height: 400px;
  overflow-y: auto;
}

/* 下拉菜单链接样式 */
.dropdown-content a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  background: #f8f9fa;
  border-radius: 6px;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
  font-size: 14px;
  transition: all 0.3s ease;
  border: 1px solid #e9ecef;
  min-width: 120px;
  text-align: center;
}

.dropdown-content a:hover {
  background-color: #333;
  color: white;
  border-color: #333;
  transform: translateY(-2px);
}

.dropdown-content a.active {
  background-color: #333;
  color: white;
  border-color: #333;
}

.products-grid {
  display: grid;
  /* 桌面端4列，移动端2列的响应式布局 */
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 1400px;
  margin: 0 auto;
}

/* 平板及以下设备调整为2列 */
@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .category-item h2 {
    font-size: 2rem;
  }
}

/* 小屏手机可保持2列或调整为1列 */
@media (max-width: 480px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .categories-container {
    gap: 1rem;
  }
  
  .category-item h2 {
    font-size: 1.5rem;
  }
}

/* 产品卡片样式 - 移除整体上移动画 */
.product-card {
  text-align: center;
  cursor: pointer; /* 移动端触摸提示 */
}

/* 图片容器样式 - 控制溢出隐藏 */
.product-image-container {
  overflow: hidden; /* 隐藏图片放大后超出容器的部分 */
  position: relative;
  max-height: 460px; /* 固定图片容器高度 */
}

/* 产品图片样式 - 添加放大动画 */
.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin-bottom: 1px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.5s ease, filter 0.3s ease; /* 增强过渡效果 */
  transform-origin: center center; /* 确保从中心放大 */
}

/* 鼠标悬停/触摸时图片放大效果 */
.product-card:hover .product-image,
.product-card.touched .product-image {
  transform: scale(1.15); /* 增加放大比例使效果更明显 */
  filter: brightness(1.05); /* 增加亮度变化增强视觉效果 */
}

/* 移动端图片高度自适应调整 */
@media (max-width: 768px) {
  .product-image-container {
    /*height: 220px;*/ /* 移动端图片容器高度 */
    overflow: hidden; /* 确保放大部分被裁剪 */
  }
}

/* 产品标题样式 - 黑色字体，鼠标滑过变为灰色 */
.product-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.75rem;  
  padding: 8px 0;
  transition: color 0.3s ease;
}

.product-title:hover {
  color: #868383; /* 鼠标滑过时变为灰色 */
}
    /* 平板样式 */
    @media (min-width: 769px) and (max-width: 1024px) {
      .products-grid {
        grid-template-columns: repeat(2, 1fr);
      }
	  .dropdown-menu {
        position: static !important;
        width: 100% !important;
        margin-top: 5px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      }
      
      .dropdown-content {
        padding: 10px 0;
      }
      
      .dropdown-content a {
        display: block;
        padding: 10px 15px;
        text-decoration: none;
        color: #333;
        font-size: 14px;
      }
      
      .dropdown-content a:hover {
        background-color: #f0f0f0;
      }
	  	  	  
    }
    
    /* 桌面样式 */
    @media (min-width: 1025px) {
      .products-grid {
        grid-template-columns: repeat(3, 1fr);
      }
	  .dropdown-menu {
        position: static !important;
        width: 100% !important;
        margin-top: 5px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      }
      
      .dropdown-content {
        padding: 10px 0;
      }
      
      .dropdown-content a {
        display: block;
        padding: 10px 15px;
        text-decoration: none;
        color: #333;
        font-size: 14px;
      }
      
      .dropdown-content a:hover {
        background-color: #f0f0f0;
      }
    }
    
    /* 大屏桌面样式 */
    @media (min-width: 1200px) {
      .products-grid {
        grid-template-columns: repeat(4, 1fr);
      }
    } 


 /* 媒体查询 - 移动端样式 */
@media (max-width: 768px) {
      /* 导航栏样式 */
      #navbar {
        padding: 10px 0;
      }
      
      .logo img {
        max-height: 40px;
      }
      
      /* 产品网格 - 移动端单列布局 */
      .products-grid {
        grid-template-columns: 1fr;
        gap: 15px;
      }
      
      /* 分类按钮样式 */
      .category-item {
        min-width: 100%;
        /*margin-bottom: 10px;*/
      }
      
      .category-item span {
        display: block;
        padding: 12px 15px;
        background-color: #f5f5f5;
        border-radius: 5px;
        font-size: 14px;
        cursor: pointer;
      }
      
      /* 下拉菜单样式优化 */
.categories-container {
  margin-bottom: 5px;
}
.categories-container {
  display: flex;
  justify-content: flex-start;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
      .dropdown-menu {
        position: static !important;
        width: 100% !important;
        margin-top: 5px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      }
      
      .dropdown-content {
        padding: 10px 0;
      }
      
      .dropdown-content a {
        display: block;
        padding: 10px 15px;
        text-decoration: none;
        color: #333;
        font-size: 14px;
      }
      
      .dropdown-content a:hover {
        background-color: #f0f0f0;
      }
 }