/**
 * KAIERMEI EN 补充样式
 * 中文站 header.css / footer.css / common.css 已被直接复用，
 * 这里只补英文站特有的部分，避免改动中文站样式。
 */

/* ---------- Logo（文字版，等客户提供英文字标后替换） ---------- */
.logo-link {
	display: inline-flex;
	align-items: center;
	height: 90px;
}

.km-logo-text {
	font-family: "Oswald", "Inter", Arial, sans-serif;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: 2px;
	color: #0e4829 !important;
	line-height: 1;
	white-space: nowrap;
}

.km-logo-img {
	display: block;
	height: 46px;
	width: auto;
	max-width: 100%;
}

.km-logo-text-sm {
	display: none;
	font-family: "Oswald", "Inter", Arial, sans-serif;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 1px;
	color: #0e4829 !important;
}

/* ---------- 下拉内的补充元素 ---------- */
.km-menu-empty {
	padding: 20px;
	color: #777;
	font-size: 14px;
}

.km-menu-desc {
	padding: 0 20px 20px;
	color: #606266;
	font-size: 14px;
	line-height: 1.7;
}

.product-type-title.active {
	color: #0e4829;
	border-bottom: 2px solid #0e4829;
}

/* =================================================================
   picture 元素适配（关键）
   中文站 CSS 假定结构是 <a><img></a>，插入 <picture> 后后代选择器改变，
   导致图片尺寸、object-fit 全部失效。这里逐块补回。
   ================================================================= */

/* 轮播：容器用图片同比例，保证不裁切也不放大 */
.index-banner .swiper-container {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1920 / 900;
}

.index-banner .swiper-container .swiper-wrapper,
.index-banner .swiper-container .swiper-slide {
	height: 100% !important;
	width: 100% !important;
}

.index-banner picture {
	display: block;
	width: 100%;
	height: 100%;
}

.index-banner picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* 平板与手机改比例，避免横幅过矮 */
@media (max-width: 991px) {
	.index-banner .swiper-container {
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 576px) {
	.index-banner .swiper-container {
		aspect-ratio: 4 / 3;
	}
}

/* rect-* 是 padding-bottom 撑高的比例容器（common.css 里 height:0），
   图片必须绝对定位填充，否则容器高度为 0、图片塌陷 */
[class*="rect-"] picture {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: block;
}

[class*="rect-"] picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 产品卡片：素材是 1920×650 横幅，用 contain 保证标题文字不被裁断 */
.index-pro .img-box {
	background: #f6f8f9;
}

.index-pro [class*="rect-"] picture img {
	object-fit: contain;
}

/* 解决方案卡片：中文站是手风琴布局（12.5% 竖条 + 首项 37.43%）
   图片原规则为 height:100%; width:auto，这里只给 picture 补高度，
   不覆盖 img 自身尺寸，否则布局会崩 */
.index-customer .customer-lists ul li .img-box picture {
	display: block;
	height: 100%;
	width: 100%;
}

/* 关于我们背景图 */
.index-about .index-about-bkg picture,
.index-about .index-about-bkg picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 产品详情页图集 */
.product_swiper_box picture,
.product_swiper_box picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* 案例图集 */
.km-case-figure picture,
.km-case-figure picture img,
.km-case-thumb picture,
.km-case-thumb picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- 产品页 ---------- */
.product_box_content {
	display: flex;
	gap: 30px;
	align-items: flex-start;
}

.product_search {
	width: 250px;
	flex-shrink: 0;
}

/* 用 !important 覆盖 product.css 中同名类的默认样式 */
.product_box_content {
	display: flex !important;
	gap: 30px !important;
	align-items: flex-start !important;
}

.product_search {
	width: 250px !important;
	flex-shrink: 0 !important;
}

.km-prod-right {
	flex: 1 1 auto !important;
	min-width: 0;
}

.km-cat-side {
	list-style: none !important;
	margin: 14px 0 0 !important;
	padding: 0 !important;
}

.km-cat-side-group {
	margin: 0 0 16px !important;
	padding: 0 !important;
	list-style: none !important;
}

.km-cat-side-title {
	display: block !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: #0e4829 !important;
	padding: 8px 0 6px !important;
	border-bottom: 1px solid #eef1f3;
}

.km-cat-side ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 6px 0 0 12px !important;
	border-left: 2px solid #eef1f3;
}

.km-cat-side ul li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.km-cat-side ul li a {
	display: block !important;
	padding: 6px 0 !important;
	font-size: 14px !important;
	color: #606266 !important;
	line-height: 1.4;
}

.km-cat-side ul li a:hover,
.km-cat-side ul li.is-current a {
	color: #0e4829 !important;
	font-weight: 600 !important;
}

.km-prod-right {
	flex: 1;
	min-width: 0;
}

.km-prod-cat a {
	color: #0e4829;
	font-size: 14px;
	letter-spacing: .5px;
}

.km-prod-cta {
	margin-top: 22px;
}

.km-btn {
	display: inline-block;
	background: #0e4829;
	color: #fff;
	padding: 12px 28px;
	border-radius: 7px;
	font-size: 15px;
	transition: background .2s;
}

.km-btn:hover {
	background: #208740;
	color: #fff;
}

/* 标签页 */
.km-tabs {
	background: #fff;
	padding: 10px 0 40px;
}

.km-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid #dcdcdc;
	margin-bottom: 28px;
}

.km-tab-btn {
	padding: 14px 30px;
	cursor: pointer;
	font-size: 16px;
	color: #606266;
	border-bottom: 2px solid transparent;
	transition: color .2s, border-color .2s;
}

.km-tab-btn.is-active {
	color: #0e4829;
	border-bottom-color: #0e4829;
	font-weight: 600;
}

.km-tab-pane {
	display: none;
}

.km-tab-pane.is-active {
	display: block;
}

.km-inquiry-box {
	background: #f9f9f9;
	border-left: 4px solid #0e4829;
	padding: 32px;
	border-radius: 7px;
}

.km-inquiry-box h2 {
	margin-top: 0;
	font-size: 22px;
}

.km-inquiry-box p {
	color: #606266;
	max-width: 760px;
}

/* ---------- 案例页 ---------- */
.km-case-title {
	font-size: 32px;
	margin: 0 0 12px;
}

.km-case-lead {
	color: #606266;
	max-width: 820px;
	font-size: 16px;
	line-height: 1.8;
}

.km-case-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.km-case-card {
	border: 1px solid #efefef;
	border-radius: 7px;
	overflow: hidden;
	transition: box-shadow .25s, transform .25s;
	background: #fff;
}

.km-case-card:hover {
	box-shadow: 5px 5px 15px rgba(0, 0, 0, .1);
	transform: translateY(-2px);
}

.km-case-thumb {
	display: block;
	overflow: hidden;
}

.km-case-thumb img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	transition: transform .4s;
}

.km-case-card:hover .km-case-thumb img {
	transform: scale(1.04);
}

.km-case-body {
	padding: 16px 18px 20px;
}

.km-case-body h2 {
	font-size: 18px;
	margin: 0 0 6px;
	line-height: 1.4;
}

.km-case-body h2 a {
	color: #0b1b26;
}

.km-case-card:hover .km-case-body h2 a {
	color: #0e4829;
}

.km-case-meta {
	font-size: 13px;
	color: #0e4829;
	margin: 0;
}

.km-case-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.km-case-figure {
	margin: 0;
	overflow: hidden;
	border-radius: 7px;
	background: #f4f6f8;
}

.km-case-figure img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.km-case-single {
	background: #fff;
}

/* ---------- 页脚补充 ---------- */
.km-footer-addr {
	font-size: 13px;
	line-height: 1.6;
	color: #e8e8e8 !important;
}

.footer-column ul li.km-footer-addr {
	white-space: normal;
}

.footer-bottom span {
	color: #fff;
}

/* ---------- 主体区最小高度，避免页脚贴顶 ---------- */
.km-main {
	min-height: 50vh;
}

/* ---------- 移动端抽屉默认隐藏 ---------- */
.md_nav[hidden] {
	display: none !important;
}

@media (max-width: 991px) {
	.km-logo-text {
		font-size: 20px;
	}
}
