/* ================================
   ZonaWedding Brand CSS (Full)
   Palette:
     --primary  : #8B5A3C  (cocoa gold)
     --accent   : #F6E7E3  (blush)
     --dark     : #0B1220
     --bg       : #F7F6F4
     --line     : #E8DED6  (warm line)
   ================================ */

:root{
  --primary:#8B5A3C;
  --primary-700:#6F452F;
  --accent:#F6E7E3;
  --dark:#0B1220;
  --bg:#F7F6F4;
  --line:#E8DED6;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--dark);
}
a{color:inherit;text-decoration:none}
.container{max-width:1180px;margin:0 auto;padding:0 16px}

/* Buttons & Inputs */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:12px;
  border:1px solid var(--line);background:#fff
}
.btn.sm{height:36px;padding:6px 10px;border-radius:10px;font-size:12px;white-space:nowrap}
.btn-primary{background:var(--primary);color:#fff;border-color:transparent}
.btn-primary:hover{background:var(--primary-700)}
.input,.select{
  height:42px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:var(--dark);
}
.input:focus,.select:focus{outline:2px solid rgba(139,90,60,.18);outline-offset:2px}

/* Grid & Cards */
.grid{display:grid;gap:16px}
.grid.cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.03)
}
.card .thumb{width:100%;height:150px;background:#f3eee9;display:block}
.card .pad{padding:12px}

/* Badges */
.badge{
  display:inline-block;background:rgba(139,90,60,.08);
  color:var(--primary);border:1px solid rgba(139,90,60,.22);
  padding:2px 8px;border-radius:999px;font-size:12px
}

h3{margin:14px 0 8px}
footer{padding:24px 16px;color:#7b8a9a;font-size:14px}

/* Banners default visible */
.banners{display:block;position:relative;overflow:hidden}

/* ==== NAVIGASI MOBILE: responsif untuk layar ramping ==== */
:root{
  --mnav-h: 56px;
  --mnav-bg:#fff;
  --mnav-line:#E8DED6;
  --mnav-fg:#0f172a;
  --mnav-active:#8B5A3C;

  /* ukuran elastis */
  --fab-size: clamp(52px, 14vw, 60px);           /* FAB mengecil di layar sempit */
  --fab-gap : calc(var(--fab-size) + 8px);       /* lebar kolom tengah mnav */
  --ico-size: clamp(16px, 4.6vw, 19px);          /* ukuran ikon */
  --lbl-size: clamp(9px, 2.7vw, 10.5px);         /* font label */
}

/* desktop: sembunyikan */
@media (min-width: 992px){
  .msearch, .caticons, .mnav, .fab, .fab-actions { display:none !important; }
}

/* bar bawah */
.mnav{
  position: fixed; left: 0; right: 0;
  bottom: max(0px, env(safe-area-inset-bottom,0px)); /* stabil saat toolbar hide/show */
  height: var(--mnav-h);
  display: grid;
  grid-template-columns: 1fr 1fr var(--fab-gap) 1fr 1fr; /* celah tengah fleksibel */
  align-items: center; gap: 2px;
  background: var(--mnav-bg);
  border-top: 1px solid var(--mnav-line);
  padding: 4px 8px;
  z-index: 999; box-shadow: 0 -6px 18px rgba(2,8,23,.06);
  width: 100%;
  max-width: 100vw;
  transform: none;
  will-change: auto;
  contain: layout paint;
}
.mnav-gap{ width: var(--fab-gap); height:100%; pointer-events:none; }

.mnav a{
  min-width: 0; white-space: nowrap;    /* jangan bungkus */
  color: var(--mnav-fg); text-decoration: none;
  display: grid; justify-items: center; gap: 3px;
  font-size: var(--lbl-size); line-height: 1.2;
}
.mnav .ico{ width: var(--ico-size); height: var(--ico-size); fill: currentColor; }
.mnav a.is-active{ color: var(--mnav-active); }

.mnav a { min-width: 0; }       /* biar label ga maksa kolom melar */
html, body { overflow-x: hidden; }  /* kalau sempat muncul scroll-X */

/* spacer konten */
.mnav-space{
  height: calc(var(--mnav-h) + max(0px, env(safe-area-inset-bottom,0px)));
}

/* FAB tengah mengikuti gap */
.fab{
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(max(0px, env(safe-area-inset-bottom,0px)) + var(--mnav-h)/2 + 6px);
  width: var(--fab-size); height: var(--fab-size); border-radius: 9999px;
  background:#e89c9c; color:#fff; border:4px solid #fff;
  display: grid; place-items: center; z-index: 1000;
  z-index: 999; box-shadow: 0 12px 30px rgba(0,0,0,.20);
}
.fab .plus{ width: clamp(20px, 5vw, 22px); height: clamp(20px, 5vw, 22px); }
.fab:active{ transform: translateX(-50%) scale(.98); }

/* layar ekstra sempit: rapatkan padding */
@media (max-width: 360px){
  :root{ --mnav-h: 54px; }
  .mnav{ padding: 3px 6px; gap: 1px; }
}

/* sangat sempit (≤ 310px): tampilkan ikon saja */
@media (max-width: 310px){
  .mnav a span{ display: none; }          /* sembunyikan label */
  .mnav .ico{ width: clamp(16px, 6vw, 18px); height: clamp(16px, 6vw, 18px); }
}

/* ================= Desktop ================= */
@media (min-width:992px){
  .topbar{
    background:#fff;border-bottom:1px solid var(--line);
    position:sticky;top:0;z-index:40;transition:box-shadow .2s ease
  }
  .topbar.is-sticky{ box-shadow:0 6px 18px rgba(2,6,23,.06) }
  .topbar .row{display:flex;gap:12px;align-items:center;height:68px}
  .logo img{height:56px}

  .searchbar{flex:1;display:flex;gap:8px}
  .searchbar .input{background:#fff;border-color:var(--line)}
  .searchbar .input::placeholder{color:#94a3b8}

  .catsbar{background:#fff;border-bottom:1px solid var(--line)}
  .catsbar .wrap{display:flex;gap:14px;align-items:center;padding:10px 16px}
  .chip{white-space:nowrap;background:#fff;border:1px solid var(--line);padding:8px 12px;border-radius:999px}

  .mega{display:none;position:absolute;left:0;right:0;z-index:99}
  .mega.open{display:block}
  .mega .panel{
    background:#fff;border:1px solid var(--line);border-radius:14px;
    box-shadow:0 24px 45px rgba(0,0,0,.08);padding:16px;
    max-width:1100px;margin:0 auto;display:grid;
    grid-template-columns:repeat(6,1fr);gap:14px
  }
  .mega .panel h4{margin:0 0 6px}

  .banners{margin:10px 0 12px 0}
  .banners .rail{display:flex;transition:transform .6s ease}
  .banners .slide{min-width:100%;flex:0 0 100%}
  .banners img{
    height:260px;width:100%;object-fit:cover;border-radius:16px;border:1px solid var(--line)
  }
  .banners .dots{
    position:absolute;left:0;right:0;bottom:8px;display:flex;gap:6px;justify-content:center
  }
  .banners .dots b{width:8px;height:8px;border-radius:50%;background:#e8e0d9;opacity:.9}
  .banners .dots b.active{background:var(--primary)}
}

/* ================= Mobile ================= */
@media (max-width:991px){
  .topbar,.catsbar,.mega{display:none}
  .msearch{
    display:block;position:sticky;top:0;background:#fff;
    border-bottom:1px solid var(--line);padding:10px 16px;z-index:80
  }
  .msearch .row{
    display:grid;grid-template-columns:110px 1fr auto auto;
    gap:8px;align-items:center
  }

.caticons{
  display: grid;
  /* otomatis menambah/mengurangi kolom agar pas layar */
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 12px;
  padding: 12px 16px;
  max-width: 100%;
}

.ci{
  min-width: 0;               /* biar mau mengecil, tidak overflow */
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
}

.ci b{
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #475569;
  white-space: nowrap;         /* opsional: rapikan label */
  overflow: hidden;
  text-overflow: ellipsis;
}


  .banners{padding:8px 0}
  .banners .rail{display:flex;transition:transform .6s ease}
  .banners .slide{min-width:100%;flex:0 0 100%}
  .banners img{
    height:160px;width:100%;object-fit:cover;border-radius:14px;border:1px solid var(--line)
  }
  .banners .dots{position:absolute;left:0;right:0;bottom:6px;display:flex;gap:6px;justify-content:center}
  .banners .dots b{width:8px;height:8px;border-radius:50%;background:#e8e0d9;opacity:.9}
  .banners .dots b.active{background:var(--primary)}



  footer{margin-bottom:110px}
  .grid.cards{grid-template-columns:1fr 1fr}
}


/* Desktop banner clamp */
@media (min-width:992px){
  .banners > .container{ overflow:hidden; padding:0; }
  .banners .rail{ margin:0; }
  .banners .slide{ padding:0; }
  .banners img{ display:block; max-width:100%; }
}

/* ===== Subcategory bar ===== */
.subbar{background:#fff;border-bottom:1px solid var(--line)}
.subbar .scroller{display:flex;gap:10px;align-items:center;padding:10px 16px;overflow:auto}
.subcount{display:none}
.subttl{font-size:12px;color:#64748b;margin-right:6px}

@media (min-width:992px){ .subbar{position:sticky; top:68px; z-index:35} }
@media (max-width:991px){ .subbar{position:sticky; top:56px; z-index:85} }

.subbar .container{padding:10px 16px;display:flex;gap:8px;overflow:auto}

/* Pills */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;border:1px solid var(--line);
  color:#475569;background:#fff;white-space:nowrap;text-decoration:none;
  transition:.15s ease;margin-right:8px
}
.pill:hover{border-color:#dcccbc}
.pill .ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;background:rgba(139,90,60,.10)
}
.pill .ico svg{display:block}
.pill .lbl{line-height:1}
.pill.active{background:var(--primary);color:#fff;border-color:transparent}
.pill.active .ico{background:rgba(255,255,255,.25)}

/* ===== Slider Vendor Unggulan ===== */
.slider{ position:relative; }
.hscroll{
  display:flex; gap:12px; overflow:auto;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  padding:2px 2px 8px;
}
.hscroll::-webkit-scrollbar{ display:none; }
.hscroll .card{
  flex:0 0 auto; min-width:78vw; scroll-snap-align:start;
}
.slide-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:3; width:40px; height:40px; border-radius:999px; border:0;
  background:#fff; box-shadow:0 6px 20px rgba(2,6,23,.18);
  color:#111827; font-size:22px; line-height:40px; cursor:pointer;
}
.slide-prev{ left:-8px } .slide-next{ right:-8px }
.slide-btn:active{ transform:translateY(-50%) scale(.96) }

/* Tablet & small tweaks */
@media (min-width:768px){ .hscroll .card{ min-width:360px } }
@media (max-width:640px){
  .slider .hscroll .card{ width:240px; min-width:200px; }
}

/* ===== Utility ===== */
.section-blush{ background:var(--accent); }
.brand-wordmark{
  font-family:"Cormorant Garamond","Playfair Display",Georgia,serif;
  letter-spacing:.5px; font-weight:600; color:var(--primary);
}

/* === BEGIN: UI styles (dipindah dari app.js:injectUIStyles) === */

/* ===== Desktop topbar layout ===== */
.topbar .row{display:flex;align-items:center;gap:10px}
.topbar .row .searchbar{flex:1;display:flex;gap:8px;position:relative}
.topbar .row .searchbar .input{width:100%}
.topbar .row .select{flex:0 0 auto;min-width:120px}
.desk-nav{display:flex;gap:12px;margin:0 6px}
.desk-nav a{color:#0f172a;text-decoration:none;padding:6px 10px;border-radius:10px;font-weight:500;white-space:nowrap}
.desk-nav a:hover{background:#f1f5f9}
.desk-nav a.active{background:#e89c9c;color:#fff}
@media (max-width:991px){.desk-nav{display:none}}

/* ===== Desktop footer ===== */
.desk-footer{margin-top:24px;border-top:1px solid rgba(2,8,23,.06);background:#f3eee2;color:#fff}
.desk-footer .container{display:flex;justify-content:space-between;align-items:center;padding:16px 0;gap:12px}
.desk-footer a{color:#3c3837;text-decoration:none}
.desk-footer a:hover{text-decoration:underline}
.foot-right a{margin-left:14px}
.foot-left .soc{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:999px;background:#e89c9c;color:#fff;margin-right:8px}
.foot-left .soc svg{width:16px;height:16px}
@media (max-width:991px){.desk-footer{display:none}}

/* ===== Rekomendasi (Venue Fav) + subcat chips ===== */
.favsec{background:#f3eee2;padding:18px 0 22px;border-top:1px solid rgba(0,0,0,.03);border-bottom:1px solid rgba(0,0,0,.03)}
.favsec .favhead{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px}
.favsec .seeall{font-size:12px;color:#64748b;text-decoration:none}
.favsec .seeall:hover{text-decoration:underline}
.favslider .hscroll{display:flex;gap:12px;overflow:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:2px 2px 8px}
.favslider .hscroll::-webkit-scrollbar{display:none}
.favcard{width:320px;min-width:320px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 8px 20px rgba(2,8,23,.06);scroll-snap-align:start;text-decoration:none;color:inherit}
@media (max-width:640px){.favcard{width:260px;min-width:260px}}
.favimg{position:relative;width:100%;aspect-ratio:16/9;background:#eee;overflow:hidden}
.favimg img{width:100%;height:100%;object-fit:cover;display:block}
.favbody{padding:10px 12px 12px}
.favtitle{font-weight:600;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.favmeta{margin-top:4px;font-size:12px;color:#475569;display:flex;align-items:center;gap:6px}
.favmeta .star{color:#f59e0b}.favmeta .dot{opacity:.4}
.favmeta .city{background:#f1f5f9;color:#334155;border-radius:999px;padding:2px 8px}
.slider{position:relative}
.slide-btn{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;line-height:32px;border-radius:999px;background:#fff;color:#0f172a;border:1px solid rgba(2,8,23,.12);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(2,8,23,.1)}
.slide-prev{left:-6px}.slide-next{right:-6px}
.subcats{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px}
.pill{display:inline-block;padding:2px 8px;border-radius:999px;background:#eef2ff;color:#334155;font-size:12px}
.subbar{background:#fff;border-bottom:1px solid rgba(2,8,23,.06)}
.subbar .scroller{display:flex;align-items:center;gap:8px;overflow:auto;padding:10px 0}
.subbar .pill{background:#f1f5f9}
.subbar .pill.active{background:#8B5A3C;color:#fff}
.subbar .subttl{color:#475569;font-size:13px;margin-right:6px;white-space:nowrap}

/* ===== Detail page ===== */
.detail-grid{display:grid;grid-template-columns:2fr 1.2fr;gap:16px;margin-top:16px}
@media (max-width:991px){.detail-grid{grid-template-columns:1fr}}
.info-card,.prod-card{background:#fff;border:1px solid rgba(2,8,23,.06);border-radius:14px;box-shadow:0 8px 20px rgba(2,8,23,.04)}
.info-card .hd,.prod-card .hd{padding:12px 14px;border-bottom:1px solid rgba(2,8,23,.06);display:flex;align-items:center;justify-content:space-between}
.info-card .hd h4,.prod-card .hd h4{margin:0;color:#0f172a}
.info-body,.prod-body{padding:12px 14px}
.info-row { align-items: flex-start; }             /* opsional: biar label & value rapih saat multi-line */
.info-row .label { flex: 0 0 120px; }              /* lebar label tetap seperti sebelumnya */
.info-row .value{
  flex: 1 1 auto;                                  /* biar bisa menyusut */
  min-width: 0;                                    /* <— penting untuk flex container */
  overflow-wrap: anywhere;                         /* modern wrap untuk string panjang */
  word-break: break-word;                          /* fallback */
  line-break: anywhere;                            /* bantu browser Asia */
  hyphens: auto;                                   /* kalau ada kamus hyphenation */
}
.info-row .value a{
  overflow-wrap: anywhere;
  word-break: break-all;                           /* jika URL tanpa pemisah */
}

.chips{display:flex;gap:6px;flex-wrap:wrap}
.socs{display:flex;gap:8px;align-items:center}
.socbtn{width:34px;height:34px;border-radius:999px;background:#f1f5f9;display:inline-flex;align-items:center;justify-content:center;color:#0f172a}
.socbtn:hover{background:#e2e8f0}
.socbtn svg{width:18px;height:18px}
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}

/* pad harus relative agar avatar bisa absolute di dalamnya */
.card .pad{position:relative}
.card .v-ava.in-pad{
  position:absolute;left:12px;top:-24px;margin:0;width:56px;height:56px;border-radius:999px;border:1px solid #fff;overflow:hidden;box-shadow:0 6px 18px rgba(2,8,23,.18);background:#e2e8f0
}
.card .v-ava.in-pad img{width:100%;height:100%;object-fit:cover;display:block}
.card .v-ava.in-pad .init{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-weight:800;color:#0f172a}
.card .v-ava.in-pad + div{padding-top:24px}
@media (max-width:640px){
  .card .v-ava.in-pad{left:10px;top:-22px;width:52px;height:52px}
  .card .v-ava.in-pad + div{padding-top:24px}
  .favslider .slide-btn{display:none !important}
}

/* Autocomplete (desktop search) */
.suggest{position:absolute;top:100%;left:0;right:0;margin-top:6px;background:#fff;border:1px solid rgba(2,8,23,.12);border-radius:10px;box-shadow:0 12px 24px rgba(2,8,23,.08);max-height:280px;overflow:auto;display:none;z-index:1000}
.suggest.show{display:block}
.suggest a{display:flex;gap:8px;align-items:center;padding:8px 12px;text-decoration:none;color:#0f172a}
.suggest a:hover{background:#f8fafc}
.suggest .tag{font-size:11px;background:#eef2ff;color:#334155;border-radius:999px;padding:2px 8px}
.suggest .muted{color:#64748b;font-size:12px}
.msearch .row{position:relative}
@media(min-width:992px){#m-suggest{display:none !important}}

/* beri ruang ekstra agar tidak ketutup bottom nav pada mobile */
@media (max-width:991px){.fix-bottom-space{height:82px}}

/* ===== Produk Terbaru (slider satu baris) ===== */
.prodsec{background:#fff;padding:18px 0 22px;border-bottom:1px solid rgba(0,0,0,.03)}
.prodsec .prodhead{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px}
.prodsec .seeall{font-size:12px;color:#64748b;text-decoration:none}
.prodsec .seeall:hover{text-decoration:underline}
.prodslider .hscroll{display:flex;gap:12px;overflow:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:2px 2px 8px}
.prodslider .hscroll::-webkit-scrollbar{display:none}

/* HANYA untuk slider produk (home) */
.prodslider .prodcard{width:320px;min-width:320px}
@media (max-width:640px){.prodslider .prodcard{width:260px;min-width:260px}}

/* Base prodcard (tanpa fixed width) */
.prodcard{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 8px 20px rgba(2,8,23,.06);text-decoration:none;color:inherit;display:flex;flex-direction:column}

/* kontainer gambar */
.proimg{position:relative;width:100%;aspect-ratio:4/3;background:#f1f5f9;overflow:hidden;line-height:0}
.proimg a{position:absolute;inset:0;display:block}
.proimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border:0;border-radius:0}

.probody{padding:10px 12px 12px}
.protitle{font-weight:600;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prometa{margin-top:4px;font-size:12px;color:#475569;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.proprice{font-weight:700;color:#0f172a}
.procity{background:#f1f5f9;color:#334155;border-radius:999px;padding:2px 8px}
.proacts{margin-top:8px;display:flex;gap:8px}
.btn-whats{background:#22c55e;color:#fff;border-radius:10px;padding:8px 12px;text-decoration:none;font-size:13px}
.btn-whats:hover{opacity:.9}
.prolink{color:inherit;text-decoration:none;display:block}

/* ===== Promo Card ===== */
.promo-card{width:260px;min-width:260px;background:#fff;border-radius:16px;box-shadow:0 10px 22px rgba(2,8,23,.06);text-decoration:none;color:inherit;display:flex;flex-direction:column;align-items:center;padding:16px 14px 18px;position:relative}
@media (max-width:640px){.promo-card{width:240px;min-width:240px}}
.promo-card .ribbon{position:absolute;left:12px;top:10px;background:#e89c9c;color:#fff;font-weight:700;font-size:10.5px;letter-spacing:.2px;padding:4px 8px;border-radius:999px}
.promo-card .avatar{width:156px;height:156px;object-fit:cover;border-radius:999px;border:6px solid #f1f5f9;margin-top:8px}
.promo-card .name{margin-top:12px;text-align:center;font-weight:800;letter-spacing:.3px;text-transform:uppercase;line-height:1.25}
.promo-card .sub{margin-top:8px;color:#64748b;font-size:13px;text-align:center}
.promo-card .loc{margin-top:14px;display:flex;align-items:center;gap:6px;color:#0f172a;font-size:13px}
.promo-card .loc svg{width:16px;height:16px;opacity:.9}

/* Loadmore */
.loadmore{text-align:center;margin:12px 0 28px}
.loadmore .btn{padding:10px 16px;border-radius:10px}
.loadmore{display:flex;justify-content:center;margin:16px 0 6px}
.loadmore .btn-primary{background:var(--vb-orange,#8B5A3C);color:#fff;border-radius:10px;padding:10px 14px;text-decoration:none}

/* ===== Detail page (bersih) ===== */
.detail-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.2fr);gap:16px;margin-top:16px;align-items:start}
.detail-grid > *{min-width:0}
.detail-grid > .full{grid-column:1 / -1}
.prod-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
@media (max-width:991px){.detail-grid{grid-template-columns:minmax(0,1fr);gap:12px}.prod-grid{grid-template-columns:1fr}}

/* ===== Gallery grid ===== */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.gallery-item{overflow:hidden;border-radius:12px;background:#f1f5f9}
.gallery-item img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.gallery-grid .is-hidden{display:none}
.gallery-wrap.show-all .gallery-grid .is-hidden{display:block}
.gal-controls{margin-top:10px;text-align:center}
.gal-controls .btn-more{display:inline-block;padding:8px 12px;border-radius:10px;background:#f1f5f9;color:#0f172a;text-decoration:none;font-size:13px}
.gal-controls .btn-more:hover{background:#e2e8f0}
@media (max-width:991px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}

/* ==== Home: Vendor Unggulan (fix card width & image aspect) ==== */
#feat .hscroll > .card{width:320px;min-width:320px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 8px 20px rgba(2,8,23,.06)}
@media (max-width:640px){#feat .hscroll > .card{width:260px;min-width:260px}}
#feat .hscroll > .card .thumb{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
#feat .hscroll > .card .pad{padding:10px 12px}

/* ===== Reviews (anonymous & layout) ===== */
.review-sec{max-width:760px;margin:0 auto}

/* bintang – dukung selector lama & baru */
.review-sec .stars,
.review-sec .rev-stars{font-size:32px;cursor:pointer;user-select:none}
.review-sec .star,
.review-sec .rev-star{opacity:.35;transition:.15s;line-height:1}
.review-sec .star.active,
.review-sec .rev-star.active{opacity:1;color:#f59e0b}

/* form grid: Nama | Email (collapse di mobile) */
.rev-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
@media (max-width:640px){.rev-row{grid-template-columns:1fr}}

/* paksa field full width & nyaman dipakai */
.review-sec .input{width:100%;height:40px;padding:8px 10px;box-sizing:border-box;border:1px solid rgba(2,8,23,.2);border-radius:10px}
.review-sec textarea.input{min-height:120px;height:auto;resize:vertical}

/* daftar ulasan */
.review-list{display:flex;flex-direction:column;gap:10px}
.rev-item{display:grid;grid-template-columns:40px 1fr;gap:10px;padding:10px 12px;border:1px solid rgba(2,8,23,.08);border-radius:12px;background:#fff}
.rev-avatar{width:40px;height:40px;border-radius:999px;background:#e2e8f0;display:flex;align-items:center;justify-content:center;font-weight:800;color:#0f172a}
.rev-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rev-name{font-weight:700;color:#0f172a}
.rev-meta{color:#64748b;font-size:12px}
.rev-stars-sm{color:#f59e0b;font-size:12px}
.rev-text{margin-top:4px;white-space:pre-wrap}

/* aksi & balasan */
.btn-link{background:transparent;border:0;padding:0;margin:0;color:#e89c9c;cursor:pointer;text-decoration:none;font-size:12px}
.btn-link:hover{text-decoration:underline}
.rev-replies{margin-top:6px;padding-left:44px;border-left:2px solid #f1f5f9}
.rev-reply{display:grid;grid-template-columns:32px 1fr;gap:8px;margin-top:8px}
.rev-avatar.vendor{width:32px;height:32px;background:#e89c9c;color:#fff}
.reply-form textarea.input{min-height:70px}
.reply-actions{display:flex;gap:8px;margin-top:8px}
.vendor-badge{font-size:10px;padding:2px 6px;border-radius:999px;background:#e0f2fe;color:#0369a1}

/* ==== Hero avatar (detail vendor) ==== */
.hero-head{display:flex;align-items:center;gap:12px}
.hero-title h3{margin:0}
.hero-avatar{width:56px;height:56px;border-radius:999px;overflow:hidden;border:4px solid #f1f5f9;background:#e2e8f0;flex:0 0 auto;display:grid;place-items:center}
.hero-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.hero-avatar .ava-fallback{width:100%;height:100%;display:none;align-items:center;justify-content:center;font-weight:800;color:#0f172a}

/* ==== Vendor card cover ==== */
.card .thumbwrap{position:relative;width:100%;aspect-ratio:16/9;background:#f1f5f9;overflow:hidden}
.card .thumbwrap > img.thumb{width:100%;height:100%;object-fit:cover;display:block}


/* Loadmore aman dari mnav */
@media (max-width:991px){
  .loadmore{position:relative;z-index:1;margin-bottom:calc(var(--mnav-h,64px) + 16px) !important}
}

/* ===== Detail > Produk: slider ===== */
#prodslider .hscroll{padding:4px 6px 12px}
@media (min-width:992px){
  #prodslider .hscroll .card{width:360px;min-width:360px;border-radius:14px;overflow:hidden;box-shadow:0 8px 20px rgba(2,8,23,.06)}
}
#prodslider .hscroll .card .thumb{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;border:0;border-radius:0}
#prodslider .hscroll .card .pad{padding:10px 12px}
#prodslider .hscroll .card .pad > strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#prodslider .hscroll .card .pad .muted{color:#475569;font-size:13px}
#prodslider .hscroll .card .pad .muted + .muted{margin-top:4px}
#prodslider .hscroll .card .pad .muted:last-child{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#prodslider .slide-btn{z-index:2}

/* ===== Modal produk ===== */
.prod-modal{position:fixed;inset:0;background:rgba(2,8,23,.55);display:none;z-index:9999}
.prod-modal.show{display:grid;place-items:center}
.prod-modal .dialog{width:min(720px,92vw);max-height:86vh;background:#fff;border-radius:14px;box-shadow:0 20px 50px rgba(2,8,23,.25);overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.prod-modal .hd{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid rgba(2,8,23,.06)}
.prod-modal .body{padding:12px 14px;overflow:auto}
.prod-modal .thumb{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:10px}
.prod-modal .close{appearance:none;border:0;background:#f1f5f9;color:#0f172a;width:32px;height:32px;border-radius:999px;cursor:pointer;font-size:18px;line-height:32px}
.prod-modal .price{font-weight:700;margin:6px 0 4px;color:#0f172a}
.prod-modal .meta{color:#64748b;font-size:13px}
body.modal-open{overflow:hidden}
.prod-modal .dialog{pointer-events:auto}

/* Tombol aksi kartu */
.prodcard .proacts .btn,
.prodcard .proacts .btn-whats{
  background:#22c55e;color:#fff;width:100%;text-align:center;padding:8px 0;border-radius:10px;line-height:1.2
}
.prodcard .proacts a{display:inline-flex;justify-content:center;align-items:center;width:100%;height:36px;border-radius:10px;text-decoration:none;font-size:13px}
.btn-detail{display:inline-block;background:#fff;border:1px solid rgba(139,90,60,.22);color:#8B5A3C}
.btn-detail:hover{filter:brightness(.95)}
.prod-modal .body{line-height:1.55}
.prod-modal .desc p{margin:8px 0}
.prod-modal .prod-desc{margin:8px 0 0 18px;padding:0}
.prod-modal .prod-desc li{margin:4px 0}
.vendor-desc{color:#475569;line-height:1.65}
.vendor-desc p{margin:6px 0 10px}
.v-desc-list{margin:6px 0 4px;padding-left:18px}
.v-desc-list li{margin:4px 0}

/* Hover subcats */
.subcats .pill{cursor:pointer;text-decoration:none}
.subcats .pill:hover{background:#e2e8f0}

/* === END: UI styles (dipindah dari app.js:injectUIStyles) === */

/* Scroll vertikal di list/kartu, scroll horizontal di slider */
.card, .prodcard, .favcard, .grid, main { touch-action: pan-y; }
.hscroll { touch-action: pan-x; }

/* Hilangkan flash biru saat tap di Android */
a { -webkit-tap-highlight-color: rgba(0,0,0,0); }

:root{
  --zw-primary:#e89c9c;     /* cocoa gold */
  --zw-accent:#F6E7E3;      /* blush */
  --zw-dark:#0B1220;
  --zw-line:#E8DED6;
}

/* kontainer floating di sisi kiri, tengah layar */
.zw-sidewidget{
  position:fixed; left:8px; top:50%; transform:translateY(-50%);
  display:grid; gap:8px;
  z-index:1200; /* di atas konten dan mnav */
}

/* tombol kecil: cukup untuk tap 44px */
.zw-sidewidget .zw-more,
.zw-sidewidget .zw-wa{
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center;
  border:1px solid var(--zw-line);
  background:#fff; color:var(--zw-primary);
  box-shadow:0 8px 20px rgba(2,8,23,.08);
  line-height:1; text-decoration:none; cursor:pointer;
  transition:filter .15s ease, transform .15s ease, background .15s;
}
.zw-sidewidget .zw-more:hover,
.zw-sidewidget .zw-wa:hover{ filter:brightness(.97) }
.zw-sidewidget .zw-more:active,
.zw-sidewidget .zw-wa:active{ transform:scale(.98) }

/* label more: tiga titik rapi */
.zw-sidewidget .zw-more{ font-weight:800; font-size:16px; letter-spacing:1px }

/* drawer panel */
.zw-drawer{
  position:absolute; left:54px; top:0; /* muncul di kanan tombol */
  background:#fff; border:1px solid var(--zw-line);
  border-radius:14px; min-width:180px;
  box-shadow:0 18px 40px rgba(2,8,23,.12);
  padding:10px; display:flex; flex-direction:column; gap:6px;

  /* animasi slide-in */
  visibility:hidden; opacity:0;
  transform:translateX(-8px);
  transition:opacity .18s ease, transform .18s ease, visibility 0s .18s;
}
.zw-drawer a{
  display:block; padding:8px 10px; border-radius:10px;
  color:var(--zw-dark); text-decoration:none; font-size:14px;
}
.zw-drawer a:hover{ background:var(--zw-accent) }

/* state terbuka */
.zw-sidewidget.is-open .zw-drawer{
  visibility:visible; opacity:1; transform:translateX(0);
  transition:opacity .18s ease, transform .18s ease;
}
.zw-sidewidget.is-open .zw-more{
  background:var(--zw-primary); color:#fff; border-color:transparent;
}

/* responsif: sedikit naik saat layar pendek */
@media (max-height:560px){
  .zw-sidewidget{ top:56% }
}
@media (min-width:992px){
  /* di desktop tetap tampil, tapi kalau mau sembunyikan cukup aktifkan ini:
  .zw-sidewidget{ display:none }
  */
}
/* === Compact on small phones === */
@media (max-width: 480px){
  :root{ --zw-btn:36px }                /* default 44px → 36px */
  .zw-sidewidget{ left:6px; gap:6px }   /* rapetin ke kiri dikit */

  .zw-sidewidget .zw-more,
  .zw-sidewidget .zw-wa{
    width:var(--zw-btn);
    height:var(--zw-btn);
    border-radius:10px;
    box-shadow:0 6px 14px rgba(2,8,23,.08);   /* shadow lebih ringan */
    font-size:12px;                           /* titik “•••” ikut mengecil */
  }

  /* drawer lebih ringkas */
  .zw-drawer{
    left:calc(var(--zw-btn) + 6px);
    min-width:150px;               /* dari 180px → 150px */
    padding:8px;
    gap:4px;
    border-radius:12px;
  }
  .zw-drawer a{
    padding:8px 8px;
    font-size:13px;                /* dari 14px → 13px */
    border-radius:8px;
  }
}

@media (max-width: 380px){
  :root{ --zw-btn:32px }
  .zw-drawer{ min-width:140px }
  .zw-drawer a{ font-size:12px; padding:7px 8px }
}

:root{
  --mtop-h: 40px;
  --mtop-pad-x: 10px;
  --mtop-city-w: clamp(110px, 28vw, 160px);
  --line:#E8DED6; --primary:#8B5A3C; --bg:#fff;
}

#mtop{
  position: sticky; top: 0; z-index: 120;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: calc(env(safe-area-inset-top,0px) + 8px) var(--mtop-pad-x) 8px;
}

.mtop-row{
  display: grid; align-items: center; gap: 8px;
  /* urutan: lokasi | search(1fr) | tombol | akun  */
  grid-template-columns: var(--mtop-city-w) 1fr 36px 36px;
}

#mtop *{ box-sizing: border-box }
#mtop svg{ width: 18px; height: 18px; display:block }

/* Akun */
.mtop-acc{
  width:36px;height:36px;display:grid;place-items:center;border-radius:10px;
  color:#fff;background:#e89c9c;box-shadow:0 8px 18px rgba(2,8,23,.10);text-decoration:none;
}

/* Lokasi */
.mtop-citywrap{
  min-width:0;width:var(--mtop-city-w);
  display:grid;align-items:center;grid-template-columns:18px 1fr 14px;gap:6px;
  height:var(--mtop-h);padding:0 8px;border:1px solid var(--line);border-radius:12px;background:#fff;
}
.mtop-city{width:100%;min-width:0;border:0;background:transparent;outline:none;font:inherit;color:#0f172a;line-height:1;appearance:none;-webkit-appearance:none}
.mtop-citywrap .pin{color:var(--primary)} .mtop-citywrap .chev{opacity:.7}

/* Search */
.mtop-search{min-width:0;display:grid}
.mtop-input{
  height:var(--mtop-h);border:1px solid var(--line);border-radius:12px;
  padding:0 10px;min-width:0;background:#fff;color:#0f172a;
}
.mtop-input::placeholder{color:#9aa4b2}

/* Tombol search */
.mtop-go{
  width:36px;height:36px;border:0;border-radius:10px;display:grid;place-items:center;
  color:#fff;background:var(--primary);box-shadow:0 10px 18px rgba(139,90,60,.22);
}

/* Fokus */
.mtop-input:focus,.mtop-city:focus{outline:2px solid rgba(139,90,60,.18);outline-offset:2px;border-color:transparent}

/* HP ramping */
@media (max-width:360px){
  :root{ --mtop-city-w: clamp(98px, 26vw, 128px); }
  .mtop-row{ gap:6px }
  .mtop-acc,.mtop-go{ width:34px; height:34px }
  #mtop svg{ width:16px; height:16px }
  .mtop-input{ padding:0 8px; font-size:12px }
}

/* ====== Autocomplete (suggest) ====== */
.mtop { position: relative; z-index: 30; }
.mtop-suggest{
  position:absolute; left:0; right:0; top: calc(100% + 6px);
  background:#fff; border:1px solid #E8DED6; border-radius:12px;
  box-shadow:0 14px 32px rgba(2,8,23,.12);
  max-height: 56vh; overflow:auto; display:none;
}
.mtop-suggest.show{ display:block; }

.mtop-group{ padding:8px 0; }
.mtop-ttl{
  font-size:11px; color:#64748b; font-weight:600;
  padding:8px 12px; text-transform:uppercase; letter-spacing:.4px;
}
.mtop-item{
  display:flex; align-items:flex-start; gap:8px;
  padding:10px 12px; cursor:pointer;
}
.mtop-item:hover, .mtop-item.active{ background:#F6E7E3; }
.mtop-tag{
  font-size:10px; padding:2px 6px; border-radius:999px;
  background:#eef2ff; color:#334155; flex:0 0 auto;
}
.mtop-main{min-width:0; display:grid; gap:2px}
.mtop-name{font-weight:600; color:#0f172a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mtop-sub{font-size:12px; color:#475569; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mtop-hl{ background: linear-gradient(transparent 60%, rgba(139,90,60,.25) 0); }

/* desktop: sembunyikan */
@media (min-width: 992px){
  #mtop { display:none !important; }
}

/* ===== Mobile search suggest ===== */
/* Pastikan parent .msearch .row sudah position:relative (sudah ada di CSS-mu) */
#m-suggest{
  position: absolute;
  left: 0; right: 0; top: calc(100% + 6px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(2,8,23,.12);
  padding: 6px 0;
  max-height: 56vh;
  overflow: auto;
  display: none;              /* hidden by default */
  z-index: 200;               /* di atas .msearch (z-index:80) */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Tampilkan saat JS menambahkan class .show */
#m-suggest.show{ display:block; }

/* Item baris (anchor) */
#m-suggest a{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  text-decoration: none;
  color: #0f172a;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hover/focus */
#m-suggest a:hover,
#m-suggest a:focus{
  background: var(--accent);  /* #F6E7E3 */
  outline: none;
}

/* “Vendor/Produk” chip di depan */
#m-suggest .tag{
  flex: 0 0 auto;
  font-size: 10.5px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #eef2ff;
  color: #334155;
}

/* Teks tambahan yang samar */
#m-suggest .muted{ color:#64748b; }

/* Sedikit kompak di layar sangat sempit */
@media (max-width:360px){
  #m-suggest a{ padding: 9px 10px; }
}