/* 小屏设备样式（优先级较高，覆盖默认样式） */
@media screen and (max-width: 768px) {

	/* 针对屏幕宽度小于等于 768px 的设备（如手机、平板） */
	/* 适用于小屏设备（最大宽度 375px） */
	@media screen and (max-width: 375px) {
		.google {
			display: none;
		}

		.appxg {
			display: none;
		}

		.steam {
			display: none;
		}

		.appzg {
			display: none;
		}
	}

	/* 适用于小屏设备（最大宽度 375px） */
	@media screen and (max-width: 550px) {
		.google {
			display: none;
		}

		.appxg {
			display: none;
		}

		.steam {
			display: none;
		}
	}

	.header-container {
		position: sticky;
		/* 保持固定在页面顶部 */
		top: 0;
		/* 距离顶部为 0 */
		z-index: 100;
		/* 设置层级，让它浮于内容之上 */
		background-color: #f9f9f9;
		/* 设置背景颜色为浅灰色 */
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		/* 添加阴影效果 */
		border-radius: 0 0 10px 10px;
		/* 设置底部圆角为 10px */
		overflow: hidden;
		/* 隐藏溢出内容 */
	}

	.header {
		display: flex;
		justify-content: center;
		padding: 5px 40px;
		align-items: center;
		flex-direction: column;
	}

	h1 {
		font-size: 88%;
		/* 设置字体大小为 28px */
		/* padding: 10px 20px; */
		/* 内边距为上下 10px，左右 15px */
	}

	.ddcxpx {
		display: flex;
		justify-content: center;
		/* gap: 10px; */
		flex-wrap: wrap;
		flex-direction: row;
		align-content: center;
		align-items: center;
	}

	.google {
		display: none;
	}

	.appxg {
		display: none;
	}

	.steam1 {
		display: none;
	}

	.order-input {
		height: 21px;
		/* 设置输入框高度为 32px */
		padding: 0 10px;
		/* 左右内边距为 10px */
		border: 1px solid #ccc;
		/* 边框颜色为浅灰色 */
		border-radius: 5px;
		/* 设置圆角为 5px */
		font-size: 9px;
		/* 设置字体大小为 14px */
		width: 100px;
		/* 设置输入框宽度为 200px */
	}

	/* 添加右外边距，让向右移动 */

	.order-check {
		width: 100px;
		/* 按钮宽度 */
		height: 23px;
		/* 按钮高度 */
		background-color: #4CAF50;
		/* 按钮背景颜色 */
		color: white;
		/* 按钮文字颜色 */
		font-size: 10px;
		/* 字体大小 */
		border: none;
		/* 去除边框 */
		border-radius: 5px;
		/* 设置圆角 */
		cursor: pointer;
		/* 鼠标悬停时显示手型指针 */
		text-align: center;
		/* 文本居中 */
		line-height: 23px;
		/* 设置行高，使文字在按钮内垂直居中 */
		transition: all 0.3s ease;
		/* 添加动画过渡效果 */
	}

	.search-nav-wrapper {
		/* display: flex; */
		/* 使用 Flex 布局 */
		background-color: white;
		/* 设置背景颜色为白色 */
		padding: 10px 40px;
		/* 内边距为上下 10px，左右 40px */
		/* flex-direction: column; */
		/* 子元素垂直排列 */
		gap: 10px;
		/* 子元素之间的间距为 10px */
	}

	.search-container {
		display: flex;
		/* 使用 Flex 布局 */
		justify-content: center;
		/* 子元素水平居中对齐 */
	}

	.search-bar {
		width: 100%;
		/* 设置宽度为 100% */
		max-width: 600px;
		/* 最大宽度为 600px */
		padding: 10px;
		/* 内边距为 10px */
		border: 1px solid #ccc;
		/* 边框颜色为浅灰色 */
		border-radius: 5px;
		/* 设置圆角为 5px */
	}

	.tags-container {
		display: flex;
		overflow-x: auto;
		gap: 10px;
		/* margin-left: 60px; */
		flex-wrap: wrap;
		flex-direction: row;
		align-content: center;
		justify-content: center;
	}

	.tag {
		padding: 5px 10px;
		/* 内边距为上下 10px，左右 15px */
		border: 1px solid #ddd;
		/* 边框颜色为浅灰色 */
		border-radius: 20px;
		/* 设置圆角为 20px */
		background-color: #eee;
		/* 设置背景颜色为浅灰色 */
		cursor: pointer;
		/* 鼠标悬停时显示指针 */
		font-size: 2vw;
		/* 字体大小为视口宽度的 5% */
	}

	.tag.czzk {
		/* padding: 10px 15px; */
		/* 内边距为上下 10px，左右 15px */
		border: 1px solid #ddd;
		/* 边框颜色为浅灰色 */
		border-radius: 20px;
		/* 设置圆角为 20px */
		background-color: #ff2e00;
		/* 设置背景颜色为浅灰色 */
		cursor: pointer;
		/* 鼠标悬停时显示指针 */
		color: white;
		/* 设置选中标签的字体颜色为白色 */
	}

	.tag.active {
		background-color: #4CAF50;
		/* 设置选中标签的背景颜色为绿色 */
		color: white;
		/* 设置选中标签的字体颜色为白色 */
	}

	.product-container {
		display: flex;
		/* 使用 Flex 布局 */
		flex-wrap: wrap;
		/* 子元素超出一行时换行 */
		justify-content: center;
		/* 子元素水平居中对齐 */
		gap: 20px;
		/* 子元素之间的间距为 20px */
		padding: 20px;
		/* 内边距为 20px */
	}

	.product-card {
		width: 200px;
		/* 设置卡片宽度为 200px */
		display: flex;
		/* 使用 Flex 布局 */
		flex-direction: column;
		/* 子元素垂直排列 */
		justify-content: space-between;
		/* 子元素均匀分布 */
		border-radius: 10px;
		/* 设置圆角为 10px */
		background-color: white;
		/* 设置背景颜色为白色 */
		box-shadow: 0 8px 8px rgba(0, 0, 0, 0.1);
		/* 添加阴影效果 */
		overflow: hidden;
		/* 隐藏溢出内容 */
	}

	.product-image-container {
		padding: 10px;
		/* 设置内边距为 10px */
	}

	.product-image {
		width: 100%;
		/* 设置图片宽度为 100% */
		border-radius: 10px;
		/* 设置圆角为 10px */
	}

	.product-details {
		border-top: 1px solid #ddd;
		/* 添加顶部边框，颜色为浅灰色 */
		/* padding: 10px; */
		/* 设置内边距为 10px */
		text-align: center;
		/* 文本居中对齐 */
	}

	.product-title {
		margin: 5px 0;
		/* 设置上下外边距为 5px */
		font-weight: bold;
		/* 设置字体加粗 */
		font-size: 12px;
		/* 设置字体大小为 16px */
	}

	.product-title-kk {
		font-weight: bold;
		/* 设置字体加粗 */
		font-size: 12px;
		/* 设置字体大小为 16px */
		color: #ff0000;
		/* 设置字体颜色为橙红色 */
	}

	.product-price {
		color: #FF5722;
		/* 设置字体颜色为橙红色 */
		font-size: 18px;
		/* 设置字体大小为 18px */
		font-weight: bold;
		/* 设置字体加粗 */
	}


	.product-card {
		width: 150px;
		cursor: pointer;
		/* 鼠标悬停时显示手型指针 */
		transition: transform 0.2s ease;
		/* 添加平滑缩放动画 */
	}

	.product-card:hover {
		transform: scale(1.05);
		/* 鼠标悬停时放大 */
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
		/* 添加阴影 */
	}

	.simple-footer {
		/* 页脚字体大小 */
		font-size: 12px;
		/* 字体大小 */
	}

}