/*
Theme Name: NusaTheme
Theme URI: https://temawp.biz.id
Author: NusaTheme
Author URI: https://temawp.biz.id
Description: NusaTheme — Tema WordPress Indonesia yang elegan, cepat, dan fleksibel. Cocok untuk blog, toko online, herbal, bisnis, dan semua niche. Dilengkapi Custom Post Type Produk, Toko Online, Slider, Sidebar & Footer yang mudah dikustomisasi.
Version: 1.6.5
Requires at least: 5.0
Tested up to: 6.9
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nusatheme
Tags: blog, e-commerce, responsive, custom-logo, custom-menu, featured-images

Changelog:
v1.0.0 - Rilis awal NusaTheme (konversi dari Mabes Herbal Blogger)
v1.1.0 - Tambah: Slot iklan header, Konfigurasi Toko, Nav checklist, Sidebar checklist
v1.2.0 - Tambah: 5 Color Scheme preset + Custom Color Picker, favicon, fix hamburger mobile
v1.3.0 - Tambah: Taxonomy Kategori & Tag Produk, Banner Toko dengan overlay, Filter kategori di halaman toko
v1.4.0 - Tambah: Produk Terkait di halaman detail produk, fitur Duplikat Produk di admin
v1.4.1 - Fix: Layout Produk Lainnya disamakan dengan Artikel Terkait, garis pembatas antar section
v1.5.0 - Tambah: Konfigurasi jumlah produk per halaman (Toko & Arsip) di Theme Options Tampilan
v1.5.1 - Fix: Banner toko dihapus (disederhanakan), judul & deskripsi toko kembali center
v1.5.2 - Fix: Force center judul & deskripsi banner toko (override CSS lama via !important)
v1.5.3 - Fix: Inline style di page-toko.php untuk override total CSS lama yang ter-cache
v1.5.4 - Fix: Kembalikan CSS & HTML banner toko ke versi stabil v1.0.0 (mabes-herbal) yang terbukti benar
v1.6.0 - Tambah: Banner toko dengan background image + overlay gelap, upload via Theme Options
*/

/* ══ CSS VARIABLES — ubah di sini untuk ganti warna tema ══ */
:root {
  --primary:    #3a6b35;
  --primary-dk: #2d5228;
  --primary-lt: #7ab648;
  --white:      #ffffff;
  --dark:       #1a2e1a;
  --light:      #f4f8f0;
  --gray:       #6b7c5a;
  --gray-lt:    #5a6b4a;
  --shadow:     0 4px 16px rgba(58,107,53,0.10);
  --border:     #d4e2c8;
  --accent:     #c8a84b;
  --accent2:    #8b6914;
  --bg-card:    #ffffff;
  --bg-section: #f1f5f9;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--light); color: var(--dark); line-height: 1.6; }
a { color: var(--primary); text-decoration: none; transition: .2s; }
a:hover { color: var(--primary-dk); }
img { max-width: 100%; height: auto; }
.inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
/* ══ HEADER ══ */
#header-wrapper { background: #fff; border-bottom: 3px solid var(--primary); padding: 12px 0; }
/* Desktop: logo kiri, ads kanan sejajar */
.header-flex {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 20px;
}
.header-logo { min-width: 0; }
.header-logo a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.header-logo img { height: auto; }
.site-title { font-size: 22px; font-weight: 800; color: var(--primary); }
.site-description { font-size: 12px; color: var(--gray); margin: 2px 0 0; }

/* Mobile: 1 kolom, ads di bawah logo */
@media (max-width: 768px) {
  .header-flex {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ══ NAVIGASI ══ */
#nav-wrapper { background: var(--primary); position: relative; z-index: 1000; }
#nav-wrapper.nav-sticky { position: sticky; top: 0; }
.nav-inner { display: flex; align-items: center; }
.nav-menu-wrap { flex: 1; }
.nav-links { list-style: none; display: flex; margin: 0; padding: 0; flex-wrap: wrap; }
.nav-links li a { color: #fff; display: block; padding: 15px 20px; font-weight: 600; font-size: 13px; transition: background .2s; }
.nav-links li a:hover, .nav-links li.current-menu-item a { background: var(--primary-dk); }
/* Sub-menu dropdown */
.nav-links li { position: relative; }
.nav-links li ul { display: none; position: absolute; top: 100%; left: 0; background: var(--primary-dk); min-width: 180px; z-index: 100; }
.nav-links li:hover > ul { display: block; }
.nav-links li ul li a { padding: 10px 16px; font-size: 12px; border-top: 1px solid rgba(255,255,255,.1); }

/* Hamburger button — kiri di mobile */
.nav-mobile-btn {
  display: none;
  background: none; border: none; color: #fff;
  font-size: 22px; cursor: pointer;
  padding: 14px 16px; line-height: 1;
  flex-shrink: 0;
}
.nav-mobile-btn:hover { background: rgba(255,255,255,.12); }

@media (max-width: 768px) {
  /* ── Header mobile ── */
  .header-flex { justify-content: center; }
  .header-logo { text-align: center; }
  .header-logo a { justify-content: center; }
  .header-ads-wrap { justify-content: center; }

  /* ── Hamburger: tampil, kiri navbar ── */
  .nav-mobile-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 24px;
    padding: 12px 18px;
    width: auto; /* JANGAN 100% — hanya selebar tombol */
  }

  /* ── Nav inner full width, override .inner container ── */
  #nav-wrapper .inner {
    max-width: 100% !important;
    padding: 0 !important;
    width: 100% !important;
  }
  .nav-inner {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    padding: 0;
    max-width: 100% !important;
    width: 100%;
  }

  /* ── Menu wrap: WAJIB tersembunyi di mobile ── */
  .nav-menu-wrap {
    display: none !important;
    width: 100%;
    order: 10;
    background: #fff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    flex: none !important;
  }
  .nav-menu-wrap.open {
    display: block !important;
  }
  /* Override warna hijau navbar — paksa putih di dalam dropdown */
  #nav-wrapper .nav-menu-wrap,
  #nav-wrapper .nav-menu-wrap .nav-links,
  #nav-wrapper .nav-menu-wrap ul {
    background: #fff !important;
  }
  #nav-wrapper .nav-menu-wrap .nav-links li a,
  #nav-wrapper .nav-menu-wrap ul li a {
    background: #fff !important;
    color: #333 !important;
  }

  .nav-menu-wrap .nav-links,
  .nav-menu-wrap ul {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    margin: 0; padding: 0; list-style: none;
    background: #fff;
  }
  .nav-menu-wrap .nav-links > li,
  .nav-menu-wrap ul > li { width: 100%; }
  .nav-menu-wrap .nav-links > li > a,
  .nav-menu-wrap ul > li > a {
    padding: 14px 20px;
    border-bottom: 1px solid #e8e8e8;
    display: block;
    color: #333 !important;
    font-size: 14px;
    font-weight: 600;
    background: #fff !important;
    transition: background .15s, color .15s;
  }
  .nav-menu-wrap .nav-links > li > a:hover,
  .nav-menu-wrap ul > li > a:hover {
    background: var(--light) !important;
    color: var(--primary) !important;
  }
  .nav-menu-wrap .nav-links > li.current-menu-item > a,
  .nav-menu-wrap ul > li.current-menu-item > a {
    color: var(--primary) !important;
    font-weight: 800;
    border-left: 3px solid var(--primary);
    padding-left: 17px;
  }
  .nav-menu-wrap .nav-links li ul,
  .nav-menu-wrap ul li ul { display: none !important; }
}

/* ══ SLIDER ══ */
.slider-section { padding: 24px 0 0; }
.slider-section .inner { padding: 0 20px; }
.slider-container {
  position: relative;
  height: 400px;
  overflow: hidden;
  border-radius: 20px;
  background: var(--primary);
  box-shadow: 0 6px 24px rgba(58,107,53,.18);
}
.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; display: none; }
.slide.active { opacity: 1; display: block; }
.slide img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
.slide-caption {
  position: absolute; bottom: 16px; left: 16px; right: 16px;
}
.slide-caption h2 {
  display: inline-block;
  font-size: clamp(13px, 2vw, 18px);
  font-weight: 600;
  color: #fff;
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 7px 18px;
  border-radius: 50px;
  line-height: 1.45;
  margin: 0;
  max-width: 90%;
}
.s-prev, .s-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.22);
  border: none; color: #fff; font-size: 18px;
  width: 44px; height: 44px; border-radius: 50%;
  cursor: pointer; z-index: 10;
  transition: background .2s;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.s-prev { left: 16px; }
.s-next { right: 16px; }
.s-prev:hover, .s-next:hover { background: var(--primary-dk); }
@media (max-width: 768px) {
  .slider-section { padding: 16px 0 0; }
  .slider-container { height: 240px; border-radius: 14px; }
  .slide img { border-radius: 14px; }
  .slide-caption { padding: 20px 20px; border-radius: 0 0 14px 14px; }
}

/* ══ LAYOUT UTAMA ══ */
#main-wrapper { padding: 28px 0 40px; }
.main-flex { display: flex; gap: 32px; align-items: flex-start; }
#content-col { flex: 1; min-width: 0; }
#sidebar-col { width: 300px; flex-shrink: 0; }
@media (max-width: 900px) {
  .main-flex { flex-direction: column; }
  #sidebar-col { width: 100%; }
}



/* ══ POST CARD — MODE LIST (default) ══ */
.blog-posts { display: flex; flex-direction: column; gap: 24px; }
.post-card { background: var(--bg-card); border-radius: 14px; border: 1px solid var(--border); box-shadow: var(--shadow); overflow: visible; transition: border-color .2s, box-shadow .2s; position: relative; }
.post-card:hover { border-color: var(--primary-lt); box-shadow: 0 8px 24px rgba(58,107,53,0.12); }
.card-inner-clip { border-radius: 14px; overflow: hidden; }
.card-flex { display: flex; gap: 0; align-items: stretch; }
.card-thumb { flex: 0 0 200px; width: 200px; height: 160px; overflow: hidden; }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.post-card:hover .card-thumb img { transform: scale(1.05); }
.card-flex.no-thumb .card-info { width: 100%; }
.card-info { flex: 1; padding: 18px 20px 12px; display: flex; flex-direction: column; gap: 8px; }
.card-title { font-size: 18px; font-weight: 700; color: var(--dark); line-height: 1.4; margin: 0; }
.card-title a { color: var(--primary); }
.card-title a:hover { color: var(--primary-dk); text-decoration: underline; }
.card-summary { font-size: 14px; color: var(--gray); line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-footer-wrap { padding: 10px 20px 14px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.meta-left-group { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.meta-item { font-size: 12px; color: var(--gray); display: flex; align-items: center; gap: 4px; }
.meta-label { display: inline-block; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 50px; }
.meta-label:hover { background: var(--primary-dk); color: #fff; }


@media (max-width: 600px) {
  .card-flex { flex-direction: column; }
  .card-thumb { flex: none; width: 100%; height: 200px; }
}

/* ══ SINGLE POST ══ */
.single-post-wrap { background: #fff; border-radius: 14px; border: 1px solid var(--border); padding: 32px; box-shadow: var(--shadow); }
.post-title { font-size: clamp(22px, 4vw, 32px); font-weight: 800; color: var(--dark); line-height: 1.35; margin-bottom: 16px; }
.post-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--gray); margin-bottom: 24px; padding-bottom: 20px; border-bottom: 2px solid var(--border); }
.post-body { font-size: 16px; line-height: 1.85; color: #374151; }
.post-body h2, .post-body h3 { color: var(--primary); margin: 24px 0 12px; }
.post-body p { margin-bottom: 16px; }
.post-body img { border-radius: 12px; margin: 16px 0; }
.post-body a { color: var(--primary); text-decoration: underline; }
.post-body ul, .post-body ol { margin: 12px 0 12px 24px; }
.post-body li { margin-bottom: 6px; }
.post-body blockquote { border-left: 4px solid var(--primary); padding: 12px 20px; margin: 20px 0; background: var(--light); border-radius: 0 8px 8px 0; font-style: italic; }

/* ══ PAGINATION ══ */
.sl-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 32px 0 16px; flex-wrap: wrap; }
.sl-page-btn { min-width: 38px; height: 38px; padding: 0 12px; border: 2px solid var(--border); border-radius: 8px; background: #fff; color: var(--primary); font-weight: 700; font-size: 14px; cursor: pointer; transition: .2s; }
.sl-page-btn:hover:not(:disabled) { background: var(--primary); color: #fff; border-color: var(--primary); }
.sl-page-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.sl-page-btn:disabled { opacity: .4; cursor: default; }
.sl-page-dots { color: #aaa; font-size: 16px; line-height: 38px; }
.wp-pagenavi, .navigation.pagination { display: none; }

/* ══ SIDEBAR ══ */
.widget { background: #fff; border-radius: 12px; border: 1px solid var(--border); padding: 20px; margin-bottom: 24px; }
.widget-title { font-size: 14px; font-weight: 800; color: var(--primary); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--border); }
.widget ul { list-style: none; padding: 0; }
.widget ul li { padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 14px; }
.widget ul li:last-child { border-bottom: none; }
.widget ul li a { color: var(--dark); }
.widget ul li a:hover { color: var(--primary); }
.widget input[type="search"],
.widget input[type="text"] { width: 100%; padding: 10px 14px; border: 2px solid var(--border); border-radius: 8px 0 0 8px; font-size: 14px; outline: none; box-sizing: border-box; }
.widget input[type="search"]:focus { border-color: var(--primary); }
.widget .search-form { display: flex; gap: 0; }
.widget .search-form label { flex: 1; margin: 0; }
.widget .search-form input[type="search"] { width: 100%; border-radius: 8px 0 0 8px; border-right: none; }
.widget .search-form .search-submit,
.widget .search-form button,
.widget .search-form input[type="submit"] {
  padding: 10px 16px;
  background: var(--primary);
  color: #fff;
  border: 2px solid var(--primary);
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s;
  font-family: inherit;
}
.widget .search-form .search-submit:hover { background: var(--primary-dk); border-color: var(--primary-dk); }

/* ══ SIDEBAR SEARCH ══ */
.sidebar-search-wrap {
  display: flex; align-items: stretch;
  background: #f4f8f0;
  border: 2px solid var(--border);
  border-radius: 50px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.sidebar-search-wrap:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(58,107,53,.1);
}
.sidebar-search-wrap input {
  flex: 1; padding: 10px 16px;
  border: none; background: transparent;
  font-size: 13px; outline: none; color: var(--dark); min-width: 0;
}
.sidebar-search-wrap input::placeholder { color: #aac4a0; font-size: 13px; }
.sidebar-search-wrap button {
  padding: 0 18px;
  background: var(--primary); color: #fff;
  border: none; cursor: pointer;
  border-radius: 0 50px 50px 0;
  transition: background .2s;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sidebar-search-wrap button:hover { background: var(--primary-dk); }
.sidebar-search-wrap button svg { display: block; }

/* ══ SIDEBAR RECENT POSTS ══ */
.sidebar-recent-list { display: flex; flex-direction: column; }
.sidebar-recent-item {
  display: flex; gap: 10px; align-items: center;
  text-decoration: none; padding: 9px 6px;
  border-bottom: 1px solid #f0f5eb;
  transition: background .15s, padding-left .15s;
  border-radius: 8px;
}
.sidebar-recent-item:last-child { border-bottom: none; }
.sidebar-recent-item:hover { background: var(--light); padding-left: 10px; }
.sri-thumb {
  flex: 0 0 60px; width: 60px; height: 60px;
  border-radius: 8px; overflow: hidden;
  background: var(--light); flex-shrink: 0;
}
.sri-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sri-no-thumb {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.sri-info { flex: 1; min-width: 0; }
.sri-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 13px; font-weight: 700; color: var(--dark); line-height: 1.4; margin-bottom: 4px;
}
.sidebar-recent-item:hover .sri-title { color: var(--primary); }
.sri-date { font-size: 12px; color: var(--gray); }

/* ══ SIDEBAR ARSIP ══ */
.sidebar-archive-list { list-style: none; padding: 0; margin: 0; }
.sidebar-archive-list li { padding: 0; border-bottom: 1px solid #f0f5eb; }
.sidebar-archive-list li:last-child { border-bottom: none; }
.sidebar-archive-list li a {
  display: block; padding: 8px 4px;
  font-size: 13px; font-weight: 600; color: var(--dark);
  text-decoration: none; transition: color .15s, padding-left .15s;
  border-radius: 6px;
}
.sidebar-archive-list li a:hover { color: var(--primary); padding-left: 8px; background: var(--light); }

/* ══ SIDEBAR KATEGORI ══ */
.sidebar-cat-list { list-style: none; padding: 0; margin: 0; }
.sidebar-cat-list li { border-bottom: 1px solid #f0f5eb; }
.sidebar-cat-list li:last-child { border-bottom: none; }
.sidebar-cat-list li a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 4px;
  font-size: 13px; font-weight: 600; color: var(--dark);
  text-decoration: none; transition: color .15s, padding-left .15s;
  border-radius: 6px;
}
.sidebar-cat-list li a:hover { color: var(--primary); padding-left: 8px; background: var(--light); }
.cat-count {
  background: var(--primary); color: #fff;
  font-size: 10px; font-weight: 800;
  padding: 2px 7px; border-radius: 50px;
  min-width: 22px; text-align: center;
}

/* ══ SIDEBAR TAG CLOUD ══ */
.sidebar-tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.sidebar-tag {
  display: inline-block;
  padding: 4px 12px; border-radius: 50px;
  border: 1.5px solid var(--primary-lt); color: var(--primary);
  font-size: 12px; font-weight: 700;
  text-decoration: none; transition: .18s;
  background: transparent;
}
.sidebar-tag:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ══ TOKO ONLINE ══ */
.toko-header { position: relative; background: linear-gradient(135deg, var(--primary), var(--primary-dk), #c8a84b); border-radius: 20px; overflow: hidden; min-height: 220px; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; margin-bottom: 32px; }
.toko-header-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; }
.toko-header-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.52); z-index: 1; }
.toko-header-content { position: relative; z-index: 2; padding: 48px 32px; width: 100%; }
.toko-header h1 { font-size: clamp(24px, 4vw, 36px); font-weight: 900; margin-bottom: 8px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.toko-header p { font-size: 15px; opacity: .92; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
@media (max-width:600px) { .toko-header{min-height:160px} .toko-header-content{padding:32px 20px} .toko-header h1{font-size:22px} .toko-header p{font-size:13px} }
/* Kategori filter chips */
.toko-kat-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.toko-kat-btn { padding: 7px 16px; border: 2px solid var(--border); border-radius: 50px; background: #fff; color: var(--gray); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; gap: 5px; }
.toko-kat-btn:hover { border-color: var(--primary); color: var(--primary); }
.toko-kat-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.toko-kat-count { background: rgba(255,255,255,.3); border-radius: 50px; padding: 1px 7px; font-size: 11px; }
.toko-kat-btn.active .toko-kat-count { background: rgba(255,255,255,.25); }
.toko-filter-bar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 24px; }
.toko-search-wrap { position: relative; flex: 1; min-width: 200px; }
.toko-search-wrap input { width: 100%; padding: 12px 16px 12px 40px; border: 2px solid var(--border); border-radius: 50px; font-size: 14px; outline: none; }
.toko-search-wrap input:focus { border-color: var(--primary); }
.toko-search-wrap::before { content: '🔍'; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 14px; }
.toko-sort { padding: 12px 16px; border: 2px solid var(--border); border-radius: 50px; font-size: 14px; cursor: pointer; background: #fff; outline: none; }
.toko-stats { text-align: center; margin-bottom: 20px; font-size: 14px; color: var(--gray); }
.toko-stat-item span { font-weight: 800; color: var(--primary); }
.toko-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.toko-card { background: #fff; border-radius: 16px; border: 1px solid var(--border); overflow: hidden; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; }
.toko-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(58,107,53,.15); }
.toko-card-img { position: relative; width: 100%; padding-top: 68%; overflow: hidden; background: var(--light); }
.toko-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.toko-card:hover .toko-card-img img { transform: scale(1.06); }
.toko-badge { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 4px; }
.toko-badge span { display: inline-block; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 50px; text-transform: uppercase; letter-spacing: .5px; color: #fff; }
.toko-badge .bdg-baru     { background: #5a8f47; }
.toko-badge .bdg-terlaris { background: #c8a84b; color: #3a2a00; }
.toko-badge .bdg-diskon   { background: #c0392b; }
.toko-badge .bdg-flash    { background: #f5a623; animation: fp 1s infinite; }
.toko-badge .bdg-spesial  { background: #9b59b6; }
.toko-badge .bdg-promo    { background: #2980b9; }
.toko-badge .bdg-habis    { background: #888; }
.toko-badge .bdg-default  { background: var(--primary); }
@keyframes fp { 0%,100%{opacity:1} 50%{opacity:.6} }
.toko-card-body { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.toko-card-name { font-size: 15px; font-weight: 800; color: var(--dark); line-height: 1.4; }
.toko-card-desc { font-size: 13px; color: var(--gray); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.toko-card-price { background: var(--light); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; }
.toko-card-price small { display: block; font-size: 10px; font-weight: 700; color: var(--gray); text-transform: uppercase; letter-spacing: .5px; }
.toko-card-price .harga-main { font-size: 22px; font-weight: 900; color: var(--primary); }
.toko-card-actions { display: flex; gap: 8px; margin-top: auto; }
.toko-btn-detail { flex: 1; padding: 9px; border: 2px solid var(--primary); background: #fff; color: var(--primary); border-radius: 9px; font-size: 13px; font-weight: 700; text-align: center; transition: .2s; }
.toko-btn-detail:hover { background: var(--primary); color: #fff; }
.toko-btn-wa { flex: 1; padding: 9px; background: #25d366; color: #fff; border: none; border-radius: 9px; font-size: 13px; font-weight: 700; text-align: center; transition: background .2s; }
.toko-btn-wa:hover { background: #1ebe5a; color: #fff; }
.toko-empty { text-align: center; padding: 60px 20px; color: var(--gray); }
.toko-empty .icon { font-size: 52px; margin-bottom: 16px; }
.toko-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 32px; flex-wrap: wrap; }
.toko-page-btn { min-width: 36px; height: 36px; padding: 0 10px; border: 2px solid var(--border); border-radius: 8px; background: #fff; color: var(--primary); font-weight: 700; cursor: pointer; transition: .2s; }
.toko-page-btn.active, .toko-page-btn:hover:not(:disabled) { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ══ ORDER BOX PRODUK ══ */
.herbal-order-box { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; background: linear-gradient(135deg, #f0f7ff, #fff); border: 2px solid var(--border); border-radius: 16px; padding: 20px 24px; margin: 24px 0; }
.herbal-price-block { display: flex; flex-direction: column; gap: 4px; }
.herbal-price-label { font-size: 11px; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .8px; }
.herbal-price-main { font-size: 28px; font-weight: 900; color: var(--primary); line-height: 1.1; }
.herbal-price-coret { font-size: 13px; color: #aaa; text-decoration: line-through; margin-bottom: 2px; }
.herbal-price-hemat { display: inline-block; background: #fff0e0; color: #5a8f47; font-size: 11px; font-weight: 800; padding: 2px 10px; border-radius: 50px; margin-top: 3px; }
.herbal-order-btns { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn-order-wa { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: #25d366; color: #fff; border: none; border-radius: 12px; font-size: 15px; font-weight: 800; cursor: pointer; transition: background .2s; text-decoration: none; }
.btn-order-wa:hover { background: #1ebe5a; color: #fff; }
.btn-order-detail { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border: 2px solid var(--primary); background: #fff; color: var(--primary); border-radius: 12px; font-size: 15px; font-weight: 800; cursor: pointer; transition: .2s; text-decoration: none; }
.btn-order-detail:hover { background: var(--primary); color: #fff; }

/* ══ FOOTER ══ */
#footer-wrapper { background: var(--footer-bg, var(--primary-dk)); color: #d4e2c8; padding: 48px 0 24px; margin-top: 48px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; margin-bottom: 32px; }
.footer-widget h3 { font-size: 14px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; }
.footer-widget p, .footer-widget li { font-size: 13px; color: #b0c8a8; line-height: 1.7; }
.footer-widget ul, .footer-nav-list { list-style: none; padding: 0; margin: 0; }
.footer-widget li a, .footer-nav-list li a { color: #b0c8a8; text-decoration: none; transition: color .15s, padding-left .15s; display: block; padding: 2px 0; }
.footer-widget li a:hover, .footer-nav-list li a:hover { color: #fff; padding-left: 6px; }
.footer-nav-list li { border-bottom: 1px solid rgba(255,255,255,.06); }
.footer-nav-list li:last-child { border-bottom: none; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 20px; text-align: center; font-size: 13px; color: #8fa882; }

/* ══ WA FLOAT BUTTON ══ */
.wa-float { position: fixed; bottom: 24px; right: 24px; z-index: 9999; }
.wa-float a { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: #25d366; border-radius: 50%; box-shadow: 0 4px 20px rgba(37,211,102,.4); font-size: 28px; transition: transform .2s, box-shadow .2s; }
.wa-float a:hover { transform: scale(1.1); box-shadow: 0 8px 28px rgba(37,211,102,.5); }

/* ══ SEARCH EMPTY ══ */
.search-empty { text-align: center; padding: 60px 20px; }
.search-empty-icon { font-size: 52px; margin-bottom: 16px; display: block; }
.search-empty-title { font-size: 20px; font-weight: 800; color: var(--dark); margin-bottom: 8px; }
.search-empty-msg { font-size: 14px; color: var(--gray); margin-bottom: 24px; }
.search-empty-btn { display: inline-block; padding: 12px 28px; background: var(--primary); color: #fff; border-radius: 50px; font-weight: 700; }

/* ══ BREADCRUMB ══ */
.breadcrumb-nav { font-size: 13px; color: var(--gray); margin-bottom: 20px; }
.breadcrumb-nav a { color: var(--primary); }
.breadcrumb-nav a:hover { text-decoration: underline; }
.breadcrumb-nav span { margin: 0 6px; }

/* ══ RELATED POSTS ══ */
.related-posts { margin-top: 40px; padding-top: 32px; border-top: 2px solid var(--border); }
.related-posts h3 { font-size: 18px; font-weight: 800; color: var(--primary); margin-bottom: 20px; }

/* ══ PRODUK TERKAIT ══ */
.produk-terkait-wrap { margin-top: 40px; padding-top: 32px; border-top: 2px solid var(--border); }
.produk-terkait-wrap .related-title { font-size: 18px; font-weight: 800; color: var(--primary); margin-bottom: 20px; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.related-card { background: #fff; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; transition: box-shadow .2s, transform .2s; }
.related-card:hover { box-shadow: 0 6px 20px rgba(58,107,53,.12); transform: translateY(-2px); }
.related-card img { width: 100%; height: 130px; object-fit: cover; display: block; }
.related-card-body { padding: 12px 14px; }
.related-card-title { display: block; font-size: 13px; font-weight: 700; color: var(--dark); line-height: 1.45; margin-bottom: 6px; text-decoration: none; }
.related-card-title:hover { color: var(--primary); }
.related-card-excerpt { font-size: 12px; color: var(--gray); line-height: 1.55; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ══ SHARE BUTTONS ══ */
.share-bar { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:14px 0; }
.share-bar .share-label { font-size:11px; font-weight:700; color:var(--gray); text-transform:uppercase; letter-spacing:.8px; }
.share-btn {
  display:inline-flex; align-items:center; gap:4px;
  padding:5px 13px; border-radius:50px; font-size:12px; font-weight:700;
  cursor:pointer; text-decoration:none; transition:.18s;
  background: transparent;
}
.share-btn.wa   { border:1.5px solid #25d366; color:#25d366; }
.share-btn.fb   { border:1.5px solid #1877f2; color:#1877f2; }
.share-btn.x    { border:1.5px solid #333;    color:#333; }
.share-btn.copy { border:1.5px solid #aaa;    color:#777; }
.share-btn.wa:hover   { border-width:2.5px; background:#25d366; color:#fff; }
.share-btn.fb:hover   { border-width:2.5px; background:#1877f2; color:#fff; }
.share-btn.x:hover    { border-width:2.5px; background:#111;    color:#fff; }
.share-btn.copy:hover { border-width:2.5px; background:var(--primary); border-color:var(--primary); color:#fff; }
.share-btn.copy.copied { border-color:var(--primary); background:var(--primary); color:#fff; }

/* Share mini di card */
.card-share-mini { position:relative; flex-shrink:0; }
.share-icon-btn {
  background:none; border:none; cursor:pointer;
  padding:5px 7px; color:var(--gray);
  border-radius:6px; transition:.2s; font-size:16px; line-height:1;
}
.share-icon-btn:hover { color:var(--primary); background:var(--light); }
.share-mini-menu {
  display:none; position:absolute;
  right:0; bottom:calc(100% + 6px);
  background:#fff; border:1px solid var(--border);
  border-radius:12px; box-shadow:0 -4px 20px rgba(0,0,0,.12);
  padding:8px; z-index:200; min-width:170px;
  gap:4px; flex-direction:column;
}
.share-mini-menu.open { display:flex; }
.share-mini-menu a, .share-mini-menu button {
  display:flex; align-items:center; gap:8px;
  padding:7px 12px; border-radius:8px;
  font-size:13px; font-weight:600; color:var(--dark);
  background:none; border:none; cursor:pointer;
  text-decoration:none; transition:background .15s;
  width:100%; text-align:left;
}
.share-mini-menu a:hover, .share-mini-menu button:hover { background:var(--light); }

/* ══ BACA JUGA ══ */
.baca-juga { display:flex; align-items:center; gap:10px; background:#f0f7ea; border-left:4px solid var(--primary); border-radius:0 10px 10px 0; padding:12px 18px; margin:20px 0; font-size:14px; }
.baca-juga a { color:var(--primary); font-weight:700; text-decoration:none; }
.baca-juga a:hover { text-decoration:underline; }

/* ══ DAFTAR ISI ══ */
.daftar-isi {
  background: #f7fbf2;
  border: 1px solid #c8e6b0;
  border-radius: 12px;
  padding: 16px 20px;
  margin: 24px 0;
  font-size: 14px;
}
.daftar-isi-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.daftar-isi-header strong {
  font-size: 13px; font-weight: 800; color: var(--primary);
  text-transform: uppercase; letter-spacing: .6px;
}
.daftar-isi-toggle {
  font-size: 11px; color: var(--primary); cursor: pointer;
  background: none; border: 1px solid var(--primary-lt);
  border-radius: 50px; padding: 2px 10px; font-weight: 700;
  transition: .15s;
}
.daftar-isi-toggle:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.daftar-isi ol {
  margin: 0; padding-left: 20px;
  display: flex; flex-direction: column; gap: 5px;
}
.daftar-isi ol li a {
  color: var(--primary-dk); text-decoration: none; font-weight: 600;
  transition: color .15s;
}
.daftar-isi ol li a:hover { color: var(--accent); text-decoration: underline; }
.daftar-isi.collapsed ol { display: none; }

/* Card header row */
.card-header-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.card-header-row .card-title { flex:1; margin:0; }

/* ══ HEADER ADS ══ */
.header-ads-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Desktop: rata kanan */
  width: 100%;
  line-height: 0;
}
.header-ads-wrap img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}
.header-ads-wrap a { display: block; line-height: 0; }
.header-ads-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 90px;
  border: 2px dashed var(--border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--gray);
  background: var(--light);
  padding: 0 20px;
  text-align: center;
}
.header-ads-placeholder a { color: var(--primary); font-weight: 700; }

/* Mobile: ads full width, rata kiri */
@media (max-width: 768px) {
  .header-ads-wrap { justify-content: flex-start; }
  .header-ads-wrap img { width: 100%; }
}