/** * Restyle visual halaman Cart -- 2026-08-23 (item 3 dari roadmap restyle storefront, * lanjutan setelah Journal). ARSITEKTUR (revisi, lihat includes/cart-renderer.php buat * penjelasan lengkap): markup produk + kupon SEKARANG dirender dari nol lewat override * shortcode `[woocommerce_cart]` sendiri (cart-renderer.php), BUKAN lagi restyle CSS di * atas markup KiriminAja/Botiga apa adanya (pendekatan "Opsi C" lama, sudah digantikan). * `cart/cart-totals.php` (shipping/ongkir KiriminAja) TIDAK disentuh sama sekali -- * markup di dalam `.cart_totals` di file ini TETAP 100% asli KiriminAja. * * File ini masih 1 file yang sama (bukan file baru) supaya enqueue di cart-restyle.php * tidak perlu berubah -- isinya yang diadaptasi total ke markup baru. Keputusan VISUAL * (warna, ukuran, tata letak kartu, dst) dari iterasi Phase 2B (live-verified di staging * lewat Claude in Chrome) DIPERTAHANKAN SAMA PERSIS di sini, cuma selector-nya diganti * dari `table > tr > td` KiriminAja/Botiga ke markup `div` milik kita sendiri. * * Semua rule di file ini di-scope ke `.zsd-cart` (class body, dipasang lewat filter * `body_class` di cart-restyle.php, cuma di halaman /cart/) -- SENGAJA nggak pernah * nyentuh :root, biar nggak bentrok sama token warna biru dashboard/halaman lain, * pola yang sama persis kayak `.zsd-journal` di journal-publik.css. * * Token warna DISALIN dari `.zsd-journal` (journal-publik.css baris 12-20) -- * nilai HARUS identik, ini SENGAJA duplikasi nilai (bukan reuse file langsung) * supaya Cart nggak punya ketergantungan ke file/urutan-load Journal, dan supaya * halaman Cart nggak ke-efek kalau nanti Journal dikustomisasi per-seller (preset * warna Journal, lihat zsd_journal_daftar_preset_palet() di includes/journal.php -- * itu KHUSUS Journal, Cart SENGAJA belum ikut preset itu, palet Cart tetap konstan * "klasik" buat sekarang). Kalau suatu saat base palette Journal berubah, baris * --zsd-jr-* di bawah ini WAJIB disamakan manual. * * Ikon trust-badge & fungsi render SVG-nya (zsd_render_ikon_svg()) BENERAN dipakai * ulang langsung dari includes/journal.php (bukan cuma "terinspirasi dari") -- * lihat BAGIAN 3 cart-restyle.php. */ .zsd-cart { --zsd-jr-bg: #fdfaf5; --zsd-jr-krem: #f2e8da; --zsd-jr-krem-muda: #f8f2e9; --zsd-jr-coklat: #6b5744; --zsd-jr-coklat-muda: #a9927a; --zsd-jr-hijau: #7c8a6a; --zsd-jr-teks: #2c2620; --zsd-jr-teks-muted: #8a7f6f; --zsd-jr-border: #e7dccb; --zsd-jr-aksen: var(--zsd-jr-coklat); /* Token TERPISAH dari --zsd-jr-bg (krem hangat -- dipakai buat aksen halus di dalam komponen, misal .zsd-cart-empty-icon, .quantity, #coupon_code). Background HALAMAN/ Cart SENGAJA off-white/netral bersih, beda kebutuhan sama Journal yang memang krem penuh. */ --zsd-cart-bg-halaman: #fafafa; /* Ditambahkan 2026-08-24 (fitur Pengaturan Cart & Checkout, "Warna & Font" > Font Pairing) -- default Inter (nggak ganti apa pun), sama pola persis kayak --zsd-jr-font-heading di journal-publik.css. Override per-preset di BAGIAN 9 (paling bawah) file ini. */ --zsd-jr-font-heading: "Inter", -apple-system, "system-ui", "Segoe UI", Roboto, sans-serif; /* Ditambahkan 2026-09-12 (laporan Ferdian, DevTools) -- token warna KHUSUS box notifikasi WooCommerce (.woocommerce-message dkk, lihat BAGIAN 5B di bawah). SENGAJA token terpisah dari --zsd-jr-* di atas (walau nuansanya mirip krem/ coklat) supaya warna box notifikasi bisa disetel independen tanpa risiko ikut mengubah elemen lain yang pakai --zsd-jr-krem-muda/--zsd-jr-border/ --zsd-jr-teks -- ini "global setting" box notifikasi Cart: kalau nanti mau ganti warnanya lagi, cukup ubah 3 baris ini, semua rule yang pakai var(...) di bawah otomatis ikut, nggak perlu cari-cari hex code yang di-hardcode di banyak tempat. */ --zsd-cart-notice-bg: #f7ebdf; --zsd-cart-notice-border: #ecdccd; --zsd-cart-notice-teks: #232323; /* Ditambahkan 2026-09-12 (lanjutan revisi di atas, buat .woocommerce-error / .coupon-error-notice -- lihat BAGIAN 5C). Ferdian minta tetap dikotakkan senada (radius+padding sama kayak notice biasa), tapi TETAP nuansa merah (bukan krem netral) biar error masih kelihatan beda dari notice biasa. --zsd-cart-notice-error-teks SENGAJA disamakan persis ke #c0392b, warna merah yang sudah dipakai global di includes/woo-compat-botiga.php (zsd_css_warna_notifikasi_woocommerce()) -- biar teksnya konsisten sama yang mungkin masih kelihatan sekilas di halaman lain sebelum override Cart ini kena, bg/border-nya tinggal versi pucat dari warna itu. */ --zsd-cart-notice-error-bg: #fbebe9; --zsd-cart-notice-error-border: #f0cfc9; --zsd-cart-notice-error-teks: #c0392b; } body.zsd-cart { background: var(--zsd-cart-bg-halaman); } /* ===================================================================== * BAGIAN 1: Container & layout 2 kolom * * `.zsd-cart-layout` / `.zsd-cart-main` / `.zsd-cart-sidebar` SEKARANG wrapper * milik KITA SENDIRI (dirender cart-renderer.php), bukan lagi punya KiriminAja -- * jadi flex-basis kolom kanan (380px) dipasang LANGSUNG di `.zsd-cart-sidebar` * (bukan lagi di elemen `.cart_totals` asli KiriminAja seperti sebelumnya), lebih * simpel & tidak lagi bergantung struktur DOM plugin lain. * * REVISI 2026-08-24 (laporan Ferdian -- investigasi panjang, lihat catatan di * cart-renderer.php): diganti dari `display: flex` ke `display: grid` DENGAN ALASAN * SPESIFIK, bukan preferensi gaya. Markup `cart-totals.php` KiriminAja (dipanggil * lewat `do_action('woocommerce_cart_collaterals')` di dalam `.zsd-cart-sidebar`, * file di LUAR plugin ini, whitelist-protected, TIDAK BOLEH diubah) TERBUKTI kadang * py 1 `` yang nggak seimbang KHUSUS pas cart ada isi + kupon ke-apply * (dikonfirmasi lewat wp-cli eval() langsung di server, cart kosong = seimbang, * cart+kupon = timpang). Efeknya: `.zsd-cart-trust` (dirender SETELAHNYA di kode * kita, coba lihat cart-renderer.php) "kebuang" jadi anak LANGSUNG `.zsd-cart-layout` * (sibling `.zsd-cart-sidebar`), bukan anak `.zsd-cart-sidebar` seperti seharusnya -- * murni akibat tag `` yang nyasar dari KODE PIHAK KETIGA, BUKAN salah markup * kita sendiri (sudah dicoba fix di sisi PHP -- tangkap output pakai ob_start() lalu * seimbangkan manual -- TERNYATA gagal juga, KiriminAja ketauan flush buffer sendiri * di dalam, jadi ob_get_clean() kita kebaca kosong, TIDAK BISA diintersep dari sisi * PHP). Daripada terus kejar bug di kode plugin lain yang di luar kendali kita, posisi * VISUAL-nya dikunci di sini pakai CSS Grid -- lihat rule * `.zsd-cart-layout > .zsd-cart-trust` di bawah, yang MEMAKSA trust card nempatin * kolom kanan baris ke-2 KALAU dia kebetulan jadi grid-item langsung (skenario bug). * Kalau markup-nya normal (trust genuinely nested di `.zsd-cart-sidebar`), rule itu * otomatis TIDAK berlaku sama sekali (bukan direct-child grid), dan dia tetap tampil * benar lewat margin biasa (BAGIAN 5) -- jadi robust utk KEDUA kemungkinan struktur * DOM, terlepas dari bug pihak ketiga itu konsisten muncul atau tidak. * ===================================================================== */ .zsd-cart-layout { max-width: 1275px; /* sama seperti container Journal & Shop, biar Cart kerasa 1 kesatuan sama toko */ margin: 0 auto; padding: 32px 24px 48px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto auto; column-gap: 32px; align-items: start; } .zsd-cart-main { grid-column: 1; /* span 2 baris -- biar kolom kiri (daftar produk) nggak "kepotong" tinggi walau kolom kanan cuma diwakili 1 baris grid secara definisi template. */ grid-row: 1 / 3; min-width: 0; /* jaga-jaga overflow anak grid (gambar produk dkk) */ } .zsd-cart-sidebar { grid-column: 2; grid-row: 1; min-width: 300px; } /* Fallback struktural -- lihat penjelasan panjang di atas. `>` (direct child) SENGAJA dipakai: kalau `.zsd-cart-trust` genuinely nested di dalam `.zsd-cart-sidebar` (bukan anak langsung `.zsd-cart-layout`), selector ini TIDAK match sama sekali, no-op total, dan dia tampil lewat margin biasa (BAGIAN 5) seperti normal. */ .zsd-cart-layout > .zsd-cart-trust { grid-column: 2; grid-row: 2; } @media (max-width: 900px) { .zsd-cart-layout { grid-template-columns: 1fr; grid-template-rows: auto auto auto; } .zsd-cart-main { grid-column: 1; grid-row: 1; } .zsd-cart-sidebar { grid-column: 1; grid-row: 2; } .zsd-cart-layout > .zsd-cart-trust { grid-column: 1; grid-row: 3; } } /* ===================================================================== * BAGIAN 2: Kartu produk (markup `div` sendiri, lihat cart-renderer.php -- * class product-remove/product-thumbnail/product-name/product-price/ * product-quantity/product-subtotal SENGAJA nama standar WooCommerce, cuma * elemen pembungkusnya yang `div`, bukan lagi `td`). * ===================================================================== */ /* Label "Produk Anda" -- KOREKSI 2026-08-23 (3), reference posisi baru: heading kecil di atas daftar produk, di dalam kolom kiri (`.zsd-cart-main`). Beda dari `.zsd-cart-heading-judul` (BAGIAN 4B) yang judul HALAMAN besar di luar `.zsd-cart-layout` -- ini judul SEKSI, lebih kecil, nempel produk. */ .zsd-cart-produk-label { font-size: 17px; font-weight: 600; color: var(--zsd-jr-teks); margin: 0 0 14px; line-height: 1.3; font-family: var(--zsd-jr-font-heading); /* 2026-08-24, lihat BAGIAN 9 -- Font Pairing */ } .zsd-cart-items { display: block; width: 100%; } .zsd-cart-item { display: grid; /* minmax(96px, auto) di kolom quantity -- jaga-jaga supaya stepper -/+ tidak pernah kolaps kecil oleh auto-sizing grid, apa pun isinya. */ grid-template-columns: auto 1fr minmax(96px, auto) auto; grid-template-rows: auto auto; column-gap: 20px; row-gap: 2px; align-items: center; position: relative; /* anchor buat tombol Remove yang mengambang, lihat di bawah */ background: #fff; border: 1px solid var(--zsd-jr-border); border-radius: 14px; padding: 20px 22px; margin: 0 0 14px; } /* --- Kolom gambar produk --- */ .zsd-cart-item .product-thumbnail { grid-column: 1; grid-row: 1 / 3; align-self: center; } .zsd-cart-item .product-thumbnail img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; display: block; border: 1px solid var(--zsd-jr-border); } @media (min-width: 768px) { .zsd-cart-item .product-thumbnail img { width: 104px; height: 104px; } } /* --- Kolom nama produk (+ variasi/atribut, kalau produk varian) --- */ .zsd-cart-item .product-name { grid-column: 2; grid-row: 1; align-self: end; min-width: 140px; font-size: 16px; font-weight: 600; color: var(--zsd-jr-teks); line-height: 1.4; } .zsd-cart-item .product-name a { color: var(--zsd-jr-teks); text-decoration: none; } .zsd-cart-item .product-name dl.variation, .zsd-cart-item .product-name .wc-item-meta { margin: 4px 0 0; font-size: 12.5px; color: var(--zsd-jr-teks-muted); font-weight: 400; } .zsd-cart-item .product-name .backorder_notification { margin: 4px 0 0; font-size: 12px; color: #b45309; } /* --- Kolom harga satuan (langsung di bawah nama -- 1 blok identitas produk, TANPA micro-label, beda dari Quantity & Subtotal yang tetap pakai label karena itu kolom "fungsional" terpisah) --- */ .zsd-cart-item .product-price { grid-column: 2; grid-row: 2; align-self: start; font-size: 14px; color: var(--zsd-jr-teks-muted); } /* --- Label micro buat kolom Quantity/Subtotal (dari atribut data-title yang ditulis cart-renderer.php, sama mekanismenya kayak `data-title` bawaan WooCommerce buat mode tabel responsive) --- */ .zsd-cart-item .product-quantity::before, .zsd-cart-item .product-subtotal::before { content: attr(data-title); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--zsd-jr-teks-muted); margin: 0 0 4px; font-weight: 600; } /* --- Kolom quantity: stepper pil, restyle tombol -/+ bawaan Botiga --- */ .zsd-cart-item .product-quantity { grid-column: 3; grid-row: 1 / 3; align-self: center; justify-self: start; } .zsd-cart-item .product-quantity .quantity { display: inline-flex; align-items: center; min-width: 96px; /* jaga-jaga kedua (di luar minmax() grid) -- flex-shrink default anak-anaknya (tombol -/+) jangan sampai bikin stepper kolaps kecil */ border: 1px solid var(--zsd-jr-border); border-radius: 999px; overflow: hidden; background: var(--zsd-jr-krem-muda); } .zsd-cart-item .botiga-quantity-minus, .zsd-cart-item .botiga-quantity-plus { display: inline-flex !important; /* menang lawan CSS Botiga yang nyembunyiin sebelum class "show" dipasang JS (woo-cart-fix.js, DIBIARKAN AKTIF sebagai fallback) */ align-items: center; justify-content: center; width: 30px; height: 30px; color: var(--zsd-jr-coklat); font-size: 15px; text-decoration: none !important; cursor: pointer; user-select: none; } .zsd-cart-item .product-quantity input.qty { width: 40px; height: 30px; border: 0; background: transparent; text-align: center; font-size: 14px; color: var(--zsd-jr-teks); -moz-appearance: textfield; } /* --- Kolom subtotal --- */ .zsd-cart-item .product-subtotal { grid-column: 4; grid-row: 1 / 3; align-self: center; justify-self: end; font-size: 15px; font-weight: 600; color: var(--zsd-jr-teks); text-align: right; } /* --- Kolom hapus (x) -- mengambang di pojok kanan-atas kartu (position:absolute, anchor ke position:relative di .zsd-cart-item). Posisi di MARKUP (cart-renderer.php) sengaja tetap ditulis paling awal per baris (bawaan WooCommerce), murni presentasi yang beda lewat CSS ini. --- */ .zsd-cart-item .product-remove { position: absolute; top: 12px; right: 12px; } .zsd-cart-item .product-remove a.remove { display: inline-flex !important; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--zsd-jr-krem-muda); color: var(--zsd-jr-teks-muted) !important; font-size: 15px; line-height: 1; text-decoration: none !important; } .zsd-cart-item .product-remove a.remove:hover { background: #f3dede; color: #c0392b !important; } /* --- Area kupon + tombol Update Cart (yang disembunyikan lewat woo-compat-botiga.php). KOREKSI VISUAL 2026-08-23 (correction prompt Ferdian): `.zsd-kupon-area` SEKARANG di paling ATAS konten Cart (sebelum "Lanjut Belanja"/daftar produk, lihat urutan baru di cart-renderer.php) DAN markup internalnya direstruktur total jadi 2 kolom -- kiri ikon+judul+deskripsi ("Punya kode promo?"), kanan input+tombol "Terapkan" (lihat zsd_render_kupon_area() di cart-renderer.php). --- */ .zsd-kupon-area { margin: 0 0 22px; } .zsd-kupon-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; background: var(--zsd-jr-krem-muda); border: 1px solid var(--zsd-jr-border); border-radius: 16px; /* koreksi 2026-08-23 (2): reference minta ~15-16px, sebelumnya 14px */ padding: 14px 20px; /* koreksi 2026-08-23 (2): dipadatkan (sebelumnya 18px 22px) -- reference eksplisit "compact height, do not use excessive empty vertical space" */ } .zsd-kupon-box-kiri { display: flex; align-items: flex-start; gap: 12px; flex: 1 1 220px; } .zsd-kupon-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; /* koreksi 2026-08-23 (2): reference minta "soft cream circular container", sebelumnya rounded-square 10px */ background: var(--zsd-jr-krem, #f2e8da); /* koreksi 2026-08-23 (2): "soft cream", sebelumnya putih polos -- var(--zsd-jr-krem) sedikit lebih krem dari --zsd-jr-krem-muda supaya kontras tipis dengan background box (yang sudah krem-muda) */ color: var(--zsd-jr-coklat); flex-shrink: 0; } .zsd-kupon-icon .zsd-ikon-svg { width: 18px; height: 18px; } .zsd-kupon-judul { margin: 0 0 2px; font-size: 14.5px; font-weight: 600; color: var(--zsd-jr-teks); } .zsd-kupon-desc { margin: 0; font-size: 13px; color: var(--zsd-jr-teks-muted); } /* Kolom kanan: input + tombol Terapkan. `position: relative` PINDAH ke sini (dari `.zsd-kupon-area` di versi lama) supaya panel "Lihat kupon tersedia" (position:absolute, lihat assets/kupon-publik-cart.css -- disisipkan JS tepat sesudah `.coupon`) nempel PERSIS di bawah kolom input ini, bukan melebar ke seluruh lebar kotak kupon (yang sekarang juga memuat kolom kiri icon+teks). */ .zsd-kupon-box-kanan { position: relative; flex: 1 1 280px; max-width: 360px; text-align: right; /* "Lihat kupon tersedia" (sibling sesudah .coupon) nempel kanan, sejajar tepi tombol Terapkan */ } .zsd-kupon-box-kanan .coupon { display: flex; flex-wrap: wrap; gap: 10px; background: none; border: 0; padding: 0; margin: 0; text-align: left; } /** * FIX 2026-09-12 (laporan Ferdian, DevTools -- tombol "Terapkan" class * `button` numpang inline margin-top:5px biar ketengahan): input kode kupon * (#coupon_code) & tombol Terapkan sama-sama diset height:42px di CSS, tapi * baris `.coupon` (flex) ternyata dirender lebih tinggi dari 42px (ada * elemen lain yang menambah tinggi baris) -- karena `align-items` belum * diset (default `normal`/stretch), tombolnya jadi nempel rata ATAS, * nyisain celah kosong di bawahnya, bukan di tengah. Fix yang benar: * `align-items: center` di kontainer flex-nya, otomatis menengahkan * input+tombol brapa pun tinggi barisnya -- lebih aman drpd margin-top * angka tetap (5px) yang bisa meleset kalau tinggi elemen berubah nanti. * HANYA desktop (>640px, breakpoint yang sama dgn BAGIAN mobile di bawah -- * di ≤640px `.zsd-kupon-box` sudah brubah jadi flex-direction:column, jadi * align-items horizontal-row ini tidak relevan lagi di sana). */ @media (min-width: 641px) { .zsd-kupon-box-kanan .coupon { align-items: center; } } .zsd-kupon-box-kanan .coupon #coupon_code { flex: 1 1 160px; min-width: 140px; height: 42px; padding: 0 14px; border: 1px solid var(--zsd-jr-border); border-radius: 12px; font-size: 14px; background: #fff; color: var(--zsd-jr-teks); } /* "Terapkan" -- KOREKSI 2026-08-23 (2): warna & radius SEKARANG pakai nilai eksplisit dari reference terbaru (bukan lagi var(--zsd-jr-teks)/12px) -- #1F1F1F/15px diminta spesifik buat tombol INI, dipisah dari token --zsd-jr-teks supaya tombol lain yang masih pakai token itu (mis. "Proceed to Checkout") tidak ikut berubah tanpa diminta. REVISI 2026-08-24 (laporan Ferdian: radius kekirim ke browser tapi nggak kepakai -- dicek langsung lewat document.styleSheets di live site): WooCommerce CORE sendiri punya rule bawaan `#coupon_code + .button { border-radius: 7px 0 0 7px !important; }` (di woocommerce.min.css, style bawaan biar tombol Terapkan nempel rapi di sebelah kanan input kode kupon). Itu pakai SELECTOR ID (`#coupon_code`) -- spesifisitas ID SELALU menang lawan berapa pun banyaknya class, walau kita juga pakai !important dan di-load belakangan (giliran !important lawan !important, spesifisitas yang menang, bukan urutan file). Makanya radius 15px kita KETUTUP diam-diam walau background/warna tetap kepakai (itu TIDAK di-override WooCommerce, cuma radius yang collision). Fix: selector di bawah SEKARANG ikut nyertain `#coupon_code` (pola sibling-selector yang SAMA persis kayak rule WooCommerce di atas), biar level spesifisitasnya ikut masuk kelas ID juga -- otomatis menang karena jumlah class+attribute kita lebih banyak di level ID yang SAMA. */ /* FIX 2026-09-11 -- SEBELUMNYA background di-hardcode #1F1F1F (nyaris hitam) terlepas dari preset warna apa pun yang aktif. Ferdian minta tombol ini ikut warna aksen global juga -- diganti var(--zsd-jr-aksen). */ .zsd-kupon-box-kanan .coupon #coupon_code + button[name="apply_coupon"] { flex: 0 0 auto; height: 42px; padding: 0 22px; border-radius: 15px !important; border: 0; background: var(--zsd-jr-aksen); color: #FFFFFF; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: none; } .zsd-kupon-box-kanan .coupon #coupon_code + button[name="apply_coupon"]:hover { background: color-mix(in srgb, var(--zsd-jr-aksen) 78%, black); } @media (max-width: 640px) { .zsd-kupon-box { flex-direction: column; align-items: stretch; /* koreksi 2026-08-25 (proporsi coupon mobile, reference Ferdian): base rule (desktop) punya `justify-content: space-between` buat dorong kolom kiri/kanan ke ujung-ujung baris horizontal -- begitu flex-direction jadi column (mobile), space-between itu kebawa ke SUMBU VERTIKAL, jadi kalau container punya sisa tinggi ia bakal renggangin kolom kiri & kanan menjauh (turut nyumbang kesan "kotak kepanjangan"). Di mobile urutannya cuma tumpuk wajar, jadi di-reset ke flex-start (rapat sesuai urutan dokumen, TIDAK ikut ke desktop/tablet). */ justify-content: flex-start; padding: 16px; } .zsd-kupon-box-kiri { /* koreksi 2026-08-25: base rule `flex: 1 1 220px` itu flex-basis buat SUMBU HORIZONTAL di desktop (lebar kolom kiri, wajar). Begitu .zsd-kupon-box jadi flex-direction:column di mobile, basis 220px itu kebawa jadi TINGGI minimum blok kiri (icon+judul+deskripsi) -- inilah sumber utama kotak cream kelihatan kepanjangan walau kontennya cuma ~60-70px. Direset ke auto supaya tingginya murni ngikutin konten (height:auto efektif, bukan dipaksa 220px). */ flex: 1 1 auto; } .zsd-kupon-box-kanan { /* koreksi 2026-08-25: sama seperti kiri -- `flex: 1 1 280px` di base rule adalah basis LEBAR kolom kanan versi desktop, tapi kebawa jadi TINGGI minimum 280px begitu column di mobile (kontributor terbesar ruang kosong di screenshot "before"). Direset ke auto -- tinggi blok kanan (input+tombol+link) murni ngikutin konten. */ flex: 1 1 auto; max-width: none; /* koreksi 2026-08-23 (2): reset dari text-align:right (versi desktop) -- reference mobile eksplisit minta urutan tumpuk wajar rata kiri (icon/judul/deskripsi, input, Terapkan, Lihat kupon tersedia), bukan nempel kanan seperti di desktop. */ text-align: left; } /* koreksi 2026-08-23 (2): input & tombol Terapkan ditumpuk (bukan sebaris) di mobile -- "Do not allow horizontal overflow" -- flex-wrap saja TIDAK cukup jaga di layar sangat sempit kalau input minimal-width-nya (140px) + tombol masih lebih lebar dari viewport. */ .zsd-kupon-box-kanan .coupon { flex-direction: column; align-items: stretch; } .zsd-kupon-box-kanan .coupon #coupon_code, .zsd-kupon-box-kanan .coupon button[name="apply_coupon"] { flex: 1 1 auto; width: 100%; box-sizing: border-box; } } /* ===================================================================== * BAGIAN 3: Order Summary card (.cart_totals) -- markup di dalamnya 100% asli * KiriminAja (cart/cart-totals.php, TIDAK disentuh cart-renderer.php sama sekali, * lihat penjelasan panjang di file itu), cuma wrapper luarnya (`.zsd-cart-sidebar`) * yang sekarang milik kita. Tabel di dalam sini TETAP tabel biasa (label kiri, * nilai kanan), bukan flex-card seperti BAGIAN 2 -- harus tetap rapi di 2 KONDISI: * (a) belum ada destination (cuma Subtotal+Total), (b) sudah ada destination * (+baris "Ship To" & "Shipment") -- makanya semua styling baris di bawah generik * (border-top divider antar-baris), bukan hardcode utk baris tertentu. * ===================================================================== */ .zsd-cart-sidebar .cart_totals { background: #fff; border: 1px solid var(--zsd-jr-border); border-radius: 14px; padding: 22px 22px 24px; } /** * FIX 2026-09-12 (laporan Ferdian, DevTools -- class `kj-cart-total * cart_totals`): kotak Ringkasan Pesanan tidak sejajar dgn kartu produk * (class `zsd-cart-item cart_item`) di mode desktop, marginnya kelihatan * kepanjangan. Ketemu sumbernya: tema Botiga (woocommerce.min.css) punya * rule bawaan `.woocommerce-cart .cart_totals { margin-top: 90px; ... }` -- * itu masuk akal di layout ASLI tema (cart_totals numpuk di bawah, bukan * sidebar 2 kolom), tapi di layout kita (`.zsd-cart-layout` grid 2 kolom, * BAGIAN 1 di atas) margin itu jadi dorong kotak Ringkasan Pesanan turun * jauh ngga sejajar sama kartu produk pertama. Awalnya di-nolkan penuh HANYA * di desktop (>900px, breakpoint yang sama dgn BAGIAN 1 -- di bawah itu * `.zsd-cart-layout` sudah stack 1 kolom, jadi margin bawaan tema tidak * bikin masalah sejajar apa pun) -- TIDAK menyentuh file tema, cuma override * lewat CSS kita sendiri yang sudah di-load belakangan. * * REVISI 2026-09-12 (masih laporan Ferdian, dicoba ulang lewat DevTools): * margin-top: 0 penuh ternyata kurang rapi (kotak Ringkasan Pesanan nempel * pas-pasan ke atas, nggak ada jarak napas sama sekali). Ferdian coba-coba * inline di DevTools dan cocok di angka 35-36px -- dipakai 36px di sini, * masih exact breakpoint (desktop) & pendekatan yang sama, cuma angkanya * disesuaikan dari 0 ke 36px. */ @media (min-width: 901px) { .zsd-cart-sidebar .cart_totals { margin-top: 36px; } } .zsd-cart-sidebar .cart_totals .kj-judul p { margin: 0 0 16px; font-size: 16px; font-weight: 600; color: var(--zsd-jr-teks); font-family: var(--zsd-jr-font-heading); /* 2026-08-24, lihat BAGIAN 9 -- Font Pairing */ } .zsd-cart-sidebar .cart_totals table.shop_table { width: 100%; border: 0; background: none; } .zsd-cart-sidebar .cart_totals table.shop_table tr th, .zsd-cart-sidebar .cart_totals table.shop_table tr td { border: 0; border-top: 1px solid var(--zsd-jr-border) !important; /* override inline border-top ala Astra dari KiriminAja (--ast-border-color, tidak terdefinisi di project Botiga ini) supaya warnanya konsisten palet Zenos */ padding: 12px 0; font-size: 14px; color: var(--zsd-jr-teks); text-align: left; } .zsd-cart-sidebar .cart_totals table.shop_table tr:first-child th, .zsd-cart-sidebar .cart_totals table.shop_table tr:first-child td { border-top: 0 !important; padding-top: 0; } .zsd-cart-sidebar .cart_totals table.shop_table tr td { text-align: right; } .zsd-cart-sidebar .cart_totals table.shop_table tr.order-total th, .zsd-cart-sidebar .cart_totals table.shop_table tr.order-total td { font-size: 16px; font-weight: 700; color: var(--zsd-jr-teks); } .zsd-cart-sidebar .cart_totals table.shop_table tr.order-total .woocommerce-Price-amount { color: var(--zsd-jr-coklat); } /* Baris "Ship To" (form pencarian alamat) & "Shipment" (pilihan kurir) -- cuma dirapikan jaraknya, TIDAK menyentuh Select2/kj-shipping markup sama sekali (itu tetap ranah KiriminAja + fix woo-compat-botiga.php yang sudah ada). */ .zsd-cart-sidebar .cart_totals tr.woocommerce-shipping-totals td { text-align: left; } .zsd-cart-sidebar .cart_totals .kiriof-shipping-methods-list, .zsd-cart-sidebar .cart_totals .woocommerce-shipping-methods { margin: 6px 0 0; padding: 0; } /* Tombol utama "Proceed to Checkout" -- CTA solid, satu-satunya tombol solid di halaman ini (tombol lain -- Lanjut Belanja, Apply coupon, Lihat kupon tersedia -- sengaja outline, biar CTA ini jelas paling menonjol). FIX 2026-09-11 -- SEBELUMNYA background pakai var(--zsd-jr-teks) (warna teks nyaris hitam, disengaja sebagai "gelap solid" terlepas dari preset warna apa pun). Ferdian minta tombol ini ikut warna aksen global juga -- diganti var(--zsd-jr-aksen). */ .zsd-cart-sidebar .cart_totals .wc-proceed-to-checkout { margin-top: 18px; } .zsd-cart-sidebar .cart_totals .wc-proceed-to-checkout a.checkout-button { display: block; width: 100%; box-sizing: border-box; text-align: center; background: var(--zsd-jr-aksen); color: #fff !important; border: 0; border-radius: 999px; padding: 14px 20px; font-size: 15px; font-weight: 600; text-decoration: none !important; } .zsd-cart-sidebar .cart_totals .wc-proceed-to-checkout a.checkout-button:hover { background: color-mix(in srgb, var(--zsd-jr-aksen) 78%, black); } /* ===================================================================== * BAGIAN 4: Cross-sell ("Mungkin Anda Juga Suka", teks diganti lewat filter * gettext -- cart-restyle.php BAGIAN 5). Hook resmi WooCommerce * (woocommerce_cross_sell_display, dipicu dari do_action('woocommerce_cart_collaterals') * yang kita panggil di cart-renderer.php) TETAP dipakai apa adanya -- TIDAK ada * sistem rekomendasi baru. * * SENGAJA tidak di-scope ke ancestor `.zsd-cart-sidebar` secara eksplisit (cukup * `.zsd-cart`) -- max-width & margin dipasang LANGSUNG di `.cross-sells` sendiri * supaya lebar section tetap konsisten apa pun posisi nesting-nya, tanpa * bergantung pada struktur DOM pihak ketiga yang bisa berubah. * ===================================================================== */ .zsd-cart .cross-sells { max-width: 1275px; margin: 24px auto 0; padding: 20px 24px 0; border-top: 1px solid var(--zsd-jr-border); } .zsd-cart .cross-sells h2 { font-size: 15px; font-weight: 600; color: var(--zsd-jr-teks); margin: 0 0 14px; } .zsd-cart .cross-sells ul.products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 0; margin: 0; list-style: none; } .zsd-cart .cross-sells ul.products li.product { background: #fff; border: 1px solid var(--zsd-jr-border); border-radius: 12px; padding: 12px; text-align: left; } .zsd-cart .cross-sells ul.products li.product img { border-radius: 8px; margin-bottom: 8px; } .zsd-cart .cross-sells ul.products li.product .woocommerce-loop-product__title { font-size: 13px; font-weight: 500; color: var(--zsd-jr-teks); margin: 0 0 4px; } .zsd-cart .cross-sells ul.products li.product .price { font-size: 13px; color: var(--zsd-jr-coklat); } /* ===================================================================== * BAGIAN 4B: Page heading "Keranjang Belanja" -- dirender lewat hook * `woocommerce_before_cart` (cart-restyle.php BAGIAN 2B), fires PALING ATAS * (sebelum `.zsd-cart-layout` kebuka), jadi heading ini jelas milik konten * halaman Cart, bukan nempel ke kartu produk atau Order Summary.

, bukan *

-- tema Botiga sudah render

Cart

sendiri (page-header tema, di * luar konten WooCommerce), disembunyikan visual di sini biar nggak dobel judul * (SENGAJA nggak nyentuh file tema, murni CSS scoped ketat ke `.zsd-cart`). * ===================================================================== */ .zsd-cart .entry-header { display: none; } .zsd-cart-heading { max-width: 1275px; margin: 0 auto; padding: 32px 24px 0; } .zsd-cart-heading-judul { font-size: 28px; font-weight: 600; color: var(--zsd-jr-teks); margin: 0 0 8px; line-height: 1.2; font-family: var(--zsd-jr-font-heading); /* 2026-08-24, lihat BAGIAN 9 -- Font Pairing */ } .zsd-cart-heading-sub { font-size: 14.5px; color: var(--zsd-jr-teks-muted); margin: 0; } /* ===================================================================== * BAGIAN 5: Trust/Benefits -- KOREKSI VISUAL 2026-08-23 (correction prompt * Ferdian): baris horizontal 4-ikon versi lama DIGANTI kartu vertikal (icon * kiri, judul+deskripsi kanan, tiap item dipisah divider), sesuai reference. * Konten sekarang hardcode 4 item khusus Cart, lihat BAGIAN 3 cart-restyle.php * buat penjelasan lengkap kenapa (skema data trust-badge Journal tidak * menyimpan deskripsi). * * REVISI 2026-08-23 (3): kartu ini sekarang DI DALAM `.zsd-cart-sidebar` * (lihat cart-renderer.php), langsung di bawah `.cart_totals`/Ringkasan * Pesanan -- BUKAN LAGI band mandiri selebar-terbatas yang di-center di * bawah seluruh layout 2 kolom. Jadi lebarnya sekarang ikut kolom sidebar * 100% (bukan lagi max-width 480px + margin auto), dan spacing atasnya * pakai margin-top (bukan lagi margin atas-bawah simetris margin:auto) supaya * nempel rapi di bawah Order Summary tanpa gutter kiri-kanan tambahan (gutter * halaman sudah ditangani `.zsd-cart-layout`/`.zsd-cart-sidebar`, BAGIAN 1). * ===================================================================== */ .zsd-cart .zsd-cart-trust { margin: 20px 0 0; padding: 4px 22px; background: #fff; border: 1px solid var(--zsd-jr-border); border-radius: 14px; box-sizing: border-box; } .zsd-cart .zsd-cart-trust-item { display: flex; align-items: center; /* koreksi 2026-08-23 (2): sebelumnya flex-start -- reference minta ikon "vertically aligned perfectly" terhadap blok judul+deskripsi (2 baris), bukan nempel rata atas */ gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--zsd-jr-border); } .zsd-cart .zsd-cart-trust-item:last-child { border-bottom: 0; } .zsd-cart .zsd-cart-trust-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; /* koreksi 2026-08-23 (2): reference minta "soft cream circular container", sebelumnya rounded-square 12px -- ukuran lingkaran (44px) SAMA buat ke-4 item, sudah konsisten sejak awal */ background: var(--zsd-jr-krem-muda); flex-shrink: 0; } .zsd-cart .zsd-cart-trust-icon .zsd-ikon-svg { width: 22px; height: 22px; color: var(--zsd-jr-aksen); } .zsd-cart .zsd-cart-trust-judul { margin: 0 0 4px; font-size: 14.5px; font-weight: 600; color: var(--zsd-jr-teks); } .zsd-cart .zsd-cart-trust-desc { margin: 0; font-size: 13px; color: var(--zsd-jr-teks-muted); line-height: 1.5; } /* ===================================================================== * BAGIAN 5A: Jarak wrapper notice WooCommerce (.woocommerce-notices-wrapper) * * Ditambahkan 2026-09-12 (laporan Ferdian, DevTools -- inline margin-top:20px). * Wrapper ini dirender WooCommerce sendiri (BUKAN markup kita, tidak ada di * cart-renderer.php) tiap kali ada notice tampil (mis. "Kode kupon berhasil * diterapkan", error kupon, dst) -- sebelumnya nggak ada jarak sama sekali ke * konten di atasnya jadi kelihatan mepet. Rule ini scoped ke `.zsd-cart` biar * cuma nyala di halaman Cart, TIDAK ikut ngubah notice di Checkout/My Account/ * halaman lain. Tidak digated ke breakpoint tertentu (beda dari BAGIAN 1/BAGIAN * 5C's align-items) karena jarak notice ke konten di atasnya masuk akal di * semua lebar layar -- kalau ternyata Ferdian mau beda di mobile, tinggal * ditambah override di dalam media query yang sudah ada. * ===================================================================== */ .zsd-cart .woocommerce-notices-wrapper { margin-top: 20px; } /* ===================================================================== * BAGIAN 5B: Notifikasi sukses WooCommerce (.woocommerce-message) -- KOREKSI VISUAL * 2026-08-23 (2). Warna aslinya (hijau saturasi tinggi #0F6E56, teks-doang, TANPA * background/border/radius) diset GLOBAL di includes/woo-compat-botiga.php * (zsd_css_warna_notifikasi_woocommerce()) -- SENGAJA TIDAK diubah di sana karena * berlaku juga di Checkout/My Account/halaman lain (di luar scope "jangan sentuh * Checkout" yang diminta). Di sini di-override KHUSUS di halaman Cart (selector * `.zsd-cart .woocommerce-message`, cuma nyala kalau body punya class `.zsd-cart` -- * lihat cart-restyle.php BAGIAN 1) pakai treatment "subtle success" yang diminta: * kotak PUCAT (bukan cuma teks warna terang), biar nggak "berebut perhatian" * sama kotak kupon/kartu produk yang sama-sama pakai border+radius di halaman ini. * `!important` WAJIB tetap dipakai di sini -- aturan global di atas juga pakai * `!important` di properti color, jadi butuh spesifisitas class `.zsd-cart` + sumber * yang sama-sama !important, dan urutan file (cart-restyle.css di-enqueue priority 20, * lihat cart-restyle.php BAGIAN 2) supaya menang di cascade. * * REVISI 2026-09-12 (laporan Ferdian, DevTools -- inline background/border/color): * skema warna diganti dari kotak HIJAU pucat (#F3FAF6/#D7EFE3/#1E5E3A) ke kotak * KREM netral (nilai persis dari inline Ferdian) supaya senada sama palet * krem/coklat khas halaman Cart ini (bukan lagi sinyal "hijau = sukses" ala * WooCommerce default) -- 3 nilai warnanya SEKARANG lewat variabel * --zsd-cart-notice-* (lihat blok token di BAGIAN paling atas file ini) biar * jadi "global setting" box notifikasi: ganti di 1 tempat, semua rule di * bawah ini otomatis ikut, nggak perlu cari hex code yang ke-hardcode di * banyak tempat. */ .zsd-cart .woocommerce-message { background: var(--zsd-cart-notice-bg) !important; border: 1px solid var(--zsd-cart-notice-border) !important; color: var(--zsd-cart-notice-teks) !important; border-radius: 12px; padding: 12px 16px; } /* Ikon centang -- pola umum WooCommerce/tema nge-render ikon notice lewat pseudo-element `:before` (dashicon/font-icon), BUKAN elemen / terpisah. Aturan ini aman sebagai no-op kalau ternyata tema Botiga TIDAK pakai pola ini di sini (nggak ada yang tampil tak terduga, cuma nggak ngefek) -- sesuai instruksi Ferdian "jangan investigasi lagi", ini best-effort tanpa verifikasi ulang DOM live. Warna ikon disamakan ke --zsd-cart-notice-teks (2026-09-12) biar konsisten sama teksnya, bukan lagi hijau. */ .zsd-cart .woocommerce-message::before { color: var(--zsd-cart-notice-teks) !important; } /* Tombol tutup notice (kalau tema/plugin render satu) -- warna abu-abu hangat netral, sama alasannya kayak catatan ikon di atas (best-effort, aman kalau markup-nya nggak ada). */ .zsd-cart .woocommerce-message .woocommerce-notice-close, .zsd-cart .woocommerce-message .notice-dismiss { color: var(--zsd-jr-teks-muted) !important; } /* ===================================================================== * BAGIAN 5C: Notifikasi ERROR WooCommerce (.woocommerce-error / .coupon-error-notice) * * Ditambahkan 2026-09-12 -- Ferdian minta di-recheck apakah ada notice lain * yang perlu ikut disesuaikan sesudah BAGIAN 5B (.woocommerce-message) diganti * ke kotak krem. Ketemu: pesan ERROR (kode kupon salah/sudah dipakai, dst, * class `.woocommerce-error` & `.coupon-error-notice`) masih ikut aturan * GLOBAL di includes/woo-compat-botiga.php (warna merah #c0392b, teks doang, * TANPA kotak) -- jadi kelihatan beda gaya sama notice sukses yang sekarang * sudah dikotakkan. Ferdian pilih: TETAP dikotakkan (radius+padding senada * BAGIAN 5B) tapi TETAP nuansa merah (bukan krem netral) biar error masih * kelihatan beda dari notice biasa -- lihat token --zsd-cart-notice-error-* * di blok atas file ini. Sama seperti BAGIAN 5B, di-scope `.zsd-cart` + * `!important` (aturan global juga pakai `!important` di color) biar cuma * nyala di Cart, TIDAK ikut ngubah Checkout/My Account. * ===================================================================== */ .zsd-cart .woocommerce-error, .zsd-cart .coupon-error-notice { background: var(--zsd-cart-notice-error-bg) !important; border: 1px solid var(--zsd-cart-notice-error-border) !important; color: var(--zsd-cart-notice-error-teks) !important; border-radius: 12px; padding: 12px 16px; } .zsd-cart .woocommerce-error::before { color: var(--zsd-cart-notice-error-teks) !important; } /* ===================================================================== * BAGIAN 6: Empty cart (templates/woocommerce/cart/cart-empty.php) * * `.cart-empty.woocommerce-info` -- notice bawaan WooCommerce "Your cart is * currently empty." kadang masih sempat tampil bareng state custom ZENOS di * bawahnya (lewat jalur AJAX remove-item bawaan WooCommerce, di luar hook PHP * yang sudah dilepas di cart-restyle.php BAGIAN 4) -- backstop CSS ini * sembunyikan notice bawaan itu SAJA (selector spesifik, TIDAK menyembunyikan * `.woocommerce-info` lain di halaman mana pun). * ===================================================================== */ .zsd-cart .cart-empty.woocommerce-info { display: none; } .zsd-cart .zsd-cart-empty { max-width: 1275px; margin: 0 auto; padding: 56px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; /* Background var(--zsd-jr-bg) (krem) SENGAJA tidak dipasang di sini -- ikut warisi background (off-white/netral, --zsd-cart-bg-halaman) supaya nggak ada "kotak krem" kedua yang beda warna dari halaman di sekitarnya. */ } .zsd-cart .zsd-cart-empty-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--zsd-jr-krem-muda); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .zsd-cart .zsd-cart-empty-icon svg { width: 28px; height: 28px; color: var(--zsd-jr-coklat); } .zsd-cart .zsd-cart-empty-judul { font-size: 22px; font-weight: 600; color: var(--zsd-jr-teks); margin: 0 0 8px; } .zsd-cart .zsd-cart-empty-sub { font-size: 14.5px; color: var(--zsd-jr-teks-muted); margin: 0 0 24px; max-width: 420px; } .zsd-cart .zsd-cart-empty-cta { display: inline-flex; align-items: center; padding: 12px 28px; background: var(--zsd-jr-teks); color: #fff !important; border-radius: 999px; font-size: 14.5px; font-weight: 600; text-decoration: none !important; } .zsd-cart .zsd-cart-empty-cta:hover { opacity: 0.92; } /* ===================================================================== * BAGIAN 7: Loading state pas quantity auto-submit (lihat woo-cart-fix.js -- * cuma toggle class, TIDAK ada AJAX/DOM baru, DIBIARKAN AKTIF apa adanya). * ===================================================================== */ .zsd-cart-main form.woocommerce-cart-form.zsd-cart-loading .zsd-cart-items { opacity: 0.55; pointer-events: none; transition: opacity 0.15s ease; } /* ===================================================================== * BAGIAN 8: Responsive * ===================================================================== */ @media (max-width: 640px) { .zsd-cart-layout { padding: 24px 16px 48px; gap: 20px; } /* Gambar+nama+harga di baris atas, lalu Quantity & Subtotal jadi 1 baris terpisah di bawahnya (sejajar, kiri-kanan), Remove tetap mengambang di pojok kanan-atas kartu (aturan absolute dari BAGIAN 2 tetap berlaku). */ .zsd-cart-item { grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; padding: 14px; column-gap: 14px; } .zsd-cart-item .product-thumbnail { grid-column: 1; grid-row: 1 / 4; } .zsd-cart-item .product-name { grid-column: 2; grid-row: 1; } .zsd-cart-item .product-price { grid-column: 2; grid-row: 2; } .zsd-cart-item .product-quantity { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 6px; } .zsd-cart-item .product-subtotal { grid-column: 2; grid-row: 3; justify-self: end; margin-top: 6px; } .zsd-cart .cross-sells { padding-left: 16px; padding-right: 16px; } .zsd-cart .cross-sells ul.products { grid-template-columns: 1fr 1fr; } } /* ===================================================================== * BAGIAN 9: Preset Warna & Font (2026-08-24, fitur "Pengaturan Cart & * Checkout" dashboard seller) -- lihat includes/pages/tampilan-toko- * cart-checkout.php buat UI-nya, includes/cart-restyle.php BAGIAN 6 buat * data layer + AJAX handler. * * REUSE PERSIS nilai preset Journal (zsd_journal_daftar_preset_palet/aksen/ * font() di includes/journal.php) -- WAJIB identik, keputusan eksplisit * Ferdian 2026-08-24 (jangan bikin preset baru terpisah). * * MEKANISME BEDA dari Journal: Journal nyalain preset lewat atribut * data-jr-palet/data-jr-aksen/data-jr-font di wrapper
yang dia render * sendiri (.zsd-journal-listing/.zsd-journal-single, lihat journal-publik.css * baris ~940 dst). Cart TIDAK PUNYA wrapper
seperti itu -- restyle Cart * sengaja HANYA lewat 1 class `zsd-cart` di (body_class() WordPress, * lihat cart-restyle.php BAGIAN 1: "bukan wrapper
baru yang bakal * nyelip ke markup KiriminAja"), dan body_class() cuma bisa nambah CLASS, * BUKAN atribut data-* sembarang. Jadi preset di sini nyala lewat CLASS * TAMBAHAN (zsd-cart-palet-xxx dst, ditambahkan zsd_cart_restyle_body_class() * kalau settingnya BUKAN default) -- fungsi identik sama data-jr-*, cuma cara * pasangnya beda karena keterbatasan mekanisme body_class(). Preset "klasik"/ * "ikuti-palet"/"konsisten" SENGAJA TANPA blok override di sini (sama seperti * Journal) -- itu berarti "pakai nilai --zsd-jr-* asli di root .zsd-cart apa * adanya" (BAGIAN 1 atas file ini), jadi tampilan default TIDAK BERUBAH buat * seller yang belum pernah ganti preset. * * CATATAN: --zsd-jr-bg (warna "Palet Dasar" paling terang) SENGAJA TIDAK * dipakai di mana pun pada file CSS ini -- background halaman/ Cart * tetap `--zsd-cart-bg-halaman` (off-white netral, BAGIAN 1), beda kebutuhan * sama Journal yang memang krem penuh (lihat catatan di BAGIAN 1). Ganti * Palet Dasar di sini tetap kelihatan lewat --zsd-jr-krem/-krem-muda/-coklat/ * -teks/-teks-muted/-border (dipakai luas di seluruh file, lihat kartu produk, * Order Summary, kupon, trust badge, dst). * ===================================================================== */ body.zsd-cart.zsd-cart-palet-terracotta-hangat { --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; } body.zsd-cart.zsd-cart-palet-zaitun-alami { --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; } body.zsd-cart.zsd-cart-palet-abu-batu-modern { --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; } body.zsd-cart.zsd-cart-aksen-terracotta { --zsd-jr-aksen: #b3572f; } body.zsd-cart.zsd-cart-aksen-hijau-sawo { --zsd-jr-aksen: #6b7a4f; } body.zsd-cart.zsd-cart-aksen-biru-dusty { --zsd-jr-aksen: #4f7686; } body.zsd-cart.zsd-cart-aksen-mustard { --zsd-jr-aksen: #c08a2e; } body.zsd-cart.zsd-cart-font-editorial-klasik { --zsd-jr-font-heading: "Playfair Display", Georgia, serif; } body.zsd-cart.zsd-cart-font-editorial-hangat { --zsd-jr-font-heading: "Fraunces", Georgia, serif; }