/*
Theme Name:   Elim Health
Theme URI:    https://elimhealth.com.au/
Description:  Storefront child theme for Elim Health. Design system follows seed.com:
              cream ground, deep forest green, a single lime accent, large light-weight
              display type at tight tracking, pill buttons, and full-bleed sections that
              rise over one another with rounded tops.
Author:       Elim Health
Template:     storefront
Version:      2.0.0
Text Domain:  meridian
*/

/* ==========================================================================
   Tokens — measured from seed.com
   forest #1C3A13 · cream #FCFCF7 · lime #D3FA99 · stone #EFEFEA
   Display type is LIGHT (350) and tightly tracked; that lightness is the single
   most characteristic thing about the reference and the easiest to lose.
   ========================================================================== */

:root {
	--forest:      #1C3A13;
	--forest-soft: #2C4D22;
	/* Lighter, slightly less saturated green for full-bleed bands. The deep
	   forest is right for type and buttons but reads heavy across a whole
	   section, and leaves the cards on it with almost nothing to contrast against. */
	--forest-band: #2F5228;
	--cream:       #FCFCF7;
	--stone:       #EFEFEA;
	--stone-deep:  #E3E3DB;
	--lime:        #D3FA99;
	/* Darkened from the reference's #757C5D, which measured 4.25:1 on cream —
	   short of AA for the 12px uppercase eyebrows this token sets. */
	--sage:        #68704F;
	--moss:        #698E79;
	--brass:       #9F995B;
	--white:       #FFFFFF;

	--ink:      var(--forest);
	--ink-2:    #4A5C42;
	/* Darkened from #79856F, which measured 3.89:1 on white — below AA for the
	   card descriptor and price lines this token carries. */
	--ink-3:    #63705B;
	--on-dark:  var(--cream);
	--on-dark-2:#A9B8A2;

	--rule:        #DEDED6;
	--rule-on-dark:rgba(252, 252, 247, 0.18);

	/* Notices use a muted clay, never a saturated alert red. Attention is drawn
	   with a dot and a label — the same grammar as .mn-eyebrow — rather than with
	   an accent bar or a tinted fill. */
	--clay:      #8A5A4E;
	--clay-deep: #6B4239;

	--r-pill:   1000px;
	--r-card:   16px;
	--r-sect:   32px;
	--r-sm:     8px;

	--pad-sect: clamp(3.5rem, 7vw, 5rem);
	--gut:      clamp(1.25rem, 3vw, 2rem);
	--maxw:     1320px;

	/* Seed Sans is proprietary. This stack keeps the geometric-grotesque feel and
	   has real light weights on every target platform. No webfont CDN. */
	--sans: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI Variable",
	        "Segoe UI", Roboto, Inter, Arial, sans-serif;
	--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ==========================================================================
   Base
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Weight 350 is the baseline for the entire site, body copy included. Emphasis is
   carried by weight 500 — never bold. Leading is 1.3 and tracking is slightly
   negative even at body size; both are measured from the reference and both are
   easy to lose. */
body,
body.woocommerce-page {
	background: var(--cream);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 350;
	line-height: 1.3;
	letter-spacing: -0.01em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

strong, b { font-weight: 500; }

.site-content,
.site-header,
.site-footer,
#page { background: transparent; }

.col-full { max-width: var(--maxw); padding-left: var(--gut); padding-right: var(--gut); }

/* Display type: large, light, tight. */
h1, h2, h3, h4,
.site-title,
.product_title,
.woocommerce-loop-product__title,
.entry-title {
	font-family: var(--sans);
	color: var(--ink);
	font-weight: 350;
	letter-spacing: -0.025em;
	line-height: 1.08;
	margin-top: 0;
}

/* 48px hero · 40px section · 24px object-level, mirroring the reference scale. */
h1, .entry-title { font-size: clamp(2.2rem, 4.6vw, 3rem); }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.2; }
h4 { font-size: 1.125rem; letter-spacing: -0.015em; }

p { margin: 0 0 1rem; }

/* Emphasis label: the reference's only real deviation from weight 350. */
.mn-label {
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: -0.01em;
}
a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--sage); }

::selection { background: var(--lime); color: var(--forest); }
:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; border-radius: 2px; }

.price, .amount, .mn-price {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	color: var(--ink);
	font-weight: 400;
	letter-spacing: -0.01em;
}

/* No sidebar. */
.storefront-full-width-content .content-area { width: 100%; margin-right: 0; float: none; }
.storefront-full-width-content .widget-area { display: none; }

/* ==========================================================================
   Shared furniture
   ========================================================================== */

/* Eyebrow: 12px, weight 500, with the reference's leading dot. */
.mn-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--sage);
	margin: 0 0 1rem;
}
.mn-eyebrow::before {
	content: "";
	width: 6px; height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}
/* .mn-hero is deliberately NOT listed here — the hero art is light, so its
   eyebrow stays sage. Lime on cream is illegible. */
.on-dark .mn-eyebrow,
.mn-sect--dark .mn-eyebrow { color: var(--lime); }

.mn-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }

/* Full-bleed sections that rise over one another with rounded tops. */
.mn-sect { padding: var(--pad-sect) 0; position: relative; }
.mn-sect--dark {
	background: var(--forest-band);
	color: var(--on-dark);
}
.mn-sect--dark h1, .mn-sect--dark h2, .mn-sect--dark h3 { color: var(--on-dark); }
.mn-sect--cream { background: var(--cream); }
.mn-sect--stone { background: var(--stone); }
/* Lime closing band: separates the page from the dark footer, which would
   otherwise read as one continuous dark block. */
.mn-sect--lime { background: var(--lime); color: var(--forest); }
.mn-sect--lime h1, .mn-sect--lime h2, .mn-sect--lime h3 { color: var(--forest); }
.mn-sect--lime .mn-lede { color: #2C4D22; }
.mn-sect--lime .mn-eyebrow { color: var(--forest); opacity: 0.65; }
.mn-sect--lift {
	border-radius: var(--r-sect) var(--r-sect) 0 0;
	margin-top: calc(var(--r-sect) * -1);
}

.mn-lede {
	font-size: clamp(1.05rem, 1.5vw, 1.22rem);
	line-height: 1.5;
	color: var(--ink-2);
	max-width: 54ch;
}
.mn-sect--dark .mn-lede { color: var(--on-dark-2); }

/* Pill buttons — radius 1000px, 16px/24px padding, light weight. */
.mn-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	background: var(--forest);
	color: var(--cream);
	border: 1px solid var(--forest);
	border-radius: var(--r-pill);
	padding: 1rem 1.5rem;
	font-family: var(--sans);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.01em;
	text-decoration: none !important;
	text-transform: none;
	transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
/* Storefront underlines every content link; buttons and tiles must opt out. */
.mn-btn:hover, .mn-btn:focus,
.woocommerce a.button:hover { text-decoration: none !important; }
.mn-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--forest-soft);
	border-color: var(--forest-soft);
	color: var(--cream);
}

.mn-btn--lime { background: var(--lime); border-color: var(--lime); color: var(--forest); }
.mn-btn--lime:hover { background: #C3F080; border-color: #C3F080; color: var(--forest); }

.mn-btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.mn-btn--ghost:hover { background: var(--forest); color: var(--cream); }

/* Dark grounds only. The hero is light art, so its ghost button keeps the
   default forest-on-light treatment; reversing it there made it invisible. */
.mn-sect--dark .mn-btn--ghost { color: var(--cream); border-color: rgba(252, 252, 247, 0.5); }
.mn-sect--dark .mn-btn--ghost:hover { background: var(--cream); color: var(--forest); border-color: var(--cream); }

/* On the hero the ghost button sits over photography, so it needs a solid
   backing to stay legible wherever the art lands behind it. */
.mn-hero .mn-btn--ghost {
	background: rgba(252, 252, 247, 0.78);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-color: rgba(28, 58, 19, 0.35);
}
.mn-hero .mn-btn--ghost:hover { background: var(--forest); color: var(--cream); border-color: var(--forest); }

/* Chips */
.mn-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.4em 0.8em;
	border-radius: var(--r-pill);
	white-space: nowrap;
}
.mn-badge--pickup { background: var(--lime);      color: var(--forest); }
.mn-badge--saving { background: var(--forest);    color: var(--cream); }
.mn-badge--out    { background: var(--stone-deep); color: var(--ink-3); }
.mn-badge--note   { background: transparent; color: var(--sage); border: 1px solid var(--rule); }

/* ==========================================================================
   Header
   ========================================================================== */

.mn-utility {
	background: var(--forest);
	color: var(--on-dark-2);
	font-size: 0.8rem;
	letter-spacing: -0.005em;
}
.mn-utility__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0.7rem var(--gut);
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.5rem;
	align-items: center;
	justify-content: space-between;
}
.mn-utility strong { color: var(--lime); font-weight: 500; }
.mn-utility__pickup { display: inline-flex; align-items: center; gap: 0.55em; }
.mn-utility__pickup::before {
	content: "";
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--lime);
	flex: none;
}

/* Slim sticky header, frosted so content passing beneath it stays visible but
   never competes with the navigation. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 500;
	border-bottom: none;
	padding: 1.15rem 0 1rem;
	margin-bottom: 0;
	background: rgba(252, 252, 247, 0.72);
	-webkit-backdrop-filter: blur(18px) saturate(1.4);
	backdrop-filter: blur(18px) saturate(1.4);
	transition: background 300ms ease;
}
/* No backdrop-filter support: fall back to an opaque bar rather than an
   unreadable translucent one. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.site-header { background: var(--cream); }
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
.site-header .site-branding { margin-bottom: 0; }
.site-title { margin: 0; }
.site-title a {
	color: var(--forest);
	font-size: 1.45rem;
	font-weight: 400;
	letter-spacing: -0.04em;
	text-decoration: none;
}
.site-title a::after {
	content: "Nutrition";
	color: var(--ink-3);
	margin-left: 0.35em;
	font-weight: 300;
}
.site-description {
	color: var(--ink-3);
	font-size: 0.82rem;
	letter-spacing: -0.005em;
	margin: 0.15rem 0 0;
}

.storefront-primary-navigation { background: transparent; }
.main-navigation ul li a {
	color: var(--ink);
	font-size: 0.95rem;
	font-weight: 400;
	letter-spacing: -0.012em;
	padding: 0.7rem 1.35rem 0.7rem 0;
	text-decoration: none;
}
.main-navigation ul li a:hover { color: var(--sage); }
.main-navigation ul li.current-menu-item > a { text-decoration: underline; }

.site-header-cart .cart-contents { color: var(--ink); font-weight: 400; text-decoration: none; }
.site-search .widget_product_search input[type="search"] {
	border-radius: var(--r-pill);
	border: 1px solid var(--rule);
	background: var(--white);
	padding: 0.7rem 1.1rem;
	font-family: var(--sans);
	font-size: 0.92rem;
}

/* ==========================================================================
   Home
   ========================================================================== */

/* The front page is built from full-bleed bands, so Storefront's container is
   neutralised here only; every band re-establishes the measure with .mn-wrap. */
.home .site-content .col-full { max-width: none; padding: 0; }
.home .site-content { padding-bottom: 0; }
.home #primary,
.home #main,
.home .entry-content,
.home .type-page,
.home .hentry { margin: 0; padding: 0; border: 0; }
.home .site-footer { margin-top: 0; }

/* Full-bleed hero image with the headline over it. The art is light — the
   reference's header type is forest green, which tells you its hero is too — so
   type sits dark on a clean left third rather than reversed out. */
/* Block layout, not flex. Making this a flex container turned .mn-wrap into a
   flex item, which collapsed the whole hero to a 64px column and left the art
   at zero width. Vertical rhythm comes from padding instead. */
.mn-hero {
	position: relative;
	isolation: isolate;
	color: var(--ink);
	overflow: hidden;             /* clips the art to the section */
	/* overflow:hidden makes this a block formatting context, and the negative
	   margin slides it up alongside Storefront's floated header elements — a BFC
	   shrinks to avoid floats, which collapsed this to zero width. An explicit
	   width stops the shrink-to-fit without giving up the clip or the underlap. */
	width: 100%;
	min-height: 88vh;
	margin-top: -5.6rem;          /* run the art up beneath the frosted header */
	/* Top padding clears the floating nav and no more. Centring the content in a
	   78vh band left a dead strip above the eyebrow and pushed the collection
	   panel below the fold. */
	padding: clamp(3.5rem, 6vw, 4.5rem) 0 calc(var(--pad-sect) + var(--r-sect));
	display: grid;
	align-content: start;
}

/* Viewport-relative scrim behind the copy.
   The plate carries a baked-in scrim, but that is fixed to fractions of the
   IMAGE — and object-fit: cover crops the sides hard on narrow screens, taking
   the clean cream wall with it and leaving the headline over the subject's
   face. This one is measured in viewport units, so it holds at every width. */
.mn-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(
		100deg,
		rgba(252, 252, 247, 0.92) 0%,
		rgba(252, 252, 247, 0.78) 26%,
		rgba(252, 252, 247, 0.34) 46%,
		rgba(252, 252, 247, 0) 60%
	);
}

/* Below the two-column breakpoint the crop is tight enough that a horizontal
   wash cannot help — the copy spans the full width. Fade downward instead,
   clearing before the packshots. */
@media (max-width: 900px) {
	.mn-hero::before {
		background: linear-gradient(
			180deg,
			rgba(252, 252, 247, 0.72) 0%,
			rgba(252, 252, 247, 0.62) 46%,
			rgba(252, 252, 247, 0.24) 68%,
			rgba(252, 252, 247, 0) 84%
		);
	}
	/* The portrait source is deliberately art-directed for this tighter crop. */
	.mn-hero__art { object-position: 52% 44%; }
}
/* Art sits at -2 and the scrim at -1, so the scrim paints over the photograph
   while the copy (in normal flow) still paints above both. Both at -1 and paint
   order would depend on DOM order, which is fragile. */
.mn-hero__media {
	display: contents;
}
.mn-hero__art {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}
/* Single left column. The panel used to sit in a right-hand column, where it
   landed across the subject's face while the left third stayed empty. Stacking
   it under the copy fills that space and leaves the photograph unobstructed. */
/* Single left column. Tried in a right-hand column so the products could have
   the lower left, but there it lands across the subject's face — the one place
   on this plate a panel cannot go. */
.mn-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 38rem);
	width: 100%;
}
.mn-hero__brand {
	margin: 0 0 0.55rem;
	color: var(--forest);
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1;
}
.mn-hero__brand + .mn-eyebrow { margin-bottom: 1.15rem; }
.mn-hero h1 {
	color: var(--ink);
	margin: 0 0 1.15rem;
	max-width: 17ch;
}
/* Shorter measure than the body default: it keeps the last line well inside
   the plate's clean ground, and reads better at this size anyway. */
.mn-hero .mn-lede { color: var(--ink-2); max-width: 44ch; }
.mn-hero__actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Frosted collection panel — the reference's signature treatment: a translucent
   pane over imagery, blurred hard, on a 32px radius. */
.mn-collect-panel {
	position: relative;           /* containing block for the out-of-flow reveal */
	margin-top: 1.6rem;
	background: rgba(252, 252, 247, 0.46);
	-webkit-backdrop-filter: blur(40px) saturate(1.5);
	backdrop-filter: blur(40px) saturate(1.5);
	border: 1px solid rgba(255, 255, 255, 0.7);
	box-shadow: 0 18px 60px -24px rgba(28, 58, 19, 0.28);
	color: var(--forest);
	border-radius: var(--r-sect);
	padding: clamp(1.35rem, 2vw, 1.7rem);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.mn-collect-panel { background: rgba(252, 252, 247, 0.92); }
}
.mn-collect-panel .mn-eyebrow { color: var(--sage); margin-bottom: 0.6rem; }
.mn-collect-panel h2 { color: var(--forest); font-size: 1.3rem; margin: 0 0 0.4rem; }
.mn-collect-panel p { color: var(--ink-2); font-size: 0.92rem; margin: 0; }
/* Reveal: a slim bar that opens on hover or keyboard focus. grid-template-rows
   0fr -> 1fr animates to the content's natural height, which a max-height
   transition can only fake. */
.mn-collect-panel__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.mn-collect-panel__bar .mn-eyebrow { margin: 0; }
.mn-collect-panel__hint {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: 0.82rem;
	color: var(--ink-2);
	white-space: nowrap;
}
.mn-collect-panel__chev {
	display: inline-block;
	transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
	font-size: 1.1em;
}

/* Open, in flow, and showing no affordance — the only state that cannot move
   the page. Collapsing it is an enhancement, switched on below only where it
   provably fits. */
.mn-collect-panel__reveal {
	display: grid;
	grid-template-rows: 1fr;
}
.mn-collect-panel__inner { overflow: hidden; min-height: 0; }
.mn-collect-panel__inner > :first-child { margin-top: 1rem; }
.mn-collect-panel__hint { display: none; }

/* The hover reveal, and why it is gated this narrowly.
 *
 * In flow, opening it grew the panel 75px -> 256px. That pushed .mn-hero past
 * its 88vh min-height to 845px, and because .mn-hero__art is inset:0 with
 * object-fit:cover, a taller section re-crops the photograph — the subject
 * visibly slid down while every section below it moved 83px. A hover reveal
 * must never resize the page.
 *
 * Out of flow it opens into the slack the hero already carries between the
 * bottom of the grid and its bottom padding, so the section never resizes. But
 * that slack is only 88vh - 552px against the 208px the drawer needs, which
 * clears on viewports taller than ~865px and not below — and .mn-hero sets
 * overflow:hidden (to clip the art and to hold its block formatting context),
 * so a drawer that does not fit is cut off rather than allowed to spill. Hence
 * the min-height gate, with headroom. Shorter windows, touch, and
 * reduced-motion all keep it open instead, which costs an interaction and buys
 * a layout that never moves.
 */
@media (min-height: 950px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
	.mn-collect-panel__hint { display: inline-flex; }

	.mn-collect-panel__reveal {
		position: absolute;
		top: calc(100% - 1px);    /* -1px so the panel's own border is not doubled */
		left: -1px;
		right: -1px;
		grid-template-rows: 0fr;
		/* Carries the panel's glass down with it. No border or shadow while
		   closed: at zero height both would still paint as a hairline. */
		padding: 0 clamp(1.35rem, 2vw, 1.7rem);
		background: rgba(252, 252, 247, 0.46);
		-webkit-backdrop-filter: blur(40px) saturate(1.5);
		backdrop-filter: blur(40px) saturate(1.5);
		border-radius: 0 0 var(--r-sect) var(--r-sect);
		transition: grid-template-rows 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
	}
	@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
		.mn-collect-panel__reveal { background: rgba(252, 252, 247, 0.92); }
	}
	.mn-collect-panel__inner > :last-child { margin-bottom: clamp(1.35rem, 2vw, 1.7rem); }

	.mn-collect-panel:hover .mn-collect-panel__reveal,
	.mn-collect-panel:focus-visible .mn-collect-panel__reveal,
	.mn-collect-panel:focus-within .mn-collect-panel__reveal {
		grid-template-rows: 1fr;
		box-shadow: 0 18px 60px -24px rgba(28, 58, 19, 0.28);
	}
	/* Square the join while open so bar and drawer read as one panel. */
	.mn-collect-panel:hover,
	.mn-collect-panel:focus-within {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
	.mn-collect-panel:hover .mn-collect-panel__chev,
	.mn-collect-panel:focus-within .mn-collect-panel__chev { transform: rotate(90deg); }
}

.mn-collect-panel dl {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem 1.5rem;
	margin: 0.9rem 0 0;
	font-size: 0.86rem;
}
.mn-collect-panel dt {
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sage);
	margin: 0;
}
.mn-collect-panel dd { margin: 0.2rem 0 0; color: var(--forest); line-height: 1.35; }
.mn-collect-panel dl > div:first-child { grid-column: 1 / -1; }

@media (max-width: 640px) {
	.mn-collect-panel dl { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Depth and motion
   ========================================================================== */

/* Fixed backdrop the content scrolls over — the reference uses a z-index:-1
   fixed layer for exactly this.
   Deliberately sets NO background: it is a stacking context, not a colour. An
   earlier version painted forest here and silently overrode .mn-sect--lime,
   leaving forest text on a forest band. */
.mn-parallax {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
.mn-parallax__art {
	position: fixed;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.13;
	pointer-events: none;
}

/* Scroll reveal: a short rise and fade as each block enters view. Elements are
   only hidden once JS confirms it is running, so with JS off or reduced motion
   requested nothing is ever invisible. */
.js-reveal .mn-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: opacity, transform;
}
.js-reveal .mn-reveal.is-in {
	opacity: 1;
	transform: none;
}
.js-reveal .mn-reveal--d1 { transition-delay: 90ms; }
.js-reveal .mn-reveal--d2 { transition-delay: 180ms; }
.js-reveal .mn-reveal--d3 { transition-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
	.js-reveal .mn-reveal { opacity: 1; transform: none; transition: none; }
	.mn-parallax__art { position: absolute; }
}

/* Unfilled compliance values. Legible as pending without a solid red fill:
   clay text, a hairline outline, and a dotted underline. */
.mn-pending {
	display: inline-block;
	background: transparent;
	color: var(--clay);
	padding: 0.1em 0.55em;
	border: 1px solid currentColor;
	border-radius: var(--r-pill);
	font-size: 0.78em;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0.85;
}
.mn-collect-panel .mn-pending { color: var(--clay-deep); }

/* Three-up propositions */
.mn-props {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin-top: 3rem;
}
.mn-prop {
	background: var(--white);
	border-radius: var(--r-card);
	padding: clamp(1.5rem, 2.2vw, 2rem);
}
.mn-prop h3 { margin: 0 0 0.6rem; }
.mn-prop p { margin: 0; font-size: 0.95rem; color: var(--ink-2); line-height: 1.5; }

/* Category tiles */
.mn-cats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.25rem;
	margin-top: 2.5rem;
}
.mn-cat {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 150px;
	background: var(--stone);
	border-radius: var(--r-card);
	padding: 1.4rem;
	transition: background 180ms ease;
}
.mn-cat:hover { background: var(--stone-deep); }
.mn-cat, .mn-cat:hover, .mn-cat span { text-decoration: none !important; }
.mn-cat__name {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	color: var(--ink);
	font-weight: 350;
	font-size: 1.45rem;
	letter-spacing: -0.028em;
	line-height: 1.1;
}
.mn-cat__name::after { content: "→"; font-size: 1rem; color: var(--sage); }
.mn-cat__count { display: block; color: var(--ink-3); font-size: 0.85rem; margin-top: 0.45rem; }

/* ==========================================================================
   Product grid
   ========================================================================== */

ul.products {
	display: grid;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
ul.products::before, ul.products::after { content: none !important; }
/* Three across, not four. The reference runs two, but it sells eight products;
   at 74 SKUs three keeps the card large enough for a 24px name and a descriptor
   without turning the catalogue into an endless scroll. */
ul.products.columns-4,
ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

ul.products li.product {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border: none;
	border-radius: var(--r-card);
	padding: 0 0 1.25rem;
	overflow: hidden;
	text-align: left;
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	transition: transform 200ms ease;
}
ul.products li.product:hover { transform: translateY(-3px); }

/* The product link wraps image, title, descriptor and badges. Making it a flex
   column lets the badge row push to the bottom so cards align across a row. */
ul.products li.product > a:first-of-type {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	text-decoration: none;
}
/* Plain tile, no blend mode. mix-blend-mode composites unpredictably (it renders
   blank in headless captures and muddies any shot with a tinted backdrop), and
   the source photography already sits on light grounds. */
ul.products li.product img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--white);
	margin: 0 0 1.1rem;
	border-radius: 0;
}

/* Card copy sits in a generous well. The reference uses 40px padding; 28px is the
   most that survives a three-across grid at this container width. */
ul.products li.product .woocommerce-loop-product__title {
	color: var(--ink);
	font-size: 1.5rem !important;      /* 24px — the largest thing in the card */
	font-weight: 350;
	letter-spacing: -0.022em;
	line-height: 1.16;
	padding: 0 1.75rem 0.6rem !important;
	margin: 0;
}

/* One-line descriptor, as the reference's collection cards carry. */
.mn-card-desc {
	padding: 0 1.75rem;
	margin: 0 0 1.1rem;
	color: var(--ink-3);
	font-size: 0.9rem;
	line-height: 1.4;
}

.mn-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	padding: 0 1.75rem;
	margin: auto 0 1.1rem;
	min-height: 1.6rem;
}

ul.products li.product .button {
	margin: 0 1.75rem;
	width: calc(100% - 3.5rem);
	background: transparent;
	color: var(--forest);
	border: 1px solid var(--rule);
	font-size: 0.95rem;
	padding: 0.85rem 1rem;
}
ul.products li.product .button:hover { background: var(--forest); border-color: var(--forest); color: var(--cream); }

/* Price demoted below the action, as on the reference. Kept legible rather than
   tiny: this store's argument is honest pricing, so it must stay readable. */
ul.products li.product .price {
	display: block;
	color: var(--ink-3);
	font-size: 0.82rem;
	font-weight: 350;
	letter-spacing: 0;
	padding: 0 1.75rem;
	margin: 0.85rem 0 0;
}
ul.products li.product .price del, ul.products li.product .price ins { display: none; }

ul.products li.product .added_to_cart {
	order: 100;
	display: block;
	margin: 0.5rem 1.75rem 0;
	font-size: 0.85rem;
	color: var(--sage);
}

/* Archive header */
.woocommerce-products-header { padding-top: 1rem; }
.woocommerce-products-header__title,
.woocommerce-products-header .page-title {
	font-size: clamp(2.2rem, 4.5vw, 3.4rem);
	font-weight: 350;
	letter-spacing: -0.03em;
	text-align: left;
	margin-bottom: 0.75rem;
}
.woocommerce-result-count, .woocommerce-ordering { color: var(--ink-3); font-size: 0.88rem; }
.woocommerce-ordering select {
	border-radius: var(--r-pill);
	border: 1px solid var(--rule);
	padding: 0.55rem 1rem;
	background: var(--white);
	font-family: var(--sans);
	font-size: 0.88rem;
}
.woocommerce nav.woocommerce-pagination ul { border: none; gap: 0.35rem; display: inline-flex; }
.woocommerce nav.woocommerce-pagination ul li { border: none; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	border-radius: var(--r-pill);
	padding: 0.5rem 0.9rem;
	min-width: 2.4rem;
	color: var(--ink);
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--forest); color: var(--cream); }

/* ==========================================================================
   Single product
   ========================================================================== */

/* The imagery anchors the page, not the title. On the reference the h1 is 24px —
   the same size as the price — and the buy-box hierarchy is nearly flat, with
   separation coming from weight 500 labels against 350 content. */
.single-product div.product { padding-top: 1rem; }
.single-product div.product .product_title {
	font-size: 1.75rem;
	font-weight: 350;
	letter-spacing: -0.026em;
	line-height: 1.15;
	margin-bottom: 0.75rem;
}
.single-product div.product .price {
	font-size: 1.5rem;
	font-weight: 350;
	letter-spacing: -0.02em;
	margin-bottom: 0.85rem;
}
.single-product div.product .woocommerce-product-details__short-description {
	font-size: 1rem;
	line-height: 1.4;
	color: var(--ink-2);
	margin: 0 0 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--rule);
}

/* Media two-thirds, buy box one-third, mirroring the reference's 944/432 split.
   Storefront scopes its own 41/59 split through #content, so these need the id
   to win — plain element selectors lose regardless of source order. */
@media (min-width: 993px) {
	/* Must sum to under ~94.5%: Storefront adds a gutter between the floated
	   columns, and overshooting drops the buy box below the image. */
	.single-product #content div.product div.images,
	.single-product div.product div.images { width: 58%; }
	.single-product #content div.product div.summary,
	.single-product div.product div.summary { width: 36%; }
}
.single-product div.product div.images { margin-bottom: 2rem; }
.single-product div.product div.images img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border-radius: var(--r-card);
	background: var(--white);
	padding: 1.5rem;
	border: 1px solid var(--rule);
}
.single-product .quantity input.qty {
	border-radius: var(--r-pill);
	border: 1px solid var(--rule);
	padding: 0.85rem 0.5rem;
	font-family: var(--sans);
	background: var(--white);
}
.single-product .single_add_to_cart_button { padding: 1rem 2rem; }
.single-product .product_meta { font-size: 0.85rem; color: var(--ink-3); margin-top: 1.5rem; }

/* Collection availability */
.mn-pickup-block {
	background: var(--lime);
	border-radius: var(--r-card);
	padding: 1.15rem 1.35rem;
	margin: 0 0 1.5rem;
	font-size: 0.94rem;
	line-height: 1.45;
	color: var(--forest);
}
.mn-pickup-block strong { font-weight: 500; }
.mn-pickup-block p { margin: 0.4rem 0 0; color: #2C4D22; }
.mn-pickup-block--out { background: var(--stone); color: var(--ink-2); }
.mn-pickup-block--out p { color: var(--ink-2); }

/* Bundle contents */
.mn-bundle-contents { list-style: none; margin: 1rem 0; padding: 0; }
.mn-bundle-contents li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--rule);
	color: var(--ink-2);
}
.mn-part-price { color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mn-bundle-maths {
	background: var(--stone);
	border-radius: var(--r-card);
	padding: 1.1rem 1.35rem;
	font-size: 0.98rem;
}
.mn-bundle-maths strong { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Tabs */
.woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 1.5rem; }
.woocommerce-tabs ul.tabs::before { border-bottom: 1px solid var(--rule); }
.woocommerce-tabs ul.tabs li {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	margin: 0 1.75rem 0 0;
}
.woocommerce-tabs ul.tabs li a { color: var(--ink-3); font-weight: 400; padding: 0.75rem 0; }
.woocommerce-tabs ul.tabs li.active a { color: var(--ink); box-shadow: inset 0 -2px 0 var(--forest); }
.woocommerce-tabs .panel h2 { font-size: 1.5rem; margin-bottom: 1rem; }

/* Mandatory warning */
.mn-supplement-warning {
	margin-top: 1.5rem;
	padding-top: 1.15rem;
	border-top: 1px solid var(--rule);
	font-size: 0.84rem;
	color: var(--ink-3);
	line-height: 1.55;
}

/* Claims-review notice (staging).
   No accent bar and no tinted fill: a hairline card, a small labelled dot, and
   quiet text. Present without shouting. */
.mn-claims-warning {
	background: transparent;
	border: 1px solid var(--rule);
	border-radius: var(--r-card);
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--ink-2);
}
.mn-claims-warning strong {
	display: flex;
	align-items: center;
	gap: 0.55em;
	margin-bottom: 0.3rem;
	color: var(--clay);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}
.mn-claims-warning strong::before {
	content: "";
	width: 6px; height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

/* ==========================================================================
   Editorial pages
   ========================================================================== */

.mn-page-lede {
	font-size: clamp(1.1rem, 1.6vw, 1.3rem);
	line-height: 1.5;
	color: var(--ink-2);
	max-width: 60ch;
	margin-bottom: 2.5rem;
}
.mn-panel {
	background: var(--white);
	border-radius: var(--r-card);
	padding: clamp(1.5rem, 2.5vw, 2rem);
	margin-bottom: 1.25rem;
}
.mn-panel h3 { margin-top: 0; margin-bottom: 1rem; }
.mn-panel p:last-child, .mn-panel ol:last-child { margin-bottom: 0; }
.mn-panel ol, .mn-panel ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.mn-panel li { margin-bottom: 0.5rem; color: var(--ink-2); }
.mn-panel--note { background: var(--lime); }
.mn-panel--note p, .mn-panel--note li { color: #2C4D22; }

.mn-table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; }
.mn-table th, .mn-table td {
	text-align: left;
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--rule);
	font-size: 0.96rem;
	vertical-align: top;
}
.mn-table th { color: var(--ink-3); font-weight: 400; width: 32%; }
.mn-table td { color: var(--ink); }
.mn-table thead th { color: var(--ink); }
.mn-table--figures td:last-child,
.mn-table--figures th:last-child {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	width: auto;
}

/* Cart & checkout */
.woocommerce table.shop_table {
	border: none;
	border-radius: var(--r-card);
	background: var(--white);
	overflow: hidden;
}
.woocommerce table.shop_table th { font-weight: 400; color: var(--ink-3); }
.woocommerce-cart .cart-collaterals .cart_totals > h2,
.woocommerce-checkout #order_review_heading { font-size: 1.4rem; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
	border-radius: var(--r-sm);
	border: 1px solid var(--rule);
	background: var(--white);
	padding: 0.8rem 1rem;
	font-family: var(--sans);
	font-size: 0.96rem;
}
/* Storefront gives every notice a 3px top accent bar. Removed site-wide in
   favour of a plain hairline card, consistent with .mn-claims-warning. */
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error {
	background: transparent;
	border: 1px solid var(--rule);
	border-top-width: 1px;
	border-radius: var(--r-card);
	color: var(--ink-2);
	padding: 1rem 1.25rem 1rem 3rem;
	font-size: 0.92rem;
	line-height: 1.5;
}
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-error::before {
	color: var(--sage);
	top: 1rem;
	left: 1.25rem;
}
.woocommerce .woocommerce-error { color: var(--clay); }
.woocommerce .woocommerce-error::before { color: var(--clay); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	background: var(--forest);
	color: var(--on-dark-2);
	padding: var(--pad-sect) 0 2.5rem;
	margin-top: var(--pad-sect);
	border-radius: var(--r-sect) var(--r-sect) 0 0;
	font-size: 0.92rem;
}
.site-footer a,
.site-footer a:visited {
	color: var(--on-dark);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.site-footer a:hover { color: var(--lime); border-bottom-color: var(--lime); }
.site-footer h3 {
	color: var(--on-dark);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 1rem;
}

.mn-footer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 2.5rem;
	padding-bottom: 2.5rem;
	border-bottom: 1px solid var(--rule-on-dark);
}
.mn-footer-grid ul { list-style: none; margin: 0; padding: 0; }
.mn-footer-grid li { margin-bottom: 0.55rem; }

.mn-compliance { padding-top: 2rem; font-size: 0.8rem; line-height: 1.6; }
.mn-compliance__ids {
	color: var(--on-dark);
	margin-bottom: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	align-items: center;
}
.mn-compliance__notice { color: var(--on-dark-2); margin: 0 0 0.6rem; max-width: 92ch; }

/* USANA head office details, required by the Advertising Checklist alongside our
   own. Quieter than our own contact block on purpose - it is an identification
   requirement, not a support channel for this store. */
.mn-compliance__usana {
	color: var(--on-dark-2);
	margin: 0 0 0.9rem;
	font-size: 0.76rem;
}
.mn-compliance__usana a { color: inherit; text-decoration: underline; }

/* Collection availability, per product. The default (lead time) is deliberately
   quiet; only genuinely-held stock gets the accent, so the stronger claim is the
   one that has to be earned. */
.mn-collect-status {
	display: inline-block;
	margin: 0 0 0.9rem;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 650;
	letter-spacing: 0.01em;
	background: #EFEFE7;
	color: #4A4F45;
}
.mn-collect-status--today {
	background: #DCEBD0;
	color: #1C3A13;
}

/* Independent Brand Partner logo — required by USANA T&P §9.
   The footer ground is #1C3A13, so the asset itself must be the light/reversed
   version. Nothing here recolours it: tinting a trademark is not ours to do. */
.mn-compliance__bp { margin: 0 0 1.1rem; }
.mn-compliance__bp-logo {
	display: block;
	width: 200px;
	height: auto;
	max-width: 60%;
}
@media (max-width: 640px) {
	.mn-compliance__bp-logo { width: 168px; }
}
.mn-artifact--missing {
	background: transparent;
	color: #C9A79C;
	border: 1px solid currentColor;
	padding: 0.12em 0.6em;
	border-radius: var(--r-pill);
	font-size: 0.9em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Staging ribbon — a slim forest bar with a clay dot, not a red alert stripe. */
.mn-staging-ribbon {
	position: fixed;
	bottom: 0; left: 0; right: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	background: var(--forest);
	color: var(--on-dark-2);
	font-size: 0.68rem;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 0.5rem;
	pointer-events: none;
	box-shadow: 0 -1px 0 rgba(252, 252, 247, 0.14);
}
.mn-staging-ribbon::before {
	content: "";
	width: 5px; height: 5px;
	border-radius: 50%;
	background: #C9A79C;
	flex: none;
}
body { padding-bottom: 2rem; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1000px) {
	.mn-hero__grid { grid-template-columns: 1fr; align-items: start; }
	.mn-props { grid-template-columns: 1fr; }
	ul.products.columns-4, ul.products.columns-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	:root { --r-sect: 20px; }
	ul.products.columns-4, ul.products.columns-3, ul.products.columns-2 {
		grid-template-columns: minmax(0, 1fr);
	}
	.mn-utility__inner { justify-content: flex-start; font-size: 0.75rem; }
	.mn-bundle-contents li { flex-direction: column; gap: 0.2rem; }
	.mn-table th { width: 40%; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}