.block-number-list__image img {
	width: 100%;
}

.block-number-list:not(.numbers-disabled) .block-number-list__inner:where(.block-number-list__item:not(.has-image) *) {
	position: relative;
	padding-left: 4.5rem;
}

.block-number-list__inner:only-child {
	grid-column: span 2;
}

.block-number-list:not(.numbers-disabled) .block-number-list__inner:where(.block-number-list__item:not(.has-image) *)::before,
.block-number-list:not(.numbers-disabled, .is-style-checklist, .is-style-two-column) .has-image > .block-number-list__image::before {
	counter-increment: number-list;
	content: counter(number-list, decimal-leading-zero);
	position: absolute;
	left: 0;
	font-family: var(--wp--preset--font-family--heading); /* the Fraunces numerals of the cleanse page's list */
	font-size: var(--wp--custom--step-number--large); /* shared with the numbered steps (theme.json) */
	font-weight: 800;
	line-height: 1;
	color: var(--wp--custom--color--accent-text); /* step numbers: Green on light bands, brass on dark */
}

/* Default style: the numeral is centred on the item's title line. text-box trims the numeral to
   its cap height, so half of it sits above and half below the middle of the title's first line
   (the title's size x its line height, halved). */
.block-number-list {
	--number-list-title-size: 1.375rem; /* the cleanse page's two-column titles: one size for every Number List */
}
.block-number-list:not(.numbers-disabled, .is-style-two-column, .is-style-checklist) .block-number-list__inner:where(.block-number-list__item:not(.has-image) *)::before {
	top: calc(var(--number-list-title-size) * 1.15 / 2);
	transform: translateY(-50%);
	text-box: trim-both cap alphabetic;
}

/* With a photo (default and Product guide styles): the number is a linen badge on the photo's top-left corner (the same Fraunces
   numeral, a size down), and the text beside the photo runs the full width of its column */
.block-number-list:not(.numbers-disabled, .is-style-checklist, .is-style-two-column) .has-image > .block-number-list__image {
	position: relative;
}
/* Side by side (tablet up), the text sits centred against the photo's height */
.block-number-list .block-number-list__item.has-image > .block-number-list__inner {
	align-self: center;
}
.block-number-list:not(.numbers-disabled, .is-style-checklist, .is-style-two-column) .has-image > .block-number-list__image::before {
	top: 16px;
	left: 16px;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--x-large);
}

.block-number-list__item + .block-number-list__item,
.wp-block-cwp-number-list-item + .wp-block-cwp-number-list-item {
	margin-top: 2.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--wp--custom--color--divider);
}

.block-number-list__inner > * {
	margin-top: 0;
	margin-bottom: 0;
}

.block-number-list__inner > *:not(:last-child) {
	margin-bottom: 1.25rem;
}

/* Item title: the item's name, in Fraunces, title case, 22px, black (ivory on dark bands). The
   two-column and checklist styles set their own (blocks/number-list/style.css). */
.block-number-list .block-number-list__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--number-list-title-size);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.15;
	color: var(--wp--custom--color--foreground-alt);
	margin-bottom: 0.625rem;
}

.block-number-list .block-number-list__subtitle {
	font-style: italic;
	margin-bottom: 0.625rem;
}


@media only screen and (min-width: 768px) {
	.block-number-list__item {
		display: grid;
		grid-template-columns: 400fr 430fr;
		gap: 1.875rem;
	}
}

@media only screen and (max-width: 767px) {
	.block-number-list .block-number-list__image {
		margin-bottom: 1.5rem;
	}

	.block-number-list:not(.numbers-disabled) .block-number-list__inner::before {
		font-size: var(--wp--custom--step-number--small);
	}
}

/* "Product guide" style (Block styles in the editor; used by the milk brand guides): the default
   title, the subtitle (calories line) as a Brass Dark caps line, text centred beside the product photo. */

.block-number-list.is-style-product-guide .block-number-list__subtitle {
	margin: 0 0 20px;
	font-size: var(--wp--custom--caps--label);
	font-style: normal;
	font-weight: 700;
	letter-spacing: var(--wp--custom--caps--tracking-label);
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--preset--color--brass-dark);
}

.block-number-list.is-style-product-guide .block-number-list__item > .block-number-list__inner {
	align-self: center;
}