/* ===== 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: block;
  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 {
  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 {
  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: 1.02rem;
  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.7rem;
    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: #2e5339;
}

@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;
}

/* ===== Halaman detail produk (ala Tokopedia) ===== */
/* Di desktop, card ini sekarang ngikutin pola full-bleed putih yang
   sama kayak .product-suggest-section di bawahnya (nempel ke tepi
   viewport, konten di dalemnya tetep align sama .container) - biar
   gak ada gap kiri-kanan tambahan & gak ada sudut membulat/border kartu
   yang bikin dia keliatan "ngambang" terpisah dari section lain. 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;
  margin: 0 calc(50% - 50vw) 10px;
  width: 100vw;
  padding-top: 28px;
  padding-bottom: 28px;
  padding-left: max(20px, calc((100vw - var(--container, 1120px)) / 2 + 20px));
  padding-right: max(20px, calc((100vw - var(--container, 1120px)) / 2 + 20px));
  border-radius: 0;
  border: none;
  box-shadow: none;
}

@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: #2e5339;
  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 #2e5339;
  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: 4px 0 0;
}

.product-category-link {
  color: #2e5339;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  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-wa-btn {
  margin: 18px 0 20px;
}

.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;
  /* Biar gambar produk nempel langsung di bawah navbar, gak ada jarak
     kosong di atasnya (.section bawaan punya padding-top 56px). Padding
     bawah dibiarin biar section "Produk Pilihan Lainnya"/"Best Seller"
     di bawahnya tetep ada jarak sebelum footer. */
  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. */
.product-suggest-section {
  background: #fff;
  border-radius: 0;
  border: none;
  box-shadow: none;
  margin: 0 calc(50% - 50vw) 10px;
  width: 100vw;
  padding-top: 20px;
  padding-bottom: 22px;
  padding-left: max(20px, calc((100vw - var(--container, 1120px)) / 2 + 20px));
  padding-right: max(20px, calc((100vw - var(--container, 1120px)) / 2 + 20px));
}

.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/radius/shadow) biar antar produk gak keliatan "kepisah"
   kayak kartu individual, tapi ngeblend jadi satu deretan katalog. */
.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: 0;
}

/* "Nama produk" di kartu carousel ini sengaja dibikin nempel/nyatu
   langsung sama gambar di atasnya (gak ada jarak di atas nama) dan
   sama harga di bawahnya (gak ada jarak di bawah nama) - biar keliatan
   satu kesatuan, bukan gambar-teks yang kepisah jarak. */
.product-card--scroll .product-card-body {
  padding-top: 0;
}

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

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


/* Search bar produk/keluhan (dipakai di halaman kategori, nempel di atas
   grid produk dalam kategori itu). Sticky di bawah navbar pas discroll,
   background ijo biar nyambung visual sama navbar di atasnya. */
.product-search-bar {
  position: sticky;
  top: var(--header-h, 60px);
  z-index: 20;
  background: var(--green, #2d6a4f);
  padding: 14px 0;
  margin-bottom: 0;
}

.product-search-input {
  width: 100%;
  max-width: 420px;
  padding: 11px 16px 11px 40px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 0.92rem;
  font-family: "Plus Jakarta Sans", -apple-system, sans-serif;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b65' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat 14px center;
  background-size: 16px;
}

.product-search-input:focus {
  outline: none;
  border-color: #2e5339;
}

.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;
  }
}