Spacing

src/css/utilities/spacing.css

Layout-gap and section-overlap utilities that read from merchant layout settings. Use these instead of hardcoded spacing values so spacing automatically reflects the merchant's layout gap and overlap settings.

Section layout

Class	Sets
section-overlap	Negative top margin + matching top padding to overlap the preceding section. Responsive: uses --layout__desktop-overlap on desktop and --layout__mobile-overlap on mobile.
spacing--font-base	min-height equal to base line-height (--type__base * 1.625)

Padding

Class	Sets
padding--gap	All sides — --layout__gap
padding--t-gap	Top — --layout__gap
padding--r-gap	Right — --layout__gap
padding--b-gap	Bottom — --layout__gap
padding--l-gap	Left — --layout__gap

Margin

Class	Sets
margin--gap	All sides — --layout__gap
margin--t-gap	Top — --layout__gap
margin--r-gap	Right — --layout__gap
margin--b-gap	Bottom — --layout__gap
margin--l-gap	Left — --layout__gap