@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&family=Poppins:wght@300;400&display=swap');

/* RESET */
* { box-sizing:border-box; margin:0; padding:0; }

/* BODY */
body {
  background:#0b0b0b;
  color:#eee;
  font-family:Poppins, sans-serif;
  overflow-x: hidden; /* prevent horizontal scroll */
}

/* HEADER */
header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 40px;
  border-bottom:1px solid #222;
}

h1 {
  font-family:'Playfair Display', serif;
  color:#d4af37;
  letter-spacing:2px;
}

nav a {
  margin-left:20px;
  color:#d4af37;
  text-decoration:none;
}

.hamburger { 
  display:none; 
  color:#d4af37; 
  font-size:24px; 
}

/* SEARCH */
.search-bar { text-align:center; margin:30px; }
.search-bar input {
  padding:10px 20px;
  border-radius:25px;
  border:1px solid #d4af37;
  background:#000;
  color:#fff;
}

/* FILTER BAR - HORIZONTAL (DESKTOP) */
.filter-bar {
  text-align:center;
  margin-bottom:20px;
}
.filter-bar button {
  background:transparent;
  border:1px solid #d4af37;
  color:#d4af37;
  padding:8px 18px;
  margin:5px;
  cursor:pointer;
}
.filter-bar button:hover {
  background:#d4af37;
  color:#000;
}

.filter-bar-vertical {
  display:flex;
  flex-direction: column;
  width: 100%;
  max-height:0;
  overflow:hidden;
  transition: height 0.3s ease;
}
.filter-bar-vertical.show {
  /* height will be set dynamically via JS */
}

/* PRODUCT GRID */
.product-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:25px;
  padding:30px;
}

/* PRODUCT CARD */
.product-card {
  border:1px solid #222;
  padding:25px;
  text-align:center;
  position:relative;
}

/* BADGES */
.badge {
  position:absolute;
  top:15px;
  left:15px;
  font-size:11px;
  padding:5px 12px;
  border:1px solid #d4af37;
  color:#d4af37;
  z-index:5;
}
.badge.best {
  background:#d4af37;
  color:#000;
}

/* PRODUCT IMAGES */
.product-images {
  position:relative;
  height:180px;
  margin-bottom:15px;
}
.product-images img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0;
  transition:0.6s;
  filter:drop-shadow(0 0 18px rgba(212,175,55,0.3));
}
.product-images img:first-child { opacity:1; }

/* TEXT */
.brand { color:#d4af37; font-size:13px; }
.details { font-size:13px; color:#aaa; }
.price { margin:10px 0; }

/* STOCK */
.low-stock { color:#ff4d4d; }

/* BUTTON */
.buy-btn {
  margin-top:14px;
  background:#000;
  border:1px solid #d4af37;
  color:#d4af37;
  padding:7px 18px;
  cursor:pointer;
  font-size:12px;
}
.buy-btn:hover {
  background:#d4af37;
  color:#000;
}

/* FLOATING WHATSAPP */
.whatsapp-float {
  position:fixed;
  right:25px;
  bottom:25px;
  border:1px solid #d4af37;
  padding:12px 20px;
  color:#d4af37;
}

/* BRAND TOGGLE (MOBILE) */
.brand-toggle {
  display:none;
  background: transparent;
  color: #d4af37;
  border: 1px solid #d4af37;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  margin-bottom: 10px;
  font-family: 'Poppins', sans-serif;
  font-size:16px;
}

/* RESPONSIVE - MOBILE */
@media(max-width:768px){

  .hamburger { display:block; }

  /* Show brand toggle */
  .brand-toggle { display:block; }

  /* Vertical filter hidden by default, show when toggled */
  .filter-bar-vertical { 
    display:none; 
    max-height:300px; 
    overflow-y:auto;
  }
  .filter-bar-vertical.show { display:flex; }

  /* Filter buttons stacked full width */
  .filter-bar-vertical button {
    width:100%;
    margin:5px 0;
    text-align:left;
  }

  /* Adjust grid for small screens */
  .product-grid {
    padding:20px 10px;
    gap:15px;
  }

  /* Reduce card padding */
  .product-card {
    padding:15px;
  }
  
  .brand-btn.selected {
  background: #d4af37;
  color: #000;
}