/* ============================================================
   MMJ RESKIN — selaraskan halaman shop dengan desain baru
   (hitam tinta + krem hangat + merah sebagai AKSEN, font Plus Jakarta Sans)
   Dimuat SETELAH mmj-shop.css. Tidak mengubah struktur / JS.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --ink:#14110F;
  --ink-soft:#2a2521;
  --cream:#FAF6F0;
  --cream-2:#F2EBE0;
  --red-soft:#ff8a93;
}

/* ---- Font global → Plus Jakarta Sans ---- */
body,
.mmj-section-h, .mmj-section-tag, .mmj-page-header h1, .mmj-page-tag,
.mmj-card-title, .mmj-trust-text, .mmj-trust-text strong, .mmj-halal-text,
.mmj-brand-text .brand-name, .mmj-brand-text .brand-sub,
.btn, .navbar, .form-control, .form-select{
  font-family:"Plus Jakarta Sans","Noto Sans JP",system-ui,-apple-system,sans-serif !important;
}
body{ background:var(--cream) !important; color:var(--ink); }

/* ---- Topbar & Nav ---- */
.mmj-topbar{ background:var(--ink) !important; border-bottom:none !important; }
.mmj-nav{ background:rgba(250,246,240,.85) !important; backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); }
.mmj-brand-text .brand-name{ letter-spacing:-.01em; }
.mmj-brand-text .brand-sub{ letter-spacing:.2em; }

/* ---- Page header → krem terang (selaras hero homepage & founder) ---- */
.mmj-page-header{
  background:var(--cream) !important;
  color:var(--ink) !important;
}
.mmj-page-header::before{ opacity:0 !important; }
.mmj-page-header::after{ opacity:0 !important; }
.mmj-page-deco{ opacity:0 !important; }
.mmj-page-tag{ color:#D81324 !important; letter-spacing:.18em !important; }
.mmj-page-header h1{ color:var(--ink) !important; letter-spacing:-.02em !important; }
.mmj-page-header h1 .accent{
  color:#D81324 !important;
  background:none !important; -webkit-text-fill-color:#D81324 !important;
}
.mmj-page-header p{ color:#5A524B !important; opacity:1 !important; }
.mmj-page-header .breadcrumb a{ color:#5A524B !important; }
.mmj-page-header .breadcrumb a:hover{ color:var(--ink) !important; }
.mmj-page-header .breadcrumb-item.active{ color:#D81324 !important; }
.mmj-page-header .breadcrumb-item + .breadcrumb-item::before{ color:rgba(20,17,15,.35) !important; }

/* ---- Trust strip → kurangi efek pelangi, kalem & premium ---- */
.mmj-trust-icon.trust-ship,
.mmj-trust-icon.trust-pay,
.mmj-trust-icon.trust-frozen{
  background:linear-gradient(135deg,var(--ink-soft),var(--ink)) !important;
}
.mmj-trust-icon.trust-halal{ background:linear-gradient(135deg,#1B7A4B,#15633c) !important; }

/* ---- Section tag → merah aksen ---- */
.mmj-section-tag{ color:#D81324 !important; letter-spacing:.18em !important; }

/* ---- Category chips → aktif ink (lebih kalem dari merah penuh) ---- */
.mmj-cat-chip:hover{
  border-color:var(--ink) !important; color:var(--ink) !important;
  box-shadow:0 6px 14px rgba(20,17,15,.10) !important;
}
.mmj-cat-chip.active{
  background:var(--ink) !important; border-color:var(--ink) !important; color:#fff !important;
  box-shadow:0 8px 20px rgba(20,17,15,.25) !important;
}

/* ---- Product card → poles ---- */
.mmj-card{ border-radius:20px !important; }
.mmj-card-img{ background:linear-gradient(135deg,var(--cream-2),var(--cream)) !important; }

/* ---- Toolbar focus ring → ink ---- */
.form-control:focus, .form-select:focus{
  border-color:var(--ink) !important;
  box-shadow:0 0 0 .18rem rgba(20,17,15,.10) !important;
}

/* ---- Footer → ink konsisten ---- */
.footer{ background:var(--ink) !important; }

/* ---- Back-to-top & FAB tetap, hanya samakan tone tombol primary (merah) ---- */
.back-to-top.btn-primary{ background:#D81324 !important; }

/* ============================================================
   CHROME SERAGAM — topbar, nav, footer identik dgn homepage
   Class diberi awalan aman (mmjx-) agar tidak bentrok Bootstrap.
   ============================================================ */
.mmjx-wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }

/* ---- Topbar LAMA (markup .mmj-topbar) → recolor ink utk halaman sekunder ---- */
.mmj-topbar{ background:var(--ink) !important; border-bottom:none !important; }
/* ---- Footer LAMA (centered legal, inline navy) → ink ---- */
footer[style*="0B2154"]{ background:var(--ink) !important; }

/* ---- Topbar baru (sama dgn homepage) ---- */
.topbar{ background:var(--ink); color:#c9c2b9; font-size:.78rem; }
.topbar .mmjx-wrap{ display:flex; justify-content:space-between; align-items:center; height:38px; gap:16px; }
.topbar a{ color:#c9c2b9; transition:color .2s; }
.topbar a:hover{ color:#fff; }
.topbar .tb-info{ display:flex; gap:18px; align-items:center; white-space:nowrap; min-width:0; }
.topbar .tb-info .sep{ opacity:.4; }
.topbar .tb-right{ display:flex; gap:16px; align-items:center; }
.topbar .tb-social{ display:flex; gap:12px; font-size:.9rem; }
.topbar .lang{ display:flex; gap:2px; align-items:center; border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:2px; }
.topbar .lang a{ padding:2px 9px; border-radius:999px; font-weight:600; font-size:.72rem; line-height:1.6; }
.topbar .lang a.active{ background:#fff; color:var(--ink); }
@media(max-width:760px){
  .topbar .hide-sm{ display:none; }
  .topbar .mmjx-wrap{ gap:8px; }
  .topbar .tb-info{ font-size:.66rem; overflow:hidden; text-overflow:ellipsis; flex:1; }
}

/* ---- Brand navbar → identik dgn homepage (.brand) ---- */
.mmj-brand{ gap:12px !important; padding:8px 4px !important; }
.mmj-brand img{ height:42px !important; width:42px !important; object-fit:contain !important; }
.mmj-brand:hover img{ transform:none !important; }
.mmj-brand-text{ line-height:1.15 !important; gap:4px; }
.mmj-brand-text .brand-name{
  color:#14110F !important; font-weight:800 !important;
  font-family:"Plus Jakarta Sans","Noto Sans JP",sans-serif !important;
  font-size:1.02rem !important; letter-spacing:-.01em !important; margin:0 !important;
}
.mmj-brand-text .brand-sub{
  color:#8C8278 !important; font-size:.6rem !important; font-weight:600 !important;
  font-family:"Plus Jakarta Sans","Noto Sans JP",sans-serif !important;
  letter-spacing:.22em !important; text-transform:uppercase !important; margin-top:0 !important;
}

/* ---- Nav links → gaya pill seperti homepage (matikan garis bawah merah) ---- */
.navbar.mmj-nav .nav-link{
  color:#5A524B !important; font-weight:600 !important; font-size:.92rem !important;
  letter-spacing:0 !important; border-radius:999px !important; padding:10px 16px !important;
  text-transform:none !important;
}
.navbar.mmj-nav .nav-link::before{ display:none !important; }
.navbar.mmj-nav .nav-link:hover{ color:#14110F !important; background:rgba(20,17,15,.05) !important; }
.navbar.mmj-nav .nav-link.active{ color:#14110F !important; font-weight:700 !important; background:rgba(20,17,15,.06) !important; }
.navbar.mmj-nav .nav-link.active::before{ display:none !important; }
.mmj-cart-btn{ background:#14110F !important; color:#fff !important; }
/* Tombol "Kembali ke Toko" */
.mmjx-back{ display:inline-flex;align-items:center;gap:7px;background:var(--ink);color:#fff !important;font-weight:700;font-size:.86rem;padding:10px 18px;border-radius:999px;text-decoration:none;transition:transform .2s,background .2s;white-space:nowrap; }
.mmjx-back:hover{ background:#2a2521;transform:translateY(-1px); }
@media(max-width:991px){ .mmjx-back span{ display:none; } .mmjx-back{ padding:10px 13px; } }

/* ---- Footer baru (sama dgn homepage) ---- */
.mmjx-footer{ background:var(--ink); color:#b8b0a6; padding:72px 0 0; }
.mmjx-footer .foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:48px; }
.mmjx-footer h4{ color:#fff; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:20px; font-weight:700; }
.mmjx-footer .foot-brand .bn{ color:#fff; font-weight:800; font-size:1.15rem; margin-bottom:12px; display:flex; align-items:center; gap:10px; }
.mmjx-footer .foot-brand .bn img{ width:42px; height:42px; object-fit:contain; background:#fff; border-radius:11px; padding:6px; box-shadow:0 4px 14px rgba(0,0,0,.25); }
.mmjx-footer .foot-brand p{ font-size:.9rem; margin-bottom:18px; max-width:34ch; }
.mmjx-footer .foot-contact{ list-style:none; padding:0; margin:0; }
.mmjx-footer .foot-contact li{ display:flex; gap:10px; font-size:.88rem; margin-bottom:10px; }
.mmjx-footer .foot-links a{ display:block; font-size:.9rem; margin-bottom:11px; color:#b8b0a6; transition:color .2s,padding-left .2s; }
.mmjx-footer .foot-links a:hover{ color:#fff; padding-left:4px; }
.mmjx-footer .foot-social{ display:flex; gap:10px; margin-top:8px; }
.mmjx-footer .foot-social a{ width:38px; height:38px; border-radius:10px; border:1px solid rgba(255,255,255,.15); display:grid; place-items:center; color:#b8b0a6; transition:.25s; }
.mmjx-footer .foot-social a:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.mmjx-footer .foot-bot{ border-top:1px solid rgba(255,255,255,.10); padding:22px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.8rem; }
.mmjx-footer .foot-bot a{ color:#b8b0a6; }
.mmjx-footer .foot-bot a:hover{ color:#fff; }
@media(max-width:880px){ .mmjx-footer .foot-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:540px){ .mmjx-footer .foot-grid{ grid-template-columns:1fr; } }