/* ==========================================================================
   KATALOG — bagian "Produk Kami" (beranda) & halaman /produk

   Dimuat PALING AKHIR di layouts/app.blade.php, sesudah site.css dan
   produk-grid.css, supaya aturan di sini yang berlaku tanpa perlu !important.
   site.css tidak diubah sama sekali.

   Gagasannya: rak toko, bukan daftar.

   Sebelumnya tiap kartu diawali blok gradasi hijau/cokelat pekat. Foto produk
   kebanyakan berlatar putih, jadi foto itu tampak seperti kertas putih yang
   ditempel di atas blok gelap — dan satu halaman penuh blok gelap membuat
   katalognya terasa kaku. Sekarang alas foto memakai warna kertas hangat
   dengan cahaya lembut dari atas dan bayangan tipis di bawah produk, sehingga
   produknya terbaca seperti benda yang ditaruh di rak.

   Alas gelap TETAP dipakai untuk produk yang belum punya foto, karena lambang
   kemasan (SVG) memang butuh latar gelap agar terlihat.
   ========================================================================== */

/* ============ 1. KEPALA BAGIAN ============ */

/* Judul dua baris sebelumnya memakai <br> lalu tetap membelah lagi secara
   alami, jadi muncul tiga baris dengan jarak renggang. Sekarang pembelahannya
   diserahkan ke browser dan jarak barisnya dirapatkan. */
.katalog-head{ max-width:none; margin-bottom:1.75rem; }
.katalog-head h2{ line-height:1.14; max-width:30ch; text-wrap:balance; }
.katalog-head p{ max-width:56ch; }

/* Halaman /produk punya kepala sendiri: ini halaman tujuan, bukan satu
   bagian di tengah beranda. */
.katalog-sampul{
  background:
    radial-gradient(120% 140% at 85% -20%, rgba(184,135,59,.16), transparent 60%),
    var(--parchment-100);
  border-bottom:1px solid var(--parchment-200);
  padding:2.75rem 0 2.5rem;
}
.katalog-remah{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em;
  color:var(--char-500); margin-bottom:.9rem;
}
.katalog-remah a{ color:var(--char-500); text-decoration:none; }
.katalog-remah a:hover{ color:var(--soil-600); text-decoration:underline; }
/* Judul dan kalimat pengantar berdampingan pada layar lebar. Kalau ditumpuk,
   sisi kanan pita ini kosong melompong. */
.katalog-sampul-isi{ display:grid; gap:.7rem 3rem; align-items:end; }
@media (min-width:900px){
  .katalog-sampul-isi{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); }
}
.katalog-sampul h1{
  font-size:clamp(1.8rem,3.4vw,2.6rem); color:var(--char-900);
  line-height:1.14; max-width:24ch; text-wrap:balance; margin:0;
}
.katalog-sampul p{ color:var(--char-700); font-size:1rem; max-width:46ch; margin:0; }

/* ============ 2. BARIS PENYARING ============ */

/* Dulu tiga kendali melayang tanpa wadah: kotak cari melebar penuh dan daftar
   proses terlempar ke ujung kanan. Sekarang semuanya dalam satu panel. */
.katalog-bar{
  background:var(--parchment-50); border:1px solid var(--parchment-200);
  border-radius:14px; padding:.85rem .9rem; margin-bottom:1.75rem;
  box-shadow:0 1px 2px rgba(33,28,22,.04);
}

/* nowrap penting: .varian-kategori-tabs di site.css memakai flex-wrap:wrap,
   sehingga di layar sempit tabnya menumpuk jadi tiga baris. Di sini tabnya
   digeser ke samping saja. */
.katalog-tabs{
  display:flex; flex-wrap:nowrap; gap:.45rem;
  overflow-x:auto; scrollbar-width:none;
  padding-bottom:.1rem; margin:0;
  -webkit-overflow-scrolling:touch;
}
.katalog-tabs::-webkit-scrollbar{ display:none; }
.katalog-bar .varian-kategori-tab{
  flex:0 0 auto; font-size:.82rem; padding:.48rem 1.05rem;
  border-width:1px; border-color:var(--parchment-200); background:transparent;
}
.katalog-bar .varian-kategori-tab:hover{
  border-color:var(--soil-500); color:var(--soil-600); background:var(--parchment-100);
}
.katalog-bar .varian-kategori-tab.active{
  background:var(--soil-600); border-color:var(--soil-600); color:#fff;
}

.katalog-pisah{ height:1px; background:var(--parchment-200); margin:.85rem 0; }

.katalog-cari{ display:flex; flex-wrap:wrap; gap:.6rem; margin:0; }

.katalog-kotak{ position:relative; flex:1 1 220px; min-width:0; }
.katalog-kotak svg{
  position:absolute; left:.8rem; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--char-500); pointer-events:none;
}
.katalog-kotak input{
  width:100%; box-sizing:border-box;
  border:1px solid var(--parchment-200); border-radius:10px;
  padding:.62rem .85rem .62rem 2.35rem;
  font-family:var(--font-body); font-size:.9rem; color:var(--char-900);
  background:var(--parchment-50); transition:border-color .15s ease, box-shadow .15s ease;
}
.katalog-kotak input::placeholder{ color:var(--char-500); }
.katalog-kotak input:focus{
  outline:none; border-color:var(--soil-500);
  box-shadow:0 0 0 3px rgba(154,77,48,.12);
}

.katalog-pilih{ position:relative; flex:0 0 auto; }
.katalog-pilih select{
  appearance:none; -webkit-appearance:none;
  border:1px solid var(--parchment-200); border-radius:10px;
  padding:.62rem 2.2rem .62rem .85rem;
  font-family:var(--font-body); font-size:.9rem; color:var(--char-900);
  background:var(--parchment-50); cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.katalog-pilih select:focus{
  outline:none; border-color:var(--soil-500);
  box-shadow:0 0 0 3px rgba(154,77,48,.12);
}
.katalog-pilih::after{
  content:""; position:absolute; right:.95rem; top:50%; width:7px; height:7px;
  border-right:1.5px solid var(--char-500); border-bottom:1.5px solid var(--char-500);
  transform:translateY(-70%) rotate(45deg); pointer-events:none;
}

.katalog-reset{
  flex:0 0 auto; align-self:stretch; display:inline-flex; align-items:center;
  border:1px solid var(--parchment-200); border-radius:10px; padding:0 1rem;
  font-size:.84rem; font-weight:600; color:var(--char-700);
  text-decoration:none; background:var(--parchment-50); transition:all .15s ease;
}
.katalog-reset:hover{ border-color:var(--soil-500); color:var(--soil-600); }

/* CATATAN: jangan menyembunyikan lewat display di sini. Skrip penyaring
   menampilkannya dengan style.display = '' (menghapus gaya sebaris), jadi
   nilai dari CSS inilah yang dipakai saat tampil. Keadaan awal "tersembunyi"
   diberikan oleh style="display:none" di markup-nya. */
.katalog-sibuk{ display:inline-flex; align-items:center; gap:.45rem; align-self:center;
  font-size:.82rem; color:var(--char-500); }
.katalog-sibuk::before{
  content:""; width:13px; height:13px; border-radius:50%;
  border:2px solid var(--parchment-200); border-top-color:var(--soil-600);
  animation:katalogPutar .6s linear infinite;
}
@keyframes katalogPutar{ to{ transform:rotate(360deg); } }

/* ============ 3. JUMLAH HASIL & KEADAAN KOSONG ============ */

.katalog-jumlah{
  font-family:var(--font-mono); font-size:.76rem; color:var(--char-500);
  margin:0 0 1rem;
}
.katalog-jumlah strong{ color:var(--char-900); font-weight:700; }

.katalog-kosong{
  border:1px dashed var(--parchment-200); border-radius:14px;
  background:var(--parchment-100); padding:2.75rem 1.5rem; text-align:center;
}
.katalog-kosong h3{ font-size:1.15rem; color:var(--char-900); margin:0 0 .45rem; }
.katalog-kosong p{ color:var(--char-700); font-size:.92rem; margin:0 auto 1.25rem; max-width:40ch; }

/* ============ 4. KARTU PRODUK ============ */

.product-grid{ gap:1.4rem; }

.product-card{
  background:var(--parchment-50);
  border:1px solid var(--parchment-200);
  border-radius:14px;
  padding:6px;                       /* bingkai tipis: foto tampak "dipasang" */
  box-shadow:none;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.product-card:hover{
  transform:translateY(-4px);
  border-color:rgba(184,135,59,.55);
  box-shadow:0 2px 6px rgba(33,28,22,.05), 0 16px 32px -14px rgba(33,28,22,.28);
}

/* --- Alas foto --- */
.product-visual{
  border-radius:10px; overflow:hidden;
  aspect-ratio:1/1; padding:0;
  display:block;                     /* isinya diposisikan mutlak */
}

/* Produk BERFOTO: alas terang yang menghangat ke bawah.
   Bagian atasnya sengaja nyaris putih. Foto produk umumnya berlatar putih,
   dan di atas alas krem foto seperti itu terbaca sebagai kotak putih yang
   ditempel. Dengan alas seterang ini, foto berlatar putih menyatu, sementara
   foto PNG berlatar tembus pandang tetap dapat alas bersih — dua-duanya
   ditopang bayangan tipis di bawahnya. */
.product-card.pk-foto .product-visual{
  background:linear-gradient(180deg, #ffffff 0%, #fffdf8 56%, #f7f1e4 100%);
}
/* Bayangan tipis sebagai alas pijakan produk. */
.product-card.pk-foto .product-visual::after{
  content:""; position:absolute; left:50%; bottom:11%; transform:translateX(-50%);
  width:58%; height:9%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(90,74,52,.26), rgba(90,74,52,0));
  z-index:1;
}
.product-card.pk-foto .product-visual img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; padding:6% 7% 11%; box-sizing:border-box;
  z-index:2; transition:transform .35s ease;
}
.product-card.pk-foto:hover .product-visual img{ transform:scale(1.045); }

/* Produk TANPA foto: alas gelap dipertahankan, lambang kemasan butuh kontras. */
.product-card.pk-lambang .product-visual{
  background:radial-gradient(circle at 30% 18%, var(--pv-a,#2c4f36), var(--pv-b,#12241a));
  display:flex; align-items:center; justify-content:center; padding:1.1rem;
}
.product-card.pk-lambang .product-visual .bag{ width:74%; margin:0; }

.product-tag{
  top:.6rem; left:.6rem; border-radius:999px;
  background:rgba(255,253,247,.94); color:var(--char-900);
  font-size:.58rem; letter-spacing:.07em; padding:.26rem .58rem;
  box-shadow:0 1px 3px rgba(33,28,22,.12);
  backdrop-filter:saturate(1.2) blur(2px);
}
.pk-potongan{                        /* label diskon, dulu gaya sebaris */
  position:absolute; top:.6rem; right:.6rem; z-index:3;
  font-family:var(--font-mono); font-weight:700; font-size:.6rem; letter-spacing:.04em;
  padding:.26rem .5rem; border-radius:999px; color:#fff; background:#c0392b;
  box-shadow:0 1px 3px rgba(33,28,22,.2);
}
.pk-potongan.kilat{ background:#f0b429; color:#2b1c0e; }

/* --- Isi kartu --- */
.product-body{ padding:1rem .85rem .9rem; gap:.5rem; }

.product-process{ font-size:.63rem; letter-spacing:.07em; }

.product-name{
  font-size:1.02rem; line-height:1.28; color:var(--char-900);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.product-card:hover .product-name{ color:var(--soil-600); }

/* Nama penjual hanya ditampilkan untuk produk MITRA. Pada produk HUN sendiri
   barisnya cuma mengulang nama tokonya di tiap kartu. */
.pk-mitra{
  display:inline-flex; align-items:center; gap:.3rem; align-self:flex-start;
  font-size:.66rem; color:var(--char-700);
  background:var(--parchment-100); border-radius:999px; padding:.2rem .55rem;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.product-notes{ font-size:.82rem; line-height:1.5; color:var(--char-500);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.pk-nilai{ display:flex; align-items:center; gap:.3rem; font-size:.7rem; color:var(--char-500); }
.pk-nilai b{ color:#b8873b; font-weight:700; letter-spacing:.02em; }

/* Keterangan jadi keping kecil, bukan baris bergaris putus-putus atas-bawah. */
.product-meta{
  display:flex; flex-wrap:wrap; gap:.35rem;
  border:none; padding:0; font-size:.66rem;
}
.product-meta span{
  background:var(--parchment-100); color:var(--char-700);
  border-radius:999px; padding:.22rem .55rem; white-space:nowrap;
}

/* Garis putus-putus tunggal seperti sobekan label harga. */
.product-foot{
  margin-top:auto; padding-top:.7rem; border-top:1px dashed var(--parchment-200);
  gap:.6rem; align-items:flex-end;
}

/* Harga tidak boleh patah di tengah angka — berlaku di SEMUA lebar layar,
   bukan cuma desktop seperti sebelumnya. */
.product-price{
  display:flex; flex-wrap:wrap; align-items:baseline; column-gap:.3rem; row-gap:.05rem;
  font-size:.98rem; color:var(--char-900); min-width:0;
}
.product-price > span{ white-space:nowrap; }
.product-price small{ flex-basis:100%; margin:0; }
.pk-coret{ text-decoration:line-through; font-weight:400; font-size:.78em; color:var(--char-500); }
.pk-turun{ color:#c0392b; }

.add-btn{
  width:38px; height:38px; border:1px solid var(--parchment-200);
  background:var(--parchment-100); color:var(--char-900);
}
.add-btn:hover{ background:var(--soil-600); border-color:var(--soil-600); color:#fff; transform:rotate(90deg); }

.pk-habis{
  font-size:.66rem; font-weight:700; color:#c0392b; white-space:nowrap;
  background:rgba(192,57,43,.08); border-radius:999px; padding:.3rem .6rem;
}

/* ---- Pemilih opsi di dalam kartu (panel member) ----
   Dipakai saat produk punya beberapa varian berharga beda. Tanpa ini pembeli
   menekan "+" dan varian utama masuk keranjang tanpa pernah ditanya. */
.pk-opsi{ display:block; margin-top:.5rem; }
.pk-opsi-judul{
  display:block; font-family:var(--font-mono); font-size:.58rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--char-500); margin-bottom:.22rem;
}
.pk-opsi select{
  width:100%; box-sizing:border-box; cursor:pointer;
  font-family:inherit; font-size:.76rem; font-weight:600; color:var(--char-900);
  background:var(--parchment-50); border:1px solid var(--parchment-200);
  border-radius:8px; padding:.4rem 1.6rem .4rem .55rem;
  /* Panah digambar sendiri supaya sama di semua peramban. */
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23786e5f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .55rem center; background-size:10px;
}
.pk-opsi select:focus{ outline:2px solid var(--forest-700); outline-offset:1px; }

/* Penanda bahwa angka besar di kartu ini sudah harga member. */
.pk-label-member{
  flex-basis:100%; font-family:var(--font-mono); font-size:.56rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:#0f8a68;
}

/* Opsi yang habis: tombol tambah dimatikan, bukan disembunyikan, supaya
   tinggi kartu tidak melompat saat opsi diganti. */
.add-btn[disabled]{
  opacity:.4; cursor:not-allowed;
}
.add-btn[disabled]:hover{
  background:var(--parchment-100); border-color:var(--parchment-200);
  color:var(--char-900); transform:none;
}

/* ============ 5. LAYAR KECIL ============ */

/* CATATAN: tidak ada animasi munculnya kartu secara bergelombang di sini.
   Sempat dicoba dengan transition-delay per kartu, tapi penundaan itu ikut
   terpakai saat kursor masuk dan keluar kartu, sehingga hover jadi terasa
   lambat. Animasi muncul-saat-discroll bawaan (.reveal di site.css) sudah
   cukup. */

@media (max-width:899px){
  .katalog-sampul{ padding:1.9rem 0 1.7rem; }
  .katalog-head{ margin-bottom:1.25rem; }
  .katalog-bar{ padding:.7rem .7rem; border-radius:12px; margin-bottom:1.25rem; }
  .katalog-pisah{ margin:.7rem 0; }
  .katalog-kotak{ flex:1 1 100%; }
  .katalog-pilih{ flex:1 1 100%; }
  .katalog-pilih select{ width:100%; box-sizing:border-box; }
  .katalog-jumlah{ font-size:.7rem; margin-bottom:.75rem; }

  .product-grid{ gap:.75rem; }
  .product-card{ border-radius:12px; padding:5px; box-shadow:none; }
  .product-card:hover{ transform:none; box-shadow:none; border-color:var(--parchment-200); }
  .product-visual{ border-radius:8px; }
  .product-card.pk-lambang .product-visual{ padding:.65rem; }
  .product-tag{ top:.45rem; left:.45rem; font-size:.54rem; padding:.2rem .45rem; }
  .pk-potongan{ top:.45rem; right:.45rem; font-size:.55rem; padding:.2rem .42rem; }

  .product-body{ padding:.6rem .55rem .65rem; gap:.3rem; }
  .product-name{ font-family:var(--font-body); font-size:.82rem; font-weight:700; line-height:1.3; }
  .pk-mitra{ font-size:.6rem; padding:.15rem .45rem; }

  /* Kartu tetap padat seperti marketplace: cerita dan keterangan disembunyikan
     supaya dua kolom di layar ponsel tidak jadi sangat tinggi. Aturan ini
     memang ada di site.css, tapi harus diulang di sini karena berkas ini
     dimuat belakangan dan kalau tidak, aturan dari sini yang menang. */
  .product-notes{ display:none; }
  .product-meta{ display:none; }

  /* center, bukan flex-end: dengan flex-end keping "Stok habis" sejajar baris
     satuan ("per 250 gram") dan terbaca seolah bagian dari harga. */
  .product-foot{ padding-top:.5rem; align-items:center; }
  .product-price{ font-size:.86rem; color:var(--soil-600); column-gap:.25rem; }
  .pk-opsi select{ font-size:.7rem; padding:.35rem 1.4rem .35rem .45rem; }
  .pk-opsi-judul{ font-size:.54rem; }
  .pk-label-member{ font-size:.52rem; }
  .product-price small{ font-size:.57rem; }
  .add-btn{ width:30px; height:30px; border:none; background:var(--soil-600); color:#fff; }
  .add-btn:hover{ background:var(--soil-700); transform:none; }
  .pk-habis{ font-size:.58rem; padding:.22rem .45rem; }
  .katalog-kosong{ padding:2rem 1rem; }
}

/* Di layar sangat sempit harga dan tombol tetap sebaris; yang mengalah adalah
   harganya, yang boleh patah ANTAR-angka (bukan di tengah angka). */
@media (max-width:420px){
  .product-foot{ flex-wrap:nowrap; gap:.4rem; }
  .product-price{ font-size:.82rem; }
}

/* ============ 6. GERAK DIKURANGI ============ */
@media (prefers-reduced-motion:reduce){
  .product-card,
  .product-card.pk-foto .product-visual img{ transition:none; }
  .product-card:hover{ transform:none; }
  .product-card:hover .product-visual img{ transform:none; }
  .katalog-sibuk::before{ animation:none; }
}

/* ============ 6. DI DALAM PANEL MEMBER ============

   Panel member memuat tema Velzon, yang menyeragamkan SEMUA kolom isian:

     .vz-theme main input[type=text], .vz-theme main select, … {
       border:1px solid #ced4da !important; border-radius:.25rem !important;
       background:#fff;
     }

   Aturan itu lebih kuat daripada .katalog-kotak input (0,1,1 lawan 0,2,1),
   jadi kotak pencarian dan pemilih opsi di panel member sempat kembali ke
   kotak abu-abu Velzon — bukan tampilan katalog yang diminta. Blok ini
   mengembalikannya, dengan kekuatan pemilih yang setara dan !important hanya
   pada properti yang memang ditandai !important di sana. */

.vz-theme main .katalog-kotak input[type=text],
.vz-theme main .katalog-pilih select,
.vz-theme main .pk-opsi select{
  border:1px solid var(--parchment-200) !important;
  border-radius:10px !important;
  background-color:var(--parchment-50);
  color:var(--char-900);
  font-family:inherit;
}
.vz-theme main .katalog-kotak input[type=text]{
  border:none !important; border-radius:0 !important; background-color:transparent;
}
.vz-theme main .pk-opsi select{
  border-radius:8px !important; font-size:.76rem; font-weight:600;
  /* Panah bawaan dimatikan oleh appearance:none, jadi harus digambar lagi di
     sini — latar belakang shorthand milik Velzon menghapus gambar panahnya. */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23786e5f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .55rem center; background-size:10px;
}
.vz-theme main .katalog-pilih select{
  /* .katalog-pilih sudah punya panahnya sendiri lewat ::after. */
  font-size:.82rem; font-weight:600;
}
.vz-theme main .katalog-kotak input[type=text]:focus,
.vz-theme main .katalog-pilih select:focus,
.vz-theme main .pk-opsi select:focus{ box-shadow:none; }

/* Kartu produk di panel member tidak ikut animasi muncul-saat-discroll:
   pengamat .reveal hanya ada di layout situs publik. Aturan ini jaring
   pengaman kalau suatu saat kelas .reveal ikut tercetak di sini — tanpa
   pengamatnya, kartu akan tetap tembus pandang selamanya. */
.vz-theme main .product-card.reveal{ opacity:1; transform:none; }