:root{
  --bg-deep:#2a332d;
  --bg-deeper:#232b26;
  --gold:#b69a5d;
  --gold-2:#d8c089;
  --text:#f3f3f0;
  --brand:#6f4c22;
}
body{font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;background:#fff; color:#1c1c1c;}
/* Brand / account strip */
.brand-bar{background:var(--brand);color:#fff;}
.brand-bar a{color:#fff;text-decoration:none}
/* Search and nav */
.search-pill{border-radius:999px; overflow:hidden;}
.nav-cats{background:#fff;border-bottom:1px solid #eee}
.nav-cats .nav-link{color:#222;font-weight:600}
.nav-cats .nav-link:hover{color:var(--brand)}

/* HERO */
.hero{position:relative;background:var(--bg-deep);color:var(--text);overflow:hidden;min-height:70vh;display:flex;align-items:center;}
.hero .frame{position:absolute;inset:2rem; border:3px solid rgba(182,154,93,.35); border-radius:8px; pointer-events:none;}
.hero .frame::before{content:"";position:absolute;inset:1.5rem; border:3px solid rgba(216,192,137,.2); border-radius:8px;}
.hero .copy h1{font-family:"Cormorant Garamond", serif; font-weight:700; letter-spacing:.02em; line-height:1.1;}
.hero .copy .sub{font-family:"Cormorant Garamond", serif; font-size:1.35rem; opacity:.95}

/* product visuals */
.jewel{ position:absolute; max-width:360px; filter:drop-shadow(0 20px 40px rgba(0,0,0,.5)); }
.jewel.left{ left:2vw; bottom:2vh; }
.jewel.right{ right:2vw; bottom:4vh; }
.jewel img{ width:100%; height:auto; border-radius:24px; }
.panel{ position:absolute; width:36vw; max-width:520px; aspect-ratio:3/4; background:linear-gradient(145deg, #131816 0%, #1b211e 60%, #0f1412 100%); border:2px solid rgba(182,154,93,.25); border-radius:18px; }
.panel.left{ left:0; top:8vh; transform:skewX(-6deg); }
.panel.right{ right:0; top:12vh; transform:skewX(6deg); }
.btn-gold{ background:transparent; color:var(--text); border:2px solid var(--gold); padding:.9rem 1.75rem; border-radius:999px; font-weight:700; letter-spacing:.03em; }
.btn-gold:hover{ background:var(--gold); color:#1a1a1a; }

/* MPJ Best */
.best-section{background:#fff}
.best-section h2{font-family:"Cormorant Garamond",serif;font-weight:700}
.product-card{border:1px solid #eee;border-radius:18px;overflow:hidden;background:#fff;position:relative;transition:transform .2s ease, box-shadow .2s ease}
.product-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.08)}
.badge-chip{background:#f7f4ea;border:1px solid #e9e1c8;color:#7a672f;font-weight:700;border-radius:999px;padding:.25rem .55rem;font-size:.75rem}
.wishlist{position:absolute;top:.85rem;right:.85rem;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid #eee}
.wishlist .bi{font-size:1rem;color:#6c757d}
.wishlist.active .bi{color:#c1121f}
.price{font-weight:800;font-size:1.05rem}
.mrp{color:#9aa0a6;text-decoration:line-through;margin-left:.35rem}
.code{font-size:.82rem;color:#6f6f6f}
.cart-fab{position:absolute;right:.6rem;bottom:.6rem;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#7a5b2b;color:#fff}
.cart-fab .bi{font-size:1.2rem}
.thumb{aspect-ratio:4/3;object-fit:cover;background:#fff}

/* Category grid */
.category-section{padding:60px 0;background: linear-gradient(90deg, #d3a15e, #6f4c22);}
.category-card{background:#fff;border-radius:15px;overflow:hidden;text-align:center;transition: all 0.3s ease;border: none;}
.category-card:hover{transform: translateY(-8px); box-shadow:0 10px 25px rgba(0,0,0,0.2)}
.category-card img{width:100%;height:240px;object-fit:cover}
.category-card h5{margin:15px 0;font-weight:600;color:#2c2c2c}

/* Trending */
.trend-wrap{background:#fff}
.trend-title{font-family:'Cormorant Garamond', serif; font-weight:700; color:#2b2b2b}
.t-card{border:1px solid #eee; border-radius:16px; overflow:hidden; background:#fff; position:relative; transition:transform .2s ease, box-shadow .2s ease}
.t-card:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,.08)}
.t-badge{background:#f7f4ea; border:1px solid #e9e1c8; color:#7a672f; border-radius:999px; padding:.3rem .6rem; font-size:.8rem; font-weight:700}
.t-heart{position:absolute; top:.8rem; right:.8rem; width:36px; height:36px; background:#fff; border:1px solid #eee; border-radius:50%; display:grid; place-items:center}
.t-heart.active .bi{color:#c1121f}
.t-thumb{aspect-ratio:4/3; object-fit:cover; background:#fff}
.t-code{font-size:.85rem; color:#6f6f6f}
.t-price{font-weight:800; font-size:1.05rem}
.t-mrp{color:#9aa0a6; text-decoration:line-through; margin-left:.35rem}
.t-cart{position:absolute;right:.6rem;bottom:.6rem;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#7a5b2b;color:#fff}

/* Budget */
.budget-section{padding:60px 0;background: linear-gradient(180deg, #f4f1ec 0%, #d5a865 100%);}
.budget-card{border-radius: 16px; overflow: hidden; border: none; background: #fff; transition: transform 0.3s ease, box-shadow 0.3s ease;}
.budget-card:hover{transform: translateY(-6px); box-shadow: 0 10px 25px rgba(0,0,0,0.2)}
.budget-card img{width:100%; height:260px; object-fit:cover}
.btn-budget{background-color:#6f4c22;color:#fff;border-radius:999px;font-weight:600;margin-top:12px;padding:8px 22px;}
.btn-budget:hover{background-color:#533819;color:#fff}

/* Gift Section */
.gift-section{padding:60px 0;background: linear-gradient(180deg, #f6f2ec 0%, #d5a865 100%)}
.gift-card{border-radius:16px; overflow:hidden; border:none; background:#fff; transition: transform .3s, box-shadow .3s;}
.gift-card:hover{transform: translateY(-6px); box-shadow:0 12px 28px rgba(0,0,0,.2)}
.gift-card img{width:100%; height:320px; object-fit:cover}
.gift-card h5{font-weight:700; margin:10px 0; color:#1c1c1c}
.gift-card p{color:#6f6f6f; font-size:.9rem; margin-bottom:15px}

/* Video Section */
.video-section{padding-bottom:60px; background:#f8f6f4}
.video-card{border-radius:12px; overflow:hidden; position:relative; background:#000; cursor:pointer; transition: transform .3s, box-shadow .3s;}
.video-card:hover{transform: translateY(-5px); box-shadow:0 12px 24px rgba(0,0,0,.3)}
.video-card video, .video-card img{width:100%; height:auto; display:block}
.play-btn{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:70px; height:70px; background-color:rgba(255,255,255,.85); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2rem; color:#000}

/* Features + About */
.features-section h2{font-family:'Cormorant Garamond', serif; font-weight:700; color:#5a3e1a}
.feature-box{background:#fff4dd;border-radius:12px;padding:25px 15px;box-shadow:0 4px 8px rgba(0,0,0,0.1);text-align:center;transition: transform .3s, box-shadow .3s;}
.feature-box:hover{transform:translateY(-6px); box-shadow:0 8px 20px rgba(0,0,0,.2)}
.feature-box i{font-size:2rem; color:#a57c3c; margin-bottom:10px}
.about-section{padding:60px 0}
.about-section img{border-radius:10px; width:100%; height:auto}
.about-content h3{font-family:'Cormorant Garamond', serif; font-weight:700; color:#3a2b12}
.about-content p{color:#5e5e5e; line-height:1.7; font-size:.95rem}
.btn-gold-solid{background-color:#7a5b2b; color:#fff; border-radius:999px; padding:8px 20px; text-transform:uppercase; font-weight:600}
.btn-gold-solid:hover{background-color:#533819; color:#fff}

/* Footer */
.whatsapp-bar{background-color:#e8fff0; padding:15px 0; display:flex; justify-content:center; align-items:center; gap:12px; font-weight:600; color:#128c7e}
.subscribe-bar{background-color:#fff9ef; padding:20px; text-align:center; border-top:1px solid #eee; border-bottom:1px solid #eee}
.subscribe-bar input{max-width:280px;border-radius:25px;border:1px solid #ccc;padding:8px 15px}
.btn-subscribe{background-color:#7a5b2b;color:#fff;border-radius:50px;padding:8px 20px;border:none}
.footer-top{background-color:#fdf5e6;padding:50px 0 30px}
.footer-top h6{font-weight:700;color:#4b320e;margin-bottom:15px}
.footer-links a{color:#333;text-decoration:none;font-size:.95rem;display:block;margin-bottom:6px}
.footer-links a:hover{color:#a57c3c}
.footer-bottom{background-color:#1e1e1e;color:#bbb;padding:25px 0;font-size:.85rem}
.social-icons a{color:#fff;margin-right:12px;font-size:1.2rem}
/* Responsive tweaks */
@media (max-width:768px){
  .hero{min-height:78vh}
  .panel{display:none}
  .jewel{position:relative; max-width:62%; margin:2rem auto 0; display:block;}
  .jewel.left,.jewel.right{left:auto;right:auto;bottom:auto}
}


/* === New Header Style (MPJ) === */
.header-top{background:#6f4c22;color:#fff;position:sticky;top:0;z-index:1030}
.header-top .brand{display:flex;align-items:center;gap:.5rem;color:#fff;text-decoration:none}
.header-top .brand img{width:50px;height:50px;object-fit:contain}
.search-wrap{flex:1;max-width:620px;margin:0 auto}
.search-pill-outer{background:#fff;border-radius:999px;display:flex;align-items:center;box-shadow:0 2px 8px rgba(0,0,0,.15);overflow:hidden}
.search-pill-outer input{border:0;outline:0;padding:.75rem 1rem;width:100%;border-radius:999px 0 0 999px}
.search-pill-outer .pill-end{width:48px;height:48px;border-radius:50%;background:#fdecc8;display:flex;align-items:center;justify-content:center;margin-right:.35rem}
.top-icons{display:flex;gap:22px;align-items:center}
.icon-item{display:flex;flex-direction:column;align-items:center;color:#fff;text-decoration:none}
.icon-item i{font-size:1.25rem}
.icon-item small{font-size:.75rem;opacity:.95;margin-top:.15rem;color:#fff}
.top-phone{white-space:nowrap;font-weight:600;color:#fff;text-decoration:none}
.nav-cats{background:#fff6e6;border-bottom:1px solid #edd5aa;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.nav-cats .nav-link{color:#2b2b2b;font-weight:700;letter-spacing:.02em}
.nav-cats .nav-link .bi{font-size:.85rem;opacity:.7;margin-left:.25rem}
.nav-cats .hamburger{margin-left:auto}
@media (max-width:992px){
  .top-icons{display:none}
  .search-wrap{max-width:100%}
}

/* Make category bar scrollable only on mobile */
.nav-cats .nav{overflow:auto}
@media (min-width:992px){
  .nav-cats .nav{overflow:visible}
}