/* Product spacing roles, first applied to Millerighe. See docs/SPACING.md.
   Horizontal page margins/grid gutters and disclosure choreography are separate. */
.product-space-standard {
  --space-label: .5rem;
  --space-media: 1rem;
  --space-prose: 1.5rem;
  --space-group: 2rem;
  --space-section-end: 4rem;
}
@media (max-width: 767px) {
  .product-space-standard {
    --space-group: 1.5rem;
    --space-section-end: 3rem;
  }
}

/* One owner per interval: paragraphs own their trailing space;
   subsections own the larger break before a new subject. */
.product-space-standard .product-story-inner p { margin-bottom: var(--space-prose); }
.product-space-standard .product-story-inner p:last-child { margin-bottom: 0; }
.product-space-standard .product-options { margin-top: var(--space-group); }
.product-space-standard .product-story-inner > .product-options:first-child { margin-top: 0; }
.product-space-standard .product-options h2 { margin-bottom: var(--space-label); }

/* Controls retain 44px targets without increasing the heading's line box.
   Reserve their width, then centre them independently alongside the heading. */
.product-space-standard :is(.finish-heading, .related-heading) { position: relative; }
.product-space-standard :is(.product-finishes, .product-related).is-scrollable > :is(.finish-heading, .related-heading) {
  padding-right: calc(88px + 2 * var(--space-label));
}
.product-space-standard :is(.finish-controls, .related-controls) {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  gap: var(--space-label);
}
.product-space-standard .finish-heading { margin-bottom: var(--space-label); }
.product-space-standard .finish-introduction { margin-bottom: var(--space-media); }
.product-space-standard .finish-swatch figcaption { margin-top: var(--space-label); }

/* Chapter boundaries are measured from the end of the whole section,
   followed by the divider and the next section's opening gap. */
.product-space-standard .product-related {
  padding-top: var(--space-group);
  padding-bottom: var(--space-section-end);
}
.product-space-standard .related-heading { margin-bottom: var(--space-group); }
.product-space-standard .related-door h3 { margin-top: var(--space-label); }

/* Footer is the next chapter; no extra outer margin stacks onto the rail gap. */
.product-space-standard .collection-footer {
  margin-top: 0;
  padding-block: var(--space-group);
}
.product-space-standard .footer-top { gap: var(--space-prose); }
.product-space-standard .footer-wordmark { margin-block: var(--space-group); }
.product-space-standard .footer-bottom { padding-top: var(--space-media); }
@media (max-width: 715px) {
  .product-space-standard .footer-bottom { gap: var(--space-label); }
}