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

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

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

/* 分类区块样式 - 使用 CSS Columns 实现真正的瀑布流布局（支持高度不一致的卡片） */
.categories-section {
	/* 使用 CSS Columns 实现真正的瀑布流/Masonry 布局 */
	-webkit-column-count: 2 !important;
	-moz-column-count: 2 !important;
	-o-column-count: 2 !important;
	column-count: 2 !important;
	-webkit-column-gap: 12px !important;
	-moz-column-gap: 12px !important;
	-o-column-gap: 12px !important;
	column-gap: 12px !important;
	
	/* 外边距为 0 */
	margin: 0;
	/* 使用 CSS 变量背景色 (浅灰色 #fafafa) */
	background: #fafafa;
	/* 应用中等尺寸圆角 (0.5rem = 8px) */
	border-radius: 8px;
	/* 内边距为 1rem */
	padding: 1rem;
	/* 添加浅色边框 (#e5e5e5) */
	border: 1px solid #e5e5e5;
	/* 确保内容不超出圆角边界 */
	overflow: hidden;
	/* 明确宽度为 100% */
	width: 100%;
	/* 使用 box-sizing 确保 padding 不影响宽度计算 */
	box-sizing: border-box;
	
	/* 百度APP兼容性修复 */
	-webkit-box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	-ms-box-sizing: border-box !important;
	
	/* 确保在百度APP中正确显示两列 */
	max-width: 100% !important;
	min-width: 100% !important;
	display: block !important;
	
	/* 强制两列布局 */
	-webkit-columns: 2 !important;
	-moz-columns: 2 !important;
	columns: 2 !important;
	
	/* 确保列宽计算正确 - 使用固定像素值避免calc兼容问题 */
	-webkit-column-width: 150px !important;
	-moz-column-width: 150px !important;
	column-width: 150px !important;
	
	/* 百度APP特有修复 */
	-webkit-box-orient: horizontal !important;
	-moz-box-orient: horizontal !important;
	box-orient: horizontal !important;
	
	/* 确保在百度APP中不被压缩 */
	-webkit-flex-shrink: 0 !important;
	-moz-flex-shrink: 0 !important;
	flex-shrink: 0 !important;
	
	/* 确保列布局不被百度APP的默认样式干扰 */
	-webkit-writing-mode: horizontal-tb !important;
	writing-mode: horizontal-tb !important;
	
	/* 强制计算宽度，确保两列显示 */
	width: 100% !important;
	min-width: 100% !important;
	max-width: 100% !important;
	
	/* 百度APP WebView 特有修复 */
	-webkit-transform: translateZ(0) !important;
	transform: translateZ(0) !important;
	-webkit-backface-visibility: hidden !important;
	backface-visibility: hidden !important;
	-webkit-perspective: 1000 !important;
	perspective: 1000 !important;
	
	/* 防止百度APP中的滚动问题 */
	-webkit-overflow-scrolling: touch !important;
	overflow-scrolling: touch !important;
	
	/* 百度APP CSS Columns 修复 */
	-webkit-column-fill: balance !important;
	column-fill: balance !important;
	
	/* 确保瀑布流效果正常显示 */
	height: auto !important;
	min-height: 500px !important;
	max-height: none !important;
	
	/* 防止百度APP中的渲染问题 */
	-webkit-transform-style: preserve-3d !important;
	transform-style: preserve-3d !important;
	-webkit-perspective-origin: top center !important;
	perspective-origin: top center !important;
	
	/* 百度APP强制两列布局修复 */
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	
	/* 百度APP WebView 渲染优化 */
	-webkit-tap-highlight-color: transparent !important;
	user-select: none !important;
	-webkit-user-select: none !important;
	
	/* 确保在百度APP中不被其他样式覆盖 */
	position: relative !important;
	z-index: 9999 !important;
	
	/* 强制两列布局的关键修复 */
	-webkit-column-span: none !important;
	column-span: none !important;
	
	/* 百度APP特有修复 - 防止单列显示 */
	-webkit-flex: none !important;
	-moz-flex: none !important;
	flex: none !important;
	-webkit-box-flex: 0 !important;
	-moz-box-flex: 0 !important;
	box-flex: 0 !important;
	
	/* 确保列布局不被百度APP的默认样式干扰 */
	-webkit-text-size-adjust: 100% !important;
	text-size-adjust: 100% !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
}

/* 瀑布流项 - 适配 CSS Columns 布局，支持高度不一致的卡片 */
.categories-section > a {
	/* 显示为块级元素 */
	display: block !important;
	/* 充满列宽 */
	width: 100% !important;
	/* 防止元素在列之间断开 */
	break-inside: avoid !important;
	/* 避免页面换行时断开 */
	page-break-inside: avoid !important;
	/* 避免在列内部分裂 */
	-webkit-column-break-inside: avoid !important;
	-moz-column-break-inside: avoid !important;
	-o-column-break-inside: avoid !important;
	/* 底部间距 - 使用 margin-bottom 方式 */
	margin: 0 0 12px 0 !important;
	/* 确保在百度APP中正确渲染 */
	-webkit-box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	box-sizing: border-box !important;
	/* 确保不被百度APP的默认样式干扰 */
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	
	/* 百度APP WebView 特有修复 */
	-webkit-transform: translateZ(0) !important;
	transform: translateZ(0) !important;
	-webkit-backface-visibility: hidden !important;
	backface-visibility: hidden !important;
	-webkit-perspective: 1000 !important;
	perspective: 1000 !important;
	
	/* 确保在百度APP中不被强制换行 */
	-webkit-white-space: normal !important;
	white-space: normal !important;
	word-wrap: break-word !important;
	word-break: break-word !important;
}

/* 产品卡片样式 - 适配 CSS Columns 布局 */
.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%;
	/* 确保底部间距不受影响 */
	margin: 0 !important;
	margin-bottom: 0 !important;
	padding: 0 !important;
	padding-bottom: 0 !important;
	/* 确保在百度APP中正确渲染 */
	-webkit-box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	box-sizing: border-box !important;
	/* 确保不被百度APP的默认样式干扰 */
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
}



/* 鼠标悬停效果 */
.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);
}

/* Footer Description - UA 复制按钮样式 */
/*#ua-copy-btn {*/
/*	transition: all 0.3s ease;*/
/*	padding: 8px 12px;*/
/*	border-radius: 6px;*/
/*	background: rgba(10, 132, 255, 0.05);*/
/*	border: 1px solid rgba(10, 132, 255, 0.1);*/
/*	*/
/*	!* 确保可点击性 *!*/
/*	cursor: pointer !important;*/
/*	position: relative !important;*/
/*	z-index: 9999 !important;*/
/*	display: block !important;*/
/*	-webkit-tap-highlight-color: rgba(10, 132, 255, 0.2);*/
/*	user-select: none;*/
/*	-webkit-user-select: none;*/
/*}*/

/*#ua-copy-btn:hover {*/
/*	background: rgba(10, 132, 255, 0.1);*/
/*	border-color: rgba(10, 132, 255, 0.2);*/
/*	transform: translateY(-1px);*/
/*	box-shadow: 0 4px 8px rgba(10, 132, 255, 0.1);*/
/*}*/

/*#ua-copy-btn:active {*/
/*	transform: translateY(0);*/
/*	background: rgba(10, 132, 255, 0.15);*/
/*}*/

/*#ua-copy-btn .ua-icon {*/
/*	transition: transform 0.3s ease;*/
/*	display: inline-block;*/
/*	pointer-events: none; !* 让图标不阻止点击事件 *!*/
/*}*/

/*#ua-copy-btn:hover .ua-icon {*/
/*	transform: scale(1.2);*/
/*}*/

/* 产品图片容器 */
.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 {
		/* 移动端使用 CSS Columns 实现真正的瀑布流 */
		-webkit-column-count: 2 !important;
		-moz-column-count: 2 !important;
		-o-column-count: 2 !important;
		column-count: 2 !important;
		-webkit-column-gap: 10px !important;
		-moz-column-gap: 10px !important;
		-o-column-gap: 10px !important;
		column-gap: 10px !important;
		padding: 0px;
		/* 移动端保持圆角效果一致 */
		border-radius: 12px;
		/* 明确宽度为 100% - 修复移动端单列显示问题 */
		width: 100%;
		box-sizing: border-box;
		
		/* 百度APP移动端兼容性修复 */
		-webkit-box-sizing: border-box !important;
		-moz-box-sizing: border-box !important;
		-ms-box-sizing: border-box !important;
		max-width: 100% !important;
		min-width: 100% !important;
		display: block !important;
		-webkit-columns: 2 !important;
		-moz-columns: 2 !important;
		columns: 2 !important;
		
		/* 确保列宽计算正确 - 使用固定像素值避免calc兼容问题 */
		-webkit-column-width: 150px !important;
		-moz-column-width: 150px !important;
		column-width: 150px !important;
		
		/* 百度APP特有修复 */
		-webkit-box-orient: horizontal !important;
		-moz-box-orient: horizontal !important;
		box-orient: horizontal !important;
		
		/* 确保在百度APP中不被压缩 */
		-webkit-flex-shrink: 0 !important;
		-moz-flex-shrink: 0 !important;
		flex-shrink: 0 !important;
		
		/* 确保列布局不被百度APP的默认样式干扰 */
		-webkit-writing-mode: horizontal-tb !important;
		writing-mode: horizontal-tb !important;
		
		/* 百度APP WebView 特有修复 */
		-webkit-transform: translateZ(0) !important;
		transform: translateZ(0) !important;
		-webkit-backface-visibility: hidden !important;
		backface-visibility: hidden !important;
		-webkit-perspective: 1000 !important;
		perspective: 1000 !important;
		
		/* 防止百度APP中的滚动问题 */
		-webkit-overflow-scrolling: touch !important;
		overflow-scrolling: touch !important;
		
		/* 百度APP CSS Columns 修复 */
		-webkit-column-fill: balance !important;
		column-fill: balance !important;
		
		/* 确保瀑布流效果正常显示 */
		height: auto !important;
		min-height: 400px !important;
		max-height: none !important;
		
		/* 防止百度APP中的渲染问题 */
		-webkit-transform-style: preserve-3d !important;
		transform-style: preserve-3d !important;
		-webkit-perspective-origin: top center !important;
		perspective-origin: top center !important;
		
		/* 百度APP强制两列布局修复 */
		-webkit-appearance: none !important;
		-moz-appearance: none !important;
		appearance: none !important;
		
		/* 百度APP WebView 渲染优化 */
		-webkit-tap-highlight-color: transparent !important;
		user-select: none !important;
		-webkit-user-select: none !important;
		
		/* 确保在百度APP中不被其他样式覆盖 */
		position: relative !important;
		z-index: 9999 !important;
		
		/* 强制两列布局的关键修复 */
		-webkit-column-span: none !important;
		column-span: none !important;
		
		/* 百度APP特有修复 - 防止单列显示 */
		-webkit-flex: none !important;
		-moz-flex: none !important;
		flex: none !important;
		-webkit-box-flex: 0 !important;
		-moz-box-flex: 0 !important;
		box-flex: 0 !important;
		
		/* 确保列布局不被百度APP的默认样式干扰 */
		-webkit-text-size-adjust: 100% !important;
		text-size-adjust: 100% !important;
		-webkit-font-smoothing: antialiased !important;
		-moz-osx-font-smoothing: grayscale !important;
	}


	.categories-section > a {
		/* 显示为块级元素 */
		display: block !important;
		/* 充满列宽 */
		width: 100% !important;
		/* 防止元素在列之间断开 */
		break-inside: avoid !important;
		/* 避免页面换行时断开 */
		page-break-inside: avoid !important;
		/* 避免在列内部分裂 */
		-webkit-column-break-inside: avoid !important;
		-moz-column-break-inside: avoid !important;
		-o-column-break-inside: avoid !important;
		/* 底部间距 - 使用 margin-bottom 方式 */
		margin: 0 0 10px 0 !important;
		-webkit-box-sizing: border-box !important;
		-moz-box-sizing: border-box !important;
		box-sizing: border-box !important;
		
		/* 百度APP WebView 特有修复 */
		-webkit-transform: translateZ(0) !important;
		transform: translateZ(0) !important;
		-webkit-backface-visibility: hidden !important;
		backface-visibility: hidden !important;
		-webkit-perspective: 1000 !important;
		perspective: 1000 !important;
	}


}

@media (max-width: 480px) {
	.main {
		padding: 0px;
	}
	
	.categories-section {
		/* 小屏幕使用 CSS Columns 实现真正的瀑布流 */
		-webkit-column-count: 2 !important;
		-moz-column-count: 2 !important;
		-o-column-count: 2 !important;
		column-count: 2 !important;
		-webkit-column-gap: 8px !important;
		-moz-column-gap: 8px !important;
		-o-column-gap: 8px !important;
		column-gap: 8px !important;
		/* 明确宽度为 100% - 修复移动端单列显示问题 */
		width: 100%;
		box-sizing: border-box;
		
		/* 百度APP小屏幕兼容性修复 */
		-webkit-box-sizing: border-box !important;
		-moz-box-sizing: border-box !important;
		-ms-box-sizing: border-box !important;
		max-width: 100% !important;
		min-width: 100% !important;
		display: block !important;
		-webkit-columns: 2 !important;
		-moz-columns: 2 !important;
		columns: 2 !important;
		
		/* 确保列宽计算正确 - 使用固定像素值避免calc兼容问题 */
		-webkit-column-width: 150px !important;
		-moz-column-width: 150px !important;
		column-width: 150px !important;
		
		/* 百度APP特有修复 */
		-webkit-box-orient: horizontal !important;
		-moz-box-orient: horizontal !important;
		box-orient: horizontal !important;
		
		/* 确保在百度APP中不被压缩 */
		-webkit-flex-shrink: 0 !important;
		-moz-flex-shrink: 0 !important;
		flex-shrink: 0 !important;
		
		/* 确保列布局不被百度APP的默认样式干扰 */
		-webkit-writing-mode: horizontal-tb !important;
		writing-mode: horizontal-tb !important;
		
		/* 百度APP WebView 特有修复 */
		-webkit-transform: translateZ(0) !important;
		transform: translateZ(0) !important;
		-webkit-backface-visibility: hidden !important;
		backface-visibility: hidden !important;
		-webkit-perspective: 1000 !important;
		perspective: 1000 !important;
		
		/* 防止百度APP中的滚动问题 */
		-webkit-overflow-scrolling: touch !important;
		overflow-scrolling: touch !important;
		
		/* 百度APP CSS Columns 修复 */
		-webkit-column-fill: balance !important;
		column-fill: balance !important;
		
		/* 确保瀑布流效果正常显示 */
		height: auto !important;
		min-height: 300px !important;
		max-height: none !important;
		
		/* 防止百度APP中的渲染问题 */
		-webkit-transform-style: preserve-3d !important;
		transform-style: preserve-3d !important;
		-webkit-perspective-origin: top center !important;
		perspective-origin: top center !important;
		
		/* 百度APP强制两列布局修复 */
		-webkit-appearance: none !important;
		-moz-appearance: none !important;
		appearance: none !important;
		
		/* 百度APP WebView 渲染优化 */
		-webkit-tap-highlight-color: transparent !important;
		user-select: none !important;
		-webkit-user-select: none !important;
		
		/* 确保在百度APP中不被其他样式覆盖 */
		position: relative !important;
		z-index: 9999 !important;
		
		/* 强制两列布局的关键修复 */
		-webkit-column-span: none !important;
		column-span: none !important;
		
		/* 百度APP特有修复 - 防止单列显示 */
		-webkit-flex: none !important;
		-moz-flex: none !important;
		flex: none !important;
		-webkit-box-flex: 0 !important;
		-moz-box-flex: 0 !important;
		box-flex: 0 !important;
		
		/* 确保列布局不被百度APP的默认样式干扰 */
		-webkit-text-size-adjust: 100% !important;
		text-size-adjust: 100% !important;
		-webkit-font-smoothing: antialiased !important;
		-moz-osx-font-smoothing: grayscale !important;
	}
	
	.categories-section > a {
		/* 显示为块级元素 */
		display: block !important;
		/* 充满列宽 */
		width: 100% !important;
		/* 防止元素在列之间断开 */
		break-inside: avoid !important;
		/* 避免页面换行时断开 */
		page-break-inside: avoid !important;
		/* 避免在列内部分裂 */
		-webkit-column-break-inside: avoid !important;
		-moz-column-break-inside: avoid !important;
		-o-column-break-inside: avoid !important;
		/* 底部间距 - 使用 margin-bottom 方式 */
		margin: 0 0 8px 0 !important;
		-webkit-box-sizing: border-box !important;
		-moz-box-sizing: border-box !important;
		box-sizing: border-box !important;
		
		/* 百度APP WebView 特有修复 */
		-webkit-transform: translateZ(0) !important;
		transform: translateZ(0) !important;
		-webkit-backface-visibility: hidden !important;
		backface-visibility: hidden !important;
		-webkit-perspective: 1000 !important;
		perspective: 1000 !important;
	}
}