/**
 * Dropdown "Collections" — nav utility, bukan modal.
 *
 * Beda dari cart drawer/region picker (full panel/modal): ini dropdown yang
 * nempel tepat di bawah trigger-nya, pola umum nav dropdown. Dibuka lewat
 * KLIK (bukan hover) — konsisten dengan tombol "Menu" Home yang sudah ada,
 * supaya perilakunya identik di desktop maupun HP tanpa logic hover-intent
 * terpisah.
 */

/* ---------- Trigger di Home page (topbar & overlay menu HP) ----------
   Elemen sendiri di page-home.php, token overlay yang sama seperti
   Cart/Menu/region di sebelahnya (lihat home.css / region-picker.css). */
.tk-home-topbar__collections,
.tk-home-menu__collections {
	background: none;
	border: none;
	padding: 0;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

/* ⚠️ DITAMBAHKAN 8 Sep 2026 — dilaporkan user: trigger "Shoes" di overlay
   menu HP "jadi warna putih" sesaat setelah disentuh. Diperiksa: warna
   CSS-nya sendiri TIDAK berubah (dicek `getComputedStyle` sebelum/sesudah
   klik & fokus — tetap `#2A2A2A` di kedua kondisi). Penyebabnya bukan
   aturan warna kita, tapi `-webkit-tap-highlight-color` — highlight
   bawaan Safari/Chrome Android yang menimpa elemen dengan lapisan warna
   terang sesaat saat disentuh (defaultnya belum tentu transparan). Dulu
   tidak masalah di atas kanvas GELAP (highlight terangnya menyatu), tapi
   sejak overlay menu ini jadi TERANG (revisi hari ini), highlight yang
   sama jadi terlihat sebagai "kilatan putih" di atas teks yang juga
   sudah terang. Dimatikan di sini untuk SEMUA tombol/tautan di dalam
   menu ini, bukan cuma trigger "Shoes" — kuirk yang sama berpotensi
   muncul di tombol lain (USD, search, footer). */
.tk-home-menu button,
.tk-home-menu a {
	-webkit-tap-highlight-color: transparent;
}

/* ⚠️ DITAMBAHKAN 8 Sep 2026 — revisi user: "kalo aktif dibuat semibold
   aja" — indikator "Shoes sedang terbuka" diminta BUKAN lewat warna
   (itu penyebab bug di atas), tapi lewat ketebalan huruf. Weight dasarnya
   400 (lihat style.css, seluruh situs pakai berat itu); 600 di sini
   SATU-SATUNYA tempat semibold dipakai untuk trigger ini.
   ⚠️ SELECTOR DIUBAH 13 Sep 2026 — dulu `[aria-expanded="true"]` langsung
   di elemen ini, TAPI sejak label "Shoes" dipecah jadi `<a>` terpisah
   dari tombol toggle (lihat catatan panjang di
   `takkan_dropdown_trigger_button_html()`, functions.php), atribut
   `aria-expanded` sekarang ada di TOMBOL toggle-nya, BUKAN lagi di label
   ini — selector lama tidak akan pernah match lagi kalau dibiarkan.
   Sekarang berbasis class `.is-open` pada WADAHNYA (`.tk-collections-
   dropdown`, di-toggle JS terlepas dari perubahan markup di atas). */
.tk-collections-dropdown.is-open .tk-home-menu__collections {
	font-weight: 600;
}

/* Baris trigger DI DALAM overlay menu HP: label rata kiri, chevron rata
   kanan — layout baris accordion konvensional (permintaan user 8 Sep
   2026, acuan tonybianco.com).
   ⚠️ Layout-nya PINDAH ke WADAHNYA 13 Sep 2026 — dulu `<button>` tunggal
   ini yang jadi flex container (label & chevron adalah ANAK dari elemen
   yang sama). Sekarang label (`<a>`) dan tombol chevron adalah dua
   elemen BERSEBELAHAN (lihat catatan di functions.php), jadi yang perlu
   `display:flex; justify-content:space-between` adalah WADAH keduanya —
   lihat `.tk-home-menu .tk-collections-dropdown` di bawah. Elemen ini
   sendiri sekarang cukup jadi teks biasa, lebarnya mengikuti isinya. */

/* Ikon chevron accordion. Menghadap BAWAH secara default ("ada lagi di
   bawah sini"), berputar 180° saat terbuka.
   ⚠️ Dulu HANYA muncul di context 'menu' (overlay HP) — sejak 13 Sep 2026
   SELALU dicetak (baca catatan panjang di `takkan_dropdown_trigger_
   button_html()`, functions.php): dia sekarang jadi SATU-SATUNYA cara
   membuka dropdown di perangkat tanpa hover (termasuk touchscreen di
   lebar layar desktop), karena label-nya sendiri sudah jadi link
   navigasi biasa, bukan lagi tombol toggle. */
.tk-collections-dropdown__chevron {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	margin-left: 8px;
	transition: transform var(--tk-duration) var(--tk-ease);
}

.tk-collections-dropdown.is-open .tk-collections-dropdown__chevron {
	transform: rotate(180deg);
}

/* ⚠️ DITAMBAHKAN 14 Sep 2026 — chevron KANAN (overlay menu HP) TIDAK ikut
   berputar. Putaran 180° di atas adalah bahasa "accordion mengembang /
   menutup lagi"; chevron kanan artinya "buka panel baru", dan panel itu
   langsung MENUTUPI trigger ini sepenuhnya begitu terbuka — jadi putaran
   apa pun tidak akan pernah terlihat, cuma menyisakan animasi mubazir. */
.tk-collections-dropdown.is-open .tk-collections-dropdown__chevron--right {
	transform: none;
}

/* ⚠️ DITAMBAHKAN 13 Sep 2026 — tombol toggle KECIL (cuma ikon chevron),
   terpisah dari label link. Reset dasar tombol polos + disejajarkan
   tengah dengan tinggi baris label di sebelahnya. Warnanya `currentColor`
   dari SVG-nya sendiri, jadi `color:inherit` di sini yang membuatnya
   otomatis ikut warna teks navbar (putih di Home transparan, hitam di
   halaman lain) tanpa aturan warna tambahan — pola yang sama seperti
   ikon lain di navbar. */
.tk-collections-dropdown__toggle {
	display: inline-flex;
	align-items: center;
	background: none;
	border: none;
	padding: 0;
	margin-left: 4px;
	color: inherit;
	cursor: pointer;
	vertical-align: middle;
}

.tk-collections-dropdown__toggle .tk-collections-dropdown__chevron {
	/* Di sini chevron berdiri sendiri (bukan menempel di ujung teks
	   dalam satu tombol seperti dulu) — jarak ke label diatur `margin-
	   left` tombolnya sendiri di atas, bukan lagi margin pada chevron. */
	margin-left: 0;
}

/* ⚠️ DITAMBAHKAN 13 Sep 2026 — chevron DISEMBUNYIKAN di navbar desktop
   pada perangkat yang PUNYA hover. Diperiksa langsung ke tonybianco.com
   (acuan yang diminta user): di sana item ber-dropdown adalah
   `<li class="menu-item-has-children"><a href="/collections/heels">HEELS
   </a><div class="sub-menu">…</div></li>` — NOL tombol, NOL svg, NOL
   chevron. Hover membuka mega menu, klik langsung pindah ke halaman
   berisi semua produk kategori itu. Chevron yang sempat dipasang di sini
   (versi pertama 13 Sep) membuat navbar tidak lagi mirip acuan.
   ⚠️ SENGAJA `(hover: hover)`, BUKAN dihapus dari markup: perangkat
   sentuh selebar desktop (tablet/laptop layar sentuh, ≥768px sehingga
   TIDAK dapat overlay menu HP) tidak punya hover sama sekali, dan sejak
   label jadi link navigasi murni, chevron ini SATU-SATUNYA cara mereka
   membuka dropdown. Pola deteksi yang sama sudah dipakai di beberapa
   tempat lain di proyek ini (galeri hero, quick-add PLP).
   ⚠️ Di-scope ke `.tk-home-topbar__nav` saja — chevron di overlay menu
   HP (`.tk-home-menu`) TIDAK terpengaruh, di sana dia memang accordion
   dan wajib selalu ada. */
@media (hover: hover) {
	.tk-home-topbar__nav .tk-collections-dropdown__toggle {
		display: none;
	}
}

/* Sama seperti catatan di atas: background harus dimatikan eksplisit di
   :hover DAN :focus supaya tidak dapat kotak abu-abu dari GeneratePress.
   Berlaku untuk label ATAUPUN tombol chevron — dua-duanya `<a>`/`<button>`
   sungguhan yang bisa kena kuirk yang sama. */
.tk-home-topbar__collections:hover,
.tk-home-topbar__collections:focus,
.tk-collections-dropdown__toggle:hover,
.tk-collections-dropdown__toggle:focus {
	background: none;
	opacity: 0.7;
}

/* ⚠️ Trigger MENU HP sengaja TIDAK ikut diredupkan (`opacity`) — dulu
   satu selector dengan trigger topbar di atas. Dilaporkan user 8 Sep
   2026: "setelah terbuka, warna teksnya jangan dibuat abu-abu, tetep
   putih". Penyebabnya: perangkat sentuh MEMPERTAHANKAN status `:focus`
   sesudah disentuh sampai pengguna menyentuh elemen lain (kuirk yang
   sama berulang di proyek ini) — jadi begitu trigger "Shoes" disentuh
   & dibuka, dia lewat opacity:0.7 terus-menerus, bukan cuma sekilas
   seperti feedback hover yang wajar di mouse. `background: none` TETAP
   ada (masih perlu untuk kuirk kotak abu-abu GeneratePress).
   ⚠️ Tombol chevron di overlay HP (`.tk-collections-dropdown__toggle`)
   IKUT dikecualikan di sini (13 Sep 2026) — kuirk `:focus` menempel yang
   sama berlaku untuknya juga sejak dia jadi elemen terpisah. */
.tk-home-menu__collections:hover,
.tk-home-menu__collections:focus,
.tk-home-menu .tk-collections-dropdown__toggle:hover,
.tk-home-menu .tk-collections-dropdown__toggle:focus {
	background: none;
	opacity: 1;
}

/* ⚠️ DITAMBAHKAN 14 Sep 2026 — area sentuh chevron diperbesar. Sejak label
   "Shoes" jadi link navigasi (13 Sep), chevron ini SATU-SATUNYA cara membuka
   sub-panel di HP — tapi ikonnya cuma 16px, jauh di bawah ukuran target
   sentuh yang nyaman. `padding` menambah area yang bisa ditekan; `margin`
   negatif yang sama persis menariknya kembali, jadi POSISI IKON DI LAYAR
   TIDAK BERGESER sedikit pun (termasuk tetap mepet ke tepi kanan panel —
   wadahnya `justify-content: space-between`). */
.tk-home-menu .tk-collections-dropdown__toggle {
	padding: 10px;
	margin: -10px -10px -10px 0;
}

/* ⚠️ DIKEMBALIKAN 14 Sep 2026 — label di overlay HP jadi SATU tombol utuh
   selebar baris lagi (label + chevron di dalamnya), seperti sebelum 13 Sep,
   karena sekarang SELURUH barisnya yang membuka panel (pola TB di HP; baca
   alasan lengkapnya di takkan_dropdown_trigger_button_html(), functions.php).
   Dengan begitu area ketuknya sebesar satu baris penuh — bukan lagi ikon
   16px di ujung kanan yang gampang meleset, yang jadi keluhan user.
   ⚠️ `.tk-collections-dropdown__toggle` di atas SENGAJA dibiarkan: dia masih
   dipakai konteks TOPBAR pada perangkat sentuh selebar desktop. */
.tk-home-menu__collections {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

/* Baris "All Shoes" di dalam panel — satu-satunya jalan ke halaman "semua
   produk" dari HP sejak labelnya berhenti jadi link. Dibedakan dari tautan
   koleksi/kategori di bawahnya lewat posisi (berdiri sendiri, di atas kedua
   kolom) dan jarak, bukan lewat ukuran huruf — seluruh situs ini satu ukuran
   teks (lihat CLAUDE.md). */
/* ⚠️ Dipakai di DUA konteks sejak 14 Sep 2026 — pita dropdown desktop
   (`.tk-collections-dropdown__panel`, `color:#000000` langsung di panel)
   MAUPUN overlay menu HP (`.tk-home-menu`, token `--tk-overlay-fg`).
   `color: var(--tk-overlay-fg)` di sini SENGAJA tidak diberi fallback —
   di desktop custom property itu tidak terdefinisi sama sekali, dan untuk
   properti yang diwariskan (`color` termasuk), `var()` yang tidak valid
   jatuh balik ke nilai WARISAN, yaitu `#000000` dari panelnya sendiri.
   Jadi satu aturan ini otomatis benar di kedua tempat tanpa perlu ditulis
   dua kali. */
.tk-collections-dropdown__all {
	/* ⚠️ `inline-block`, BUKAN `block` — bug SAMA PERSIS dengan kasus "KANSA"
	   13 Sep 2026, ronde kedua. Elemen ini `<a>` di dalam `.tk-home-topbar__nav`,
	   jadi ikut kena mekanisme underline animasi bersama
	   (`.tk-home-topbar__nav a::after { left:0; right:0; }`, home.css) yang
	   dipatok selebar KOTAK `<a>`-nya. Dengan `display:block` kotaknya
	   melebar selebar panel (dilaporkan user, kirim screenshot: garis di
	   bawah "ALL SHOES" memanjang sampai ujung panel). `inline-block`
	   membuat kotaknya menciut pas sebesar teks — pola perbaikan yang
	   IDENTIK dengan `.tk-collections-dropdown__list a` (lihat catatan di
	   situ), cukup diterapkan langsung di sini tanpa perlu diselidiki ulang. */
	display: inline-block;
	flex: 0 0 auto;
	padding: 0 0 4px;
	/* 15px → jarak "ALL SHOES" ke judul kolom ("Shop by …") 24px dari tulisan
	   ke tulisan (diukur: padding 4px + margin 15px + ruang huruf ±5px), revisi
	   user 9 Okt 2026 ("terlalu jauh, 24px aja"); dulu 20px = 29px. Berlaku di
	   desktop DAN overlay HP (satu aturan untuk dua konteks, lihat atas). */
	margin: 0 0 15px;
	color: var(--tk-overlay-fg);
	/* ⚠️ DITAMBAHKAN 14 Sep 2026 (permintaan user). Satu dari sedikit tempat
	   di situs ini yang memakai berat huruf selain 400 — seluruh situs sengaja
	   satu ukuran & satu berat (lihat CLAUDE.md), hierarki dibangun lewat
	   warna. Dikecualikan di sini karena baris ini beda JENIS dari daftar di
	   bawahnya: dia tujuan utama panel ("semua produk"), bukan salah satu
	   pilihan penyaring — dan di acuan TB pun "ALL" (judul kolom pertama)
	   ditebalkan sebagai heading, bukan item biasa.
	   Berat yang dipakai 600, SAMA dengan penanda "dropdown sedang terbuka"
	   yang sudah ada — bukan angka baru. */
	font-weight: 600;
}

.tk-collections-dropdown__all:hover {
	opacity: 0.7;
}

/* ⚠️ RIWAYAT PANJANG 8 Sep 2026 — trigger "Shoes" ini sudah 3 kali
   direvisi soal warna (putih saat disentuh → tap-highlight dimatikan;
   putih saat terbuka → rule `[aria-expanded="true"]`; PUTIH LAGI saat
   TERTUTUP → rule `color: inherit`/`var(--tk-overlay-fg)` yang benar
   secara teori & lolos di alat uji, TAPI user tetap melihat putih di HP
   asli walau sudah tutup-buka browser total).
   ⚠️ AKAR MASALAH SEBENARNYA DITEMUKAN: GeneratePress mencetak
   `<style>` inline di `<head>` berisi `button{color:#ffffff;
   background-color:#55555e}` (dari setelan warna tombol Customizer) —
   INI target generik `button` (spesifisitas elemen, 0-0-1), yang
   SEHARUSNYA kalah dari selector class kita (0-1-0). Diverifikasi lewat
   fetch langsung ke server (bukan dari cache manapun, URL dengan angka
   acak yang belum pernah diminta siapapun) bahwa file CSS di server
   MEMANG sudah benar, dan browser alat uji sendiri merender warna
   dengan benar — tapi HP user tetap menunjukkan putih. Karena akar
   masalah tidak bisa dipastikan 100% (kemungkinan sisa: urutan
   pemuatan stylesheet di kondisi tertentu, atau custom property yang
   entah kenapa tidak sampai), `!important` dipakai DI SINI SAJA sebagai
   penyelesaian pasti — bukan kebiasaan di proyek ini (lihat CLAUDE.md:
   "aturan kita harus menyamai panjangnya, bukan !important"), tapi
   selector spesifik ini sudah 3 ronde kalah tanpanya jadi pengecualian
   yang disengaja & didokumentasikan. Warna juga ditulis literal
   `#2a2a2a` (bukan `var(--tk-overlay-fg)`) supaya tidak bergantung pada
   custom property sama sekali. Berlaku untuk KEDUA status (terbuka
   maupun tertutup) — satu rule, tanpa `[aria-expanded]`. */
.tk-home-menu__collections {
	color: #2a2a2a !important;
}

/* ---------- Panel dropdown ----------
   ⚠️ Bentuknya diubah 4 Sep 2026 atas permintaan user (kirim screenshot
   commission.nyc): BUKAN kotak kecil melayang di bawah trigger seperti
   versi pertama, tapi **pita PUTIH selebar layar** yang membuka tepat di
   bawah navbar — navbar + daftar koleksi terbaca sebagai SATU blok putih
   utuh, dan isinya daftar teks polos rata kiri (tanpa kotak, tanpa border,
   tanpa highlight per baris).

   `top`-nya di-set JS dari posisi trigger yang sesungguhnya (lihat
   collections-menu.js), BUKAN angka tetap di CSS — karena tinggi bagian
   atas halaman beda antara Home (navbar sendiri) dan halaman WooCommerce
   biasa (header GeneratePress), dan bisa berubah lagi kalau header diubah.
   Satu mekanisme, otomatis benar di kedua tempat. */
.tk-collections-dropdown {
	position: static; /* Panel-nya fixed selebar layar, jadi wrapper ini TIDAK boleh jadi containing block-nya. */
	display: inline-block;
}

.tk-collections-dropdown__panel {
	position: fixed;
	left: 0;
	right: 0;
	/* top di-set JS */
	background: #ffffff;
	color: #000000;
	padding: 24px 20px 28px;
	/* ⚠️ SENGAJA TANPA transition — permintaan user 4 Sep 2026: "kebukanya
	   langsung instant aja gausah pake animasi". Sama alasannya seperti efek
	   hover navbar Home yang juga dibuat instan: umpan balik navigasi harus
	   terasa langsung menjawab, beda dengan transisi konten (galeri) yang
	   memang sengaja kalem. */
	display: none;
	z-index: 95;
}

.tk-collections-dropdown.is-open .tk-collections-dropdown__panel {
	display: block;
}

/* ⚠️ Penanda "sedang terbuka" TIDAK lagi pakai `text-decoration: underline`
   (5 Sep 2026) — sejak underline navbar jadi garis beranimasi `::after`
   (lihat home.css), dua mekanisme itu akan menghasilkan DUA garis
   bertumpuk. Aturan penandanya sekarang ada di home.css, memakai `::after`
   yang sama persis. */

.tk-collections-dropdown__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Daftar teks polos — sengaja TANPA padding kotak/background per baris,
   supaya terbaca seperti daftar editorial, bukan menu aplikasi.
   ⚠️ `inline-block`, BUKAN `block` (direvisi 13 Sep 2026) — link ini
   berada di dalam `.tk-home-topbar__nav`, jadi ikut kena garis bawah
   animasi bersama (`.tk-home-topbar__nav a::after`, lihat home.css) yang
   dipatok `left:0; right:0` — lebar garisnya ikut lebar KOTAK `<a>`-nya,
   bukan ikut lebar teks. Waktu `<a>`-nya `display:block` (supaya area
   klik penuh satu baris), kotaknya melebar sampai ujung kolom, jadi
   garis bawahnya ikut sepanjang itu — jauh lebih panjang dari teksnya
   sendiri (dilaporkan user, kirim screenshot: "KANSA" garisnya sampai
   ujung kolom). `inline-block` membuat kotak `<a>`-nya menciut pas
   sebesar teksnya sendiri (tinggi baris dari `padding:4px 0` tetap
   sama), jadi garis `left:0;right:0` ikut pas sepanjang teks — tanpa
   perlu mengubah mekanisme underline bersama itu sendiri. */
.tk-collections-dropdown__list a {
	display: inline-block;
	padding: 4px 0;
	color: #000000;
}

.tk-collections-dropdown__list a:hover {
	opacity: 0.6;
	text-decoration: none;
}

.tk-collections-dropdown__empty {
	margin: 0;
	color: rgba(0, 0, 0, 0.55);
}

/* Di dalam overlay menu HP Home, panel-nya JANGAN jadi pita putih selebar
   layar — overlay itu sendiri sudah gelap & penuh layar, pita putih di
   tengahnya akan terlihat seperti elemen nyasar. Di sini dia mengalir biasa
   sebagai sub-daftar di bawah "Collections", ikut warna overlay. */
/* ⚠️ DIROMBAK 13 Sep 2026 — dulu `display: block` polos, dan baris
   "label rata kiri, chevron rata kanan" diurus SEPENUHNYA oleh
   `<button>` tunggal di dalamnya sendiri (flex, justify-content:
   space-between DI DALAM satu elemen itu). Sejak label & tombol chevron
   jadi dua elemen BERSEBELAHAN (lihat functions.php), wadah INI yang
   harus mengatur keduanya berjajar & rata ke ujung — makanya sekarang
   `display:flex` di sini, bukan lagi di elemen labelnya.
   ⚠️ `flex-wrap: wrap` + `flex-basis:100%` pada `.tk-collections-
   dropdown__panel` (lihat bawah) WAJIB berpasangan — wadah ini juga
   membungkus PANEL accordion (anak ketiga, sejajar dengan label & tombol
   chevron), dan panel itu harus tetap jatuh ke BARIS BARU di bawah,
   bukan ikut sejajar horizontal seperti dua anak sebelumnya. */
.tk-home-menu .tk-collections-dropdown {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	/* ⚠️ DITAMBAHKAN 8 Sep 2026 — revisi user: "posisi akordionnya dibuat
	   diujung aja kaya tony bianco" (chevron-nya nempel di TEPI KANAN
	   panel, bukan cuma di sebelah teks "Shoes"). Bug-nya: `.tk-home-menu__nav`
	   punya `align-items: flex-start`, jadi tiap ITEM di dalamnya (termasuk
	   wrapper ini) cuma selebar KONTENnya sendiri (shrink-to-fit) — tombol
	   di dalamnya sudah `width: 100%`, tapi 100% dari wrapper yang SENDIRI
	   belum selebar baris, jadi chevron cuma nempel pas di sebelah tulisan
	   "Shoes", bukan di ujung. `width: 100%` di sini yang membuat wrapper
	   (dan tombol di dalamnya) akhirnya benar-benar selebar panel. */
	width: 100%;
}

/* ⚠️ Versi 4 Sep 2026 pakai `max-height: 0 → 400px` + transition — ITU
   BUG, dua masalah: (1) angka 400px tebakan, kepotong kalau isinya lebih
   panjang; (2) transisi PROPERTI LAYOUT (max-height) macet permanen di
   nilai awal di alat uji proyek ini (terukur 0px terus walau class
   `.is-open` sudah ada). Diganti `display: none/block` (instan) waktu itu
   untuk MENGHINDARI kedua masalah sekaligus, sesuai permintaan user saat
   itu juga: "kebukanya langsung instant aja".

   ⚠️ DIUBAH LAGI 8 Sep 2026 — permintaan BARU user: "buat kaya accordion
   ... buat smooth open" (acuan tonybianco.com). Kali ini TIDAK jatuh ke
   masalah yang sama: tinggi targetnya BUKAN angka tebakan di CSS,
   tapi diukur JS dari `scrollHeight` KONTEN SESUNGGUHNYA setiap kali
   dibuka (lihat animateAccordionPanel() di collections-menu.js) — jadi
   otomatis pas berapa pun panjang isinya, termasuk kalau nanti klien
   menambah banyak koleksi/kategori.
   ⚠️ Soal keterbatasan alat uji: transisi ini TIDAK BISA dibuktikan lewat
   `getComputedStyle()` di sesi kerja ini (page tersembunyi/`hidden`
   membuat transisi CSS tidak pernah "selesai" secara terukur — pelajaran
   yang sama seperti kasus 4 Sep). Yang DIVERIFIKASI sebagai gantinya:
   nilai `style.height` yang di-SET oleh JS (bukan hasil animasinya),
   dan `scrollHeight` konten sebelum/sesudah — kebenaran visual/kehalusan
   animasinya sendiri perlu dicek user di perangkat asli.
   ⚠️ Pita band-style (desktop & halaman WooCommerce biasa) TIDAK
   disentuh — aturan `display: none/block` instan di atas tetap berlaku
   untuk itu, cuma di-override DI SINI untuk konteks overlay menu HP.

   ⚠️ **DIBALIK LAGI 14 Sep 2026 — accordion DIGANTI SUB-PANEL GESER DARI
   KANAN**, permintaan user ("navbar menu shoes mobile ... ganti dropdown
   jadi modal dari kanan", acuan tonybianco.com). Jadi seluruh mekanisme
   `height`/`scrollHeight` di atas SUDAH TIDAK DIPAKAI LAGI di sini —
   `animateAccordionPanel()` ikut dibuang dari collections-menu.js, bukan
   cuma di-nonaktifkan. Riwayat di atas sengaja disimpan karena menjelaskan
   kenapa `max-height` angka tetap TIDAK BOLEH dipakai kalau kelak ada yang
   mau membuat accordion lagi di proyek ini.
   Pola barunya dipinjam dari TB apa adanya (diukur langsung dari DOM
   mereka): panel `position:absolute; inset:0` menutupi SELURUH overlay
   menu, `transform: translateX(100%)` saat tertutup → `translateX(0)` saat
   terbuka. Ini juga pola yang SUDAH ADA di situs ini (cart drawer & region
   picker sama-sama geser dari kanan) — bukan pola baru.
   ⚠️ `position: absolute`, BUKAN `fixed`. Dua-duanya "kebetulan" benar di
   sini (`.tk-home-menu` punya `transform`, jadi dia jadi containing block
   untuk keturunan `fixed` juga — kuirk yang sudah tercatat di CLAUDE.md),
   tapi `absolute` benar karena alasan yang LANGSUNG terbaca: `.tk-home-menu`
   memang `position: fixed; inset: 0`. Jangan diganti ke `fixed` — itu
   membuatnya bergantung pada kuirk transform yang bisa hilang diam-diam
   kalau animasi overlay kelak diubah.
   ⚠️ `.tk-collections-dropdown` sendiri `position: static` (lihat aturan
   dasarnya di atas) — itu WAJIB supaya panel ini berlabuh ke overlay,
   bukan ke wrapper "Shoes" yang cuma setinggi satu baris. */
/* ⚠️ Selector SENGAJA menyertakan `.tk-collections-dropdown` (spesifisitas
   0,3,0) — bukan `.tk-home-menu .tk-collections-dropdown__panel` (0,2,0)
   seperti tulisan pertama 14 Sep 2026. Aturan band-style di atas
   (`.tk-collections-dropdown.is-open .tk-collections-dropdown__panel`)
   juga (0,3,0) dan menyetel `display: block`; versi (0,2,0) KALAH begitu
   panelnya terbuka, jadi `display:flex` di sini diam-diam tidak pernah
   berlaku saat panel tampil (terukur: `display` terbaca `block`, bukan
   `flex`). Dengan spesifisitas yang sama, aturan ini menang karena ditulis
   BELAKANGAN — pola yang sama seperti perbaikan hover Cart/USD 6 Sep. */
.tk-home-menu .tk-collections-dropdown .tk-collections-dropdown__panel {
	position: absolute;
	/* ⚠️ `bottom: auto` (bukan `inset: 0`) sejak 14 Sep 2026 — permintaan
	   user: "tinggi overlaynya dibuat hug content aja". Jadi panel menempel
	   di atas & melar penuh ke kiri-kanan, tapi tingginya MENGIKUTI ISINYA,
	   tidak lagi satu layar penuh.
	   ⚠️ `max-height: 100%` WAJIB berpasangan dengan ini: begitu klien
	   menambah banyak koleksi/kategori, isinya bisa melebihi tinggi layar —
	   tanpa batas ini panel akan memanjang keluar layar dan bagian bawahnya
	   tidak akan pernah bisa dijangkau (panel ini `position:absolute`, jadi
	   tidak ikut ter-scroll oleh halaman). Dengan `max-height` + `overflow-y`
	   di bawah, isinya jadi bisa digulir di dalam panelnya sendiri. */
	top: 0;
	left: 0;
	right: 0;
	bottom: auto;
	max-height: 100%;
	z-index: 1;
	display: flex;
	flex-direction: column;
	padding: 20px; /* Disamakan dengan padding `.tk-home-menu` (home.css) supaya isinya sebaris lurus dengan menu di belakangnya. */
	box-sizing: border-box;
	/* ⚠️ `--tk-overlay-solid` (PADAT), BUKAN `--tk-overlay` (rgba 0.9).
	   Percobaan pertama memakai `--tk-overlay` dengan alasan "dua lapis 0.9
	   bertumpuk jadi ±0.99" — ITU SALAH HITUNG: lapisan 0.9 meneruskan 10%
	   dari apa pun di belakangnya, dan yang di belakang panel ini adalah
	   teks menu utamanya sendiri. Terbukti lewat screenshot: "TRACK ORDER",
	   "INFO", "ACCOUNT" terbaca menembus panel. Tokennya didefinisikan di
	   home.css bersama token overlay lainnya. */
	background: var(--tk-overlay-solid);
	color: inherit;
	overflow-y: auto;
	transform: translateX(100%);
	visibility: hidden;
	/* ⚠️ `visibility` DIGANTI JADI SAKLAR BERJEDA (`0s linear <jeda>`),
	   BUKAN lagi ikut dianimasikan selama durasi transisi — diperbaiki
	   14 Sep 2026 setelah user melaporkan panel "gabisa kebuka".
	   Bug-nya: `transition: … , visibility <durasi>` mengandalkan aturan
	   interpolasi khusus `visibility` di spesifikasi ("dianggap `visible`
	   sepanjang durasi kalau salah satu ujungnya `visible`). Terukur di
	   staging, itu TIDAK terjadi: sesaat setelah chevron diketuk,
	   `visibility` panel masih terbaca `hidden` — sementara menu utama di
	   belakangnya SUDAH `hidden` seketika (aturan `:has()` di bawah tidak
	   punya transisi). Hasilnya layar benar-benar KOSONG selama transisi,
	   dan itu yang dibaca user sebagai "tidak bisa dibuka".
	   Pola `0s linear` ini deterministik, tidak bergantung interpolasi:
	   - TUTUP (aturan ini): visibility baru berubah jadi `hidden` SETELAH
	     jeda selama durasi — jadi panel tetap terlihat selama menggeser
	     keluar, tidak lenyap seketika.
	   - BUKA (aturan `.is-open` di bawah): jeda 0 → `visible` SEKETIKA,
	     jadi tidak akan pernah ada jendela kosong lagi.
	   ⚠️ Jangan gabungkan lagi `visibility` ke dalam transisi berdurasi. */
	transition: transform var(--tk-duration) var(--tk-ease), visibility 0s linear var(--tk-duration);
}

.tk-home-menu .tk-collections-dropdown.is-open .tk-collections-dropdown__panel {
	transform: translateX(0);
	visibility: visible;
	transition: transform var(--tk-duration) var(--tk-ease), visibility 0s linear 0s;
}

/* ⚠️ DITAMBAHKAN 14 Sep 2026, WAJIB berpasangan dengan `bottom: auto` di
   atas. Sejak panel tidak lagi setinggi layar penuh, isi menu utama
   (ALL / NEW ARRIVALS / SHOES / SEARCH / USD / TRACK ORDER / ...) akan
   nyeplos kelihatan di area kosong DI BAWAH panel — terbaca seperti dua
   menu bertumpuk. Disembunyikan selama sub-panel terbuka.
   ⚠️ `visibility`, BUKAN `display: none`: `visibility` DIWARISI dan bisa
   dibalik lagi jadi `visible` oleh keturunannya — itu yang membuat panel
   (yang letaknya DI DALAM `.tk-home-menu__nav` yang sedang disembunyikan)
   tetap tampil, lewat aturan `.is-open` tepat di atas. `display:none` akan
   ikut menghilangkan panelnya sendiri dan tidak bisa dibatalkan dari dalam.
   ⚠️ Pakai `:has()` supaya tidak perlu class tambahan yang di-toggle JS —
   sudah dipakai & diverifikasi di proyek ini untuk inversi navbar Home
   (`CSS.supports('selector(:has(a))')` true di browser target). Kalau
   kelak ada browser yang tidak mendukung, akibatnya cuma kembali ke
   perilaku sebelum perubahan ini (teks menu terlihat di bawah panel) —
   bukan menu yang rusak. */
.tk-home-menu:has(.tk-collections-dropdown.is-open) > * {
	visibility: hidden;
}

/* Baris "kembali" di paling atas sub-panel: chevron KIRI + nama induknya
   ("SHOES") — satu-satunya jalan keluar dari sub-panel ini, karena panelnya
   menutupi menu di belakangnya sepenuhnya (persis TB: mereka menyebutnya
   `parent-link-back`, chevron kiri `M7.5 9L4.5 6L7.5 3` + nama induk).
   ⚠️ Markup-nya DISUNTIKKAN JS (lihat collections-menu.js), bukan dicetak
   PHP — panel ini dicetak dari EMPAT tempat berbeda di functions.php (dua
   jalur walker + dua jalur fallback), jadi menambahkannya di PHP berarti
   empat salinan markup yang gampang melenceng sendiri-sendiri. Labelnya
   diambil dari teks trigger-nya sendiri, jadi otomatis benar untuk item
   menu APAPUN yang klien buat beranak. Tanpa JS panel ini memang tidak
   pernah bisa dibuka sama sekali, jadi tidak ada yang hilang. */
.tk-collections-dropdown__back {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	background: none;
	border: none;
	/* ⚠️ GARIS PEMBATAS DITAMBAHKAN 14 Sep 2026 — permintaan user: "title
	   menunya diatas dan ada divider halus" (acuan screenshot TB HP, di
	   sana persis begitu: judul, garis tipis, baru isinya).
	   Dipakai `--tk-overlay-line` (rgba 0.18) — token PALING SAMAR yang
	   sudah ada, memang untuk garis yang cuma memisahkan tanpa menarik
	   perhatian ("halus"). ⚠️ JANGAN dinaikkan ke `--tk-overlay-fg-muted`
	   (0.55): itu token untuk garis pembatas SEKSI di footer overlay, yang
	   8 Sep 2026 justru sengaja ditegaskan supaya BEDA dari garis samar
	   ini. Kalau keduanya disamakan, pembedaan itu hilang lagi.
	   Garisnya otomatis selebar panel: tombol ini anak dari panel yang
	   `flex-direction: column`, jadi melar penuh di sumbu silang. */
	border-bottom: 1px solid var(--tk-overlay-line);
	margin: 0 0 20px;
	padding: 0 0 16px;
	color: inherit;
	font: inherit;
	line-height: inherit;
	text-align: left;
	cursor: pointer;
}

.tk-collections-dropdown__back .tk-icon {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

/* Kuirk kotak abu-abu GeneratePress lagi (`button:hover/:focus`) — pola yang
   sama seperti tombol-tombol lain di overlay ini. TANPA peredupan opacity:
   perangkat sentuh mempertahankan `:focus` setelah disentuh, dan tombol ini
   PASTI baru saja disentuh setiap kali panel tertutup. */
.tk-collections-dropdown__back:hover,
.tk-collections-dropdown__back:focus {
	background: none;
	opacity: 1;
}

/* ⚠️ DIUBAH 8 Sep 2026 — revisi user: "dropdownnya pas kebuka masih
   cluttered, hirarkinya gajelas mana yang title mana yang menu". Akar
   masalahnya: link INI dan judul kolom (`.tk-dropdown-columns__title` di
   bawah) dulu SAMA-SAMA pakai `--tk-overlay-fg-muted` sebagai warna
   default — dua tingkat hierarki berbeda (label statis vs tautan yang
   bisa diklik) tapi warnanya identik, jadi tidak ada yang bisa dijadikan
   pegangan mata untuk membedakan mana judul & mana isinya.
   Sekarang link-nya CERAH (`--tk-overlay-fg`, sama seperti item level atas
   "All"/"Shoes") — menandakan "ini bisa diklik", sementara judul kolom
   TETAP redup sebagai label. Indent-nya juga dibuat SATU LANGKAH lebih
   dalam dari judul (24px, judul 16px) supaya nesting-nya kelihatan dari
   posisi juga, tidak cuma warna. */
.tk-home-menu .tk-collections-dropdown__list a {
	/* ⚠️ Indent kiri 24px DIBUANG 14 Sep 2026, alasan sama persis seperti
	   pada `.tk-home-menu .tk-dropdown-columns__title` di bawah — sejak
	   isinya dua kolom, semuanya harus rata kiri di garis yang sama. */
	padding: 8px 0;
	color: var(--tk-overlay-fg);
}

/* Umpan balik hover-nya jadi peredupan (bukan lagi lompat warna) —
   link-nya sudah cerah sejak awal sekarang, jadi arah umpan baliknya
   dibalik: redup sesaat saat disentuh, sama seperti pola hover tombol
   lain di navbar (region, close, dsb). */
.tk-home-menu .tk-collections-dropdown__list a:hover {
	opacity: 0.7;
}

.tk-home-menu .tk-collections-dropdown__empty {
	padding-left: 16px;
	color: var(--tk-overlay-fg-muted);
}

/* =========================================================================
   MEGA-MENU BERKOLOM (dropdown "Shoes")
   -------------------------------------------------------------------------
   Ditambahkan 7 Sep 2026. Spec asli PDF klien: SHOES membuka dropdown DUA
   KOLOM — "Shop by Category" + "Shop by Collection".

   Dipakai oleh dua jalur yang menghasilkan markup identik:
   (1) panel bawaan `takkan_render_shop_dropdown_panel()`, dan
   (2) panel yang disusun KLIEN sendiri dari wp-admin, di mana anak-anak
       item menu dikelompokkan per taksonomi jadi kolom.
   Satu gaya untuk keduanya, supaya bentuknya tidak pernah menyimpang.

   Jumlah kolomnya TIDAK dipatok angka: `auto-fit` + `minmax` membuat CSS
   ikut apa pun yang klien susun (2 kolom hari ini, 4 kolom nanti) tanpa
   ada yang perlu diubah di sini. */
.tk-dropdown-columns {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 160px, max-content ) );
	gap: 12px 56px;
	align-items: start;
}

/* Judul kolom ("Shop by Category") sengaja DIREDUPKAN, bukan dibesarkan
   atau ditebalkan: seluruh situs ini pakai satu ukuran teks 14px (lihat
   CLAUDE.md), jadi hierarki dibangun lewat warna, bukan ukuran. */
.tk-dropdown-columns__title {
	margin: 0 0 8px;
	color: rgba(0, 0, 0, 0.45);
}

/* ⚠️ DUA KOLOM BERDAMPINGAN sejak 14 Sep 2026 — permintaan user, acuan
   screenshot Tony Bianco versi HP ("isi child dari menu dibuat kanan kiri
   2 kolom").
   ⚠️ Ini MEMBALIK keputusan 8 Sep 2026 yang menumpuknya vertikal dengan
   alasan "dua kolom sempit berdampingan di layar 375px akan membuat nama
   koleksi yang panjang terpotong-potong". Dicek ulang dengan angka
   sesungguhnya, bukan dugaan: 375px − 40px padding panel = 335px, dikurangi
   gap 24px → ±155px per kolom, sementara nama terpanjang yang ada
   ("LOAFERS & BOOTS", 14px kapital) terukur ±120px — masih muat. Kalau
   kelak klien membuat nama koleksi yang jauh lebih panjang, dia akan
   membungkus ke baris berikutnya (bukan terpotong), sama seperti di acuan.
   ⚠️ `grid`, BUKAN `flex`: dengan grid kolom ketiga (kalau klien kelak
   menambah taksonomi lain sebagai anak "Shoes") otomatis turun ke baris
   baru dengan lebar yang tetap sama rata, tanpa aturan tambahan. */
.tk-home-menu .tk-dropdown-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: start;
	/* ⚠️ DINOLKAN 14 Sep 2026. Dulu 12px (revisi user 8 Sep: "jarak dari
	   shoes ke shop by category nya kedeketan") karena panelnya waktu itu
	   accordion `padding: 0` yang mengembang PERSIS di bawah tulisan
	   "Shoes". Sejak panelnya jadi sub-panel sendiri, jaraknya sudah datang
	   dari `padding` panel + baris "kembali" beserta garis pembatasnya. */
	margin-top: 0;
}

/* Dulu kolom ditumpuk, jadi butuh jarak vertikal antar-kolom. Sekarang
   jaraknya diurus `gap` grid di atas — dinolkan supaya kolom kedua tidak
   turun sendirian sejajar tidak rata dengan kolom pertama. */
.tk-home-menu .tk-dropdown-columns__col + .tk-dropdown-columns__col {
	margin-top: 0;
}

.tk-home-menu .tk-dropdown-columns__title {
	/* ⚠️ INDENT DIBUANG 14 Sep 2026 (dulu 16px, dan tautannya 24px — beda
	   satu langkah untuk menandakan nesting, keputusan 8 Sep 2026). Sejak
	   isinya jadi dua kolom berdampingan, indentasi justru merusak: kolom
	   kanan tidak lagi lurus dengan kolom kiri, dan di acuan TB judul &
	   isinya memang rata kiri di garis yang SAMA (terukur dari screenshot
	   user: "ALL BOOTS" dan "KNEE-HIGH BOOTS" sama-sama mulai di x yang
	   sama). Hierarki tetap terbaca lewat WARNA — judul redup, tautan
	   cerah — yang memang sejak awal jadi mekanisme utamanya. */
	padding-left: 0;
	color: var(--tk-overlay-fg-muted);
}