/**
 * Product Listing Page — grid produk + interaksi hover.
 *
 * Spec: CLAUDE.md bagian 5. Referensi hover: tonybianco.com/collections/all.
 * Grid 4 kolom desktop / 2 kolom mobile, gap 20px antar baris & 10px antar
 * kolom, foto potret ±5:7. Semua transisi hover 0.5s (var --tk-duration).
 */

/* ---------- Judul halaman (Shop/Category/Collection) ----------
   ⚠️ DITAMBAHKAN 9 Sep 2026 (revisi user). Global di style.css memaksa
   SEMUA heading ke 14px/400/tanpa kapital (supaya tipografi situs rata) —
   judul arsip produk sengaja DIKECUALIKAN dari aturan itu di sini, bukan
   diubah di style.css, supaya heading lain (mis. di halaman Info) tidak
   ikut berubah tanpa diminta. */
.woocommerce-products-header__title.page-title {
	font-size: var(--tk-title-size); /* 24px semibold, token di style.css (revisi klien 4 Okt 2026; sebelumnya 20px/400). */
	font-weight: var(--tk-title-weight);
	letter-spacing: var(--tk-title-tracking);
	text-transform: uppercase;
	margin: 0; /* Judul sekarang jadi item flex di dalam toolbar — jarak diatur wadahnya, bukan margin sendiri. */
}

/* Wadah bawaan judul (`<header>` di archive-product.php) sekarang tinggal
   pembungkus kosong — judulnya sudah dipindah ke toolbar (lihat
   takkan_plp_open_toolbar() di functions.php). Sisa jaraknya dinolkan
   supaya tidak menyisakan celah misterius di atas grid.
   ⚠️ TIDAK di-`display: none` — deskripsi kategori/koleksi
   (`woocommerce_archive_description`) juga dicetak di dalam elemen ini,
   dan itu konten sungguhan yang harus tetap tampil kalau klien mengisinya. */
.woocommerce-products-header {
	margin: 0;
	padding: 0;
}

/* ---------- Tidak ada hasil pencarian ----------
   Ditambahkan 28 Sep 2026 (permintaan user) — menggantikan notice biru
   bawaan WooCommerce KHUSUS di halaman hasil pencarian (lihat
   takkan_search_no_results() di functions.php). Arsip Category/Collection
   kosong TIDAK terpengaruh, tetap notice bawaan.

   ⚠️ DIREVISI 28 Sep 2026 (sesi yang sama, user kirim screenshot) — judul +
   pesan ditengahkan jadi SATU blok, bukan lagi rata kiri seperti toolbar
   biasa. Judulnya sendiri sekarang dicetak DI DALAM `.tk-search-empty`
   (lihat takkan_search_no_results()), jadi selector judul di sini
   di-scope `.tk-search-empty .woocommerce-products-header__title` — TIDAK
   menyentuh judul toolbar di halaman search BER-hasil (itu tetap rata kiri
   seperti biasa, elemennya beda/di luar wadah ini). */
.tk-search-empty {
	text-align: center;
	padding: 40px 0;
}

.tk-search-empty .woocommerce-products-header__title.page-title {
	margin: 0 0 12px; /* Menimpa `margin:0` bawaan rule global di atas — perlu jarak ke pesan di bawahnya. */
}

.tk-search-empty__message {
	margin: 0 auto;
	max-width: 480px;
}

.tk-search-empty__heading {
	margin: 0 0 20px;
	color: rgba(0, 0, 0, 0.45);
	text-transform: uppercase;
}

/* ---------- Grid ---------- */

ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: var(--tk-grid-gap-x);
	row-gap: var(--tk-grid-gap-y);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ⚠️ Bug ditemukan & diverifikasi 2 Sep 2026 — INI penyebab sebenarnya
   kartu produk pertama "geser satu kolom" (bukan soal display:list-item,
   itu dugaan awal yang salah). WooCommerce nyisipin elemen ::before/::after
   KOSONG di ul.products buat clearfix sistem float LAMA:
     .woocommerce ul.products::before,::after { content:" "; display:table }
   Elemen kosong itu TETAP ikut dihitung sebagai kotak/kolom oleh CSS Grid
   kita (karena content-nya bukan "none" dan display-nya bukan "none") —
   jadinya nyerobot slot kolom pertama, semua produk beneran ke-dorong
   satu kolom ke kanan, dan produk terakhir "terdorong" ke baris baru
   sendirian. Clearfix ini memang cuma perlu untuk float, tidak relevan
   lagi karena kita pakai CSS Grid — jadi dimatikan total di sini. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	content: none;
	display: none;
}

@media (max-width: 767px) {
	ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* WooCommerce punya CSS grid LAMA berbasis float bawaan (woocommerce-layout.css:
   `.woocommerce ul.products li.product { float:left; width:22.05%; margin:0 3.8% ...}`),
   dengan spesifisitas SAMA PERSIS selector-nya (class .woocommerce + .products +
   .product). Kalau kita cuma tulis `ul.products li.product{}` tanpa prefix
   `.woocommerce`, aturan lama itu tetap menang dan kartu produk jadi cuma
   22% dari lebar kolom grid yang sebenarnya. Ditemukan & diverifikasi 2 Sep
   2026 — kartu terukur 60px padahal kolom grid-nya 272px. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	position: relative; /* ⚠️ Sekarang cuma jaga-jaga (tidak ada lagi anak `position:absolute` yang bergantung padanya sejak ikon dipindah keluar dari foto, 9 Sep 2026) — dibiarkan, aman & tidak mengganggu apa pun. */
	float: none;
	width: auto;
	margin: 0;
	/* ⚠️ Bug ditemukan & diverifikasi 2 Sep 2026: <li> defaultnya
	   `display: list-item`. Sebagai item CSS Grid, "list-item" tetap
	   diterima browser, TAPI kotak marker (bullet) yang tetap dihitung
	   di baliknya (walau list-style:none menyembunyikan bulletnya secara
	   visual) bikin grid salah menempatkan kolom pertama — kartu pertama
	   ter-geser masuk ke kolom KEDUA, kolom pertama kosong, dan produk
	   terakhir "terdorong" ke baris baru. `display: block` menghapus
	   perilaku list-item sepenuhnya, bukan cuma menyembunyikan bulletnya. */
	display: block;
}

/* Judul + harga bawaan WooCommerce, di bawah foto. Sudah 14px kapital lewat
   aturan di bawah — di sini cuma jarak & warna.

   ⚠️ JEBAKAN SPESIFISITAS lain ditemukan 9 Sep 2026 (pola yang sama seperti
   warna harga di bawah & kasus-kasus sebelumnya di CLAUDE.md):
   woocommerce.css memberi `.woocommerce ul.products li.product
   .woocommerce-loop-product__title { padding: 0.5em 0; }` (0,4,2) — MENANG
   atas rule ini (0,3,2) walau kita tidak pernah sengaja memberi padding.
   Akibatnya ada ±14px ruang KOSONG TAK TERLIHAT (7px atas + 7px bawah) di
   dalam judul, bikin jarak visual ke harga terasa jauh lebih lebar daripada
   `margin-top: 4px` yang sebenarnya ditulis — user melaporkan "jarak nama
   ke harga jauh banget". Prefix `.woocommerce-page.woocommerce` (dua class
   ASLI yang sama-sama ada di <body>) menaikkan jumlah class kita jadi 5,
   pasti menang tanpa `!important`. Padding dinolkan total, dan `margin-top`
   harga dinaikkan ke 8px (permintaan user) — sekarang angka itu BENAR-BENAR
   jarak yang terlihat, tidak ada lagi selisih tersembunyi. */
.woocommerce-page.woocommerce ul.products li.product .woocommerce-loop-product__title {
	/* ⚠️ Tanpa margin-top di sini lagi (9 Sep 2026) — jarak dari foto
	   sekarang punya SATU sumber: `margin-top: 12px` pada `.tk-card__info`
	   (wadah nama+harga+ikon). Kalau ditulis di dua tempat, jaraknya
	   dobel begitu judul dipindah ke dalam wadah itu. */
	padding: 0;
	color: var(--tk-fg);
	text-transform: uppercase; /* Revisi user 9 Sep 2026: semua nama produk kapital. */
}

/* ⚠️ Warna harga JEBAKAN SPESIFISITAS SAMA (9 Sep 2026): woocommerce.css
   (versi 11, baru terpasang ulang 8 Sep) punya
   `.woocommerce:where(...) ul.products li.product .price { color:
   rgb(149,142,9) }` — mustard/kuning, warna aksen bawaan WooCommerce untuk
   tema non-block. `:where()` di situ berspesifisitas NOL, tapi sisa
   selectornya tetap (0,4,2) — masih menang atas rule kita yang cuma (0,3,2).
   ⚠️ BUG YANG SAMA JUGA ADA DI PDP (lihat pdp.css, `.summary > .price`) —
   berarti ini bukan kebetulan satu tempat, tapi styling bawaan WooCommerce
   11 yang baru muncul sejak reset 8 Sep. Warna literal #2a2a2a (bukan
   var(--tk-fg-muted)) sesuai permintaan eksplisit user. */
.woocommerce-page.woocommerce ul.products li.product .price {
	display: block;
	margin-top: 8px;
	color: #2a2a2a;
	/* ⚠️ DITAMBAHKAN 10 Sep 2026 — jebakan spesifisitas KE-EMPAT yang baru
	   ketahuan di kartu ini pada hari yang sama: woocommerce.css punya
	   `.woocommerce ul.products li.product .price { font-size: 0.857em }`
	   (0,4,2) — mengecilkan harga ke ±12px dari 14px teks sekitarnya.
	   Sebelumnya TIDAK PERNAH kelihatan karena elemen `.price` itu sendiri
	   belum ada di DOM (lihat catatan panjang di functions.php,
	   `takkan_plp_render_info()`) — begitu pembungkusnya dikembalikan,
	   aturan lama WooCommerce ini ikut aktif dan diam-diam mengecilkan
	   harga di DESKTOP juga, bukan cuma HP yang memang diminta. Rule kita
	   di sini sudah (0,5,2), menang tanpa `!important` — cuma perlu
	   font-size-nya DITULISKAN, bukan dibiarkan kosong. */
	font-size: var(--tk-size);
}

/* ⚠️ DITAMBAHKAN 10 Sep 2026 (revisi user) — nama & harga produk di kartu
   PLP dikecilkan ke 12px KHUSUS HP (desktop/tablet tetap 14px seperti teks
   lain di situs). Selector-nya SAMA PERSIS dua rule di atas (prefix
   `.woocommerce-page.woocommerce` disertakan lagi) — kalau ditulis pendek
   tanpa prefix itu, aturan global `style.css` (`.woocommerce-loop-
   product__title{font-size:var(--tk-size)}`, dari aturan tipografi rata
   14px situs) akan tetap menang karena kalah spesifisitas, pola yang sama
   berulang kali ditemukan di kartu PLP ini. */
@media (max-width: 767px) {
	.woocommerce-page.woocommerce ul.products li.product .woocommerce-loop-product__title,
	.woocommerce-page.woocommerce ul.products li.product .price {
		font-size: 12px;
	}
}

ul.products li.product > a {
	display: block;
	color: inherit;
}

ul.products li.product > a:hover {
	text-decoration: none; /* Garis bawah global dimatikan khusus di sini — foto yang jadi indikator hover, bukan teks. */
}

/* ---------- Foto + hover-swap ---------- */

.tk-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: var(--tk-product-ratio);
	overflow: hidden;
	/* Latar sementara sebelum foto termuat (14 Okt 2026): dulu #0a0a0a (hitam) → kotak hitam berkedip tiap
	   halaman dimuat/di-refresh. Sekarang abu terang yang sama dengan latar foto produk (±#e7e9ec), jadi
	   peralihan ke foto nyaris tak terlihat. */
	background: #e8eaed;
}

/* ⚠️ JEBAKAN SPESIFISITAS SAMA LAGI (9 Sep 2026) — ini yang menyebabkan
   laporan user "gambar thumbnailnya dibuat fill aja kalo ukurannya ga pas"
   (dengan screenshot: ada garis hitam kosong di bawah beberapa foto).
   woocommerce.css versi 11 punya `.woocommerce ul.products li.product a img
   { width:100%; height:auto; }` — (0,3,4) — MENGALAHKAN rule ini yang
   sebelumnya cuma (0,1,0). Akibatnya `height:100%` KITA tidak pernah
   kepakai; tinggi foto ikut rasio ASLI filenya (`height:auto`), yang kalau
   lebih pendek dari kotak 5:7 kartu, sisa ruang di bawahnya menampakkan
   `background: #0a0a0a` milik `.tk-card__media` — persis "kotak hitam" di
   foto yang dikirim user. `object-fit: cover` sebenarnya SUDAH BENAR
   sedari awal, cuma tidak pernah sempat berlaku karena elemennya sendiri
   dipaksa setinggi `auto`, bukan 100%.
   Prefix `.woocommerce-page.woocommerce ul.products li.product` menaikkan
   jumlah class kita jadi 5 (vs WooCommerce 3), pasti menang tanpa
   `!important` — pola yang sama seperti warna harga & padding judul. */
.woocommerce-page.woocommerce ul.products li.product .tk-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tk-card__img--hover {
	opacity: 0;
	transition: opacity var(--tk-duration) var(--tk-ease);
}

li.product:hover .tk-card__img--hover {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.tk-card__img--hover {
		transition: none;
	}
}

/* ---------- Geser foto di HP: strip sungguhan, bukan ganti src instan ----------
   ⚠️ DITAMBAHKAN 10 Sep 2026 — permintaan user: swipe foto di HP harus
   terasa "kegeser" mengikuti jari (kaya carousel tonybianco.com versi
   mobile), bukan lompat instan ganti gambar. `.tk-card__strip` HANYA ADA
   di perangkat sentuh — dibangun ULANG oleh JS (`initSwipe()` di plp.js)
   dari markup base/hover bawaan, yang TETAP dipakai APA ADANYA untuk
   crossfade hover desktop di atas (tidak disentuh sama sekali di jalur
   ini). `(hover: none)` dipakai untuk membedakan, pola yang SAMA sudah
   dipakai berkali-kali di proyek ini (layar sentuh vs mouse).
   ⚠️ Prefix `.woocommerce-page.woocommerce ul.products li.product` WAJIB
   ada — `<img class="tk-card__img">` yang dibangun JS tetap kena aturan
   `position:absolute` di atas (spesifisitas (0,5,2)); tanpa prefix yang
   sama di sini, foto strip akan numpuk bertumpuk lagi alih-alih berjajar
   ke samping. */
@media (hover: none) {
	.tk-card__strip {
		display: flex;
		width: 100%;
		height: 100%;
	}

	.woocommerce-page.woocommerce ul.products li.product .tk-card__strip .tk-card__img {
		position: static;
		flex: 0 0 100%;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* ---------- Baris info: nama+harga (kiri) & ikon (kanan bawah) ----------
   ⚠️ DIROMBAK TOTAL 9 Sep 2026 (revisi user, acuan gambar referensi) —
   sebelumnya wishlist & tombol keranjang MENGAMBANG DI ATAS FOTO (posisi
   absolute, cuma terlihat saat hover/HP-selalu-terlihat). Sekarang KELUAR
   dari foto sama sekali, jadi baris tersendiri sejajar nama+harga — ikon
   di "pojok kanan bawah" kartu, bukan lagi di sudut foto.
   DOM-nya (lihat `takkan_plp_render_info()` di functions.php): `<a>` yang
   membungkus foto sudah ditutup lebih awal (tepat setelah foto), jadi
   `.tk-card__info` adalah SIBLING dari `<a>` itu — bukan anaknya — dan
   bisa berisi tombol `<button>` tanpa jadi "tombol di dalam link" (HTML
   tidak valid). Nama produk dibungkus `<a>` KECILNYA SENDIRI di dalam
   `.tk-card__text` supaya tetap bisa diklik ke PDP. */

.tk-card__info {
	display: flex;
	/* ⚠️ REVISI 9 Sep 2026: awalnya `flex-end` (ikon rata ke garis BAWAH
	   blok teks, sesuai gambar acuan pertama) — user minta diubah jadi
	   sejajar TENGAH terhadap tinggi blok nama+harga. */
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px; /* Jarak dari foto — angka yang sama dengan margin judul versi lama. */
}

.tk-card__controls {
	display: flex;
	align-items: center;
	gap: 8px; /* Dikecilkan dari 12px — revisi user 9 Sep 2026. */
	flex: 0 0 auto;
}

/* Ikon SEKARANG SELALU TERLIHAT — dulu perlu opacity:0→1 di-hover karena
   duduk DI ATAS foto (harus disembunyikan supaya tidak menutupi foto saat
   tidak dibutuhkan). Sekarang posisinya di luar foto sama sekali, jadi
   tidak ada lagi yang perlu disembunyikan; kuirk `(hover: none)` HP (yang
   dulu wajib supaya ikon tidak permanen tersembunyi di layar sentuh) juga
   sudah tidak relevan — dibuang bersamaan. */
.tk-card__wishlist,
.tk-card__addcart {
	position: relative; /* Jangkar untuk badge titik `.tk-card__addcart.is-active::after` di bawah. */
	box-sizing: border-box; /* Tanpa ini, padding tombol bawaan browser numpuk DI ATAS ukuran, hasilnya lonjong bukan bundar. */
	width: 24px;
	height: 24px;
	padding: 0; /* Tombol browser punya padding bawaan (beda kiri/kanan vs atas/bawah) — itu penyebab ikonnya kelihatan lonjong. */
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: none; /* Dulu bulatan hitam transparan (kontras di atas foto) — di kanvas putih polos itu tidak perlu lagi. */
	color: var(--tk-fg); /* Ikut warna teks kanvas, BUKAN --tk-overlay-fg lagi — posisinya sudah di luar foto. */
	cursor: pointer;
}

/* Menimpa `button:hover{background:#55555e}` generik GeneratePress — kuirk
   yang sama sudah berulang di seluruh proyek ini. */
.tk-card__wishlist:hover,
.tk-card__addcart:hover {
	background: none;
	color: var(--tk-fg);
	opacity: 0.6;
}

/* ⚠️ DITAMBAHKAN 9 Sep 2026 — laporan user: tombol keranjang tampil kotak
   ABU-ABU GELAP setelah ukuran dipilih & drawer ditutup. Akar masalahnya
   BUKAN state baru, tapi kuirk `:focus` GeneratePress yang sama seperti
   yang sudah berkali-kali ditemukan di proyek ini: `close()` di plp.js
   sengaja mengembalikan fokus ke `lastTrigger` (tombol yang membuka
   drawer) demi aksesibilitas keyboard — begitu drawer ditutup, tombol
   keranjang kartu itu KEMBALI FOKUS, dan `<style>` inline GeneratePress
   (`button:focus{background-color:#3f4047}`) ikut kepicu.
   ⚠️ SENGAJA TANPA `opacity: 0.6` di sini (beda dari aturan `:hover` di
   atas) — pola yang SAMA seperti trigger "Shoes" (8 Sep 2026): perangkat
   sentuh MEMPERTAHANKAN status `:focus` sampai layar disentuh di tempat
   lain, jadi kalau opacity ikut diredupkan, ikon akan terlihat pudar
   TERUS-MENERUS (bukan cuma sekilas) setiap kali habis dipakai. */
/* ⚠️ REVISI 9 Sep 2026 (sesi yang sama) — user laporkan ikon keranjang
   HILANG (cuma titik badge yang kelihatan) tepat setelah drawer ditutup.
   Bukan ikon-nya yang hilang dari DOM — perbaikan `background:none` di
   atas TERNYATA BELUM CUKUP. GeneratePress mencetak SATU rule gabungan
   untuk hover DAN focus sekaligus: `button:focus{color:#ffffff;
   background-color:#3f4047}` — dulu cuma `background`-nya yang ditimpa,
   `color`-nya TIDAK. Ikonnya pakai `stroke="currentColor"`, jadi begitu
   `color` tombol berubah putih saat fokus, garis ikonnya ikut putih —
   TIDAK TERLIHAT di atas kanvas putih (bukan hilang, cuma senada dengan
   latar). Sekarang `color` ikut ditimpa balik ke `var(--tk-fg)` juga.
   ⚠️ Verifikasi `:focus` via `.focus()` sintetis TERBUKTI TIDAK BISA
   dipercaya di pane browser alat uji ini — `document.activeElement`
   benar berubah tapi `element.matches(':focus')` tetap `false` (kuirk
   yang sama seperti `focusin` sintetis yang sudah terdokumentasi
   sebelumnya). Itu sebabnya perbaikan `background:none` yang lalu
   sempat lolos verifikasi padahal belum lengkap — kali ini diverifikasi
   via analisis rule GeneratePress langsung (bukan getComputedStyle di
   pane ini), bukan cuma pengujian otomatis. SENGAJA TETAP TANPA
   `opacity` (pola yang sama seperti sebelumnya) — perangkat sentuh
   mempertahankan `:focus` sampai disentuh di tempat lain. */
.tk-card__wishlist:focus,
.tk-card__addcart:focus {
	background: none;
	color: var(--tk-fg);
}

.tk-card__wishlist .tk-icon,
.tk-card__addcart .tk-icon {
	width: 20px;
	height: 20px;
}

/* ⚠️ Target-nya `<path>` DI DALAM `.tk-icon`, bukan `.tk-icon` (elemen
   `<svg>`) itu sendiri — ditemukan 9 Sep 2026 saat mengerjakan "icon jadi
   filled kalau diklik". `takkan_icon()` mencetak atribut `fill="none"`
   LANGSUNG di tag `<path>`-nya (bukan lewat CSS) — atribut presentasi
   begitu SELALU menang atas `fill` yang cuma disetel ke elemen `<svg>`
   induknya, sekalipun `fill` termasuk properti yang normalnya diwariskan.
   Diverifikasi: sebelum perbaikan ini, `getComputedStyle(path).fill`
   tetap "none" walau class `.is-active` sudah aktif dan aturan CSS lama
   (menyasar `.tk-icon`) sudah match. */
.tk-card__wishlist.is-active .tk-icon path {
	fill: var(--tk-fg);
}

/* ⚠️ REVISI KEDUA 9 Sep 2026 — percobaan sebelumnya (mengisi badan tas
   solid, `path:first-of-type { fill: … }`) DICABUT: user tetap melaporkan
   "masih broken" — bukan bug CSS (fill-nya sudah benar-benar cuma
   mengenai badan tas, pegangannya tetap garis, sudah dites & terbukti),
   tapi bentuk tasnya sendiri terlalu polos (trapesium tanpa detail apa
   pun di dalamnya) sehingga begitu diisi solid, hasilnya cuma terlihat
   seperti kotak hitam biasa — tidak lagi terbaca sebagai "tas" begitu
   diperbesar/diperhatikan dari dekat.
   Diganti pola BADGE TITIK KECIL (dipilih user dari 3 opsi yang
   ditawarkan): ikon tas TETAP garis/outline selama-lamanya, tidak pernah
   diisi solid — cuma dikasih titik kecil solid di pojok kanan-atas
   sebagai penanda "sudah ditambahkan", mirip lencana notifikasi. Bentuk
   tas jelas kebaca berapa pun ukurannya karena badannya sendiri tidak
   pernah disentuh. */
.tk-card__addcart.is-active::after {
	content: '';
	position: absolute;
	top: -1px;
	right: -1px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--tk-fg);
	border: 1.5px solid var(--tk-bg); /* Cincin tipis warna kanvas — supaya titiknya tidak menyatu/berhimpit dengan garis tas di baliknya. */
}

/* ⚠️ DIBUANG 9 Sep 2026 (prompt PLP baru): tombol panah `‹ ›` di sisi foto
   dan panel ukuran INLINE (`.tk-card__sizes` + `.tk-size-btn`) yang dulu
   mengembang di atas kartu. Penggantinya:
   - Ganti foto: hover (CSS di atas) untuk desktop, swipe jari untuk HP
     (plp.js) — spec baru minta "tanpa indikator titik/panah".
   - Pilih ukuran: drawer/bottom-sheet tersendiri → plp-drawer.css.
   Jangan dihidupkan lagi tanpa diminta: dua ikon mengambang (wishlist &
   keranjang) adalah keputusan desain yang eksplisit, bukan kebetulan. */

/* =========================================================================
   TOOLBAR — hanya dropdown Sort
   -------------------------------------------------------------------------
   Wadahnya dicetak functions.php (buka di prioritas 15, tutup di 35), jadi
   dropdown Sort bawaan WooCommerce jatuh DI DALAM sini tanpa hook-nya
   dipindah sama sekali.

   ⚠️ Dulu baris ini juga berisi tombol "Filters" (panel Category+Collection)
   dan tombol toggle jumlah kolom. DIBUANG 9 Sep 2026 atas permintaan user
   ("hapus aja belom butuh"). Kodenya masih utuh di riwayat git (commit
   "PLP: add-to-cart drawer, filters, column toggle, back-to-top") kalau
   suatu saat diminta lagi — jangan ditulis ulang dari nol.
   ⚠️ Penyaringan lewat query string (`/shop/?product_cat=…&product_collection=…`)
   TETAP JALAN — itu kemampuan bawaan WP_Query, bukan sesuatu yang kita
   pasang; yang dibuang cuma tombol UI-nya. `border-bottom` toolbar juga
   sudah dibuang sebelumnya di hari yang sama. */
/* ⚠️ DIROMBAK 10 Sep 2026 (revisi user: "posisi title dan sortingan jadinya
   di pojok kiri, atas bawah kasih jarak 4px"). Dulu (9 Sep 2026) judul di
   kiri & Sort di kanan, SEJAJAR dalam satu baris (`space-between`).
   Sekarang keduanya ditumpuk VERTIKAL, sama-sama rata kiri, jarak 4px. */
.tk-plp-toolbar {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	margin-bottom: var(--tk-grid-gap-y);
}

/* ---------- Sort — gaya tonybianco.com: teks + chevron, tanpa kotak ----------
   ⚠️ DIROMBAK 9 Sep 2026 (revisi user, acuan langsung tonybianco.com):
   dulu `<select>` berbentuk kotak bergaris. Sekarang cuma teks kapital +
   panah bawah, tanpa border/background sama sekali. */
/* ⚠️ DIROMBAK LAGI 10 Sep 2026 (revisi user: label harus SELALU "Sort",
   bukan ikut teks opsi terpilih). Markup-nya sekarang override template
   (`woocommerce/loop/orderby.php` di tema ini) yang menambahkan
   `<span class="tk-plp-sort-label">` statis SEBELUM `<select>` — bukan lagi
   `<select>` yang tampil langsung. `<select>`-nya sendiri dibuat transparan
   & menutupi seluruh wadah (lihat komentar di file template itu untuk
   penjelasan lengkap kenapa ini aman dipakai — popup dropdown-nya sendiri
   TETAP terbaca normal, cuma kotak tertutupnya yang tak terlihat).
   `inline-flex; align-items:center` DIPERTAHANKAN dari perbaikan 10 Sep
   2026 sebelumnya (fix "jomplang" line-box) — masih relevan karena wadah
   ini tetap membungkus elemen inline (`<span>` label). */
.tk-plp-toolbar .woocommerce-ordering {
	position: relative; /* Jangkar <select> transparan — lihat catatan di bawah. */
	display: inline-flex;
	align-items: center;
	float: none;
	margin: 0;
}

/* ⚠️ DIROMBAK 10 Sep 2026 (revisi user: "kurang rapih... dibuat sejajar
   sama iconnya dikecilin dikit"). Dulu panahnya `::after` di WADAHNYA
   (`.woocommerce-ordering`, elemen `<form>`), diposisikan `absolute` +
   `margin-top` tebak-tebakan untuk menengahkannya — teknik "border sudut
   diputar 45°" itu SECARA MATEMATIS titik lancipnya ("V") jatuh MELESET
   dari titik tengah kotak pembungkusnya sendiri (untuk kotak sisi s,
   sekitar 0,35×s di bawah pusat GEOMETRIS kotaknya — bukan cuma di bawah
   pusat VISUAL "V"-nya) — jadi walau kotaknya sendiri sudah disejajarkan
   tengah, "V" yang KELIHATAN tetap menggantung di bawah teks. Percobaan
   pertama (nudge `translateY` manual) cuma menggeser kotaknya, bukan
   mengoreksi pergeseran optik "V" di DALAM kotak itu sendiri.
   **Diganti total ke SVG** (path sama persis dengan chevron accordion
   "Shoes" di menu HP — bahasa visual yang sudah ada di situs, bukan bentuk
   baru) — tinggi visual SVG PERSIS = ukurannya sendiri, jadi
   `align-items:center` pada label menyejajarkannya TEPAT tanpa perlu
   hitung/tebak apa pun lagi. */
.tk-plp-toolbar .woocommerce-ordering .tk-plp-sort-label {
	display: inline-flex;
	align-items: center;
	color: var(--tk-fg);
	font: inherit;
	/* ⚠️ 12px, bukan 14px seperti teks lain di situs — revisi user 9 Sep 2026
	   ("ukuran text sort terlalu besar"). Sebabnya bukan angka px-nya (tadinya
	   sudah 14px, sama dengan sekelilingnya) melainkan HURUF KAPITALNYA:
	   teks kapital terbaca lebih besar & lebih berat daripada teks biasa di
	   ukuran yang sama. Diturunkan satu tingkat supaya bobot visualnya
	   setara dengan sekitarnya. */
	font-size: 12px;
	text-transform: uppercase;
	pointer-events: none; /* Dekoratif — klik tetap kena <select> transparan di atasnya. */
}

.tk-plp-toolbar .woocommerce-ordering .tk-plp-sort-chevron {
	/* Jarak teks→ikon 16px (permintaan user 9 Sep 2026) — lewat margin-left
	   elemen flex, bukan lagi padding-right kotak yang dipatok posisi
	   absolute. */
	margin-left: 16px;
	/* Diperkecil dari efek visual trik lama (~8-9px) — revisi user 10 Sep
	   2026 ("dikecilin dikit"). Warnanya ikut `currentColor` (path SVG-nya
	   `stroke="currentColor"`), otomatis mengikuti `color` label di atas. */
	width: 10px;
	height: 10px;
	flex-shrink: 0;
}

/* `<select>` asli TETAP di DOM & tetap fungsional penuh (native, jadi
   keyboard/aksesibilitas tidak hilang) — cuma dibuat transparan & menutupi
   PERSIS area label+panah, supaya klik di mana pun di situ membuka
   dropdown native, tapi yang TERLIHAT cuma label statis "Sort".
   ⚠️ Ini kondisi DEFAULT/tanpa-JS. Begitu `plp.js` jalan dan menambahkan
   class `.tk-plp-sort-js` (lihat blok di bawah), select ini DIMATIKAN
   kliknya — panel custom di bawahnya yang mengambil alih. */
.tk-plp-toolbar .woocommerce-ordering select {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: none;
	border-radius: 0;
	margin: 0;
	padding: 0;
	font: inherit;
	cursor: pointer;
}

/* =========================================================================
   PANEL SORT CUSTOM — 21 Sep 2026, permintaan user (kirim screenshot acuan)
   -------------------------------------------------------------------------
   Menggantikan popup NATIVE `<select>` (yang tidak bisa diberi garis
   pembatas/gaya custom) dengan panel sendiri: daftar teks kapital, tiap
   baris dipisah garis tipis, tanpa kotak/radio terlihat. `<select>` asli
   TETAP jadi sumber kebenaran (nilainya di-set JS lalu event `change`
   dipicu — WooCommerce sendiri yang men-submit form-nya, bukan kita).

   ⚠️ PROGRESSIVE ENHANCEMENT, bukan penggantian: kelas `.tk-plp-sort-js`
   di bawah HANYA ditambahkan oleh `plp.js` setelah berhasil jalan. Tanpa
   JS, blok ini tidak pernah aktif — select transparan di atas TETAP jadi
   satu-satunya jalur (lihat blok sebelumnya), nol regresi. */

/* Begitu JS aktif: matikan klik pada select (panel custom yang ambil
   alih), hidupkan klik pada label (sekarang jadi trigger sungguhan —
   `plp.js` juga menambahkan `role="button"`/`tabindex="0"` saat itu juga
   supaya perannya terbaca pembaca layar, bukan cuma visual). */
.tk-plp-toolbar .woocommerce-ordering.tk-plp-sort-js select {
	pointer-events: none;
}

.tk-plp-toolbar .woocommerce-ordering.tk-plp-sort-js .tk-plp-sort-label {
	pointer-events: auto;
	cursor: pointer;
}

/* Panah ikut berputar 180° saat panel terbuka — bahasa visual yang sama
   dipakai chevron accordion "Shoes" & trigger currency di situs ini. */
.tk-plp-toolbar .woocommerce-ordering.is-open .tk-plp-sort-chevron {
	transform: rotate(180deg);
}

/* ---------- Panel: desktop = dropdown kecil menempel di bawah trigger ----------
   ⚠️ BUKAN pita selebar layar seperti dropdown "Shop by Collection" — itu
   sengaja lebar karena isinya banyak kolom kategori/koleksi. Sort cuma 3
   baris pendek, jadi dropdown ringkas biasa yang lebih wajar untuk isi
   sesingkat ini. Buka/tutup INSTAN (`display:none/block`, tanpa
   transisi) — pola yang sama dengan dropdown Collections desktop
   (permintaan user 4 Sep 2026: "kebukanya langsung instant aja"). */
/* ⚠️ DIRAPIKAN 21 Sep 2026 — revisi user: "modal pop up value sortnya
   dibuat lebih clean lagi dong". `border` LUAR DIBUANG saat itu, cuma
   `box-shadow` yang dipertahankan untuk memisahkan panel dari halaman.
   ⚠️ `box-shadow` JUGA DIBUANG beberapa jam kemudian, sesi yang sama —
   revisi lanjutan user: "remove shadow di pop up modal". Sekarang panel
   TIDAK punya border MAUPUN shadow sama sekali — pemisah dari halaman
   di baliknya murni `z-index` (panel tetap di atas konten) + garis
   pembatas ANTAR baris (`.tk-plp-sort-option::after`, di bawah). Kalau
   nanti user merasa tepi panel jadi kurang kebaca menyatu dengan latar
   halaman yang sama-sama putih, itu konsekuensi yang sudah diketahui
   dari instruksi ini — jangan otomatis kembalikan shadow/border tanpa
   diminta ulang. */
.tk-plp-sort-panel {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 8px;
	min-width: 220px;
	background: #ffffff;
	z-index: 30;
	display: none;
}

.tk-plp-toolbar .woocommerce-ordering.is-open .tk-plp-sort-panel {
	display: block;
}

/* Backdrop TIDAK dipakai di desktop — dropdown ringkas begini cukup
   ditutup lewat klik-di-luar/Escape (pola yang sama dengan Collections),
   menampilkan overlay gelap untuk kotak sekecil ini justru berlebihan. */
.tk-plp-sort-backdrop {
	display: none;
}

/* ---------- Tiap baris opsi ----------
   Acuan screenshot user: teks kapital rata kiri, garis tipis PEMBATAS
   SETELAH tiap baris (termasuk baris terakhir) — dipilih `border-bottom`
   di tiap tombol (bukan `border-top` baris berikutnya) supaya baris
   terakhir ikut dapat garis penutup tanpa aturan tambahan.
   ⚠️ Font 14px (ukuran standar situs), BUKAN 12px seperti trigger "Sort"
   — pengecilan trigger itu alasannya spesifik (kapital terlihat lebih
   besar di SEBELAH teks 14px lain di toolbar); di dalam panel sendiri,
   baris-barisnya berdiri sendiri tanpa teks lain untuk dibandingkan,
   jadi kembali ke ukuran standar situs. */
/* Padding DIKECILKAN 21 Sep 2026 (bagian dari revisi "lebih clean") —
   16px 20px terasa terlalu longgar untuk daftar teks sesingkat ini,
   14px 18px lebih pas tanpa terasa sempit. */
.tk-plp-sort-option {
	position: relative; /* Jangkar `::after` garis pembatas — lihat di bawah. */
	display: block;
	width: 100%;
	padding: 14px 18px;
	background: none;
	border: none;
	color: var(--tk-fg);
	font: inherit;
	font-size: 14px;
	text-transform: uppercase;
	text-align: left;
	cursor: pointer;
	white-space: nowrap;
}

/* ⚠️ Garis pembatas DIGANTI dari `border-bottom` ke `::after` bergaris
   tepi sendiri — 21 Sep 2026, revisi user (kirim screenshot): "Line
   divider nya jangan dibuat full. coba buat margin kiri kanan 16px".
   `border-bottom` SELALU selebar kotak elemennya (100% lebar tombol,
   karena tombolnya sengaja tetap selebar penuh supaya SELURUH baris
   bisa diklik, bukan cuma teksnya) — tidak bisa diberi jarak kiri-kanan
   tanpa mengecilkan area klik itu sendiri. `::after` terpisah dari kotak
   klik, jadi bisa di-inset `left:16px; right:16px` tanpa mengubah area
   klik sama sekali.
   ⚠️ Dulu (deployment pertama fitur ini) dicetak di SETIAP baris
   TERMASUK yang terakhir — keputusan itu DIBALIK beberapa jam kemudian,
   sesi yang sama: user kirim screenshot lagi, minta "Yang paling bawah
   gausah dikasih divider". Dibuang KHUSUS untuk baris terakhir lewat
   `:last-child` di bawah — tombol-tombol opsi memang anak LANGSUNG dari
   `.tk-plp-sort-panel` (dicek ke `orderby.php`: tidak ada pembungkus
   lain di antaranya), jadi `:last-child` pasti tepat sasaran ke baris
   terbawah, berapa pun jumlah opsinya nanti. */
.tk-plp-sort-option::after {
	content: '';
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 0;
	height: 1px;
	background: rgba(0, 0, 0, 0.12);
}

.tk-plp-sort-option:last-child::after {
	content: none;
}

/* ⚠️ DIPERBAIKI 21 Sep 2026 — kuirk GeneratePress yang SAMA PERSIS sudah
   berulang kali menggigit di proyek ini (Cart/USD 6 Sep, trigger Shoes
   8 Sep, ikon PLP 9-10 Sep): `<style>` inline mereka punya
   `button:hover,button:focus{color:#ffffff;background-color:#3f4047}`.
   Rule di bawah SEBELUMNYA cuma menimpa `background`, lupa `color` —
   akibatnya teks jadi PUTIH DI ATAS LATAR PUTIH panel ini saat di-hover
   (dilaporkan user: "kurang clean" + baris terlihat kosong, screenshot
   menunjukkan baris "Newest" seperti hilang — itu bukan baris kosong,
   teksnya cuma senada dengan latar). Dibuktikan langsung lewat `curl`
   ke `<style>` inline yang sungguhan tayang, bukan tebakan.
   Diperbaiki dengan menambahkan `color` eksplisit — SUDAH CUKUP MENANG
   tanpa perlu trik "tambah elemen tipe" (pola Cart/USD): selector class
   ini `.tk-plp-sort-option:hover` sudah (0,0,2,0) — dua token di tingkat
   class/pseudo-class (class + :hover) — sementara `button:hover` GP
   cuma (0,0,1,1) — satu pseudo-class + satu ELEMEN (elemen tidak masuk
   tingkat yang sama), jadi kalah di tingkat class/pseudo-class duluan
   berapa pun urutannya. */
.tk-plp-sort-option:hover,
.tk-plp-sort-option:focus {
	background: none;
	color: var(--tk-fg);
	opacity: 0.7;
}

/* Opsi yang lagi aktif ditandai tebal — pola yang sama dengan penanda
   "dropdown Shoes sedang terbuka" (font-weight 600, bukan warna/garis
   bawah baru), konsisten dengan cara situs ini menandai status aktif. */
.tk-plp-sort-option.is-active {
	font-weight: 600;
}

/* ---------- Panel: HP = bottom-sheet ----------
   Breakpoint & pola SAMA PERSIS dengan drawer ukuran PLP
   (`plp-drawer.css`) — geser dari BAWAH, sudut atas membulat, dibatasi
   `max-height` (bukan tinggi penuh, isinya cuma 3 baris pendek).
   ⚠️ `visibility` SEBAGAI SAKLAR BERJEDA (bukan ikut dianimasikan) —
   pelajaran 14 Sep 2026 dari bug "panel gabisa kebuka" di sub-panel
   Shoes: `visibility` yang digabung ke transisi berdurasi TIDAK bisa
   diandalkan untuk "tampil seketika saat dibuka". Buka → visible
   SEKETIKA; tutup → tetap visible sampai geseran keluar selesai. */
@media (max-width: 767px) {
	.tk-plp-sort-panel {
		position: fixed;
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		margin-top: 0;
		min-width: 0;
		width: 100%;
		max-height: 70vh;
		overflow-y: auto;
		border: none;
		border-radius: 16px 16px 0 0;
		z-index: 1021;
		display: block; /* Buka/tutup di sini dikendalikan transform, bukan display. */
		transform: translateY(100%);
		visibility: hidden;
		transition: transform var(--tk-duration) var(--tk-ease), visibility 0s linear var(--tk-duration);
	}

	.tk-plp-toolbar .woocommerce-ordering.is-open .tk-plp-sort-panel {
		transform: translateY(0);
		visibility: visible;
		transition: transform var(--tk-duration) var(--tk-ease), visibility 0s linear 0s;
	}

	.tk-plp-sort-option {
		white-space: normal;
	}

	/* Backdrop DIPAKAI di HP (beda dari desktop) — pola yang sama dengan
	   plp-drawer.css/cart-drawer.css: bottom-sheet langsung dari halaman
	   (bukan di dalam overlay menu yang sudah gelap duluan), jadi butuh
	   backdrop sendiri supaya konten di belakangnya terlihat "ketutup". */
	.tk-plp-sort-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.4);
		opacity: 0;
		pointer-events: none;
		transition: opacity var(--tk-duration) var(--tk-ease);
		z-index: 1020;
	}

	.tk-plp-toolbar .woocommerce-ordering.is-open .tk-plp-sort-backdrop {
		opacity: 1;
		pointer-events: auto;
	}
}

/* =========================================================================
   PAGINATION — nomor halaman bawaan WooCommerce, digayakan ulang
   -------------------------------------------------------------------------
   ⚠️ JEBAKAN SPESIFISITAS ditemukan & diperbaiki 9 Sep 2026 (pola yang
   SAMA seperti kasus Cart/USD 6 Sep & tombol Shoes 8 Sep — sudah beberapa
   kali terjadi di proyek ini, lihat catatan panjang di CLAUDE.md). Sumbernya
   `woocommerce.css` (BUKAN woocommerce-layout.css yang sudah di-dequeue —
   ini file komponen yang MEMANG tetap dipakai):
     .woocommerce nav.woocommerce-pagination ul li a:focus,
     .woocommerce nav.woocommerce-pagination ul li a:hover,
     .woocommerce nav.woocommerce-pagination ul li span.current { ... }
   Spesifisitasnya (0,3,4) — 3 class (.woocommerce/.woocommerce-pagination/
   .current) DITAMBAH 4 elemen (nav/ul/li/span). Punya kita sebelumnya cuma
   (0,3,0) — jumlah class-nya SAMA (3), tapi kalah di jumlah elemen (0<4),
   dan itu yang dibandingkan kalau jumlah class seri. Diverifikasi langsung
   di browser: warna current page kebaca rgb(129,111,152) — ungu bawaan
   WooCommerce, bukan warna kita.
   Perbaikan: semua selector di bawah diberi prefix `.woocommerce-page`
   (class ASLI yang memang ada di <body> tiap halaman WooCommerce, bukan
   class buatan/hack) — menambah SATU class lagi supaya jumlah class kita
   (4) PASTI melebihi berapa pun elemen yang mereka tambahkan, tanpa
   bergantung tebak-tebakan urutan pencatatan stylesheet. */

.woocommerce-pagination {
	margin-top: calc(var(--tk-grid-gap-y) * 2);
	text-align: center;
}

.woocommerce-page .woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px; /* Dirapatkan dari 20px — revisi user 9 Sep 2026 ("terlalu renggang"). */
	list-style: none;
	margin: 0;
	padding: 0;
	border: none; /* woocommerce.css memberi kotak bergaris di sekeliling deretan angka — tidak cocok dengan gaya datar Takkan. */
}

.woocommerce-page .woocommerce-pagination ul.page-numbers li {
	border: none;
	margin: 0;
	overflow: visible;
}

.woocommerce-page .woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	min-height: 34px; /* Target sentuh yang nyaman di HP. */
	padding: 0;
	background: none;
	color: var(--tk-fg);
	text-decoration: none;
}

.woocommerce-page .woocommerce-pagination a.page-numbers:hover {
	background: none;
	color: var(--tk-fg);
	opacity: 0.6;
}

/* Panah prev/next & "…" — lebih redup daripada angka halaman, dan diberi
   jarak ekstra supaya terlihat sebagai "kontrol", bukan bagian dari
   deretan angka (sesuai acuan yang dikirim user: ‹ … 1 2 3 … 24 … ›). */
.woocommerce-page .woocommerce-pagination .page-numbers.prev,
.woocommerce-page .woocommerce-pagination .page-numbers.next,
.woocommerce-page .woocommerce-pagination .page-numbers.dots {
	color: var(--tk-fg-muted);
}

/* Panah `‹ ›` 20px — permintaan user 9 Sep 2026. Cuma panahnya; angka
   halaman tetap 14px seperti teks lain di situs. `line-height: 1` supaya
   ukuran yang lebih besar ini tidak ikut menaikkan tinggi barisnya. */
.woocommerce-page .woocommerce-pagination .page-numbers.prev,
.woocommerce-page .woocommerce-pagination .page-numbers.next {
	font-size: 20px;
	line-height: 1;
}

.woocommerce-page .woocommerce-pagination .page-numbers.prev {
	margin-right: 4px;
}

.woocommerce-page .woocommerce-pagination .page-numbers.next {
	margin-left: 4px;
}

.woocommerce-page .woocommerce-pagination a.page-numbers.prev:hover,
.woocommerce-page .woocommerce-pagination a.page-numbers.next:hover {
	color: var(--tk-fg);
	opacity: 1;
}

/* Halaman aktif: TEBAL + garis bawah turun sedikit — bukan cuma warna,
   supaya tetap terbaca oleh yang buta warna (pola yang sama seperti kotak
   ukuran terpilih di PDP/drawer). */
.woocommerce-page .woocommerce-pagination .page-numbers.current {
	background: none;
	color: var(--tk-fg);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
}

/* =========================================================================
   TOMBOL "KEMBALI KE ATAS"
   ========================================================================= */

.tk-back-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000000; /* Literal: tombol ini melayang di atas konten halaman terang, bukan mengikuti kanvas. */
	border: none;
	border-radius: 50%;
	color: #ffffff;
	cursor: pointer;

	/* Muncul setelah halaman digulir sejauh satu layar (ambangnya di plp.js).
	   `visibility` ikut dianimasikan supaya saat tersembunyi tombolnya
	   benar-benar tidak bisa diklik — beda dengan opacity:0 yang masih
	   menangkap klik. */
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--tk-duration) var(--tk-ease), visibility var(--tk-duration) var(--tk-ease);

	/* Di BAWAH semua drawer (cart 1000/1001, add-to-cart 1010/1011, region
	   picker 1100/1101) — tombol ini tidak boleh mengambang di atas panel
	   yang sedang terbuka. */
	z-index: 900;
}

.tk-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
}

.tk-back-to-top:hover {
	background: #000000;
	color: #ffffff;
	opacity: 0.82;
}

.tk-back-to-top .tk-icon {
	width: 18px;
	height: 18px;
}

@media (max-width: 767px) {
	.tk-back-to-top {
		right: 16px;
		bottom: 16px;
	}
}

/* ---------- Halaman Wishlist (/wishlist/) ----------
   Kartu & grid memakai aturan PLP di atas (body diberi class
   `woocommerce woocommerce-page` oleh takkan_wishlist_body_class()).
   Kondisi kosong = teks saja, ditengahkan: judul 16px semibold + caption
   14px reguler, ditumpuk dengan jarak 8px (permintaan user 1 Okt 2026). */
.tk-wishlist .tk-wishlist-empty {
	text-align: center;
	padding: 40px 0 0; /* Tanpa padding bawah: jarak ke tombol CTA diatur margin CTA (40px). */
}

.tk-wishlist .tk-wishlist-empty__title {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
}

.tk-wishlist .tk-wishlist-empty__caption {
	margin: 0 auto;
	max-width: 480px;
	font-size: 14px;
	font-weight: 400;
	text-wrap: balance; /* Hindari satu kata yatim di baris kedua. */
}

/* Kotak CTA "Discover more" di paling bawah halaman Wishlist (brief klien 5 Okt 2026,
   acuan H&M Favorites): kotak bergaris, teks kapital kecil, ditengahkan. Berlaku
   baik saat wishlist berisi maupun kosong. Hover/focus ditulis eksplisit —
   `a:hover` global di style.css menimpa warna & garis bawah. */
.tk-wishlist .tk-wishlist__cta {
	margin: 40px 0 0; /* 40px dari teks/grid di atasnya (revisi klien 6 Okt 2026). */
	text-align: center;
}

.tk-wishlist .tk-wishlist__cta .tk-wishlist__cta-btn,
.tk-wishlist .tk-wishlist__cta .tk-wishlist__cta-btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 240px;
	height: 48px;
	padding: 0 24px;
	border: 1px solid var(--tk-fg);
	border-radius: 0;
	background: transparent;
	color: var(--tk-fg);
	font-size: 12px;
	letter-spacing: 0;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s, color 0.2s;
}

@media (hover: hover) {
	.tk-wishlist .tk-wishlist__cta .tk-wishlist__cta-btn:hover {
		background: var(--tk-fg);
		color: var(--tk-bg);
		text-decoration: none;
	}
}

.tk-wishlist .tk-wishlist__cta .tk-wishlist__cta-btn:focus-visible {
	outline: 2px solid var(--tk-fg);
	outline-offset: 2px;
}

/* ---------- Filter jenis sale (halaman SALE, 13 Okt 2026) ----------
   Checkbox "SAMPLE SALE" / "DEFECT SALE" di bawah dropdown Sort (di dalam toolbar). Kapital 12px seperti
   label Sort; kotak 16px bersudut tajam, terpilih = hitam berisi centang putih. Input aslinya tetap ada
   (tersembunyi secara visual) supaya bisa difokus keyboard & dibaca pembaca layar. */
.tk-sale-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	margin-top: 12px;
}

.tk-sale-filter .tk-check {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--tk-fg);
	font-size: 12px;
	letter-spacing: 0;
	text-transform: uppercase;
	cursor: pointer;
}

.tk-sale-filter .tk-check input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	opacity: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.tk-sale-filter .tk-check__box {
	display: inline-block;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	box-sizing: border-box;
	border: 1px solid var(--tk-fg);
	border-radius: 0;
	background: #fff;
}

.tk-sale-filter .tk-check input:checked + .tk-check__box {
	background: var(--tk-fg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

.tk-sale-filter .tk-check input:focus-visible + .tk-check__box {
	outline: 2px solid var(--tk-fg);
	outline-offset: 2px;
}

.tk-sale-filter__apply {
	min-height: 32px;
	padding: 0 16px;
	border: 1px solid var(--tk-fg);
	border-radius: 0;
	background: #fff;
	color: var(--tk-fg);
	font-size: 12px;
	text-transform: uppercase;
}

/* ---------- Tata letak halaman SALE (13 Okt 2026, acuan klien) ----------
   Judul "SALE" (+ Sort) di atas; di bawahnya DUA KOLOM: kiri = filter jenis sale (judul kolom + checkbox
   bertumpuk), kanan = grid produk. HP/tablet (≤900px): satu kolom, filter di atas grid, checkbox sebaris. */
.tk-sale-layout {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	column-gap: 48px;
	align-items: start;
}

.tk-sale-aside .tk-sale-filter {
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin-top: 0;
}

.tk-sale-filter__title {
	margin: 0 0 4px;
	color: var(--tk-fg);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: uppercase;
}

.tk-sale-main {
	min-width: 0;
}

@media (max-width: 1280px) {
	.woocommerce .tk-sale-main ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 900px) {
	.tk-sale-layout {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 24px;
	}

	.tk-sale-aside .tk-sale-filter {
		flex-flow: row wrap;
		gap: 12px 24px;
	}

	.tk-sale-filter__title {
		flex: 0 0 100%;
		margin: 0;
	}

	.woocommerce .tk-sale-main ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Sort di kolom kiri halaman SALE, di atas "Sale type" (revisi user 13 Okt 2026). */
.tk-plp-toolbar.tk-plp-toolbar--aside {
	margin-bottom: 24px;
}

.tk-sale-aside .tk-sale-filter__title {
	margin-top: 0;
}

@media (max-width: 900px) {
	.tk-plp-toolbar.tk-plp-toolbar--aside {
		margin-bottom: 16px;
	}
}

/* Judul "Sort" di atas dropdown (halaman SALE): jarak ke dropdown 4px, seperti judul toolbar → Sort. */
.tk-plp-toolbar--aside .tk-sale-filter__title {
	margin: 0;
}