/* Shared layout for hand-written page views. Typography comes from app.css.
 * Spacing scale: 8 / 16 / 24px for existing Tailwind component gaps,
 * 32 / 48px for mobile / desktop sections. Only used tokens are defined here.
 */
:root {
  --sp-space-32: 2rem;
  --sp-space-48: 3rem;
  --sp-section-gap: var(--sp-space-48);
}

main h1:not(:first-child),
main h2:not(:first-child) {
  margin-top: var(--sp-section-gap);
}

.sp-page-content {
  min-width: 0;
}

.sp-page-content > :first-child,
.sp-page-section > :first-child {
  margin-top: 0;
}

.sp-page-content > :last-child,
.sp-page-section > :last-child {
  margin-bottom: 0;
}

.sp-page-section {
  margin-block: var(--sp-section-gap);
}

.sp-page-section:first-child {
  margin-top: 0;
}

.sp-page-section:last-child {
  margin-bottom: 0;
}

.sp-page-columns {
  display: grid;
  gap: var(--sp-space-32);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sidebar {
  padding-top: var(--sp-space-32);
}

.sp-sidebar-promos {
  margin-top: var(--sp-space-48);
}

.sp-sidebar-section {
  margin-top: var(--sp-section-gap);
}

@media (max-width: 1023px) {
  .sidebar {
    padding-top: 0;
  }

  .sp-sidebar-promos {
    margin-top: 0;
  }

  main .woocommerce > ul.products:last-of-type {
    margin-bottom: 0;
  }
}

/* WooCommerce uses two columns through 768px, then the list's columns-4.
 * Remove only the final row's trailing margin while the sidebar is stacked.
 */
@media (max-width: 768px) {
  main .woocommerce > ul.products:last-of-type > li.product:nth-child(2n + 1):nth-last-child(-n + 2),
  main .woocommerce > ul.products:last-of-type > li.product:nth-child(2n + 1):nth-last-child(-n + 2) ~ li.product {
    margin-bottom: 0;
  }
}

@media (min-width: 769px) and (max-width: 1023px) {
  main .woocommerce > ul.products.columns-4:last-of-type > li.product:nth-child(4n + 1):nth-last-child(-n + 4),
  main .woocommerce > ul.products.columns-4:last-of-type > li.product:nth-child(4n + 1):nth-last-child(-n + 4) ~ li.product {
    margin-bottom: 0;
  }
}

@media (max-width: 767px) {
  :root {
    --sp-section-gap: var(--sp-space-32);
  }

  .sp-page-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Route comparisons use the same saved facts as the individual route guides. */
.sp-route-comparison { width: 100%; border-collapse: collapse; text-align: left; }
.sp-route-comparison caption { text-align: left; font-weight: 700; margin-bottom: .75rem; }
.sp-route-comparison th, .sp-route-comparison td { padding: .75rem; border-bottom: 1px solid #ddd; vertical-align: top; }
.sp-route-comparison thead { background: #f3f4f6; }