/* ============================================================================
 * Mammoth Mushrooms — the site, in the spend-and-get page's look
 * ============================================================================
 *
 * Tyler, 2026-10-29: redesign the whole site around the spend-and-get landing
 * page. That page's look — cream ground, white rounded cards on a soft shadow,
 * amber pill buttons with ink on them, Urbanist set bold, JetBrains Mono for
 * figures, the dark footer with the three promises — is what every page here
 * now borrows. lander.css and lander-spend-and-get.css are the source; this
 * file carries the parts of them the rest of the site needs, under its own
 * class names, because those files load on the landing pages only.
 *
 * Loaded on every page that renders the site's own header (inc/chrome.php),
 * after storefront.css, and scoped to `body.mm-site`, which the landing pages
 * never carry.
 *
 * THE RADIUS PAIR. tokens.css keeps two radius scales and says "a template
 * picks the pair that matches its medium". The storefront ran the near-square
 * pair; the landing pages run the round one (--mm-radius-md cards, pill
 * buttons). Basing the site on the landing page means the site now runs the
 * round pair too. That is the one deliberate departure from storefront.css,
 * and section 5 of this file is where it is applied.
 *
 * Every colour and size is a token. The literals are the breakpoints inside
 * `@media`, where custom properties do not resolve, and proportions.
 * ========================================================================= */

/* ---------------------------------------------------------------------------
 * 1 · Ground and type
 * ------------------------------------------------------------------------ */

html body.mm-site {
	background: var(--mm-color-canvas);
	color: var(--mm-color-ink);
	font-family: var(--mm-font-body);
	font-weight: var(--mm-weight-body);
	-webkit-font-smoothing: antialiased;
}
body.mm-site [hidden] { display: none !important; }

/* Customizer Custom CSS carries `html, body { overflow-x: hidden; }` and
 * `body { overflow-y: hidden !important; }`. Either one makes the body its own
 * scroll box, and the sticky header then sticks to that box, which never
 * scrolls — rendered against staging's markup 2026-10-29: scrolled 2,500px
 * down, the header at -2,500. `clip` stops sideways scroll the same way without
 * making a scroll box. The !important answers the Customizer's own; both
 * Customizer rules belong on customizer-css-to-remove.md. */
html:root { overflow-x: clip; }
html body.mm-site {
	overflow-x: clip !important;
	overflow-y: visible !important;
}

.mm-num { font-family: var(--mm-font-numeric); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
 * 2 · Header
 * ------------------------------------------------------------------------ */

/* Sticky, on the page's own cream, so the cart is always one tap away. The
 * admin bar's height is WordPress's own variable, so a logged-in view does
 * not tuck the header under it. */
.mm-hdr {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0);
	z-index: 40;
	background: var(--mm-color-canvas);
	border-bottom: var(--mm-hairline) solid transparent;
	transition: border-color var(--mm-motion-base) var(--mm-ease), box-shadow var(--mm-motion-base) var(--mm-ease);
}
.mm-hdr.is-scrolled {
	border-bottom-color: var(--mm-color-border);
	box-shadow: var(--mm-shadow-card);
}

.mm-hdr-inner {
	display: flex;
	align-items: center;
	gap: var(--mm-space-4);
	max-width: var(--mm-container-max);
	min-height: var(--mm-space-16);
	margin: 0 auto;
	padding: var(--mm-space-2) var(--mm-space-5);
	box-sizing: border-box;
}

.mm-hdr-home { flex: 0 0 auto; display: block; line-height: 0; }
/* Height is the only dimension set: the PNG is 866 × 288, and width:auto
 * keeps it from being squashed — the same rule as the landing pages' bar. */
.mm-hdr-logo {
	display: block;
	height: var(--mm-space-10);
	width: auto;
	max-width: none;
}
.mm-hdr-wordmark {
	font-family: var(--mm-font-display);
	font-weight: var(--mm-weight-bold);
	letter-spacing: var(--mm-tracking-wide);
	text-transform: uppercase;
	color: var(--mm-color-ink);
}

/* The nav: wide screens only. A phone gets the Menu button and the drawer. */
.mm-hdr-nav { display: none; flex: 1 1 auto; min-width: 0; }
.mm-hdr-nav ul {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	gap: var(--mm-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}
.mm-hdr-nav li { margin: 0; }

body.mm-site .mm-hdr-link {
	display: inline-block;
	padding: var(--mm-space-2) var(--mm-space-3);
	border-radius: var(--mm-radius-pill);
	font-family: var(--mm-font-display);
	font-size: var(--mm-text-sm);
	font-weight: var(--mm-weight-bold);
	line-height: var(--mm-leading-tight);
	letter-spacing: normal;
	text-transform: none;
	color: var(--mm-color-ink);
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--mm-motion-fast) var(--mm-ease);
}
body.mm-site .mm-hdr-link:hover { background: var(--mm-color-brand-tint); color: var(--mm-color-ink); }
/* Where you are is never colour alone: an amber rule under the label. */
body.mm-site .mm-hdr-link[aria-current="page"] { box-shadow: inset 0 calc(-1 * var(--mm-focus-ring)) 0 0 var(--mm-color-brand); }

/* The one amber pill (decision 9, 2026-09-04). Ink on amber, never white —
 * white on #ffb301 is about 1.9:1. */
body.mm-site .mm-hdr-link--pill,
body.mm-site .mm-hdr-link--pill:hover {
	background: var(--mm-color-brand);
	color: var(--mm-color-on-brand);
	padding-inline: var(--mm-space-4);
}
body.mm-site .mm-hdr-link--pill:hover { background: var(--mm-color-star); }
body.mm-site .mm-hdr-link--pill[aria-current="page"] { box-shadow: none; }

.mm-hdr-tools {
	display: flex;
	align-items: center;
	gap: var(--mm-space-2);
	margin-inline-start: auto;
	flex: 0 0 auto;
}

.mm-hdr-age {
	display: none;
	font-family: var(--mm-font-numeric);
	font-size: var(--mm-text-2xs);
	padding: var(--mm-space-1) var(--mm-space-2);
	border: var(--mm-hairline) solid var(--mm-color-border);
	border-radius: var(--mm-radius-pill);
	background: var(--mm-color-surface);
	color: var(--mm-color-ink-muted);
	line-height: var(--mm-leading-tight);
}

body.mm-site .mm-hdr-account {
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--mm-control-height);
	height: var(--mm-control-height);
	border-radius: var(--mm-radius-pill);
	color: var(--mm-color-ink);
}
body.mm-site .mm-hdr-account:hover { background: var(--mm-color-brand-tint); color: var(--mm-color-ink); }

/* The cart: a white pill with its count in an amber dot, the same object as
 * the landing page's "Checkout (n)". */
body.mm-site .mm-hdr-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--mm-space-2);
	min-height: var(--mm-control-height);
	padding: 0 var(--mm-space-4);
	box-sizing: border-box;
	border: var(--mm-hairline) solid var(--mm-color-border);
	border-radius: var(--mm-radius-pill);
	background: var(--mm-color-surface);
	color: var(--mm-color-ink);
	font-family: var(--mm-font-display);
	font-size: var(--mm-text-sm);
	font-weight: var(--mm-weight-bold);
	text-decoration: none;
	box-shadow: var(--mm-shadow-card);
}
body.mm-site .mm-hdr-cart:hover { border-color: var(--mm-color-brand); color: var(--mm-color-ink); }
.mm-hdr-cart svg { flex: 0 0 auto; }
.mm-hdr-cartlabel { display: none; }
.mm-hdr-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--mm-space-5);
	height: var(--mm-space-5);
	padding: 0 var(--mm-space-1);
	box-sizing: border-box;
	border-radius: var(--mm-radius-pill);
	background: var(--mm-color-brand);
	color: var(--mm-color-on-brand);
	font-family: var(--mm-font-numeric);
	font-size: var(--mm-text-2xs);
	font-weight: var(--mm-weight-bold);
	line-height: 1;
}

/* The Menu button: a phone's way to the nav. */
body.mm-site .mm-hdr-menubtn {
	display: inline-flex;
	align-items: center;
	gap: var(--mm-space-2);
	min-height: var(--mm-control-height);
	margin: 0;
	padding: 0 var(--mm-space-3);
	border: 0;
	border-radius: var(--mm-radius-pill);
	background: transparent;
	color: var(--mm-color-ink);
	font-family: var(--mm-font-display);
	font-size: var(--mm-text-sm);
	font-weight: var(--mm-weight-bold);
	letter-spacing: normal;
	text-transform: none;
	line-height: 1;
	box-shadow: none;
	cursor: pointer;
}
body.mm-site .mm-hdr-menubtn:hover { background: var(--mm-color-brand-tint); color: var(--mm-color-ink); }
.mm-hdr-menulabel { display: none; }
.mm-hdr-burger,
.mm-hdr-burger::before,
.mm-hdr-burger::after {
	display: block;
	width: var(--mm-space-5);
	height: var(--mm-focus-ring);
	border-radius: var(--mm-radius-pill);
	background: currentColor;
	transition: transform var(--mm-motion-base) var(--mm-ease), opacity var(--mm-motion-fast) var(--mm-ease);
}
.mm-hdr-burger { position: relative; }
.mm-hdr-burger::before,
.mm-hdr-burger::after { content: ''; position: absolute; left: 0; }
.mm-hdr-burger::before { top: calc(-1 * var(--mm-space-2)); }
.mm-hdr-burger::after { top: var(--mm-space-2); }
.mm-hdr-menubtn[aria-expanded="true"] .mm-hdr-burger { background: transparent; }
.mm-hdr-menubtn[aria-expanded="true"] .mm-hdr-burger::before { transform: translateY(var(--mm-space-2)) rotate(45deg); }
.mm-hdr-menubtn[aria-expanded="true"] .mm-hdr-burger::after { transform: translateY(calc(-1 * var(--mm-space-2))) rotate(-45deg); }

/* The drawer: the same links, large, in a white panel under the bar. */
.mm-hdr-drawer {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	max-height: calc(100vh - var(--mm-space-16));
	overflow-y: auto;
	padding: var(--mm-space-2) var(--mm-space-5) var(--mm-space-6);
	background: var(--mm-color-surface);
	border-top: var(--mm-hairline) solid var(--mm-color-border);
	box-shadow: var(--mm-shadow-raised);
}
.mm-hdr-drawer ul { margin: 0; padding: 0; list-style: none; }
.mm-hdr-drawer li { margin: 0; border-bottom: var(--mm-hairline) solid var(--mm-color-border); }
body.mm-site .mm-hdr-drawer .mm-hdr-link {
	display: block;
	padding: var(--mm-space-4) 0;
	border-radius: 0;
	font-size: var(--mm-text-xl);
	box-shadow: none;
}
body.mm-site .mm-hdr-drawer .mm-hdr-link:hover { background: transparent; color: var(--mm-color-brand-deep); }
body.mm-site .mm-hdr-drawer .mm-hdr-link--pill {
	display: inline-block;
	margin: var(--mm-space-3) 0;
	padding: var(--mm-space-3) var(--mm-space-6);
	border-radius: var(--mm-radius-pill);
	font-size: var(--mm-text-lg);
}
body.mm-site .mm-hdr-drawer .mm-hdr-link--pill:hover { color: var(--mm-color-on-brand); }
body.mm-site .mm-hdr-drawer .mm-hdr-link[aria-current="page"] { color: var(--mm-color-brand-deep); }
.mm-hdr-drawernote {
	margin: var(--mm-space-5) 0 0;
	font-size: var(--mm-text-xs);
	color: var(--mm-color-ink-muted);
}

/* ---------------------------------------------------------------------------
 * 3 · Footer
 * ------------------------------------------------------------------------ */

/* The spend-and-get page's footer, as it is there (lander-spend-and-get.css,
 * "the footer"): near-black under an amber rule, the mark and where the
 * mushrooms come from, the three promises as outlined cards, one row of the
 * store's pages over a hairline, and the small print. */
.mm-ftr {
	margin-top: var(--mm-space-16);
	padding-block: var(--mm-space-10) var(--mm-space-8);
	background: var(--mm-color-contrast);
	color: var(--mm-color-border);
	border-top: var(--mm-space-1) solid var(--mm-color-brand);
	font-family: var(--mm-font-body);
	text-align: start;
}
.mm-ftr-inner {
	max-width: var(--mm-container-max);
	margin: 0 auto;
	padding-inline: var(--mm-space-5);
	box-sizing: border-box;
}
.mm-ftr-brand { display: flex; align-items: center; gap: var(--mm-space-4); }
.mm-ftr-mark {
	flex: 0 0 auto;
	width: var(--mm-space-16);
	height: auto;
}
body.mm-site .mm-ftr-name {
	margin: 0;
	font-family: var(--mm-font-display);
	font-weight: var(--mm-weight-bold);
	font-size: var(--mm-text-lg);
	line-height: var(--mm-leading-tight);
	color: var(--mm-color-on-contrast);
}
body.mm-site .mm-ftr-line {
	margin: var(--mm-space-1) 0 0;
	font-size: var(--mm-text-xs);
	line-height: var(--mm-leading-normal);
	color: var(--mm-color-border);
}

.mm-ftr-promises {
	display: grid;
	gap: var(--mm-space-3);
	margin: var(--mm-space-6) 0 0;
	padding: 0;
	list-style: none;
}
.mm-ftr-promises li {
	display: flex;
	align-items: flex-start;
	gap: var(--mm-space-3);
	margin: 0;
	padding: var(--mm-space-4);
	border: var(--mm-hairline) solid var(--mm-color-ink-muted);
	border-radius: var(--mm-radius-md);
}
.mm-ftr-promises svg {
	flex: 0 0 auto;
	width: var(--mm-space-6);
	height: var(--mm-space-6);
	color: var(--mm-color-brand);
}
body.mm-site .mm-ftr-promises p { margin: 0; font-size: var(--mm-text-xs); line-height: var(--mm-leading-normal); color: var(--mm-color-border); }
body.mm-site .mm-ftr-promises strong {
	display: block;
	margin-bottom: var(--mm-space-1);
	font-family: var(--mm-font-display);
	font-size: var(--mm-text-sm);
	font-weight: var(--mm-weight-bold);
	color: var(--mm-color-on-contrast);
}

.mm-ftr-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mm-space-2) var(--mm-space-5);
	margin-top: var(--mm-space-6);
	padding-top: var(--mm-space-5);
	border-top: var(--mm-hairline) solid var(--mm-color-ink-muted);
}
body.mm-site .mm-ftr-links a {
	font-size: var(--mm-text-sm);
	color: var(--mm-color-on-contrast);
	text-decoration: none;
}
body.mm-site .mm-ftr-links a:hover { color: var(--mm-color-brand); }
body.mm-site .mm-ftr-legal { margin: var(--mm-space-3) 0 0; font-size: var(--mm-text-2xs); line-height: var(--mm-leading-normal); color: var(--mm-color-border); }

/* ---------------------------------------------------------------------------
 * 4 · What the old header and footer left behind
 * ------------------------------------------------------------------------ */

/* Flatsome's page-loader class sits on <html> until its script runs; nothing
 * here needs to wait for it. */
body.mm-site #wrapper { overflow: visible; }

/* A link that only carries focus outlines the same everywhere. */
body.mm-site a:focus-visible,
body.mm-site button:focus-visible {
	outline: var(--mm-focus-ring) solid var(--mm-color-brand-deep);
	outline-offset: var(--mm-focus-ring);
}

/* ---------------------------------------------------------------------------
 * 5 · Shop and category pages: the spend-and-get tiles
 * ------------------------------------------------------------------------ */

/* The shop is Flatsome's own archive (no template override — see the note at
 * the top of storefront.css), so these rules reach its markup: `.product-small
 * .box` is the card, `.box-image` the photo, `.box-text` the words, and the
 * button is WooCommerce's AJAX add to cart. Every rule is scoped to
 * body.mm-site and written one step more specific than the storefront.css rule
 * it replaces, so the two files never tie. */

/* The room above the filter row. Customizer CSS pads it 200px for the old
 * see-through header (`.post-type-archive-product .row.category-page-row`). */
body.mm-site .row.category-page-row { padding-top: var(--mm-space-6); }

/* Flatsome's title bar: breadcrumb, count, sort. Only the sort stays, on the
 * page's own cream. The brief (D4) has no heading and no count on the shop. */
body.mm-site .shop-page-title.page-title { background: transparent; }
body.mm-site .shop-page-title .page-title-inner { min-height: 0; padding-top: var(--mm-space-4); padding-bottom: 0; }
body.mm-site .shop-page-title .woocommerce-breadcrumb,
body.mm-site .shop-page-title .breadcrumbs,
body.mm-site .woocommerce-result-count { display: none; }
body.mm-site .woocommerce-ordering select {
	min-height: var(--mm-control-height);
	margin: 0;
	padding: 0 var(--mm-space-10) 0 var(--mm-space-4);
	border: var(--mm-hairline) solid var(--mm-color-border);
	border-radius: var(--mm-radius-pill);
	background-color: var(--mm-color-surface);
	color: var(--mm-color-ink);
	font-family: var(--mm-font-display);
	font-size: var(--mm-text-sm);
	font-weight: var(--mm-weight-bold);
	box-shadow: none;
}

/* The filter pills (mammoth-shop): sentence case, white, amber when chosen. */
body.mm-site .mm-shop-filter { gap: var(--mm-space-2); border-bottom: 0; padding-bottom: var(--mm-space-2); }
body.mm-site .mm-shop-filter .mm-shop-filter__pill {
	min-height: var(--mm-control-height);
	display: inline-flex;
	align-items: center;
	padding: 0 var(--mm-space-4);
	border: var(--mm-hairline) solid var(--mm-color-border);
	border-radius: var(--mm-radius-pill);
	background: var(--mm-color-surface);
	color: var(--mm-color-ink);
	font-family: var(--mm-font-display);
	font-size: var(--mm-text-sm);
	font-weight: var(--mm-weight-bold);
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	box-shadow: none;
}
body.mm-site .mm-shop-filter .mm-shop-filter__pill:hover { border-color: var(--mm-color-brand); }
body.mm-site .mm-shop-filter .mm-shop-filter__pill.is-active {
	background: var(--mm-color-brand);
	border-color: var(--mm-color-brand);
	color: var(--mm-color-on-brand);
}

/* The grid's gutters: the landing page's 12px between tiles, 16px wide. */
body.mm-site .products.row { margin-inline: calc(-1 * var(--mm-space-2)); }
body.mm-site .products.row > .product-small.col { padding: 0 var(--mm-space-2) var(--mm-space-4); }

/* The tile. */
body.mm-site .products .product-small.box {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--mm-space-3);
	box-sizing: border-box;
	background: var(--mm-color-surface);
	border: var(--mm-hairline) solid var(--mm-color-border);
	border-radius: var(--mm-radius-md);
	box-shadow: var(--mm-shadow-card);
	transition: border-color var(--mm-motion-base) var(--mm-ease);
}
body.mm-site .products .product-small.box:hover { border-color: var(--mm-color-brand-tint-border); }
.mm-tile__media,
body.mm-site .product-small .box-image { position: relative; }

body.mm-site .products .product-small .box-image {
	overflow: hidden;
	border-radius: var(--mm-radius-sm);
	background: var(--mm-color-sand);
}
/* The dark "Quick View" bar over the photo, gone; the photo opens the page. */
body.mm-site .products .product-small .grid-tools { display: none; }

body.mm-site .products .product-small .box-text {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	align-items: stretch;
	padding: var(--mm-space-3) 0 0;
	text-align: start;
}
body.mm-site .products .product-small .box-text > * { width: 100%; text-align: start; }
/* The words (inc/shop-cards.php), set like the bundle page Tyler pointed to on
 * 2026-10-30 ("I specifically like the font and text"): a short bold name, the
 * detail in grey under it, the score beside the stars, a large price with the
 * old one struck through after it, "Save $30" as a pill, and one full-width
 * button in capitals. The same on related products. */
body.mm-site :is(.products, .related) .product-small .name.product-title { margin: 0; }
/* Flatsome's "equalize box" sets one height per row on the name, the price
 * block and the button, in style attributes. With a detail line under the name
 * that pushed the detail away from a one-line name; each card now flows on its
 * own, and the button still sits at the foot (margin-top: auto, below). */
body.mm-site :is(.products, .related) .product-small :is(.name.product-title, .price-wrapper, .add-to-cart-button) { height: auto !important; }
body.mm-site :is(.products, .related) .product-small .name.product-title a {
	font-family: var(--mm-font-display);
	font-size: var(--mm-text-lg);
	font-weight: var(--mm-weight-bold);
	line-height: var(--mm-leading-tight);
	letter-spacing: -0.01em;
	color: var(--mm-color-ink);
}
body.mm-site :is(.products, .related) .product-small .mm-card-detail {
	margin: var(--mm-space-1) 0 0;
	font-family: var(--mm-font-display);
	font-size: var(--mm-text-sm);
	font-weight: var(--mm-weight-regular);
	line-height: var(--mm-leading-tight);
	color: var(--mm-color-ink-muted);
}
body.mm-site :is(.products, .related) .product-small .price-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mm-space-1) var(--mm-space-2);
	margin-top: var(--mm-space-3);
}
body.mm-site :is(.products, .related) .product-small .star-rating { margin: 0; color: var(--mm-color-brand); }
body.mm-site :is(.products, .related) .product-small .mm-card-score {
	font-family: var(--mm-font-display);
	font-size: var(--mm-text-xs);
	font-weight: var(--mm-weight-bold);
	color: var(--mm-color-ink);
}
body.mm-site :is(.products, .related) .product-small .review-count {
	margin: 0;
	font-size: var(--mm-text-xs);
	color: var(--mm-color-ink-muted);
	opacity: 1;
}
body.mm-site :is(.products, .related) .product-small .price {
	display: flex;
	flex: 1 0 100%;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--mm-space-2);
	margin: var(--mm-space-1) 0 0;
	font-family: var(--mm-font-display);
	font-size: var(--mm-text-2xl);
	font-weight: var(--mm-weight-bold);
	font-variant-numeric: tabular-nums;
	line-height: var(--mm-leading-tight);
	letter-spacing: -0.01em;
	color: var(--mm-color-ink);
}
body.mm-site :is(.products, .related) .product-small .price ins { order: -1; text-decoration: none; }
/* On a card the price is set in the display face, as on the bundle page; the
 * store's other prices keep the numeric face (storefront.css). The Customizer's
 * `.post-type-archive span.amount { font-weight: 400 !important }` thinned the
 * shop's prices only; the !important here is to beat that one rule (listed for
 * deletion in the brain repo's customizer-css-to-remove.md). */
body.mm-site :is(.products, .related) .product-small :is(.price, .mm-card-save, .mm-per-gram-price) :is(.woocommerce-Price-amount, .woocommerce-Price-currencySymbol) { font-family: inherit; font-weight: inherit !important; }
body.mm-site :is(.products, .related) .product-small .price del {
	font-size: var(--mm-text-base);
	font-weight: var(--mm-weight-regular);
	color: var(--mm-color-ink-muted);
	opacity: 1;
}
body.mm-site :is(.products, .related) .product-small .mm-per-gram-price { flex: 1 0 100%; font-family: var(--mm-font-display); font-size: var(--mm-text-xs); color: var(--mm-color-ink-muted); }
body.mm-site :is(.products, .related) .product-small .mm-per-gram-price:empty { display: none; }
body.mm-site :is(.products, .related) .product-small .mm-card-save {
	display: inline-flex;
	align-items: center;
	gap: var(--mm-space-1);
	margin: var(--mm-space-1) 0 0;
	padding: var(--mm-space-1) var(--mm-space-3);
	border-radius: var(--mm-radius-pill);
	background: var(--mm-color-brand-tint-border);
	font-family: var(--mm-font-display);
	font-size: var(--mm-text-2xs);
	font-weight: var(--mm-weight-bold);
	line-height: var(--mm-leading-tight);
	letter-spacing: var(--mm-tracking-wide);
	text-transform: uppercase;
	color: var(--mm-color-brand-deep);
}
body.mm-site :is(.products, .related) .product-small .mm-card-save .amount { font-variant-numeric: tabular-nums; }

/* A card with an offer label ("Best value", "Limited time offer") carries an
 * amber edge, as the bundle page marks its most popular pack. */
body.mm-site .products .product-small.col[class*="mm-offer-"] .product-small.box {
	border-color: var(--mm-color-brand);
	box-shadow: 0 0 0 var(--mm-hairline) var(--mm-color-brand), var(--mm-shadow-card);
}

/* Related products sit in a slider whose window clips anything above its
 * cards, so the offer badge, which straddles a card's top edge, lost its top
 * half (audit 2). Room above each card for it. */
body.mm-site .related .product-small.col { padding-top: var(--mm-space-4); }

/* The Add pill at the foot of the tile, wherever the words above it end. */
body.mm-site .products .product-small .add-to-cart-button { margin-top: auto; padding-top: var(--mm-space-3); }
body.mm-site .products .product-small .add-to-cart-button .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--mm-control-height);
	margin: 0;
	padding: 0 var(--mm-space-2);
	white-space: nowrap;
	border: 0;
	border-radius: var(--mm-radius-pill);
	background: var(--mm-color-brand);
	color: var(--mm-color-on-brand);
	font-family: var(--mm-font-display);
	font-size: var(--mm-text-sm);
	font-weight: var(--mm-weight-bold);
	letter-spacing: var(--mm-tracking-display);
	text-transform: uppercase;
	line-height: 1;
	box-shadow: none;
}
body.mm-site :is(.products, .related) .product-small .add-to-cart-button .button::after { content: '\203A'; margin-inline-start: var(--mm-space-2); font-size: var(--mm-text-lg); line-height: 1; }
body.mm-site .products .product-small .add-to-cart-button .button:hover { background: var(--mm-color-star); color: var(--mm-color-on-brand); }
body.mm-site .products .product-small .add-to-cart-button .button.loading { opacity: .6; }
body.mm-site .products .product-small .add-to-cart-button .button.added::after { content: ' \2713'; margin-inline-start: var(--mm-space-1); }
body.mm-site .products .product-small .added_to_cart {
	display: block;
	margin-top: var(--mm-space-2);
	font-size: var(--mm-text-xs);
	font-weight: var(--mm-weight-bold);
	color: var(--mm-color-brand-deep);
	text-align: center;
}

/* Related products and any other grid of Flatsome cards outside `.products`
 * (the related row is a slider row): the same tile. */
body.mm-site .related .product-small.box,
body.mm-site .product-section .product-small.box {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--mm-space-3);
	box-sizing: border-box;
	background: var(--mm-color-surface);
	border: var(--mm-hairline) solid var(--mm-color-border);
	border-radius: var(--mm-radius-md);
	box-shadow: var(--mm-shadow-card);
}
body.mm-site .related .product-small .box-image { overflow: hidden; border-radius: var(--mm-radius-sm); }
body.mm-site .related .product-small .grid-tools { display: none; }
body.mm-site .related .product-small .box-text { text-align: start; padding: var(--mm-space-3) 0 0; }
body.mm-site .related .product-small .box-text :is(.title-wrapper, .title-wrapper > *, .price-wrapper) { width: 100%; text-align: start; }
body.mm-site .related .product-small .add-to-cart-button .button {
	width: 100%;
	min-height: var(--mm-control-height);
	margin: var(--mm-space-3) 0 0;
	border-radius: var(--mm-radius-pill);
	background: var(--mm-color-brand);
	color: var(--mm-color-on-brand);
	font-family: var(--mm-font-display);
	font-weight: var(--mm-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--mm-tracking-wide);
}

/* ---------------------------------------------------------------------------
 * 6 · The product page
 * ------------------------------------------------------------------------ */

/* "Related products": a section heading like every other on the site. */
body.mm-site .related .product-section-title,
body.mm-site .related h3.product-section-title {
	font-family: var(--mm-font-display);
	font-weight: var(--mm-weight-light);
	font-size: var(--mm-text-2xl);
	letter-spacing: -0.015em;
	text-transform: none;
	color: var(--mm-color-ink);
}

/* Customizer CSS pads the product 200px for the old see-through header
 * (`.single-product .product { padding-top: 200px }`). */
body.mm-site.single-product div.product { padding-top: var(--mm-space-6); }

/* The photo in a rounded card, like the landing page's hero. The corner goes
 * on each slide's picture, not on the slider: Flatsome's slider measures and
 * moves its own track, and clipping the track blanked the photo on a phone. */
body.mm-site .product-gallery .woocommerce-product-gallery__image img,
body.mm-site .product-gallery .woocommerce-product-gallery__image a { border-radius: var(--mm-radius-md); }
body.mm-site .product-thumbnails .col img,
body.mm-site .product-thumbnails a { border-radius: var(--mm-radius-sm); overflow: hidden; }

/* The summary: a white card beside the photo. */
body.mm-site .product-info.summary {
	padding: var(--mm-space-6) var(--mm-space-5);
	background: var(--mm-color-surface);
	border: var(--mm-hairline) solid var(--mm-color-border);
	border-radius: var(--mm-radius-md);
	box-shadow: var(--mm-shadow-card);
	box-sizing: border-box;
}
body.mm-site .product-info .breadcrumbs { font-size: var(--mm-text-2xs); text-transform: none; letter-spacing: normal; }
body.mm-site .product-info h1.product-title {
	text-wrap: balance; /* no "300mg x / 20" (audit 2) */
	margin: 0;
	font-family: var(--mm-font-display);
	font-weight: var(--mm-weight-bold);
	font-size: clamp(var(--mm-text-2xl), 4vw, var(--mm-text-3xl));
	line-height: var(--mm-leading-tight);
	letter-spacing: -0.015em;
	text-transform: none;
	color: var(--mm-color-ink);
}
body.mm-site .product-info .is-divider { display: none; }
body.mm-site .product-info .woocommerce-product-rating { margin-top: var(--mm-space-2); }
body.mm-site .product-info .star-rating { color: var(--mm-color-brand); }
body.mm-site .product-info .woocommerce-review-link { font-family: var(--mm-font-display); font-size: var(--mm-text-xs); color: var(--mm-color-ink-muted); }
/* The price as on the cards (§5): the display face, large, the sale price
 * first and the old one struck after it, "Save $30" under it. */
body.mm-site .product-info .price-wrapper .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--mm-space-3);
	margin: var(--mm-space-3) 0 0;
	font-family: var(--mm-font-display);
	font-size: clamp(var(--mm-text-2xl), 3.5vw, var(--mm-text-3xl));
	font-weight: var(--mm-weight-bold);
	font-variant-numeric: tabular-nums;
	line-height: var(--mm-leading-tight);
	letter-spacing: -0.01em;
	color: var(--mm-color-ink);
}
body.mm-site .product-info .price-wrapper .price :is(.woocommerce-Price-amount, .woocommerce-Price-currencySymbol) { font-family: inherit; font-weight: inherit !important; }
/* Flatsome raises a small "$" on the product page; here it sits on the line. */
body.mm-site .product-info :is(.price, .mm-card-save) .woocommerce-Price-currencySymbol { font-size: inherit; vertical-align: baseline; top: auto; }
body.mm-site .product-info .price del { order: 1; font-size: var(--mm-text-lg); font-weight: var(--mm-weight-regular); color: var(--mm-color-ink-muted); }
body.mm-site .product-info .price ins { text-decoration: none; }
body.mm-site .product-info .mm-card-save {
	display: inline-flex;
	align-items: center;
	gap: var(--mm-space-1);
	margin: var(--mm-space-2) 0 0;
	padding: var(--mm-space-1) var(--mm-space-3);
	border-radius: var(--mm-radius-pill);
	background: var(--mm-color-brand-tint-border);
	font-family: var(--mm-font-display);
	font-size: var(--mm-text-2xs);
	font-weight: var(--mm-weight-bold);
	line-height: var(--mm-leading-tight);
	letter-spacing: var(--mm-tracking-wide);
	text-transform: uppercase;
	color: var(--mm-color-brand-deep);
}
body.mm-site .product-info .mm-card-save :is(.woocommerce-Price-amount, .woocommerce-Price-currencySymbol) { font-family: inherit; }
body.mm-site .product-info .mm-per-gram-price { font-family: var(--mm-font-display); font-size: var(--mm-text-xs); color: var(--mm-color-ink-muted); }
body.mm-site .product-info .mm-per-gram-price:empty { display: none; }
body.mm-site .product-info .stock { font-size: var(--mm-text-xs); color: var(--mm-color-ink-muted); }

/* The dose chip, in the pouch's colour (brief D2: "the only colour on the page
 * besides the gold CTA"). White type on the three dose colours: all three are
 * dark enough to carry it. */
/* The strain under the title (inc/product.php), set as the shop card's detail
 * line and the home page's capsule cards (Tyler, 2026-11-03). */
.mm-pdp-strain {
	margin: var(--mm-space-2) 0 0;
	font-family: var(--mm-font-display);
	font-size: var(--mm-text-base);
	font-weight: var(--mm-weight-regular);
	line-height: var(--mm-leading-tight);
	color: var(--mm-color-ink-muted);
}
.mm-pdp-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--mm-space-1);
	margin: var(--mm-space-3) 0 0;
	padding: var(--mm-space-1) var(--mm-space-3);
	border-radius: var(--mm-radius-pill);
	font-family: var(--mm-font-display);
	font-size: var(--mm-text-2xs);
	font-weight: var(--mm-weight-bold);
	letter-spacing: var(--mm-tracking-wide);
	text-transform: uppercase;
	color: var(--mm-color-on-contrast);
	background: var(--mm-color-ink);
}
.mm-pdp-chip--micro { background: var(--mm-color-dose-micro); }
.mm-pdp-chip--mini { background: var(--mm-color-dose-mini); color: var(--mm-color-on-brand); }
.mm-pdp-chip--mega { background: var(--mm-color-dose-mega); }

/* Quantity and the button, side by side, both pills. */
body.mm-site .product-info form.cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--mm-space-2); margin: var(--mm-space-5) 0 0; }
/* A bundle's quantity and button sit one level deeper, in .bundle_button, so
 * its button kept its own narrow width (audit 2): the same row there. */
body.mm-site .product-info form.cart .bundle_button { display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: stretch; gap: var(--mm-space-2); }
body.mm-site .product-info form.cart .quantity {
	display: inline-flex;
	align-items: center;
	margin: 0;
	border: var(--mm-hairline) solid var(--mm-color-border);
	border-radius: var(--mm-radius-pill);
	background: var(--mm-color-surface);
	overflow: hidden;
}
body.mm-site .product-info form.cart .quantity input,
body.mm-site .product-info form.cart .quantity .button {
	height: calc(var(--mm-space-12) + var(--mm-space-1));
	min-height: 0;
	margin: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	font-family: var(--mm-font-numeric);
	font-size: var(--mm-text-base);
	color: var(--mm-color-ink);
}
body.mm-site .product-info form.cart .quantity .button { padding: 0 var(--mm-space-3); }
body.mm-site .product-info form.cart .quantity input.qty { width: var(--mm-space-10); text-align: center; }
/* Beats storefront.css §10's override of the Customizer's black button. */
body.mm-site .product-info form.cart button.single_add_to_cart_button.button.alt {
	flex: 1 1 auto;
	min-height: calc(var(--mm-space-12) + var(--mm-space-1));
	margin: 0;
	padding: 0 var(--mm-space-8);
	border: 0;
	border-radius: var(--mm-radius-pill);
	background: var(--mm-color-brand);
	color: var(--mm-color-on-brand);
	font-family: var(--mm-font-display);
	font-size: var(--mm-text-lg);
	font-weight: var(--mm-weight-bold);
	letter-spacing: normal;
	text-transform: none;
	box-shadow: 0 var(--mm-space-1) var(--mm-space-5) rgba(255, 179, 1, .45);
}
body.mm-site .product-info form.cart button.single_add_to_cart_button.button.alt:hover { background: var(--mm-color-star); color: var(--mm-color-on-brand); }
/* A variable product's choices (the Hillbilly 14 g): the same pill fields. */
body.mm-site .product-info form.variations_form table.variations select {
	min-height: var(--mm-control-height);
	border: var(--mm-hairline) solid var(--mm-color-border);
	border-radius: var(--mm-radius-pill);
	padding-inline: var(--mm-space-4);
	background-color: var(--mm-color-surface);
}
body.mm-site .product-info form.variations_form .single_variation_wrap { width: 100%; }
body.mm-site .product-info form.variations_form .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: var(--mm-space-2); }

.mm-pdp-trust { margin: var(--mm-space-4) 0 0; }
body.mm-site .mm-pdp-trustline { margin: 0; font-size: var(--mm-text-xs); color: var(--mm-color-ink-muted); }
.mm-pdp-trust ul {
	display: grid;
	gap: var(--mm-space-2);
	margin: var(--mm-space-4) 0 0;
	padding: var(--mm-space-4) 0 0;
	list-style: none;
	border-top: var(--mm-hairline) solid var(--mm-color-border);
}
.mm-pdp-trust li { margin: 0; font-size: var(--mm-text-xs); color: var(--mm-color-ink-muted); }
.mm-pdp-trust li strong { display: block; font-family: var(--mm-font-display); font-size: var(--mm-text-sm); color: var(--mm-color-ink); }

body.mm-site .product-info .product-short-description { margin-top: var(--mm-space-5); font-size: var(--mm-text-sm); color: var(--mm-color-ink); }
body.mm-site .product-info .product_meta { display: none; }

/* Tabs: pills, sentence case. */
body.mm-site .woocommerce-tabs .tabs.nav-pills > li > a {
	padding: var(--mm-space-2) var(--mm-space-4);
	border-radius: var(--mm-radius-pill);
	background: var(--mm-color-surface);
	color: var(--mm-color-ink);
	font-family: var(--mm-font-display);
	font-size: var(--mm-text-sm);
	font-weight: var(--mm-weight-bold);
	text-transform: none;
	letter-spacing: normal;
}
body.mm-site .woocommerce-tabs .tabs.nav-pills > li.active > a { background: var(--mm-color-ink); color: var(--mm-color-on-contrast); }
body.mm-site .woocommerce-tabs .panel {
	padding: var(--mm-space-6) var(--mm-space-5);
	background: var(--mm-color-surface);
	border-radius: var(--mm-radius-md);
	box-shadow: var(--mm-shadow-card);
}

/* "Where this sits" and "Start low, go slow" (inc/product.php). */
.mm-pdp-learn {
	max-width: var(--mm-container-max);
	margin: var(--mm-space-12) auto 0;
	padding: 0 var(--mm-space-5);
	box-sizing: border-box;
}
.mm-pdp-head { margin-bottom: var(--mm-space-6); }
body.mm-site .mm-pdp-eyebrow {
	margin: 0;
	font-family: var(--mm-font-display);
	font-size: var(--mm-text-2xs);
	font-weight: var(--mm-weight-bold);
	letter-spacing: var(--mm-tracking-wide);
	text-transform: uppercase;
	color: var(--mm-color-brand-deep);
}
body.mm-site .mm-pdp-title {
	margin: var(--mm-space-2) 0 0;
	font-family: var(--mm-font-display);
	font-weight: var(--mm-weight-light);
	font-size: clamp(var(--mm-text-2xl), 5.5vw, var(--mm-text-3xl));
	line-height: var(--mm-leading-tight);
	letter-spacing: -0.015em;
	text-transform: none;
	color: var(--mm-color-ink);
}
body.mm-site .mm-pdp-lede { margin: var(--mm-space-3) 0 0; max-width: var(--mm-measure); color: var(--mm-color-ink-muted); }

.mm-pdp-tiers {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 78%;
	gap: var(--mm-space-3);
	margin: 0 calc(-1 * var(--mm-space-5));
	padding: var(--mm-space-1) var(--mm-space-5) var(--mm-space-3);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--mm-space-5);
}
.mm-pdp-tier {
	scroll-snap-align: start;
	margin: 0;
	padding: var(--mm-space-5);
	background: var(--mm-color-surface);
	border: var(--mm-hairline) solid var(--mm-color-border);
	border-top: var(--mm-space-1) solid var(--mm-color-border);
	border-radius: var(--mm-radius-md);
	box-shadow: var(--mm-shadow-card);
}
.mm-pdp-tier--micro { border-top-color: var(--mm-color-dose-micro); }
.mm-pdp-tier--mini { border-top-color: var(--mm-color-dose-mini); }
.mm-pdp-tier--mega { border-top-color: var(--mm-color-dose-mega); }
.mm-pdp-tier.is-here { border-color: var(--mm-color-brand); border-top-width: var(--mm-space-1); background: var(--mm-color-brand-tint); }
.mm-pdp-packs { position: relative; height: calc(var(--mm-space-20) * 2); margin-bottom: var(--mm-space-4); }
body.mm-site .mm-pdp-pack {
	position: absolute;
	bottom: 0;
	left: 50%;
	height: 100%;
	width: auto;
	max-width: none;
	filter: drop-shadow(0 var(--mm-space-2) var(--mm-space-3) rgba(17, 17, 17, .18));
}
.mm-pdp-pack--back { transform: translateX(-80%) rotate(-6deg); opacity: .9; }
.mm-pdp-pack--front { transform: translateX(-20%) rotate(4deg); }
body.mm-site .mm-pdp-tiername { margin: 0; font-family: var(--mm-font-display); font-weight: var(--mm-weight-bold); font-size: var(--mm-text-2xl); text-transform: none; letter-spacing: normal; color: var(--mm-color-ink); }
.mm-pdp-tiername .mm-num { font-size: var(--mm-text-lg); font-weight: var(--mm-weight-regular); color: var(--mm-color-brand-deep); }
body.mm-site .mm-pdp-tiercount { margin: var(--mm-space-1) 0 0; font-size: var(--mm-text-xs); color: var(--mm-color-ink-muted); }
body.mm-site .mm-pdp-tierline { margin: var(--mm-space-3) 0 var(--mm-space-4); font-size: var(--mm-text-sm); color: var(--mm-color-ink); }
body.mm-site .mm-pdp-here { margin: 0; font-size: var(--mm-text-xs); font-weight: var(--mm-weight-bold); color: var(--mm-color-brand-deep); }
body.mm-site .mm-pdp-link {
	display: inline-flex;
	gap: var(--mm-space-1);
	font-family: var(--mm-font-display);
	font-weight: var(--mm-weight-bold);
	font-size: var(--mm-text-sm);
	color: var(--mm-color-ink);
	text-decoration: none;
	box-shadow: inset 0 calc(-1 * var(--mm-focus-ring)) 0 0 var(--mm-color-brand);
}
body.mm-site .mm-pdp-link::after { content: '\2192'; }

.mm-pdp-steps { margin-top: var(--mm-space-12); }
.mm-pdp-steps ol { display: grid; gap: var(--mm-space-3); margin: 0; padding: 0; list-style: none; }
.mm-pdp-steps li {
	position: relative;
	margin: 0;
	padding: var(--mm-space-5) var(--mm-space-5) var(--mm-space-5) calc(var(--mm-space-16) + var(--mm-space-2));
	background: var(--mm-color-surface);
	border-radius: var(--mm-radius-md);
	box-shadow: var(--mm-shadow-card);
}
.mm-pdp-steps li > .mm-num {
	position: absolute;
	left: var(--mm-space-5);
	top: var(--mm-space-5);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--mm-space-10);
	height: var(--mm-space-10);
	border-radius: var(--mm-radius-pill);
	background: var(--mm-color-brand);
	color: var(--mm-color-on-brand);
	font-weight: var(--mm-weight-bold);
}
body.mm-site .mm-pdp-steps h3 { margin: 0; font-family: var(--mm-font-display); font-weight: var(--mm-weight-bold); font-size: var(--mm-text-lg); text-transform: none; letter-spacing: normal; color: var(--mm-color-ink); }
body.mm-site .mm-pdp-steps li p { margin: var(--mm-space-1) 0 0; font-size: var(--mm-text-sm); color: var(--mm-color-ink-muted); }
.mm-pdp-more { margin: var(--mm-space-6) 0 0; }

/* Flatsome's sticky add-to-cart bar, in the landing page's bottom-bar look. */
body.mm-site .sticky-add-to-cart--active {
	background: var(--mm-color-surface);
	border-top: var(--mm-hairline) solid var(--mm-color-border);
	box-shadow: var(--mm-shadow-raised);
}
/* The bar repeats the add-to-cart form, and with it the trust line and
 * promises hooked under the form (inc/product.php). They are on the page
 * already; in the bar they tripled its height (live, 2026-11-03). */
body.mm-site .sticky-add-to-cart .mm-pdp-trust { display: none; }
body.mm-site .sticky-add-to-cart .single_add_to_cart_button.button,
body.mm-site .sticky-add-to-cart button.single_add_to_cart_button.button.alt,
body.mm-site .sticky-add-to-cart .sticky-add-to-cart-select-options-button.button {
	border-radius: var(--mm-radius-pill);
	background: var(--mm-color-brand);
	color: var(--mm-color-on-brand);
	font-family: var(--mm-font-display);
	font-weight: var(--mm-weight-bold);
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
}

/* Bundles (the Variety Pack, Functional 5, the Ultimate Bundle): each item by
 * its name and link only. Its full description is on its own page, and three
 * to seven copies of it in a row buried the Add to cart button (launch audit,
 * 2026-10-30). No stock count per item either, as on every product page
 * (inc/catalog.php); "Out of stock" still shows. */
body.mm-site .bundled_product .bundled_product_excerpt { display: none; }
body.mm-site .bundled_item_cart_details .stock.in-stock { display: none; }

/* ---------------------------------------------------------------------------
 * 7 · Cart, checkout and order received
 * ------------------------------------------------------------------------ */

/* The cart comes through woocommerce/checkout/layouts/checkout-focused.php and
 * the checkout through Flatsome's default layout; both now sit inside the
 * site's header and footer, and both wrap their content in `.page-checkout`,
 * which is what these rules are scoped to. The steps sit just above it. On the checkout itself (`mm-focused`) the
 * header keeps only the logo and the cart: nothing competes with paying. The
 * footer is the spend-and-get page's, short enough to stay. */
body.mm-focused .mm-hdr-nav,
body.mm-focused .mm-hdr-menubtn,
body.mm-focused .mm-hdr-account { display: none !important; }

/* Customizer CSS pads both pages 160px for the old see-through header
 * (`.page-id-21 .page-wrapper`, `.page-id-22 .page-wrapper`) and hides their
 * title (`.page-id-21 .page-title`), which is where the checkout steps live. */
body.mm-site .page-wrapper.page-checkout {
	max-width: var(--mm-container-max);
	margin: 0 auto;
	padding: var(--mm-space-4) var(--mm-space-2) var(--mm-space-8);
	box-sizing: border-box;
	background: transparent;
	box-shadow: none;
}
body.mm-site .checkout-page-title.page-title { display: block; background: transparent; padding-top: var(--mm-space-6); }
body.mm-site .checkout-page-title .page-title-inner { min-height: 0; padding: 0 0 var(--mm-space-4); }
body.mm-site .checkout-breadcrumbs {
	gap: var(--mm-space-2);
	margin: 0;
	font-family: var(--mm-font-display);
	font-size: var(--mm-text-lg);
	font-weight: var(--mm-weight-bold);
	letter-spacing: normal;
	text-transform: none;
}
body.mm-site .checkout-breadcrumbs a { color: var(--mm-color-ink-muted); }
body.mm-site .checkout-breadcrumbs a.current { color: var(--mm-color-ink); box-shadow: inset 0 calc(-1 * var(--mm-focus-ring)) 0 0 var(--mm-color-brand); }
body.mm-site .checkout-breadcrumbs .divider { color: var(--mm-color-border); }
/* The step number on amber was white (audit 2: unreadable). */
body.mm-site .checkout-breadcrumbs .breadcrumb-step { background-color: var(--mm-color-surface); color: var(--mm-color-ink-muted); border: var(--mm-hairline) solid var(--mm-color-border); }
body.mm-site .checkout-breadcrumbs a.current .breadcrumb-step { background-color: var(--mm-color-brand); color: var(--mm-color-on-brand); border-color: var(--mm-color-brand); }

/* The cart: the lines in one white card, the totals in another. */
body.mm-site .page-checkout .woocommerce-cart-form,
body.mm-site .page-checkout .cart-sidebar.col-inner,
body.mm-site .page-checkout form.checkout .col-inner,
body.mm-site .page-checkout .woocommerce-order {
	padding: var(--mm-space-5);
	background: var(--mm-color-surface);
	border: var(--mm-hairline) solid var(--mm-color-border);
	border-radius: var(--mm-radius-md);
	box-shadow: var(--mm-shadow-card);
	box-sizing: border-box;
}
body.mm-site .page-checkout .cart-sidebar.col-inner { border-color: var(--mm-color-brand-tint-border); }
/* Flatsome boxes the totals again inside that card; one box is enough. */
body.mm-site .page-checkout .cart-sidebar .cart_totals,
body.mm-site .page-checkout .cart-sidebar .is-well { padding: 0; border: 0; background: none; box-shadow: none; }
body.mm-site .page-checkout .shop_table { border: 0; margin: 0; }
body.mm-site .page-checkout .shop_table th {
	font-family: var(--mm-font-display);
	font-size: var(--mm-text-2xs);
	font-weight: var(--mm-weight-bold);
	letter-spacing: var(--mm-tracking-wide);
	text-transform: uppercase;
	color: var(--mm-color-ink-muted);
	border-color: var(--mm-color-border);
}
body.mm-site .page-checkout .shop_table td { border-color: var(--mm-color-border); }
body.mm-site .page-checkout .product-thumbnail img { border-radius: var(--mm-radius-sm); }
body.mm-site .page-checkout .product-name a {
	font-family: var(--mm-font-display);
	font-weight: var(--mm-weight-bold);
	color: var(--mm-color-ink);
}
body.mm-site .page-checkout .amount { font-family: var(--mm-font-numeric); color: var(--mm-color-ink); }
body.mm-site .page-checkout .order-total .amount { font-size: var(--mm-text-xl); font-weight: var(--mm-weight-bold); }
body.mm-site .page-checkout .product-remove a.remove {
	border: var(--mm-hairline) solid var(--mm-color-border);
	border-radius: var(--mm-radius-pill);
	color: var(--mm-color-ink-muted) !important;
}
body.mm-site .page-checkout .product-remove a.remove:hover { border-color: var(--mm-color-ink); background: transparent; color: var(--mm-color-ink) !important; }
body.mm-site .page-checkout .quantity {
	display: inline-flex;
	border: var(--mm-hairline) solid var(--mm-color-border);
	border-radius: var(--mm-radius-pill);
	overflow: hidden;
	background: var(--mm-color-surface);
}
body.mm-site .page-checkout .quantity input,
body.mm-site .page-checkout .quantity .button { border: 0; background: transparent; box-shadow: none; font-family: var(--mm-font-numeric); color: var(--mm-color-ink); margin: 0; }
body.mm-site .page-checkout .cart_totals .widget-title,
body.mm-site .page-checkout .cart_totals th { font-family: var(--mm-font-display); }

/* Every field: rounded, white, the brand colour when it has focus. */
body.mm-site .page-checkout input.input-text,
body.mm-site .page-checkout input[type="text"],
body.mm-site .page-checkout input[type="email"],
body.mm-site .page-checkout input[type="tel"],
body.mm-site .page-checkout select,
body.mm-site .page-checkout textarea {
	min-height: var(--mm-control-height);
	border: var(--mm-hairline) solid var(--mm-color-border);
	border-radius: var(--mm-radius-md);
	background-color: var(--mm-color-surface);
	box-shadow: none;
	font-family: var(--mm-font-body);
	font-size: var(--mm-text-base);
	color: var(--mm-color-ink);
}
body.mm-site .page-checkout input:focus,
body.mm-site .page-checkout select:focus,
body.mm-site .page-checkout textarea:focus { border-color: var(--mm-color-brand-deep); box-shadow: 0 0 0 var(--mm-hairline) var(--mm-color-brand-deep); }
body.mm-site .page-checkout label { font-family: var(--mm-font-display); font-size: var(--mm-text-sm); font-weight: var(--mm-weight-bold); letter-spacing: normal; text-transform: none; color: var(--mm-color-ink); }
body.mm-site .page-checkout h3,
body.mm-site .page-checkout #order_review_heading {
	font-family: var(--mm-font-display);
	font-size: var(--mm-text-xl);
	font-weight: var(--mm-weight-bold);
	letter-spacing: normal;
	text-transform: none;
	color: var(--mm-color-ink);
}

/* The buttons that move the order forward: amber pills. The Customizer makes
 * them black (`.cart_totals .button, button#place_order { background: black }`),
 * which the extra classes here out-rank. */
body.mm-site .page-checkout .wc-proceed-to-checkout a.checkout-button.button,
body.mm-site .page-checkout button#place_order.button,
body.mm-site .page-checkout .cart_totals .button,
body.mm-site .page-checkout .return-to-shop .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: calc(var(--mm-space-12) + var(--mm-space-1));
	margin: var(--mm-space-3) 0 0;
	padding: 0 var(--mm-space-6);
	border: 0;
	border-radius: var(--mm-radius-pill);
	background: var(--mm-color-brand);
	color: var(--mm-color-on-brand);
	font-family: var(--mm-font-display);
	font-size: var(--mm-text-lg);
	font-weight: var(--mm-weight-bold);
	letter-spacing: normal;
	text-transform: none;
	box-shadow: 0 var(--mm-space-1) var(--mm-space-5) rgba(255, 179, 1, .45);
}
body.mm-site .page-checkout .wc-proceed-to-checkout a.checkout-button.button:hover,
body.mm-site .page-checkout button#place_order.button:hover { background: var(--mm-color-star); color: var(--mm-color-on-brand); }
/* The quieter buttons — update cart, apply coupon, continue shopping. */
body.mm-site .page-checkout .coupon .button,
body.mm-site .page-checkout .actions .button.is-outline,
body.mm-site .page-checkout .continue-shopping .button {
	min-height: var(--mm-control-height);
	margin: 0;
	border: var(--mm-hairline) solid var(--mm-color-ink);
	border-radius: var(--mm-radius-pill);
	background: transparent;
	color: var(--mm-color-ink);
	font-family: var(--mm-font-display);
	font-weight: var(--mm-weight-bold);
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
}

/* The free-shipping bar Flatsome draws over the cart: the landing page's
 * progress bar — sand track, amber fill, no stripes. */
body.mm-site .ux-free-shipping { margin-bottom: var(--mm-space-5); }
body.mm-site .ux-free-shipping__notice { font-family: var(--mm-font-display); font-weight: var(--mm-weight-bold); color: var(--mm-color-ink); }
body.mm-site .ux-free-shipping__bar {
	height: var(--mm-space-3);
	border-radius: var(--mm-radius-pill);
	background: var(--mm-color-sand);
	background-image: none;
	overflow: hidden;
}
body.mm-site .ux-free-shipping__bar-progress {
	border-radius: var(--mm-radius-pill);
	background: var(--mm-color-brand);
	background-image: none;
}

/* The payment box: the gateways render inside it unchanged. */
body.mm-site .page-checkout #payment { background: var(--mm-color-canvas); border-radius: var(--mm-radius-md); }
body.mm-site .page-checkout #payment div.payment_box { background: var(--mm-color-surface); border-radius: var(--mm-radius-sm); }
body.mm-site .page-checkout #payment div.payment_box::before { border-bottom-color: var(--mm-color-surface); }

/* Customizer CSS paints `div#content` white; the cards carry the white here. */
body.mm-site .page-checkout div#content { background: transparent; }

/* The empty cart: one centred card, then the button. */
body.mm-site .page-checkout .wc-empty-cart-message .woocommerce-info {
	max-width: var(--mm-drawer-max);
	margin: 0 auto;
	padding: var(--mm-space-6) var(--mm-space-5);
	border-left-width: var(--mm-hairline);
	text-align: center;
	font-family: var(--mm-font-display);
	font-size: var(--mm-text-lg);
}
body.mm-site .page-checkout .wc-empty-cart-message .woocommerce-info::before { display: none; }
body.mm-site .page-checkout .return-to-shop { max-width: var(--mm-drawer-max); margin: 0 auto; text-align: center; }

/* Notices: white cards with an amber edge, not Flatsome's coloured bars. The
 * text sits in Flatsome's .message-container inside; only the outer box is
 * drawn. */
body.mm-site .page-checkout .message-container { padding: 0; border: 0; background: none; box-shadow: none; }
body.mm-site .page-checkout .woocommerce-message,
body.mm-site .page-checkout .woocommerce-info {
	padding: var(--mm-space-4) var(--mm-space-5);
	border: var(--mm-hairline) solid var(--mm-color-brand-tint-border);
	border-left: var(--mm-space-1) solid var(--mm-color-brand);
	border-radius: var(--mm-radius-md);
	background: var(--mm-color-surface);
	color: var(--mm-color-ink);
}

/* ---------------------------------------------------------------------------
 * 8 · The blog: posts as cards
 * ------------------------------------------------------------------------ */

/* Flatsome's blog list and single post, in the site's look: each post a white
 * rounded card on cream, the title left and bold, the meta quiet, "Continue
 * reading" an outlined pill. Content is untouched — it is the database's. */
/* `div#content` is the blog wrapper here, and the Customizer paints it white. */
body.mm-site div#content.blog-wrapper.page-wrapper { padding-top: var(--mm-space-6); background: transparent; }
body.mm-site .blog-wrapper .row-divided > .col { border: 0; }
body.mm-site .blog-wrapper article.post > .article-inner {
	margin-bottom: var(--mm-space-5);
	padding: var(--mm-space-6) var(--mm-space-5);
	background: var(--mm-color-surface);
	border: var(--mm-hairline) solid var(--mm-color-border);
	border-radius: var(--mm-radius-md);
	box-shadow: var(--mm-shadow-card);
}
body.mm-site .blog-wrapper .entry-header-text { text-align: start; padding: 0 0 var(--mm-space-4); }
body.mm-site .blog-wrapper .entry-category {
	font-family: var(--mm-font-display);
	font-size: var(--mm-text-2xs);
	font-weight: var(--mm-weight-bold);
	letter-spacing: var(--mm-tracking-wide);
	color: var(--mm-color-brand-deep);
}
body.mm-site .blog-wrapper .entry-title,
body.mm-site .blog-wrapper .entry-title a {
	font-family: var(--mm-font-display);
	font-weight: var(--mm-weight-bold);
	font-size: var(--mm-text-2xl);
	line-height: var(--mm-leading-tight);
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--mm-color-ink);
	text-wrap: balance;
}
body.mm-site.single-post .blog-wrapper .entry-title { font-size: clamp(var(--mm-text-2xl), 6vw, var(--mm-text-3xl)); }
body.mm-site .blog-wrapper .entry-divider { display: none; }
body.mm-site .blog-wrapper .entry-meta {
	font-size: var(--mm-text-xs);
	letter-spacing: normal;
	text-transform: none;
	color: var(--mm-color-ink-muted);
}
body.mm-site .blog-wrapper .entry-meta a { color: var(--mm-color-brand-deep); }
body.mm-site .blog-wrapper .entry-image img { border-radius: var(--mm-radius-sm); }
body.mm-site .blog-wrapper .entry-content { font-size: var(--mm-text-base); line-height: var(--mm-leading-normal); color: var(--mm-color-ink); }
body.mm-site.single-post .blog-wrapper .entry-content { font-size: var(--mm-text-lg); line-height: 1.65; max-width: var(--mm-measure); }
body.mm-site .blog-wrapper .entry-summary + .text-center,
body.mm-site .blog-wrapper .entry-content .text-center { text-align: start; }
body.mm-site .blog-wrapper a.more-link.button {
	min-height: var(--mm-control-height);
	display: inline-flex;
	align-items: center;
	margin: var(--mm-space-3) 0 0;
	padding: 0 var(--mm-space-5);
	border: var(--mm-hairline) solid var(--mm-color-ink);
	border-radius: var(--mm-radius-pill);
	background: transparent;
	color: var(--mm-color-ink);
	font-family: var(--mm-font-display);
	font-size: var(--mm-text-sm);
	font-weight: var(--mm-weight-bold);
	letter-spacing: normal;
	text-transform: none;
}
body.mm-site .blog-wrapper a.more-link.button:hover { background: var(--mm-color-ink); color: var(--mm-color-on-contrast); }
body.mm-site .blog-wrapper footer.entry-meta { border-top-color: var(--mm-color-border); font-size: var(--mm-text-2xs); }
/* What read as unfinished (launch audit, 2026-10-30): "Uncategorized" as a
 * post's only category, "by admin", and the "Posted in / Leave a comment" line
 * under every card in the list. A real category, when a post has one, shows. */
body.mm-site .blog-wrapper .entry-category:has(> a[href*="/category/uncategorized/"]:only-child),
body.mm-site .blog-wrapper .cat-links:has(> a[href*="/category/uncategorized/"]:only-of-type),
body.mm-site .blog-wrapper .byline,
body.mm-site .blog-wrapper .post-date.badge { display: none; } /* the date is already under the title */
body.mm-site:is(.blog, .archive) .blog-wrapper footer.entry-meta { display: none; }

/* Audit 2 (2026-11-03). The blog has no sidebar widgets, so its column held
 * the posts against the left with a third of the page empty beside them: the
 * empty sidebar goes and the posts sit in one centred column. A sidebar with
 * a widget in it comes back on its own. */
body.mm-site .blog-wrapper .post-sidebar:not(:has(.widget)) { display: none; }
body.mm-site .blog-wrapper .large-9.col:has(~ .post-sidebar):not(:has(~ .post-sidebar .widget)) {
	flex-basis: 100%;
	max-width: calc(var(--mm-container-max) * 2 / 3);
	margin-inline: auto;
}
/* Under a post: "This entry was posted in Uncategorized. Bookmark the
 * permalink.", an "ADMIN" author box and an empty share row read as
 * leftovers. The previous/next links stay. */
body.mm-site.single-post .blog-wrapper footer.entry-meta,
body.mm-site .blog-wrapper .entry-author,
body.mm-site .blog-wrapper .blog-share:not(:has(a)) { display: none; }
body.mm-site .blog-wrapper .navigation-post { margin-top: var(--mm-space-6); }
body.mm-site .blog-wrapper .navigation-post a {
	font-family: var(--mm-font-display);
	font-size: var(--mm-text-sm);
	font-weight: var(--mm-weight-bold);
	color: var(--mm-color-ink);
}
/* A post's own headings in the site's face (they came out in the old one). */
body.mm-site .blog-wrapper .entry-content :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--mm-font-display);
	font-weight: var(--mm-weight-bold);
	letter-spacing: normal;
	text-transform: none;
	color: var(--mm-color-ink);
}
/* The blog's heading (inc/blog.php), and the search results' one. */
.mm-blog-head {
	max-width: calc(var(--mm-container-max) * 2 / 3);
	margin: 0 auto var(--mm-space-6);
	padding: 0 var(--mm-space-4);
}
.mm-blog-head__title,
body.mm-site .mm-search-title {
	margin: 0;
	font-family: var(--mm-font-display);
	font-weight: var(--mm-weight-bold);
	font-size: clamp(var(--mm-text-3xl), 8vw, var(--mm-text-4xl));
	line-height: var(--mm-leading-tight);
	letter-spacing: -0.025em;
	text-transform: none;
	color: var(--mm-color-ink);
}
body.mm-site .mm-search-title { margin-bottom: var(--mm-space-5); font-size: clamp(var(--mm-text-2xl), 6vw, var(--mm-text-3xl)); }
.mm-blog-head__lede {
	margin: var(--mm-space-3) 0 0;
	font-size: var(--mm-text-lg);
	line-height: var(--mm-leading-normal);
	color: var(--mm-color-ink-muted);
}
.mm-blog-head__lede a { color: var(--mm-color-brand-deep); text-decoration: underline; }
/* Flatsome's wide blog column pads 30px a side: the heading lines up with the cards. */
@media (min-width: 850px) {
	.mm-blog-head { padding-inline: var(--mm-space-8); }
}

/* ============================================================================
 * Breakpoints. Literal widths on purpose — see the header note.
 * ========================================================================= */

/* The smallest phones (320–359px): card buttons in smaller words, no arrow. */
@media (max-width: 359px) {
	body.mm-site :is(.products, .related) .product-small .add-to-cart-button .button { font-size: var(--mm-text-2xs); letter-spacing: normal; }
	body.mm-site :is(.products, .related) .product-small .add-to-cart-button .button::after { content: none; }
}

@media (min-width: 600px) {
	.mm-pdp-trust ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mm-hdr-age { display: inline-block; }
	.mm-hdr-menulabel { display: inline; }
	.mm-ftr-promises { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
	.mm-hdr-inner { min-height: calc(var(--mm-space-16) + var(--mm-space-4)); }
	.mm-hdr-logo { height: var(--mm-space-12); }
	.mm-hdr-nav { display: block; }
	.mm-hdr-cartlabel { display: inline; }
	body.mm-site .mm-hdr-account { display: inline-flex; }
	body.mm-site .mm-hdr-menubtn,
	.mm-hdr-drawer { display: none !important; }
}

@media (min-width: 900px) {
	.mm-pdp-tiers {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-auto-columns: auto;
		margin: 0;
		padding: 0;
		overflow: visible;
		gap: var(--mm-space-5);
	}
	.mm-pdp-steps ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mm-pdp-steps li { padding: var(--mm-space-16) var(--mm-space-5) var(--mm-space-5); }
	body.mm-site .product-info.summary { padding: var(--mm-space-8); }
}

/* ---------------------------------------------------------------------------
 * 9 · My account (launch audit, 2026-10-30)
 *
 * The log-in page still had Flatsome's grey "MY ACCOUNT" band, an uppercase
 * "LOGIN", and a small square amber button. Now: the guides' heading, one
 * white card, fields and buttons as the checkout has them (§7).
 * ------------------------------------------------------------------------ */

body.mm-site .my-account-header.page-title {
	background: transparent;
	border: 0;
	box-shadow: none;
}
body.mm-site .my-account-header .page-title-inner { padding-top: var(--mm-space-10); padding-bottom: var(--mm-space-2); }
body.mm-site .my-account-header .social-login { text-align: start; }
body.mm-site .my-account-header h1 {
	margin: 0;
	font-family: var(--mm-font-display);
	font-weight: var(--mm-weight-bold);
	font-size: clamp(var(--mm-text-3xl), 8vw, var(--mm-text-4xl));
	line-height: var(--mm-leading-tight);
	letter-spacing: -0.025em;
	text-transform: none;
	color: var(--mm-color-ink);
}

body.mm-site .page-wrapper.my-account .account-container {
	max-width: var(--mm-drawer-max);
	margin: 0;
	padding: var(--mm-space-6) var(--mm-space-5);
	box-sizing: border-box;
	background: var(--mm-color-surface);
	border: var(--mm-hairline) solid var(--mm-color-border);
	border-radius: var(--mm-radius-md);
	box-shadow: var(--mm-shadow-card);
}
body.mm-site .page-wrapper.my-account .account-container h2,
body.mm-site .page-wrapper.my-account .account-container h3 {
	font-family: var(--mm-font-display);
	font-size: var(--mm-text-xl);
	font-weight: var(--mm-weight-bold);
	letter-spacing: normal;
	text-transform: none;
	color: var(--mm-color-ink);
}
body.mm-site .page-wrapper.my-account label { font-family: var(--mm-font-display); font-size: var(--mm-text-sm); font-weight: var(--mm-weight-bold); letter-spacing: normal; text-transform: none; color: var(--mm-color-ink); }
body.mm-site .page-wrapper.my-account input.input-text,
body.mm-site .page-wrapper.my-account input[type="text"],
body.mm-site .page-wrapper.my-account input[type="email"],
body.mm-site .page-wrapper.my-account input[type="password"] {
	min-height: var(--mm-control-height);
	border: var(--mm-hairline) solid var(--mm-color-border);
	border-radius: var(--mm-radius-md);
	background-color: var(--mm-color-surface);
	box-shadow: none;
	font-family: var(--mm-font-body);
	font-size: var(--mm-text-base);
	color: var(--mm-color-ink);
}
body.mm-site .page-wrapper.my-account input:focus { border-color: var(--mm-color-brand-deep); box-shadow: 0 0 0 var(--mm-hairline) var(--mm-color-brand-deep); }

/* "Lost your password?" sat loose on the page with a button the full page
 * wide (audit 2): it gets the log-in card. */
body.mm-site .page-wrapper.my-account form.lost_reset_password {
	max-width: var(--mm-drawer-max);
	padding: var(--mm-space-6) var(--mm-space-5);
	box-sizing: border-box;
	background: var(--mm-color-surface);
	border: var(--mm-hairline) solid var(--mm-color-border);
	border-radius: var(--mm-radius-md);
	box-shadow: var(--mm-shadow-card);
}
body.mm-site .page-wrapper.my-account form.lost_reset_password .form-row { float: none; width: 100%; }
body.mm-site .page-wrapper.my-account form.lost_reset_password > p:first-child { margin-top: 0; color: var(--mm-color-ink-muted); }

/* Log in, reset password, register, save: the amber pill. */
body.mm-site .page-wrapper.my-account .woocommerce-form-login__submit.button,
body.mm-site .page-wrapper.my-account .woocommerce-ResetPassword .button,
body.mm-site .page-wrapper.my-account .woocommerce-form-register__submit.button,
body.mm-site .page-wrapper.my-account .woocommerce-Button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--mm-control-height);
	margin: var(--mm-space-3) 0 0;
	padding: 0 var(--mm-space-6);
	border: 0;
	border-radius: var(--mm-radius-pill);
	background: var(--mm-color-brand);
	color: var(--mm-color-on-brand);
	font-family: var(--mm-font-display);
	font-size: var(--mm-text-sm);
	font-weight: var(--mm-weight-bold);
	letter-spacing: var(--mm-tracking-display);
	text-transform: uppercase;
	box-shadow: none;
}
body.mm-site .page-wrapper.my-account .button:hover { background: var(--mm-color-star); color: var(--mm-color-on-brand); }
body.mm-site .page-wrapper.my-account .woocommerce-form-login__rememberme { font-family: var(--mm-font-body); font-weight: var(--mm-weight-body); }
body.mm-site .page-wrapper.my-account .lost_password a,
body.mm-site .page-wrapper.my-account .woocommerce-MyAccount-navigation a {
	color: var(--mm-color-ink);
	text-decoration: underline;
	text-decoration-color: var(--mm-color-brand);
	text-underline-offset: var(--mm-space-1);
}
body.mm-site .page-wrapper.my-account .button:focus-visible,
body.mm-site .page-wrapper.my-account a:focus-visible {
	outline: var(--mm-focus-ring) solid var(--mm-color-brand-deep);
	outline-offset: var(--mm-focus-ring);
}