.woocommerce-info[role="status"] {
  border-left-width: 4px !important;
  border-left-style: solid !important;
}

.woocommerce-checkout input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0 6px 0 0;
  border-width: 1px;
  border-style: solid;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  flex-shrink: 0;
}

.woocommerce-checkout input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border-style: solid;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

#g9topnavbg {
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  box-sizing: border-box !important;
}

.g9-tabs-wrapper {
  max-width: 1000px;
  margin: 2rem auto 0;
  padding: 0 16px;
}

.g9-controls-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}

.g9-controls-bar:empty {
  display: none;
  margin-bottom: 0;
}

.g9-family-select {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 220px;
}

.g9-family-select select {
  padding: 0.6rem 0.9rem;
  border-style: none;
  border-radius: 8px;
  cursor: pointer;
}

.g9-axis-panel {
  display: none;
  flex-direction: column;
  gap: 0.9rem;
  flex: 1 1 260px;
  border-width: 1px;
  border-style: solid;
  border-radius: 12px;
  padding: 1rem 1.25rem;
}

.g9-axis-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.g9-axis-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.g9-axis-row input[type="range"] {
  width: 100%;
}

.g9-axis-note {
  line-height: 1.5;
  border-top-width: 1px;
  border-top-style: solid;
  padding-top: 0.6rem;
}

.g9-tabs-nav {
  display: flex;
  gap: 4px;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.g9-tabs-nav button {
  padding: 10px 20px;
  cursor: pointer;
  border-style: none;
  border-bottom-width: 3px;
  border-bottom-style: solid;
}

.g9-tab-panel {
  display: none;
  padding: 1.5rem 0;
  line-height: 1.7;
}

.g9-tab-panel.is-active {
  display: block;
}

.g9-glyph-status,
.g9-loading-status {
  padding: 2rem 1rem;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  border-radius: 12px;
}

.g9-font-tester {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.g9-font-tester input {
  padding: 0.7rem 1rem;
  border-style: none;
  border-radius: 8px;
}

.g9-font-tester .preview {
  line-height: 1.25;
  padding: 1.25rem;
  border-width: 1px;
  border-style: solid;
  border-radius: 8px;
  min-height: 96px;
  word-break: break-word;
}

.g9-showcase {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.g9-showcase .example-block {
  border-width: 1px;
  border-style: solid;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
}

.g9-showcase .example-block h3 {
  margin: 0 0 0.85rem 0;
}

.g9-showcase .example-block .label-chip {
  display: inline-block;
  border-width: 1px;
  border-style: solid;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}

.g9-showcase .example-block .font-preview {
  line-height: 1.45;
  word-break: break-word;
}

.g9-glyph-section {
  margin-bottom: 1.75rem;
}

.g9-glyph-section h3 {
  margin: 0 0 0.6rem 0;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  padding-bottom: 0.4rem;
}

.g9-glyph-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 6px;
  padding: 1rem;
  border-radius: 12px;
  border-width: 1px;
  border-style: solid;
}

.g9-glyph-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  border-radius: 6px;
  border-width: 1px;
  border-style: solid;
  cursor: pointer;
  text-align: center;
  min-height: 68px;
  overflow: hidden;
}

.g9-glyph-item:hover {
  transform: scale(1.05);
}

.g9-glyph-item .char {
  line-height: 1.2;
}

.g9-glyph-svg {
  width: 28px;
  height: 28px;
}

.g9-glyph-item .gname {
  margin-top: 2px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.g9-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 24px;
  border-radius: 20px;
  pointer-events: none;
  z-index: 9999;
}

@media (max-width: 480px) {
.g9-controls-bar {
  flex-direction: column;
}

.g9-tabs-nav {
  flex-direction: column;
  align-items: stretch;
}

.g9-tabs-nav button {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  text-align: center;
}

.g9-glyph-grid {
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
}
}

.woocommerce-checkout .woocommerce-checkout-review-order-table th {
  width: 65% !important;
  text-align: left !important;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table td {
  width: 35% !important;
  text-align: right !important;
  white-space: nowrap !important;
  padding-right: 18px !important;
}

.woocommerce-checkout .fee th {
  padding: 9px 0px 18px 18px !important;
}

.woocommerce-checkout .fee td {
  padding: 0px 18px 18px 18px !important;
}

#payment li {
  padding: 14px 18px !important;
  margin-bottom: 12px !important;
  border-bottom-style: none !important;
  border-radius: 8px !important;
}

.quantity input.qty,
input.qty {
  border-style: none !important;
}

.woocommerce button.button,
.woocommerce-cart .woocommerce button:not(.coupon button),
.woocommerce-checkout .woocommerce button:not(.coupon button),
.g9checkoutpaymentinner button,
.g9checkoutlogingroup .woocommerce-form-login__submit,
.g9checkoutlogingroup .woocommerce-form-coupon button,
#place_order {
  border-style: none !important;
}

.type-product {
  grid-template-columns: 66% 28% !important;
  grid-column-gap: 6% !important;
}

.g9-glyph-item {
  min-height: 92px !important;
  padding: 14px 6px !important;
}

.g9-glyph-svg {
  width: 44px !important;
  height: 44px !important;
}

.g9-glyph-grid {
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)) !important;
}

.summaryinner .product_title {
  margin-bottom: .4rem !important;
  line-height: 1.25 !important;
}

.summaryinner .storeico {
  float: left;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  margin-right: .6rem;
}

.summaryinner .storenick {
  display: block;
  overflow: hidden;
  margin-bottom: 1.1rem;
  line-height: 1.6;
}

.summaryinner .storenick span[style*="font-size"] {
  display: block;
  margin-top: .2rem;
}

.summaryinner .licttdrop {
  display: inline-block;
  margin-bottom: .7rem;
}

.summaryinner .wathese {
  display: inline-block;
  margin-left: .6rem;
}

.g9sharerfrm {
  display: flex !important;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.g9sharerfrm .g9postshareopen {
  margin-right: .3rem;
  padding-top: 0 !important;
}

.g9sharerfrm a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border-width: 1px;
  border-style: solid;
}

.g9sharerfrm a svg {
  width: 16px;
  height: 16px;
}

.g9productpack {
  gap: 1rem !important;
  padding: 1.1rem 0 !important;
  margin: 1rem 0 !important;
}

.g9productpackitem {
  display: grid !important;
  grid-template-columns: 26px 1fr !important;
  grid-template-areas: "icon txt" "icon detail" !important;
  column-gap: .7rem !important;
  row-gap: .1rem !important;
  align-items: center !important;
  float: none !important;
}

.g9productpackitem .packicon {
  grid-area: icon;
}

.g9productpackitem .prodpacktxt {
  grid-area: txt;
}

.g9productpackitem .prodpackdetail {
  grid-area: detail;
}

#g9tab-detail h2.prodeskopen {
  display: none;
}

#g9tab-detail p,
#g9tab-detail li {
  line-height: 1.8;
}

.type-product {
  grid-template-columns: 62% 32% !important;
  grid-column-gap: 6% !important;
}

.summaryinner .licttdrop {
  float: left;
  display: block;
  margin-bottom: .7rem;
}

.summaryinner .wathese {
  float: right;
  display: block;
  margin-left: 0;
}

.summaryinner .product_title {
  margin-bottom: .15rem !important;
  line-height: 1.25 !important;
}

.summaryinner .storenick {
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: .9rem;
}

.g9productpack {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 0 !important;
}

.g9productpackitem {
  padding: 1.1rem 1rem !important;
  border-right-width: 1px;
  border-right-style: solid;
}

.g9productpackitem .packicon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
}

.g9productpackitem .packicon svg {
  width: 20px !important;
  height: 20px !important;
}

.g9productpackitem:last-child {
  border-right-style: none;
}

.g9checktier:has(input:disabled) {
  cursor: not-allowed;
  pointer-events: none;
}


/* ============================================================
   PRODUCT GALLERY REDESIGN (v3 — !important-protected)

   Kenapa versi sebelumnya merusak layout:
   cssdata.php mencetak <style> khusus halaman produk lewat hook
   wp_head prioritas 99, sedangkan stylesheet ini (pdt-layout.css)
   di-enqueue lewat wp_enqueue_scripts dan tercetak lebih dulu di
   <head>. Untuk selector yang sama persis (.g9proimgthumbfrminner,
   .g9proimgthumbfrm, .g9proimgthumb, dll — nama class dipakai
   ulang dari desain lama) dengan spesifisitas yang sama, browser
   memenangkan deklarasi yang tercetak PALING BELAKANG. Karena
   cssdata.php tercetak belakangan dan redesign ini tidak pakai
   !important, semua aturan baru kalah dan ketiban gaya lama
   (mis. thumbnail rail lama lebar 1920px untuk slider horizontal)
   — itulah yang bikin layout produk berantakan.

   Perbaikan: setiap deklarasi di blok khusus desktop ini WAJIB
   !important supaya selalu menang, berapa pun urutan cetaknya.
   Blok ini hanya aktif di >=992px, jadi tampilan mobile/tablet
   (yang sudah oke sebelumnya) tidak disentuh sama sekali.
   ============================================================ */

@media (min-width: 992px) {
	.g9wooprodimg {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: flex-start !important;
		column-gap: 16px !important;
		row-gap: 18px !important;
	}
	.g9proimgthumbfrm {
		order: 1 !important;
		flex: 0 0 96px !important;
		width: 96px !important;
		height: 420px !important;
		box-sizing: border-box !important;
		margin-top: 0 !important;
		position: relative !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		scrollbar-width: none !important;
		-ms-overflow-style: none !important;
	}
	.g9proimgthumbfrm::-webkit-scrollbar {
		width: 0 !important;
		height: 0 !important;
		display: none !important;
	}
	.g9heroprodimg {
		order: 2 !important;
		flex: 1 1 0 !important;
		min-width: 0 !important;
		width: auto !important;
		height: 420px !important;
	}
	.g9productpack {
		order: 3 !important;
		flex: 0 0 100% !important;
		width: 100% !important;
	}
	.g9proimgthumbfrminner {
		width: 100% !important;
		box-sizing: border-box !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 8px !important;
		transform: none !important;
	}
	.g9proimgthumb {
		width: 100% !important;
		height: 64px !important;
		box-sizing: border-box !important;
		display: block !important;
	}
	.g9proimgthumb img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
	}
	/* Panah geser kiri/kanan cuma masuk akal untuk strip horizontal
	   di mobile. Di rail vertikal ini disembunyikan; kalau foto
	   lebih banyak dari yang muat, rail-nya scroll vertikal biasa
	   (overflow-y: auto di atas), jadi tetap rapi tanpa tombol. */
	.g9slideleft, .g9slideright {
		display: none !important;
	}
}

.g9proimgthumb {
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 0 0 1px var(--line, #e2e2e2);
	cursor: pointer;
	transition: box-shadow .15s;
}
.g9proimgthumb.g9galactive,
.g9proimgthumb:hover {
	box-shadow: 0 0 0 2px var(--teal, #14E0DD);
}
.g9proimgthumb img { display: block; width: 100%; height: auto; }

/* Bingkai gambar utama — overflow:hidden supaya sudut gambar tetap rapi
   mengikuti border-radius, berapapun ukuran/rasio gambar aslinya. */
.g9heroprodimg {
	position: relative !important;
	overflow: hidden !important;
	border-radius: 10px;
	background: var(--surface, #f5f5f5);
}

@media (min-width: 992px) {
	.g9heroprodimg #g9heroprodimgitem {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		display: block !important;
	}
}

/* Magnifier lensa kaca pembesar mengikuti kursor.
   .g9herozoompane adalah lapisan baru (dibuat lewat JS) yang isinya
   foto yang sama tapi diperbesar; posisi background-nya mengikuti
   kursor. Karena wadahnya (.g9heroprodimg) sudah overflow:hidden,
   hasil zoom-nya dijamin selalu terkurung rapi di dalam kotak. */
.g9herozoompane {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease;
}
.g9heroprodimg.g9herozoomon {
	cursor: zoom-in;
}
.g9heroprodimg.g9herozoomon .g9herozoompane {
	opacity: 1;
}
.g9heroprodimg.g9herozoomon #g9heroprodimgitem {
	opacity: 0;
}