:root{ --yellow:#FFD400; --black:#0a0a0a; --gray:#f6f6f6; }
*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',sans-serif}
body{background:white;color:var(--black)}
.container{width:92%;max-width:1150px;margin:auto;padding:20px 0}
.topbar{background:var(--black);color:white;padding:12px 0;border-bottom:3px solid var(--yellow);position:sticky;top:0;z-index:20}
.nav{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.logo{font-weight:900;font-size:1.5rem}.logo span{color:var(--yellow)}
.loc{font-size:0.85rem;opacity:0.8}
.btn-wa{background:var(--yellow);color:var(--black);padding:9px 18px;border-radius:25px;text-decoration:none;font-weight:800}

/* YOUR SHOP.JPG AS HERO - THIS IS THE CLIENT VIEW */
.hero{
  background: linear-gradient(rgba(0,0,0,0.82), rgba(0,0,0,0.65)), url('shop.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color:white;
  text-align:center;
  padding:90px 0 80px;
}
.badge{background:var(--yellow);color:var(--black);display:inline-block;padding:6px 14px;border-radius:20px;font-weight:800;font-size:0.8rem;margin-bottom:12px}
.hero h1{font-size:3.2rem;line-height:1.1;font-weight:900}
.hero h1 span{color:var(--yellow)}
.hero p{max-width:650px;margin:15px auto;opacity:0.95}
.btn{display:inline-block;padding:13px 30px;border-radius:30px;text-decoration:none;font-weight:900;margin:6px}
.btn-primary{background:var(--yellow);color:var(--black)}
.btn-outline{border:2px solid white;color:white}
.hero-contact{margin-top:18px;background:rgba(0,0,0,0.5);display:inline-block;padding:8px 15px;border-radius:8px;font-size:0.9rem;font-weight:700}
.wholesale{background:var(--yellow);text-align:center;padding:18px;font-weight:900;color:var(--black)}
.search{max-width:600px;margin:25px auto}.search input{width:100%;padding:14px 20px;border-radius:30px;border:2px solid #111}
.filters{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:20px}
.filter{padding:8px 16px;border-radius:20px;border:1px solid #ddd;background:white;cursor:pointer;font-weight:600}
.filter.active{background:var(--black);color:var(--yellow)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.card{border:1px solid #eee;border-radius:12px;overflow:hidden;box-shadow:0 4px 10px rgba(0,0,0,0.05)}
.card img{width:100%;height:160px;object-fit:cover}
.info{padding:12px}.price{font-weight:900;font-size:1.2rem}
.btn-order{display:block;background:var(--black);color:var(--yellow);text-align:center;padding:10px;border-radius:8px;text-decoration:none;margin-top:10px;font-weight:800}
footer{background:var(--black);color:white;padding:30px 0 0;margin-top:40px}
footer h3,footer h4{color:var(--yellow)}
.copy{text-align:center;border-top:1px solid #222;padding:12px;margin-top:20px;opacity:0.6;font-size:0.8rem}
@media(max-width:700px){.hero h1{font-size:2.2rem}}