/* =====================================================================
 * ZENOS -- Product Detail (Single Product) restyle, roadmap item 5.
 *
 * Semua rule di bawah di-scope ke `body.single-product` (class native
 * WooCommerce/WordPress di halaman produk tunggal) supaya nol bleed ke
 * halaman lain -- pola sama seperti shop-restyle.css/about-us-restyle.css.
 *
 * Layout dua-kolom (gallery+summary), grid tab, dan responsive columns
 * SUDAH ditangani Botiga sendiri lewat wrapper `.product-gallery-summary`
 * (dikonfirmasi live: sudah mode "gallery-vertical" -- thumbnail strip di
 * kiri gambar utama, PERSIS visual reference desktop) -- file ini SENGAJA
 * tidak merombak struktur grid itu, cuma restyle warna/spacing/radius di
 * dalamnya, biar responsive behavior Botiga yang sudah teruji tetap utuh.
 * ===================================================================== */

/* REVISI 2026-09-11 -- rollout "global visual setting" (roadmap item 4,
 * setelah Shop). SEBELUMNYA token --zsd-pd-* nge-alias ke --zsd-hf-*
 * (Header/Footer sitewide, BELUM di-rollout ke global setting), sekarang
 * decoupled: default --zsd-jr-* token di-declare LANGSUNG di sini (nilai
 * identik dengan default .zsd-journal, SATU sumber kebenaran preset di
 * zsd_journal_daftar_preset_palet(), zsd_journal_daftar_preset_aksen(), dan
 * zsd_journal_daftar_preset_font(), includes/journal.php) lalu --zsd-pd-*
 * alias ke --zsd-jr-*. Preset override lewat body class zsd-produk-palet,
 * zsd-produk-aksen, zsd-produk-font (BUKAN data attribute -- native
 * WooCommerce template, sama pola dengan Shop/Cart, lihat
 * zsd_body_class_product_restyle(), includes/product-restyle.php).
 * CATATAN: komentar di file ini SENGAJA tidak pernah menulis tanda bintang
 * yang langsung diikuti garis miring di mana pun (termasuk saat menyebut
 * nama-nama class di atas) -- dua karakter itu berurutan menutup komentar
 * CSS lebih awal, dikonfirmasi lewat verifikasi live (fetch CSS ke browser
 * + cek CSSOM: rule body.single-product hilang total dari cssRules walau
 * teks sumbernya kelihatan benar). */
body.single-product {
	--zsd-jr-bg: #fdfaf5;
	--zsd-jr-krem: #f2e8da;
	--zsd-jr-krem-muda: #f8f2e9;
	--zsd-jr-coklat: #6b5744;
	--zsd-jr-coklat-muda: #a9927a;
	--zsd-jr-teks: #2c2620;
	--zsd-jr-teks-muted: #8a7f6f;
	--zsd-jr-border: #e7dccb;
	--zsd-jr-aksen: var(--zsd-jr-coklat);
	--zsd-jr-font-heading: "Inter", -apple-system, "system-ui", "Segoe UI", Roboto, sans-serif;

	--zsd-pd-coklat: var(--zsd-jr-aksen);
	--zsd-pd-coklat-gelap: color-mix(in srgb, var(--zsd-jr-aksen) 78%, black);
	--zsd-pd-krem: var(--zsd-jr-krem);
	--zsd-pd-krem-lebih-muda: var(--zsd-jr-krem-muda);
	--zsd-pd-teks: var(--zsd-jr-teks);
	--zsd-pd-teks-muted: var(--zsd-jr-teks-muted);
	--zsd-pd-radius: 15px;
	--zsd-pd-hijau: #2e7d4f;
	--zsd-pd-oranye: #b8790a;
	--zsd-pd-merah: #b23b3b;
	--zsd-pd-border: var(--zsd-jr-border);
}

body.single-product .product_title.entry-title,
body.single-product .related.products > h2,
body.single-product .zsd-pd-review-heading {
	font-family: var(--zsd-jr-font-heading);
}

/* ---------------------------------------------------------------------
 * Preset overrides -- nilai copy verbatim dari assets/journal-publik.css
 * (SATU sumber kebenaran preset, includes/journal.php:
 * zsd_journal_daftar_preset_palet()/_aksen()/_font()), supaya Product
 * Detail konsisten persis dengan Journal/Home/Shop untuk preset yang sama.
 * ------------------------------------------------------------------- */

body.single-product.zsd-produk-palet-terracotta-hangat {
	--zsd-jr-bg: #fdf8f3;
	--zsd-jr-krem: #f0e0d0;
	--zsd-jr-krem-muda: #f7ebdf;
	--zsd-jr-coklat: #8a4b32;
	--zsd-jr-coklat-muda: #c08b6f;
	--zsd-jr-teks: #2e2117;
	--zsd-jr-teks-muted: #9c8672;
	--zsd-jr-border: #e8d2bd;
}

body.single-product.zsd-produk-palet-zaitun-alami {
	--zsd-jr-bg: #f9faf5;
	--zsd-jr-krem: #e8ecdc;
	--zsd-jr-krem-muda: #f1f4e9;
	--zsd-jr-coklat: #5b6b4a;
	--zsd-jr-coklat-muda: #93a17f;
	--zsd-jr-teks: #262b1f;
	--zsd-jr-teks-muted: #8b937d;
	--zsd-jr-border: #dde3cd;
}

body.single-product.zsd-produk-palet-abu-batu-modern {
	--zsd-jr-bg: #f7f7f5;
	--zsd-jr-krem: #e9e7e2;
	--zsd-jr-krem-muda: #f2f1ed;
	--zsd-jr-coklat: #5c5850;
	--zsd-jr-coklat-muda: #948d80;
	--zsd-jr-teks: #262420;
	--zsd-jr-teks-muted: #928d84;
	--zsd-jr-border: #dedad2;
}

body.single-product.zsd-produk-aksen-terracotta { --zsd-jr-aksen: #b3572f; }
body.single-product.zsd-produk-aksen-hijau-sawo { --zsd-jr-aksen: #6b7a4f; }
body.single-product.zsd-produk-aksen-biru-dusty { --zsd-jr-aksen: #4f7686; }
body.single-product.zsd-produk-aksen-mustard    { --zsd-jr-aksen: #c08a2e; }

body.single-product.zsd-produk-font-editorial-klasik {
	--zsd-jr-font-heading: "Playfair Display", Georgia, serif;
}

body.single-product.zsd-produk-font-editorial-hangat {
	--zsd-jr-font-heading: "Fraunces", Georgia, serif;
}

/* =====================================================================
 * 1. FONDASI -- typography & spacing umum
 * ===================================================================== */

body.single-product .summary.entry-summary {
	color: var(--zsd-pd-teks);
}

/* REVISI 2026-08-31 -- PAKSA URUTAN VISUAL pakai flexbox `order` (bukan
 * ubah DOM/PHP). Ditemukan lewat inspect-element langsung di produk live:
 * urutan HTML asli dari WooCommerce hooks TIDAK sesuai urutan prioritas
 * di kode PHP (stok/highlight seharusnya priority 22/26, di bawah cart
 * priority 30 -- tapi HTML live justru render cart LEBIH DULU baru
 * stok/highlight nyusul). Kemungkinan besar OPcache server belum benar-
 * benar fresh walau sudah di-restart pas deploy terakhir. Daripada nunggu
 * itu kebenerin di server, urutan VISUAL dipaksa 100% benar di sini,
 * jadi pasti tampil sama persis di browser manapun terlepas urutan HTML
 * mentahnya. Ini aman total: cuma reflow visual (CSS `order`), form
 * Tambah ke Keranjang / AJAX / JS sama sekali tidak disentuh.
 *
 * Sekalian: `.product_meta` (wrapper native WooCommerce utk kategori/SKU/
 * tag) DISEMBUNYIKAN total di sini -- filter PHP `zsd_hapus_categories_
 * produk()` yang seharusnya mengosongkan teks categories-nya ternyata
 * juga belum aktif di server (kemungkinan sama, OPcache), jadi teks
 * "CATEGORIES: ..." masih nongol live. display:none di sini jadi
 * jaring pengaman yang pasti berhasil terlepas status OPcache.
 */
body.single-product .summary.entry-summary {
	display: flex;
	flex-direction: column;
}

body.single-product .summary.entry-summary > .product_title.entry-title { order: 1; }
body.single-product .summary.entry-summary > .price { order: 2; }
body.single-product .summary.entry-summary > .woocommerce-product-details__short-description { order: 3; }
body.single-product .summary.entry-summary > hr.divider { order: 4; }
body.single-product .summary.entry-summary > .botiga-wc-brands-brand-wrapper { order: 5; }
body.single-product .summary.entry-summary > .zsd-pd-stok { order: 6; }
body.single-product .summary.entry-summary > .zsd-pd-highlight { order: 7; }
body.single-product .summary.entry-summary > form.cart { order: 8; }
body.single-product .summary.entry-summary > .zsd-pd-pengiriman { order: 9; }
body.single-product .summary.entry-summary > .zsd-chat-wrap { order: 10; }
body.single-product .summary.entry-summary > .elements-order-end { order: 11; }
body.single-product .summary.entry-summary > .product_meta { display: none; }

body.single-product .product_title.entry-title {
	font-size: 26px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--zsd-pd-teks);
	margin: 0 0 6px;
}

body.single-product .summary .price {
	font-size: 20px;
	font-weight: 600;
	color: var(--zsd-pd-coklat);
	margin: 0 0 14px;
}

body.single-product .summary .price ins {
	text-decoration: none;
	color: var(--zsd-pd-coklat);
}

body.single-product .summary .price del {
	color: var(--zsd-pd-teks-muted);
	opacity: 0.8;
	margin-right: 8px;
}

body.single-product .woocommerce-product-details__short-description {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--zsd-pd-teks-muted);
	margin: 0 0 18px;
}

body.single-product .woocommerce-breadcrumb {
	font-size: 12.5px;
	color: var(--zsd-pd-teks-muted);
}

body.single-product .woocommerce-breadcrumb a {
	color: var(--zsd-pd-teks-muted);
}

/* REVISI 2026-08-30 (consolidated correction) -- separator "/" -> ">"
 * lewat woocommerce_breadcrumb_defaults (lihat
 * zsd_ubah_delimiter_breadcrumb_produk(), includes/product-restyle.php).
 * Styling di sini cuma bikin karakter pemisahnya subtle/warm-neutral,
 * senada teks breadcrumb, TIDAK mengubah struktur/logic breadcrumb. */
body.single-product .woocommerce-breadcrumb .zsd-pd-breadcrumb-pemisah {
	display: inline-block;
	margin: 0 2px;
	color: var(--zsd-pd-teks-muted);
	opacity: 0.6;
	font-size: 11px;
	vertical-align: middle;
}

/* =====================================================================
 * 2. GALLERY
 *
 * REVISI 2026-08-30 (LOCKED IMPLEMENTATION BRIEF -- rewrite total).
 * Requirement lama "no crop, object-fit:contain" DIBATALKAN EKSPLISIT
 * oleh brief baru ini (FINAL LOCK poin 1-3): main image sekarang WAJIB
 * square 1:1 + object-fit:cover (crop rapi kalau perlu), BUKAN contain
 * lagi. Navigasi beda per breakpoint:
 *   - Desktop (>=1025px): thumbnail vertical KIRI + panah atas/bawah.
 *     Native Botiga SUDAH nempatin thumbnail di kiri sendiri (order:-1
 *     di .flex-control-thumbs, dikonfirmasi live inspect), CSS di sini
 *     cuma marapiin ukuran/gap. Panah atas/bawah scroll strip
 *     thumbnail (jaga-jaga kalau jumlah gambar nggak muat).
 *   - Tablet (641-1024px): thumbnail horizontal DI BAWAH main image +
 *     panah kiri/kanan overlay di main image + tile "+1" di thumbnail
 *     ke-5 (max produk = 5 gambar/hard-cap form upload, jadi "+1"
 *     satu-satunya angka yang mungkin muncul, aman di-hardcode CSS).
 *   - Mobile (<=640px): TANPA thumbnail row sama sekali -- dot
 *     pagination + counter "1/N" overlay sebagai gantinya.
 * SEMUA elemen navigasi baru (panah, dot, counter) BUKAN slider baru --
 * cuma trigger click() ke <img> thumbnail native yang sudah ada (lihat
 * initGaleriNavigasi(), product-restyle.js). FlexSlider/PhotoSwipe
 * aslinya TIDAK diganti/dibangun ulang sama sekali.
 *
 * MAGNIFIER: native jquery.zoom hover-lens (.zoomImg, dikonfirmasi live
 * exist & benar-benar jadi "kaca pembesar kedua") DIMATIKAN lewat
 * remove_theme_support('wc-product-gallery-zoom') khusus halaman
 * produk (lihat zsd_matikan_zoom_gallery_produk(),
 * includes/product-restyle.php) -- SATU-satunya zoom/magnifier yang
 * tersisa adalah trigger klik->PhotoSwipe native
 * (.woocommerce-product-gallery__trigger, theme support LIGHTBOX
 * terpisah dari ZOOM, TIDAK ikut dimatikan) yang di-restyle+diperbesar
 * areanya di sini supaya nutupin SELURUH main image (bukan cuma ikon
 * kecil di pojok) -- requirement "klik/tap MAIN IMAGE (di mana pun)
 * buka PhotoSwipe" (dikonfirmasi live: SEBELUM fix ini, klik area
 * gambar selain ikon kecil TIDAK membuka apa pun).
 *
 * !important DIPAKAI LUAS di section ini (bukan gaya nulis sembarangan)
 * -- dikonfirmasi live inspect: Botiga sendiri punya CSS bawaan
 * `.single-product div.product .woocommerce-product-gallery ...` yang
 * specificity-nya (4 class + 1 element) LEBIH TINGGI dari selector kita
 * `body.single-product ...` (2 class + 1 element) buat HAMPIR SEMUA
 * elemen gallery (trigger z-index:99, thumbs display/gap, thumb li
 * width:95px, thumb img opacity/padding, dst) -- tanpa !important,
 * source-order TIDAK cukup buat menang, rule Botiga yang kepakai.
 * ===================================================================== */

/* REVISI 2026-08-31 -- background krem filler DIHAPUS (feedback Ferdian,
 * ketemu sendiri lewat inspect element). Nggak dibutuhkan lagi sekarang
 * main image selalu square+cover (selalu penuh 100% area, nggak pernah
 * nyisain celah), jadi background di belakangnya nggak pernah kelihatan
 * -- cumaberpotensi keliatan sekilas (flash) pas gambar masih loading. */
body.single-product .woocommerce-product-gallery {
	position: relative !important;
	border-radius: var(--zsd-pd-radius) !important;
	overflow: hidden !important;
}

body.single-product .woocommerce-product-gallery .flex-viewport {
	position: relative !important;
	border-radius: var(--zsd-pd-radius) !important;
}

/* BUGFIX 2026-09-19 (round 2, laporan Ferdian: produk 1 foto SEMPAT
 * "hilang lagi" setelah round pertama -- ternyata BUKAN soal timing
 * event resize sama sekali). Akar masalah SEBENARNYA: WooCommerce core
 * SENGAJA mematikan FlexSlider kalau gambar cuma 1 (native, dikonfirmasi
 * langsung di source assets/js/frontend/single-product.js WooCommerce:
 * `if ( 1 === this.$images.length ) { this.flexslider_enabled = false;
 * }`) -- jadi `.flex-viewport` MEMANG TIDAK PERNAH dibuat sama sekali
 * buat produk 1 foto (dikonfirmasi live lewat DOM inspect di staging:
 * elemen itu nggak ada sama sekali, bukan cuma kosong/0px). Semua CSS
 * Botiga (termasuk punya kita sendiri, `.flex-viewport` di atas) yang
 * ngasih width/layout ke kolom gambar utama SELALU nyasar ke
 * `.flex-viewport` -- begitu elemen itu nggak ada, elemen PENGGANTINYA
 * di kasus 1 foto (`.woocommerce-product-gallery__wrapper`, jadi anak
 * LANGSUNG dari `.woocommerce-product-gallery` tanpa flex-viewport di
 * antaranya) nggak dapat width dari CSS manapun -- collapse ke 0x0
 * walau <img> di dalamnya sudah ke-load sempurna (dikonfirmasi live:
 * naturalWidth/Height keisi normal, cuma getBoundingClientRect()
 * kotaknya 0x0). Selector pakai kombinator `>` (child langsung) supaya
 * SPESIFIK cuma kena kasus 1 foto ini -- kasus 2+ foto,
 * `.woocommerce-product-gallery__wrapper` ada DI DALAM `.flex-viewport`
 * (nested, bukan anak langsung `.woocommerce-product-gallery` lagi,
 * dikonfirmasi live di produk lain yang fotonya 3), jadi rule ini TIDAK
 * match sama sekali di situ -- lebar slide track FlexSlider (yang
 * diatur sendiri lewat inline style oleh FlexSlider JS, jauh lebih
 * lebar dari 100% karena isinya beberapa slide + clone buat infinite
 * loop) TIDAK ketimpa/rusak. Sudah diverifikasi live lewat DevTools di
 * staging utk KEDUA kasus (1 foto & 3 foto) sebelum fix ini dikunci. */
body.single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	width: 100% !important;
}

/* Main image -- SQUARE 1:1 WAJIB, ukuran moderat (dibatasi lebar kolom
 * gallery di layout 2-kolom Botiga, bukan full-bleed viewport). */
body.single-product .woocommerce-product-gallery__image {
	position: relative !important;
	aspect-ratio: 1 / 1 !important;
	overflow: hidden !important;
}

/* object-fit:cover -- crop rapi, TIDAK distorsi (cover selalu preserve
 * aspect ratio asli, cuma bagian yang nggak muat ke-crop). Posisi
 * absolute+inset dipertahankan dari fix round sebelumnya (percentage
 * width/height cuma resolve benar ke containing block buat elemen
 * absolute, nggak peduli portrait/landscape/square source image). */
body.single-product .woocommerce-product-gallery__image img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
}

/* ---------------------------------------------------------------------
 * Trigger PhotoSwipe native -- direparent ke .flex-viewport via JS
 * (initGaleriNavigasi()) SUPAYA posisi-nya bisa inset:0 relatif ke
 * viewport (area main image doang), BUKAN ke seluruh .woocommerce-
 * product-gallery (yang lebih lebar krn ada kolom thumbnail) -- kalau
 * dibiarkan di tempat asli & dikasih inset:0 relatif ke parent lama,
 * area klik-nya bakal numpuk nutupin kolom thumbnail juga (nge-block
 * klik ganti gambar). Event click WooCommerce didaftarkan lewat
 * delegated listener di document (pola standar WC core), jadi pindah
 * parent TIDAK memutus fungsinya. z-index:2 !important -- Botiga native
 * ngasih z-index:99 (buat kasus trigger versi kecil pojok default-nya),
 * kalau nggak di-!important-in trigger versi full-cover ini bisa nangkring
 * di ATAS panah kiri/kanan (z-index:3) & mem-block klik-nya.
 * ------------------------------------------------------------------- */
body.single-product .woocommerce-product-gallery__trigger {
	position: absolute !important;
	inset: 0 !important;
	top: 0 !important;
	right: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 2 !important;
	display: block !important;
	text-indent: -9999px;
	overflow: hidden;
}

/* Sembunyikan emoji bawaan WordPress (🔍 di-convert jadi <img class=
 * "emoji">) -- diganti ikon custom lewat ::after di bawah, SATU-
 * satunya indikator zoom yang ditampilkan (bukan magnifier kedua). */
body.single-product .woocommerce-product-gallery__trigger img.emoji {
	display: none !important;
}

/* REVISI 2026-08-31 -- ikon magnifier hover DIHAPUS TOTAL (feedback
 * Ferdian: "tombol magnifier ada 2 buat apa? hapus"). Area trigger di atas
 * (inset:0, invisible) TETAP aktif di semua breakpoint -- klik/tap main
 * image di mana pun tetap buka PhotoSwipe -- cuma TIDAK ADA lagi ikon
 * visual apa pun yang nongol sebelum di-klik. Affordance zoom SEKARANG
 * cuma muncul SETELAH gambar di-klik, di dalam PhotoSwipe sendiri (native,
 * tidak disentuh). */

/* ---------------------------------------------------------------------
 * Counter "1/N" -- MOBILE ONLY, overlay pojok kanan-atas main image.
 * Elemen baru (bukan native), di-append via JS, angka disinkronkan dari
 * state native (class .flex-active di thumbnail) -- TIDAK ada logic
 * slide sendiri.
 * ------------------------------------------------------------------- */
body.single-product .zsd-pd-galeri-counter {
	display: none;
}

/* ---------------------------------------------------------------------
 * Panah kiri/kanan -- TABLET ONLY, overlay tepi kiri/kanan main image.
 * Klik = trigger thumbnail native sebelumnya/berikutnya (index wrap).
 * ------------------------------------------------------------------- */
body.single-product .zsd-pd-galeri-prev,
body.single-product .zsd-pd-galeri-next {
	display: none;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.85);
	color: var(--zsd-pd-coklat-gelap);
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(43, 38, 34, 0.15);
	padding: 0;
}
body.single-product .zsd-pd-galeri-prev { left: 12px; }
body.single-product .zsd-pd-galeri-next { right: 12px; }
body.single-product .zsd-pd-galeri-prev svg,
body.single-product .zsd-pd-galeri-next svg {
	width: 16px;
	height: 16px;
}

/* ---------------------------------------------------------------------
 * Dot pagination -- MOBILE ONLY, pengganti total thumbnail row (thumb
 * disembunyikan default, lihat .flex-control-thumbs di bawah).
 * ------------------------------------------------------------------- */
body.single-product .zsd-pd-galeri-dots {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 12px 0 0;
}
body.single-product .zsd-pd-galeri-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	border: none;
	padding: 0;
	background: var(--zsd-pd-border);
	cursor: pointer;
	transition: background 0.2s ease, width 0.2s ease, border-radius 0.2s ease;
}
body.single-product .zsd-pd-galeri-dot.zsd-aktif {
	width: 16px;
	border-radius: 4px;
	background: var(--zsd-pd-coklat);
}

/* Panah atas/bawah -- DESKTOP ONLY, scroll strip thumbnail (BUKAN ganti
 * slide). */
body.single-product .zsd-pd-galeri-panah-naik,
body.single-product .zsd-pd-galeri-panah-turun {
	display: none;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 0;
	width: 56px;
	height: 22px;
	border: none;
	background: none;
	color: var(--zsd-pd-teks-muted);
	cursor: pointer;
	z-index: 3;
	padding: 0;
}
body.single-product .zsd-pd-galeri-panah-naik { top: 0; }
body.single-product .zsd-pd-galeri-panah-turun { bottom: 0; }
body.single-product .zsd-pd-galeri-panah-naik svg,
body.single-product .zsd-pd-galeri-panah-turun svg {
	width: 14px;
	height: 14px;
}

/* ---------------------------------------------------------------------
 * Thumbnail strip -- default (mobile-first): HIDDEN total, dot
 * pagination di atas jadi gantinya. Dimunculkan lagi di Tablet
 * (horizontal) & Desktop (vertical kiri) lewat media query di bawah.
 * Ukuran kecil & SERAGAM di semua breakpoint yang menampilkannya --
 * SEMUA !important (lihat catatan specificity Botiga di header section
 * ini): tanpa itu, display/gap/width balik ke default Botiga (flex
 * unconditional, gap:20px, li width:95px).
 * ------------------------------------------------------------------- */
body.single-product .flex-control-thumbs {
	display: none !important;
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	gap: 8px !important;
}

body.single-product .flex-control-thumbs li {
	flex: none !important;
	width: 56px !important;
	height: 56px !important;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	margin: 0 !important;
	padding: 0 !important;
}

body.single-product .flex-control-thumbs img {
	display: block;
	width: 56px !important;
	height: 56px !important;
	border-radius: 10px;
	opacity: 0.65 !important;
	border: 2px solid transparent;
	box-sizing: border-box;
	object-fit: cover;
	cursor: pointer;
	padding: 0 !important;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

body.single-product .flex-control-thumbs img:hover {
	opacity: 0.9 !important;
}

body.single-product .flex-control-thumbs img.flex-active {
	opacity: 1 !important;
	border-color: var(--zsd-pd-coklat);
}

/* Tablet 641-1024px -- horizontal, DI BAWAH main image. Thumbnail ke-5
 * (kalau ada) dikasih overlay "+1" -- max produk 5 gambar (hard-cap
 * form upload), jadi "+1" satu-satunya angka yang mungkin muncul, aman
 * di-hardcode murni CSS tanpa JS (:nth-child otomatis nggak match kalau
 * thumbnail-nya kurang dari 5). */
@media (min-width: 641px) and (max-width: 1024px) {
	body.single-product .flex-control-thumbs {
		display: flex !important;
		flex-direction: row !important;
	}
	body.single-product .zsd-pd-galeri-prev,
	body.single-product .zsd-pd-galeri-next {
		display: flex;
	}
	body.single-product .flex-control-thumbs li:nth-child(5)::after {
		content: "+1";
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10px;
		background: rgba(43, 38, 34, 0.55);
		color: #fff;
		font-size: 12px;
		font-weight: 700;
		pointer-events: none;
	}
}

/* Desktop >=1025px -- vertical, KIRI (native Botiga sudah nempatin
 * lewat order:-1 di .flex-control-thumbs -- dikonfirmasi live inspect
 * di 1920px, CSS di sini cuma mastiin ukuran/gap + ruang panah
 * atas/bawah). max-height + overflow-y:auto -- normalnya (<=5 thumb x
 * 56px = ~320px) nggak kepake scroll-nya, tapi strukturnya tetap benar
 * kalau batas jumlah gambar berubah suatu saat. */
@media (min-width: 1025px) {
	body.single-product .flex-control-thumbs {
		display: flex !important;
		flex-direction: column !important;
		width: 56px !important;
		max-height: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		scrollbar-width: none;
		padding: 28px 0 !important;
		box-sizing: border-box;
		justify-content: center;
	}
	body.single-product .flex-control-thumbs::-webkit-scrollbar {
		display: none;
	}
	body.single-product .zsd-pd-galeri-panah-naik,
	body.single-product .zsd-pd-galeri-panah-turun {
		display: flex;
	}
}

/* Mobile <=640px -- counter + dot pagination, thumbnail TETAP hidden
 * (default di atas). */
@media (max-width: 640px) {
	body.single-product .zsd-pd-galeri-counter {
		display: block;
		position: absolute;
		right: 12px;
		top: 12px;
		z-index: 3;
		padding: 3px 10px;
		border-radius: 999px;
		background: rgba(43, 38, 34, 0.55);
		color: #fff;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.02em;
	}
	body.single-product .zsd-pd-galeri-dots {
		display: flex;
	}
}

/* Lightbox (PhotoSwipe bawaan WC) -- restyle tombol close/nav biar senada
 * warm-brown, mekanisme buka/tutup/swipe/zoom-nya sendiri TIDAK disentuh. */
body.single-product .pswp__button--arrow--left .pswp__icn,
body.single-product .pswp__button--arrow--right .pswp__icn {
	fill: #fff;
}

/* =====================================================================
 * 3. STOCK STATUS
 *
 * REVISI 2026-08-30 (consolidated correction) -- PHP-nya sekarang cuma
 * render SATU baris (state aktif doang, no legend -- lihat
 * zsd_render_status_stok_produk(), includes/product-restyle.php), jadi
 * markup CSS di sini juga disederhanakan total mengikuti: `.zsd-pd-stok`
 * sekarang LANGSUNG elemen <p> satu baris (dot + label + nilai), warna
 * state ditentukan dari class `.zsd-pd-stok-tersedia/-menipis/-habis` di
 * elemen <p> itu sendiri (bukan lagi nested .zsd-aktif di dalam <li>).
 * ===================================================================== */

body.single-product .zsd-pd-stok {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	font-size: 13px;
	font-weight: 600;
	color: var(--zsd-pd-teks);
}

body.single-product .zsd-pd-stok-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

body.single-product .zsd-pd-stok-tersedia { color: var(--zsd-pd-hijau); }
body.single-product .zsd-pd-stok-menipis { color: var(--zsd-pd-oranye); }
body.single-product .zsd-pd-stok-habis { color: var(--zsd-pd-merah); }

body.single-product .zsd-pd-stok-label {
	color: inherit;
}

body.single-product .zsd-pd-stok-pemisah {
	color: var(--zsd-pd-teks-muted);
	font-weight: 400;
}

body.single-product .zsd-pd-stok-nilai {
	font-weight: 400;
	color: var(--zsd-pd-teks-muted);
}

/* =====================================================================
 * 4. PRODUCT HIGHLIGHTS
 * ===================================================================== */

body.single-product .zsd-pd-highlight {
	list-style: none;
	margin: 0 0 18px;
	padding: 14px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	border-top: 1px solid var(--zsd-pd-border);
	border-bottom: 1px solid var(--zsd-pd-border);
}

body.single-product .zsd-pd-highlight-item {
	flex: 1 1 0;
	min-width: 96px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
}

body.single-product .zsd-pd-highlight-ikon {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--zsd-pd-coklat);
}

body.single-product .zsd-pd-highlight-ikon .zsd-ikon-svg {
	width: 22px;
	height: 22px;
}

body.single-product .zsd-pd-highlight-teks {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--zsd-pd-teks);
	line-height: 1.35;
}

/* =====================================================================
 * 5. QUANTITY + ADD TO CART
 * ===================================================================== */

body.single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 6px;
}

body.single-product form.cart .quantity {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--zsd-pd-border);
	border-radius: var(--zsd-pd-radius);
	overflow: hidden;
	background: #fff;
}

body.single-product form.cart .quantity input.qty {
	width: 52px;
	text-align: center;
	border: none;
	background: transparent;
	color: var(--zsd-pd-teks);
	font-weight: 600;
}

body.single-product form.cart .quantity .qty-btn,
body.single-product form.cart .quantity button {
	border: none;
	background: transparent;
	color: var(--zsd-pd-teks-muted);
	width: 34px;
	cursor: pointer;
}

/* REVISI 2026-08-31 -- ukuran disamakan ke tombol "+ Keranjang" Feature
 * Collection Home (padding 10px 16px, font-size 13px -- lihat
 * .zsd-home-fc-aksi .add_to_cart_button, home-publik.css) -- sebelumnya
 * lebih besar (12px 26px / 13.5px), feedback Ferdian: "agak kebesaran". */
body.single-product .single_add_to_cart_button.button.alt {
	background: transparent !important;
	color: var(--zsd-pd-coklat) !important;
	border: 1.5px solid var(--zsd-pd-coklat) !important;
	border-radius: var(--zsd-pd-radius) !important;
	padding: 10px 16px !important;
	font-weight: 600;
	font-size: 13px;
	text-transform: none !important;
	box-shadow: none !important;
	transition: background 0.2s ease, color 0.2s ease;
}

body.single-product .single_add_to_cart_button.button.alt:hover {
	background: var(--zsd-pd-coklat) !important;
	color: #fff !important;
}

/* State sesaat "Ditambahkan" -- dipicu JS (product-restyle.js) lewat event
 * jQuery `added_to_cart` bawaan WooCommerce, TIDAK mengubah cart logic. */
body.single-product .single_add_to_cart_button.zsd-pd-baru-ditambahkan {
	background: var(--zsd-pd-coklat) !important;
	color: #fff !important;
}

/* "Sudah ada X di keranjang." -- elemen ini SUDAH dirender JS sitewide
 * (woo-cart-fix.js, PROTECTED, tidak disentuh) dengan inline style; rule
 * di sini pakai selector lebih spesifik supaya menang tanpa perlu edit
 * file itu sama sekali. */
body.single-product form.cart .zsd-info-sudah-di-keranjang {
	color: var(--zsd-pd-hijau) !important;
	font-size: 12.5px !important;
	font-weight: 500;
	width: 100%;
	margin: 2px 0 0 !important;
}

/* =====================================================================
 * 5B. VARIASI PRODUK -- swatch/pill selector (BARU 2026-09-19, Backlog 1
 * storefront). <select> native WooCommerce TETAP ada di DOM (JS cuma
 * nyembunyikan VISUAL, lihat initVariasiSelector(), product-restyle.js)
 * -- styling di bawah scope ke elemen SWATCH BARU (.zsd-pd-variasi-*),
 * bukan reskin <select> aslinya.
 * ===================================================================== */

/* Tabel native .variations (th.label + td.value per atribut) -- reset
 * tampilan default table WooCommerce jadi blok vertikal (LABEL di atas,
 * swatch di bawahnya), sesuai referensi desain ("Warna:" lalu row swatch
 * di bawahnya). flex:1 1 100% -- selalu ambil baris PENUH di dalam
 * form.cart yang flex-wrap (BUKAN sejajar quantity/Add to Cart). */
body.single-product table.variations,
body.single-product table.variations tbody,
body.single-product table.variations tr,
body.single-product table.variations th.label,
body.single-product table.variations td.value {
	display: block;
	width: 100%;
	padding: 0;
	border: none;
	background: none;
}

body.single-product table.variations {
	flex: 1 1 100%;
	margin: 0 0 4px;
}

body.single-product table.variations tr {
	margin: 0 0 14px;
}

body.single-product table.variations th.label {
	font-size: 13px;
	font-weight: 600;
	color: var(--zsd-pd-teks);
	margin: 0 0 8px;
}

body.single-product table.variations th.label label {
	margin: 0;
}

/* <select> native -- TETAP fungsional & TETAP di DOM (WooCommerce pakai
 * apa adanya buat matching/AJAX/stok), cuma disembunyikan VISUAL (bukan
 * display:none, biar tetap "ada" buat assistive tech / fallback kalau JS
 * gagal load). */
body.single-product select.zsd-pd-variasi-select-asli {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

/* Bug 4 (2026-09-20, laporan Ferdian): "-/+ /Tambah ke Keranjang" kelihatan
 * kekecilan/nggak proporsional dibanding referensi desain. Root cause:
 * form.cart itu flex-wrap, dan link "CLEAR" (a.reset_variations, flex-basis
 * default "auto") ikut nempel di baris yang SAMA dengan .single_variation_wrap
 * (flex-basis:100% di bawah) -- browser masih nyisipin .single_variation_wrap
 * di baris itu juga (bukan pindah baris baru sendirian) tapi lebar yang
 * kebagian jadi CUMA sisa slot setelah "CLEAR", BUKAN 100% lebar form.cart
 * (custom_property flex-basis:100% doesn't force sole ownership of the line
 * kalau default flex-shrink masih izinin dia numpang bareng elemen lain).
 * Dites langsung di browser: sebelum fix .single_variation_wrap random ~282px
 * (dari total form.cart ~582px), setelah "CLEAR" dipaksa baris sendiri (flex
 * 1 1 100%) baru .single_variation_wrap dapat lebar PENUH 582px yang benar,
 * quantity/tombol jadi proporsional otomatis di semua lebar layar (BUKAN
 * hardcode px kayak percobaan manual sebelumnya, itu cuma pas di 1 resolusi). */
body.single-product a.reset_variations {
	display: block;
	flex: 1 1 100%;
	width: 100%;
	margin: 2px 0 4px;
	font-size: 12px;
	color: var(--zsd-pd-teks-muted);
	text-decoration: underline;
}

body.single-product .zsd-pd-variasi-swatch-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Pill teks -- attribute TANPA gambar (contoh: Ukuran S/M/L/XL). */
body.single-product .zsd-pd-variasi-swatch-teks {
	min-width: 44px;
	height: 40px;
	padding: 0 14px;
	border: 1.5px solid var(--zsd-pd-border);
	border-radius: 9px;
	background: #fff;
	color: var(--zsd-pd-teks);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

body.single-product .zsd-pd-variasi-swatch-teks:hover {
	border-color: var(--zsd-pd-coklat-gelap);
}

body.single-product .zsd-pd-variasi-swatch-teks.zsd-pd-variasi-swatch-aktif {
	border-color: var(--zsd-pd-coklat);
	background: var(--zsd-pd-krem-lebih-muda);
	color: var(--zsd-pd-coklat-gelap);
}

/* Swatch gambar -- attribute value PUNYA gambar (contoh: Warna). */
body.single-product .zsd-pd-variasi-swatch-gambar {
	width: 56px;
	height: 56px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 10px;
	overflow: hidden;
	background: var(--zsd-pd-krem-lebih-muda);
	cursor: pointer;
	box-shadow: 0 0 0 1px var(--zsd-pd-border);
	transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

body.single-product .zsd-pd-variasi-swatch-gambar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.single-product .zsd-pd-variasi-swatch-gambar:hover {
	transform: translateY(-1px);
	box-shadow: 0 0 0 1px var(--zsd-pd-coklat-gelap);
}

body.single-product .zsd-pd-variasi-swatch-gambar.zsd-pd-variasi-swatch-aktif {
	border-color: var(--zsd-pd-coklat);
	box-shadow: 0 0 0 1px var(--zsd-pd-coklat);
}

/* Kombinasi invalid (locked spec bagian 8) -- muted & TIDAK bisa diklik,
 * TETAP kelihatan (bukan disembunyikan) -- customer tau opsi itu ADA tapi
 * nggak tersedia buat kombinasi yang lagi dipilih. */
body.single-product .zsd-pd-variasi-swatch.zsd-pd-variasi-swatch-disabled {
	opacity: 0.35;
	cursor: not-allowed;
	pointer-events: none;
}

body.single-product .zsd-pd-variasi-swatch-teks.zsd-pd-variasi-swatch-disabled {
	text-decoration: line-through;
}

/* Harga "Mulai dari Rp50.000" / "Harga belum tersedia" (BAGIAN 7,
 * includes/product-restyle.php) -- reuse warna/size .summary .price yang
 * sudah ada, label kecil "Mulai dari" dibedain dikit. */
body.single-product .zsd-pd-harga-mulai-label {
	font-size: 13px;
	font-weight: 500;
	color: var(--zsd-pd-teks-muted);
}

body.single-product .zsd-pd-harga-kosong {
	color: var(--zsd-pd-teks-muted);
	font-weight: 500;
	font-size: 15px;
}

/* Harga & ketersediaan per-variasi (native, .woocommerce-variation-price/
 * -availability, di-render ulang WooCommerce pas variasi ketemu) -- reuse
 * style .price yang sudah ada + rapikan jarak dari swatch di atasnya &
 * quantity/tombol di bawahnya. */
body.single-product .single_variation_wrap {
	flex: 1 1 100%;
	width: 100%;
}

body.single-product .woocommerce-variation {
	margin: 0 0 10px;
}

body.single-product .woocommerce-variation-price .price {
	margin: 0 0 4px;
}

body.single-product .woocommerce-variation-availability {
	font-size: 12.5px;
	color: var(--zsd-pd-teks-muted);
}

body.single-product .woocommerce-variation-availability .stock.out-of-stock {
	color: var(--zsd-pd-merah);
	font-weight: 600;
}

body.single-product .woocommerce-variation-availability .stock.in-stock {
	color: var(--zsd-pd-hijau);
}

/* Quantity + Add to Cart Variable Product -- markup native nested 1 level
 * lebih dalam drpd Simple (.woocommerce-variation-add-to-cart), replikasi
 * layout flex yang sama dengan form.cart Simple Product (section 5 di
 * atas) di level nesting yang benar. */
body.single-product .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

/* Add to Cart nonaktif (belum lengkap milih atribut / kombinasi invalid /
 * stok habis) -- locked spec bagian 11 ("berikan visual indication yang
 * jelas") -- class .disabled di-toggle NATIVE WooCommerce
 * (VariationForm.prototype.onHide/onShow), murni styling di sini. */
body.single-product .single_add_to_cart_button.disabled,
body.single-product .single_add_to_cart_button[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

/* =====================================================================
 * 6. SHIPPING INFORMATION
 * ===================================================================== */

body.single-product .zsd-pd-pengiriman {
	margin: 16px 0;
	padding: 14px 0;
	border-top: 1px solid var(--zsd-pd-border);
}

body.single-product .zsd-pd-pengiriman-judul {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--zsd-pd-teks-muted);
	margin: 0 0 12px;
}

body.single-product .zsd-pd-pengiriman-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}

/* REVISI 2026-08-31 -- sekat/divider vertikal ANTAR item (feedback
 * Ferdian, referensi persis pola Home "02 OPTIONAL INFO BAR" --
 * .zsd-home-info-bar-item + ::before, home-publik.css): gap list dihapus,
 * diganti padding kiri/kanan per-item (0 di tepi luar) + garis 1px 60%
 * tinggi di sisi kiri item KECUALI item pertama (selector `+`). */
body.single-product .zsd-pd-pengiriman-item {
	flex: 1 1 0;
	min-width: 140px;
	display: flex;
	align-items: flex-start;
	gap: 9px;
	position: relative;
	padding: 0 16px;
}

body.single-product .zsd-pd-pengiriman-item:first-child {
	padding-left: 0;
}

body.single-product .zsd-pd-pengiriman-item:last-child {
	padding-right: 0;
}

body.single-product .zsd-pd-pengiriman-item + .zsd-pd-pengiriman-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 60%;
	background: var(--zsd-pd-border);
}

body.single-product .zsd-pd-pengiriman-ikon {
	width: 20px;
	height: 20px;
	flex: none;
	color: var(--zsd-pd-coklat);
	margin-top: 2px;
}

body.single-product .zsd-pd-pengiriman-ikon .zsd-ikon-svg {
	width: 18px;
	height: 18px;
}

body.single-product .zsd-pd-pengiriman-teks {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

body.single-product .zsd-pd-pengiriman-item-judul {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--zsd-pd-teks);
}

body.single-product .zsd-pd-pengiriman-item-desc {
	font-size: 11.5px;
	color: var(--zsd-pd-teks-muted);
	line-height: 1.4;
}

/* =====================================================================
 * 7. CHAT SERVICE BLOCK
 *
 * Elemen aslinya dirender includes/chat-pelanggan.php (PROTECTED, logic
 * TIDAK disentuh -- Tawk.to aktif -> Tawk.to, kalau nggak -> WA fallback,
 * persis seperti sebelumnya). Markup asli file itu: <p class="zsd-chat-wrap">
 * lalu SATU elemen `.zsd-chat-tombol` (`<a>` buat varian WA, `<button>` buat
 * varian Tawk.to) yang isinya svg ikon + teks.
 *
 * REVISI 2026-08-30 (correction round): sebelumnya section ini SALAH target
 * class (`.zsd-chat-tombol-wrap` -- class itu nggak pernah ada di markup
 * aslinya, cuma typo) jadi efeknya nol -- tombol jatuh balik ke style
 * default assets/chat-pelanggan.css (hijau WhatsApp #25D366 / biru Tawk.to
 * #1c78c9, dipakai bersama di semua halaman lain seperti Journal/Cart, itu
 * FILE LAIN yang SENGAJA tidak diubah). Locked spec buat Product Detail
 * secara spesifik minta "Service Block" netral (bukan warna brand pihak
 * ketiga) -- jadi di SINI (scope body.single-product doang, nggak nyentuh
 * halaman lain) di-override total pakai !important.
 *
 * Konten baris judul/deskripsi/CTA + ganti ikon jadi ikon chat generik
 * (bukan logo WhatsApp) dikerjain via JS (product-restyle.js,
 * initServiceBlockChat()) -- cuma restrukturisasi innerHTML tombol yang
 * sudah ada, TIDAK menyentuh href/onclick/atribut aslinya sama sekali,
 * jadi behavior klik (buka WA / maximize widget Tawk.to) tetap sama persis.
 * ===================================================================== */

body.single-product .zsd-chat-wrap {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--zsd-pd-border);
}

body.single-product .zsd-chat-tombol {
	display: flex !important;
	align-items: center;
	gap: 12px;
	width: 100%;
	background: var(--zsd-pd-krem-lebih-muda) !important;
	color: var(--zsd-pd-teks) !important;
	border: 1px solid var(--zsd-pd-border) !important;
	border-radius: var(--zsd-pd-radius) !important;
	padding: 14px 18px !important;
	font-family: inherit;
	font-size: 13px;
	font-weight: 400;
	text-decoration: none !important;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

body.single-product .zsd-chat-tombol:hover {
	background: var(--zsd-pd-krem) !important;
	border-color: var(--zsd-pd-coklat) !important;
	color: var(--zsd-pd-teks) !important;
	transform: none;
}

body.single-product .zsd-chat-tombol svg {
	flex-shrink: 0;
	color: var(--zsd-pd-coklat);
}

body.single-product .zsd-chat-teks {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	text-align: left;
}

body.single-product .zsd-chat-judul {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--zsd-pd-teks);
}

body.single-product .zsd-chat-desc {
	font-size: 12px;
	color: var(--zsd-pd-teks-muted);
}

body.single-product .zsd-chat-cta {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--zsd-pd-coklat);
	white-space: nowrap;
	flex-shrink: 0;
}

@media (max-width: 480px) {
	body.single-product .zsd-chat-tombol {
		align-items: flex-start;
	}

	body.single-product .zsd-chat-cta {
		white-space: normal;
	}
}

/* =====================================================================
 * 8. TABS (Description / Additional Information / Reviews)
 * ===================================================================== */

body.single-product .woocommerce-tabs {
	margin-top: 48px;
}

body.single-product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 28px;
	list-style: none;
	margin: 0 0 28px;
	padding: 0 0 0;
	border-bottom: 1px solid var(--zsd-pd-border);
}

body.single-product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
}

body.single-product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 0 0 12px;
	font-size: 14px;
	font-weight: 500;
	color: var(--zsd-pd-teks-muted);
	border-bottom: 2px solid transparent;
	text-decoration: none;
}

body.single-product .woocommerce-tabs ul.tabs li.active a {
	color: var(--zsd-pd-teks);
	font-weight: 600;
	border-bottom-color: var(--zsd-pd-coklat);
}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
	max-width: 720px;
}

body.single-product .woocommerce-Tabs-panel p {
	font-size: 14px;
	line-height: 1.7;
	color: var(--zsd-pd-teks);
}

/* Tabel Additional Information (native Weight/Dimensions + optional info
 * tambahan yang di-append lewat hook di product-restyle.php) -- baris
 * label/value senyap dengan divider tipis, bukan grid abu-abu WooCommerce
 * default. */
body.single-product .woocommerce-product-attributes,
body.single-product .zsd-pd-info-tambahan-tabel {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 4px;
}

body.single-product .woocommerce-product-attributes-item {
	border-bottom: 1px solid var(--zsd-pd-border);
}

body.single-product .woocommerce-product-attributes-item__label,
body.single-product .woocommerce-product-attributes-item__value {
	padding: 11px 0;
	font-size: 13.5px;
	text-align: left;
	border: none;
}

body.single-product .woocommerce-product-attributes-item__label {
	color: var(--zsd-pd-teks-muted);
	font-weight: 500;
	width: 40%;
}

body.single-product .woocommerce-product-attributes-item__value {
	color: var(--zsd-pd-teks);
}

/* =====================================================================
 * 9. REVIEWS
 * ===================================================================== */

/* BARU 2026-09-10 (Part A1-A2) -- heading + sub-copy, SEBELUMNYA nggak ada
   section header apa pun sebelum ringkasan rating. */
body.single-product .zsd-pd-review-header {
	margin: 0 0 20px;
}

body.single-product .zsd-pd-review-heading {
	font-size: 20px;
	font-weight: 700;
	color: var(--zsd-pd-teks);
	margin: 0 0 4px;
}

body.single-product .zsd-pd-review-subheading {
	font-size: 13px;
	color: var(--zsd-pd-teks-muted);
	margin: 0;
}

body.single-product .zsd-pd-review-ringkasan {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 20px;
}

body.single-product .zsd-pd-review-ringkasan-angka {
	font-size: 38px;
	font-weight: 700;
	color: var(--zsd-pd-teks);
	line-height: 1;
}

body.single-product .zsd-pd-review-ringkasan-bintang {
	color: var(--zsd-pd-oranye);
	font-size: 15px;
	letter-spacing: 1px;
}

body.single-product .zsd-pd-review-ringkasan-teks {
	margin: 4px 0 0;
	font-size: 12.5px;
	color: var(--zsd-pd-teks-muted);
}

body.single-product .zsd-pd-review-bar-list {
	display: flex;
	flex-direction: column;
	gap: 5px;
	max-width: 320px;
	margin: 0 0 26px;
}

body.single-product .zsd-pd-review-bar-baris {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11.5px;
	color: var(--zsd-pd-teks-muted);
}

body.single-product .zsd-pd-review-bar-label {
	width: 30px;
	flex: none;
}

body.single-product .zsd-pd-review-bar-track {
	flex: 1;
	height: 6px;
	border-radius: 4px;
	background: var(--zsd-pd-border);
	overflow: hidden;
}

body.single-product .zsd-pd-review-bar-isi {
	display: block;
	height: 100%;
	background: var(--zsd-pd-coklat);
	border-radius: 4px;
}

body.single-product .zsd-pd-review-bar-persen {
	width: 30px;
	flex: none;
	text-align: right;
}

body.single-product .zsd-pd-review-list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

body.single-product .zsd-pd-review-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 0;
	border-top: 1px solid var(--zsd-pd-border);
}

/* BARU 2026-09-10 (Part A5) -- item yang di-ciutkan lewat "Tampilkan Lebih
   Sedikit" TETAP di DOM (requirement: jangan re-fetch data yang sudah
   dimuat), cuma disembunyikan visual di sini. */
body.single-product .zsd-pd-review-item.zsd-pd-review-tersembunyi {
	display: none;
}

body.single-product .zsd-pd-review-list .zsd-pd-review-item:first-child {
	border-top: none;
}

/* BARU 2026-09-10 (Part A3) -- avatar review (get_avatar() native WP). */
body.single-product .zsd-pd-review-avatar {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--zsd-pd-krem);
}

body.single-product .zsd-pd-review-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.single-product .zsd-pd-review-body {
	flex: 1;
	min-width: 0;
}

body.single-product .zsd-pd-review-baris1 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 6px;
	flex-wrap: wrap;
}

body.single-product .zsd-pd-review-bintang {
	color: var(--zsd-pd-oranye);
	font-size: 13px;
	letter-spacing: 1px;
}

body.single-product .zsd-pd-review-nama {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--zsd-pd-teks);
}

/* BARU 2026-09-10 (Part A3) -- badge "Pembelian Terverifikasi", CUMA
   dirender PHP kalau wc_review_is_from_verified_owner() genuinely true
   (lihat zsd_callback_review_produk()), jadi CSS di sini murni styling. */
body.single-product .zsd-pd-review-verified {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 600;
	color: var(--zsd-pd-hijau);
	background: rgba(46, 125, 79, 0.1);
	border-radius: 20px;
	padding: 2px 9px 2px 7px;
}

body.single-product .zsd-pd-review-tanggal {
	font-size: 12px;
	color: var(--zsd-pd-teks-muted);
	margin-left: auto;
}

/* BARU 2026-09-10 (Part A4) -- line-clamp 3 baris default + toggle
   "Baca Selengkapnya" (JS ukur overflow beneran, tombol cuma nongol kalau
   teksnya kepotong -- lihat initBacaSelengkapnya(), product-restyle.js). */
body.single-product .zsd-pd-review-teks-wrap {
	position: relative;
}

body.single-product .zsd-pd-review-teks {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--zsd-pd-teks);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

body.single-product .zsd-pd-review-teks.zsd-pd-review-teks-penuh {
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
}

body.single-product .zsd-pd-review-baca-selengkapnya {
	display: inline-block;
	margin-top: 4px;
	background: none;
	border: none;
	padding: 0;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--zsd-pd-coklat);
	cursor: pointer;
	text-decoration: underline;
}

/* FIX 2026-09-10 -- `display: inline-block` di atas nimpa atribut native
   `hidden` (author CSS selalu menang atas UA stylesheet `[hidden]{display:
   none}` walau specificity-nya "seri"), jadi tombol ini KELIHATAN TERUS di
   semua review walau JS belum unhide-nya (initBacaSelengkapnya() di
   product-restyle.js baru unhide kalau teks beneran overflow 3 baris).
   Efeknya: tombol "Baca selengkapnya"/"Tutup" nongol di setiap review
   walau teksnya muat / bahkan kosong, sesuai laporan bug. Rule ini kasih
   override eksplisit supaya atribut hidden dihormati lagi. */
body.single-product .zsd-pd-review-baca-selengkapnya[hidden] {
	display: none;
}

/* BARU 2026-09-10 (Part A5) -- pembungkus 2 tombol (Muat Ulasan Lainnya +
   Tampilkan Lebih Sedikit), SEBELUMNYA cuma 1 tombol tanpa wrapper. */
body.single-product .zsd-pd-review-aksi {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 4px 0 0;
}

body.single-product .zsd-pd-btn-muat-review,
body.single-product .zsd-pd-btn-tampilkan-sedikit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 1.5px solid var(--zsd-pd-coklat);
	color: var(--zsd-pd-coklat);
	border-radius: var(--zsd-pd-radius);
	padding: 10px 20px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

body.single-product .zsd-pd-btn-muat-review:hover,
body.single-product .zsd-pd-btn-tampilkan-sedikit:hover {
	background: var(--zsd-pd-coklat);
	color: #fff;
}

body.single-product .zsd-pd-btn-muat-review[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* "Tampilkan Lebih Sedikit" -- varian ghost (tanpa border coklat) supaya
   visually SEKUNDER dibanding "Muat Ulasan Lainnya" saat keduanya tampil
   berdampingan. */
body.single-product .zsd-pd-btn-tampilkan-sedikit {
	border-color: var(--zsd-pd-border);
	color: var(--zsd-pd-teks-muted);
}

body.single-product .zsd-pd-btn-tampilkan-sedikit:hover {
	background: var(--zsd-pd-krem);
	color: var(--zsd-pd-teks);
}

body.single-product .zsd-pd-review-kosong {
	background: var(--zsd-pd-krem);
	border: 1px solid var(--zsd-pd-border);
	border-radius: var(--zsd-pd-radius);
	padding: 28px 20px;
	text-align: center;
	margin: 0 0 24px;
}

body.single-product .zsd-pd-review-kosong-judul {
	font-size: 15px;
	font-weight: 600;
	color: var(--zsd-pd-teks);
	margin: 0 0 4px;
}

body.single-product .zsd-pd-review-kosong-desc {
	font-size: 13px;
	color: var(--zsd-pd-teks-muted);
	margin: 0;
}

/* BARU 2026-09-10 (Part A6, feedback Ferdian gambar 1) -- radius 15px di
   WRAPPER LUAR #review_form_wrapper, KHUSUS saat ulasan masih kosong (class
   kondisional zsd-pd-review-form-wrapper-kosong, lihat template). Di luar
   kondisi itu wrapper luar TETAP transparan/tanpa background seperti
   sebelumnya -- cuma #respond di dalamnya yang punya radius (rule di
   bawah, tidak diubah). */
body.single-product .zsd-pd-review-form-wrapper-kosong {
	border-radius: var(--zsd-pd-radius);
	overflow: hidden;
}

body.single-product .zsd-pd-review-form-wrapper #respond {
	background: var(--zsd-pd-krem-lebih-muda);
	border-radius: var(--zsd-pd-radius);
	padding: 20px;
}

body.single-product #reviews .comment-reply-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--zsd-pd-teks);
}

body.single-product .comment-form-rating select,
body.single-product .comment-form-comment textarea,
body.single-product .comment-form-author input,
body.single-product .comment-form-email input {
	width: 100%;
	border: 1px solid var(--zsd-pd-border);
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 13.5px;
	background: #fff;
}

body.single-product .comment-form-comment textarea {
	min-height: 96px;
}

body.single-product .zsd-pd-btn-kirim-review {
	background: var(--zsd-pd-coklat) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--zsd-pd-radius) !important;
	padding: 11px 24px !important;
	font-weight: 600;
	text-transform: none !important;
}

/* =====================================================================
 * 10. RELATED PRODUCTS -- reuse visual language kartu produk Shop
 * ===================================================================== */

body.single-product .related.products {
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid var(--zsd-pd-border);
}

body.single-product .related.products > h2 {
	font-size: 19px;
	font-weight: 600;
	color: var(--zsd-pd-teks);
	margin: 0 0 20px;
}

/* REVISI 2026-08-30 (consolidated correction) -- gambar native WC di
 * Related Products keluar di ukuran file asli (395x395px), jauh lebih
 * gede & berat secara visual dibanding kartu Shop (281x281px), padahal
 * blueprint eksplisit minta "SAMA visual language dengan Shop Product
 * Card" (radius, rasio gambar, tipografi, dst). Fix: REPLIKASI (bukan
 * share/import) pola aspect-ratio + object-fit:cover yang sudah dipakai
 * di shop-restyle.css (li.product .loop-image-wrap), di-scope ulang ke
 * body.single-product supaya shop-restyle.css (PROTECTED, sudah
 * selesai) tetap nggak disentuh sama sekali. */
body.single-product .related.products ul.products li.product .loop-image-wrap {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--zsd-pd-radius);
	background: var(--zsd-pd-krem-lebih-muda);
	margin: 0 0 14px;
	display: block;
}

body.single-product .related.products ul.products li.product .loop-image-wrap a {
	display: block;
	width: 100%;
	height: 100%;
}

body.single-product .related.products ul.products li.product .loop-image-wrap img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

body.single-product .related.products ul.products li.product .woocommerce-loop-product__title {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--zsd-pd-teks);
	margin: 0 0 6px;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

body.single-product .related.products ul.products li.product .price {
	color: var(--zsd-pd-coklat);
	font-weight: 600;
}

/* REVISI 2026-08-31 (round 2) -- BENTUK disamakan PERSIS ke tombol
 * Feature Collection Home (.zsd-home-fc-aksi .add_to_cart_button,
 * home-publik.css): radius 15px sudah sama dari round 1, yang beda
 * ternyata LEBAR -- FC pakai width:100% (selebar kartu produk), bukan
 * width:auto/min-width sempit seperti sebelumnya (itu yang bikin
 * kelihatan kayak "pill" kecil, bukan tombol lebar kayak FC). Warna
 * solid coklat TETAP tidak diubah (Ferdian eksplisit: jangan hilangkan
 * background). Ganti width doang -- class/atribut add_to_cart_button/
 * ajax_add_to_cart/data-product_id sama sekali tidak disentuh, AJAX add-
 * to-cart tetap 100% jalan seperti biasa. */
body.single-product .related.products ul.products li.product .button,
body.single-product .related.products ul.products li.product a.add_to_cart_button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	box-sizing: border-box;
	background: var(--zsd-pd-coklat) !important;
	color: #fff !important;
	border-radius: var(--zsd-pd-radius) !important;
	border: none !important;
	padding: 10px 16px !important;
	font-size: 13px !important;
	font-weight: 600;
	text-transform: none !important;
}

body.single-product .related.products ul.products li.product .button:hover,
body.single-product .related.products ul.products li.product a.add_to_cart_button:hover {
	background: var(--zsd-pd-coklat-gelap) !important;
}

/* ---------------------------------------------------------------------
 * Quick View -- HAPUS TOTAL dari Related Products (locked spec brief:
 * "HAPUS TOTAL dari Shop dan Related Products, no replacement UI").
 * shop-restyle.css sudah nanganin halaman Shop; block ini nge-scope pola
 * yang sama ke Related Products di Product Detail (sebelumnya belum
 * ke-cover -- gap ketemu dari screenshot Ferdian, tombol Quick View masih
 * muncul saat hover kartu Related Products).
 * ------------------------------------------------------------------- */
body.single-product .related.products ul.products li.product .loop-image-wrap a[class*="quick-view"],
body.single-product .related.products ul.products li.product .loop-image-wrap button[class*="quick-view"] {
	display: none !important;
}

/* =====================================================================
 * 11. RESPONSIVE
 *
 * Breakpoint sama persis dengan Shop: Desktop >1024px, Tablet
 * 641-1024px, Mobile <=640px. Layout kolom (gallery kiri/kanan vs
 * stacked) SUDAH ditangani Botiga's `.product-gallery-summary` secara
 * native -- rules di bawah cuma rapikan spacing/ukuran per breakpoint,
 * TIDAK memaksa struktur grid baru.
 * ===================================================================== */

@media (max-width: 1024px) {
	body.single-product .product_title.entry-title {
		font-size: 22px;
	}

	body.single-product .zsd-pd-highlight,
	body.single-product .zsd-pd-pengiriman-list {
		gap: 14px;
	}

	/* BARU 2026-09-10 (Part A8) -- Tablet (641-1024px, bucket ini juga
	   dipakai Mobile di bawah lewat cascade -- pola sama dengan aturan lain
	   di section ini, lihat catatan header section). */
	body.single-product .zsd-pd-review-heading {
		font-size: 18px;
	}

	body.single-product .zsd-pd-review-ringkasan-angka {
		font-size: 32px;
	}
}

@media (min-width: 641px) and (max-width: 1024px) {
	/* Tablet-ONLY (bukan ikut ke-cascade ke Mobile) -- aksi Reviews tetap
	   1 baris di Tablet, beda dari Mobile yang di-stack (lihat blok Mobile
	   di bawah). */
	body.single-product .zsd-pd-review-aksi {
		gap: 10px;
	}
}

@media (max-width: 640px) {
	body.single-product .product_title.entry-title {
		font-size: 19px;
	}

	body.single-product .summary .price {
		font-size: 18px;
	}

	body.single-product .zsd-pd-highlight {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	body.single-product .zsd-pd-highlight-item {
		min-width: 84px;
	}

	body.single-product .zsd-pd-pengiriman-list {
		flex-direction: column;
		gap: 14px;
	}

	body.single-product .zsd-pd-pengiriman-item {
		padding: 0;
	}

	body.single-product .zsd-pd-pengiriman-item + .zsd-pd-pengiriman-item::before {
		display: none;
	}

	body.single-product form.cart {
		flex-direction: row;
		flex-wrap: wrap;
	}

	body.single-product .single_add_to_cart_button.button.alt {
		flex: 1 1 auto;
	}

	body.single-product .woocommerce-tabs ul.tabs {
		gap: 18px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
	}

	body.single-product .related.products ul.products {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}

	/* BARU 2026-09-10 (Part A8) -- Mobile (<=640px). */
	body.single-product .zsd-pd-review-heading {
		font-size: 17px;
	}

	body.single-product .zsd-pd-review-ringkasan {
		gap: 12px;
		margin-bottom: 16px;
	}

	body.single-product .zsd-pd-review-ringkasan-angka {
		font-size: 28px;
	}

	body.single-product .zsd-pd-review-bar-list {
		max-width: none;
	}

	body.single-product .zsd-pd-review-avatar {
		width: 32px;
		height: 32px;
	}

	body.single-product .zsd-pd-review-tanggal {
		margin-left: 0;
		width: 100%;
		order: 3;
	}

	body.single-product .zsd-pd-review-aksi {
		flex-direction: column;
		align-items: stretch;
	}

	body.single-product .zsd-pd-btn-muat-review,
	body.single-product .zsd-pd-btn-tampilkan-sedikit {
		justify-content: center;
		width: 100%;
	}
}