/* ===============================
   PRODUCTS PAGE
================================ */

.page-hero {
  position: relative;
  background:
    linear-gradient(rgba(70,90,70,0.75), rgba(130,160,110,0.75)),
    url("../images/hero/hero2.webp") center/cover no-repeat;
  padding: 120px 0 100px;
  text-align: center;
  color: #fff;
}

.page-hero::after {
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.4);
}

.page-hero .container {
  position:relative;
  z-index:2;
}

.page-hero h1 {
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  margin-bottom: 12px;
  font-family: 'Playfair Display', serif;
  color: #fff;
}

.page-hero p {
  font-size: 1.05rem;
  max-width: 700px;
  margin: auto;
  color: #fff;
}

.products-section {
  background: var(--bg-light);
  padding: 80px 0;
}

.section-title {
  text-align:center;
  margin-bottom:50px;
}

.section-title h2 {
  font-family:'Playfair Display', serif;
  margin-bottom:10px;
}

.products-grid {
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:30px;
}

.product-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.product-actions .btn {
  flex: 1 1 auto;
}

.product-card {
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 15px 40px rgba(0,0,0,0.06);
  transition:all 0.3s ease;
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow:0 22px 50px rgba(0,0,0,0.12);
}

.product-image {
  height:240px;
  overflow:hidden;
}

.product-image img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.product-content {
  padding:24px;
}

.product-content h3 {
  margin-bottom:10px;
}

.product-price {
  font-weight:600;
  margin-bottom:8px;
}

.stock {
  font-size:13px;
  margin-bottom:15px;
}

.stock.in { color:#2e7d32; }
.stock.out { color:#c62828; }

@media (max-width:992px){
  .products-grid { grid-template-columns: repeat(2,1fr); }
  .product-actions {
    flex-direction: column;
  }
  .product-actions .btn {
    width: 100%;
  }
}

@media (max-width:600px){
  .products-grid { grid-template-columns: 1fr; }

  .page-hero {
    padding: 90px 0 70px;
  }

  .product-image {
    height: 210px;
  }

  .product-content {
    padding: 18px;
  }

  .product-actions {
    flex-direction: column;
  }

  .product-actions .btn {
    width: 100%;
  }
}