/*
Theme Name: Baomaoclothing OEM
Theme URI: https://example.com/
Author: Baomaoclothing
Author URI: https://example.com/
Description: B2B streetwear OEM/ODM manufacturer theme. Front-end replicates the baomao.com design: dark skin, orange accent, hero slider, advantages strip, factory carousel, OEM/ODM step carousel, category grid, services, about video, CEO banner, partner carousel, news, scene strip, FAQ and quote form. All content editable via the WordPress Customizer.
Version: 2.0.0
Requires at least: 5.9
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: baomaoclothing
Tags: custom-logo, custom-menu, featured-images, translation-ready, blog
*/

/* ==========================================================================
   Tokens & base
   ========================================================================== */
:root {
	--main: #ff6600;
	--main-d: #e55a00;
	--bg: #272727;
	--bg-2: #1b1b1b;
	--bg-3: #181818;
	--bg-strip: #333;
	--line: #333;
	--line-2: #444;
	--text: #eee;
	--text-2: #ccc;
	--text-3: #999;
	--width: 1600px;
	--width-wide: 1780px;
	--font: 'Outfit', 'Arial', sans-serif;
}

* { box-sizing: border-box; padding: 0; margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	font-family: var(--font);
	font-size: calc(0.25vw + 12px);
	line-height: calc(0.25vw + 20px);
	font-weight: 400;
	color: var(--text);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; border: 0; }

h1, h2, h3, h4, h5, h6 { font-weight: inherit; line-height: inherit; color: inherit; }

p { margin: 0; }

ul, ol { list-style: none; }

a { color: inherit; text-decoration: none; cursor: pointer; transition: all .3s ease-in-out; }
a:hover { color: var(--main); }

button { font-family: inherit; font-size: inherit; font-weight: inherit; cursor: pointer; padding: 0; border: 0; background: transparent; color: inherit; }

input, textarea, select { font-family: inherit; font-size: inherit; }
input:focus, textarea:focus { outline: none; }
textarea { resize: none; }

*:before, *:after { transition: all .3s ease-in-out; }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden;
	padding: 0; position: absolute !important; word-wrap: normal !important;
}
.skip-link:focus {
	clip: auto; clip-path: none; height: auto; width: auto;
	left: 8px; top: 8px; z-index: 100000;
	background: var(--main); color: #000; padding: 10px 16px;
}

.wrap { width: 100%; max-width: var(--width); margin: 0 auto; }
.wrap-wide { width: 100%; max-width: var(--width-wide); margin: 0 auto; }
@media (max-width: 1900px) {
	.wrap, .wrap-wide { width: calc(100% - 4vw - 40px); }
}
@media (max-width: 1024px) {
	.wrap, .wrap-wide { width: calc(100% - 2vw - 20px); }
}

/* Legacy container alias (inner templates) */
.container { width: 100%; max-width: var(--width); margin: 0 auto; padding: 0 20px; }
.container-narrow { max-width: 900px; }

.cj-ic { vertical-align: middle; flex: none; }
.cj-ic-img { display: block; max-width: 100%; height: auto; margin: 0 auto; }

/* ==========================================================================
   Buttons / links
   ========================================================================== */
.btn-orange {
	display: inline-block;
	background: var(--main);
	color: #000;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 500;
	padding: calc(0.25vw + 5px) calc(1vw + 20px);
}
.btn-orange:hover { color: #fff; background: var(--main); }

.btn-line {
	display: inline-block;
	border: 1px solid var(--main);
	color: var(--main);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 500;
	padding: calc(0.25vw + 5px) calc(1vw + 20px);
}
.btn-line:hover { background: var(--main); color: #fff; }

.link-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--main);
	text-transform: uppercase;
	font-weight: 500;
	flex: none;
}
.link-more:after { content: "\203A"; font-size: 1.2em; line-height: 1; }
.link-more:hover { text-decoration: underline; color: var(--main); }

/* Legacy button classes (inner templates) */
.btn { display: inline-block; padding: 12px 28px; font-weight: 600; font-size: 15px; text-align: center; transition: all .25s; }
.btn-primary { background: var(--main); color: #000; text-transform: uppercase; letter-spacing: 1px; }
.btn-primary:hover { background: var(--main-d); color: #fff; }
.btn-outline { border: 1px solid var(--main); color: var(--main); text-transform: uppercase; }
.btn-outline:hover { background: var(--main); color: #fff; }
.btn-lg { padding: 14px 34px; font-size: 16px; }

/* ==========================================================================
   Section scaffolding
   ========================================================================== */
.sec { padding: calc(3% + 30px) 0; }

.sec-head { margin-bottom: calc(1vw + 16px); }
.sec-head.center { text-align: center; max-width: 1100px; margin-left: auto; margin-right: auto; }
.sec-head.split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; }

.sec-title {
	font-size: calc(1.4vw + 18px);
	line-height: calc(1.5vw + 22px);
	font-weight: 600;
	color: #fff;
}
.sec-title strong, .sec-title b { color: var(--main); font-weight: 600; }

.sec-sub {
	display: block;
	color: var(--main);
	font-weight: 500;
	margin-bottom: calc(0.25vw + 4px);
}

.sec-desc {
	color: var(--text-2);
	max-width: 760px;
	margin-top: calc(0.5vw + 8px);
}
.sec-head.center .sec-desc { margin-left: auto; margin-right: auto; }

/* Legacy section classes (inner templates) */
.section { padding: calc(3% + 30px) 0; }
.section-tight { padding: calc(2% + 20px) 0; }
.section-gray { background: var(--bg-2); }
.section-head { text-align: center; max-width: 720px; margin: 0 auto calc(1.5vw + 24px); }
.section-head .section-sub {
	display: block; color: var(--main); font-size: 13px; font-weight: 600;
	letter-spacing: .18em; text-transform: uppercase; margin-bottom: 10px;
}
.section-head .section-title {
	font-size: calc(1.4vw + 18px); line-height: calc(1.5vw + 22px);
	font-weight: 600; color: #fff; margin: 0;
}
.section-cta { text-align: center; margin-top: calc(1.5vw + 24px); }

/* Reveal animation */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ==========================================================================
   Top bar
   ========================================================================== */
.topbar {
	background: var(--main);
	color: #000;
	font-size: 13px;
	position: relative;
	z-index: 60;
}
.topbar-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 40px;
}
.topbar-slogan { font-weight: 500; line-height: 40px; }
.topbar-right { display: flex; align-items: center; gap: 18px; }
.topbar-phone { display: inline-flex; align-items: center; gap: 6px; color: #000; font-weight: 500; }
.topbar-phone:hover { color: #fff; }

.topbar-lang { position: relative; }
.topbar-lang-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #000;
	font-weight: 500;
	padding: 5px 0;
}
.topbar-lang-btn:hover { color: #fff; }
.topbar-lang-btn .caret {
	width: 0; height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
}
.topbar-lang-list {
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 110px;
	background: #222;
	box-shadow: 0 5px 10px rgba(0, 0, 0, .25);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: all .25s;
	z-index: 99;
}
.topbar-lang.open .topbar-lang-list,
.topbar-lang:hover .topbar-lang-list { opacity: 1; visibility: visible; transform: none; }
.topbar-lang-list a { display: block; padding: 8px 14px; color: #fff; font-size: 12px; }
.topbar-lang-list li + li { border-top: 1px dashed #111; }
.topbar-lang-list a:hover { background: #000; color: var(--main); }

/* ==========================================================================
   Header / navigation
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 55;
	background: var(--bg);
	transition: all .3s ease-in-out;
}
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

.nav-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.brand { flex: none; display: flex; align-items: center; }
.brand-text {
	color: #fff;
	font-size: calc(0.6vw + 20px);
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	line-height: 1.2;
	padding: 12px 0;
}
.brand-text:hover { color: var(--main); }
.custom-logo-link img { max-height: 56px; width: auto; }

.nav-menu { flex: 1; display: flex; justify-content: flex-end; }
.nav-menu ul { display: flex; flex-wrap: wrap; }
.nav-menu li { position: relative; }
.nav-menu > ul > li { padding: 0 calc(0.5vw + 5px); }
.nav-menu > ul > li > a {
	display: flex;
	align-items: center;
	gap: 5px;
	color: #fff;
	line-height: 30px;
	padding: 25px 0;
	text-transform: uppercase;
	font-weight: 600;
	font-size: calc(0.15vw + 13px);
	position: relative;
}
.nav-menu > ul > li > a:after {
	content: "";
	position: absolute;
	bottom: 18px;
	left: 50%;
	width: 0;
	height: 4px;
	background: var(--main);
	transform: translate(-50%, 0);
	transition: all .2s ease-in-out;
}
.nav-menu > ul > li:hover > a,
.nav-menu > ul > li.current-menu-item > a,
.nav-menu > ul > li.current-menu-parent > a,
.nav-menu > ul > li.current_page_item > a { color: var(--main); }
.nav-menu > ul > li:hover > a:after,
.nav-menu > ul > li.current-menu-item > a:after,
.nav-menu > ul > li.current-menu-parent > a:after,
.nav-menu > ul > li.current_page_item > a:after { width: 20px; }

.nav-menu > ul > li.menu-item-has-children > a:before {
	content: "";
	order: 2;
	width: 0; height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	margin-left: 2px;
}

.nav-menu ul ul {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: #000;
	max-height: calc(70vh - 40px);
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: all .25s;
	z-index: 99;
	display: block;
}
.nav-menu li:hover > ul { opacity: 1; visibility: visible; transform: none; }
.nav-menu ul ul li { display: block; }
.nav-menu ul ul li + li { border-top: 1px solid #222; }
.nav-menu ul ul a {
	display: block;
	padding: 10px 14px;
	color: #eee;
	font-size: 14px;
	text-transform: capitalize;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.nav-menu ul ul a:hover { color: var(--main); background: rgba(255, 255, 255, .03); }

.nav-actions { display: flex; align-items: center; gap: 8px; flex: none; }

.nav-icon-btn {
	color: #fff;
	width: 50px; height: 50px;
	display: inline-flex; align-items: center; justify-content: center;
}
.nav-icon-btn:hover { color: var(--main); }

.nav-search { position: relative; display: flex; align-items: center; }
.nav-search-box {
	position: absolute;
	top: 100%;
	right: 0;
	width: 0;
	overflow: hidden;
	background: #fff;
	transition: all .25s ease-in-out;
	z-index: 111;
}
.nav-search-box.open,
.nav-search:hover .nav-search-box { width: 240px; border: 2px solid var(--main); }
.nav-search-box .search-form { display: flex; }
.nav-search-box input[type="search"] {
	flex: 1;
	font-size: 14px;
	color: #333;
	line-height: 20px;
	height: 40px;
	padding: 10px;
	border: 0;
	background: transparent;
	min-width: 0;
}
.nav-search-box .search-submit {
	height: 40px; width: 40px;
	color: #333;
	display: inline-flex; align-items: center; justify-content: center;
}
.nav-search-box .search-submit:hover { color: var(--main); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 10px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: #fff; transition: all .3s; }
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu — flip-down floating layer (matches baomao nav) */
.mobile-menu { display: none; }
body.menu-open { overflow: hidden; }

@media (max-width: 1100px) {
	.nav-menu { display: none; }
	.nav-toggle { display: inline-flex; }
	.mobile-menu {
		display: block;
		position: fixed;
		top: 0;
		left: 0; right: 0; bottom: 0;
		padding-top: 96px;
		background: #111;
		overflow-y: auto;
		transform: rotateX(90deg);
		transform-origin: top center;
		transition: transform .3s ease-in-out;
		z-index: 50;
	}
	.mobile-menu.open { transform: rotateX(0); }
	.mobile-menu ul { padding: 0 40px 50px; }
	.mobile-menu > ul > li > a {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0;
		line-height: 50px;
		color: #eee;
		font-size: 14px;
		border-bottom: 1px solid #333;
		text-transform: uppercase;
		font-weight: 600;
	}
	.mobile-menu > ul > li:last-of-type > a { border-bottom: 0; }
	.mobile-menu > ul > li > a:hover,
	.mobile-menu > ul > li.current-menu-item > a { color: var(--main); }
	/* collapsible submenus with caret */
	.mobile-menu li.menu-item-has-children > a:after {
		content: "\25BE";
		display: block;
		color: #eee;
		font-size: 18px;
		width: 50px;
		text-align: center;
		transition: transform .3s ease-in-out;
		flex: none;
	}
	.mobile-menu li.menu-item-has-children.open > a:after { transform: rotate(180deg); }
	.mobile-menu ul ul { display: none; background: #222; padding: 0; }
	.mobile-menu li.open > ul { display: block; }
	.mobile-menu ul ul a { display: block; padding: 10px 16px; color: #aaa; font-size: 14px; line-height: 20px; text-transform: capitalize; }
	.mobile-menu ul ul a:hover { color: var(--main); }
}

/* ==========================================================================
   Slider engine (shared)
   ========================================================================== */
.sw { position: relative; overflow: hidden; }
.sw-track {
	display: flex;
	align-items: stretch;
	transition: transform .6s ease;
	will-change: transform;
}
.sw-track.no-anim { transition: none; }
.sw-slide { flex: none; width: 100%; position: relative; }

.sw-prev, .sw-next {
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	z-index: 10;
	width: calc(1vw + 34px);
	height: calc(1vw + 34px);
	min-width: 38px; min-height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	border-radius: 50%;
}
.sw-prev { left: calc(0.5vw + 10px); }
.sw-next { right: calc(0.5vw + 10px); }
.sw-prev:before, .sw-next:before {
	content: "";
	width: calc(0.4vw + 10px);
	height: calc(0.4vw + 10px);
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
}
.sw-prev:before { transform: rotate(45deg); margin-left: 4px; }
.sw-next:before { transform: rotate(-135deg); margin-right: 4px; }
.sw-prev:hover, .sw-next:hover { background: var(--main); color: #fff; }
.sw-prev.disabled, .sw-next.disabled { opacity: .35; pointer-events: none; }

/* Arrows anchored above the track (partner carousel).
   overflow-x clipped so the track cannot widen the page; overflow-y visible
   so the arrows sitting above the track remain visible. */
.sw[data-navpos="top"] { overflow-x: clip; overflow-y: visible; }
.sw[data-navpos="top"] .sw-prev,
.sw[data-navpos="top"] .sw-next {
	top: auto;
	bottom: calc(100% + 1vw + 10px);
	transform: none;
	min-width: 0; min-height: 0;
}
.sw[data-navpos="top"] .sw-prev { left: auto; right: calc(1vw + 50px); }
.sw[data-navpos="top"] .sw-next { right: 0; }

/* ==========================================================================
   Hero slider
   ========================================================================== */
.hero { background: #000; }
.hero, .hero .sw-track, .hero .sw-slide { aspect-ratio: 12 / 5; }
.hero .sw-track { aspect-ratio: auto; }
.hero-slide { height: 100%; }
.hero-img, .hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-img img { object-fit: cover; }

.hero-text {
	position: absolute;
	left: 0; right: 0; top: 0; bottom: 0;
	padding: calc(2vw + 10px);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	text-align: center;
	flex-direction: column;
	text-shadow: 5px 5px 3px rgba(0, 0, 0, .1);
	z-index: 3;
}
.hero-title {
	font-size: calc(2.6vw + 16px);
	line-height: calc(2.75vw + 20px);
	font-weight: 600;
	color: #fff;
	text-transform: uppercase;
	padding-bottom: calc(1vw + 5px);
}
.hero-sub {
	color: rgba(255, 255, 255, .9);
	font-size: calc(0.4vw + 14px);
	max-width: 640px;
}
.hero-text .btn-orange { margin-top: calc(1vw + 10px); }

/* ==========================================================================
   Advantages strip
   ========================================================================== */
.advan { background: var(--bg-strip); }
.advan-in { display: flex; flex-wrap: wrap; align-items: stretch; }
.advan dl {
	width: 20%;
	padding: calc(0.5vw + 10px) calc(1vw + 10px);
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	transition: all .3s ease-in-out;
}
.advan dt { width: 45px; flex: none; display: block; }
.advan dt img { width: 100%; }
.advan dt .cj-ic { color: var(--main); }
.advan dd { width: calc(100% - 55px); color: var(--text-2); }
.advan dd h3 {
	font-size: calc(0.2vw + 14px);
	font-weight: 600;
	color: #fff;
	padding: calc(0.5vw + 5px) 0 5px;
}
.advan dd p { font-size: calc(0.1vw + 12px); }
.advan dl:hover { background: var(--main); }
.advan dl:hover dt img { filter: brightness(0); }
.advan dl:hover dt .cj-ic { color: #000; }
.advan dl:hover dd, .advan dl:hover dd h3 { color: #000; }

/* ==========================================================================
   Factory carousel
   ========================================================================== */
.factory-sec { padding: calc(1% + 10px) 0 calc(2% + 20px); }
.factory-sw .sw-track { align-items: stretch; }
.factory-slide { padding: 0 calc(0.25vw + 4px); }
.factory-slide .img {
	border-radius: calc(0.25vw + 5px);
	overflow: hidden;
	opacity: .5;
	transition: opacity .3s ease-in-out;
}
.factory-slide .img img { width: 100%; transition: transform .5s ease; }
.factory-slide.is-focus .img { opacity: 1; }
.factory-slide h3 {
	padding: calc(0.5vw + 5px);
	font-size: calc(0.2vw + 14px);
	color: var(--text);
	text-align: center;
}
.factory-slide:hover .img img { transform: scale(1.04); }
.factory-sw .sw-prev, .factory-sw .sw-next { background: rgba(0, 0, 0, .35); }

/* ==========================================================================
   Why choose us
   ========================================================================== */
.why-grid { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; }
.why-item { width: calc(100% / 3 - 0.75vw - 5px); margin: calc(0.5vw + 5px) 0; }
.why-item a { display: block; }
.why-item .img { display: block; border-radius: calc(0.25vw + 5px); overflow: hidden; }
.why-item .img img { width: 100%; transition: transform .5s ease; }
.why-item .cap {
	display: block;
	font-size: calc(0.3vw + 14px);
	line-height: calc(0.5vw + 20px);
	padding: calc(0.5vw + 5px);
	text-align: center;
	color: #fff;
	transition: color .3s;
}
.why-item:hover .img img { transform: scale(1.05); }
.why-item:hover .cap { color: var(--main); }

/* ==========================================================================
   OEM / ODM step carousel
   ========================================================================== */
.odm-sec {
	padding: calc(3% + 30px) 0 calc(2% + 20px);
	background-color: var(--bg-2);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
@media (min-width: 769px) {
	.odm-sec { background-attachment: fixed; }
}
.odm-in { display: flex; flex-wrap: wrap; align-items: flex-start; }
.odm-side { width: 25%; padding: calc(1vw + 10px) calc(3vw + 10px); }
.odm-side p { color: var(--text-2); margin-top: calc(0.75vw + 10px); }
.odm-sw { width: 75%; }

.odm-slide {
	width: calc(10vw + 230px);
	padding: 0 calc(0.5vw + 10px) calc(0.5vw + 10px);
	height: auto;
}
.odm-slide:after {
	content: "";
	position: absolute;
	top: calc(1.25vw + 75px);
	left: 50%;
	width: calc(100% + 20px);
	height: 1px;
	background: #fff;
	opacity: .5;
	z-index: 0;
}
.odm-slide:last-child:after { display: none; }
.odm-slide:before {
	content: "";
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background: var(--main);
	opacity: 0;
	border-radius: 5px;
	z-index: -1;
	transition: all .3s ease-in-out;
}
.odm-icon {
	width: calc(1vw + 40px);
	display: block;
	border-radius: 5px;
	background: var(--main);
	margin: 0 auto 5px;
	position: relative;
	z-index: 2;
}
.odm-icon img { filter: brightness(0); width: 100%; }
.odm-slide h4 { text-align: center; position: relative; z-index: 2; font-size: calc(0.15vw + 12px); }
.odm-slide h3 {
	font-size: calc(0.3vw + 14px);
	font-weight: 600;
	line-height: calc(0.5vw + 20px);
	color: var(--main);
	text-align: center;
	position: relative;
	z-index: 2;
}
.odm-slide h3:before {
	content: "";
	width: 11px; height: 11px;
	background: var(--main);
	border-radius: 50%;
	display: block;
	margin: 5px auto;
	position: relative;
	z-index: 4;
}
.odm-slide .img { padding: calc(0.25vw + 5px) 0; position: relative; z-index: 2; }
.odm-slide .img img { width: 100%; }
.odm-slide .text { padding: calc(0.25vw + 5px); color: var(--text-2); position: relative; z-index: 2; font-size: calc(0.1vw + 12px); }

.odm-slide:hover:before { top: calc(0.5vw + 20px); opacity: 1; }
.odm-slide:hover .odm-icon { background: #fff; }
.odm-slide:hover .odm-icon img { filter: brightness(1); }
.odm-slide:hover h4 { color: #000; }
.odm-slide:hover h3 { color: #fff; }
.odm-slide:hover h3:before { background: #fff; }
.odm-slide:hover .text { color: #000; }

.odm-sw .sw-track { padding-bottom: calc(2vw + 10px); }
.sw-scrollbar {
	position: absolute;
	left: 0; right: 0;
	bottom: calc(0.5vw + 5px);
	height: 5px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .1);
	cursor: pointer;
	z-index: 12;
}
.sw-drag {
	height: 100%;
	width: 20%;
	background: var(--main);
	border-radius: 10px;
	position: relative;
	cursor: grab;
}
.odm-sw .sw-prev, .odm-sw .sw-next { background: var(--main); border-radius: 50%; }
.odm-sw .sw-prev { left: calc(0.5vw + 5px); }
.odm-sw .sw-next { right: calc(0.5vw + 5px); }

/* ==========================================================================
   Products category grid (showre)
   ========================================================================== */
.showre-sec { padding: calc(2% + 20px) 0; }
.showre-grid { display: flex; flex-wrap: wrap; align-items: stretch; }
.showre-item {
	width: calc(100% / 4 - 10px);
	margin: 5px;
	position: relative;
	overflow: hidden;
}
.showre-item .img, .showre-item .img a { display: block; }
.showre-item .img img { width: 100%; transition: transform .5s ease; }
.showre-item .text {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: calc(5vw + 20px) calc(0.5vw + 10px) calc(0.5vw + 10px);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	flex-direction: column;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55));
}
.showre-item .text h3 {
	font-size: calc(0.5vw + 16px);
	font-weight: 600;
	line-height: calc(0.5vw + 20px);
	color: #fff;
}
.showre-item .text .btn-orange { margin: calc(1vw + 10px) 0 calc(-3vw - 45px); }
.showre-item:hover .text .btn-orange { margin: calc(0.5vw + 5px) 0 0; }
.showre-item:hover .img img { transform: scale(1.05); }

/* ==========================================================================
   Our Services
   ========================================================================== */
.serve-grid { display: flex; flex-wrap: wrap; align-items: stretch; }
.serve-item {
	width: calc(100% / 4 - 0.5vw - 10px);
	margin: calc(0.25vw + 5px);
	position: relative;
	overflow: hidden;
}
.serve-item .img { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; }
.serve-item .img img { width: 100%; height: 100%; object-fit: cover; }
.serve-item .text {
	position: relative;
	z-index: 2;
	padding: calc(0.5vw + 10px);
	text-align: center;
	color: var(--text-2);
	transition: color .3s;
}
.serve-item .ico {
	width: calc(1.5vw + 40px);
	display: block;
	margin: 0 auto;
}
.serve-item .ico img { width: 100%; transition: filter .3s; }
.serve-item .ico .cj-ic { color: var(--main); width: 100%; height: auto; }
.serve-item .text h3 {
	font-size: calc(0.4vw + 14px);
	font-weight: 600;
	line-height: calc(0.5vw + 20px);
	padding: calc(0.25vw + 5px) 0;
	color: #fff;
	transition: color .3s;
}
.serve-item .text p { font-size: calc(0.1vw + 12px); }
@media (min-width: 769px) {
	.serve-item:hover .img { opacity: .3; }
	.serve-item:hover .text { color: #fff; }
	.serve-item:hover .text h3 { color: var(--main); }
	.serve-item:hover .ico img { filter: grayscale(1) brightness(10); }
}

/* ==========================================================================
   About (video + panel)
   ========================================================================== */
.about-sec { padding: calc(3% + 30px) 0; }
.about-in { display: flex; flex-wrap: wrap; align-items: stretch; }
.about-media { width: 50%; position: relative; min-height: 300px; background: #000; }
.about-media iframe, .about-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}
.about-panel {
	width: 50%;
	padding: calc(3vw + 10px);
	background: var(--bg-2);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.about-panel .sec-title { margin-bottom: calc(0.5vw + 8px); }
.about-text { color: var(--text-2); }
.about-text p + p { margin-top: .8em; }
.about-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: calc(1.5vw + 16px); }
.about-btns .btn-orange { color: #fff; }
.about-btns .btn-orange:hover { color: #000; }

/* ==========================================================================
   CEO banner
   ========================================================================== */
.ceo-sec {
	background-color: var(--bg-2);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.ceo-in { display: flex; flex-wrap: wrap; align-items: flex-end; }
.ceo-text { width: 55%; padding: calc(7vw + 10px) calc(3vw + 10px) calc(5vw + 10px) 0; }
.ceo-text h2 {
	font-size: calc(2vw + 40px);
	line-height: calc(2vw + 40px);
	font-weight: 600;
	text-transform: uppercase;
	color: var(--main);
}
.ceo-text h3 {
	font-size: calc(0.7vw + 16px);
	line-height: calc(1vw + 20px);
	font-weight: 500;
	color: #fff;
	padding: calc(0.25vw + 5px) 0 calc(2vw + 10px);
}
.ceo-text h4 {
	font-size: calc(0.2vw + 14px);
	display: block;
	text-align: right;
	color: var(--text-2);
	font-weight: 400;
}
.ceo-text .btn-orange { margin-top: calc(1vw + 10px); }
.ceo-img { width: 45%; align-self: flex-end; }
.ceo-img img { width: 100%; }

/* ==========================================================================
   Partner logo carousel
   ========================================================================== */
.partner-sec { padding: calc(2% + 20px) 0; }
.partner-sec .sec-head { margin-bottom: 0; }
.partner-sw { margin-top: calc(1vw + 10px); }
.partner-slide { padding: calc(0.5vw + 10px); display: flex; align-items: center; justify-content: center; }
.partner-slide img { max-height: 90px; width: auto; object-fit: contain; margin: 0 auto; }
.sw[data-navpos="top"] .sw-prev:before,
.sw[data-navpos="top"] .sw-next:before { width: 10px; height: 10px; }

/* ==========================================================================
   News
   ========================================================================== */
.news-grid { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; }
.news-item { width: calc(100% / 3 - 1vw - 5px); margin: calc(0.5vw + 5px) 0; overflow: hidden; }
.news-item .news-img { display: block; overflow: hidden; }
.news-item .news-img img, .news-item .news-img .no-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .5s ease; }
.news-body { padding: calc(0.5vw + 10px) 0; display: flex; flex-direction: column; }
.news-time { color: var(--main); font-size: calc(0.1vw + 12px); }
.news-body h3 {
	font-size: calc(0.4vw + 16px);
	line-height: calc(0.5vw + 20px);
	font-weight: 600;
	text-transform: capitalize;
	margin: 4px 0;
}
.news-body h3 a { color: #fff; }
.news-item:hover .news-body h3 a { color: var(--main); }
.news-body > p {
	color: var(--text-2);
	padding: calc(0.5vw + 5px) 0 calc(0.5vw + 10px);
	font-size: calc(0.1vw + 12.5px);
}
.news-more {
	color: var(--main);
	text-transform: uppercase;
	text-align: center;
	border: 1px solid var(--main);
	padding: calc(0.25vw + 5px);
	font-size: calc(0.1vw + 12.5px);
}
.news-more:hover { background: var(--main); color: #fff; }
.news-item:hover .news-img img { transform: scale(1.05); }

/* ==========================================================================
   Street scene strip
   ========================================================================== */
.cate-strip { display: flex; flex-wrap: wrap; align-items: stretch; max-width: 1920px; margin: 0 auto; }
.cate-item {
	width: calc(100% / 7);
	position: relative;
	overflow: hidden;
	background: var(--main);
}
.cate-item a { display: block; }
.cate-item .img { display: block; }
.cate-item .img img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: opacity .3s; }
.cate-item .text {
	position: absolute;
	inset: 0;
	padding: calc(0.5vw + 10px);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	flex-direction: column;
	text-transform: uppercase;
}
.cate-item .text h3 {
	font-size: calc(0.4vw + 14px);
	font-weight: 600;
	line-height: calc(0.5vw + 20px);
	color: #fff;
}
.cate-item .cate-more {
	letter-spacing: 1px;
	text-decoration: underline;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #fff;
	font-size: calc(0.1vw + 12px);
	margin-top: calc(1vw + 10px);
	opacity: 0;
	transform: translateY(12px);
	transition: all .3s;
}
.cate-item .cate-more:after { content: "\203A"; }
.cate-item:hover .img img { opacity: .15; }
.cate-item:hover .cate-more { opacity: 1; transform: none; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-sec { padding: calc(2% + 20px) 0; background: var(--bg-2); }
.faq-in { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.faq-side { width: 25%; }
.faq-side p { color: var(--text-2); margin-top: calc(0.75vw + 10px); }
.faq-list { width: calc(75% - 4vw - 10px); }

/* FAQ page (full-width accordion wrapper) */
.faq-wrap {
	border: 1px solid var(--line);
	background: var(--bg-2);
	padding: 0 calc(1vw + 10px);
}
.faq-wrap .faq-item:first-child { border-top: 0; }

.faq-item { border-bottom: 1px solid var(--line); padding: calc(0.5vw + 5px) 0; }
.faq-item:last-child { border-bottom: 0; }
.faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	text-align: left;
	font-size: calc(0.3vw + 14px);
	line-height: calc(0.5vw + 20px);
	color: #fff;
	font-weight: 600;
}
.faq-icon {
	flex: none;
	position: relative;
	font-style: normal;
	font-size: calc(0.5vw + 16px);
	width: calc(0.5vw + 20px);
	text-align: center;
	border-radius: 5px;
}
.faq-icon:before { content: "+"; }
.faq-item.open .faq-q { color: var(--main); }
.faq-item.open .faq-icon:before { content: "\2013"; }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a-inner > * { margin: 0; padding: calc(1vw + 5px) calc(0.25vw + 5px) calc(0.25vw + 5px); color: var(--text-2); }

/* ==========================================================================
   Need Help? / quote section
   ========================================================================== */
.quote-sec {
	padding: calc(3% + 30px) 0;
	background-color: var(--bg-2);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.quote-in { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 30px; }
.quote-side { width: calc(50% - 4vw - 10px); }
.quote-lead { color: var(--text); margin-top: calc(0.75vw + 10px); }
.quote-points { margin-top: calc(1vw + 14px); display: grid; gap: 12px; }
.quote-points dl { display: flex; align-items: flex-start; gap: 14px; color: #fff; }
.quote-points dt { width: 40px; flex: none; }
.quote-points dt img { width: 100%; }
.quote-points dd { width: calc(100% - 54px); }

.quote-form {
	width: calc(50% - 1vw - 10px);
	background: var(--bg-3);
	padding: calc(1.5vw + 10px);
}
.quote-form > h2 {
	font-size: calc(0.8vw + 16px);
	line-height: calc(1vw + 25px);
	font-weight: 600;
	color: #fff;
	margin-bottom: calc(1vw + 12px);
}

/* Quote form fields */
.qf-row { margin-bottom: 10px; }
.qf-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qf-field label { display: block; color: #fff; margin-bottom: 5px; font-size: calc(0.1vw + 12.5px); }
.qf-field input {
	width: 100%;
	font-size: 14px;
	line-height: 25px;
	border: 1px solid #333;
	padding: calc(0.25vw + 5px);
	background: none;
	color: #fff;
}
.qf-field input:focus { border-color: var(--main); }
.qf-field input::placeholder { color: #888; }
.qf-group-label { color: #fff; margin: 12px 0 8px; font-size: calc(0.1vw + 12.5px); }
.qf-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.qf-cols-5 .qf-check { min-width: calc(20% - 12px); }
.qf-check {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	color: #fff;
	font-size: calc(0.1vw + 12.5px);
}
.qf-check input {
	appearance: none;
	-webkit-appearance: none;
	width: 14px; height: 14px;
	border: 1px solid #555;
	background: none;
	cursor: pointer;
	flex: none;
	position: relative;
}
.qf-check input:checked { background: var(--main); border-color: var(--main); }
.qf-check input:checked:after {
	content: "";
	position: absolute;
	left: 4px; top: 1px;
	width: 4px; height: 8px;
	border-right: 2px solid #000;
	border-bottom: 2px solid #000;
	transform: rotate(45deg);
}
.qf-submit {
	background: var(--main);
	color: #000;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 600;
	padding: 12px 44px;
	margin-top: 8px;
}
.qf-submit:hover { color: #fff; }

/* Contact-page (full) form */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.form-field label { display: block; font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.form-field input, .form-field textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid #555;
	background: rgba(0, 0, 0, .3);
	color: var(--text);
	transition: border-color .2s;
}
.form-field input:focus, .form-field textarea:focus { border-color: var(--main); }
.form-field-full { grid-column: 1 / -1; }
.form-notice {
	background: rgba(23, 114, 69, .18);
	color: #5fce94;
	border: 1px solid #177245;
	padding: 13px 16px;
	margin-bottom: 20px;
	font-size: 14px;
}
.hp-wrap { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	background: var(--bg-3);
	padding: calc(3% + 30px) 0 0;
	overflow: hidden;
	position: relative;
}
.footer-in {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 30px;
	position: relative;
	z-index: 2;
}
.footer-links {
	width: calc(72.5% - 3vw - 10px);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 30px;
}
.f-col h2 {
	color: #fff;
	font-size: calc(0.2vw + 14px);
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: calc(0.75vw + 10px);
}
.f-col ul { display: grid; gap: 8px; }
.f-col a { color: #8b8b8b; font-size: calc(0.1vw + 12.5px); }
.f-col a:hover { color: var(--main); }

.footer-send { width: calc(27.5% - 1vw - 10px); }
.footer-send > h2 {
	color: #fff;
	font-size: calc(0.2vw + 14px);
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: calc(0.75vw + 10px);
}
.mf-field { margin-bottom: 8px; }
.mf-field input, .mf-field textarea {
	width: 100%;
	font-size: 14px;
	line-height: 22px;
	border: 1px solid #2c2c2c;
	background: #1f1f1f;
	color: var(--text);
	padding: 9px 12px;
}
.mf-field input:focus, .mf-field textarea:focus { border-color: var(--main); }
.mf-field input::placeholder, .mf-field textarea::placeholder { color: #777; }
.mf-note { color: #777; font-size: 12px; margin: 8px 0 6px; }
.mf-agree {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	color: #8b8b8b;
	font-size: 12px;
	cursor: pointer;
	margin-bottom: 10px;
}
.mf-agree input { margin-top: 2px; accent-color: var(--main); }
.mf-submit {
	background: var(--main);
	color: #000;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 600;
	padding: 10px 40px;
}
.mf-submit:hover { color: #fff; }

.footer-watermark {
	font-size: calc(10vw + 40px);
	line-height: .78;
	font-weight: 800;
	text-transform: uppercase;
	text-align: center;
	color: rgba(255, 255, 255, .035);
	white-space: nowrap;
	margin-top: calc(1vw + 10px);
	user-select: none;
	pointer-events: none;
}

.footer-bottom { border-top: 1px solid #232323; position: relative; z-index: 2; background: var(--bg-3); }
.footer-bottom-in {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding-top: 18px;
	padding-bottom: 18px;
	font-size: 13px;
	color: #777;
}
.f-links a { color: #777; margin-left: 14px; }
.f-links a:hover { color: var(--main); }

/* Right floating buttons */
.right-float {
	position: fixed;
	right: 18px;
	bottom: 60px;
	z-index: 90;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.rf-btn {
	width: 44px; height: 44px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}
.rf-whatsapp { background: #25d366; }
.rf-whatsapp:hover { background: #1eb856; color: #fff; }
.rf-inquiry { background: var(--main); }
.rf-inquiry:hover { background: var(--main-d); color: #fff; }
.rf-top { background: #3a3a3a; }
.rf-top:hover { background: var(--main); }

/* ==========================================================================
   Inner pages — banner & breadcrumb
   ========================================================================== */
.page-banner {
	background: linear-gradient(100deg, #1e1e1e 0%, #2b2b2b 60%, #333 100%);
	padding: calc(2vw + 40px) 0;
	position: relative;
	overflow: hidden;
}
.page-banner:after {
	content: "";
	position: absolute;
	right: -80px; top: -60px;
	width: 320px; height: 320px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 102, 0, .3), transparent 70%);
}
.page-banner-title {
	color: #fff;
	font-size: calc(1.6vw + 18px);
	line-height: calc(1.75vw + 22px);
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 10px;
	position: relative;
	z-index: 1;
}
.breadcrumb { font-size: 13px; position: relative; z-index: 1; color: #999; }
.breadcrumb a { color: #c9c9c9; }
.breadcrumb a:hover { color: var(--main); }
.bc-sep { margin: 0 8px; color: #666; }
.bc-current { color: var(--main); }

/* ==========================================================================
   Inner pages — cards / lists / single
   ========================================================================== */
.filter-pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: calc(1.5vw + 24px); }
.pill {
	padding: 8px 20px;
	border-radius: 999px;
	border: 1px solid var(--line-2);
	background: transparent;
	color: var(--text);
	font-size: 13.5px;
	font-weight: 500;
	transition: all .25s;
}
.pill:hover { border-color: var(--main); color: var(--main); }
.pill.active { background: var(--main); border-color: var(--main); color: #000; }

.product-grid, .post-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.post-grid { grid-template-columns: repeat(3, 1fr); }

.product-card, .news-card {
	display: flex;
	flex-direction: column;
	background: var(--bg-2);
	border: 1px solid var(--line);
	overflow: hidden;
	transition: all .3s;
	color: var(--text-2);
}
.product-card:hover, .news-card:hover {
	border-color: var(--main);
	transform: translateY(-4px);
	color: var(--text-2);
}

.card-img { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #222; display: block; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.product-card:hover .card-img img, .news-card:hover .card-img img { transform: scale(1.06); }
.no-img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%; height: 100%;
	color: #555;
	background: repeating-linear-gradient(45deg, #242424, #242424 12px, #1e1e1e 12px, #1e1e1e 24px);
}

.card-body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-cat {
	display: inline-block;
	align-self: flex-start;
	color: var(--main);
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
}
.card-title { font-size: 16.5px; margin: 0; line-height: 1.4; color: #fff; font-weight: 600; }
.card-title a { color: #fff; }
.card-title a:hover { color: var(--main); }
.card-link {
	margin-top: auto;
	padding-top: 10px;
	color: var(--main);
	font-size: 13.5px;
	font-weight: 600;
}
.news-meta { color: var(--main); font-size: 12.5px; }
.news-excerpt { color: var(--text-3); font-size: 13.5px; margin: 0; }
.news-thumb { display: block; }

.no-results { text-align: center; padding: 40px 0; color: var(--text-2); }
.no-results h2 { color: #fff; font-size: 26px; margin-bottom: 12px; }
.no-results .search-form { max-width: 420px; margin: 20px auto 0; display: flex; }
.no-results input[type="search"] {
	flex: 1; padding: 11px 14px; border: 1px solid #555;
	background: rgba(0, 0, 0, .3); color: var(--text);
}
.no-results .search-submit { padding: 0 20px; background: var(--main); color: #000; }

.pagination-wrap { margin-top: 50px; text-align: center; }
.pagination .nav-links { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px; height: 40px;
	padding: 0 12px;
	border: 1px solid var(--line-2);
	background: transparent;
	color: var(--text);
	font-size: 14px;
}
.pagination .page-numbers:hover { border-color: var(--main); color: var(--main); }
.pagination .page-numbers.current { background: var(--main); border-color: var(--main); color: #000; }

.single-article .entry-meta { display: flex; gap: 18px; color: var(--text-3); font-size: 13px; margin-bottom: 22px; }
.single-article .entry-meta a { color: var(--main); }
.entry-thumb { margin-bottom: 28px; overflow: hidden; border-radius: 5px; }
.entry-content { font-size: 16px; color: var(--text-2); }
.entry-content h2, .entry-content h3, .entry-content h4 { color: #fff; font-weight: 600; }
.entry-content h2 { font-size: 24px; margin: 1.6em 0 .6em; }
.entry-content h3 { font-size: 20px; margin: 1.4em 0 .6em; }
.entry-content p { margin: 0 0 1em; }
.entry-content ul, .entry-content ol { padding-left: 1.2em; list-style: disc; margin-bottom: 1em; }
.entry-content ol { list-style: decimal; }
.entry-content ul li, .entry-content ol li { margin-bottom: .4em; }
.entry-content img { border-radius: 5px; }
.entry-content blockquote {
	border-left: 4px solid var(--main);
	background: var(--bg-2);
	margin: 1.4em 0;
	padding: 16px 22px;
}
.entry-content a { color: var(--main); text-decoration: underline; }

.post-nav {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-top: 44px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
	flex-wrap: wrap;
}
.post-nav a { color: #fff; font-weight: 600; font-size: 14px; }
.post-nav a:hover { color: var(--main); }
.page-intro { margin-bottom: 34px; font-size: 16px; color: var(--text-2); }

/* Comments */
.comment-list { list-style: none; padding: 0; }
.comment-list .comment { border: 1px solid var(--line); padding: 18px 20px; margin-bottom: 16px; background: var(--bg-2); }
.comment-reply-link { font-weight: 600; color: var(--main); }
.comment-form label { display: block; font-weight: 600; margin-bottom: 6px; color: #fff; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
	width: 100%; padding: 11px 14px; border: 1px solid #555; background: rgba(0, 0, 0, .3); color: var(--text);
}
.comment-form .submit {
	background: var(--main); color: #000; border: 0;
	padding: 12px 30px; font-weight: 600; cursor: pointer; text-transform: uppercase;
}
.comment-form .submit:hover { color: #fff; }
.comment-form p { color: var(--text-2); margin-bottom: 14px; }
.comment-form .comment-notes, .comment-form .logged-in-as { color: var(--text-3); }

/* Product single */
.product-single { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.ps-gallery .card-img { border: 1px solid var(--line); border-radius: 5px; }
.ps-title { font-size: calc(1.4vw + 18px); margin: 8px 0 12px; color: #fff; font-weight: 600; }
.ps-excerpt { color: var(--text-3); font-size: 15.5px; }
.ps-specs { width: 100%; border-collapse: collapse; margin: 24px 0; background: var(--bg-2); }
.ps-specs th, .ps-specs td { padding: 12px 18px; text-align: left; font-size: 14px; }
.ps-specs th { width: 42%; color: #fff; background: #222; font-weight: 600; }
.ps-specs td { color: var(--text-2); }
.ps-actions { margin: 26px 0 14px; }
.ps-note { color: var(--text-3); font-size: 13.5px; margin: 0; }
.ps-content { margin-top: 56px; }

/* Contact page */
.contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; align-items: start; }
.contact-info h2 { font-size: 26px; color: #fff; font-weight: 600; margin-bottom: 14px; }
.contact-lead { color: var(--text-3); margin-bottom: 28px; }
.contact-form-col > .entry-content { margin-bottom: 24px; }

/* Info list (inquiry / contact) */
.info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.info-list li { display: flex; gap: 16px; align-items: flex-start; color: var(--main); }
.info-list .cj-ic { margin-top: 3px; }
.info-list strong { display: block; color: #fff; font-size: 14px; margin-bottom: 2px; }
.info-list span { color: var(--text-2); font-size: 14.5px; }
.info-list span a { color: var(--text-2); }
.info-list span a:hover { color: var(--main); }

/* Dark variant (used on contact page, dark background) */
.info-list-dark li { color: var(--main); }
.info-list-dark strong { color: #fff; }
.info-list-dark span { color: var(--text-2); }

/* Case single — category label */
.case-tag-big {
	display: inline-block;
	color: var(--main);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: 14px;
	margin-bottom: 18px;
}

/* CTA strip */
.cta-strip-in {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
	flex-wrap: wrap;
	background: var(--bg-3);
	padding: 36px 42px;
	border: 1px solid var(--line);
}
.cta-strip-in h2 { margin-bottom: 4px; font-size: 24px; color: #fff; font-weight: 600; }
.cta-strip-in p { margin: 0; color: var(--text-3); }

/* 404 */
.error-404 { text-align: center; padding: 60px 0; }
.error-404 h1 { font-size: clamp(80px, 14vw, 150px); color: var(--main); margin-bottom: 10px; line-height: 1; font-weight: 800; }
.error-404 p { color: var(--text-2); }
.error-404-actions { display: flex; gap: 14px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }

/* Legacy searchform (widget areas) */
.search-form { display: flex; }
.search-form input[type="search"] {
	flex: 1;
	padding: 11px 14px;
	border: 1px solid #555;
	background: rgba(0, 0, 0, .3);
	color: var(--text);
	min-width: 0;
}
.search-form .search-submit {
	padding: 0 18px;
	background: var(--main);
	color: #000;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.search-form .search-submit:hover { color: #fff; }

/* ==========================================================================
   Breadcrumb bar (slim, used on product archive / detail)
   ========================================================================== */
.crumb-bar {
	background: var(--bg-2);
	border-top: 1px solid var(--line);
	padding: 12px 0;
}
.crumb-bar .breadcrumb { position: static; }

/* ==========================================================================
   Category landing (product archive)
   ========================================================================== */
.cat-landing { padding-top: calc(1.5% + 16px); }
.cat-head { text-align: center; margin-bottom: calc(1vw + 10px); }
.cat-h1 {
	font-size: calc(1.8vw + 22px);
	line-height: calc(2vw + 26px);
	font-weight: 600;
	color: #fff;
	text-transform: uppercase;
}

.cat-h2 {
	font-size: calc(1.2vw + 18px);
	line-height: calc(1.4vw + 24px);
	font-weight: 600;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	margin: calc(1vw + 8px) 0 0;
}

.cat-intro { margin-bottom: calc(2vw + 20px); }
.cat-intro-title {
	font-size: calc(1.4vw + 18px);
	line-height: calc(1.5vw + 24px);
	font-weight: 600;
	color: #fff;
	text-align: center;
	margin-bottom: calc(1vw + 14px);
}
.cat-intro-title span { color: var(--main); }

.cat-core {
	display: flex;
	align-items: center;
	gap: calc(1.5vw + 20px);
	background: var(--bg-2);
	border: 1px solid var(--line);
	padding: calc(1vw + 14px);
	margin-bottom: calc(1vw + 14px);
}
.cat-core-img { width: 40%; flex: none; }
.cat-core-img img { width: 100%; }
.cat-core-txt h3 {
	font-size: calc(0.6vw + 16px);
	font-weight: 600;
	color: var(--main);
	margin-bottom: 8px;
}
.cat-core-txt p { color: var(--text-2); }

.cat-points { display: grid; grid-template-columns: 1fr 1fr; gap: calc(1vw + 14px); }
.cat-point {
	display: flex;
	align-items: center;
	gap: calc(1vw + 14px);
	background: var(--bg-2);
	border: 1px solid var(--line);
	padding: calc(0.75vw + 10px);
}
.cat-point-img { width: 42%; flex: none; }
.cat-point-img img { width: 100%; }
.cat-point-txt h4 {
	font-size: calc(0.35vw + 15px);
	font-weight: 600;
	color: #fff;
	line-height: calc(0.5vw + 22px);
	margin-bottom: 6px;
}
.cat-point-num { color: var(--main); }
.cat-point-txt p { color: var(--text-2); font-size: calc(0.1vw + 13px); }

/* Toolbar (result count + view toggle) */
.cat-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: calc(2vw + 20px) 0 calc(1vw + 10px);
	padding-bottom: calc(0.5vw + 6px);
	border-bottom: 1px solid var(--line);
}
.cat-count { color: var(--text-2); font-size: 14px; }
.view-as { display: flex; align-items: center; gap: 8px; }
.tool-name { color: var(--text-3); font-size: 13px; margin-right: 2px; }
.view-tool {
	padding: 5px 14px;
	border: 1px solid var(--line-2);
	color: var(--text-2);
	font-size: 13px;
	text-transform: capitalize;
}
.view-tool:hover { border-color: var(--main); color: var(--main); }
.view-tool.active { background: var(--main); border-color: var(--main); color: #000; }

/* Product list */
.prod-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}
.prod-card {
	background: var(--bg-2);
	border: 1px solid var(--line);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: all .3s;
}
.prod-card:hover { border-color: var(--main); transform: translateY(-4px); }
.prod-img { position: relative; overflow: hidden; }
.prod-img-link { display: block; }
.prod-img img, .prod-img .no-img { width: 100%; aspect-ratio: 50 / 49; object-fit: cover; transition: transform .5s ease; }
.prod-card:hover .prod-img img { transform: scale(1.05); }
.prod-fav {
	position: absolute;
	top: 10px; right: 10px;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .45);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all .25s;
}
.prod-fav:hover, .prod-fav.on { background: var(--main); color: #000; }

.prod-body { padding: calc(0.5vw + 10px); display: flex; flex-direction: column; gap: 4px; flex: 1; }
.prod-title { font-size: calc(0.2vw + 15px); font-weight: 600; line-height: 1.4; }
.prod-title a { color: #fff; }
.prod-title a:hover { color: var(--main); }
.prod-info { color: var(--text-3); font-size: 13px; margin-top: 2px; }
.prod-price { color: var(--main); font-size: 14px; font-weight: 600; }
.prod-desc {
	color: var(--text-2);
	font-size: 13px;
	margin-top: auto;
	padding-top: 6px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Showcase (image-only grid) */
.prod-list.is-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.prod-list.is-grid .prod-card { border: 0; background: transparent; }
.prod-list.is-grid .prod-body { display: none; }

/* ==========================================================================
   Product detail (chanjoye pid layout)
   ========================================================================== */
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) calc(20vw + 60px); gap: calc(1.5vw + 20px); align-items: start; }
.detail-main { min-width: 0; }
.pd-title {
	font-size: calc(0.3vw + 16px);
	line-height: 1.3;
	font-weight: 600;
	color: #fff;
	margin-bottom: calc(1vw + 12px);
}

.pd-basic {
	display: grid;
	grid-template-columns: minmax(0, 39fr) minmax(0, 59fr);
	justify-content: space-between;
	margin-bottom: calc(1vw + 8px);
}
.pd-main-img { border: 1px solid var(--line); overflow: hidden; background: var(--bg-2); }
.pd-main-img img, .pd-main-img .no-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.pd-thumbs { display: flex; flex-wrap: wrap; margin: 5px -5px 0; }
.pd-thumb { flex: 0 0 auto; width: calc(1vw + 52px); margin: 5px; border: 1px solid var(--line); overflow: hidden; opacity: .7; }
.pd-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.pd-thumb.on, .pd-thumb:hover { border-color: var(--main); opacity: 1; }

/* Spec table (mation-tabs): compact, borderless */
.pd-table { width: 100%; border-collapse: collapse; }
.pd-table th, .pd-table td {
	padding: 5px 0;
	text-align: left;
	font-size: calc(0.2vw + 11px);
	line-height: calc(0.4vw + 14px);
	vertical-align: top;
	border: 0;
}
.pd-table th { width: 35%; color: var(--text-3); font-weight: 400; }
.pd-table td { color: var(--text); }
.pd-tab-price .num { font-weight: 600; }
.pd-share-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px; height: 24px;
	margin: 2px 6px 2px 0;
	border-radius: 3px;
	overflow: hidden;
	vertical-align: middle;
}
.pd-share-facebook { background: #0866ff; }
.pd-share-pinterest { background: #e60023; }
.pd-share-whatsapp { background: #12af0a; }
.pd-share-x { background: #1a1a1a; border: 1px solid var(--line); }

/* Buttons (button-box): fixed 160x50 like chanjoye */
.pd-btns { display: flex; flex-wrap: wrap; margin: 0 -5px; padding-top: calc(1.5vw + 4px); }
.pd-btns .btn-orange,
.pd-btns .pd-wish {
	flex: 0 0 auto;
	width: 160px;
	margin: 5px;
	padding: 10px;
	text-align: center;
	line-height: 30px;
	font-size: 14px;
	letter-spacing: 0;
	white-space: nowrap;
	border-radius: 3px;
}
.pd-btns .pd-wish {
	background: var(--bg-2);
	border: 1px solid var(--line);
	color: var(--text-2);
}
.pd-btns .pd-wish:hover { border-color: var(--main); color: var(--main); background: var(--bg-2); }
.pd-wish.on { background: var(--main); color: #000; border-color: var(--main); }

/* Detail information */
.pd-desc { border-top: 1px solid var(--line); margin-top: calc(1vw + 10px); }
.pd-desc-title {
	font-size: calc(0.2vw + 11px);
	font-weight: 400;
	color: var(--text-3);
	line-height: 25px;
	padding: calc(1.5vw + 4px) 0 10px;
}

/* Module sections: Related / Review / KeyWords / Send */
.pd-mod-sec { margin-top: calc(1.5vw + 16px); }
.pd-mod-title {
	font-size: calc(0.2vw + 14px);
	font-weight: 500;
	color: #fff;
	padding: 10px 0;
	border-bottom: 1px solid var(--line);
}
.pd-mod-sec .prod-list { margin-top: 14px; }
.prod-list-related { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.prod-list-related .prod-body { padding: 10px 4px; }
.prod-list-related .prod-title { font-size: calc(0.2vw + 12px); font-weight: 400; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.prod-list-related .prod-info, .prod-list-related .prod-price { font-size: 12px; }

/* Review empty state */
.pd-review-empty {
	text-align: center;
	color: var(--text-2);
	font-size: calc(0.2vw + 11px);
	padding: 10px;
}
.pd-review-now { color: var(--main); margin-left: 6px; }
.pd-review-now:hover { text-decoration: underline; }

/* Keywords */
.pd-kw-list { display: flex; flex-wrap: wrap; margin: 0 -5px; padding: 5px 0; }
.pd-kw-item { padding: 5px; }
.pd-kw-item a { display: block; color: var(--text-2); font-size: calc(0.2vw + 12px); line-height: 20px; }
.pd-kw-item a:hover { color: var(--main); }

/* Product page inquiry form (send module): full-width stacked fields */
.pd-send-sec .cj-form { margin-top: 10px; }
.pf-field { margin-bottom: 8px; }
.pf-field input, .pf-field textarea {
	display: block;
	width: 100%;
	padding: calc(0.25vw + 5px) 10px;
	font-size: calc(0.2vw + 12px);
	line-height: 25px;
	color: var(--text);
	background: var(--bg-2);
	border: 1px solid var(--line);
	border-radius: 0;
}
.pf-field input:focus, .pf-field textarea:focus { border-color: var(--main); outline: none; }
.pf-field textarea { min-height: 120px; resize: vertical; }
.pf-agree {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--text-2);
	margin: 4px 0 10px;
}
.pf-submit {
	display: inline-block;
	background: var(--main);
	color: #fff;
	font-weight: 500;
	letter-spacing: 0;
	padding: 9px 40px;
	border: 0;
	cursor: pointer;
}
.pf-submit:hover { opacity: .9; color: #fff; }

/* Sidebar */
.detail-side { position: sticky; top: 100px; }
.side-box { background: var(--bg-2); border: 1px solid var(--line); padding: calc(0.75vw + 10px); }
.side-box h2 {
	font-size: calc(0.2vw + 14px);
	font-weight: 500;
	color: #fff;
	margin-bottom: calc(0.5vw + 8px);
}
.side-box ul { display: grid; gap: 4px; }
.side-box a { display: block; padding: 7px 10px; color: var(--text-2); font-size: 14px; border-left: 2px solid transparent; }
.side-box a:hover { color: var(--main); border-left-color: var(--main); background: rgba(255, 102, 0, .06); }
.side-box li.on a { color: var(--main); border-left-color: var(--main); }

/* ==========================================================================
   Page banner (comm-banner) — used on customization / inner pages
   ========================================================================== */
.comm-banner {
	position: relative;
	overflow: hidden;
	height: 30vh;
	min-height: 380px;
	background-color: var(--bg-2);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.comm-banner:after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .42);
}
.comm-banner-in { position: relative; z-index: 2; }
.comm-banner-title {
	font-size: calc(1.6vw + 18px);
	line-height: calc(1.75vw + 22px);
	font-weight: 600;
	text-transform: uppercase;
	color: #fff;
}
.page-title {
	font-size: calc(1.4vw + 18px);
	font-weight: 600;
	color: #fff;
	margin-bottom: 16px;
}

/* ==========================================================================
   Customization landing template modules
   ========================================================================== */
.cust-disp-grid { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; }
.cust-disp-card {
	width: calc(100% / 5 - 12px);
	margin: 6px;
	position: relative;
	overflow: hidden;
	display: block;
}
.cust-disp-card .img { display: block; }
.cust-disp-card .img img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .5s ease; }
.cust-disp-card .text {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	text-align: center;
	flex-direction: column;
	padding: calc(4vw + 20px) calc(0.5vw + 10px) calc(0.5vw + 10px);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55));
}
.cust-disp-card .text h3 { color: #fff; font-size: calc(0.4vw + 14px); font-weight: 600; }
.cust-disp-card .text .btn-orange { margin: calc(1vw + 10px) 0 calc(-3vw - 45px); }
.cust-disp-card:hover .text .btn-orange { margin: calc(0.5vw + 5px) 0 0; }
.cust-disp-card:hover .img img { transform: scale(1.06); }

.cust-proc-in {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: calc(1.5vw + 20px);
	align-items: center;
}
.cust-proc-img img { width: 100%; border-radius: calc(0.25vw + 5px); }
.cust-proc-steps { color: var(--text-2); }
.cust-proc-steps p { margin: 0 0 .8em; }

/* Why Choose Us — tabbed panels (structure per chanjoye comm04 custThree) */
.cust-why-tabs { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; }
.cust-why-tab {
	display: flex;
	align-items: center;
	margin: calc(0.5vw + 5px);
	padding: 5px calc(1vw + 10px);
	position: relative;
	border-radius: calc(0.25vw + 5px);
	font-size: calc(0.3vw + 14px);
	line-height: calc(0.5vw + 20px);
	color: #fff;
}
.cust-why-tab img { width: calc(1vw + 40px); height: auto; flex: none; margin-right: calc(0.25vw + 6px); filter: invert(1); }
.cust-why-tab:after {
	content: "";
	width: 0;
	height: 0;
	border: calc(0.25vw + 5px) solid transparent;
	position: absolute;
	top: 100%;
	left: calc(50% - 0.25vw - 5px);
}
.cust-why-tab:hover { color: var(--main); }
.cust-why-tab.on { background: var(--main); color: #fff; }
.cust-why-tab.on:hover { color: #fff; }
.cust-why-tab.on img { filter: invert(1) brightness(10); }
.cust-why-tab.on:after { border-top-color: var(--main); }

.cust-why-panels { padding: calc(0.5vw + 5px) 0 0; }
.cust-why-panel { display: none; }
.cust-why-panel.on { display: block; }
.cust-why-panel dl { background: var(--bg-2); display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.cust-why-panel dt { width: 31.5%; color: #fff; padding: calc(2vw + 10px); box-sizing: border-box; }
.cust-why-panel dt .icon { width: 45px; padding: 5px; box-sizing: content-box; background: var(--main); border-radius: calc(0.25vw + 5px); }
.cust-why-panel dt .icon img { display: block; width: 100%; filter: brightness(0.5); }
.cust-why-panel dt h3 { color: #fff; font-size: calc(0.6vw + 16px); line-height: calc(0.75vw + 20px); font-weight: 600; padding: calc(0.5vw + 5px) 0 0; }
.cust-why-panel dt h4 { color: #fff; font-size: calc(0.4vw + 14px); line-height: calc(0.5vw + 20px); font-weight: 600; padding: calc(1vw + 5px) 0 5px; }
.cust-why-panel dt p { color: var(--text-2); }
.cust-why-panel dd { width: 68.5%; }
.cust-why-panel dd img { display: block; width: 100%; }

/* Our Design Process — image cards with connector line (chanjoye comm04 manuThree) */
.cust-design-grid { display: flex; flex-wrap: wrap; align-items: stretch; }
.cust-design-item {
	width: calc(100% / 3 - 0.5vw - 10px);
	margin: calc(0.25vw + 5px);
	text-align: center;
	transition: background .3s ease-in-out;
}
.cust-design-item .img img { display: block; width: 100%; }
.cust-design-item .text { position: relative; padding: 0 calc(1vw + 10px) calc(1vw + 10px); }
.cust-design-item .text .icon {
	width: calc(1vw + 40px);
	padding: calc(0.15vw + 4px);
	box-sizing: content-box;
	display: block;
	margin: calc(-0.5vw - 20px) auto calc(0.25vw + 5px);
	background: var(--main);
	border-radius: 5px;
}
.cust-design-item .text .icon img { display: block; width: 100%; filter: grayscale(1) brightness(10); }
.cust-design-item .text h4 { color: var(--main); font-size: calc(0.25vw + 13px); }
.cust-design-item .text h4:before {
	content: "";
	position: absolute;
	left: 50%;
	top: calc(1.75vw + 75px);
	width: calc(100% + 0.5vw + 10px);
	height: 1px;
	background: rgba(255, 255, 255, 0.2);
}
.cust-design-item .text h4:after {
	content: "";
	width: 10px;
	height: 10px;
	background: var(--main);
	border-radius: 50%;
	margin: calc(0.25vw + 5px) auto;
	display: block;
	position: relative;
	z-index: 3;
}
.cust-design-item .text h3 { color: #fff; font-size: calc(0.5vw + 14px); line-height: calc(0.5vw + 20px); font-weight: 600; padding-bottom: calc(0.5vw + 5px); }
.cust-design-item .text p { color: var(--text-2); }
.cust-design-item:hover { background: var(--main); }
.cust-design-item:hover .text h3,
.cust-design-item:hover .text h4,
.cust-design-item:hover .text p { color: #fff; }
.cust-design-item:hover .text h4:before { background: rgba(255, 255, 255, 0.4); }
.cust-design-item:hover .text h4:after { background: #fff; }
.cust-design-item:hover .text .icon { background: #fff; }
.cust-design-item:hover .text .icon img { filter: none; }

@media (min-width: 769px) {
	.cust-design-item:nth-of-type(3n) .text h4:before { display: none; }
}
@media (max-width: 768px) {
	.cust-why-panel dt { width: 100%; }
	.cust-why-panel dd { width: 100%; }
	.cust-design-item { width: calc(100% / 2 - 0.5vw - 10px); }
	.cust-design-item:nth-of-type(2n) .text h4:before { display: none; }
}
@media (max-width: 480px) {
	.cust-why-tabs { display: none; }
	.cust-why-panel { display: block; }
	.cust-design-item { width: calc(100% - 0.5vw - 10px); }
	.cust-design-item .text h4:before { display: none; }
}

.cust-testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cust-testi-card { background: var(--bg-2); border: 1px solid var(--line); padding: calc(1vw + 16px); }
.cust-testi-card .quote { color: var(--text-2); font-style: italic; margin-bottom: 12px; }
.cust-testi-card .name { color: var(--main); font-size: 13px; font-weight: 600; }
.cust-partner-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: calc(1.5vw + 20px);
}
.cust-partner { flex: none; }
.cust-partner img { max-height: 52px; width: auto; opacity: .8; transition: opacity .3s; }
.cust-partner:hover img { opacity: 1; }

/* ==========================================================================
   Contact page (form left + details right)
   ========================================================================== */
.contact-grid { grid-template-columns: 1.25fr 1fr; }
.contact-form-col { background: var(--bg-3); padding: calc(1.5vw + 10px); }
.contact-form-title {
	font-size: calc(0.8vw + 16px);
	font-weight: 600;
	color: #fff;
	margin-bottom: calc(1vw + 12px);
}
.contact-title { font-size: calc(1.2vw + 20px); font-weight: 600; color: #fff; margin-bottom: 10px; }
.contact-dept { color: var(--text-3); margin-bottom: 18px; }
.contact-person {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 20px;
}
.contact-person .person-img { width: 120px; flex: none; border-radius: calc(0.25vw + 5px); overflow: hidden; }
.contact-person .person-img img { width: 100%; }
.contact-person .person-name { color: var(--text-2); font-size: 14px; }
.contact-person .person-name strong { color: var(--main); }
.contact-detail-list { display: grid; gap: 12px; }
.contact-detail-list li { display: flex; gap: 10px; font-size: 14.5px; }
.contact-detail-list .k { flex: 0 0 90px; color: var(--text-3); }
.contact-detail-list .v { color: var(--text-2); }
.contact-detail-list .v a { color: var(--text-2); }
.contact-detail-list .v a:hover { color: var(--main); }

/* ==========================================================================
   Product detail (category SEO) + News list / detail
   ========================================================================== */

/* ---- Page H1 title (category pages) ---- */
.pd-title-wrap { text-align: center; padding: calc(2vw + 20px) 0 calc(0.5vw + 4px); }
.pd-title-wrap .pd-title { color: var(--main); font-size: calc(1.3vw + 26px); font-weight: 700; margin: 0; line-height: 1.25; }

/* ---- Product detail: Why Choose (text + image) ---- */
.pd-why-in { display: flex; gap: calc(2vw + 24px); align-items: center; }
.pd-why-text { flex: 1 1 56%; }
.pd-why-text .sec-title { color: var(--main); }
.pd-why-desc { color: var(--text-2); font-size: calc(0.1vw + 13.5px); line-height: 1.8; margin-bottom: calc(1vw + 10px); }
.pd-why-desc p { margin: 0 0 12px; }
.pd-why-img { flex: 1 1 44%; }
.pd-why-img img { width: 100%; border-radius: calc(0.25vw + 5px); }

/* ---- Product detail: Introduction block (centered title + text, chanjoye) ---- */
.pd-intro-sec { padding: calc(2vw + 10px) 0 0; }
.pd-intro-head { text-align: center; max-width: 1100px; margin: 0 auto; }
.pd-intro-head .sec-title { color: var(--text); }
.pd-intro-desc { color: var(--text-2); font-size: calc(0.2vw + 13px); line-height: calc(0.4vw + 20px); margin-top: 10px; }

/* ---- Product detail: process steps (4-column circular images, chanjoye) ---- */
.pd-process-list { display: flex; flex-wrap: wrap; margin: 0 -5px; padding: calc(1vw + 10px) 0; }
.pd-step { flex: 1 1 0; min-width: 0; margin: 0 5px; text-align: center; }
.pd-step-img { display: flex; justify-content: center; }
.pd-step-img img { border-radius: 50%; }
.pd-step-title { color: var(--text); font-size: calc(0.4vw + 14px); font-weight: 600; padding: 10px 5px; }
.pd-step-desc { color: var(--text-2); font-size: calc(0.2vw + 13px); line-height: calc(0.4vw + 20px); padding: 0 10px 10px; }

/* ---- Product detail: How does it fit (continuous with the intro block) ---- */
.pd-fit-sec { padding: 0 0 calc(2vw + 20px); }
.pd-fit-row { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(1vw + 10px); }
.pd-fit-heading { flex: 0 0 25%; }
.pd-fit-dash { display: block; width: calc(1vw + 20px); height: 3px; background: var(--main); margin-bottom: 10px; }
.pd-fit-title { color: var(--text); font-size: calc(0.5vw + 16px); font-weight: 600; }
.pd-fit-text { flex: 1 1 auto; color: var(--text-2); font-size: calc(0.2vw + 13px); line-height: calc(0.4vw + 20px); padding-top: calc(0.5vw + 10px); }
.pd-fit-btn { text-align: center; padding-top: calc(2vw + 10px); }

/* ---- Product detail: testimonials ---- */
.pd-testi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(1vw + 14px); }
.pd-testi-card { background: var(--bg-2); border: 1px solid #333; padding: calc(1vw + 16px); display: flex; flex-direction: column; gap: 10px; }
.pd-testi-quote { color: var(--text); font-size: calc(0.1vw + 13.5px); line-height: 1.7; font-style: italic; margin: 0; }
.pd-testi-name { color: var(--main); font-weight: 600; }
.pd-testi-role { color: var(--text-3); font-size: calc(0.1vw + 12px); }

/* ---- Product detail: FAQs / keywords ---- */
.pd-faq-list { max-width: 1100px; margin: 0 auto; }
.pd-kw-head { text-align: center; margin-bottom: calc(1vw + 12px); }
.pd-kw-title { color: var(--text); font-size: calc(0.4vw + 16px); font-weight: 600; }
.pd-kw-tags { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pd-kw-tag { color: var(--text-2); border: 1px solid #444; padding: 8px 18px; font-size: calc(0.1vw + 13px); }
.pd-kw-tag:hover { color: #fff; border-color: var(--main); }

/* ---- Product detail: blog cards ---- */
.pd-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(1vw + 14px); max-width: 1100px; margin: 0 auto; }

/* ---- News list (horizontal cards) ---- */
.news-list { display: flex; flex-direction: column; gap: calc(1vw + 18px); max-width: 1100px; margin: 0 auto; }
.news-list-item { display: flex; gap: calc(1.5vw + 20px); background: var(--bg-2); border: 1px solid #333; padding: calc(0.75vw + 12px); align-items: center; }
.news-list-img { flex: 0 0 260px; overflow: hidden; border-radius: calc(0.25vw + 5px); }
.news-list-img img { width: 100%; display: block; transition: transform .5s ease; }
.news-list-item:hover .news-list-img img { transform: scale(1.05); }
.news-list-body { flex: 1; }
.news-list-title { font-size: calc(0.3vw + 16px); font-weight: 600; margin: 0 0 10px; }
.news-list-title a { color: var(--text); }
.news-list-title a:hover { color: var(--main); }
.news-list-excerpt { color: var(--text-2); font-size: calc(0.1vw + 13px); line-height: 1.7; margin: 0 0 10px; }
.news-list-time { color: var(--text-3); font-size: calc(0.1vw + 12.5px); }

/* ---- News detail meta + CTA ---- */
.news-detail-meta { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: center; margin: 0 0 calc(1vw + 16px); }
.news-detail-date { color: var(--text-3); }
.news-detail-share { display: flex; gap: 10px; flex-wrap: wrap; }
.news-detail-share a { color: var(--text-2); font-size: calc(0.1vw + 12.5px); }
.news-detail-share a:hover { color: var(--main); }
.news-detail-cta { background: var(--bg-2); border: 1px solid #333; border-left: 3px solid var(--main); padding: calc(1vw + 18px); margin: calc(1.5vw + 20px) 0; display: grid; grid-template-columns: 1fr 1fr; gap: calc(1.5vw + 20px); }
.ndc-block h3 { color: var(--main); font-size: calc(0.25vw + 15px); margin-bottom: 8px; }
.ndc-block p { color: var(--text-2); font-size: calc(0.1vw + 13px); line-height: 1.7; margin-bottom: 10px; }
.ndc-contact { list-style: none; margin: 0; padding: 0; }
.ndc-contact li { color: var(--text-2); font-size: calc(0.1vw + 13px); padding: 4px 0; }

/* ---- News group (related products) + bottom CTA ---- */
.news-group-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(1vw + 14px); max-width: 900px; margin: 0 auto; }
.news-group-card { display: block; background: var(--bg-2); border: 1px solid #333; overflow: hidden; }
.news-group-img { display: block; overflow: hidden; }
.news-group-img img { width: 100%; display: block; transition: transform .5s ease; }
.news-group-card:hover .news-group-img img { transform: scale(1.05); }
.news-group-name { display: block; color: var(--text); padding: calc(0.75vw + 10px); font-size: calc(0.15vw + 14px); font-weight: 600; }
.news-group-card:hover .news-group-name { color: var(--main); }
.cta-news-sec { background: var(--bg-2); }
.cta-news-in { text-align: center; max-width: 900px; }
.cta-news-title { color: var(--text); font-size: calc(0.5vw + 18px); font-weight: 600; margin-bottom: 10px; }
.cta-news-text { color: var(--text-2); font-size: calc(0.1vw + 13.5px); margin-bottom: calc(1vw + 12px); }

/* ==========================================================================
   List pages (blog/news/FAQ) + news detail — chanjoye layout
   ========================================================================== */
.list-page-title {
	font-size: calc(0.3vw + 16px);
	font-weight: 600;
	line-height: 1.25;
	color: #fff;
	margin-bottom: calc(1vw + 16px);
}

.news-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: calc(1vw + 14px);
}
.news-card-img {
	display: block;
	aspect-ratio: 5 / 3;
	overflow: hidden;
	background: #222;
}
.news-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
.news-card:hover .news-card-img img { transform: scale(1.06); }
.news-card-img .no-img { aspect-ratio: 5 / 3; }
.news-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 8px;
	padding: calc(0.5vw + 14px);
}
.news-card-title { font-size: calc(0.2vw + 15px); font-weight: 500; line-height: 1.35; margin: 0; }
.news-card-title a { color: var(--main); }
.news-card-title a:hover { color: var(--text); }
.news-card-excerpt { color: var(--text-3); font-size: calc(0.1vw + 13px); line-height: 1.6; }
.news-card-time { color: var(--text-3); font-size: calc(0.1vw + 12px); margin-top: auto; }

/* FAQ row list */
.faq-rows { list-style: none; margin: 0; padding: 0; }
.faq-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 10px 0;
	border-bottom: 1px dashed var(--line-2);
}
.faq-row:last-child { border-bottom: 0; }
.faq-row-q { flex: 1; color: var(--text); font-size: calc(0.1vw + 14px); }
.faq-row-time { flex: 0 0 auto; width: 76px; text-align: right; color: var(--text-3); font-size: calc(0.1vw + 13px); }

/* News detail header + prev/next */
.detail-time {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 20px;
	border-bottom: 1px solid var(--line);
	padding-bottom: 14px;
	margin-bottom: calc(1vw + 18px);
}
.news-share { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.news-share-label { color: var(--text); font-weight: 600; }
.news-share a { color: var(--text-2); font-size: calc(0.1vw + 13px); }
.news-share a:hover { color: var(--main); }
.detail-date { color: var(--text-3); font-size: calc(0.1vw + 13px); }
.detail-title {
	color: #fff;
	font-size: calc(0.9vw + 20px);
	font-weight: 600;
	line-height: 1.25;
	margin-bottom: calc(1vw + 16px);
}
.mod-bottom-detail {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	border-top: 1px solid var(--line);
	margin-top: calc(1.5vw + 24px);
	padding-top: calc(1vw + 14px);
}
.mod-bottom-detail .prev,
.mod-bottom-detail .next { flex: 1; min-width: 0; }
.mod-bottom-detail .next { text-align: right; }
.prev-title,
.next-title {
	display: block;
	color: var(--text-3);
	font-size: calc(0.1vw + 12px);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 6px;
}
.prev-link a,
.next-link a { color: var(--text); font-size: calc(0.1vw + 14px); }
.prev-link a:hover,
.next-link a:hover { color: var(--main); }

/* Shared right sidebar */
.list-side { display: flex; flex-direction: column; gap: calc(1vw + 20px); }
.side-group { background: var(--bg-2); border: 1px solid var(--line); }
.side-group-title {
	color: #fff;
	font-size: calc(0.3vw + 15px);
	font-weight: 600;
	padding: calc(0.5vw + 14px);
	border-bottom: 1px solid var(--line);
}
.side-group-list { list-style: none; margin: 0; padding: 0; }
.side-group-item { border-bottom: 1px dashed var(--line-2); }
.side-group-item:last-child { border-bottom: 0; }
.side-group-item a { display: block; padding: 12px calc(0.5vw + 14px); color: var(--text-2); font-size: calc(0.1vw + 14px); }
.side-group-item a:hover { color: var(--main); }

.side-products { display: flex; flex-direction: column; gap: calc(1vw + 16px); }
.side-product-card { display: block; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; }
.side-product-card:hover { border-color: var(--main); }
.side-product-img { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #222; }
.side-product-img img { width: 100%; height: 100%; object-fit: cover; }
.side-product-img .no-img { aspect-ratio: 1 / 1; }
.side-product-name { display: block; padding: calc(0.5vw + 14px); color: var(--text); font-size: calc(0.1vw + 14px); }
.side-product-card:hover .side-product-name { color: var(--main); }

.side-cta { background: var(--bg-2); border: 1px solid var(--line); padding: calc(1vw + 20px); }
.side-cta-title { color: #fff; font-size: calc(0.3vw + 16px); font-weight: 600; line-height: 1.3; margin-bottom: 10px; }
.side-cta-text { color: var(--text-2); font-size: calc(0.1vw + 13px); line-height: 1.6; margin-bottom: calc(1vw + 12px); }

/* ==========================================================================
   Service pages: Design (comm03) / OEM (comm01) / About (aboutus)
   ========================================================================== */

/* ---- Core value (shared Design & OEM) ---- */
.coreval-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(1vw + 14px); }
.coreval-card { display: flex; gap: calc(1vw + 12px); background: var(--bg-2); border: 1px solid #333; padding: calc(1vw + 14px); align-items: flex-start; }
.coreval-img { flex: 0 0 calc(24% - 6px); }
.coreval-img img { width: 100%; border-radius: calc(0.25vw + 5px); }
.coreval-body { flex: 1; }
.coreval-title { color: var(--text); font-size: calc(0.35vw + 15px); font-weight: 600; margin-bottom: 10px; }
.coreval-desc { color: var(--text-2); font-size: calc(0.1vw + 13px); line-height: 1.75; }

/* ---- Design services ---- */
.dsgn-svc-in { display: flex; gap: calc(2vw + 20px); align-items: center; }
.dsgn-svc-list { flex: 1 1 60%; }
.dsgn-svc-item { display: flex; gap: calc(1vw + 12px); margin-bottom: calc(1vw + 16px); align-items: flex-start; }
.dsgn-svc-icon { flex: 0 0 auto; width: calc(2vw + 34px); }
.dsgn-svc-icon img { width: 100%; }
.dsgn-svc-desc { color: var(--text-2); font-size: calc(0.1vw + 13.5px); line-height: 1.75; }
.dsgn-svc-closing { color: var(--text); font-size: calc(0.1vw + 13.5px); line-height: 1.75; border-left: 3px solid var(--main); padding-left: 14px; margin-top: calc(1vw + 10px); }
.dsgn-svc-side { flex: 1 1 40%; }
.dsgn-svc-side img { width: 100%; border-radius: calc(0.25vw + 5px); }

/* ---- Process steps (Design / OEM) ---- */
.proc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(1vw + 14px); }
.proc-grid-5 { grid-template-columns: repeat(5, 1fr); }
.proc-card { background: var(--bg-2); border: 1px solid #333; padding: calc(1vw + 14px); height: 100%; }
.proc-img img { width: 100%; border-radius: calc(0.25vw + 5px); margin-bottom: 14px; }
.proc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.proc-icon { width: calc(1vw + 26px); flex: none; }
.proc-icon img { width: 100%; }
.proc-num { color: var(--main); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: calc(0.1vw + 12px); }
.proc-title { color: var(--text); font-size: calc(0.25vw + 15px); font-weight: 600; margin-bottom: 10px; }
.proc-desc { color: var(--text-2); font-size: calc(0.1vw + 13px); line-height: 1.7; }

/* ---- CTA strip ---- */
.cta-banner { background-size: cover; background-position: center; }
.cta-banner-in { display: flex; justify-content: center; padding: calc(5vw + 40px) 0; }
.cta-btns { display: flex; gap: calc(1vw + 12px); flex-wrap: wrap; justify-content: center; }
.cta-btns .btn-orange, .cta-btns .btn-outline { padding: calc(0.6vw + 12px) calc(2vw + 20px); font-size: calc(0.15vw + 14px); }

/* ---- Cases ---- */
.case-sw { max-width: 1100px; margin: 0 auto; }
.case-slide { display: flex; gap: calc(2vw + 20px); align-items: center; }
.case-img { flex: 1 1 50%; }
.case-img img { width: 100%; border-radius: calc(0.25vw + 5px); }
.case-body { flex: 1 1 50%; }
.case-badge { display: inline-block; background: var(--main); color: #000; padding: 4px 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; font-size: calc(0.1vw + 12px); }
.case-title { color: var(--text); font-size: calc(0.6vw + 18px); font-weight: 600; margin-bottom: 16px; }
.case-dl { display: flex; flex-direction: column; gap: 12px; }
.case-dl dt { color: var(--main); font-weight: 600; font-size: calc(0.1vw + 13px); }
.case-dl dd { color: var(--text-2); font-size: calc(0.1vw + 13.5px); line-height: 1.7; margin-left: 0; }

/* ---- Why choose (page modules) ---- */
.pg-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(1vw + 14px); }
.pg-why-grid-5 { grid-template-columns: repeat(5, 1fr); }
.pg-why-card { background: var(--bg-2); border: 1px solid #333; padding: calc(1vw + 16px); text-align: center; height: 100%; }
.pg-why-icon { display: inline-flex; width: calc(2vw + 40px); margin-bottom: 14px; }
.pg-why-icon img { width: 100%; }
.pg-why-title { color: var(--text); font-size: calc(0.2vw + 15px); font-weight: 600; margin-bottom: 10px; }
.pg-why-desc { color: var(--text-2); font-size: calc(0.1vw + 13px); line-height: 1.7; }

/* ---- OEM / ODM intro ---- */
.oem-one-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(1vw + 14px); }
.oem-one-card { background: var(--bg-2); border: 1px solid #333; overflow: hidden; }
.oem-one-img img { width: 100%; display: block; }
.oem-one-body { padding: calc(1vw + 16px); }
.oem-one-icon { display: inline-flex; width: calc(1.6vw + 30px); margin-bottom: 12px; }
.oem-one-icon img { width: 100%; }
.oem-one-title { color: var(--text); font-size: calc(0.35vw + 16px); font-weight: 600; margin-bottom: 10px; }
.oem-one-desc { color: var(--text-2); font-size: calc(0.1vw + 13.5px); line-height: 1.7; }

/* ---- Core capabilities ---- */
.cap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(1vw + 14px); }
.cap-card { display: flex; gap: calc(1vw + 14px); background: var(--bg-2); border: 1px solid #333; padding: calc(1vw + 16px); align-items: flex-start; }
.cap-body { flex: 1; }
.cap-title { color: var(--text); font-size: calc(0.35vw + 16px); font-weight: 600; margin-bottom: 14px; }
.cap-points { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cap-point { display: flex; gap: 10px; align-items: flex-start; }
.cap-check { color: var(--main); flex: none; margin-top: 2px; }
.cap-check svg { display: block; }
.cap-point-txt strong { color: var(--text); font-weight: 600; }
.cap-point-txt p { color: var(--text-2); font-size: calc(0.1vw + 13px); line-height: 1.65; margin-top: 3px; }
.cap-btn { display: inline-block; color: var(--main); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; font-size: calc(0.1vw + 13px); }
.cap-btn:hover { color: #fff; }
.cap-img { flex: 0 0 30%; }
.cap-img img { width: 100%; border-radius: calc(0.25vw + 5px); }

/* ---- Testimonials ---- */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(1vw + 14px); margin-bottom: calc(2vw + 20px); }
.testi-card { background: var(--bg-2); border: 1px solid #333; padding: calc(1vw + 18px); text-align: center; }
.testi-av { display: inline-flex; width: calc(3vw + 50px); height: calc(3vw + 50px); border-radius: 50%; overflow: hidden; margin-bottom: 14px; }
.testi-av img { width: 100%; height: 100%; object-fit: cover; }
.testi-quote { color: var(--text); font-size: calc(0.15vw + 14px); line-height: 1.7; font-style: italic; margin-bottom: 12px; }
.testi-name { color: var(--text-3); font-size: calc(0.1vw + 12.5px); }

/* ---- About: Brand vision ---- */
.vision-in { display: flex; gap: calc(2vw + 20px); align-items: center; }
.vision-img { flex: 1 1 44%; }
.vision-img img { width: 100%; border-radius: calc(0.25vw + 5px); }
.vision-list { flex: 1 1 56%; display: flex; flex-direction: column; gap: calc(1vw + 16px); }
.vision-item { display: flex; gap: calc(1vw + 14px); align-items: flex-start; }
.vision-icon { flex: 0 0 auto; width: calc(2vw + 38px); }
.vision-icon img { width: 100%; }
.vision-item-txt h3 { color: var(--main); font-size: calc(0.25vw + 15px); font-weight: 600; margin-bottom: 6px; }
.vision-item-txt p { color: var(--text-2); font-size: calc(0.1vw + 13.5px); line-height: 1.7; }

/* ---- About: story timeline ---- */
.story-slide { padding: 0 calc(0.4vw + 6px); }
.story-img { border-radius: calc(0.25vw + 5px); overflow: hidden; margin-bottom: 14px; }
.story-img img { width: 100%; transition: transform .5s ease; }
.story-slide:hover .story-img img { transform: scale(1.05); }
.story-year { color: var(--main); font-size: calc(0.8vw + 20px); font-weight: 700; margin-bottom: 6px; }
.story-desc { color: var(--text-2); font-size: calc(0.1vw + 13px); line-height: 1.65; }

/* ---- About: advantages ---- */
.about-adv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(1vw + 14px); }
.about-adv-card { display: flex; gap: calc(1vw + 14px); background: var(--bg-2); border: 1px solid #333; padding: calc(1vw + 16px); align-items: flex-start; }
.about-adv-img { flex: 0 0 34%; }
.about-adv-img img { width: 100%; border-radius: calc(0.25vw + 5px); }
.about-adv-body { flex: 1; }
.about-adv-icon { display: inline-flex; width: calc(1.6vw + 30px); margin-bottom: 10px; }
.about-adv-icon img { width: 100%; }
.about-adv-title { color: var(--text); font-size: calc(0.3vw + 16px); font-weight: 600; margin-bottom: 8px; }
.about-adv-desc { color: var(--text-2); font-size: calc(0.1vw + 13px); line-height: 1.7; }

/* ---- About: team ---- */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(1vw + 14px); }
.team-card { background: var(--bg-2); border: 1px solid #333; overflow: hidden; }
.team-img img { width: 100%; display: block; }
.team-title { color: var(--text); font-size: calc(0.3vw + 16px); font-weight: 600; margin: 14px calc(1vw + 16px) 8px; }
.team-desc { color: var(--text-2); font-size: calc(0.1vw + 13px); line-height: 1.7; margin: 0 calc(1vw + 16px) calc(1vw + 18px); }

/* ---- About: factory / responsibility (text + image) ---- */
.factory-about-in { display: flex; gap: calc(2vw + 20px); align-items: flex-start; }
.factory-about-side { flex: 1 1 55%; }
.factory-about-side .sec-title { margin-bottom: calc(1vw + 16px); }
.factory-about-img { flex: 1 1 45%; }
.factory-about-img img { width: 100%; border-radius: calc(0.25vw + 5px); }
.factory-list { margin-bottom: calc(1vw + 16px); }
.factory-list h3 { color: var(--main); font-size: calc(0.25vw + 15px); font-weight: 600; margin-bottom: 8px; }
.factory-list ul { list-style: none; margin: 0; padding: 0; }
.factory-list li { color: var(--text-2); font-size: calc(0.1vw + 13.5px); line-height: 1.7; padding-left: 18px; position: relative; margin-bottom: 6px; }
.factory-list li:before { content: ''; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; background: var(--main); border-radius: 50%; }
.factory-about-side .btn-orange { margin-top: 6px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
	.why-grid .why-item { width: calc(100% / 2 - 0.5vw - 5px); }
	.showre-item { width: calc(100% / 2 - 10px); }
	.serve-item { width: calc(100% / 2 - 0.5vw - 10px); }
	.footer-links { width: 100%; }
	.footer-send { width: 100%; max-width: 480px; }
	.product-grid { grid-template-columns: repeat(3, 1fr); }
	.prod-list { grid-template-columns: repeat(2, 1fr); }
	.prod-list.is-grid { grid-template-columns: repeat(3, 1fr); }
	.detail-layout { grid-template-columns: 1fr; }
	.detail-side { position: static; }
	.prod-list-related { grid-template-columns: repeat(3, 1fr); }
	.cat-core { flex-direction: column; }
	.cat-core-img { width: 100%; }
	.cust-disp-card { width: calc(100% / 3 - 12px); }
	.cust-proc-in { grid-template-columns: 1fr; }
	.proc-grid { grid-template-columns: repeat(2, 1fr); }
	.proc-grid-5 { grid-template-columns: repeat(2, 1fr); }
	.pg-why-grid, .pg-why-grid-5 { grid-template-columns: repeat(2, 1fr); }
	.cap-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
	.coreval-grid { grid-template-columns: 1fr; }
	.dsgn-svc-in { flex-direction: column; }
	.dsgn-svc-side { width: 100%; }
	.case-slide { flex-direction: column; }
	.case-img, .case-body { flex: none; width: 100%; }
	.oem-one-grid { grid-template-columns: 1fr; }
	.about-adv-grid { grid-template-columns: 1fr; }
	.team-grid { grid-template-columns: repeat(2, 1fr); }
	.testi-grid { grid-template-columns: 1fr; }
	.vision-in { flex-direction: column; }
	.vision-img { width: 100%; }
	.factory-about-in { flex-direction: column; }
	.factory-about-img { width: 100%; }
	.pd-why-in { flex-direction: column; }
	.pd-why-img { width: 100%; }
	.pd-step { flex: 0 0 calc(50% - 10px); }
	.pd-fit-row { flex-direction: column; }
	.pd-fit-heading { flex: none; width: 100%; }
	.pd-fit-text { padding-top: calc(0.5vw + 10px); }
	.pd-testi-grid { grid-template-columns: repeat(2, 1fr); }
	.pd-blog-grid { grid-template-columns: repeat(2, 1fr); }
	.news-detail-cta { grid-template-columns: 1fr; }
	.news-list-item { flex-direction: column; }
	.news-list-img { flex: none; width: 100%; }
	.news-cards { grid-template-columns: repeat(2, 1fr); }
	.odm-side { width: 100%; padding: calc(1vw + 10px) calc(1vw + 10px) 0; }
	.odm-sw { width: 100%; }
	.about-media, .about-panel { width: 100%; }
	.about-media { min-height: 56vw; }
	.ceo-text { width: 100%; padding: calc(6vw + 20px) 0 calc(3vw + 20px); }
	.ceo-img { width: 100%; }
	.faq-side { width: 100%; margin-bottom: 20px; }
	.faq-list { width: 100%; }
	.quote-side, .quote-form { width: 100%; }
	.contact-grid, .product-single { grid-template-columns: 1fr; gap: 36px; }
	.advan dl { width: 50%; }
	.cate-item { width: calc(100% / 3); }
	.pd-basic { grid-template-columns: 1fr; }
	.prod-list-related { grid-template-columns: repeat(2, 1fr); }
	.pd-btns { margin: 0; }
	.pd-btns .btn-orange, .pd-btns .pd-wish { flex: 1 1 160px; margin: 0 10px 0 0; }
	.cat-points { grid-template-columns: 1fr; }
	.cust-disp-card { width: calc(100% / 2 - 12px); }
	.cust-testi-grid { grid-template-columns: 1fr; }
	.comm-banner { min-height: 280px; }
}

@media (max-width: 700px) {
	.topbar-slogan { font-size: 11px; }
	.topbar-phone { display: none; }
	.product-grid, .post-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.form-grid { grid-template-columns: 1fr; }
	.cta-strip-in { padding: 26px 22px; }
	.footer-bottom-in { justify-content: center; text-align: center; }
	.sw-prev, .sw-next { display: none; }
	.hero .sw-prev, .hero .sw-next { display: none; }
	.prod-list { grid-template-columns: 1fr; }
	.prod-list.is-grid { grid-template-columns: repeat(2, 1fr); }
	.cat-toolbar { flex-direction: column; align-items: flex-start; }
	.proc-grid, .proc-grid-5 { grid-template-columns: 1fr; }
	.coreval-card { flex-direction: column; }
	.coreval-img { flex: none; width: 100%; }
	.cap-card { flex-direction: column; }
	.cap-img { flex: none; width: 100%; }
	.pg-why-grid, .pg-why-grid-5 { grid-template-columns: 1fr; }
	.pd-testi-grid { grid-template-columns: 1fr; }
	.pd-blog-grid { grid-template-columns: 1fr; }
	.news-group-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
	.advan dl { width: 100%; }
	.why-grid .why-item { width: 100%; }
	.showre-item { width: calc(100% - 10px); }
	.serve-item { width: calc(100% - 0.5vw - 10px); }
	.cate-item { width: 50%; }
	.product-grid, .post-grid { grid-template-columns: 1fr; }
	.odm-slide { width: calc(40vw + 150px); }
	.qf-2col { grid-template-columns: 1fr; }
	.team-grid { grid-template-columns: 1fr; }
	.dsgn-svc-item { flex-direction: column; }
	.story-slide { width: calc(60vw + 80px); }
	.pd-step { flex: 0 0 100%; }
}