*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--cd-surface-base);
	color: var(--cd-color-text);
	font-family: var(--cd-font-family);
	font-size: var(--cd-font-md);
	font-weight: var(--cd-weight-normal);
	line-height: var(--cd-line-height);
	overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
	margin-block: 0 var(--cd-space-4);
	font-weight: var(--cd-weight-bold);
	line-height: var(--cd-line-height-heading);
}

h1 { font-size: var(--cd-font-xl); }
h2 { font-size: var(--cd-font-lg); }
h3, h4, h5, h6 { font-size: var(--cd-font-md); }
p { margin-block: 0 var(--cd-space-4); }
a { color: var(--cd-color-link); text-underline-offset: 0.2em; }
a:hover { color: var(--cd-color-link-hover); }
button, input, select, textarea { font: inherit; }
img, video { max-width: 100%; height: auto; }
:focus-visible {
	outline: var(--cd-focus-width) solid var(--cd-focus-color);
	outline-offset: var(--cd-focus-offset);
}

/* One frontend shell rhythm; homepage and purchase flows are excluded in body_class. */
body.cd-page-shell #main-content {
	padding-top: var(--cd-space-6);
}
body.cd-page-shell:not(.single-product) #main-content { padding-top: var(--cd-space-4); }
@media (max-width: 64rem) {
	body.cd-page-shell #main-content { padding-top: var(--cd-space-4); }
}