/* Shop styles: semantic element selectors only, no classes.

   The look is light and editorial: white pages, near-black text, hairline
   rules, sharp corners, a grotesque sans for text and a display serif for
   the category tabs and section headings. The footer is dark brown, and a
   yellow marker highlights sale prices. */

:root {
	--bg: #fff;
	--surface: #f5f1ea; /* image placeholders */
	--border: #e3ded6; /* hairline rules */
	--border-strong: #c9c2b7; /* form fields */
	--text: #1d1a16;
	--text-muted: #736c62;
	--brown: #45190b; /* footer, hover on dark buttons */
	--cream: #f4ebdf; /* text on brown */
	--highlight: #eeec74; /* sale prices, text selection */
	--error: #a4421d;
	--radius: 2px;
	--page: 76rem;
	--sans: "Inter", ui-sans-serif, system-ui, sans-serif;
	--serif: "Instrument Serif", ui-serif, Georgia, serif;
	--icons: "Font Awesome 7 Free"; /* weight 900 solid, 400 regular */
	--brand-icons: "Font Awesome 7 Brands";
}

/* Fonts are served from /static/ (the CSP allows only the shop's own
   origin). Inter is a variable font, so every weight is one file. */
@font-face {
	font-family: "Inter";
	src: url("inter.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Instrument Serif";
	src: url("instrument-serif.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Instrument Serif";
	src: url("instrument-serif-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* Icons: Font Awesome Free (https://fontawesome.com/search?ic=free). The
   markup has no icon elements; a rule adds an icon to an element with
   ::before, using the icon's code point from its page on fontawesome.com:

     selector::before {
       content: "\f07a";
       content: "\f07a" / "";   (the empty alt text hides it from screen readers)
       font: 900 1em/1 var(--icons);
     }

   Weight 900 is the solid style, 400 the regular style (fewer icons);
   logos use font: 400 1em/1 var(--brand-icons). A browser only downloads a
   font once a rule uses it. */
@font-face {
	font-family: "Font Awesome 7 Free";
	src: url("fa-solid-900.woff2") format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: block;
}

@font-face {
	font-family: "Font Awesome 7 Free";
	src: url("fa-regular-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: block;
}

@font-face {
	font-family: "Font Awesome 7 Brands";
	src: url("fa-brands-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: block;
}

/* ---------------------------------------------------------------- base */

body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--sans);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

/* Form controls don't inherit the font by default */
button,
input,
select,
textarea {
	font: inherit;
}

h1,
h2,
h3 {
	line-height: 1.15;
}

h1 {
	margin: 2.5rem 0 1.5rem;
	font-size: clamp(2rem, 1.4rem + 2.5vw, 3.25rem);
	font-weight: 300;
	letter-spacing: -0.03em;
}

h2 {
	margin: 2.5rem 0 1rem;
	font-family: var(--serif);
	font-size: clamp(1.6rem, 1.35rem + 1vw, 2.1rem);
	font-weight: 400;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover {
	color: var(--brown);
}

:focus-visible {
	outline: 2px solid var(--text);
	outline-offset: 2px;
}

::selection {
	background: var(--highlight);
	color: var(--text);
}

/* Images never overflow their container, e.g. on narrow screens */
img {
	max-width: 100%;
	height: auto;
}

/* A sale price is marked like with a highlighter; the regular price is
   crossed out beside it */
ins {
	padding: 0 0.25em;
	background: var(--highlight);
	text-decoration: none;
}

del {
	color: var(--text-muted);
	font-weight: 400;
}

address {
	font-style: normal;
}

/* Error messages above a form, e.g. a failed login */
main p[role="alert"] {
	padding: 0.6rem 1rem;
	border-left: 3px solid var(--error);
	background: var(--surface);
}

/* -------------------------------------------------------------- layout */

/* Page layout: header, main, footer stacked at least as tall as the
   viewport, with main taking the free space so the footer stays at the
   bottom of short pages. */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	margin: 0;
}

/* Content is at most --page wide and centred; header and footer keep their
   full-width background but line their content up with main. */
body > main {
	flex: 1;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--page);
	margin-inline: auto;
	padding: 0 1rem;
}

/* Titles of product listings (home and category pages, the ones followed by
   the category tabs) are centred above them */
main > :is(h1, hgroup):has(+ nav) {
	text-align: center;
}

main > hgroup h1 {
	margin-bottom: 0.5rem;
}

main > hgroup p {
	margin: 0 0 1.5rem;
	color: var(--text-muted);
}

/* -------------------------------------------------------------- header */

/* Top navigation (body > header, so the pagination nav is not affected):
   the shop's name on the left, the links on the right, wrapping below it
   when they don't fit (e.g. the many admin links on a phone or with a
   large text size). */
body > header {
	border-bottom: 1px solid var(--border);
	background: var(--bg);
}

body > header nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0 1rem;
	padding: 0.75rem max(1rem, (100% - var(--page)) / 2 + 1rem);
	font-size: 0.875rem;
}

body > header nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

body > header nav a,
body > header nav button {
	display: block;
	padding: 0.5rem;
	border: 0;
	background: none;
	color: var(--text);
	font: inherit;
	text-decoration: none;
	cursor: pointer;
}

body > header nav a:hover,
body > header nav a:focus-visible,
body > header nav button:hover,
body > header nav button:focus-visible {
	background: none;
	color: var(--text);
	text-decoration: underline;
}

body > header nav form {
	margin: 0;
}

/* Link text lines up with the content's edges: the shop's name has no
   padding on the left, and the lists of links reach past their padding on
   both sides, also when they wrap below the name. */
body > header nav ul:first-child a {
	padding-left: 0;
}

body > header nav ul:not(:first-child) {
	margin-inline: -0.5rem;
}

/* The cart link with a shopping cart icon (cart-shopping) */
body > header nav a[href="/cart"] {
	display: flex;
	align-items: center;
	gap: 0.45em;
}

body > header nav a[href="/cart"]::before {
	content: "\f07a";
	content: "\f07a" / "";
	font: 900 1.05em/1 var(--icons);
	-webkit-font-smoothing: antialiased;
}

/* The shop's name: a bold uppercase wordmark */
body > header nav strong {
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

/* From 48rem the shop navigation (a single link on the right, the cart)
   centres the shop's name, as there is room on both sides. */
@media (min-width: 48rem) {
	body > header nav:has(> ul:last-child > li:only-child) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	}

	body > header nav:has(> ul:last-child > li:only-child) > ul:first-child {
		grid-column: 2;
	}

	body > header nav:has(> ul:last-child > li:only-child) > ul:last-child {
		grid-column: 3;
		justify-content: end;
	}
}

/* -------------------------------------------------------------- footer */

/* Page footer on dark brown. Mobile first: contact details, legal links,
   the shop's name as a large wordmark and the copyright line under a rule,
   stacked. From 48rem two columns: contact details and legal links on top,
   the wordmark and the copyright line below them. */
body > footer {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem;
	margin-top: 5rem;
	padding: 3.5rem max(1rem, (100% - var(--page)) / 2 + 1rem) 1.5rem;
	background: var(--brown);
	color: var(--cream);
	font-size: 0.875rem;
}

body > footer h2 {
	margin: 0 0 0.75rem;
	font-family: var(--sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body > footer address {
	line-height: 1.7;
}

body > footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body > footer p {
	margin: 0;
}

body > footer a {
	color: inherit;
	text-decoration: none;
}

body > footer li a {
	display: inline-block;
	padding: 0.2rem 0;
}

body > footer a:hover,
body > footer a:focus-visible {
	color: inherit;
	text-decoration: underline;
}

body > footer :focus-visible {
	outline-color: var(--cream);
}

/* the wordmark is sized with the viewport only (no minimum in rem, which
   grows with the text size) so a name of about 16 characters fits one line */
body > footer > p:not(:has(small)) {
	margin-top: 1rem;
	font-size: min(8.5vw, 8rem);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.045em;
	text-transform: uppercase;
	overflow-wrap: break-word;
}

body > footer > p:has(small) {
	padding-top: 1rem;
	border-top: 1px solid color-mix(in srgb, var(--cream) 25%, transparent);
	color: color-mix(in srgb, var(--cream) 75%, transparent);
}

@media (min-width: 48rem) {
	body > footer {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
		column-gap: 4rem;
		row-gap: 4rem;
	}

	/* the wordmark fills the left column */
	body > footer > p:not(:has(small)) {
		margin-top: 0;
		font-size: min(4.6vw, 3.8rem);
	}

	/* the copyright line sits beside the wordmark, on its baseline */
	body > footer > p:has(small) {
		align-self: end;
		padding-top: 0;
		border-top: 0;
	}
}

/* ------------------------------------------------------- category tabs */

/* Category list (partials/categories.html): a row of tabs in the display
   serif on a rule, the current category underlined. The row scrolls
   sideways when it doesn't fit. */
nav[aria-labelledby="category-list"] {
	margin: 0 0 2.5rem;
	border-bottom: 1px solid var(--border);
}

/* the heading is for screen readers only */
nav[aria-labelledby="category-list"] h2 {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

nav[aria-labelledby="category-list"] ul {
	display: flex;
	gap: 2rem;
	margin: 0 0 -1px;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

nav[aria-labelledby="category-list"] a {
	display: block;
	padding: 0.25rem 0 0.5rem;
	border-bottom: 2px solid transparent;
	color: var(--text-muted);
	font-family: var(--serif);
	font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

nav[aria-labelledby="category-list"] a:hover,
nav[aria-labelledby="category-list"] a[aria-current="page"] {
	border-bottom-color: var(--text);
	color: var(--text);
}

nav[aria-labelledby="category-list"] a:focus-visible {
	outline-offset: -2px;
}

/* -------------------------------------------------------- product grid */

/* Product list: a grid of product cards with a large feature card in every
   five. Mobile first: two columns, the feature card spanning both. From
   64rem on four columns, the feature card two columns and two rows wide,
   alternately on the right (3rd card) and on the left (6th card) of a
   block of five; only blocks that are complete get one, so short lists
   stay a plain grid. */
ul:has(> li > article) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

ul:has(> li > article) > li:is(:nth-child(10n + 3), :nth-child(10n + 6)) {
	grid-column: span 2;
}

@media (min-width: 40rem) {
	ul:has(> li > article) {
		gap: 2.5rem 1.25rem;
	}
}

@media (min-width: 64rem) {
	ul:has(> li > article) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	ul:has(> li > article) > li:is(:nth-child(10n + 3), :nth-child(10n + 6)) {
		grid-column: auto;
	}

	ul:has(> li > article) > li:nth-child(10n + 3):nth-last-child(n + 3),
	ul:has(> li > article) > li:nth-child(10n + 6):nth-last-child(n + 5) {
		grid-column: span 2;
		grid-row: span 2;
	}

	/* the feature card's image fills the card's height */
	ul:has(> li > article) > li:nth-child(10n + 3):nth-last-child(n + 3) figure,
	ul:has(> li > article) > li:nth-child(10n + 6):nth-last-child(n + 5) figure {
		flex: 1;
		min-height: 0;
	}

	ul:has(> li > article) > li:nth-child(10n + 3):nth-last-child(n + 3) img,
	ul:has(> li > article) > li:nth-child(10n + 6):nth-last-child(n + 5) img {
		position: absolute;
		inset: 0;
		height: 100%;
		aspect-ratio: auto;
	}
}

/* -------------------------------------------------------- product card */

/* Product card: a sharp image, the name below it and the price under a
   hairline rule. The name's link covers the whole card, so the image is
   clickable too. Names wrap to at most two lines and the rule and price are
   pushed to the bottom, so they line up across a row. */
li > article {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
}

li > article figure {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--surface);
}

li > article img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}

@media (hover: hover) {
	li > article:hover img {
		transform: scale(1.03);
	}
}

li > article h3 {
	display: -webkit-box;
	margin: 0.75rem 0 0.6rem;
	overflow: hidden;
	font-size: 0.95rem;
	font-weight: 450;
	line-height: 1.35;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

li > article h3 a {
	color: inherit;
	text-decoration: none;
}

li > article h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

li > article:hover h3 a,
li > article h3 a:focus-visible {
	text-decoration: underline;
}

li > article h3 a:focus-visible {
	outline: none;
}

li > article h3 a:focus-visible::after {
	outline: 2px solid var(--text);
	outline-offset: 3px;
}

li > article h3 + p {
	margin: auto 0 0;
	padding-top: 0.5rem;
	border-top: 1px solid var(--border);
}

li > article strong {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
}

li > article del {
	font-size: 0.8rem;
}

/* Out of stock: the image fades and a label sits in its top-left corner */
li > article:has(small) img {
	opacity: 0.5;
}

li > article p:has(small) {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	margin: 0;
	padding: 0.2rem 0.5rem;
	background: var(--bg);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.5;
	text-transform: uppercase;
}

li > article p small {
	font-size: inherit;
}

/* -------------------------------------------------------- product page */

/* The product page (an article with an image and a footer with the cart
   form): mobile first the image below the title; from 48rem the image on
   the left and everything else in a column beside it. */
main > article > img {
	display: block;
	width: 100%;
}

main > article > header h1 {
	margin-bottom: 0.5rem;
}

main > article > header p {
	margin: 0 0 1.5rem;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

main > article > header a {
	color: var(--text-muted);
	text-decoration: none;
}

/* the price is the paragraph just before the footer; the description above
   it is Markdown and may have bold text of its own */
main > article > p:has(+ footer) > strong {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.5rem;
	margin-top: 0.5rem;
	font-size: 1.5rem;
	font-weight: 500;
}

main > article > p:has(+ footer) small {
	color: var(--text-muted);
}

main > article > footer {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border);
}

@media (min-width: 48rem) {
	main > article:has(> img) {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		column-gap: 3.5rem;
		align-items: start;
		margin-top: 2.5rem;
	}

	main > article:has(> img) > * {
		grid-column: 2;
	}

	main > article:has(> img) > img {
		grid-column: 1;
		grid-row: 1 / span 20;
	}

	main > article:has(> img) > header h1 {
		margin-top: 0;
	}
}

/* ------------------------------------------------------------ articles */

/* Text in an article (static pages, product page): a readable line length.
   Static pages and product descriptions are Markdown, so their content can
   be any of these. */
main > article > :is(p, ul, ol, blockquote, table, h2, h3, h4, h5, h6) {
	max-width: 42rem;
}

main > article blockquote {
	margin: 1.5rem 0;
	padding-left: 1.25rem;
	border-left: 2px solid var(--text);
	font-family: var(--serif);
	font-size: 1.35rem;
	font-style: italic;
	line-height: 1.35;
}

main > article blockquote p {
	margin: 0;
}

/* -------------------------------------------------------------- tables */

/* Tables (cart, checkout, orders, admin lists, Markdown) have hairline
   rules between rows. On narrow screens they scroll sideways instead of
   widening the page; from 40rem the tables of a page use its full width. */
main table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

@media (min-width: 40rem) {
	main > table,
	main > section > table {
		display: table;
		width: 100%;
	}
}

main :is(th, td) {
	padding: 0.65rem 1.25rem 0.65rem 0;
	border-bottom: 1px solid var(--border);
	vertical-align: top;
}

main :is(th, td):last-child {
	padding-right: 0;
}

/* Markdown aligns columns with the align attribute; others start-align */
main th:not([align]) {
	text-align: start;
}

/* right-aligned columns hold numbers such as prices, which should not wrap */
main td[align="right"] {
	white-space: nowrap;
}

main thead th {
	border-bottom-color: var(--text);
	color: var(--text-muted);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

main tfoot :is(th, td) {
	border-bottom: 0;
	font-weight: 500;
}

main td form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
}

main td input[type="number"] {
	width: 4.5rem;
}

/* The cart table (the one with forms in its cells) has five columns, too
   many for a phone: below 40rem each item becomes a block with the name on
   top, price and line total below, then quantity and the remove button.
   The column headings are then left to screen readers. */
@media (max-width: 39.99rem) {
	main > table:has(td form) {
		display: block;
		overflow: visible;
	}

	main > table:has(td form) thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	main > table:has(td form) :is(tbody, tfoot) {
		display: block;
	}

	main > table:has(td form) tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 0.5rem 1rem;
		align-items: center;
		padding: 1rem 0;
		border-bottom: 1px solid var(--border);
	}

	main > table:has(td form) tfoot tr {
		padding: 0.5rem 0;
		border: 0;
	}

	main > table:has(td form) :is(th, td) {
		padding: 0;
		border: 0;
	}

	main > table:has(td form) :is(th, td):empty {
		display: none;
	}

	main > table:has(td form) tbody td:first-child {
		grid-column: 1 / -1;
		font-weight: 500;
	}

	main > table:has(td form) tbody td:nth-child(4),
	main > table:has(td form) tfoot td:last-of-type {
		justify-self: end;
	}

	main > table:has(td form) tbody td:nth-child(4) {
		grid-area: 2 / 2;
		font-weight: 500;
	}

	main > table:has(td form) tbody td:nth-child(5) {
		justify-self: end;
	}
}

/* --------------------------------------------------------------- forms */

input:not([type="checkbox"], [type="radio"], [type="file"]),
select,
textarea {
	box-sizing: border-box;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	background: var(--bg);
	color: inherit;
}

input:not([type="checkbox"], [type="radio"], [type="file"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
	border-color: var(--text);
	outline-offset: 0;
}

textarea {
	resize: vertical;
}

input[type="checkbox"] {
	accent-color: var(--text);
}

/* as specific as the field rules above, so it wins by coming later */
:is(input, select, textarea)[aria-invalid="true"] {
	border-color: var(--error);
}

[aria-invalid="true"] + small {
	color: var(--error);
}

/* Forms with labels (checkout, login, the admin forms, the product page's
   cart form): each label above its field, help text below. */
main form:has(label),
main form:has(label) fieldset {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.3rem;
}

main form:has(label) {
	max-width: 40rem;
}

main form:has(textarea) {
	max-width: 48rem;
}

main form:has(label) fieldset {
	align-self: stretch;
	margin: 1.25rem 0 0;
	padding: 0.25rem 1rem 1rem;
	border: 1px solid var(--border);
}

/* a fieldset without a legend only groups fields, e.g. postal code and city */
main form:has(label) fieldset:not(:has(legend)) {
	margin: 0;
	padding: 0;
	border: 0;
}

main form:has(label) legend {
	padding: 0 0.4rem;
	font-weight: 500;
}

main form:has(label) label {
	margin-top: 0.9rem;
	font-size: 0.875rem;
	font-weight: 500;
}

/* a checkbox inside its label */
main form:has(label) label:has(> input) {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400;
}

main form:has(label) :is(input:not([type="checkbox"], [type="radio"]), select, textarea) {
	width: 100%;
}

main form:has(label) small {
	color: var(--text-muted);
	font-size: 0.8rem;
}

main form:has(label) > button {
	margin-top: 1.5rem;
}

/* A filter form (method get, e.g. the admin order list): one row */
main form[method="get"] {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
}

main form[method="get"] label {
	margin: 0;
}

main form[method="get"] select {
	width: auto;
}

main form[method="get"] > button {
	margin: 0;
}

/* The product page's cart form: quantity and button side by side */
main > article > footer form {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.5rem;
}

main > article > footer label {
	width: 100%;
	margin: 0;
}

main > article > footer form input[type="number"] {
	width: 5rem;
}

main > article > footer button {
	flex: 1;
	margin: 0;
}

/* Buttons are outlined; the main action of a form (its last button, in a
   form with labels) and the checkout link are filled black. */
button {
	padding: 0.55rem 1.1rem;
	border: 1px solid var(--text);
	border-radius: var(--radius);
	background: transparent;
	color: var(--text);
	font-size: 0.875rem;
	line-height: 1.3;
	cursor: pointer;
}

button:hover {
	background: var(--text);
	color: var(--bg);
}

main form:has(label) > button:last-child,
main a[href="/checkout"] {
	background: var(--text);
	color: var(--bg);
}

main form:has(label) > button:last-child:hover,
main a[href="/checkout"]:hover {
	border-color: var(--brown);
	background: var(--brown);
	color: var(--bg);
}

main a[href="/checkout"] {
	display: inline-block;
	padding: 0.7rem 1.5rem;
	border: 1px solid var(--text);
	border-radius: var(--radius);
	font-size: 0.875rem;
	text-decoration: none;
}

/* Current image in the admin product form: a small preview */
fieldset img {
	display: block;
	max-width: 12rem;
}

/* The dashboard's database backup button with a download icon (download) */
form[action="/admin/backup"] button {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

form[action="/admin/backup"] button::before {
	content: "\f019";
	content: "\f019" / "";
	font: 900 1em/1 var(--icons);
	-webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------- pagination */

/* Page links of a category (the nav with rel="prev"/"next" links): centred
   black buttons around the page number */
main nav:has(a[rel]) ul {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.25rem;
	margin: 3.5rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
}

main nav:has(a[rel]) a {
	display: block;
	padding: 0.5rem 1rem;
	background: var(--text);
	color: var(--bg);
	text-decoration: none;
}

main nav:has(a[rel]) a:hover {
	background: var(--brown);
}

@media (prefers-reduced-motion: reduce) {
	li > article img {
		transition: none;
	}
}