/* ==========================================================================
   TL Coff theme — minisite shop-tl-coff.html
   Sumber: docs/master/product/tl_coff (espresso/gelap, kopi, krem, emas)
   Fork minisite baru = salin file ini, ganti nilai var + konten. Core tidak disentuh.
   ========================================================================== */

:root {
  --mj-primary: #3a2314;          /* espresso — teks heading & nav aktif */
  --mj-primary-contrast: #ffffff;
  --mj-accent: #96521f;           /* copper/caramel untuk hover/kicker */
  --mj-accent-contrast: #ffffff;
  --mj-price: #8c6d1f;            /* emas AA di surface terang; di hero gelap pakai #e6b94c */
  --mj-price-on-dark: #e6b94c;    /* emas hangat di band gelap */
  --mj-bg: #faf4ec;               /* krem */
  --mj-bg-deep: #241609;          /* hero band espresso gelap ala master */
  --mj-bg-deep-text: #f2e9dd;
  --mj-surface: #ffffff;
  --mj-text: #2e2016;
  --mj-text-muted: #6b5748;
  --mj-border: #e6d9c7;
}

/* ---------- Hero gelap khas TL Coff ---------- */
.mj-hero--tl-coff {
  background:
    radial-gradient(1100px 500px at 12% -10%, rgba(150, 82, 31, .45), transparent 60%),
    var(--mj-bg-deep);
  color: var(--mj-bg-deep-text);
  padding-block: var(--mj-section-pad);
}
.mj-hero--tl-coff h1,
.mj-hero--tl-coff h2 { color: #ffffff; }
.mj-hero--tl-coff .mj-hero__lead { color: var(--mj-bg-deep-text); opacity: .92; }
.mj-hero--tl-coff .mj-price { color: var(--mj-price-on-dark); }
.mj-hero--tl-coff .mj-badge { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); color: var(--mj-bg-deep-text); }
.mj-hero--tl-coff .mj-cta--wa { background: #ffffff; color: var(--mj-primary); }
.mj-hero--tl-coff .mj-cta--wa:hover { opacity: .9; }
.mj-hero--tl-coff .mj-hero__media img { background: transparent; } /* PNG kemasan tanpa bg-putih di hero gelap */

/* ---------- Kicker copper ---------- */
.mj-kicker { color: var(--mj-accent); }

/* ---------- Trust bar chip terpusat di atas krem ---------- */
.mj-trustbar__item i { color: var(--mj-primary); }
.mj-trustbar--tl-coff { background: var(--mj-bg); }
.mj-trustbar--tl-coff .mj-trustbar__item { background: var(--mj-surface); }
.mj-trustbar strong { color: var(--mj-text); }

/* ---------- Badge BPOM ---------- */
.mj-badge--tl-coff { color: var(--mj-primary); border-color: #e0cdb2; background: #fdf8f1; }

/* ---------- Komposisi: definisi list, bukan grid kartu seragam ---------- */
.mj-compos { max-width: 680px; }
.mj-compos dt { font-weight: 600; margin-top: .6em; }
.mj-compos dd { margin: 0 0 .35em; color: var(--mj-text-muted); display: flex; justify-content: space-between; gap: 1rem; }
.mj-compos dd span:last-child { font-variant-numeric: tabular-nums; color: var(--mj-text); }

/* ---------- Aturan pakai & peringatan ---------- */
.mj-usage li { margin-bottom: .5rem; }
.mj-usage .mj-disclaimer strong { color: var(--mj-text); }

/* ---------- Media grid produk (sachet + box) ---------- */
.mj-product-visual { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--mj-space-2); align-items: end; }
.mj-product-visual img { mix-blend-mode: multiply; } /* PNG dengan bg terang menyatu di surface terang */
@media (max-width: 700px) {
  .mj-product-visual { grid-template-columns: 1fr 1fr; }
  .mj-product-visual img { max-height: 260px; object-fit: contain; }
}

/* ---------- Section head di surface terang ---------- */
.mj-shopsin h2 { color: var(--mj-primary); }