/**
* Shop restyle -- item 4 roadmap (2026-08-30). Lihat header komentar
* includes/shop-restyle.php untuk penjelasan arsitektur lengkap.
*
* SEMUA selector di file ini di-scope lewat `body.zsd-halaman-shop` (body
* class ditambah zsd_body_class_shop_restyle(), hanya di is_shop()/
* is_product_taxonomy()) -- supaya tidak ada satu pun aturan yang bocor ke
* Home/Journal/Cart/Checkout/Product Detail/dst (LOCKED bagian 29).
*
* Warna dipakai ULANG dari token global header-footer-restyle.css
* (--zsd-hf-coklat dkk, dimuat sitewide) -- TIDAK didefinisikan ulang,
* cuma di-alias ke nama --zsd-shop-* di bawah supaya lebih pendek dipakai
* berkali-kali di file ini (dengan fallback hex kalau entah kenapa file itu
* belum sempat load, defensif).
*/
/**
* ===== PENGATURAN GLOBAL TOKO -- rollout ke Shop (2026-09-11) =====
* Lanjutan Journal Customization Redesign, giliran ke-3 setelah Home & Cart &
* Checkout. Preset (`zsd_ambil_global_visual_setting()`, includes/global-
* visual-settings.php) SAMA yang dipakai Journal/Cart/Home -- CLASS di
* (`zsd-shop-palet-X`/`zsd-shop-aksen-X`/`zsd-shop-font-X`, lihat
* zsd_body_class_shop_restyle() di includes/shop-restyle.php), BUKAN
* attribute data-jr-* -- pola SAMA PERSIS kayak Cart & Checkout
* (zsd_cart_restyle_body_class()), karena Shop halaman archive WooCommerce
* native juga (body_class() cuma bisa nambah class, nggak bisa nambah
* attribute data-* di ).
*
* Sebelumnya --zsd-shop-* alias ke token sitewide --zsd-hf-* (header-footer-
* restyle.css, LIHAT komentar lama di atas var block ini yang sekarang
* digantikan blok ini) -- SEKARANG dialihkan ke --zsd-jr-* (nilai default
* disalin persis dari preset "klasik" assets/journal-publik.css, SUMBER
* TUNGGAL kebenaran warna) supaya Shop ikut preset global yang seller atur,
* lepas dari --zsd-hf-* (Header/Footer belum giliran rollout-nya -- di luar
* scope round ini, TIDAK disentuh).
*
* --zsd-shop-coklat-gelap (shade hover, tidak ada padanan langsung di token
* --zsd-jr-*) pakai color-mix() nurunin --zsd-jr-aksen, pola SAMA seperti
* --zsd-home-brown-dark di assets/home-publik.css -- ketimbang nambah key
* baru di preset registry bersama (journal.php) cuma buat 1 pemakaian di
* sini.
*/
body.zsd-halaman-shop {
--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-shop-coklat: var(--zsd-jr-aksen);
--zsd-shop-coklat-gelap: color-mix(in srgb, var(--zsd-jr-aksen) 78%, black);
--zsd-shop-krem: var(--zsd-jr-krem);
--zsd-shop-krem-lebih-muda: var(--zsd-jr-krem-muda);
--zsd-shop-garis: var(--zsd-jr-border);
--zsd-shop-teks: var(--zsd-jr-teks);
--zsd-shop-teks-muted: var(--zsd-jr-teks-muted);
--zsd-shop-radius: 15px;
--zsd-shop-container-max: 1240px;
}
/* Heading pakai font pairing global -- BARU, Shop sebelumnya tidak punya
rule font-family sama sekali (ikut default tema/browser). 1 rule generik
(bukan per-selector) supaya semua judul section (Hero/Intro/nama produk)
otomatis ikut kalau seller ganti preset font. */
body.zsd-halaman-shop h1,
body.zsd-halaman-shop h2,
body.zsd-halaman-shop h3 {
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 CLASS body (bukan attribute) di atas. "klasik"/
"ikuti-palet"/"konsisten" SENGAJA tidak punya blok -- default = pakai
nilai dasar di atas apa adanya. */
body.zsd-halaman-shop.zsd-shop-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;
}
body.zsd-halaman-shop.zsd-shop-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;
}
body.zsd-halaman-shop.zsd-shop-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;
}
body.zsd-halaman-shop.zsd-shop-aksen-terracotta { --zsd-jr-aksen: #b3572f; }
body.zsd-halaman-shop.zsd-shop-aksen-hijau-sawo { --zsd-jr-aksen: #6b7a4f; }
body.zsd-halaman-shop.zsd-shop-aksen-biru-dusty { --zsd-jr-aksen: #4f7686; }
body.zsd-halaman-shop.zsd-shop-aksen-mustard { --zsd-jr-aksen: #c08a2e; }
body.zsd-halaman-shop.zsd-shop-font-editorial-klasik {
--zsd-jr-font-heading: "Playfair Display", Georgia, serif;
}
body.zsd-halaman-shop.zsd-shop-font-editorial-hangat {
--zsd-jr-font-heading: "Fraunces", Georgia, serif;
}
body.zsd-halaman-shop .zsd-shop-container {
max-width: var(--zsd-shop-container-max);
margin: 0 auto;
padding: 0 24px;
box-sizing: border-box;
}
/* =====================================================================
* SEMBUNYIKAN HERO LAMA BOTIGA (page-header abu-abu + 5-image gallery +
* search lama) -- diganti Hero ZENOS baru di bawah. Beberapa selector
* sekaligus (lapis pertahanan) karena file tema Botiga tidak bisa dibaca
* langsung dari sini (tidak ada di repo) -- kalau setelah deploy ternyata
* masih ada sisa gap/elemen, tinggal tambah 1 selector lagi di sini, tidak
* perlu ubah pendekatan.
* ===================================================================== */
body.zsd-halaman-shop .woocommerce-page-header,
body.zsd-halaman-shop header.woocommerce-page-header-style1,
body.zsd-halaman-shop .page-description,
body.zsd-halaman-shop .woocommerce-products-header {
display: none !important;
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
min-height: 0 !important;
border: none !important;
}
/* =====================================================================
* PROMOTIONAL HERO
* ===================================================================== */
body.zsd-halaman-shop .container.content-wrapper {
/* REVISI 2026-08-30 (round 4, fix dari Ferdian): Botiga taruh
* margin-top:65px di sini secara theme-wide (jarak default Header ->
* konten halaman biasa). Di halaman Shop kita mau Hero nempel PERSIS
* di bawah Header (LOCKED: no empty space/ghost container). Di-nolkan
* HANYA lewat scope body.zsd-halaman-shop -- halaman lain (Cart,
* Checkout, Product, Home, dll) tetap pakai margin-top bawaan Botiga,
* tidak diubah sama sekali.
* REVISI 2026-08-30 (round 4b, Ferdian nemuin lewat DevTools): ternyata
* ada rule Botiga LAIN yang lebih spesifik + pakai !important --
* `.post-type-archive-product .container.content-wrapper,
* .woocommerce-page .container.content-wrapper { margin-top: 65px
* !important; }` -- otomatis kalahin margin-top:0 kita yang polos
* (non-important selalu kalah dari !important, walau specificity kita
* sebenernya lebih tinggi). Dikasih !important juga di sini supaya
* menang, TETAP discope body.zsd-halaman-shop jadi Cart/Checkout/
* My Account (yang juga punya class .woocommerce-page) tidak ikut
* kesentuh. */
margin-top: 0 !important;
}
body.zsd-halaman-shop .zsd-shop-hero {
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
overflow: hidden;
background: var(--zsd-shop-krem-lebih-muda);
}
body.zsd-halaman-shop .zsd-shop-hero-swiper {
position: relative;
overflow: hidden;
height: 440px; /* dinaikkan dari 400px -> 440px (batas atas LOCKED range 380-440px), round 4: Ferdian coba 500px inline tapi itu melebihi spec, jadi dimentokkan ke batas atas yang masih LOCKED-compliant */
}
/* Mekanik dasar Swiper (Botiga TIDAK memuat CSS Swiper-nya sendiri di
* halaman ini -- cuma JS-nya -- jadi mekanik layout inti ditulis manual di
* sini, dipakai window.Swiper lewat shop-restyle.js). */
body.zsd-halaman-shop .zsd-shop-hero-swiper .swiper-wrapper {
display: flex;
height: 100%;
box-sizing: border-box;
}
body.zsd-halaman-shop .zsd-shop-hero-swiper .swiper-slide {
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
box-sizing: border-box;
}
/* Fallback progressive-enhancement: SEBELUM JS siap, cuma slide pertama
* yang tampil (bukan numpuk semua), arrow/indikator disembunyikan dulu --
* shop-restyle.js nambah class `zsd-js-siap` begitu slider ke-inisialisasi. */
body.zsd-halaman-shop .zsd-shop-hero:not(.zsd-js-siap) .swiper-slide:not(:first-child) {
display: none;
}
body.zsd-halaman-shop .zsd-shop-hero:not(.zsd-js-siap) .zsd-shop-hero-panah,
body.zsd-halaman-shop .zsd-shop-hero:not(.zsd-js-siap) .zsd-shop-hero-indikator {
display: none;
}
body.zsd-halaman-shop .zsd-shop-hero-slide--image .zsd-shop-hero-gambar {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* =====================================================================
* HERO IMAGE SAFETY -- round 3 "FINAL REFINEMENT": promotional artwork
* (banner seller dengan teks/diskon/logo dekat tepi) TIDAK BOLEH dipaksa
* crop (LOCKED: "FULL IMAGE VISIBILITY > forced edge-to-edge crop").
* Slide dengan flag `aman_dipotong=false` (lihat
* zsd_shop_hero_default_slides() di shop-restyle.php) dapat class
* tambahan ".zsd-shop-hero-slide--contain" -- gambar TETAP utuh lewat
* object-fit:contain (TIDAK PERNAH kepotong), dengan lapisan blur dari
* gambar yang SAMA (pakai `background: inherit` dari inline
* background-image yang di-set PHP) sebagai pengisi latar, supaya tetap
* terasa penuh secara visual walau rasio Hero (~3.8:1 desktop, makin
* lebar lagi di tablet/mobile) beda jauh dari rasio foto promosi
* (~1.5-1.9:1 pada 3 gambar demo). Slide foto biasa TANPA flag ini
* (default aman_dipotong=true) TETAP pakai object-fit:cover seperti
* sebelumnya -- cover aman buat fotografi produk/lifestyle polos tanpa
* teks penting dekat tepi.
* ===================================================================== */
body.zsd-halaman-shop .zsd-shop-hero-slide--contain {
background-size: cover;
background-position: center;
}
body.zsd-halaman-shop .zsd-shop-hero-slide--contain::before {
content: '';
position: absolute;
inset: 0;
background: inherit;
filter: blur(15px) brightness(0.83); /* nilai hasil tes devtools Ferdian, round 4 */
transform: scale(1.15);
z-index: 0;
}
body.zsd-halaman-shop .zsd-shop-hero-slide--contain .zsd-shop-hero-gambar {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
z-index: 1;
}
body.zsd-halaman-shop .zsd-shop-hero-slide--contain .zsd-shop-hero-konten {
z-index: 2;
}
body.zsd-halaman-shop .zsd-shop-hero-slide--background {
display: flex;
align-items: center;
}
/* =====================================================================
* BARU 2026-09-09 -- "Tampilan Banner: Full Width" (permintaan Ferdian,
* alternatif dari treatment "Contain + Background Blur" di atas).
*
* KOREKSI 2026-09-10 (round 2 -- laporan Ferdian: gambar tampil di
* UKURAN ASLI/KECIL di tengah dengan ruang kosong krem/putih BESAR di
* kiri-kanan, bukan melebar penuh). Root cause: implementasi awal pakai
* `width:auto;height:auto` di ![]()
(ukuran natif gambar), dengan wadah
* `height:auto;max-height:70vh` -- max-height/max-width HANYA membatasi
* (mengecilkan kalau kelebihan), TIDAK PERNAH membesarkan gambar untuk
* mengisi wadah. Untuk file gambar contoh yang resolusinya kecil
* (mis. 1024x384), hasilnya gambar tampil natif kecil, jauh dari lebar
* penuh layar.
*
* FIX: samakan mekanik dengan mode "Contain + Background Blur" yang
* sudah terbukti benar di atas (".zsd-shop-hero-slide--contain") --
* wadah diberi TINGGI TETAP (70vh, bukan max-height), gambar
* di-absolute-position mengisi 100% lebar x 100% tinggi wadah dengan
* `object-fit: contain`. object-fit:contain otomatis membesarkan ATAU
* mengecilkan gambar supaya selalu mengisi area yang tersedia semaksimal
* mungkin TANPA crop dan TANPA distorsi rasio -- kalau rasio gambar PAS
* 8:3 (rekomendasi), gambar mengisi penuh wadah; kalau rasionya beda,
* muncul letterbox putih polos di kiri-kanan/atas-bawah (warna solid,
* bukan blur -- dipilih karena satu warna tidak mungkin cocok untuk
* semua kombinasi warna gambar seller, per keputusan Owner). Karena
* tinggi wadah sekarang TETAP (bukan auto), opsi Swiper `autoHeight`
* tidak lagi diperlukan (lihat shop-restyle.js).
* ===================================================================== */
body.zsd-halaman-shop .zsd-shop-hero--fullwidth .zsd-shop-hero-swiper {
height: 70vh;
}
body.zsd-halaman-shop .zsd-shop-hero-slide--fullwidth {
position: relative;
overflow: hidden;
background: #ffffff;
}
body.zsd-halaman-shop .zsd-shop-hero-slide--fullwidth .zsd-shop-hero-gambar {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
body.zsd-halaman-shop .zsd-shop-hero-slide--fullwidth .zsd-shop-hero-konten {
position: absolute;
}
/* Wadah luar ".zsd-shop-hero" pakai background krem sebagai default
(lihat rule dasar di atas) -- di mode Full Width kita samakan jadi
putih juga supaya tidak ada strip krem "tertinggal" di tepi saat
tinggi wadah luar sempat berbeda dari swiper sebelum JS selesai init. */
body.zsd-halaman-shop .zsd-shop-hero--fullwidth {
background: #ffffff;
}
/* Tombol panah kiri/kanan: gaya default (lingkaran putih transparan)
dirancang untuk latar foto/gradasi gelap -- di atas letterbox putih
polos mode Full Width, lingkaran putih jadi nyaris tidak terlihat.
Tambahkan border + shadow tipis supaya tombol tetap jelas di latar
warna apapun (putih maupun foto). */
body.zsd-halaman-shop .zsd-shop-hero--fullwidth .zsd-shop-hero-panah {
background: #fff;
border: 1px solid rgba(43, 38, 34, 0.14);
box-shadow: 0 2px 10px rgba(43, 38, 34, 0.14);
}
body.zsd-halaman-shop .zsd-shop-hero--fullwidth .zsd-shop-hero-panah:hover {
background: #f7f4f0;
}
body.zsd-halaman-shop .zsd-shop-hero-konten {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
padding-bottom: 48px;
box-sizing: border-box;
}
body.zsd-halaman-shop .zsd-shop-hero-slide--image .zsd-shop-hero-konten {
background: linear-gradient(to top, rgba(20, 16, 12, 0.72), rgba(20, 16, 12, 0.15) 55%, rgba(20, 16, 12, 0) 80%);
color: #fff;
}
/* Eksplisit (bukan cuma andalkan inherit dari .zsd-shop-hero-konten) --
* ditemukan live 2026-08-30 ada aturan global tema Botiga yang lebih
* spesifik menimpa warna heading jadi gelap lagi, bikin teks nyaris tidak
* kebaca di atas foto. */
body.zsd-halaman-shop .zsd-shop-hero-slide--image .zsd-shop-hero-judul,
body.zsd-halaman-shop .zsd-shop-hero-slide--image .zsd-shop-hero-copy {
color: #fff;
}
body.zsd-halaman-shop .zsd-shop-hero-slide--background .zsd-shop-hero-konten {
align-items: center;
padding-bottom: 0;
color: var(--zsd-shop-teks);
}
body.zsd-halaman-shop .zsd-shop-hero-judul {
font-size: 32px;
line-height: 1.2;
font-weight: 600;
margin: 0 0 8px;
max-width: 640px;
}
body.zsd-halaman-shop .zsd-shop-hero-copy {
font-size: 15px;
line-height: 1.5;
margin: 0;
max-width: 520px;
opacity: 0.92;
}
body.zsd-halaman-shop .zsd-shop-hero-panah {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.85);
color: var(--zsd-shop-teks);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 2;
transition: background 0.2s ease;
}
body.zsd-halaman-shop .zsd-shop-hero-panah:hover {
background: #fff;
}
body.zsd-halaman-shop .zsd-shop-hero-panah-kiri {
left: 16px;
}
body.zsd-halaman-shop .zsd-shop-hero-panah-kanan {
right: 16px;
}
body.zsd-halaman-shop .zsd-shop-hero-panah .zsd-shop-ikon {
width: 20px;
height: 20px;
}
body.zsd-halaman-shop .zsd-shop-hero-indikator {
position: absolute;
left: 50%;
bottom: 18px;
transform: translateX(-50%);
z-index: 2;
}
body.zsd-halaman-shop .zsd-shop-hero-indikator-track {
display: block;
width: 64px;
height: 3px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.5);
overflow: hidden;
}
body.zsd-halaman-shop .zsd-shop-hero-slide--background ~ .zsd-shop-hero-indikator .zsd-shop-hero-indikator-track,
body.zsd-halaman-shop .zsd-shop-hero-swiper:has(.zsd-shop-hero-slide--background.swiper-slide-active) .zsd-shop-hero-indikator-track {
background: rgba(43, 38, 34, 0.18);
}
body.zsd-halaman-shop .zsd-shop-hero-indikator-thumb {
display: block;
height: 100%;
width: 25%;
border-radius: 3px;
background: #fff;
transform: translateX(0);
transition: transform 0.3s ease, width 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
body.zsd-halaman-shop .zsd-shop-hero-swiper .swiper-wrapper {
transition-duration: 1ms !important;
}
body.zsd-halaman-shop .zsd-shop-hero-indikator-thumb {
transition: none;
}
}
/* =====================================================================
* SHOP INTRO
* ===================================================================== */
body.zsd-halaman-shop .zsd-shop-intro {
padding: 56px 0 32px;
text-align: center;
}
body.zsd-halaman-shop .zsd-shop-intro-eyebrow {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--zsd-shop-coklat);
margin: 0 0 12px;
}
body.zsd-halaman-shop .zsd-shop-intro-judul {
font-size: 30px;
line-height: 1.3;
font-weight: 600;
color: var(--zsd-shop-teks);
margin: 0 auto 12px;
max-width: 720px;
}
body.zsd-halaman-shop .zsd-shop-intro-deskripsi {
font-size: 15px;
line-height: 1.6;
color: var(--zsd-shop-teks-muted);
margin: 0 auto;
max-width: 560px;
}
/* =====================================================================
* PRODUCT SEARCH
* ===================================================================== */
body.zsd-halaman-shop .zsd-shop-search-wrap {
padding: 0 0 32px;
}
body.zsd-halaman-shop .zsd-shop-search {
display: flex;
align-items: center;
gap: 12px;
max-width: 640px;
margin: 0 auto;
background: #fff;
border: 1px solid var(--zsd-shop-garis);
border-radius: var(--zsd-shop-radius);
padding: 4px 6px 4px 20px;
box-shadow: 0 1px 2px rgba(43, 38, 34, 0.04);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
}
body.zsd-halaman-shop .zsd-shop-search-icon {
display: flex;
color: var(--zsd-shop-teks-muted);
flex-shrink: 0;
}
body.zsd-halaman-shop .zsd-shop-search-icon .zsd-shop-ikon {
width: 18px;
height: 18px;
}
body.zsd-halaman-shop .zsd-shop-search-input {
flex: 1 1 auto;
min-width: 0;
border: none;
outline: none;
background: transparent;
font-size: 14px;
height: 44px;
color: var(--zsd-shop-teks);
}
body.zsd-halaman-shop .zsd-shop-search-input::placeholder {
color: var(--zsd-shop-teks-muted);
}
body.zsd-halaman-shop .zsd-shop-search-tombol {
flex-shrink: 0;
background: var(--zsd-shop-coklat);
color: #fff;
border: none;
border-radius: calc(var(--zsd-shop-radius) - 4px);
padding: 10px 20px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease;
}
body.zsd-halaman-shop .zsd-shop-search-tombol:hover {
background: var(--zsd-shop-coklat-gelap);
}
body.zsd-halaman-shop .zsd-shop-search:focus-within {
border-color: var(--zsd-shop-coklat);
box-shadow: 0 0 0 3px rgba(107, 87, 68, 0.12);
}
/* =====================================================================
* CATEGORY NAVIGATION -- horizontal scroll di container-nya sendiri saja
* (bukan body) supaya tidak pernah menyebabkan page-level overflow.
* ===================================================================== */
body.zsd-halaman-shop .zsd-shop-kategori-nav {
border-bottom: 1px solid var(--zsd-shop-garis);
padding: 0;
margin-bottom: 40px;
}
body.zsd-halaman-shop .zsd-shop-kategori-nav-scroll {
max-width: var(--zsd-shop-container-max);
margin: 0 auto;
padding: 0 24px;
display: flex;
gap: 8px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
body.zsd-halaman-shop .zsd-shop-kategori-item {
flex-shrink: 0;
white-space: nowrap;
padding: 16px 4px;
margin-right: 20px;
font-size: 14px;
font-weight: 500;
color: var(--zsd-shop-teks-muted);
text-decoration: none;
border-bottom: 2px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
}
body.zsd-halaman-shop .zsd-shop-kategori-item:hover {
color: var(--zsd-shop-teks);
}
body.zsd-halaman-shop .zsd-shop-kategori-item.zsd-aktif {
color: var(--zsd-shop-coklat);
border-bottom-color: var(--zsd-shop-coklat);
font-weight: 600;
}
/* =====================================================================
* PRODUCT TOOLBAR (di dalam #primary, sejajar sama header sidebar Filter)
* ===================================================================== */
body.zsd-halaman-shop .zsd-shop-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px solid var(--zsd-shop-garis);
flex-wrap: wrap;
}
body.zsd-halaman-shop .zsd-shop-toolbar-tombol-filter {
display: none; /* dimunculkan lewat media query <=1024px, lihat bawah */
align-items: center;
gap: 8px;
background: #fff;
border: 1px solid var(--zsd-shop-garis);
border-radius: var(--zsd-shop-radius);
padding: 9px 16px;
font-size: 13px;
font-weight: 600;
color: var(--zsd-shop-teks);
cursor: pointer;
}
body.zsd-halaman-shop .zsd-shop-toolbar-tombol-filter .zsd-shop-ikon {
width: 16px;
height: 16px;
}
body.zsd-halaman-shop .zsd-shop-toolbar-native {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex: 1 1 auto;
flex-wrap: wrap;
}
body.zsd-halaman-shop .woocommerce-result-count {
margin: 0;
font-size: 13px;
color: var(--zsd-shop-teks-muted);
}
body.zsd-halaman-shop .woocommerce-ordering {
margin: 0;
}
body.zsd-halaman-shop .woocommerce-ordering select,
body.zsd-halaman-shop .botiga-sorting-right-inner select {
border: 1px solid var(--zsd-shop-garis);
border-radius: 10px;
padding: 8px 32px 8px 14px;
font-size: 13px;
color: var(--zsd-shop-teks);
background-color: #fff;
}
/* =====================================================================
* SIDEBAR FILTER (#secondary) -- editorial, restrained (LOCKED bagian 10:
* "tidak menjadi gray card besar, tidak seperti admin panel").
* ===================================================================== */
body.zsd-halaman-shop #secondary.widget-area {
background: transparent;
border: none;
box-shadow: none;
padding: 0;
}
body.zsd-halaman-shop .zsd-shop-filter-header {
display: flex;
align-items: center;
gap: 14px;
padding-bottom: 16px;
margin-bottom: 20px;
border-bottom: 1px solid var(--zsd-shop-garis);
}
body.zsd-halaman-shop .zsd-shop-filter-header-judul {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--zsd-shop-teks);
}
body.zsd-halaman-shop .zsd-shop-filter-reset {
margin-left: auto;
font-size: 12px;
color: var(--zsd-shop-teks-muted);
text-decoration: underline;
}
body.zsd-halaman-shop .zsd-shop-filter-reset:hover {
color: var(--zsd-shop-coklat);
}
body.zsd-halaman-shop .zsd-shop-filter-tutup {
display: none; /* cuma relevan waktu jadi drawer, lihat media query <=1024px */
background: transparent;
border: none;
font-size: 22px;
line-height: 1;
color: var(--zsd-shop-teks-muted);
cursor: pointer;
padding: 4px;
}
body.zsd-halaman-shop #secondary .widget {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 0 26px !important;
margin: 0 0 26px !important;
border-bottom: 1px solid var(--zsd-shop-garis) !important;
}
body.zsd-halaman-shop #secondary .widget:last-child {
border-bottom: none !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
body.zsd-halaman-shop #secondary .widget-title,
body.zsd-halaman-shop #secondary .widgettitle {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--zsd-shop-teks);
margin: 0 0 14px;
}
body.zsd-halaman-shop #secondary select {
width: 100%;
border: 1px solid var(--zsd-shop-garis);
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
color: var(--zsd-shop-teks);
background-color: #fff;
box-sizing: border-box;
}
body.zsd-halaman-shop #secondary .select2-selection {
border-radius: 10px !important;
border-color: var(--zsd-shop-garis) !important;
min-height: 40px !important;
}
body.zsd-halaman-shop #secondary .price_slider .ui-slider-range {
background: var(--zsd-shop-coklat) !important;
}
body.zsd-halaman-shop #secondary .price_slider .ui-slider-handle {
background: #fff !important;
border: 2px solid var(--zsd-shop-coklat) !important;
border-radius: 50% !important;
width: 15px !important;
height: 15px !important;
top: -5px !important;
outline: none;
}
body.zsd-halaman-shop #secondary .price_slider_amount .button,
body.zsd-halaman-shop #secondary .price_slider_amount button[type="submit"] {
background: var(--zsd-shop-coklat) !important;
color: #fff !important;
border-radius: 15px !important;
border: none !important;
padding: 8px 18px !important;
font-size: 12px !important;
font-weight: 600;
}
body.zsd-halaman-shop #secondary .product_list_widget img {
border-radius: 8px;
}
body.zsd-halaman-shop #secondary .product_list_widget .woocommerce-Price-amount {
color: var(--zsd-shop-coklat-gelap);
}
/* =====================================================================
* KATEGORI FILTER CONTROL -- round 3. Widget "Product Categories" bawaan
* TERNYATA sudah di-enhance jadi select2 SECARA OTOMATIS oleh tema Botiga
* sendiri (dikonfirmasi live lewat Claude in Chrome: elemen