/**
 * Utilities. Build only what gets used.
 *
 * Text size, heading size and text colour utilities use !important, because
 * theme.json element styles (h1, h2, a) are unlayered and would otherwise win.
 */
@layer utilities {
	.text--xs {
		font-size: var(--text-xs) !important;
	}

	.text--s {
		font-size: var(--text-s) !important;
	}

	.text--m {
		font-size: var(--text-m) !important;
	}

	.text--l {
		font-size: var(--text-l) !important;
	}

	.text--xl {
		font-size: var(--text-xl) !important;
	}

	.text--xxl {
		font-size: var(--text-xxl) !important;
	}

	/* Heading look on any element: an h2 that looks like an h4, or a price
	   that looks like a heading. Size comes from each class below. */
	:is(.h1, .h2, .h3, .h4, .h5, .h6) {
		font-family: var(--font-heading);
		font-weight: var(--heading-weight);
		letter-spacing: var(--heading-tracking);
	}

	.h1 {
		font-size: var(--h1) !important;
		line-height: var(--heading-line-height);
	}

	.h2 {
		font-size: var(--h2) !important;
		line-height: var(--heading-line-height);
	}

	.h3 {
		font-size: var(--h3) !important;
		line-height: var(--heading-line-height);
	}

	.h4 {
		font-size: var(--h4) !important;
		line-height: var(--heading-line-height);
	}

	.h5 {
		font-size: var(--h5) !important;
		line-height: var(--heading-line-height);
	}

	.h6 {
		font-size: var(--h6) !important;
		line-height: var(--heading-line-height);
	}

	.text--primary {
		color: var(--primary) !important;
	}

	.text--secondary {
		color: var(--secondary) !important;
	}

	.text--tertiary {
		color: var(--tertiary) !important;
	}

	.text--accent {
		color: var(--accent) !important;
	}

	.text--base {
		color: var(--base) !important;
	}

	.text--neutral {
		color: var(--neutral) !important;
	}

	.text--dark {
		color: var(--text-dark) !important;
	}

	.text--dark-muted {
		color: var(--text-dark-muted) !important;
	}

	.text--light {
		color: var(--text-light) !important;
	}

	.text--light-muted {
		color: var(--text-light-muted) !important;
	}

	.bg--primary {
		background-color: var(--primary);
	}

	.bg--primary-l-1 {
		background-color: var(--primary-l-1);
	}

	.bg--primary-l-2 {
		background-color: var(--primary-l-2);
	}

	.bg--primary-l-3 {
		background-color: var(--primary-l-3);
	}

	.bg--primary-l-4 {
		background-color: var(--primary-l-4);
	}

	.bg--primary-l-5 {
		background-color: var(--primary-l-5);
	}

	.bg--primary-d-1 {
		background-color: var(--primary-d-1);
	}

	.bg--primary-d-2 {
		background-color: var(--primary-d-2);
	}

	.bg--primary-d-3 {
		background-color: var(--primary-d-3);
	}

	.bg--primary-d-4 {
		background-color: var(--primary-d-4);
	}

	.bg--primary-d-5 {
		background-color: var(--primary-d-5);
	}

	.bg--secondary {
		background-color: var(--secondary);
	}

	.bg--secondary-l-1 {
		background-color: var(--secondary-l-1);
	}

	.bg--secondary-l-2 {
		background-color: var(--secondary-l-2);
	}

	.bg--secondary-l-3 {
		background-color: var(--secondary-l-3);
	}

	.bg--secondary-l-4 {
		background-color: var(--secondary-l-4);
	}

	.bg--secondary-l-5 {
		background-color: var(--secondary-l-5);
	}

	.bg--secondary-d-1 {
		background-color: var(--secondary-d-1);
	}

	.bg--secondary-d-2 {
		background-color: var(--secondary-d-2);
	}

	.bg--secondary-d-3 {
		background-color: var(--secondary-d-3);
	}

	.bg--secondary-d-4 {
		background-color: var(--secondary-d-4);
	}

	.bg--secondary-d-5 {
		background-color: var(--secondary-d-5);
	}

	.bg--tertiary {
		background-color: var(--tertiary);
	}

	.bg--tertiary-l-1 {
		background-color: var(--tertiary-l-1);
	}

	.bg--tertiary-l-2 {
		background-color: var(--tertiary-l-2);
	}

	.bg--tertiary-l-3 {
		background-color: var(--tertiary-l-3);
	}

	.bg--tertiary-l-4 {
		background-color: var(--tertiary-l-4);
	}

	.bg--tertiary-l-5 {
		background-color: var(--tertiary-l-5);
	}

	.bg--tertiary-d-1 {
		background-color: var(--tertiary-d-1);
	}

	.bg--tertiary-d-2 {
		background-color: var(--tertiary-d-2);
	}

	.bg--tertiary-d-3 {
		background-color: var(--tertiary-d-3);
	}

	.bg--tertiary-d-4 {
		background-color: var(--tertiary-d-4);
	}

	.bg--tertiary-d-5 {
		background-color: var(--tertiary-d-5);
	}

	.bg--accent {
		background-color: var(--accent);
	}

	.bg--accent-l-1 {
		background-color: var(--accent-l-1);
	}

	.bg--accent-l-2 {
		background-color: var(--accent-l-2);
	}

	.bg--accent-l-3 {
		background-color: var(--accent-l-3);
	}

	.bg--accent-l-4 {
		background-color: var(--accent-l-4);
	}

	.bg--accent-l-5 {
		background-color: var(--accent-l-5);
	}

	.bg--accent-d-1 {
		background-color: var(--accent-d-1);
	}

	.bg--accent-d-2 {
		background-color: var(--accent-d-2);
	}

	.bg--accent-d-3 {
		background-color: var(--accent-d-3);
	}

	.bg--accent-d-4 {
		background-color: var(--accent-d-4);
	}

	.bg--accent-d-5 {
		background-color: var(--accent-d-5);
	}

	.bg--base {
		background-color: var(--base);
	}

	.bg--base-l-1 {
		background-color: var(--base-l-1);
	}

	.bg--base-l-2 {
		background-color: var(--base-l-2);
	}

	.bg--base-l-3 {
		background-color: var(--base-l-3);
	}

	.bg--base-l-4 {
		background-color: var(--base-l-4);
	}

	.bg--base-l-5 {
		background-color: var(--base-l-5);
	}

	.bg--base-d-1 {
		background-color: var(--base-d-1);
	}

	.bg--base-d-2 {
		background-color: var(--base-d-2);
	}

	.bg--base-d-3 {
		background-color: var(--base-d-3);
	}

	.bg--base-d-4 {
		background-color: var(--base-d-4);
	}

	.bg--base-d-5 {
		background-color: var(--base-d-5);
	}

	.bg--neutral {
		background-color: var(--neutral);
	}

	.bg--neutral-l-1 {
		background-color: var(--neutral-l-1);
	}

	.bg--neutral-l-2 {
		background-color: var(--neutral-l-2);
	}

	.bg--neutral-l-3 {
		background-color: var(--neutral-l-3);
	}

	.bg--neutral-l-4 {
		background-color: var(--neutral-l-4);
	}

	.bg--neutral-l-5 {
		background-color: var(--neutral-l-5);
	}

	.bg--neutral-d-1 {
		background-color: var(--neutral-d-1);
	}

	.bg--neutral-d-2 {
		background-color: var(--neutral-d-2);
	}

	.bg--neutral-d-3 {
		background-color: var(--neutral-d-3);
	}

	.bg--neutral-d-4 {
		background-color: var(--neutral-d-4);
	}

	.bg--neutral-d-5 {
		background-color: var(--neutral-d-5);
	}

	/* Light and dark shade backgrounds set their own scheme, so text and
	   headings inside stay readable whatever the page scheme is. */
	:is(.bg--primary-l-3, .bg--primary-l-4, .bg--primary-l-5, .bg--secondary-l-3, .bg--secondary-l-4, .bg--secondary-l-5, .bg--tertiary-l-3, .bg--tertiary-l-4, .bg--tertiary-l-5, .bg--accent-l-3, .bg--accent-l-4, .bg--accent-l-5, .bg--base-l-3, .bg--base-l-4, .bg--base-l-5, .bg--neutral-l-3, .bg--neutral-l-4, .bg--neutral-l-5) {
		color-scheme: light;
		color: var(--text-color);
	}

	:is(.bg--primary-d-2, .bg--primary-d-3, .bg--primary-d-4, .bg--primary-d-5, .bg--secondary-d-2, .bg--secondary-d-3, .bg--secondary-d-4, .bg--secondary-d-5, .bg--tertiary-d-2, .bg--tertiary-d-3, .bg--tertiary-d-4, .bg--tertiary-d-5, .bg--accent-d-2, .bg--accent-d-3, .bg--accent-d-4, .bg--accent-d-5, .bg--base-d-2, .bg--base-d-3, .bg--base-d-4, .bg--base-d-5, .bg--neutral-d-2, .bg--neutral-d-3, .bg--neutral-d-4, .bg--neutral-d-5) {
		color-scheme: dark;
		color: var(--text-color);
	}

	/* Grids. !important because core's Group layouts (flow, flex, grid) set
	   display, gap, columns and child margins outside any layer. */
	:where(.grid--1, .grid--2, .grid--3, .grid--4, .grid--5, .grid--6, .grid--1-2, .grid--2-1, .grid--1-3, .grid--3-1, .grid--auto-2, .grid--auto-3, .grid--auto-4, .grid--auto-5, .grid--auto-6) {
		display: grid !important;
		gap: var(--grid-gap) !important;
	}

	:where(.grid--1, .grid--2, .grid--3, .grid--4, .grid--5, .grid--6, .grid--1-2, .grid--2-1, .grid--1-3, .grid--3-1, .grid--auto-2, .grid--auto-3, .grid--auto-4, .grid--auto-5, .grid--auto-6) > * {
		margin: 0 !important;
		max-width: none !important;
	}

	.grid--1 {
		grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
	}

	.grid--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}

	.grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}

	.grid--5 {
		grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
	}

	.grid--6 {
		grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
	}

	.grid--1-2 {
		grid-template-columns: 1fr 2fr !important;
	}

	.grid--2-1 {
		grid-template-columns: 2fr 1fr !important;
	}

	.grid--1-3 {
		grid-template-columns: 1fr 3fr !important;
	}

	.grid--3-1 {
		grid-template-columns: 3fr 1fr !important;
	}

	/* Auto grids: up to n columns, dropping to fewer when each column would
	   be narrower than --grid-min. Set --grid-min on the element to adjust. */
	.grid--auto-2 {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--grid-min, 16rem), calc((100% - 1 * var(--grid-gap)) / 2))), 1fr)) !important;
	}

	.grid--auto-3 {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--grid-min, 16rem), calc((100% - 2 * var(--grid-gap)) / 3))), 1fr)) !important;
	}

	.grid--auto-4 {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--grid-min, 16rem), calc((100% - 3 * var(--grid-gap)) / 4))), 1fr)) !important;
	}

	.grid--auto-5 {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--grid-min, 16rem), calc((100% - 4 * var(--grid-gap)) / 5))), 1fr)) !important;
	}

	.grid--auto-6 {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--grid-min, 16rem), calc((100% - 5 * var(--grid-gap)) / 6))), 1fr)) !important;
	}

	/* Gaps. Each also sets --grid-gap, so auto grids work out their columns
	   from the gap actually in use. */
	.gap--xs {
		--grid-gap: var(--space-xs);
		gap: var(--space-xs) !important;
	}

	.gap--s {
		--grid-gap: var(--space-s);
		gap: var(--space-s) !important;
	}

	.gap--m {
		--grid-gap: var(--space-m);
		gap: var(--space-m) !important;
	}

	.gap--l {
		--grid-gap: var(--space-l);
		gap: var(--space-l) !important;
	}

	.gap--xl {
		--grid-gap: var(--space-xl);
		gap: var(--space-xl) !important;
	}

	.gap--xxl {
		--grid-gap: var(--space-xxl);
		gap: var(--space-xxl) !important;
	}

	/* Padding: all sides, or inline (left and right) only. !important because
	   core removes side padding from Groups nested inside other Groups. */
	.pad--xs {
		padding: var(--space-xs) !important;
	}

	.pad--s {
		padding: var(--space-s) !important;
	}

	.pad--m {
		padding: var(--space-m) !important;
	}

	.pad--l {
		padding: var(--space-l) !important;
	}

	.pad--xl {
		padding: var(--space-xl) !important;
	}

	.pad--xxl {
		padding: var(--space-xxl) !important;
	}

	.pad-inline--xs {
		padding-inline: var(--space-xs) !important;
	}

	.pad-inline--s {
		padding-inline: var(--space-s) !important;
	}

	.pad-inline--m {
		padding-inline: var(--space-m) !important;
	}

	.pad-inline--l {
		padding-inline: var(--space-l) !important;
	}

	.pad-inline--xl {
		padding-inline: var(--space-xl) !important;
	}

	.pad-inline--xxl {
		padding-inline: var(--space-xxl) !important;
	}

	/* Scheme backgrounds and text: these flip with light and dark */
	.bg--body {
		background-color: var(--bg-body);
	}

	.bg--surface {
		background-color: var(--bg-surface);
	}

	.bg--surface-alt {
		background-color: var(--bg-surface-alt);
	}

	.text--muted {
		color: var(--text-muted) !important;
	}

	/* Borders, radius, shadows */
	.border {
		border: var(--border);
	}

	.radius {
		border-radius: var(--radius);
	}

	.radius--circle {
		border-radius: var(--radius-circle);
	}

	.shadow--s {
		box-shadow: var(--shadow-s);
	}

	.shadow--m {
		box-shadow: var(--shadow-m);
	}

	.shadow--l {
		box-shadow: var(--shadow-l);
	}

	.width--10 {
		width: 10%;
	}

	.width--20 {
		width: 20%;
	}

	.width--30 {
		width: 30%;
	}

	.width--40 {
		width: 40%;
	}

	.width--50 {
		width: 50%;
	}

	.width--60 {
		width: 60%;
	}

	.width--70 {
		width: 70%;
	}

	.width--80 {
		width: 80%;
	}

	.width--90 {
		width: 90%;
	}

	.width--full {
		width: 100%;
	}

	.width--auto {
		width: auto;
	}

	.hidden-accessible {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		padding: 0 !important;
		margin: -1px !important;
		overflow: hidden !important;
		clip: rect(0, 0, 0, 0) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}

	/* Put on the link inside a card; the card needs position: relative */
	.clickable-parent::after {
		content: "";
		position: absolute;
		inset: 0;
	}
}