/* components.css */
.btn{
  background:#5a6b1e;
  color:#fff;
  padding:14px 32px;
  border-radius:30px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:20px;
  font-weight:600;
  letter-spacing:0.3px;
  transition:background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
  box-shadow:0 8px 18px rgba(0,0,0,0.14);
}

.btn.dark{
  background:#1f3d2b;
}

.btn:hover,
.btn:focus-visible{
  background:#cfe06b;
  color:#1e1e1e;
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 12px 22px rgba(0,0,0,0.2);
  filter:brightness(1.02);
}

.product-card{
  background:#fff;
  padding:25px;
  border-radius:20px;
  text-align:center;
  transition:.4s;
  text-decoration:none;
  color:inherit;
  display:block;
}

.product-card:hover{
  transform:translateY(-10px);
}

/* ===== HERO CARD (GLOBAL) ===== */
.hero-card{
  background:#fff;
  border-radius:26px;
  padding:28px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  transition:all .4s ease;
}

.hero-card:hover{
  transform:translateY(-15px);
  box-shadow:0 25px 50px rgba(0,0,0,.12);
}