/*
 * Macca's Design branding for Storefront and WooCommerce markup.
 *
 * Every colour, font, radius and shadow comes from theme.json, through the custom properties WordPress generates from
 * it (--wp--preset--* and --wp--custom--*). Change the tokens there, not here.
 */

:root {
	--md-red: var(--wp--preset--color--red);
	--md-yellow: var(--wp--preset--color--yellow);
	--md-ink: var(--wp--preset--color--ink);
	--md-muted: var(--wp--preset--color--muted);
	--md-line: var(--wp--preset--color--line);
	--md-grey: var(--wp--preset--color--grey);
	--md-egg: var(--wp--preset--color--egg);
	--md-white: var(--wp--preset--color--white);
	--md-font: var(--wp--preset--font-family--figtree);
	--md-border: var(--wp--custom--border--width) solid var(--md-line);
	--md-hard-shadow: var(--wp--custom--shadow--hard);

	/* Hooks for plugins, such as mdesign-personalisation's editor. */
	--mdesign-accent: var(--md-red);
	--mdesign-highlight: var(--md-yellow);
	--mdesign-panel: var(--md-grey);
	--mdesign-note: var(--wp--preset--color--warn-bg);
}

/* ---- Page ---------------------------------------------------------------- */

html,
body {
	background: var(--md-white);
}

body,
button,
input,
select,
textarea,
.button {
	font-family: var(--md-font);
}

body {
	color: var(--md-ink);
	-webkit-font-smoothing: antialiased;
}

#page {
	background: var(--md-white);
	overflow: hidden;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* Keep the footer at the bottom of the page on short pages. */
#page > .site-content {
	flex: 1 0 auto;
	width: 100%;
}

/* Flex items default to their content's width; let wide content such as the order board scroll instead. */
#page,
#page > * {
	min-width: 0;
	max-width: 100%;
}

.admin-bar #page {
	min-height: calc(100vh - 32px);
}

@media (max-width: 782px) {
	.admin-bar #page {
		min-height: calc(100vh - 46px);
	}
}

:focus-visible {
	outline: 3px solid var(--md-red);
	outline-offset: 3px;
}

/*
 * Storefront outlines every focused link and button, so clicking a product card left a red box round it. Keep the
 * outline for keyboard focus (above) and drop it after a mouse click or tap.
 */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
	outline: none;
}

a {
	font-weight: 700;
}

h1,
h2,
h3,
h4,
.entry-title,
.product_title {
	font-weight: 900;
	letter-spacing: -0.01em;
	color: var(--md-ink);
}

h1,
.entry-title,
.product_title {
	letter-spacing: -0.02em;
	line-height: 1.05;
}

/* ---- Content width ------------------------------------------------------- */

/*
 * Match the header: the top bar is 1480px with 28px padding, so content is 1424px wide with the same gutters.
 * Storefront's .col-full is 66em and switches to margins below that, so reset both.
 */
#page .col-full {
	max-width: 1424px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 28px;
	box-sizing: content-box;
}

/* Storefront pulls wide blocks (such as the cart and checkout) out past the content edges; keep them inside. */
#page .hentry .entry-content .alignwide {
	margin-left: 0;
	margin-right: 0;
	max-width: 100%;
}

@media (max-width: 1180px) {
	#page .col-full {
		padding: 0 20px;
	}
}

@media (max-width: 640px) {
	#page .col-full {
		padding: 0 16px;
	}
}

/* ---- Header: MStudio top bar (inc/header.php) ---------------------------- */

#masthead.site-header {
	border-bottom: var(--md-border);
	padding: 0;
	margin-bottom: 0;
	background: var(--md-white);
}

.mdesign-bar {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 1480px;
	margin: 0 auto;
	padding: 18px 28px;
}

.mdesign-wordmark {
	font-size: 30px;
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--md-ink);
	white-space: nowrap;
	margin-right: 10px;
}

.mdesign-wordmark:hover {
	color: var(--md-ink);
}

.mdesign-wordmark__m {
	color: var(--md-yellow);
}

.mdesign-icon {
	flex: none;
	vertical-align: middle;
}

/* Store pill and dropdown */
.mdesign-store-picker {
	position: relative;
	min-width: 0;
}

.mdesign-store-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	padding: 9px 16px;
	border-radius: var(--wp--custom--radius--button);
	background: var(--md-egg);
	color: var(--md-ink);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

.mdesign-store-pill .mdesign-icon:first-child {
	color: var(--md-red);
}

.mdesign-store-pill__label {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The chevron sits at the right edge, however wide the pill is, so stacked pills line up. */
summary.mdesign-store-pill > .mdesign-icon:last-child {
	margin-left: auto;
}

summary.mdesign-store-pill {
	cursor: pointer;
	list-style: none;
}

summary.mdesign-store-pill::-webkit-details-marker {
	display: none;
}

.mdesign-store-picker[open] summary .mdesign-icon:last-child {
	transform: rotate(180deg);
}

.mdesign-store-menu {
	position: absolute;
	z-index: 100;
	top: calc(100% + 6px);
	left: 0;
	min-width: max(100%, 300px);
	width: max-content;
	max-width: min(420px, 90vw);
	padding: 8px;
	background: var(--md-white);
	border: var(--md-border);
	border-radius: var(--wp--custom--radius--field);
	box-shadow: var(--md-hard-shadow);
}

.mdesign-store-menu__heading {
	margin: 4px 10px 6px;
	color: var(--md-muted);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mdesign-store-menu ul {
	list-style: none;
	margin: 0;
}

.mdesign-store-menu__all {
	border-bottom: var(--md-border);
	margin-bottom: 4px;
	padding-bottom: 4px;
}

/* Staff can pick from hundreds of stores: search, and scroll the list. */
/* header.js wraps the search box to add a clear button inside its right end. */
.mdesign-store-menu__field {
	position: relative;
	display: block;
	margin: 0 0 8px;
}

.mdesign-store-menu__search {
	width: 100%;
	margin: 0 0 8px;
	font-size: 14px;
}

/*
 * Out-ranks the site-wide input[type="search"] padding, which comes later; the right leaves room for the clear button.
 * The toolbar caps its search boxes at 360px, which left this one short of a wider menu, with the button outside it.
 */
.mdesign-store-menu input[type="search"].mdesign-store-menu__search {
	max-width: none;
	padding-right: 44px;
	padding-left: 16px;
}

/* The category tree's menu keeps one width, rather than widening as searching shows each match's parents. */
.mdesign-store-menu:has(.mdesign-store-menu__list--tree) {
	width: min(420px, 90vw);
}

.mdesign-store-menu__field .mdesign-store-menu__search {
	margin: 0;
}

/* The browser's own clear button only appears on hover in some browsers; ours is always there while there's text. */
.mdesign-store-menu__search::-webkit-search-cancel-button {
	display: none;
}

button.mdesign-store-menu__clear {
	position: absolute;
	top: 50%;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--md-egg);
	color: var(--md-ink);
	transform: translateY(-50%);
	cursor: pointer;
}

button.mdesign-store-menu__clear:hover,
button.mdesign-store-menu__clear:focus-visible {
	background: var(--md-ink);
	color: var(--md-white);
}

button.mdesign-store-menu__clear[hidden] {
	display: none;
}

.mdesign-store-menu__clear .mdesign-icon {
	width: 14px;
	height: 14px;
}

.mdesign-store-menu__list {
	max-height: min(420px, 60vh);
	overflow-y: auto;
	overscroll-behavior: contain;
	/* Room for the option's focus ring (2px + 2px offset), which the scrolling list would otherwise clip. */
	padding: 4px;
}

.mdesign-store-menu__list li + li {
	margin-top: 2px;
}

.mdesign-store-menu__list li[hidden] {
	display: none;
}

/* Options are buttons in the store picker (a POST form) and links in the order board's filters. */
button.mdesign-store-option,
a.mdesign-store-option {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 9px 10px 9px 36px;
	background: transparent;
	color: var(--md-ink);
	border-radius: var(--wp--custom--radius--button);
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	text-decoration: none;
}

button.mdesign-store-option[aria-pressed="true"],
a.mdesign-store-option[aria-current="true"] {
	padding-left: 10px;
	color: var(--md-red);
	font-weight: 800;
}

/* The ring on a clicked or focused option. The list leaves room for it (below), since scrolling clips overflow. */
button.mdesign-store-option:focus,
button.mdesign-store-option:focus-visible,
a.mdesign-store-option:focus-visible {
	outline: 2px solid var(--md-red);
	outline-offset: 2px;
}

button.mdesign-store-option:hover,
a.mdesign-store-option:hover {
	background: var(--md-egg);
	color: var(--md-ink);
}

/*
 * A tree of options (the catalogue's categories): children indented under their parent with lines like a file tree,
 * parents bold and grandchildren muted. Each row draws an elbow to itself, and a straight line (a "rail") for each
 * level that carries on to a later sibling (has-rail-N, from Orders\tree_classes()). The current option's tick moves
 * to the right so it doesn't cross the lines. While searching, matches lose their indent and lines and show their
 * parents' names instead (always read out to screen readers).
 */
.mdesign-store-menu__list--tree li[data-mdesign-filter-item] {
	margin-top: 0;
	padding-top: 2px;
	background-image:
		linear-gradient(var(--rail-1, transparent), var(--rail-1, transparent)),
		linear-gradient(var(--rail-2, transparent), var(--rail-2, transparent)),
		linear-gradient(var(--rail-3, transparent), var(--rail-3, transparent));
	background-position: 40px 0, 62px 0, 84px 0;
	background-size: 2px 100%;
	background-repeat: no-repeat;
}

.mdesign-store-menu__list--tree li.has-rail-1 {
	--rail-1: var(--md-line);
}

.mdesign-store-menu__list--tree li.has-rail-2 {
	--rail-2: var(--md-line);
}

.mdesign-store-menu__list--tree li.has-rail-3 {
	--rail-3: var(--md-line);
}

.mdesign-store-menu__list--tree li[data-mdesign-filter-item] a.mdesign-store-option {
	position: relative;
	flex-wrap: wrap;
	column-gap: 8px;
	row-gap: 0;
}

.mdesign-store-menu__list--tree .mdesign-store-menu__depth-0 a.mdesign-store-option {
	padding-left: 36px;
	font-weight: 800;
}

.mdesign-store-menu__list--tree .mdesign-store-menu__depth-1 a.mdesign-store-option {
	padding-left: 58px;
}

.mdesign-store-menu__list--tree .mdesign-store-menu__depth-2 a.mdesign-store-option {
	padding-left: 80px;
	color: var(--md-muted);
	font-size: 13px;
}

.mdesign-store-menu__list--tree .mdesign-store-menu__depth-3 a.mdesign-store-option {
	padding-left: 102px;
	color: var(--md-muted);
	font-size: 13px;
}

.mdesign-store-menu__list--tree li[data-mdesign-filter-item]:not(.mdesign-store-menu__depth-0) a.mdesign-store-option::before {
	content: "";
	position: absolute;
	top: -2px;
	width: 12px;
	height: calc(50% + 2px);
	border-bottom: 2px solid var(--md-line);
	border-left: 2px solid var(--md-line);
	border-bottom-left-radius: 6px;
}

.mdesign-store-menu__list--tree .mdesign-store-menu__depth-1 a.mdesign-store-option::before {
	left: 40px;
}

.mdesign-store-menu__list--tree .mdesign-store-menu__depth-2 a.mdesign-store-option::before {
	left: 62px;
}

.mdesign-store-menu__list--tree .mdesign-store-menu__depth-3 a.mdesign-store-option::before {
	left: 84px;
}

.mdesign-store-menu__list--tree li[data-mdesign-filter-item] a.mdesign-store-option[aria-current="true"] {
	padding-right: 36px;
	color: var(--md-red);
}

.mdesign-store-menu__list--tree li[data-mdesign-filter-item] a.mdesign-store-option[aria-current="true"] > .mdesign-icon {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
}

.mdesign-store-menu__list--tree a.mdesign-store-option:hover {
	color: var(--md-ink);
}

/* The parents' names: hidden but read out, and shown under the name while searching. */
.mdesign-store-option__path {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.mdesign-store-menu__list--tree.is-searching li[data-mdesign-filter-item] a.mdesign-store-option {
	padding-left: 36px;
}

.mdesign-store-menu__list--tree.is-searching li[data-mdesign-filter-item] a.mdesign-store-option::before {
	content: none;
}

.mdesign-store-menu__list--tree.is-searching li[data-mdesign-filter-item] {
	background-image: none;
}

.mdesign-store-menu__list--tree.is-searching .mdesign-store-option__path {
	position: static;
	flex-basis: 100%;
	width: auto;
	height: auto;
	overflow: visible;
	clip-path: none;
	color: var(--md-muted);
	font-size: 12px;
	font-weight: 600;
	white-space: normal;
}

/* Search and menu toggles, and the cart */
.mdesign-icon-button,
button.mdesign-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 42px;
	height: 40px;
	padding: 0 12px;
	border-radius: var(--wp--custom--radius--button);
	background: var(--md-egg);
	color: var(--md-ink);
}

.mdesign-icon-button:hover,
button.mdesign-icon-button:hover,
button.mdesign-icon-button[aria-expanded="true"] {
	background: var(--md-ink);
	color: var(--md-white);
}

.mdesign-menu-toggle {
	display: none !important;
}

.mdesign-cart__count {
	font-size: 13px;
	font-weight: 800;
}

.mdesign-search {
	position: absolute;
	z-index: 100;
	top: 100%;
	left: 28px;
	right: 28px;
	padding: 14px;
	background: var(--md-white);
	border: var(--md-border);
	border-radius: var(--wp--custom--radius--field);
	box-shadow: var(--md-hard-shadow);
}

.mdesign-search[hidden] {
	display: none;
}

.mdesign-search form {
	display: flex;
	gap: 8px;
	margin: 0;
}

.mdesign-search input[type="search"] {
	flex: 1;
	min-width: 0;
}

/* Menu: plain text links, current page in red */
.mdesign-nav {
	margin-left: auto;
}

.mdesign-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 26px;
	list-style: none;
	margin: 0;
}

.mdesign-menu a {
	color: var(--md-ink);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.mdesign-menu a:hover,
.mdesign-menu .current-menu-item > a,
.mdesign-menu .current_page_item > a {
	color: var(--md-red);
}

.mdesign-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.button.alt.mdesign-new {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	white-space: nowrap;
}

/* ---- "Hi {name}" bar ----------------------------------------------------- */

/* #page > * caps children at 100%, so match its specificity to set a narrower cap. */
#page > .mdesign-greeting {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: calc(100% - 56px);
	max-width: 1424px;
	margin: 28px auto 32px;
	padding: 20px 28px;
	background: var(--md-white);
	border: var(--md-border);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: 0 6px 18px rgba(28, 28, 28, 0.05);
}

.mdesign-greeting__who {
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 0;
}

.mdesign-avatar {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--md-red);
	color: var(--md-white);
	font-size: 20px;
	font-weight: 800;
}

/* Status dot */
.mdesign-avatar::after {
	content: "";
	position: absolute;
	right: -2px;
	bottom: -2px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--md-yellow);
	border: 2px solid var(--md-white);
}

.mdesign-greeting p {
	margin: 0;
}

.mdesign-greeting__name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.mdesign-greeting__store {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px !important;
	color: var(--md-muted);
	font-size: 14px;
}

.mdesign-greeting__store .mdesign-icon {
	width: 15px;
	height: 15px;
	color: var(--md-red);
}

.mdesign-greeting__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.mdesign-logout {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border: var(--md-border);
	border-radius: var(--wp--custom--radius--button);
	color: var(--md-ink);
	font-size: 14px;
}

.mdesign-logout:hover {
	border-color: var(--md-red);
	color: var(--md-red);
}

/* ---- Header on smaller screens ------------------------------------------ */

@media (max-width: 1180px) {
	.mdesign-bar {
		flex-wrap: wrap;
		padding: 14px 20px;
	}

	.mdesign-actions {
		order: 5;
		margin-left: auto;
	}

	.mdesign-menu-toggle {
		display: inline-flex !important;
		order: 6;
	}

	.mdesign-nav {
		display: none;
		order: 10;
		flex-basis: 100%;
		margin: 0;
	}

	.mdesign-nav.is-open {
		display: block;
	}

	.mdesign-menu {
		flex-direction: column;
		gap: 0;
		padding-top: 6px;
	}

	.mdesign-menu a {
		display: block;
		padding: 10px 0;
		border-top: var(--md-border);
	}

	.mdesign-search {
		left: 20px;
		right: 20px;
	}

	#page > .mdesign-greeting {
		width: calc(100% - 40px);
		margin: 20px auto 24px;
		padding: 16px 20px;
	}
}

@media (max-width: 640px) {
	#page > .mdesign-greeting {
		width: calc(100% - 32px);
	}

	.mdesign-store-picker,
	.mdesign-bar > .mdesign-store-pill {
		order: 11;
		flex-basis: 100%;
	}

	.mdesign-store-picker .mdesign-store-pill,
	.mdesign-bar > .mdesign-store-pill {
		width: 100%;
	}

	.mdesign-bar {
		gap: 8px;
		padding: 14px 16px;
	}

	.mdesign-wordmark {
		font-size: 24px;
		margin-right: 0;
	}

	.mdesign-actions {
		gap: 8px;
	}

	.mdesign-icon-button,
	button.mdesign-icon-button {
		min-width: 40px;
		padding: 0 10px;
	}

	/* Icon only; the label stays for screen readers. */
	.button.alt.mdesign-new {
		padding: 10px 12px;
	}

	.mdesign-new__label {
		position: absolute !important;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

/* Handheld footer bar (phase 2 replaces the footer) */
.storefront-handheld-footer-bar ul li > a,
.storefront-handheld-footer-bar ul li.search .site-search {
	background: var(--md-red);
	color: var(--md-white);
}

.storefront-handheld-footer-bar ul li.cart .count {
	background: var(--md-yellow);
	color: var(--md-ink);
	border-color: var(--md-red);
}

/* ---- Breadcrumb: pills -------------------------------------------------- */

.storefront-breadcrumb {
	background: transparent;
	margin-bottom: 2em;
	padding: 0;
}

.woocommerce-breadcrumb {
	font-size: 14px;
	color: var(--md-muted);
}

.woocommerce-breadcrumb a {
	display: inline-block;
	border: var(--md-border);
	border-radius: var(--wp--custom--radius--pill);
	padding: 4px 14px;
	margin: 0 2px 6px 0;
	background: var(--md-white);
	color: var(--md-ink);
	text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
	border-color: var(--md-red);
	color: var(--md-red);
}

.woocommerce-breadcrumb a:first-of-type::before {
	color: var(--md-red);
}

.woocommerce-breadcrumb .breadcrumb-separator {
	color: var(--md-muted);
	font-weight: 900;
}

/* ---- Buttons ------------------------------------------------------------ */

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.wc-block-components-button:not(.is-link),
.added_to_cart {
	background: var(--md-yellow);
	color: var(--md-ink);
	border: 0;
	border-radius: var(--wp--custom--radius--button);
	padding: 11px 22px;
	font-weight: 700;
	text-shadow: none;
	transition: background 0.1s linear, color 0.1s linear;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:hover,
.wc-block-components-button:not(.is-link):hover,
.added_to_cart:hover {
	background: var(--md-ink);
	color: var(--md-white);
}

button.alt,
input[type="button"].alt,
input[type="submit"].alt,
.button.alt,
.single_add_to_cart_button,
.checkout-button,
#place_order,
.wc-block-components-button.wc-block-cart__submit-button:not(.is-link),
.wc-block-components-button.wc-block-components-checkout-place-order-button:not(.is-link) {
	background: var(--md-red);
	color: var(--md-white);
}

button.alt:hover,
input[type="button"].alt:hover,
input[type="submit"].alt:hover,
.button.alt:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover,
#place_order:hover,
.wc-block-components-button.wc-block-cart__submit-button:not(.is-link):hover,
.wc-block-components-button.wc-block-components-checkout-place-order-button:not(.is-link):hover {
	background: var(--md-ink);
	color: var(--md-white);
}

button:disabled,
.button.disabled,
.button:disabled {
	opacity: 0.45;
}

/* The menu toggle and pills above aren't buttons in the brand sense. */
button.menu-toggle:hover {
	background: var(--md-white);
	color: var(--md-red);
	border-color: var(--md-red);
}

/* ---- Forms -------------------------------------------------------------- */

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="date"],
textarea,
select,
.input-text,
.select2-container .select2-selection--single {
	background: var(--md-white);
	color: var(--md-ink);
	border: var(--md-border);
	border-radius: var(--wp--custom--radius--field);
	box-shadow: none;
	padding: 9px 12px;
}

.select2-container .select2-selection--single {
	height: auto;
}

input:focus,
textarea:focus,
select:focus,
.input-text:focus {
	outline: none;
	border-color: var(--md-yellow);
	background: var(--md-white);
	box-shadow: var(--wp--custom--shadow--focus);
}

label,
.form-row label {
	font-weight: 700;
}

.required {
	color: var(--md-red);
}

form .form-row.woocommerce-invalid input.input-text {
	border-color: var(--md-red);
}

/* ---- Notices ------------------------------------------------------------ */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments,
.wc-block-components-notice-banner {
	background: var(--md-grey);
	color: var(--md-ink);
	border-left: 5px solid var(--md-yellow);
	border-radius: var(--wp--custom--radius--button);
}

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
	color: var(--md-red);
}

/* Storefront flattens notice buttons into a bare link with a divider; give them the normal button shape back. */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	float: right;
	margin: -4px 0 4px 1em;
	padding: 8px 18px;
	background: var(--md-yellow);
	color: var(--md-ink);
	border: 0;
	border-left: 0 !important;
	border-radius: var(--wp--custom--radius--button);
	line-height: 1.4;
	white-space: nowrap;
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover {
	background: var(--md-ink);
	color: var(--md-white);
	opacity: 1;
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--md-ink);
}

.woocommerce-info {
	background: var(--wp--preset--color--warn-bg);
}

.woocommerce-error,
.wc-block-components-notice-banner.is-error {
	background: var(--wp--preset--color--bad-bg);
	border-left-color: var(--md-red);
	color: var(--wp--preset--color--bad);
}

.woocommerce-error::before {
	color: var(--md-red);
}

/* ---- Product lists ------------------------------------------------------ */

/*
 * A grid instead of Storefront's floats, so cards fill the wider content area: up to four across (a shop page of 12
 * fills three rows), and fewer as they hit 230px.
 */
ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(max(230px, calc((100% - 3 * 24px) / 4)), 1fr));
	gap: 24px;
	margin-left: 0;
}

ul.products::before,
ul.products::after {
	display: none;
}

#page ul.products li.product {
	width: auto;
	float: none;
	margin: 0;
	clear: none;
}

/* Grid rows stretch every card to the tallest one, so centre shorter content (such as a landscape image) in it. */
ul.products li.product {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

ul.products li.product > a:first-child {
	width: 100%;
}

ul.products li.product img {
	width: 100%;
}

ul.products li.product {
	background: var(--md-white);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: inset 0 0 0 2px var(--md-line);
	padding: 14px 14px 18px;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

ul.products li.product:hover {
	transform: translate(-2px, -2px);
	box-shadow: inset 0 0 0 2px var(--md-ink), var(--md-hard-shadow);
}

/*
 * Thumbnails keep their own shape (Catalogue\uncropped_thumbnails()), fitted and centred in a square frame so cards
 * stay level whatever the artwork's proportions.
 */
ul.products li.product img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	object-position: center;
	border-radius: var(--wp--custom--radius--tile);
	margin-bottom: 12px;
}

ul.products li.product .woocommerce-loop-product__title {
	font-size: 16px;
	font-weight: 800;
	color: var(--md-ink);
	line-height: 1.25;
}

ul.products li.product .price {
	color: var(--md-ink);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

ul.products li.product .button {
	margin-top: 4px;
}

.onsale {
	background: var(--md-red);
	color: var(--md-white);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	font-weight: 800;
}

/* Sorting, result count and pagination: one row, vertically centred, pagination on the right. */
.storefront-sorting {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin-bottom: 28px;
	font-size: 14px;
}

.storefront-sorting::before,
.storefront-sorting::after {
	display: none;
}

/* The repeat of the row under the products. */
ul.products ~ .storefront-sorting {
	margin-top: 32px;
}

/* WooCommerce prints its notices wrapper inside the row; empty, it would still take a gap. */
.storefront-sorting .woocommerce-notices-wrapper:empty {
	display: none;
}

.storefront-sorting .woocommerce-notices-wrapper:not(:empty) {
	flex-basis: 100%;
}

/*
 * The "Shop" title is hidden on the main catalogue (Theme\hide_shop_title()), but WooCommerce still prints its
 * header, with Storefront's bottom padding. Search results keep their heading, so keep the padding there.
 */
.woocommerce-shop:not(.search) .woocommerce-products-header {
	margin: 0;
	padding: 0;
}

.storefront-sorting .woocommerce-ordering,
.storefront-sorting .woocommerce-result-count {
	float: none;
	margin: 0;
	padding: 0;
}

.storefront-sorting .woocommerce-pagination {
	float: none;
	margin: 0 0 0 auto;
	padding: 0;
}

.storefront-sorting .woocommerce-pagination .page-numbers {
	margin: 0;
}

.woocommerce-result-count {
	color: var(--md-muted);
}

/* Category headings on the shop page */
.woocommerce-products-header__title,
.page-title {
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 900;
}

/* Pagination: pills */
.woocommerce-pagination .page-numbers li .page-numbers,
.pagination .page-numbers li .page-numbers {
	border: var(--md-border);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--md-white);
	color: var(--md-ink);
	font-weight: 700;
}

.woocommerce-pagination .page-numbers li .page-numbers.current,
.pagination .page-numbers li .page-numbers.current {
	background: var(--md-red);
	border-color: var(--md-red);
	color: var(--md-white);
}

/* ---- Catalogue toolbar and views (inc/catalogue.php) --------------------- */

/*
 * The toolbar reuses the Order board's search, dropdowns and view toggle, on a grid so it stays tidy at every width:
 * search with Sort by and the toggle, then the filters in equal columns (four, then two, then one).
 */
.mdesign-toolbar.mdesign-catalogue-toolbar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"search end"
		"filters filters";
	gap: 12px;
	margin-bottom: 12px;
}

.mdesign-catalogue-toolbar .mdesign-board-search {
	grid-area: search;
}

.mdesign-catalogue-toolbar__end {
	display: flex;
	grid-area: end;
	align-items: center;
	gap: 12px;
}

.mdesign-catalogue-toolbar .mdesign-view-toggle {
	margin-left: 0;
}

.mdesign-catalogue-toolbar__filters {
	display: grid;
	grid-area: filters;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

/* Pills fill their column; out-ranks the board's 280px cap on filter pills, which comes later. */
.mdesign-catalogue-toolbar__filters .mdesign-filter-picker .mdesign-store-pill {
	width: 100%;
	max-width: none;
}

/* Menus open from the pill's left edge; in the right-hand column and at the row's end, open them leftwards instead. */
.mdesign-catalogue-toolbar__end .mdesign-store-menu,
.mdesign-catalogue-toolbar__filters > :nth-child(4n) .mdesign-store-menu {
	right: 0;
	left: auto;
}

.mdesign-catalogue-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 0 0 20px;
}

/* Products per page: the Grid / List toggle's segmented pill, at the end of the result count's row. */
.mdesign-per-page {
	align-items: center;
}

.mdesign-per-page__label {
	padding: 0 6px 0 8px;
	color: var(--md-muted);
	font-size: 13px;
	font-weight: 700;
}

.mdesign-per-page .mdesign-view-toggle__option {
	justify-content: center;
	min-width: 40px;
	padding: 0 10px;
	font-variant-numeric: tabular-nums;
}

.mdesign-catalogue-summary .woocommerce-result-count {
	float: none;
	margin: 0;
	padding: 0;
	font-size: 13px;
}

/* Pagination is only under the products (Catalogue\arrange_loop()), centred. */
ul.products ~ .storefront-sorting .woocommerce-pagination {
	margin: 0 auto;
}

/* Each product's category, code and chips: the list view shows them, the grid doesn't. */
.mdesign-product-meta {
	display: none;
}

/* List view: one row per product, with a small image, the title over its details, the price and the button. */
.mdesign-catalogue-list ul.products {
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

.mdesign-catalogue-list ul.products li.product {
	flex-direction: row;
	justify-content: space-between;
	gap: 20px;
	padding: 12px 20px 12px 12px;
	text-align: left;
}

.mdesign-catalogue-list ul.products li.product > a:first-child {
	display: grid;
	flex: 1;
	grid-template-columns: 72px minmax(0, 1fr) auto;
	grid-template-areas:
		"image title price"
		"image meta price";
	align-items: center;
	gap: 6px 20px;
	min-width: 0;
}

.mdesign-catalogue-list ul.products li.product img {
	grid-area: image;
	width: 72px;
	height: 72px;
	margin: 0;
	object-fit: contain;
}

.mdesign-catalogue-list ul.products li.product .woocommerce-loop-product__title {
	grid-area: title;
	align-self: end;
	margin: 0;
	padding: 0;
}

.mdesign-catalogue-list .mdesign-product-meta {
	display: flex;
	flex-wrap: wrap;
	grid-area: meta;
	align-self: start;
	align-items: center;
	gap: 6px 8px;
}

.mdesign-product-meta__details {
	margin-right: 4px;
	color: var(--md-muted);
	font-size: 13px;
	font-weight: 600;
}

.mdesign-catalogue-list ul.products li.product .price {
	grid-area: price;
	margin: 0;
	text-align: right;
	white-space: nowrap;
}

/* Sale flags have no room in a row, and the catalogue's prices are fixed. */
.mdesign-catalogue-list ul.products li.product .onsale {
	display: none;
}

.mdesign-catalogue-list ul.products li.product .button {
	flex: none;
	margin: 0;
}

@media (max-width: 960px) {
	.mdesign-catalogue-toolbar__filters {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mdesign-catalogue-toolbar__filters > :nth-child(4n) .mdesign-store-menu {
		right: auto;
		left: 0;
	}

	.mdesign-catalogue-toolbar__filters > :nth-child(2n) .mdesign-store-menu {
		right: 0;
		left: auto;
	}
}

@media (max-width: 640px) {
	/* Search on its own row, then Sort by beside the view toggle, then the filters. */
	.mdesign-toolbar.mdesign-catalogue-toolbar {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"search"
			"end"
			"filters";
	}

	.mdesign-catalogue-toolbar__end .mdesign-filter-picker {
		flex: 1;
		min-width: 0;
	}

	/* Sort by now starts at the left gutter: open its menu across the content width. Out-ranks the board's phone
	   rule that sizes menus to their pill. */
	.mdesign-catalogue-toolbar .mdesign-catalogue-toolbar__end .mdesign-store-menu {
		right: auto;
		left: 0;
		min-width: 0;
		width: calc(100vw - 32px);
	}

	.mdesign-catalogue-toolbar .mdesign-view-toggle {
		order: 0;
		width: auto;
	}

	/* Under the result count, across the row; the board's phone rule would move it first. */
	.mdesign-catalogue-summary .mdesign-per-page {
		order: 0;
		width: 100%;
		margin-left: 0;
	}

	.mdesign-per-page__label {
		flex: none;
	}

	/* Grid: two across, so the grid and list views differ on phones too. */
	ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	ul.products li.product {
		padding: 10px 10px 14px;
	}

	ul.products li.product .woocommerce-loop-product__title {
		font-size: 14px;
	}

	ul.products li.product .button {
		width: 100%;
		padding: 10px 8px;
		font-size: 13px;
	}

	/* List: the image beside the title, details and price, and the button across the bottom. */
	.mdesign-catalogue-list ul.products {
		grid-template-columns: minmax(0, 1fr);
	}

	.mdesign-catalogue-list ul.products li.product {
		flex-wrap: wrap;
		gap: 12px;
		padding: 12px;
	}

	.mdesign-catalogue-list ul.products li.product > a:first-child {
		flex-basis: 100%;
		grid-template-columns: 56px minmax(0, 1fr);
		grid-template-areas:
			"image title"
			"image meta"
			"image price";
		gap: 4px 12px;
	}

	.mdesign-catalogue-list ul.products li.product img {
		width: 56px;
		height: 56px;
	}

	.mdesign-catalogue-list ul.products li.product .price {
		text-align: left;
	}

	.mdesign-catalogue-list ul.products li.product .button {
		flex-basis: 100%;
		text-align: center;
	}

	/* Keep the pages on one row: up to nine links fit 358px at this size. */
	ul.products ~ .storefront-sorting .woocommerce-pagination .page-numbers li .page-numbers {
		min-width: 34px;
		padding: 4px 6px;
		font-size: 13px;
	}
}

/* Small phones: one filter per row, so labels such as "Any personalisation" aren't cut off. */
@media (max-width: 520px) {
	.mdesign-catalogue-toolbar__filters {
		grid-template-columns: minmax(0, 1fr);
	}

	.mdesign-catalogue-toolbar__filters > :nth-child(2n) .mdesign-store-menu {
		right: auto;
		left: 0;
	}

	.mdesign-catalogue-toolbar__filters .mdesign-store-menu {
		width: 100%;
	}
}

/* ---- Single product ----------------------------------------------------- */

.single-product div.product .woocommerce-product-gallery .flex-viewport,
.single-product div.product .woocommerce-product-gallery img {
	border-radius: var(--wp--custom--radius--card);
}

/*
 * Each gallery image sits in a square frame like the catalogue's cards, centred both ways whatever its shape or size
 * (many imported images are small portrait ones). The zoom image WooCommerce adds on hover keeps its own size.
 */
.single-product div.product .woocommerce-product-gallery__image {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	padding: 24px;
	overflow: hidden;
	background: var(--md-white);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: inset 0 0 0 2px var(--md-line);
}

.single-product div.product .woocommerce-product-gallery__image > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/*
 * No outline on the image link: closing the lightbox with Escape hands focus back to it as keyboard focus, which drew
 * a red box inside the frame. The frame's own border darkens instead, so keyboard users still see where they are.
 */
.single-product div.product .woocommerce-product-gallery__image > a:focus,
.single-product div.product .woocommerce-product-gallery__image > a:focus-visible {
	outline: none;
}

.single-product div.product .woocommerce-product-gallery__image:has(> a:focus-visible) {
	box-shadow: inset 0 0 0 2px var(--md-ink);
}

.single-product div.product .woocommerce-product-gallery__image img:not(.zoomImg) {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	background: var(--md-yellow);
	border-radius: var(--wp--custom--radius--tile);
	box-shadow: 2px 2px 0 var(--wp--preset--color--shadow);
}

/* As with the image link: no red outline when closing the lightbox hands focus back; a dark inner border instead. */
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:focus,
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:focus-visible {
	outline: none;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:focus-visible {
	box-shadow: inset 0 0 0 2px var(--md-ink), 2px 2px 0 var(--wp--preset--color--shadow);
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger::before {
	color: var(--md-ink);
}

.single-product div.product p.price,
.single-product div.product .woocommerce-variation-price .price {
	color: var(--md-ink);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.single-product div.product .woocommerce-product-details__short-description {
	color: var(--md-muted);
}

.single-product div.product .product_meta {
	color: var(--md-muted);
	border-top: var(--md-border);
}

.single-product div.product form.cart .quantity .qty {
	text-align: center;
}

.single-product div.product .variations th,
.single-product div.product .variations td {
	background: transparent;
	color: var(--md-ink);
}

a.reset_variations {
	color: var(--md-red);
	font-size: 14px;
	font-weight: 700;
}

/*
 * Product options (such as Quantity): styled like the toolbar's dropdown pills. They stay real <select>s, which
 * WooCommerce's variation script needs, so the chevron is drawn over the box with the header's chevron as a mask.
 */
.single-product div.product table.variations td.value {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	padding: 0 0 16px;
}

.single-product div.product table.variations select {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 min(100%, 320px);
	width: min(100%, 320px);
	max-width: none; /* Storefront caps it at 70%, which pulls it out from under the chevron. */
	height: 44px;
	margin: 0;
	padding: 0 44px 0 16px;
	border: 2px solid var(--md-egg);
	border-radius: var(--wp--custom--radius--button);
	background: var(--md-egg);
	color: var(--md-ink);
	font-size: 15px;
	font-weight: 700;
	text-overflow: ellipsis;
	cursor: pointer;
}

.single-product div.product table.variations select:hover {
	border-color: var(--md-ink);
}

.single-product div.product table.variations select:focus {
	border-color: var(--md-yellow);
	background: var(--md-egg);
	box-shadow: var(--wp--custom--shadow--focus);
}

.single-product div.product table.variations td.value::after {
	content: "";
	position: absolute;
	top: 14px;
	left: calc(min(100%, 320px) - 34px);
	width: 16px;
	height: 16px;
	background: var(--md-ink);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
}

/* Tabs: pills */
.woocommerce-tabs ul.tabs {
	border-top: 0;
}

.woocommerce-tabs ul.tabs li {
	border-bottom: 0;
	margin-bottom: 8px;
}

.woocommerce-tabs ul.tabs li a {
	border: var(--md-border);
	border-radius: var(--wp--custom--radius--pill);
	padding: 8px 18px;
	font-weight: 700;
	color: var(--md-ink);
}

.woocommerce-tabs ul.tabs li a:hover {
	border-color: var(--md-red);
}

.woocommerce-tabs ul.tabs li.active a {
	background: var(--md-red);
	border-color: var(--md-red);
	color: var(--md-white);
}

.woocommerce-tabs ul.tabs li::after,
.woocommerce-tabs ul.tabs li.active::after {
	display: none;
}

/* ---- Tables ------------------------------------------------------------- */

table {
	border: 1px solid var(--md-line);
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

table thead th,
table.shop_table thead th {
	background: var(--md-red);
	color: var(--md-white);
	font-weight: 800;
}

table tbody tr:nth-child(odd) td,
table tbody tr:nth-child(odd) th {
	background: var(--md-grey);
}

table tbody tr:nth-child(even) td,
table tbody tr:nth-child(even) th {
	background: var(--md-egg);
}

table tfoot th,
table tfoot td {
	background: var(--md-white);
	font-weight: 900;
	border-top: 2px solid var(--md-ink);
}

/* The product page's quantity options and the cart's quantity field aren't data tables. */
.single-product div.product table.variations,
.single-product div.product table.variations td,
.single-product div.product table.variations th {
	border: 0;
	background: transparent;
}

table.shop_table_responsive tbody tr td::before {
	color: var(--md-ink);
}

/* ---- Cart and checkout -------------------------------------------------- */

.cart-collaterals .cart_totals,
#order_review,
.woocommerce-checkout-review-order {
	background: var(--md-grey);
	border-radius: var(--wp--custom--radius--panel);
	padding: 18px 20px;
}

.cart-collaterals .cart_totals table,
#order_review table {
	background: var(--md-white);
}

#payment {
	background: var(--md-white);
	border-radius: var(--wp--custom--radius--card);
}

#payment .payment_methods > li {
	background: var(--md-white);
}

#payment .payment_methods li .payment_box {
	background: var(--md-egg);
}

/* ---- My account --------------------------------------------------------- */

.woocommerce-MyAccount-navigation ul {
	border: 0;
}

.woocommerce-MyAccount-navigation ul li {
	border: 0;
	margin-bottom: 8px;
}

.hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a {
	display: block;
	border: var(--md-border);
	border-radius: var(--wp--custom--radius--pill);
	padding: 8px 18px;
	font-weight: 700;
	color: var(--md-ink);
}

.hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a:hover {
	border-color: var(--md-red);
	color: var(--md-red);
}

.hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link.is-active a {
	background: var(--md-red);
	border-color: var(--md-red);
	color: var(--md-white);
}

.woocommerce-MyAccount-navigation ul li a::before {
	color: inherit;
	opacity: 1;
}

/* Sign-in and register forms */
.woocommerce-form-login,
.woocommerce-form-register,
form.lost_reset_password {
	background: var(--md-grey);
	border: 0;
	border-radius: var(--wp--custom--radius--panel);
	padding: 24px 26px;
}

/* ---- Content blocks ----------------------------------------------------- */

.hentry .entry-content a,
.entry-content a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wp-block-button__link,
.wp-element-button {
	border-radius: var(--wp--custom--radius--button);
}

/* ---- Personalisation editor (mdesign-personalisation) ------------------- */

.mdesign-fields {
	background: var(--md-grey);
	border: 0;
	border-radius: var(--wp--custom--radius--panel);
	padding: 18px 20px 6px;
}

.mdesign-fields legend {
	background: var(--md-red);
	color: var(--md-white);
	border-radius: var(--wp--custom--radius--pill);
	padding: 4px 14px;
	font-size: 15px;
	font-weight: 800;
}

.mdesign-field .mdesign-swatch {
	background: var(--md-white);
}

.mdesign-preview__canvas {
	border-radius: var(--wp--custom--radius--panel);
}

/* ---- Chips and toolbar (order board and orders table) ------------------ */

.mdesign-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.mdesign-chip {
	display: inline-block;
	padding: 3px 10px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--md-egg);
	color: var(--md-ink);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.5;
	white-space: nowrap;
}

.mdesign-chip--ink {
	background: var(--md-ink);
	color: var(--md-white);
}

.mdesign-chip--ink .woocommerce-Price-amount {
	color: inherit;
}

.mdesign-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.mdesign-toolbar h2 {
	margin: 0 auto 0 0;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 900;
	line-height: 1;
}

.mdesign-toolbar input[type="search"] {
	max-width: 360px;
	border-radius: var(--wp--custom--radius--pill);
}

/* ---- Order board page template ----------------------------------------- */

.mdesign-board-page .content-area {
	width: 100%;
	float: none;
	margin-right: 0;
}

.mdesign-board-page .widget-area {
	display: none;
}

.mdesign-titlerow {
	margin: 0 0 22px;
}

.mdesign-titlerow .entry-title {
	font-size: var(--wp--preset--font-size--xx-large);
	margin: 0;
}

.mdesign-titlerow__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 24px;
}

.mdesign-lede {
	font-size: 18px;
	color: var(--md-muted);
	max-width: 40em;
	margin-top: 10px;
}

.mdesign-lede > :last-child {
	margin-bottom: 0;
}

.mdesign-backlink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
	color: var(--md-red);
	font-size: 14px;
	text-decoration: none;
}

.mdesign-backlink .mdesign-icon {
	width: 16px;
	height: 16px;
}

.mdesign-board-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mdesign-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--md-egg);
	color: var(--md-ink);
	font-size: 13px;
	font-weight: 700;
}

.mdesign-pill .mdesign-icon {
	width: 15px;
	height: 15px;
	color: var(--md-red);
}

.mdesign-pill--highlight {
	background: var(--wp--preset--color--warn-bg);
	color: var(--wp--preset--color--warn);
}

/* Status colours: each sets --status and --status-bg for the chips, column heads, card edges and progress bars inside. */
.mdesign-status--grey {
	--status: var(--wp--preset--color--status-grey);
	--status-bg: var(--wp--preset--color--status-grey-bg);
}

.mdesign-status--blue {
	--status: var(--wp--preset--color--status-blue);
	--status-bg: var(--wp--preset--color--status-blue-bg);
}

.mdesign-status--violet {
	--status: var(--wp--preset--color--status-violet);
	--status-bg: var(--wp--preset--color--status-violet-bg);
}

.mdesign-status--yellow {
	--status: var(--wp--preset--color--warn);
	--status-bg: var(--wp--preset--color--warn-bg);
}

.mdesign-status--teal {
	--status: var(--wp--preset--color--status-teal);
	--status-bg: var(--wp--preset--color--status-teal-bg);
}

.mdesign-status--orange {
	--status: var(--wp--preset--color--status-orange);
	--status-bg: var(--wp--preset--color--status-orange-bg);
}

.mdesign-status--green {
	--status: var(--wp--preset--color--status-green);
	--status-bg: var(--wp--preset--color--good-bg);
}

.mdesign-status--red {
	--status: var(--wp--preset--color--bad);
	--status-bg: var(--wp--preset--color--bad-bg);
}

.mdesign-status--brown {
	--status: var(--wp--preset--color--status-brown);
	--status-bg: var(--wp--preset--color--status-brown-bg);
}

.mdesign-status--pink {
	--status: var(--wp--preset--color--status-pink);
	--status-bg: var(--wp--preset--color--status-pink-bg);
}

.mdesign-chip--status {
	background: var(--status-bg);
	color: var(--status);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 11px;
}

/* Each segment is in its own stage's colour: a tint for stages to come, solid once reached. Used on board cards and
   the dashboard's Orders panel, and out-ranks its plain .mdesign-progress > span rules, which come later. */
.mdesign-progress.mdesign-progress--stages > span {
	background: var(--status-bg);
	box-shadow: inset 0 0 0 1px var(--status);
	opacity: 0.45;
}

.mdesign-progress.mdesign-progress--stages > span.is-done {
	background: var(--status);
	box-shadow: none;
	opacity: 1;
}

/* Tooltips: hovering a segment names its status. A taller invisible area makes the 5px segment easy to hover. */
.mdesign-progress.mdesign-progress--stages > span {
	position: relative;
}

.mdesign-progress.mdesign-progress--stages > span::before {
	content: "";
	position: absolute;
	inset: -8px 0;
}

.mdesign-progress.mdesign-progress--stages > span::after {
	content: attr(data-label);
	position: absolute;
	z-index: 5;
	bottom: calc(100% + 10px);
	left: 50%;
	padding: 4px 8px;
	border-radius: var(--wp--custom--radius--button);
	background: var(--md-ink);
	color: var(--md-white);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, 4px);
	transition: opacity 0.12s ease, transform 0.12s ease;
}

/* Keep the end segments' tooltips inside the card. */
.mdesign-progress.mdesign-progress--stages > span:first-child::after {
	left: 0;
	transform: translate(0, 4px);
}

.mdesign-progress.mdesign-progress--stages > span:last-child::after {
	right: 0;
	left: auto;
	transform: translate(0, 4px);
}

.mdesign-progress.mdesign-progress--stages > span:hover {
	opacity: 1;
}

.mdesign-progress.mdesign-progress--stages > span:hover::after {
	opacity: 1;
	transform: translate(-50%, 0);
}

.mdesign-progress.mdesign-progress--stages > span:first-child:hover::after,
.mdesign-progress.mdesign-progress--stages > span:last-child:hover::after {
	transform: translate(0, 0);
}

/* Toolbar: search, then filter dropdowns built like the header's store picker (.mdesign-store-picker, above). */
.mdesign-board-toolbar {
	align-items: center;
}

/* Storefront gives forms a bottom margin, which lifts the search box above the filter pills. */
.mdesign-board-search {
	position: relative;
	flex: 1 1 260px;
	margin: 0;
}

.mdesign-board-search input[type="search"] {
	width: 100%;
	max-width: none;
	height: 40px;
	margin: 0;
	padding: 0 44px 0 16px;
}

/* The browser's own clear button only empties the box; ours also clears a search that's been run. */
.mdesign-board-search input[type="search"]::-webkit-search-cancel-button {
	display: none;
}

.mdesign-board-search__clear {
	position: absolute;
	top: 50%;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--md-egg);
	color: var(--md-ink);
	transform: translateY(-50%);
}

.mdesign-board-search__clear:hover {
	background: var(--md-ink);
	color: var(--md-white);
}

.mdesign-board-search__clear[hidden] {
	display: none;
}

.mdesign-board-search__clear .mdesign-icon {
	width: 14px;
	height: 14px;
}

.mdesign-filter-picker .mdesign-store-pill {
	height: 40px;
	max-width: 280px;
}

/* A filter that's set: ink outline, so it stands out from the ones left at "All". */
.mdesign-board-toolbar .mdesign-store-pill.is-active {
	box-shadow: inset 0 0 0 2px var(--md-ink);
}

.mdesign-filter-toggle {
	height: 40px;
	text-decoration: none;
}

.mdesign-filter-toggle,
.mdesign-filter-toggle:hover {
	color: var(--md-ink);
}

.mdesign-filter-toggle .mdesign-icon:first-child {
	color: var(--md-red);
}

/* Grid / List toggle: a segmented pill at the end of the toolbar. */
.mdesign-view-toggle {
	display: inline-flex;
	gap: 4px;
	margin-left: auto;
	padding: 4px;
	border-radius: var(--wp--custom--radius--button);
	background: var(--md-egg);
}

.mdesign-view-toggle__option {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 12px;
	border-radius: calc(var(--wp--custom--radius--button) - 2px);
	color: var(--md-ink);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.mdesign-view-toggle__option .mdesign-icon {
	width: 16px;
	height: 16px;
}

.mdesign-view-toggle__option:hover {
	color: var(--md-red);
}

.mdesign-view-toggle__option[aria-current="page"],
.mdesign-view-toggle__option[aria-current="page"]:hover {
	background: var(--md-white);
	color: var(--md-ink);
	box-shadow: 0 1px 2px rgb(28 28 28 / 0.15);
}

/* List view: one row per order. The first cell's left edge is the status colour. */
.mdesign-order-list-wrap {
	overflow-x: auto;
	border: var(--md-border);
	border-radius: var(--wp--custom--radius--card);
}

.mdesign-order-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 14px;
}

.mdesign-order-table thead th {
	padding: 10px 14px;
	background: var(--md-egg);
	color: var(--md-ink);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Prefixed with the wrapper to out-rank Storefront's striped table rows. */
.mdesign-order-list-wrap .mdesign-order-table tbody td {
	padding: 12px 14px;
	border-top: var(--md-border);
	background: var(--md-white);
	vertical-align: middle;
}

.mdesign-order-list-wrap .mdesign-order-table tbody tr:hover td {
	background: var(--md-grey);
}

.mdesign-order-list-wrap .mdesign-order-table tbody td:first-child {
	box-shadow: inset 4px 0 0 var(--status);
}

.mdesign-order-list-wrap .mdesign-order-table tbody tr.is-action td {
	background: var(--wp--preset--color--warn-bg);
}

.mdesign-order-table__order {
	min-width: 280px;
}

.mdesign-order-table__item {
	display: flex;
	align-items: center;
	gap: 12px;
}

.mdesign-order-table__thumb {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 44px;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--button);
	background: var(--md-grey);
	color: var(--md-line);
}

.mdesign-order-table__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mdesign-order-table__title {
	display: block;
	color: var(--md-ink);
	font-weight: 800;
	line-height: 1.3;
	text-decoration: none;
}

.mdesign-order-table__title:hover {
	color: var(--md-red);
}

.mdesign-order-table__meta,
.mdesign-order-table__stage,
.mdesign-order-table__date span {
	display: block;
	margin-top: 2px;
	color: var(--md-muted);
	font-size: 12px;
}

.mdesign-order-table__meta .woocommerce-Price-amount {
	color: inherit;
}

.mdesign-order-table__status {
	white-space: nowrap;
}

.mdesign-order-table__who span {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	font-size: 13px;
	overflow-wrap: anywhere;
}

.mdesign-order-table__who .mdesign-icon {
	width: 14px;
	height: 14px;
	margin-top: 2px;
	color: var(--md-red);
}

.mdesign-order-table__note {
	min-width: 180px;
	max-width: 280px;
	font-size: 13px;
	line-height: 1.4;
}

.mdesign-order-table__date {
	white-space: nowrap;
}

.mdesign-order-table__actions {
	width: 180px;
}

.mdesign-order-table__actions .mdesign-button {
	padding: 8px 12px;
	font-size: 13px;
}

.mdesign-toolbar__clear {
	color: var(--md-red);
	font-size: 13px;
}

.mdesign-board-page-info {
	margin: -4px 0 12px;
	color: var(--md-muted);
	font-size: 13px;
}

/* Storefront floats WooCommerce's pagination right; centre it under the board. */
.mdesign-board-pagination {
	display: flex;
	justify-content: center;
	float: none;
	width: 100%;
	margin: 24px 0 40px;
}

.mdesign-board-wrap {
	overflow-x: auto;
	padding: 2px 6px 10px 2px;
}

.mdesign-board {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(270px, 1fr);
	gap: 16px;
	align-items: start;
}

.mdesign-column {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mdesign-column__top {
	padding: 14px 16px;
	border-radius: var(--wp--custom--radius--card);
	background: var(--status-bg);
	box-shadow: inset 0 4px 0 var(--status);
}

.mdesign-column__head {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mdesign-column__head h2 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 auto 0 0;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 0;
}

.mdesign-column__head h2::before {
	content: "";
	flex: none;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--status);
}

.mdesign-column__flag {
	padding: 2px 8px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--md-yellow);
	color: var(--md-ink);
	font-size: 11px;
	font-weight: 800;
	white-space: nowrap;
}

.mdesign-column__count {
	min-width: 24px;
	padding: 2px 8px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--status);
	color: var(--md-white);
	font-size: 12px;
	font-weight: 800;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.mdesign-column__hint {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--md-muted);
}

.mdesign-column__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mdesign-column__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 28px 12px;
	border: 2px dashed var(--md-line);
	border-radius: var(--wp--custom--radius--card);
	text-align: center;
	font-size: 14px;
	color: var(--md-muted);
}

.mdesign-column__empty[hidden] {
	display: none;
}

.mdesign-column__more {
	margin: 0;
	font-size: 13px;
	color: var(--md-muted);
	text-align: center;
}

/* Cards */
.mdesign-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--md-white);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: inset 0 0 0 2px var(--md-line);
	color: var(--md-ink);
	transition: box-shadow 0.12s ease;
}

.mdesign-card:hover,
.mdesign-card:focus-within {
	box-shadow: inset 0 0 0 2px var(--md-ink), var(--md-hard-shadow);
}

.mdesign-card.is-action {
	box-shadow: inset 0 0 0 2px var(--md-yellow), var(--md-hard-shadow);
}

.mdesign-card[hidden] {
	display: none;
}

.mdesign-card__preview {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	margin: 10px 10px 0;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--tile);
	background: var(--md-grey);
}

.mdesign-card__preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mdesign-card__noimage {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--md-line);
}

.mdesign-card__noimage .mdesign-icon {
	width: 40px;
	height: 40px;
}

.mdesign-card__label,
.mdesign-card__badge {
	position: absolute;
	top: 8px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 9px;
	border-radius: var(--wp--custom--radius--pill);
	font-size: 11px;
	font-weight: 800;
	line-height: 1.5;
}

.mdesign-card__label {
	left: 8px;
	background: rgb(45 45 45 / 0.85);
	color: var(--md-white);
}

.mdesign-card__label .woocommerce-Price-amount {
	color: inherit;
}

.mdesign-card__badge {
	right: 8px;
	background: var(--md-yellow);
	color: var(--md-ink);
}

.mdesign-card__badge .mdesign-icon {
	width: 12px;
	height: 12px;
}

.mdesign-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px 14px 14px;
}

.mdesign-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.mdesign-card__category {
	color: var(--md-muted);
	font-size: 12px;
	font-weight: 600;
	text-align: right;
}

.mdesign-card__title {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: 0;
}

.mdesign-card__title a {
	color: var(--md-ink);
	font-weight: 800;
	text-decoration: none;
}

.mdesign-card__title a:hover {
	color: var(--md-red);
}

.mdesign-card__ref {
	margin: -6px 0 0;
	color: var(--md-muted);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	font-weight: 700;
}

.mdesign-card__details {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	font-size: 13px;
}

.mdesign-card__details div {
	display: flex;
	align-items: flex-start;
	gap: 6px;
}

.mdesign-card__details dt .mdesign-icon {
	width: 15px;
	height: 15px;
	margin-top: 2px;
	color: var(--md-red);
}

.mdesign-card__details dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.mdesign-card__note {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 10px 12px;
	border-radius: var(--wp--custom--radius--button);
	background: var(--status-bg);
	font-size: 13px;
	line-height: 1.45;
}

.mdesign-card__note .mdesign-icon {
	width: 16px;
	height: 16px;
	margin-top: 1px;
	color: var(--status);
}

.mdesign-card__progress {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px 12px;
	border-radius: var(--wp--custom--radius--button);
	background: var(--md-grey);
	font-size: 12px;
	font-weight: 700;
}

.mdesign-card__dates {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 10px 12px;
	border-radius: var(--wp--custom--radius--button);
	background: var(--md-egg);
	font-size: 13px;
}

.mdesign-card__dates div {
	display: flex;
	justify-content: space-between;
	gap: 8px;
}

.mdesign-card__dates dt {
	color: var(--md-muted);
	font-weight: 400;
}

.mdesign-card__dates dd {
	margin: 0;
	font-weight: 600;
}

.mdesign-card__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mdesign-card__open {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	color: var(--md-red);
	font-size: 13px;
	text-decoration: none;
}

.mdesign-card__open .mdesign-icon {
	width: 14px;
	height: 14px;
}

/* Phones: full-width filters, and the columns stack as an accordion (assets/js/order-filter.js adds the toggles). */
@media (max-width: 640px) {
	.mdesign-board-search,
	.mdesign-filter-picker,
	.mdesign-filter-toggle {
		flex-basis: 100%;
	}

	/* The header's phone rules move .mdesign-store-picker to the end of its row; keep the filters in order. */
	.mdesign-board-toolbar .mdesign-filter-picker {
		order: 0;
	}

	.mdesign-filter-picker .mdesign-store-pill {
		width: 100%;
		max-width: none;
	}

	.mdesign-filter-picker .mdesign-store-menu {
		width: 100%;
		max-width: none;
	}

	.mdesign-filter-toggle {
		width: 100%;
	}

	.mdesign-view-toggle {
		order: -1;
		width: 100%;
		margin-left: 0;
	}

	.mdesign-view-toggle__option {
		flex: 1;
		justify-content: center;
	}

	/* List view: each row stacks into a block. */
	.mdesign-order-list-wrap {
		overflow: visible;
		border: 0;
	}

	.mdesign-order-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.mdesign-order-table,
	.mdesign-order-table tbody,
	.mdesign-order-table tr,
	.mdesign-order-table td {
		display: block;
		width: 100%;
	}

	.mdesign-order-list-wrap .mdesign-order-table tbody tr {
		margin-bottom: 10px;
		overflow: hidden;
		border: var(--md-border);
		border-radius: var(--wp--custom--radius--card);
		background: var(--md-white);
		box-shadow: inset 5px 0 0 var(--status);
	}

	.mdesign-order-list-wrap .mdesign-order-table tbody tr.is-action {
		background: var(--wp--preset--color--warn-bg);
	}

	.mdesign-order-list-wrap .mdesign-order-table tbody td,
	.mdesign-order-list-wrap .mdesign-order-table tbody tr:hover td,
	.mdesign-order-list-wrap .mdesign-order-table tbody tr.is-action td {
		padding: 8px 14px 8px 20px;
		border-top: 0;
		background: transparent;
	}

	.mdesign-order-list-wrap .mdesign-order-table tbody td:first-child {
		box-shadow: none;
		padding-top: 14px;
	}

	.mdesign-order-list-wrap .mdesign-order-table tbody td:last-child {
		padding-bottom: 14px;
	}

	.mdesign-order-table__note.is-empty {
		display: none;
	}

	.mdesign-order-table__order,
	.mdesign-order-table__note,
	.mdesign-order-table__actions {
		min-width: 0;
		max-width: none;
	}

	.mdesign-board-wrap {
		overflow: visible;
		padding: 0;
	}

	.mdesign-board {
		grid-auto-flow: row;
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.mdesign-column {
		gap: 10px;
	}

	.mdesign-column__top {
		position: relative;
	}

	.mdesign-column__toggle {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		padding: 0;
		background: none;
		color: inherit;
		font: inherit;
		text-align: left;
	}

	/* The whole head opens and closes the column (order-filter.js passes its clicks to the button). */
	.mdesign-column.is-accordion .mdesign-column__top {
		cursor: pointer;
	}

	/* Out-rank Storefront's button:hover and :focus colours (an ink fill and white text); the row shows the hover. */
	button.mdesign-column__toggle:hover,
	button.mdesign-column__toggle:focus,
	button.mdesign-column__toggle:active {
		background: none;
		color: inherit;
		box-shadow: none;
		outline: none;
	}

	/* Hover: a ring in the status colour. Not a darker fill, which would take the hint text below WCAG AA contrast. */
	.mdesign-column.is-accordion .mdesign-column__top {
		transition: box-shadow 0.12s ease;
	}

	.mdesign-column.is-accordion .mdesign-column__top:hover {
		box-shadow: inset 0 4px 0 var(--status), inset 0 0 0 2px var(--status);
	}

	.mdesign-column.is-accordion .mdesign-column__top:hover .mdesign-column__chevron {
		color: var(--md-red);
	}

	/* Keyboard focus only, on the whole row, so a tap doesn't leave a ring. */
	.mdesign-column__top:has(.mdesign-column__toggle:focus-visible) {
		outline: 3px solid var(--md-red);
		outline-offset: 2px;
	}

	.mdesign-column__head h2::before {
		display: none;
	}

	.mdesign-column__toggle::before {
		content: "";
		flex: none;
		width: 11px;
		height: 11px;
		border-radius: 50%;
		background: var(--status);
	}

	/* Pinned to the head's right edge, past the count, like the filters' chevrons. */
	.mdesign-column__head {
		padding-right: 30px;
	}

	.mdesign-column__chevron {
		position: absolute;
		top: 18px;
		right: 14px;
		width: 18px;
		height: 18px;
		transition: transform 0.15s ease;
	}

	.mdesign-column.is-collapsed .mdesign-column__chevron {
		transform: rotate(-90deg);
	}

	.mdesign-column.is-collapsed .mdesign-column__hint,
	.mdesign-column.is-collapsed .mdesign-column__body {
		display: none;
	}
}

/* Buttons on cards. */
.mdesign-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 11px 14px;
	border: 0;
	border-radius: var(--wp--custom--radius--button);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.mdesign-button .mdesign-icon {
	width: 16px;
	height: 16px;
}

.mdesign-button--primary,
.mdesign-button--primary:hover,
.mdesign-button--primary:focus {
	background: var(--md-red);
	color: var(--md-white);
}

.mdesign-button--primary:hover {
	filter: brightness(0.92);
}

.mdesign-button--soft,
.mdesign-button--soft:hover,
.mdesign-button--soft:focus {
	background: var(--md-egg);
	color: var(--md-ink);
}

.mdesign-button--soft:hover {
	filter: brightness(0.96);
}

/* Approve: a <details> that opens a confirmation, so one click can't send a proof to production. */
.mdesign-quick-approve summary {
	list-style: none;
}

.mdesign-quick-approve summary::-webkit-details-marker {
	display: none;
}

.mdesign-quick-approve[open] summary {
	background: var(--md-ink);
}

.mdesign-quick-approve form {
	margin-top: 8px;
	padding: 10px 12px;
	border-radius: var(--wp--custom--radius--button);
	background: var(--wp--preset--color--warn-bg);
	font-size: 13px;
}

.mdesign-quick-approve form p {
	margin: 0 0 8px;
}

/* ---- My account > Orders: backlog table -------------------------------- */

.woocommerce-account .woocommerce-orders-table {
	border: 1px solid var(--md-line);
	font-size: 15px;
}

.woocommerce-account .woocommerce-orders-table thead th {
	padding: 11px 14px;
	white-space: nowrap;
	vertical-align: bottom;
}

.woocommerce-account .woocommerce-orders-table tbody td,
.woocommerce-account .woocommerce-orders-table tbody th {
	padding: 10px 14px;
	border-top: 1px solid var(--md-line);
	vertical-align: middle;
}

.woocommerce-account .woocommerce-orders-table tbody tr {
	cursor: pointer;
}

.woocommerce-account .woocommerce-orders-table tbody tr:hover td,
.woocommerce-account .woocommerce-orders-table tbody tr:hover th {
	background: var(--wp--preset--color--warn-bg);
}

.woocommerce-account .woocommerce-orders-table__cell-order-number a {
	color: var(--md-red);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}

.woocommerce-account .woocommerce-orders-table__cell-order-total {
	font-variant-numeric: tabular-nums;
}

.woocommerce-account .woocommerce-orders-table__cell-order-number,
.woocommerce-account .woocommerce-orders-table__cell-order-date,
.woocommerce-account .woocommerce-orders-table__cell-order-status,
.woocommerce-account .woocommerce-orders-table__cell-order-total,
.woocommerce-account .woocommerce-orders-table__cell-order-actions,
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button {
	white-space: nowrap;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions .button::after {
	display: none;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions .button {
	padding: 5px 12px;
	font-size: 13px;
	margin: 2px 4px 2px 0;
}

.woocommerce-account .woocommerce-orders-table tr[hidden] {
	display: none;
}

.woocommerce-account .woocommerce-pagination {
	margin-top: 16px;
}

/* ---- Footer (inc/footer.php) --------------------------------------------- */

.site-footer {
	background: var(--md-egg);
	color: var(--md-muted);
	padding: 28px 0;
}

.mdesign-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
}

.mdesign-footer__brand {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 16px;
}

.mdesign-wordmark--footer {
	font-size: 22px;
	margin-right: 0;
}

.mdesign-footer__copyright {
	margin: 0;
	color: var(--md-muted);
	font-size: 14px;
}

.mdesign-footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	list-style: none;
	margin: 0;
}

/* Storefront colours and underlines every footer link (.site-footer a:not(.button)...), so out-rank it with the ID. */
#colophon .mdesign-footer a {
	text-decoration: none;
}

#colophon .mdesign-wordmark--footer {
	color: var(--md-ink);
}

#colophon .mdesign-footer-menu a {
	color: var(--md-ink);
	font-size: 14px;
	font-weight: 700;
}

#colophon .mdesign-footer-menu a:hover,
#colophon .mdesign-footer-menu .current-menu-item > a {
	color: var(--md-red);
}

/* Storefront's fixed handheld bar shows below 768px; leave room so it doesn't cover the footer links. */
@media (max-width: 767px) {
	.site-footer {
		padding-bottom: calc(28px + 72px);
	}
}

@media (max-width: 640px) {
	.mdesign-footer,
	.mdesign-footer-menu {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---- Dashboard (templates/dashboard.php, inc/dashboard.php) ---------------- */

/* Two columns once the orders panel arrives; until then the MStudio panel takes the row. */
.mdesign-dashboard {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
	padding-bottom: 48px;
}

.mdesign-dashboard > :only-child {
	grid-column: 1 / -1;
	max-width: 760px;
}

.mdesign-panel {
	padding: 32px;
	background:
		radial-gradient(circle at 100% 0, var(--wp--preset--color--warn-bg), transparent 45%),
		var(--md-white);
	border: var(--md-border);
	border-radius: var(--wp--custom--radius--panel);
	box-shadow: 0 6px 18px rgba(28, 28, 28, 0.05);
}

.mdesign-eyebrow {
	margin: 0 0 6px;
	color: var(--md-red);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.mdesign-panel__intro h1,
.mdesign-panel__intro h2 {
	margin: 0 0 12px;
	font-size: clamp(40px, 5vw, 56px);
	letter-spacing: -0.04em;
}

/* The heading is editable text, so colour its first letter like the wordmark's "M". */
.mdesign-panel__intro h1::first-letter,
.mdesign-panel__intro h2::first-letter {
	color: var(--md-yellow);
}

.mdesign-panel__intro p {
	max-width: 36em;
	margin: 0 0 24px;
	color: var(--md-ink);
	font-size: 18px;
	line-height: 1.55;
}

/* Big links */
.mdesign-panel__links {
	display: grid;
	gap: 16px;
	margin-bottom: 24px;
}

.mdesign-bigcard {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 22px 24px;
	border-radius: var(--wp--custom--radius--button);
	color: var(--md-white);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.mdesign-bigcard:hover,
.mdesign-bigcard:focus-visible {
	color: var(--md-white);
	transform: translate(-2px, -2px);
	box-shadow: var(--md-hard-shadow);
}

.mdesign-bigcard--catalogue {
	background: var(--md-red);
}

.mdesign-bigcard--status {
	background: var(--md-ink);
	box-shadow: inset -6px 0 0 var(--md-yellow);
}

.mdesign-bigcard--status:hover,
.mdesign-bigcard--status:focus-visible {
	box-shadow: inset -6px 0 0 var(--md-yellow), var(--md-hard-shadow);
}

.mdesign-bigcard__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: var(--wp--custom--radius--button);
	background: rgba(255, 255, 255, 0.18);
}

.mdesign-bigcard--status .mdesign-bigcard__icon {
	background: var(--md-yellow);
	color: var(--md-ink);
}

.mdesign-bigcard__icon .mdesign-icon {
	width: 24px;
	height: 24px;
}

.mdesign-bigcard__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.mdesign-bigcard__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.mdesign-bigcard__chip {
	padding: 2px 8px;
	border-radius: var(--wp--custom--radius--pill);
	background: rgba(255, 255, 255, 0.2);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.mdesign-bigcard__text {
	opacity: 0.85;
	font-size: 14px;
	font-weight: 500;
}

.mdesign-bigcard__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
}

/* Stats */
.mdesign-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	list-style: none;
}

.mdesign-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 16px 8px;
	background: var(--md-egg);
	border-radius: var(--wp--custom--radius--button);
	text-align: center;
}

.mdesign-stat__value {
	font-size: 40px;
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.mdesign-stat--alert .mdesign-stat__value {
	color: var(--md-red);
}

.mdesign-stat__label {
	color: var(--md-muted);
	font-size: 13px;
	font-weight: 600;
}

/* Orders panel */
.mdesign-orders-panel {
	padding: 28px;
	background: var(--md-white);
	border: var(--md-border);
	border-radius: var(--wp--custom--radius--panel);
	box-shadow: 0 6px 18px rgba(28, 28, 28, 0.05);
}

.mdesign-orders-panel__head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 24px;
}

.mdesign-orders-panel__head > div {
	flex: 1;
	min-width: 0;
}

.mdesign-orders-panel__head h2 {
	margin: 0;
	font-size: 34px;
	line-height: 1.05;
}

.mdesign-orders-panel__head p {
	margin: 4px 0 0;
	color: var(--md-muted);
	font-size: 13px;
}

.mdesign-orders-panel__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 36px;
	height: 36px;
	margin-top: 2px;
	border-radius: var(--wp--custom--radius--button);
	background: var(--md-egg);
	color: var(--md-red);
}

.mdesign-orders-panel__heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
}

.mdesign-orders-panel__heading h3 {
	margin: 0;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.mdesign-orders-panel__heading a {
	color: var(--md-red);
}

.mdesign-orders-panel__empty {
	margin: 0 0 24px;
	color: var(--md-muted);
	font-size: 14px;
}

.mdesign-order-list {
	display: grid;
	gap: 10px;
	margin: 0 0 28px;
	list-style: none;
}

.mdesign-order {
	display: block;
	padding: 16px;
	background: var(--md-egg);
	border-radius: var(--wp--custom--radius--button);
	color: var(--md-ink);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.mdesign-order:hover,
.mdesign-order:focus-visible {
	color: var(--md-ink);
	transform: translate(-2px, -2px);
	box-shadow: var(--md-hard-shadow);
}

/* Current orders get their status's colour down the left edge, as in the board's list view. */
.mdesign-order:not(.mdesign-order--past) {
	box-shadow: inset 4px 0 0 var(--status, transparent);
}

.mdesign-order:not(.mdesign-order--past):hover,
.mdesign-order:not(.mdesign-order--past):focus-visible {
	box-shadow: inset 4px 0 0 var(--status, transparent), var(--md-hard-shadow);
}

.mdesign-order__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}

.mdesign-order__title {
	display: block;
	overflow: hidden;
	font-size: 15px;
	font-weight: 800;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mdesign-order__top > span:first-child,
.mdesign-order--past > span:first-child {
	min-width: 0;
}

.mdesign-order__meta {
	display: block;
	margin-top: 2px;
	color: var(--md-muted);
	font-size: 12px;
	font-weight: 600;
}

/* Chip with a dot, as in the mockup's status pills. */
.mdesign-chip--dot::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 6px;
	border-radius: 50%;
	background: currentColor;
	vertical-align: 1px;
}

/* Progress: one segment per workflow status, coloured by .mdesign-progress--stages (above). */
.mdesign-progress {
	display: flex;
	gap: 6px;
}

.mdesign-progress > span {
	flex: 1;
	height: 5px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--md-line);
}

/* Past fulfilled: one row each, no card. */
.mdesign-order-list--past {
	gap: 0;
}

.mdesign-order--past {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 16px;
	background: transparent;
}

.mdesign-order__done {
	display: flex;
	flex: none;
	align-items: center;
	gap: 10px;
}

.mdesign-order__done .mdesign-progress {
	gap: 0;
	width: 64px;
}

.mdesign-order__done .mdesign-progress > span {
	border-radius: 0;
}

.mdesign-order__done .mdesign-progress > span:first-child {
	border-radius: var(--wp--custom--radius--pill) 0 0 var(--wp--custom--radius--pill);
}

.mdesign-order__done .mdesign-progress > span:last-child {
	border-radius: 0 var(--wp--custom--radius--pill) var(--wp--custom--radius--pill) 0;
}

@media (max-width: 1000px) {
	.mdesign-dashboard {
		grid-template-columns: minmax(0, 1fr);
	}

	.mdesign-dashboard > :only-child {
		max-width: none;
	}
}

@media (max-width: 640px) {
	.mdesign-panel,
	.mdesign-orders-panel {
		padding: 22px 18px;
	}

	.mdesign-order__top,
	.mdesign-order--past {
		flex-direction: column;
		align-items: flex-start;
	}

	.mdesign-order--past {
		gap: 8px;
	}

	.mdesign-bigcard {
		gap: 14px;
		padding: 18px;
	}

	.mdesign-bigcard__icon {
		display: none;
	}

	.mdesign-bigcard__title {
		font-size: 19px;
	}

	.mdesign-stats {
		gap: 8px;
	}

	.mdesign-stat__value {
		font-size: 30px;
	}

	.mdesign-stat__label {
		font-size: 12px;
	}
}

/* Quick links (inc/quick-links.php) */
.mdesign-quick-links {
	grid-column: 1 / -1;
	margin-top: 24px;
}

.mdesign-quick-links__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
}

.mdesign-quick-links__head h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
}

.mdesign-quick-links__head p {
	margin: 4px 0 0;
	color: var(--md-muted);
	font-size: 15px;
}

.mdesign-quick-links__count {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: var(--wp--custom--radius--button);
}

.mdesign-quick-links__count .mdesign-icon {
	width: 14px;
	height: 14px;
}

.mdesign-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(max(190px, calc((100% - 4 * 16px) / 5)), 1fr));
	gap: 16px;
	margin: 0;
	list-style: none;
}

.mdesign-tiles > li {
	display: flex;
}

.mdesign-tile {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	min-height: 210px;
	padding: 16px;
	background: var(--md-white);
	border: var(--md-border);
	border-radius: var(--wp--custom--radius--card);
	color: var(--md-ink);
	transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

a.mdesign-tile:hover,
a.mdesign-tile:focus-visible {
	color: var(--md-ink);
	border-color: var(--md-ink);
	transform: translate(-2px, -2px);
	box-shadow: var(--md-hard-shadow);
}

.mdesign-tile__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.mdesign-tile__code {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 8px;
	border-radius: var(--wp--custom--radius--button);
	background: var(--md-egg);
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.mdesign-tile__bottom {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mdesign-tile__bottom .mdesign-icon {
	width: 22px;
	height: 22px;
	margin-bottom: 8px;
	color: var(--md-red);
}

.mdesign-tile__title {
	font-size: 15px;
	font-weight: 800;
}

.mdesign-tile__text {
	color: var(--md-muted);
	font-size: 12px;
	font-weight: 500;
}

.mdesign-tile--soon {
	background: var(--md-grey);
	border-color: transparent;
	color: var(--md-muted);
}

.mdesign-tile--soon .mdesign-tile__code {
	background: var(--md-white);
}

.mdesign-tile--soon .mdesign-icon,
.mdesign-tile--soon .mdesign-tile__bottom .mdesign-icon {
	color: var(--md-muted);
}

.mdesign-tile--soon .mdesign-tile__title {
	color: var(--md-muted);
}

.mdesign-tile__soon {
	background: var(--md-egg);
	color: var(--md-muted);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: var(--wp--custom--radius--button);
}

@media (max-width: 640px) {
	.mdesign-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.mdesign-tile {
		gap: 24px;
		min-height: 170px;
		padding: 12px;
	}
}