.product-container {
    display: grid; /* 使用 Grid 布局 */
    grid-template-columns: repeat(3, 1fr); /* 每行显示三个产品 */
    gap: 5px; /* 调整产品之间的间距 */
    margin-left: 300px;
    margin-right: 300px;
}

.content2 {
    margin-top: 41.5%;
    text-align: center; /* 使h2居中 */
}

.content2 h2 {
    display: inline-block; /* 使下划线适应文字宽度 */
    position: relative; /* 为 ::after 创建定位环境 */
}

.content2 h2 span {
    position: relative; /* 为下划线创建定位环境 */
}

.content2 h2 span::after {
    content: ""; /* 创建一个空的内容 */
    display: block; /* 将其显示为块级元素 */
    width: 100%; /* 下划线宽度为100% */
    height: 3px; /* 下划线高度 */
    background-color: #b52b21; /* 下划线颜色 */
    position: absolute; /* 绝对定位 */
    bottom: -10px; /* 与文本底部的距离 */
    left: 0; /* 从左侧开始 */
}

.product {
    padding: 8px; /* 内边距 */
    text-align: center; /* 文本居中 */
    margin-top: 50px;
    margin-bottom: 50px;
    box-sizing: border-box; /* 确保 padding 和 border 不会影响元素的宽度 */
}

.product img {
    max-width: 100%; /* 确保图片不会超出产品容器 */
    height: auto; /* 图片高度自适应 */
    display: block;
    margin: 0 auto; /* 图片水平居中 */
    margin-bottom: 30px;
}

.product-name {
    font-size: 16pt;
}

.product-weight {
    background-color: #c89755;
    color: #fff;
    display: inline-block; /* 修改为 inline-block */
    padding: 1px 4px; /* 可选：添加一些内边距使其看起来更好 */
}

.product-price {
    font-size: 16pt;
    margin-top: 20px;
    color: #c89755;
}

.small-text {
    font-size: 12pt; /* 设置小一号的字体大小 */
    margin-left: 4px; /* 添加一点左边距，以便更好地分隔 */
}

button {
    padding: 8px 16px;
    margin: 0 4px;
    font-size: 16px;
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.product-link {
    text-decoration: none; /* 去除下划线 */
    color: #333; /* 默认颜色为#666 */
}

.product-link:hover {
    color: #b52b21; /* 鼠标移入时的颜色变为红色 */
}
@media (max-width: 1450px) {
.product-container {
    display: grid; /* 使用 Grid 布局 */
    grid-template-columns: repeat(3, 1fr); /* 每行显示三个产品 */
    gap: 5px; /* 调整产品之间的间距 */
    margin-left: 5%;
    margin-right: 5%;
}
}
/* 媒体查询，适用于屏幕宽度小于 784px */
@media (max-width: 784px) {
	.content2{
		margin-top: 35%;
	}
    .product-container {
        margin-left: 20px;
        margin-right: 20px;
        gap: 12px; /* 调整产品之间的间距 */
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* 自动调整列数，每列最小宽度150px */
    }
    
    .product {
        margin-top: -10px;
        margin-bottom: 20px;
    }
	.product-name{
		font-size: 12pt;
	}
    .product-weight{
		font-size: 8pt;
	}
    .content2 h2 {
        margin-bottom: 30px;
    }

    /* 调整分页按钮的大小 */
    button {
        padding: 6px 12px;
        font-size: 14px;
    }
}



/*为什么删了搜索栏样式就变了？*/
button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	z-index: 10;
}
/*二维码放置处*/
.QRcode {
    margin-top: 6.25rem;
    padding-bottom: 6.25rem;
    display: flex;
    justify-content: center; /* 整体居中 */
	/*background: linear-gradient(to bottom, transparent 12.5%, #eef3fa 12.5%);*/
}
.QRcode a{
	text-decoration: none;
	color: #666666;
}
.QR-whole {
    display: flex;
    flex-direction: row; /* 横向布局 */
    align-items: center; /* 子元素在纵向上居中对齐 */
}

.QR-whole a {
    display: flex;
    flex-direction: column; /* 竖向布局 */
    align-items: center; /* 子元素在横向上居中对齐 */
    text-align: center; /* 文字居中对齐 */
    margin: 0 70px; /* 左右间距为 70px，每对相邻的子元素间距为 140px */
	
}

.QR-whole img {
    width: 60px;
    height: 62px;
    display: block;
    margin-bottom: 12px; /* 图片和文字之间的间距 */
}

/* 鼠标移入时文字颜色变为红色 */
.QR-whole > div:hover p {
    color: #b51b21 ;
}

.QR-whole a img:hover {
    transform: scale(2.5); /* 放大 10% */
    transition: transform 0.3s ease; /* 添加平滑过渡效果 */
}
@media (max-width: 1050px) {
	
    .QR-whole {
        flex-direction: row; /* 横向布局 */
        justify-content: space-between; /* 元素之间的间距均匀分布 */
		margin-left: 10%;
    }

    .QR-whole a {
        flex: 1 1 calc(50% - 20px); 
        margin: 10px; 
    }

    .QR-whole img {
        width: 60px; /* 根据需求调整缩放后的宽度 */
        height: auto; /* 保持图片的纵横比 */
    }
}
@media (max-width: 784px) {
    .QR-whole {
        flex-direction: row; /* 横向布局 */
        justify-content: space-between; /* 元素之间的间距均匀分布 */
		margin-left: 5%;
    }

    .QR-whole a {
        flex: 1 1 calc(50% - 20px); 
        margin: 10px; 
    }

    .QR-whole img {
        width: 50px; /* 根据需求调整缩放后的宽度 */
        height: auto; /* 保持图片的纵横比 */
    }
}