/* =========================
   PRODUCTS GRID (Vertical Stacked)
   ========================= */

/* Container for all products */
#products {
  max-width: 400px;          /* optional, controls width of content */
  margin: 0 auto;            /* center container horizontally */
  padding: 40px 20px;
}

/* Section Title: PRODUCTS - Premium Artisan Style */
.products-title {
  font-family: 'Georgia', 'Times New Roman', serif; /* elegant serif font */
  font-weight: 100;         /* lighter, more artisan feel */
  font-size: 2.8rem;        /* large and prominent */
  text-align: center;       /* centered above products */
  margin-bottom: 40px;      /* spacing before product grids */
  letter-spacing: 1px;      /* subtle artisan spacing */
  /text-transform: uppercase;

  /* Gradient text effect for premium look */
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.7),
    rgba(0,0,0,0.5)
  );
  -webkit-background-clip: text;  /* clip gradient to text */
  -webkit-text-fill-color: transparent; /* show gradient inside text */

  /* Subtle shadow for depth and readability */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

/* Each product block stacked */
.product-grid {
  width: 100%;               /* take full container width */
  margin-bottom: 40px;       /* space between products */
  text-align: center;        /* center content inside block */
}

/* Product images */
.product-grid img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  margin-bottom: 16px;
}

/* Product titles */
.product-info h2,
.product-info h3 {
  text-align: center;
  margin-bottom: 12px;
}

/* Product details */
.product-info ul {
  margin-left: 20px;
  margin-bottom: 16px;
}

.product-info input {
  padding: 8px;
}

/* Center PayPal buttons */
.product-info paypal-add-to-cart-button {
  display: block;
  margin: 0 auto;
}

/* =========================
   BENEFITS SECTION
   ========================= */

.benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-bottom: 64px;
}

.benefit {
  background: #fafafa;
  padding: 24px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 500px) {
  #products {
    padding: 20px 10px;
  }
}