/* =========================================================================
   MINUTES MAIL — component styles
   1. Tokens
   2. Base and block-gap resets
   3. Shell
   4. Header
   5. Mobile navigation panel
   6. Footer
   7. Shared components
   ========================================================================= */

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

:root {
	--mm-cream: #f6f1e9;
	--mm-ink: #151515;
	--mm-cobalt: #315cf5;
	--mm-cobalt-hover: #2649cf;
	--mm-coral: #f07868;
	--mm-line: #dcd6cc;
	--mm-pale: #f4f4f2;
	--mm-charcoal: #444;
	--mm-muted: #6b6b6b;
	--mm-border: #e5dfd4;
	--mm-radius: 4px;

	--mm-font-display: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
	--mm-font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
	--mm-font-editorial: "Cormorant Garamond", ui-serif, Georgia, serif;

	/* Live's container-mm. */
	--mm-shell: 1360px;
	--mm-gutter: 1.25rem;

	/* Announcement bar 34px + header row 80px + 1px hairline (measured on live). */
	--mm-bar-h: 34px;
	--mm-row-h: 80px;
	--mm-header-h: 115px;

	--mm-adminbar: 0px;
}

@media ( width >= 768px ) {
	:root { --mm-gutter: 2rem; }
}

@media ( width >= 1280px ) {
	:root { --mm-gutter: 3rem; }
}

/* The admin bar offsets everything measured from the viewport top. Declared on
   :root as well as body — html is body's parent, so a body-only value never
   reaches scroll-padding-top. */
:root:has( body.admin-bar ) { --mm-adminbar: 32px; }
body.admin-bar { --mm-adminbar: 32px; }

@media screen and ( max-width: 782px ) {
	:root:has( body.admin-bar ) { --mm-adminbar: 46px; }
	body.admin-bar { --mm-adminbar: 46px; }
}

/* --------------------------------------------- 2. Base and block-gap resets */

/* Twenty Twenty-Five ships no global box-sizing reset, so any hand-written
   container with both a width and padding overflows its own shell. */
*,
*::before,
*::after { box-sizing: border-box; }

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

input,
select,
textarea { box-sizing: border-box; }

html {
	scroll-padding-top: calc( var( --mm-header-h ) + var( --mm-adminbar ) + 1rem );
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizelegibility;
}

body {
	/* Live's page ground is white: only the bands that carry .mm-sec--cream
	   are cream. A cream body made every unpainted section read as cream. */
	background: #fff;
	color: var( --mm-ink );
	font-family: var( --mm-font-body );
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	font-feature-settings: "ss01", "cv11";
}

/* Live's headings take font-size and font-weight from the body (Tailwind's
   preflight sets both to inherit); every size comes from a class instead. */
.mm-main :where( h1, h2, h3, h4, h5, h6 ),
.wp-site-blocks .mm-main :where( h1, h2, h3, h4, h5, h6 ) {
	font-family: var( --mm-font-display );
	font-size: inherit;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.015em;
	color: var( --mm-ink );
	margin: 0;
}

/* Live resets every list: no marker, no indent. */
.mm-main :where( ul, ol ),
.wp-site-blocks .mm-main :where( ul, ol ) {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mm-main li,
.wp-site-blocks .mm-main li,
:root :where( .mm-main li ) { margin-top: 0; }

/* Core gives every flow sibling a top margin; sections own their spacing here. */
.wp-site-blocks > * { margin-block-start: 0; }
.mm-header > *,
.mm-footer > *,
.mm-sec > * { margin-block-start: 0; }

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > main { flex: 1 0 auto; }

/* -------------------------------------------------------------------- 3. Shell */

.mm-shell,
.wp-site-blocks .mm-shell {
	width: 100%;
	max-width: var( --mm-shell );
	margin-inline: auto;
	padding-inline: var( --mm-gutter );
}

/* ------------------------------------------------------------------- 4. Header */

.mm-header,
.wp-site-blocks .mm-header {
	position: sticky;
	top: var( --mm-adminbar );
	z-index: 40;
	background: var( --mm-cream );
	border-bottom: 1px solid var( --mm-line );
}

.mm-bar,
.wp-site-blocks .mm-bar {
	background: var( --mm-ink );
	border-bottom: 1px solid var( --mm-line );
	padding-block: 0.5rem;
	text-align: center;
}

.mm-bar p,
.wp-site-blocks .mm-bar p {
	margin: 0;
	color: var( --mm-cream );
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.mm-header__inner,
.wp-site-blocks .mm-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	height: var( --mm-row-h );
}

.mm-header__logo,
.wp-site-blocks .mm-header__logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.mm-header__logo a { display: block; line-height: 0; }
.mm-header__logo svg { height: 1.5rem; width: auto; display: block; }

.mm-header__aside,
.wp-site-blocks .mm-header__aside {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex: 0 0 auto;
}

.mm-header__email,
.wp-site-blocks .mm-header__email {
	display: none;
	font-size: 0.875rem;
	font-weight: 500;
	color: var( --mm-cobalt );
	text-decoration: underline;
	text-underline-offset: 4px;
	white-space: nowrap;
}

.mm-header__cart,
.wp-site-blocks .mm-header__cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	color: var( --mm-ink );
}

.mm-header__cart:hover { color: var( --mm-cobalt ); }

/* The nav keeps its natural width; everything else gives way around it. */
nav.mm-header__nav,
.wp-site-blocks nav.mm-header__nav {
	flex: 0 0 auto;
}

/* Inherited properties stay unscoped so core's copy of the class on the <ul>
   still picks them up. */
.mm-header__nav {
	font-family: var( --mm-font-body );
	font-size: 14px;
	font-weight: 500;
}

.mm-header__nav .wp-block-navigation-item__content,
.wp-site-blocks .mm-header__nav .wp-block-navigation-item__content {
	color: var( --mm-ink );
	text-decoration: none;
	text-underline-offset: 4px;
	transition: color 0.15s ease;
}

.mm-header__nav .wp-block-navigation-item__content:hover,
.mm-header__nav .current-menu-item > .wp-block-navigation-item__content,
.wp-site-blocks .mm-header__nav .current-menu-item > .wp-block-navigation-item__content {
	color: var( --mm-cobalt );
}

.mm-header__nav :focus-visible {
	outline: 2px solid var( --mm-cobalt );
	outline-offset: 4px;
}

.mm-header__nav .wp-block-navigation-item__label {
	white-space: nowrap;
}

/* Degradation order, widest tier first:
   1. >= 1360px  full inline nav at 14px with 1.5rem gaps;
   2. 1280-1359  labels trimmed to 13px and gaps to 1.25rem;
   3. < 1280px   the nav collapses and the support address returns to the row;
   4. < 640px    the support address is hidden, as live does.
   The address is not shown beside an inline nav at any width: ten labels plus
   the address cannot fit inside live's own 1360px shell. */
@media ( width >= 1360px ) {
	.mm-header__nav,
	.wp-site-blocks .mm-header__nav { --wp--style--block-gap: 1.5rem; }
}

@media ( 1280px <= width < 1360px ) {
	.mm-header__nav,
	.wp-site-blocks .mm-header__nav {
		font-size: 13px;
		--wp--style--block-gap: 1.25rem;
	}
}

@media ( width >= 640px ) and ( width < 1280px ) {
	.mm-header__email,
	.wp-site-blocks .mm-header__email { display: inline; }
}

/* ---------------------------------------------- 5. Mobile navigation panel */

/* Core hard-codes the switch at 600px. Both of its rules have to be beaten, in
   both directions, so its :not() chains are copied verbatim. */
@media ( width < 1280px ) {
	.mm-header__nav .wp-block-navigation__responsive-container:not( .hidden-by-default ):not( .is-menu-open ) {
		display: none;
	}

	.mm-header__nav .wp-block-navigation__responsive-container-open:not( .always-shown ) {
		display: flex;
	}
}

@media ( width >= 1280px ) {
	.mm-header__nav .wp-block-navigation__responsive-container-open:not( .always-shown ) {
		display: none;
	}

	.mm-header__nav .wp-block-navigation__responsive-container:not( .hidden-by-default ):not( .is-menu-open ) {
		display: flex;
	}

}

/* The in-panel support address duplicates the header one wherever that is
   visible, so it only appears where the header drops it. */
@media ( width >= 640px ) {
	.mm-header__nav .wp-block-navigation__responsive-container.is-menu-open li.mm-nav-only,
	.mm-header__nav .wp-block-navigation__responsive-container li.mm-nav-only {
		display: none;
	}
}

.mm-header__nav .wp-block-navigation__responsive-container-open,
.wp-site-blocks .mm-header__nav .wp-block-navigation__responsive-container-open {
	min-width: 2.75rem;
	min-height: 2.75rem;
	align-items: center;
	justify-content: center;
	color: var( --mm-ink );
}

/* Core never hides the open toggle — its own overlay is opaque and covers it.
   Ours is transparent, so read the open state off the container. */
.mm-header__nav:has( .wp-block-navigation__responsive-container.is-menu-open ) .wp-block-navigation__responsive-container-open {
	visibility: hidden;
}

/* The overlay itself is transparent and inert; only the dialog and the close
   button take pointer events, so the logo underneath stays clickable. */
.wp-block-navigation .mm-header__nav .wp-block-navigation__responsive-container.is-menu-open,
.mm-header__nav .wp-block-navigation__responsive-container.has-modal-open.is-menu-open,
.wp-site-blocks .mm-header__nav .wp-block-navigation__responsive-container.has-modal-open.is-menu-open.is-menu-open {
	background-color: transparent;
	padding: 0;
	pointer-events: none;
	animation: none;
	color: var( --mm-ink );
}

.mm-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	pointer-events: auto;
	margin-top: calc( var( --mm-header-h ) + var( --mm-adminbar ) );
	max-height: calc( 100dvh - var( --mm-header-h ) - var( --mm-adminbar ) );
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var( --mm-cream );
	border-top: 1px solid var( --mm-line );
	border-bottom: 1px solid var( --mm-line );
	padding: 1rem var( --mm-gutter ) 1.5rem;
}

.mm-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
}

.mm-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
}

.mm-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	width: 100%;
	font-size: 1rem;
}

/* Positioned in the toggle's own box so the icons appear to swap in place. */
.mm-header__nav .wp-block-navigation__responsive-container-close,
.wp-site-blocks .mm-header__nav .wp-block-navigation__responsive-container-close {
	position: fixed;
	top: calc( var( --mm-bar-h ) + var( --mm-adminbar ) );
	right: var( --mm-gutter );
	height: var( --mm-row-h );
	width: 2.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var( --mm-ink );
	pointer-events: auto;
}

/* ------------------------------------------------------------------- 6. Footer */

.mm-footer,
.wp-site-blocks .mm-footer {
	margin-top: 6rem;
	background: var( --mm-ink );
	color: var( --mm-cream );
}

.mm-footer a { color: inherit; }
.mm-footer a:hover { color: inherit; text-decoration: underline; }

.mm-footer__inner,
.wp-site-blocks .mm-footer__inner {
	padding-block: 4rem;
}

.mm-footer__grid,
.wp-site-blocks .mm-footer__grid {
	display: grid;
	gap: 3rem;
	grid-template-columns: 1fr;
}

.mm-footer__grid > *,
.wp-site-blocks .mm-footer__grid > * { margin-block-start: 0; }

@media ( width >= 768px ) {
	.mm-footer__grid,
	.wp-site-blocks .mm-footer__grid { grid-template-columns: repeat( 2, 1fr ); }
}

/* The brand column spans two of the four tracks. */
@media ( width >= 1024px ) {
	.mm-footer__grid,
	.wp-site-blocks .mm-footer__grid { grid-template-columns: repeat( 4, 1fr ); }

	.mm-footer__brand,
	.wp-site-blocks .mm-footer__brand { grid-column: span 2; }
}

.mm-footer__brand svg { height: 1.5rem; width: auto; display: block; }

.mm-footer__blurb,
.wp-site-blocks .mm-footer__blurb {
	margin-top: 1.5rem;
	max-width: 24rem;
	font-size: 0.875rem;
	line-height: 1.65;
	opacity: 0.8;
}

.mm-footer__address,
.wp-site-blocks .mm-footer__address {
	margin-top: 2rem;
	font-size: 0.875rem;
	line-height: 1.65;
	font-style: normal;
	opacity: 0.8;
}

.mm-footer__address p { margin: 0 0 0.25rem; }
.mm-footer__address strong { font-weight: 500; opacity: 1; }
.mm-footer__address a { text-decoration: underline; text-underline-offset: 4px; }

.mm-footer__heading,
.wp-site-blocks .mm-footer__heading {
	margin: 0;
	font-family: var( --mm-font-body );
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgb( 255 255 255 / 0.6 );
}

.mm-footer__list,
.wp-site-blocks .mm-footer__list {
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	line-height: 1.45;
}

.mm-footer__list li,
.wp-site-blocks .mm-footer__list li,
:root :where( .mm-footer__list li ) {
	margin-top: 0;
	margin-bottom: 0.625rem;
}

.mm-footer__list a { opacity: 0.9; text-decoration: none; }
.mm-footer__list a:hover,
.mm-footer__list a[ aria-current="page" ] { opacity: 1; text-decoration: underline; }

.mm-footer__legal,
.wp-site-blocks .mm-footer__legal {
	margin-top: 4rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgb( 255 255 255 / 0.1 );
	font-size: 0.75rem;
	opacity: 0.7;
}

.mm-footer__legal p { margin: 0; }

/* -------------------------------------------------------- 7. Shared components */

/* Live: .eyebrow { font-family: var(--font-body); letter-spacing: .18em;
   text-transform: uppercase; color: var(--color-charcoal); font-size: .72rem;
   font-weight: 500 } */
.mm-eyebrow,
.wp-site-blocks .mm-eyebrow,
.mm-sec .mm-eyebrow,
.mm-card .mm-eyebrow {
	margin: 0;
	font-family: var( --mm-font-body );
	font-size: 0.72rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var( --mm-charcoal );
}

/* Live: padding .875rem 1.75rem, font-size .9rem/500, radius 2px, .01em. */
.mm-btn,
.wp-site-blocks .mm-btn,
.mm-sec .mm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.875rem 1.75rem;
	border: 1px solid transparent;
	border-radius: 2px;
	font-family: var( --mm-font-body );
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
	transition: background 0.16s, color 0.16s, border-color 0.16s;
}

.mm-btn--primary,
.wp-site-blocks .mm-btn--primary,
.mm-sec .mm-btn--primary {
	letter-spacing: 0.01em;
	background: var( --mm-cobalt );
	color: #fff;
	border: 1px solid var( --mm-cobalt );
}

.mm-btn--primary:hover,
.mm-sec .mm-btn--primary:hover {
	background: var( --mm-cobalt-hover );
	border-color: var( --mm-cobalt-hover );
	color: #fff;
}

.mm-btn--ghost,
.wp-site-blocks .mm-btn--ghost,
.mm-sec .mm-btn--ghost {
	background: none;
	color: var( --mm-ink );
	border: 1px solid var( --mm-ink );
}

.mm-btn--ghost:hover,
.mm-sec .mm-btn--ghost:hover {
	background: var( --mm-ink );
	color: var( --mm-cream );
}

/* Pointer interaction loses the ring; keyboard focus keeps it. */
a:focus:not( :focus-visible ),
button:focus:not( :focus-visible ) { outline: none; }

a:focus-visible,
button:focus-visible {
	outline: 2px solid var( --mm-cobalt );
	outline-offset: 4px;
}

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

/* =========================================================================
   8. Sections and page components

   Every layout rule on a block-generated container is written twice — bare
   and prefixed with .wp-site-blocks — because WordPress's own selectors are
   two deep and a lone class silently loses.
   ========================================================================= */

.mm-main,
.wp-site-blocks .mm-main { display: block; }

/* Live's vertical padding, the full Tailwind scale it draws on. Written at
   two classes as well as one, so it beats the components it lands on. */
.mm-py-1,
.wp-site-blocks .mm-py-1,
.mm-sec .mm-py-1,
.mm-card .mm-py-1 { padding-block: 0.25rem; }
.mm-py-2,
.wp-site-blocks .mm-py-2,
.mm-sec .mm-py-2,
.mm-card .mm-py-2 { padding-block: 0.5rem; }
.mm-py-3,
.wp-site-blocks .mm-py-3,
.mm-sec .mm-py-3,
.mm-card .mm-py-3 { padding-block: 0.75rem; }
.mm-py-4,
.wp-site-blocks .mm-py-4,
.mm-sec .mm-py-4,
.mm-card .mm-py-4 { padding-block: 1rem; }
.mm-py-5,
.wp-site-blocks .mm-py-5,
.mm-sec .mm-py-5,
.mm-card .mm-py-5 { padding-block: 1.25rem; }
.mm-py-6,
.wp-site-blocks .mm-py-6,
.mm-sec .mm-py-6,
.mm-card .mm-py-6 { padding-block: 1.5rem; }
.mm-py-7,
.wp-site-blocks .mm-py-7,
.mm-sec .mm-py-7,
.mm-card .mm-py-7 { padding-block: 1.75rem; }
.mm-py-8,
.wp-site-blocks .mm-py-8,
.mm-sec .mm-py-8,
.mm-card .mm-py-8 { padding-block: 2rem; }
.mm-py-10,
.wp-site-blocks .mm-py-10,
.mm-sec .mm-py-10,
.mm-card .mm-py-10 { padding-block: 2.5rem; }
.mm-py-12,
.wp-site-blocks .mm-py-12,
.mm-sec .mm-py-12,
.mm-card .mm-py-12 { padding-block: 3rem; }
.mm-py-14,
.wp-site-blocks .mm-py-14,
.mm-sec .mm-py-14,
.mm-card .mm-py-14 { padding-block: 3.5rem; }
.mm-py-16,
.wp-site-blocks .mm-py-16,
.mm-sec .mm-py-16,
.mm-card .mm-py-16 { padding-block: 4rem; }
.mm-py-20,
.wp-site-blocks .mm-py-20,
.mm-sec .mm-py-20,
.mm-card .mm-py-20 { padding-block: 5rem; }
.mm-py-24,
.wp-site-blocks .mm-py-24,
.mm-sec .mm-py-24,
.mm-card .mm-py-24 { padding-block: 6rem; }
.mm-pt-4,
.wp-site-blocks .mm-pt-4,
.mm-sec .mm-pt-4,
.mm-card .mm-pt-4 { padding-top: 1rem; }
.mm-pb-4,
.wp-site-blocks .mm-pb-4,
.mm-sec .mm-pb-4,
.mm-card .mm-pb-4 { padding-bottom: 1rem; }
.mm-pt-5,
.wp-site-blocks .mm-pt-5,
.mm-sec .mm-pt-5,
.mm-card .mm-pt-5 { padding-top: 1.25rem; }
.mm-pb-5,
.wp-site-blocks .mm-pb-5,
.mm-sec .mm-pb-5,
.mm-card .mm-pb-5 { padding-bottom: 1.25rem; }
.mm-pt-6,
.wp-site-blocks .mm-pt-6,
.mm-sec .mm-pt-6,
.mm-card .mm-pt-6 { padding-top: 1.5rem; }
.mm-pb-6,
.wp-site-blocks .mm-pb-6,
.mm-sec .mm-pb-6,
.mm-card .mm-pb-6 { padding-bottom: 1.5rem; }
.mm-pt-7,
.wp-site-blocks .mm-pt-7,
.mm-sec .mm-pt-7,
.mm-card .mm-pt-7 { padding-top: 1.75rem; }
.mm-pb-7,
.wp-site-blocks .mm-pb-7,
.mm-sec .mm-pb-7,
.mm-card .mm-pb-7 { padding-bottom: 1.75rem; }
.mm-pt-8,
.wp-site-blocks .mm-pt-8,
.mm-sec .mm-pt-8,
.mm-card .mm-pt-8 { padding-top: 2rem; }
.mm-pb-8,
.wp-site-blocks .mm-pb-8,
.mm-sec .mm-pb-8,
.mm-card .mm-pb-8 { padding-bottom: 2rem; }
.mm-pt-10,
.wp-site-blocks .mm-pt-10,
.mm-sec .mm-pt-10,
.mm-card .mm-pt-10 { padding-top: 2.5rem; }
.mm-pb-10,
.wp-site-blocks .mm-pb-10,
.mm-sec .mm-pb-10,
.mm-card .mm-pb-10 { padding-bottom: 2.5rem; }
.mm-pt-16,
.wp-site-blocks .mm-pt-16,
.mm-sec .mm-pt-16,
.mm-card .mm-pt-16 { padding-top: 4rem; }
.mm-pb-16,
.wp-site-blocks .mm-pb-16,
.mm-sec .mm-pb-16,
.mm-card .mm-pb-16 { padding-bottom: 4rem; }
.mm-pt-20,
.wp-site-blocks .mm-pt-20,
.mm-sec .mm-pt-20,
.mm-card .mm-pt-20 { padding-top: 5rem; }
.mm-pb-20,
.wp-site-blocks .mm-pb-20,
.mm-sec .mm-pb-20,
.mm-card .mm-pb-20 { padding-bottom: 5rem; }
.mm-pa-4,
.wp-site-blocks .mm-pa-4,
.mm-sec .mm-pa-4,
.mm-card .mm-pa-4 { padding: 1rem; }
.mm-pa-5,
.wp-site-blocks .mm-pa-5,
.mm-sec .mm-pa-5,
.mm-card .mm-pa-5 { padding: 1.25rem; }
.mm-pa-6,
.wp-site-blocks .mm-pa-6,
.mm-sec .mm-pa-6,
.mm-card .mm-pa-6 { padding: 1.5rem; }
.mm-pa-7,
.wp-site-blocks .mm-pa-7,
.mm-sec .mm-pa-7,
.mm-card .mm-pa-7 { padding: 1.75rem; }
.mm-pa-8,
.wp-site-blocks .mm-pa-8,
.mm-sec .mm-pa-8,
.mm-card .mm-pa-8 { padding: 2rem; }
.mm-pa-9,
.wp-site-blocks .mm-pa-9,
.mm-sec .mm-pa-9,
.mm-card .mm-pa-9 { padding: 2.25rem; }
.mm-pa-10,
.wp-site-blocks .mm-pa-10,
.mm-sec .mm-pa-10,
.mm-card .mm-pa-10 { padding: 2.5rem; }

@media ( width >= 768px ) {
	.mm-py-md-10,
	.wp-site-blocks .mm-py-md-10,
	.mm-sec .mm-py-md-10,
	.mm-card .mm-py-md-10 { padding-block: 2.5rem; }
	.mm-py-md-12,
	.wp-site-blocks .mm-py-md-12,
	.mm-sec .mm-py-md-12,
	.mm-card .mm-py-md-12 { padding-block: 3rem; }
	.mm-py-md-14,
	.wp-site-blocks .mm-py-md-14,
	.mm-sec .mm-py-md-14,
	.mm-card .mm-py-md-14 { padding-block: 3.5rem; }
	.mm-py-md-16,
	.wp-site-blocks .mm-py-md-16,
	.mm-sec .mm-py-md-16,
	.mm-card .mm-py-md-16 { padding-block: 4rem; }
	.mm-py-md-20,
	.wp-site-blocks .mm-py-md-20,
	.mm-sec .mm-py-md-20,
	.mm-card .mm-py-md-20 { padding-block: 5rem; }
	.mm-py-md-24,
	.wp-site-blocks .mm-py-md-24,
	.mm-sec .mm-py-md-24,
	.mm-card .mm-py-md-24 { padding-block: 6rem; }
	.mm-pb-md-16,
	.wp-site-blocks .mm-pb-md-16,
	.mm-sec .mm-pb-md-16,
	.mm-card .mm-pb-md-16 { padding-bottom: 4rem; }
	.mm-pb-md-20,
	.wp-site-blocks .mm-pb-md-20,
	.mm-sec .mm-pb-md-20,
	.mm-card .mm-pb-md-20 { padding-bottom: 5rem; }
	.mm-pa-md-9,
	.wp-site-blocks .mm-pa-md-9,
	.mm-sec .mm-pa-md-9,
	.mm-card .mm-pa-md-9 { padding: 2.25rem; }
	.mm-pa-md-10,
	.wp-site-blocks .mm-pa-md-10,
	.mm-sec .mm-pa-md-10,
	.mm-card .mm-pa-md-10 { padding: 2.5rem; }
}

.mm-sec--white,
.wp-site-blocks .mm-sec--white { background: #fff; }

.mm-sec--banded,
.wp-site-blocks .mm-sec--banded {
	border-top: 1px solid var( --mm-line );
	border-bottom: 1px solid var( --mm-line );
}

.mm-sec--cream,
.wp-site-blocks .mm-sec--cream { background: var( --mm-cream ); }

.mm-sec--pale,
.wp-site-blocks .mm-sec--pale { background: var( --mm-pale ); }

.mm-sec--ink,
.wp-site-blocks .mm-sec--ink {
	background: var( --mm-ink );
	color: var( --mm-cream );
}

.mm-sec--ruled,
.wp-site-blocks .mm-sec--ruled { border-top: 1px solid var( --mm-line ); }

.mm-narrow,
.wp-site-blocks .mm-narrow { max-width: 64rem; }

.mm-narrower,
.wp-site-blocks .mm-narrower { max-width: 48rem; }

/* --------------------------------------------------------------- typography */

.mm-sec .mm-eyebrow a { color: inherit; text-decoration: none; }
.mm-sec .mm-eyebrow a:hover { color: var( --mm-cobalt ); }

.mm-sec p,
.wp-site-blocks .mm-sec p { margin: 0; }

/* Structural only. Live sets size, leading, colour and measure with its own
   classes; anything imposed here would beat them. */
.mm-sec .mm-p,
.wp-site-blocks .mm-sec .mm-p { margin: 0; }

.mm-sec .mm-lead,
.wp-site-blocks .mm-sec .mm-lead { margin: 0; }

.mm-sec .mm-note-text,
.wp-site-blocks .mm-sec .mm-note-text { margin: 0; }

.mm-sec .mm-strong { font-weight: 500; color: var( --mm-ink ); }

.mm-sec .mm-caption,
.wp-site-blocks .mm-sec .mm-caption {
	margin-top: 0.75rem;
	font-size: 0.75rem;
	line-height: 1.6;
	color: var( --mm-charcoal );
}

.mm-sec .mm-list,
.wp-site-blocks .mm-sec .mm-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mm-sec .mm-note,
.wp-site-blocks .mm-sec .mm-note {
	margin-top: 0;
	border-left: 2px solid var( --mm-cobalt );
	padding-left: 1.25rem;
}

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

.mm-grid,
.wp-site-blocks .mm-grid {
	display: grid;
	gap: 3rem;
	grid-template-columns: 1fr;
}

.mm-grid > *,
.wp-site-blocks .mm-grid > * { margin-block-start: 0; min-width: 0; }

/* Hairline grids: a 1px gap over a line-coloured, bordered background. */
.mm-sec .mm-gap-px,  .wp-site-blocks .mm-sec .mm-gap-px  { gap: 1px; }
.mm-sec .mm-bg-line, .wp-site-blocks .mm-sec .mm-bg-line { background: var( --mm-line ); }
.mm-sec .mm-bordered, .wp-site-blocks .mm-sec .mm-bordered { border: 1px solid var( --mm-line ); }

/* Grid column counts, each at the Tailwind breakpoint live declares. */
.mm-grid--1, .wp-site-blocks .mm-grid--1 { grid-template-columns: repeat( 1, minmax( 0, 1fr ) ); }
.mm-grid--2, .wp-site-blocks .mm-grid--2 { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
.mm-grid--3, .wp-site-blocks .mm-grid--3 { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
.mm-grid--4, .wp-site-blocks .mm-grid--4 { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }
.mm-grid--5, .wp-site-blocks .mm-grid--5 { grid-template-columns: repeat( 5, minmax( 0, 1fr ) ); }
.mm-grid--6, .wp-site-blocks .mm-grid--6 { grid-template-columns: repeat( 6, minmax( 0, 1fr ) ); }
.mm-grid--7, .wp-site-blocks .mm-grid--7 { grid-template-columns: repeat( 7, minmax( 0, 1fr ) ); }
.mm-grid--8, .wp-site-blocks .mm-grid--8 { grid-template-columns: repeat( 8, minmax( 0, 1fr ) ); }
.mm-grid--9, .wp-site-blocks .mm-grid--9 { grid-template-columns: repeat( 9, minmax( 0, 1fr ) ); }
.mm-grid--10, .wp-site-blocks .mm-grid--10 { grid-template-columns: repeat( 10, minmax( 0, 1fr ) ); }
.mm-grid--11, .wp-site-blocks .mm-grid--11 { grid-template-columns: repeat( 11, minmax( 0, 1fr ) ); }
.mm-grid--12, .wp-site-blocks .mm-grid--12 { grid-template-columns: repeat( 12, minmax( 0, 1fr ) ); }

@media ( width >= 640px ) {
	.mm-grid--sm-1,
	.wp-site-blocks .mm-grid--sm-1 { grid-template-columns: repeat( 1, minmax( 0, 1fr ) ); }
	.mm-grid--sm-2,
	.wp-site-blocks .mm-grid--sm-2 { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.mm-grid--sm-3,
	.wp-site-blocks .mm-grid--sm-3 { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
	.mm-grid--sm-4,
	.wp-site-blocks .mm-grid--sm-4 { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }
	.mm-grid--sm-5,
	.wp-site-blocks .mm-grid--sm-5 { grid-template-columns: repeat( 5, minmax( 0, 1fr ) ); }
	.mm-grid--sm-6,
	.wp-site-blocks .mm-grid--sm-6 { grid-template-columns: repeat( 6, minmax( 0, 1fr ) ); }
	.mm-grid--sm-7,
	.wp-site-blocks .mm-grid--sm-7 { grid-template-columns: repeat( 7, minmax( 0, 1fr ) ); }
	.mm-grid--sm-8,
	.wp-site-blocks .mm-grid--sm-8 { grid-template-columns: repeat( 8, minmax( 0, 1fr ) ); }
	.mm-grid--sm-9,
	.wp-site-blocks .mm-grid--sm-9 { grid-template-columns: repeat( 9, minmax( 0, 1fr ) ); }
	.mm-grid--sm-10,
	.wp-site-blocks .mm-grid--sm-10 { grid-template-columns: repeat( 10, minmax( 0, 1fr ) ); }
	.mm-grid--sm-11,
	.wp-site-blocks .mm-grid--sm-11 { grid-template-columns: repeat( 11, minmax( 0, 1fr ) ); }
	.mm-grid--sm-12,
	.wp-site-blocks .mm-grid--sm-12 { grid-template-columns: repeat( 12, minmax( 0, 1fr ) ); }
}

@media ( width >= 768px ) {
	.mm-grid--md-1,
	.wp-site-blocks .mm-grid--md-1 { grid-template-columns: repeat( 1, minmax( 0, 1fr ) ); }
	.mm-grid--md-2,
	.wp-site-blocks .mm-grid--md-2 { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.mm-grid--md-3,
	.wp-site-blocks .mm-grid--md-3 { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
	.mm-grid--md-4,
	.wp-site-blocks .mm-grid--md-4 { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }
	.mm-grid--md-5,
	.wp-site-blocks .mm-grid--md-5 { grid-template-columns: repeat( 5, minmax( 0, 1fr ) ); }
	.mm-grid--md-6,
	.wp-site-blocks .mm-grid--md-6 { grid-template-columns: repeat( 6, minmax( 0, 1fr ) ); }
	.mm-grid--md-7,
	.wp-site-blocks .mm-grid--md-7 { grid-template-columns: repeat( 7, minmax( 0, 1fr ) ); }
	.mm-grid--md-8,
	.wp-site-blocks .mm-grid--md-8 { grid-template-columns: repeat( 8, minmax( 0, 1fr ) ); }
	.mm-grid--md-9,
	.wp-site-blocks .mm-grid--md-9 { grid-template-columns: repeat( 9, minmax( 0, 1fr ) ); }
	.mm-grid--md-10,
	.wp-site-blocks .mm-grid--md-10 { grid-template-columns: repeat( 10, minmax( 0, 1fr ) ); }
	.mm-grid--md-11,
	.wp-site-blocks .mm-grid--md-11 { grid-template-columns: repeat( 11, minmax( 0, 1fr ) ); }
	.mm-grid--md-12,
	.wp-site-blocks .mm-grid--md-12 { grid-template-columns: repeat( 12, minmax( 0, 1fr ) ); }
}

@media ( width >= 1024px ) {
	.mm-grid--lg-1,
	.wp-site-blocks .mm-grid--lg-1 { grid-template-columns: repeat( 1, minmax( 0, 1fr ) ); }
	.mm-grid--lg-2,
	.wp-site-blocks .mm-grid--lg-2 { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.mm-grid--lg-3,
	.wp-site-blocks .mm-grid--lg-3 { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
	.mm-grid--lg-4,
	.wp-site-blocks .mm-grid--lg-4 { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }
	.mm-grid--lg-5,
	.wp-site-blocks .mm-grid--lg-5 { grid-template-columns: repeat( 5, minmax( 0, 1fr ) ); }
	.mm-grid--lg-6,
	.wp-site-blocks .mm-grid--lg-6 { grid-template-columns: repeat( 6, minmax( 0, 1fr ) ); }
	.mm-grid--lg-7,
	.wp-site-blocks .mm-grid--lg-7 { grid-template-columns: repeat( 7, minmax( 0, 1fr ) ); }
	.mm-grid--lg-8,
	.wp-site-blocks .mm-grid--lg-8 { grid-template-columns: repeat( 8, minmax( 0, 1fr ) ); }
	.mm-grid--lg-9,
	.wp-site-blocks .mm-grid--lg-9 { grid-template-columns: repeat( 9, minmax( 0, 1fr ) ); }
	.mm-grid--lg-10,
	.wp-site-blocks .mm-grid--lg-10 { grid-template-columns: repeat( 10, minmax( 0, 1fr ) ); }
	.mm-grid--lg-11,
	.wp-site-blocks .mm-grid--lg-11 { grid-template-columns: repeat( 11, minmax( 0, 1fr ) ); }
	.mm-grid--lg-12,
	.wp-site-blocks .mm-grid--lg-12 { grid-template-columns: repeat( 12, minmax( 0, 1fr ) ); }
	.mm-col-1, .wp-site-blocks .mm-col-1 { grid-column: span 1; }
	.mm-col-2, .wp-site-blocks .mm-col-2 { grid-column: span 2; }
	.mm-col-3, .wp-site-blocks .mm-col-3 { grid-column: span 3; }
	.mm-col-4, .wp-site-blocks .mm-col-4 { grid-column: span 4; }
	.mm-col-5, .wp-site-blocks .mm-col-5 { grid-column: span 5; }
	.mm-col-6, .wp-site-blocks .mm-col-6 { grid-column: span 6; }
	.mm-col-7, .wp-site-blocks .mm-col-7 { grid-column: span 7; }
	.mm-col-8, .wp-site-blocks .mm-col-8 { grid-column: span 8; }
	.mm-col-9, .wp-site-blocks .mm-col-9 { grid-column: span 9; }
	.mm-col-10, .wp-site-blocks .mm-col-10 { grid-column: span 10; }
	.mm-col-11, .wp-site-blocks .mm-col-11 { grid-column: span 11; }
	.mm-col-12, .wp-site-blocks .mm-col-12 { grid-column: span 12; }
}

@media ( width >= 1280px ) {
	.mm-grid--xl-1,
	.wp-site-blocks .mm-grid--xl-1 { grid-template-columns: repeat( 1, minmax( 0, 1fr ) ); }
	.mm-grid--xl-2,
	.wp-site-blocks .mm-grid--xl-2 { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.mm-grid--xl-3,
	.wp-site-blocks .mm-grid--xl-3 { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
	.mm-grid--xl-4,
	.wp-site-blocks .mm-grid--xl-4 { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }
	.mm-grid--xl-5,
	.wp-site-blocks .mm-grid--xl-5 { grid-template-columns: repeat( 5, minmax( 0, 1fr ) ); }
	.mm-grid--xl-6,
	.wp-site-blocks .mm-grid--xl-6 { grid-template-columns: repeat( 6, minmax( 0, 1fr ) ); }
	.mm-grid--xl-7,
	.wp-site-blocks .mm-grid--xl-7 { grid-template-columns: repeat( 7, minmax( 0, 1fr ) ); }
	.mm-grid--xl-8,
	.wp-site-blocks .mm-grid--xl-8 { grid-template-columns: repeat( 8, minmax( 0, 1fr ) ); }
	.mm-grid--xl-9,
	.wp-site-blocks .mm-grid--xl-9 { grid-template-columns: repeat( 9, minmax( 0, 1fr ) ); }
	.mm-grid--xl-10,
	.wp-site-blocks .mm-grid--xl-10 { grid-template-columns: repeat( 10, minmax( 0, 1fr ) ); }
	.mm-grid--xl-11,
	.wp-site-blocks .mm-grid--xl-11 { grid-template-columns: repeat( 11, minmax( 0, 1fr ) ); }
	.mm-grid--xl-12,
	.wp-site-blocks .mm-grid--xl-12 { grid-template-columns: repeat( 12, minmax( 0, 1fr ) ); }
}

/* Tailwind's space-y-N: a top margin on every child but the first. */

.mm-row,
.wp-site-blocks .mm-row { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }

.mm-row > *,
.wp-site-blocks .mm-row > * { margin-block-start: 0; }

.mm-actions,
.wp-site-blocks .mm-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0;
}


.mm-sec .mm-img,
.wp-site-blocks .mm-sec .mm-img { margin: 0; }

.mm-sec .mm-img img,
.wp-site-blocks .mm-sec .mm-img img {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid var( --mm-line );
	object-fit: cover;
}

.mm-figure, .wp-site-blocks .mm-figure { margin: 0; }

/* -------------------------------------------------------- definition rows */

.mm-dl,
.wp-site-blocks .mm-dl { margin-top: 0; }

/* Live draws these rules with Tailwind's divide-y / border-y, so the row
   separators and the outer band are two different things. */
.mm-dl--ruled > .mm-dl__row + .mm-dl__row,
.wp-site-blocks .mm-dl--ruled > .mm-dl__row + .mm-dl__row {
	border-top: 1px solid var( --mm-line );
}

.mm-bordered-y, .wp-site-blocks .mm-bordered-y {
	border-top: 1px solid var( --mm-line );
	border-bottom: 1px solid var( --mm-line );
}

.mm-bordered-t, .wp-site-blocks .mm-bordered-t { border-top: 1px solid var( --mm-line ); }

.mm-sec .mm-dt :where( h1, h2, h3, h4, h5, h6 ) { color: var( --mm-ink ); }

/* Structural markers only: live sets the type on the element itself, so a
   marker carrying a size would beat the size class next to it. */
.mm-sec .mm-dt,
.wp-site-blocks .mm-sec .mm-dt { margin: 0; }

.mm-sec .mm-dd,
.wp-site-blocks .mm-sec .mm-dd { margin: 0; }

/* ------------------------------------------------------------------- cards */

.mm-cards,
.wp-site-blocks .mm-cards {
	display: grid;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mm-cards > *,
.wp-site-blocks .mm-cards > * { margin-block-start: 0; }

.mm-cards li,
.wp-site-blocks .mm-cards li,
:root :where( .mm-cards li ) { margin-top: 0; }

@media ( width >= 640px ) {
	.mm-cards--2, .mm-cards--3, .mm-cards--4,
	.wp-site-blocks .mm-cards--2,
	.wp-site-blocks .mm-cards--3,
	.wp-site-blocks .mm-cards--4 { grid-template-columns: repeat( 2, 1fr ); }
}

@media ( width >= 1024px ) {
	.mm-cards--3, .wp-site-blocks .mm-cards--3 { grid-template-columns: repeat( 3, 1fr ); }
	.mm-cards--4, .wp-site-blocks .mm-cards--4 { grid-template-columns: repeat( 4, 1fr ); }
}

.mm-card,
.wp-site-blocks .mm-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var( --mm-line );
}

.mm-cards--plain .mm-card,
.wp-site-blocks .mm-cards--plain .mm-card { border: 1px solid var( --mm-line ); }

.mm-card > *,
.wp-site-blocks .mm-card > * { margin-block-start: 0; }

.mm-card p,
.wp-site-blocks .mm-card p { margin: 0; }

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

.mm-pcard__media,
.wp-site-blocks .mm-pcard__media {
	position: relative;
	display: block;
	overflow: hidden;
}

.mm-pcard__img,
.wp-site-blocks .mm-pcard__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.mm-pcard__img--hover,
.wp-site-blocks .mm-pcard__img--hover {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.mm-pcard__media:hover .mm-pcard__img { transform: scale( 1.03 ); }
.mm-pcard__media:hover .mm-pcard__img--hover { opacity: 1; }

.mm-pcard__body,
.wp-site-blocks .mm-pcard__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.25rem;
}

.mm-pcard__title,
.wp-site-blocks .mm-pcard__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 500;
}

.mm-pcard__title a { color: inherit; text-decoration: none; }
.mm-pcard__title a:hover { color: var( --mm-cobalt ); }

.mm-card .mm-pcard__desc,
.wp-site-blocks .mm-card .mm-pcard__desc {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.65;
	color: var( --mm-charcoal );
}

.mm-card .mm-pcard__price,
.wp-site-blocks .mm-card .mm-pcard__price { margin-top: 1rem; font-size: 1rem; }

.mm-card .mm-pcard__stock,
.wp-site-blocks .mm-card .mm-pcard__stock {
	margin-top: 0.25rem;
	font-size: 0.875rem;
	color: var( --mm-charcoal );
}

.mm-pcard__form,
.wp-site-blocks .mm-pcard__form {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: flex-end;
}

.mm-pcard .mm-actions,
.wp-site-blocks .mm-pcard .mm-actions { margin-top: 1.25rem; }

/* Woo prints a variable product's price as a range; live shows one price. */
.mm-pcard__price .woocommerce-Price-amount,
.mm-product__price .woocommerce-Price-amount { white-space: nowrap; }

/* --------------------------------------------------------- colour swatches */

.mm-swatches,
.wp-site-blocks .mm-swatches {
	margin: 1rem 0 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.mm-swatches__row,
.wp-site-blocks .mm-swatches__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.mm-swatch,
.wp-site-blocks .mm-swatch { display: inline-flex; cursor: pointer; }

.mm-swatch input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

/* Live: button.border.px-3.py-1.text-sm — 14px at Tailwind's paired leading. */
.mm-swatch span {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.75rem;
	border: 1px solid var( --mm-line );
	font-size: 0.875rem;
	line-height: 1.42857;
}

.mm-swatch input:checked + span {
	border-color: var( --mm-ink );
	background: var( --mm-ink );
	color: var( --mm-cream );
}

.mm-swatch input:focus-visible + span {
	outline: 2px solid var( --mm-cobalt );
	outline-offset: 2px;
}

/* ------------------------------------------------------------- range cards */

.mm-ccard__img,
.wp-site-blocks .mm-ccard__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.mm-ccard__body,
.wp-site-blocks .mm-ccard__body { padding: 1.5rem; }

.mm-ccard__title,
.wp-site-blocks .mm-ccard__title { margin: 0; font-size: 1.125rem; }

.mm-ccard__title a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }

.mm-panel .mm-ccard__desc,
.wp-site-blocks .mm-panel .mm-ccard__desc {
	margin-top: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.65;
	color: var( --mm-charcoal );
}

.mm-panel .mm-ccard__count,
.wp-site-blocks .mm-panel .mm-ccard__count {
	margin-top: 1rem;
	font-size: 0.875rem;
	color: var( --mm-charcoal );
}

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

.mm-form,
.wp-site-blocks .mm-form { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; }

.mm-field,
.wp-site-blocks .mm-field { display: block; }

.mm-label,
.wp-site-blocks .mm-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: var( --mm-ink );
}

.mm-input,
.wp-site-blocks .mm-input {
	display: block;
	width: 100%;
	margin-top: 0.5rem;
	padding: 0.75rem 1rem;
	border: 1px solid var( --mm-line );
	border-radius: 0;
	background: #fff;
	font-family: inherit;
	font-size: 0.875rem;
	color: var( --mm-ink );
}

.mm-input:focus {
	border-color: var( --mm-cobalt );
	outline: 2px solid var( --mm-cobalt );
	outline-offset: -1px;
}

.mm-check,
.wp-site-blocks .mm-check { display: flex; align-items: flex-start; gap: 0.75rem; }

.mm-check input { margin-top: 0.3rem; width: 1rem; height: 1rem; accent-color: var( --mm-cobalt ); }

.mm-check__label,
.wp-site-blocks .mm-check__label {
	font-size: 0.75rem;
	line-height: 1.65;
	color: var( --mm-charcoal );
}

.mm-form button { align-self: flex-start; }

.mm-filters,
.wp-site-blocks .mm-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem;
	margin-top: 1.5rem;
}

.mm-filters .mm-field,
.wp-site-blocks .mm-filters .mm-field { flex: 0 0 auto; }

.mm-filters .mm-input,
.wp-site-blocks .mm-filters .mm-input {
	width: auto;
	margin-top: 0.5rem;
	padding: 0.5rem 0.75rem;
}

.mm-filters .mm-field--action { align-self: flex-end; }
.mm-filters #q { width: 16rem; max-width: 100%; }

/* Live sets the count `mt-4` under the filter bar and the grid `mt-8` under
   the count. `.mm-sec p { margin: 0 }` and `.mm-cards { margin: 0 }` are each
   an element or a class deeper than these component rules, so both offsets
   have to be reasserted with the competing selector named. */
.mm-count,
.wp-site-blocks .mm-count,
.mm-sec p.mm-count,
.wp-site-blocks .mm-sec p.mm-count {
	margin-top: 1rem;
	font-size: 0.875rem;
	color: var( --mm-charcoal );
}

.mm-count + .mm-cards,
.wp-site-blocks .mm-count + .mm-cards { margin-top: 2rem; }

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


.mm-product__top > *,
.wp-site-blocks .mm-product__top > * { margin-block-start: 0; min-width: 0; }

.mm-product__img,
.wp-site-blocks .mm-product__img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var( --mm-line );
	object-fit: cover;
}

.mm-product__thumbs,
.wp-site-blocks .mm-product__thumbs {
	display: flex;
	gap: 0.75rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.mm-product__thumbs li,
:root :where( .mm-product__thumbs li ) { margin-top: 0; }

.mm-product__thumbs a { display: block; border: 1px solid var( --mm-line ); padding: 2px; }
.mm-product__thumbs a:hover { border-color: var( --mm-ink ); }
.mm-product__thumbs img { display: block; width: 5rem; height: 5rem; object-fit: cover; }

.mm-sec .mm-product__title,
.wp-site-blocks .mm-sec .mm-product__title { margin-top: 1rem; }

.mm-sec .mm-product__price,
.wp-site-blocks .mm-sec .mm-product__price {
	margin-top: 1.5rem;
	font-size: 1.5rem;
	color: var( --mm-ink );
}

.mm-sec .mm-product__stock,
.wp-site-blocks .mm-sec .mm-product__stock {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	color: var( --mm-charcoal );
}

.mm-product__form,
.wp-site-blocks .mm-product__form { margin-top: 1.5rem; }

.mm-product__buy,
.wp-site-blocks .mm-product__buy {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem;
	margin-top: 1.5rem;
}

.mm-field--qty .mm-input { width: 6rem; }

.mm-sec .mm-product__terms,
.wp-site-blocks .mm-sec .mm-product__terms {
	margin-top: 2rem;
	font-size: 0.875rem;
}

.mm-product__spec,
.wp-site-blocks .mm-product__spec { margin-top: 2.5rem; }

.mm-pairs .mm-pair,
.wp-site-blocks .mm-pairs .mm-pair { flex-direction: row; }

.mm-pair__img,
.wp-site-blocks .mm-pair__img {
	flex: 0 0 auto;
	width: 7rem;
	height: 7rem;
	object-fit: cover;
}

.mm-pair__title,
.wp-site-blocks .mm-pair__title { margin: 0; font-size: 1rem; font-weight: 500; }
.mm-pair__title a { color: inherit; text-decoration: none; text-underline-offset: 4px; }
.mm-pair__title a:hover { text-decoration: underline; }

.mm-card .mm-pair__price,
.wp-site-blocks .mm-card .mm-pair__price { margin-top: 0.75rem; font-size: 0.875rem; }

/* ------------------------------------------------------- woocommerce pages

   Cart, checkout, the order-pay step and the order-received page. WooCommerce
   ships its own type, borders and buttons; left alone they read as a different
   site bolted onto this one. Everything below re-expresses Woo's markup in the
   tokens the rest of the theme uses — no new colours or sizes are invented.

   The four pages share one shell so the content column lines up with every
   other page, header to footer.
   ------------------------------------------------------------------------- */

/* The vertical rhythm belongs to the page wrapper, not to any block inside
   it. It was briefly set on `.woocommerce`, which on these pages is only the
   store-notices div — normally empty, so an invisible element was reserving
   136px of blank space above the heading and again below the content.

   Horizontal placement is left to the constrained layout in the templates
   (theme.json contentSize, 1360px); the gutter below reproduces .mm-shell so
   content never touches the viewport edge on a narrow screen. */

.mm-main.mm-commerce {
	padding-block: 2.5rem 4rem;
	font-family: var( --mm-font-body );
	color: var( --mm-ink );
}

.mm-commerce > * { padding-inline: var( --mm-gutter ); }

/* Empty notices must not push the page down. */
.mm-commerce > .wc-block-store-notices:not( :has( .woocommerce-message, .woocommerce-error, .woocommerce-info ) ) {
	margin-block: 0;
	padding-block: 0;
}

.mm-commerce > .wp-block-post-title {
	margin-block: 0 2rem;
	font-family: var( --mm-font-display );
	font-weight: 500;
	letter-spacing: -0.01em;
}

/* Woo sets its own faces on headings inside the blocks. */
.mm-main .wc-block-components-title,
.mm-main .wc-block-cart__totals-title,
.mm-main .wc-block-components-checkout-step__title,
.mm-main .woocommerce-order-details__title,
.mm-main .woocommerce-column__title,
.mm-main .mm-pay__title {
	font-family: var( --mm-font-display );
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var( --mm-ink );
	text-transform: none;
}

.mm-main .wc-block-components-checkout-step__description,
.mm-main .wc-block-components-product-metadata,
.mm-main .wc-block-components-order-summary-item__description {
	color: var( --mm-muted );
}

/* -- rules ---------------------------------------------------------------- */

.mm-main .wc-block-cart-items,
.mm-main .wc-block-cart-items__row,
.mm-main .wc-block-components-order-summary-item,
.mm-main .woocommerce table.shop_table,
.mm-main .woocommerce table.shop_table td,
.mm-main .woocommerce table.shop_table th {
	border-color: var( --mm-line );
}

.mm-main .wc-block-cart-items__header {
	border-bottom: 1px solid var( --mm-ink );
	font-family: var( --mm-font-body );
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --mm-ink );
}

/* -- totals panel --------------------------------------------------------- */

.mm-main .wc-block-cart__sidebar .wc-block-components-sidebar,
.mm-main .wc-block-checkout__sidebar .wc-block-components-sidebar {
	background: var( --mm-pale );
	border: 1px solid var( --mm-border );
	border-radius: var( --mm-radius );
	padding: 1.75rem;
}

.mm-main .wc-block-components-totals-item__label { color: var( --mm-charcoal ); }
.mm-main .wc-block-components-totals-item__value { font-variant-numeric: tabular-nums; }

.mm-main .wc-block-components-totals-footer-item {
	border-top: 1px solid var( --mm-line );
	font-family: var( --mm-font-display );
	font-size: 1.125rem;
}

/* -- fields --------------------------------------------------------------- */

.mm-main .wc-block-components-text-input input,
.mm-main .wc-block-components-textarea,
.mm-main .wc-block-components-select__container,
.mm-main .woocommerce form .input-text,
.mm-main .woocommerce form select {
	border: 1px solid var( --mm-line );
	border-radius: var( --mm-radius );
	background: #fff;
	font-family: var( --mm-font-body );
	color: var( --mm-ink );
}

.mm-main .wc-block-components-text-input input:focus,
.mm-main .wc-block-components-textarea:focus,
.mm-main .woocommerce form .input-text:focus {
	border-color: var( --mm-cobalt );
	outline: 2px solid rgb( 49 92 245 / 0.18 );
	outline-offset: 0;
}

.mm-main .wc-block-components-text-input label,
.mm-main .wc-block-components-checkout-step__heading-content {
	color: var( --mm-muted );
}

/* Payment method rows read as cards, matching the product grid's hairlines. */
.mm-main .wc-block-components-radio-control__option {
	border: 1px solid var( --mm-line );
	border-radius: var( --mm-radius );
	margin-bottom: 0.5rem;
	padding: 1rem 1rem 1rem 3rem;
}

.mm-main .wc-block-components-radio-control__option--checked-option-highlighted,
.mm-main .wc-block-components-radio-control__option:has( input:checked ) {
	border-color: var( --mm-cobalt );
	background: rgb( 49 92 245 / 0.04 );
}

/* -- buttons -------------------------------------------------------------- */

.mm-main .woocommerce a.button,
.mm-main .woocommerce button.button,
.mm-main .wc-block-components-button,
.mm-main .wc-block-cart__submit-button,
.mm-main .wc-block-components-checkout-place-order-button,
.mm-main .mm-pay__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.875rem 1.75rem;
	border: 1px solid var( --mm-cobalt );
	border-radius: 2px;
	background: var( --mm-cobalt );
	color: #fff;
	font-family: var( --mm-font-body );
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: background 0.16s, color 0.16s, border-color 0.16s;
}

.mm-main .woocommerce a.button:hover,
.mm-main .woocommerce button.button:hover,
.mm-main .wc-block-components-button:not( :disabled ):hover,
.mm-main .wc-block-cart__submit-button:hover,
.mm-main .wc-block-components-checkout-place-order-button:hover,
.mm-main .mm-pay__submit:not( :disabled ):hover {
	background: var( --mm-cobalt-hover );
	border-color: var( --mm-cobalt-hover );
	color: #fff;
}

.mm-main .wc-block-components-button:disabled,
.mm-main .mm-pay__submit:disabled {
	background: var( --mm-line );
	border-color: var( --mm-line );
	color: var( --mm-muted );
	cursor: not-allowed;
}

/* The "return to shop" style links are secondary, not primary. */
.mm-main .wc-block-cart__submit-container ~ .wc-block-components-button--text,
.mm-main .wc-block-components-button.wc-block-components-button--text {
	background: none;
	border: 0;
	color: var( --mm-ink );
	text-decoration: underline;
	padding: 0;
}

/* -- notices -------------------------------------------------------------- */

.mm-main .wc-block-components-notice-banner,
.mm-main .woocommerce-message,
.mm-main .woocommerce-info,
.mm-main .woocommerce-error {
	border-radius: var( --mm-radius );
	border-left-width: 3px;
	font-family: var( --mm-font-body );
}

.mm-main .wc-block-components-notice-banner.is-error,
.mm-main .woocommerce-error { border-left-color: var( --mm-coral ); }

/* -- order received ------------------------------------------------------- */

.mm-main .woocommerce-order,
.mm-main .wp-block-woocommerce-order-confirmation-status,
.mm-main .wp-block-woocommerce-order-confirmation-summary {
	font-family: var( --mm-font-body );
}

.mm-main .woocommerce-order-overview,
.mm-main .wc-block-order-confirmation-summary-list {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 3rem;
	margin: 2rem 0;
	padding: 1.75rem;
	list-style: none;
	background: var( --mm-pale );
	border: 1px solid var( --mm-border );
	border-radius: var( --mm-radius );
}

.mm-main .woocommerce-order-overview li,
.mm-main .wc-block-order-confirmation-summary-list-item {
	margin: 0;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --mm-muted );
}

.mm-main .woocommerce-order-overview li strong,
.mm-main .wc-block-order-confirmation-summary-list-item__value {
	display: block;
	margin-top: 0.35rem;
	font-family: var( --mm-font-display );
	font-size: 1rem;
	letter-spacing: 0;
	text-transform: none;
	color: var( --mm-ink );
}

/* -- the rpayz pay step --------------------------------------------------- */

.mm-main .mm-pay { max-width: 34rem; }

.mm-main .mm-pay__title {
	margin: 0 0 0.5rem;
	font-size: 1.875rem;
	line-height: 1.2;
}

.mm-main .mm-pay__total {
	margin: 0 0 2rem;
	color: var( --mm-muted );
}

/* The SDK mounts its card fields in here; give it room before it paints so
   the button does not jump up the page as the iframe loads. */
.mm-main .mm-pay__fields {
	min-height: 14rem;
	margin-bottom: 1.5rem;
}

.mm-main .mm-pay__submit { width: 100%; }

.mm-main .mm-pay__error {
	margin-bottom: 1rem;
	padding: 0.875rem 1rem;
	border: 1px solid var( --mm-coral );
	border-left-width: 3px;
	border-radius: var( --mm-radius );
	background: rgb( 240 120 104 / 0.06 );
	color: var( --mm-ink );
	font-size: 0.875rem;
}

.mm-main .mm-pay__note {
	margin-top: 1.25rem;
	font-size: 0.8125rem;
	color: var( --mm-muted );
}

/* =========================================================================
   9. Type scale, measure and padding utilities

   These mirror the Tailwind classes live carries on individual elements.
   They are written at two classes so they beat the section rules above,
   which are class-plus-element and would otherwise win.
   ========================================================================= */

.mm-sec .mm-t-xs,   .wp-site-blocks .mm-sec .mm-t-xs   { font-size: 0.75rem; line-height: 1.3333; }
.mm-sec .mm-t-sm,   .wp-site-blocks .mm-sec .mm-t-sm   { font-size: 0.875rem; line-height: 1.42857; }
.mm-sec .mm-t-base, .wp-site-blocks .mm-sec .mm-t-base { font-size: 1rem; line-height: 1.5; }
.mm-sec .mm-t-lg,   .wp-site-blocks .mm-sec .mm-t-lg   { font-size: 1.125rem; line-height: 1.5556; }
.mm-sec .mm-t-xl,   .wp-site-blocks .mm-sec .mm-t-xl   { font-size: 1.25rem; line-height: 1.4; }
.mm-sec .mm-t-2xl,  .wp-site-blocks .mm-sec .mm-t-2xl  { font-size: 1.5rem; line-height: 1.3333; }
.mm-sec .mm-t-3xl,  .wp-site-blocks .mm-sec .mm-t-3xl  { font-size: 1.875rem; line-height: 1.2; }
.mm-sec .mm-t-4xl,  .wp-site-blocks .mm-sec .mm-t-4xl  { font-size: 2.25rem; line-height: 1.1111; }
.mm-sec .mm-t-5xl,  .wp-site-blocks .mm-sec .mm-t-5xl  { font-size: 3rem; line-height: 1; }
.mm-sec .mm-t-6xl,  .wp-site-blocks .mm-sec .mm-t-6xl  { font-size: 3.75rem; line-height: 1; }

@media ( width >= 768px ) {
	.mm-sec .mm-t-md-3xl, .wp-site-blocks .mm-sec .mm-t-md-3xl { font-size: 1.875rem; line-height: 1.2; }
	.mm-sec .mm-t-md-4xl, .wp-site-blocks .mm-sec .mm-t-md-4xl { font-size: 2.25rem; line-height: 1.1111; }
	.mm-sec .mm-t-md-5xl, .wp-site-blocks .mm-sec .mm-t-md-5xl { font-size: 3rem; line-height: 1; }
	.mm-sec .mm-t-md-6xl, .wp-site-blocks .mm-sec .mm-t-md-6xl { font-size: 3.75rem; line-height: 1; }
}

/* Leading and weight utilities come after the sizes so they win at the same
   specificity, exactly as Tailwind's own cascade orders them. */
.mm-sec .mm-lh-relaxed, .wp-site-blocks .mm-sec .mm-lh-relaxed { line-height: 1.625; }
.mm-sec .mm-lh-175,     .wp-site-blocks .mm-sec .mm-lh-175     { line-height: 1.75; }
.mm-sec .mm-lh-108,     .wp-site-blocks .mm-sec .mm-lh-108     { line-height: 1.08; }

.mm-sec .mm-fw-400, .wp-site-blocks .mm-sec .mm-fw-400 { font-weight: 400; }
.mm-sec .mm-fw-500, .wp-site-blocks .mm-sec .mm-fw-500 { font-weight: 500; }
.mm-sec .mm-fw-600, .wp-site-blocks .mm-sec .mm-fw-600 { font-weight: 600; }

.mm-sec .mm-mw-xl,  .wp-site-blocks .mm-sec .mm-mw-xl  { max-width: 36rem; }
.mm-sec .mm-mw-2xl, .wp-site-blocks .mm-sec .mm-mw-2xl { max-width: 42rem; }
.mm-sec .mm-mw-3xl, .wp-site-blocks .mm-sec .mm-mw-3xl { max-width: 48rem; }
.mm-sec .mm-mw-5xl, .wp-site-blocks .mm-sec .mm-mw-5xl { max-width: 64rem; }

.mm-pa-7, .wp-site-blocks .mm-pa-7 { padding: 1.75rem; }
.mm-pa-8, .wp-site-blocks .mm-pa-8 { padding: 2rem; }

@media ( width >= 768px ) {
	.mm-pa-md-9,  .wp-site-blocks .mm-pa-md-9  { padding: 2.25rem; }
	.mm-pa-md-10, .wp-site-blocks .mm-pa-md-10 { padding: 2.5rem; }
}


/* Live's underlined links inherit their colour; only true links go cobalt. */
.mm-sec .mm-link,
.wp-site-blocks .mm-sec .mm-link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.mm-sec .mm-link:hover { color: var( --mm-cobalt ); }

/* A padded card owns its own inner spacing; the section's first-child reset
   would otherwise collapse the top of it. */
.mm-sec .mm-card.mm-pa-7 > :first-child,
.mm-sec .mm-card.mm-pa-8 > :first-child { margin-top: 0; }

.mm-sec .mm-card .mm-dl,
.wp-site-blocks .mm-sec .mm-card .mm-dl { margin-top: 1.25rem; }

/* A row of facts: live lays these out as a grid with a rule down the left of
   each item, not as a bulleted list. */
.mm-sec .mm-facts,
.wp-site-blocks .mm-sec .mm-facts { gap: 1rem; }

.mm-sec .mm-fact,
.wp-site-blocks .mm-sec .mm-fact {
	margin: 0;
	border-left: 1px solid var( --mm-line );
	padding-left: 1rem;
	line-height: inherit;
	color: var( --mm-charcoal );
	max-width: none;
}

/* Text colours live sets per element. */
.mm-sec .mm-c-charcoal, .wp-site-blocks .mm-sec .mm-c-charcoal { color: var( --mm-charcoal ); }
.mm-sec .mm-c-ink,      .wp-site-blocks .mm-sec .mm-c-ink      { color: var( --mm-ink ); }
.mm-sec .mm-c-muted,    .wp-site-blocks .mm-sec .mm-c-muted    { color: var( --mm-muted ); }
.mm-sec .mm-c-cobalt,   .wp-site-blocks .mm-sec .mm-c-cobalt   { color: var( --mm-cobalt ); }

/* Arbitrary pixel sizes live sets inline: text-[11px] and text-[15px]. */
.mm-sec .mm-tp-11, .wp-site-blocks .mm-sec .mm-tp-11 { font-size: 11px; }
.mm-sec .mm-tp-15, .wp-site-blocks .mm-sec .mm-tp-15 { font-size: 15px; }

/* Live's hairline card grid: gap-px over a line-coloured background. */
.mm-sec .mm-cards--hair,
.wp-site-blocks .mm-sec .mm-cards--hair {
	display: grid;
	gap: 1px;
	background: var( --mm-line );
	border: 1px solid var( --mm-line );
	margin: 0;
	padding: 0;
	list-style: none;
}

.mm-sec .mm-cards--hair > *,
.wp-site-blocks .mm-sec .mm-cards--hair > * { border: 0; }

/* Component headings keep their own size against the reset. */
.mm-sec .mm-pcard__title, .mm-sec .mm-ccard__title, .mm-sec .mm-pair__title,
.mm-card .mm-pcard__title, .mm-card .mm-ccard__title, .mm-card .mm-pair__title { font-size: 1rem; }
.mm-sec .mm-ccard__title, .mm-panel .mm-ccard__title { font-size: 1.125rem; line-height: 1.5556; }
.mm-card .mm-pcard__title, .mm-card .mm-pair__title { font-weight: 500; }

/* Live's whole vertical rhythm: Tailwind margin-top on each element. */

/* A white panel without its own border — live's hairline grids draw the rules
   with a 1px gap over a line-coloured background instead. */
.mm-sec .mm-panel,
.wp-site-blocks .mm-sec .mm-panel { background: #fff; }

.mm-sec .mm-panel > *,
.wp-site-blocks .mm-sec .mm-panel > * { margin-block-start: 0; }

/* Grid and flex gaps, from live's own gap-* classes. */
.mm-sec .mm-gap-2, .wp-site-blocks .mm-sec .mm-gap-2,
.mm-card .mm-gap-2 { gap: 0.5rem; }
.mm-sec .mm-gap-3, .wp-site-blocks .mm-sec .mm-gap-3,
.mm-card .mm-gap-3 { gap: 0.75rem; }
.mm-sec .mm-gap-4, .wp-site-blocks .mm-sec .mm-gap-4,
.mm-card .mm-gap-4 { gap: 1rem; }
.mm-sec .mm-gap-5, .wp-site-blocks .mm-sec .mm-gap-5,
.mm-card .mm-gap-5 { gap: 1.25rem; }
.mm-sec .mm-gap-6, .wp-site-blocks .mm-sec .mm-gap-6,
.mm-card .mm-gap-6 { gap: 1.5rem; }
.mm-sec .mm-gap-8, .wp-site-blocks .mm-sec .mm-gap-8,
.mm-card .mm-gap-8 { gap: 2rem; }
.mm-sec .mm-gap-10, .wp-site-blocks .mm-sec .mm-gap-10,
.mm-card .mm-gap-10 { gap: 2.5rem; }
.mm-sec .mm-gap-12, .wp-site-blocks .mm-sec .mm-gap-12,
.mm-card .mm-gap-12 { gap: 3rem; }
.mm-sec .mm-gap-14, .wp-site-blocks .mm-sec .mm-gap-14,
.mm-card .mm-gap-14 { gap: 3.5rem; }

/* Flex alignment live sets on its header rows. */
.mm-sec .mm-justify-between, .wp-site-blocks .mm-sec .mm-justify-between { justify-content: space-between; }
.mm-sec .mm-justify-center,  .wp-site-blocks .mm-sec .mm-justify-center  { justify-content: center; }
.mm-sec .mm-justify-end,     .wp-site-blocks .mm-sec .mm-justify-end     { justify-content: flex-end; }
.mm-sec .mm-items-end,       .wp-site-blocks .mm-sec .mm-items-end       { align-items: flex-end; }
.mm-sec .mm-items-center,    .wp-site-blocks .mm-sec .mm-items-center    { align-items: center; }
.mm-sec .mm-items-start,     .wp-site-blocks .mm-sec .mm-items-start     { align-items: flex-start; }
.mm-sec .mm-wrap,            .wp-site-blocks .mm-sec .mm-wrap            { flex-wrap: wrap; }

/* Live's tables: hairline grid, 1rem cells, charcoal body text. */
.mm-sec table,
.wp-site-blocks .mm-sec table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var( --mm-line );
	background: #fff;
	font-size: 0.875rem;
	line-height: 1.42857;
	text-align: left;
}

.mm-sec table tr,
.wp-site-blocks .mm-sec table tr { border-bottom: 1px solid var( --mm-line ); }

.mm-sec table tr:last-child,
.wp-site-blocks .mm-sec table tr:last-child { border-bottom: 0; }

.mm-sec table th,
.wp-site-blocks .mm-sec table th {
	padding: 1rem;
	font-weight: 500;
	color: var( --mm-ink );
}

.mm-sec table th.font-normal,
.wp-site-blocks .mm-sec table th.font-normal { font-weight: 400; }

.mm-sec table td,
.wp-site-blocks .mm-sec table td {
	padding: 1rem;
	color: var( --mm-charcoal );
}

@media ( width < 768px ) {
	.mm-sec table :is( th, td ).md\:table-cell.hidden { display: none; }
}
.mm-sec .mm-stack-1 > * + *,
.wp-site-blocks .mm-sec .mm-stack-1 > * + *,
:root :where( .mm-sec .mm-stack-1 > * + * ) { margin-top: 0.25rem; }
.mm-sec .mm-stack-2 > * + *,
.wp-site-blocks .mm-sec .mm-stack-2 > * + *,
:root :where( .mm-sec .mm-stack-2 > * + * ) { margin-top: 0.5rem; }
.mm-sec .mm-stack-3 > * + *,
.wp-site-blocks .mm-sec .mm-stack-3 > * + *,
:root :where( .mm-sec .mm-stack-3 > * + * ) { margin-top: 0.75rem; }
.mm-sec .mm-stack-4 > * + *,
.wp-site-blocks .mm-sec .mm-stack-4 > * + *,
:root :where( .mm-sec .mm-stack-4 > * + * ) { margin-top: 1rem; }
.mm-sec .mm-stack-5 > * + *,
.wp-site-blocks .mm-sec .mm-stack-5 > * + *,
:root :where( .mm-sec .mm-stack-5 > * + * ) { margin-top: 1.25rem; }
.mm-sec .mm-stack-6 > * + *,
.wp-site-blocks .mm-sec .mm-stack-6 > * + *,
:root :where( .mm-sec .mm-stack-6 > * + * ) { margin-top: 1.5rem; }
.mm-sec .mm-stack-8 > * + *,
.wp-site-blocks .mm-sec .mm-stack-8 > * + *,
:root :where( .mm-sec .mm-stack-8 > * + * ) { margin-top: 2rem; }
.mm-sec .mm-stack-10 > * + *,
.wp-site-blocks .mm-sec .mm-stack-10 > * + *,
:root :where( .mm-sec .mm-stack-10 > * + * ) { margin-top: 2.5rem; }
.mm-sec .mm-stack-12 > * + *,
.wp-site-blocks .mm-sec .mm-stack-12 > * + *,
:root :where( .mm-sec .mm-stack-12 > * + * ) { margin-top: 3rem; }

/* Lists that keep their marker and indent. */
.mm-sec .mm-list--disc,    .wp-site-blocks .mm-sec .mm-list--disc    { list-style: disc; }
.mm-sec .mm-list--decimal, .wp-site-blocks .mm-sec .mm-list--decimal { list-style: decimal; }
.mm-sec .mm-pl-4, .wp-site-blocks .mm-sec .mm-pl-4 { padding-left: 1rem; }
.mm-sec .mm-pl-5, .wp-site-blocks .mm-sec .mm-pl-5 { padding-left: 1.25rem; }

/* The range hero image sits beside the copy. */
.mm-sec .mm-range__img,
.wp-site-blocks .mm-sec .mm-range__img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var( --mm-line );
	object-fit: cover;
}

/* The product page uses the larger swatch: live's px-4 py-2 against px-3 py-1
   on the cards. */
.mm-swatches__row--lg .mm-swatch span,
.wp-site-blocks .mm-swatches__row--lg .mm-swatch span { padding: 0.5rem 1rem; }

/* Margin utilities come last: Tailwind orders mt-* after space-y-*, so an
   element carrying both takes its own margin rather than the stack's. */
.mm-sec .mm-mb-6,  .wp-site-blocks .mm-sec .mm-mb-6  { margin-top: 0; margin-bottom: 1.5rem; }
.mm-sec .mm-mb-12, .wp-site-blocks .mm-sec .mm-mb-12 { margin-bottom: 3rem; }
.mm-sec .mm-mt-1, .wp-site-blocks .mm-sec .mm-mt-1, .mm-card .mm-mt-1 { margin-top: 0.25rem; }
.mm-sec .mm-mt-2, .wp-site-blocks .mm-sec .mm-mt-2, .mm-card .mm-mt-2 { margin-top: 0.5rem; }
.mm-sec .mm-mt-3, .wp-site-blocks .mm-sec .mm-mt-3, .mm-card .mm-mt-3 { margin-top: 0.75rem; }
.mm-sec .mm-mt-4, .wp-site-blocks .mm-sec .mm-mt-4, .mm-card .mm-mt-4 { margin-top: 1rem; }
.mm-sec .mm-mt-5, .wp-site-blocks .mm-sec .mm-mt-5, .mm-card .mm-mt-5 { margin-top: 1.25rem; }
.mm-sec .mm-mt-6, .wp-site-blocks .mm-sec .mm-mt-6, .mm-card .mm-mt-6 { margin-top: 1.5rem; }
.mm-sec .mm-mt-7, .wp-site-blocks .mm-sec .mm-mt-7, .mm-card .mm-mt-7 { margin-top: 1.75rem; }
.mm-sec .mm-mt-8, .wp-site-blocks .mm-sec .mm-mt-8, .mm-card .mm-mt-8 { margin-top: 2rem; }
.mm-sec .mm-mt-9, .wp-site-blocks .mm-sec .mm-mt-9, .mm-card .mm-mt-9 { margin-top: 2.25rem; }
.mm-sec .mm-mt-10, .wp-site-blocks .mm-sec .mm-mt-10, .mm-card .mm-mt-10 { margin-top: 2.5rem; }
.mm-sec .mm-mt-12, .wp-site-blocks .mm-sec .mm-mt-12, .mm-card .mm-mt-12 { margin-top: 3rem; }
.mm-sec .mm-mt-16, .wp-site-blocks .mm-sec .mm-mt-16, .mm-card .mm-mt-16 { margin-top: 4rem; }
.mm-sec .mm-mb-6, .wp-site-blocks .mm-sec .mm-mb-6 { margin-bottom: 1.5rem; }
.mm-sec .mm-mb-12, .wp-site-blocks .mm-sec .mm-mb-12 { margin-bottom: 3rem; }