/* ==========================================================================
   IndoSpiceHub — Products Page
   Page-specific styles. Shared components live in components.css.
   ========================================================================== */

/* ---------- Product overview grid ----------
   Five premium product cards, scannable in under thirty seconds.
   Built on the existing .card / .product-card primitives. */
.products-overview {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .products-overview { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .products-overview { grid-template-columns: repeat(3, 1fr); }
}
/* At the 2-column width, five cards leave the fifth alone on its own
   row — span it full-width there. The 3-column desktop layout already
   balances as 3 + 2. */
@media (min-width: 640px) and (max-width: 1099px) {
  .product-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.product-card__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem var(--space-2);
  margin-bottom: var(--space-3);
  font-size: 0.8125rem;
}
.product-card__meta dt {
  font-weight: 600;
  color: var(--color-forest-700);
  white-space: nowrap;
}
.product-card__meta dd {
  color: var(--color-charcoal-60);
}

/* ---------- Product detail sections ---------- */
.product-detail__intro {
  border-top: 1px solid var(--color-border);
}

.spec-note {
  font-size: 0.8125rem;
  color: var(--color-charcoal-60);
  font-style: italic;
  margin-top: var(--space-2);
}

.product-feature__footer--column {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

/* Packaging card system now lives in components.css as a shared
   component (identical treatment is used on Export Capability). */

/* ---------- Quality process chain — 5 steps ---------- */
.process-chain--5 { }
@media (min-width: 1024px) {
  .process-chain--5 { grid-template-columns: repeat(5, 1fr); }
}

/* ---------- Documentation list ----------
   Reuses .feature-row from components.css; this just tightens spacing
   for the longer descriptions on this page. */
.doc-list p { max-width: 60ch; }