/* =========================================================
   BINAMADANI KATALOG BUKU — STYLE v2
   Palet: navy akademik + amber aksen (mengikuti desain awal Binamadani Press)
   Dipakai bersama di: grid katalog [katalog_buku] & halaman detail [detail_buku]
   ========================================================= */

:root {
	--bmk-navy: #1e3a8a;
	--bmk-navy2: #1e293b;
	--bmk-amber: #b45309;
	--bmk-amberbg: #fef3c7;
	--bmk-line: #e5e7eb;
	--bmk-muted: #64748b;
	--bmk-ink: #0f172a;
	--bmk-font: 'Plus Jakarta Sans', system-ui, 'Segoe UI', Roboto, sans-serif;
}

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* =========================================================
   GRID KATALOG — [katalog_buku]
   ========================================================= */
.bmk-catalog-wrap {
	font-family: var(--bmk-font);
	color: var(--bmk-ink);
	max-width: 1180px;
	margin: 0 auto;
	padding: 32px 16px 64px;
}

.bmk-catalog-header { text-align: center; margin-bottom: 36px; }

.bmk-cart-indicator {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 16px;
}
.bmk-cart-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--bmk-line);
	border-radius: 999px;
	padding: 8px 16px;
	text-decoration: none;
	color: var(--bmk-navy2);
	font-size: 13.5px;
	font-weight: 600;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bmk-cart-link:hover {
	border-color: var(--bmk-navy);
	box-shadow: 0 2px 10px rgba(30, 58, 138, 0.12);
}
.bmk-cart-icon {
	font-size: 16px;
	line-height: 1;
	position: relative;
	display: inline-flex;
}
.bmk-cart-count {
	background: #e11d48;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	min-width: 18px;
	height: 18px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
	transition: transform 0.2s ease;
	box-shadow: 0 1px 4px rgba(225,29,72,0.35);
}
.bmk-cart-count.bmk-pulse { transform: scale(1.4); }
.bmk-cart-count[data-count="0"] { display: none; }

/* Badge merah untuk ikon keranjang di header/navbar WooCommerce (tema apapun) */
.bmk-wc-cart-badge-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
}
.bmk-wc-cart-badge {
	position: absolute;
	top: -7px;
	right: -9px;
	background: #e11d48;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	min-width: 17px;
	height: 17px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
	line-height: 1;
	box-shadow: 0 1px 4px rgba(225,29,72,0.35);
	pointer-events: none;
	transition: transform 0.2s ease;
}
.bmk-wc-cart-badge.bmk-pulse { transform: scale(1.4); }
.bmk-wc-cart-badge[data-count="0"] { display: none; }

.bmk-catalog-eyebrow {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.3px;
	color: var(--bmk-amber);
	background: var(--bmk-amberbg);
	padding: 6px 14px;
	border-radius: 999px;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.bmk-catalog-title {
	font-size: clamp(26px, 4vw, 36px);
	font-weight: 800;
	color: var(--bmk-navy2);
	margin: 0 0 10px;
}

.bmk-catalog-subtitle {
	font-size: 15px;
	color: var(--bmk-muted);
	max-width: 560px;
	margin: 0 auto;
	line-height: 1.6;
}

.bmk-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	margin-bottom: 28px;
}

.bmk-search-input, .bmk-sort-select {
	padding: 11px 16px;
	border: 1px solid var(--bmk-line);
	border-radius: 12px;
	font-size: 14px;
	font-family: var(--bmk-font);
	background: #fff;
	color: var(--bmk-ink);
}
.bmk-search-input { flex: 1 1 260px; }
.bmk-search-input:focus, .bmk-sort-select:focus {
	outline: 2px solid var(--bmk-navy);
	outline-offset: 1px;
	border-color: var(--bmk-navy);
}

.bmk-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 28px;
}

.bmk-card {
	background: #fff;
	border: 1px solid var(--bmk-line);
	border-radius: 18px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.bmk-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(30, 58, 138, 0.14); }

.bmk-card-cover {
	position: relative;
	aspect-ratio: 3 / 4;
	background: linear-gradient(160deg, #f1f5f9, #e2e8f0);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
}
.bmk-card-cover img {
	width: 100%; height: 100%; object-fit: cover;
	border-radius: 10px;
	box-shadow: 0 12px 26px rgba(30, 58, 138, 0.22);
	display: block;
}
.bmk-card-cover-placeholder {
	font-size: 13px; color: var(--bmk-muted); text-align: center;
}

.bmk-stock-badge {
	position: absolute; top: 10px; left: 10px;
	font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
	text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
	background: var(--bmk-navy); color: #fff;
}
.bmk-stock-badge.bmk-out { background: #94a3b8; }

.bmk-card-body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }

.bmk-card-title { font-size: 16.5px; font-weight: 800; line-height: 1.3; color: var(--bmk-navy2); margin: 0 0 4px; }
.bmk-card-author { font-size: 12.5px; color: var(--bmk-muted); margin: 0 0 10px; }

.bmk-card-meta { font-size: 12px; color: var(--bmk-muted); display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 10px; }

.bmk-isbn-proses {
	display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.2px;
	text-transform: uppercase; color: var(--bmk-amber); background: var(--bmk-amberbg);
	border-radius: 999px; padding: 3px 10px;
}

.bmk-card-sinopsis {
	font-size: 13px; line-height: 1.55; color: #334155; margin: 0 0 14px;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.bmk-card-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bmk-card-price { font-size: 17px; font-weight: 800; color: var(--bmk-navy); }

.bmk-card-btn {
	background: var(--bmk-navy); color: #fff; border: none; border-radius: 10px;
	padding: 9px 16px; font-size: 13px; font-weight: 700; font-family: var(--bmk-font);
	cursor: pointer; transition: background 0.15s ease; white-space: nowrap;
}
.bmk-card-btn:hover { background: var(--bmk-navy2); }
.bmk-card-btn:disabled { background: #cbd5e1; cursor: not-allowed; }
.bmk-card-btn:focus-visible { outline: 2px solid var(--bmk-amber); outline-offset: 2px; }

.bmk-empty-state { text-align: center; padding: 60px 20px; color: var(--bmk-muted); }
.bmk-empty-state h3 { color: var(--bmk-navy2); margin-bottom: 8px; }

@media (max-width: 600px) {
	.bmk-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
	.bmk-card-title { font-size: 14.5px; }
	.bmk-toolbar { flex-direction: column; align-items: stretch; }
	.bmk-cart-indicator { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.bmk-card { transition: none; }
	.bmk-card:hover { transform: none; }
	.bmk-cart-count { transition: none; }
	.bmk-cart-count.bmk-pulse { transform: none; }
}

/* =========================================================
   HALAMAN DETAIL BUKU — [detail_buku] / single product
   ========================================================= */
.ibi-buku {
	font-family: var(--bmk-font);
	color: var(--bmk-ink);
	max-width: 980px;
	margin: 32px auto;
	padding: 0 16px;
	container-type: inline-size;
}

.ibi-buku .card {
	background: #fff; border: 1px solid var(--bmk-line); border-radius: 22px;
	box-shadow: 0 12px 40px rgba(15, 23, 42, 0.06);
	overflow: hidden; display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
}

/* Saat kontainer sempit (mis. tema dengan sidebar), tumpuk vertikal otomatis. */
@container (max-width: 640px) {
	.ibi-buku .card { grid-template-columns: 1fr; }
}

.ibi-buku .cover-wrap {
	background: linear-gradient(160deg, #f1f5f9, #e2e8f0);
	padding: 36px 28px; display: flex; align-items: flex-start; justify-content: center;
	min-width: 0;
}
.ibi-buku .cover-wrap img {
	width: 100%; max-width: 240px; aspect-ratio: 3/4; object-fit: cover;
	border-radius: 14px; box-shadow: 0 16px 36px rgba(30, 58, 138, 0.28);
}
.ibi-buku .cover-placeholder {
	width: 100%; max-width: 240px; aspect-ratio: 3/4; border-radius: 14px;
	background: #e2e8f0; display: flex; align-items: center; justify-content: center;
	color: var(--bmk-muted); font-size: 13px; text-align: center; padding: 16px;
}

.ibi-buku .detail { padding: 40px; }

.ibi-buku .badge {
	display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.3px;
	color: var(--bmk-amber); background: var(--bmk-amberbg);
	padding: 6px 14px; border-radius: 999px; text-transform: uppercase; margin: 0 0 6px;
}
.ibi-buku .badge.terbit { color: #166534; background: #dcfce7; }

.ibi-buku h1 { font-size: 28px; font-weight: 800; line-height: 1.25; margin: 14px 0 6px; color: var(--bmk-navy2); }
.ibi-buku .penulis { color: var(--bmk-muted); font-size: 15.5px; margin: 0; }
.ibi-buku .penulis strong { color: var(--bmk-navy); }

.ibi-buku .meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 24px 0; }
.ibi-buku .box { background: #f8fafc; border: 1px solid var(--bmk-line); border-radius: 14px; padding: 14px 16px; }
.ibi-buku .box .label { font-size: 12px; color: var(--bmk-muted); text-transform: uppercase; letter-spacing: 0.4px; margin: 0; }
.ibi-buku .box .value { font-size: 17px; font-weight: 700; margin: 3px 0 0; }
.ibi-buku .box .value.harga { color: var(--bmk-navy); }

.ibi-buku .stok-row { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; font-size: 13.5px; color: var(--bmk-muted); }
.ibi-buku .stok-dot { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; }
.ibi-buku .stok-dot.habis { background: #ef4444; }

.ibi-buku .beli-row { display: flex; align-items: center; gap: 12px; margin: 0 0 26px; }
.ibi-buku .beli-btn {
	background: var(--bmk-navy); color: #fff; border: none; border-radius: 12px;
	padding: 13px 28px; font-size: 14.5px; font-weight: 700; font-family: var(--bmk-font);
	cursor: pointer; transition: background 0.15s ease;
}
.ibi-buku .beli-btn:hover { background: var(--bmk-navy2); }
.ibi-buku .beli-btn:disabled { background: #cbd5e1; cursor: not-allowed; }

.ibi-buku .sinopsis-judul { font-size: 14px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--bmk-navy); font-weight: 700; margin: 6px 0 8px; }
.ibi-buku .sinopsis-teks { margin: 0; color: #334155; text-align: justify; line-height: 1.65; }

.ibi-buku .foot { margin: 26px 0 0; padding-top: 18px; border-top: 1px dashed var(--bmk-line); font-size: 12.5px; color: var(--bmk-muted); }
.ibi-buku .foot strong { color: var(--bmk-navy2); }

@container (max-width: 640px) {
	.ibi-buku .cover-wrap { padding: 28px; }
	.ibi-buku .cover-wrap img, .ibi-buku .cover-placeholder { max-width: 200px; }
	.ibi-buku .detail { padding: 26px 22px; }
	.ibi-buku h1 { font-size: 23px; }
}
@container (max-width: 420px) {
	.ibi-buku .meta { grid-template-columns: 1fr; }
	.ibi-buku .beli-row { flex-direction: column; align-items: stretch; }
}
/* Fallback untuk browser tanpa dukungan container query (jarang, tapi aman). */
@supports not (container-type: inline-size) {
	@media (max-width: 781px) {
		.ibi-buku .card { grid-template-columns: 1fr; }
		.ibi-buku .cover-wrap { padding: 28px; }
		.ibi-buku .cover-wrap img, .ibi-buku .cover-placeholder { max-width: 200px; }
		.ibi-buku .detail { padding: 26px 22px; }
		.ibi-buku h1 { font-size: 23px; }
	}
	@media (max-width: 460px) {
		.ibi-buku .meta { grid-template-columns: 1fr; }
	}
}

/* =========================================================
   SEMBUNYIKAN SIDEBAR TEMA DI HALAMAN SINGLE PRODUCT
   Supaya kartu buku tampil lega, bukan terjepit widget bawaan.
   Selector mencakup pola umum tema WordPress; aman jika sebagian tidak match.
   ========================================================= */
body.bmk-full-width-product #secondary,
body.bmk-full-width-product .sidebar,
body.bmk-full-width-product .widget-area,
body.bmk-full-width-product aside.sidebar,
body.bmk-full-width-product .col-sidebar {
	display: none !important;
}
body.bmk-full-width-product #primary,
body.bmk-full-width-product .content-area,
body.bmk-full-width-product .site-main {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
}