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

:root{
  --gold-gradient: linear-gradient(135deg,#d4af37,#f5e2a7);
  --black:#111;
  --muted:#666;
  --bg:#fff;
  --card-shadow: 0 6px 18px rgba(17,17,17,0.06);
}

/* Reset & Base */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--black);-webkit-font-smoothing:antialiased;font-family:'Inter',sans-serif}
h1,h2,h3,h4{font-family:'Playfair Display',serif;margin:0}
a{color:inherit;text-decoration:none}
button{font-family:inherit}


/* Header */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: #fff;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Brand */
.brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.logo {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
}

/* Nav */
.nav {
  display: flex;
  gap: 20px;
}

.nav a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
}




/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 22px;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 3px;
  background: #333;
  border-radius: 2px;
}

/* Mobile styles */
@media (max-width: 768px) {
  .nav {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 70px;
    right: 20px;
    background: #fff;
    border: 1px solid #ddd;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }

  .nav.show {
    display: flex;
  }

  .nav-toggle {
    display: flex;
  }
}


/* Hero */
.hero{
  padding:80px 20px;
  background:url('hero.jpeg') center/cover no-repeat;
  color:#fff;
  text-align:center;
}
.hero h2{font-size:40px;margin-bottom:12px;color:#111}
.hero p{font-size:18px;margin-bottom:20px;color:#111}
.cta .btn.primary{background:var(--gold-gradient);color:#111;font-size:16px;padding:12px 20px;border:none;border-radius:8px;cursor:pointer;transition:0.3s}
.cta .btn.primary:hover{opacity:0.9}

/* Layout */
.container{max-width:1120px;margin:0 auto;padding:18px}

/* Category grid */
.category-grid{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.category-card{
  flex:1 1 200px;
  padding:24px;
  text-align:center;
  border-radius:12px;
  background:#fff;
  box-shadow:var(--card-shadow);
  font-weight:600;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.category-card:hover{transform:translateY(-6px);box-shadow:0 10px 24px rgba(0,0,0,0.15)}

/* Filters */
.filters{background:#fff;padding:18px;border-radius:12px;box-shadow:var(--card-shadow);margin-bottom:18px}
.chip{
  display:inline-block;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid #eee;
  margin:4px 6px 4px 0;
  cursor:pointer;
  transition:0.3s;
}
.chip:hover{background:var(--gold-gradient);color:#111}

/* Product grid */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.card{
  background:#fff;
  padding:12px;
  border-radius:12px;
  box-shadow:var(--card-shadow);
  display:flex;
  flex-direction:column;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover{transform:translateY(-6px);box-shadow:0 10px 24px rgba(0,0,0,0.15)}
.card {
  background: #fff;
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(17,17,17,0.06);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative; /* allow z-index layering */
  overflow: visible;  /* allow image to escape the card */
  z-index: 1;
}

/* Show full product image without cropping */
.thumb img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;  /* ensures full image is visible */
  display: block;
  margin: 0 auto;
}

.thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  background: #fafafa;
  border-radius: 8px;
  padding: 8px;
}



.product-title{font-weight:700;margin-bottom:6px;font-size:15px}
.price-row{display:flex;align-items:center;gap:8px}
.price{font-weight:800}
.old{color:var(--muted);text-decoration:line-through;font-size:13px}
.actions{margin-top:auto;display:flex;gap:8px}
.btn{padding:10px 12px;border-radius:8px;border:1px solid #eee;cursor:pointer;font-weight:700;transition:0.3s}
.btn.primary{background:var(--gold-gradient);border:none;color:#111}
.btn:hover{opacity:0.9}


/* ---------------- ABOUT SECTION ---------------- */
#about-section{
  padding:60px 20px;
  background:#fafafa;
  border-radius:16px;
  margin:30px;
  text-align:center;

}
#about-section h2{
  font-size:32px;
  margin-bottom:16px;
  color:#111;
}
#about-section p{
  font-size:14px;
  color:#111;
  max-width:900px;
  margin:0 auto;
  line-height:1.8;
}

/* Optional: add an image/icon */
#about-section .about-img{
  margin-top:20px;
  width:150px;
  height:150px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 6px 18px rgba(0,0,0,0.1);
  transition:transform 0.3s ease;
}
#about-section .about-img:hover{
  transform:scale(1.05);
}

/* Responsive */
@media(max-width:600px){
  #about-section h2{font-size:28px;}
  #about-section p{font-size:16px;}
  #about-section .about-img{width:120px;height:120px;}
}

}
/* ---------------- CONTACT SECTION ---------------- */
#contact-section{
  padding:60px 20px;
  background:#ffffff;
  border-radius:16px;
  margin:30px;
  text-align:center;
  box-shadow:#111;
}
#contact-section h2{
  font-size:32px;
  margin-bottom:12px;
  color:#fffff;
}
#contact-section p{
  font-size:18px;
  color:#fffff;
  margin-bottom:24px;
}

/* Buttons container */
#contact-section .btn-container{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:center;
  margin-top:15px;
}

/* Buttons */
#contact-section .btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 22px;
  font-size:16px;
  font-weight:700;
  border-radius:50px;
  border:none;
  cursor:pointer;
  transition:all 0.3s ease;
  text-decoration:none;
  background:var(--gold-gradient);
  color:#111;
  box-shadow:0 4px 12px rgba(0,0,0,0.12);
}
#contact-section .btn:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(0,0,0,0.18);
  opacity:0.95;
}

/* Specific platform colors (optional) */
#contact-section .btn.whatsapp{background:#25d366;color:#fff;}
#contact-section .btn.instagram{background:#e1306c;color:#fff;}

/* Responsive */
@media(max-width:600px){
  #contact-section h2{font-size:28px;}
  #contact-section p{font-size:16px;}
  #contact-section .btn{font-size:14px;padding:12px 18px;}
}


/* Cart page */
#cart-items{margin-bottom:18px}
.cart-item{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding:10px;border-radius:8px;background:#fff;box-shadow:var(--card-shadow)}
#cart-total{font-size:18px;font-weight:700;margin-bottom:20px}
.checkout-form input,
.checkout-form textarea,
.contact-form input,
.contact-form textarea{
  width:100%;
  padding:12px;
  margin-bottom:12px;
  border-radius:8px;
  border:1px solid #eee;
  font-size:14px;
}
.checkout-form button,
.contact-form button{width:100%;padding:12px;background:var(--gold-gradient);border:none;color:#111;font-weight:700;border-radius:8px;cursor:pointer;transition:0.3s}
.checkout-form button:hover,
.contact-form button:hover{opacity:0.9}

/* Cart drawer & WhatsApp */
.cart-drawer{
  position:fixed;right:18px;bottom:18px;background:#111;color:#fff;padding:12px 14px;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,0.2);cursor:pointer;
}
.cart-count{background:#fff;color:#111;border-radius:999px;padding:2px 6px;margin-left:8px;font-weight:700}
.whatsapp-btn{
  position:fixed;bottom:18px;left:18px;background:#25d366;color:#fff;padding:14px 18px;border-radius:999px;font-weight:700;display:flex;align-items:center;gap:8px;cursor:pointer;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,0.2);
}

/* Footer */
footer{padding:18px;text-align:center;color:var(--muted);font-size:14px;position:relative}

/* Responsive */
@media (max-width:880px){
  .columns{grid-template-columns:1fr}
  .hero h2{font-size:28px}
  .hero p{font-size:16px}
  .category-grid{flex-direction:column}
}