/*
Theme Name:   Takkan
Theme URI:    https://takkan.com
Description:  Tema Takkan — dark, editorial, minimalis. Child theme dari GeneratePress. Semua tampilan situs ada di sini; aturan bisnis (region, mata uang, quick add) ada di plugin Takkan Core.
Author:       Takkan
Template:     generatepress
Version:      0.1.19
Text Domain:  takkan
*/

/* =========================================================================
   FONDASI VISUAL
   -------------------------------------------------------------------------
   Acuan: wordmark "takkan" (huruf kecil semua, grotesque tebal) + referensi
   commission.nyc.

   Aturan tipografi yang disepakati:
   - SEMUA teks 14px. Tidak ada heading besar.
   - Tidak ada huruf kapital paksa (text-transform).
   - Tidak ada letter-spacing tambahan.
   Tipografinya sengaja datar — hierarki dibentuk oleh ruang kosong dan foto,
   bukan oleh ukuran huruf.
   ========================================================================= */

/**
 * Font web sendiri — DITAMBAHKAN 28 Sep 2026, permintaan klien (font
 * konsisten Helvetica Neue di SEMUA device, bukan cuma Mac/iPhone).
 *
 * ⚠️ BUKAN Helvetica Neue asli — itu font BERBAYAR (Monotype), dan klien
 * TIDAK punya lisensi web resmi untuk itu (file .otf/.ttf yang sempat
 * ditawarkan ternyata bajakan — sengaja TIDAK dipakai, lihat diskusi sesi
 * ini). Yang dipasang di sini adalah **Nimbus Sans** — font pengganti
 * Helvetica yang dibuat khusus untuk itu oleh URW++, GRATIS & LEGAL untuk
 * dipakai di web (lisensi AGPLv3, sumber:
 * github.com/ArtifexSoftware/urw-base35-fonts — proyek font resmi
 * Ghostscript, dipakai jutaan instalasi Linux/LibreOffice selama puluhan
 * tahun). Salinan teks lisensinya ada di
 * `assets/fonts/LICENSE-NimbusSans.txt`.
 *
 * ⚠️ "Nimbus Sans" (nama ini, di repo itu) BEDA dari "Nimbus Sans" versi
 * BARU yang dijual URW sendiri secara komersial — JANGAN bingung keduanya
 * kalau nanti perlu unduh ulang; sumbernya harus repo GitHub di atas, bukan
 * situs jual-beli font.
 *
 * ⚠️ DIROMBAK DUA KALI 28 Sep 2026 (hari yang sama):
 * 1. Awalnya "Helvetica Neue" ditaruh PALING DEPAN (Mac/iPhone yang punya
 *    font itu asli lihat Helvetica Neue SUNGGUHAN, device lain baru turun
 *    ke Nimbus Sans) — tapi itu berarti Mac/iPhone vs Windows/Android/Linux
 *    lihat DUA font berbeda yang mirip tapi TIDAK 100% identik. Dibalik:
 *    "Nimbus Sans" dipindah ke depan, "Helvetica Neue" jadi cadangan.
 * 2. Permintaan user lagi: *"Hilangin aja Helvetica neue nya jadi kita
 *    cuman pakai 1 font family, Nimbus Sans"* — "Helvetica Neue"/Helvetica/
 *    Arial DIBUANG TOTAL dari daftar. Sekarang cuma "Nimbus Sans" +
 *    `sans-serif` generik (BUKAN nama font tertentu, cuma kategori) sebagai
 *    jaring pengaman paling akhir kalau file `.woff2` kita gagal dimuat.
 *    Hasilnya: SEMUA device menampilkan font yang SAMA PERSIS, tidak ada
 *    lagi kemungkinan tampilan beda-beda tergantung font apa yang kebetulan
 *    terinstal di device pengunjung.
 *
 * Cuma 2 ketebalan yang di-host (Regular 400 + Bold, dipetakan ke
 * font-weight 600-700) — itu SATU-SATUNYA dua ketebalan yang dipakai situs
 * ini (dicek: `grep font-weight` cuma menghasilkan 400 & 600). Italic tidak
 * pernah dipakai di situs ini, jadi tidak diregister — kalau nanti perlu,
 * file `.woff2`-nya sudah ada juga di folder yang sama, tinggal ditambah
 * blok @font-face lagi.
 */
@font-face {
	font-family: "Nimbus Sans";
	src: url("assets/fonts/NimbusSans-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Nimbus Sans";
	src: url("assets/fonts/NimbusSans-Bold.woff2") format("woff2");
	font-weight: 600 700; /* Rentang, bukan angka tunggal — situs ini cuma pakai 600, tapi <strong>/<b> bawaan browser minta 700; satu file ini menjawab keduanya. */
	font-style: normal;
	font-display: swap;
}

:root {
	/* Warna KANVAS HALAMAN — beda per bagian situs, lihat blok
	   "TEMA PER BAGIAN SITUS" di bawah. Default di sini (hitam) dipakai
	   homepage (acuan commission.nyc, cinematic/gelap). */
	--tk-bg:            #000000;
	--tk-fg:            #ffffff;
	--tk-fg-muted:      rgba(255, 255, 255, 0.55);
	--tk-line:          rgba(255, 255, 255, 0.18);
	--tk-overlay:       rgba(0, 0, 0, 0.92);

	/* Judul halaman (semua halaman: Shop/kategori/pencarian, Wishlist, About Us,
	   Cart, Account, dst) — satu sumber. Revisi klien 4 Okt 2026: 24px semibold. */
	--tk-title-size:    24px;
	--tk-title-weight:  600;
	/* Kerning judul: sedikit dirapatkan (revisi user 12 Okt 2026: "kerningnya kecilin dikit, proporsional"); huruf kapital tebal 24px terlalu renggang di spasi normal. */
	--tk-title-tracking: -0.01em;

	/* Status */
	--tk-soldout:       rgba(255, 255, 255, 0.32);
	--tk-error:         #ff5c4d;

	/* Warna KONTROL DI ATAS FOTO (wishlist, quick-add, panah, panel ukuran)
	   — SENGAJA TIDAK IKUT BERUBAH biarpun kanvas halaman di atas berubah
	   putih/hitam. Kontrol-kontrol itu duduk di atas FOTO PRODUK yang tetap
	   gelap/moody apapun warna latar halamannya (lihat moodboard), jadi
	   lingkaran gelap + ikon putih di atasnya harus tetap konsisten seperti
	   di referensi Tony Bianco — bukan ikut kanvas. */
	--tk-overlay-fg:        #ffffff;
	--tk-overlay-fg-muted:  rgba(255, 255, 255, 0.55);
	--tk-overlay-line:      rgba(255, 255, 255, 0.18);
	--tk-overlay-soldout:   rgba(255, 255, 255, 0.32);

	/* Tipografi */
	--tk-font: "Nimbus Sans", sans-serif;
	--tk-size: 14px;
	--tk-leading: 1.35;

	/* Ritme grid PLP (spec Tony Bianco) */
	--tk-grid-gap-x: 10px;
	--tk-grid-gap-y: 20px;
	--tk-product-ratio: 5 / 7;

	/* Gerak. 0.5s adalah durasi hover di referensi. */
	--tk-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--tk-duration: 0.5s;
}

html {
	background: var(--tk-bg);
	/* ⚠️ DITAMBAHKAN 23 Sep 2026 — user melaporkan teks "Color: Black" di
	   PDP HP terlihat JAUH lebih besar dari 14px dan kepotong (screenshot
	   dikonfirmasi BUKAN hasil zoom manual, tampilan normal). Tidak bisa
	   direproduksi di pane browser alat uji (Chromium) — di sana lebar
	   tersedia untuk label itu 351px, jauh lebih dari cukup untuk
	   "Color: Black" di 14px, `overflow:visible` di semua leluhurnya.
	   Kecurigaan: WebKit "Text Autosizer" bawaan Mobile Safari — fitur
	   yang secara OTOMATIS memperbesar font di dalam blok SEMPIT (mis.
	   `<th class="label">` yang aslinya `display:table-cell` sebelum
	   ditimpa `display:block` di pdp.css, warisan algoritma sizing tabel
	   bisa tetap "bocor" di sebagian versi WebKit) supaya "terbaca" —
	   TANPA peduli ukuran font yang eksplisit ditulis CSS. Ini kelas bug
	   yang SUDAH BEBERAPA KALI terdokumentasi di proyek ini: hanya muncul
	   di perangkat sentuh/Safari sungguhan, tidak pernah kelihatan di
	   alat uji Chromium manapun.
	   Perbaikan standar industri (dipakai normalize.css/modern-normalize
	   dkk): matikan auto-inflate ini SITUS-LEBAR, bukan cuma di label
	   Color — supaya kelas bug yang sama tidak muncul lagi di elemen lain
	   yang kebetulan berada di kolom sempit. */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	background: var(--tk-bg);
	color: var(--tk-fg);
	font-family: var(--tk-font);
	font-size: var(--tk-size);
	line-height: var(--tk-leading);
	-webkit-font-smoothing: antialiased;
}

/* Ratakan semua ukuran teks. GeneratePress dan WooCommerce sama-sama
   menyuntikkan ukuran heading sendiri — di sini semuanya dikembalikan ke 14px. */
h1, h2, h3, h4, h5, h6,
.woocommerce-loop-product__title,
.product_title,
button, input, select, textarea {
	font-family: inherit;
	font-size: var(--tk-size);
	font-weight: 400;
	line-height: var(--tk-leading);
	letter-spacing: normal;
	text-transform: none;
	margin: 0;
}

/* Judul halaman bawaan WordPress/GeneratePress (<h1 class="entry-title">).
   Judul arsip produk diatur di plp.css, halaman Info di info-pages.css —
   semuanya memakai token --tk-title-* di :root. */
.entry-title {
	font-size: var(--tk-title-size);
	font-weight: var(--tk-title-weight);
	letter-spacing: var(--tk-title-tracking);
}

/* Tombol bawaan Safari di dalam kolom — "kartu kontak" (ikon orang + panah, email/nama/telepon)
   dan "kunci" pengisi password (kolom password, ditambahkan 13 Okt 2026) — dihilangkan
   (revisi user 12 & 13 Okt 2026). Isi otomatis lewat
   keyboard tetap jalan; hanya tombolnya yang disembunyikan. `!important` di sini
   disengaja: pseudo-element vendor ini ditata oleh UA stylesheet WebKit. */
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button {
	display: none !important;
	visibility: hidden;
	position: absolute;
	right: 0;
	width: 0;
	margin: 0;
	pointer-events: none;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover,
a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* Fokus keyboard harus selalu terlihat — di latar hitam, outline putih.
   Jangan pernah dihapus: ini satu-satunya cara pengguna keyboard tahu
   posisinya di halaman. */
:focus-visible {
	outline: 1px solid var(--tk-fg);
	outline-offset: 2px;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Hormati pengguna yang mematikan animasi di setelan perangkatnya. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* =========================================================================
   LEBAR HALAMAN — full-bleed, bukan dikotak di tengah
   -------------------------------------------------------------------------
   GeneratePress default-nya mengunci konten ke max-width 1200px di tengah
   layar, sisanya dibiarkan kosong kiri-kanan. Referensi brand (commission.nyc,
   tonybianco.com) tidak begitu — konten mengisi hampir seluruh lebar layar,
   cuma dikasih jarak tepi (padding) secukupnya. Ini keputusan tampilan
   yang saya ambil berdasarkan referensi tsb — kalau ternyata kamu lebih
   suka versi dikotak di layar sangat lebar, tinggal beri tahu, gampang
   dibalik (angkanya ada di sini saja). */
/* ⚠️ Jarak tepi DIKECILKAN 10 Sep 2026 (permintaan user: "card productnya
   dilebarin lagi... padding page kiri kanannya mengecil") — 40px→24px
   desktop, 16px→12px HP. Wadah konten (.grid-container.container) jadi
   lebih lebar, dan karena grid produk PLP pakai kolom `1fr` (lihat plp.css),
   kartunya otomatis ikut melebar tanpa perlu diubah sendiri.
   ⚠️ Navbar (`.tk-home-topbar` di home.css) SENGAJA disamakan dengan angka
   ini (lihat catatan di sana) — kalau angka di sini diubah lagi, ubah juga
   di situ supaya navbar tetap sejajar dengan tepi konten. */
.grid-container.container {
	max-width: 100%;
	padding-left: 24px;
	padding-right: 24px;
}

@media (max-width: 767px) {
	.grid-container.container {
		padding-left: 12px;
		padding-right: 12px;
	}
}

/* =========================================================================
   TEMA PER BAGIAN SITUS
   -------------------------------------------------------------------------
   Keputusan user (2 Sep 2026): halaman belanja (Shop/PDP/Cart/Checkout/
   Account) TERANG — latar putih, teks hitam, seperti tonybianco.com.
   Homepage TETAP gelap sesuai commission.nyc (belum dibangun, akan pakai
   kanvas :root default hitam di atas apa adanya — halaman homepage tidak
   dapat body class woocommerce-page, jadi tidak kena blok ini).

   Caranya: timpa TOKEN WARNA KANVAS (bukan tulis ulang tiap komponen).
   Semua komponen kita (judul produk, harga, dropdown sort, dst) sudah
   pakai var(--tk-bg)/var(--tk-fg)/dkk, jadi otomatis ikut berubah di
   sini tanpa disentuh satu per satu. Kontrol di atas foto TIDAK kebagian
   efek ini — itu sengaja pakai token --tk-overlay-* terpisah (lihat :root). */
/* ⚠️ Bug ditemukan & diverifikasi 2 Sep 2026: <html> TIDAK ikut berubah
   warna lewat aturan di bawah, walau <body>-nya sudah putih. Alasannya:
   custom property CSS (--tk-bg) mengalir ke BAWAH pohon elemen, bukan ke
   ATAS — override di body TIDAK menjalar balik ke html leluhurnya, yang
   masih membaca --tk-bg dari :root (hitam, default global untuk homepage
   nanti). Efeknya baru kelihatan kalau tinggi konten body meleset sedikit
   (mis. karena elemen sticky/scroll seperti galeri PDP) — celahnya
   menampakkan hitam dari <html> di baliknya. Selector :has() ini
   menyamakan <html> dengan <body> di dalamnya, tanpa perlu duplikasi
   token di dua tempat. */
html:has( body.woocommerce-page ),
html:has( body.woocommerce ) {
	background: #ffffff;
}

body.woocommerce-page,
body.woocommerce {
	--tk-bg:       #ffffff;
	--tk-fg:       #000000;
	--tk-fg-muted: rgba(0, 0, 0, 0.55);
	--tk-line:     rgba(0, 0, 0, 0.18);
	--tk-soldout:  rgba(0, 0, 0, 0.32);
	background: var(--tk-bg);
	color: var(--tk-fg);
}

/* GeneratePress kasih latar PUTIH KERAS ke pembungkus artikelnya sendiri
   (.inside-article) — di halaman terang itu masuk akal, tapi brand ini
   gelap di semua halaman (body sudah kita bikin hitam). Akibatnya nama
   produk (teks putih) jadi tidak kelihatan sama sekali di atas kotak putih
   itu. Ditemukan & diverifikasi 2 Sep 2026 lewat laporan user — nama
   produk hilang di grid Shop.
   ⚠️ Kenapa !important: warna itu datang dari <style> INLINE yang
   GeneratePress cetak otomatis di <head> tiap halaman, isinya variabel
   warna dari Appearance → Customize → Colors (--base-3, defaultnya putih
   karena skema warnanya memang belum pernah diatur untuk brand gelap ini).
   <style> inline itu selalu ditaruh belakangan, jadi CSS file manapun
   dengan spesifisitas sama akan selalu kalah tanpa !important — bukan
   soal urutan file lagi. Perbaikan yang lebih rapi jangka panjang: atur
   skema warna GeneratePress-nya langsung (base-1/2/3, accent, dst) di
   Customizer supaya cocok dengan hitam/putih Takkan sejak sumbernya,
   biar tidak main kejar-kejaran !important tiap ada elemen GP baru yang
   pakai variabel warna itu. Ditunda ke sesi styling menyeluruh berikutnya. */
.inside-article {
	background: transparent !important;

	/* Jarak tepi juga di-nol-kan di sini. Alasannya: GeneratePress memberi
	   padding 40px ke .inside-article, PADAHAL pembungkus halaman kita
	   (.grid-container.container di atas) sudah punya padding 40px sendiri.
	   Keduanya bertumpuk jadi 80px — itulah kenapa bagian atas halaman
	   terasa terlalu longgar dan konten terdorong jauh dari header
	   (dilaporkan user 2 Sep 2026). Sekarang jarak tepi punya SATU sumber
	   saja: .grid-container.container. Kalau mau mengubah jarak tepi
	   halaman, ubah di sana, bukan di sini. */
	padding: 0 !important;
}

/* GeneratePress memberi jarak atas ekstra ke area konten. Dikecilkan supaya
   konten mulai lebih dekat ke header — tetap ada nafas, tapi tidak menyisakan
   pita kosong selebar layar. */
.entry-content {
	margin-top: 12px;
}

/* Footer situs menempel di dasar layar kalau isi halaman pendek (halaman kosong:
   Wishlist, SALE tanpa produk, FAQ/Terms kosong, 404, dst) — revisi klien
   6 Okt 2026. Body jadi kolom flex setinggi layar; footer `margin-top: auto`
   mendorongnya ke bawah. Kalau isi lebih tinggi dari layar tidak ada bedanya.
   Home TIDAK ikut (template penuh sendiri, tanpa footer situs, overflow hidden).
   ⚠️ `#page` (`.grid-container`: max-width + margin auto) di dalam flex kolom
   menyusut ke lebar isinya kalau tidak diberi width:100% — margin auto
   membatalkan stretch. Admin bar WP (32px / 46px di HP) memperpendek tinggi. */
body:not(.tk-home) {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

body:not(.tk-home) #page {
	flex: 0 0 auto;
	width: 100%;
	box-sizing: border-box;
}

body:not(.tk-home) .tk-site-footer {
	margin-top: auto;
}

body.admin-bar:not(.tk-home) {
	min-height: calc(100vh - 32px);
	min-height: calc(100dvh - 32px);
}

@media (max-width: 782px) {
	body.admin-bar:not(.tk-home) {
		min-height: calc(100vh - 46px);
		min-height: calc(100dvh - 46px);
	}
}

/* Teks khusus pembaca layar. */
.tk-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   KEADAAN KOSONG — komponen global (revisi user 13 Okt 2026, feedback klien)
   Ikon + judul kapital tebal + teks + tombol hitam opsional. Dicetak
   `takkan_empty_state()` (functions.php). Dipakai: arsip katalog kosong, Sale,
   Wishlist, Cart, drawer Cart, Orders & Overview akun. Warna eksplisit (bukan
   token) supaya sama di semua halaman. Hover/focus tombol ditulis eksplisit —
   `a:hover` global menimpa warna & garis bawah.
   ========================================================================== */
.tk-empty {
	padding: 40px 16px;
	color: #1a1a1a;
	text-align: center;
}

.tk-empty p {
	margin: 0;
}

.tk-empty .tk-empty__title {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: uppercase;
}

.tk-empty .tk-empty__text {
	max-width: 440px;
	/* 6px = jarak TERLIHAT judul → teks ±16px (revisi user 14 Okt 2026): ruang kosong di atas/bawah huruf (setengah
	   line-height) menambah ±10px pada margin kotak, jadi 16px "terlihat" ≠ margin 16px. */
	margin: 6px auto 0;
	color: #707070;
	line-height: 1.6;
	text-wrap: balance;
}

.tk-empty a.tk-empty__button,
.tk-empty a.tk-empty__button:hover,
.tk-empty a.tk-empty__button:focus {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin: 24px 0 0;
	padding: 0 32px;
	border: 0;
	border-radius: 0;
	background: #1a1a1a;
	color: #ffffff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: uppercase;
}

.tk-empty.tk-empty--compact {
	padding: 24px 0;
}

/* Kekuatan password (revisi user 13 Okt 2026): kotak "Very weak - Please enter a stronger password."
   bawaan WooCommerce DIHAPUS; yang tampil hanya teks hint, merah selama kekuatan belum
   memenuhi syarat (kelas short/bad pada kotak yang disembunyikan), kembali abu begitu cukup
   kuat. Hint dicetak tepat SESUDAH kotak itu, jadi cukup selector saudara. Berlaku di semua
   form (daftar, Password akun, reset password, Checkout). */
body .woocommerce form .woocommerce-password-strength,
body .woocommerce div.woocommerce-password-strength {
	/* Disembunyikan secara visual, bukan display:none — jQuery `.show()` WooCommerce memberi inline display:block. Tetap terbaca pembaca layar. */
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	white-space: nowrap;
}

.woocommerce form small.woocommerce-password-hint {
	display: block;
	margin: 8px 0 0;
	color: #767676;
	font-size: 12px;
	line-height: 1.5;
}

.woocommerce form .woocommerce-password-strength.short ~ small.woocommerce-password-hint,
.woocommerce form .woocommerce-password-strength.bad ~ small.woocommerce-password-hint {
	color: var(--tk-co-error, #c0392b);
}

/* Ikon tampil/sembunyikan password (revisi user 13 Okt 2026): tombol `button.show-password-input`
   disisipkan JS WooCommerce di setiap `.password-input`; font ikon bawaannya tidak termuat, jadi
   ikon mata digambar sendiri lewat CSS mask (mengikuti `currentColor`). WooCommerce menambah kelas
   `display-password` pada tombol saat sandi sedang terlihat → ikon mata dicoret. */
.woocommerce button.show-password-input::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	margin: 0 auto;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 12S5.5 5 12 5s10.5 7 10.5 7-4 7-10.5 7S1.5 12 1.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 12S5.5 5 12 5s10.5 7 10.5 7-4 7-10.5 7S1.5 12 1.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.woocommerce button.show-password-input.display-password::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 12S5.5 5 12 5s10.5 7 10.5 7-4 7-10.5 7S1.5 12 1.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 12S5.5 5 12 5s10.5 7 10.5 7-4 7-10.5 7S1.5 12 1.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
}

/* ---------- Pemesanan online MATI (saklar Settings → Takkan Store, kelas body `tk-ordering-off`; 14 Okt 2026) ----------
   Situs jadi katalog: ikon keranjang navbar, ikon tambah-ke-keranjang di kartu produk, serta tombol & kuantitas beli di
   halaman produk disembunyikan; di halaman produk tampil tombol nonaktif (dicetak Takkan_Ordering::render_notice()).
   Keranjang samping tidak dicetak sama sekali (server), /cart/ & /checkout/ dialihkan ke beranda (server). */
body.tk-ordering-off .tk-home-topbar__cart,
body.tk-ordering-off .tk-card__addcart {
	display: none;
}

body.tk-ordering-off.woocommerce div.product form.cart .single_add_to_cart_button,
body.tk-ordering-off.woocommerce div.product form.cart .quantity {
	display: none !important; /* Kotak kuantitas PDP sudah memakai !important di tempat lain. */
}

.woocommerce div.product .tk-ordering-off__button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 16px 0 0;
	padding: 16px 20px;
	border: 1px solid transparent;
	border-radius: 0;
	background: rgba(0, 0, 0, 0.06);
	color: var(--tk-fg-muted);
	font: inherit;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	cursor: not-allowed;
	opacity: 1;
}