/*
 * PGJ Dynamic Shop Header
 * Scope dibuat sempit agar tidak mengubah product grid/homepage WooCommerce.
 */

/*
 * Astra brand repair:
 * target referensi memakai logo saja di kiri. Menyembunyikan teks Site Title
 * mencegah "Pusat Grosir Jakarta" menyusut menjadi beberapa huruf per baris
 * ketika kategori + search memenuhi header.
 */
#ast-desktop-header .site-title,
#ast-desktop-header .site-description {
	display: none !important;
}

#ast-desktop-header .ast-site-identity {
	padding-top: 0;
	padding-bottom: 0;
	flex: 0 0 auto;
}

#ast-desktop-header .site-branding,
#ast-desktop-header .ast-site-identity,
#ast-desktop-header .custom-logo-link {
	flex-shrink: 0;
}

#ast-desktop-header .custom-logo-link img {
	display: block;
	width: auto;
	max-height: 46px;
	object-fit: contain;
}

#ast-desktop-header .ast-builder-grid-row,
#ast-desktop-header .site-header-primary-section-left,
#ast-desktop-header .site-header-primary-section-right {
	align-items: center;
}


#ast-desktop-header .main-header-menu {
	align-items: center;
	gap: 2px;
	flex-wrap: nowrap;
}

#ast-desktop-header .main-header-menu > .menu-item > .menu-link {
	white-space: nowrap;
}

#ast-desktop-header .pgj-all-products > .menu-link,
#ast-desktop-header .pgj-product-cat > .menu-link,
#ast-desktop-header .pgj-more-item > .menu-link {
	padding-left: 10px;
	padding-right: 10px;
	font-size: 13px;
	font-weight: 600;
}

#ast-desktop-header .pgj-search-item {
	display: flex;
	align-items: center;
	margin-left: 8px;
}

.pgj-product-search {
	width: clamp(200px, 19vw, 250px);
	height: 42px;
	display: flex;
	align-items: center;
	border: 1px solid #d9dee7;
	border-radius: 9px;
	background: #fff;
	overflow: hidden;
}

.pgj-product-search:focus-within {
	border-color: #8a94a6;
	box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.07);
}

.pgj-product-search input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0 8px 0 14px;
	border: 0 !important;
	outline: 0;
	box-shadow: none !important;
	background: transparent;
	font-size: 14px;
}

.pgj-product-search button {
	width: 42px;
	height: 42px;
	margin: 0;
	padding: 10px;
	display: grid;
	place-items: center;
	border: 0;
	background: transparent;
	color: #0f172a;
	cursor: pointer;
}

.pgj-product-search button:hover,
.pgj-product-search button:focus {
	background: #f8fafc;
	color: #0f172a;
}

.pgj-product-search button svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

#ast-desktop-header .pgj-icon-item > .menu-link {
	position: relative;
	min-width: 44px;
	height: 44px;
	padding: 10px !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.pgj-header-icon {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.pgj-cart-count {
	position: absolute;
	top: 3px;
	right: 1px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: #111827;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

.pgj-cart-count.is-empty {
	display: none;
}

.pgj-more-item > .sub-menu {
	min-width: 210px;
}

.pgj-more-item > .sub-menu .menu-link {
	white-space: normal;
}

.main-header-menu .pgj-product-cat.current-menu-item > .menu-link {
	font-weight: 700;
}

/* Astra mobile / tablet header */
.ast-header-break-point .main-header-menu .pgj-search-item {
	padding: 10px 20px;
}

.ast-header-break-point .pgj-product-search {
	width: 100%;
	max-width: none;
}

.ast-header-break-point .main-header-menu .pgj-icon-item > .menu-link {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	min-height: 46px;
}

.ast-header-break-point .main-header-menu .pgj-cart-item > .menu-link::after {
	content: "Keranjang";
	margin-left: 8px;
}

.ast-header-break-point .main-header-menu .pgj-account-item > .menu-link::after {
	content: "Akun";
	margin-left: 8px;
}

.ast-header-break-point .pgj-cart-count {
	position: static;
	margin-left: auto;
}

@media (min-width: 922px) and (max-width: 1180px) {
	#ast-desktop-header .pgj-all-products > .menu-link,
	#ast-desktop-header .pgj-product-cat > .menu-link,
	#ast-desktop-header .pgj-more-item > .menu-link {
		padding-left: 8px;
		padding-right: 8px;
		font-size: 13px;
	}

	.pgj-product-search {
		width: 180px;
	}
}


@media (min-width: 922px) and (max-width: 1320px) {
	#ast-desktop-header .pgj-all-products > .menu-link,
	#ast-desktop-header .pgj-product-cat > .menu-link,
	#ast-desktop-header .pgj-more-item > .menu-link {
		padding-left: 7px;
		padding-right: 7px;
		font-size: 12px;
	}

	#ast-desktop-header .pgj-search-item {
		margin-left: 4px;
	}

	.pgj-product-search {
		width: 215px;
	}
}


/*
 * Product card title: maksimal 3 baris.
 * Judul asli tetap utuh di HTML; hanya tampilan visual yang dipotong.
 * Min-height 3 baris menjaga harga/tombol antar kartu lebih sejajar.
 */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	line-height: 1.35;
	min-height: 4.05em;
	max-height: 4.05em;
	margin-bottom: 0.55em;
	word-break: normal;
	overflow-wrap: anywhere;
}

/*
 * Desktop (>= 1280px, kolom 285px): kartu hanya memesan 2 baris judul, bukan 3, supaya jarak judul
 * ke harga tidak terlalu lebar. Di lebar ini tidak ada judul produk yang sampai 3 baris (dicek pada
 * 164 produk, 3 Nov 2026), jadi harga/tombol tetap sejajar. Di bawah 1280px (tablet, laptop kecil, HP)
 * kolom lebih sempit dan ada judul 3 baris, jadi tetap memesan 3 baris. max-height 3 baris tetap.
 */
@media (min-width: 1280px) {
	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
		min-height: 2.7em;
	}
}


/*
 * Single product variation picker:
 * tampilkan semua opsi sebagai tombol, bukan dropdown.
 * Select asli tetap ada (visually hidden) agar mekanisme variasi WooCommerce tetap native.
 */
.single-product form.variations_form .pgj-native-variation-select {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.single-product form.variations_form .pgj-variation-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
	margin-top: 4px;
}

.single-product form.variations_form .pgj-variation-option {
	min-height: 38px;
	padding: 8px 13px;
	border: 1px solid #cfd6df;
	border-radius: 6px;
	background: #fff;
	color: #172033;
	font: inherit;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.single-product form.variations_form .pgj-variation-option:hover:not(:disabled) {
	border-color: #0875d1;
}

.single-product form.variations_form .pgj-variation-option.is-selected {
	border-color: #0875d1;
	background: #eef6ff;
	box-shadow: inset 0 0 0 1px #0875d1;
	font-weight: 600;
}

.single-product form.variations_form .pgj-variation-option.is-disabled,
.single-product form.variations_form .pgj-variation-option:disabled {
	opacity: .42;
	cursor: not-allowed;
	text-decoration: line-through;
}

.single-product form.variations_form table.variations td.value {
	position: relative;
}

@media (max-width: 544px) {
	.single-product form.variations_form .pgj-variation-options {
		gap: 7px;
	}

	.single-product form.variations_form .pgj-variation-option {
		padding: 8px 11px;
		font-size: 13px;
	}
}


/*
 * PGJ Live Chat
 * Default collapsed di kanan bawah agar tidak menutupi produk.
 */
.pgj-live-chat {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 9999;
	font-family: inherit;
}

.pgj-chat-toggle {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 48px;
	padding: 0 18px;
	border: 0;
	border-radius: 999px;
	background: #1f1f1f;
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

.pgj-chat-toggle:hover,
.pgj-chat-toggle:focus {
	background: #111;
	color: #fff;
}

.pgj-chat-toggle-icon {
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #343434;
	font-size: 13px;
}

.pgj-chat-panel {
	position: absolute;
	right: 0;
	bottom: 60px;
	width: 320px;
	overflow: hidden;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 18px 45px rgba(15, 23, 42, .2);
}

.pgj-chat-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 15px 16px;
	background: #087267;
	color: #fff;
}

.pgj-chat-head strong,
.pgj-chat-head span {
	display: block;
}

.pgj-chat-head strong {
	font-size: 14px;
	line-height: 1.25;
}

.pgj-chat-head span {
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.3;
	opacity: .95;
}

.pgj-chat-close {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.pgj-chat-admins {
	background: #fff;
}

.pgj-chat-admin {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 16px;
	border-bottom: 1px solid #e6e9ee;
	color: #1f2937;
	text-decoration: none !important;
}

.pgj-chat-admin:last-child {
	border-bottom: 0;
}

.pgj-chat-admin:hover {
	background: #f8fafc;
	color: #111827;
}

.pgj-chat-avatar {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #19bb85;
	color: #fff;
	font-weight: 700;
}

.pgj-chat-copy {
	flex: 1;
	min-width: 0;
}

.pgj-chat-copy strong,
.pgj-chat-copy small {
	display: block;
}

.pgj-chat-copy strong {
	font-size: 14px;
	line-height: 1.25;
}

.pgj-chat-copy small {
	margin-top: 3px;
	color: #7b8492;
	font-size: 12px;
}

.pgj-chat-wa {
	flex: 0 0 auto;
	color: #18c982;
	font-size: 18px;
}

@media (max-width: 544px) {
	.pgj-live-chat {
		right: 12px;
		bottom: 14px;
	}

	.pgj-chat-panel {
		width: min(320px, calc(100vw - 24px));
	}

	.pgj-chat-toggle {
		min-height: 46px;
		padding: 0 15px;
	}
}

/*
 * Tombol "Tanya Admin via WA" di halaman produk (diarahkan ke Admin 1).
 */
.pgj-product-wa-button {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 width: 100%;
 min-height: 46px;
 margin-top: 12px;
 padding: 0 18px;
 border-radius: 8px;
 background: #19bb85;
 color: #fff !important;
 font-weight: 700;
 text-align: center;
 text-decoration: none !important;
}

.pgj-product-wa-button:hover,
.pgj-product-wa-button:focus {
 background: #139e71;
 color: #fff !important;
}