/* =========================================================================
   Sanzhuti theme.css — thin compatibility layer.
   Layout/columns are driven by the ORIGINAL scraped main.css / media.css.
   This file ONLY adds: banner, uniform image shapes (no distortion),
   a few WordPress-only helpers (back-to-top, search, 404, pagination, contact).
   Do NOT add column counts / widths / heights here — that would break the
   pixel-accurate match with the scraped site.
   ========================================================================= */

/* ---------- Inner page banner ---------- */
.ban {
	position: relative;
	width: 100%;
	overflow: hidden;
	line-height: 0;
}
.ban img {
	width: 100%;
	height: auto;
	display: block;
}

/* ---------- Uniform image shapes (prevent distortion) ----------
   The original template relies on source images being uniformly sized.
   In WordPress thumbnails vary, so we force a stable aspect ratio and
   crop with object-fit. Product / related grids stay SQUARE (方). */
.img100 { overflow: hidden; line-height: 0; }

.product-list .img100,
.pro-grid .img100,
.gdcp .img100,
.proxqimg .img100,
.xqsmimg .img100 {
	aspect-ratio: 1 / 1;
}
.anli-list .img100 {
	aspect-ratio: 4 / 3;
}
.xw-list .img100 {
	aspect-ratio: 3 / 2;
}

.product-list .img100 img,
.pro-grid .img100 img,
.gdcp .img100 img,
.anli-list .img100 img,
.xw-list .img100 img,
.proxqimg .img100 img,
.xqsmimg .img100 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s;
}

/* ---------- Engineering case caption: default red overlay is defined in main.css .anli-con ---------- */

/* ---------- Back to top ---------- */
.fubox {
	position: fixed; right: 20px; bottom: 60px; z-index: 99;
	width: 44px; height: 44px; display: none;
	background: #b5004e; border-radius: 4px; cursor: pointer;
}
.fubox.active { display: block; }
.fubox .toTop { display: block; width: 100%; height: 100%; }
.fubox .toTop:before {
	content: ''; display: block; width: 12px; height: 12px; margin: 16px auto 0;
	border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(-45deg);
}

/* ---------- Single post meta (news / cases) ---------- */
.alxq-title { text-align: center; padding: 10px 0 24px; }
.alxq-title h1 { font-size: 26px; color: #333; }
.alxq-title span { display: inline-block; color: #999; font-size: 13px; margin: 0 10px; }
.edibox { line-height: 2; color: #555; font-size: 15px; }
.edibox p { margin-bottom: 16px; }
.xwfy { margin-top: 40px; }
.xwfy-a { width: 50%; font-size: 14px; }
.xwfy-a a { color: #888; }
.xwfy-a a:hover { color: #b5004e; }
.fanghui1 { margin-top: 40px; }
.fanghui1 a {
	display: inline-block; padding: 10px 30px; border: 1px solid #ddd; color: #666;
}
.fanghui1 a:hover { border-color: #b5004e; color: #b5004e; }

/* ---------- WordPress-only: search / 404 / pagination ---------- */
.search-result li { padding: 18px 0; border-bottom: 1px solid #eee; list-style: none; }
.search-result li a { font-size: 18px; color: #333; }
.search-result li a:hover { color: #b5004e; }
.search-result li p { color: #888; font-size: 14px; margin-top: 6px; }
.not-found { text-align: center; padding: 60px 0; }
.not-found h1 { font-size: 120px; color: #b5004e; }
.not-found p { color: #888; margin: 16px 0 24px; }
.pagination { display: inline-block; }
.pagination a, .pagination span {
	display: inline-block; padding: 8px 14px; margin: 0 3px; border: 1px solid #ddd; color: #555;
}
.pagination .current, .pagination a:hover { background: #b5004e; color: #fff; border-color: #b5004e; }

/* ---------- Contact page ---------- */
.contact-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 30px;
}
.contact-left {
	flex: 0 0 380px;
	max-width: 380px;
}
.contact-left .ci-card {
	background: #fafafa;
	border: 1px solid #eee;
	border-radius: 4px;
	padding: 20px 24px;
	margin-bottom: 16px;
	transition: border-color .2s, box-shadow .2s;
}
.contact-left .ci-card:last-child {
	margin-bottom: 0;
}
.contact-left .ci-card:hover {
	border-color: #b5004e;
	box-shadow: 0 2px 12px rgba(181,0,78,.08);
}
.contact-left .ci-card h4 {
	font-size: 15px;
	color: #b5004e;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.contact-left .ci-card h4 i {
	display: inline-block;
	width: 18px;
	height: 18px;
	line-height: 18px;
	text-align: center;
	background: #b5004e;
	color: #fff;
	border-radius: 50%;
	font-style: normal;
	font-size: 11px;
}
.contact-left .ci-card p {
	color: #555;
	line-height: 1.8;
	font-size: 14px;
}
.contact-right {
	flex: 1;
	min-width: 0;
}
.contact-right iframe {
	width: 100%;
	height: 100%;
	min-height: 420px;
	border: 0;
	border-radius: 4px;
	display: block;
}
.map-placeholder {
	width: 100%;
	min-height: 420px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f5f7fa;
	border: 2px dashed #ddd;
	border-radius: 4px;
	color: #999;
	font-size: 14px;
	letter-spacing: .5px;
}
.map-placeholder span {
	font-size: 28px;
	margin-right: 6px;
}
.contact-form-wrap {
	margin-top: 40px;
	padding: 36px 40px;
	box-sizing: border-box;
	background: #fafafa;
	border-radius: 4px;
	overflow: visible;
}
.contact-form-title {
	font-size: 20px;
	color: #333;
	margin-bottom: 24px;
	border-left: 4px solid #b5004e;
	padding-left: 12px;
}

/* ---------- Responsive: stack the absolutely-positioned about sidebar on mobile ---------- */
@media (max-width: 900px) {
	.brief-nav { position: static; width: 100% !important; margin-bottom: 20px; }
	.box-right { margin-left: 0 !important; }
}

/* ---------- Product page: consultation buttons (no wrap for long EN labels) ---------- */
.pri-online { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 25px; }
.pri-online a {
	width: auto;
	max-width: none;
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	padding: 0 14px;
	box-sizing: border-box;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pri-online .zxzx2 { font-family: dincondBold; }

/* ---------- Product gallery: force uniform square images ---------- */
.proxqimg.img100 { aspect-ratio: 1 / 1; }
.xqsmimg .swiper-slide { aspect-ratio: 1 / 1; height: auto; }
.proxqimg .swiper-slide,
.xqsmimg .swiper-slide { overflow: hidden; }
.proxqimg .swiper-slide img,
.xqsmimg .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- Grid lists: uniform image shapes ---------- */
.gcal-list .img100 { aspect-ratio: 4 / 3; }
.gcal-list .img100 img,
.honnor .img100 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s;
}

/* ---------- Left category nav: beautify + adapt to long English labels ---------- */
.brief-nav-con li { margin-top: 6px; }
.brief-nav-con li:first-child { margin-top: 0; }
.left-yi {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	line-height: 1.45;
	padding: 12px 12px;
	background: #f5f5f3;
	color: #808080;
	position: relative;
	white-space: normal;
	word-break: break-word;
	overflow-wrap: anywhere;
	transition: color .25s, background .25s;
}
.left-yi:hover { color: #b5004e; }
.brief-nav-con li.active .left-yi:hover { color: #fff; }
.brief-nav-con li.active .left-yi { color: #fff; }
.brief-nav-con li.active .left-yi:before { width: 100%; }

/* ---------- Homepage product category tab menu: adapt to long English labels ---------- */
.tab-btn { margin: 30px 0 0; }
.tab-btn a {
	width: auto;
	min-width: 120px;
	padding: 0 22px;
	white-space: nowrap;
	word-break: normal;
	overflow: visible;
}

/* ---------- Header social icons ---------- */
.head-social-icon { display: inline-block; vertical-align: middle; }
.head-social-icon img { vertical-align: middle; }
.head-top .fr .language-switcher,
.head-top .fr select { font-size: 12px; line-height: 40px; color: #666; }

/* ---------- Mobile language switcher in head-top2 ---------- */
.mobile-lang-switcher select,
.mobile-lang-switcher .language-switcher { font-size: 14px; color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.4); border-radius: 3px; padding: 2px 6px; }
.mobile-lang-switcher select option { color: #333; }

/* ---------- Mobile menu button: ensure clickable above all other header layers ---------- */
#menu-handler { z-index: 9999; pointer-events: auto; -webkit-tap-highlight-color: rgba(181,0,78,.25); touch-action: manipulation; }

/* ---------- Mobile header: don't show the gray head-top band on small screens,
   and let .header size to fit its content so the fixed bar aligns with the body padding-top. ---------- */
@media (max-width: 1250px) {
    /* Only hide the top gray contact band; NOT the fixed bottom bar
       (.head-top.head-top2.phone-show) which also carries the .head-top class. */
    .head-top.pc-show { display: none; }
    .header { height: 60px; }
    .header .head-mid { height: 60px !important; }
}

/* ---------- Footer: keep the contact column on the same line ----------
   main.css keeps the scraped site's `.footer-mid-left dl { float:left; margin-right:80px }`
   (80px gap, 1:1 with source) and we do NOT change that gap.
   The scraped site fits all 6 columns in one row because its labels are short Chinese;
   our footer is data-driven and uses longer English labels, so 6 columns + 80px gaps
   exceed .w1388 (1388px) and the right contact column wraps to the next line.
   Fix: reserve space for the right column so it always stays beside the menu.
   The menu columns wrap within their own area when English labels are too wide for a
   single row — the contact column no longer drops below. Scoped to desktop only so it
   never overrides the mobile stacking in media.css (max-width:768px). */
@media (min-width: 769px) {
	.footer-mid-left { width: calc(100% - 320px); }
	.footer-mid-right { width: 300px; }
}