/* Ecosystem pond page. Quiet and roomy: the measured numbers are the point,
   so nothing else competes with them. */

.aquascapePage { max-width: 860px; margin: 0 auto; padding: 24px 16px 64px; }

.aqHeading { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.aqHeading h1 { margin: 0; font-size: 28px; font-weight: 600; }
.aqHeading span { color: var(--pt-muted, #6b7280); font-variant-numeric: tabular-nums; }

.aqSystem h2 { font-size: 18px; font-weight: 600; margin: 0 0 12px; }

/* Fit failures, beside the system they invalidate. */
.aqWarnings { margin: 10px 0 0; padding-left: 20px; }
.aqWarnings li { margin-bottom: 6px; font-size: 13px; line-height: 1.45; color: var(--pt-warn, #92400e); }

.aqLine {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start;
  padding: 14px 0; border-top: 1px solid var(--pt-border, #e5e7eb);
}
/* Product shot, first in the row so the photos line up flush left. The column
   is `auto`, so with no mirror present the span is empty, collapses to
   nothing, and the row looks as it did before images. Contain rather than
   cover, because these are packshots on white. */
.aqLineShot { display: block; }
.aqLineShot:not(:empty) {
  width: 84px; height: 84px;
  border: 1px solid var(--pt-accent, #326b98); border-radius: 6px;
  background: #fff; padding: 3px; box-sizing: border-box;
}
.aqLineShot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.aqLine:last-of-type { border-bottom: 1px solid var(--pt-border, #e5e7eb); }
.aqLineBody h3 { margin: 0; font-size: 15px; font-weight: 600; }
.aqLineBody a { color: inherit; text-decoration: none; }
.aqLineBody a:hover, .aqLineBody a:focus-visible { text-decoration: underline; }
.aqVariant, .aqNote, .aqSku { margin: 3px 0 0; font-size: 13px; color: var(--pt-muted, #6b7280); line-height: 1.45; }
.aqSku { font-size: 12px; }
.aqLinePrice { text-align: right; display: grid; gap: 2px; }
.aqLinePrice strong { font-variant-numeric: tabular-nums; font-size: 15px; }
.aqEach { font-size: 12px; color: var(--pt-muted, #6b7280); }

.aqTotals { display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap; padding-top: 14px; }
.aqTotals strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.aqPriceNote { font-size: 12px; color: var(--pt-muted, #6b7280); }

.aqCompare { margin-top: 28px; font-size: 14px; }

/* The six add-ons. Three across and two down, and deliberately lighter than
   everything above them: no card background, smaller type, one rule between
   rows. The system lines are the page; these are a footnote with prices. */
.aqEssentials { margin-top: 36px; }
.aqEssentials h2 { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.aqEssentialsIntro { margin: 0 0 12px; color: var(--pt-muted, #6b7280); max-width: 62ch;
  line-height: 1.5; font-size: 13px; }

.aqEssentialsGrid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0 24px;
  border-top: 1px solid var(--pt-border, #e5e7eb);
}
.aqEssential { padding: 12px 0 14px; border-bottom: 1px solid var(--pt-border, #e5e7eb); }

.aqEssentialHead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.aqEssentialHead h3 { margin: 0; font-size: 14px; font-weight: 600; }
/* Category, small and quiet. The product name below it is the headline. */
.aqEssentialKicker { font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--pt-muted, #6b7280); }
.aqEssentialName { margin: 4px 0 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
.aqEssentialName a { color: inherit; text-decoration: none; }
.aqEssentialName a:hover, .aqEssentialName a:focus-visible { text-decoration: underline; }
.aqEssentialPrice { font-variant-numeric: tabular-nums; font-size: 14px; white-space: nowrap; }
.aqEssentialPrice:not(:has(strong)) { color: var(--pt-muted, #374151); font-weight: 600; }

.aqEssentialWhy { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--pt-muted, #374151); }
.aqEssentialNote { margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: var(--pt-muted, #6b7280); }
/* Our own rate rather than a published one, marked so it reads differently. */
.aqEssentialNote.aqEstimated { font-style: italic; }
.aqEssentialShortfall { margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: var(--pt-warn, #92400e); }

.aqEssentials .aqTotals { padding-top: 10px; }
.aqEssentials .aqTotals strong { font-size: 14px; font-weight: 600; color: var(--pt-muted, #374151); }

/* Rock and gravel only, so two tiles across. They keep the add-on tiles' width
   rather than stretching to half the page each. */
#aqQuantitiesGrid { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 760px) { #aqQuantitiesGrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .aqEssentialsGrid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 560px) {
  .aqEssentialsGrid { grid-template-columns: 1fr; }
  .aqLine { grid-template-columns: auto 1fr; }
  .aqLineShot:not(:empty) { width: 64px; height: 64px; }
  .aqLinePrice { grid-column: 2; text-align: left; }
}