/**
 * 移动端产品销售页样式文件
 * 与 m.soship.com 风格一致
 */

/* 加载 Font Awesome 图标库 - 使用本地文件避免 CDN 拦截 */
@import url('https://m.soship.com/static/css/all.min.css');

/* 分类滚动器样式 */
.category-scroller {
	padding: 16px;
	/* 移除外层背景色，让内层显示圆角 */
	background: transparent;
}

/* 分类区块样式 - 使用瀑布流布局展示分类项 */
.categories-section {
	/* 启用瀑布流布局模式 */
	column-count: 2;
	/* 列之间的间距为 12 像素 */
	column-gap: 12px;
	/* 外边距为 1rem */
	margin: 1rem;
	/* 使用 CSS 变量背景色 (浅灰色 #fafafa) */
	background: #fafafa;
	/* 应用中等尺寸圆角 (0.5rem = 8px) */
	border-radius: 8px;
	/* 内边距为 1rem */
	padding: 1rem;
	/* 添加浅色边框 (#e5e5e5) */
	border: 1px solid #e5e5e5;
	/* 确保内容不超出圆角边界 */
	overflow: hidden;
}

/* 瀑布流项 - 防止卡片被断开 */
.categories-section > a {
	/* 显示为块级元素 */
	display: block;
	/* 防止元素内部断开 */
	break-inside: avoid;
	/* 底部间距 */
	margin-bottom: 12px;
}

/* Modern 产品卡片样式 - 适配瀑布流布局 */
.product-card-modern {
	/* 白色半透明背景 */
	background: rgba(255, 255, 255, 0.7);
	/* 大尺寸圆角 */
	border-radius: 16px;
	/* 内容不超出圆角 */
	overflow: hidden;
	/* 平滑过渡效果 */
	transition: all 0.3s ease;
	/* 淡蓝色边框 */
	border: 0.5px solid rgba(10, 132, 255, 0.1);
	/* 块级显示 */
	display: block;
	/* 充满宽度 */
	width: 100%;
}

/* 鼠标悬停效果 */
.product-card-modern:hover {
	/* 向上移动 4 像素 */
	transform: translateY(-4px);
	/* 增强阴影效果 */
	box-shadow: 0 8px 16px rgba(10, 132, 255, 0.15);
}

/* 触摸设备的交互效果 */
.product-card-modern:active {
	/* 向上移动 2 像素 */
	transform: translateY(-2px);
	/* 中等阴影效果 */
	box-shadow: 0 6px 12px rgba(10, 132, 255, 0.15);
}

/* 产品图片容器 */
.product-image-modern-container {
	/* 相对定位 */
	position: relative;
	/* 充满宽度 */
	width: 100%;
	/* 不收缩 */
	flex-shrink: 0;
}

/* 产品图片占位符 */
.product-image-modern-placeholder {
	/* 充满容器 */
	width: 100%;
	/* 充满容器 */
	height: 100%;
	/* 居中对齐 */
	display: flex;
	/* 垂直居中 */
	align-items: center;
	/* 水平居中 */
	justify-content: center;
	/* 渐变背景 */
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	/* 灰色文字 */
	color: #6c757d;
	/* 大图标 */
	font-size: 2rem;
}

/* 产品信息区域 */
.product-info-modern {
	/* 内边距 */
	padding: 12px;
}

/* 产品标题 */
.product-title-modern {
	/* 字体大小 */
	font-size: 15px;
	/* 加粗 */
	font-weight: 600;
	/* 底部间距 */
	margin-bottom: 8px;
	/* 深色文字 */
	color: #0f172a;
	/* 行高 */
	line-height: 1.4;
	/* 多行省略 */
	display: -webkit-box;
	/* 限制 2 行 */
	-webkit-line-clamp: 2;
	/* 垂直方向省略 */
	-webkit-box-orient: vertical;
	/* 溢出隐藏 */
	overflow: hidden;
	/* 文本省略 */
	text-overflow: ellipsis;
}

/* 产品元信息区域 - 价格和年份左右分布 */
.product-meta-modern {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.75rem;
	font-size: 0.8125rem;
}

/* 产品价格 */
.product-price-modern {
	color: #0A84FF;
	font-size: 0.8rem;
	font-weight: 800;
	margin-bottom: 0;
}

/* 产品年份 - 与 m.soship.com 一致 */
.product-year-modern {
	font-size: 0.75rem;
	color: #94a3b8;
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

/* 产品位置 */
.product-location-modern {
	/* 小字体 */
	font-size: 12px;
	/* 灰色文字 */
	color: #64748b;
	/* Flexbox 布局 */
	display: flex;
	/* 垂直对齐 */
	align-items: center;
	/* 间距 */
	gap: 4px;
}

/* 地图标记图标样式 - Font Awesome 6 */
.product-location-modern i.fas.fa-map-marker-alt {
	/* 红色图标 */
	color: #EF4444;
	/* 图标大小 */
	font-size: 14px;
	/* 最小宽度 */
	min-width: 14px;
	/* 行高 */
	line-height: 1;
	/* 垂直对齐 */
	vertical-align: middle;
	/* 居中对齐 */
	display: inline-flex;
	/* 水平居中 */
	align-items: center;
	/* 垂直居中 */
	justify-content: center;
}

/* 确保 Font Awesome 图标正确渲染 */
.fas,
.fa {
	font-family: "Font Awesome 6 Free" !important;
	font-weight: 900;
}

/* VIP 徽章样式 - 与 m.soship.com 一致 */
.vip-badge-modern {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	background: linear-gradient(135deg, #f97316, #ef4444);
	color: white;
	padding: 0.25rem 0.625rem;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 700;
	z-index: 2;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
	.main {
		padding: 0px;
	}
	.category-scroller {
		padding: 16px !important;
		/* 移动端保持透明背景 */
		background: transparent;
		/* 修复 z-index 需要非 static 定位 */
		position: relative !important;
		z-index: 0 !important;
	}


	.categories-section {
		column-gap: 10px;
		padding: 0px;
		/* 移动端保持圆角效果一致 */
		border-radius: 12px;
	}


	.categories-section > a {
		margin-bottom: 10px;
	}


}

@media (max-width: 480px) {
	.main {
		padding: 0px;
	}
	
	.categories-section {
		column-count: 2;
		column-gap: 8px;
	}
	
	.categories-section > a {
		margin-bottom: 8px;
	}
}