/* 4 large, full-width unique-per-product info sections (About & Origin,
   Requirements, Compatibility, Water & Care Conditions), stacked below the
   image + description block on product pages. Content comes from front
   matter (about_text, requirements_text, compatibility_text, care_text,
   each with an optional *_title override) via layouts/products/single.html
   -- purely presentational here, one shared layout for all products
   regardless of how many of the 4 sections are actually filled in. */

.product-info-block {
  max-width: 900px;
  margin: 0 auto 40px;
  padding-top: 32px;
  border-top: 1px solid #eee;
}

.product-info-block__title {
  margin: 0 0 16px;
  font-size: 1.6em;
  font-weight: 700;
  color: #222;
}

.product-info-block__body {
  font-size: 1em;
  line-height: 1.7;
  color: #444;
}

.product-info-block__body p {
  margin: 0 0 14px;
}
.product-info-block__body p:last-child {
  margin-bottom: 0;
}

.product-info-block__body ul,
.product-info-block__body ol {
  margin: 0 0 14px;
  padding-left: 1.3em;
}

.product-info-block__body li {
  margin-bottom: 6px;
}

.product-info-block__body li:last-child {
  margin-bottom: 0;
}

/* Compatibility block: linked mini-cards to other real products, not text */

.product-compat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 16px;
}

.product-compat-card {
  display: block;
  text-decoration: none;
  color: #333;
}

.product-compat-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
  background: #f5f5f5;
  margin-bottom: 8px;
}

.product-compat-card__name {
  display: block;
  font-size: 0.9em;
  font-weight: 600;
  line-height: 1.35;
}