/* Styles for Product Home */

.full-hero {
  /* Use supplied banner image as a full-bleed background with a dark overlay; position to the right so the image sits visually on the right */
  background-image: linear-gradient(180deg, rgba(2,16,36,0.45), rgba(2,16,36,0.15)), url('../images/greenstarbanner1.png');
  /* cover ensures a rich background while the product image sits on the right */
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--bg-gradient-start);
  /* Fill the full viewport vertically so hero occupies the full screen */
  min-height: 100vh;
  padding: 0; /* vertical centering handled by flex align */
  display: flex;
  align-items: center;
}
.hero-content { display:flex; gap:24px; align-items:center; justify-content:space-between; }
.hero-copy { max-width:480px; text-align:left; }
.full-hero .hero-copy { color: #fff; }
.full-hero .hero-copy .lead { color: rgba(255,255,255,0.95); }
.hero-copy h1 { font-size:1.85rem; line-height:1.08; margin-bottom:6px; font-weight:700; }
.hero-copy .lead { font-size:1rem; line-height:1.35; margin-bottom:12px; }
.hero-ctas a { margin-right:8px; padding-left:14px; padding-right:14px; }
.hero-image img { width:420px; border-radius:12px; box-shadow:0 18px 40px rgba(0,0,0,0.28); display:block; }

/* Featured product card enhancements */
.product-grid.single-product .product-card { padding: 20px; }
.product-features { margin-top: 10px; text-align: left; }
.product-features h4 { margin: 0 0 6px 0; font-size: 0.95rem; color: var(--primary-variant); font-weight:600; }
.product-features ul { list-style: none; margin: 0; padding: 0; display: grid; gap:4px; }
.product-features li { padding-left: 20px; position: relative; color: #333; font-size: 0.94rem; line-height:1.28; }
.product-features li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; }

/* Products grid */
.featured-products { margin-top:24px; }
.product-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:16px; }
.product-card { background:#fff; padding:14px; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,0.06); text-align:center }
.product-grid.single-product { display:block; }
.product-grid.single-product .product-card { max-width: none; margin:0; width:100%; display:flex; gap:20px; align-items:flex-start; text-align:left; padding:20px; }
.product-visual { flex: 0 0 360px; }
.product-visual img { width:100%; height:auto; border-radius:10px; }
.product-details { flex: 1 1 auto; }
.product-card img { width:100%; height:200px; object-fit:cover; border-radius:8px; }
.product-card h3 { margin:12px 0 8px; font-size:1.05rem; color:var(--primary-variant) }
.product-card p { font-size:0.95rem; color:#333 }
.card-cta { margin-top:12px }

.quick-tips { margin-top:34px; background:var(--bg-gradient-start); padding:18px; border-radius:10px }
.quick-tips ul { margin:0; padding-left:18px; text-align:left }
.cta-strip { margin-top:24px; padding:14px; background:linear-gradient(90deg,var(--bg-gradient-start),var(--bg-gradient-end)); border-radius:8px; text-align:center }
.cta-strip .link-cta { font-weight:600; color:var(--text-color) }

@media (max-width: 900px) {
  .hero-content { flex-direction:column-reverse; text-align:center }
  .hero-copy { max-width:100%; text-align:center; padding: 16px 12px; }
  .hero-image img { width:80%; max-width:360px; margin: 0 auto 18px; }
  /* On smaller screens, prefer the background banner be fully visible: hide the foreground image and show the whole banner */
  .hero-image { display: none; }
  .full-hero { background-size: contain; background-position: center top; padding: 48px 0; min-height: 60vh; }
  .product-grid { grid-template-columns: repeat(2,1fr); }

  /* Stack the single product layout on narrow viewports */
  .product-grid.single-product .product-card { display:block; padding:16px; }
  .product-visual { flex: initial; margin-bottom: 12px; text-align:center }
  .product-visual img { width:80%; max-width:360px; margin: 0 auto; }
  .product-details { text-align:center }

  /* Slightly reduce the hero heading size on tablet for balance */
  .hero-copy h1 { font-size:1.6rem; }
}
@media (max-width: 480px) {
  .product-grid { grid-template-columns: repeat(1,1fr); }
  .hero-image img { width:100%; }
  /* further tighten spacing on very small screens */
  .full-hero { padding: 36px 0; min-height: 50vh; }

  /* Tighten product card on small screens */
  .product-grid.single-product .product-card { padding:12px; }
  .product-features ul { gap:6px; }
}