/* ===== Baseline ===== */
:root{
  --hero-from: #f6f9ff;
  --hero-to:   #fff;
  --brand-1:   #111827;
  --brand-2:   #2563eb;
  --radius-xl: 1.25rem;
}
html,body{ font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol"; }

.pt-safe{ padding-top: max(env(safe-area-inset-top), 0px); }
.pb-safe{ padding-bottom: max(env(safe-area-inset-bottom), 0px); }

/* ===== Hero / Navbar ===== */
.hero{
  background: linear-gradient(180deg,var(--hero-from),var(--hero-to));
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.navbar-brand{ letter-spacing:.2px; }
.brand-logo{
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:12px; background:#111827; color:#fff; font-size:1.1rem;
  box-shadow:0 6px 16px rgba(17,24,39,.25);
}
.text-gradient{
  background: linear-gradient(90deg,#111827, #2563eb 60%, #4f46e5);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.search-input{ box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }

/* ===== Chips kategori ===== */
.btn-chip{
  --_bg:#fff; --_bd:rgba(0,0,0,.1); --_fg:#111827;
  background:var(--_bg); color:var(--_fg); border:1px solid var(--_bd);
  border-radius:999px; padding:.45rem .9rem; font-weight:500;
}
.btn-chip:hover{ transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.06); }
.btn-chip.active{ background:#111827; color:#fff; border-color:#111827; }

/* ===== Buttons subtle (melengkapi Bootstrap) ===== */
.btn-danger-subtle{
  background:#fff1f2; color:#b91c1c; border:1px solid #fecaca;
}
.btn-danger-subtle:hover{ background:#fee2e2; color:#991b1b; }
.btn-action{ border-radius:12px; }

/* ===== Cards Produk ===== */
.product-card{
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 28px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease;
  background: #fff;
}
.product-card .card-body{ padding: .9rem .9rem 1rem; }
.hover-lift:hover{ transform: translateY(-4px); box-shadow:0 14px 34px rgba(0,0,0,.10); }

.product-media{ background: #f3f4f6; border-top-left-radius: var(--radius-xl); border-top-right-radius: var(--radius-xl); overflow: hidden; }
.product-media img{ width:100%; height:100%; object-fit:cover; display:block; }

.price-pill{
  position:absolute; right:.55rem; bottom:.55rem;
  background: rgba(17,24,39,.85); color:#fff; padding:.35rem .55rem;
  border-radius: 10px; font-size:.8rem; font-weight:600; backdrop-filter: saturate(140%) blur(4px);
}

/* ===== Utilities ===== */
.clamp-2{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.empty-state .icon-wrap{
  width:72px; height:72px; border-radius:16px; background:#f3f4f6; color:#6b7280;
  display:grid; place-items:center; font-size:2rem;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.scroller{ overflow:auto; scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent; }
.scroller::-webkit-scrollbar{ height:8px; }
.scroller::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:999px; }

/* ===== Toasts ===== */
.toast{ border-radius:14px; }
.toast + .toast{ margin-top:.5rem; }

/* ===== Footer ===== */
.footer{ background: linear-gradient(180deg, #fff, #fafafa); }

/* ===== Responsive tweaks ===== */
@media (max-width: 576px){
  .search-input{ font-size:16px; } /* hindari zoom di iOS */
}

/* ===== Dark mode (opsional, mengikuti preferensi OS) ===== */
@media (prefers-color-scheme: dark){
  :root{ --hero-from:#0b0f1a; --hero-to:#0e1422; --brand-1:#e5e7eb; }
  body{ background:#0e1422; color:#e5e7eb; }
  .hero{ border-bottom-color: rgba(255,255,255,.08); }
  .brand-logo{ background:#111827; }
  .btn-chip{ --_bg:#0f172a; --_bd:rgba(255,255,255,.12); --_fg:#e5e7eb; }
  .btn-chip.active{ background:#2563eb; border-color:#2563eb; }
  .product-card{ background:#0f172a; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
  .product-media{ background:#111827; }
  .bg-body-secondary{ background-color:#111827 !important; }
  .bg-white{ background:#0f172a !important; }
  .footer{ background: linear-gradient(180deg,#0f172a,#0e1422); }
  .btn-danger-subtle{ background:#2b1214; color:#fda4af; border-color:#7f1d1d; }
  .btn-danger-subtle:hover{ background:#3b181a; }
}