/*
 * MyRecipe Styles: recipe card
 *
 * Theme-first by design:
 * - Fonts, sizes, line-height and text colour are inherited from the post.
 * - Headings are real h2/h3/h4, so the theme's heading styles apply.
 * - Lines, tints and muted tones are mixed from currentColor, so the card
 *   adapts to light and dark sections.
 * - The primary colour resolves: card accent attribute / Settings accent ->
 *   Neve's --nv-primary-accent -> theme.json primary preset -> currentColor. It fills the hero, ticked boxes and done step numbers.
 */

.mrs-card {
	--mrs-accent: var(--mrs-accent-user, var(--nv-primary-accent, var(--wp--preset--color--primary, currentColor)));
	--mrs-on-accent: #fff;
	--mrs-card-bg: var(--nv-site-bg, #fff);
	--mrs-surface: var(--mrs-card-bg);
	--mrs-box-border: #000;
	--mrs-line: color-mix(in srgb, currentColor 15%, transparent);
	--mrs-line-strong: color-mix(in srgb, currentColor 40%, transparent);
	--mrs-tint: color-mix(in srgb, currentColor 4%, transparent);
	--mrs-accent-tint: color-mix(in srgb, var(--mrs-accent) 12%, transparent);
	--mrs-muted: color-mix(in srgb, currentColor 68%, transparent);
	--mrs-radius: 0.5rem;
	--mrs-space: clamp(1rem, 3vw, 1.75rem);
	--mrs-section-gap: clamp(2rem, 5vw, 3rem);
	--mrs-avatar-size: clamp(8.5rem, 30vw, 13rem);
	--mrs-avatar-ring: 8px;

	container: mrs-card / inline-size;
	margin-block: var(--mrs-space) calc(var(--mrs-space) * 1.5);
	color: inherit;
	font: inherit;
	line-height: inherit;
	background: var(--mrs-surface);
}

/* Browsers without color-mix(): neutral greys that sit on light or dark. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.mrs-card {
		--mrs-line: rgba(128, 128, 128, 0.25);
		--mrs-line-strong: rgba(128, 128, 128, 0.6);
		--mrs-tint: rgba(128, 128, 128, 0.06);
		--mrs-accent-tint: rgba(128, 128, 128, 0.12);
		--mrs-muted: inherit;
	}
}

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

/* ---------- Presets ---------- */

.mrs-preset-minimal .mrs-hero {
	border-radius: var(--mrs-radius);
}

.mrs-preset-minimal .mrs-content {
	padding-inline: 0;
}

.mrs-preset-card {
	--mrs-surface: color-mix(in srgb, currentColor 4%, var(--mrs-card-bg));
	overflow: hidden;
	border: 1px solid var(--mrs-line);
	border-radius: calc(var(--mrs-radius) * 2);
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.mrs-preset-card {
		--mrs-surface: var(--mrs-card-bg);
	}
}

.mrs-preset-bordered {
	overflow: hidden;
	border: 2px solid var(--mrs-accent);
	border-radius: var(--mrs-radius);
}

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

.mrs-card .mrs-hero {
	padding: calc(var(--mrs-space) * 1.5) var(--mrs-space);
	text-align: center;
	color: var(--mrs-on-accent);
	background: var(--mrs-accent);
}

.mrs-card .mrs-hero.has-avatar {
	padding-bottom: calc(var(--mrs-avatar-size) / 2 + var(--mrs-space));
}

.mrs-card .mrs-hero .mrs-title {
	margin: 0 0 1em;
	color: inherit;
	text-wrap: balance;
}

/* Category, author and reviews as separate frosted tiles on the hero. */
.mrs-card .mrs-facts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mrs-card .mrs-fact {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3em;
	min-width: 9.5em;
	margin: 0;
	padding: 0.75em 1.25em;
	background: rgba(0, 0, 0, 0.16);
	border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
	border-radius: 0.75rem;
}

.mrs-card .mrs-fact-label {
	font-size: 0.7em;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.mrs-card .mrs-fact-value {
	font-weight: 700;
	line-height: 1.3;
}

.mrs-card .mrs-fact-value a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.mrs-card .mrs-rating {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.2em 0.45em;
}

/* Five stars from one mask; the gradient fills --mrs-rating out of 5. */
.mrs-card .mrs-stars {
	--mrs-star-size: 1.2em;
	display: inline-block;
	width: calc(var(--mrs-star-size) * 5);
	height: var(--mrs-star-size);
	background: linear-gradient(90deg, currentColor calc(var(--mrs-rating, 0) / 5 * 100%), color-mix(in srgb, currentColor 35%, transparent) 0);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.2 6.8.8-5 4.7 1.3 6.7L12 17.6l-6 3.3 1.3-6.7-5-4.7 6.8-.8z'/%3E%3C/svg%3E") 0 0 / var(--mrs-star-size) var(--mrs-star-size) repeat-x;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.2 6.8.8-5 4.7 1.3 6.7L12 17.6l-6 3.3 1.3-6.7-5-4.7 6.8-.8z'/%3E%3C/svg%3E") 0 0 / var(--mrs-star-size) var(--mrs-star-size) repeat-x;
}

.mrs-card .mrs-review-count {
	font-weight: 400;
}

/* Round photo pulled up by half its height so it straddles the hero's edge.
   The ring is the card colour, so it reads as a cut-out. */
.mrs-card .mrs-avatar {
	position: relative;
	z-index: 1;
	display: block;
	width: var(--mrs-avatar-size);
	max-width: none;
	height: var(--mrs-avatar-size);
	margin: calc(var(--mrs-avatar-size) / -2) auto 0;
	object-fit: cover;
	background: var(--mrs-surface);
	border: var(--mrs-avatar-ring) solid var(--mrs-surface);
	border-radius: 50%;
}

/* ---------- Content ---------- */

/* Every block in the card body is spaced by one consistent gap. */
.mrs-card .mrs-content {
	display: flex;
	flex-direction: column;
	gap: var(--mrs-section-gap);
	padding: calc(var(--mrs-space) * 1.25) var(--mrs-space) calc(var(--mrs-space) * 1.5);
}

.mrs-card .mrs-content > * {
	margin-block: 0;
}

.mrs-card .mrs-overview {
	display: flex;
	flex-direction: column;
	gap: calc(var(--mrs-space) * 1.1);
}

.mrs-card .mrs-summary {
	max-width: 40em;
	margin: 0 auto;
	font-size: 1.05em;
	text-align: center;
	color: var(--mrs-muted);
}

/* Prep / cook / total / serves / cuisine as large stat tiles. */
.mrs-card .mrs-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75em;
	margin: 0;
	padding: 0;
	text-align: center;
}

.mrs-card .mrs-meta-item {
	flex: 1 1 8.5rem;
	padding: 1em 0.75em;
	background: var(--mrs-tint);
	border: 1px solid var(--mrs-line);
	border-top: 3px solid var(--mrs-accent);
	border-radius: var(--mrs-radius);
}

.mrs-card .mrs-meta dt {
	margin: 0 0 0.35em;
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mrs-muted);
}

.mrs-card .mrs-meta dd {
	margin: 0;
	padding: 0; /* Neve indents dl dd by 30px. */
	font-size: clamp(1.15rem, 2.4vw, 1.45rem);
	font-weight: 800;
	line-height: 1.2;
	overflow-wrap: normal; /* Wrap between words only, never mid-word. */
	word-break: normal;
	hyphens: manual;
}

/* ---------- Pill buttons (reset theme button styles first) ---------- */

.mrs-card .mrs-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6em;
}

.mrs-card .mrs-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	min-height: 0;
	margin: 0;
	padding: 0.6em 1.2em;
	font: inherit;
	font-size: 0.875em;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	color: inherit;
	background: transparent;
	border: 2px solid var(--mrs-line-strong);
	border-radius: 999px;
	box-shadow: none;
	cursor: pointer;
	transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}

.mrs-card .mrs-btn[hidden] {
	display: none;
}

.mrs-card .mrs-btn:hover {
	color: var(--mrs-accent);
	border-color: var(--mrs-accent);
}

.mrs-card .mrs-btn:focus-visible {
	outline: 2px solid var(--mrs-accent);
	outline-offset: 3px;
}

.mrs-card .mrs-btn svg {
	flex: none;
	width: 1.15em;
	height: 1.15em;
}

.mrs-card .mrs-btn--solid {
	color: var(--mrs-on-accent);
	background: var(--mrs-accent);
	border-color: var(--mrs-accent);
}

.mrs-card .mrs-btn--solid:hover {
	color: var(--mrs-on-accent);
	background: color-mix(in srgb, var(--mrs-accent) 82%, #000);
	border-color: color-mix(in srgb, var(--mrs-accent) 82%, #000);
}

/* Cook mode: a pill with an on/off switch inside. */
.mrs-card .mrs-switch {
	position: relative;
	flex: none;
	width: 2.2em;
	height: 1.25em;
	background: var(--mrs-line-strong);
	border-radius: 999px;
	transition: background-color 0.2s;
}

.mrs-card .mrs-switch::before {
	content: "";
	position: absolute;
	top: 0.175em;
	left: 0.175em;
	width: 0.9em;
	height: 0.9em;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s;
}

.mrs-card .mrs-btn--toggle[aria-pressed="true"] {
	color: var(--mrs-accent);
	border-color: var(--mrs-accent);
}

.mrs-card .mrs-btn--toggle[aria-pressed="true"] .mrs-switch {
	background: var(--mrs-accent);
}

.mrs-card .mrs-btn--toggle[aria-pressed="true"] .mrs-switch::before {
	transform: translateX(0.95em);
}

.mrs-card .mrs-btn--pinterest {
	color: #fff;
	background: #e60023;
	border-color: #e60023;
}

.mrs-card .mrs-btn--pinterest:hover {
	color: #fff;
	background: #ad081b;
	border-color: #ad081b;
}

/* ---------- Ingredients and method (stacked, one per row) ---------- */

.mrs-card .mrs-section-title {
	margin: 0 0 0.75em;
}

.mrs-card .mrs-section-title::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 3px;
	margin-top: 0.4em;
	background: var(--mrs-accent);
	border-radius: 3px;
}

.mrs-card .mrs-group-title {
	margin: 1.25em 0 0.25em;
	font-size: 0.8em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mrs-muted);
}

.mrs-card .mrs-section-title + .mrs-group-title {
	margin-top: 0;
}

.mrs-card .mrs-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mrs-card .mrs-item {
	margin: 0;
	padding: 0.6em 0;
	border-bottom: 1px solid var(--mrs-line);
}

.mrs-card .mrs-item:last-child {
	border-bottom: 0;
}

.mrs-card .mrs-item-label {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.85em;
	margin: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.mrs-card .mrs-item-text {
	flex: 1;
	min-width: 0;
	transition: opacity 0.2s;
}

.mrs-card .mrs-item-text a {
	color: var(--mrs-accent);
}

/* Ingredient checkboxes: perfect squares, solid black border; ticked = primary fill, white tick. */
.mrs-card .mrs-check {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 1.3em;
	display: inline-grid;
	place-content: center;
	width: 1.3em;
	height: 1.3em;
	aspect-ratio: 1;
	margin: 0.15em 0 0;
	padding: 0;
	background: transparent;
	border: 2px solid var(--mrs-box-border);
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.15s;
}

.mrs-card .mrs-check::before {
	content: "";
	width: 0.7em;
	height: 0.7em;
	background: var(--mrs-on-accent);
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
	transform: scale(0);
	transition: transform 0.15s ease-out;
}

.mrs-card .mrs-check:checked {
	background: var(--mrs-accent);
}

.mrs-card .mrs-check:checked::before {
	transform: scale(1);
}

.mrs-card .mrs-check:focus-visible {
	outline: 2px solid var(--mrs-accent);
	outline-offset: 2px;
}

/* Done state: .is-done comes from JS; :has() covers no-JS. Kept as separate
   rules so browsers without :has() don't drop the .is-done rule too. */
.mrs-ingredients .mrs-item.is-done .mrs-item-text {
	opacity: 0.55;
	text-decoration: line-through;
	text-decoration-color: var(--mrs-line-strong);
}

.mrs-ingredients .mrs-item:has(.mrs-check:checked) .mrs-item-text {
	opacity: 0.55;
	text-decoration: line-through;
	text-decoration-color: var(--mrs-line-strong);
}

/* Step numbers: the same black-bordered squares; done = white number on primary. */
.mrs-steps {
	counter-reset: mrs-step;
}

.mrs-card .mrs-step {
	counter-increment: mrs-step;
	padding-block: 0.9em;
	transition: background-color 0.2s, padding 0.2s;
}

.mrs-card .mrs-step-num {
	flex: 0 0 2em;
	display: inline-grid;
	place-content: center;
	width: 2em;
	height: 2em;
	aspect-ratio: 1;
	font-size: 0.9em;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: inherit;
	background: transparent;
	border: 2px solid var(--mrs-box-border);
	border-radius: 0;
	transition: color 0.15s, background-color 0.15s;
}

.mrs-card .mrs-step-num::before {
	content: counter(mrs-step);
}

.mrs-card .mrs-step-check:checked + .mrs-step-num {
	color: var(--mrs-on-accent);
	background: var(--mrs-accent);
}

.mrs-card .mrs-step-check:focus-visible + .mrs-step-num {
	outline: 2px solid var(--mrs-accent);
	outline-offset: 2px;
}

.mrs-card .mrs-step .mrs-item-text {
	padding-top: 0.2em;
}

.mrs-steps .mrs-item.is-done .mrs-item-text {
	opacity: 0.5;
}

.mrs-steps .mrs-item:has(.mrs-step-check:checked) .mrs-item-text {
	opacity: 0.5;
}

/* Cook mode: larger step text and the next unfinished step highlighted. */
.mrs-card.is-cook-mode .mrs-steps .mrs-item-text {
	font-size: 1.125em;
}

.mrs-card.is-cook-mode .mrs-step.is-current {
	padding-inline: 0.75em;
	background: var(--mrs-accent-tint);
	border-bottom-color: transparent;
}

/* ---------- Notes ---------- */

.mrs-card .mrs-notes {
	padding: 1.1em 1.4em;
	background: var(--mrs-tint);
	border-left: 3px solid var(--mrs-accent);
	border-radius: 0 var(--mrs-radius) var(--mrs-radius) 0;
}

.mrs-card .mrs-notes .mrs-section-title::after {
	display: none;
}

.mrs-card .mrs-notes > :last-child {
	margin-bottom: 0;
}

/* ---------- Nutrition panel (table collapsed by default) + disclaimer ---------- */

.mrs-card .mrs-panel {
	overflow: hidden;
	background: var(--mrs-tint);
	border: 1px solid var(--mrs-line);
	border-radius: calc(var(--mrs-radius) * 1.5);
	scroll-margin-top: 6rem; /* Clear sticky headers when jumped to. */
}

.mrs-card .mrs-nutrition summary {
	display: flex;
	align-items: center;
	gap: 1em;
	padding: 1.1em 1.4em;
	list-style: none;
	cursor: pointer;
}

.mrs-card .mrs-panel-heading {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
}

.mrs-card .mrs-panel-title {
	margin: 0;
}

.mrs-card .mrs-nutrition summary::-webkit-details-marker {
	display: none;
}

.mrs-card .mrs-nutrition summary::after {
	content: "";
	align-self: center;
	width: 0.55em;
	height: 0.55em;
	margin-left: auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-25%) rotate(45deg);
	transition: transform 0.2s;
}

.mrs-card .mrs-nutrition[open] summary::after {
	transform: translateY(25%) rotate(-135deg);
}

.mrs-card .mrs-nutrition summary:focus-visible {
	outline: 2px solid var(--mrs-accent);
	outline-offset: 2px;
}

.mrs-card .mrs-panel-hint {
	font-size: 0.85em;
	color: var(--mrs-muted);
}

.mrs-card .mrs-panel-body {
	padding: 0 1.4em 1.4em;
}

.mrs-card .mrs-nutrition[open] .mrs-panel-body {
	animation: mrs-reveal 0.25s ease-out;
}

/* Stylised table: primary header row, striped rows, rounded frame. */
.mrs-card .mrs-nutrition-table {
	width: 100%;
	margin: 0;
	overflow: hidden;
	font-size: 0.95em;
	background: var(--mrs-card-bg);
	border: 1px solid var(--mrs-line);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--mrs-radius);
}

.mrs-card .mrs-nutrition-table th,
.mrs-card .mrs-nutrition-table td {
	padding: 0.65em 1.1em;
	text-align: left;
	background: none;
	border: 0;
	border-top: 1px solid var(--mrs-line);
}

.mrs-card .mrs-nutrition-table thead th {
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mrs-on-accent);
	background: var(--mrs-accent);
	border-top: 0;
}

.mrs-card .mrs-nutrition-table tbody tr:nth-child(even) > * {
	background: var(--mrs-tint);
}

.mrs-card .mrs-nutrition-table tbody th {
	font-weight: 600;
}

.mrs-card .mrs-nutrition-table td,
.mrs-card .mrs-nutrition-table thead th:last-child {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.mrs-card .mrs-nutrition-table .is-sub th {
	padding-left: 2.2em;
	font-weight: 400;
}

@keyframes mrs-reveal {
	from {
		opacity: 0;
		transform: translateY(-0.4em);
	}
}

/* Small print: inside the nutrition panel, or on its own at the bottom. */
.mrs-card .mrs-disclaimer {
	padding-top: 0.9em;
	font-size: 0.75em;
	line-height: 1.55;
	color: var(--mrs-muted);
	border-top: 1px solid var(--mrs-line);
}

.mrs-card .mrs-panel .mrs-disclaimer {
	padding: 1em 1.85em 1.2em; /* 1.4em of the panel's 1em text, at 0.75em. */
	background: var(--mrs-card-bg);
}

.mrs-card .mrs-disclaimer-title {
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mrs-card .mrs-disclaimer p {
	margin: 0 0 0.5em;
}

/* ---------- Photo gallery carousel ---------- */

.mrs-card .mrs-gallery {
	margin: 0;
}

.mrs-card .mrs-gallery-viewport {
	position: relative;
	overflow: hidden;
	background: var(--mrs-card-bg);
	border: 3px solid var(--mrs-box-border);
	border-radius: var(--mrs-radius);
}

.mrs-card .mrs-gallery-track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.mrs-card .mrs-gallery-track::-webkit-scrollbar {
	display: none;
}

.mrs-card .mrs-gallery-track:focus-visible {
	outline: 3px solid var(--mrs-accent);
	outline-offset: -6px;
}

.mrs-card .mrs-gallery-slide {
	flex: 0 0 100%;
	margin: 0;
	padding: 0;
	aspect-ratio: 3 / 2;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.mrs-card .mrs-gallery-slide::before {
	content: none;
}

.mrs-card .mrs-gallery-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.mrs-card .mrs-gallery-nav {
	position: absolute;
	top: 50%;
	display: inline-grid;
	place-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0;
	color: #000;
	background: #fff;
	border: 2px solid #000;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	transform: translateY(-50%);
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, opacity 0.15s;
}

.mrs-card .mrs-gallery-nav[hidden] {
	display: none;
}

.mrs-card .mrs-gallery-prev {
	left: 0.75rem;
}

.mrs-card .mrs-gallery-next {
	right: 0.75rem;
}

.mrs-card .mrs-gallery-nav:hover,
.mrs-card .mrs-gallery-nav:focus-visible {
	color: var(--mrs-on-accent);
	background: var(--mrs-accent);
}

.mrs-card .mrs-gallery-nav:focus-visible {
	outline: 3px solid var(--mrs-accent);
	outline-offset: 2px;
}

.mrs-card .mrs-gallery-nav:disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.mrs-card .mrs-gallery-nav svg {
	width: 1.25rem;
	height: 1.25rem;
}

.mrs-card .mrs-gallery-dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.mrs-card .mrs-gallery-dots[hidden] {
	display: none;
}

.mrs-card .mrs-gallery-dot {
	width: 0.8rem;
	height: 0.8rem;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 2px solid #000;
	border-radius: 50%;
	cursor: pointer;
}

.mrs-card .mrs-gallery-dot[aria-current="true"] {
	background: var(--mrs-accent);
	border-color: #000;
}

.mrs-card .mrs-gallery-dot:focus-visible {
	outline: 2px solid var(--mrs-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.mrs-card .mrs-gallery-track {
		scroll-behavior: auto;
	}
}

/* ---------- Newsletter: primary-colour band, white text ---------- */

.mrs-card .mrs-newsletter {
	--mrs-nl-edge: color-mix(in srgb, var(--mrs-accent) 65%, #000);
	padding: calc(var(--mrs-space) * 1.4) calc(var(--mrs-space) * 1.25);
	text-align: left;
	color: var(--mrs-on-accent);
	background: var(--mrs-accent);
	border: 3px solid var(--mrs-nl-edge);
	border-radius: calc(var(--mrs-radius) * 2);
	box-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.45);
	scroll-margin-top: 6rem;
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.mrs-card .mrs-newsletter {
		--mrs-nl-edge: rgba(0, 0, 0, 0.35);
	}
}

.mrs-card .mrs-newsletter-title {
	margin: 0 0 0.4em;
	font-family: var(--headingsfontfamily, inherit);
	font-size: clamp(1.5rem, 3.6vw, 2rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: inherit;
}

.mrs-card .mrs-newsletter-text {
	max-width: 44em;
	margin: 0 0 1.1em;
	font-size: 1.05em;
	line-height: 1.65;
	color: inherit;
}

.mrs-card .mrs-newsletter-form {
	margin: 0;
}

.mrs-card .mrs-newsletter-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1em 1.25em;
}

.mrs-card .mrs-newsletter-field {
	flex: 1 1 14em;
	min-width: 0;
	margin: 0;
}

.mrs-card .mrs-newsletter-label {
	display: block;
	margin: 0 0 0.45em;
	font-family: var(--headingsfontfamily, inherit);
	font-size: 0.95em;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: inherit;
}

.mrs-card .mrs-newsletter-input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 3.1em;
	margin: 0;
	padding: 0.6em 1.25em;
	font: inherit;
	color: #111;
	background: #fff;
	border: 2px solid var(--mrs-nl-edge);
	border-radius: 999px;
	box-shadow: none;
}

.mrs-card .mrs-newsletter-input::placeholder {
	color: #6b6b6b;
	opacity: 1;
}

.mrs-card .mrs-newsletter-input:focus {
	border-color: #000;
	outline: 3px solid #fff;
	outline-offset: 1px;
}

.mrs-card .mrs-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.65em;
	margin: 1.1em 0 0;
	font-size: 0.85em;
	line-height: 1.45;
	color: inherit;
	cursor: pointer;
}

/* White squares with a black tick fill on the coloured band. */
.mrs-card .mrs-consent .mrs-check {
	flex-basis: 1.4em;
	width: 1.4em;
	height: 1.4em;
	margin-top: 0;
	background: #fff;
	border-color: #000;
}

.mrs-card .mrs-consent .mrs-check:checked {
	background: #000;
}

.mrs-card .mrs-consent .mrs-check:focus-visible {
	outline-color: #fff;
}

.mrs-card .mrs-consent a {
	color: inherit;
	text-decoration: underline;
}

.mrs-card .mrs-newsletter-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 1.4em 0 0;
	padding: 0.8em 1.6em;
	font-family: var(--headingsfontfamily, inherit);
	font-size: 1.05em;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	background: #000;
	border: 0;
	border-radius: 999px;
}

.mrs-card .mrs-newsletter-submit:hover,
.mrs-card .mrs-newsletter-submit:focus-visible {
	color: #fff;
	background: #222;
}

.mrs-card .mrs-newsletter-submit:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

.mrs-card .mrs-newsletter-status {
	margin: 1em 0 0;
	font-weight: 700;
}

.mrs-card .mrs-newsletter-status:empty {
	display: none;
}

.mrs-card .mrs-newsletter-form.is-success .mrs-newsletter-status,
.mrs-card .mrs-newsletter-form.is-error .mrs-newsletter-status {
	padding: 0.7em 1em;
	color: #111;
	background: #fff;
	border-left: 6px solid #1e7d32;
}

.mrs-card .mrs-newsletter-form.is-error .mrs-newsletter-status {
	border-left-color: #b3261e;
}

.mrs-card .mrs-newsletter-form.is-busy button {
	opacity: 0.6;
	pointer-events: none;
}

.mrs-card .mrs-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Pinterest: large pill below the card ---------- */

.mrs-card .mrs-pin-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75em 1.25em;
	padding: calc(var(--mrs-space) * 0.9) var(--mrs-space);
	background: color-mix(in srgb, #e60023 7%, var(--mrs-card-bg));
	border: 1px solid color-mix(in srgb, #e60023 28%, transparent);
	border-radius: calc(var(--mrs-radius) * 1.5);
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.mrs-card .mrs-pin-cta {
		background: #fff1f3;
		border-color: #f5b3be;
	}
}

.mrs-card .mrs-pin-text {
	flex: 1 1 12em;
	margin: 0;
	font-family: var(--headingsfontfamily, inherit);
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1.3;
}

.mrs-pin-cta .mrs-pin-button {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.7em 1.4em;
	font: inherit;
	font-size: 0.95em;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	text-decoration: none;
	background: #e60023;
	border-radius: 999px;
	transition: background-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.mrs-pin-cta .mrs-pin-button:hover,
.mrs-pin-cta .mrs-pin-button:focus-visible {
	color: #fff;
	background: #ad081b;
	box-shadow: 0 6px 16px rgba(230, 0, 35, 0.3);
	transform: translateY(-1px);
}

.mrs-pin-cta .mrs-pin-button:focus-visible {
	outline: 3px solid #ad081b;
	outline-offset: 3px;
}

.mrs-pin-cta svg {
	flex: none;
	width: 1.2em;
	height: 1.2em;
}

.mrs-pin-cta .mrs-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.mrs-pin-cta .mrs-pin-button {
		transition: none;
		transform: none;
	}
}

.mrs-card .mrs-disclaimer > :last-child {
	margin-bottom: 0;
}

/* ---------- Stat tile icons and net carbs ---------- */

.mrs-card .mrs-meta-icon {
	display: block;
	width: 1.5em;
	height: 1.5em;
	margin: 0 auto 0.4em;
	color: var(--mrs-accent);
}

.mrs-card .mrs-meta-net_carbs {
	background: var(--mrs-accent-tint);
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.mrs-card .mrs-meta-net_carbs {
		background: var(--mrs-tint);
	}
}

/* ---------- Ingredients header: servings scaler and units ---------- */

.mrs-card .mrs-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5em 1em;
	margin-bottom: 0.75em;
}

.mrs-card .mrs-section-head .mrs-section-title {
	margin-bottom: 0;
}

.mrs-card .mrs-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	font-size: 0.875em;
}

.mrs-card .mrs-tools[hidden],
.mrs-card .mrs-scaler[hidden],
.mrs-card .mrs-units[hidden] {
	display: none;
}

.mrs-card .mrs-scaler,
.mrs-card .mrs-units {
	display: inline-flex;
	align-items: stretch;
	overflow: hidden;
	border: 2px solid #000;
	border-radius: 999px;
}

.mrs-card .mrs-scaler-btn,
.mrs-card .mrs-units-btn {
	margin: 0;
	padding: 0.4em 0.85em;
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	color: inherit;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
}

.mrs-card .mrs-scaler-btn {
	min-width: 2.4em;
	font-size: 1.1em;
}

.mrs-card .mrs-scaler-btn:hover,
.mrs-card .mrs-units-btn:hover {
	background: var(--mrs-tint);
}

.mrs-card .mrs-scaler-value {
	display: inline-grid;
	place-content: center;
	min-width: 2.6em;
	padding: 0 0.4em;
	font-weight: 800;
	border-inline: 2px solid #000;
}

.mrs-card .mrs-units-btn + .mrs-units-btn {
	border-left: 2px solid #000;
}

.mrs-card .mrs-units-btn[aria-pressed="true"] {
	color: var(--mrs-on-accent);
	background: var(--mrs-accent);
}

.mrs-card .mrs-scaler-btn:focus-visible,
.mrs-card .mrs-units-btn:focus-visible {
	outline: 3px solid var(--mrs-accent);
	outline-offset: -3px;
}

.mrs-card .mrs-qty {
	font-weight: 700;
}

/* Clearly separated ingredient groups ("Batter" / "To serve"). */
.mrs-card .mrs-group-title {
	margin-top: 1.6em;
	padding-left: 0.6em;
	border-left: 3px solid var(--mrs-accent);
}

/* ---------- Equipment and substitutions ---------- */

.mrs-card .mrs-plain-item {
	display: flex;
	align-items: baseline;
	gap: 0.75em;
}

.mrs-card .mrs-plain-item::before {
	content: "";
	flex: none;
	width: 0.45em;
	height: 0.45em;
	background: var(--mrs-accent);
	border-radius: 50%;
	transform: translateY(-0.1em);
}

.mrs-card .mrs-plain-item a,
.mrs-card .mrs-swap a {
	color: var(--mrs-accent);
}

.mrs-card .mrs-swap {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25em 0.6em;
}

.mrs-card .mrs-swap-from {
	font-weight: 700;
}

.mrs-card .mrs-swap-arrow {
	color: var(--mrs-accent);
	font-weight: 700;
}

/* ---------- Steps: names, timers and photos ---------- */

.mrs-card .mrs-step-name {
	font-weight: 800;
}

.mrs-card .mrs-step-extras {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
	margin: 0.5em 0 0 calc(2em + 0.85em);
}

.mrs-card .mrs-timers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
}

.mrs-card .mrs-timer {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	margin: 0;
	padding: 0.3em 0.8em;
	font: inherit;
	font-size: 0.8em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	color: inherit;
	background: transparent;
	border: 2px solid #000;
	border-radius: 999px;
	box-shadow: none;
	cursor: pointer;
}

.mrs-card .mrs-timer[hidden] {
	display: none;
}

.mrs-card .mrs-timer:hover {
	background: var(--mrs-tint);
}

.mrs-card .mrs-timer:focus-visible {
	outline: 3px solid var(--mrs-accent);
	outline-offset: 2px;
}

.mrs-card .mrs-timer.is-running {
	color: var(--mrs-on-accent);
	background: var(--mrs-accent);
	border-color: var(--mrs-accent);
}

.mrs-card .mrs-timer.is-finished {
	color: #fff;
	background: #b3261e;
	border-color: #b3261e;
	animation: mrs-pulse 1s ease-in-out infinite;
}

@keyframes mrs-pulse {
	50% {
		transform: scale(1.06);
	}
}

.mrs-card .mrs-step-img {
	display: block;
	width: 100%;
	max-width: 32rem;
	height: auto;
	border: 2px solid #000;
	border-radius: var(--mrs-radius);
}

/* ---------- Video ---------- */

.mrs-card .mrs-video {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: #000;
	border: 3px solid var(--mrs-box-border);
	border-radius: var(--mrs-radius);
}

.mrs-card .mrs-video iframe,
.mrs-card .mrs-video video,
.mrs-card .mrs-video-play,
.mrs-card .mrs-video-play img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	border: 0;
}

.mrs-card .mrs-video-play img {
	object-fit: cover;
}

.mrs-card .mrs-video-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-content: center;
	width: 4rem;
	height: 4rem;
	color: #fff;
	background: rgba(0, 0, 0, 0.7);
	border: 3px solid #fff;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: background-color 0.15s;
}

.mrs-card .mrs-video-play:hover .mrs-video-icon,
.mrs-card .mrs-video-play:focus-visible .mrs-video-icon {
	background: var(--mrs-accent);
}

.mrs-card .mrs-video-play:focus-visible {
	outline: 3px solid var(--mrs-accent);
	outline-offset: -6px;
}

/* ---------- Print options ---------- */

.mrs-card .mrs-print-menu {
	position: relative;
}

.mrs-card .mrs-print-options {
	position: absolute;
	z-index: 5;
	top: calc(100% + 0.5em);
	left: 50%;
	display: flex;
	flex-direction: column;
	gap: 0.6em;
	min-width: 12rem;
	padding: 1em;
	font-size: 0.9em;
	text-align: left;
	color: #111;
	background: #fff;
	border: 2px solid #000;
	border-radius: var(--mrs-radius);
	box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.35);
	transform: translateX(-50%);
}

.mrs-card .mrs-print-options[hidden] {
	display: none;
}

.mrs-card .mrs-print-option {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin: 0;
	cursor: pointer;
}

.mrs-card .mrs-print-options .mrs-btn {
	justify-content: center;
	margin-top: 0.25em;
}

/* QR code and short link: printouts only. */
.mrs-card .mrs-print-footer {
	display: none;
}

/* ---------- Nutrition: calories and net carbs always visible ---------- */

.mrs-card .mrs-nutrition summary {
	flex-wrap: wrap;
}

.mrs-card .mrs-panel-key {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-left: auto;
}

.mrs-card .mrs-nutrition summary:has(.mrs-panel-key)::after {
	margin-left: 0;
}

.mrs-card .mrs-key-stat {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35em;
	padding: 0.35em 0.8em;
	font-size: 0.9em;
	background: var(--mrs-card-bg);
	border: 2px solid #000;
	border-radius: 999px;
}

.mrs-card .mrs-key-label {
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mrs-muted);
}

.mrs-card .mrs-nutrition-table .is-key th,
.mrs-card .mrs-nutrition-table .is-key td {
	font-weight: 800;
	background: var(--mrs-accent-tint);
}

/* ---------- Jump to Recipe and sticky bar (outside the card) ---------- */

.mrs-jump-wrap,
.mrs-sticky {
	--mrs-accent: var(--mrs-accent-user, var(--nv-primary-accent, var(--wp--preset--color--primary, currentColor)));
	--mrs-on-accent: #fff;
}

.mrs-jump-wrap {
	margin: 0 0 1.5em;
}

.mrs-jump-to-recipe,
.mrs-sticky-jump {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.6em 1.3em;
	font-weight: 700;
	line-height: 1.2;
	color: var(--mrs-on-accent) !important;
	text-decoration: none !important;
	background: var(--mrs-accent);
	border: 2px solid var(--mrs-accent);
	border-radius: 999px;
	transition: background-color 0.15s;
}

.mrs-jump-to-recipe:hover,
.mrs-sticky-jump:hover {
	background: color-mix(in srgb, var(--mrs-accent) 82%, #000);
}

.mrs-jump-to-recipe:focus-visible,
.mrs-sticky-jump:focus-visible,
.mrs-sticky-close:focus-visible {
	outline: 3px solid var(--mrs-accent);
	outline-offset: 3px;
}

.mrs-sticky {
	position: fixed;
	z-index: 9990;
	right: max(1rem, env(safe-area-inset-right));
	bottom: max(1rem, env(safe-area-inset-bottom));
	left: max(1rem, env(safe-area-inset-left));
	display: flex;
	align-items: center;
	gap: 0.75em;
	max-width: 40rem;
	margin: 0 auto;
	padding: 0.5em 0.5em 0.5em 1.1em;
	font-size: 0.9375rem;
	color: #111;
	background: #fff;
	border: 2px solid #000;
	border-radius: 999px;
	box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.45);
	animation: mrs-rise 0.2s ease-out;
}

.mrs-sticky[hidden] {
	display: none;
}

.mrs-sticky-title {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	font-weight: 700;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.mrs-sticky-jump {
	flex: none;
	padding: 0.5em 1.1em;
	font-size: 0.9em;
}

.mrs-sticky-close {
	display: grid;
	flex: none;
	place-content: center;
	width: 2.2em;
	height: 2.2em;
	margin: 0;
	padding: 0;
	color: inherit;
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.mrs-sticky-close:hover {
	background: rgba(0, 0, 0, 0.08);
}

.mrs-sticky .mrs-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@keyframes mrs-rise {
	from {
		opacity: 0;
		transform: translateY(1rem);
	}
}

.mrs-card {
	scroll-margin-top: 5rem; /* Clear sticky headers on Jump to Recipe. */
}

/* ---------- Dark mode (opt-in: Settings → Recipe Styles) ---------- */

@media (prefers-color-scheme: dark) {
	.mrs-card.mrs-dark-auto {
		--mrs-card-bg: #17181c;
		--mrs-box-border: #f2f2f2;
		color: #ececf0;
		background: var(--mrs-surface);
	}

	.mrs-card.mrs-dark-auto .mrs-check,
	.mrs-card.mrs-dark-auto .mrs-step-num,
	.mrs-card.mrs-dark-auto .mrs-scaler,
	.mrs-card.mrs-dark-auto .mrs-units,
	.mrs-card.mrs-dark-auto .mrs-scaler-value,
	.mrs-card.mrs-dark-auto .mrs-units-btn + .mrs-units-btn,
	.mrs-card.mrs-dark-auto .mrs-timer,
	.mrs-card.mrs-dark-auto .mrs-key-stat,
	.mrs-card.mrs-dark-auto .mrs-step-img {
		border-color: #f2f2f2;
	}
}

/* ---------- Accessibility: a visible focus ring on anything focusable ---------- */

.mrs-card :focus-visible {
	outline: 2px solid var(--mrs-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.mrs-card .mrs-timer.is-finished,
	.mrs-sticky {
		animation: none;
	}
}

/* ---------- Utilities ---------- */

.mrs-card .mrs-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.mrs-card *,
	.mrs-card *::before,
	.mrs-card *::after {
		transition: none !important;
		animation: none !important;
	}
}