/* Shared components: buttons, header, drawer, footer, How strip, promo band, product card.
   Design rules: no pills or chips (radius 2px max), no eyebrows, no side stripes,
   no divider lines between sections, CTAs are real buttons (an arrow lives inside the
   button, never as a bare arrow link). */

/* ------------------------------------------------------------------ Buttons */
/* The one button (round 4, Ben 22 Oct): the label in DM Sans, then a square cell at the
   right end behind a thin rule, holding the icon. On hover the icon leaves to the top
   right and the next one arrives from the bottom left. Primary is green on every band,
   ghost is an outline in the band's text colour, ink is for the email band and the
   back in stock form. Navigation buttons carry the arrow, add to cart the plus. */
:root {
	--mm-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='M6.5 17.5 17 7M9 6.5h8.5V15'/%3E%3C/svg%3E");
	--mm-icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
.mm-btn {
	--mm-btn-h: 54px;
	--mm-btn-icon: var(--mm-icon-arrow);
	--mm-btn-icon-size: 20px;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	min-height: var(--mm-btn-h);
	padding: 12px calc(var(--mm-btn-h) + 22px) 12px 24px;
	font: 600 16px/1.2 var(--mm-body);
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	color: var(--mm-ink);
	background: var(--mm-green);
	border: 0;
	border-radius: var(--mm-radius);
	cursor: pointer;
	transition: background-color .2s, color .2s, box-shadow .2s;
}
.mm-btn::before {
	content: ''; position: absolute; top: 0; bottom: 0; right: var(--mm-btn-h); width: 1.5px;
	background: currentColor; opacity: .85;
}
.mm-btn::after {
	content: ''; position: absolute; top: 0; right: 0; width: var(--mm-btn-h); height: 100%;
	background: currentColor;
	-webkit-mask: var(--mm-btn-icon) 50% 50% / var(--mm-btn-icon-size) no-repeat, var(--mm-btn-icon) -100% 200% / var(--mm-btn-icon-size) no-repeat;
	mask: var(--mm-btn-icon) 50% 50% / var(--mm-btn-icon-size) no-repeat, var(--mm-btn-icon) -100% 200% / var(--mm-btn-icon-size) no-repeat;
	transition: -webkit-mask-position .42s var(--mm-ease-out), mask-position .42s var(--mm-ease-out);
}
.mm-btn:hover::after, .mm-btn:focus-visible::after {
	-webkit-mask-position: 200% -100%, 50% 50%;
	mask-position: 200% -100%, 50% 50%;
}
.mm-btn:focus-visible { outline: 2px solid var(--mm-ink); outline-offset: 3px; }
.mm-on-ink .mm-btn:focus-visible, .mm-band--pink .mm-btn:focus-visible { outline-color: var(--mm-paper); }
.mm-btn:active { transform: translateY(1px); }

.mm-btn--primary { background: var(--mm-green); color: var(--mm-ink); }
.mm-btn--primary:hover { background: #d6f06a; color: var(--mm-ink); }
.mm-btn--ink { background: var(--mm-ink); color: var(--mm-paper); }
.mm-btn--ink:hover { background: var(--mm-green); color: var(--mm-ink); }
.mm-btn--ghost { background: transparent; color: var(--mm-ink); box-shadow: inset 0 0 0 1.5px currentColor; }
.mm-btn--ghost:hover { background: var(--mm-ink); color: var(--mm-paper); box-shadow: inset 0 0 0 1.5px var(--mm-ink); }
.mm-on-ink .mm-btn--ghost { color: var(--mm-paper); }
.mm-on-ink .mm-btn--ghost:hover { background: var(--mm-paper); color: var(--mm-ink); box-shadow: inset 0 0 0 1.5px var(--mm-paper); }
.mm-btn--sm { --mm-btn-h: 44px; --mm-btn-icon-size: 18px; padding: 8px calc(var(--mm-btn-h) + 14px) 8px 16px; font-size: 15px; }
/* Add to cart (Ben, 22 Oct follow-up): the plus does not leave. It spins half a turn with
   a small overshoot and stays, and turns back when the pointer leaves. */
.mm-btn.add_to_cart_button, .mm-btn--add { --mm-btn-icon: var(--mm-icon-plus); }
.mm-btn.add_to_cart_button::after, .mm-btn--add::after {
	-webkit-mask: var(--mm-btn-icon) 50% 50% / var(--mm-btn-icon-size) no-repeat;
	mask: var(--mm-btn-icon) 50% 50% / var(--mm-btn-icon-size) no-repeat;
	transition: transform .6s cubic-bezier(.34, 1.56, .64, 1);
}
.mm-btn.add_to_cart_button:hover::after, .mm-btn.add_to_cart_button:focus-visible::after,
.mm-btn--add:hover::after, .mm-btn--add:focus-visible::after {
	-webkit-mask-position: 50% 50%;
	mask-position: 50% 50%;
	transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
	.mm-btn::after { transition: none; }
	.mm-btn.add_to_cart_button:hover::after, .mm-btn.add_to_cart_button:focus-visible::after,
	.mm-btn--add:hover::after, .mm-btn--add:focus-visible::after { transform: none; }
}

.mm-btn.loading { opacity: .6; pointer-events: none; }
.mm-btn.is-added { background: var(--mm-ink); color: var(--mm-paper); }
.mm-on-ink .mm-btn.is-added { background: var(--mm-paper); color: var(--mm-ink); }
.added_to_cart.wc-forward { display: none !important; }

/* ------------------------------------------------------------------- Header */
/* The header, its panels, the cart drawer and the phone drawer live in header.css
   (Home round 3, builder A). */
.mm-footer__logo svg { width: 100%; height: auto; }

/* ------------------------------------------------------------------- Footer */
.mm-footer {
	background: var(--mm-ink);
	color: var(--mm-on-ink);
	padding: clamp(56px, 7vw, 96px) 0 32px;
}
.mm-footer__top {
	display: grid;
	grid-template-columns: 1.7fr repeat(4, 1fr); /* four link columns since rollout S10 (Delivery areas) */
	align-items: start;
	gap: 48px;
}
.mm-footer__logo { display: block; width: 228px; margin-bottom: 22px; color: var(--mm-green); }
.mm-footer__logo:hover { color: var(--mm-green); }
.mm-footer__brand p { max-width: 38ch; font-size: var(--mm-text-sm); line-height: 1.7; }
.mm-footer__phone { font: 700 14px/1 var(--mm-body); color: var(--mm-paper); }
.mm-footer__title { font-size: 26px; letter-spacing: .04em; color: var(--mm-paper); margin-bottom: 16px; }
.mm-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.mm-footer__list a { font-size: var(--mm-text-sm); line-height: 1.5; color: var(--mm-on-ink); text-decoration: none; }
.mm-footer__list a:hover { color: var(--mm-accent-text); }
.mm-footer__base {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	margin-top: 64px;
	font: 400 var(--mm-label)/1.6 var(--mm-body);
	color: var(--mm-mute-2);
}
.mm-footer__base p { margin: 0; color: inherit; }
.mm-footer__base p:last-child { flex: none; white-space: nowrap; } /* the copyright line never breaks beside the long line */

/* Rollout S10 rework: the brand and four link columns share one row only from 1180 px;
   below that the brand takes its own row and the four link columns sit even under it,
   so no heading or link wraps and every column's heading and first link share a line. */
@media (max-width: 1179px) {
	.mm-footer__top { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
	.mm-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
	.mm-footer__top { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
	.mm-footer__brand { grid-column: 1 / -1; }
	.mm-footer__base { flex-direction: column; gap: 12px; }
}
/* The narrowest phones: two columns of about 136 px, so the headings and links step
   down a size (links stay at 14 px) to keep every one on its line. */
@media (max-width: 400px) {
	.mm-footer__title { font-size: 22px; }
	.mm-footer__list a { font-size: 14px; }
}

/* ---------------------------------------------------------------- How strip */
.mm-how-strip { background: var(--mm-paper); color: var(--mm-ink); }
.mm-how-strip--ink, .mm-how-strip--drawer { background: var(--mm-ink); color: var(--mm-paper); }
.mm-how-strip__list {
	list-style: none;
	margin-block: 0;
	padding-block: 16px;
	padding-inline: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 44px;
	font: 700 14px/1.4 var(--mm-body);
}
.mm-how-strip__list li { display: flex; align-items: center; gap: 10px; }
.mm-how-strip .mm-icon--sparkle { width: 15px; height: 15px; fill: var(--mm-accent); stroke: none; flex: none; }
.mm-how-strip--ink .mm-icon--sparkle, .mm-how-strip--drawer .mm-icon--sparkle { fill: var(--mm-green); }

.mm-how-strip__short { display: none; }

@media (max-width: 700px) {
	.mm-how-strip__list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px 14px;
		padding-block: 14px;
		font-size: 11px;
		letter-spacing: .02em;
	}
	.mm-how-strip__list li { white-space: nowrap; }
	.mm-how-strip__long {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}
	.mm-how-strip__short { display: inline; }
}

/* ------------------------------------------------------------- Product grid */
.mm-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--mm-grid-gap);
}
@media (max-width: 1100px) { .mm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .mm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The product grid (mm_product_grid, KS-06): symmetrical rows, four across, two from
   1000 px down; a short last row sits centred, never three plus an offset. Cards keep
   the carousel's width (a quarter of the container less the gaps). */
.mm-pgrid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--mm-grid-gap); margin: 0; padding: 0; list-style: none; }
.mm-pgrid__item { display: flex; flex: 0 0 calc((100% - 3 * var(--mm-grid-gap)) / 4); min-width: 0; }
.mm-pgrid__item > * { flex: 1 1 auto; min-width: 0; }
@media (max-width: 1000px) { .mm-pgrid__item { flex-basis: calc((100% - var(--mm-grid-gap)) / 2); } }

/* The wide bundle card (mm_bundle_card, KS-06): one or two bundles, each one card across
   the container. Phones: the picture over the words; from 700 px the square picture on
   the left. The card's own parts and colours. */
.mm-bundles { display: grid; gap: var(--mm-grid-gap); margin: 0; padding: 0; list-style: none; }
.mm-card.mm-card--wide { display: grid; grid-template-columns: minmax(0, 1fr); }
.mm-card--wide .mm-card__body { gap: 16px; padding: 22px 20px 24px; }
.mm-card--wide .mm-card__body .mm-card__name { font-size: clamp(30px, 3vw, 44px); }
.mm-card__inside { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mm-card .mm-card__body .mm-card__inside li { position: relative; padding-left: 20px; font: 400 16px/1.45 var(--mm-body); color: var(--mm-on-ink); }
.mm-card__inside li::before { content: ''; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: var(--mm-accent); }
.mm-card--wide .mm-card__buy { flex-wrap: wrap; padding-top: 12px; }
.mm-card__prices { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.mm-card--wide .mm-card__body .mm-card__price { font-size: 40px; }
.mm-card .mm-card__body .mm-card__apart, .mm-card .mm-card__body .mm-card__save { margin: 0; font: 700 14px/1.4 var(--mm-body); color: var(--mm-on-ink); }
.mm-card__apart del { color: var(--mm-mute-2); }
@media (min-width: 700px) {
	.mm-card.mm-card--wide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
	.mm-card--wide .mm-card__body { padding: clamp(24px, 3vw, 44px); }
	.mm-card--wide .mm-card__buy { align-items: flex-end; }
}

/* ------------------------------------------------------------- Product card */
/* One card for the whole site: a light picture cell over an ink body. Ink #141414
   on cream bands; #1b1b1b with a faint border on ink bands. Body colours are set
   on the card's own parts so page styles around it cannot turn them dark. */
.mm-card {
	--mm-card-line: rgba(245, 245, 240, .16);
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	color: var(--mm-paper);
	background: #141414;
	transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s cubic-bezier(.22, 1, .36, 1);
}
.mm-on-ink .mm-card { background: #1b1b1b; border: 1px solid rgba(245, 245, 240, .08); }
.mm-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(13, 13, 13, .2); }
.mm-on-ink .mm-card:hover { box-shadow: 0 18px 48px rgba(200, 230, 68, .24), 0 0 0 1px rgba(200, 230, 68, .38); }
.mm-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--mm-cell);
}
.mm-card__img, .mm-card__alt {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s cubic-bezier(.22, 1, .36, 1), opacity .5s ease;
}
.mm-card__alt { position: absolute; inset: 0; opacity: 0; }
.mm-card:hover .mm-card__img, .mm-card:hover .mm-card__alt { transform: scale(1.06); }
.mm-card.has-alt:hover .mm-card__alt { opacity: 1; }
.mm-card__alt:not([src]) { visibility: hidden; } /* until site.js gives it its source */
/* The marks on the picture (mm_mark, KS-04): Sale and Sold out, square, pink with ink
   words (the highlight). Only one shows: a sold out product is never on sale. The card
   and the product page's gallery use it. */
.mm-mark {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	padding: 9px 12px 8px;
	font: 700 14px/1 var(--mm-body);
	color: var(--mm-ink);
	background: var(--mm-highlight);
	pointer-events: none;
}
.mm-mark[hidden] { display: none; }
.mm-card__body {
	--mm-accent-text: var(--mm-green); /* the body is black: green text is the lime */
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px 18px 20px;
	color: var(--mm-paper);
}
.mm-card .mm-card__name { margin: 0; font: 400 28px/.95 var(--mm-display); letter-spacing: .01em; color: var(--mm-paper); }
.mm-card .mm-card__name a { color: inherit; text-decoration: none; transition: color .2s; }
.mm-card .mm-card__name a:hover { color: var(--mm-accent-text); }

/* Potency as a picture: ten square segments, green up to the rating; pink with a pink
   label from 9/10 (.is-high, the highlight). */
.mm-card__potency { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; min-width: 0; }
.mm-card__potency[hidden] { display: none; }
.mm-meter { display: inline-grid; grid-template-columns: repeat(10, 9px); gap: 3px; flex: none; }
.mm-meter__seg { display: block; width: 9px; height: 9px; background: var(--mm-card-line); }
.mm-meter__seg.is-on { background: var(--mm-accent); }
.mm-meter__seg.is-half { background: linear-gradient(90deg, var(--mm-accent) 50%, var(--mm-card-line) 50%); }
.is-high .mm-meter__seg.is-on { background: var(--mm-highlight); }
.is-high .mm-meter__seg.is-half { background: linear-gradient(90deg, var(--mm-highlight) 50%, var(--mm-card-line, rgba(245, 245, 240, .16)) 50%); }
.mm-card .mm-card__body .mm-card__potency-label { font: 700 14px/1 var(--mm-body); color: var(--mm-paper); white-space: nowrap; }
.mm-card .mm-card__body .is-high .mm-card__potency-label { color: var(--mm-highlight); }
.mm-card .mm-card__body p.mm-card__meta {
	margin: 0;
	font: 400 var(--mm-label)/1.5 var(--mm-body);
	color: var(--mm-on-ink);
}
.mm-card__meta[hidden] { display: none; }
.mm-card__rating { display: flex; align-items: center; gap: 6px; margin: 0; }
.mm-card .mm-card__body span.mm-card__reviews { font: 400 var(--mm-label)/1 var(--mm-body); color: var(--mm-on-ink); }
.mm-stars {
	--mm-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5l2.5 5.4 5.9.6-4.4 4 1.3 5.8L12 16.4l-5.3 2.9 1.3-5.8-4.4-4 5.9-.6z'/%3E%3C/svg%3E");
	flex: none; /* five whole stars in a row that has no room left (Home, Our pick, at 320) */
	width: 80px;
	height: 15px;
	background: linear-gradient(90deg, var(--mm-star-on, var(--mm-ink)) calc(var(--mm-rating, 1) * 100%), var(--mm-star-off, #d5d5cf) 0);
	-webkit-mask: var(--mm-star) 0 0 / 16px 15px repeat-x;
	mask: var(--mm-star) 0 0 / 16px 15px repeat-x;
}
.mm-card .mm-stars { --mm-star-on: var(--mm-paper); --mm-star-off: rgba(245, 245, 240, .22); }

/* Options: outlined cream; the picked one filled cream; sold out struck through. */
.mm-weights { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; border: 0; min-width: 0; }
.mm-weight { position: relative; cursor: pointer; }
.mm-weight input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mm-card .mm-weight span {
	display: block;
	min-width: 50px;
	padding: 9px 10px 8px;
	border: 1.5px solid rgba(245, 245, 240, .62);
	border-radius: 0;
	font: 700 14px/1 var(--mm-body);
	text-align: center;
	color: var(--mm-paper);
	transition: background-color .15s, color .15s, border-color .15s;
}
.mm-card .mm-weight:hover span { background: rgba(245, 245, 240, .1); }
.mm-card .mm-weight input:checked + span { background: var(--mm-paper); border-color: var(--mm-paper); color: var(--mm-ink); }
.mm-weight input:focus-visible + span { outline: 2px solid var(--mm-accent); outline-offset: 2px; }
.mm-weight.is-out { cursor: not-allowed; }
.mm-card .mm-weight.is-out span { border-color: rgba(245, 245, 240, .2); color: rgba(245, 245, 240, .42); text-decoration: line-through; background: none; }

.mm-card__buy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 6px;
}
.mm-card .mm-card__body .mm-card__price {
	margin: 0;
	font: 400 30px/1 var(--mm-display);
	letter-spacing: .02em;
	color: var(--mm-accent-text);
	white-space: nowrap;
}
.mm-card__price del { margin-right: 6px; font-size: .68em; color: rgba(245, 245, 240, .5); }
.mm-card__price ins { text-decoration: none; }
.mm-card__price .screen-reader-text { position: absolute !important; }
/* Add to cart is the small button (components.css .mm-btn--sm) with the plus. */
.mm-card .mm-card__add { --mm-btn-h: 44px; --mm-btn-icon-size: 18px; padding: 8px calc(var(--mm-btn-h) + 14px) 8px 16px; font-size: 15px; }
.mm-card .mm-card__add.is-added { background: var(--mm-paper); color: var(--mm-ink); }
/* Sold out (Ben, 22 Oct): the picture stays as it is (the pink mark says it), the price
   steps back, and Notify me opens a one field form in the card so it is never a dead
   end. Without script the button is a link to the product page's back soon form. */
.mm-card.is-out .mm-card__body .mm-card__price { color: rgba(245, 245, 240, .6); }
.mm-card__notify[hidden] { display: none; }
/* The card body is black: its ghost button is the white outline (as .mm-on-ink). */
.mm-card .mm-btn--ghost { color: var(--mm-paper); }
.mm-card .mm-btn--ghost:hover, .mm-card .mm-btn--ghost[aria-expanded="true"] { background: var(--mm-paper); color: var(--mm-ink); box-shadow: inset 0 0 0 1.5px var(--mm-paper); }
/* The back in stock form (mm_restock_form, KS-04): one field and one button, on a dark
   ground (the card's body, the product page's buy area). The handler's message
   replaces the field when it is done. */
.mm-restock { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 0; }
.mm-restock[hidden] { display: none; }
.mm-restock .mm-restock__input {
	min-width: 0;
	height: 44px;
	padding: 0 12px;
	font: 400 15px/1 var(--mm-body);
	color: var(--mm-paper);
	background: transparent;
	border: 1.5px solid rgba(245, 245, 240, .62);
	border-radius: 0;
}
.mm-restock .mm-restock__input::placeholder { color: rgba(245, 245, 240, .6); }
.mm-restock .mm-restock__input:focus { outline: 2px solid var(--mm-accent); outline-offset: 1px; }
.mm-restock p.mm-restock__msg { grid-column: 1 / -1; margin: 0; font: 400 var(--mm-label)/1.5 var(--mm-body); color: var(--mm-on-ink); }
.mm-restock p.mm-restock__msg:empty { display: none; }
.mm-restock p.mm-restock__msg.is-error { color: var(--mm-highlight); }
.mm-restock p.mm-restock__done { display: none; grid-column: 1 / -1; margin: 0; font: 700 var(--mm-label)/1.5 var(--mm-body); color: var(--mm-paper); }
.mm-restock p.mm-restock__done:target { display: block; }
.mm-restock.is-done > :not(.mm-restock__msg) { display: none; }
.mm-restock__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mm-card .mm-restock__btn { --mm-btn-h: 44px; --mm-btn-icon-size: 18px; padding: 8px calc(var(--mm-btn-h) + 14px) 8px 16px; font-size: 15px; }
/* On the product page the form takes the full button height. */
.mm-restock--page .mm-restock__input { height: 58px; padding: 0 18px; font-size: 16px; border-width: 2px; }
.mm-restock--page .mm-restock__btn { min-height: 58px; }

@media (max-width: 600px) {
	.mm-card__body { padding: 12px 12px 14px; gap: 8px; }
	.mm-card .mm-card__name { font-size: 22px; }
	.mm-meter { grid-template-columns: repeat(10, 7px); gap: 2px; }
	.mm-meter__seg { width: 7px; height: 7px; }
	.mm-card .mm-weight span { min-width: 0; padding: 8px 7px 7px; font-size: 14px; }
	.mm-card .mm-restock { grid-template-columns: 1fr; }
	.mm-card__buy { flex-direction: column; align-items: stretch; gap: 8px; }
	.mm-card .mm-card__body .mm-card__price { font-size: 24px; }
	.mm-card .mm-card__add { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.mm-card, .mm-card:hover { transform: none; transition: none; }
	.mm-card__img, .mm-card__alt { transition: none; }
	.mm-card:hover .mm-card__img, .mm-card:hover .mm-card__alt { transform: none; }
}

/* ------------------------------------------------------- WooCommerce notices */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	list-style: none;
	margin: 0 0 24px;
	padding: 14px 18px;
	background: var(--mm-white);
	font-size: var(--mm-text-sm);
}
.woocommerce-error { color: var(--mm-highlight-text); }

/* ---------------------------------------------- The card's wishlist heart */
/* Rollout S10 (B-03): a square toggle on the picture's top right corner, flush to the
   corner like the Sale mark on the left. White with an ink heart; saved, the cell turns
   green and the heart fills. A 48 px tap target. kit.js sets aria-pressed. */
.mm-card__wish {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	color: var(--mm-ink);
	background: var(--mm-paper);
	border: 0;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease;
}
.mm-card__wish .mm-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.mm-card__wish:hover .mm-icon, .mm-card__wish:focus-visible .mm-icon { transform: scale(1.12); }
.mm-card__wish:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: -4px; }
.mm-card__wish[aria-pressed='true'] { background: var(--mm-accent); }
.mm-card__wish[aria-pressed='true'] .mm-icon { fill: currentColor; }
@media (prefers-reduced-motion: reduce) {
	.mm-card__wish, .mm-card__wish .mm-icon { transition: none; }
	.mm-card__wish:hover .mm-icon, .mm-card__wish:focus-visible .mm-icon { transform: none; }
}

/* ------------------------------------- The card's button on a narrow card (rollout S7) */
/* Two cards across a phone leave a card 138 px wide at 320 and 166 px at 375, and the
   button's centred label ran past both of its edges (S8's measure: "Add to cart" at
   320, "Choose a swap" at 375). The card measures itself (a container) and, when narrow,
   its button goes compact so the whole label shows on one line from 320 px: smaller
   padding and 14 px type (the kit's smallest), the moving arrow's cell hidden; the plus
   cell of Add to cart stays while it fits beside the label, and goes on the narrowest
   cards. The same for the card's Notify me and its back in stock form's button. */
.mm-card { container: mm-card / inline-size; }
@container mm-card (max-width: 219px) {
	.mm-card .mm-card__body { padding-inline: 10px; }
	.mm-card .mm-card__add, .mm-card .mm-restock__btn { --mm-btn-h: 44px; --mm-btn-icon-size: 16px; justify-content: center; padding: 8px; font-size: 14px; }
	.mm-card .mm-card__add:not(.add_to_cart_button)::before, .mm-card .mm-card__add:not(.add_to_cart_button)::after,
	.mm-card .mm-restock__btn::before, .mm-card .mm-restock__btn::after { display: none; }
	.mm-card .mm-card__add.add_to_cart_button { padding-right: calc(var(--mm-btn-h) + 8px); }
}
@container mm-card (max-width: 149px) {
	.mm-card .mm-card__add, .mm-card .mm-restock__btn { padding-inline: 6px; }
	.mm-card .mm-card__add.add_to_cart_button { padding-right: 6px; }
	.mm-card .mm-card__add.add_to_cart_button::before, .mm-card .mm-card__add.add_to_cart_button::after { display: none; }
}