/*
 * Moon & Milk 2026 — front-end styles.
 *
 * Tokens come from theme.json (--wp--preset--*) with literal fallbacks, so the page stays
 * correct even if global styles are not printed. Specificity is kept to single classes.
 *
 * Contents
 *  1. Tokens
 *  2. Base and typography
 *  3. Layout utilities
 *  4. Accessibility utilities
 *  5. Controls: buttons, links, forms
 *  6. Announcement
 *  7. Header, navigation and search
 *  8. Homepage sections
 *  9. Components: cards, product cards, process steps
 * 9b. Shop archives: archive band, product grid, status, pagination, empty state
 * 9c. Product pages: gallery, summary, purchase form, sections, lightbox
 * 9d. Basket, checkout and account: notices, fields, totals, payment, order received, My Account
 * 9e. Elementor Cart and Checkout widgets: the theme's values over styles saved on the widgets
 * 9f. Elementor-built content pages: Kit global slots at theme values; headings, text, buttons, forms, FAQ toggles
 * 10. Footer
 * 11. Generic templates and WordPress classes
 * 12. Reduced motion
 *
 * Breakpoints: 30em (480px) small, 40em (640px) tablet, 48em (768px) hero image,
 * 60em (960px) desktop navigation, 64em (1024px) desktop gutters and grids.
 */

/* 1. Tokens ------------------------------------------------------------ */

:root {
	--mm-ink: var(--wp--preset--color--ink, #30324a);
	--mm-paper: var(--wp--preset--color--paper, #f7f2ea);
	--mm-warm-white: var(--wp--preset--color--warm-white, #fffdf8);
	--mm-white: var(--wp--preset--color--white, #fff);
	--mm-teal: var(--wp--preset--color--deep-teal, #285b62);
	--mm-moonlit: var(--wp--preset--color--moonlit-blue, #c9d9e7);
	--mm-sage-mist: var(--wp--preset--color--sage-mist, #dce7df);
	--mm-sage: var(--wp--preset--color--sage, #9bb5a3);
	/* Doll Blush: tiny decorative accents only (about 1-3% of the page); never text. */
	--mm-blush: var(--wp--preset--color--doll-blush, #ce96a1);
	--mm-line: var(--wp--preset--color--line, #b9b5b0);
	--mm-text-2: var(--wp--preset--color--secondary-text, #41404f);
	--mm-error: var(--wp--preset--color--error, #b42318);
	--mm-success: var(--wp--preset--color--success, #376c52);

	--mm-font-display: var(--wp--preset--font-family--display, Newsreader, Georgia, "Times New Roman", serif);
	--mm-font-body: var(--wp--preset--font-family--body, Karla, Arial, sans-serif);

	--mm-size-small: var(--wp--preset--font-size--small, 14px);
	--mm-size-ui: var(--wp--preset--font-size--ui, 16px);
	--mm-size-body: var(--wp--preset--font-size--body, clamp(17px, 16.64px + 0.11vw, 18px));
	--mm-size-lead: var(--wp--preset--font-size--lead, clamp(18px, 17.27px + 0.23vw, 20px));
	--mm-size-h3: var(--wp--preset--font-size--h3, clamp(22px, 21.27px + 0.23vw, 24px));
	--mm-size-h2: var(--wp--preset--font-size--h2, clamp(30px, 26.36px + 1.14vw, 40px));
	--mm-size-h1: var(--wp--preset--font-size--h1, clamp(40px, 36.36px + 1.14vw, 50px));

	--mm-max: 1200px;
	--mm-reading: 720px;
	--mm-gutter: 20px;
	--mm-section: 30px;
	--mm-gap: 24px;

	--mm-radius-card: 10px;
	--mm-radius-image: 8px;
	--mm-radius-button: 7px;
	--mm-shadow: var(--wp--preset--shadow--subtle, 0 6px 20px rgba(48, 50, 74, 0.08));

	--mm-target: 44px;
	--mm-focus: var(--mm-ink);
	/* Fine dividers inside basket, checkout and account panels. */
	--mm-rule: rgba(48, 50, 74, 0.14);

	/* WooCommerce's own custom properties, so its form fields and error colour match the
	   theme wherever WooCommerce draws them. */
	--wc-form-border-color: var(--mm-text-2);
	--wc-form-border-radius: var(--mm-radius-button);
	--wc-form-border-width: 1px;
	--wc-form-color-background: var(--mm-white);
	--wc-form-color-text: var(--mm-ink);
	--wc-red: var(--mm-error);
	--wc-green: var(--mm-success);
}

@media (min-width: 40em) {
	:root {
		--mm-gutter: 28px;
	}
}

@media (min-width: 64em) {
	:root {
		--mm-gutter: 40px;
		--mm-section: 44px;
		--mm-gap: 32px;
	}
}

/* 2. Base and typography ---------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--mm-paper);
	color: var(--mm-ink);
	font-family: var(--mm-font-body);
	font-size: var(--mm-size-body);
	font-weight: 400;
	line-height: 1.65;
	overflow-wrap: break-word;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3,
h4 {
	margin: 0 0 0.5em;
	color: var(--mm-ink);
	font-family: var(--mm-font-display);
	font-weight: 500;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

h1 {
	font-size: var(--mm-size-h1);
	line-height: 1.08;
}

h2 {
	font-size: var(--mm-size-h2);
	line-height: 1.15;
}

h3 {
	font-size: var(--mm-size-h3);
	line-height: 1.22;
}

h4 {
	font-family: var(--mm-font-body);
	font-size: var(--mm-size-lead);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.35;
}

p,
ul,
ol,
dl {
	margin: 0 0 1em;
}

.lead {
	font-size: var(--mm-size-lead);
	line-height: 1.5;
}

a {
	color: var(--mm-teal);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover {
	text-decoration-thickness: 2px;
}

/* 3. Layout utilities -------------------------------------------------- */

.wrap {
	width: 100%;
	max-width: calc(var(--mm-max) + 2 * var(--mm-gutter));
	margin-inline: auto;
	padding-inline: var(--mm-gutter);
}

.section {
	padding-block: var(--mm-section);
}

.section--white {
	background: var(--mm-white);
}

.section--sage {
	background: var(--mm-sage-mist);
}

.reading,
.section__intro > p {
	max-width: var(--mm-reading);
}

.section__intro {
	margin-bottom: 24px;
}

.section__intro > :last-child,
.reading > :last-child {
	margin-bottom: 0;
}

.section__action {
	margin: 24px 0 0;
}

.grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mm-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 40em) {
	.grid--3,
	.grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

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

/* 4. Accessibility utilities ------------------------------------------ */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	word-wrap: normal !important;
}

[hidden] {
	display: none !important;
}

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

/* The skip-link target receives focus programmatically; keep an outline for keyboard users. */
#content:focus:not(:focus-visible) {
	outline: none;
}

.skip-link {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1000;
	display: inline-flex;
	align-items: center;
	min-height: var(--mm-target);
	padding: 8px 16px;
	background: var(--mm-white);
	color: var(--mm-ink);
	font-size: var(--mm-size-ui);
	font-weight: 700;
	border: 2px solid var(--mm-ink);
	border-radius: var(--mm-radius-button);
	transform: translateY(calc(-100% - 16px));
}

.skip-link:focus {
	transform: none;
}

/* 5. Controls: buttons, links, forms ---------------------------------- */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 10px 22px;
	background: var(--mm-teal);
	color: var(--mm-warm-white);
	font-family: var(--mm-font-body);
	font-size: var(--mm-size-ui);
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	border: 2px solid var(--mm-teal);
	/* Rounded pill actions, as in the approved Milk at Moonrise reference. */
	border-radius: 999px;
	cursor: pointer;
}

.button:hover {
	background: var(--mm-ink);
	border-color: var(--mm-ink);
	color: var(--mm-warm-white);
}

.button--secondary {
	background: transparent;
	color: var(--mm-teal);
}

.button--secondary:hover {
	background: var(--mm-warm-white);
	border-color: var(--mm-ink);
	color: var(--mm-ink);
}

.button-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 32px;
}

.text-link {
	display: inline-block;
	padding-block: 10px;
	font-size: var(--mm-size-ui);
	font-weight: 600;
	line-height: 1.5;
}

input[type="search"],
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
select,
textarea {
	max-width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	background: var(--mm-white);
	color: var(--mm-ink);
	font: inherit;
	font-size: var(--mm-size-ui);
	/* Form boundaries need 3:1; Line is decorative only, so fields use Secondary text. */
	border: 1px solid var(--mm-text-2);
	border-radius: var(--mm-radius-button);
}

label {
	font-size: var(--mm-size-ui);
	font-weight: 600;
}

.search-form__label {
	display: block;
	margin-bottom: 8px;
}

.search-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.search-form__input {
	flex: 1 1 14rem;
	min-width: 0;
}

/* 6. Announcement ------------------------------------------------------ */

/* Night Ink strip with Warm White text (12.3:1); the link stays Warm White and underlined. */
.announcement {
	background: var(--mm-ink);
	color: var(--mm-warm-white);
	font-size: var(--mm-size-ui);
	line-height: 1.4;
	--mm-focus: var(--mm-warm-white);
}

.announcement__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	column-gap: 16px;
	min-height: var(--mm-target);
	padding-block: 4px;
	text-align: center;
}

.announcement__text {
	margin: 0;
}

.announcement__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--mm-target);
	color: var(--mm-warm-white);
	font-weight: 600;
}

.announcement__link:hover {
	color: var(--mm-sage-mist);
}

/* 7. Header, navigation and search ------------------------------------ */

.site-header {
	background: var(--mm-paper);
	border-bottom: 1px solid var(--mm-line);
}

/* Brand masthead: the illustrated Held at Night logo, centred, with the descriptor beneath. */
.site-header__masthead {
	display: flex;
	justify-content: center;
	padding-block: 10px 8px;
}

.wordmark {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	color: var(--mm-ink);
	text-align: center;
	text-decoration: none;
}

/*
 * Approved primary logo without tagline, at its own proportions (480 x 448 derivative).
 * The artwork carries its own clear space as transparent margin.
 */
.wordmark__logo {
	display: block;
	width: 168px;
	height: auto;
}

/* Brief label: uppercase via CSS so assistive tech reads normal words. Deep teal on Paper is 6.8:1. */
.wordmark__tagline {
	color: var(--mm-teal);
	font-family: var(--mm-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.3;
	text-transform: uppercase;
}

@media (max-width: 29.99em) {
	.wordmark__tagline {
		letter-spacing: 0.08em;
	}
}

@media (min-width: 40em) {
	.wordmark__logo {
		width: 188px;
	}
}

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

.wordmark:hover .wordmark__tagline {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Control row: menu, navigation, search and basket, separate from the masthead. */
.site-header__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas:
		"menu . utils"
		"nav nav nav";
	align-items: center;
	column-gap: 4px;
	min-height: 56px;
	padding-block: 6px;
	border-top: 1px solid rgba(48, 50, 74, 0.12);
}

.menu-toggle {
	grid-area: menu;
}

.header-utilities {
	grid-area: utils;
	display: flex;
	align-items: center;
	gap: 4px;
}

.header-control {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: var(--mm-target);
	min-height: var(--mm-target);
	padding: 8px;
	background: transparent;
	color: var(--mm-ink);
	font-family: var(--mm-font-body);
	font-size: var(--mm-size-ui);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	border: 0;
	border-radius: var(--mm-radius-button);
	cursor: pointer;
}

.header-control:hover,
.header-control[aria-expanded="true"] {
	background: var(--mm-sage-mist);
	color: var(--mm-ink);
}

.header-control .icon {
	flex: none;
	width: 24px;
	height: 24px;
}

/* Below 30em the controls are icon-only; their names remain available to assistive tech. */
@media (max-width: 29.99em) {
	.header-control__text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

.basket-link__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5em;
	height: 1.5em;
	padding-inline: 4px;
	background: var(--mm-teal);
	color: var(--mm-white);
	font-size: var(--mm-size-small);
	font-weight: 700;
	border-radius: 0.75em;
}

@media (max-width: 29.99em) {
	.basket-link__count {
		position: absolute;
		top: 2px;
		right: 0;
	}
}

.primary-nav {
	grid-area: nav;
}

.primary-nav__list {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--mm-line);
}

.primary-nav__list a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 8px 4px;
	color: var(--mm-ink);
	font-size: var(--mm-size-ui);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--mm-line);
}

.primary-nav__list a:hover,
.primary-nav__list .current-menu-item > a,
.primary-nav__list [aria-current="page"] {
	color: var(--mm-teal);
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* Collapsed on small screens only when navigation.js can reopen it. */
@media (max-width: 59.99em) {
	.js .primary-nav:not(.is-open) {
		display: none;
	}
}

@media (min-width: 60em) {
	.site-header__masthead {
		padding-block: 6px 2px;
	}

	.wordmark__logo {
		width: 220px;
	}

	.wordmark__tagline {
		font-size: 12px;
	}

	/*
	 * Navigation centred; search and basket to the right. The right column never shrinks
	 * below Search and Basket, so even before or without JavaScript a long menu wraps
	 * instead of running into them.
	 */
	.site-header__inner {
		grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr);
		grid-template-areas: ". nav utils";
		column-gap: 24px;
		min-height: 48px;
		padding-block: 2px;
	}

	.header-utilities {
		justify-self: end;
	}

	.menu-toggle {
		display: none;
	}

	.primary-nav__list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 4px 8px;
		margin: 0;
		border: 0;
	}

	.primary-nav__list a {
		min-height: var(--mm-target);
		padding: 8px 12px;
		border: 0;
		border-radius: var(--mm-radius-button);
	}

	.primary-nav__list a:hover {
		background: var(--mm-sage-mist);
	}

	.primary-nav__list a {
		text-underline-offset: 0.3em;
	}

	/*
	 * Two-row desktop header (approved 26 September 2026, proof5). Menu length comes from
	 * WordPress, so navigation.js measures it: when the menu cannot sit centred on one row
	 * beside Search and Basket, the header gets `is-two-row`.
	 * - Masthead row: the approved logo, unchanged; Search and Basket move to the right of
	 *   it, vertically centred on the logo, with dedicated space.
	 * - Navigation row: every menu item, full size, centred across the content width.
	 * The Menu button stays reserved for widths below 60em.
	 */
	.site-header.is-two-row {
		position: relative;
	}

	.site-header.is-two-row .site-header__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "nav";
	}

	/* Centred on the 220px R2 logo (480 x 417 artwork) below the masthead's 6px top padding;
	   the right edge follows the content column at every width. */
	.site-header.is-two-row .header-utilities {
		position: absolute;
		top: calc(6px + 220px * 417 / 480 / 2 - var(--mm-target) / 2);
		right: max(var(--mm-gutter), (100% - var(--mm-max)) / 2);
	}

	.site-header.is-two-row .primary-nav__list {
		gap: 4px 12px;
	}
}

/* Arrowed actions (decorative arrow, hidden from assistive technology). */
.button--arrow::after {
	content: "\2192" / "";
	margin-left: 10px;
}

/* Submenus: only rendered when the WordPress Primary menu has child items. */
.primary-nav__list .menu-item-has-children {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.primary-nav__list .menu-item-has-children > a {
	flex: 1;
}

.submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--mm-target);
	min-height: var(--mm-target);
	padding: 0;
	background: transparent;
	color: var(--mm-ink);
	border: 0;
	border-radius: var(--mm-radius-button);
	cursor: pointer;
}

.submenu-toggle .icon {
	width: 18px;
	height: 18px;
}

.submenu-toggle[aria-expanded="true"] .icon {
	transform: rotate(180deg);
}

.submenu-toggle:hover {
	background: var(--mm-sage-mist);
}

.primary-nav__list .sub-menu {
	flex-basis: 100%;
	margin: 0;
	padding: 0 0 0 16px;
	list-style: none;
}

.js .primary-nav__list .sub-menu:not(.is-open) {
	display: none;
}

@media (min-width: 60em) {
	.primary-nav__list a {
		font-weight: 500;
	}

	.primary-nav__list .menu-item-has-children {
		position: relative;
		flex-wrap: nowrap;
	}

	.primary-nav__list .menu-item-has-children > a {
		padding-right: 2px;
	}

	.submenu-toggle {
		min-width: 32px;
		margin-left: -4px;
	}

	.primary-nav__list .sub-menu {
		position: absolute;
		z-index: 20;
		top: 100%;
		left: 0;
		min-width: 240px;
		padding: 8px;
		background: var(--mm-paper);
		border: 1px solid var(--mm-line);
		border-radius: var(--mm-radius-card);
		box-shadow: var(--mm-shadow);
	}

	.primary-nav__list .sub-menu a {
		width: 100%;
	}

	/* Without JavaScript, submenus open on hover and keyboard focus. */
	html:not(.js) .primary-nav__list .sub-menu {
		display: none;
	}

	html:not(.js) .primary-nav__list .menu-item-has-children:hover > .sub-menu,
	html:not(.js) .primary-nav__list .menu-item-has-children:focus-within > .sub-menu {
		display: block;
	}

	/* Search | Basket, separated by a fine rule as in the reference. */
	.header-utilities {
		gap: 16px;
	}

	.header-utilities .basket-link::before {
		content: "";
		position: absolute;
		top: 10px;
		bottom: 10px;
		left: -9px;
		width: 1px;
		background: var(--mm-line);
	}
}

.site-search {
	padding-block: 16px 24px;
	background: var(--mm-white);
	border-top: 1px solid var(--mm-line);
}

.js .site-search:not(.is-open) {
	display: none;
}

.site-search .search-form {
	max-width: var(--mm-reading);
}

/* 8. Homepage sections ------------------------------------------------- */

/*
 * Composition follows reference/milk-at-moonrise-approved.png. Flat colour fields only
 * (no gradients); every shape is CSS or aria-hidden SVG and sits behind the copy, which
 * always rests on a solid Milk Paper or Moonlit Blue surface.
 */

.text-link--arrow::after {
	content: "\2192" / "";
	display: inline-block;
	margin-left: 8px;
}

/* Hero ------------------------------------------------------------------ */

.hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-bottom: 28px;
	background: var(--mm-moonlit);
}

.hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	gap: 20px;
}

/* Small screens: copy on a Milk Paper panel with a curved lower edge, photograph below. */
.hero__copy {
	margin-inline: calc(-1 * var(--mm-gutter));
	padding: 28px var(--mm-gutter) 32px;
	background: var(--mm-paper);
	border-radius: 0 0 55% 45% / 0 0 44px 44px;
}

/* Doll Blush as a tiny, local accent: one short rule above the heading. */
.hero__copy::before {
	content: "";
	display: block;
	width: 36px;
	height: 3px;
	margin-bottom: 16px;
	background: var(--mm-blush);
	border-radius: 2px;
}

.hero__copy .lead {
	margin-bottom: 0;
	color: var(--mm-text-2);
}

.hero__copy .button-row {
	margin-top: 22px;
}

/* Stack the actions on narrow screens; each stays a full 48px pill. */
@media (max-width: 29.99em) {
	.hero__copy .button-row {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}
}

.hero__media {
	position: relative;
	display: block;
}

.hero__media img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 420px;
	object-fit: cover;
	object-position: 60% 40%;
	border-radius: var(--mm-radius-image);
}

@media (min-width: 40em) and (max-width: 63.99em) {
	.hero__media img {
		max-height: 440px;
		object-position: 65% 40%;
	}
}

@media (min-width: 64em) {
	.hero {
		display: flex;
		align-items: center;
		min-height: 460px;
		padding-block: 40px;
	}

	/* The large Milk Paper panel: an ellipse sweeping in from the left over the photograph. */
	.hero::before {
		content: "";
		position: absolute;
		z-index: 1;
		top: 2%;
		left: -22%;
		width: 88%;
		height: 200%;
		background: var(--mm-paper);
		border-radius: 50%;
		pointer-events: none;
	}

	/*
	 * Static, with no z-index, so the photograph and shapes position and stack against the
	 * whole hero. (As a flex item, a z-index here would create its own stacking context.)
	 */
	.hero__inner {
		position: static;
		z-index: auto;
		display: block;
	}

	.hero__copy {
		position: relative;
		z-index: 2;
		max-width: min(600px, 42vw);
		margin: 0;
		padding: 0;
		background: none;
		border-radius: 0;
	}

	/* Photograph fills the right, from the header to the section below. */
	.hero__media {
		position: absolute;
		/* Beneath the panel shapes (z-index 1) and the copy (z-index 2). */
		z-index: 0;
		inset: 0 0 0 48%;
	}

	.hero__media img {
		width: 100%;
		height: 100%;
		max-height: none;
		object-fit: cover;
		/* Keeps the doll's face as the focal point. */
		object-position: 80% 42%;
		border-radius: 0;
	}
}

/*
 * Section waves: wherever the background colour changes, the lower section rises into the one
 * above with a gentle, full-width wave. Each join has its own rhythm so the page never repeats
 * the same shape. The wave is a CSS mask, so its colour always comes from the palette tokens.
 * About 36px tall on desktop and 20px on narrow screens. No floating shapes or corner blobs.
 */
.trust,
.shop,
.guides,
.buying,
.site-footer {
	position: relative;
	isolation: isolate;
}

.trust::before,
.shop::before,
.guides::before,
.buying::before,
.site-footer::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -40px;
	right: 0;
	left: 0;
	height: 48px;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	pointer-events: none;
}

/* Hero to What you can expect: a long, slow swell. */
.trust::before {
	background: var(--mm-warm-white);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 30C240 6 480 6 720 22s480 20 720-4V48H0Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 30C240 6 480 6 720 22s480 20 720-4V48H0Z'/%3E%3C/svg%3E");
}

/* What you can expect to Shop: two soft crests, offset to the left. */
.shop::before {
	background: var(--mm-paper);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 20C150 38 330 38 500 22S840 4 1010 20s300 22 430 8V48H0Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 20C150 38 330 38 500 22S840 4 1010 20s300 22 430 8V48H0Z'/%3E%3C/svg%3E");
}

/* Shop to Collector guides: the night rises in a slightly deeper, uneven wave. */
.guides::before {
	background: var(--mm-ink);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 34C200 10 400 4 610 18s380 28 560 16S1360 8 1440 14V48H0Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 34C200 10 400 4 610 18s380 28 560 16S1360 8 1440 14V48H0Z'/%3E%3C/svg%3E");
}

/* Collector guides to How buying works: a gentle ripple, crest to the right. */
.buying::before {
	background: var(--mm-paper);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 16C220 30 420 36 640 26s380-22 560-16 180 18 240 20V48H0Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 16C220 30 420 36 640 26s380-22 560-16 180 18 240 20V48H0Z'/%3E%3C/svg%3E");
}

/* Into the footer: three quiet undulations. */
.site-footer::before {
	background: var(--mm-ink);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 26C160 12 320 12 480 24s320 16 480 2 320-14 480 0V48H0Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 26C160 12 320 12 480 24s320 16 480 2 320-14 480 0V48H0Z'/%3E%3C/svg%3E");
}

@media (max-width: 39.99em) {
	.trust::before,
	.shop::before,
	.guides::before,
	.buying::before,
	.site-footer::before {
		top: -22px;
		height: 26px;
	}
}

/* What you can expect ---------------------------------------------------- */

/* A deliberate full-width Warm White band on the Milk Paper page, with arcs above and below. */
.trust {
	background: var(--mm-warm-white);
}

/* Heading above; three balanced, equal promise columns beneath it. */
.trust__inner {
	display: grid;
	gap: 20px;
}

.trust__title {
	margin: 0;
}

.trust__list {
	display: grid;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.trust-item {
	text-align: center;
}

.trust-item__title {
	margin-bottom: 8px;
	font-size: var(--mm-size-lead);
	line-height: 1.3;
}

.trust-item__text {
	max-width: 20rem;
	margin: 0 auto;
	color: var(--mm-text-2);
	font-size: var(--mm-size-ui);
	line-height: 1.55;
}

@media (min-width: 40em) {
	.trust__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.trust__list {
		column-gap: 0;
	}

	.trust-item {
		padding-inline: var(--mm-gap);
	}

	.trust-item + .trust-item {
		border-left: 1px solid rgba(48, 50, 74, 0.2);
	}
}

/* Larger hand-drawn practical illustrations, centred above their copy. */
.illustration {
	display: block;
	width: 150px;
	height: auto;
	margin: 0 auto 12px;
}

@media (min-width: 64em) {
	.illustration {
		width: 168px;
	}
}

/*
 * Approved artwork is trimmed to each subject, so aspect ratios differ slightly. In the guide
 * cards one shared box (the tallest subject's ratio) keeps titles aligned; the image is
 * contained within it, never cropped or stretched.
 */
.guides .illustration--art {
	aspect-ratio: 168 / 162;
	object-fit: contain;
}

/* The three approved trust illustrations share one 4:3 box, so titles stay aligned. */
.trust-item .illustration--art {
	aspect-ratio: 4 / 3;
	object-fit: contain;
}

/* Shop ------------------------------------------------------------------- */

.shop .grid--4 {
	gap: 28px 20px;
}

/* Photography-led tiles: real photographs and neutral fallbacks share one frame. */
.shop .card-list .card__media {
	aspect-ratio: 3 / 2;
	border-radius: var(--mm-radius-card);
}

.shop .card-list .card__media img {
	height: 100%;
	aspect-ratio: auto;
}

.shop .card-list .card__body {
	padding-top: 14px;
}

.shop__products {
	margin-top: 32px;
}

.shop__products-title {
	margin-bottom: 20px;
}

/* Homepage product photographs use a landscape frame to keep the row compact. */
.shop__products .product-card__media img,
.shop__products .card__media--fallback {
	aspect-ratio: 4 / 3;
}

/* Tighter transition from How buying works into Meet Aya. */
.buying {
	padding-bottom: calc(var(--mm-section) * 0.75);
}

/* Collector guides ------------------------------------------------------- */

/* The Night Ink pause in the middle of the page. */
.band--night {
	padding-block: 56px 64px;
	background: var(--mm-ink);
}

.band--night h2,
.band--night .section__intro .lead {
	color: var(--mm-warm-white);
}

.guides .card-list {
	gap: 24px;
}

/* Milk Paper cards with Night Ink text; links stay Deep Teal (6.8:1). */
.guides .card {
	padding: 24px 24px 20px;
	background: var(--mm-paper);
	border-radius: 16px;
}

.guides .card__body {
	padding-top: 0;
}

.guides .card__title {
	color: var(--mm-ink);
	text-align: center;
}

.guides .card__text {
	color: var(--mm-text-2);
}

/* Tablet: one clean column (approved), not two plus an orphan. */
@media (min-width: 40em) and (max-width: 63.99em) {
	.guides .card-list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Meet Aya --------------------------------------------------------------- */

/*
 * Meet Aya: one calm, stacked text column aligned with the other sections. The Deep Teal rule
 * sits above the heading and the introduction follows directly beneath, at about 800px.
 */
.meet-aya {
	padding-block: calc(var(--mm-section) * 1.25) calc(var(--mm-section) * 1.5);
}

.meet-aya__inner {
	display: block;
}

.meet-aya__title {
	display: inline-block;
	margin: 0 0 16px;
	padding-top: 16px;
	border-top: 2px solid var(--mm-teal);
}

.meet-aya__body {
	max-width: 800px;
}

.meet-aya__body > :last-child {
	margin-bottom: 0;
}

@media (max-width: 39.99em) {
	.meet-aya {
		padding-block: var(--mm-section) calc(var(--mm-section) * 1.25);
	}

	.meet-aya__title {
		margin-bottom: 12px;
	}
}

/* Email invitation -------------------------------------------------------- */

.meet-aya + .signup {
	padding-top: 0;
}

.wash {
	position: relative;
	overflow: hidden;
	margin-inline: calc(-1 * var(--mm-gutter));
	padding: 32px var(--mm-gutter);
}

.wash > * {
	position: relative;
	z-index: 1;
}

.wash--moonlit {
	background: var(--mm-moonlit);
}

@media (min-width: 40em) {
	.wash {
		margin-inline: 0;
		padding: 40px;
		border-radius: 32px 120px 32px 32px;
	}
}

@media (min-width: 64em) {
	.wash {
		padding: 44px 56px 48px;
	}
}

.signup__panel h2 {
	max-width: 36rem;
	font-size: var(--mm-size-h3);
	line-height: 1.22;
}

.signup__panel p {
	max-width: 36rem;
}

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

@media (min-width: 60em) {
	/* Collector group illustration on the left; heading, text and action stacked beside it. */
	.signup__panel {
		display: grid;
		grid-template-columns: 280px minmax(0, 1fr);
		column-gap: 48px;
		align-items: center;
	}

	.signup__panel > * {
		grid-column: 2;
	}

	.signup__panel .illustration--signup {
		grid-column: 1;
		grid-row: 1 / span 3;
		margin: 0;
	}

	.signup__panel .signup__action {
		margin-top: 4px;
	}
}

/* Approved collector group artwork: on the Moonlit Blue panel, above the heading until 60em. */
.illustration--signup {
	width: 240px;
	margin: 0 0 20px;
}

@media (min-width: 40em) {
	.illustration--signup {
		width: 280px;
	}
}

/* 9. Components -------------------------------------------------------- */

/* Unboxed: spacing and photography group the content rather than repeated borders. */
.card,
.product-card {
	display: flex;
	flex-direction: column;
}

.card__media,
.product-card__media {
	overflow: hidden;
	border-radius: var(--mm-radius-image);
}

/* Neutral tile where no genuine photograph is available; never a substitute picture. */
.card__media--fallback {
	aspect-ratio: 1 / 1;
	background: var(--mm-sage-mist);
	border: 1px solid rgba(48, 50, 74, 0.08);
}

.card__media img,
.product-card__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.card__body,
.product-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 20px 0 0;
}

.card__title,
.product-card__title {
	margin-bottom: 8px;
}

.product-card__title {
	font-size: var(--mm-size-lead);
	line-height: 1.3;
}

.card__text {
	color: var(--mm-text-2);
}

.card__action,
.product-card__action {
	margin: auto 0 0;
}

.status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	font-size: var(--mm-size-small);
	font-weight: 700;
	line-height: 1.5;
}

.status--available {
	color: var(--mm-success);
}

.status--available::before {
	content: "";
	width: 8px;
	height: 8px;
	background: currentColor;
	border-radius: 50%;
}

.product-card__price {
	margin: 0 0 12px;
	font-size: var(--mm-size-body);
	font-weight: 700;
}

.product-card__specs {
	margin: 0 0 16px;
	font-size: var(--mm-size-small);
	line-height: 1.5;
	color: var(--mm-text-2);
}

.product-card__spec {
	display: flex;
	flex-wrap: wrap;
	gap: 0 6px;
}

.product-card__spec dt {
	font-weight: 700;
}

.product-card__spec dt::after {
	content: ":";
}

.product-card__spec dd {
	margin: 0;
}

/*
 * Process steps: numbered text only (the section's single illustration sits beside its
 * introduction). Small screens: one row per step; from 40em two columns, from 64em four.
 */
.process-steps {
	display: grid;
	gap: 16px var(--mm-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: mm-step;
}

.process-steps__item {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	align-items: start;
	column-gap: 12px;
	counter-increment: mm-step;
}

.process-steps__item::before {
	content: counter(mm-step);
	grid-row: 1;
	grid-column: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--mm-teal);
	font-family: var(--mm-font-display);
	font-size: 21px;
	font-weight: 500;
	border: 1.5px solid var(--mm-teal);
	border-radius: 50%;
}

.process-steps__text {
	grid-row: 1;
	grid-column: 2;
	margin: 0;
	padding-top: 8px;
	font-size: var(--mm-size-ui);
	line-height: 1.5;
}

@media (min-width: 40em) {
	.process-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px var(--mm-gap);
	}
}

@media (min-width: 64em) {
	.process-steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.process-steps__item + .process-steps__item {
		padding-left: var(--mm-gap);
		border-left: 1px solid rgba(48, 50, 74, 0.2);
	}
}

/*
 * How buying works: the approved delivery/checking illustration once, below the
 * introduction on small screens and beside it from 40em (HQ, 29 September 2026).
 */
.illustration--buying {
	width: 200px;
	margin: 8px 0 0;
}

@media (min-width: 40em) {
	.buying .section__intro {
		display: grid;
		max-width: none;
		grid-template-columns: minmax(0, 1fr) 240px;
		column-gap: 48px;
		align-items: center;
	}

	.buying .section__intro > * {
		grid-column: 1;
	}

	.buying .section__intro > h2 {
		align-self: end;
	}

	.buying .section__intro > .lead {
		align-self: start;
		margin-top: 0;
	}

	.buying .section__intro > .illustration--buying {
		grid-column: 2;
		grid-row: 1 / span 2;
		width: 240px;
		margin: 0;
	}
}

/* 9b. Shop archives ---------------------------------------------------- */

/*
 * Product archives (woocommerce/archive-product.php). A compact Moonlit Blue band holds the
 * breadcrumb, title and introduction so products start early; the Milk Paper body rises into
 * it with its own gentle wave. Selectors are scoped to the archive containers, which also
 * keeps them ahead of WooCommerce's default stylesheet where both style an element.
 */
.archive-hero {
	position: relative;
	isolation: isolate;
	padding-block: 20px 44px;
	background: var(--mm-moonlit);
}

.archive-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 40px;
	background: var(--mm-paper);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 28C220 8 460 6 700 20s500 22 740 0V48H0Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 28C220 8 460 6 700 20s500 22 740 0V48H0Z'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	pointer-events: none;
}

.archive-hero .woocommerce-breadcrumb {
	margin: 0 0 12px;
	padding: 0;
	color: var(--mm-text-2);
	font-size: var(--mm-size-small);
	line-height: 1.5;
}

.archive-hero .woocommerce-breadcrumb a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--mm-target);
	min-height: var(--mm-target);
	color: var(--mm-ink);
}

/*
 * Title and introduction set every property that global heading and paragraph rules from
 * plugins commonly change (for example Elementor Kit typography, `.elementor-kit-N h1`,
 * specificity 0,1,1), so a collapsed line height can never pull the title over the
 * introduction. The values are the approved ones.
 */
.archive-hero .archive-title {
	position: static;
	height: auto;
	margin: 0 0 8px;
	padding: 0;
	color: var(--mm-ink);
	font-family: var(--mm-font-display);
	font-size: clamp(34px, 30px + 1.2vw, 46px);
	font-style: normal;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-transform: none;
}

.archive-hero .term-description {
	max-width: 44rem;
	margin: 0;
	padding: 0;
	color: var(--mm-text-2);
	font-size: var(--mm-size-lead);
	line-height: 1.5;
}

.archive-hero .term-description p {
	margin: 0 0 1em;
	font-size: inherit;
	line-height: inherit;
}

.archive-hero .term-description > :last-child,
.archive-hero .term-description p:last-child {
	margin-bottom: 0;
}

.archive-body {
	padding-block: 20px var(--mm-section);
}

/* Toolbar: notices, result count and (where offered) WooCommerce's sort control. */
.archive-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(48, 50, 74, 0.15);
}

.archive-toolbar .woocommerce-notices-wrapper {
	flex-basis: 100%;
}

.archive-toolbar .woocommerce-notices-wrapper:empty {
	display: none;
}

.archive-toolbar .woocommerce-result-count {
	margin: 0;
	color: var(--mm-text-2);
	font-size: var(--mm-size-ui);
}

.archive-toolbar .woocommerce-ordering {
	margin: 0;
}

.archive-toolbar .woocommerce-ordering select {
	min-height: var(--mm-target);
	padding: 8px 36px 8px 14px;
	background: var(--mm-warm-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%2330324A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center / 18px;
	-webkit-appearance: none;
	appearance: none;
}

/* Product grid: 2 columns on phones, 3 on tablets, 4 on desktop. */
.product-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48em) {
	.product-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 36px 24px;
	}
}

@media (min-width: 64em) {
	.product-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 44px 28px;
	}
}

/*
 * Archive card. Cards in a row share one height (grid stretch) and the body grows to fill
 * it, so photographs line up at the top and "View photographs and details" lines up at
 * the bottom however long a title or how many attributes a product has. Nothing is clipped.
 */
.product-grid .product-card {
	position: relative;
	height: 100%;
}

.product-grid .product-card__media,
.product-grid .card__media--fallback {
	aspect-ratio: 1 / 1;
	background: var(--mm-warm-white);
	border-radius: var(--mm-radius-card);
}

.product-grid .card__media--fallback {
	background: var(--mm-sage-mist);
}

.product-grid .product-card__media img {
	height: 100%;
}

.product-grid .product-card__body {
	padding-top: 14px;
}

/* Card paragraphs restate their approved spacing so plugin paragraph rules (for example
   Kit `.elementor-kit-N p`, 0,1,1) cannot unpin the link from the bottom of the card. */
.product-grid .status {
	align-self: flex-start;
	margin: 0 0 8px;
	line-height: 1.5;
}

.product-grid .product-card__action {
	margin: auto 0 0;
	line-height: 1.65;
}

.product-grid .product-card__title {
	margin: 0 0 6px;
	font-family: var(--mm-font-body);
	font-size: var(--mm-size-body);
	font-weight: 600;
	line-height: 1.35;
}

.product-grid .product-card__price {
	margin: 0 0 8px;
	line-height: 1.65;
}

.product-grid .product-card__specs {
	margin-bottom: 12px;
}

/* The single link covers the card, so the whole card is clickable without a second link. */
.product-grid .product-card__link {
	min-height: var(--mm-target);
}

.product-grid .product-card__link::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--mm-radius-card);
}

.product-grid .product-card:hover .product-card__link {
	text-decoration-thickness: 2px;
}

/* Temporarily unavailable: an open ring beside the text. */
.status--unavailable {
	color: var(--mm-text-2);
}

.status--unavailable::before {
	content: "";
	width: 8px;
	height: 8px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
}

/* Adopted: a sold one-of-a-kind doll. Night Ink label; never a price. */
.status--adopted {
	padding: 2px 10px;
	background: var(--mm-ink);
	color: var(--mm-warm-white);
	border-radius: 999px;
}

/* Pagination: 44px targets; the current page is marked by aria-current and a filled pill. */
.archive-body .woocommerce-pagination {
	margin-top: 48px;
	text-align: left;
}

.archive-body .woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: normal;
	border: 0;
}

.archive-body .woocommerce-pagination ul.page-numbers li {
	float: none;
	margin: 0;
	border: 0;
}

.archive-body .woocommerce-pagination .page-numbers li > .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--mm-target);
	min-height: var(--mm-target);
	padding: 0 14px;
	background: transparent;
	color: var(--mm-ink);
	font-size: var(--mm-size-ui);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	border: 1px solid rgba(48, 50, 74, 0.35);
	border-radius: 999px;
}

.archive-body .woocommerce-pagination .page-numbers li > a.page-numbers:hover {
	background: transparent;
	border-color: var(--mm-teal);
	color: var(--mm-teal);
}

.archive-body .woocommerce-pagination .page-numbers li > .page-numbers.current {
	background: var(--mm-teal);
	border-color: var(--mm-teal);
	color: var(--mm-warm-white);
}

/* Empty Available dolls: the approved message and one route to past dolls. */
.archive-empty {
	max-width: 44rem;
}

.archive-empty__message {
	margin: 0 0 20px;
	padding: 18px 20px;
	background: var(--mm-warm-white);
	border-left: 3px solid var(--mm-teal);
	border-radius: var(--mm-radius-button);
}

.archive-empty__action {
	margin: 0;
}

/* Approved single-reborn artwork, shown only when no doll is available to photograph. */
.illustration--empty {
	width: 150px;
	margin: 0 0 20px;
}

@media (min-width: 40em) {
	.illustration--empty {
		width: 180px;
	}
}

@media (max-width: 47.99em) {
	.archive-hero {
		padding-block: 12px 36px;
	}

	.archive-hero .term-description {
		font-size: var(--mm-size-body);
	}

	.archive-toolbar {
		align-items: stretch;
	}

	.archive-toolbar .woocommerce-ordering,
	.archive-toolbar .woocommerce-ordering select {
		width: 100%;
	}

	.product-grid .product-card__title {
		font-size: var(--mm-size-ui);
	}

	.product-grid .product-card__action .text-link {
		font-size: var(--mm-size-small);
	}
}

@media (max-width: 39.99em) {
	.archive-hero::after {
		height: 22px;
	}
}

/* 9c. Product pages ---------------------------------------------------- */

/*
 * Single product pages (approved proofs 6-8). WooCommerce's own markup is styled in place;
 * selectors carry the product-page context so they also outrank WooCommerce's default
 * stylesheet (which loads first) where both style an element.
 */
.single-product .wc-content {
	padding-block: 12px var(--mm-section);
}

.single-product .wc-content > .woocommerce-breadcrumb {
	margin: 0 0 8px;
	padding: 0;
	color: var(--mm-text-2);
	font-size: var(--mm-size-small);
	line-height: 1.5;
}

.single-product .wc-content > .woocommerce-breadcrumb a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--mm-target);
	min-height: var(--mm-target);
	color: var(--mm-ink);
}

/* Gallery first (mobile), then the purchase decision; two columns from 60em. */
.woocommerce.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

.woocommerce.single-product div.product::before,
.woocommerce.single-product div.product::after {
	display: none;
}

@media (min-width: 60em) {
	.woocommerce.single-product div.product {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		column-gap: 56px;
	}
}

.woocommerce.single-product div.product div.summary {
	float: none;
	width: auto;
	margin: 0;
}

.woocommerce.single-product div.product > .product-details,
.woocommerce.single-product div.product > .up-sells {
	grid-column: 1 / -1;
}

/* Gallery ----------------------------------------------------------------- */

.product-gallery__main {
	position: relative;
	margin: 0;
}

.product-gallery__main.card__media--fallback {
	aspect-ratio: 1 / 1;
	border-radius: var(--mm-radius-card);
}

.product-gallery__enlarge {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--mm-warm-white);
	border-radius: var(--mm-radius-card);
	cursor: zoom-in;
}

/* The whole photograph is shown (evidence of the item), never cropped. */
.product-gallery__enlarge img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

/* A solid chip on the photo's own surface, never text on the photograph. */
.product-gallery__hint {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: var(--mm-target);
	padding: 0 14px;
	background: var(--mm-warm-white);
	color: var(--mm-ink);
	font-size: var(--mm-size-ui);
	font-weight: 600;
	border-radius: 999px;
	box-shadow: var(--mm-shadow);
}

.product-gallery__hint .icon {
	width: 20px;
	height: 20px;
}

.product-gallery__enlarge:hover .product-gallery__hint {
	background: var(--mm-sage-mist);
}

.product-gallery__caption {
	margin: 10px 0 0;
	color: var(--mm-text-2);
	font-size: var(--mm-size-small);
	line-height: 1.5;
}

.product-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	gap: 10px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 60em) {
	.product-gallery__thumbs {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.product-gallery__thumb {
	display: block;
	overflow: hidden;
	background: var(--mm-warm-white);
	border: 2px solid transparent;
	border-radius: var(--mm-radius-image);
}

.product-gallery__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.product-gallery__thumb[aria-current="true"] {
	border-color: var(--mm-teal);
}

.product-gallery__thumb:hover {
	border-color: var(--mm-ink);
}

/* Enlarged view: a native <dialog> on Night Ink with text controls. */
.lightbox {
	margin: 0;
	padding: 16px var(--mm-gutter) 20px;
	background: var(--mm-ink);
	color: var(--mm-warm-white);
	border: 0;
	--mm-focus: var(--mm-warm-white);
}

/* Beats the browser's own dialog:modal size limits so the controls stay on screen. */
.lightbox[open] {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	gap: 12px;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
}

.lightbox::backdrop {
	background: rgba(48, 50, 74, 0.9);
}

.lightbox__bar,
.lightbox__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	max-width: var(--mm-max);
	margin-inline: auto;
}

.lightbox__nav {
	justify-content: center;
}

.lightbox__count {
	margin: 0;
	font-size: var(--mm-size-ui);
	font-weight: 600;
}

.lightbox__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: var(--mm-target);
	min-height: var(--mm-target);
	padding: 8px 18px;
	background: transparent;
	color: var(--mm-warm-white);
	font: 600 var(--mm-size-ui) / 1 var(--mm-font-body);
	border: 1px solid var(--mm-sage);
	border-radius: 999px;
	cursor: pointer;
}

.lightbox__button:hover {
	background: var(--mm-warm-white);
	color: var(--mm-ink);
}

.lightbox__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 0;
	margin: 0;
	/* Horizontal swipes go to product.js (next / previous photo); vertical panning and pinch
	   zoom stay with the browser. */
	touch-action: pan-y pinch-zoom;
}

/* Leaves room for the top bar, caption and Previous/Next at every height. */
.lightbox__figure img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: calc(100vh - 190px);
	object-fit: contain;
	border-radius: var(--mm-radius-image);
}

/* 0.1.25: with its proportions and natural width known, the photo's box is fixed before it loads
   (it is downloaded only when the viewer opens), so nothing moves when it arrives. */
.lightbox__figure img[style*="--lb-ratio"] {
	width: min(100%, var(--lb-width), calc((100vh - 190px) * var(--lb-ratio)));
	aspect-ratio: var(--lb-ratio);
}

.lightbox__figure figcaption {
	font-size: var(--mm-size-small);
}

/* Summary ------------------------------------------------------------------ */

.woocommerce.single-product div.product .summary .status {
	margin: 0 0 10px;
}

.woocommerce.single-product div.product .summary .product_title {
	margin: 0 0 12px;
	font-size: clamp(32px, 28px + 1vw, 42px);
	line-height: 1.12;
}

.woocommerce.single-product div.product .summary p.price {
	margin: 0 0 16px;
	color: var(--mm-ink);
	font-size: var(--mm-size-h3);
	font-weight: 700;
	line-height: 1.3;
}

.single-product .woocommerce-product-details__short-description {
	max-width: 36rem;
	margin-bottom: 20px;
	color: var(--mm-text-2);
}

.single-product .woocommerce-product-details__short-description > :last-child {
	margin-bottom: 0;
}

/* Purchase panel: WooCommerce's own form. */
.woocommerce.single-product div.product form.cart {
	margin: 0 0 24px;
	padding: 20px;
	background: var(--mm-warm-white);
	border: 1px solid rgba(48, 50, 74, 0.12);
	border-radius: var(--mm-radius-card);
}

.woocommerce.single-product div.product form.cart::before,
.woocommerce.single-product div.product form.cart::after {
	display: none;
}

.woocommerce.single-product div.product form.cart:not(.variations_form),
.woocommerce.single-product div.product .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
}

.single-product form.cart .product-cart__single,
.single-product form.cart .product-cart__qty-label,
.single-product form.cart .product-cart__hint {
	flex-basis: 100%;
	margin: 0;
}

.single-product form.cart .product-cart__single,
.single-product form.cart .product-cart__qty-label {
	font-size: var(--mm-size-ui);
	font-weight: 600;
}

.single-product form.cart .product-cart__qty-label {
	margin-bottom: -6px;
}

.single-product form.cart .product-cart__hint {
	color: var(--mm-text-2);
	font-size: var(--mm-size-small);
}

.woocommerce.single-product div.product form.cart div.quantity {
	float: none;
	margin: 0;
}

.woocommerce.single-product div.product form.cart .quantity.hidden {
	display: none;
}

.woocommerce.single-product div.product form.cart .quantity .qty {
	width: 6.5rem;
	min-height: 48px;
	text-align: left;
}

.woocommerce.single-product div.product form.cart .single_add_to_cart_button.button {
	float: none;
	flex: 1 1 12rem;
	min-height: 48px;
	margin: 0;
	padding: 12px 24px;
	background: var(--mm-teal);
	color: var(--mm-warm-white);
	font-family: var(--mm-font-body);
	font-size: var(--mm-size-ui);
	font-weight: 600;
	line-height: 1.3;
	border: 2px solid var(--mm-teal);
	border-radius: 999px;
	opacity: 1;
}

.woocommerce.single-product div.product form.cart .single_add_to_cart_button.button:hover {
	background: var(--mm-ink);
	border-color: var(--mm-ink);
	color: var(--mm-warm-white);
}

/* A disabled button keeps 3:1 contrast; the hint beside it says why. */
.woocommerce.single-product div.product form.cart .single_add_to_cart_button.button.disabled {
	background: var(--mm-white);
	border-color: var(--mm-text-2);
	color: var(--mm-text-2);
	cursor: not-allowed;
	opacity: 1;
}

/* WooCommerce's variations table, laid out as labelled fields. */
.woocommerce.single-product div.product form.cart table.variations,
.woocommerce.single-product div.product form.cart table.variations tbody,
.woocommerce.single-product div.product form.cart table.variations tr,
.woocommerce.single-product div.product form.cart table.variations th,
.woocommerce.single-product div.product form.cart table.variations td {
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	line-height: 1.4;
	text-align: left;
	border: 0;
}

.woocommerce.single-product div.product form.cart table.variations tr {
	margin-bottom: 14px;
}

.woocommerce.single-product div.product form.cart table.variations label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
}

.woocommerce.single-product div.product form.cart table.variations select {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	min-height: 48px;
	margin: 0;
	padding-right: 40px;
	background: var(--mm-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%2330324A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 18px;
	-webkit-appearance: none;
	appearance: none;
}

.woocommerce.single-product div.product form.cart .reset_variations {
	display: inline-flex;
	align-items: center;
	min-width: var(--mm-target);
	min-height: var(--mm-target);
	margin-top: 4px;
	font-size: var(--mm-size-small);
	font-weight: 600;
}

.single-product .single_variation:empty {
	display: none;
}

/*
 * Variation states come from WooCommerce's own classes, so no theme script decides them:
 * - chosen option unavailable (button.wc-variation-is-unavailable): Quantity and Add to
 *   basket are removed; the message, the selector and the "ask Aya" link remain;
 * - any option chosen: the "choose" hint is hidden.
 */
.single-product .woocommerce-variation-add-to-cart:has(.wc-variation-is-unavailable) .product-cart__qty-label,
.single-product .woocommerce-variation-add-to-cart:has(.wc-variation-is-unavailable) .quantity,
.single-product .woocommerce-variation-add-to-cart:has(.wc-variation-is-unavailable) .single_add_to_cart_button,
.single-product .woocommerce-variation-add-to-cart:has(.wc-variation-is-unavailable) .product-cart__hint,
.single-product .woocommerce-variation-add-to-cart-enabled .product-cart__hint {
	display: none;
}

.woocommerce.single-product div.product .summary .stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	color: var(--mm-success);
	font-size: var(--mm-size-ui);
	font-weight: 600;
}

.woocommerce.single-product div.product .summary .stock.in-stock::before {
	content: "";
	width: 8px;
	height: 8px;
	background: currentColor;
	border-radius: 50%;
}

.woocommerce.single-product div.product .summary .stock.out-of-stock {
	display: block;
	padding: 12px 14px;
	background: var(--mm-paper);
	color: var(--mm-ink);
	font-weight: 400;
	border-left: 3px solid var(--mm-text-2);
	border-radius: var(--mm-radius-button);
}

.woocommerce.single-product div.product .summary .single_variation .stock {
	margin-bottom: 12px;
}

/* Reassurance: delivery, returns, a question for Aya. Short, below the purchase action. */
.product-assurance {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--mm-size-ui);
	border-top: 1px solid rgba(48, 50, 74, 0.12);
}

.product-assurance li {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: var(--mm-target);
	border-bottom: 1px solid rgba(48, 50, 74, 0.12);
}

.product-assurance .icon {
	flex: none;
	width: 22px;
	height: 22px;
	color: var(--mm-teal);
}

.product-assurance a {
	display: inline-flex;
	align-items: center;
	min-height: var(--mm-target);
	font-weight: 600;
}

/* Adopted doll: a clear statement in place of price and purchase. */
.product-adopted {
	margin: 0 0 20px;
	padding: 18px 20px;
	background: var(--mm-warm-white);
	border-left: 3px solid var(--mm-ink);
	border-radius: var(--mm-radius-button);
}

.product-adopted p {
	margin: 0 0 14px;
}

.product-adopted .product-adopted__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

/* Sections: WooCommerce's tabs as stacked, always-visible sections ---------- */

/* minmax(0, 1fr): no section (for example a review form's textarea) can widen the column. */
.product-details {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	max-width: 52rem;
	margin-top: 20px;
}

.product-section {
	padding-top: 24px;
	border-top: 1px solid var(--mm-line);
}

.product-section > h2,
.product-section .woocommerce-Reviews-title {
	margin: 0 0 14px;
	font-size: var(--mm-size-h3);
	line-height: 1.22;
}

.product-prose {
	max-width: var(--mm-reading);
}

.single-product .product-details table.shop_attributes {
	width: 100%;
	margin: 0 0 16px;
	border: 0;
	border-collapse: collapse;
}

.single-product .product-details table.shop_attributes th,
.single-product .product-details table.shop_attributes td {
	padding: 10px 0;
	background: none;
	font-style: normal;
	line-height: 1.5;
	text-align: left;
	vertical-align: top;
	border: 0;
	border-bottom: 1px solid rgba(48, 50, 74, 0.1);
}

.single-product .product-details table.shop_attributes th {
	width: 34%;
	padding-right: 20px;
	font-weight: 700;
}

.single-product .product-details table.shop_attributes td p {
	margin: 0;
	padding: 0;
}

.single-product #review_form #respond textarea {
	width: 100%;
}

.single-product #review_form #respond input#submit {
	min-height: 48px;
	padding: 12px 24px;
	background: var(--mm-teal);
	color: var(--mm-warm-white);
	font-weight: 600;
	border-radius: 999px;
}

@media (max-width: 39.99em) {
	.single-product .product-details table.shop_attributes th,
	.single-product .product-details table.shop_attributes td {
		display: block;
		width: auto;
		padding: 0;
		border: 0;
	}

	.single-product .product-details table.shop_attributes tr {
		display: block;
		padding: 10px 0;
		border-bottom: 1px solid rgba(48, 50, 74, 0.1);
	}
}

/* 9d. Basket, checkout and account ------------------------------------------- */

/*
 * WooCommerce's classic basket, checkout, order confirmation and My Account output (approved
 * proof 9), inside the Elementor Pro Cart and Checkout widgets on staging or on its own.
 * Rules target WooCommerce's own classes, which the widgets keep, and never change what the
 * checkout does. WooCommerce's stylesheets load first; where they style something with a more
 * specific selector, the theme repeats that selector so it wins by loading later. Form colours
 * come from WooCommerce's own custom properties, set in section 1. Values checked against
 * WooCommerce 11.1.2's woocommerce.css, woocommerce-layout.css and woocommerce-smallscreen.css.
 */

/* Page title: every property Elementor Kit typography (`.elementor-kit-N h1`, 0,1,1) could
   change, at the approved values, for Elementor-built pages that keep the Kit class. (The
   Basket, Checkout and My Account pages lose it: inc/elementor.php.) */
.page-header .page-title {
	position: static;
	margin: 0 0 0.5em;
	padding: 0;
	color: var(--mm-ink);
	font-family: var(--mm-font-display);
	font-size: var(--mm-size-h1);
	font-style: normal;
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.01em;
	text-transform: none;
}

.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-account .entry-content {
	max-width: none;
}

/* Notices (every WooCommerce page): quiet panels, no icon font. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice--success {
	width: auto;
	margin: 0 0 24px;
	padding: 14px 18px;
	list-style: none;
	background: var(--mm-white);
	color: var(--mm-ink);
	font-size: var(--mm-size-ui);
	line-height: 1.5;
	border: 1px solid var(--mm-rule);
	border-left: 6px solid var(--mm-teal);
	border-radius: 8px;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	content: none;
}

.woocommerce-message,
.woocommerce-notice--success {
	border-left-color: var(--mm-success);
}

.woocommerce-error {
	border-left-color: var(--mm-error);
}

/* A notice with a button (confirm email, empty states, added to basket): WooCommerce floats
   the button right, which squeezed the text into a narrow column on phones. The text comes
   first and the button follows it, on the same line when both fit. Only notices whose button
   is a direct child become flex, so inline links elsewhere keep their text flow. */
:is(.woocommerce-message, .woocommerce-info, .woocommerce-error):has(> .button) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
}

/* WooCommerce's clearfix would become an empty flex item. */
:is(.woocommerce-message, .woocommerce-info, .woocommerce-error):has(> .button)::after {
	content: none;
}

/* Second selector: matches woocommerce-layout.css's ".woocommerce .woocommerce-info .button". */
:is(.woocommerce-message, .woocommerce-info, .woocommerce-error) > .button,
:is(.woocommerce, .woocommerce-page) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) > .button {
	order: 1;
	float: none;
	margin: 0;
}

/* Links in notices ("Click here to login") keep a 44px target without changing line spacing. */
.woocommerce-info a:not(.button),
.woocommerce-message a:not(.button) {
	display: inline-block;
	margin-block: -10px;
	padding-block: 10px;
	font-weight: 600;
}

/* Checkout field errors: the summary from woocommerce/notices/error.php. */
.woocommerce-error.woocommerce-error-summary {
	margin: 0 0 32px;
	padding: 20px 24px;
	border: 2px solid var(--mm-error);
	border-left-width: 8px;
}

.woocommerce-error.woocommerce-error-summary:focus {
	outline: 3px solid var(--mm-focus);
	outline-offset: 3px;
}

.woocommerce-error-summary .woocommerce-error-summary__title {
	margin: 0 0 4px;
	color: var(--mm-ink);
	font-family: var(--mm-font-display);
	font-size: var(--mm-size-h3);
	font-weight: 500;
	line-height: 1.22;
	letter-spacing: -0.01em;
	text-transform: none;
}

.woocommerce-error-summary__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce .woocommerce-error.woocommerce-error-summary li a {
	display: inline-block;
	padding-block: 11px;
	color: var(--mm-error);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* WooCommerce's inline message beside each invalid checkout field. */
.woocommerce-checkout .checkout .checkout-inline-error-message {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 8px 0 0;
	color: var(--mm-error);
	font-size: var(--mm-size-ui);
	font-weight: 600;
	line-height: 1.4;
}

.woocommerce-checkout .checkout .checkout-inline-error-message::before {
	content: "!" / "";
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	background: var(--mm-error);
	color: var(--mm-white);
	font-size: 13px;
	font-weight: 700;
	border-radius: 50%;
}

/* Shared: form fields ----------------------------------------------------------------- */

.woocommerce form .form-row {
	margin: 0 0 20px;
	padding: 0;
}

.woocommerce form .form-row label {
	margin-bottom: 6px;
	color: var(--mm-ink);
	font-weight: 600;
	line-height: 1.4;
}

.woocommerce form .form-row.woocommerce-invalid label {
	color: var(--mm-ink);
}

.woocommerce form .form-row .input-text,
.woocommerce form .form-row select {
	min-height: 48px;
	padding: 10px 12px;
	font-size: var(--mm-size-ui);
}

.woocommerce form .form-row textarea {
	height: auto;
	min-height: 104px;
}

/* The theme field, one element more specific than WooCommerce's field rule (0,3,1), which
   generic form-field styles such as an Elementor Kit's (`.elementor-kit-N input:not(…)`,
   0,3,1) can tie with. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea.input-text {
	padding: 10px 12px;
	background-color: var(--wc-form-color-background);
	color: var(--wc-form-color-text);
	border: var(--wc-form-border-width) solid var(--wc-form-border-color);
	border-radius: var(--wc-form-border-radius);
}

/* WooCommerce hides the required asterisk; the checkout explains it, so it is shown. */
.woocommerce form .form-row .required {
	visibility: visible;
	color: var(--mm-error);
	text-decoration: none;
}

.woocommerce form .form-row .optional {
	color: var(--mm-text-2);
	font-weight: 400;
}

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
	border-width: 2px;
	border-color: var(--mm-error);
}

/* Side-by-side rows are laid out by the field grids below, not by floats. */
.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
	float: none;
	width: auto;
}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 20px;
}

@media (min-width: 40em) {
	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper,
	.woocommerce-address-fields__field-wrapper {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.woocommerce-billing-fields__field-wrapper > :not(.form-row-first):not(.form-row-last),
	.woocommerce-shipping-fields__field-wrapper > :not(.form-row-first):not(.form-row-last),
	.woocommerce-address-fields__field-wrapper > :not(.form-row-first):not(.form-row-last) {
		grid-column: 1 / -1;
	}
}

/* Checkbox labels: the box to the left, the text (and any required marker) as one line. */
.woocommerce form .form-row label.woocommerce-form__label-for-checkbox,
.woocommerce form label.woocommerce-form__label-for-checkbox {
	position: relative;
	display: block;
	min-height: var(--mm-target);
	margin: 0;
	padding: 10px 0 10px 34px;
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
}

.woocommerce form .form-row label.woocommerce-form__label-for-checkbox > input,
.woocommerce form label.woocommerce-form__label-for-checkbox > input {
	position: absolute;
	top: 11px;
	left: 0;
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--mm-teal);
}

.woocommerce input[type="radio"],
.woocommerce input[type="checkbox"] {
	accent-color: var(--mm-teal);
}

/* Password fields: WooCommerce's show-password button, at a 44px target. */
.woocommerce form .password-input {
	display: block;
}

.woocommerce form .password-input input[type="password"],
.woocommerce form .password-input input[type="text"] {
	padding-right: 52px;
}

.woocommerce form .show-password-input {
	top: 2px;
	right: 2px;
	width: var(--mm-target);
	height: var(--mm-target);
	border-radius: 6px;
}

/* Buttons on these pages take the theme button (WooCommerce: 0,2,1; .alt 0,3,1; disabled up
   to 0,5,1). Scoped to the basket, checkout and account pages, so product-page buttons are
   unchanged. */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce a.button,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce button.button,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce input.button,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce a.button.alt,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce button.button.alt,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce input.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin: 0;
	padding: 10px 22px;
	background: var(--mm-teal);
	color: var(--mm-warm-white);
	font-family: var(--mm-font-body);
	font-size: var(--mm-size-ui);
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	border: 2px solid var(--mm-teal);
	border-radius: 999px;
	box-shadow: none;
	text-shadow: none;
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce a.button:hover,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce button.button:hover,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce input.button:hover,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce a.button.alt:hover,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce button.button.alt:hover,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce input.button.alt:hover {
	background: var(--mm-ink);
	color: var(--mm-warm-white);
	border-color: var(--mm-ink);
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce button.button:disabled,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce button.button:disabled[disabled],
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce button.button:disabled:hover,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce button.button:disabled[disabled]:hover,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce button.button.alt:disabled,
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce button.button.alt:disabled[disabled],
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce button.button.alt:disabled[disabled]:hover {
	padding: 10px 22px;
	background: transparent;
	color: var(--mm-teal);
	border-color: var(--mm-teal);
	opacity: 0.5;
	cursor: not-allowed;
}

/* Secondary actions: coupon, Update basket. */
.woocommerce-cart #content .woocommerce table.cart td.actions .button,
.woocommerce form.checkout_coupon .button {
	background: transparent;
	color: var(--mm-teal);
}

.woocommerce-cart #content .woocommerce table.cart td.actions .button:not(:disabled):hover,
.woocommerce form.checkout_coupon .button:hover {
	background: var(--mm-warm-white);
	color: var(--mm-ink);
	border-color: var(--mm-ink);
}

/* Delivery information and Returns and refunds (inc/checkout.php). */
.woocommerce .purchase-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 24px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce .purchase-links a {
	display: inline-flex;
	align-items: center;
	min-height: var(--mm-target);
	color: var(--mm-teal);
	font-size: var(--mm-size-ui);
	font-weight: 600;
}

/* Tables: totals, order review and order details --------------------------------------- */

.woocommerce table.shop_table {
	margin: 0;
	font-size: var(--mm-size-ui);
	border: 0;
	border-radius: 0;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 12px 0;
	line-height: 1.5;
	border-top-color: var(--mm-rule);
}

.woocommerce table.shop_table thead th {
	padding-top: 0;
	color: var(--mm-text-2);
	font-size: var(--mm-size-small);
}

.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tbody th {
	border-top-color: var(--mm-rule);
}

.woocommerce .cart_totals table.shop_table td,
.woocommerce table.woocommerce-checkout-review-order-table td:last-child,
.woocommerce table.woocommerce-checkout-review-order-table th:last-child,
.woocommerce table.woocommerce-table--order-details td:last-child,
.woocommerce table.woocommerce-table--order-details th:last-child {
	padding-left: 16px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.woocommerce-cart .cart-collaterals .cart_totals tr td,
.woocommerce-cart .cart-collaterals .cart_totals tr th {
	border-top-color: var(--mm-rule);
}

.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td,
.woocommerce table.woocommerce-checkout-review-order-table .order-total th,
.woocommerce table.woocommerce-checkout-review-order-table .order-total td,
.woocommerce table.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce table.woocommerce-table--order-details tfoot tr:last-child td {
	padding-top: 16px;
	color: var(--mm-ink);
	font-family: var(--mm-font-display);
	font-size: var(--mm-size-h3);
	font-weight: 600;
	line-height: 1.2;
}

.woocommerce strong.product-quantity {
	color: var(--mm-text-2);
	font-weight: 600;
	white-space: nowrap;
}

.woocommerce ul#shipping_method li label {
	font-weight: 400;
}

.woocommerce-cart .cart-collaterals .shipping-calculator-button {
	display: inline-flex;
	align-items: center;
	min-height: var(--mm-target);
	margin-top: 0;
	font-weight: 600;
}

/* Panels ------------------------------------------------------------------------------ */

.woocommerce-cart .woocommerce .cart_totals,
.woocommerce-checkout #customer_details,
.woocommerce-checkout .e-checkout__column-end,
.woocommerce-checkout form.checkout:not(:has(.e-checkout__container)) #order_review,
.woocommerce .woocommerce-order-details,
.woocommerce .woocommerce-customer-details .woocommerce-column,
.woocommerce #customer_login > .u-column1,
.woocommerce #customer_login > .u-column2 {
	padding: 20px;
	background: var(--mm-white);
	border: 1px solid var(--mm-rule);
	border-radius: var(--mm-radius-card);
}

@media (min-width: 40em) {
	.woocommerce-cart .woocommerce .cart_totals,
	.woocommerce-checkout #customer_details,
	.woocommerce-checkout .e-checkout__column-end,
	.woocommerce-checkout form.checkout:not(:has(.e-checkout__container)) #order_review,
	.woocommerce .woocommerce-order-details,
	.woocommerce .woocommerce-customer-details .woocommerce-column,
	.woocommerce #customer_login > .u-column1,
	.woocommerce #customer_login > .u-column2 {
		padding: 28px 32px;
	}
}

/*
 * Checkout on narrow screens (0.1.32). The Elementor Checkout widget sits inside an Elementor
 * container with its own padding and a widget margin (page settings), both on top of the theme
 * gutter and the panel padding above. On phones those extra insets left the form a 159px column
 * at 320px, and the reCAPTCHA checkbox (a fixed 304 x 78 iframe from reCAPTCHA for WooCommerce)
 * overflowed the viewport, so the page scrolled sideways. Checkout only; nothing is clipped or hidden.
 */
@media (max-width: 39.99em) {
	.woocommerce-checkout .elementor .e-con.e-con:has(.elementor-widget-woocommerce-checkout-page) {
		--padding-left: 0px;
		--padding-right: 0px;
		padding-inline: 0;
	}

	.woocommerce-checkout .elementor .elementor-element.elementor-widget-woocommerce-checkout-page > .elementor-widget-container {
		margin-inline: 0;
	}
}

/* Below 359px the panel is narrower than the full-size widget: centre the reCAPTCHA row on the
   column so it uses the panel padding and theme gutter instead of pushing past the viewport. */
@media (max-width: 22.4375em) {
	.woocommerce-checkout .e-checkout__column-end .g-recaptcha {
		width: 304px;
		margin-inline-start: calc(50% - 152px);
	}
}

.woocommerce-cart .woocommerce .cart_totals h2,
.woocommerce-checkout .woocommerce h3,
.woocommerce .woocommerce-order-details__title,
.woocommerce .woocommerce-column__title,
.woocommerce #customer_login h2 {
	margin: 0 0 16px;
	color: var(--mm-ink);
	font-family: var(--mm-font-display);
	font-size: var(--mm-size-h3);
	font-weight: 500;
	line-height: 1.22;
	letter-spacing: -0.01em;
	text-transform: none;
}

/* WooCommerce's floated two-column sets become normal flow; the layouts below use grid. */
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-1,
.woocommerce-page .col2-set .col-2 {
	float: none;
	width: auto;
}

/* Basket ------------------------------------------------------------------------------ */

.woocommerce-cart .woocommerce .e-cart__container {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

@media (min-width: 64em) {
	.woocommerce-cart .woocommerce .e-cart__container {
		grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
		gap: 32px;
		align-items: start;
	}

	/* The same arrangement when the basket is not inside the Elementor Cart widget. */
	.woocommerce-cart .entry-content > .woocommerce:has(> .woocommerce-cart-form) {
		display: grid;
		grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
		column-gap: 32px;
		align-items: start;
	}

	.woocommerce-cart .entry-content > .woocommerce:has(> .woocommerce-cart-form) > :not(.woocommerce-cart-form):not(.cart-collaterals) {
		grid-column: 1 / -1;
	}
}

.woocommerce-cart .woocommerce .cart-collaterals .cart_totals,
.woocommerce-cart .woocommerce .cart-collaterals .cross-sells {
	float: none;
	width: auto;
}

.woocommerce-cart .woocommerce-cart-form {
	margin: 0;
}

.woocommerce-cart #content .woocommerce table.cart {
	overflow: hidden;
	background: var(--mm-white);
	border: 1px solid var(--mm-rule);
	border-radius: var(--mm-radius-card);
}

.woocommerce-cart #content .woocommerce table.cart th {
	padding: 14px 16px;
	color: var(--mm-text-2);
	font-size: var(--mm-size-small);
	font-weight: 700;
}

.woocommerce-cart #content .woocommerce table.cart td {
	padding: 16px;
	vertical-align: middle;
}

.woocommerce-cart #content .woocommerce table.cart .product-remove,
.woocommerce-cart #content .woocommerce table.cart .product-thumbnail {
	width: 1%;
}

.woocommerce-cart #content .woocommerce table.cart .product-remove {
	padding-right: 0;
}

.woocommerce-cart #content .woocommerce table.cart .product-thumbnail img {
	display: block;
	width: 88px;
	max-width: none;
	height: 88px;
	object-fit: cover;
	border-radius: var(--mm-radius-image);
}

/* Product links keep a 44px target without changing the row height. */
.woocommerce-cart #content .woocommerce table.cart .product-name a,
.woocommerce .woocommerce-table--order-details .product-name a {
	display: inline-block;
	margin-block: -10px;
	padding-block: 10px;
	color: var(--mm-ink);
	font-weight: 600;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.woocommerce-cart #content .woocommerce table.cart .product-price,
.woocommerce-cart #content .woocommerce table.cart .product-subtotal {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.woocommerce-cart #content .woocommerce table.cart .product-subtotal {
	font-weight: 700;
	text-align: right;
}

/* Remove: a 44px round button. WooCommerce sets its colour with !important, so the theme's
   colour needs it too. */
.woocommerce-cart #content .woocommerce table.cart a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--mm-target);
	height: var(--mm-target);
	background: transparent;
	color: var(--mm-ink) !important;
	font-size: 26px;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	border: 1px solid rgba(48, 50, 74, 0.35);
	border-radius: 50%;
}

.woocommerce-cart #content .woocommerce table.cart a.remove:hover {
	background: transparent;
	color: var(--mm-error) !important;
	border-color: var(--mm-error);
}

.woocommerce-cart #content .woocommerce table.cart .quantity .qty {
	width: 88px;
	min-height: 48px;
	padding: 10px 8px;
	text-align: center;
}

/* Dolls (sold individually): "1 · One of a kind" (inc/checkout.php). */
.woocommerce .cart-single {
	display: inline-flex;
	flex-direction: column;
	font-weight: 700;
	line-height: 1.3;
}

.woocommerce .cart-single__note {
	color: var(--mm-text-2);
	font-size: var(--mm-size-small);
	font-weight: 400;
}

.woocommerce-cart #content .woocommerce table.cart td.actions {
	padding: 16px;
	text-align: right;
}

.woocommerce-cart #content .woocommerce table.cart td.actions .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	float: left;
}

.woocommerce-cart #content .woocommerce table.cart td.actions .coupon .input-text {
	width: 13rem;
	min-height: 48px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--mm-text-2);
	border-radius: var(--mm-radius-button);
}

/* WooCommerce removes the coupon field's outline; keyboard focus stays visible. */
.woocommerce-cart #content .woocommerce table.cart td.actions .coupon .input-text:focus-visible {
	outline: 3px solid var(--mm-focus);
	outline-offset: 2px;
}

/* Phone and small tablet, up to 768px like WooCommerce's small-screen stylesheet (whose rules
   include #content, the theme's main element, so the basket rules do too): each item is a
   small card with its price, quantity and subtotal labelled. */
@media (max-width: 48em) {
	.woocommerce-cart #content .woocommerce table.cart tr.cart_item {
		position: relative;
		display: grid;
		grid-template-columns: 72px minmax(0, 1fr);
		column-gap: 16px;
		padding: 16px;
		border-top: 1px solid var(--mm-rule);
	}

	.woocommerce-cart #content .woocommerce table.cart tr.cart_item:first-child {
		border-top: 0;
	}

	.woocommerce-cart #content .woocommerce table.cart tr.cart_item td {
		grid-column: 2;
		padding: 4px 0;
		background: transparent;
		border: 0;
	}

	.woocommerce-cart #content .woocommerce table.cart tr.cart_item td.product-thumbnail {
		display: block;
		grid-column: 1;
		grid-row: 1 / span 4;
		width: auto;
		padding: 0;
	}

	.woocommerce-cart #content .woocommerce table.cart .product-thumbnail img {
		width: 72px;
		height: 72px;
	}

	.woocommerce-cart #content .woocommerce table.cart tr.cart_item td.product-remove {
		position: absolute;
		top: 12px;
		right: 12px;
		width: auto;
		padding: 0;
	}

	/* WooCommerce's small-screen stylesheet right-aligns every cell with !important. */
	.woocommerce-cart #content .woocommerce table.cart tr.cart_item td.product-name {
		padding: 0 56px 8px 0;
		text-align: left !important;
	}

	/* WooCommerce labels every cell (`attr(data-title) ": "`); name, photo and Remove need none. */
	.woocommerce-cart #content .woocommerce table.cart tr.cart_item td.product-name::before,
	.woocommerce-cart #content .woocommerce table.cart tr.cart_item td:not([data-title])::before {
		display: none;
	}

	.woocommerce-cart #content .woocommerce table.cart tr.cart_item td[data-title]:not(.product-name) {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		min-height: 36px;
	}

	.woocommerce-cart #content .woocommerce table.cart tr.cart_item td[data-title]:not(.product-name)::before {
		content: attr(data-title);
		float: none;
		color: var(--mm-text-2);
		font-weight: 600;
		text-align: left;
	}

	.woocommerce-cart #content .woocommerce table.cart tr.cart_item td.product-quantity {
		min-height: 56px;
	}

	.woocommerce-cart .woocommerce .cart-single {
		align-items: flex-end;
	}

	.woocommerce-cart #content .woocommerce table.cart td.actions {
		display: block;
		background: transparent;
		border-top: 1px solid var(--mm-rule);
	}

	/* WooCommerce's clearfix pseudo-elements would become grid items. */
	.woocommerce-cart #content .woocommerce table.cart td.actions .coupon::before,
	.woocommerce-cart #content .woocommerce table.cart td.actions .coupon::after {
		content: none;
	}

	.woocommerce-cart #content .woocommerce table.cart td.actions .coupon {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		float: none;
		margin-bottom: 12px;
		padding: 0;
	}

	.woocommerce-cart #content .woocommerce table.cart td.actions .coupon .input-text,
	.woocommerce-cart #content .woocommerce table.cart td.actions .coupon .button {
		width: auto;
		float: none;
	}

	.woocommerce-cart #content .woocommerce table.cart td.actions > .button {
		width: 100%;
	}

	/* Basket totals keep WooCommerce's labelled rows, without its striping. */
	.woocommerce .cart_totals table.shop_table_responsive tr:nth-child(2n) td {
		background: transparent;
	}

	.woocommerce .cart_totals table.shop_table_responsive tr td::before {
		color: var(--mm-ink);
		font-weight: 600;
	}
}

.woocommerce-cart .wc-proceed-to-checkout {
	padding: 16px 0 0;
}

.woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button.button {
	display: flex;
	width: 100%;
	min-height: 56px;
	margin: 0;
	padding: 12px 22px;
	font-size: var(--mm-size-lead);
}

/* Empty basket: WooCommerce's message and Return to shop, then "Browse the shop". */
.woocommerce .wc-empty-cart-message .cart-empty {
	padding: 18px 22px;
	font-size: var(--mm-size-lead);
}

.woocommerce .return-to-shop {
	margin: 0 0 40px;
}

.cart-browse .cart-browse__title {
	margin: 0 0 16px;
	color: var(--mm-ink);
	font-family: var(--mm-font-display);
	font-size: var(--mm-size-h3);
	font-weight: 500;
	line-height: 1.22;
	letter-spacing: -0.01em;
	text-transform: none;
}

.cart-browse__list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cart-browse .button--secondary {
	background: transparent;
	color: var(--mm-teal);
	border-color: var(--mm-teal);
}

.cart-browse .button--secondary:hover {
	background: var(--mm-warm-white);
	color: var(--mm-ink);
	border-color: var(--mm-ink);
}

/* Checkout ---------------------------------------------------------------------------- */

.woocommerce-checkout .woocommerce .e-checkout__container {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

@media (min-width: 64em) {
	.woocommerce-checkout .woocommerce .e-checkout__container {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: 32px;
		align-items: start;
	}
}

.woocommerce-checkout .woocommerce form.checkout {
	margin: 0;
}

.woocommerce-checkout .checkout-required-note {
	margin: 0 0 16px;
	color: var(--mm-text-2);
	font-size: var(--mm-size-ui);
}

.checkout-required-note__marker {
	color: var(--mm-error);
	font-weight: 700;
}

.woocommerce-checkout #customer_details {
	margin-bottom: 24px;
}

.woocommerce-checkout .e-checkout__container #customer_details {
	margin-bottom: 0;
}

.woocommerce-checkout #customer_details .col-2 {
	margin-top: 8px;
	padding-top: 20px;
	border-top: 1px solid var(--mm-rule);
}

.woocommerce-checkout .checkout #ship-to-different-address {
	float: none;
	margin: 0 0 12px;
	font-family: var(--mm-font-body);
	font-size: var(--mm-size-ui);
	font-weight: 600;
	letter-spacing: 0;
}

.woocommerce-checkout .woocommerce-account-fields {
	margin: -4px 0 20px;
}

.woocommerce-checkout .woocommerce-account-fields .form-row,
.woocommerce-checkout .woocommerce-additional-fields .form-row:last-child {
	margin-bottom: 0;
}

/* Returning customer and coupon: WooCommerce's forms, opened from their notices. */
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon {
	margin: 0 0 24px;
	padding: 20px;
	background: var(--mm-white);
	border: 1px solid var(--mm-rule);
	border-radius: var(--mm-radius-card);
}

.woocommerce form.login > p:first-child {
	margin-top: 0;
	font-size: var(--mm-size-ui);
}

.woocommerce form.login .form-row:has(.woocommerce-form-login__submit) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
}

.woocommerce form.login .form-row:has(.woocommerce-form-login__submit)::before,
.woocommerce form.login .form-row:has(.woocommerce-form-login__submit)::after {
	content: none;
}

.woocommerce .woocommerce-form-login .woocommerce-form-login__submit {
	float: none;
	min-width: 10rem;
	margin: 0;
}

.woocommerce .lost_password {
	margin: 0;
}

.woocommerce .lost_password a {
	display: inline-flex;
	align-items: center;
	min-height: var(--mm-target);
	font-size: var(--mm-size-ui);
	font-weight: 600;
}

/* Payment: WooCommerce's list of methods (0,x with #payment), each a selectable option. */
.woocommerce-checkout #payment {
	margin-top: 24px;
	background: transparent;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	display: grid;
	gap: 12px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	border: 0;
}

.woocommerce-checkout #payment ul.payment_methods::before,
.woocommerce-checkout #payment ul.payment_methods::after,
.woocommerce-checkout #payment ul.payment_methods li:not(.woocommerce-notice)::before,
.woocommerce-checkout #payment ul.payment_methods li:not(.woocommerce-notice)::after {
	content: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: 12px;
	margin: 0;
	padding: 0 16px;
	line-height: 1.5;
	border: 1px solid rgba(48, 50, 74, 0.35);
	border-radius: 8px;
}

.woocommerce-checkout #payment ul.payment_methods li:has(> input:checked) {
	padding: 0 15px;
	background: var(--mm-warm-white);
	border: 2px solid var(--mm-teal);
}

.woocommerce-checkout #payment ul.payment_methods li > input {
	width: 22px;
	height: 22px;
	margin: 0;
}

.woocommerce-checkout #payment ul.payment_methods li > label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	min-height: 56px;
	font-weight: 600;
	cursor: pointer;
}

.woocommerce-checkout #payment div.payment_box {
	grid-column: 1 / -1;
	margin: 0 0 12px;
	padding: 0;
	background: transparent;
	color: var(--mm-ink);
	font-size: var(--mm-size-ui);
}

.woocommerce-checkout #payment div.payment_box::before {
	content: none;
}

/* Payment plugins often group their fields in fieldsets; no browser frame around them. */
.woocommerce-checkout #payment div.payment_box fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.woocommerce-checkout #payment div.form-row {
	padding: 0;
}

.woocommerce form .form-row.woocommerce-SavedPaymentMethods-saveNew {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 4px 0 0;
}

.woocommerce form .form-row.woocommerce-SavedPaymentMethods-saveNew::before,
.woocommerce form .form-row.woocommerce-SavedPaymentMethods-saveNew::after {
	content: none;
}

.woocommerce form .form-row.woocommerce-SavedPaymentMethods-saveNew label {
	display: flex;
	align-items: center;
	min-height: var(--mm-target);
	margin: 0;
	font-weight: 400;
}

.woocommerce .woocommerce-privacy-policy-text p {
	margin: 0 0 12px;
	color: var(--mm-text-2);
	font-size: var(--mm-size-ui);
	line-height: 1.5;
}

.woocommerce .woocommerce-terms-and-conditions-wrapper .form-row {
	margin-bottom: 4px;
}

.woocommerce .woocommerce-terms-and-conditions-checkbox-text {
	font-weight: 600;
}

.woocommerce #payment .purchase-links {
	margin: 0 0 8px;
}

.woocommerce #payment #place_order {
	float: none;
	width: 100%;
	min-height: 56px;
	margin: 8px 0 0;
	font-size: var(--mm-size-lead);
}

/* Order received ---------------------------------------------------------------------- */

.woocommerce .woocommerce-thankyou-order-received {
	margin: 0 0 24px;
	padding: 18px 22px;
	font-size: var(--mm-size-lead);
	font-weight: 600;
}

.woocommerce ul.order_details.woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 1px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
	overflow: hidden;
	background: var(--mm-rule);
	border: 1px solid var(--mm-rule);
	border-radius: var(--mm-radius-card);
}

.woocommerce ul.order_details.woocommerce-order-overview::before,
.woocommerce ul.order_details.woocommerce-order-overview::after {
	content: none;
}

.woocommerce ul.order_details.woocommerce-order-overview li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	float: none;
	margin: 0;
	padding: 16px 20px;
	background: var(--mm-white);
	color: var(--mm-text-2);
	font-size: var(--mm-size-small);
	font-weight: 600;
	line-height: 1.4;
	text-transform: none;
	border: 0;
}

.woocommerce ul.order_details.woocommerce-order-overview li strong {
	color: var(--mm-ink);
	font-size: var(--mm-size-ui);
	font-weight: 700;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.woocommerce .woocommerce-order-details {
	margin-bottom: 24px;
}

.woocommerce .woocommerce-customer-details .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

.woocommerce .woocommerce-customer-details .woocommerce-columns--addresses::before,
.woocommerce .woocommerce-customer-details .woocommerce-columns--addresses::after {
	content: none;
}

@media (min-width: 40em) {
	.woocommerce .woocommerce-customer-details .woocommerce-columns--addresses {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.woocommerce .woocommerce-customer-details address {
	padding: 0;
	font-size: var(--mm-size-ui);
	font-style: normal;
	line-height: 1.6;
	border: 0;
}

.woocommerce .woocommerce-customer-details address p {
	margin: 8px 0 0;
}

/* My Account -------------------------------------------------------------------------- */

.woocommerce #customer_login {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

.woocommerce #customer_login::before,
.woocommerce #customer_login::after {
	content: none;
}

@media (min-width: 48em) {
	.woocommerce #customer_login {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}
}

/* The columns are the panels, so the forms inside them are plain. */
.woocommerce #customer_login form.login,
.woocommerce #customer_login form.register {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.woocommerce #customer_login form .form-row:last-child {
	margin-bottom: 0;
}

.woocommerce .woocommerce-form-register > p:not(.form-row) {
	font-size: var(--mm-size-ui);
}

.woocommerce-account .entry-content > .woocommerce:has(> .woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

/* WooCommerce's clearfix pseudo-elements would become grid items. */
.woocommerce-account .entry-content > .woocommerce:has(> .woocommerce-MyAccount-navigation)::before,
.woocommerce-account .entry-content > .woocommerce:has(> .woocommerce-MyAccount-navigation)::after {
	content: none;
}

@media (min-width: 64em) {
	.woocommerce-account .entry-content > .woocommerce:has(> .woocommerce-MyAccount-navigation) {
		grid-template-columns: 17.5rem minmax(0, 1fr);
		gap: 40px;
		align-items: start;
	}
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation {
	padding: 8px;
	background: var(--mm-white);
	border: 1px solid var(--mm-rule);
	border-radius: var(--mm-radius-card);
}

.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Every account page stays visible; no dropdown at any width. */
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation a {
	display: flex;
	align-items: center;
	min-height: var(--mm-target);
	padding: 8px 16px;
	color: var(--mm-ink);
	font-size: var(--mm-size-ui);
	font-weight: 600;
	text-decoration: none;
	border: 1px solid rgba(48, 50, 74, 0.3);
	border-radius: 999px;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation a:hover {
	background: var(--mm-sage-mist);
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation .is-active a,
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation a[aria-current="page"] {
	background: var(--mm-teal);
	color: var(--mm-warm-white);
	border-color: var(--mm-teal);
}

@media (min-width: 64em) {
	.woocommerce-MyAccount-navigation ul {
		display: grid;
		gap: 2px;
	}

	.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation a {
		min-height: 48px;
		border: 0;
		border-radius: 8px;
	}

	.woocommerce-MyAccount-navigation-link--customer-logout {
		margin-top: 6px;
		padding-top: 6px;
		border-top: 1px solid var(--mm-rule);
	}
}

.woocommerce-account .woocommerce-MyAccount-content {
	max-width: var(--mm-reading);
}

.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type {
	margin-top: 0;
}

/* 9e. Elementor Cart and Checkout widgets ------------------------------------- */

/*
 * The staging Basket and Checkout are Elementor Pro Cart and Checkout widgets with styles saved
 * on them (Cormorant Infant, Lora and Kit typography; 30px corners; Kit colour variables for the
 * Proceed to checkout and Place order backgrounds, empty on these pages; a mauve hover and a
 * shadow). Elementor's saved and base widget selectors are more specific than section 9d
 * (up to 2,4,0), so these rules restate the approved values inside the theme's main element
 * (#content) and only within the two widgets. Nothing here reaches other Elementor content.
 * The widgets, their saved settings and their wording are left as they are.
 */

/* Elementor's own widget variables, at theme values. Its panels become invisible: the theme's
   panels (section 9d) are the only ones. */
#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page),
#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page) :is(.woocommerce-cart-form, .e-cart-totals, .e-coupon-box, .e-woocommerce-coupon-nudge, .e-checkout__order_review, .woocommerce-checkout-payment, .woocommerce-terms-and-conditions-wrapper) {
	--sections-background-color: transparent;
	--sections-border-type: none;
	--sections-border-color: transparent;
	--sections-border-radius: 0;
	--sections-padding: 0;
	--sections-margin: 0 0 24px;
	--sections-title-color: var(--mm-ink);
	--sections-secondary-title-color: var(--mm-ink);
	--sections-descriptions-color: var(--mm-text-2);
	--sections-messages-color: var(--mm-ink);
	--sections-checkboxes-color: var(--mm-teal);
	--sections-radio-buttons-color: var(--mm-teal);
	--links-normal-color: var(--mm-teal);
	--links-hover-color: var(--mm-ink);
	--forms-labels-color: var(--mm-ink);
	--forms-fields-normal-color: var(--mm-ink);
	--forms-fields-focus-color: var(--mm-ink);
	--forms-fields-border-radius: var(--mm-radius-button);
	--forms-fields-padding: 10px 12px;
	--forms-buttons-border-radius: 999px;
	--forms-buttons-border-color: var(--mm-teal);
	--forms-buttons-normal-text-color: var(--mm-teal);
	--forms-buttons-hover-text-color: var(--mm-ink);
	--forms-buttons-hover-border-color: var(--mm-ink);
	--forms-buttons-hover-background-color: var(--mm-warm-white);
	--checkout-button-border-radius: 999px;
	--checkout-button-normal-text-color: var(--mm-warm-white);
	--checkout-button-hover-text-color: var(--mm-warm-white);
	--checkout-button-hover-border-color: var(--mm-ink);
	--purchase-button-border-radius: 999px;
	--purchase-button-normal-text-color: var(--mm-warm-white);
	--purchase-button-hover-text-color: var(--mm-warm-white);
	--purchase-button-hover-border-color: var(--mm-ink);
	--purchase-button-width: 100%;
	--order-summary-color: var(--mm-ink);
	--order-summary-title-color: var(--mm-ink);
	--order-summary-items-color: var(--mm-ink);
	--order-summary-totals-color: var(--mm-ink);
	--order-summary-variations-color: var(--mm-text-2);
	--order-summary-remove-icon-normal-color: var(--mm-ink);
	--totals-color: var(--mm-ink);
	--totals-divider-color: var(--mm-rule);
}

#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page) {
	background-color: transparent;
	color: var(--mm-ink);
	font-family: var(--mm-font-body);
	font-size: var(--mm-size-ui);
	font-weight: 400;
	line-height: 1.5;
}

/* Type: the widgets' saved fonts give way to the theme's (1,1,0: above any class-only saved
   rule, below the theme's own heading rules). Icon fonts are left alone. */
#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page) *:where(:not(i):not([class*="icon"])),
#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page) ::placeholder,
#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page) td::before {
	font-family: inherit;
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
}

#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page) :is(td, li, p, label, .e-cart-content, .e-description, .e-checkout-message, .e-checkout-secondary-title, .e-coupon-anchor-description, .woocommerce-shipping-destination, .shipping-calculator-button, .payment_box) {
	font-size: var(--mm-size-ui);
	font-weight: 400;
	line-height: 1.5;
}

#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page) :is(td span, td strong, .woocommerce-Price-amount, bdi, label span) {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page) :is(h2, h3) {
	margin: 0 0 16px;
	color: var(--mm-ink);
	font-family: var(--mm-font-display);
	font-size: var(--mm-size-h3);
	font-weight: 500;
	line-height: 1.22;
	letter-spacing: -0.01em;
}

#content .elementor-widget-woocommerce-checkout-page h3#order_review_heading {
	font-family: var(--mm-font-display);
	font-size: var(--mm-size-h3);
	font-weight: 500;
	line-height: 1.22;
}

#content .elementor-widget-woocommerce-checkout-page h3#ship-to-different-address {
	margin: 0 0 12px;
	padding: 0;
	font-family: var(--mm-font-body);
	font-size: var(--mm-size-ui);
	font-weight: 600;
	letter-spacing: 0;
}

#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page) th {
	color: var(--mm-text-2);
	font-size: var(--mm-size-small);
	font-weight: 700;
	line-height: 1.5;
}

#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page) table.shop_table tfoot :is(th, td) {
	color: var(--mm-ink);
	font-size: var(--mm-size-ui);
	font-weight: 600;
}

#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page) .cart_totals td::before {
	color: var(--mm-ink);
	font-size: var(--mm-size-ui);
	font-weight: 600;
	line-height: 1.5;
}

#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page) :is(.cart_totals .order-total td, .woocommerce-checkout-review-order-table .order-total th, .woocommerce-checkout-review-order-table .order-total td, .woocommerce-table--order-details tfoot tr:last-child th, .woocommerce-table--order-details tfoot tr:last-child td),
#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page) .cart_totals .order-total td::before {
	color: var(--mm-ink);
	font-family: var(--mm-font-display);
	font-size: var(--mm-size-h3);
	font-weight: 600;
	line-height: 1.2;
}

#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page) :is(.woocommerce-checkout-review-order-table td, .cart td) {
	color: var(--mm-ink);
}

#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page) strong.product-quantity {
	color: var(--mm-text-2);
	font-weight: 600;
}

#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page) :is(.form-row label, .wc_payment_method > label, .woocommerce-terms-and-conditions-checkbox-text) {
	color: var(--mm-ink);
	font-weight: 600;
	line-height: 1.4;
}

#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page) .form-row label.woocommerce-form__label-for-checkbox {
	margin: 0;
	font-weight: 400;
	line-height: 1.5;
}

#content .elementor-widget-woocommerce-checkout-page #customer_details .form-row {
	margin: 0 0 20px;
	padding: 0;
}

#content .elementor-widget-woocommerce-checkout-page #customer_details .form-row label:not(.woocommerce-form__label-for-checkbox) {
	margin-bottom: 6px;
	color: var(--mm-ink);
}

#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page) :is(.e-cart-content, .e-description, .woocommerce-shipping-destination, .woocommerce-privacy-policy-text p) {
	color: var(--mm-text-2);
}

/* Fields: the theme field, whatever the widget saved (Elementor's own rules reach 1,4,0). */
#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page) :is(input.input-text, select, textarea),
#content .elementor-widget-woocommerce-checkout-page #customer_details :is(.input-text, select, textarea),
#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page) #coupon_code {
	min-height: 48px;
	max-height: none;
	margin: 0;
	padding: 10px 12px;
	background-color: var(--mm-white);
	color: var(--mm-ink);
	font-family: var(--mm-font-body);
	font-size: var(--mm-size-ui);
	font-weight: 400;
	line-height: 1.5;
	border: 1px solid var(--mm-text-2);
	border-radius: var(--mm-radius-button);
	box-shadow: none;
}

#content .elementor-widget-woocommerce-checkout-page #customer_details :is(.input-text, select, textarea):focus,
#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page) :is(input.input-text, select, textarea):focus {
	background-color: var(--mm-white);
	color: var(--mm-ink);
	border-color: var(--mm-text-2);
}

#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page) textarea {
	min-height: 104px;
}

#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page) input.input-text.qty {
	width: 88px;
	text-align: center;
}

#content .elementor-widget-woocommerce-checkout-page #customer_details .form-row.woocommerce-invalid :is(.input-text, select, textarea),
#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page) .form-row.woocommerce-invalid :is(input.input-text, select) {
	border: 2px solid var(--mm-error);
}

#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page) .select2-container--default .select2-selection--single {
	height: 48px;
	background-color: var(--mm-white);
	border: 1px solid var(--mm-text-2);
	border-radius: var(--mm-radius-button);
}

/* Buttons: pill buttons in Deep Teal; Update basket and Apply coupon are secondary. */
#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page) :is(a.button, button.button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 10px 22px;
	background-color: var(--mm-teal);
	color: var(--mm-warm-white);
	font-family: var(--mm-font-body);
	font-size: var(--mm-size-ui);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	border: 2px solid var(--mm-teal);
	border-radius: 999px;
	box-shadow: none;
}

#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page) :is(a.button, button.button):hover {
	background-color: var(--mm-ink);
	color: var(--mm-warm-white);
	border-color: var(--mm-ink);
}

#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page) :is(button[name="update_cart"], .e-apply-coupon) {
	background-color: transparent;
	color: var(--mm-teal);
}

#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page) :is(button[name="update_cart"], .e-apply-coupon):not(:disabled):hover {
	background-color: var(--mm-warm-white);
	color: var(--mm-ink);
	border-color: var(--mm-ink);
}

#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page) button.button:disabled {
	background-color: transparent;
	color: var(--mm-teal);
	border-color: var(--mm-teal);
	opacity: 0.5;
	cursor: not-allowed;
}

#content .elementor-widget-woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
#content .elementor-widget-woocommerce-checkout-page #payment #place_order {
	display: flex;
	float: none;
	width: 100%;
	min-height: 56px;
	padding: 12px 22px;
	background-color: var(--mm-teal);
	color: var(--mm-warm-white);
	font-family: var(--mm-font-body);
	font-size: var(--mm-size-lead);
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-transform: none;
	border: 2px solid var(--mm-teal);
	border-radius: 999px;
	box-shadow: none;
}

#content .elementor-widget-woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
#content .elementor-widget-woocommerce-checkout-page #payment #place_order:hover {
	background-color: var(--mm-ink);
	color: var(--mm-warm-white);
	border-color: var(--mm-ink);
}

/* Basket: the coupon section follows the table; field and button on one row. */
#content .elementor-widget-woocommerce-cart .coupon.e-cart-section {
	margin: 16px 0 0;
}

#content .elementor-widget-woocommerce-cart .coupon .coupon-col {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}

#content .elementor-widget-woocommerce-cart .coupon .coupon-col-start {
	flex: 1 1 7.5rem;
	min-width: 0;
}

#content .elementor-widget-woocommerce-cart .coupon .coupon-col-end {
	flex: 0 0 auto;
}

#content .elementor-widget-woocommerce-cart .coupon .button {
	width: auto;
}

/* Checkout: Elementor's returning-customer and coupon prompts, in the theme's styles. */
#content .elementor-widget-woocommerce-checkout-page .e-woocommerce-login-section {
	margin: 0 0 24px;
	padding: 14px 18px;
	background: var(--mm-white);
	border: 1px solid var(--mm-rule);
	border-left: 6px solid var(--mm-teal);
	border-radius: 8px;
}

#content .elementor-widget-woocommerce-checkout-page .e-coupon-box {
	margin: 16px 0 0;
	padding: 12px 0 0;
	background: transparent;
	border: 0;
	border-top: 1px solid var(--mm-rule);
	border-radius: 0;
}

#content .elementor-widget-woocommerce-checkout-page .e-checkout-secondary-title {
	margin: 0;
	color: var(--mm-ink);
}

/* Links in running text keep a 44px target without changing line spacing. */
#content .elementor-widget-woocommerce-checkout-page .e-checkout-secondary-title a {
	display: inline-block;
	margin-block: -10px;
	padding-block: 10px;
	color: var(--mm-teal);
	font-weight: 600;
}

#content .elementor-widget-woocommerce-checkout-page .coupon-container-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
}

#content .elementor-widget-woocommerce-checkout-page #payment {
	margin: 24px 0 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

#content .elementor-widget-woocommerce-checkout-page #payment .payment_methods li {
	line-height: 1.5;
}

#content .elementor-widget-woocommerce-checkout-page #payment .payment_box {
	background-color: transparent;
	color: var(--mm-ink);
	font-size: var(--mm-size-ui);
}

/* Checkout field errors: summary links at a full 44px target; message in the theme type. */
#content .elementor-widget-woocommerce-checkout-page .woocommerce-error-summary li a {
	display: inline-block;
	padding-block: 11px;
	color: var(--mm-error);
	font-size: var(--mm-size-ui);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: underline;
}

#content .elementor-widget-woocommerce-checkout-page h2.woocommerce-error-summary__title {
	margin: 0 0 4px;
}

#content .elementor-widget-woocommerce-checkout-page .checkout-inline-error-message {
	color: var(--mm-error);
	font-size: var(--mm-size-ui);
	font-weight: 600;
	line-height: 1.4;
}

/* Elementor sets first and last name to 48% and lifts and colours checkbox text. */
#content .elementor-widget-woocommerce-checkout-page :is(.form-row-first, .form-row-last) {
	width: auto;
	float: none;
}

#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page) .woocommerce-form__label-for-checkbox span {
	position: static;
	color: inherit;
}

/* Approved sizes that the type rules above would otherwise even out. */
#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page) td span.cart-single {
	font-weight: 700;
}

#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page) td span.cart-single__note {
	color: var(--mm-text-2);
	font-size: var(--mm-size-small);
	font-weight: 400;
}

#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page) p.woocommerce-thankyou-order-received {
	font-size: var(--mm-size-lead);
	font-weight: 600;
}

#content :is(.elementor-widget-woocommerce-cart, .elementor-widget-woocommerce-checkout-page) .woocommerce-order-overview li {
	color: var(--mm-text-2);
	font-size: var(--mm-size-small);
	font-weight: 600;
	line-height: 1.4;
}

/* 9f. Elementor-built content pages ------------------------------------------- */

/*
 * About, Contact, FAQ, policies and guide hubs on staging are Elementor-built pages. The theme
 * removes the Elementor Kit body class there (inc/elementor.php) and adds has-elementor-content,
 * so the Kit's global font and colour no longer restyle the theme header, footer and text.
 *
 * Styles saved on the pages' widgets still load. Many point at Elementor's global colour and
 * font slots (--e-global-*), which the Kit class used to define: they are mapped here to theme
 * values, so panels, icons and dividers keep their intended tones in the theme palette. Others
 * name fonts directly (Cormorant Infant, Raleway, Nunito) with selectors up to 0,4,0, so the
 * typography, buttons and fields below are restated inside #content, only on these pages.
 * Layout (alignment, containers, spacing, images) stays as Elementor saved it. The page content,
 * widgets and Elementor records are unchanged; removing the has-elementor-content class undoes
 * all of it.
 */

.has-elementor-content {
	--e-global-color-primary: var(--mm-ink);
	--e-global-color-secondary: var(--mm-teal);
	--e-global-color-text: var(--mm-text-2);
	--e-global-color-accent: var(--mm-sage);
	--e-global-color-2955194c: var(--mm-paper);
	--e-global-color-7308c335: var(--mm-sage-mist);
	--e-global-color-6b47d91a: var(--mm-line);
	--e-global-color-16e1243a: var(--mm-sage);
	--e-global-color-c696dce: var(--mm-white);
	--e-global-color-14ef391: var(--mm-blush);
	--e-global-color-764183d: var(--mm-success);
	--e-global-color-d6cea4e: var(--mm-error);
	--e-global-color-86b4fcd: transparent;
	--e-global-color-57c8da2: rgba(48, 50, 74, 0.8);
	--e-global-typography-primary-font-family: var(--mm-font-display);
	--e-global-typography-primary-font-weight: 500;
	--e-global-typography-secondary-font-family: var(--mm-font-display);
	--e-global-typography-secondary-font-weight: 500;
	--e-global-typography-text-font-family: var(--mm-font-body);
	--e-global-typography-text-font-weight: 400;
	--e-global-typography-accent-font-family: var(--mm-font-body);
	--e-global-typography-accent-font-weight: 600;
}

/* Headings: the theme's display face and scale, one step per level. */
.has-elementor-content #content .elementor :is(h1, h2, h3, h4, h5, h6, .elementor-heading-title) {
	color: var(--mm-ink);
	font-family: var(--mm-font-display);
	font-style: normal;
	font-weight: 500;
	letter-spacing: -0.01em;
	text-transform: none;
	text-shadow: none;
}

.has-elementor-content #content .elementor h1 {
	font-size: var(--mm-size-h1);
	line-height: 1.08;
}

.has-elementor-content #content .elementor h2 {
	font-size: var(--mm-size-h2);
	line-height: 1.15;
}

.has-elementor-content #content .elementor :is(h3, h4, h5, h6),
.has-elementor-content #content .elementor .eael-entry-title {
	font-size: var(--mm-size-h3);
	line-height: 1.22;
}

/* Running text: the theme's body face, size and colour. */
.has-elementor-content #content .elementor :is(.elementor-widget-text-editor, .elementor-icon-list-text, .elementor-tab-content, .eael-grid-post-excerpt) {
	color: var(--mm-ink);
	font-family: var(--mm-font-body);
	font-size: var(--mm-size-body);
	font-style: normal;
	line-height: 1.65;
}

.has-elementor-content #content .elementor :is(.elementor-widget-text-editor, .elementor-tab-content, .eael-grid-post-excerpt) a {
	color: var(--mm-teal);
	font-family: inherit;
	text-decoration: underline;
}

/* Linked lists (Elementor Icon List): each link is a row at least 44px tall. */
.has-elementor-content #content .elementor .elementor-icon-list-item > a {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: var(--mm-target);
	color: var(--mm-teal);
}

.has-elementor-content #content .elementor .elementor-icon-list-item > a .elementor-icon-list-text {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* Guide cards (Essential Addons post grid): titles as links in Night Ink. */
.has-elementor-content #content .elementor .eael-entry-title a {
	color: var(--mm-ink);
	font-family: var(--mm-font-display);
}

/* Buttons: the theme's pill button (section 5). */
.has-elementor-content #content .elementor :is(.elementor-button, .eael-load-more-button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 10px 22px;
	background: var(--mm-teal);
	color: var(--mm-warm-white);
	font-family: var(--mm-font-body);
	font-size: var(--mm-size-ui);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	text-transform: none;
	border: 2px solid var(--mm-teal);
	border-radius: 999px;
	box-shadow: none;
}

.has-elementor-content #content .elementor :is(.elementor-button, .eael-load-more-button):hover {
	background: var(--mm-ink);
	border-color: var(--mm-ink);
	color: var(--mm-warm-white);
}

.has-elementor-content #content .elementor :is(.elementor-button, .eael-load-more-button) :is(.elementor-button-text, .eael_load_more_text) {
	color: inherit;
	font: inherit;
}

/* Kit parity (0.1.33): the live site's Kit differs from staging's, where these pages were
   approved. Its custom CSS adds list-item spacing, a 1.7 paragraph line height and a forced
   30px button corner (!important), and it sets no default container padding. These restate
   staging's values inside Elementor content only; with staging's Kit they change nothing.
   The Kit's breakpoints are 1024px and 768px on both sites. */
.has-elementor-content #content .elementor .e-con {
	--container-default-padding-top: 40px;
	--container-default-padding-right: 40px;
	--container-default-padding-bottom: 40px;
	--container-default-padding-left: 40px;
}

@media (max-width: 1024px) {
	.has-elementor-content #content .elementor .e-con {
		--container-default-padding-top: 28px;
		--container-default-padding-right: 28px;
		--container-default-padding-bottom: 28px;
		--container-default-padding-left: 28px;
	}
}

@media (max-width: 768px) {
	.has-elementor-content #content .elementor .e-con {
		--container-default-padding-top: 20px;
		--container-default-padding-right: 20px;
		--container-default-padding-bottom: 20px;
		--container-default-padding-left: 20px;
	}
}

.has-elementor-content #content .elementor .elementor-widget-text-editor :is(p, li) {
	line-height: inherit;
}

.has-elementor-content #content .elementor .elementor-widget-text-editor li {
	margin-bottom: 0;
}

/* The live Kit forces its corner with !important; only !important can restore the pill. */
.has-elementor-content #content .elementor .elementor-button {
	border-radius: 999px !important;
}

/* Kit parity in the theme's own announcement bar, header and footer (0.1.33). The Kit
   stylesheet loads on every page, and the live Kit's custom CSS gives every list item extra
   spacing and its own line height and every paragraph a 1.7 line height, which reach the
   menus and the announcement text. These restore the theme's inherited values with the
   same low specificity as those rules (main.css loads after the Kit), so the components'
   own class rules still apply. */
:where(.announcement, .site-header, .site-footer) p {
	line-height: inherit;
}

:where(.announcement, .site-header, .site-footer) :is(ul, ol) > li {
	margin-bottom: 0;
	line-height: inherit;
}

/* Forms (Elementor Pro Form): theme fields, and labels shown above them. The staging forms
   hide their labels visually and show only placeholders, which disappear once typing starts;
   the labels are Elementor's own, simply made visible. */
.has-elementor-content #content .elementor-form .elementor-field-label.elementor-screen-only {
	position: static;
	width: auto;
	height: auto;
	margin: 0 0 6px;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

.has-elementor-content #content .elementor-form .elementor-field-label {
	display: block;
	color: var(--mm-ink);
	font-family: var(--mm-font-body);
	font-size: var(--mm-size-ui);
	font-weight: 600;
	line-height: 1.4;
}

.has-elementor-content #content .elementor-form .elementor-field-group :is(.elementor-field, .elementor-field-textual) {
	min-height: 48px;
	padding: 10px 12px;
	background: var(--mm-white);
	color: var(--mm-ink);
	font-family: var(--mm-font-body);
	font-size: var(--mm-size-ui);
	line-height: 1.4;
	border: 1px solid var(--mm-text-2);
	border-radius: var(--mm-radius-button);
}

.has-elementor-content #content .elementor-form .elementor-field-group :is(.elementor-field, .elementor-field-textual):focus-visible {
	outline: 3px solid var(--mm-focus);
	outline-offset: 2px;
}

.has-elementor-content #content .elementor-form .elementor-field-group :is(.elementor-field, .elementor-field-textual)::placeholder {
	color: var(--mm-text-2);
	opacity: 1;
}

/* FAQ toggles: each question is a full-width row at least 48px tall; its link (the element
   Elementor makes focusable) fills the row so the whole target is at least 44px. */
.has-elementor-content #content .elementor-toggle .elementor-tab-title {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	padding: 4px 8px;
	background: transparent;
	font-size: var(--mm-size-h3);
	line-height: 1.22;
	border-block-end: 1px solid var(--mm-line);
}

.has-elementor-content #content .elementor-toggle .elementor-tab-title .elementor-toggle-icon {
	flex: none;
	float: none;
	color: var(--mm-teal);
}

.has-elementor-content #content .elementor-toggle .elementor-toggle-title {
	display: flex;
	flex: 1;
	align-items: center;
	min-height: var(--mm-target);
	padding-block: 6px;
	color: var(--mm-ink);
	font-family: var(--mm-font-display);
	font-size: var(--mm-size-h3);
	font-weight: 500;
	line-height: 1.22;
	text-decoration: none;
}

.has-elementor-content #content .elementor-toggle .elementor-tab-content {
	padding: 8px 8px 16px 36px;
	border-block-end: 1px solid var(--mm-line);
}

/* 10. Footer ------------------------------------------------------------ */

/*
 * The one Night Ink area: anchors the page. All essential text is Warm White (12.9:1);
 * Sage is used only for dividers (5.8:1 on Ink) and hover emphasis.
 */
.site-footer {
	padding-block: 48px 28px;
	background: var(--mm-ink);
	color: var(--mm-warm-white);
	font-size: var(--mm-size-ui);
	--mm-focus: var(--mm-warm-white);
}

/* The footer's Night Ink arc is defined with the other section arcs. */

/* Footer brand area: transparent reverse wordmark, tagline quieter beneath. */
.footer-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-bottom: 32px;
	padding-bottom: 28px;
	text-align: center;
	border-bottom: 1px solid var(--mm-sage);
}

.footer-brand__logo {
	display: block;
	width: 200px;
	height: auto;
}

.footer-brand__tagline {
	margin: 0;
	color: var(--mm-warm-white);
	font-family: var(--mm-font-display);
	font-size: 17px;
	font-style: italic;
	font-weight: 500;
	line-height: 1.4;
}

.site-footer a {
	display: inline-flex;
	align-items: center;
	min-height: var(--mm-target);
	color: var(--mm-warm-white);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.site-footer a:hover {
	color: var(--mm-sage-mist);
	text-decoration-thickness: 2px;
}

/*
 * Standalone footer navigation links: no underline at rest (the list and heading make them
 * identifiable), underline on hover and keyboard focus, plus the 3px Warm White focus outline.
 * Links inside body copy elsewhere keep their underlines.
 */
.footer-group__list a,
.site-footer__social a {
	text-decoration: none;
}

.footer-group__list a:hover,
.footer-group__list a:focus-visible,
.site-footer__social a:hover,
.site-footer__social a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.site-footer__groups {
	display: grid;
	gap: 28px;
}

@media (min-width: 40em) {
	.site-footer__groups {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.footer-group__title {
	margin-bottom: 4px;
	padding-bottom: 8px;
	color: var(--mm-warm-white);
	font-family: var(--mm-font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--mm-sage);
}

.footer-group__list,
.site-footer__social {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 0 24px;
	margin-top: 28px;
}

.site-footer__line {
	margin: 28px 0 0;
	padding-top: 20px;
	color: var(--mm-warm-white);
	font-size: var(--mm-size-small);
	border-top: 1px solid var(--mm-sage);
}

/* 11. Generic templates and WordPress classes --------------------------- */

.page-header {
	margin-bottom: 32px;
}

.entry-content > * {
	margin-top: 0;
}

.entry-content img {
	border-radius: var(--mm-radius-image);
}

.entry-list {
	display: grid;
	gap: 32px;
	max-width: var(--mm-reading);
}

.entry-summary__title {
	font-size: var(--mm-size-h3);
	line-height: 1.22;
}

/*
 * Search results (0.1.24): one compact list in WordPress's result order. Products use the
 * archive product card laid out as a row (photograph beside status, name, price and
 * details); guides and pages are a type label, title and a summary cut to about 30 words.
 * Each result is clickable as a whole through its single link.
 */
.search-results {
	display: grid;
	gap: 16px;
	max-width: var(--mm-reading);
	margin: 0;
	padding: 0;
	list-style: none;
}

.search-results > li {
	position: relative;
	padding: 16px;
	background: var(--mm-white);
	border: 1px solid var(--mm-rule);
	border-radius: var(--mm-radius-card);
}

.search-results .product-card {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

@media (min-width: 40em) {
	.search-results .product-card {
		grid-template-columns: 136px minmax(0, 1fr);
		gap: 20px;
	}
}

.search-results .product-card__media,
.search-results .card__media--fallback {
	aspect-ratio: 1 / 1;
	background: var(--mm-warm-white);
	border-radius: var(--mm-radius-image);
}

.search-results .card__media--fallback {
	background: var(--mm-sage-mist);
}

.search-results .product-card__media img {
	height: 100%;
}

.search-results .product-card__body {
	padding: 0;
}

.search-results .status {
	align-self: flex-start;
	margin: 0 0 6px;
	line-height: 1.5;
}

.search-results .product-card__title {
	margin: 0 0 4px;
	font-family: var(--mm-font-body);
	font-size: var(--mm-size-body);
	font-weight: 600;
	line-height: 1.35;
}

.search-results .product-card__price {
	margin: 0 0 6px;
	line-height: 1.5;
}

.search-results .product-card__specs {
	margin: 0 0 6px;
	font-size: var(--mm-size-small);
}

.search-results .product-card__action {
	margin: 0;
}

.search-result__type {
	display: inline-flex;
	margin: 0 0 8px;
	padding: 2px 10px;
	background: var(--mm-sage-mist);
	color: var(--mm-ink);
	font-size: var(--mm-size-small);
	font-weight: 600;
	line-height: 1.5;
	border-radius: 999px;
}

.search-result__title {
	margin: 0 0 4px;
	font-size: var(--mm-size-lead);
	line-height: 1.3;
}

.search-result__summary {
	margin: 0;
	color: var(--mm-text-2);
}

.search-results :is(.product-card__link, .search-result__link) {
	display: inline-flex;
	align-items: center;
	min-height: var(--mm-target);
}

/* The single link covers its result, so the whole result is clickable without a second link. */
.search-results :is(.product-card__link, .search-result__link)::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--mm-radius-card);
}

.search-results > li:hover :is(.product-card__link, .search-result__link) {
	text-decoration-thickness: 2px;
}

.search-results + .pagination .nav-links {
	margin-top: 32px;
}

/*
 * Guides (0.1.26): the Guides index (guides-index.php), the trail above and "Related guides"
 * below a guide article, and the group-name links on the homepage cards. Titles only.
 */
.guides-index__intro {
	margin: 0;
}

.guides-index__jump {
	margin-bottom: 40px;
}

.guides-index__jump-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.guides-index__jump-list a {
	display: inline-flex;
	align-items: center;
	min-height: var(--mm-target);
	padding: 8px 16px;
	color: var(--mm-ink);
	font-size: var(--mm-size-ui);
	font-weight: 600;
	text-decoration: none;
	border: 1px solid rgba(48, 50, 74, 0.3);
	border-radius: 999px;
}

.guides-index__jump-list a:hover {
	background: var(--mm-sage-mist);
}

.guides-index__group {
	margin-bottom: 48px;
	scroll-margin-top: 24px;
}

.guides-index__title {
	margin-bottom: 8px;
}

.guides-index__description {
	margin-bottom: 16px;
	color: var(--mm-text-2);
}

.guides-index__list,
.related-guides__list,
.guide-trail__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.guides-index__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	border-bottom: 1px solid var(--mm-rule);
}

.guides-index__link,
.related-guides__list a {
	display: inline-flex;
	align-items: center;
	min-height: var(--mm-target);
	padding-block: 8px;
	font-weight: 600;
}

.guides-index__flag {
	display: inline-flex;
	padding: 2px 10px;
	background: var(--mm-sage-mist);
	color: var(--mm-ink);
	font-size: var(--mm-size-small);
	font-weight: 600;
	line-height: 1.5;
	border-radius: 999px;
}

.guides-index__flag--see-also {
	background: transparent;
	border: 1px solid var(--mm-line);
}

.guide-trail {
	margin-bottom: 16px;
	font-size: var(--mm-size-ui);
}

.guide-trail__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 8px;
}

.guide-trail__list li + li::before {
	content: "›";
	margin-right: 8px;
	color: var(--mm-text-2);
}

.guide-trail__list a {
	display: inline-flex;
	align-items: center;
	min-height: var(--mm-target);
	font-weight: 600;
}

.related-guides {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--mm-rule);
}

.related-guides__title {
	font-size: var(--mm-size-h3);
	line-height: 1.22;
}

/* Homepage guide cards: the group name is the link (44px target). */
.card__title-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--mm-target);
	color: inherit;
}

.wc-content {
	padding-block: var(--mm-section);
}

.alignleft {
	float: left;
	margin: 0 24px 16px 0;
}

.alignright {
	float: right;
	margin: 0 0 16px 24px;
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.wp-caption,
.wp-caption-text,
.gallery-caption {
	max-width: 100%;
	font-size: var(--mm-size-small);
	color: var(--mm-text-2);
}

.sticky,
.bypostauthor {
	/* Required WordPress classes; no special treatment. */
	display: block;
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 48px;
}

.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--mm-target);
	min-height: var(--mm-target);
	padding: 8px;
}

/* 12. Reduced motion ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}