/* =========================================================================
   Mini Fashionista — core
   Direction: bold retail. White ground, ink type, one vermilion CTA colour,
   deep teal as the structural second voice. Archivo throughout, Archivo Black
   for display. Nothing decorative that does not help someone buy.
   Colour tokens with an --mf- prefix are overridden from theme options.
   ========================================================================= */

:root {
	/* Brand */
	--mf-accent: #FF4D2E;
	--mf-accent-dark: #DE3717;
	--mf-accent-rgb: 255, 77, 46;
	--mf-accent-soft: rgba(255, 77, 46, .10);
	--mf-ink: #16151A;
	--mf-ink-rgb: 22, 21, 26;
	--mf-surface: #FFFFFF;

	/* Structure */
	--mf-deep: #103B3C;
	--mf-deep-soft: #E4EFEE;
	--mf-card: #FFFFFF;
	--mf-soft: #F5F4F1;
	--mf-line: #E5E3DE;
	--mf-line-2: #CFCCC5;
	--mf-muted: #6B6872;

	/* Semantic, kept separate from the accent */
	--mf-sale: #D92B1E;
	--mf-sale-soft: #FDECEA;
	--mf-success: #157A4E;
	--mf-success-soft: #E3F4EC;
	--mf-warn: #8A5A00;
	--mf-warn-soft: #FBF2DE;
	--mf-danger: #D92B1E;
	--mf-danger-soft: #FDECEA;

	/* Type */
	--mf-font-body: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--mf-font-head: 'Archivo Black', 'Archivo', Impact, -apple-system, sans-serif;

	/* Geometry */
	--mf-r-xs: 6px;
	--mf-r-sm: 9px;
	--mf-r: 13px;
	--mf-r-lg: 18px;
	--mf-r-pill: 999px;

	--mf-shadow-sm: 0 1px 2px rgba(22, 21, 26, .07);
	--mf-shadow: 0 6px 20px rgba(22, 21, 26, .09);
	--mf-shadow-lg: 0 20px 56px rgba(22, 21, 26, .18);

	--mf-wrap: 1340px;
	--mf-gutter: 18px;
	--mf-header-h: 64px;

	--mf-ease: cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 900px) {
	:root { --mf-gutter: 34px; --mf-header-h: 76px; }
}

/* ---------- Reset ---------- */

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

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

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
	margin: 0;
	background: var(--mf-surface);
	color: var(--mf-ink);
	font-family: var(--mf-font-body);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

body.mf-locked { overflow: hidden; }

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
	font-family: var(--mf-font-head);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -.025em;
	margin: 0 0 .5em;
	text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 4rem); }
h2 { font-size: clamp(1.55rem, 1.15rem + 1.9vw, 2.5rem); }
h3 { font-family: var(--mf-font-body); font-weight: 700; font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); letter-spacing: -.012em; }
h4 { font-family: var(--mf-font-body); font-weight: 700; font-size: 1rem; }

p { margin: 0 0 1em; }

/* Uppercase micro-labels: the one repeated typographic device in the system. */
.mf-eyebrow,
.mf-badge,
.mf-express__lead,
.mf-cat-card__count,
.woocommerce table.shop_table thead th,
.mf-cart-table thead th {
	font-family: var(--mf-font-body);
	font-weight: 700;
	font-size: .7rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}

:focus-visible { outline: 3px solid var(--mf-accent); outline-offset: 2px; border-radius: 4px; }

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

.mf-skip {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--mf-ink); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--mf-r-sm) 0;
}
.mf-skip:focus { left: 0; }

/* ---------- Layout ---------- */

/*
 * A sticky header covers the top of the viewport, so anything the browser
 * scrolls to - an anchor link, a focused field, a validation error - lands
 * underneath it unless the scroll is told to stop short.
 */
html { scroll-padding-top: calc(var(--mf-header-h, 76px) + 20px); }

.mf-wrap { width: 100%; max-width: var(--mf-wrap); margin-inline: auto; padding-inline: var(--mf-gutter); }
.mf-wrap--narrow { max-width: 720px; }

.mf-main { display: block; padding-bottom: 64px; min-height: 40vh; }
.mf-section { padding-block: clamp(38px, 5vw, 72px); }
.mf-section--soft { background: var(--mf-soft); }

.mf-section__head {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 12px 20px; margin-bottom: 24px; flex-wrap: wrap;
}
.mf-section__head h2 { margin: 0; }

.mf-icon { flex: none; }

/* ---------- Buttons ---------- */

.mf-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 14px 26px;
	border: 2px solid transparent;
	border-radius: var(--mf-r-pill);
	background: var(--mf-ink);
	color: #fff;
	font-family: var(--mf-font-body);
	font-size: .94rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.005em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .16s var(--mf-ease), color .16s var(--mf-ease), border-color .16s var(--mf-ease), transform .12s var(--mf-ease);
	-webkit-appearance: none;
	appearance: none;
}

.mf-btn:active,
.woocommerce .button:active { transform: translateY(1px); }

.mf-btn--primary,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	/*
	 * The accent can be any colour, including a pale blush that white text
	 * would vanish on. --mf-on-accent is derived from the accent's luminance,
	 * so a light brand colour gets dark text and a dark one gets white.
	 */
	background: var(--mf-accent);
	color: var(--mf-on-accent, #fff);
	border-color: var(--mf-accent-dark);
}
.mf-btn--primary:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover {
	background: var(--mf-accent-dark);
	border-color: var(--mf-accent-dark);
	/*
	 * This used to force white. On a blush accent the hover state was white
	 * text on pale pink, which is under 2:1 and effectively invisible. The
	 * derived value keeps the text readable whatever the accent is.
	 */
	color: var(--mf-on-accent, #fff);
}

.mf-btn--outline { background: transparent; color: var(--mf-ink); border-color: var(--mf-ink); }
.mf-btn--outline:hover { background: var(--mf-ink); color: #fff; }

.mf-btn--ghost { background: var(--mf-card); color: var(--mf-ink); border-color: var(--mf-line-2); }
.mf-btn--ghost:hover { border-color: var(--mf-ink); }

.mf-btn--deep { background: var(--mf-deep); border-color: var(--mf-deep); color: #fff; }
.mf-btn--deep:hover { background: #0B2C2D; border-color: #0B2C2D; }

.mf-btn--lg { padding: 17px 32px; font-size: 1.02rem; }
.mf-btn--block { width: 100%; }

.mf-btn[disabled], .mf-btn.is-loading { opacity: .5; pointer-events: none; }
.mf-btn.is-loading::after {
	content: ''; width: 15px; height: 15px;
	border: 2px solid currentColor; border-right-color: transparent;
	border-radius: 50%; animation: mf-spin .7s linear infinite;
}
@keyframes mf-spin { to { transform: rotate(360deg); } }

.mf-link {
	display: inline-flex; align-items: center; gap: 6px;
	color: var(--mf-ink); font-weight: 700; font-size: .92rem;
	text-decoration: underline; text-decoration-color: var(--mf-accent);
	text-decoration-thickness: 2px; text-underline-offset: 4px;
	background: none; border: 0; padding: 0; cursor: pointer;
}
.mf-link:hover { color: var(--mf-accent); }

.mf-iconbtn {
	display: inline-flex; align-items: center; justify-content: center;
	position: relative; width: 42px; height: 42px;
	border: 0; background: none; border-radius: var(--mf-r-sm);
	cursor: pointer; color: inherit; text-decoration: none;
	transition: background-color .15s var(--mf-ease);
}
.mf-iconbtn:hover { background: var(--mf-soft); }

/* ---------- Forms ---------- */

.mf-input,
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="number"], input[type="search"], input[type="date"],
select, textarea {
	width: 100%;
	padding: 14px 15px;
	border: 2px solid var(--mf-line-2);
	border-radius: var(--mf-r-sm);
	background: var(--mf-card);
	color: var(--mf-ink);
	font: inherit;
	font-size: 16px; /* never lower: iOS zooms the page below 16px */
	transition: border-color .14s var(--mf-ease), box-shadow .14s var(--mf-ease);
}
input:focus, select:focus, textarea:focus {
	border-color: var(--mf-ink);
	box-shadow: 0 0 0 3px var(--mf-accent-soft);
	outline: none;
}
textarea { min-height: 104px; resize: vertical; }
label { font-size: .86rem; font-weight: 700; display: block; margin-bottom: 6px; }

/* ---------- Announcement + header ---------- */

.mf-announce {
	background: var(--mf-deep);
	color: #fff;
	font-size: .82rem;
	font-weight: 600;
	text-align: center;
	padding: 10px 0;
	letter-spacing: .01em;
}
.mf-announce a { display: inline-flex; align-items: center; gap: 7px; color: #fff; text-decoration: none; }
.mf-announce a:hover { text-decoration: underline; }

/*
 * Opaque, deliberately.
 *
 * This was rgba(255,255,255,.95) with a backdrop blur, which is the fashionable
 * choice and the wrong one here: five per cent is enough to read a product
 * title straight through the menu bar as the page scrolls under it, and the
 * blur made it a smear rather than hiding it. A navigation bar is the one
 * element on the page that has to stay legible while everything moves behind
 * it.
 *
 * Dropping the backdrop-filter also takes a per-frame compositing cost off
 * every scroll, which is free speed on exactly the interaction where it is
 * most noticeable.
 */
.mf-header {
	position: sticky;
	top: env(safe-area-inset-top, 0px);
	z-index: 100;
	background: var(--mf-card, #fff);
	border-bottom: 1px solid var(--mf-line);
}

/* ---- Stacked header: logo centred on top, nav centred underneath ---- */

.mf-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 10px;
	min-height: var(--mf-header-h);
}

.mf-header__side { display: flex; align-items: center; gap: 2px; }
.mf-header__side--right { justify-content: flex-end; }

.mf-header__brand { justify-self: center; text-align: center; }
.mf-header__brand img,
.custom-logo { max-height: 46px; width: auto; margin-inline: auto; }

.mf-logo--text {
	display: inline-block;
	font-family: var(--mf-font-head);
	font-size: clamp(1.05rem, .85rem + 1vw, 1.5rem);
	text-decoration: none;
	letter-spacing: -.035em;
	text-transform: uppercase;
	white-space: nowrap;
}

.mf-header__bottom { border-top: 1px solid var(--mf-line); }

/* The search toggle sits left on desktop and right on mobile, so the right
   cluster stays short enough for the logo to hold the true centre. */
.mf-search-toggle--desktop { display: none; }
@media (min-width: 1040px) {
	.mf-search-toggle--desktop { display: inline-flex; }
	.mf-search-toggle--mobile { display: none; }
}

.mf-burger { display: inline-flex; }
@media (min-width: 1040px) { .mf-burger { display: none; } }

/* Focus mode (checkout) keeps the simple two-up row. */
.mf-header--focus { position: static; background: var(--mf-card); }
.mf-header--focus .mf-header__inner { display: flex; justify-content: space-between; }
.mf-header__secure {
	display: inline-flex; align-items: center; gap: 8px; margin: 0;
	font-size: .84rem; font-weight: 700; color: var(--mf-deep);
}

/* ---- Primary nav ---- */

.mf-nav { display: none; }
@media (min-width: 1040px) { .mf-nav { display: block; } }

.mf-nav__list {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.mf-nav__list > li { position: relative; }

.mf-nav__list a {
	display: block; padding: 13px 16px;
	font-size: .92rem; font-weight: 700; letter-spacing: -.005em;
	text-decoration: none; white-space: nowrap; position: relative;
}
.mf-nav__list a::after {
	content: ''; position: absolute; left: 16px; right: 16px; bottom: 7px;
	height: 2px; background: var(--mf-accent);
	transform: scaleX(0); transform-origin: left;
	transition: transform .18s var(--mf-ease);
}
.mf-nav__list a:hover::after,
.mf-nav__list .current-menu-item > a::after { transform: scaleX(1); }

.mf-nav__list .sub-menu {
	position: absolute; top: 100%; left: 50%; transform: translate(-50%, -6px);
	min-width: 246px;
	background: var(--mf-card); border: 2px solid var(--mf-ink);
	border-radius: var(--mf-r); box-shadow: var(--mf-shadow-lg);
	padding: 6px; margin: 0; list-style: none;
	opacity: 0; visibility: hidden;
	transition: all .16s var(--mf-ease); z-index: 5;
	text-align: left;
}
.mf-nav__list > li:hover > .sub-menu,
.mf-nav__list > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mf-nav__list .sub-menu a { padding: 9px 12px; font-weight: 600; font-size: .9rem; }
.mf-nav__list .sub-menu a::after { display: none; }
.mf-nav__list .sub-menu a:hover { background: var(--mf-soft); }

/* Cart bubble */

.mf-cart-link { position: relative; }
.mf-cart-bubble {
	position: absolute; top: 3px; right: 1px;
	min-width: 19px; height: 19px;
	display: none; align-items: center; justify-content: center;
	padding: 0 5px;
	background: var(--mf-accent); color: var(--mf-on-accent, #fff);
	font-size: .68rem; font-weight: 700; line-height: 1;
	border-radius: var(--mf-r-pill);
	border: 2px solid #fff;
}
.mf-cart-bubble.is-filled { display: inline-flex; }

/* Search panel */

.mf-search-panel { border-top: 1px solid var(--mf-line); background: var(--mf-soft); padding: 16px 0; }
.mf-searchform { display: flex; align-items: center; gap: 10px; position: relative; }
.mf-searchform .mf-icon { position: absolute; left: 15px; color: var(--mf-muted); }
.mf-searchform__input { padding-left: 46px; }

/* Mobile nav */

.mf-mobile-nav {
	position: fixed; inset: 0; z-index: 200;
	background: var(--mf-card); overflow-y: auto;
	padding: 0 var(--mf-gutter) 40px;
}
.mf-mobile-nav__head {
	position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between;
	padding: 14px 0; background: var(--mf-card); border-bottom: 2px solid var(--mf-ink);
	font-family: var(--mf-font-head); text-transform: uppercase; letter-spacing: -.02em;
}
.mf-mobile-nav__list, .mf-mobile-nav__utility { list-style: none; margin: 0; padding: 0; }
.mf-mobile-nav__list a, .mf-mobile-nav__utility a {
	display: block; padding: 15px 0; border-bottom: 1px solid var(--mf-line);
	text-decoration: none; font-weight: 700;
}
.mf-mobile-nav__list .sub-menu { list-style: none; margin: 0; padding-left: 14px; }
.mf-mobile-nav__list .sub-menu a { font-weight: 500; font-size: .93rem; color: var(--mf-muted); }

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

.mf-hero { position: relative; background: var(--mf-soft); padding-block: clamp(36px, 5vw, 76px); }
.mf-hero--image::before {
	content: ''; position: absolute; inset: 0;
	background-image: var(--mf-hero-img); background-size: cover; background-position: center;
}
.mf-hero--image::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(100deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 46%, rgba(255,255,255,.25) 80%);
}
.mf-hero__inner { position: relative; z-index: 2; }
.mf-hero__copy { max-width: 620px; }

.mf-hero__eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	margin: 0 0 16px; padding: 7px 14px;
	background: var(--mf-ink); color: #fff;
	font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	border-radius: var(--mf-r-pill);
}
.mf-hero__title { margin-bottom: 14px; text-transform: uppercase; }
.mf-hero__text { font-size: 1.05rem; color: var(--mf-muted); max-width: 48ch; }
.mf-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 20px; }

/* ---------- Trust ---------- */

.mf-trust-strip { display: flex; flex-wrap: wrap; gap: 10px 26px; list-style: none; margin: 0; padding: 0; }
.mf-trust-strip li { display: flex; align-items: center; gap: 9px; font-size: .86rem; font-weight: 600; }
.mf-trust-strip .mf-icon { color: var(--mf-accent); }

.mf-pay-marks {
	display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
	font-size: .8rem; color: var(--mf-muted);
}
.mf-pay-marks span { font-weight: 700; color: var(--mf-ink); }
.mf-pay-marks em { font-style: normal; }

.mf-pay-marks__list { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.mf-pay-marks__list img {
	height: 27px; width: auto;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 0 0 1px var(--mf-line);
}
.mf-pay-marks__gateway { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mf-pay-marks__gateway img { height: 24px; width: auto; display: inline-block; }

/* ---------- Social links ---------- */

.mf-social { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; }

.mf-social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px;
	border-radius: 50%;
	border: 2px solid currentColor;
	text-decoration: none;
	transition: background-color .15s var(--mf-ease), color .15s var(--mf-ease), border-color .15s var(--mf-ease);
}
.mf-social a:hover { background: var(--mf-accent); border-color: var(--mf-accent); color: var(--mf-on-accent, #fff); }
.mf-social img { width: 19px; height: 19px; }
.mf-social__mono { font-family: var(--mf-font-head); font-size: .95rem; line-height: 1; }

.mf-social--footer { margin-top: 18px; color: rgba(243, 246, 245, .8); }
.mf-social--footer a:hover img { filter: brightness(0) invert(1); }
.mf-social--drawer { margin-top: 24px; color: var(--mf-ink); }

/* ---------- Newsletter ---------- */

/* The newsletter block sits inside the footer, which sets a near-white text
   colour for the dark teal ground. It has its own light ground, so it has to
   reset the colour or the heading renders white on off-white. */
.mf-newsletter {
	background: var(--mf-soft);
	color: var(--mf-ink);
	padding-block: clamp(32px, 4vw, 52px);
	padding-inline: var(--mf-gutter);
	text-align: center;
}
.mf-newsletter a { color: var(--mf-ink); }
.mf-newsletter__title { margin: 0 0 8px; text-transform: uppercase; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem); }
.mf-newsletter__copy { margin: 0 auto 18px; max-width: 52ch; color: var(--mf-muted); }
.mf-newsletter__form { max-width: 480px; margin-inline: auto; }
.mf-newsletter__form form { display: flex; gap: 8px; flex-wrap: wrap; }
.mf-newsletter__form input[type="email"],
.mf-newsletter__form input[type="text"] { flex: 1 1 200px; }
.mf-newsletter__form button,
.mf-newsletter__form input[type="submit"] {
	flex: none;
	background: var(--mf-accent);
	border: 2px solid var(--mf-accent);
	color: #fff;
	border-radius: var(--mf-r-pill);
	padding: 14px 26px;
	font-weight: 700;
	cursor: pointer;
	width: auto;
}
.mf-newsletter__form button:hover,
.mf-newsletter__form input[type="submit"]:hover { background: var(--mf-accent-dark); border-color: var(--mf-accent-dark); }

/* ---------- Category grid ---------- */

.mf-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 700px) { .mf-cat-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

.mf-cat-card a {
	display: block; text-decoration: none; border-radius: var(--mf-r);
	overflow: hidden; background: var(--mf-soft);
	border: 2px solid transparent; height: 100%;
	transition: border-color .16s var(--mf-ease);
	position: relative;
}
.mf-cat-card a:hover { border-color: var(--mf-ink); }
.mf-cat-card__media { display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.mf-cat-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--mf-ease); }
.mf-cat-card a:hover .mf-cat-card__media img { transform: scale(1.04); }
.mf-cat-card__label { display: block; padding: 13px 14px 2px; font-weight: 700; font-size: .96rem; }
.mf-cat-card__count { display: block; padding: 0 14px 14px; color: var(--mf-muted); }

/* ---------- Page head / breadcrumb ---------- */

.mf-page-head { padding: 22px 0 14px; }

/*
 * Sized for a page title, not for a hero. The global h1 rule tops out at 4rem,
 * which is right over a photograph and absurd over the word "Checkout" - it
 * was pushing the first thing a customer had to read most of the way down the
 * screen.
 */
.mf-page-head__title {
	margin: 10px 0 0;
	text-transform: uppercase;
	font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2rem);
	letter-spacing: -.01em;
}

/* Heading hidden: close the gap it used to hold open. */
.mf-page-head--bare { padding: 18px 0 0; }
.mf-page-head--bare .mf-page-head__sub { margin-top: 10px; }

.mf-page-head__sub { color: var(--mf-muted); margin: 12px 0 0; max-width: 62ch; }

.mf-breadcrumb { font-size: .78rem; color: var(--mf-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mf-breadcrumb a { text-decoration: none; font-weight: 600; }
.mf-breadcrumb a:hover { text-decoration: underline; }
.mf-crumb-sep { opacity: .45; }

/* ---------- Prose ---------- */

.mf-prose { font-size: 1.02rem; }
.mf-prose h2 { margin-top: 1.5em; }
.mf-prose h3 { margin-top: 1.3em; }
.mf-prose ul, .mf-prose ol { padding-left: 1.25em; }
.mf-prose li { margin-bottom: .4em; }
.mf-prose img { border-radius: var(--mf-r); }
.mf-prose a { font-weight: 600; text-decoration-color: var(--mf-accent); text-decoration-thickness: 2px; }
.mf-prose blockquote {
	margin: 1.5em 0; padding: 4px 0 4px 20px;
	border-left: 4px solid var(--mf-accent); font-size: 1.12rem; font-weight: 600;
}
.mf-prose table { width: 100%; border-collapse: collapse; }
.mf-prose th, .mf-prose td { padding: 10px; border-bottom: 1px solid var(--mf-line); text-align: left; }

/* ---------- Blog ---------- */

.mf-post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.mf-post-card { background: var(--mf-card); border: 2px solid var(--mf-line); border-radius: var(--mf-r); overflow: hidden; transition: border-color .16s var(--mf-ease); }
.mf-post-card:hover { border-color: var(--mf-ink); }
.mf-post-card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mf-post-card__body { padding: 18px; }
.mf-post-card__date { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mf-muted); margin: 0 0 8px; }
.mf-post-card__title { font-size: 1.1rem; margin: 0 0 8px; }
.mf-post-card__title a { text-decoration: none; }
.mf-post-card__excerpt { font-size: .92rem; color: var(--mf-muted); }

.mf-article__head { padding: 24px 0 8px; }
.mf-article__meta { color: var(--mf-muted); font-size: .84rem; font-weight: 600; }
.mf-article__media { margin: 0 0 28px; }
.mf-article__media img { width: 100%; max-height: 520px; object-fit: cover; }

.mf-pagination { margin-top: 40px; }
.mf-pagination .nav-links { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.mf-pagination .page-numbers {
	display: inline-flex; align-items: center; gap: 4px;
	min-width: 44px; height: 44px; padding: 0 12px; justify-content: center;
	border: 2px solid var(--mf-line); border-radius: var(--mf-r-sm);
	background: var(--mf-card); text-decoration: none; font-weight: 700; font-size: .9rem;
}
.mf-pagination .page-numbers:hover { border-color: var(--mf-ink); }
.mf-pagination .page-numbers.current { background: var(--mf-ink); color: #fff; border-color: var(--mf-ink); }

.mf-empty { padding: 40px 0; color: var(--mf-muted); }
.mf-404 { text-align: center; padding-block: 56px; }
.mf-404 .mf-searchform { max-width: 480px; margin: 22px auto; }

/* ---------- Footer ---------- */

.mf-footer { background: var(--mf-deep); color: #F3F6F5; margin-top: 48px; }
.mf-footer a { color: inherit; }

.mf-footer__usps { border-bottom: 1px solid rgba(255, 255, 255, .14); padding: 20px 0; }
.mf-footer__usps .mf-trust-strip { justify-content: space-between; }
.mf-footer__usps .mf-trust-strip li { color: #fff; }
.mf-footer__usps .mf-trust-strip .mf-icon { color: var(--mf-accent); }

.mf-footer__cols { display: grid; grid-template-columns: 1fr; gap: 28px; padding-block: 44px; }
@media (min-width: 760px) { .mf-footer__cols { grid-template-columns: 1.7fr repeat(3, 1fr); gap: 36px; } }

.mf-footer__brand .mf-logo--text { color: #fff; }
.mf-footer__blurb { color: rgba(243, 246, 245, .72); font-size: .9rem; max-width: 36ch; margin-top: 12px; }

.mf-footer__list { list-style: none; margin: 0; padding: 0; }
.mf-footer__list a { display: block; padding: 6px 0; font-size: .9rem; text-decoration: none; color: rgba(243, 246, 245, .76); }
.mf-footer__list a:hover { color: #fff; text-decoration: underline; }

.mf-footer__bar { border-top: 1px solid rgba(255, 255, 255, .14); padding: 16px 0; font-size: .8rem; color: rgba(243, 246, 245, .66); }
.mf-footer__bar .mf-wrap { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; justify-content: space-between; }
.mf-footer__bar p { margin: 0; }
.mf-footer__bar .mf-pay-marks { color: rgba(243, 246, 245, .66); }
.mf-footer__bar .mf-pay-marks span { color: #fff; }

.mf-footer__legal { display: flex; flex-wrap: wrap; gap: 14px; list-style: none; margin: 0; padding: 0; }
.mf-footer__legal a { text-decoration: none; }
.mf-footer__legal a:hover { text-decoration: underline; }

.mf-footer--focus { background: transparent; color: var(--mf-ink); border-top: 1px solid var(--mf-line); margin-top: 0; }
.mf-footer--focus a { color: var(--mf-ink); }
.mf-footer__minimal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 22px 0; font-size: .8rem; color: var(--mf-muted); }

/* ---------- Toast ---------- */

.mf-toast {
	position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	transform: translate(-50%, 150%); z-index: 300;
	display: flex; align-items: center; gap: 12px;
	max-width: calc(100vw - 32px); padding: 13px 20px;
	background: var(--mf-ink); color: #fff;
	border-radius: var(--mf-r-pill); box-shadow: var(--mf-shadow-lg);
	font-size: .9rem; font-weight: 700; opacity: 0;
	transition: transform .28s var(--mf-ease), opacity .28s var(--mf-ease);
	pointer-events: none;
}
.mf-toast.is-open { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.mf-toast button { background: none; border: 0; color: var(--mf-accent); font-weight: 700; cursor: pointer; text-decoration: underline; }

/* ---------- Capture panel ---------- */

.mf-capture {
	position: fixed; inset: 0; z-index: 400;
	display: flex; align-items: center; justify-content: center; padding: 20px;
	background: rgba(22, 21, 26, .6);
}
.mf-capture__inner {
	position: relative; width: 100%; max-width: 430px;
	background: var(--mf-card); border-radius: var(--mf-r-lg);
	padding: 32px 26px 24px; box-shadow: var(--mf-shadow-lg); text-align: center;
	border: 2px solid var(--mf-ink);
}
.mf-capture__close { position: absolute; top: 8px; right: 8px; background: none; border: 0; cursor: pointer; padding: 8px; }
.mf-capture h2 { font-size: 1.5rem; text-transform: uppercase; }
.mf-capture p { color: var(--mf-muted); font-size: .93rem; }
.mf-capture__form { display: flex; gap: 8px; margin: 16px 0 10px; }
.mf-capture__form .mf-btn { flex: none; }
.mf-capture__note { min-height: 20px; font-size: .85rem; font-weight: 700; margin: 0; }
.mf-capture__note.is-ok { color: var(--mf-success); }
.mf-capture__note.is-bad { color: var(--mf-danger); }
.mf-capture__fine { font-size: .74rem; color: var(--mf-muted); margin: 6px 0 0; }
@media (max-width: 520px) {
	.mf-capture__form { flex-direction: column; }
	.mf-capture__form .mf-btn { width: 100%; }
}

/* ---------- Widgets ---------- */

.mf-widget { margin-bottom: 26px; }
.mf-widget__title { font-size: .94rem; margin-bottom: 10px; }
.mf-widget ul { list-style: none; margin: 0; padding: 0; }
.mf-widget li { padding: 5px 0; font-size: .92rem; }
.mf-widget a { text-decoration: none; }
.mf-widget a:hover { text-decoration: underline; }

/* ---------- Live search suggestions ---------- */

.mf-searchform--live { position: relative; }

.mf-suggest {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 120;
	max-height: min(66vh, 520px);
	overflow-y: auto;
	background: var(--mf-card);
	border: 2px solid var(--mf-ink);
	border-radius: var(--mf-r);
	box-shadow: var(--mf-shadow-lg);
	padding: 6px;
	text-align: left;
}

.mf-suggest__group + .mf-suggest__group { border-top: 1px solid var(--mf-line); margin-top: 6px; padding-top: 6px; }

.mf-suggest__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 6px 10px 6px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mf-muted);
}

.mf-suggest__clear {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: .68rem;
	letter-spacing: .06em;
	color: var(--mf-accent);
	cursor: pointer;
	text-transform: uppercase;
}

.mf-suggest ul { list-style: none; margin: 0; padding: 0; }

.mf-suggest li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 10px;
	border-radius: var(--mf-r-sm);
	cursor: pointer;
	font-size: .92rem;
}

.mf-suggest li.is-active,
.mf-suggest li:hover { background: var(--mf-soft); }

.mf-suggest mark { background: rgba(var(--mf-accent-rgb), .22); color: inherit; padding: 0 1px; border-radius: 3px; }

.mf-suggest__product img { width: 48px; height: 58px; object-fit: cover; border-radius: var(--mf-r-xs); flex: none; }
.mf-suggest__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mf-suggest__name { font-weight: 600; line-height: 1.3; }
.mf-suggest__price { font-size: .84rem; font-weight: 700; }
.mf-suggest__price del { color: var(--mf-muted); font-weight: 500; margin-right: 5px; }
.mf-suggest__price ins { text-decoration: none; color: var(--mf-sale); }

.mf-suggest__flag {
	margin-left: auto;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mf-muted);
	white-space: nowrap;
}

.mf-suggest__cat { justify-content: space-between; font-weight: 600; }
.mf-suggest__cat span { color: var(--mf-muted); font-size: .8rem; font-weight: 500; }
.mf-suggest__term { font-weight: 600; }

.mf-suggest__empty { padding: 18px 12px; color: var(--mf-muted); font-size: .9rem; }
.mf-suggest__empty p { margin: 0 0 4px; }
.mf-suggest__empty strong { color: var(--mf-ink); }

.mf-suggest__all { border-top: 1px solid var(--mf-line); margin-top: 6px; padding: 10px; text-align: center; }
.mf-suggest__all a { font-weight: 700; font-size: .88rem; text-decoration-color: var(--mf-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- Currency switcher ---------- */

.mf-fx { display: inline-flex; align-items: center; gap: 8px; }
.mf-fx__label { margin: 0; font-size: .78rem; font-weight: 600; color: inherit; opacity: .8; }

.mf-fx__select {
	width: auto;
	padding: 7px 28px 7px 12px;
	font-size: .8rem;
	font-weight: 700;
	border-width: 2px;
	border-radius: var(--mf-r-pill);
	background: transparent;
	color: inherit;
	border-color: currentColor;
}

.mf-footer .mf-fx__select { color: #fff; }
.mf-footer .mf-fx__select option { color: var(--mf-ink); }

.mf-fx-notice {
	margin: 10px 0 0;
	font-size: .78rem;
	color: var(--mf-muted);
	display: flex;
	gap: 6px;
}

/* ---------- Variation dropdowns ---------- */

.woocommerce div.product form.cart .variations select option:disabled { color: var(--mf-line-2); }

/* ---------------------------------------------------------------------------
 * Homepage built from a page
 *
 * When the front page supplies its own content we render it through
 * the_content(), so it may be block markup, classic markup or a page builder's
 * output. Ordinary content gets a readable measure; anything that asks to be
 * full width is let out of the container.
 * ------------------------------------------------------------------------ */

.mf-home__page > .entry-content > * {
	max-width: var(--mf-wrap, 1280px);
	margin-inline: auto;
	padding-inline: var(--mf-gutter, 20px);
}

.mf-home__page > .entry-content > .alignfull,
.mf-home__page > .entry-content > .wp-block-cover,
.mf-home__page > .entry-content > .elementor,
.mf-home__page > .entry-content > .e-con,
.mf-home__page > .entry-content > section,
.mf-home__page > .entry-content > .mf-bleed {
	max-width: none;
	padding-inline: 0;
}

/* A builder-built homepage manages its own rhythm. */
.mf-home--page .mf-home__page > .entry-content > * {
	max-width: none;
	padding-inline: 0;
}

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

.mf-hero--centre .mf-hero__copy {
	margin-inline: auto;
	text-align: center;
}

.mf-hero--centre .mf-hero__actions,
.mf-hero--centre .mf-trust {
	justify-content: center;
}

/* ---------------------------------------------------------------------------
 * Header: logo left instead of centred
 * ------------------------------------------------------------------------ */

.mf-header--inline .mf-header__inner {
	justify-content: flex-start;
	gap: 20px;
}

.mf-header--inline .mf-header__brand {
	order: -1;
	margin-inline-end: auto;
	text-align: left;
}

.mf-header--inline .mf-header__side--right {
	margin-inline-start: auto;
}

@media (min-width: 900px) {
	.mf-header--inline .mf-header__bottom .mf-wrap {
		justify-content: flex-start;
	}

	.mf-header--inline .mf-nav {
		justify-content: flex-start;
	}
}

/* ---------------------------------------------------------------------------
 * Rotating announcement bar
 *
 * All messages are in the markup so the bar never reflows when one swaps in,
 * and the whole thing degrades to the first message with JavaScript off.
 * ------------------------------------------------------------------------ */

.mf-announce--rotate .mf-wrap {
	position: relative;
	display: grid;
}

.mf-announce--rotate .mf-announce__item {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease;
}

.mf-announce--rotate .mf-announce__item.is-active {
	opacity: 1;
	visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
	.mf-announce--rotate .mf-announce__item {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Inherited homepage content
 *
 * Content written under a previous theme often relies on that theme's CSS for
 * its sizing. When the CSS goes, raw images render at their natural size and a
 * 2000px product shot takes over the screen. These caps stop that without
 * touching anything that lays itself out properly.
 * ------------------------------------------------------------------------ */

.mf-home__page img,
.mf-home__page video,
.mf-home__page iframe {
	max-width: 100%;
	height: auto;
}

.mf-home__page {
	overflow-x: clip;
}

/* A bare run of images with no grid around it: make it a grid. */
.mf-home__page > .entry-content > p > img {
	display: block;
	margin-inline: auto;
}

/* ---------------------------------------------------------------------------
 * Centred section headings and card text
 *
 * Driven by the mf-centre-text body class so it is one setting, applied in one
 * place, rather than an alignment decision baked into every component.
 * ------------------------------------------------------------------------ */

.mf-centre-text .mf-section__head {
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
}

.mf-centre-text .mf-section__head h2 {
	text-align: center;
}

.mf-centre-text .mf-cat-card__label,
.mf-centre-text .mf-cat-card__count {
	text-align: center;
	display: block;
}

.mf-centre-text .mf-cat-card a {
	text-align: center;
}

.mf-centre-text ul.products li.product,
.mf-centre-text ul.products li.product .woocommerce-loop-product__title,
.mf-centre-text ul.products li.product .price,
.mf-centre-text ul.products li.product .star-rating {
	text-align: center;
}

.mf-centre-text ul.products li.product .star-rating {
	margin-inline: auto;
}

.mf-centre-text .mf-story {
	text-align: center;
}

.mf-centre-text .mf-story .mf-trust-strip {
	justify-content: center;
}

/* ---------------------------------------------------------------------------
 * Readable accent
 *
 * Two jobs, two tokens. --mf-accent is the brand colour as given, used for
 * fills. --mf-accent-text is the same colour darkened just far enough to be
 * legible as text on white, which a blush pink is not.
 * ------------------------------------------------------------------------ */

a { color: var(--mf-accent-text, var(--mf-accent)); }

.mf-link,
.mf-card__cue,
.mf-filters__clear,
.mf-archive-head__more,
.mf-toast button {
	color: var(--mf-accent-text, var(--mf-accent));
}

.mf-btn--primary:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--mf-accent-dark);
	border-color: var(--mf-accent-dark);
	color: #fff;
}

/* A pale accent needs an edge, or the button reads as a flat block of colour. */
.mf-btn--primary,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt {
	border: 1px solid var(--mf-accent-dark);
}

.mf-badge--sale {
	background: var(--mf-accent);
	color: var(--mf-on-accent, #fff);
}

/* Footer and other deep-toned areas get the same treatment. */
.mf-footer,
.mf-deep {
	background: var(--mf-deep);
	color: var(--mf-on-deep, #fff);
}

/* ===========================================================================
 * Brand pass
 *
 * One rule decides where the accent is allowed: it marks things, it does not
 * carry reading text. Product names, prices and navigation stay black, which
 * is what stops a pink site looking like a pink sweet wrapper.
 * ======================================================================== */

/* --- Navigation: black, pink only on the active underline ---------------- */

.mf-nav__list > li > a,
.mf-nav__list .sub-menu a,
.mf-mobile-nav__list a {
	color: var(--mf-ink);
}

.mf-nav__list a::after { background: var(--mf-accent); }
.mf-nav__list > li > a:hover { color: var(--mf-ink); }
.mf-nav__list .sub-menu a:hover { background: var(--mf-soft); color: var(--mf-ink); }

/* The Shop The Range menu is long enough to run off the screen. Three
   columns, and it stays inside the viewport. */
.mf-nav__list .sub-menu {
	display: grid;
	grid-template-columns: repeat(3, minmax(170px, 1fr));
	gap: 0 6px;
	width: max-content;
	max-width: min(760px, 92vw);
	padding: 14px;
	border: 0;
	box-shadow: 0 18px 44px rgba(0, 0, 0, .13);
	border-radius: 14px;
}

.mf-nav__list .sub-menu a {
	border-radius: 9px;
	line-height: 1.3;
}

@media (max-width: 1200px) {
	.mf-nav__list .sub-menu { grid-template-columns: repeat(2, minmax(170px, 1fr)); }
}

/* --- Trust strips --------------------------------------------------------
 * Icons pink, words black. The icon is the decoration; the words are the
 * claim, and a claim has to be easy to read.
 * ---------------------------------------------------------------------- */

.mf-trust-strip .mf-icon { color: var(--mf-accent); }
.mf-trust-strip li { color: var(--mf-ink); }

/* --- Footer: blush ground, black text ----------------------------------- */

.mf-footer {
	background: var(--mf-soft);
	color: var(--mf-ink);
}

.mf-footer a { color: var(--mf-ink); }
.mf-footer a:hover { color: var(--mf-accent-text); }
.mf-footer__usps { border-bottom: 1px solid var(--mf-line); }
.mf-footer__usps .mf-trust-strip li { color: var(--mf-ink); }
.mf-footer__usps .mf-trust-strip .mf-icon { color: var(--mf-accent); }
.mf-footer__bottom { border-top: 1px solid var(--mf-line); }
.mf-footer .mf-muted,
.mf-footer p { color: var(--mf-ink); }

/* --- Category tiles ------------------------------------------------------ */

.mf-cat-card a { border: 0; background: var(--mf-soft); }
.mf-cat-card__media { background: var(--mf-soft); }
.mf-cat-card__label { color: var(--mf-accent-text); font-weight: 700; }
.mf-cat-card__count { color: var(--mf-muted); }
.mf-cat-card a:hover { background: var(--mf-line); }

/* --- Section headings ---------------------------------------------------- */

.mf-section__head h2 { color: var(--mf-ink); }
.mf-link { color: var(--mf-accent-text); }

/* --- The admin bar and the sticky header --------------------------------
 *
 * The theme removes WordPress's _admin_bar_bump_cb, which is the inline
 * "html { margin-top: 32px }" that normally pushes the page down. Removing it
 * is right: that rule fights a sticky header and produces a 32px white gap
 * above it on every scroll.
 *
 * But nothing replaced it. The header is position:sticky with top:0, and the
 * admin bar is position:fixed at top:0, so the header sat UNDERNEATH it and
 * the account and cart icons were sliced off at the top. Only logged-in staff
 * ever saw it, which is why it survived this long.
 *
 * The correct fix is to offset the sticky point, not to push the whole page.
 * 32px on desktop, 46px on the tablet breakpoint where WordPress makes the bar
 * taller, and 0 below 600px where WordPress switches it to position:absolute
 * and it scrolls away with the page.
 * ---------------------------------------------------------------------- */

body.admin-bar .mf-header {
	top: calc(32px + env(safe-area-inset-top, 0px));
}

@media screen and (max-width: 782px) {
	body.admin-bar .mf-header {
		top: calc(46px + env(safe-area-inset-top, 0px));
	}
}

@media screen and (max-width: 600px) {
	/* The bar stops being fixed here, so the header goes back to the top. */
	body.admin-bar .mf-header {
		top: env(safe-area-inset-top, 0px);
	}
}

/* Anything else that pins itself to the top needs the same offset. */
body.admin-bar .mf-drawer,
body.admin-bar .mf-filter-drawer,
body.admin-bar .mf-mobile-nav {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .mf-drawer,
	body.admin-bar .mf-filter-drawer,
	body.admin-bar .mf-mobile-nav { top: 46px; }
}

@media screen and (max-width: 600px) {
	body.admin-bar .mf-drawer,
	body.admin-bar .mf-filter-drawer,
	body.admin-bar .mf-mobile-nav { top: 0; }
}

/* --- Header rows: give the icons room to breathe ------------------------- */

.mf-header__top,
.mf-header__inner {
	align-items: center;
}

.mf-header__actions,
.mf-header__tools {
	display: flex;
	align-items: center;
	gap: 6px;
}

.mf-header__actions .mf-iconbtn,
.mf-header__tools .mf-iconbtn {
	width: 42px;
	height: 42px;
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
}