/**
 * Halaman toko dan tombol beli untuk halaman penjualan.
 *
 * Berkas ini dimuat di halaman biasa milik tema, jadi tiap aturannya
 * ditulis cukup rinci supaya tidak tertimpa gaya tema.
 */

.hpc-toko {
	--hpc-navy: #032A51;
	--hpc-merah: #A41E22;
	--hpc-emas: #FFD700;
	--hpc-krem: #F5F4EF;
	--hpc-garis: #DFDDD5;
	--hpc-abu: #5B6673;
	--hpc-abu-2: #8A93A0;

	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	color: var(--hpc-navy);
}

/* Hero header halaman toko.

   Halaman toko memakai lebar isi milik tema, sedangkan hero di halaman lain
   di situs ini melebar penuh. Dua margin negatif di bawah menarik hero keluar
   dari pembungkus tema supaya lebarnya sama dengan hero halaman layanan. */

.hpc-toko-hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);

	/* Mengikuti pedoman halaman Kontak dan Layanan: tidak ada jarak di
	   ATAS hero sama sekali. Header tema mengambang, jadi jarak apa pun
	   di atas hero akan terbaca sebagai celah, dan celah itu berubah
	   ubah tergantung ada tidaknya bilah admin. Jaraknya dipindah ke
	   dalam hero sebagai padding, dan header dipaksa krem supaya
	   tulisannya tetap terbaca di atas navy. */
	margin-top: 0;
	margin-bottom: 56px;
	padding: 124px 24px 76px;
	background-color: var(--hpc-navy);
	background-image:
		repeating-linear-gradient(to right, rgba(255, 255, 255, .07) 0 1px, transparent 1px 64px),
		repeating-linear-gradient(to bottom, rgba(255, 255, 255, .07) 0 1px, transparent 1px 64px);
	background-position: center top;
	overflow: hidden;
}

.hpc-toko-hero-isi {
	max-width: 1300px;
	margin: 0 auto;
}

.hpc-toko-hero-garis {
	display: block;
	width: 56px;
	height: 3px;
	margin-bottom: 22px;
	background: var(--hpc-emas);
}

.hpc-toko-hero h1 {
	margin: 0 0 14px;
	font-family: inherit;
	font-size: 46px;
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -.5px;
	color: #FFFFFF;
}

.hpc-toko-hero p {
	margin: 0;
	max-width: 640px;
	font-size: 17px;
	line-height: 1.7;
	color: rgba(245, 244, 239, .82);
}

@media (max-width: 782px) {

	.hpc-toko-hero {
		margin-bottom: 40px;
		padding: 134px 20px 58px;
	}

	.hpc-toko-hero h1 {
		font-size: 32px;
	}

	.hpc-toko-hero p {
		font-size: 15.5px;
	}
}

.hpc-toko-kisi {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 26px;
}

.hpc-toko-kartu {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--hpc-garis);
	border-radius: 3px;
	background: #FFFFFF;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}

.hpc-toko-kartu:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 50px -30px rgba(3, 42, 81, .55);
}

.hpc-toko-gambar {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--hpc-krem);
	overflow: hidden;
}

/* Gambar produk ditampilkan utuh, bukan dipotong. Sampul buku yang
   tegak dan gambar kelas yang melebar sama sama muat. */
.hpc-toko-gambar img {
	width: 100%;
	height: 100%;
	padding: 14px;
	object-fit: contain;
	object-position: center;
	display: block;
}

.hpc-toko-kosong-gambar {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #062f57, #032A51);
}

.hpc-toko-jenis,
.hpc-toko-hemat {
	position: absolute;
	top: 12px;
	padding: 6px 10px;
	border-radius: 2px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	line-height: 1;
}

.hpc-toko-jenis {
	left: 12px;
	background: rgba(3, 42, 81, .92);
	color: #FFFFFF;
}

.hpc-toko-hemat {
	right: 12px;
	background: var(--hpc-merah);
	color: #FFFFFF;
}

.hpc-toko-isi {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 22px 20px 20px;
}

.hpc-toko-isi h2 {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: -.3px;
	color: var(--hpc-navy);
}

.hpc-toko-ringkas {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--hpc-abu);
}

.hpc-toko-jadwal {
	margin: 0 0 12px;
	padding: 8px 11px;
	border-left: 3px solid var(--hpc-emas);
	background: var(--hpc-krem);
	font-size: 13px;
	font-weight: 600;
	color: var(--hpc-navy);
}

.hpc-toko-harga {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-top: auto;
	padding-top: 14px;
}

.hpc-toko-harga s {
	font-size: 14px;
	color: var(--hpc-abu-2);
}

.hpc-toko-harga b {
	font-size: 24px;
	font-weight: 900;
	letter-spacing: -.8px;
	color: var(--hpc-navy);
}

.hpc-toko-kredit {
	margin: 5px 0 0;
	font-size: 12.5px;
	color: var(--hpc-abu);
}

.hpc-toko-tindakan {
	display: flex;
	gap: 9px;
	margin-top: 16px;
}

.hpc-toko a.hpc-toko-beli,
.hpc-toko a.hpc-toko-lihat {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 12px 18px;
	border-radius: 3px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}

.hpc-toko a.hpc-toko-beli {
	flex: 1;
	background: var(--hpc-merah);
	border: 2px solid var(--hpc-merah);
	color: #FFFFFF;
}

.hpc-toko a.hpc-toko-beli:hover {
	background: #7d1517;
	border-color: #7d1517;
	color: #FFFFFF;
}

.hpc-toko a.hpc-toko-lihat {
	background: transparent;
	border: 1px solid var(--hpc-garis);
	color: var(--hpc-navy);
}

.hpc-toko a.hpc-toko-lihat:hover {
	border-color: var(--hpc-navy);
}

.hpc-toko-kosong {
	padding: 60px 24px;
	border: 1px dashed var(--hpc-garis);
	border-radius: 3px;
	text-align: center;
	color: var(--hpc-abu);
}

.hpc-toko-kosong strong {
	display: block;
	margin-bottom: 6px;
	font-size: 17px;
	color: var(--hpc-navy);
}

/* ---------- Tombol beli untuk halaman penjualan ---------- */

.hpc-beli-blok {
	--hpc-navy: #032A51;
	--hpc-merah: #A41E22;
	--hpc-emas: #FFD700;

	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	text-align: center;
}

.hpc-beli-blok-harga {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 10px;
	margin-bottom: 14px;
}

.hpc-beli-blok-harga s {
	font-size: 15px;
	color: #a3b0bc;
	font-weight: 700;
}

.hpc-beli-blok-harga b {
	font-size: 34px;
	font-weight: 900;
	letter-spacing: -1.4px;
	line-height: 1;
	color: var(--hpc-navy);
}

.hpc-beli-blok a.hpc-beli-blok-tombol,
.hpc-beli-blok span.hpc-beli-blok-tombol {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	width: 100%;
	min-height: 60px;
	padding: 18px 28px;
	border: 0;
	border-radius: 3px;
	background: var(--hpc-merah);
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: .4px;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .2s ease, transform .2s ease;
}

.hpc-beli-blok a.hpc-beli-blok-tombol:hover {
	background: #7d1517;
	color: #FFFFFF;
	transform: translateY(-2px);
}

.hpc-beli-blok span.hpc-beli-blok-tombol--mati {
	background: #8A93A0;
	cursor: default;
}

.hpc-beli-blok--penuh a.hpc-beli-blok-tombol {
	width: 100%;
}

.hpc-beli-blok-kupon {
	margin: 11px 0 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: #137a4e;
}

.hpc-beli-blok-catatan {
	margin: 10px 0 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: #5B6673;
}

@media (max-width: 600px) {
	.hpc-toko-kisi {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	/* Di layar sempit tulisannya kerap pecah dua baris lalu berdesakan
	   dengan panah. Hurufnya dikecilkan, jarak dalamnya dirapatkan, dan
	   tulisan dibiarkan memakai satu baris utuh. */
	.hpc-beli-blok a.hpc-beli-blok-tombol,
	.hpc-beli-blok span.hpc-beli-blok-tombol {
		gap: 8px;
		min-height: 56px;
		padding: 14px 16px;
		font-size: 14px;
		letter-spacing: .2px;
		line-height: 1.35;
	}

	.hpc-beli-blok a.hpc-beli-blok-tombol span {
		min-width: 0;
	}
}

@media (max-width: 380px) {
	.hpc-beli-blok a.hpc-beli-blok-tombol,
	.hpc-beli-blok span.hpc-beli-blok-tombol {
		padding: 13px 12px;
		font-size: 13px;
	}
}

/* Kartu toko: seluruh badannya bisa diklik */

.hpc-toko-kartu {
	position: relative;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.hpc-toko-kartu:hover {
	transform: translateY(-3px);
	border-color: var(--hpc-navy);
	box-shadow: 0 24px 48px -34px rgba(3, 42, 81, .6);
}

.hpc-toko-selubung {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.hpc-toko-selubung:focus-visible {
	outline: 2px solid var(--hpc-navy);
	outline-offset: 3px;
}

/* Tombol tetap di atas lapisan tautan */

.hpc-toko-kartu .hpc-toko-aksi,
.hpc-toko-kartu .hpc-toko-aksi a,
.hpc-toko-kartu .hpc-toko-aksi button {
	position: relative;
	z-index: 2;
}

.hpc-toko-kartu:hover .hpc-toko-gambar img {
	transform: scale(1.03);
}

.hpc-toko-gambar img {
	transition: transform .35s ease;
}

/* Kisi toko: satu produk pun tetap enak dilihat */

.hpc-toko-kisi {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 24px;
	align-items: stretch;
}

@media (min-width: 1100px) {
	.hpc-toko-kisi {
		grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	}
}

/* Harga menyesuaikan dan harga mulai dari, dipakai produk layanan */

.hpc-toko-harga-awalan {
	margin-right: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--hpc-abu);
}

.hpc-toko-harga .hpc-toko-harga-sepakat {
	font-size: 19px;
	font-weight: 600;
	color: var(--hpc-navy);
}

/* Penilaian produk */

.hpc-bintang {
	display: inline-flex;
	gap: 2px;
	line-height: 1;
}

.hpc-bintang-satu {
	color: #C9CDD4;
	font-size: 16px;
}

.hpc-bintang-satu.isi {
	color: #FFD700;
}

.hpc-toko-nilai {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	font-size: 13px;
	color: #5A6472;
}

/* Pedoman yang sama dengan halaman Kontak dan Layanan.

   Jarak bawaan tema di atas isi halaman dinolkan, lalu header dipaksa
   tampil krem pekat supaya tulisan menu yang berwarna navy tetap terbaca
   di atas hero navy. Hanya berlaku di halaman yang memuat hero toko. */

body:has(.hpc-toko-hero) .entry-content,
body:has(.hpc-toko-hero) .ast-article-single,
body:has(.hpc-toko-hero) #primary,
body:has(.hpc-toko-hero) .site-content {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

body:has(.hpc-toko-hero) .site-content .ast-container,
body:has(.hpc-toko-hero).ast-page-builder-template .site-content > .ast-container {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

body:has(.hpc-toko-hero) .hpxh {
	background: rgba(245, 244, 239, .97) !important;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 10px 34px -20px rgba(3, 42, 81, .3) !important;
}