/* ==========================================================================
   Maisy McLoughlin's — shop & product pages
   Loaded only on WooCommerce shop / product pages (see functions.php).

   Motifs: Lansdowne caps over EB Garamond, a gold arch (the label's 1920s
   look) and dashed "stitch" borders (Maisy was a seamstress).
   ========================================================================== */

@font-face {
	font-family: "Lansdowne";
	src: url("../fonts/lansdowne.woff2?v=2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "EB Garamond";
	src: url("../fonts/eb-garamond.woff2") format("woff2");
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "EB Garamond";
	src: url("../fonts/eb-garamond-italic.woff2") format("woff2");
	font-weight: 400 600;
	font-style: italic;
	font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens. Dark = whiskey, Cream = marmalade. Set per page with
   .mm-theme-*, and per shop tile with .mm-tile--*.
   -------------------------------------------------------------------------- */

.mm-shop {
	--mm-display: "Lansdowne", "Times New Roman", serif;
	--mm-body: "EB Garamond", Georgia, serif;
	--mm-green: #132e17; /* same as the header (--hdr-green) */
	--mm-green-deep: #0c1f0f;
	--mm-orange: #c77a2e;
	--mm-orange-deep: #ae6624;
	--mm-gold: #c9ac6f;
	--mm-gold-light: #e3cd9a;
	--mm-charcoal: #343131;
	--mm-charcoal-deep: #262323;
	--mm-cream: #f4ecdf;
	--mm-gutter: clamp(20px, 8.3vw, 120px);
	--mm-max: 1440px;
}

.mm-theme-dark,
.mm-tile--dark {
	--bg: #343131;
	--bg-deep: #262323;
	--surface: #2b2828;
	--text: #f3ebdd;
	--muted: #d8cdbb;
	--soft: #bdb3a3;
	--accent: #c9ac6f;
	--accent-hover: #e3cd9a;
	--stage: #132e17;
	--stage-floor: #0c1f0f;
	--arch: rgba(201, 172, 111, 0.7);
	--arch-stitch: rgba(201, 172, 111, 0.45);
	--rule: rgba(201, 172, 111, 0.45);
	--rule-strong: rgba(201, 172, 111, 0.6);
	--btn-bg: #c9ac6f;
	--btn-text: #262323;
	--btn-hover: #d8bf8a;
}

.mm-theme-cream,
.mm-tile--cream {
	--bg: #f4ecdf;
	--bg-deep: #ede2d0;
	--surface: #fbf6ee;
	--text: #2b2828;
	--muted: #4a4340;
	--soft: #5e5650;
	--accent: #8a4a14;
	--accent-hover: #6b380e;
	--stage: #c77a2e;
	--stage-floor: #ae6624;
	--arch: rgba(244, 236, 223, 0.85);
	--arch-stitch: rgba(244, 236, 223, 0.55);
	--rule: rgba(138, 74, 20, 0.45);
	--rule-strong: rgba(43, 40, 40, 0.5);
	--btn-bg: #132e17;
	--btn-text: #f4ecdf;
	--btn-hover: #1d4323;
}

/* --------------------------------------------------------------------------
   Base (scoped so Elementor pages are untouched)
   -------------------------------------------------------------------------- */

.mm-shop {
	/* Breathing room under the header. On desktop the header floats over the page and its
	   oval logo reaches ~230px down, so main.mm-shop gets extra room (see Responsive). */
	padding-top: clamp(32px, 4vw, 56px);
	background: var(--bg);
	color: var(--text);
	font-family: var(--mm-body);
	font-size: 19px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
.mm-shop *,
.mm-shop *::before,
.mm-shop *::after {
	box-sizing: border-box;
}
.mm-shop h1,
.mm-shop h2,
.mm-shop h3 {
	margin: 0;
	font-weight: normal;
	color: inherit;
}
.mm-shop p {
	margin: 0;
}
.mm-shop img {
	max-width: 100%;
	height: auto;
	display: block;
}
.mm-shop a {
	color: var(--accent);
	transition: color 0.15s ease;
}
.mm-shop a:hover,
.mm-shop a:focus-visible {
	color: var(--accent-hover);
}
.mm-shop :focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}
.mm-shop ul,
.mm-shop ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Type */
.mm-eyebrow {
	font-family: var(--mm-display);
	font-size: 12px;
	letter-spacing: 0.33em;
	text-transform: uppercase;
	color: var(--accent);
	line-height: 1.4;
}
.mm-h2 {
	font-family: var(--mm-display);
	font-size: clamp(32px, 3.4vw, 48px);
	line-height: 1.08;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.mm-link {
	font-family: var(--mm-display);
	font-size: 13px;
	letter-spacing: 0.23em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 5px;
	display: inline-block;
}
.mm-shop .mm-link {
	color: var(--text);
}
.mm-shop .mm-link:hover {
	color: var(--accent);
}
.mm-prose p + p {
	margin-top: 1em;
}

/* Price (WooCommerce markup inside) */
.mm-price {
	font-family: var(--mm-display);
	font-size: 40px;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--accent);
}
.mm-price del {
	font-size: 0.55em;
	opacity: 0.7;
	margin-right: 0.3em;
}
.mm-price ins {
	text-decoration: none;
}
.mm-price-note {
	font-family: var(--mm-body);
	font-size: 17px;
	color: var(--soft);
	letter-spacing: 0;
}

/* Buttons */
.mm-shop .mm-btn,
.mm-shop .mm-buy form.cart .single_add_to_cart_button.button,
.mm-shop a.button.mm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 0 32px;
	border: 0;
	border-radius: 0;
	background: var(--btn-bg);
	color: var(--btn-text);
	font-family: var(--mm-display);
	font-size: 15px;
	font-weight: normal;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.mm-shop .mm-btn:hover,
.mm-shop .mm-buy form.cart .single_add_to_cart_button.button:hover,
.mm-shop a.button.mm-btn:hover {
	background: var(--btn-hover);
	color: var(--btn-text);
}
.mm-shop .mm-btn.loading {
	opacity: 0.6;
}
.mm-shop .mm-btn.added::after {
	content: none; /* WooCommerce's tick icon; the "View basket" link says it instead */
}
.mm-shop a.added_to_cart {
	font-family: var(--mm-display);
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--accent);
	padding: 0;
}

/* --------------------------------------------------------------------------
   Notices ("added to your basket" etc.)
   -------------------------------------------------------------------------- */

.mm-shop .woocommerce-notices-wrapper:not(:empty) {
	max-width: var(--mm-max);
	margin: 0 auto;
	padding: 0 var(--mm-gutter) 28px;
}
.mm-shop .woocommerce-message,
.mm-shop .woocommerce-info,
.mm-shop .woocommerce-error {
	margin: 0;
	padding: 18px 24px 18px 56px;
	background: var(--surface);
	color: var(--text);
	border: 1px dashed var(--rule);
	border-top: 3px solid var(--accent);
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.mm-shop .woocommerce-message::before,
.mm-shop .woocommerce-info::before,
.mm-shop .woocommerce-error::before {
	color: var(--accent);
	top: 50%;
	transform: translateY(-50%);
	left: 22px;
}
.mm-shop .woocommerce-error {
	border-top-color: #b3261e;
	flex-direction: column;
	align-items: flex-start;
}
.mm-shop .woocommerce-message .button {
	order: 2;
	background: transparent;
	color: var(--accent);
	font-family: var(--mm-display);
	font-weight: normal;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 10px 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
}

/* --------------------------------------------------------------------------
   Product page
   -------------------------------------------------------------------------- */

.mm-product {
	/* WooCommerce adds .product; keep its floats from interfering */
	position: relative;
}

.mm-crumbs {
	max-width: var(--mm-max);
	margin: 0 auto;
	padding: 0 var(--mm-gutter);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	font-family: var(--mm-display);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--soft);
}
.mm-shop .mm-crumbs a {
	color: var(--soft);
	text-decoration: none;
}
.mm-crumbs [aria-current] {
	color: var(--accent);
}

.mm-hero {
	max-width: var(--mm-max);
	margin: 0 auto;
	padding: 28px var(--mm-gutter) clamp(64px, 7.8vw, 112px); /* same as .mm-section, one even rhythm */
	display: grid;
	grid-template-columns: minmax(0, 680px) minmax(0, 1fr);
	gap: clamp(40px, 5.5vw, 80px);
	align-items: start;
}

/* Stage: the big image with the arch */
.mm-gallery {
	display: flex;
	flex-direction: column;
	gap: 16px;
	position: sticky;
	top: 24px;
}
.mm-stage {
	position: relative;
	aspect-ratio: 680 / 760;
	background: var(--stage);
	overflow: hidden;
}
.mm-stage__arch {
	position: absolute;
	inset: 7.4% 13.2% 0;
	pointer-events: none;
}
.mm-stage__arch-line,
.mm-stage__arch-stitch {
	position: absolute;
	border-radius: 999px 999px 0 0;
	border-bottom: 0;
}
.mm-stage__arch-line {
	inset: 0;
	border: 1px solid var(--arch);
	border-bottom: 0;
}
.mm-stage__arch-stitch {
	inset: 16px 16px 0;
	border: 1px dashed var(--arch-stitch);
	border-bottom: 0;
}
.mm-stage__arch-label {
	position: absolute;
	top: 52px;
	left: 0;
	right: 0;
	text-align: center;
	font-family: var(--mm-display);
	font-size: 12px;
	letter-spacing: 0.5em;
	text-transform: uppercase;
	color: var(--accent);
}
.mm-theme-cream .mm-stage__arch-label {
	color: var(--mm-charcoal);
}
.mm-stage__floor {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 5.3%;
	background: var(--stage-floor);
}
.mm-stage .mm-stage__img {
	position: absolute;
	transition: opacity 0.2s ease;
}
.mm-stage.is-cutout .mm-stage__img {
	left: 50%;
	bottom: 5.3%;
	height: 79%;
	width: auto;
	max-width: 80%;
	object-fit: contain;
	transform: translateX(-50%);
	filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45));
	z-index: 1;
}
.mm-stage.is-photo .mm-stage__img {
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mm-stage.is-photo .mm-stage__arch,
.mm-stage.is-photo .mm-stage__floor {
	display: none;
}
.mm-stage.is-swapping .mm-stage__img {
	opacity: 0;
}

.mm-badge {
	position: absolute;
	left: 20px;
	top: 20px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: var(--mm-charcoal-deep);
	border: 1px solid var(--mm-gold);
	color: var(--mm-gold);
}
.mm-badge > div,
.mm-badge > span {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.mm-badge__top {
	font-family: var(--mm-display);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.mm-badge__main {
	font-style: italic;
	font-size: 16px;
	color: #f3ebdd;
	line-height: 1.2;
}

/* Thumbnails */
.mm-thumbs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
}
.mm-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--stage);
	border: 1px solid var(--rule);
	opacity: 0.72;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}
.mm-thumb:hover,
.mm-thumb.is-active {
	opacity: 1;
}
.mm-thumb.is-active {
	border: 2px solid var(--accent);
}
.mm-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mm-thumb.is-cutout img {
	width: auto;
	height: 84%;
	object-fit: contain;
}

/* Summary */
.mm-summary {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding-top: 24px;
}
.mm-summary__head {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.mm-title {
	font-family: var(--mm-display);
	font-size: clamp(38px, 4.2vw, 60px);
	line-height: 1.04;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-wrap: balance;
}
.mm-tagline {
	font-size: 24px;
	font-style: italic;
	line-height: 1.35;
	color: var(--muted);
}
.mm-price-row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px 16px;
	padding-bottom: 24px;
	border-bottom: 1px dashed var(--rule);
}
.mm-lede {
	font-size: 20px;
	line-height: 1.6;
	color: var(--muted);
}

.mm-specs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
}
.mm-specs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mm-specs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm-specs--1 { grid-template-columns: minmax(0, 1fr); }
.mm-spec {
	border: 1px dashed var(--rule);
	padding: 14px 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: center;
}
.mm-spec dt {
	font-family: var(--mm-display);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--accent);
}
.mm-spec dd {
	margin: 0;
	font-size: 19px;
	line-height: 1.25;
}

/* Add to cart: WooCommerce's own form, restyled.
   Selectors are prefixed with "div.product" to outrank woocommerce.css. */
.mm-shop div.product .mm-buy form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}
.mm-shop div.product .mm-buy form.cart::before,
.mm-shop div.product .mm-buy form.cart::after {
	content: none;
}
.mm-shop div.product .mm-buy form.cart div.quantity {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	height: 60px;
	margin: 0;
	float: none;
	border: 1px solid var(--rule-strong);
}
.mm-shop div.product .mm-buy form.cart div.quantity .qty {
	width: 44px;
	height: 58px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--text);
	font-family: var(--mm-display);
	font-size: 18px;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}
.mm-shop div.product .mm-buy .qty::-webkit-inner-spin-button,
.mm-shop div.product .mm-buy .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.mm-shop div.product .mm-buy .mm-qty-btn {
	width: 48px;
	height: 58px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--text);
	cursor: pointer;
}
.mm-shop div.product .mm-buy .mm-qty-btn:hover {
	color: var(--accent);
	background: transparent;
}
.mm-shop div.product .mm-buy form.cart .single_add_to_cart_button.button {
	flex: 1 1 0;
	min-width: 150px;
	min-height: 60px;
	margin: 0;
	float: none;
	font-size: 16px;
	letter-spacing: 0.22em;
}
.mm-shop div.product .mm-buy .stock {
	width: 100%;
	margin: 0 0 4px;
	font-size: 17px;
	font-style: italic;
	color: var(--soft);
}
.mm-shop div.product .mm-buy .stock.out-of-stock {
	color: var(--accent);
}
/* Stripe / express checkout buttons injected after the form */
.mm-buy form.cart > *:not(.quantity):not(.single_add_to_cart_button):not(input[type="hidden"]) {
	flex-basis: 100%;
}

/* Handwritten note (inc/gift-note.php): tick box above quantity + Add to basket */
.mm-shop div.product .mm-buy .mm-giftnote {
	flex-basis: 100%;
	margin: 0 0 6px;
	padding: 16px 18px;
	border: 1px dashed var(--rule-strong);
}
.mm-giftnote__toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	font-family: var(--mm-display);
	font-size: 15px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text);
}
.mm-giftnote__toggle input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--accent);
	cursor: pointer;
}
.mm-giftnote__label {
	flex: 1;
}
.mm-giftnote__price {
	color: var(--accent);
	white-space: nowrap;
}
.mm-giftnote__text {
	margin: 8px 0 0 32px;
	font-size: 16px;
	line-height: 1.5;
	font-style: italic;
	color: var(--soft);
}
.mm-giftnote__field {
	margin: 14px 0 0 32px;
}
.mm-giftnote:not(:has(input:checked)) .mm-giftnote__field {
	display: none;
}
.mm-shop .mm-giftnote textarea {
	display: block;
	width: 100%;
	min-height: 84px;
	padding: 10px 12px;
	border: 1px solid var(--rule-strong);
	border-radius: 0;
	background: transparent;
	color: var(--text);
	font-family: inherit;
	font-size: 17px;
	line-height: 1.45;
	resize: vertical;
}
.mm-shop .mm-giftnote textarea:focus {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
	border-color: var(--accent);
}
.mm-shop .mm-giftnote textarea::placeholder {
	color: var(--soft);
	opacity: 0.8;
}
.mm-giftnote__hint {
	margin: 6px 0 0;
	font-size: 14px;
	color: var(--soft);
}
@media (max-width: 767px) {
	.mm-giftnote__text,
	.mm-giftnote__field {
		margin-left: 0;
	}
}

/* Free magazine offer (inc/free-magazine.php) */
.mm-freemag {
	display: flex;
	align-items: center;
	gap: clamp(20px, 4vw, 40px);
	max-width: 760px;
	margin: 0 auto clamp(40px, 6vw, 64px);
	padding: clamp(20px, 3vw, 28px) clamp(20px, 4vw, 36px);
	border: 1px dashed var(--rule-strong);
	background: var(--bg-deep, rgba(0, 0, 0, 0.15));
}
.mm-freemag__cover {
	flex: none;
	width: 150px;
	transform: rotate(-3deg);
}
.mm-freemag__img {
	display: block;
	width: 100%;
	height: auto;
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}
.mm-freemag__badge {
	display: inline-block;
	margin: 0 0 10px;
	padding: 3px 10px;
	background: var(--accent);
	color: var(--bg, #262323);
	font-family: var(--mm-display);
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.mm-shop .mm-freemag__title {
	margin: 0 0 8px;
	font-family: var(--mm-display);
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: normal;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text);
}
.mm-freemag__text {
	margin: 0;
	font-size: 18px;
	line-height: 1.5;
	color: var(--soft);
}
.mm-freemag__link {
	display: inline-block;
	margin-top: 12px;
	font-family: var(--mm-display);
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}
.mm-freemag-line {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 20px;
	font-size: 17px;
	line-height: 1.4;
	color: var(--text);
}
.mm-freemag-line__img {
	flex: none;
	width: 44px;
	height: auto;
	transform: rotate(-3deg);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}
.mm-freemag-line--basket {
	justify-content: center;
	max-width: 640px;
	margin: 16px auto 0;
}
@media (max-width: 600px) {
	.mm-freemag {
		flex-direction: column;
		text-align: center;
	}
	.mm-freemag__cover {
		width: 120px;
	}
}

/* Shop card: out of stock instead of a button */
.mm-tile__soldout {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	font-size: 17px;
	font-style: italic;
	color: var(--accent);
}

/* Trust row */
.mm-trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 16px;
	padding-top: 24px;
	border-top: 1px dashed var(--rule);
}
.mm-trust__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var(--accent);
}
.mm-trust__title {
	font-family: var(--mm-display);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--text);
}
.mm-trust__text {
	font-size: 16px;
	line-height: 1.4;
	color: var(--soft);
}

/* --------------------------------------------------------------------------
   Sections below the fold
   -------------------------------------------------------------------------- */

.mm-section {
	max-width: var(--mm-max);
	margin: 0 auto;
	padding: clamp(64px, 7.8vw, 112px) var(--mm-gutter);
}
.mm-section__head {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: clamp(32px, 4vw, 56px);
}
.mm-section__head--split {
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px 48px;
	flex-wrap: wrap;
}
.mm-section__head--split > div {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.mm-section__head--center {
	align-items: center;
	text-align: center;
}
.mm-section__intro {
	max-width: 480px;
	font-size: 20px;
	font-style: italic;
	line-height: 1.5;
	color: var(--muted);
}

.mm-description {
	padding-top: 0;
}
/* Product page rhythm: the sections sit on the same background with nothing between them
   (no barley divider), so where two meet only the first one's bottom padding counts.
   One even gap everywhere instead of doubled 224px holes. The full-width story band
   (.mm-story) isn't an .mm-section, so the section after it keeps its top padding. */
.mm-product > .mm-hero + .mm-section,
.mm-product > .mm-section + .mm-section {
	padding-top: 0;
}
.mm-description .mm-prose {
	max-width: 760px;
	font-size: 20px;
	line-height: 1.65;
	color: var(--muted);
}

/* --------------------------------------------------------------------------
   News: the News page (templates/news.php) and [maisy_news] on the home page.
   A post in a box: featured image, or the oval logo on dark when there isn't one.
   -------------------------------------------------------------------------- */

.mm-news {
	max-width: var(--mm-max);
	margin: 0 auto;
	padding: 0 var(--mm-gutter) clamp(64px, 7vw, 104px);
}
.mm-news-band {
	padding: 0;
}
.mm-news-band .mm-news {
	padding-top: clamp(64px, 7.8vw, 112px);
}
.mm-news__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mm-news-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px dashed var(--rule);
	background: var(--surface);
	transition: border-color 0.2s ease;
}
.mm-news-card:hover {
	border-color: var(--rule-strong);
}
.mm-news-card__media {
	position: relative; /* focal-point crops (shop.js) */
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--bg-deep);
	line-height: 0;
}
.mm-news-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}
.mm-news-card:hover .mm-news-card__media img {
	transform: scale(1.03);
}
/* No featured image: the oval logo centred on the dark background */
.mm-news-card__media.is-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(ellipse at 50% 45%, #3d3939 0%, var(--bg-deep) 70%);
}
.mm-news-card__media.is-placeholder img.mm-news-card__logo {
	width: auto;
	height: 64%;
	object-fit: contain;
	filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.45));
}
.mm-news-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 20px;
	padding: 24px 26px 28px;
}
.mm-news-card__title {
	margin: 0;
	font-family: var(--mm-display);
	font-size: clamp(18px, 1.5vw, 21px);
	font-weight: normal;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
}
.mm-shop .mm-news-card__title a {
	color: var(--text);
	text-decoration: none;
	transition: color 0.2s ease;
}
.mm-shop .mm-news-card__title a:hover {
	color: var(--accent);
}
.mm-news-card__more {
	align-self: flex-start;
	margin-top: auto;
}
.mm-news__more {
	margin: 40px 0 0;
	text-align: center;
}
.mm-news__empty {
	text-align: center;
	font-size: 22px;
	font-style: italic;
	color: var(--muted);
}

/* Page numbers on the News page */
.mm-news__pages ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 48px 0 0;
	padding: 0;
	list-style: none;
}
.mm-shop .mm-news__pages .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	box-sizing: border-box;
	border: 1px dashed var(--rule);
	color: var(--text);
	font-family: var(--mm-display);
	font-size: 13px;
	letter-spacing: 0.15em;
	text-decoration: none;
	text-transform: uppercase;
}
.mm-shop .mm-news__pages a.page-numbers:hover {
	border-color: var(--accent);
	color: var(--accent);
}
.mm-shop .mm-news__pages .page-numbers.current {
	border: 0;
	background: var(--btn-bg);
	color: var(--btn-text);
}

@media (max-width: 1100px) {
	.mm-news__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 700px) {
	.mm-news__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   News post (templates/single-news.php): clean dark page, thin reading column.
   Content comes from the classic editor (sometimes pasted from an old site
   builder), so these rules are forgiving: images never overflow, pasted inline
   fonts are overridden, links are always gold.
   -------------------------------------------------------------------------- */

.mm-post__article {
	max-width: calc(720px + 2 * var(--mm-gutter)); /* ~720px of text, like the old post box */
	margin: 0 auto;
	padding: 0 var(--mm-gutter) clamp(64px, 7vw, 104px);
}
.mm-post__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-bottom: clamp(32px, 4vw, 48px);
	padding-bottom: clamp(24px, 3vw, 32px);
	border-bottom: 1px dashed var(--rule);
	text-align: center;
}
.mm-post__head .mm-eyebrow span {
	margin: 0 6px;
}
.mm-post__title {
	margin: 0;
	font-family: var(--mm-display);
	font-size: clamp(30px, 3.6vw, 48px);
	font-weight: normal;
	letter-spacing: 0.04em;
	line-height: 1.1;
	text-transform: uppercase;
	text-wrap: balance;
}

.mm-post__content {
	font-family: var(--mm-body);
	font-size: 20px;
	line-height: 1.7;
	color: var(--muted);
	overflow-wrap: anywhere;
}
/* Pasted text often carries its own font-family inline; keep everything on-brand */
.mm-post__content * {
	font-family: inherit !important;
}
.mm-post__content > * + *,
.mm-post__content p {
	margin: 0 0 1.1em;
}
.mm-post__content strong,
.mm-post__content b {
	color: var(--text);
	font-weight: 600;
}
.mm-post__content h2,
.mm-post__content h3,
.mm-post__content h4 {
	margin: 1.6em 0 0.6em;
	color: var(--text);
	font-family: var(--mm-display) !important;
	font-weight: normal;
	letter-spacing: 0.08em;
	line-height: 1.25;
	text-transform: uppercase;
}
.mm-post__content h2 { font-size: 26px; }
.mm-post__content h3 { font-size: 21px; }
.mm-post__content h4 { font-size: 17px; letter-spacing: 0.16em; }

/* Links: gold, never Hello Elementor's default pink/red */
.mm-shop .mm-post__content a {
	color: var(--accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.mm-shop .mm-post__content a:hover,
.mm-shop .mm-post__content a:focus {
	color: var(--accent-hover);
}

/* Images, galleries, embeds: never wider than the column */
.mm-post__content img,
.mm-post__content video {
	max-width: 100%;
	height: auto;
}
.mm-post__content img {
	display: block;
	margin: 1.4em auto;
}
.mm-post__content .alignleft,
.mm-post__content .alignright {
	float: none;
	margin-left: auto;
	margin-right: auto;
}
.mm-post__content figure {
	max-width: 100%;
	margin: 1.6em auto;
}
.mm-post__content figcaption,
.mm-post__content .wp-caption-text {
	margin-top: 8px;
	font-size: 15px;
	font-style: italic;
	text-align: center;
	color: var(--soft);
}
.mm-post__content iframe {
	display: block;
	max-width: 100%;
	margin: 1.4em auto;
}
.mm-post__content blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--accent);
	font-size: 22px;
	font-style: italic;
	color: var(--text);
}
.mm-post__content ul,
.mm-post__content ol {
	padding-left: 1.3em;
}
.mm-post__content hr {
	margin: 2em 0;
	border: 0;
	border-top: 1px dashed var(--rule);
}
/* Leftover column markup from the old site builder: stack it */
.mm-post__content [class*="jw-"] {
	display: block !important;
	width: auto !important;
	max-width: 100% !important;
	float: none !important;
}

.mm-post__foot {
	margin-top: clamp(40px, 5vw, 56px);
	padding-top: 24px;
	border-top: 1px dashed var(--rule);
	text-align: center;
}

/* --------------------------------------------------------------------------
   [maisy_showcase]: big image on the left fading into the dark, items with
   small drawings stacked down the right.
   -------------------------------------------------------------------------- */

.mm-showcase {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-height: 640px;
	padding: 0;
	background: var(--bg);
}
.mm-showcase--no-image {
	grid-template-columns: minmax(0, 1fr);
}
.mm-showcase__media {
	position: relative;
	overflow: hidden;
}
.mm-showcase__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Fade to the page colour: mostly towards the text, a little top and bottom */
.mm-showcase__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right, transparent 30%, var(--bg) 98%),
		linear-gradient(to bottom, var(--bg) 0%, transparent 14%, transparent 86%, var(--bg) 100%);
}
.mm-showcase__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 680px;
	padding: clamp(56px, 7vw, 112px) var(--mm-gutter) clamp(56px, 7vw, 112px) clamp(24px, 3vw, 48px);
}
.mm-showcase--no-image .mm-showcase__body {
	margin: 0 auto;
}
.mm-showcase__head {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 16px;
}
.mm-showcase__items {
	margin: 0;
	padding: 0;
	list-style: none;
}
.mm-showcase__item {
	display: flex;
	align-items: center;
	gap: clamp(20px, 2.4vw, 32px);
	padding: 28px 0;
}
.mm-showcase__item + .mm-showcase__item {
	border-top: 1px dashed var(--rule);
}
.mm-showcase__icon {
	flex: none;
	width: clamp(110px, 10vw, 150px);
	line-height: 0;
}
.mm-showcase__icon img {
	width: 100%;
	height: auto;
}
.mm-showcase__text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.mm-showcase__title {
	margin: 0;
	font-family: var(--mm-display);
	font-size: 16px;
	font-weight: normal;
	letter-spacing: 0.19em;
	text-transform: uppercase;
	color: var(--text);
}
.mm-showcase__text p {
	margin: 0;
	font-size: 19px;
	line-height: 1.55;
	color: var(--muted);
}

@media (max-width: 900px) {
	.mm-showcase {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}
	.mm-showcase__media {
		height: 380px;
	}
	.mm-showcase__media::after {
		background: linear-gradient(to bottom, transparent 45%, var(--bg) 100%);
	}
	.mm-showcase__body {
		max-width: none;
		padding: 8px var(--mm-gutter) 64px;
	}
}
@media (max-width: 540px) {
	.mm-showcase__item {
		align-items: flex-start;
	}
	.mm-showcase__icon {
		width: 88px;
	}
}

/* --------------------------------------------------------------------------
   [maisy_heading]: page heading at the top of an Elementor page (e.g. Gallery).
   Leaves room for the floating header, like main.mm-shop.
   -------------------------------------------------------------------------- */

.mm-shop.mm-page-heading {
	padding-top: 250px;
}
@media (max-width: 1024px) {
	.mm-shop.mm-page-heading {
		padding-top: 100px;
	}
}

/* --------------------------------------------------------------------------
   Gallery page: Elementor's Gallery widget inside a container with the CSS
   class "mm-gallery-section". Photos get a stitched gold frame and a slow zoom
   on hover; the widget's own lightbox still opens on click.
   -------------------------------------------------------------------------- */

/* Items are already positioned by the widget (masonry uses absolute positions): don't set position here */
.mm-gallery-section .e-gallery-item {
	overflow: hidden;
}
.mm-gallery-section .elementor-gallery-item__image {
	transition: transform 0.8s ease, filter 0.4s ease !important;
	filter: saturate(0.92);
}
.mm-gallery-section .e-gallery-item:hover .elementor-gallery-item__image,
.mm-gallery-section .e-gallery-item:focus-visible .elementor-gallery-item__image {
	transform: scale(1.04);
	filter: saturate(1);
}
.mm-gallery-section .e-gallery-item::after {
	content: "";
	position: absolute;
	inset: 10px;
	z-index: 2;
	border: 1px dashed rgba(227, 205, 154, 0.85);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease, inset 0.3s ease;
}
.mm-gallery-section .e-gallery-item:hover::after,
.mm-gallery-section .e-gallery-item:focus-visible::after {
	inset: 14px;
	opacity: 1;
}
.mm-gallery-section .e-gallery-item:focus-visible {
	outline: 2px solid #c9ac6f;
	outline-offset: 2px;
}
/* Elementor's lightbox captions the photo with its file name ("DSC04397"); hide it */
.elementor-lightbox .elementor-slideshow__title,
.elementor-lightbox .elementor-slideshow__description {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.mm-gallery-section .elementor-gallery-item__image,
	.mm-gallery-section .e-gallery-item::after {
		transition: none !important;
	}
}

/* [maisy_cards] on an Elementor page: full-width dark band, the .mm-section inside sets the spacing */
.mm-cards-band {
	padding: 0;
}

/* Braid divider (the wheat band from the home page) */
.mm-braid {
	height: 96px;
	background: #fff url("../img/braid.png") repeat-x center / 220px 220px;
}
.mm-theme-cream .mm-braid {
	background-color: transparent;
	mix-blend-mode: multiply; /* the braid's white ground becomes cream */
}

/* Numbered cards */
.mm-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	counter-reset: none;
}
.mm-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mm-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm-cards--1 { grid-template-columns: minmax(0, 1fr); }
.mm-card {
	border: 1px dashed var(--rule);
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 240px;
}
.mm-theme-cream .mm-card {
	background: var(--surface);
}
.mm-card__num {
	font-family: var(--mm-display);
	font-size: 34px;
	line-height: 1;
	color: var(--accent);
}
.mm-card__title {
	font-family: var(--mm-display);
	font-size: 16px;
	letter-spacing: 0.19em;
	text-transform: uppercase;
}
.mm-card__text {
	font-size: 19px;
	line-height: 1.55;
	color: var(--muted);
}
.mm-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 32px !important;
}
.mm-tags li {
	padding: 8px 18px;
	border-radius: 40px;
	background: var(--surface);
	border: 1px solid var(--rule);
	font-size: 17px;
	color: var(--muted);
}

/* Story band (always green) */
.mm-story {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	background: var(--mm-green);
	color: #f3ebdd;
	min-height: 600px;
}
.mm-story--no-image {
	grid-template-columns: minmax(0, 1fr);
	min-height: 0;
}
.mm-story__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mm-story__body {
	padding: clamp(56px, 6.5vw, 96px) clamp(24px, 7vw, 104px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 24px;
	max-width: 760px;
	font-size: 20px;
	line-height: 1.6;
}
.mm-story--no-image .mm-story__body {
	margin: 0 auto;
	text-align: center;
	align-items: center;
}
.mm-story .mm-eyebrow {
	color: var(--mm-gold-light);
}
.mm-story .mm-h2 {
	font-size: clamp(32px, 3.1vw, 44px);
}
.mm-story__quote {
	font-size: 24px;
	font-style: italic;
	color: var(--mm-gold-light);
}
.mm-shop .mm-story .mm-link {
	align-self: flex-start;
	color: #f3ebdd;
	border-bottom-color: var(--mm-gold-light);
}
.mm-story--no-image .mm-link {
	align-self: center;
}
.mm-shop .mm-story .mm-link:hover {
	color: var(--mm-gold-light);
}

/* Ingredients & nutrition */
.mm-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
}
.mm-facts__panel {
	background: var(--surface);
	border-top: 3px solid var(--accent);
	padding: clamp(28px, 3.4vw, 48px);
	display: flex;
	flex-direction: column;
	gap: 16px;
	color: var(--muted);
}
.mm-facts__note {
	font-size: 17px;
	color: var(--soft);
}
.mm-nutrition {
	width: 100%;
	border-collapse: collapse;
	font-size: 18px;
	margin: 0;
}
.mm-nutrition th,
.mm-nutrition td {
	padding: 9px 0;
	border: 0;
	border-bottom: 1px dashed var(--rule);
	background: transparent;
	font-weight: normal;
	text-align: left;
	color: var(--text);
}
.mm-nutrition td {
	text-align: right;
}
.mm-nutrition tr:last-child th,
.mm-nutrition tr:last-child td {
	border-bottom: 0;
}

/* Pairing card */
.mm-pair__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	border: 1px solid var(--rule);
}
/* Image on the right ([maisy_pair]: every second card); desktop only */
.mm-pair__card--flip .mm-pair__media {
	order: 2;
}
.mm-pair__stack {
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 3vw, 40px);
}
.mm-pair-band {
	padding: 0;
}
/* On the home page it sits right above [maisy_cards]; don't double the space between them */
.mm-pair-band .mm-section {
	padding-bottom: clamp(24px, 3vw, 40px);
}
.mm-pair__media {
	position: relative;
	min-height: 420px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	overflow: hidden;
}
.mm-pair__media.is-cutout img {
	height: 360px;
	width: auto;
	margin-bottom: 32px;
	filter: drop-shadow(0 20px 28px rgba(0, 0, 0, 0.4));
}
.mm-pair__media.is-photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mm-pair__body {
	background: var(--surface);
	padding: clamp(32px, 4vw, 56px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
}
.mm-pair__title {
	font-family: var(--mm-display);
	font-size: clamp(24px, 2.2vw, 30px);
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
}
.mm-shop .mm-pair__title a {
	color: var(--text);
	text-decoration: none;
}
.mm-pair__tagline {
	font-style: italic;
	font-size: 20px;
	color: var(--muted);
}
.mm-pair .mm-price {
	font-size: 30px;
}
.mm-pair__actions,
.mm-tile__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px 28px;
	margin-top: 8px;
}

.mm-swatch-dark {
	background: var(--mm-green);
}
.mm-swatch-cream {
	background: var(--mm-orange);
}

/* FAQs */
.mm-faqs {
	display: grid;
	grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
	gap: 24px 80px;
	padding-top: 0;
}
.mm-faqs__head {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.mm-faqs__list {
	border-top: 1px dashed var(--rule);
}
.mm-faq {
	border-bottom: 1px dashed var(--rule);
}
.mm-faq summary {
	min-height: 72px;
	padding: 16px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	font-size: 22px;
	line-height: 1.3;
	cursor: pointer;
	list-style: none;
}
.mm-faq summary::-webkit-details-marker {
	display: none;
}
.mm-faq summary .mm-icon {
	flex-shrink: 0;
	color: var(--accent);
	transition: transform 0.2s ease;
}
.mm-faq[open] summary .mm-icon {
	transform: rotate(45deg);
}
.mm-faq p {
	max-width: 680px;
	padding-bottom: 24px;
	font-size: 19px;
	line-height: 1.6;
	color: var(--muted);
}

/* --------------------------------------------------------------------------
   Shop page
   -------------------------------------------------------------------------- */

.mm-archive__head {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 var(--mm-gutter) clamp(40px, 4.5vw, 64px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	text-align: center;
}
.mm-archive__title {
	font-family: var(--mm-display);
	font-size: clamp(40px, 5vw, 72px);
	line-height: 1.04;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-wrap: balance;
}
.mm-archive__intro {
	font-size: 22px;
	font-style: italic;
	line-height: 1.45;
	color: var(--muted);
	max-width: 620px;
}

.mm-grid {
	max-width: var(--mm-max);
	margin: 0 auto !important;
	padding: 0 var(--mm-gutter) !important;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
	gap: 32px;
}
/* Exactly three products: one row of three rather than two + one left over */
.mm-grid:has(> :nth-child(3):last-child) {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 28px;
}
.mm-tile {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--rule);
	background: var(--bg);
	color: var(--text);
	/* reset WooCommerce loop styles */
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.mm-tile__media {
	position: relative;
	display: block;
	aspect-ratio: 6 / 5.4;
	overflow: hidden;
}
.mm-tile__media .mm-stage__arch {
	inset: 8% 22% 0;
}
.mm-tile__media .mm-stage__arch-label {
	top: 40px;
}
.mm-tile__media .mm-stage__floor {
	height: 7%;
	background: rgba(0, 0, 0, 0.18);
}
.mm-tile__media.is-cutout img {
	position: absolute;
	left: 50%;
	bottom: 7%;
	height: 80%;
	width: auto;
	max-width: 80%;
	object-fit: contain;
	transform: translateX(-50%);
	filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.45));
	z-index: 1;
	transition: transform 0.4s ease;
}
.mm-tile:hover .mm-tile__media.is-cutout img {
	transform: translateX(-50%) translateY(-6px);
}
.mm-tile__media.is-photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}
.mm-tile:hover .mm-tile__media.is-photo img {
	transform: scale(1.03);
}
.mm-tile__body {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: clamp(28px, 3vw, 40px);
}
.mm-tile__title {
	font-family: var(--mm-display);
	font-size: clamp(26px, 2.4vw, 34px);
	line-height: 1.1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.mm-shop .mm-tile__title a {
	color: var(--text);
	text-decoration: none;
}
.mm-shop .mm-tile__title a:hover {
	color: var(--accent);
}
.mm-tile__tagline {
	font-size: 20px;
	font-style: italic;
	color: var(--muted);
}
.mm-tile__foot {
	margin-top: auto;
	padding-top: 20px;
	border-top: 1px dashed var(--rule);
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.mm-tile .mm-price {
	font-size: 30px;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 14px;
}

.mm-archive__trust {
	max-width: 900px;
	margin: 0 auto;
	padding: clamp(48px, 6vw, 80px) var(--mm-gutter);
}
.mm-archive__trust .mm-trust {
	border-top: 0;
	text-align: center;
}
.mm-archive__trust .mm-trust__item {
	align-items: center;
}
.mm-empty {
	text-align: center;
	font-style: italic;
	padding: 40px var(--mm-gutter) 80px;
	color: var(--muted);
}
.mm-shop .woocommerce-pagination {
	max-width: var(--mm-max);
	margin: 32px auto 0;
	padding: 0 var(--mm-gutter);
}

/* --------------------------------------------------------------------------
   [maisy_feature] — featured product band for Elementor pages
   -------------------------------------------------------------------------- */

.mm-feature {
	padding: clamp(64px, 8vw, 120px) var(--mm-gutter);
}
.mm-feature__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(40px, 6vw, 96px);
	align-items: center;
}
.mm-feature--flip .mm-feature__media {
	order: 2;
}
.mm-feature__media {
	display: block;
	aspect-ratio: 640 / 700;
	text-decoration: none;
}
.mm-feature__media.is-cutout .mm-stage__img {
	transition: transform 0.4s ease;
}
.mm-feature__media.is-cutout:hover .mm-stage__img {
	transform: translateX(-50%) translateY(-6px);
}
.mm-feature__media.is-photo .mm-stage__img {
	transition: transform 0.6s ease;
}
.mm-feature__media.is-photo:hover .mm-stage__img {
	transform: scale(1.03);
}
.mm-feature__ribbon {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 2;
	padding: 8px 16px;
	background: var(--mm-green);
	color: #f4ecdf;
	font-family: var(--mm-display);
	font-size: 12px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}
.mm-feature__body {
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.mm-feature__title {
	font-family: var(--mm-display);
	font-size: clamp(34px, 3.8vw, 54px);
	line-height: 1.05;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-wrap: balance;
}
.mm-shop .mm-feature__title a {
	color: var(--text);
	text-decoration: none;
}
.mm-shop .mm-feature__title a:hover {
	color: var(--accent);
}
.mm-feature .mm-price-row {
	padding-bottom: 20px;
}
.mm-feature__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px 32px;
	margin-top: 6px;
}
.mm-shop .mm-feature__actions .mm-btn {
	min-height: 60px;
	padding: 0 44px;
	font-size: 16px;
}

@media (max-width: 960px) {
	.mm-feature__inner {
		grid-template-columns: minmax(0, 1fr);
	}
	.mm-feature--flip .mm-feature__media {
		order: 0;
	}
}
@media (max-width: 640px) {
	.mm-feature {
		padding-left: 0;
		padding-right: 0;
	}
	.mm-feature__body {
		padding: 0 20px;
	}
	.mm-feature__media {
		aspect-ratio: 390 / 440;
	}
	.mm-shop .mm-feature__actions .mm-btn {
		flex: 1 1 auto;
	}
}

/* --------------------------------------------------------------------------
   [maisy_products] — quiet featured cards (home page)
   -------------------------------------------------------------------------- */

.mm-products {
	padding: clamp(56px, 7vw, 104px) var(--mm-gutter);
	background: transparent;
}
.mm-products__head {
	max-width: 720px;
	margin: 0 auto clamp(32px, 4vw, 48px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}
.mm-products__title {
	font-family: var(--mm-display);
	font-size: clamp(28px, 2.8vw, 40px);
	line-height: 1.1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.mm-products__intro {
	font-size: 20px;
	font-style: italic;
	color: var(--muted);
}
.mm-shop .mm-grid.mm-grid--quiet {
	max-width: 1060px;
	padding: 0 !important;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(20px, 2.5vw, 32px);
}
.mm-products__more {
	margin-top: clamp(28px, 3.5vw, 44px) !important;
	text-align: center;
}

/* Quiet card: smaller image, Discover first, price in the background */
.mm-tile--quiet .mm-tile__media {
	aspect-ratio: 5 / 4;
}
.mm-tile--quiet .mm-tile__media .mm-stage__arch {
	inset: 9% 26% 0;
}
.mm-tile--quiet .mm-tile__media .mm-stage__arch-label {
	display: none;
}
.mm-tile--quiet .mm-tile__body {
	gap: 10px;
	padding: clamp(22px, 2.4vw, 32px);
}
.mm-tile--quiet .mm-eyebrow {
	font-size: 11px;
}
.mm-tile--quiet .mm-tile__title {
	font-size: clamp(22px, 2vw, 28px);
}
.mm-tile--quiet .mm-tile__tagline {
	font-size: 18px;
}
.mm-tile--quiet .mm-tile__foot {
	padding-top: 18px;
}
.mm-tile--quiet .mm-tile__actions {
	justify-content: space-between;
	margin-top: 0;
}
.mm-shop .mm-btn.mm-btn--ghost {
	min-height: 48px;
	padding: 0 28px;
	background: transparent;
	border: 1px solid var(--accent);
	color: var(--text);
	font-size: 13px;
}
.mm-shop .mm-btn.mm-btn--ghost:hover,
.mm-shop .mm-btn.mm-btn--ghost:focus-visible {
	background: var(--accent);
	color: var(--bg);
}
.mm-tile__price-quiet {
	font-size: 17px;
	color: var(--soft);
}
.mm-tile__price-quiet del {
	opacity: 0.7;
	margin-right: 0.3em;
}
.mm-tile__price-quiet ins {
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Mobile sticky "Add to basket" bar (shown by shop.js)
   -------------------------------------------------------------------------- */

.mm-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	background: var(--bg-deep);
	border-top: 1px solid var(--rule);
	transform: translateY(110%);
	transition: transform 0.25s ease;
}
.mm-sticky[hidden] {
	display: none;
}
.mm-sticky.is-visible {
	transform: translateY(0);
}
.mm-sticky__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}
.mm-sticky__name {
	font-family: var(--mm-display);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mm-sticky__price {
	font-family: var(--mm-display);
	font-size: 20px;
	color: var(--accent);
}
.mm-shop .mm-sticky .mm-btn {
	min-height: 50px;
	padding: 0 22px;
	font-size: 13px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
	main.mm-shop {
		padding-top: 250px;
	}
}
@media (max-width: 1024px) {
	/* The mobile header's oval logo hangs ~70px below its bar. */
	main.mm-shop {
		padding-top: 100px;
	}
}

@media (max-width: 1100px) {
	.mm-cards--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 960px) {
	.mm-hero {
		grid-template-columns: minmax(0, 1fr);
		padding-top: 16px;
	}
	.mm-gallery {
		position: static;
	}
	.mm-summary {
		padding-top: 0;
	}
	.mm-story,
	.mm-pair__card,
	.mm-faqs {
		grid-template-columns: minmax(0, 1fr);
	}
	.mm-pair__card--flip .mm-pair__media {
		order: 0; /* stacked: image back on top */
	}
	.mm-story__media {
		aspect-ratio: 4 / 3;
	}
	.mm-cards--3 {
		grid-template-columns: minmax(0, 1fr);
	}
	.mm-card {
		min-height: 0;
	}
}

@media (max-width: 640px) {
	.mm-shop {
		font-size: 18px;
	}
	.mm-hero {
		padding-left: 0;
		padding-right: 0;
	}
	.mm-thumbs,
	.mm-summary {
		padding: 0 20px;
	}
	.mm-stage {
		aspect-ratio: 390 / 440;
	}
	.mm-stage__arch-label {
		top: 30px;
		font-size: 10px;
	}
	.mm-tile__media .mm-stage__arch-label,
	.mm-stage:has(.mm-badge) .mm-stage__arch-label {
		display: none; /* the badge sits where the arch label would */
	}
	.mm-shop div.product .mm-buy form.cart div.quantity {
		height: 56px;
	}
	.mm-shop div.product .mm-buy .mm-qty-btn {
		width: 40px;
	}
	.mm-shop div.product .mm-buy form.cart .single_add_to_cart_button.button {
		min-height: 56px;
		padding: 0 16px;
		font-size: 14px;
		letter-spacing: 0.16em;
	}
	.mm-badge {
		left: 12px;
		top: 12px;
		padding: 7px 10px;
	}
	.mm-thumbs {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}
	.mm-thumbs li {
		flex: 0 0 76px;
		scroll-snap-align: start;
	}
	.mm-tagline {
		font-size: 20px;
	}
	.mm-price {
		font-size: 32px;
	}
	.mm-lede {
		font-size: 18px;
	}
	.mm-specs,
	.mm-specs--3,
	.mm-specs--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.mm-cards--4,
	.mm-cards--2 {
		grid-template-columns: minmax(0, 1fr);
	}
	.mm-card {
		padding: 24px 22px;
	}
	.mm-faq summary {
		font-size: 20px;
	}
	.mm-pair__media {
		min-height: 320px;
	}
	.mm-pair__media.is-cutout img {
		height: 270px;
	}
	.mm-product {
		padding-bottom: 80px; /* room for the sticky bar */
	}
}

@media (min-width: 641px) {
	.mm-sticky {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mm-shop *,
	.mm-sticky {
		transition: none !important;
	}
}

/* [maisy_faq] on Elementor pages: the product page's FAQ, with its own top spacing */
.mm-faq-band .mm-faqs {
	padding-top: clamp(64px, 7.8vw, 112px);
}

/* --------------------------------------------------------------------------
   [maisy_story] and [maisy_photos] (About page and other Elementor pages)
   -------------------------------------------------------------------------- */

.mm-story.mm-embed {
	padding-top: 0;
}
.mm-story--dark {
	background: var(--bg);
	color: var(--text);
}
.mm-story--dark .mm-eyebrow,
.mm-story--dark .mm-story__quote {
	color: var(--accent);
}
.mm-story__body p {
	margin: 0;
}
.mm-story--flip .mm-story__media {
	order: 2;
}
.mm-story--flip .mm-story__body {
	justify-self: end;
}
.mm-story__media {
	position: relative;
	min-height: 420px;
	overflow: hidden; /* focal-point crops (shop.js) can be larger than the panel */
}
.mm-story__media > img {
	position: absolute;
	inset: 0;
}

/* Photo inside the gold arch (the label's frame) */
.mm-story--arch .mm-story__media {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 88px 40px 0;
	background: var(--mm-green);
}
.mm-story--arch.mm-story--green .mm-story__media {
	background: var(--mm-green-deep);
}
.mm-arch-photo {
	position: relative;
	width: min(420px, 78%);
	aspect-ratio: 4 / 5;
}
.mm-arch-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 999px 999px 0 0;
}
.mm-arch-photo::before,
.mm-arch-photo::after {
	content: "";
	position: absolute;
	border-bottom: 0;
	border-radius: 999px 999px 0 0;
	pointer-events: none;
}
.mm-arch-photo::before {
	inset: -14px -14px 0;
	border: 1px solid var(--mm-gold);
	border-bottom: 0;
}
.mm-arch-photo::after {
	inset: -28px -28px 0;
	border: 1px dashed rgba(201, 172, 111, 0.5);
	border-bottom: 0;
}

/* Photo row in stitched frames */
.mm-photos {
	padding: clamp(64px, 7.8vw, 112px) var(--mm-gutter);
}
.mm-photos__grid {
	max-width: 1200px;
	margin: 0 auto !important;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: clamp(28px, 3.5vw, 48px);
}
.mm-photos__item {
	position: relative;
	margin: 12px;
}
.mm-photos__item::after {
	content: "";
	position: absolute;
	inset: -12px;
	border: 1px dashed var(--rule);
	pointer-events: none;
}
.mm-photos__item img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

@media (max-width: 960px) {
	.mm-story--flip .mm-story__media {
		order: 0;
	}
	.mm-story__media {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}
	.mm-story--arch .mm-story__media {
		aspect-ratio: auto;
		padding-top: 64px;
	}
}
.mm-photos__grid--1 {
	max-width: 480px;
}
.mm-photos__grid--2 {
	max-width: 880px;
}

/* --------------------------------------------------------------------------
   Tall video in the story band (poster + play; YouTube loads on click)
   -------------------------------------------------------------------------- */

.mm-story--video .mm-story__media {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(48px, 6vw, 88px) 40px;
	background: var(--mm-green-deep);
}
.mm-video {
	position: relative;
	width: min(360px, 78%);
	aspect-ratio: 9 / 16;
	background: #0a0a0a;
}
.mm-video::after {
	content: "";
	position: absolute;
	inset: -14px;
	border: 1px dashed rgba(201, 172, 111, 0.55);
	pointer-events: none;
}
.mm-story .mm-video__poster,
.mm-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}
.mm-shop .mm-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 76px;
	height: 76px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 4px;
	background: var(--mm-gold);
	color: var(--mm-charcoal-deep);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
	transition: transform 0.2s ease, background-color 0.2s ease;
}
.mm-shop .mm-video__play:hover,
.mm-shop .mm-video__play:focus-visible {
	transform: translate(-50%, -50%) scale(1.08);
	background: var(--mm-gold-light);
	color: var(--mm-charcoal-deep);
}
.mm-video.is-playing .mm-video__poster,
.mm-video.is-playing .mm-video__play {
	display: none;
}

@media (max-width: 960px) {
	.mm-story--video .mm-story__media {
		aspect-ratio: auto;
	}
}

/* Background loop version: a tall, narrower video panel (the source is 9:16),
   so most of the frame stays in view rather than a thin middle slice */
.mm-story--video-bg {
	grid-template-columns: minmax(320px, 0.7fr) minmax(0, 1fr);
	min-height: 820px;
}
.mm-story--video-bg .mm-story__media {
	position: relative;
	overflow: hidden;
	background: var(--mm-green-deep);
}
.mm-story--video-bg .mm-story__media::after {
	/* stitched gold frame over the video */
	content: "";
	position: absolute;
	inset: 24px;
	border: 1px dashed rgba(227, 205, 154, 0.7);
	pointer-events: none;
	z-index: 2;
}
.mm-video-bg {
	position: absolute;
	inset: 0;
	container-type: size;
	pointer-events: none;
}
.mm-story .mm-video-bg__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mm-video-bg iframe {
	/* cover the box with a tall (9:16) video, zoomed a touch to crop YouTube's edges */
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100cqw, 56.25cqh);
	height: max(100cqh, 177.78cqw);
	transform: translate(-50%, -50%) scale(1.18);
	border: 0;
	opacity: 0;
	transition: opacity 0.8s ease;
}
.mm-video-bg.is-playing iframe {
	opacity: 1;
}

@media (max-width: 960px) {
	.mm-story--video-bg {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}
	.mm-story--video-bg .mm-story__media {
		aspect-ratio: 3 / 4;
	}
}

/* --------------------------------------------------------------------------
   Contact page: [maisy_contact] card + the Elementor form (.mm-contact-form)
   -------------------------------------------------------------------------- */

.mm-contact-card {
	position: relative;
	height: 100%;
	padding: clamp(32px, 3.5vw, 48px);
	background: var(--surface);
	border-top: 3px solid var(--accent);
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.mm-contact-card::after {
	content: "";
	position: absolute;
	inset: 12px;
	border: 1px dashed var(--rule);
	pointer-events: none;
}
.mm-contact-card .mm-h2 {
	font-size: clamp(28px, 2.6vw, 36px);
}
.mm-contact-card__text {
	color: var(--muted);
	font-size: 18px;
}
.mm-contact-card__list {
	display: flex;
	flex-direction: column;
	gap: 22px;
	margin-top: 12px !important;
}
.mm-contact-card__list li {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}
.mm-contact-card__list li > span:last-child {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.mm-contact-card__icon {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--rule);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--accent);
}
.mm-contact-card__icon svg {
	width: 20px;
	height: 20px;
}
.mm-contact-card__label {
	font-family: var(--mm-display);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--accent);
}
.mm-shop .mm-contact-card__list a,
.mm-contact-card__value {
	font-size: 20px;
	color: var(--text);
	text-decoration: none;
	overflow-wrap: anywhere;
}
.mm-shop .mm-contact-card__list a:hover {
	color: var(--accent);
}
.mm-contact-card__follow {
	margin-top: auto;
	padding-top: 24px;
	border-top: 1px dashed var(--rule);
	display: flex;
	align-items: center;
	gap: 14px;
}
.mm-contact-card__follow .mm-contact-card__label {
	margin-right: auto;
}
.mm-shop .mm-contact-card__follow a {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--rule);
	color: var(--text);
}
.mm-shop .mm-contact-card__follow a:hover {
	color: var(--accent);
	border-color: var(--accent);
}

/* The form (Elementor Pro form widget with CSS class mm-contact-form) */
.mm-contact-form {
	--f-text: #f3ebdd;
	--f-muted: #bdb3a3;
	--f-gold: #c9ac6f;
	--f-rule: rgba(201, 172, 111, 0.45);
	font-family: "EB Garamond", Georgia, serif;
	height: 100%;
}
.mm-contact-form .elementor-form {
	height: 100%;
	padding: clamp(28px, 3.5vw, 48px);
	background: #2b2828;
	border-top: 3px solid var(--f-gold);
}
.mm-contact-form .elementor-form-fields-wrapper {
	row-gap: 22px;
}
.mm-contact-form .elementor-field-group {
	margin-bottom: 0 !important;
}
.mm-contact-form .elementor-field-group > label,
.mm-contact-form .elementor-field-label {
	margin-bottom: 8px;
	padding: 0;
	font-family: "Lansdowne", "Times New Roman", serif;
	font-size: 11px;
	font-weight: normal;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--f-gold) !important;
}
.mm-contact-form .elementor-field-group .elementor-field,
.mm-contact-form .elementor-field-group .elementor-field-textual,
.mm-contact-form .elementor-field-group select.elementor-field {
	min-height: 54px;
	padding: 12px 16px;
	border: 1px dashed var(--f-rule) !important;
	border-radius: 0 !important;
	background: #343131 !important;
	color: var(--f-text) !important;
	font-family: "EB Garamond", Georgia, serif !important;
	font-size: 18px !important;
	line-height: 1.4;
	box-shadow: none !important;
	transition: border-color 0.15s ease;
}
.mm-contact-form .elementor-field-group textarea.elementor-field {
	min-height: 170px;
	resize: vertical;
}
.mm-contact-form .elementor-field::placeholder {
	color: var(--f-muted);
	opacity: 0.8;
}
.mm-contact-form .elementor-field-group .elementor-field:focus {
	border-style: solid !important;
	border-color: var(--f-gold) !important;
	outline: 2px solid rgba(201, 172, 111, 0.25);
	outline-offset: 2px;
}
.mm-contact-form .elementor-select-wrapper .select-caret-down-wrapper {
	color: var(--f-gold);
	right: 16px;
}
.mm-contact-form .elementor-select-wrapper select option {
	background: #2b2828;
	color: var(--f-text);
}
.mm-contact-form .elementor-field-type-submit {
	margin-top: 8px;
}
.mm-contact-form .elementor-button[type="submit"] {
	width: 100%;
	min-height: 60px;
	border: 0;
	border-radius: 0;
	background: var(--f-gold) !important;
	color: #262323 !important;
	font-family: "Lansdowne", "Times New Roman", serif !important;
	font-size: 15px !important;
	font-weight: normal !important;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	transition: background-color 0.15s ease;
}
.mm-contact-form .elementor-button[type="submit"]:hover,
.mm-contact-form .elementor-button[type="submit"]:focus-visible {
	background: #e3cd9a !important;
}
.mm-contact-form .elementor-message {
	margin-top: 18px;
	padding: 14px 18px;
	font-size: 17px;
	border: 1px dashed var(--f-rule);
	color: var(--f-text);
}
.mm-contact-form .elementor-message::before {
	color: var(--f-gold);
}
.mm-contact-form .elementor-message.elementor-message-danger,
.mm-contact-form .elementor-error .elementor-message {
	border-color: #d9826f;
	color: #f0c2b8;
}
.mm-contact-form .elementor-field-group.elementor-error .elementor-field {
	border-color: #d9826f !important;
}
/* Elementor gives the select's wrapper the field class too: style only the select */
.mm-contact-form .elementor-field-group .elementor-select-wrapper.elementor-field {
	min-height: 0;
	padding: 0;
	border: 0 !important;
	background: transparent !important;
}
.mm-contact-form .elementor-select-wrapper select.elementor-field-textual {
	width: 100%;
	padding-right: 44px;
	appearance: none;
}
/* Details card runs the full height of the form beside it */
.e-con:has(> .elementor-widget-shortcode .mm-contact-card) > .elementor-widget-shortcode {
	flex-grow: 1;
}
.elementor-widget-shortcode:has(.mm-contact-card) > .elementor-widget-container,
.elementor-widget-shortcode:has(.mm-contact-card) .elementor-shortcode {
	height: 100%;
}
.mm-contact-form .elementor-message {
	font-family: "EB Garamond", Georgia, serif;
	line-height: 1.45;
}
@media (max-width: 480px) {
	.mm-shop .mm-contact-card__list a,
	.mm-contact-card__value {
		font-size: clamp(16px, 4.6vw, 20px);
	}
}

/* ==========================================================================
   Runway 28 (partner gin brand): same layout, its own look.
   Product "Page style" = runway. Colours from the bottle and poster: hangar
   black, silver-white, the gold of the Runway 28 logo (#9f6e00 → #e9c412; main #d1ad14) and the label's deep green.
   Fonts: Cinzel (the poster's spaced capitals) + Josefin Sans (1930s
   geometric). The dashed rules read as runway markings here.
   ========================================================================== */

@font-face {
	font-family: "Cinzel";
	src: url("../fonts/cinzel.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Josefin Sans";
	src: url("../fonts/josefin-sans.woff2") format("woff2");
	font-weight: 300 600;
	font-style: normal;
	font-display: swap;
}

.mm-theme-runway,
.mm-tile--runway {
	--mm-display: "Cinzel", "Times New Roman", serif;
	--mm-body: "Josefin Sans", "Helvetica Neue", Arial, sans-serif;
	--mm-green: #1f3a2b;      /* the bottle's green label */
	--mm-green-deep: #152a1f;
	--mm-gold: #d1ad14;
	--mm-gold-light: #e9c412;
	--bg: #15171a;
	--bg-deep: #0e1012;
	--surface: #1d2024;
	--text: #eef0f2;
	--muted: #c3c8ce;
	--soft: #9aa1a9;
	--accent: #d1ad14;
	--accent-hover: #e9c412;
	--stage: #1f3a2b;
	--stage-floor: #152a1f;
	--arch: rgba(238, 240, 242, 0.55);
	--arch-stitch: rgba(238, 240, 242, 0.3);
	--rule: rgba(209, 173, 20, 0.4);
	--rule-strong: rgba(209, 173, 20, 0.6);
	--btn-bg: #d1ad14;
	--btn-text: #0e1012;
	--btn-hover: #e9c412;
	font-family: var(--mm-body);
}
.mm-theme-runway {
	letter-spacing: 0.01em;
}

/* Small labels in the geometric face, wide-spaced like the label's lettering */
.mm-theme-runway .mm-eyebrow,
.mm-tile--runway .mm-eyebrow,
.mm-theme-runway .mm-spec dt,
.mm-theme-runway .mm-trust__title,
.mm-theme-runway .mm-crumbs,
.mm-theme-runway .mm-card__title,
.mm-theme-runway .mm-link,
.mm-tile--runway .mm-link {
	font-family: "Josefin Sans", "Helvetica Neue", Arial, sans-serif;
	font-weight: 600;
	letter-spacing: 0.3em;
}
.mm-theme-runway .mm-title,
.mm-theme-runway .mm-h2,
.mm-tile--runway .mm-tile__title {
	font-weight: 500;
	letter-spacing: 0.08em;
}
.mm-theme-runway .mm-tagline,
.mm-tile--runway .mm-tile__tagline,
.mm-theme-runway .mm-section__intro,
.mm-theme-runway .mm-story__quote {
	font-style: normal;
	font-weight: 300;
	letter-spacing: 0.04em;
}
.mm-theme-runway .mm-lede,
.mm-theme-runway .mm-card__text,
.mm-theme-runway .mm-story__body p {
	font-weight: 400;
}
.mm-theme-runway .mm-buy form.cart .single_add_to_cart_button.button,
.mm-theme-runway .mm-btn {
	font-family: "Josefin Sans", "Helvetica Neue", Arial, sans-serif;
	font-weight: 600;
}
.mm-swatch-runway {
	background: #1f3a2b;
}

/* FAQs straight after the story band (products with no pairing, e.g. Runway 28) need their own top spacing */
.mm-story + .mm-faqs {
	padding-top: clamp(64px, 7.8vw, 112px);
}

/* Shop: "Also available" (products kept out of the header, e.g. Runway 28) */
.mm-also {
	max-width: var(--mm-max);
	margin: clamp(56px, 6vw, 88px) auto 0;
}
.mm-also__head {
	padding: 0 var(--mm-gutter);
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	gap: 24px;
}
.mm-also__head::after {
	content: "";
	flex: 1;
	border-top: 1px dashed var(--rule);
}
.mm-shop .mm-grid.mm-grid--wide {
	grid-template-columns: minmax(0, 1fr);
}
.mm-tile--wide {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.mm-tile--wide .mm-tile__media {
	aspect-ratio: auto;
	min-height: 440px;
}
.mm-tile--wide .mm-tile__body {
	justify-content: center;
	padding: clamp(32px, 4vw, 56px);
}
@media (max-width: 860px) {
	.mm-tile--wide {
		grid-template-columns: minmax(0, 1fr);
	}
	.mm-tile--wide .mm-tile__media {
		min-height: 0;
		aspect-ratio: 6 / 5.4;
	}
}
.mm-tile--wide .mm-tile__foot {
	margin-top: 14px;
}

/* Brand logo above the product name (partner brands, e.g. Runway 28) */
.mm-brand-logo {
	margin-bottom: 6px;
}
.mm-shop .mm-brand-logo img {
	width: clamp(170px, 18vw, 240px);
	height: auto;
}
.mm-shop .mm-brand-logo--card img {
	width: 170px;
}

/* "Text page" template (Privacy & Cookies, Delivery & Collection …): the news post layout plus tables */
.mm-text-page__updated {
	margin-top: 10px !important;
	font-size: 16px;
	color: var(--soft);
}
.mm-text-page .mm-post__content h2 {
	margin-top: 1.6em;
}
.mm-text-page .mm-post__content table {
	width: 100%;
	margin: 1.2em 0;
	border-collapse: collapse;
	font-size: 17px;
}
.mm-text-page .mm-post__content th,
.mm-text-page .mm-post__content td {
	padding: 12px 14px;
	border: 0;
	border-bottom: 1px dashed var(--rule);
	background: transparent;
	text-align: left;
	vertical-align: top;
	color: var(--text);
}
.mm-text-page .mm-post__content thead th {
	font-family: var(--mm-display);
	font-size: 11px;
	font-weight: normal;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--accent);
	border-bottom: 1px solid var(--rule);
}
.mm-text-page .mm-post__content tbody tr:nth-child(odd) td {
	background: transparent;
}
@media (max-width: 640px) {
	.mm-text-page .mm-post__content table,
	.mm-text-page .mm-post__content thead,
	.mm-text-page .mm-post__content tbody,
	.mm-text-page .mm-post__content tr,
	.mm-text-page .mm-post__content td {
		display: block;
	}
	.mm-text-page .mm-post__content thead {
		display: none;
	}
	.mm-text-page .mm-post__content td {
		padding: 4px 0;
		border: 0;
	}
	.mm-text-page .mm-post__content td:first-child {
		padding-top: 14px;
		font-weight: 600;
	}
	.mm-text-page .mm-post__content tr {
		border-bottom: 1px dashed var(--rule);
		padding-bottom: 10px;
	}
}
.mm-text-page .mm-post__content td,
.mm-text-page .mm-post__content th {
	min-width: 5.5em;
}
.mm-text-page .mm-post__content td:nth-child(3) {
	white-space: nowrap;
}