/* =====================================================================
   BW Catalogue Product
   Pure CSS - mode Grid (CSS Grid) & Carousel (CSS scroll-snap).
   Tanpa dependency Elementor/UAEL/jQuery/Slick.
   ===================================================================== */

.bw-catalogue {
	--bw-col-gap: 20px;
	--bw-row-gap: 35px;
	--bw-columns: 3;
	--bw-accent: #DCA54A;
	--bw-pad-top: 16px;
	--bw-pad-right: 18px;
	--bw-pad-bottom: 18px;
	--bw-pad-left: 18px;
	position: relative;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	overflow-x: clip;
}
.bw-catalogue *, .bw-catalogue *::before, .bw-catalogue *::after {
	box-sizing: border-box;
}

/* --- Card --- */
.bw-catalogue__card {
	margin: 0;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.bw-catalogue__card:hover {
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
	transform: translateY(-2px);
}

.bw-catalogue__card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

/* --- Thumbnail + hover swap ke gambar gallery --- */
.bw-catalogue__thumb {
	position: relative;
	border-radius: 12px 12px 0 0;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: #111;
}

.bw-catalogue__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.bw-catalogue__thumb .bw-img-main {
	position: relative;
	opacity: 1;
	z-index: 1;
}

.bw-catalogue__thumb .bw-img-hover {
	opacity: 0;
	z-index: 2;
}

.bw-catalogue__card:hover .bw-img-main {
	opacity: 0;
}

.bw-catalogue__card:hover .bw-img-hover {
	opacity: 1;
	transform: scale(1.04);
}

/* --- Body (kategori, judul, harga) --- */
.bw-catalogue__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: var(--bw-pad-top) var(--bw-pad-right) var(--bw-pad-bottom) var(--bw-pad-left);
}

.bw-catalogue__cat {
	color: var(--bw-accent);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2px;
	text-transform: capitalize;
	margin-bottom: 4px;
}

.bw-catalogue__title {
	color: #1a1a1a;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	margin: 0 0 10px 0;
	/* Batasi maksimal 2 baris, potong dengan ellipsis (...) kalau lebih panjang */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bw-catalogue__price {
	margin-top: auto;
	padding-top: 6px;
	font-size: 15px;
	font-weight: 600;
	color: var(--bw-accent);
}

.bw-catalogue__price del {
	opacity: 0.55;
	font-size: 0.85em;
	font-weight: 400;
	margin-right: 6px;
	color: #999;
}

.bw-catalogue__price ins {
	text-decoration: none;
	font-weight: 600;
	color: var(--bw-accent);
}

/* =====================================================================
   MODE: GRID
   ===================================================================== */
.bw-catalogue--grid .bw-catalogue__track {
	display: grid;
	grid-template-columns: repeat(var(--bw-columns), 1fr);
	column-gap: var(--bw-col-gap);
	row-gap: var(--bw-row-gap);
	list-style: none;
	margin: 0;
	padding: 0;
	/* Cegah bug klasik CSS Grid: item grid secara default punya
	   min-width:auto, artinya tidak bisa menyusut lebih kecil dari
	   ukuran konten aslinya (gambar produk 1080px dsb). Ini yang
	   bikin grid jadi lebih lebar dari viewport dan seluruh halaman
	   ikut overflow ke samping di mobile ("offside"). */
	min-width: 0;
}

.bw-catalogue--grid .bw-catalogue__card {
	min-width: 0;
}

/* =====================================================================
   MODE: CAROUSEL
   Native CSS scroll-snap, tanpa JS library eksternal.
   ===================================================================== */
.bw-catalogue--carousel {
	/* Nav ditempatkan DI LUAR track (lihat .bw-catalogue__nav di bawah),
	   jadi container tidak perlu padding kiri-kanan lagi - track jadi
	   full-width dan lega, tidak mepet. */
	padding: 0;
}

.bw-catalogue--carousel .bw-catalogue__track {
	display: flex;
	gap: var(--bw-col-gap);
	list-style: none;
	margin: 0;
	padding: 4px 4px 4px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;

	/* Sembunyikan scrollbar bawaan browser (tetap bisa di-scroll/swipe,
	   navigasi utama tetap lewat tombol panah / drag / swipe). */
	scrollbar-width: none;      /* Firefox */
	-ms-overflow-style: none;   /* IE/Edge lama */
}

.bw-catalogue--carousel .bw-catalogue__track::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Edge modern */
	height: 0;
}

.bw-catalogue--carousel .bw-catalogue__card {
	flex: 0 0 calc((100% - (var(--bw-col-gap) * (var(--bw-columns) - 1))) / var(--bw-columns));
	scroll-snap-align: start;
}

.bw-catalogue__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font-size: 13px;
	cursor: pointer;
	backdrop-filter: blur(2px);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, transform 0.2s ease;
}

.bw-catalogue__nav:hover {
	background: rgba(255, 255, 255, 0.18);
}

.bw-catalogue__nav:active {
	transform: translateY(-50%) scale(0.94);
}

/* DEFAULT (semua ukuran layar): nav nempel DI DALAM tepi track,
   supaya tidak pernah keluar dari container / memicu overflow
   horizontal, terutama di mobile. */
.bw-catalogue__nav--prev { left: 0; transform: translateY(-50%); }
.bw-catalogue__nav--next { right: 0; transform: translateY(-50%); }

.bw-catalogue__nav--prev:active { transform: translateY(-50%) scale(0.94); }
.bw-catalogue__nav--next:active { transform: translateY(-50%) scale(0.94); }

/* Hanya di layar besar (>1200px), nav didorong sedikit KELUAR dari
   tepi track supaya tidak menumpuk di atas card - aman karena di
   lebar segini biasanya masih ada ruang kosong di kiri-kanan konten. */
@media (min-width: 1201px) {
	.bw-catalogue__nav--prev { transform: translate(-120%, -50%); }
	.bw-catalogue__nav--next { transform: translate(120%, -50%); }
	.bw-catalogue__nav--prev:active { transform: translate(-120%, -50%) scale(0.94); }
	.bw-catalogue__nav--next:active { transform: translate(120%, -50%) scale(0.94); }
}

@media (max-width: 1200px) {
	.bw-catalogue--carousel {
		padding: 0 44px;
	}
}

.bw-catalogue__nav[disabled] {
	opacity: 0.3;
	cursor: default;
}

/* Varian nav gelap (untuk dipakai di section background gelap seperti
   referensi carousel). Aktifkan dengan class tambahan "bw-catalogue--dark-nav"
   pada shortcode via atribut nav_style="dark", atau tempel section Anda
   sendiri sudah gelap - default sekarang sudah cocok untuk section gelap. */
.bw-catalogue--light-nav .bw-catalogue__nav {
	background: #fff;
	color: #333;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.bw-catalogue--light-nav .bw-catalogue__nav:hover {
	background: #f5f5f5;
}

/* =====================================================================
   RESPONSIVE
   Desktop : sesuai atribut columns (default 3)
   Tablet  : 2 kartu terlihat
   Mobile  : 1 kartu terlihat
   ===================================================================== */
@media (max-width: 1024px) and (min-width: 768px) {
	.bw-catalogue {
		--bw-col-gap: 16px;
		--bw-row-gap: 28px;
	}
	.bw-catalogue--grid .bw-catalogue__track {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.bw-catalogue--grid .bw-catalogue__card {
		width: 100% !important;
		max-width: 100% !important;
	}
	.bw-catalogue--carousel .bw-catalogue__card {
		flex-basis: calc((100% - var(--bw-col-gap)) / 2) !important;
	}
}

@media (max-width: 767px) {
	.bw-catalogue {
		--bw-col-gap: 16px;
		--bw-row-gap: 20px;
	}
	.bw-catalogue--grid .bw-catalogue__track {
		grid-template-columns: 1fr !important;
	}
	.bw-catalogue--grid .bw-catalogue__card {
		width: 100% !important;
		max-width: 100% !important;
	}
	.bw-catalogue--carousel {
		padding: 0 8px;
	}
	.bw-catalogue--carousel .bw-catalogue__card {
		flex-basis: 100% !important;
	}
	.bw-catalogue__nav {
		width: 30px;
		height: 30px;
	}
}