/* KHOME Product (ShinkoLite) — classic PHP template styles */

:root {
	--kh-orange:     #ff6b1a;
	--kh-orange-600: #e85a0c;
	--kh-navy:       #0c2340;
	--kh-navy-50:    #f3f6fb;
	--kh-dark:       #111827;
	--kh-grey:       #6B7280;
	--kh-grey-500:   #6b7280;
	--kh-grey-300:   #d1d5db;
	--kh-grey-200:   #e5e7eb;
	--kh-grey-100:   #f3f4f6;
	--kh-light:      #f8fafc;
	--kh-border:     rgba(0,0,0,.08);
	--kh-radius:     10px;
	--kh-radius-lg:  16px;
	--kh-shadow-sm:  0 1px 2px rgba(12,35,64,.06), 0 1px 3px rgba(12,35,64,.08);
	--kh-shadow-md:  0 6px 18px rgba(12,35,64,.08);
	--kh-shadow-lg:  0 18px 40px rgba(12,35,64,.12);
}

.kh-product { color: var(--kh-dark); }
.kh-product a { color: inherit; }
.kh-product .kh-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.kh-product .kh-section { padding: 100px 0; }
.kh-product .kh-section--grey { background: var(--kh-light); }
/* Section header (eyebrow/h2/sub/section--head, plus section--head-left variant) is shared from khome-global.css */

.kh-product .kh-arrow-link {
	display: inline-flex;
	align-items: center;
	font-weight: 600;
	color: var(--kh-orange);
	text-decoration: none;
	transition: color .2s ease;
	font-size: .9rem;
}
.kh-product .kh-arrow-link:hover { color: var(--kh-orange-600); }

/* Hero rules live in khome-global.css under .kh-page-hero / .kh-page-hero-inner */

/* === Brand Overview === */
.kh-overview-grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 80px;
	align-items: center;
}
.kh-overview-copy h2 { margin-bottom: 20px; }
.kh-overview-copy p { color: #374151; line-height: 1.7; margin: 0 0 14px; }
.kh-feature-list {
	list-style: none;
	padding: 0;
	margin: 28px 0 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 32px;
}
.kh-feature-list li { display: flex; gap: 14px; align-items: flex-start; }
.kh-feature-list .kh-feat-icon {
	flex: none;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(237,106,34,.1);
	color: #ED6A22;
	border-radius: 10px;
}
.kh-feature-list .kh-feat-icon i { font-size: 22px; line-height: 1; color: #ED6A22; }
.kh-feature-list .kh-feat-icon svg { width: 22px; height: 22px; }
.kh-feature-list strong { color: var(--kh-navy); display: block; font-size: .98rem; margin-bottom: 2px; }
.kh-feature-list span { font-size: .88rem; color: var(--kh-grey-500); line-height: 1.5; }

.kh-overview-img {
	border-radius: var(--kh-radius-lg);
	background-size: cover;
	background-position: center;
	min-height: 480px;
	box-shadow: var(--kh-shadow-lg);
	background-color: var(--kh-navy-50);
}

/* === Popular Products === */
.kh-popular-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.kh-popular-card {
	position: relative;
	background: #fff;
	border-radius: var(--kh-radius-lg);
	overflow: hidden;
	box-shadow: var(--kh-shadow-sm);
	transition: all .2s ease;
	display: flex;
	flex-direction: column;
}
.kh-popular-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--kh-shadow-lg);
}
.kh-pop-img {
	position: relative;
	background-size: cover;
	background-position: center;
	background-color: var(--kh-grey-200);
	height: 320px;
}
.kh-pop-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: var(--kh-orange);
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	border-radius: 4px;
}
.kh-pop-badge svg { width: 12px; height: 12px; }
.kh-pop-rank {
	position: absolute;
	top: 16px;
	right: 16px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	background: var(--kh-navy);
	color: #fff;
	border-radius: 50%;
	font-weight: 800;
	font-size: .9rem;
	box-shadow: var(--kh-shadow-md);
}
.kh-pop-body {
	padding: 0 32px 32px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.kh-pop-body h3 {
	font-size: 1.4rem;
	color: var(--kh-navy);
	margin: 35px 0 10px !important;
	line-height: 1.25;
}
.kh-pop-body p {
	color: var(--kh-grey-500);
	font-size: .92rem;
	margin: 0 0 18px;
	flex: 1;
	line-height: 1.6;
}
.kh-pop-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--kh-grey-200);
}

/* === Other Products === */
.kh-other-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.kh-other-card {
	background: #fff;
	border: 1px solid var(--kh-grey-200);
	border-radius: var(--kh-radius);
	overflow: hidden;
	transition: all .2s ease;
	display: flex;
	flex-direction: column;
}
.kh-other-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--kh-shadow-md);
	border-color: transparent;
}
.kh-other-img {
	height: 160px;
	background-size: cover;
	background-position: center;
	background-color: var(--kh-grey-100);
}
.kh-other-body {
	padding: 0 20px 18px;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.kh-other-body h4 {
	font-size: .98rem;
	color: var(--kh-navy);
	font-weight: 600;
	margin: 25px 0 6px !important;
}
.kh-other-body p {
	font-size: .85rem;
	color: var(--kh-grey-500);
	margin: 0 0 14px;
	flex: 1;
	line-height: 1.5;
}
.kh-other-body .kh-arrow-link { font-size: .82rem; }

/* === Responsive === */
@media (max-width: 1024px) {
	.kh-popular-grid { grid-template-columns: 1fr 1fr; }
	.kh-pop-img { height: 260px; }
	.kh-other-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
	.kh-product .kh-section { padding: 70px 0; }
	.kh-overview-grid { grid-template-columns: 1fr; gap: 50px; }
	.kh-overview-img { min-height: 360px; }
	.kh-feature-list { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 720px) {
	.kh-popular-grid { grid-template-columns: 1fr; }
	.kh-pop-img { height: 240px; }
	.kh-other-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.kh-other-grid { grid-template-columns: 1fr; }
}