/**
 * ZENOS Home V2 -- stylesheet. Palet: minimal, editorial, hangat -- charcoal
 * typography, aksen coklat hangat, permukaan krem/off-white, border abu-abu
 * hangat lembut, ikon garis (line icon). SENGAJA tidak ada warna hijau di
 * tombol primer/sekunder mana pun (larangan eksplisit briefing).
 *
 * Di-enqueue kondisional is_front_page() lewat zsd_enqueue_home_v2_publik()
 * di includes/home-template.php, priority default (10) -- cukup, karena
 * semua rule di sini di-scope ketat ke class `.zsd-home-v2` (tidak
 * menimpa/berebut apa pun milik Botiga di luar wrapper ini).
 *
 * REVISI QA VISUAL (2026-08-24, "targeted fix" pass): radius tombol/gambar
 * dikunci ke 15px lewat var --zsd-home-radius (dulu campur 999px/16px/20px);
 * Featured Collection dapat tombol panah (di samping dots yang sudah ada);
 * Hero dapat mask "Soft Fade" (blend tepi gambar ke latar, terpisah dari
 * transisi antar-slide yang sudah ada sebelumnya); About & Closing dilepas
 * dari kontainer/kartu bulat (Closing jadi editorial center-aligned).
 *
 * REVISI QA VISUAL ROUND 2 (2026-08-24, "Targeted Visual Correction" --
 * HANYA Hero, Optional Info Bar, Featured Collection; section lain di file
 * ini TIDAK diubah): Hero dibalik jadi teks-kiri/gambar-kanan, blob shape
 * gambar Hero dilepas (radius biasa spy "menyatu" bukan kartu berdiri
 * sendiri), mask Soft Fade jadi linear dari tepi kiri (bukan radial
 * sekeliling), tombol CTA utama Hero dipaksa putih default (defensif thd
 * override tema); Info Bar dapat divider vertikal halus antar item + mode
 * swipe horizontal sungguhan di mobile (sebelumnya numpuk 1 kolom); Featured
 * Collection dapat latar krem-2 full-bleed sendiri, heading rata kiri,
 * panah pindah ke sebelah judul, gambar produk rasio potret, tombol Add to
 * Cart diubah total (bukan lagi terlihat gelap penuh -- lihat bagian 03).
 */

/**
 * ===== PENGATURAN GLOBAL TOKO -- rollout ke Home (2026-09-11) =====
 *
 * Lanjutan "Journal Customization Redesign": Home V2 sekarang JUGA ikut
 * `zsd_ambil_global_visual_setting()` (includes/global-visual-settings.php,
 * SAMA persis dipakai Journal & Cart & Checkout) lewat atribut
 * data-jr-palet/data-jr-aksen/data-jr-font di wrapper `.zsd-home-v2` (lihat
 * zsd_render_halaman_home_v2() di home-template.php).
 *
 * Home V2 SUDAH punya token custom property sendiri (--zsd-home-*, dipakai
 * 56x di file ini) sejak awal dibangun -- jadi migrasinya BUKAN nulis ulang
 * tiap rule, tapi nge-ALIAS 7 nilai warna --zsd-home-* di atas supaya nunjuk
 * ke --zsd-jr-* (nilai default persis disalin dari .zsd-journal di
 * assets/journal-publik.css, preset klasik -- SUMBER TUNGGAL kebenaran warna
 * tetap di sana, jangan didefinisikan ulang berbeda di sini). Radius
 * (--zsd-home-radius/-sm) TIDAK disentuh -- di luar scope warna/font.
 *
 * --zsd-home-brown-dark (dipakai buat shade hover, TIDAK ada padanan
 * langsung di token --zsd-jr-*) SENGAJA pakai color-mix() nurunin
 * --zsd-jr-aksen jadi lebih gelap, ketimbang nambah key baru di preset
 * registry bersama (journal.php) cuma buat 1 pemakaian di Home.
 */
.zsd-home-v2 {
	--zsd-jr-bg: #fdfaf5;
	--zsd-jr-krem: #f2e8da;
	--zsd-jr-krem-muda: #f8f2e9;
	--zsd-jr-coklat: #6b5744;
	--zsd-jr-coklat-muda: #a9927a;
	--zsd-jr-teks: #2c2620;
	--zsd-jr-teks-muted: #8a7f6f;
	--zsd-jr-border: #e7dccb;
	--zsd-jr-aksen: var(--zsd-jr-coklat);
	--zsd-jr-font-heading: "Inter", -apple-system, "system-ui", "Segoe UI", Roboto, sans-serif;

	--zsd-home-charcoal: var(--zsd-jr-teks);
	--zsd-home-ink-soft: var(--zsd-jr-teks-muted);
	--zsd-home-cream: var(--zsd-jr-bg);
	--zsd-home-cream-2: var(--zsd-jr-krem);
	--zsd-home-border: var(--zsd-jr-border);
	--zsd-home-brown: var(--zsd-jr-aksen);
	--zsd-home-brown-dark: color-mix(in srgb, var(--zsd-jr-aksen) 78%, black);
	/* 15px -- radius terkunci sesuai QA visual 2026-08-24 (dipakai konsisten
	 * di semua tombol CTA & gambar Home V2: Hero CTA, Add to Cart Featured,
	 * About CTA, Closing CTA, gambar About/Featured/Categories/Closing). */
	--zsd-home-radius: 15px;
	--zsd-home-radius-sm: 10px;

	color: var(--zsd-home-charcoal);
	background: var(--zsd-home-cream);
	overflow-x: hidden;
	font-family: "Inter", -apple-system, "system-ui", "Segoe UI", Roboto, sans-serif;
}

/* Heading pakai font pairing global (--zsd-jr-font-heading) -- BARU, Home
   sebelumnya tidak punya rule font-family sama sekali (selalu ikut default
   tema/browser). Ditaruh 1 rule generik di sini (bukan per-selector h2)
   supaya semua judul section otomatis ikut kalau seller ganti preset font,
   tanpa perlu sentuh tiap blok h1/h2 di bawah satu-satu. */
.zsd-home-v2 h1,
.zsd-home-v2 h2 {
	font-family: var(--zsd-jr-font-heading);
}

/* ===== Preset Palet Dasar/Warna Aksen/Font Pairing -- REUSE persis dari
   .zsd-journal-listing/.zsd-journal-single (assets/journal-publik.css),
   diaktifkan lewat atribut data-jr-* yang sama di wrapper .zsd-home-v2.
   "klasik"/"ikuti-palet"/"konsisten" SENGAJA tidak punya blok -- itu default
   yang berarti "pakai nilai dasar di atas apa adanya". */
.zsd-home-v2[data-jr-palet="terracotta-hangat"] {
	--zsd-jr-bg: #fdf8f3;
	--zsd-jr-krem: #f0e0d0;
	--zsd-jr-krem-muda: #f7ebdf;
	--zsd-jr-coklat: #8a4b32;
	--zsd-jr-coklat-muda: #c08b6f;
	--zsd-jr-teks: #2e2117;
	--zsd-jr-teks-muted: #9c8672;
	--zsd-jr-border: #e8d2bd;
}

.zsd-home-v2[data-jr-palet="zaitun-alami"] {
	--zsd-jr-bg: #f9faf5;
	--zsd-jr-krem: #e8ecdc;
	--zsd-jr-krem-muda: #f1f4e9;
	--zsd-jr-coklat: #5b6b4a;
	--zsd-jr-coklat-muda: #93a17f;
	--zsd-jr-teks: #262b1f;
	--zsd-jr-teks-muted: #8b937d;
	--zsd-jr-border: #dde3cd;
}

.zsd-home-v2[data-jr-palet="abu-batu-modern"] {
	--zsd-jr-bg: #f7f7f5;
	--zsd-jr-krem: #e9e7e2;
	--zsd-jr-krem-muda: #f2f1ed;
	--zsd-jr-coklat: #5c5850;
	--zsd-jr-coklat-muda: #948d80;
	--zsd-jr-teks: #262420;
	--zsd-jr-teks-muted: #928d84;
	--zsd-jr-border: #dedad2;
}

.zsd-home-v2[data-jr-aksen="terracotta"]  { --zsd-jr-aksen: #b3572f; }
.zsd-home-v2[data-jr-aksen="hijau-sawo"]  { --zsd-jr-aksen: #6b7a4f; }
.zsd-home-v2[data-jr-aksen="biru-dusty"]  { --zsd-jr-aksen: #4f7686; }
.zsd-home-v2[data-jr-aksen="mustard"]     { --zsd-jr-aksen: #c08a2e; }

.zsd-home-v2[data-jr-font="editorial-klasik"] {
	--zsd-jr-font-heading: "Playfair Display", Georgia, serif;
}

.zsd-home-v2[data-jr-font="editorial-hangat"] {
	--zsd-jr-font-heading: "Fraunces", Georgia, serif;
}

.zsd-home-v2 * {
	box-sizing: border-box;
}

.zsd-home-v2 img {
	max-width: 100%;
	display: block;
}

.zsd-home-eyebrow {
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--zsd-home-brown);
	font-weight: 600;
	margin: 0 0 12px;
}

.zsd-home-section {
	max-width: 1240px;
	margin: 0 auto;
	padding: 72px 24px;
}

.zsd-home-section-head {
	max-width: 640px;
	margin: 0 auto 40px;
	text-align: center;
}

.zsd-home-section-head h2 {
	font-size: clamp(26px, 3.4vw, 38px);
	line-height: 1.2;
	margin: 0 0 12px;
	font-weight: 600;
}

.zsd-home-section-sub {
	color: var(--zsd-home-ink-soft);
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
}

.zsd-home-section-cta {
	text-align: center;
	margin-top: 40px;
}

/* ---------- Buttons ---------- */
.zsd-home-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	border-radius: var(--zsd-home-radius);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	border: 1.5px solid transparent;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
	cursor: pointer;
}

.zsd-home-btn-primer {
	background: var(--zsd-home-brown);
	color: #fff;
}

/* FINAL FULL IMPLEMENTATION (2026-08-25), BAGIAN 2 GLOBAL BUTTON SYSTEM:
 * hover Primary CTA dikunci "cream background + dark text" secara GLOBAL
 * (SEBELUMNYA cuma berlaku khusus di Hero -- brown-dark/putih di section
 * lain, itu section-specific style yang bertentangan dgn sistem terkunci
 * ini). Sekarang SATU perilaku hover yang sama di semua pemakai
 * `.zsd-home-btn-primer` (Hero CTA utama, About "Kenali ZENOS", dst). */
.zsd-home-btn-primer:hover,
.zsd-home-btn-primer:focus-visible {
	background: var(--zsd-home-cream);
	color: var(--zsd-home-charcoal);
	transform: translateY(-1px);
}

/* Outline CTA -- teks default GELAP (charcoal), BUKAN coklat, sesuai BAGIAN 2
 * GLOBAL BUTTON SYSTEM ("thin brown border + dark text"). Border tetap
 * coklat (elemen aksen), cuma warna TEKS yang dikoreksi dari brown ke
 * charcoal di sini. */
.zsd-home-btn-outline {
	background: transparent;
	color: var(--zsd-home-charcoal);
	border-color: var(--zsd-home-brown);
}

.zsd-home-btn-outline:hover,
.zsd-home-btn-outline:focus-visible {
	background: var(--zsd-home-brown);
	color: #fff;
}

.zsd-home-v2 .zsd-home-btn:focus-visible {
	outline: 3px solid var(--zsd-home-brown);
	outline-offset: 3px;
}

/* =====================================================================
 * 01 HERO
 * ===================================================================== */
/* Layout -- REVISI (QA round 2): TEKS KIRI / GAMBAR KANAN (urutan markup di
 * home-template.php ditukar jadi teks dulu baru visual, jadi kolom grid
 * mengikuti urutan DOM apa adanya). Kolom gambar sengaja lebih lebar
 * (1.15fr) daripada teks (0.85fr) -- visual "besar", teks ringkas.
 *
 * HERO TARGETED VISUAL FIX (2026-08-25), Desktop: gap dipersempit 56px->28px
 * -- gap lebar lama-lah yang menciptakan kesan "vertical strip/gap" kosong
 * antara teks & gambar (terpisah dari masalah lebar mask di bawah). Struktur
 * kolom/typography/CTA/dots TIDAK berubah sama sekali. */
.zsd-home-hero {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 28px;
	align-items: center;
	max-width: 1280px;
	margin: 0 auto;
	padding: 56px 24px 72px;
}

.zsd-home-hero-visual {
	position: relative;
	aspect-ratio: 4 / 3.3;
	/* Radius biasa (15px, BUKAN blob 999px.../40px seperti sebelumnya) --
	 * requirement QA round 2: visual harus terasa MENYATU ke section, bukan
	 * seperti kartu/blob berdiri sendiri. */
	border-radius: var(--zsd-home-radius);
	overflow: hidden;
	/* Cream persis sama dengan latar halaman (bukan cream-2) supaya mask
	 * "Soft Fade" di bawah membaur mulus ke latar, bukan ke nuansa krem
	 * yang berbeda. */
	background: var(--zsd-home-cream);
	touch-action: pan-y;
	/* HERO TARGETED VISUAL FIX (2026-08-25): gambar "digeser" sedikit masuk
	 * ke area teks -- margin-left NEGATIF pada grid item yang di-stretch
	 * (lebar auto) MELEBARKAN box ke KIRI (tepi kanan tetap di posisi
	 * semula), bukan menggeser seluruh gambar -- hasilnya gambar tetap besar
	 * & dominan di sisi kanan, cuma tepi kirinya kini menjorok ke bekas area
	 * gap/teks. Karena Soft Fade di bawah dilebarkan bersamaan, bagian yang
	 * menjorok ini otomatis jadi transparan/membaur ke krem, BUKAN menimpa
	 * teks secara visual. */
	margin-left: -32px;
}

.zsd-home-hero-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	visibility: hidden;
}

.zsd-home-hero-slide.is-active {
	opacity: 1;
	visibility: visible;
}

/* Mode "fade" (default/disetujui) -- transisi CSS murni ANTAR SLIDE
 * (crossfade saat gambar berganti). */
.zsd-home-hero[data-transisi="fade"] .zsd-home-hero-slide {
	transition: opacity 0.7s ease;
}

/* Mode "none" -- ganti instan, tanpa transisi antar slide. */
.zsd-home-hero[data-transisi="none"] .zsd-home-hero-slide {
	transition: none;
}

/* "Soft Fade" -- REVISI DEFINISI ROUND 2 (QA visual 2026-08-24): klarifikasi
 * Ferdian -- efeknya harus "blend secara alami KE ARAH area teks", bukan
 * fade sekeliling gambar (radial, versi round 1). Karena layout sekarang
 * gambar ada di KANAN (teks di kiri), mask-nya linear dari TEPI KIRI gambar
 * (sisi yang bersebelahan dengan teks) meluruh ke transparan, sisi
 * kanan/atas/bawah tetap penuh solid. Gambar itu sendiri TETAP TAJAM (mask
 * cuma meredupkan opacity di tepi, sama sekali tidak blur subjeknya). Kalau
 * browser tidak dukung mask-image, gambar tampil normal (degradasi aman).
 *
 * HERO TARGETED VISUAL FIX (2026-08-25): titik fade DILEBARKAN dari 16% ke
 * 50% -- di 16%, transparan->solid terjadi dalam jarak SANGAT SEMPIT di tepi
 * kiri gambar, jadi kelihatan seperti "kolom fade sempit" yang terpisah dari
 * gambar itu sendiri (apalagi gap lama 56px menambah kesan celah). Di 50%,
 * separuh lebar gambar ikut serta dalam transisi bertahap, jadi
 * teks->krem->gambar membaur MENERUS tanpa terasa ada 2 elemen terpisah.
 * Gambar TETAP tajam (mask murni opacity, bukan blur).
 *
 * HOME FINAL TARGETED FIX (2026-08-25), BAGIAN 1: titik fade disetel ulang
 * ke 30% (nilai locked terbaru, ganti 50% di atas) -- HANYA angka stop-nya
 * yang berubah, mekanisme mask/struktur Hero lain TIDAK disentuh.
 */
.zsd-home-hero[data-transisi="fade"] .zsd-home-hero-visual {
	mask-image: linear-gradient(to right, transparent 0%, #000 30%, #000 100%);
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 30%, #000 100%);
}

/* Mode "none" -- gambar tampil apa adanya, tanpa efek blend tepi apa pun. */
.zsd-home-hero[data-transisi="none"] .zsd-home-hero-visual {
	mask-image: none;
	-webkit-mask-image: none;
}

.zsd-home-hero-dots {
	position: absolute;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 2;
}

.zsd-home-hero-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.zsd-home-hero-dot.is-active {
	background: #fff;
	transform: scale(1.3);
}

.zsd-home-hero-dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.zsd-home-hero-judul {
	font-size: clamp(32px, 4.4vw, 52px);
	line-height: 1.12;
	font-weight: 600;
	margin: 0 0 18px;
}

.zsd-home-hero-sub {
	font-size: 17px;
	line-height: 1.65;
	color: var(--zsd-home-ink-soft);
	max-width: 46ch;
	margin: 0 0 30px;
}

.zsd-home-hero-cta {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

/* FIX BUG (QA round 2), NILAI DISELARASKAN ke BAGIAN 2 GLOBAL BUTTON SYSTEM
 * (FINAL FULL IMPLEMENTATION, 2026-08-25): CTA utama Hero dilaporkan tampil
 * teks gelap/hitam di state DEFAULT (seharusnya PUTIH -- rule
 * `.zsd-home-btn-primer { color:#fff }` sudah ada, tapi kemungkinan kalah
 * cascade/specificity lawan styling link bawaan tema Botiga). Di-scope
 * KHUSUS `.zsd-home-hero` + `!important` MURNI utk menang lawan tema (alasan
 * teknis, sama pola defensif dgn tombol Add to Cart Featured Collection) --
 * NILAI warna di sini SEKARANG PERSIS SAMA dengan rule global
 * `.zsd-home-btn-primer`/`:hover` di atas (brown/putih default, krem/gelap
 * hover), TIDAK lagi jadi pengecualian section-specific. */
.zsd-home-hero .zsd-home-btn-primer,
.zsd-home-hero .zsd-home-btn-primer:visited {
	background: var(--zsd-home-brown);
	color: #fff !important;
}

.zsd-home-hero .zsd-home-btn-primer:hover,
.zsd-home-hero .zsd-home-btn-primer:focus-visible {
	background: var(--zsd-home-cream);
	border-color: var(--zsd-home-brown);
	color: var(--zsd-home-charcoal) !important;
	transform: translateY(-1px);
}

/* =====================================================================
 * 02 OPTIONAL INFO BAR
 * ===================================================================== */
.zsd-home-info-bar {
	border-top: 1px solid var(--zsd-home-border);
	border-bottom: 1px solid var(--zsd-home-border);
	background: var(--zsd-home-cream-2);
}

/* REVISI (QA round 2): dari CSS grid 4-kolom jadi flex 1 baris -- supaya
 * "2-4 items" tetap 1 baris horizontal apa pun jumlahnya (grid 4 kolom lama
 * akan menyisakan slot kosong kalau cuma 2-3 item; flex mengisi otomatis). */
.zsd-home-info-bar-track {
	max-width: 1240px;
	margin: 0 auto;
	padding: 28px 24px;
	display: flex;
	align-items: stretch;
}

.zsd-home-info-bar-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	position: relative;
	flex: 1 1 0;
	padding: 0 24px;
}

.zsd-home-info-bar-item:first-child {
	padding-left: 0;
}

.zsd-home-info-bar-item:last-child {
	padding-right: 0;
}

/* Divider vertikal SUBTLE -- HANYA di antara item (tidak di tepi luar kiri/
 * kanan), 1px, warna border yang sudah dipakai di tempat lain (low
 * contrast), ~60% tinggi konten, center vertikal. Requirement QA round 2. */
.zsd-home-info-bar-item + .zsd-home-info-bar-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 60%;
	background: var(--zsd-home-border);
}

.zsd-home-info-bar-icon {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	color: var(--zsd-home-brown);
}

.zsd-home-info-bar-icon .zsd-ikon-svg {
	width: 100%;
	height: 100%;
}

.zsd-home-info-bar-judul {
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 3px;
}

.zsd-home-info-bar-desc {
	font-size: 13px;
	color: var(--zsd-home-ink-soft);
	margin: 0;
	line-height: 1.5;
}

/* =====================================================================
 * 03 FEATURED COLLECTION -- REVISI ROUND 2 (QA visual 2026-08-24):
 * (a) section dapat latar krem-2 full-bleed sendiri (beda tipis dari latar
 *     halaman) supaya terasa jadi "zona" tersendiri, tanpa jadi kartu besar
 *     (tidak ada border-radius/shadow di section-nya sendiri);
 * (b) heading (eyebrow+judul) RATA KIRI (bukan center seperti section
 *     lain) -- makanya markup-nya SENGAJA tidak lagi pakai
 *     `.zsd-home-section-head` yang dipakai Values/Categories (supaya
 *     section itu TIDAK ikut berubah);
 * (c) tombol panah pindah ke sebelah judul (`.zsd-home-fc-nav`), bukan lagi
 *     di sisi track.
 * ===================================================================== */
.zsd-home-featured {
	background: var(--zsd-home-cream-2);
	padding: 72px 0;
}

.zsd-home-featured-inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
}

.zsd-home-fc-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 32px;
	text-align: left;
}

.zsd-home-fc-head-teks .zsd-home-eyebrow {
	margin-bottom: 8px;
}

.zsd-home-fc-head-teks h2 {
	font-size: clamp(26px, 3.4vw, 38px);
	line-height: 1.2;
	margin: 0;
	font-weight: 600;
}

.zsd-home-fc-nav {
	display: none;
	gap: 10px;
	flex: 0 0 auto;
}

/* Panah kiri/kanan -- HANYA desktop (>=900px, selaras breakpoint JS
 * BATAS_DESKTOP), subtle sesuai requirement ("subtle left/right arrows"),
 * sekarang duduk INLINE di samping judul (bukan lagi absolute di atas
 * track). JS yang menyembunyikan individual kalau cuma 1 halaman (<=4
 * produk) lewat perbaruiPanah() di home-publik.js. */
/* STEP 1.5 LOCK point 7/8 (2026-08-25): sistem responsive dikunci 3 mode --
 * Desktop >1024px, Tablet 641-1024px, Mobile <=640px -- 900px BUKAN mode
 * device keempat. Threshold panah dipindah dari 900px ke 1025px supaya
 * persis selaras batas "Desktop" (CSS tablet lain di file ini pakai
 * `max-width: 1024px`, jadi "Desktop" mulai di 1025px ke atas) dan selaras
 * BATAS_DESKTOP di home-publik.js (harus diubah bareng kalau salah satu
 * berubah). Sebelumnya 900px dipakai sebagai ambang semu -- menciptakan
 * "mode keempat" tidak resmi di rentang 900-1024px yang bentrok dengan
 * definisi Tablet (2-column visual presentation, tanpa panah/dots). */
@media (min-width: 1025px) {
	.zsd-home-fc-nav {
		display: flex;
	}
}

.zsd-home-fc-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1.5px solid var(--zsd-home-border);
	background: var(--zsd-home-cream);
	color: var(--zsd-home-charcoal);
	cursor: pointer;
	padding: 0;
	flex: 0 0 auto;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.zsd-home-fc-arrow svg {
	width: 18px;
	height: 18px;
}

.zsd-home-fc-arrow:hover,
.zsd-home-fc-arrow:focus-visible {
	background: var(--zsd-home-brown);
	border-color: var(--zsd-home-brown);
	color: #fff;
}

.zsd-home-fc-arrow:disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.zsd-home-fc-wrap {
	position: relative;
}

.zsd-home-fc-track {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	/* 28px (naik dari 24px) -- sedikit menambah "napas" antar kartu, bagian
	 * dari penyesuaian ringan Priority 1 (produk sedikit lebih menonjol
	 * tanpa memperbesar kartu / menambah shadow). */
	gap: 28px;
}

.zsd-home-fc-kosong {
	text-align: center;
	color: var(--zsd-home-ink-soft);
	max-width: 46ch;
	margin: 0 auto;
}

.zsd-home-fc-kartu {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Rasio potret (BUKAN 1:1/persegi lagi) -- requirement QA round 2 ("taller
 * portrait-ish product image proportion"), object-fit:cover di bawah
 * memastikan gambar tidak gepeng/distorsi. */
.zsd-home-fc-gambar {
	display: block;
	border-radius: var(--zsd-home-radius);
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--zsd-home-cream-2);
	margin-bottom: 16px;
}

.zsd-home-fc-gambar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.zsd-home-fc-kartu:hover .zsd-home-fc-gambar img {
	transform: scale(1.04);
}

.zsd-home-fc-info {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.zsd-home-fc-nama {
	font-size: 15px;
	font-weight: 600;
	color: var(--zsd-home-charcoal);
	text-decoration: none;
}

.zsd-home-fc-nama:hover {
	color: var(--zsd-home-brown);
}

.zsd-home-fc-harga {
	font-size: 14px;
	color: var(--zsd-home-ink-soft);
}

.zsd-home-fc-harga ins {
	text-decoration: none;
	color: var(--zsd-home-brown);
}

.zsd-home-fc-aksi {
	margin-top: 10px;
}

/* Tombol Add to Cart -- REVISI TOTAL (QA round 2): laporan Ferdian bilang
 * tombol tampil "gelap penuh" -- kemungkinan besar style default tema
 * Botiga (.woocommerce a.button, dst) menang cascade/specificity lawan
 * rule lama di sini. Sekarang DIPAKSA (`!important` di semua properti
 * visual kunci, sama pola defensif dengan fix tombol CTA Hero) jadi:
 * plain/transparan, border coklat tipis, TEKS GELAP (charcoal, bukan
 * coklat/putih), radius 15px, TIDAK pill, TIDAK uppercase. Label teksnya
 * sendiri diganti "+ Keranjang" lewat filter WooCommerce di
 * home-template.php (zsd_home_teks_tombol_keranjang()) -- class
 * `add_to_cart_button`/`ajax_add_to_cart`/atribut `data-product_id` di
 * elemen ini SAMA SEKALI TIDAK diubah, jadi woo-cart-fix.js & AJAX native
 * tetap 100% berfungsi seperti sebelumnya. */
.zsd-home-fc-aksi .add_to_cart_button,
.zsd-home-fc-aksi .added_to_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 10px 16px;
	border-radius: var(--zsd-home-radius) !important;
	border: 1.5px solid var(--zsd-home-brown) !important;
	background: transparent !important;
	color: var(--zsd-home-charcoal) !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
	text-transform: none !important;
	box-shadow: none !important;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Hover -- SUBTLE (tint krem lembut), SENGAJA BUKAN dark-filled pill. */
.zsd-home-fc-aksi .add_to_cart_button:hover,
.zsd-home-fc-aksi .add_to_cart_button:focus-visible {
	background: var(--zsd-home-cream) !important;
	border-color: var(--zsd-home-brown-dark) !important;
	color: var(--zsd-home-charcoal) !important;
}

.zsd-home-fc-aksi .add_to_cart_button.loading {
	opacity: 0.6;
}

/* Jarak vertikal antara "+ Keranjang" (sudah .added) dan link "View cart"
 * WooCommerce yang muncul setelah AJAX add-to-cart sukses -- sebelumnya
 * keduanya width:100% dan langsung nempel tanpa gap (border saling
 * bersentuhan). HANYA spacing, warna/tipografi/radius/hierarchy/behavior
 * tidak diubah. */
.zsd-home-fc-aksi .added_to_cart {
	margin-top: 8px;
}

.zsd-home-fc-dots {
	display: none;
	justify-content: center;
	gap: 8px;
	margin-top: 28px;
}

.zsd-home-fc-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--zsd-home-border);
	border: none;
	padding: 0;
	cursor: pointer;
}

.zsd-home-fc-dot.is-active {
	background: var(--zsd-home-brown);
}

.zsd-home-fc-dot:focus-visible {
	outline: 2px solid var(--zsd-home-brown);
	outline-offset: 2px;
}

/* =====================================================================
 * 04 ABOUT / BRAND STORY
 * ===================================================================== */
.zsd-home-about {
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	gap: 56px;
	align-items: center;
}

/**
 * STEP 1.5 LOCK point 5 (2026-08-25): About beralih dari 1 gambar collage
 * flattened jadi grid "individual assets" (Settings-ready, 1-5 gambar,
 * default 3 -- lihat zsd_home_about_default()/zsd_home_render_about() di
 * home-template.php). Wrapper TETAP tanpa background/padding/radius sendiri
 * (requirement lama masih berlaku -- radius 15px HANYA di tiap gambar).
 *
 * Pola grid PER JUMLAH gambar (data-jumlah-gambar, diisi PHP): default 3 =
 * 1 gambar besar (kiri, tinggi penuh) + 2 gambar susun (kanan) -- konsisten
 * secara visual dengan pola mosaic Explore Categories di section lain. 1-2
 * gambar & 4-5 gambar pakai grid genap sebagai fallback aman (belum ada
 * referensi visual bespoke utk jumlah itu di blueprint manapun).
 */
.zsd-home-about-gambar {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: 1fr;
	/* 6px -- gap CSS ASLI (bukan margin/border palsu), sesuai requirement
	 * blueprint "internal grid gap/gutter 6px". */
	gap: 6px;
	aspect-ratio: 4 / 3.6;
	background: none;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
}

.zsd-home-about-gambar img {
	border-radius: var(--zsd-home-radius);
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Default 3 gambar -- item pertama besar (span 2 baris, kolom kiri), item
 * ke-2 & ke-3 otomatis mengisi kolom kanan baris 1 & 2 (CSS Grid
 * auto-placement bawaan, tidak perlu grid-row manual utk item 2/3). */
.zsd-home-about-gambar[data-jumlah-gambar="3"] img:first-child {
	grid-row: 1 / 3;
}

/* 1 gambar -- satu tile penuh, aspect ratio lebih landscape supaya tidak
 * terlalu tinggi kalau cuma 1 foto. */
.zsd-home-about-gambar[data-jumlah-gambar="1"] {
	grid-template-columns: 1fr;
	aspect-ratio: 4 / 3;
}

/* 2 gambar -- 2 kolom sejajar, tinggi sama. */
.zsd-home-about-gambar[data-jumlah-gambar="2"] {
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: unset;
	aspect-ratio: 4 / 2.6;
}

/* 4 gambar -- grid genap 2x2, sudah seimbang apa adanya (4 gambar pas
 * mengisi 2 kolom x 2 baris, tidak ada orphan) -- fallback generik ini
 * TETAP dipakai khusus utk 4 gambar. */
.zsd-home-about-gambar[data-jumlah-gambar="4"] {
	aspect-ratio: 4 / 4.2;
}

/**
 * 2026-09-09 TARGETED FIX -- HOME ABOUT/CERITA, khusus 5 gambar.
 * MASALAH SEBELUMNYA: 5 gambar mewarisi grid 2-kolom dasar (grid-auto-rows)
 * -> auto-placement browser numpuk jadi 2+2+1 (gambar ke-5 "orphan" sendirian
 * di baris ke-3, area gambar jadi tinggi memanjang, komposisi kiri-kanan
 * (mosaic vs kolom teks) jadi timpang.
 * FIX: mosaic editorial 1 gambar besar (kiri, span 2 kolom x 2 baris) + 4
 * gambar kecil (kanan, grid 2x2) -- SEMUA 5 gambar terpakai penuh di 1
 * komposisi grid 4-kolom x 2-baris, TIDAK ADA orphan, tinggi section
 * terkendali (aspect-ratio tetap dijaga longgar, bukan cuma dikecilin
 * semua). object-fit:cover (warisan rule dasar img di bawah) tetap dipakai
 * apa adanya -- treatment gambar TIDAK diubah, cuma komposisi grid-nya.
 * Desktop & Tablet SENGAJA pakai mosaic yang SAMA (konsisten dengan pola
 * "1 combined layout Desktop+Tablet" yang sudah dipakai section lain di
 * file ini, mis. Explore Categories) -- di lebar Tablet (641-1024px) kolom
 * mosaic ini masih dapat ruang cukup (bagian dari 0.95fr grid About, bukan
 * lebar penuh viewport) buat 4 kolom kecil tanpa kepepet. Mobile (<=640px)
 * dapat override TERPISAH di bawah (stack natural, bukan mosaic) karena di
 * situ ruangnya memang tidak cukup.
 */
.zsd-home-about-gambar[data-jumlah-gambar="5"] {
	grid-template-columns: repeat( 4, 1fr );
	grid-template-rows: 1fr 1fr;
	aspect-ratio: 4 / 3.3;
}

.zsd-home-about-gambar[data-jumlah-gambar="5"] img:nth-child( 1 ) {
	grid-column: 1 / 3;
	grid-row: 1 / 3;
}

.zsd-home-about-gambar[data-jumlah-gambar="5"] img:nth-child( 2 ) {
	grid-column: 3 / 4;
	grid-row: 1 / 2;
}

.zsd-home-about-gambar[data-jumlah-gambar="5"] img:nth-child( 3 ) {
	grid-column: 4 / 5;
	grid-row: 1 / 2;
}

.zsd-home-about-gambar[data-jumlah-gambar="5"] img:nth-child( 4 ) {
	grid-column: 3 / 4;
	grid-row: 2 / 3;
}

.zsd-home-about-gambar[data-jumlah-gambar="5"] img:nth-child( 5 ) {
	grid-column: 4 / 5;
	grid-row: 2 / 3;
}

.zsd-home-about-teks h2 {
	font-size: clamp(26px, 3.2vw, 36px);
	line-height: 1.2;
	margin: 0 0 16px;
	font-weight: 600;
}

.zsd-home-about-isi {
	color: var(--zsd-home-ink-soft);
	line-height: 1.7;
	margin: 0 0 26px;
	max-width: 52ch;
}

/* =====================================================================
 * 05 ZENOS VALUES -- tanpa card/box, murni ikon+teks (sesuai blueprint
 * "No Cards").
 * ===================================================================== */
.zsd-home-values-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	margin-top: 8px;
}

.zsd-home-values-item {
	text-align: center;
}

/* STEP 2.1 LOCK point 2 (2026-08-25): nomor 01-04, dirender HANYA kalau
 * 'tampilkan_nomor' aktif di zsd_home_values_default() (lihat
 * home-template.php) -- Settings-ready, jadi kalau di-nonaktifkan nanti
 * lewat get_option(), elemen ini otomatis tidak dicetak, tidak perlu ubah
 * CSS ini lagi. Style kecil & subtle -- searah aksen ZENOS, TIDAK berupa
 * badge/lingkaran/card (blueprint "no cards, no heavy borders"). */
.zsd-home-values-nomor {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--zsd-home-brown);
	opacity: 0.55;
	margin-bottom: 10px;
}

.zsd-home-values-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--zsd-home-brown);
	margin-bottom: 14px;
}

.zsd-home-values-icon .zsd-ikon-svg {
	width: 100%;
	height: 100%;
}

.zsd-home-values-judul-item {
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 6px;
}

.zsd-home-values-desc {
	font-size: 13.5px;
	color: var(--zsd-home-ink-soft);
	line-height: 1.55;
	margin: 0;
}

/* =====================================================================
 * 06 EXPLORE CATEGORIES -- hover spotlight (desktop, pointer halus saja),
 * fallback aman untuk sentuh/keyboard.
 * ===================================================================== */
/**
 * FINAL FULL IMPLEMENTATION (2026-08-25), BAGIAN 8 (menggantikan STEP 1.5
 * LOCK point 9): heading dan mosaic sekarang SATU komposisi grid gabungan
 * (BUKAN lagi heading block terpisah di atas + grid terpisah di bawahnya) --
 * "Large left tile begins lower so the heading can occupy the upper-left
 * area" & "Right side contains two stacked category tiles".
 *
 * Struktur `.zsd-home-cat-mosaic` (2 kolom x 2 baris, baris 1 = tinggi
 * heading/auto, baris 2 = tinggi tile besar/auto):
 * - Kolom kiri, baris 1: `.zsd-home-section-head` (heading, area upper-left).
 * - Kolom kiri, baris 2: `.zsd-home-cat-item-besar` (tile besar, MULAI LEBIH
 *   RENDAH -- persis di bawah heading, bukan sejajar dgn baris 1).
 * - Kolom kanan, baris 1/3 (span kedua baris = tinggi heading+gap+tile
 *   besar): `.zsd-home-cat-kanan`, grid bersarang 1fr/1fr sendiri supaya
 *   2 tile di dalamnya SAMA TINGGI satu sama lain apa pun tinggi heading di
 *   kolom kiri (kalau ditaruh di grid luar langsung, baris 1 yang auto/pendek
 *   punya vs baris 2 yang lebih tinggi bakal bikin 2 tile kanan tidak sama
 *   tinggi -- grid bersarang menghindari itu).
 * Gap 16px dipertahankan sesuai blueprint bagian 09 ("image gap 16px"
 * desktop). Maksimum 3 kategori & label "Jelajahi Kategori" TIDAK berubah.
 */
.zsd-home-cat-mosaic {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	gap: 16px;
}

.zsd-home-cat-mosaic .zsd-home-section-head {
	grid-column: 1;
	grid-row: 1;
	align-self: end;
	max-width: none;
	margin: 0;
	text-align: left;
}

.zsd-home-cat-item-besar {
	grid-column: 1;
	grid-row: 2;
	/* ~16:15 -- replikasi proporsi tile besar dari mosaic 2x2 lama (box
	 * penuh 16:7.5, kolom kiri lebar 1/2, tinggi penuh -- rasio setara). */
	aspect-ratio: 16 / 15;
}

.zsd-home-cat-kanan {
	grid-column: 2;
	grid-row: 1 / 3;
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 16px;
}

.zsd-home-cat-item {
	position: relative;
	display: flex;
	align-items: flex-end;
	height: 100%;
	border-radius: var(--zsd-home-radius);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	text-decoration: none;
	transition: opacity 0.35s ease, filter 0.35s ease, transform 0.35s ease;
}

.zsd-home-cat-item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(38, 34, 32, 0.72) 0%, rgba(38, 34, 32, 0.05) 55%);
}

.zsd-home-cat-label {
	position: relative;
	z-index: 1;
	padding: 22px;
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.zsd-home-cat-jelajahi {
	font-size: 13px;
	font-weight: 500;
	opacity: 0.9;
}

/* Spotlight hover -- HANYA perangkat dengan hover+pointer presisi (mouse),
 * supaya tidak "nyangkut" aktif di layar sentuh (bug umum :hover di
 * touchscreen). Ini juga jawaban langsung requirement "mobile fallback
 * tanpa hover dependency". */
@media (hover: hover) and (pointer: fine) {
	.zsd-home-cat-mosaic:hover .zsd-home-cat-item {
		opacity: 0.55;
		filter: blur(1px);
	}

	.zsd-home-cat-mosaic:hover .zsd-home-cat-item:hover {
		opacity: 1;
		filter: none;
		transform: scale(1.015);
	}
}

.zsd-home-cat-item:focus-visible {
	opacity: 1;
	filter: none;
	outline: 3px solid #fff;
	outline-offset: -6px;
}

/**
 * =====================================================================
 * 07 CLOSING STATEMENT -- STEP 1.5 LOCK point 4 (2026-08-25): TIDAK ADA CTA
 * dan TIDAK ADA photographic background lagi (2 pelanggaran HARD NO
 * blueprint bagian 18 yang diperbaiki di sini) -- diganti dekorasi line-art
 * Settings-ready (preset 'botanical' aktif, lihat
 * zsd_home_render_closing_decoration() di home-template.php) yang
 * ditempatkan di kiri/kanan teks, murni ornamental (aria-hidden, pointer-
 * events:none, tidak memengaruhi kontras teks/headline).
 * =====================================================================
 */
/**
 * HOME FINAL TARGETED FIX (2026-08-25), BAGIAN 3: background Closing HARUS
 * full lebar viewport, TAPI konten internal (teks+dekorasi) tetap terkunci
 * ke max-width 1240px yang sama seperti section lain -- `.zsd-home-section`
 * (max-width:1240px GLOBAL, dipakai section lain) SAMA SEKALI TIDAK diubah,
 * override KHUSUS di sini saja (elemen ini pakai class gabungan
 * `zsd-home-section zsd-home-closing`, rule di bawah menang lawan
 * `.zsd-home-section` krn spesifisitas sama & urutan lebih akhir di file).
 * Teknik: max-width dilepas + width:100% (supaya background menyentuh tepi
 * viewport), padding kiri/kanan diganti dari fixed 24px jadi
 * `max(24px, calc((100% - 1240px) / 2))` -- di layar > ~1288px hasilnya
 * "zona konten" PERSIS 1240px di tengah (efek sama seperti
 * max-width:1240px+margin:auto biasa, cuma lewat padding), di layar sempit
 * turun ke minimum 24px (sama seperti section lain).
 */
.zsd-home-closing {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 32px;
	max-width: none;
	width: 100%;
	padding-top: 24px;
	padding-bottom: 96px;
	padding-left: max(24px, calc((100% - 1240px) / 2));
	padding-right: max(24px, calc((100% - 1240px) / 2));
	/* 2026-09-11: sebelumnya hex hardcode #f0e9e0 (tidak ikut token apa pun) --
	   dialiaskan ke --zsd-home-cream-2 (nilai identik) supaya section ini
	   ikut berubah kalau seller ganti preset palet global. */
	background: var(--zsd-home-cream-2);
}

.zsd-home-closing-teks {
	max-width: 60ch;
	text-align: center;
}

.zsd-home-closing-deco {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	color: var(--zsd-home-border);
	opacity: 0.9;
	pointer-events: none;
}

.zsd-home-closing-deco-svg {
	width: 44px;
	height: auto;
	max-height: 220px;
}

/* 2026-09-09 -- preset dekorasi berbasis GAMBAR raster (Birds/Organic/
   Heritage/Minimal/Sakura, lihat zsd_home_closing_deco_gambar() di
   home-template.php), BEDA dari 'botanical' yang SVG line-art inline di
   atas. 1 file dipakai bareng utk kiri & kanan (aset aslinya sudah punya
   ornamen di KEEMPAT sudut kanvasnya) -- background-size dilebarkan 2x
   dari box supaya cuma separuh sisi kanvas yang kelihatan per kolom
   (background-position left utk kiri nunjukin sudut kiri-atas+kiri-bawah,
   right utk kanan nunjukin sudut kanan-atas+kanan-bawah), teknik masking
   sudut standar tanpa perlu potong file jadi 2. */
.zsd-home-closing-deco-gambar {
	width: 170px;
	height: 190px;
	background-repeat: no-repeat;
	background-size: 340px 190px;
}

.zsd-home-closing-deco-kiri.zsd-home-closing-deco-gambar {
	background-position: left center;
}

.zsd-home-closing-deco-kanan.zsd-home-closing-deco-gambar {
	background-position: right center;
}

.zsd-home-closing-heart {
	display: block;
	margin-top: 22px;
	color: var(--zsd-home-brown);
	font-size: 15px;
	line-height: 1;
}

.zsd-home-closing-teks h2 {
	font-size: clamp(24px, 3vw, 32px);
	line-height: 1.25;
	margin: 0 0 14px;
	font-weight: 600;
}

.zsd-home-closing-teks p {
	color: var(--zsd-home-ink-soft);
	line-height: 1.65;
	margin: 0 auto 26px;
	max-width: 48ch;
}

/* =====================================================================
 * RESPONSIVE -- tablet (<=1024px)
 * ===================================================================== */
@media (max-width: 1024px) {
	/**
	 * STEP 3 FINAL VISUAL FIX (2026-08-25), lock point 3: overlay teks-di-
	 * atas-gambar dari STEP 2.1 (scrim gelap + teks putih) DIBATALKAN --
	 * terbukti menyimpang dari FINAL VISUAL BLUEPRINT lewat QA visual. Yang
	 * benar: "cream text zone" -- teks gelap di atas latar krem, gambar
	 * berbaur alami ke latar krem lewat Soft Fade, gambar tetap tajam, tanpa
	 * scrim, tanpa teks putih di atas foto. Ini PERSIS pola yang sudah ada
	 * di Desktop (lihat BAGIAN HERO di atas: `.zsd-home-hero` grid 2-kolom +
	 * `[data-transisi="fade"] .zsd-home-hero-visual` mask Soft Fade). Struktur
	 * dasar (grid 2-kolom, mask, warna teks/tombol) tetap diwarisi apa adanya
	 * dari Desktop di sini.
	 *
	 * HERO TARGETED VISUAL FIX (2026-08-25): sebelumnya blok Tablet ini TIDAK
	 * override apa pun (murni "warisi Desktop apa adanya"), tapi di lebar
	 * Tablet yang lebih sempit itu terbukti membuat teks & gambar terasa jadi
	 * 2 elemen terpisah ("separate image card"), bukan 1 komposisi Hero yang
	 * menyatu. Sekarang di-override EKSPLISIT: gap dipersempit lagi (28px->
	 * 20px, lebih ketat dari Desktop krn kontainer lebih sempit) + overlap
	 * gambar ke area teks diperbesar sedikit (-32px->-40px) supaya Soft Fade
	 * (mask sudah dilebarkan ke 50% di rule Desktop, otomatis ikut berlaku di
	 * sini) benar-benar kelihatan membaurkan gambar ke krem, bukan cuma
	 * berdampingan begitu saja. */
	.zsd-home-hero {
		gap: 20px;
	}

	.zsd-home-hero-visual {
		margin-left: -40px;
	}

	/* Info Bar tetap 1 baris horizontal (flex) turun sampai breakpoint mobile
	 * (640px) di bawah, tempat baru beralih ke mode swipe -- tidak perlu
	 * override apa pun di breakpoint tablet ini. */

	.zsd-home-fc-track {
		grid-template-columns: repeat(2, 1fr);
	}

	/**
	 * STEP 3 FINAL VISUAL FIX (2026-08-25), lock point 1: About Tablet HARUS
	 * TETAP 2-kolom (gambar/mosaic kiri, teks kanan) -- "lebih compact", BUKAN
	 * ditumpuk gambar-lalu-teks seperti Mobile. Sebelumnya section ini ikut
	 * override `.zsd-home-about { grid-template-columns: 1fr }` +
	 * `.zsd-home-about-gambar { order: -1 }` yang sama dengan Mobile (karena
	 * keduanya sama-sama berada di bawah breakpoint <=1024px) -- itu bug,
	 * ketahuan lewat QA visual STEP 3. Override itu SEKARANG dipindah, HANYA
	 * berlaku di breakpoint Mobile (<=640px) di bawah, TIDAK lagi di sini.
	 * Tanpa override apa pun di blok Tablet ini, `.zsd-home-about` otomatis
	 * mewarisi grid 2-kolom dasar (`grid-template-columns: 0.95fr 1.05fr`,
	 * lihat BAGIAN "04 ABOUT / BRAND STORY" di atas) -- gap 6px & radius 15px
	 * per gambar TIDAK berubah sama sekali (aturan itu ada di
	 * `.zsd-home-about-gambar`/`.zsd-home-about-gambar img`, tidak disentuh).
	 */

	/* Closing (dekorasi kiri/teks/dekorasi kanan, flex-row) tidak perlu
	 * override khusus tablet -- di lebar ini masih cukup ruang utk 2
	 * dekorasi 44px flanking teks (lihat breakpoint mobile di bawah utk
	 * titik di mana dekorasi dimatikan). */

	.zsd-home-values-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Tablet -- FINAL FULL IMPLEMENTATION: TETAP 1 komposisi grid gabungan
	 * heading+mosaic (BAGIAN 8 spec eksplisit "DESKTOP + TABLET: One
	 * combined editorial layout/grid"), cuma gap lebih compact sesuai
	 * blueprint bagian 09 ("gap sekitar 12-14px"). Struktur grid (kolom/
	 * baris/posisi heading & tile besar) diwarisi apa adanya dari rule dasar
	 * di atas -- tidak perlu diulang di sini. */
	.zsd-home-cat-mosaic,
	.zsd-home-cat-kanan {
		gap: 13px;
	}
}

/* =====================================================================
 * RESPONSIVE -- mobile (<=640px). Featured Collection beralih ke swipe
 * kontinu (1 kartu penuh + sebagian kartu berikutnya), paginasi
 * halaman (dots) dimatikan (JS juga berhenti membangun dots di lebar ini --
 * lihat home-publik.js).
 * ===================================================================== */
@media (max-width: 640px) {
	.zsd-home-section {
		padding: 48px 18px;
	}

	/**
	 * STEP 3 FINAL VISUAL FIX (2026-08-25), lock point 3: overlay teks-di-
	 * atas-gambar (STEP 2.1) DIBATALKAN, sama seperti Tablet di atas --
	 * ganti ke "cream text zone" (teks gelap di latar krem, tanpa scrim,
	 * tanpa teks putih di atas foto). BEDA dgn Tablet: lebar Mobile (<=640px)
	 * terlalu sempit utk grid 2-kolom side-by-side Desktop (kolom teks bisa
	 * kurang dari 130px, CTA/judul tidak akan muat) -- jadi ditumpuk 1 kolom
	 * (urutan DOM apa adanya: teks dulu, baru gambar di bawahnya, BUKAN
	 * overlay). Soft Fade tetap dipakai (bukan dimatikan), cuma arah mask-nya
	 * diputar jadi vertikal supaya membaur ke tepi ATAS gambar (sisi yang
	 * bersebelahan dengan teks di atasnya) -- padanan vertikal dari mask
	 * horizontal Desktop, gambar tetap 100% tajam (bukan blur).
	 *
	 * HERO TARGETED VISUAL FIX (2026-08-25): gap dipersempit (28px->10px) +
	 * gambar ditarik naik dikit ke area teks (margin-top NEGATIF, padanan
	 * vertikal dari trik margin-left negatif Desktop/Tablet) + mask
	 * dilebarkan 16%->50% (SAMA seperti Desktop) -- sebelumnya kombinasi
	 * gap lebar + fade sempit bikin gambar kelihatan seperti "kartu terpisah"
	 * di bawah teks+tombol, bukan 1 komposisi Hero yang menyatu. `margin-left`
	 * warisan dari rule Desktop (dipakai utk trik overlap HORIZONTAL di
	 * layout 2-kolom) di-reset ke 0 di sini -- di layout 1-kolom Mobile,
	 * margin-left negatif cuma bikin gambar geser ke kiri/terpotong, tidak
	 * relevan lagi (overlap yang dipakai di Mobile arahnya VERTIKAL, lewat
	 * margin-top). */
	/* HERO MOBILE -- NO FADE + SPACING (2026-08-25): gap grid DIHAPUS (0) --
	 * jarak CTA "Tentang Kami" ke gambar sekarang MURNI dikontrol lewat
	 * `margin-top` di `.zsd-home-hero-visual` di bawah (20px persis), bukan
	 * gap+margin-top ditumpuk (yang sebelumnya menghasilkan overlap negatif
	 * -12px, bukan jarak positif 20px seperti diminta). */
	.zsd-home-hero {
		grid-template-columns: 1fr;
		gap: 0;
		padding: 40px 18px 40px;
	}

	/* HERO MOBILE -- NO FADE + SPACING (2026-08-25): margin-top diganti dari
	 * -22px (overlap) jadi +20px (jarak positif) sesuai instruksi terbaru --
	 * layout & styling gambar lain (aspect-ratio, radius, object-fit) TIDAK
	 * disentuh. */
	.zsd-home-hero-visual {
		aspect-ratio: 3 / 2.4;
		margin-left: 0;
		margin-top: 20px;
	}

	/* HOME FINAL TARGETED FIX (2026-08-25), BAGIAN 2: Mobile TANPA Soft Fade
	 * sama sekali -- gambar tampil penuh/crisp, tidak ada opacity meredup di
	 * tepi mana pun. HANYA Mobile (<=640px) yang kena; Desktop & Tablet TETAP
	 * pakai mask (lihat rule dasar & override Tablet di atas). */
	.zsd-home-hero[data-transisi="fade"] .zsd-home-hero-visual {
		mask-image: none;
		-webkit-mask-image: none;
	}

	.zsd-home-hero-cta {
		flex-direction: column;
		align-items: stretch;
	}

	/* STEP 3 FINAL VISUAL FIX, lock point 1: stacking gambar-lalu-teks
	 * KHUSUS Mobile (dipindah dari blok Tablet di atas -- lihat catatan di
	 * sana). Tablet (641-1024px) TIDAK lagi kena rule ini, tetap 2-kolom. */
	.zsd-home-about {
		grid-template-columns: 1fr;
	}

	.zsd-home-about-gambar {
		order: -1;
	}

	/**
	 * 2026-09-09 TARGETED FIX -- HOME ABOUT/CERITA, khusus 5 gambar di
	 * Mobile: mosaic 4-kolom Desktop/Tablet (rule dasar di atas) TERLALU
	 * SEMPIT kalau dipaksakan di lebar <=640px (thumbnail bisa <80px,
	 * gampang keliatan kepotong tidak wajar). Fallback ke stack 1-kolom
	 * natural (urutan gambar seller TETAP terjaga, apa adanya dari DOM),
	 * konsisten dengan instruksi "jangan memaksakan mosaic desktop kalau
	 * ruang tidak cukup" -- BUKAN cuma mengecilkan mosaic yang sama.
	 */
	.zsd-home-about-gambar[data-jumlah-gambar="5"] {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		aspect-ratio: auto;
	}

	/**
	 * 2026-09-09 TARGETED FIX -- HOME ABOUT MOBILE PREVIEW (ROOT CAUSE):
	 * override di atas TIDAK CUKUP -- rule dasar (non-media, desktop/
	 * tablet mosaic 4-kolom) menetapkan posisi per-gambar lewat SELECTOR
	 * `img:nth-child(N)` (lihat baris ~771-796), yang SPESIFISITASNYA LEBIH
	 * TINGGI drpd selector polos `img` yang dipakai reset mobile sebelumnya
	 * (nth-child menambah 1 pseudo-class, jadi menang terlepas urutan
	 * source). Akibatnya `grid-column`/`grid-row` desktop (mis. gambar ke-5
	 * = kolom 4/5, baris 2/3) TETAP berlaku walau grid mobile sudah
	 * dipaksa 1 kolom -- browser otomatis bikin kolom implisit tambahan
	 * utk memenuhi permintaan itu, gambar ke-5 (dan sebagian gambar
	 * lain) jadi terdorong KELUAR dari track 1-kolom yang terlihat
	 * (overflow, bukan cuma "belum keliatan krn di bawah scroll").
	 * FIX (bukan patch tempelan): override SETIAP `nth-child` yang sama
	 * persis dgn rule dasar, spesifisitas SAMA, urutan source SETELAHNYA
	 * -> menang di cascade, gambar 1-5 semua balik ke `auto`/`auto`
	 * (normal document flow, stack natural sesuai urutan DOM).
	 */
	.zsd-home-about-gambar[data-jumlah-gambar="5"] img:nth-child( 1 ),
	.zsd-home-about-gambar[data-jumlah-gambar="5"] img:nth-child( 2 ),
	.zsd-home-about-gambar[data-jumlah-gambar="5"] img:nth-child( 3 ),
	.zsd-home-about-gambar[data-jumlah-gambar="5"] img:nth-child( 4 ),
	.zsd-home-about-gambar[data-jumlah-gambar="5"] img:nth-child( 5 ) {
		grid-column: auto;
		grid-row: auto;
		aspect-ratio: 4 / 3;
	}

	/* REVISI (QA round 2): dari numpuk 1 kolom jadi SWIPE HORIZONTAL
	 * sungguhan (scroll-snap native) -- item tetap dalam 1 track, divider
	 * (pseudo-element per item) otomatis ikut geser bareng track, tidak
	 * pernah jadi divider "tetap" yang bentrok sama carousel. */
	.zsd-home-info-bar-track {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none; /* Firefox -- sembunyikan scrollbar */
		-ms-overflow-style: none;
		gap: 0;
		padding: 24px 18px;
	}

	.zsd-home-info-bar-track::-webkit-scrollbar {
		display: none; /* Chrome/Safari/Edge -- sembunyikan scrollbar */
	}

	.zsd-home-info-bar-item {
		flex: 0 0 78%;
		scroll-snap-align: start;
		padding: 0 0 0 20px;
	}

	.zsd-home-info-bar-item:first-child {
		padding-left: 0;
	}

	.zsd-home-info-bar-item + .zsd-home-info-bar-item::before {
		left: 0;
	}

	/* Featured Collection tidak lagi pakai `.zsd-home-section` (lihat blok
	 * "03 FEATURED COLLECTION" di atas) -- padding mobile-nya sendiri di
	 * sini, dengan lebar 18px yang SAMA seperti section lain supaya trik
	 * margin negatif di `.zsd-home-fc-track` di bawah tetap pas. */
	.zsd-home-featured {
		padding: 48px 0;
	}

	.zsd-home-featured-inner {
		padding: 0 18px;
	}

	.zsd-home-fc-head {
		flex-wrap: wrap;
	}

	.zsd-home-fc-track {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 16px;
		padding-bottom: 4px;
		margin: 0 -18px;
		padding-left: 18px;
		padding-right: 18px;
	}

	.zsd-home-fc-item {
		flex: 0 0 82%;
		scroll-snap-align: start;
	}

	.zsd-home-fc-dots {
		display: none !important;
	}

	.zsd-home-values-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}

	/* Mobile -- blueprint bagian 09: "3 stacked image tiles, gap 12-16px,
	 * starting image height sekitar 180-220px, tanpa carousel/swipe". BAGIAN
	 * 8 spec (FINAL FULL IMPLEMENTATION) komposisi grid gabungan heading+tile
	 * besar+tile kanan HANYA berlaku "DESKTOP + TABLET" -- Mobile SENGAJA
	 * TIDAK disebut, lebar <=640px juga jelas tidak muat utk tile besar +
	 * kolom kanan bersebelahan. Di sini mosaic gabungan dilepas total, balik
	 * ke heading lalu 3 tile ditumpuk 1 kolom polos, tinggi tetap per tile
	 * (bukan aspect-ratio, sesuai spec "starting image height", bukan rasio)
	 * -- SAMA PERSIS visualnya dengan Mobile sebelum BAGIAN 8 direstruktur. */
	.zsd-home-cat-mosaic {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}

	.zsd-home-cat-mosaic .zsd-home-section-head {
		margin: 0;
	}

	.zsd-home-cat-item-besar {
		aspect-ratio: auto;
	}

	.zsd-home-cat-kanan {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}

	.zsd-home-cat-item {
		height: 200px;
	}

	.zsd-home-closing {
		padding-bottom: 64px;
	}

	/* Dekorasi DIMATIKAN di mobile (bukan cuma diperkecil) -- blueprint
	 * bagian 11 eksplisit izinkan preset "dapat disabled"; di lebar <=640px
	 * 2 kolom dekorasi flanking kiri/kanan bakal memepetkan teks jadi tidak
	 * proporsional. Teks Closing full-width sendirian lebih sesuai
	 * "responsive-aware" daripada dipaksakan tetap flanking di layar sempit. */
	.zsd-home-closing-deco {
		display: none;
	}
}