/* Produk Grid Container */
.produk-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 3 Columns Desktop */
	gap: 30px;
	margin: 40px 0;
	font-family: "Inter", sans-serif; /* Apply font */
}

/* Card Item */
.produk-item {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Soft shadow */
	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease;
	border: 1px solid #f0f0f0;
	display: flex;
	flex-direction: column;
}

.produk-item:hover {
	transform: translateY(-5px); /* Lift effect */
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Link Wrapper */
.produk-item a {
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Image Wrapper */
.produk-image-wrapper {
	width: 100%;
	aspect-ratio: 4/3; /* Consistent aspect ratio */
	overflow: hidden;
	background-color: #f9f9f9;
}

.produk-image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* Cover container usually looks best */
	transition: transform 0.3s ease;
}

.produk-item:hover .produk-image-wrapper img {
	transform: scale(1.05); /* Slight zoom on hover */
}

/* Content Area */
.produk-content {
	padding: 20px;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* Typography */
.produk-nama {
	font-size: 18px;
	font-weight: 700;
	color: #2a2d44; /* Dark blue/theme color */
	margin-bottom: 10px;
	line-height: 1.4;
}

.produk-harga {
	font-size: 16px;
	font-weight: 600;
	color: #d99b12; /* Orange accent */
	margin-top: auto; /* Push to bottom if flex column */
}

/* Pagination */
.produk-pagination {
	margin-top: 40px;
	text-align: center;
}

.produk-pagination a,
.produk-pagination span {
	display: inline-block;
	padding: 8px 16px;
	margin: 0 4px;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	text-decoration: none;
	color: #333;
	font-weight: 500;
}

.produk-pagination span.current,
.produk-pagination a:hover {
	background-color: #2a2d44;
	color: #fff;
	border-color: #2a2d44;
}

/* Responsive */
@media (max-width: 900px) {
	.produk-list {
		grid-template-columns: repeat(2, 1fr); /* 2 Columns Tablet */
		gap: 20px;
	}
}

@media (max-width: 600px) {
	.produk-list {
		grid-template-columns: 1fr; /* 1 Column Mobile */
		gap: 20px;
	}
}
/* =========================================
   Unified Detail Page Styles [produk_detail]
   ========================================= */

.produk-detail-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr; /* 2 Columns: 50% 50% */
	gap: 40px;
	margin-top: 20px;
	margin-bottom: 50px;
	align-items: start;
	font-family: "Inter", sans-serif; /* Apply font */
}

/* Left: Gallery */
.produk-detail-gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
}

.produk-detail-img-item {
	border-radius: 12px;
	overflow: hidden;
	background: #f9f9f9;
	/* Removed fixed aspect-ratio to allow full image */
	border: 1px solid #f0f0f0;
	margin-bottom: 15px; /* Spacing between stacked images */
}

.produk-detail-img-item img {
	width: 100%;
	height: auto; /* Allow natural height */
	display: block;
	cursor: pointer;
}

.produk-detail-img-item:first-child {
	grid-column: span 2;
	/* removed fixed aspect-ratio */
}

.produk-detail-img-item:hover img {
	transform: scale(1.02); /* Subtle zoom */
}

.produk-detail-placeholder {
	width: 100%;
	border-radius: 12px;
}

/* Right: Info */
.produk-detail-right {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.produk-detail-title {
	font-size: 28px;
	font-weight: 700;
	margin-bottom: 5px; /* Reduced bottom margin */
	color: #111;
}

.produk-detail-price-wrapper {
	display: flex;
	align-items: center;
	gap: 15px; /* Spacing between Price and Sale Info */
	margin-bottom: 15px;
	flex-wrap: wrap;
}

.produk-sale-info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

.produk-sale-badge {
	background-color: #e02424; /* Red for Sale */
	color: white;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.produk-normal-price {
	font-size: 14px;
	color: #888;
	text-decoration: line-through;
	font-weight: 500;
}

.produk-detail-price {
	font-size: 32px; /* Prominent Current Price */
	font-weight: 700;
	line-height: 1;
	color: #2a2d44; /* Dark Blue */
}

/* Meta: Guarantee & Badges */
.produk-detail-meta {
	display: flex;
	flex-direction: column; /* Stack vertically */
	gap: 10px;
	background: #f8f9fa;
	padding: 15px;
	border-radius: 8px;
	border: 1px solid #e9ecef;
}

.meta-item {
	font-size: 14px;
	color: #495057;
}

.badge-yes {
	color: #198754;
	font-weight: 600;
}

/* Specs */
.produk-detail-specs h3 {
	font-size: 18px;
	border-bottom: 2px solid #eee;
	padding-bottom: 10px;
	margin-bottom: 15px;
}

.produk-detail-specs ul {
	padding-left: 20px;
	margin: 0;
}

.produk-detail-specs li {
	margin-bottom: 8px;
	color: #555;
	line-height: 1.6;
}

/* Call to Action Buttons */
.produk-detail-actions {
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
	margin-top: 10px;
}

.produk-detail-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px 25px;
	border-radius: 50px;
	text-decoration: none;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	transition: all 0.3s ease;
	flex: 1; /* Equal width if flex default */
	min-width: 200px;
}

.btn-icon {
	width: 24px;
	height: 24px;
	object-fit: contain;
	/* Ensure icon color matches text if it were an inline SVG,
       but for img src we can't change color easily via CSS filter unless needed.
       Assuming the SVG is already brand colored. */
}

.btn-order {
	background-color: #2a2d44; /* Dark Theme Color */
	color: white;
	box-shadow: 0 4px 15px rgba(42, 45, 68, 0.3);
	border: 2px solid #2a2d44;
}

.btn-order:hover {
	background-color: #d99b12; /* Orange Accent */
	border-color: #d99b12;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(217, 155, 18, 0.4);
	color: white;
}

.btn-ask {
	background-color: transparent;
	color: #2a2d44;
	border: 2px solid #2a2d44;
	box-shadow: none;
}

.btn-ask:hover {
	background-color: #2a2d44;
	color: white;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(42, 45, 68, 0.2);
}
/* Invert icon color for dark buttons if needed, but usually white/colored icons work fine.
   If using the brand SVG which is likely green/colored, it might clash on dark background.
   We might need a white version or filter. */
.btn-order .btn-icon {
	filter: brightness(0) invert(1); /* Make White on Dark Button */
}
/* On hover ask button becomes dark, so icon should be white too */
.btn-ask:hover .btn-icon {
	filter: brightness(0) invert(1);
}

/* Responsive */
@media (max-width: 900px) {
	.produk-detail-wrapper {
		grid-template-columns: 1fr; /* Stack on mobile/tablet */
		gap: 30px;
	}

	.produk-detail-btn {
		width: 100%; /* Full width button on mobile */
		box-sizing: border-box;
		margin-bottom: 10px;
	}
}

/* =========================================
   Featured Products Carousel [produk_featured]
   ========================================= */

.produk-featured-section {
	padding: 60px 0;
	text-align: center;
	font-family: "Inter", sans-serif;
	max-width: 80rem;
	margin-left: auto;
	margin-right: auto;
}

/* Header */
.produk-featured-header {
	margin-bottom: 40px;
}

.produk-featured-subtitle {
	font-size: 18px;
	font-style: italic;
	color: #2a2d44;
	margin: 0 0 8px 0;
	opacity: 0.8;
}

.produk-featured-title {
	font-size: 36px;
	font-weight: 600;
	color: #2a2d44;
	margin: 0;
	position: relative;
	display: inline-block;
	font-family: "Sora", "Inter", sans-serif;
}

.produk-featured-title::after {
	content: "";
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	width: 100px;
	height: 4px;
	background: linear-gradient(90deg, #d99b12, #2a2d44);
	border-radius: 2px;
}

/* Slider Wrapper */
.produk-slider-wrapper {
	position: relative;
	max-width: 100%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Slider Container */
.produk-slider-container {
	overflow: hidden;
	width: 100%;
	position: relative;
}

/* Slider Track */
.produk-slider-track {
	display: flex;
	gap: 20px;
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	padding: 10px 0;
}

/* Navigation Buttons */
.produk-slider-nav {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: none;
	background: #2a2d44;
	color: white;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(42, 45, 68, 0.3);
	z-index: 10;
}

.produk-slider-nav:hover {
	background: #d99b12;
	transform: scale(1.1);
	box-shadow: 0 6px 20px rgba(217, 155, 18, 0.4);
}

.produk-slider-nav:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	transform: none;
}

.produk-slider-nav svg {
	width: 24px;
	height: 24px;
}

/* Slide Card */
.produk-slide {
	flex: 0 0 180px;
	min-width: 180px;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
	border: 1px solid #f0f0f0;
}

.produk-slide:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.produk-slide-link {
	text-decoration: none;
	color: inherit;
	display: block;
}

/* Slide Image */
.produk-slide-image {
	width: 100%;
	height: 160px;
	background: #f8f9fa;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 15px;
	box-sizing: border-box;
}

.produk-slide-image img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: transform 0.3s ease;
}

.produk-slide:hover .produk-slide-image img {
	transform: scale(1.05);
}

/* Slide Content */
.produk-slide-content {
	padding: 15px;
	text-align: left;
}

.produk-slide-category {
	display: block;
	font-size: 12px;
	color: #6c757d;
	margin-bottom: 6px;
	text-transform: capitalize;
}

.produk-slide-name {
	font-size: 14px;
	font-weight: 700;
	color: #2a2d44;
	margin: 0;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	min-height: 39px;
}

/* CTA Button */
.produk-featured-cta {
	margin-top: 40px;
}

.produk-featured-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 32px;
	background: #2a2d44;
	color: white;
	text-decoration: none;
	font-size: 16px;
	font-weight: 600;
	border-radius: 50px;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(42, 45, 68, 0.3);
}

.produk-featured-btn:hover {
	background: #d99b12;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(217, 155, 18, 0.4);
	color: white;
}

.produk-featured-btn svg {
	width: 20px;
	height: 20px;
}

/* Responsive */
@media (max-width: 1024px) {
	.produk-slide {
		flex: 0 0 160px;
		min-width: 160px;
	}

	.produk-slide-image {
		height: 140px;
	}
}

@media (max-width: 768px) {
	.produk-featured-section {
		padding: 40px 0;
	}

	.produk-featured-title {
		font-size: 28px;
	}

	.produk-slider-nav {
		width: 40px;
		height: 40px;
	}

	.produk-slider-nav svg {
		width: 20px;
		height: 20px;
	}

	.produk-slide {
		flex: 0 0 150px;
		min-width: 150px;
	}

	.produk-slide-image {
		height: 120px;
		padding: 10px;
	}

	.produk-slide-content {
		padding: 12px;
	}

	.produk-slide-name {
		font-size: 13px;
	}
}

@media (max-width: 480px) {
	.produk-featured-title {
		font-size: 24px;
	}

	.produk-slider-wrapper {
		gap: 5px;
	}

	.produk-slider-nav {
		width: 36px;
		height: 36px;
	}

	.produk-slide {
		flex: 0 0 140px;
		min-width: 140px;
	}

	.produk-featured-btn {
		padding: 12px 24px;
		font-size: 14px;
	}
}