/* ===== Grid produk (dipakai di listing /produk, halaman kategori, dan
   section "Produk Terkait" di halaman detail) ===== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

@media (max-width: 640px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

.product-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.product-card-image {
  flex-shrink: 0;
  position: relative;
  aspect-ratio: 1 / 1;
  background: #f3f1ea;
  overflow: hidden;
}

.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  background: #d64545;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.product-badge--lg {
  top: 12px;
  left: 12px;
  font-size: 0.85rem;
  padding: 6px 12px;
}

.product-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 14px 16px 18px;
}

@media (max-width: 640px) {
  .product-card-body {
    padding: 10px 12px 14px;
  }
}

.product-card-body h2,
.product-info h1 {
  font-family: "Plus Jakarta Sans", -apple-system, sans-serif;
}

.product-card-body h2 {
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .product-card-body h2 {
    font-size: 0.8rem;
    line-height: 1.3;
  }
}

.product-short-desc {
  font-size: 0.85rem;
  color: var(--gray, #6b6b63);
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 640px) {
  .product-short-desc {
    display: none;
  }
}

.product-price-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.product-price {
  font-weight: 700;
  font-size: 1.05rem;
  color: #0a7a38;
}

@media (max-width: 640px) {
  .product-price {
    font-size: 0.88rem;
  }
}

.product-price-original {
  font-size: 0.82rem;
  color: #9c9c92;
  text-decoration: line-through;
}

@media (max-width: 640px) {
  .product-price-original {
    font-size: 0.7rem;
  }
}

.product-price-row--lg .product-price {
  font-size: 1.7rem;
}

.product-price-row--lg .product-price-original {
  font-size: 1.05rem;
}

/* Rating & terjual */
.product-rating-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  margin-top: 6px;
}

.product-rating-row span {
  color: #8b8b83;
}

.product-rating-row .product-star {
  color: #ffc107 !important;
}

.product-rating-row--card {
  margin-top: 6px;
  font-size: 0.78rem;
}

.product-star {
  font-size: 1em;
}

.product-rating-sep {
  opacity: 0.6;
}

/* Kategori (badge kecil di grid card, kalau dipakai) */
.product-category {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray, #6b6b63);
}

.category-breadcrumb {
  font-size: 0.85rem;
  color: var(--gray, #6b6b63);
  margin-bottom: 6px;
}

.category-breadcrumb a {
  color: inherit;
  text-decoration: underline;
}

/* Breadcrumb di atas halaman detail produk (ala Tokopedia): Beranda >
   kategori > nama produk. Item terakhir (nama produk) di-truncate pakai
   ellipsis kalau kepanjangan, item lain (Beranda, kategori, separator)
   gak boleh menyusut biar breadcrumb tetep satu baris.
   Jarak dari navbar di atas dikasih lewat padding-top di .product-page
   (bukan margin-top di sini - lihat alasannya di komentar .product-page). */
.product-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--gray, #6b6b65);
  margin: 0 0 18px;
  overflow: hidden;
}

.product-breadcrumb-link {
  color: var(--gray, #6b6b65);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.product-breadcrumb-link:hover {
  color: var(--green, #10994c);
  text-decoration: underline;
}

.product-breadcrumb-sep {
  flex-shrink: 0;
  opacity: 0.6;
}

.product-breadcrumb-current {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--gray, #6b6b65);
}

@media (max-width: 640px) {
  .product-breadcrumb {
    font-size: 0.8rem;
    padding: 0 2px;
    display: none;
  }
}

/* ===== Halaman detail produk (ala Tokopedia) ===== */
/* Di desktop, card ini "ngebungkus" konten (gambar + info) jadi satu
   kartu putih rounded + shadow, ngambang di atas backdrop abu-biru
   .product-page - sama pola desain kayak .section-card di Beranda
   (var(--radius-l) + var(--shadow-soft)). Sekarang breadcrumb ada di
   atas card ini (di luar, langsung di atas backdrop abu-biru), jadi
   card gak perlu lagi nempel ke navbar. Di mobile, block max-width:640px
   di bawah nge-override ini lagi jadi transparan + edge-to-edge
   (perilaku lama, gak diubah). */
.product-detail-card {
  background: #fff;
  border-radius: var(--radius-l, 22px);
  box-shadow: var(--shadow-soft, 0 2px 14px rgba(28, 28, 26, 0.07));
  padding: 28px;
  margin-bottom: 24px;
}

@media (max-width: 640px) {
  .product-detail-card {
    /* Di mobile: hilangin "bungkus" card putihnya, biar gambar utama
       nempel sampe pinggir layar kayak tampilan Tokopedia. Kartu ini
       ada di dalam .container yang punya padding 20px kiri-kanan,
       jadi negative margin -20px + width kompensasi buat "ngebocorin"
       kontennya sampe tepi layar. */
    background: transparent;
    padding: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px);
    margin-bottom: 24px;
  }

  /* Gambar utama & thumbnail masih bagian dari .product-gallery yang
     sekarang full-bleed, jadi thumbnail & info produk perlu bungkus
     putih sendiri (background var(--white) full-bleed) biar konsisten
     sama "Produk Pilihan Lainnya"/"Best Seller" di bawahnya - bukan
     ngambang polos di atas background abu-biru .product-page. Cuma
     gambar utama yang dibiarin nempel edge-to-edge tanpa bungkus. */
  .product-gallery-thumbs-wrap,
  .product-info {
    background: #fff;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
  }

  .product-gallery-thumbs-wrap {
    padding-top: 14px;
    padding-bottom: 12px;
  }

  .product-info {
    padding-top: 6px;
    padding-bottom: 24px;
    margin-bottom: 10px;
  }
}

.product-detail-top {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 40px;
}

@media (max-width: 900px) {
  .product-detail-top {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Di HP, gambar utama, carousel thumbnail, & nama produk harus keliatan
   nyatu jadi satu blok putih (kayak Tokopedia/Shopee) - bukan kepisah-pisah
   sama celah abu-biru punya .product-page yang nyelip di antaranya. Gap grid
   antara kolom galeri & kolom info di-nolin (asalnya 20px dari rule 900px di
   atas, itu yang bikin ada strip abu-biru sebelum nama produk). Sengaja
   dipisah dari media query .product-detail-card di atas biar gampang dibaca
   alasannya, & taro di sini karena .product-detail-top belum ke-declare pas
   media query itu jalan.
   (Fix strip abu-biru ANTARA foto utama & carousel thumbnail ada di rule
   .product-gallery-thumbs-wrap di bawah - margin-top-nya sekarang mobile-
   first (0 by default, 10px cuma di desktop) biar gak ketiban lagi sama
   rule polos yang lokasinya lebih akhir di file kayak sebelumnya.) */
@media (max-width: 640px) {
  .product-detail-top {
    gap: 0;
  }
}

/* Galeri (kolom kiri) */
.product-gallery {
  align-self: start;
  /* PENTING: grid item defaultnya min-width:auto, artinya dia gak mau
     menyusut lebih kecil dari lebar konten di dalamnya (baris
     thumbnail). Kalau produknya punya banyak foto, itu narik lebar
     kolom ini sampe lebih lebar dari layar HP dan bikin seluruh
     halaman overflow horizontal. min-width:0 nge-fix itu. */
  min-width: 0;
}

@media (min-width: 901px) {
  .product-gallery {
    position: sticky;
    top: 20px;
  }
}

.product-gallery-main {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f3f1ea;
}

/* Track gambar utama: scroll-snap horizontal, native touch-swipe di HP */
.product-gallery-main-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.product-gallery-main-track::-webkit-scrollbar {
  display: none;
}
.product-gallery-main-item {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Sudut membulat cuma dipakai di desktop, di mana gambar masih ada di
   dalam .product-detail-card yang berbentuk kartu. Di mobile gambar ini
   nempel edge-to-edge (lihat override .product-detail-card di atas),
   jadi sudut membulat sengaja dihilangin - sebelumnya rule ini gak
   pakai media query & ke-declare belakangan, jadi malah nimpa balik
   override "border-radius: 0" punya mobile. */
@media (min-width: 641px) {
  .product-gallery-main {
    border-radius: 14px;
  }
}

.product-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-gallery-thumbs-wrap {
  position: relative;
  margin-top: 0;
}

@media (min-width: 641px) {
  .product-gallery-thumbs-wrap {
    margin-top: 10px;
  }
}

.product-gallery-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scroll-behavior: smooth;
  /* Sembunyiin scrollbar bawaan browser, navigasi pake tombol panah */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.product-gallery-thumbs::-webkit-scrollbar {
  display: none;
}

.gallery-thumb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  color: #0a7a38;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}

.gallery-thumb-arrow svg {
  width: 15px;
  height: 15px;
}

.gallery-thumb-arrow--prev {
  left: -10px;
}

.gallery-thumb-arrow--next {
  right: -10px;
}

@media (max-width: 640px) {
  .gallery-thumb-arrow {
    width: 24px;
    height: 24px;
  }

  .gallery-thumb-arrow svg {
    width: 13px;
    height: 13px;
  }

  .gallery-thumb-arrow--prev {
    left: -6px;
  }

  .gallery-thumb-arrow--next {
    right: -6px;
  }
}

.product-gallery-thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  border: none;
  padding: 0;
  cursor: pointer;
  background: #f3f1ea;
}

.product-gallery-thumb.is-active {
  outline: 2px solid #0a7a38;
  outline-offset: -2px;
}

.product-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Info (kolom kanan) */
.product-category-line {
  font-size: 0.85rem;
  color: var(--gray, #6b6b63);
  margin: 16px 0 0;
}

.product-category-link {
  color: #0a7a38;
  text-decoration: none;
  font-weight: 600;
}

.product-category-link:hover {
  opacity: 0.75;
}

.product-info h1 {
  font-size: 1.5rem;
  line-height: 1.35;
  margin: 0 0 10px;
}

@media (max-width: 640px) {
  .product-info h1 {
    font-size: 1.2rem;
  }
}

.product-divider {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin: 20px 0;
}

.product-detail-heading {
  font-family: "Plus Jakarta Sans", -apple-system, sans-serif;
  font-size: 1.1rem;
  margin: 0 0 10px;
}

.product-excerpt {
  font-size: 0.98rem;
  color: var(--gray, #6b6b63);
  margin: 0 0 14px;
}

.product-content {
  line-height: 1.7;
  text-align: left;
}

.product-content img {
  max-width: 100%;
  border-radius: 10px;
}

/* Konten deskripsi produk ditulis pakai Quill editor di admin, dan kadang
   ke-paste dengan inline style (background-color putih, dsb) dari sumber
   luar. Biar gak muncul kotak putih di tengah teks, paksa transparent &
   ikutin warna teks normal halaman. */
.product-content [style] {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
}

/* Section "Produk Pilihan Lainnya" & "Best Seller" (full-width, di bawah
   card detail). PENTING: pakai class .product-suggest-heading (bukan
   selector turunan ".product-suggest-section h2"), soalnya selector
   turunan bakal ikut kena ke <h2> judul tiap kartu produk di dalamnya
   juga (itu penyebab font judul kartu di section ini kelihatan beda
   sama yang di halaman /produk). */
/* Halaman detail produk: kasih backdrop biru-abu muda biar card putih
   (product-detail-card & product-suggest-section) keliatan "ngambang"
   di atasnya, bukan nyatu sama background krem biasa. */
.product-page {
  background: #f0f4f7;
  /* Konten halaman detail produk dilebarin dikit (asalnya 1120px) biar
     sisi kiri-kanan gak terlalu kosong di layar lebar. .container di
     dalemnya otomatis ngikutin lewat var(--container). */
  --container: 1200px;
  /* Sekarang breadcrumb ada di paling atas section ini, jadi butuh jarak
     dari navbar - dikasih lewat padding-top di sini (BUKAN margin-top di
     .product-breadcrumb), soalnya margin-top pada first-child bakal
     "collapse" nembus section ini & .container (keduanya gak punya
     padding/border yang nahan), jatohnya jadi margin di ATAS section
     ini - background abu-biru section jadi kepotong & background cream
     punya <body> nongol jadi strip belang di antara navbar & breadcrumb.
     Padding gak collapse, jadi aman. Padding bawah dibiarin biar section
     "Produk Pilihan Lainnya"/"Best Seller" di bawahnya tetep ada jarak
     sebelum footer. */
  padding-top: 20px;
}

@media (max-width: 640px) {
  /* Breadcrumb disembunyiin di mobile (lihat rule display:none di atas),
     jadi gambar produk balik nempel navbar tanpa jarak lagi - sama
     kayak sebelum breadcrumb ditambahin. Sengaja ditaruh SETELAH rule
     dasar .product-page di atas (bukan digabung ke media query yang
     lebih awal di file), biar override-nya menang cascade. Desktop
     tetep 20px karena breadcrumb-nya masih tampil di sana. */
  .product-page { padding-top: 0; }
}

/* Divider full-bleed (ala Tokopedia) yang misahin tiap section. Section-nya
   sendiri PUTIH (bukan kartu abu-abu), yang beda warna itu si gap/celah di
   antara section (background #f0f4f7 dari .product-page di atas). Bleed
   pake trik calc(50% - 50vw) biar bener-bener nempel ke tepi viewport
   (bukan cuma ke tepi .container), jalan di mobile maupun desktop.
   Padding kiri-kanan disesuaikan biar konten di dalemnya (heading, kartu
   produk) tetep sejajar sama konten lain yang dibatasin .container. */
/* UPDATE: di desktop, section-section ini (Jaminan Toko, Produk Pilihan
   Lainnya, Best Seller) sekarang dibungkus jadi kartu putih rounded +
   shadow, persis kayak .product-detail-card (ngambang di atas backdrop
   abu-biru, gak nempel ke tepi layar). Versi full-bleed (Tokopedia style)
   cuma dipakai di mobile, sama kayak detail produk di mobile. */
.product-suggest-section {
  background: #fff;
  border: none;
  border-radius: var(--radius-l, 22px);
  box-shadow: var(--shadow-soft, 0 2px 14px rgba(28, 28, 26, 0.07));
  margin: 0 0 24px;
  padding: 24px 28px 26px;
}

@media (max-width: 640px) {
  .product-suggest-section {
    border-radius: 0;
    box-shadow: none;
    margin: 0 calc(50% - 50vw) 10px;
    width: 100vw;
    padding: 20px 20px 22px;
  }
}

.product-suggest-heading {
  font-family: "Plus Jakarta Sans", -apple-system, sans-serif;
  font-size: 1.2rem;
  margin: 0 0 16px;
}

/* Baris kartu produk yang bisa discroll horizontal, dipakai buat
   "Produk Pilihan Lainnya" & "Best Seller". Kartu di dalamnya tetap
   pakai class .product-card / .product-card-body h2 yang sama persis
   dengan grid di /produk, jadi ukuran font & stylingnya konsisten. */
.product-scroll-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* Kartu di "Produk Pilihan Lainnya" & "Best Seller" sengaja dibikin flat
   (tanpa border/shadow di kartunya) biar antar produk gak keliatan "kepisah"
   kayak kartu individual, tapi ngeblend jadi satu deretan katalog. Gambar
   produknya sendiri dikasih round corner dikit (lihat .product-card-image
   di bawah) biar gak kaku. */
.product-card--scroll {
  flex: 0 0 200px;
  scroll-snap-align: start;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.product-card--scroll:hover {
  transform: none;
  box-shadow: none;
}

.product-card--scroll .product-card-image {
  border-radius: 8px;
}

/* "Nama produk" di kartu carousel ini dikasih jarak tipis (8px) dari
   gambar di atasnya, dan tetap nempel sama harga di bawahnya (gak ada
   jarak di bawah nama) - biar keliatan satu kesatuan tapi gak sesak. */
.product-card--scroll .product-card-body {
  padding-top: 8px;
}

.product-card--scroll .product-card-body h2 {
  margin: 0;
}

@media (max-width: 640px) {
  .product-card--scroll {
    flex-basis: 150px;
  }
}


/* Pesan "produk gak ketemu" buat filter search (search bar-nya sendiri
   pakai .header-search-bar di navbar, bukan bar terpisah di halaman). */
.product-search-empty {
  font-size: 0.9rem;
  color: var(--gray, #6b6b63);
  padding: 20px 0;
  display: none;
}

/* ===== Search bar produk di navbar =====
   Style-nya sekarang udah pindah & jadi global di style.src.css
   (.header-search-bar / .header-search-input dipakai di semua halaman,
   bukan cuma section Produk) - jadi di sini ga perlu di-override lagi. */

/* ===== Section grid listing utama "/produk" ===== */
/* Sama kayak .product-suggest-section (Produk Pilihan Lainnya & Best
   Seller): full-bleed putih nempel ke tepi viewport (trik
   calc(50% - 50vw)), biar section ini konsisten sama section-section
   lain & gak ada gap kiri-kanan antara background putihnya sama tepi
   layar — baik di desktop maupun mobile. Bedanya section ini masih
   ngebungkus .container di dalemnya (bukan self-padded kayak
   .product-suggest-section), jadi .container yang otomatis ngatur
   center + inset kontennya, gak perlu itung padding manual. */
.product-listing-section {
  background: #fff;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  padding: 28px 0 44px;
}

@media (max-width: 640px) {
  .product-listing-section {
    padding: 16px 0 32px;
  }
}

/* ===== Strip kepercayaan di bawah galeri (Bisa COD / Gratis Ongkir /
   Bersertifikat) & kartu "Pengiriman Cepat" di bawah harga. Icon: Lucide. ===== */
.product-trust,
.product-shipping {
  background: #eefaf2;
  border: 1px solid #c9efd6;
  border-radius: 16px;
}

.product-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 12px 8px;
}

/* Pembungkus strip: di desktop cuma ngasih jarak dari thumbnail. Di mobile
   dia jadi blok putih full-bleed, sama kayak .product-gallery-thumbs-wrap &
   .product-info, supaya gak ada celah warna latar di antara keduanya. */
.product-trust-wrap {
  margin-top: 14px;
}

@media (max-width: 640px) {
  .product-trust-wrap {
    background: #fff;
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    box-sizing: border-box;
    padding: 0 20px 14px;
  }
}

.product-trust-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}

.product-trust-item svg,
.product-shipping svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--green, #10994c);
}

.product-trust-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.product-trust-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--charcoal, #1c1c1a);
}

.product-trust-sub {
  font-size: 0.7rem;
  color: var(--gray, #6b6b63);
}

@media (max-width: 520px) {
  .product-trust {
    gap: 4px;
    padding: 12px 6px;
  }
  .product-trust-item {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }
  .product-trust-text { align-items: center; }
  .product-trust-title { font-size: 0.76rem; }
  .product-trust-sub { font-size: 0.66rem; }
}

.product-shipping {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 16px 0 0;
  padding: 12px 14px;
}

.product-shipping svg { margin-top: 1px; }

.product-shipping-title {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--charcoal, #1c1c1a);
}

.product-shipping-sub {
  margin: 2px 0 0;
  font-size: 0.86rem;
  color: var(--gray, #6b6b63);
}

.product-shipping-link {
  color: #0a7a38;
  text-decoration: none;
  font-weight: 600;
}

.product-shipping-link:hover { color: var(--green-dark, #0a7a38); }

/* ===== Halaman Produk: sidebar filter (kategori + rentang harga) & urutkan ===== */
.product-listing-layout {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.product-filter {
  position: sticky;
  top: 76px; /* di bawah topbar yang sticky */
  padding: 20px;
  background: var(--cream, #f7f6f3);
  border: 1px solid var(--gray-line, #e5e3dd);
  border-radius: 18px;
}

.product-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.product-filter-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray, #6b6b65);
}

.product-filter-reset {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--green, #10994c);
  cursor: pointer;
}
.product-filter-reset:hover { text-decoration: underline; text-underline-offset: 3px; }

.product-filter-group { margin-bottom: 22px; }

.product-filter-label {
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-dark, #0a7a38);
}

/* Ukuran sidebar filter dikunci - list Kategori dikasih tinggi maksimal +
   scroll sendiri di dalamnya, biar makin banyak kategori gak bikin
   sidebar manjang ke bawah (dan ganggu posisi Rentang Harga/tombol
   Terapkan Filter di bawahnya). */
.product-filter-cats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
}

.product-filter-cat {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--gray-line, #e5e3dd);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--charcoal, #1c1c1a);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.product-filter-cat:hover { border-color: var(--green, #10994c); }
.product-filter-cat.is-active {
  background: var(--green-light, #e3f7ea);
  border-color: var(--green, #10994c);
  color: var(--green-dark, #0a7a38);
  font-weight: 700;
}

.product-filter-price {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 0 14px;
  border: 1px solid var(--gray-line, #e5e3dd);
  border-radius: 12px;
  background: #fff;
}
.product-filter-price:focus-within { border-color: var(--green, #10994c); }
.product-filter-price span { font-size: 0.9rem; font-weight: 700; color: var(--gray, #6b6b65); }
.product-filter-price input {
  flex: 1;
  min-width: 0;
  padding: 11px 0;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 0.92rem;
  color: var(--charcoal, #1c1c1a);
}

.product-filter-apply { width: 100%; text-transform: uppercase; letter-spacing: 0.02em; }

.product-listing-main { min-width: 0; }

.product-sortbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 12px 14px;
  background: var(--cream, #f7f6f3);
  border-radius: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.product-sortbar::-webkit-scrollbar { display: none; }

.product-sortbar-label {
  flex-shrink: 0;
  margin-right: 4px;
  font-size: 0.92rem;
  color: var(--gray, #6b6b65);
}

.product-sort {
  flex-shrink: 0;
  padding: 9px 18px;
  border: 1px solid var(--gray-line, #e5e3dd);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--charcoal, #1c1c1a);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.product-sort:hover { border-color: var(--green, #10994c); }
.product-sort.is-active {
  background: var(--green, #10994c);
  border-color: var(--green, #10994c);
  color: #fff;
  font-weight: 700;
}

/* Tombol buka/tutup panel filter: cuma di mobile & tablet */
.product-filter-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px 16px;
  border: 1px solid var(--gray-line, #e5e3dd);
  border-radius: 12px;
  background: var(--cream, #f7f6f3);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--green-dark, #0a7a38);
  cursor: pointer;
}
.product-filter-toggle svg { width: 18px; height: 18px; }
.product-filter-toggle[aria-expanded="true"] { background: var(--green-light, #e3f7ea); border-color: var(--green, #10994c); }

/* Aksi di kanan header filter (Reset + tombol tutup). Tombol tutup cuma
   muncul pas filter jadi modal (mobile/tablet). */
.product-filter-actions { display: flex; align-items: center; gap: 12px; }
.product-filter-close { display: none; }
.product-filter-backdrop { display: none; }

/* Mobile & tablet (900px ke bawah): panel filter jadi MODAL pop-up di tengah
   layar, dengan latar gelap di belakangnya. z-index di atas bar WhatsApp
   yang fixed (z-index 50) & topbar. */
@media (max-width: 900px) {
  .product-listing-layout { grid-template-columns: 1fr; gap: 0; }
  .product-filter-toggle { display: inline-flex; }

  .product-filter-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(20, 26, 22, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }
  .product-filter-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0s;
  }

  .product-filter {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 71;
    width: min(400px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border: none;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -48%) scale(0.97);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .product-filter.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
  }

  .product-filter-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--cream, #f7f6f3);
    color: var(--charcoal, #1c1c1a);
    cursor: pointer;
  }
  .product-filter-close svg { width: 18px; height: 18px; }

  /* Lock scroll halaman di belakang modal */
  body.filter-modal-open { overflow: hidden; }
}

@media (max-width: 640px) {
  .product-sortbar { margin-bottom: 14px; padding: 10px 12px; }
  .product-sortbar-label { display: none; }
  .product-sort { padding: 8px 14px; font-size: 0.85rem; }
}

/* ===== Kartu di "Produk Pilihan Lainnya" & "Best Seller" (.product-card--scroll) =====
   Teks dibikin lebih gede & jarak teks ke tepi kiri-kanan kartu dirapetin
   (biar lega kayak katalog marketplace). Scoped ke kartu carousel ini aja,
   jadi grid /produk & halaman kategori tetap pakai ukuran default. */
.product-card--scroll .product-card-body {
  padding-left: 6px;
  padding-right: 6px;
}

@media (max-width: 640px) {
  .product-card--scroll .product-card-body {
    padding-left: 4px;
    padding-right: 4px;
  }
  .product-card--scroll .product-card-body h2 {
    font-size: 0.82rem;
    line-height: 1.32;
  }
  .product-card--scroll .product-price {
    font-size: 1rem;
  }
  .product-card--scroll .product-price-original {
    font-size: 0.78rem;
  }
  .product-card--scroll .product-rating-row--card {
    font-size: 0.84rem;
  }
}

/* ===== Halaman /produk: 1 baris = 4 produk (desktop) =====
   Sidebar filter makan ~264px, jadi grid di sebelah kanannya dibagi
   4 kolom mulai lebar layar 1100px. Di bawah itu 3 kolom, di mobile tetap
   2 kolom (aturan .product-grid di atas). Ukuran teks kartu dikecilin
   dikit di 4 kolom karena kartunya lebih sempit. */
@media (min-width: 641px) {
  .product-listing-main .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (min-width: 1100px) {
  .product-listing-main .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .product-listing-main .product-card-body {
    padding: 12px 12px 14px;
  }
  .product-listing-main .product-price {
    font-size: 0.98rem;
  }
  .product-listing-main .product-price-original {
    font-size: 0.76rem;
  }
  .product-listing-main .product-rating-row--card {
    font-size: 0.74rem;
  }
}

/* ===== Sidebar Filter Produk: versi lebih ringkas di desktop (901px+) =====
   Lebih sempit, padding & teks lebih kecil. Di mobile/tablet (panel yang
   dibuka lewat tombol "Filter Produk") ukurannya tetap yang lebih besar
   biar gampang disentuh. */
@media (min-width: 901px) {
  .product-listing-layout {
    grid-template-columns: 228px minmax(0, 1fr);
    gap: 24px;
  }
  .product-filter {
    padding: 16px;
    border-radius: 16px;
  }
  .product-filter-head { margin-bottom: 14px; }
  .product-filter-title {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
  }
  .product-filter-reset { font-size: 0.78rem; }
  .product-filter-group { margin-bottom: 16px; }
  .product-filter-label {
    margin-bottom: 8px;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
  }
  .product-filter-cats { gap: 6px; }
  .product-filter-cat {
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.82rem;
  }
  .product-filter-price {
    gap: 8px;
    margin-bottom: 6px;
    padding: 0 12px;
    border-radius: 10px;
  }
  .product-filter-price span { font-size: 0.8rem; }
  .product-filter-price input {
    padding: 8px 0;
    font-size: 0.82rem;
  }
  .product-filter-apply {
    padding: 10px 14px;
    font-size: 0.78rem;
  }
}

/* ============================================================
   PREVIEW/ZOOM GAMBAR PRODUK (lightbox)
   ------------------------------------------------------------
   Logic buka/tutup, zoom (scroll/pinch), pan (drag/geser) ada di
   <script> product.ejs. Z-index sengaja di atas cart-drawer (91)
   biar lightbox selalu di paling depan.
   ============================================================ */
.lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(10, 14, 12, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.lightbox-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0s;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 121;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.2s ease, visibility 0s;
}

body.lightbox-open { overflow: hidden; }

.lightbox-stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Biar browser gak ikut nanganin pinch/scroll bawaan - pinch & pan
     ditangani manual lewat JS supaya bisa dikontrol (batas zoom, dll). */
  touch-action: none;
}
.lightbox-stage img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  cursor: grab;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox-stage img:active { cursor: grabbing; }

.lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
}
.lightbox-close svg { width: 20px; height: 20px; }
.lightbox-close:hover { background: rgba(255, 255, 255, 0.25); }

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
}
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.25); }
.lightbox-nav svg { width: 22px; height: 22px; }
.lightbox-nav--prev { left: 12px; }
.lightbox-nav--next { right: 12px; }

.lightbox-zoom-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 10px;
}
.lightbox-zoom-controls button {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox-zoom-controls button:hover { background: rgba(255, 255, 255, 0.25); }

@media (max-width: 640px) {
  .lightbox-close { top: calc(12px + env(safe-area-inset-top)); }
  .lightbox-nav { width: 38px; height: 38px; }
  .lightbox-nav--prev { left: 8px; }
  .lightbox-nav--next { right: 8px; }
}

/* ===== Jaminan Toko: 3 kartu jaminan di bawah detail produk, sebelum
   "Produk Pilihan Lainnya". Bungkusnya pakai .product-suggest-section
   (full-bleed putih), jadi cuma isi grid-nya yang diatur di sini. Icon: Lucide. ===== */
.product-assurance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.product-assurance-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--gray-line, #e5e3dd);
  border-radius: 16px;
}

.product-assurance-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--green-light, #e3f7ea);
  color: var(--green, #10994c);
}

.product-assurance-icon svg {
  width: 22px;
  height: 22px;
}

.product-assurance-title {
  margin: 0 0 4px;
  font-family: "Plus Jakarta Sans", -apple-system, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--charcoal, #1c1c1a);
}

.product-assurance-desc {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--gray, #6b6b63);
}

@media (max-width: 640px) {
  .product-assurance-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .product-assurance-item {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
  }
}