/* ===== MARISSA HEALTHCARE - Brand CSS ===== */
:root{
  --hijau:#B01E68; --gold:#F0D080; --krim:#FFF8E7;
  --pink:#E91E8C; --pink-lembut:#FCE4F1;
  --teks:#2a2a2a; --kelabu:#777; --putih:#fff;
  --bayang:0 4px 18px rgba(0,0,0,.08);
  --bulat:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Nunito',-apple-system,Segoe UI,sans-serif;
  color:var(--teks);background:var(--krim);line-height:1.6;
}
h1,h2,h3,h4{font-family:'Fredoka',sans-serif;font-weight:600;color:var(--hijau)}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 18px}

/* ===== HEADER ===== */
.topbar{background:var(--hijau);color:#fff;font-size:.82rem;text-align:center;padding:7px}
header.utama{background:#fff;box-shadow:var(--bayang);position:sticky;top:0;z-index:50}
.head-in{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;max-width:1180px;margin:0 auto}
.logo{font-family:'Fredoka';font-size:1.5rem;font-weight:700;color:var(--hijau)}
.logo span{color:var(--pink)}
.nav a{margin-left:22px;font-weight:600;color:var(--hijau)}
.cart-btn{position:relative;background:var(--pink);color:#fff;padding:10px 18px;border-radius:30px;font-weight:700}
.cart-badge{position:absolute;top:-7px;right:-7px;background:var(--gold);color:var(--hijau);border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700}

/* ===== HERO ===== */
.hero{background:linear-gradient(135deg,var(--pink-lembut),var(--krim));padding:48px 0;text-align:center}
.hero h1{font-size:2.2rem;margin-bottom:10px}
.hero p{color:var(--kelabu);font-size:1.05rem;max-width:620px;margin:0 auto}

/* ===== GRID PRODUK ===== */
.seksyen-tajuk{text-align:center;margin:38px 0 24px}
.seksyen-tajuk h2{font-size:1.7rem}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding-bottom:40px}
.kad{background:#fff;border-radius:var(--bulat);overflow:hidden;box-shadow:var(--bayang);transition:transform .2s;display:flex;flex-direction:column}
.kad:hover{transform:translateY(-5px)}
.kad-img{aspect-ratio:1/1;background:var(--pink-lembut);overflow:hidden}
.kad-img img{width:100%;height:100%;object-fit:cover}
.kad-isi{padding:14px;display:flex;flex-direction:column;flex:1}
.kad-nama{font-weight:700;font-size:.95rem;color:var(--hijau);margin-bottom:8px;min-height:42px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.harga{font-size:1.25rem;font-weight:800;color:var(--pink)}
.harga-coret{font-size:.85rem;color:var(--kelabu);text-decoration:line-through;margin-left:6px}
.btn{display:inline-block;text-align:center;background:var(--hijau);color:#fff;border:none;padding:12px 18px;border-radius:30px;font-weight:700;cursor:pointer;font-family:'Nunito';font-size:.95rem;width:100%;margin-top:auto}
.btn:hover{background:#8A1550}
.btn-gold{background:var(--gold);color:var(--hijau)}
.btn-pink{background:var(--pink)}
.label-draf{display:inline-block;background:#eee;color:#999;font-size:.7rem;padding:3px 8px;border-radius:12px;margin-bottom:6px}

/* ===== DETAIL PRODUK ===== */
.detail{display:grid;grid-template-columns:1fr 1fr;gap:38px;padding:38px 0}
.galeri-utama{border-radius:var(--bulat);overflow:hidden;box-shadow:var(--bayang);background:#fff}
.galeri-kecil{display:flex;gap:10px;margin-top:12px}
.galeri-kecil img{width:74px;height:74px;object-fit:cover;border-radius:10px;cursor:pointer;border:2px solid transparent}
.galeri-kecil img.aktif{border-color:var(--pink)}
.detail h1{font-size:1.6rem;margin-bottom:14px}
.detail .harga{font-size:2rem}
.qty{display:flex;align-items:center;gap:12px;margin:20px 0}
.qty button{width:40px;height:40px;border-radius:50%;border:2px solid var(--hijau);background:#fff;color:var(--hijau);font-size:1.2rem;font-weight:700;cursor:pointer}
.qty input{width:56px;text-align:center;font-size:1.1rem;border:1px solid #ddd;border-radius:8px;padding:8px}
.huraian{background:#fff;border-radius:var(--bulat);padding:26px;box-shadow:var(--bayang);margin-bottom:40px}
.huraian h3,.huraian h4{margin:16px 0 8px}
.huraian ul{padding-left:22px;margin:8px 0}
.huraian li{margin-bottom:5px}

/* ===== CART & CHECKOUT ===== */
.box{background:#fff;border-radius:var(--bulat);padding:26px;box-shadow:var(--bayang);margin:24px 0}
.cart-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid #eee}
.cart-row img{width:70px;height:70px;object-fit:cover;border-radius:10px}
.cart-row .info{flex:1}
.cart-total{font-size:1.4rem;font-weight:800;color:var(--pink);text-align:right;margin-top:16px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .full{grid-column:1/-1}
label{display:block;font-weight:700;margin-bottom:6px;font-size:.9rem}
input,textarea{width:100%;padding:12px;border:1px solid #ddd;border-radius:10px;font-family:'Nunito';font-size:1rem}
input:focus,textarea:focus{outline:none;border-color:var(--pink)}

/* ===== FOOTER ===== */
footer{background:var(--hijau);color:#fff;padding:34px 0;text-align:center;margin-top:40px}
footer a{color:var(--gold)}

/* ===== MESEJ ===== */
.kosong{text-align:center;padding:60px 20px;color:var(--kelabu)}
.alert{padding:14px 18px;border-radius:10px;margin:16px 0;font-weight:600}
.alert-ok{background:#FCE4F1;color:#B01E68}
.alert-err{background:#fdecec;color:#c0392b}

/* ===== RESPONSIVE ===== */
@media(max-width:980px){.grid{grid-template-columns:repeat(3,1fr)}.detail{grid-template-columns:1fr}}
@media(max-width:680px){
  .grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .nav{display:none}
  .hero h1{font-size:1.6rem}
  .form-grid{grid-template-columns:1fr}
  .head-in{padding:12px}
}
@media(max-width:400px){.grid{grid-template-columns:1fr}}