/*
 * The Leweston shop's stylesheet, served by the storefront.
 *
 * The generated block below is written from design/tokens.toml by
 * `cargo run -p design-tokens --bin generate`, and the regeneration test fails
 * if it drifts: the shop wears the portal's and the website's palette, type
 * and spacing. Everything after it is hand-written and consumes the block's
 * custom properties only, which the storefront's stylesheet test enforces.
 * The server serves it under a name carrying a hash of its content, so a
 * browser and the hosting edge may keep it for a year.
 */

/* BEGIN GENERATED BLOCK: design/generated/tokens.css. Do not edit by hand. */
/* Generated from design/tokens.toml by `cargo run -p design-tokens --bin generate`. Do not edit by hand. */

:root {
	/* Palette */
	--palette-navy: #1b264a;
	--palette-navy-dark: #1b264a;
	--palette-navy-deep: #121a35;
	--palette-navy-deep-dark: #0d1328;
	--palette-claret: #7e1629;
	--palette-claret-dark: #a8324a;
	--palette-claret-soft: #f2e3e6;
	--palette-claret-soft-dark: #3b1d27;
	--palette-claret-focus-dark: #d9788a;
	--palette-page: #f6f7f9;
	--palette-page-dark: #10152a;
	--palette-surface: #ffffff;
	--palette-surface-dark: #171e38;
	--palette-ink: #1d2233;
	--palette-ink-dark: #e6e8ef;
	--palette-muted: #525a6e;
	--palette-muted-dark: #a9afc2;
	--palette-rule: #d9dce4;
	--palette-rule-dark: #2c3555;
	--palette-white: #ffffff;
	--palette-white-dark: #ffffff;
	--palette-on-navy: #f2f3f7;
	--palette-on-navy-dark: #f2f3f7;
	--palette-on-navy-muted: #c3c8d8;
	--palette-on-navy-muted-dark: #b9bfd3;
	--palette-on-navy-accent: #aebde3;
	--palette-on-navy-accent-dark: #aebde3;
	--palette-commit-at-reopening: #2e7d4f;
	--palette-commit-at-reopening-dark: #4caf78;
	--palette-commit-soon: #8fb84a;
	--palette-commit-soon-dark: #a5cc66;
	--palette-commit-later: #e2b93b;
	--palette-commit-later-dark: #e8c55a;
	--palette-commit-consider: #6f9fd8;
	--palette-commit-consider-dark: #79a6e0;
	--palette-commit-september: #e08a3c;
	--palette-commit-september-dark: #e69a55;
	--palette-commit-not-return: #a8243a;
	--palette-commit-not-return-dark: #e0687c;
	--palette-section-nursery: #dbe2f2;
	--palette-section-nursery-dark: #2f3a63;
	--palette-section-pre-prep: #adbbe2;
	--palette-section-pre-prep-dark: #46578f;
	--palette-section-prep: #7389c6;
	--palette-section-prep-dark: #6a80c0;
	--palette-section-senior: #3f5599;
	--palette-section-senior-dark: #95aadf;
	--palette-section-sixth-form: #1b264a;
	--palette-section-sixth-form-dark: #c8d4f2;
	--palette-track: #eceef3;
	--palette-track-dark: #252d4a;
	--palette-navy-edge-dark: #6f84c4;
	--palette-claret-edge-dark: #c94a5f;
	--palette-claret-figure-dark: #f0a3b0;
	--palette-chart-income: #335ca0;
	--palette-chart-income-dark: #5991ed;
	--palette-chart-costs: #9f3501;
	--palette-chart-costs-dark: #d37812;
	--palette-chart-surplus: #518b44;
	--palette-chart-surplus-dark: #339c6d;
	--palette-chart-deficit: #913378;
	--palette-chart-deficit-dark: #cd6aaf;
	--palette-chart-cash: #008053;
	--palette-chart-cash-dark: #339c6d;
	--palette-chart-buffer: #9d580c;
	--palette-chart-buffer-dark: #ac7d1b;
	--palette-chart-capacity: #b0451a;
	--palette-chart-capacity-dark: #e07a3a;
	--palette-role-parent: #dbe6f7;
	--palette-role-parent-dark: #2a3f6e;
	--palette-role-staff: #dcefe2;
	--palette-role-staff-dark: #1f4a33;
	--palette-role-supporter: #f7ecd2;
	--palette-role-supporter-dark: #5a4514;

	/* Colour */
	--colour-bg: var(--palette-page);
	--colour-surface: var(--palette-surface);
	--colour-ink: var(--palette-ink);
	--colour-muted: var(--palette-muted);
	--colour-rule: var(--palette-rule);
	--colour-accent: var(--palette-claret);
	--colour-accent-soft: var(--palette-claret-soft);
	--colour-on-accent: var(--palette-white);
	--colour-chrome: var(--palette-navy);
	--colour-chrome-deep: var(--palette-navy-deep);
	--colour-on-chrome: var(--palette-on-navy);
	--colour-on-chrome-muted: var(--palette-on-navy-muted);
	--colour-on-chrome-accent: var(--palette-on-navy-accent);
	--colour-heading: var(--palette-navy);
	--colour-danger: var(--palette-claret);
	--colour-link: var(--palette-navy);
	--colour-focus: var(--palette-claret);
	--colour-commit-at-reopening: var(--palette-commit-at-reopening);
	--colour-commit-soon: var(--palette-commit-soon);
	--colour-commit-later: var(--palette-commit-later);
	--colour-commit-consider: var(--palette-commit-consider);
	--colour-commit-september: var(--palette-commit-september);
	--colour-commit-not-return: var(--palette-commit-not-return);
	--colour-on-commit-at-reopening: var(--palette-white);
	--colour-on-commit-soon: var(--palette-ink);
	--colour-on-commit-later: var(--palette-ink);
	--colour-on-commit-consider: var(--palette-ink);
	--colour-on-commit-september: var(--palette-ink);
	--colour-on-commit-not-return: var(--palette-white);
	--colour-section-nursery: var(--palette-section-nursery);
	--colour-section-pre-prep: var(--palette-section-pre-prep);
	--colour-section-prep: var(--palette-section-prep);
	--colour-section-senior: var(--palette-section-senior);
	--colour-section-sixth-form: var(--palette-section-sixth-form);
	--colour-on-section-nursery: var(--palette-navy-deep);
	--colour-on-section-pre-prep: var(--palette-navy-deep);
	--colour-on-section-prep: var(--palette-navy-deep);
	--colour-on-section-senior: var(--palette-white);
	--colour-on-section-sixth-form: var(--palette-white);
	--colour-chart-track: var(--palette-track);
	--colour-edge: var(--palette-navy);
	--colour-money-edge: var(--palette-claret);
	--colour-money: var(--palette-claret);
	--colour-figure: var(--palette-navy);
	--colour-role-parent: var(--palette-role-parent);
	--colour-role-staff: var(--palette-role-staff);
	--colour-role-supporter: var(--palette-role-supporter);
	--colour-chart-income: var(--palette-chart-income);
	--colour-chart-costs: var(--palette-chart-costs);
	--colour-chart-surplus: var(--palette-chart-surplus);
	--colour-chart-deficit: var(--palette-chart-deficit);
	--colour-chart-cash: var(--palette-chart-cash);
	--colour-chart-buffer: var(--palette-chart-buffer);
	--colour-chart-capacity: var(--palette-chart-capacity);

	/* Type */
	--font-heading: "EB Garamond", Georgia, serif;
	--font-body: "Source Sans 3", system-ui, sans-serif;
	--font-size-root: 17px;
	--line-height-body: 1.65;
	--font-size-display: 2.75rem;
	--font-size-h1: 2.25rem;
	--font-size-h2: 1.75rem;
	--font-size-h3: 1.375rem;
	--font-size-body: 1rem;
	--font-size-small: 0.875rem;
	--font-size-fine: 0.765rem;
	--font-size-h4: 1.125rem;
	--font-size-figure: 1.5rem;
	--font-size-mark: 1.3rem;
	--font-size-figure-money: 2rem;
	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;

	/* Shape and space */
	--radius-control: 3px;
	--radius-card: 6px;
	--radius-panel: 8px;
	--radius-mark: 4px;
	--radius-swatch: 3px;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 40px;
	--space-8: 48px;
	--size-page: 68rem;
	--size-text: 40rem;
	--size-header: 3.5rem;
	--size-stack: 2rem;
	--size-meter: 0.5882rem;
	--size-swatch: 0.8235rem;
	--size-swatch-small: 0.7059rem;
	--size-year-chart: 13.5rem;
	--size-year-row: 0.8235rem;
	--size-glance-card: 12rem;
	--size-matrix-head: 14rem;
	--size-matrix-col: 7.5rem;
	--size-matrix-dot: 0.375rem;
	--size-model-chart: 15rem;
	--stroke-hairline: 1px;
	--stroke-rule: 2px;
	--stroke-focus: 3px;
	--stroke-strip: 6px;
	--stroke-edge: 4px;
	--stroke-dash: 2px;
	--stroke-marker: 10px;

	/* Components */
	--primary-button-fill: var(--colour-accent);
	--primary-button-text: var(--colour-on-accent);
	--primary-button-radius: var(--radius-control);
	--primary-button-on: var(--colour-surface);
	--secondary-button-text: var(--colour-link);
	--secondary-button-border: var(--colour-link);
	--secondary-button-radius: var(--radius-control);
	--secondary-button-on: var(--colour-surface);
	--destructive-button-text: var(--colour-danger);
	--destructive-button-border: var(--colour-danger);
	--destructive-button-radius: var(--radius-control);
	--destructive-button-on: var(--colour-surface);
	--text-link-text: var(--colour-link);
	--text-link-decoration: var(--colour-accent);
	--text-link-on: var(--colour-surface);
	--field-fill: var(--colour-surface);
	--field-text: var(--colour-ink);
	--field-muted: var(--colour-muted);
	--field-border: var(--colour-muted);
	--field-radius: var(--radius-control);
	--field-on: var(--colour-surface);
	--card-fill: var(--colour-surface);
	--card-text: var(--colour-ink);
	--card-muted: var(--colour-muted);
	--card-decoration: var(--colour-rule);
	--card-radius: var(--radius-card);
	--card-on: var(--colour-bg);
	--badge-fill: var(--colour-accent-soft);
	--badge-text: var(--colour-ink);
	--badge-radius: var(--radius-control);
	--badge-on: var(--colour-surface);
	--chip-parent-fill: var(--colour-role-parent);
	--chip-parent-text: var(--colour-ink);
	--chip-parent-radius: var(--radius-control);
	--chip-parent-on: var(--colour-surface);
	--chip-staff-fill: var(--colour-role-staff);
	--chip-staff-text: var(--colour-ink);
	--chip-staff-radius: var(--radius-control);
	--chip-staff-on: var(--colour-surface);
	--chip-supporter-fill: var(--colour-role-supporter);
	--chip-supporter-text: var(--colour-ink);
	--chip-supporter-radius: var(--radius-control);
	--chip-supporter-on: var(--colour-surface);
	--banner-fill: var(--colour-accent-soft);
	--banner-text: var(--colour-ink);
	--banner-decoration: var(--colour-accent);
	--banner-radius: var(--radius-control);
	--banner-on: var(--colour-bg);
	--table-fill: var(--colour-surface);
	--table-text: var(--colour-ink);
	--table-muted: var(--colour-muted);
	--table-decoration: var(--colour-rule);
	--table-on: var(--colour-bg);
	--chrome-fill: var(--colour-chrome);
	--chrome-text: var(--colour-on-chrome);
	--chrome-muted: var(--colour-on-chrome-muted);
	--chrome-on: var(--colour-bg);
	--wordmark-fill: var(--colour-chrome);
	--wordmark-text: var(--colour-on-chrome-accent);
	--wordmark-on: var(--colour-bg);
	--footer-fill: var(--colour-chrome-deep);
	--footer-text: var(--colour-on-chrome);
	--footer-muted: var(--colour-on-chrome-muted);
	--footer-on: var(--colour-bg);
	--heading-text: var(--colour-heading);
	--heading-on: var(--colour-bg);
	--chart-track-fill: var(--colour-chart-track);
	--chart-track-on: var(--colour-surface);
	--commit-at-reopening-fill: var(--colour-commit-at-reopening);
	--commit-at-reopening-text: var(--colour-on-commit-at-reopening);
	--commit-at-reopening-on: var(--colour-surface);
	--commit-soon-fill: var(--colour-commit-soon);
	--commit-soon-text: var(--colour-on-commit-soon);
	--commit-soon-on: var(--colour-surface);
	--commit-later-fill: var(--colour-commit-later);
	--commit-later-text: var(--colour-on-commit-later);
	--commit-later-on: var(--colour-surface);
	--commit-consider-fill: var(--colour-commit-consider);
	--commit-consider-text: var(--colour-on-commit-consider);
	--commit-consider-on: var(--colour-surface);
	--commit-september-fill: var(--colour-commit-september);
	--commit-september-text: var(--colour-on-commit-september);
	--commit-september-on: var(--colour-surface);
	--commit-not-return-fill: var(--colour-commit-not-return);
	--commit-not-return-text: var(--colour-on-commit-not-return);
	--commit-not-return-on: var(--colour-surface);
	--section-nursery-fill: var(--colour-section-nursery);
	--section-nursery-text: var(--colour-on-section-nursery);
	--section-nursery-on: var(--colour-surface);
	--section-pre-prep-fill: var(--colour-section-pre-prep);
	--section-pre-prep-text: var(--colour-on-section-pre-prep);
	--section-pre-prep-on: var(--colour-surface);
	--section-prep-fill: var(--colour-section-prep);
	--section-prep-text: var(--colour-on-section-prep);
	--section-prep-on: var(--colour-surface);
	--section-senior-fill: var(--colour-section-senior);
	--section-senior-text: var(--colour-on-section-senior);
	--section-senior-on: var(--colour-surface);
	--section-sixth-form-fill: var(--colour-section-sixth-form);
	--section-sixth-form-text: var(--colour-on-section-sixth-form);
	--section-sixth-form-on: var(--colour-surface);
	--glance-card-fill: var(--colour-surface);
	--glance-card-text: var(--colour-figure);
	--glance-card-muted: var(--colour-muted);
	--glance-card-border: var(--colour-edge);
	--glance-card-radius: var(--radius-panel);
	--glance-card-on: var(--colour-bg);
	--glance-card-money-fill: var(--colour-surface);
	--glance-card-money-text: var(--colour-money);
	--glance-card-money-muted: var(--colour-muted);
	--glance-card-money-border: var(--colour-money-edge);
	--glance-card-money-radius: var(--radius-panel);
	--glance-card-money-on: var(--colour-bg);
	--matrix-cell-fill: var(--colour-surface);
	--matrix-cell-text: var(--colour-ink);
	--matrix-cell-decoration: var(--colour-rule);
	--matrix-cell-on: var(--colour-surface);
	--matrix-cell-inherited-fill: var(--colour-surface);
	--matrix-cell-inherited-text: var(--colour-muted);
	--matrix-cell-inherited-on: var(--colour-surface);
	--matrix-cell-override-fill: var(--colour-surface);
	--matrix-cell-override-text: var(--colour-link);
	--matrix-cell-override-border: var(--colour-link);
	--matrix-cell-override-on: var(--colour-surface);
	--matrix-cell-derived-fill: var(--colour-surface);
	--matrix-cell-derived-text: var(--colour-muted);
	--matrix-cell-derived-on: var(--colour-surface);
	--matrix-cell-invalid-fill: var(--colour-accent-soft);
	--matrix-cell-invalid-text: var(--colour-danger);
	--matrix-cell-invalid-border: var(--colour-danger);
	--matrix-cell-invalid-on: var(--colour-surface);
	--matrix-cell-selected-fill: var(--colour-accent-soft);
	--matrix-cell-selected-text: var(--colour-ink);
	--matrix-cell-selected-border: var(--colour-focus);
	--matrix-cell-selected-on: var(--colour-surface);
	--matrix-header-fill: var(--colour-bg);
	--matrix-header-text: var(--colour-heading);
	--matrix-header-muted: var(--colour-muted);
	--matrix-header-decoration: var(--colour-rule);
	--matrix-header-on: var(--colour-surface);
	--chart-income-border: var(--colour-chart-income);
	--chart-income-on: var(--colour-surface);
	--chart-costs-border: var(--colour-chart-costs);
	--chart-costs-on: var(--colour-surface);
	--chart-surplus-border: var(--colour-chart-surplus);
	--chart-surplus-on: var(--colour-surface);
	--chart-deficit-border: var(--colour-chart-deficit);
	--chart-deficit-on: var(--colour-surface);
	--chart-cash-border: var(--colour-chart-cash);
	--chart-cash-on: var(--colour-surface);
	--chart-buffer-border: var(--colour-chart-buffer);
	--chart-buffer-on: var(--colour-surface);
	--chart-capacity-border: var(--colour-chart-capacity);
	--chart-capacity-on: var(--colour-surface);
}

@media (prefers-color-scheme: dark) {
	:root {
		--colour-bg: var(--palette-page-dark);
		--colour-surface: var(--palette-surface-dark);
		--colour-ink: var(--palette-ink-dark);
		--colour-muted: var(--palette-muted-dark);
		--colour-rule: var(--palette-rule-dark);
		--colour-accent: var(--palette-claret-dark);
		--colour-accent-soft: var(--palette-claret-soft-dark);
		--colour-on-accent: var(--palette-white-dark);
		--colour-chrome: var(--palette-navy-dark);
		--colour-chrome-deep: var(--palette-navy-deep-dark);
		--colour-on-chrome: var(--palette-on-navy-dark);
		--colour-on-chrome-muted: var(--palette-on-navy-muted-dark);
		--colour-on-chrome-accent: var(--palette-on-navy-accent-dark);
		--colour-heading: var(--palette-ink-dark);
		--colour-danger: var(--palette-claret-focus-dark);
		--colour-link: var(--palette-on-navy-accent-dark);
		--colour-focus: var(--palette-claret-focus-dark);
		--colour-commit-at-reopening: var(--palette-commit-at-reopening-dark);
		--colour-commit-soon: var(--palette-commit-soon-dark);
		--colour-commit-later: var(--palette-commit-later-dark);
		--colour-commit-consider: var(--palette-commit-consider-dark);
		--colour-commit-september: var(--palette-commit-september-dark);
		--colour-commit-not-return: var(--palette-commit-not-return-dark);
		--colour-on-commit-at-reopening: var(--palette-page-dark);
		--colour-on-commit-soon: var(--palette-page-dark);
		--colour-on-commit-later: var(--palette-page-dark);
		--colour-on-commit-consider: var(--palette-page-dark);
		--colour-on-commit-september: var(--palette-page-dark);
		--colour-on-commit-not-return: var(--palette-page-dark);
		--colour-section-nursery: var(--palette-section-nursery-dark);
		--colour-section-pre-prep: var(--palette-section-pre-prep-dark);
		--colour-section-prep: var(--palette-section-prep-dark);
		--colour-section-senior: var(--palette-section-senior-dark);
		--colour-section-sixth-form: var(--palette-section-sixth-form-dark);
		--colour-on-section-nursery: var(--palette-ink-dark);
		--colour-on-section-pre-prep: var(--palette-white-dark);
		--colour-on-section-prep: var(--palette-page-dark);
		--colour-on-section-senior: var(--palette-page-dark);
		--colour-on-section-sixth-form: var(--palette-page-dark);
		--colour-chart-track: var(--palette-track-dark);
		--colour-edge: var(--palette-navy-edge-dark);
		--colour-money-edge: var(--palette-claret-edge-dark);
		--colour-money: var(--palette-claret-figure-dark);
		--colour-figure: var(--palette-ink-dark);
		--colour-role-parent: var(--palette-role-parent-dark);
		--colour-role-staff: var(--palette-role-staff-dark);
		--colour-role-supporter: var(--palette-role-supporter-dark);
		--colour-chart-income: var(--palette-chart-income-dark);
		--colour-chart-costs: var(--palette-chart-costs-dark);
		--colour-chart-surplus: var(--palette-chart-surplus-dark);
		--colour-chart-deficit: var(--palette-chart-deficit-dark);
		--colour-chart-cash: var(--palette-chart-cash-dark);
		--colour-chart-buffer: var(--palette-chart-buffer-dark);
		--colour-chart-capacity: var(--palette-chart-capacity-dark);
	}
}
/* END GENERATED BLOCK */

:root {
	color-scheme: light dark;
	font-size: var(--font-size-root);
}

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

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	background: var(--colour-bg);
	color: var(--colour-ink);
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	font-weight: var(--weight-regular);
	line-height: var(--line-height-body);
	text-size-adjust: 100%;
}

h1 {
	margin: 0 0 var(--space-5);
	color: var(--heading-text);
	font-family: var(--font-heading);
	font-size: var(--font-size-h1);
	font-weight: var(--weight-medium);
	line-height: 1.15;
}

a {
	color: var(--text-link-text);
	text-decoration-color: var(--text-link-decoration);
}

a:focus-visible {
	outline: var(--stroke-focus) solid var(--colour-focus);
	outline-offset: var(--space-1);
}

/* The header: navy, the shop's name on the left. */
.shop-head {
	background: var(--chrome-fill);
	color: var(--chrome-text);
	border-bottom: var(--stroke-hairline) solid var(--colour-chrome-deep);
}

.shop-head-row,
.shop-main,
.shop-foot-row {
	width: 100%;
	max-width: var(--size-page);
	margin: 0 auto;
	padding: 0 var(--space-5);
}

.shop-head-row {
	display: flex;
	align-items: center;
	min-height: var(--size-header);
}

.shop-mark {
	color: var(--wordmark-text);
	font-family: var(--font-heading);
	font-size: var(--font-size-mark);
	text-decoration: none;
}

.shop-main {
	flex: 1;
	padding-top: var(--space-7);
	padding-bottom: var(--space-8);
}

.shop-lede {
	max-width: var(--size-text);
	margin: 0;
	font-size: var(--font-size-h4);
}

/* The footer: deep navy, the shop's pages in a row. */
.shop-foot {
	background: var(--footer-fill);
	color: var(--footer-text);
}

.shop-foot-row {
	padding-top: var(--space-5);
	padding-bottom: var(--space-5);
}

.shop-foot-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.shop-foot-list a {
	color: var(--footer-muted);
	font-size: var(--font-size-small);
	text-decoration: none;
}

.shop-foot-list a:hover {
	color: var(--footer-text);
	text-decoration: underline;
}

@media (max-width: 40rem) {
	.shop-head-row,
	.shop-main,
	.shop-foot-row {
		padding: 0 var(--space-4);
	}

	.shop-main {
		padding-top: var(--space-6);
		padding-bottom: var(--space-7);
	}

	.shop-foot-row {
		padding-top: var(--space-5);
		padding-bottom: var(--space-5);
	}
}

/* The front page's list: a card per product, as many across as fit. */
.shop-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--size-glance-card), 1fr));
	gap: var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.shop-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4);
	background: var(--card-fill);
	color: var(--card-text);
	border: var(--stroke-hairline) solid var(--card-decoration);
	border-radius: var(--card-radius);
}

.shop-card-link {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	color: var(--heading-text);
	text-decoration: none;
}

.shop-card-link:hover .shop-card-name {
	text-decoration: underline;
}

.shop-card-image,
.shop-gallery-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	background: var(--colour-surface);
	border-radius: var(--radius-control);
}

.shop-card-name {
	font-family: var(--font-heading);
	font-size: var(--font-size-h3);
	font-weight: var(--weight-medium);
}

.shop-card-summary {
	margin: 0;
	color: var(--card-muted);
	font-size: var(--font-size-small);
}

.shop-price {
	margin: 0;
	color: var(--colour-money);
	font-weight: var(--weight-semibold);
}

.shop-sold-out {
	align-self: flex-start;
	margin: 0;
	padding: var(--space-1) var(--space-2);
	background: var(--badge-fill);
	color: var(--badge-text);
	border-radius: var(--badge-radius);
	font-size: var(--font-size-small);
}

/* A product's page: its pictures beside what it is and the choice. */
.shop-back {
	margin: 0 0 var(--space-5);
}

.shop-product {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--size-glance-card), 1fr));
	gap: var(--space-7);
	align-items: start;
}

.shop-gallery {
	display: grid;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.shop-product-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0;
}

.shop-product-body h1 {
	margin: 0;
}

.shop-description {
	max-width: var(--size-text);
	overflow-wrap: anywhere;
}

.shop-buy {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	align-items: end;
}

/* The checkout's part of the form, its delivery choice and buttons, on a line of its own. */
.shop-buy-checkout {
	flex-basis: 100%;
}

.shop-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-width: 0;
}

.shop-label {
	font-weight: var(--weight-medium);
}

.shop-input {
	min-height: var(--space-7);
	padding: var(--space-2) var(--space-3);
	background: var(--field-fill);
	color: var(--field-text);
	border: var(--stroke-edge) solid var(--field-border);
	border-radius: var(--field-radius);
	font: inherit;
	max-width: 100%;
}

.shop-quantity {
	width: calc(var(--size-header) * 2);
}

.shop-input:focus-visible {
	outline: var(--stroke-focus) solid var(--colour-focus);
	outline-offset: var(--space-1);
}

/* The basket and checkout. */
.shop-basket-link {
	margin-left: auto;
	color: var(--chrome-text);
	font-size: var(--font-size-small);
}

.shop-basket-link:hover {
	color: var(--chrome-muted);
}

.shop-table-wrap {
	max-width: 100%;
	overflow-x: auto;
}

.shop-table {
	width: 100%;
	margin: 0 0 var(--space-5);
	border-collapse: collapse;
}

.shop-table th,
.shop-table td {
	padding: var(--space-2) var(--space-3);
	border-bottom: var(--stroke-hairline) solid var(--colour-rule);
	text-align: left;
	vertical-align: top;
}

.shop-table .shop-quantity {
	width: var(--space-8);
	padding: var(--space-1) var(--space-2);
	border: var(--stroke-hairline) solid var(--field-border);
	border-radius: var(--field-radius);
	background: var(--field-fill);
	color: var(--field-text);
	font: inherit;
}

.shop-delivery {
	margin: 0 0 var(--space-5);
	padding: 0;
	border: 0;
}

.shop-delivery legend {
	margin-bottom: var(--space-2);
	padding: 0;
	font-weight: var(--weight-semibold);
}

.shop-choice {
	display: block;
	margin: 0 0 var(--space-2);
}

.shop-note {
	margin: 0 0 var(--space-3);
	color: var(--colour-muted);
	font-size: var(--font-size-small);
}

.shop-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: 0 0 var(--space-3);
}

.shop-button {
	padding: var(--space-3) var(--space-5);
	border: var(--stroke-hairline) solid var(--primary-button-fill);
	border-radius: var(--primary-button-radius);
	background: var(--primary-button-fill);
	color: var(--primary-button-text);
	font: inherit;
	font-weight: var(--weight-semibold);
	cursor: pointer;
}

.shop-button-secondary {
	border-color: var(--secondary-button-border);
	border-radius: var(--secondary-button-radius);
	background: none;
	color: var(--secondary-button-text);
}

.shop-link-button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--text-link-text);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.shop-button:focus-visible,
.shop-link-button:focus-visible,
.shop-table .shop-quantity:focus-visible {
	outline: var(--stroke-focus) solid var(--colour-focus);
	outline-offset: var(--space-1);
}

.shop-problem {
	margin: var(--space-1) 0 0;
	color: var(--colour-danger);
	font-size: var(--font-size-small);
}

.shop-problems {
	max-width: var(--size-text);
	margin: 0 0 var(--space-5);
}

.shop-checkout {
	margin-top: var(--space-5);
}