/* ======================================================
   HALAMAN DETAIL PRODUK — tampilan modern & minimalis
   Semua style di bawah ini di-scope ke .pd-modern (hanya
   berlaku di halaman detail produk, tidak mempengaruhi
   halaman lain)
   ====================================================== */
.pd-modern, .pd-modern *{ box-sizing:border-box; }
.pd-modern{ color:#111; background:#fff; }

/* ---------- Breadcrumb ---------- */
.pd-modern .bread-crumb{
	font-size:12px;
	letter-spacing:.3px;
	color:#888;
	padding:18px 0 6px;
	border-bottom:1px solid #f0f0f0;
	margin-bottom:10px;
}
.pd-modern .bread-crumb a{
	color:#888 !important;
	background:none !important;
	-webkit-text-fill-color:#888 !important;
	font-weight:500;
}
.pd-modern .bread-crumb a:hover{
	color:#111 !important;
	-webkit-text-fill-color:#111 !important;
}
.pd-modern .bread-crumb > span{ color:#111; font-weight:600; }

/* ---------- Galeri gambar ---------- */
.pd-modern .prod-preview{
	background:#fafafa;
	border-radius:2px;
	overflow:hidden;
	margin-bottom:14px;
}
.pd-modern .prod-preview img{
	width:100%;
	height:auto;
	display:block;
	object-fit:cover;
}
.pd-modern .prod-thumb{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
}
.pd-modern .prod-thumb-item{
	width:72px;
	height:72px;
	background-color:#fafafa;
	background-size:cover;
	background-position:center;
	border-radius:2px;
	border:1px solid #eee;
	cursor:pointer;
	transition:border-color .2s ease, opacity .2s ease;
	opacity:.75;
}
.pd-modern .prod-thumb-item:hover,
.pd-modern .prod-thumb-item.active{
	border-color:#111;
	opacity:1;
}

/* ---------- Panel info produk ---------- */
.pd-modern .pd-panel{
	background:#fff;
	border:1px solid #eee;
	box-shadow:none;
	border-radius:2px;
	padding:28px;
}
.pd-modern .pd-title{
	font-size:22px;
	font-weight:600;
	line-height:1.35;
	color:#111;
	letter-spacing:.1px;
}
.pd-modern .pd-kategori-tag{
	display:inline-block;
	font-size:11px;
	text-transform:uppercase;
	letter-spacing:.6px;
	color:#888;
	margin-bottom:8px;
}

/* ---------- Harga ---------- */
.pd-modern .harga-coret{
	color:#aaa !important;
	text-decoration:line-through;
	font-weight:400;
	font-size:15px !important;
}
.pd-modern #hargacetak{
	color:#111 !important;
	font-weight:700;
	font-size:26px !important;
	letter-spacing:.2px;
}

/* ---------- Varian: warna & ukuran ---------- */
.pd-modern .pd-variant-label{
	font-size:12px;
	text-transform:uppercase;
	letter-spacing:.6px;
	color:#888;
	font-weight:600;
	margin-bottom:10px !important;
}
.pd-modern #pilihwarna .btn,
.pd-modern #pilihsize button{
	border-radius:2px !important;
	font-size:12px;
	text-transform:uppercase;
	letter-spacing:.4px;
	font-weight:600;
	padding:9px 18px !important;
}
.pd-modern #pilihwarna .btn.btn-outline-primary{
	border:1px solid #ddd !important;
	color:#111 !important;
	background:#fff !important;
}
.pd-modern #pilihwarna .btn.btn-primary{
	border:1px solid #111 !important;
	color:#fff !important;
	background:#111 !important;
}
.pd-modern #pilihsize button.btn-outline-success{
	border:1px solid #ddd !important;
	color:#111 !important;
	background:#fff !important;
}
.pd-modern #pilihsize button.btn-success{
	border:1px solid #111 !important;
	color:#fff !important;
	background:#111 !important;
}

/* ---------- Tombol aksi ---------- */
.pd-modern .btn-lg{
	border-radius:2px !important;
	font-size:13px !important;
	text-transform:uppercase;
	letter-spacing:.6px;
	font-weight:600;
	padding:14px 20px !important;
	box-shadow:none !important;
	background-image:none !important;
	transition:opacity .2s ease;
}
.pd-modern .btn-lg:hover{ opacity:.85; }
.pd-modern .btn-wish.btn-warning{
	background:#fff !important;
	border:1px solid #111 !important;
	color:#111 !important;
}
.pd-modern .btn-success{
	background:#fff !important;
	border:1px solid #ddd !important;
	color:#111 !important;
}
.pd-modern #submit.btn-primary{
	background:#111 !important;
	border:1px solid #111 !important;
	color:#fff !important;
}
.pd-modern .bg-warning{ border-radius:2px; }

/* ---------- Bagikan ---------- */
.pd-modern .sharer .font-medium{
	font-size:12px;
	text-transform:uppercase;
	letter-spacing:.6px;
	color:#888;
	font-weight:600;
}
.pd-modern .sharer .btn{
	border-radius:2px !important;
	width:38px;
	height:38px;
	padding:0 !important;
	display:inline-flex;
	align-items:center;
	justify-content:center;
}

/* ---------- Deskripsi & ulasan ---------- */
.pd-modern .wrap-dropdown-content .section{
	background:#fff;
	border:1px solid #eee;
	box-shadow:none;
	border-radius:2px;
	padding:24px;
}
.pd-modern .js-toggle-dropdown-content{
	font-size:13px !important;
	text-transform:uppercase;
	letter-spacing:.6px;
	color:#111 !important;
	background:none !important;
	-webkit-text-fill-color:#111 !important;
	font-weight:700 !important;
	border-bottom:1px solid #f0f0f0;
	padding-bottom:14px;
}
.pd-modern .dropdown-content p{
	color:#444;
	font-size:14px;
	line-height:1.7;
}
.pd-modern .ulasan{
	border-bottom:1px solid #f5f5f5;
	padding-bottom:14px;
}

/* ---------- Produk terkait ---------- */
.pd-modern .sec-relate-product h3{
	font-size:16px;
	text-transform:uppercase;
	letter-spacing:1px;
	font-weight:700;
	color:#111 !important;
	background:none !important;
	-webkit-text-fill-color:#111 !important;
}

/* ======================================================
   NOTIFIKASI (SweetAlert2) — gaya modern & minimalis
   CSS ini hanya ter-load di halaman detail produk, jadi
   popup di halaman lain tidak terpengaruh.
   ====================================================== */
.swal2-popup{
	border-radius:2px !important;
	box-shadow:0 4px 28px rgba(0,0,0,.14) !important;
	border:1px solid #eee;
	padding:2em 1.6em !important;
	font-family:inherit !important;
}
.swal2-title{
	font-size:20px !important;
	font-weight:700 !important;
	color:#111 !important;
	padding:.4em 0 .2em !important;
}
.swal2-html-container{
	font-size:14px !important;
	line-height:1.6 !important;
	color:#666 !important;
}

/* Icon dibuat monokrom, senada dengan tema hitam-putih */
.swal2-icon{
	border-width:2px !important;
	transform:scale(.8);
	margin:1.4em auto .6em;
}
.swal2-icon.swal2-warning{
	border-color:#111 !important;
	color:#111 !important;
}
.swal2-icon.swal2-error{
	border-color:#111 !important;
	color:#111 !important;
}
.swal2-icon.swal2-error [class^='swal2-x-mark-line']{
	background-color:#111 !important;
}
.swal2-icon.swal2-success{ border-color:#111 !important; }
.swal2-icon.swal2-success .swal2-success-ring{ border-color:#111 !important; }
.swal2-icon.swal2-success [class^='swal2-success-line']{ background-color:#111 !important; }
.swal2-icon.swal2-success .swal2-success-fix{ background-color:transparent !important; }
.swal2-icon.swal2-info{ border-color:#111 !important; color:#111 !important; }
.swal2-icon.swal2-question{ border-color:#111 !important; color:#111 !important; }

/* Tombol */
.swal2-actions{ gap:10px; margin-top:1.6em !important; }
.swal2-styled{
	border-radius:2px !important;
	box-shadow:none !important;
	font-size:12px !important;
	text-transform:uppercase;
	letter-spacing:.6px;
	font-weight:600 !important;
	padding:11px 30px !important;
	transition:opacity .2s ease;
}
.swal2-styled:hover{ opacity:.85; }
.swal2-styled.swal2-confirm{
	background:#111 !important;
	color:#fff !important;
}
.swal2-styled.swal2-cancel{
	background:#fff !important;
	color:#111 !important;
	border:1px solid #ddd !important;
}
.swal2-styled:focus{ box-shadow:none !important; }
.swal2-close{ color:#999 !important; }
.swal2-close:hover{ color:#111 !important; }
.swal2-timer-progress-bar{ background:#111 !important; }