/* theme.css marketplace nayarashop.id -- BISA DIEDIT lewat editor
   tema admin (PUT /admin/marketplace/theme, key "marketplace_css"),
   disajikan lewat GET /marketplace-assets/theme.css.

   Background gradient global (senada halaman login) -- diterapkan di
   `body` supaya SEMUA halaman (beranda/pencarian/kategori/produk/dst)
   punya nuansa yang sama, bukan cuma login. Pakai ::before/::after
   fixed-position supaya blob warna tetap di tempat saat scroll,
   TIDAK ikut ke atas elemen konten (z-index: -1). */

body {
  position: relative;
  background: linear-gradient(135deg, #EFF6FF 0%, #F0FDFA 50%, #FFF7ED 100%);
  min-height: 100vh;
}

body::before,
body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.25;
  z-index: -1;
  pointer-events: none;
  animation: mktBgFloat 10s ease-in-out infinite;
}
body::before {
  width: 320px;
  height: 320px;
  background: #2563EB;
  top: -80px;
  left: -80px;
}
body::after {
  width: 280px;
  height: 280px;
  background: #14B8A6;
  bottom: -60px;
  right: -60px;
  animation-delay: 2s;
}

@keyframes mktBgFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -20px) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none;
  }
}

/* Override lebar kontainer utama -- default dari theme.css storefront
   terlalu sempit untuk marketplace (menyisakan ruang kosong besar di
   kiri-kanan pada layar lebar). Marketplace_css dimuat SETELAH
   theme.css storefront, jadi ini otomatis menang. */
.wrap {
  max-width: 1320px;
}

/* Kartu produk (grid beranda/pencarian/kategori/campaign) -- background
   PUTIH SOLID (bagian nama/harga menyatu dengan bagian gambar, bukan
   transparan menampakkan gradient di belakangnya), garis tepi putih
   transparan halus + bayangan lembut supaya tetap terlihat jelas di
   atas background gradient. */
.grid .card {
  display: block;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.07);
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.grid .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
}

/* Grid: jarak antar kartu dikurangi + lebar kartu sedikit lebih
   sempit (lebih banyak muat per baris). */
.grid {
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* Gambar: tinggi dikurangi sedikit (proporsi lebih ringkas). */
.grid .card img {
  height: 170px;
  width: 100%;
  object-fit: cover;
  display: block;
}

/* Teks (nama/harga/dll): margin dari tepi kartu -- SEBELUMNYA nempel
   langsung ke pinggir kartu, sekarang punya jarak yang jelas. */
.grid .card h3,
.grid .card .price,
.grid .card .price-original,
.grid .card .discount-badge,
.grid .card .meta {
  margin-left: 14px;
  margin-right: 14px;
}
.grid .card h3 {
  margin-top: 12px;
  margin-bottom: 6px;
}
.grid .card .meta {
  margin-bottom: 14px;
}
.grid .card .price-original {
  margin-bottom: 2px;
}