/**
 * Product Detail Page — tata letak & kontrol ukuran/warna.
 *
 * Spec: CLAUDE.md bagian 6. Latar terang (halaman belanja), teks hitam,
 * semua teks 14px sesuai aturan tipografi global.
 *
 * ⚠️ KENAPA SELECTOR DI SINI PANJANG-PANJANG (`.woocommerce div.product
 * form.cart ...`) — bukan gaya-gayaan:
 * woocommerce.css memakai selector sepanjang itu untuk komponennya sendiri
 * (mis. `.woocommerce div.product form.cart .variations select`). Di CSS,
 * yang menang bukan yang belakangan, tapi yang selector-nya lebih spesifik.
 * Diverifikasi langsung di browser 2 Sep 2026: versi pendek kita
 * (`.single-product .variations select`) KALAH telak, makanya dropdown
 * lama sempat tetap kelihatan dan tombol beli tetap ungu bawaan.
 * Jadi panjangnya di sini disengaja: menyamakan "kekuatan" dengan aturan
 * yang mau ditimpa, supaya tidak perlu menaburkan !important.
 * (Untuk urusan TATA LETAK tidak perlu begini — dua stylesheet layout
 * WooCommerce sudah dibuang total, lihat catatan di functions.php.)
 */

/* ---------- Tata letak: foto kiri, info kanan ----------
   .tk-product-top adalah pembungkus khusus yang kita tambahkan sendiri
   (lihat functions.php). Isinya HANYA galeri + ringkasan produk — tab
   deskripsi & produk terkait ada di LUAR pembungkus ini. Itulah yang
   membuat efek "menempel saat scroll" berhenti pada tempatnya dan tidak
   lagi menimpa bagian di bawahnya.

   ⚠️ DIROMBAK TOTAL 23 Sep 2026 — MEMBALIK pendekatan "dikunci persis satu
   layar penuh" (22 Sep 2026). User: *"footernya sepertinya ga natural
   saat scroll"*, kirim acuan tonybianco.com.au — di sana scroll ke footer
   terasa biasa/mulus, bukan begini. Diperiksa LANGSUNG struktur mereka
   (bukan tebakan): kolom galeri (`.gallery-with-thumbs`) MEMANG dibatasi
   tinggi + scroll sendiri (`overflow-y:auto`, `max-height` dipatok) — itu
   SUDAH SAMA dengan punya Takkan, TIDAK disentuh. Tapi kolom info produk
   (`.product-information--inner`) TERNYATA `position:sticky` dengan
   **tinggi natural (`overflow:visible`, TIDAK dipatok/di-scroll sendiri
   sama sekali)** — beda dari versi Takkan 22 Sep yang MEMAKSA kolom info
   ikut terpotong ke tinggi galeri lewat `max-height`+`overflow-y:auto`
   (jadi scroll-di-dalam-scroll: satu scrollbar untuk kolom info, satu lagi
   untuk halaman) — itulah sumber "tidak natural" yang dikeluhkan.
   Diukur di Boot 01 (bukan asumsi): tinggi natural kolom info (SEMUA
   accordion dibuka sekalipun) cuma ±556px, jauh di bawah tinggi galeri
   yang dipatok (±819px pada layar 900px) — jadi kolom info APA ADANYA
   (tanpa dipatok) SUDAH otomatis lebih pendek dari galeri di kasus wajar
   manapun, syarat "satu layar penuh, footer tidak nyembul" (22 Sep) TETAP
   terpenuhi TANPA perlu memaksanya lewat CSS — itu cuma hasil ALAMI dari
   "tinggi baris = tinggi kolom tertinggi (galeri)" bawaan CSS Grid.
   Kalau suatu saat kolom info genuinely lebih tinggi dari galeri (mis.
   deskripsi produk sangat panjang), perilakunya PERSIS seperti TB: sticky
   berhenti "menempel" begitu bagian bawahnya lewat, halaman lanjut
   discroll BIASA — bukan dipaksa muat/scroll-dalam-scroll.
   `.tk-product-top` sendiri TIDAK PERNAH perlu height eksplisit —
   tingginya otomatis mengikuti kolom tertinggi (galeri, yang tetap
   dipatok lewat `--tk-gallery-max` di bawah, TIDAK berubah). */
.woocommerce.single-product div.product .tk-product-top {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	column-gap: 60px;
	align-items: start;
	/* ⚠️ DITAMBAHKAN 23 Sep 2026 (revisi lanjutan, sesi yang sama) — user
	   melaporkan "product detailnya ga ke scroll", diklarifikasi:
	   *"yang kemarin saya maksud sesuai viewport itu saat tampilan
	   awalnya aja, kalo di scroll ya tetep ke ikut"* — jadi syarat "muat
	   satu layar" (22 Sep) MEMANG cuma untuk tampilan AWAL sebelum
	   discroll, BUKAN alasan untuk mengunci/membatasi scroll setelahnya.
	   `min-height` (BUKAN `height` seperti sebelumnya) — menjamin baris
	   ini SETIDAKNYA setinggi satu layar di awal (jadi footer tidak
	   nyembul tanpa scroll), tapi TIDAK PERNAH memotong apa pun kalau
	   kontennya lebih tinggi — beda mendasar dari `height`/`max-height`
	   yang KETAT membatasi. Lihat juga perombakan galeri di bawah — akar
	   masalah sungguhan "tidak ke-scroll" ada di situ (`overflow-y:auto`
	   pada galeri), bukan di baris ini. */
	min-height: calc(100vh - 81px);
	min-height: calc(100dvh - 81px);
}

.woocommerce.single-product div.product .woocommerce-product-gallery {
	float: none; /* WooCommerce masih pakai float untuk galeri — dimatikan karena kita pakai grid. */
	width: auto;
	margin: 0;
}

/* Info produk MENEMPEL saat foto di-scroll, seperti referensi TB — sticky
   dengan tinggi NATURAL, TIDAK dipatok/di-scroll sendiri (lihat komentar
   panjang di atas). Kalau isinya lebih tinggi dari galeri, sticky-nya
   berhenti menempel begitu bagian bawah kolom ini lewat viewport, dan
   halaman lanjut scroll biasa — perilaku bawaan `position:sticky`, bukan
   sesuatu yang perlu ditangani manual.
   ⚠️ `padding`/`margin` trik "beri ruang untuk cincin swatch" (23 Sep,
   sesi sebelumnya) SUDAH TIDAK PERLU LAGI — itu cuma perbaikan untuk
   `overflow-y:auto` yang barusan DIHAPUS di sini; `overflow` sekarang
   balik ke bawaan `visible`, yang TIDAK PERNAH memotong box-shadow
   apapun. Dicabut, bukan dibiarkan jadi kode mati yang membingungkan. */
.woocommerce.single-product div.product .summary {
	float: none;
	width: auto;
	margin: 0;
	position: sticky;
	top: 40px;
}

/* Produk terkait: di bawah galeri+ringkasan, lebar penuh. */
.woocommerce.single-product div.product .related,
.woocommerce.single-product div.product .upsells {
	margin-top: 80px;
}

/* Description/Additional information/Reviews: DIPINDAH ke dalam kolom
   kanan lewat JS (lihat pdp.js — initAccordionTabs), menyatu di bawah
   tombol beli, ikut kolom yang menempel — persis referensi
   tonybianco.com. Jarak dari tombol beli di atasnya cukup dari
   `.tk-accordion { border-top }` + margin di bawah ini, tidak perlu
   margin sebesar versi lebar-penuh yang lama (80px). */
.woocommerce.single-product div.product .summary .woocommerce-tabs {
	margin-top: 28px;
}

.woocommerce.single-product div.product .related > h2,
.woocommerce.single-product div.product .upsells > h2 {
	margin-bottom: 20px;
}

@media (max-width: 900px) {
	.woocommerce.single-product div.product .tk-product-top {
		grid-template-columns: 1fr;
		row-gap: 28px;
	}

	/* ⚠️ `max-height`/`overflow-y` yang dulu di-reset di sini SUDAH DIHAPUS
	   23 Sep 2026 — base rule `.summary` (di atas) sudah tidak pernah
	   menyetelnya lagi sama sekali (lihat komentar perombakan di sana),
	   jadi tidak ada apa-apa lagi yang perlu dibatalkan di breakpoint ini.
	   `position: static` TETAP dipertahankan — menempel tidak masuk akal
	   saat tata letak satu kolom (HP). */
	.woocommerce.single-product div.product .summary {
		position: static;
	}
}

/* ---------- Ringkasan produk ---------- */

/* ⚠️ Font & jarak atas DIREVISI 23 Sep 2026 (gambar acuan ketiga, judul
   "Boot 01" nempel banget ke navbar): jarak navbar→judul diukur waktu
   itu cuma 20px (sisa dari jarak konten standar situs, bukan properti
   milik judul sendiri) — diminta jadi 40px. `margin-top: 20px` di sini
   MENAMBAH 20px di ATAS jarak 20px yang sudah ada dari luar (bukan
   menggantikannya), total 40px — diverifikasi terukur.
   Ukuran font juga dikeluhkan "kekecilan" (14px, sama seperti aturan
   tipografi global situs) — dinaikkan ke 20px KHUSUS di sini, pola yang
   sama seperti pengecualian judul arsip PLP (20px, lihat plp.css).
   ⚠️ JEBAKAN SPESIFISITAS — `margin-top` SEMPAT TIDAK PERNAH BERLAKU
   (terukur `0px`, bukan `20px`) waktu selector-nya masih `.single-product
   .product_title` (0,2,0). `woocommerce.css` punya
   `.woocommerce div.product .product_title { margin-top: 0 }` — 3 class
   (`.woocommerce`/`.product`/`.product_title`, `div.product` adalah
   COMPOUND selector, `.product`-nya sendiri class terpisah dari elemen
   `div`) + 1 elemen = (0,3,1), MENANG atas (0,2,0) murni dari jumlah
   class (3 > 2), berapa pun urutan filenya. Diperbaiki dengan prefix
   `.woocommerce.single-product div.product` — pola YANG SAMA PERSIS
   sudah dipakai `.summary`/`.tk-product-top` di berkas ini — jadi
   (0,4,1), menang murni dari jumlah class. Ditemukan lewat enumerasi
   `document.styleSheets` + `element.matches()` (bukan hitung manual dari
   teks CSS), pola verifikasi yang sudah jadi standar proyek ini sejak
   kasus accordion 22 Sep. */
.woocommerce.single-product div.product .product_title {
	font-size: 20px;
	margin-top: 20px;
	margin-bottom: 4px;
}

/* ⚠️ Prefix `.woocommerce-page.woocommerce` — JEBAKAN SPESIFISITAS SAMA
   PERSIS kasus warna harga PLP (lihat catatan panjang di plp.css, 9 Sep
   2026): woocommerce.css versi 11 punya
   `.woocommerce:where(...) div.product p.price, ...span.price { color:
   rgb(149,142,9) }` — (0,3,2), mengalahkan rule polos `.single-product
   .summary > .price` yang cuma (0,3,0). Dua class ancestor asli (body
   selalu punya `woocommerce` & `woocommerce-page` di halaman produk)
   menaikkan kita jadi (0,4,0), menang tanpa `!important`.
   ⚠️ SEMPAT SALAH TULIS (9 Sep 2026, sesi yang sama): `.woocommerce-page
   .woocommerce .single-product .summary > .price` (dengan SPASI antar
   `.woocommerce-page` dan `.woocommerce`) tidak pernah match — ketiga
   class (`woocommerce-page`, `woocommerce`, `single-product`) itu sama-
   sama menempel di `<body>` YANG SAMA, jadi harus ditulis MENEMPEL tanpa
   spasi (`.a.b`, bukan `.a .b`) supaya diartikan "satu elemen dengan
   ketiga class ini", bukan "elemen bersarang di dalam elemen lain".
   Diverifikasi lewat `element.matches()` langsung sebelum & sesudah — versi
   berspasi `false`, versi menempel `true`. */
.woocommerce-page.woocommerce .summary > .price {
	display: block;
	margin-bottom: 20px;
	color: #2a2a2a;
}

.single-product .woocommerce-product-details__short-description {
	margin-bottom: 24px;
	color: var(--tk-fg-muted);
	max-width: 46ch; /* Baris terlalu panjang susah dibaca. */
}

/* ---------- Form variasi ----------
   <select> bawaan WooCommerce SENGAJA masih ada di DOM — dia tetap sumber
   kebenarannya (lihat catatan arsitektur di functions.php). Cuma
   disembunyikan supaya tidak jadi kontrol ganda & tab-stop ganda. */

.woocommerce div.product form.cart .variations select {
	display: none;
}

/* Tabel variasi dijadikan blok biasa — struktur <table> bawaan WooCommerce
   tidak cocok untuk tata letak vertikal yang kita mau. */
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	background: none;
}

.woocommerce div.product form.cart table.variations {
	margin: 0 0 20px;
}

.woocommerce div.product form.cart table.variations tr {
	margin-bottom: 18px;
}

.woocommerce div.product form.cart table.variations th.label label {
	display: block;
	margin-bottom: 8px;
	color: var(--tk-fg-muted);
}

/* ---------- Kotak ukuran & pill warna ---------- */

.tk-variation {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.tk-variation__option {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	box-sizing: border-box; /* Sama seperti tombol PLP: tanpa ini padding bawaan browser bikin ukurannya meleset. */
	min-width: 46px;
	min-height: 40px; /* Target sentuh nyaman di HP. */
	padding: 8px 12px;
	margin: 0;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--tk-line);
	border-radius: 0; /* Kotak, bukan kapsul — mengikuti gaya editorial yang datar. */
	color: var(--tk-fg);
	font: inherit;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.2s var(--tk-ease), color 0.2s var(--tk-ease);
}

.tk-variation__option:hover:not(:disabled),
.tk-variation__option:focus-visible:not(:disabled) {
	border-color: var(--tk-fg);
}

/* Terpilih: dibedakan lewat garis tebal + latar, bukan warna saja —
   supaya tetap terbaca oleh yang buta warna. */
.tk-variation__option.is-selected {
	background: var(--tk-fg);
	border-color: var(--tk-fg);
	color: var(--tk-bg);
}

/* Habis DAN memang tidak pernah ada sebagai variasi (kombinasi ukuran×warna
   yang tidak pernah dibuat) — dicoret & tidak bisa diklik sama sekali.
   ⚠️ BEDA dari `.is-preorder` di bawah — lihat komentar di situ. */
.tk-variation__option.is-soldout,
.tk-variation__option:disabled {
	color: var(--tk-soldout);
	border-color: var(--tk-line);
	text-decoration: line-through;
	cursor: not-allowed;
}

/* ⚠️ DITAMBAHKAN 22 Sep 2026 (permintaan user, kirim gambar acuan): ukuran
   yang ADA sebagai variasi tapi stoknya SEDANG HABIS — abu-abu SAJA (TANPA
   coret, TANPA cursor:not-allowed) karena tetap bisa diklik untuk preorder
   (lihat Takkan_Preorder, takkan-core, & takkan_pdp_instock_combos() di
   functions.php untuk mekanisme lengkapnya). `:not(.is-selected)` supaya
   kalau justru INI yang sedang dipilih pembeli untuk preorder, tampilan
   "terpilih" (gelap+terang, sama seperti ukuran normal) tetap menang —
   preorder bukan alasan untuk membuat pilihan sendiri pembeli terlihat
   redup. */
.tk-variation__option.is-preorder:not(.is-selected) {
	color: var(--tk-soldout);
	border-color: var(--tk-line);
}

/* ⚠️ Jarak antar swatch DITAMBAHKAN 23 Sep 2026 (lanjutan revisi cincin di
   bawah) — sebelumnya `.tk-variation` (rule bersama Size & Color) cuma
   `gap:6px`, dan cincin `.is-selected` (lihat di bawah) MELUBER sampai 5px
   di luar kotak tombolnya sendiri (box-shadow tidak dihitung ke layout,
   jadi tidak menggeser tombol sebelahnya) — user kirim screenshot: cincin
   swatch terpilih terlihat "kepotong"/bertabrakan dengan swatch di
   sebelahnya karena keduanya nyaris dempet. Di-scope KHUSUS grup Color
   (bukan mengubah `gap:6px` bersama yang juga dipakai Size) — Size tidak
   punya treatment cincin meluber seperti ini, tidak perlu jarak ekstra. */
.tk-variation[data-attribute="pa_color"] {
	gap: 8px;
}

/* ---------- Kotak warna → LINGKARAN 24px, outline halus saat terpilih (23 Sep 2026) ----------
   ⚠️ MEMBALIK LAGI ke pola lingkaran 22 Sep — chip+nama yang dibuat pagi
   harinya (23 Sep) ternyata TIDAK dipakai, user kirim gambar acuan minta
   balik lingkaran: *"balikin jadi lingkaran aja 32px kalo dipilih ke
   outline dengan warna halus"*. Warna swatch KEMBALI jadi latar tombol
   itu sendiri (inline style dari PHP), label kembali disembunyikan
   visual (`tk-sr-only` + `title` tooltip) — markup PERSIS sama seperti
   commit 22 Sep, cuma ukuran & treatment "terpilih"-nya beda (lihat di
   bawah).
   ⚠️ Ukuran DIKECILKAN LAGI 32px→24px (revisi lanjutan hari yang sama,
   bersamaan dengan penambahan jarak 8px di atas) — permintaan user:
   "buat ukurannya jadi 24px". */
.tk-variation[data-attribute="pa_color"] .tk-variation__option {
	width: 24px;
	height: 24px;
	min-width: 24px;
	min-height: 24px;
	padding: 0;
	border-radius: 50%;
	/* Fallback abu netral untuk warna yang namanya bukan warna CSS valid;
	   inline style dari PHP menang kalau warnanya dikenali. */
	background: #d9d9d9;
	/* Border NETRAL selalu tampil (bukan cuma saat hover) — supaya swatch
	   warna PUTIH tidak lenyap ke latar halaman yang juga putih. */
	border: 1px solid var(--tk-line);
}

/* ⚠️ State terpilih DIBALIK LAGI 23 Sep 2026 (beberapa jam kemudian, sesi
   yang sama) — percobaan "border tipis abu-abu hangat" (diukur dari TB)
   di atas TERNYATA TIDAK DIPAKAI: user kirim 2 gambar acuan baru (bukan
   TB lagi) — gambar 1 = dua swatch polos (hitam solid + abu-abu ber-
   outline tipis, PERSIS rule di atas) dengan instruksi *"Outlinenya
   jangan gini stylenya"*; gambar 2 = SATU lingkaran hitam dengan jarak
   kosong lalu CINCIN gelap mengelilinginya (halo/donut), instruksi
   *"ikutin gambar kedua aja"*. Jadi border-tipis-satu-lapis DITOLAK,
   dan yang diminta justru CINCIN BER-JARAK — pola yang SAMA PERSIS
   dengan percobaan PERTAMA 22 Sep 2026 (box-shadow dua lapis) yang
   sempat dibalik pagi ini karena dikira "terlalu keras". Jadi keputusan
   paginya SALAH ARAH — dikembalikan ke box-shadow.
   ⚠️ `background` TETAP tidak perlu ditimpa — alasan sama seperti
   sebelumnya, inline style dari PHP selalu menang. Border dasar (1px
   netral, selalu tampil) TETAP DIPERTAHANKAN di rule dasar di atas —
   itu bukan bagian dari treatment "terpilih", cuma supaya swatch putih
   tidak lenyap ke latar halaman (alasan 22 Sep, tidak berubah).
   ⚠️ Warna cincin DIUBAH LAGI beberapa saat kemudian di hari yang sama
   dari `var(--tk-fg)` (hitam pekat) jadi `var(--tk-soldout)` (abu-abu,
   rgba(0,0,0,0.32) di kanvas terang) — permintaan user: "outlinenya
   warna light grey aja". Dipakai token yang SUDAH ADA (dipakai juga
   untuk teks ukuran preorder/disabled), bukan angka warna baru — supaya
   konsisten dengan makna "abu-abu" yang sudah dipakai di tempat lain
   situs, bukan token ketiga yang tumpang tindih. */
.tk-variation[data-attribute="pa_color"] .tk-variation__option.is-selected {
	box-shadow: 0 0 0 3px var(--tk-bg), 0 0 0 5px var(--tk-soldout);
}

/* ---------- Kotak ukuran → LINGKARAN (22 Sep 2026, dikecilkan 23 Sep 2026) ----------
   Permintaan user 22 Sep: "jangan kotak layoutnya deh coba bulet". DI-SCOPE
   KE GRUP SIZE SAJA — cuma itu yang ditunjukkan di gambar acuan; grup Color
   punya aturan bentuknya sendiri (lihat bagian chip warna di bawah).
   `width`/`height` TETAP (bukan `min-width`) supaya lingkarannya SAMA BESAR
   untuk "5" maupun "11"/"8.5" — kalau lebarnya ikut memanjang sesuai teks,
   `border-radius:50%` akan menghasilkan lonjong, bukan lingkaran.
   ⚠️ Ukuran DIKECILKAN 23 Sep 2026 pagi ("gede banget bikin jadi 24
   aja") — 44px → 24px — TERNYATA KEBALIK jadi kekecilan, dinaikkan lagi
   beberapa jam kemudian di hari yang sama ("kekecilan buat jadi 32px")
   — 24px → **32px, angka final saat ini**. `font-size` ikut dinaikkan
   lagi ke 12px (dari 11px) — masih lebih kecil dari 14px global karena
   32px tetap lebih sempit dari lingkaran versi PERTAMA (44px), tapi
   cukup lega untuk "8.5"/"9.5" dibanding versi 24px yang sempat mepet. */
.tk-variation[data-attribute="pa_size"] .tk-variation__option {
	width: 32px;
	height: 32px;
	min-width: 32px;
	min-height: 32px;
	padding: 0;
	border-radius: 50%;
	font-size: 12px;
}

/* Link "Clear" bawaan WooCommerce. */
.single-product .reset_variations {
	display: inline-block;
	margin-top: 4px;
	color: var(--tk-fg-muted);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* ---------- Harga & status variasi terpilih ---------- */

/* Harga variasi disembunyikan: angkanya sudah tampil di tombol ADD TO CART,
   menampilkannya dua kali bikin ramai. TETAP ADA di DOM (bukan dihapus dari
   markup) karena pdp.js membacanya sebagai sumber harga cadangan saat
   variation.price_html kosong. */
.single-product .woocommerce-variation-price {
	display: none;
}

.single-product .woocommerce-variation-availability {
	margin-bottom: 12px;
	color: var(--tk-fg-muted);
}

/* ---------- Tombol ADD TO CART ---------- */

/* Jumlah beli disembunyikan — desain referensi tidak punya ini di PDP.
   Inputnya TETAP di DOM (nilai 1) supaya form WooCommerce tetap terkirim
   valid, DAN supaya pembeli tetap bisa mengubah jumlah dari halaman
   keranjang. Sengaja tidak dikunci jadi "maksimal 1" lewat PHP: itu akan
   benar-benar melarang beli 2 pasang ukuran sama, dan itu keputusan bisnis
   yang bukan hak saya ambil diam-diam.

   ⚠️ Kenapa !important di sini — ini SATU-SATUNYA cara, bukan jalan pintas:
   JavaScript WooCommerce (wc-add-to-cart-variation.js) menuliskan
   `style="display: block"` LANGSUNG di elemennya tiap kali variasi dipilih.
   Style inline selalu menang atas file CSS manapun, seberapa spesifik pun
   selector-nya — !important adalah satu-satunya penimpa yang tersedia dari
   sisi CSS. Diverifikasi 2 Sep 2026: elemen benar-benar punya atribut
   style="display: block;" saat variasi terpilih. */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart .quantity {
	display: none !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 16px 20px;
	background: var(--tk-fg);
	border: 1px solid var(--tk-fg);
	border-radius: 0;
	color: var(--tk-bg);
	font: inherit;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	transition: opacity 0.2s var(--tk-ease);
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover:not(:disabled) {
	opacity: 0.82;
}

/* WooCommerce menandai tombol `disabled` selama variasi belum lengkap
   dipilih — biarkan terlihat jelas bahwa belum bisa diklik.
   ⚠️ DIROMBAK 23 Sep 2026 — versi lama (background & border SAMA-SAMA
   `var(--tk-soldout)`, teks putih) ternyata menghasilkan cincin/outline
   yang tidak diminta: `background` & `border-color` sama-sama rgba
   translucent, jadi border-nya BERTUMPUK dua kali di atas fill yang
   sudah dicat duluan (fill mengambang di atas putih, border mengambang
   LAGI di atas fill itu) — hasilnya tepi tombol terlihat lebih gelap
   dari isinya sendiri, persis "outline" yang user tolak di gambar acuan.
   User: *"jangan dikasih outline. sama warnanya lebih soft lagi sehingga
   textnya bisa pakai dark grey"*.
   Diperbaiki: `border-color: transparent` (bukan `border:none` — lebar
   1px dipertahankan supaya tombol tidak "meloncat" ukuran dibanding
   state normal/hover yang sama-sama ber-border 1px), latar dilembutkan
   ke `rgba(0,0,0,0.06)` (jauh lebih terang dari 0.32 lama), teks jadi
   abu gelap `var(--tk-fg-muted)` (bukan putih lagi — kontras cukup di
   atas latar seterang ini).
   ⚠️ SENGAJA DI-SCOPE HANYA ke tombol INI (`.single_add_to_cart_button`)
   dulu — permintaan user eksplisit: *"saya butuh liat dulu kalau oke
   nanti saya akan suruh kamu untuk berlakukan ke semua button untuk
   state disable"*. JANGAN diterapkan ke tombol disabled lain (size/color
   variasi, dst) sampai user mengonfirmasi lagi. */
.woocommerce div.product form.cart .single_add_to_cart_button:disabled,
.woocommerce div.product form.cart .single_add_to_cart_button.disabled {
	background: rgba(0, 0, 0, 0.06);
	border-color: transparent;
	color: var(--tk-fg-muted);
	cursor: not-allowed;
	opacity: 1;
}

/* ---------- Galeri: SEMUA foto dalam satu layar ----------
   Permintaan user 2 Sep 2026: foto dibatasi tingginya, dan semua foto
   produk terlihat sekaligus tanpa perlu scroll.

   Slider bawaan WooCommerce sudah dimatikan (lihat functions.php), jadi
   WooCommerce mencetak semua foto sebagai daftar biasa dan tata letaknya
   sepenuhnya milik kita di sini. Komposisinya: satu foto besar di kiri,
   sisanya menumpuk kecil di kanan — pola editorial, bukan deretan seragam,
   supaya foto utama tetap punya bobot.

   --tk-gallery-max: sisa tinggi layar setelah navbar. Diberi batas bawah
   420px supaya di jendela yang pendek fotonya tidak jadi terlalu kecil.
   ⚠️ Nilainya DIPERBAIKI 22 Sep 2026 — `calc(100vh - 220px)` yang lama
   sisa dari SEBELUM breadcrumb dibuang (10 Sep 2026), jadi sudah lama
   basi (breadcrumb-nya sendiri sudah tidak ada, tapi ruang untuknya
   masih dihitung). Disamakan ke `81px` — jarak SUNGGUHAN dari bawah
   navbar sampai awal `.tk-product-top`, diukur langsung
   (`getBoundingClientRect()`) di staging.
   ⚠️ **23 Sep 2026: `81px` sekarang HANYA dipakai di sini** (dulu juga
   dipakai `.tk-product-top`/`.summary` supaya kedua kolom sama tinggi —
   itu bagian dari pendekatan "PDP satu layar penuh" yang sudah DIBALIK,
   lihat komentar perombakan di `.tk-product-top`). Sekarang cuma GALERI
   yang dipatok tingginya; kolom kanan (`.summary`) sengaja tinggi
   natural mengikuti kontennya sendiri, seperti tonybianco.com.au.

   ⚠️ **DIROMBAK LAGI 23 Sep 2026 (beberapa saat kemudian, sesi yang
   sama) — `overflow-y:auto` pada galeri sempat DIHAPUS TOTAL, lalu
   DIKEMBALIKAN LAGI beberapa saat setelahnya (baca sampai akhir catatan
   ini).** User melaporkan "product detailnya ga ke scroll" — dicoba
   dihapus scroll internalnya (foto jadi mengalir bersama scroll halaman,
   TIDAK lagi kotak terpisah).
   ⚠️ **TERNYATA SALAH ARAH — user melaporkan LAGI, "makin jauh
   scrollnya", minta di-plek-ketiplek-kan ke tonybianco.com.au.** Diperiksa
   ULANG scroll TB secara langsung & terukur (bukan asumsi lagi): galeri
   mereka (`.gallery-with-thumbs`) TERNYATA JUGA punya scroll internal
   sendiri (`overflow-y:auto`, tinggi dipatok) — dibuktikan dengan scroll
   roda mouse sungguhan di atas galeri mereka: `window.scrollY` TETAP 0
   sementara `galleryScrollTop` bergerak, PERSIS pola yang baru saja
   dihapus dari Takkan. JADI SCROLL INTERNAL GALERI BUKAN MASALAHNYA.
   ⚠️ **Bedanya ditemukan setelah scroll internal TB digulir sampai
   MENTOK (scrollTop = scrollHeight-clientHeight) lalu discroll LAGI**:
   `window.scrollY` BARU BERUBAH setelah itu (500px) — scroll chaining
   (begitu area dalam habis, scroll otomatis diteruskan ke halaman)
   TERBUKTI JALAN NORMAL di lingkungan pengujian ini, membantah dugaan
   sebelumnya bahwa mekanisme ini "pasti gagal/macet". Yang BEDA justru:
   `getComputedStyle(galeriTB).scrollSnapType` = **`"none"`** — punya
   Takkan (sebelum revisi ini) `y mandatory`. Snap WAJIB (mandatory)
   memaksa browser "menarik balik" posisi scroll ke titik kunci terdekat
   setiap kali gerakan scroll berhenti — pada scroll roda mouse/trackpad
   yang terdiri dari banyak event kecil beruntun, tarikan-balik berulang
   ini kemungkinan besar YANG TERASA "macet/tidak ke-scroll", bukan
   scroll internalnya sendiri.
   **Kesimpulan & tindakan**: kembalikan `overflow-y:auto` + tinggi
   dipatok (PERSIS pola TB, dan PERSIS pola Takkan sebelum revisi
   "dihapus total" tadi) — TAPI `scroll-snap-type` SEKARANG SENGAJA
   `none` (bukan lagi `y mandatory`, dan bukan pula dihapus/tidak
   disebut sama sekali — ditulis eksplisit `none` supaya niatnya
   terbaca, sesuai angka yang diukur langsung dari TB). Ini yang
   membuat total jarak scroll HALAMAN kembali pendek (cuma sisa `.summary`
   + footer, PERSIS keluhan "makin jauh" yang baru saja dilaporkan) SAMBIL
   tetap menjawab keluhan "ga ke scroll" sebelumnya lewat pembuangan
   snap wajibnya, bukan lewat membuang mekanisme scroll internalnya. */

.woocommerce-product-gallery {
	--tk-gallery-max: calc(100vh - 81px);
	--tk-thumb-width: 76px;
}

/* Area galeri punya SCROLL SENDIRI setinggi ±satu layar, PERSIS pola
   tonybianco.com.au (diukur ulang & dibuktikan 23 Sep 2026 — lihat
   catatan panjang di atas). Foto-foto ditumpuk vertikal di dalamnya,
   men-scroll area ini membuat foto meluncur satu per satu; begitu habis,
   scroll ROTOMATIS diteruskan ke halaman (scroll chaining bawaan
   browser, TIDAK butuh JS tambahan). */
.woocommerce div.product .woocommerce-product-gallery {
	display: grid;
	grid-template-columns: var(--tk-thumb-width) minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	height: var(--tk-gallery-max);
	height: calc(100dvh - 81px); /* Progressive enhancement — sama seperti .tk-product-top. */
	min-height: 420px;
	overflow-y: auto;
	/* ⚠️ SENGAJA `none`, BUKAN `y mandatory` (nilai LAMA sebelum 23 Sep
	   2026) — diukur LANGSUNG ke tonybianco.com.au: punya mereka `none`.
	   Snap wajib kemungkinan besar akar "product detail ga ke-scroll"
	   yang dilaporkan user — lihat catatan panjang di atas untuk kronologi
	   lengkap kenapa ini yang diduga jadi biang keladinya, bukan
	   `overflow-y:auto` itu sendiri (yang TERBUKTI juga dipakai TB). */
	scroll-snap-type: none;
	scrollbar-width: none; /* Batang scroll disembunyikan — thumbnail sudah jadi penunjuk posisi, sama seperti TB. */
}

.woocommerce div.product .woocommerce-product-gallery::-webkit-scrollbar {
	display: none;
}

/* ★ INI "DOCKING"-nya: strip thumbnail menempel di atas area galeri, jadi
   tetap di tempat sementara foto meluncur lewat di sebelahnya. `top:0`
   diukur & dicocokkan PERSIS dengan TB (thumbnail mereka juga
   `top:0px` relatif kotak scroll internalnya sendiri, bukan `40px`
   seperti sempat dicoba sesaat — itu cuma relevan kalau galerinya TIDAK
   overflow, yang sekarang sudah tidak berlaku lagi). */
.tk-gallery-thumbs {
	position: sticky;
	top: 0;
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: 8px;
	z-index: 2;
}

.tk-gallery-thumbs__item {
	padding: 0;
	margin: 0;
	border: 1px solid transparent;
	background: none;
	cursor: pointer;
	aspect-ratio: var(--tk-product-ratio);
	overflow: hidden;
	flex: 0 0 auto;
	opacity: 0.55;
	transition: opacity 0.2s var(--tk-ease), border-color 0.2s var(--tk-ease);
}

.tk-gallery-thumbs__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tk-gallery-thumbs__item:hover,
.tk-gallery-thumbs__item:focus-visible {
	opacity: 1;
}

.tk-gallery-thumbs__item.is-active {
	opacity: 1;
	border-color: var(--tk-fg);
}

/* Foto ditumpuk vertikal — inilah yang "meluncur" saat area galeri
   di-scroll (23 Sep 2026: sempat dicoba "saat HALAMAN di-scroll" —
   dibalik lagi, lihat komentar perombakan panjang di atas). Tiap foto
   setinggi area galeri, jadi satu kali scroll = satu foto. */
.woocommerce div.product .woocommerce-product-gallery__wrapper {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+1) {
	flex: 0 0 auto;
	height: var(--tk-gallery-max);
	min-height: 420px;
}

/* Isyarat bahwa foto bisa diklik untuk diperbesar (fullscreen + zoom
   bawaan WooCommerce/PhotoSwipe). */
.woocommerce div.product div.images .woocommerce-product-gallery__image a {
	cursor: zoom-in;
}

/* Tiap sel diisi penuh oleh fotonya. object-fit: cover = foto dipotong agar
   memenuhi sel, bukan digepengkan — rasio aslinya tetap terjaga.

   ⚠️ Selector pakai `:nth-child(n+1)` (artinya "semua anak") BUKAN karena
   perlu menyaring apa-apa, tapi untuk menyamakan kekuatan dengan aturan
   woocommerce.css:
     .woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2)
       { width: 25%; display: inline-block; }
   Itu sisa gaya lama WooCommerce yang menganggap foto ke-2 dan seterusnya
   sebagai thumbnail kecil 25%. Tanpa menyamakan kekuatan selector, dua foto
   di kolom kanan menyusut jadi 79px (diverifikasi 2 Sep 2026).
   ⚠️ **JEBAKAN SPESIFISITAS DITEMUKAN 23 Sep 2026** (saat memverifikasi
   perombakan galeri hari ini) — rule ini SEBELUMNYA menyetel `height:100%`
   untuk elemen foto ITU SENDIRI, bukan cuma `<a>`-nya. Selector-nya PERSIS
   sama-persis (spesifisitas (0,5,2)) dengan rule tinggi foto di atas
   (`height: var(--tk-gallery-max)`), dan berada LEBIH BELAKANG di file —
   jadi menang lewat urutan, membuat `var(--tk-gallery-max)` TIDAK PERNAH
   benar-benar berlaku untuk elemen fotonya. `height:100%` sendiri
   terhadap induk yang tingginya `auto` (`.woocommerce-product-gallery__wrapper`,
   flex column tanpa tinggi eksplisit) dihitung SAMA DENGAN `height:auto`
   menurut spesifikasi CSS — jadi tinggi foto akhirnya murni ikut ukuran
   ASLI kontennya (rasio asli foto), bukan target "kira-kira satu layar"
   yang dimaksud. Diperbaiki dengan MEMISAH selector: `height:100%` cuma
   berlaku untuk `<a>`-nya (elemen itu memang harus mengisi penuh induknya
   supaya area klik zoom pas), elemen foto ITU SENDIRI TIDAK LAGI disentuh
   di sini — biar `height: var(--tk-gallery-max)` di rule atas yang
   menentukan tanpa lawan. */
.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+1) {
	display: block;
	width: 100%;
	min-height: 0; /* Tanpa ini, isi grid menolak mengecil dan tinggi maksimum diabaikan. */
	overflow: hidden;
	margin: 0;
	float: none;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+1) > a {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	overflow: hidden;
	margin: 0;
	float: none;
}

/* Selector disamakan kekuatannya dengan aturan gambar woocommerce.css
   (`.woocommerce div.product div.images img { width:100%; height:auto }`),
   yang kalau menang bikin foto kecil tidak mengisi tinggi selnya. */
.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+1) img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Tombol perbesar (lightbox) — tetap ada sebagai pengganti fitur zoom. */
.woocommerce div.product .woocommerce-product-gallery__trigger {
	z-index: 3;
}

/* Di layar kecil, dua kolom jadi terlalu sempit. Foto dijadikan deretan yang
   digeser ke samping dengan jari — satu foto per layar, "mengunci" tiap kali
   dilepas. Pola yang sama dipakai homepage, dan tetap memenuhi permintaan
   "lihat semua foto tanpa scroll ke bawah".
   ⚠️ Di HP, area galeri TIDAK boleh punya scroll sendiri — scroll di dalam
   scroll itu membingungkan di layar sentuh (jari sering "tersangkut" di
   area dalam dan halaman tidak ikut jalan). Diganti: semua foto jadi satu
   deretan yang digeser ke SAMPING dengan jari, satu foto per layar. Strip
   thumbnail disembunyikan karena terlalu kecil untuk ditekan.
   ⚠️ **Catatan 23 Sep 2026**: sempat dicoba membuang mekanisme ini juga
   dari DESKTOP (dengan asumsi jenis masalah yang sama), lalu dibalik lagi
   setelah diukur langsung ke tonybianco.com.au — TERNYATA scroll internal
   di desktop bukan masalahnya (mereka juga pakai mekanisme ini persis),
   yang beda cuma `scroll-snap-type` (lihat komentar di aturan dasar
   galeri). Jadi alasan breakpoint ini ("scroll di dalam scroll
   membingungkan") TETAP khusus untuk HP/layar sentuh seperti semula —
   BUKAN alasan yang sama dengan revisi desktop. */
@media (max-width: 900px) {
	.woocommerce div.product .woocommerce-product-gallery {
		display: block;
		height: auto;
		min-height: 0;
		overflow: visible;
		scroll-snap-type: none;
	}

	.tk-gallery-thumbs {
		display: none;
	}

	.woocommerce div.product .woocommerce-product-gallery__wrapper {
		flex-direction: row;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	/* ⚠️ DIROMBAK 14 Okt 2026 (revisi user, acuan sandyliang.info): SATU foto per layar — selebar penuh kolom,
	   tanpa foto berikutnya mengintip (dulu 88% + sisa 12%) — dan petunjuk ada foto lain = TITIK indikator
	   di bawah galeri (`.tk-gallery-dots`, dicetak pdp.js), bukan tepi foto. Gap antar foto 16px (terlihat saat
	   digeser; saat diam foto berikutnya di luar layar), bilah geser disembunyikan. Foto tetap tajam: sumbernya
	   `takkan-pdp` 1600×2240 + srcset, lebar tampil ≤ ~500 CSS px. */
	.woocommerce div.product .woocommerce-product-gallery__wrapper {
		gap: 16px; /* Jarak antar foto yang terlihat SAAT digeser (revisi user 14 Okt 2026, acuan Sandy Liang); saat diam foto aktif mengisi penuh dan foto berikutnya masih di luar layar. */
		scrollbar-width: none;
	}

	.woocommerce div.product .woocommerce-product-gallery__wrapper::-webkit-scrollbar {
		display: none;
	}

	.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+1) {
		flex: 0 0 100%;
		height: auto;
		min-height: 0;
		aspect-ratio: var(--tk-product-ratio);
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	/* Jarak navbar → foto di HP = 16px (revisi user 14 Okt 2026: foto lebih "penuh"). Dulu 28px: margin-atas
	   `.entry-content:not(:first-child)` GeneratePress (2em) menang atas `main.site-main` 20px karena margin
	   keduanya menyatu — keduanya diatur ulang di sini; desktop tidak berubah. */
	body.single-product main.site-main {
		margin-top: 16px;
	}

	body.single-product .entry-content {
		margin-top: 0;
	}

	.tk-gallery-dots {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		margin: 16px 0 0;
	}

	.woocommerce div.product .tk-gallery-dots .tk-gallery-dots__dot {
		width: 6px;
		height: 6px;
		min-height: 0;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: #d9d9d9; /* Belum aktif: abu lembut (revisi user 14 Okt 2026). */
		cursor: pointer;
	}

	.woocommerce div.product .tk-gallery-dots .tk-gallery-dots__dot.is-active {
		background: #8c8c8c; /* Aktif: abu sedang (revisi user 14 Okt 2026: sebelumnya terlalu gelap). */
	}
}

/* Titik indikator hanya untuk HP/tablet (≤900px); desktop memakai thumbnail vertikal. */
@media (min-width: 901px) {
	.tk-gallery-dots {
		display: none;
	}
}

/* ---------- Description/Additional information/Reviews → accordion ----------
   Pola & perilaku mengikuti referensi klien (tonybianco.com halaman produk):
   accordion ini bagian dari KOLOM KANAN (dipindah ke situ lewat JS, lihat
   pdp.js), menyatu di bawah tombol beli — bukan blok terpisah lebar-penuh.
   ⚠️ "Satu terbuka dalam satu waktu" & "tipografi tetap aturan Takkan" —
   DUA klaim di paragraf ini SUDAH TIDAK BENAR sejak 22 Sep 2026 (revisi
   user, lihat entri bertanggal di bawah masing-masing): sekarang BISA
   beberapa section terbuka bersamaan, dan judul accordion IKUT kapital +
   semibold seperti tonybianco.com. Dibiarkan tertulis di sini sebagai
   jejak sejarah keputusan, bukan dihapus — detail perubahannya ada di
   komentar dekat aturan yang berubah. */

.tk-accordion {
	max-width: 640px; /* Jaga-jaga kalau kolom kanan pernah selebar itu — dalam praktiknya kolom kanan selalu lebih sempit. */
	/* ⚠️ Warna garis DILEMBUTKAN 22 Sep 2026 (permintaan user: "warna
	   garisnya masih terlalu bold") — `var(--tk-line)` (rgba(0,0,0,0.18))
	   dianggap masih terlalu gelap di sini. Diukur LANGSUNG ke
	   tonybianco.com: garis pembatas antar section mereka bukan abu-abu
	   transparan, tapi warna SOLID nyaris putih (`rgb(248,247,245)`,
	   nyaris tidak beda dari latar mereka). Takkan pakai `#f2f2f2` —
	   BUKAN token baru, dipilih karena SUDAH jadi warna garis pembatas
	   navbar solid di seluruh situs (home.css, "angka final" 9 Sep 2026)
	   — jadi accordion PDP ini ikut konsisten dengan divider tipis yang
	   sudah dipakai di tempat lain, bukan angka baru sendiri. SENGAJA
	   TIDAK pakai var(--tk-line) yang dipakai komponen lain (mis. accordion
	   collections) — garis itu jelas lebih gelap dari yang diminta di sini. */
	border-top: 1px solid #f2f2f2;
}

.tk-accordion__item {
	border-bottom: 1px solid #f2f2f2;
}

.tk-accordion__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 16px 4px;
	margin: 0;
	background: none;
	border: none;
	font: inherit;
	/* ⚠️ Kapital + semibold DITAMBAHKAN 22 Sep 2026 (permintaan user:
	   "Tulisan title accordion nya buat jadi all capital semibold ya")
	   — MEMBALIK keputusan 22 Sep 2026 sebelumnya (sesi yang sama, jam
	   lebih awal) yang eksplisit MEMPERTAHANKAN tipografi Takkan biasa
	   di sini. Cuma dua hal yang diminta (kapital + semibold) — ukuran
	   font & letter-spacing TETAP 14px/normal, tidak ikut disamakan
	   dengan tonybianco.com (mereka 12px + letter-spacing 0.48px; tidak
	   diminta, jadi tidak ditiru). */
	text-transform: uppercase;
	font-weight: 600;
	color: var(--tk-fg);
	text-align: left;
	cursor: pointer;
}

/* ⚠️ Bug ditemukan & diverifikasi 2 Sep 2026 (laporan user): header ini
   `<button>` polos, dan GeneratePress punya aturan GLOBAL `button:hover`
   (dan `:focus`) yang mengisinya jadi kotak abu-abu gelap dengan teks
   putih — gaya tombol generik yang tidak cocok untuk baris accordion.
   Ditimpa di sini (spesifisitas class kita otomatis lebih tinggi dari
   selector `button:hover` polos GeneratePress, tidak perlu !important).
   Fokus keyboard tetap kelihatan lewat outline global di style.css
   (`:focus-visible`), jadi tidak hilang untuk pengguna keyboard. */
.tk-accordion__header:hover,
.tk-accordion__header:focus {
	background: none;
	color: var(--tk-fg);
}

.tk-accordion__chevron {
	flex: 0 0 auto;
	width: 10px;
	height: 7px;
	color: var(--tk-fg-muted);
	transition: transform 0.2s var(--tk-ease);
}

.tk-accordion__header[aria-expanded="true"] .tk-accordion__chevron {
	transform: rotate(180deg);
}

/* ---------- Animasi buka/tutup ----------
   ⚠️ DIROMBAK TOTAL 22 Sep 2026 — user minta disamakan PERSIS dengan
   tonybianco.com/collections/all/products/asti-espresso-suede-12390
   (kirim link acuan langsung), setelah revisi easing sebelumnya di hari
   yang sama masih dirasa "kaku". Diukur LANGSUNG ke halaman itu (bukan
   tebakan): mereka pakai teknik `grid-template-rows: 0fr → 1fr`, BUKAN
   `max-height` yang dipakai Takkan sebelumnya. Curve-nya
   `cubic-bezier(0.104, 0.204, 0.492, 1)`, durasi 0.4s — persis SAMA
   dengan curve yang SUDAH dipakai Takkan untuk underline navbar
   (lihat home.css), jadi bukan angka baru bagi proyek ini.

   ⚠️ KEPUTUSAN SEBELUMNYA ("grid-template-rows macet permanen begitu
   transition dipasang", dicatat 2 Sep 2026) DIBUKTIKAN SALAH DIAGNOSIS
   hari ini. Diverifikasi LANGSUNG di halaman tonybianco.com pakai teknik
   yang SAMA PERSIS sudah dipakai berkali-kali di proyek ini untuk kasus
   serupa (cabut `transition` sementara, paksa reflow, baca nilai
   sungguhan, pasang lagi): `getComputedStyle().gridTemplateRows` MEMANG
   macet di "0px" SELAMA transisi aktif — tapi begitu `transition`
   dicabut sementara, nilainya langsung benar (270.75px, tinggi konten
   sungguhan). Ini PERSIS pola kuirk `max-height`/`visibility` yang sudah
   berkali-kali terdokumentasi di proyek ini (pane alat uji tidak bisa
   membaca nilai computed selama transisi aktif) — BUKAN bug
   `grid-template-rows` sungguhan. Kesimpulan lama "angka piksel tetap
   pun ikut macet" kemungkinan besar diukur dengan cara yang sama-sama
   salah (getComputedStyle selagi transisi jalan), bukan hasil yang
   benar-benar diverifikasi dengan transition dicabut.

   Konsekuensinya JS jadi JAUH lebih sederhana (lihat pdp.js): tidak perlu
   lagi mengukur `scrollHeight`, tidak perlu `offsetHeight`-forced-reflow
   untuk mencatat titik awal animasi, tidak perlu `panel.style.display`
   ditoggle manual — CSS Grid yang mengurus semuanya, termasuk kasus
   kontennya berubah tinggi belakangan (mis. form Reviews yang melebar). */
.tk-accordion__panel {
	display: grid;
	grid-template-rows: 0fr;
	min-height: 0; /* Tanpa ini, tinggi minimum otomatis grid container tetap mengikuti konten — tidak pernah benar-benar 0. Diverifikasi sama seperti di tonybianco.com. */
	transition: grid-template-rows 0.4s cubic-bezier(0.104, 0.204, 0.492, 1);
	contain: content; /* Tetap dipertahankan dari versi lama — batasi dampak reflow ke kotak ini saja, bukan seluruh halaman. */
}

.tk-accordion__panel.is-open {
	grid-template-rows: 1fr;
}

/* Isi panel (bawaan WooCommerce) — dipindah JS jadi anak .tk-accordion__panel,
   dirapikan supaya konsisten dengan tipografi Takkan.
   ⚠️ `overflow: hidden` di SINI (pada grid ITEM, bukan grid container di
   atas) yang membuat panel benar-benar terklip ke 0px — pola yang sama
   diverifikasi di tonybianco.com (`.accordion__body` mereka juga
   `overflow:hidden`, sementara `.accordion__content` pembungkusnya
   `overflow:visible`). Elemen dengan `overflow` selain `visible` otomatis
   dapat batas tinggi minimum 0 sebagai grid item — tanpa baris ini,
   kontennya akan tetap memaksakan tingginya sendiri berapa pun kecilnya
   grid track di luar. */
.tk-accordion__item .woocommerce-Tabs-panel {
	overflow: hidden;
	max-width: 56ch;
	color: var(--tk-fg-muted);
}

/* ⚠️ JEBAKAN SPESIFISITAS (kambuhan — pola berulang di proyek ini, lihat
   catatan lain di CLAUDE.md) — ditemukan & diperbaiki 22 Sep 2026, TIGA
   RONDE (dua percobaan pertama MASIH kalah — dicatat lengkap di bawah,
   termasuk kesalahan hitungnya sendiri, supaya tidak terulang).
   `woocommerce.css` punya rule `.woocommerce div.product .woocommerce-tabs
   .panel { margin: 0 0 2em; }` (28px pada 14px).
   - Percobaan 1: samakan jadi TIGA class sendiri — masih kalah, TERNYATA
     rule WC ini juga tiga class (`.woocommerce`, `.woocommerce-tabs`,
     `.panel`) + urutan cetak `<style>` menang ke mereka.
   - Percobaan 2: dihitung ulang "harusnya 3 class juga, tapi ternyata ada
     `div.product` yang KELEWAT dihitung — `.product` di situ classnya
     SENDIRI (compound selector `div.product` = elemen `div` DITAMBAH
     class `.product`, BUKAN cuma elemen `div` polos). Jadi spesifisitas
     WC yang SEBENARNYA (0,4,1): EMPAT class (.woocommerce, .product,
     .woocommerce-tabs, .panel) + SATU elemen (div). Percobaan 2 cuma
     menyamakan ke (0,4,0) — SAMA di kolom class (4=4), tapi KALAH di
     kolom elemen (0 < 1), dan kolom elemen tetap dibandingkan kalau
     kolom class SAMA. Ketahuan lewat `document.styleSheets` — enumerasi
     SEMUA rule yang match elemen ini, bukan tebak html/CSS-nya doang.
   Diperbaiki dengan menambah SATU class ancestor lagi, `.woocommerce-tabs`
   — ANCESTOR SUNGGUHAN (accordion kita memang disisipkan JS sebagai anak
   `.woocommerce-tabs`, lihat `wrapper.insertBefore()` di pdp.js, bukan
   class dikarang cuma untuk numpang spesifisitas). Jadi LIMA class
   (0,5,0) — kolom class-nya sendiri SUDAH lebih tinggi dari lawan (5>4),
   menang tanpa perlu sampai ke kolom elemen, tanpa `!important`.
   `overflow:hidden` MENGKLIP isi & tinggi elemen ini ke 0 dengan benar
   saat tertutup, TAPI margin ada DI LUAR border-box — tidak ikut
   terklip oleh overflow milik elemen itu sendiri, dan sebagai grid ITEM
   margin itu tetap dihitung ke ukuran baris grid. Diukur langsung: tanpa
   aturan ini, `.tk-accordion__panel` yang tertutup SETELAH pernah dibuka
   tersisa 28px (bukan 0px) — beda dari kondisi awal halaman dimuat (0px,
   karena WooCommerce belum pernah men-`display:block`-kan panelnya).
   Dengan aturan ini (diverifikasi ulang setelah fix ketiga): tertutup
   SELALU 0px, baik sebelum maupun sesudah pernah dibuka berkali-kali.

   ⚠️ `padding` IKUT DIPINDAH KE SINI 22 Sep 2026 (revisi user: "Margin
   bawah saat dibuka mepet banget jelek") — rule WC di atas JUGA
   menyetel `padding:0` di selector yang SAMA, jadi kena jebakan
   SPESIFISITAS YANG SAMA PERSIS dengan margin: aturan lama
   (`padding: 0 4px 20px` di rule (0,2,0) di atas) TIDAK PERNAH benar-benar
   berlaku — diukur langsung, padding sungguhan tetap `0px` di semua sisi.
   Itu sebabnya jarak bawah terasa "mepet banget": bukan angkanya kurang,
   tapi angkanya TIDAK PERNAH kepakai sama sekali. Digabung ke sini
   (spesifisitas (0,5,0) yang sudah terbukti menang) supaya tidak perlu
   rule ketiga terpisah untuk masalah yang akar penyebabnya sama.
   ⚠️ `padding-bottom` (bukan `padding` penuh) SENGAJA HANYA di varian
   `.is-open` — ditemukan & diperbaiki saat verifikasi fix ini: `padding`
   itu bagian dari kotak elemennya SENDIRI, `overflow:hidden` cuma
   mengklip ANAK yang meluber, TIDAK PERNAH menghapus padding milik
   elemen itu sendiri. Kalau padding-bottom dipasang tanpa syarat, panel
   yang TERTUTUP (0 konten) tetap setinggi 20px (padding doang) —
   accordion tidak pernah benar-benar 0px lagi. Diukur langsung sebelum
   diperbaiki: tertutup 20px, bukan 0px. `padding-top`/`padding-left`/
   `padding-right` aman tanpa syarat (nilainya kecil/0, tidak
   mempengaruhi status "tertutup = 0px"). */
.woocommerce-tabs .tk-accordion .tk-accordion__item .tk-accordion__panel .woocommerce-Tabs-panel {
	margin: 0;
	padding: 0 4px;
}

.woocommerce-tabs .tk-accordion .tk-accordion__item .tk-accordion__panel.is-open .woocommerce-Tabs-panel {
	padding-bottom: 20px;
}

/* Tabel "Additional information" (atribut produk) — tabel polos bawaan
   WooCommerce, dirapikan pakai garis tipis yang sama dengan accordion. */
.tk-accordion__item table.woocommerce-product-attributes {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.tk-accordion__item table.woocommerce-product-attributes th,
.tk-accordion__item table.woocommerce-product-attributes td {
	padding: 10px 0;
	border-bottom: 1px solid var(--tk-line);
	text-align: left;
	font-weight: 400;
}

.tk-accordion__item table.woocommerce-product-attributes th {
	width: 140px;
	color: var(--tk-fg-muted);
}

/* Form ulasan (Reviews) — field & tombol bawaan WooCommerce. */
.tk-accordion__item #review_form textarea,
.tk-accordion__item #review_form input[type="text"],
.tk-accordion__item #review_form input[type="email"] {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	margin-top: 6px;
	background: var(--tk-bg);
	border: 1px solid var(--tk-line);
	color: var(--tk-fg);
	font: inherit;
}

.tk-accordion__item #review_form .form-submit input[type="submit"] {
	padding: 12px 24px;
	background: var(--tk-fg);
	border: 1px solid var(--tk-fg);
	color: var(--tk-bg);
	font: inherit;
	cursor: pointer;
}

.tk-accordion__item .comment-form-rating select {
	margin-top: 6px;
}

/* ---------- Pilihan warna = link ke produk saudara (color group) ---------- */

.tk-colorgroup {
	margin: 0 0 20px;
}

.tk-colorgroup__label {
	margin-bottom: 8px;
	color: var(--tk-fg-muted);
}

.tk-colorgroup__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tk-colorgroup .tk-colorgroup__item {
	box-sizing: border-box;
	display: block;
	width: 24px;
	height: 24px;
	border: 1px solid var(--tk-line);
	border-radius: 50%;
	text-decoration: none;
}

/* Warna aktif: cincin ber-jarak abu-abu, sama seperti swatch variasi. */
.tk-colorgroup .tk-colorgroup__item.is-current {
	box-shadow: 0 0 0 3px var(--tk-bg), 0 0 0 5px var(--tk-soldout);
}

/* Loading di TOMBOL saja saat Add to Cart / Preorder (25 Sep 2026) —
   teks disembunyikan, spinner kecil di tengah, ukuran tombol tetap. */
.woocommerce div.product form.cart .single_add_to_cart_button.tk-is-loading,
.woocommerce div.product form.cart .single_add_to_cart_button.tk-is-loading:disabled {
	position: relative;
	color: transparent;
	background: var(--tk-fg);
	border-color: var(--tk-fg);
	cursor: progress;
	opacity: 1;
}

.woocommerce div.product form.cart .single_add_to_cart_button.tk-is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 1.5px solid rgba(255, 255, 255, 0.35);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: tk-btn-spin 0.7s linear infinite;
}

@keyframes tk-btn-spin {
	to {
		transform: rotate(360deg);
	}
}