/* Toko Warga Desa Pejambon — katalog grid */
:root{
  --hijau:#1f7a4d; --hijau-terang:#2f9d63; --hijau-lembut:#e7f4ec;
  --tinta:#16241c; --redup:#5f6f66; --garis:#dbe6df; --kertas:#fff;
  --kuliner:#ea580c; --jasa:#2563eb; --kerajinan:#b45309;
  --pertanian:#4d7c0f; --peternakan:#7c3aed; --belanja:#be185d;
  --bayang:0 6px 22px rgba(18,40,28,.10);
  --r:14px;
}
*{box-sizing:border-box}
/* atribut hidden harus menang atas display milik kelas (mis. .kerangka{display:grid}) */
[hidden]{display:none!important}
body{
  margin:0;font:15px/1.5 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--tinta);background:#f4f7f5;
}
a{color:var(--hijau)}

/* ---------- kepala ---------- */
.kepala{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--garis);
}
.kepala-isi{
  max-width:1180px;margin:0 auto;padding:11px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.merek{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;min-width:0}
.merek-logo{
  width:36px;height:36px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--hijau),var(--hijau-terang));
  color:#fff;font-size:11px;font-weight:800;letter-spacing:.04em;
}
.merek-teks{display:flex;flex-direction:column;min-width:0}
.merek-teks strong{font-size:15px;line-height:1.25}
.merek-teks span{font-size:11.5px;color:var(--redup);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tautan-peta{
  font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;
  padding:8px 14px;border-radius:999px;background:var(--hijau-lembut);
  border:1px solid var(--hijau);color:#14532d;
}
.tautan-peta:hover{background:#d9eddf}

/* ---------- wadah ---------- */
.wadah{max-width:1180px;margin:0 auto;padding:26px 18px 56px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- hero sorotan ---------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  width:min(1144px,calc(100% - 32px));margin:22px auto 0;
  border-radius:20px;color:#fff;
  background:
    radial-gradient(115% 130% at 8% 0%,rgba(47,157,99,.55),rgba(47,157,99,0) 58%),
    radial-gradient(90% 120% at 100% 108%,rgba(9,58,38,.85),rgba(9,58,38,0) 62%),
    linear-gradient(135deg,#0d3a26 0%,#155c3b 58%,#1f7a4d 100%);
  box-shadow:0 18px 44px rgba(12,45,30,.22);
}
/* garis diagonal tipis, memudar ke kanan */
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:repeating-linear-gradient(118deg,rgba(255,255,255,.06) 0 1px,transparent 1px 15px);
  -webkit-mask-image:linear-gradient(115deg,#000 0%,transparent 62%);
  mask-image:linear-gradient(115deg,#000 0%,transparent 62%);
}
.hero-jalur{position:relative;z-index:1;display:grid;padding:36px 38px 0}
/* slide bertumpuk di satu sel grid; yang non-aktif disembunyikan seketika
   supaya tidak ada dua teks saling menimpa saat transisi */
.hero-slide{
  grid-area:1/1;display:flex;flex-direction:column;gap:13px;align-items:flex-start;
  visibility:hidden;
}
.hero-slide.aktif{visibility:visible;animation:hero-masuk .5s ease both}
@keyframes hero-masuk{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
.hero-eyebrow{
  margin:0;display:inline-flex;align-items:center;gap:9px;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#a9edc6;
}
.hero-eyebrow::before{content:"";width:24px;height:1px;background:currentColor;opacity:.75}
.hero-slide h2{
  margin:0;font-size:clamp(22px,3.3vw,35px);line-height:1.16;letter-spacing:-.02em;
  max-width:19ch;text-wrap:balance;
}
.hero-slide > p:not(.hero-eyebrow){
  margin:0;max-width:47ch;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.79);
}
.hero-aksi{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.hero-tombol{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  padding:11px 19px;border-radius:999px;font-size:13.5px;font-weight:650;
  transition:transform .15s,background .15s,box-shadow .15s;
}
.hero-tombol.utama{background:#fff;color:#14532d;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.hero-tombol.utama:hover{transform:translateY(-1px);box-shadow:0 9px 22px rgba(0,0,0,.24)}
.hero-tombol.garis{border:1px solid rgba(255,255,255,.42);color:#fff}
.hero-tombol.garis:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.68)}
.hero-tombol:focus-visible{outline:2px solid #fff;outline-offset:3px}

.hero-kendali{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:26px 38px 24px;
}
.hero-titik{display:flex;gap:7px}
.hero-titik button{
  width:26px;height:5px;padding:0;border:0;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.3);transition:width .3s,background .3s;
}
.hero-titik button:hover{background:rgba(255,255,255,.55)}
.hero-titik button[aria-current="true"]{width:38px;background:#fff}
.hero-titik button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hero-panah{display:flex;gap:7px}
.hero-panah button{
  width:32px;height:32px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.36);background:rgba(255,255,255,.08);
  color:#fff;font-size:17px;line-height:1;display:grid;place-items:center;
  transition:background .15s,border-color .15s;
}
.hero-panah button:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.6)}
.hero-panah button:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* angka ringkas di sisi kanan hero (layar lebar saja) */
.hero-stat{
  position:absolute;right:38px;top:50%;transform:translateY(-50%);z-index:1;
  display:none;grid-template-columns:1fr;gap:18px;
  padding:20px 24px;border-radius:14px;min-width:180px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px);
}
.hero-stat strong{
  display:block;font-size:26px;line-height:1;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
.hero-stat span{font-size:11.5px;color:rgba(255,255,255,.72);letter-spacing:.02em}
@media (min-width:880px){
  .hero-stat:not([hidden]){display:grid}
  .hero-jalur{padding-right:250px}
}

/* ---------- kendali ---------- */
.kendali{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px;scroll-margin-top:78px}
.cari{position:relative;flex:1 1 260px}
.cari input{
  width:100%;padding:11px 34px 11px 13px;border:1px solid var(--garis);border-radius:10px;
  font:inherit;font-size:14px;background:#fff;
}
.cari input:focus{outline:2px solid var(--hijau-terang);outline-offset:-1px}
.cari-hapus{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  border:0;background:none;font-size:20px;line-height:1;color:var(--redup);
  cursor:pointer;padding:4px 8px;border-radius:6px;
}
.cari-hapus:hover{background:#eef3ef;color:var(--tinta)}
.urut{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.urut label{font-size:13px;color:var(--redup)}
.urut select{
  font:inherit;font-size:13.5px;padding:10px 12px;border-radius:10px;
  border:1px solid var(--garis);background:#fff;cursor:pointer;
}

/* ---------- tab kategori ---------- */
.tab-kategori{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.tab{
  display:inline-flex;align-items:center;gap:6px;padding:7px 12px;
  border:1px solid var(--garis);border-radius:999px;background:#fff;
  font:inherit;font-size:12.5px;color:var(--redup);cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s;
}
.tab:hover{background:#f0f5f2}
.tab[aria-selected="true"]{background:var(--hijau-lembut);border-color:var(--hijau);color:#14532d;font-weight:600}
.tab .jml{font-size:11px;opacity:.7;font-variant-numeric:tabular-nums}
.tab svg{flex:0 0 auto}

.hitung{margin:0 0 14px;font-size:13px;color:var(--redup)}
.hitung strong{color:var(--tinta)}

/* ---------- grid kartu ---------- */
.grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
}

.kartu{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--garis);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--bayang);
  transition:transform .16s,box-shadow .16s,border-color .16s;
}
.kartu:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(18,40,28,.15);border-color:#c6dbcd}

/* foto / gambar kategori */
.kartu-foto{
  position:relative;aspect-ratio:4/3;background:#e8eee9;overflow:hidden;
  display:grid;place-items:center;
  /* foto = tombol pembuka galeri */
  border:0;padding:0;width:100%;font:inherit;cursor:zoom-in;
}
.kartu-foto:focus-visible{outline:3px solid #16a34a;outline-offset:-3px}
.kartu-foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.kartu-foto:hover img{transform:scale(1.03)}
.kartu-foto .samar{
  width:100%;height:100%;display:grid;place-items:center;color:#fff;
}
.kartu-foto .samar svg{width:38px;height:38px;opacity:.9}
.jumlah-foto{
  position:absolute;right:8px;bottom:8px;font-size:10.5px;font-weight:700;
  padding:2px 8px;border-radius:999px;background:rgba(15,35,25,.74);color:#fff;
  backdrop-filter:blur(3px);
}
.lencana-kat{
  position:absolute;left:9px;top:9px;font-size:10.5px;font-weight:700;
  padding:3px 9px;border-radius:999px;color:#fff;letter-spacing:.01em;
  box-shadow:0 1px 4px rgba(0,0,0,.2);
}

.kartu-isi{padding:12px 13px 13px;display:flex;flex-direction:column;gap:7px;flex:1}
.kartu-nama{
  font-size:14.5px;font-weight:700;line-height:1.3;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.kartu-jual{
  margin:0;font-size:12.5px;color:var(--redup);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.kartu-alamat{
  display:flex;align-items:flex-start;gap:5px;margin:0;
  font-size:12px;color:var(--redup);line-height:1.4;
}
.kartu-alamat svg{flex:0 0 auto;margin-top:2px;opacity:.65}
.kartu-alamat span{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.kartu-kaki{margin-top:auto;padding-top:4px;display:flex;gap:7px;align-items:center}
.tombol-wa{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  text-decoration:none;font-size:12.5px;font-weight:700;padding:8px 10px;
  border-radius:9px;background:#25d366;color:#06341c;border:1px solid #1eb955;
}
.tombol-wa:hover{filter:brightness(.96)}
.tombol-wa.tanpa{background:#f2f5f3;color:var(--redup);border-color:var(--garis);font-weight:500}
.tombol-peta{
  flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;
  border-radius:9px;border:1px solid var(--garis);background:#fff;color:var(--hijau);
  text-decoration:none;
}
.tombol-peta:hover{background:var(--hijau-lembut)}

/* ---------- kerangka & kosong ---------- */
.kerangka{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
.kartu-kerangka{
  height:290px;border-radius:var(--r);background:linear-gradient(100deg,#eef3ef 30%,#f7faf8 50%,#eef3ef 70%);
  background-size:200% 100%;animation:kilau 1.3s linear infinite;
}
@keyframes kilau{from{background-position:150% 0}to{background-position:-50% 0}}
.kosong{
  text-align:center;padding:48px 20px;color:var(--redup);
  background:#fff;border:1px dashed var(--garis);border-radius:var(--r);
}
.kosong p{margin:0 0 4px}
.kosong strong{color:var(--tinta)}

/* navigasi halaman */
.halaman-nav{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
  margin:22px 0 6px;scroll-margin-top:16px;
}
.tombol-hal{
  min-width:36px;height:36px;padding:0 10px;border-radius:10px;
  border:1px solid var(--garis);background:#fff;color:var(--tinta);
  font:600 13.5px/1 inherit;font-variant-numeric:tabular-nums;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.tombol-hal:hover:not(:disabled){background:var(--hijau-lembut);border-color:var(--hijau)}
.tombol-hal:focus-visible{outline:2px solid var(--hijau);outline-offset:2px}
.tombol-hal.aktif{background:var(--hijau);border-color:var(--hijau);color:#fff;cursor:default}
.tombol-hal:disabled{opacity:.4;cursor:not-allowed}
.hal-titik{
  min-width:22px;height:36px;display:grid;place-items:center;
  color:var(--redup);font-size:13.5px;
}

.kaki{
  border-top:1px solid var(--garis);background:#fff;
  padding:22px 18px;text-align:center;color:var(--redup);font-size:12.5px;
}
.kaki p{margin:0 0 4px}

@media (max-width:520px){
  .wadah{padding:20px 14px 44px}
  .hero{width:calc(100% - 20px);margin-top:14px;border-radius:16px}
  .hero-jalur{padding:26px 22px 0;gap:11px}
  .hero-slide{gap:11px}
  .hero-slide h2{max-width:22ch}
  .hero-slide > p:not(.hero-eyebrow){font-size:13.5px}
  .hero-kendali{padding:22px 22px 20px}
  .hero-tombol{padding:10px 16px;font-size:13px}
  /* satu kolom penuh: foto besar, teks tidak lagi dipaksa kecil */
  .grid,.kerangka{grid-template-columns:1fr;gap:14px}
  .kartu-foto{aspect-ratio:3/2}
  .kartu-isi{padding:13px 14px 14px}
  .kartu-nama{font-size:15.5px}
  .kartu-jual{font-size:13px}
  .tautan-peta{padding:7px 11px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .kartu{transition:none}
  .kartu-kerangka{animation:none}
  .hero-slide.aktif{animation:none}
}