/* 基础重置与全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f8f9fa;
	align-items: center;
}



/* 顶部导航（限制在1180px内） */
.header {
    height: 120px;
    background-color: #fff;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 1150px;
    border-bottom: 1px solid #f0f0f0; /* 底部边框，区分头部和导航 */
}
.page-container2 {
    width: 1150px;
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex; /* 新增：启用flex */
  
 
    flex-direction: column; /* 垂直方向排列子元素 */
	flex-direction: row; /* 关键：水平方向排列（默认值，可省略，但明确写出更清晰） */
    justify-content: space-between; /* 左右两端对齐，让子元素分别靠左右两端 */
    align-items: center; /* 垂直方向居中对齐 */
   
    box-sizing: border-box;
}
.logo {
    height: 80px;
    margin-right: 15px;
    max-width: 120px;
    object-fit: contain;
}
.logo-container {
    display: flex;
    align-items: center;
    float: none !important; /* 取消浮动，确保独占一行 */
    width: auto; /* 占满宽度，迫使导航条换行 */
    margin-bottom: 10px; /* 与下方导航条保持间距 */
}

.site-name {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.page-container3{
	height:94px;
	width:630px !important;
	display: flex; /* 新增：启用flex */
	  background-color:#06F;
	  align-self: flex-end; /* 关键：在垂直布局中，单独靠右对齐 */
	}
.page-container3 img{
	width:630px;
	height:94px;
	
	}





/* 链接容器样式 */
.index-link {
    display: flex;
    gap: 15px; /* 链接间距 */
}

.index-link a {
    color: #333;
    text-decoration: none;
    padding: 5px 8px;
    font-size: 14px;
    transition: color 0.2s;
}

.index-link a:hover {
    color: #2196f3;
    text-decoration: underline;
}

/* 横向导航条样式 */
/* 导航条容器：固定1150px宽度并居中 */
.nav-container {
    width: 1150px;
    margin: 10px auto 0; /* 与上方header保持间距+居中 */
    overflow: hidden; /* 确保内部元素不溢出 */
    border-radius: 6px; /* 容器添加圆角（可选，与菜单项呼应） */
    height: 32PX;

}

/* 导航列表：清除默认样式 */
.main-nav {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 30PX;
    padding: 0 !important;
}

.main-nav__item {
    display: table-cell;
    width: auto;
    text-align: center;
    /* 移除原右侧边框（避免圆角处线条突兀） */
    border-right: none;
    /* 用左边框分隔，最后一项无左侧边框 */
    border-right: 1px solid #51c9df;
}

/* 最后一项移除右侧分隔线 */
.main-nav__item:last-child {
    border-right: none;
}

/* 导航链接：占满整个项 */
.main-nav__link {
    display: block; /* 占满单元格 */
    padding: 4px 0;
    text-decoration: none;
    background-color: #7ce2f5;
    color: #555;
    font-size: 18px;
    font-weight: 500;
    white-space: nowrap; /* 防止文字换行 */
    overflow: hidden;
    text-overflow: ellipsis; /* 文字过长显示省略号 */
    transition: all 0.3s ease;
    border-radius: 4px;
    /* 增加内边距让圆角更明显 */
    margin:0px 0px; /* 与相邻项保持间距，避免边框重叠 */
}

/* 鼠标悬停效果 */
.main-nav__link:hover {
    background-color: #0071c5;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0, 113, 197, 0.2);
    border-radius: 6px;
}

/* 当前页高亮（需在对应li添加active类） */
.main-nav__item.active .main-nav__link {
    background-color: #005aa7;
    color: #fff;
    border-radius: 4px;
}
/* 幻灯片容器 */
.ad-slider {
    width: 1150px;
    height: 250px;
    margin: 0 auto; /* 居中显示，与页面容器对齐 */
    overflow: hidden; /* 隐藏超出容器的图片 */
    position: relative;
}

/* 图片容器（用于动画移动） */
.ad-img {
    width: 300%; /* 3张图总宽度为容器的3倍 */
    height: 100%;
    display: flex; /* 图片横向排列 */
    animation: slide 9s infinite; /* 总动画时长9秒（每张图显示3秒） */
}

/* 单张幻灯片样式 */
.slide {
    width: 33.333%; /* 每张图占容器1/3宽度 */
    height: 100%;
    object-fit: cover; /* 图片自适应容器，保持比例不拉伸 */
}

/* 幻灯片动画 */
.slider-container {
    /* 仅控制幻灯片自身的位置，不影响父容器 */
    margin: 10px auto 0; /* 与菜单栏保持间距，且居中 */
    /* 不设置父容器宽度，避免压缩菜单栏的父容器 */
}
.slider-container .ad-slider {
   margin: 0 auto;   /* 居中（可选，根据页面布局） */
   position: relative; /* 用于定位指示器（可选） */
    /* 防止被其他样式覆盖，加 !important 确保生效（临时测试用） */
    width: 1150px !important;  /* 固定宽度，与需求一致 */
    height: 250px !important;/* 固定高度 */
    overflow: hidden !important;/* 隐藏超出容器的图片（必须！） */

}

/* 2. 图片容器：横向排列+3倍宽度（关键） */
.slider-container .ad-img {
    display: flex;        /* 图片横向排列（必须！） */
    width: 300%;          /* 3张图 → 容器宽度=3×外层宽度（必须！） */
    height: 100%;         /* 与外层容器等高 */
    margin: 0;
    padding: 0;
    /* 确保Flex和宽度生效，防止被覆盖 */

}

/* 3. 单张图片：占1/3宽度（关键） */
.slider-container .slide {
    width: 33.3333%;      /* 每张图占容器1/3（必须！） */
    height: 100%;         /* 填满容器高度 */
    object-fit: cover;    /* 图片不变形（可选，根据需求） */
    border: none;         /* 取消图片默认边框（可选） */
    margin: 0;
    padding: 0;
    /* 确保宽度生效 */
    width: 33.3333% !important;
}

/* 4. 轮播动画（关键：通过位移切换图片） */
@keyframes slide {
    0%, 32% { transform: translateX(0); }    /* 第1张图：0-3.2秒显示 */
    33%, 65% { transform: translateX(-33.3333%); } /* 第2张图：3.3-6.5秒显示 */
    66%, 100% { transform: translateX(-66.6666%); } /* 第3张图：6.6-10秒显示 */
}

/* 给图片容器添加动画（必须！） */
.slider-container .ad-img {
    animation: slide 10s ease infinite; /* 10秒一轮，匀速，循环 */
    /* 防止动画被覆盖 */
    animation: slide 10s ease infinite !important;
}

/* 可选：指示器（不影响轮播，仅优化体验） */
.ad-slider .indicators {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}
.ad-slider .indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
}




/* 主要内容区 */
.main-container {
    display: flex;
    flex: 1;
    padding: 20px 0;
    gap: 20px; /* 左侧分类与右侧产品列表间距20px */
}

/* 左侧分类（总宽度240px） */
.categories {
    width: 240px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 15px;
    align-self: flex-start;
    flex-shrink: 0; /* 防止被压缩 */
}

.categories h2 {
    font-size: 18px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    color: #333;
}

.category-list {
    list-style: none;
}

.category-item {
    margin-bottom: 8px;
}

.category-link {
    display: block;
    padding: 8px 10px;
    color: #555;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.category-link:hover,
.category-link.active {
    background-color: #f0f7ff;
    color: #2196f3;
    font-weight: 500;
}

/* 右侧产品区（计算宽度：1180 - 240 - 20 = 920px） */
.products-section {
    flex: 1;
    max-width: 893px; /* 240 + 20 + 920 = 1180 */
}

/* 搜索框 */
.search-container {
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
}

.search-form {
    display: flex;
    gap: 10px;
}

.search-input {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

.search-button {
    padding: 2px 20px;
    background-color: #2196f3;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
	font-size:18px;
}

.search-button:hover {
    background-color: #1976d2;
}

/* 产品列表（每个产品宽度260px，三列） */
.products-container {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 20px;
}

.section-title {
    font-size: 20px;
    margin-bottom: 20px;
    color: #333;
}

/* 产品网格：三列，每列260px，间距20px（260*3 + 20*2 = 820px） */
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 260px);
    gap: 20px;
    justify-content: center; /* 水平居中对齐 */
}

.product-card {
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 270px; /* 固定卡片高度 */
    display: flex;
    flex-direction: column;
	  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 水平偏移 0，垂直偏移 2px，模糊 10px，浅灰色阴影 */
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* 产品图片容器：白色背景 */
.product-image {
    height: 180px;
    background-color: #ffffff; /* 改为白色背景 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

/* 产品图片：严格限制大小 */
.product-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

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

/* 产品信息区：减少间距 */
.product-info {
    padding: 8px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-name {
    font-size: 16px;
    color: #333;
    margin-bottom: 2px; /* 减少名称与价格间距 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-price {
    font-size: 26px;
    font-weight: bold;
    color: #e53935;
    margin-top: auto; /* 价格靠下对齐，但减少与名称的距离 */
}

.product-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
	
}

/* 手机端适配 */
@media (max-width: 768px) {
    .page-container {
        max-width: 100%;
        padding: 0 10px;
    }
    .page-container3{
		display:none;
	}
    .header {
        height: auto;
        padding: 15px 0;

    }
    
    .logo-container {
        flex-direction: column;
        text-align: center;
    }
    
    .logo {
        margin-right: 0;
        margin-bottom: 10px;
        height: 60px;
    }
    
    .site-name {
        font-size: 20px;
    }
    
    .main-container {
        flex-direction: column;
    }

    .categories {
        width: 100%;
        margin-bottom: 20px;
    }
    
    .products-section {
        max-width: 100%;
    }
    
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
    .slider-container {
        display: none;
    }
}
		
		/* 底部区域 - 纯本地样式 */
		.footer {
			/* 核心尺寸限制 */
			width: 1153px;
			height: 120px;
			margin: 20px auto; /* 顶部间距30px，水平居中 */
			
			
			/* 样式重置 */
			background-color:#FFF; /* 彻底移除背景色 */
			padding: 0;
			border: none;
			border-top: 1px solid #e0e0e0; /* 仅顶部分隔线 */
			overflow: hidden; /* 防止内容溢出 */
			margin-bottom:10px;
		}
		
		/* 容器适配 */
		.footer .page-container4 {
			width: 1153px;
			height: 100px;
			padding: 15px;
			box-sizing: border-box; /* 包含内边距计算 */
			margin: 0;
			margin-bottom:30px;
		}
		
		/* 内容布局 */
		.footer-content {
			display: flex;
			height: calc(100%); /* 减去版权区高度 */
			gap: 40px; /* 区块间距 */
		}
		
		/* 底部区块 */
		.footer-section {
			flex:auto;/* 平均分配宽度 */
			height:90px;
		}
		
		/* 标题样式 */
		.footer-section h4 {
			font-size: 16px;
			color: #333;
			margin: 0 0 10px 0; /* 仅底部间距 */
			padding: 0;
			font-weight: 600;
		}
		
		/* 联系信息列表 */
		.footer-contact {
			list-style: none; /* 移除默认列表样式 */
			padding: 0;
			margin: 0;
		}
		
		.footer-contact li {
			font-size: 14px;
			color: #666;
			margin-bottom: 6px; /* 列表项间距 */
			line-height: 1.4;
		}.footer-contact span a {
			font-size: 14px;
			color: #666;
			margin-bottom: 6px; /* 列表项间距 */
			line-height: 1.4;
		}
		
		/* 链接样式 */
		.footer-section h4 a {
			color: #333;
			text-decoration: none; /* 去除下划线 */
			
		}
		
		/* 链接样式 */
		.footer-section a {
			color: #333;
			text-decoration: none; /* 去除下划线 */
			font-size:14px;
		}
		
		.footer-section h3 a:hover {
			color: #2196f3; /* hover效果 */
			text-decoration: underline;
		}
		
		/* 版权信息 */
		.copyright {
			font-size: 14px;
			color: #999;
			text-align: center;
			height: 30px; /* 固定高度 */
			line-height: 30px; /* 垂直居中 */
			margin: 0;
			padding: 0;
		}
		
		
		
/* 移动端适配样式 - 优化整合版 */
@media (max-width: 768px) {
	/* 顶部区域样式优化 */
	  .index-link {
        display: flex; /* 确保手机端显示链接 */
        flex-wrap: wrap; /* 允许链接换行 */
        justify-content: center; /* 居中显示 */
        margin-top: 10px; /* 与LOGO区域保持距离 */
    }
    
    .header {
        width: 100% !important; /* 确保头部不超宽 */
        padding: 15px 10px !important;
    }
    
    .index-link a {
        font-size: 13px; /* 缩小字体 */
        padding: 4px 6px; /* 减小内边距 */
    }
    
    .logo-container {
        width: 100% !important; /* 容器占满宽度 */
        flex-direction: row !important; /* 恢复横向排列更合理 */
        align-items: center !important;
        justify-content: center !important; /* 水平居中 */
        gap: 10px !important; /* LOGO和名称间距 */
    }
    
    .logo {
        max-width: 80px !important; /* 限制LOGO最大宽度 */
        height: auto !important; /* 高度自适应 */
        object-fit: contain !important; /* 保持LOGO比例 */
    }
    
    .site-name {
        font-size: 18px !important; /* 适当网站名称字体 */
        white-space: nowrap !important; /* 避免名称换行 */
        overflow: hidden !important; /* 超出隐藏 */
        text-overflow: ellipsis !important; /* 超出显示省略号 */
        max-width: calc(100% - 100px) !important; /* 限制最大宽度，预留LOGO空间 */
    }.index-link {
        display: flex;
        flex-wrap: nowrap; /* 禁止换行，强制横向排列 */
        justify-content: flex-end; /* 靠右显示 */
        margin-top: 10px; /* 与LOGO区域保持距离 */
        width: 100%; /* 占满父容器宽度 */
        overflow-x: auto; /* 超出部分允许横向滚动 */
        padding-right: 5px; /* 右侧预留一点空间 */
    }
    
    .index-link::-webkit-scrollbar {
        display: none; /* 隐藏滚动条（可选） */
    }
    
    .index-link a {
        font-size: 13px;
        padding: 4px 8px;
        white-space: nowrap; /* 确保单个链接文本不换行 */
        flex-shrink: 0; /* 防止链接被压缩 */
    }
    
    .page-container {
        flex-direction: column; /* 确保LOGO和链接垂直排列 */
        align-items: flex-start; /* 子元素左对齐，为链接靠右做准备 */
        width: 100%;
    }
    
    /* 保持LOGO区域原有样式不变，仅确保布局正确 */
    .logo-container {
        width: 100% !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important; /* LOGO和名称靠左显示 */
        gap: 10px !important;
    }

	
	
    /* 底部区域样式优化 */
    .footer {
        width: 100% !important;
        height: auto !important;
        padding: 15px !important;
        margin: 20px 0 !important;
    }
    
    .footer .page-container2 {
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        margin-bottom: 15px !important;
    }
    
    .footer-content {
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    .footer-section {
        height: auto !important;
        margin-bottom: 10px !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    
    .footer-section:last-child {
        border-bottom: none !important;
    }
    
    .footer-contact li,
    .footer-contact span a {
        font-size: 13px !important;
        display: block !important;
        margin-bottom: 8px !important;
    }
    
    .copyright {
        font-size: 12px !important;
        margin-top: 10px !important;
    }

    /* 分类列表优化（整合所有设置） */
    .categories {
        padding: 10px !important;
        margin-bottom: 15px;
    }
    
    .categories h2 {
        font-size: 15px;
        margin-bottom: 8px;
        padding-bottom: 8px;
    }
    
    .category-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 三列布局 */
        gap: 6px; /* 行列间距 */
    }
    
    .category-item {
        margin-bottom: 0; /* 移除底部间距，由grid控制 */
    }
    
    .category-link {
        /* 基础样式 */
        display: block;
        background-color: #f5f5f5; /* 默认底色 */
        color: #555;
        text-decoration: none;
        border-radius: 4px;
        transition: all 0.2s ease;
        
        /* 尺寸优化 */
        padding: 4px 6px !important; /* 最小内边距 */
        margin: 0 !important;
        font-size: 12px;
        line-height: 1.4; /* 适应换行 */
        letter-spacing: -0.5px; /* 收紧字间距 */
        
        /* 文本控制 */
        white-space: normal; /* 允许换行 */
        text-align: center; /* 居中对齐 */
        min-height: auto;
    }
    
    /* 激活状态 */
    .category-link.active {
        background-color: #e3f2fd;
        color: #2196f3;
        font-weight: 500;
    }
    
    /* 彻底隐藏图标 */
    .category-link i.fas {
        display: none !important;
        width: 0 !important;
        margin: 0 !important;
    }

}
@media (max-width: 768px) {
    .products-grid .product-card .product-info .product-price {
        font-size: 20px !important;
    }
}