/* ============================================================
   DaQian Display — 全站响应式补充层（responsive.css）
   ------------------------------------------------------------
   规则：
   1. 本文件是全站最后加载的样式层，只在窄屏媒体查询内生效；
      桌面端（>1024px）不写任何规则，保证现有布局不变。
   2. 修复项均来自 390px 手机视口的实测诊断（mqcheck.html）：
      - 产品/下载/联系页筛选区 dt 标签被压成竖条（style.css .filter-box dl dt{width:8%}）
      - About/Honor 等页子栏目标签导航横向溢出被裁切
      - 产品详情页按钮行 nowrap 溢出（dqprodetail.css .prodetails-btnlist）
      - 首页/产品列表 .product-name 固定 290px 在两列窄卡下被裁切
   3. 后续新增页面如出现手机端问题，优先把修复加到本文件对应断点。
   ============================================================ */


/* ---------------- 通用：图片/媒体不超宽 ---------------- */
@media screen and (max-width:1024px) {
	img, video, iframe { max-width: 100%; }
}


/* ---------------- ≤1100px：产品卡片 ---------------- */
@media screen and (max-width:1100px) {
	/* 首页/产品列表卡片在两列布局下宽度收窄，
	   标题不再使用固定 290px，避免文字被裁切（桌面端保持 290px 不变） */
	.product-grid .product-name { width: auto; max-width: 100%; box-sizing: border-box; }
}


/* ---------------- ≤768px：手机端 ---------------- */
@media screen and (max-width:768px) {

	/* 0. 页脚 Online Message 表单的 Send 按钮：
	      桌面样式在 style.css 里只写了 min-width:768px，
	      手机端会退化成浏览器默认按钮，这里补上圆角样式 */
	footer .send-btn {
		width: auto;
		min-width: 160px;
		height: 46px;
		padding: 0 32px;
		margin-top: 4%;
		border: none;
		border-radius: 24px;
		background-color: #f18e00;
		color: #fff;
		font-size: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		box-shadow: 0 0 0 #e17000;
		transition: all .2s linear;
	}
	footer .send-btn .hvr-icon { color: #fff; }

	/* 0.1 banner 与 header 之间留 3px 空隙 */
	.home-banner { margin-top: 3px; }

	/* 0.1.1 所有页面顶部 banner：手机端紧贴顶部，高度自适应。
	      各页 Pagebanner/ProList/Company/Blog 等 CSS 在 ≤768 给 .e_bannerA-1
	      设了 margin-top:60px（带 ID 前缀），故需 !important 统一压掉 */
	.e_bannerA-1 {
		height: auto !important;
		margin-top: 0px !important;
	}

	/* 0.2 首页 banner 文字：手机端整体居中占满宽度、字号缩小，
	      保证所有文字完整可见 */
	.home-banner .indexbanner-text {
		left: 50%;
		width: 92%;
		transform: translate(-50%, -50%);
		padding-top: 3px;
		box-sizing: border-box;
	}
	.home-banner .indexbanner-text .title { font-size: 16px; line-height: 1.35; }
	.home-banner .indexbanner-text .text { font-size: 11px; }
	.home-banner .indexbanner-text .text .text01 { font-size: 20px; line-height: 1.35; }
	.home-banner .indexbanner-text .text .v_line { width: 60px; height: 3px; margin-top: 8px; }
	.home-banner .indexbanner-text .text .text02 { font-size: 12px; }
	.home-banner .indexbanner-text .text .text03 { font-size: 11px; line-height: 1.4; }

	/* 0.3 首页行业图标（p_list，Wine/OPTICAL…）：手机端一排两个 */
	#c_category_263-17604400666130 .e_loop-13 .p_loopitem { flex: 0 0 50%; }
	#c_category_263-17604400666130 .e_loop-13 .e_image-14 img { width: 100%; height: auto; }
	#c_category_263-17604400666130 .e_loop-13 .e_richText-15 { font-size: 13px !important; }

	/* 1. 筛选区（产品列表 / 产品筛选回执 / 相关列表页）
	      原 style.css：.filter-box dl dt{width:8%} 在手机上只有 ~31px，
	      “Material:”等标签被压成一字一行。改为标签独占一行、选项自然换行 */
	.filter-box dl { flex-wrap: wrap; margin: 10px 0; }
	.filter-box dl dt { width: auto; flex: none; line-height: 28px; font-weight: 500; }
	.filter-box dl dd { width: 100%; float: none; }
	.filter-nav ul { display: flex; flex-wrap: wrap; row-gap: 6px; }

	/* 2. 子栏目标签导航（About/Honor/Our team 等页顶部的
	      Company Profile | Our team | Our clients 横条）
	      手机上改为整行横向滑动，不再被裁切；桌面端不变 */
	[id^="c_static_001_P_2196"] .e_loop-2 {
		display: flex;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	[id^="c_static_001_P_2196"] .e_loop-2 .cbox-2 { flex: 0 0 auto; }
	[id^="c_static_001_P_2196"] .e_loop-2 .e_text-3 a { white-space: nowrap; padding: 14px 18px; }

	/* 3. 产品详情页按钮行（Send Inquiry / Product Description）
	      原样式 nowrap + flex nowrap，手机上溢出右边界，允许换行；
	      手机端上下堆叠布局，取消 PC 端用于对齐大图底边的 144px 底部留白 */
	.prodetails-wrap { flex-wrap: wrap; }
	.prodetails-btnlist { white-space: normal; }
	.prodetails-info { padding-bottom: 0; }
}


/* ---------------- ≤500px：小屏手机 ---------------- */
@media screen and (max-width:500px) {
	/* 卡片间距收紧，保证两列卡片在小屏不拥挤 */
	.product-grid { gap: 12px; }
	.product-card .inquiry-btn { font-size: 14px; }
}