/**
 * ND Recipe composition — faithful port of the recovered reference source.
 *
 * PRESENTATION AUTHORITY
 * ----------------------
 * Ported from `visual-reference-build/assets/js/recipe.jsx` + the recovered
 * design tokens. These numbers are NOT approximations and must not be
 * "tidied": they are the authored design mathematics of the approved CENTER
 * Recipe.
 *
 *   RecipeHero   grid     1.7fr 1fr        gap 40px
 *   gallery      repeat(4,1fr)             gap 8px   margin-top 8px
 *   rail         sticky top 128px, column, gap 16px
 *   stats        repeat(5,1fr)
 *   Description  1fr 2fr                   gap 48px
 *   Ingredients  5fr 7fr                   gap 56px
 *   steps        repeat(3,1fr) gap 24px
 *   nutrition    repeat(4,1fr) gap 12px
 *   CTA          1.4fr 1fr                 gap 32px
 *
 * CANVAS
 * ------
 * `--nd-page-max: 1440px` (locked decision) with the recovered
 * `--nd-gutter: clamp(20px, 4vw, 64px)`. The effective content column is
 * naturally narrower than 1440px after gutters, which reconciles the
 * 1200–1320px figure quoted in the written brief.
 *
 * BREAKPOINTS (recovered specification)
 * -------------------------------------
 *   >= 1200px   full desktop composition, rail beside hero
 *   900-1199px  rail moves BELOW the upper content (never squeezed)
 *   < 900px     tablet/narrow composition
 *
 * Every selector is scoped to `.nd-recipe` / `.nd-rail` so nothing leaks
 * into Listeo, WooCommerce or Dokan.
 */

/* ============================================================================
   Identity + canvas
   ============================================================================ */

.nd-recipe.nd-recipe--approved {
	/* Locked canvas (decision: 1440px, not 1320 or 1600). */
	max-width: var(--nd-page-max, 1440px);
	margin: 0 auto;
	padding: 0 var(--nd-gutter, clamp(20px, 4vw, 64px)) 72px;
	color: var(--nd-ink);
	font-family: var(--nd-font-sans, "Geist", -apple-system, "Helvetica Neue", Arial, sans-serif);
}

/* The recovered source opens the page with a breadcrumb row. */
.nd-recipe .nd-recipe-breadcrumbs {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 20px 0 0;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nd-muted);
}

.nd-recipe .nd-recipe-breadcrumbs a:hover { color: var(--nd-ink); }
.nd-recipe .nd-recipe-breadcrumbs em { font-style: normal; opacity: 0.5; }
.nd-recipe .nd-recipe-breadcrumbs .is-current { color: var(--nd-ink); }

/* Row holding the eyebrow + the single action set. */
.nd-recipe .nd-recipe-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	padding: 24px 0 8px;
}

.nd-recipe .nd-recipe-head__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

/* ============================================================================
   Hero + rail — the authored 1.7fr / 1fr split
   ============================================================================ */

.nd-recipe .nd-recipe-columns {
	padding: 16px 0 32px;
	display: grid;
	grid-template-columns: minmax(0, 2.25fr) minmax(320px, 0.75fr);
	gap: 40px;
	align-items: start;
}

.nd-recipe .nd-recipe-columns--no-rail {
	grid-template-columns: 1fr;
}

.nd-recipe .nd-recipe-columns__main { min-width: 0; }
.nd-recipe .nd-recipe-hero__main { min-width: 0; }

/* Hero media. The recovered source uses 5/4. */
.nd-recipe .nd-recipe-hero-media {
	position: relative;
	aspect-ratio: 5 / 4;
	overflow: hidden;
	background: var(--nd-stone);
}

.nd-recipe .nd-recipe-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.nd-recipe .nd-recipe-hero-play {
	position: absolute;
	left: 24px;
	bottom: 24px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	background: var(--nd-ink);
	color: var(--nd-ivory);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
}

.nd-recipe .nd-recipe-hero-play:hover { background: var(--nd-champagne); color: var(--nd-ink); }

/* Gallery strip — repeat(4,1fr), gap 8px, margin-top 8px. */
.nd-recipe .nd-recipe-gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-top: 8px;
}

.nd-recipe .nd-recipe-gallery__item {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--nd-stone);
}

.nd-recipe .nd-recipe-gallery__item.is-active { outline: 2px solid var(--nd-ink); outline-offset: -2px; }

.nd-recipe .nd-recipe-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Title + deck — recovered clamp + 19px deck, max-width 640. */
.nd-recipe .nd-recipe-title {
	font-family: var(--nd-font-display, "Fraunces", Georgia, serif);
	font-weight: 500;
	font-size: clamp(32px, 3.6vw, 52px);
	line-height: 1.05;
	letter-spacing: -0.015em;
	margin: 32px 0 12px;
}

.nd-recipe .nd-recipe-dek {
	font-family: var(--nd-font-serif, "Newsreader", Georgia, serif);
	font-size: 19px;
	line-height: 1.55;
	margin: 0 0 20px;
	max-width: 640px;
	color: var(--nd-soft-ink);
}

/* Creator + rating row. */
.nd-recipe .nd-recipe-byline-row {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.nd-recipe .nd-recipe-creator {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}

.nd-recipe .nd-recipe-creator img,
.nd-recipe .nd-recipe-creator__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.nd-recipe .nd-recipe-byline {
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nd-muted);
	margin-bottom: 2px;
}

.nd-recipe .nd-recipe-creator__name {
	font-family: var(--nd-font-display, "Fraunces", Georgia, serif);
	font-size: 17px;
	color: var(--nd-ink);
}

.nd-recipe .nd-recipe-rating-block {
	border-left: 1px solid var(--nd-hairline-strong);
	padding-left: 24px;
}

/* Dietary tags. */
.nd-recipe .nd-recipe-tags {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ============================================================================
   Contextual rail
   ============================================================================ */

.nd-recipe .nd-rail {
	position: sticky;
	top: 128px;
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.nd-recipe .nd-rail__block {
	padding: 20px;
	background: var(--nd-ivory);
	border: 1px solid var(--nd-hairline);
}

/* Media-led modules (Learn It Live) run edge to edge. */
.nd-recipe .nd-rail__block--flush { padding: 0; overflow: hidden; }
.nd-recipe .nd-rail__block--flush .nd-rail__body { padding: 18px; }

/* The Advantage module is the recovered dark ink block. */
.nd-recipe .nd-rail__block--advantage {
	background: var(--nd-ink);
	color: var(--nd-ivory);
	border-color: var(--nd-ink);
}

.nd-recipe .nd-rail__eyebrow {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--nd-champagne);
	margin: 0 0 14px;
}

.nd-recipe .nd-rail__block--advantage .nd-rail__eyebrow { color: var(--nd-champagne-lt); }

/* "Learn It Live" is the recovered plum eyebrow (inline in the JSX source). */
.nd-recipe .nd-rail__eyebrow--plum { color: var(--nd-plum); }

.nd-recipe .nd-rail__title {
	font-family: var(--nd-font-display, "Fraunces", Georgia, serif);
	font-size: 18px;
	margin: 0 0 4px;
}

.nd-recipe .nd-rail__note {
	font-family: var(--nd-font-serif, "Newsreader", Georgia, serif);
	font-style: italic;
	font-size: 13px;
	color: var(--nd-soft-ink);
	margin: 0 0 12px;
}

/* Segmented Ingredients / Tools / Extras control. */
.nd-recipe .nd-rail__tabs {
	display: flex;
	gap: 4px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--nd-hairline);
}

.nd-recipe .nd-rail__tabs a {
	padding: 8px 12px;
	border: none;
	background: transparent;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nd-muted);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	text-decoration: none;
}

.nd-recipe .nd-rail__tabs a.is-active {
	color: var(--nd-ink);
	border-bottom-color: var(--nd-ink);
}

/* Product grid inside the rail. */
.nd-recipe .nd-rail__products {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.nd-recipe .nd-rail__product {
	background: var(--nd-linen);
	padding: 10px;
}

.nd-recipe .nd-rail__product-media {
	aspect-ratio: 1;
	overflow: hidden;
	margin-bottom: 8px;
	background: var(--nd-ivory);
}

.nd-recipe .nd-rail__product-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.nd-recipe .nd-rail__product-name {
	font-size: 12px;
	line-height: 1.3;
	margin-bottom: 6px;
	font-weight: 500;
}

.nd-recipe .nd-rail__product-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.nd-recipe .nd-rail__price {
	font-size: 15px;
	font-weight: 600;
}

/* Partner row — thumb, name, place, chevron. */
.nd-recipe .nd-rail__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--nd-hairline);
	text-decoration: none;
	color: inherit;
}

.nd-recipe .nd-rail__row img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	display: block;
}

.nd-recipe .nd-rail__row-name { font-size: 13px; font-weight: 500; }
.nd-recipe .nd-rail__row-meta { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--nd-muted); }
.nd-recipe .nd-rail__row-arrow { margin-left: auto; color: var(--nd-champagne); }

/* Advantage bullet list. */
.nd-recipe .nd-rail__list {
	list-style: none;
	padding: 0;
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.8;
	color: var(--nd-champagne-lt);
}

.nd-recipe .nd-rail__list li { display: flex; gap: 8px; }

/* ============================================================================
   Body — sub-tab bar, stats, Description, workspace
   ============================================================================ */

.nd-recipe .nd-recipe-tabs {
	display: flex;
	gap: 0;
	background: var(--nd-linen);
	padding: 4px;
	border: 1px solid var(--nd-hairline);
	margin-bottom: 32px;
	overflow-x: auto;
}

.nd-recipe .nd-recipe-tabs a {
	flex: 1;
	padding: 12px;
	text-align: center;
	white-space: nowrap;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nd-soft-ink);
	text-decoration: none;
}

.nd-recipe .nd-recipe-tabs a.is-active { background: var(--nd-ink); color: var(--nd-ivory); }

/* Stats — repeat(5,1fr), generous editorial padding. */
.nd-recipe .nd-recipe-stats {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	border: 1px solid var(--nd-hairline);
	margin-bottom: 56px;
}

.nd-recipe .nd-recipe-stats > div {
	padding: 28px 20px;
	text-align: center;
	border-right: 1px solid var(--nd-hairline);
}

.nd-recipe .nd-recipe-stats > div:last-child { border-right: 0; }

.nd-recipe .nd-recipe-stats .nd-stat-value {
	font-family: var(--nd-font-display, "Fraunces", Georgia, serif);
	font-size: 32px;
	letter-spacing: -0.01em;
}

/* Description — 1fr 2fr, gap 48px. */
.nd-recipe .nd-recipe-description {
	display: block;
	margin-bottom: 48px;
}

.nd-recipe .nd-recipe-description h2 {
	font-family: var(--nd-font-display, "Fraunces", Georgia, serif);
	font-weight: 500;
	font-size: 36px;
	letter-spacing: -0.015em;
	margin: 0;
}

.nd-recipe .nd-recipe-description__copy {
	font-family: var(--nd-font-serif, "Newsreader", Georgia, serif);
	font-size: 20px;
	line-height: 1.55;
	margin: 0;
	max-width: none;
	color: var(--nd-soft-ink);
}

/* Workspace — the authored 5fr / 7fr, gap 56px. */
.nd-recipe .nd-recipe-workspace {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 56px;
	margin-bottom: 64px;
	align-items: start;
}

.nd-recipe .nd-recipe-section-title {
	font-family: var(--nd-font-display, "Fraunces", Georgia, serif);
	font-weight: 500;
	font-size: 36px;
	letter-spacing: -0.01em;
	margin: 0 0 20px;
}

.nd-recipe .nd-recipe-group-tabs {
	display: flex;
	gap: 6px;
	margin-bottom: 24px;
	flex-wrap: wrap;
}

.nd-recipe .nd-recipe-group-tabs a {
	padding: 10px 14px;
	border: 1px solid var(--nd-hairline-strong);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--nd-ink);
	text-decoration: none;
}

.nd-recipe .nd-recipe-group-tabs a.is-active {
	background: var(--nd-ink);
	border-color: var(--nd-ink);
	color: var(--nd-ivory);
}

.nd-recipe .nd-ingredient-group h3 {
	font-family: var(--nd-font-display, "Fraunces", Georgia, serif);
	font-weight: 500;
	font-size: 26px;
	letter-spacing: -0.01em;
	margin: 28px 0 16px;
}

.nd-recipe .nd-ingredient-checklist {
	list-style: none;
	padding: 0;
	margin: 0;
}

.nd-recipe .nd-ingredient-checklist li {
	display: flex;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--nd-hairline);
	align-items: center;
}

.nd-recipe .nd-ingredient-checklist label {
	display: flex;
	gap: 14px;
	align-items: center;
	font-family: var(--nd-font-sans, "Geist", Arial, sans-serif);
	font-size: 16px;
	line-height: 1.5;
	color: var(--nd-ink);
	cursor: pointer;
}

/* Shopping-list tick boxes. The recovered source hides the native control and
   draws a hairline square; the JS counts the sibling text of each `li > span`. */
.nd-recipe .nd-recipe-check {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1px solid var(--nd-hairline-strong);
	background: var(--nd-ivory);
	cursor: pointer;
	position: relative;
}

.nd-recipe .nd-recipe-check:checked {
	background: var(--nd-champagne);
	border-color: var(--nd-champagne);
}

.nd-recipe .nd-recipe-check:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 6px;
	height: 11px;
	border: solid var(--nd-ink);
	border-width: 0 1.6px 1.6px 0;
	transform: rotate(45deg);
}

.nd-recipe .nd-recipe-check:focus-visible {
	outline: 2px solid var(--nd-plum);
	outline-offset: 2px;
}

.nd-recipe .nd-recipe-inline-actions {
	margin-top: 28px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* Steps — bordered rows, 180px image column, numbered disc overlay. */
.nd-recipe .nd-instructions-list {
	display: flex;
	flex-direction: column;
	gap: 18px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.nd-recipe .nd-instruction-step {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 24px;
	padding: 16px;
	border: 1px solid var(--nd-hairline);
	background: var(--nd-ivory);
}

.nd-recipe .nd-instruction-step--text { grid-template-columns: 1fr; }

.nd-recipe .nd-instruction-step__image {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--nd-stone);
}

.nd-recipe .nd-instruction-step__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.nd-recipe .nd-instruction-step__number {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--nd-ink);
	color: var(--nd-champagne-lt);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--nd-font-display, "Fraunces", Georgia, serif);
	font-size: 16px;
	border: 2px solid var(--nd-ivory);
}

.nd-recipe .nd-instruction-step__body {
	padding: 6px 6px 6px 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.nd-recipe .nd-instruction-step__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 8px;
}

.nd-recipe .nd-instruction-step__head h3 {
	font-family: var(--nd-font-display, "Fraunces", Georgia, serif);
	font-weight: 500;
	font-size: 22px;
	letter-spacing: -0.01em;
	margin: 0;
}

.nd-recipe .nd-instruction-step__body p {
	font-family: var(--nd-font-serif, "Newsreader", Georgia, serif);
	font-size: 16px;
	line-height: 1.55;
	color: var(--nd-soft-ink);
	margin: 0;
}

/* ============================================================================
   Nutrition, Similar Recipes, closing bands
   ============================================================================ */

.nd-recipe .nd-nutrition { margin-bottom: 64px; }

.nd-recipe .nd-nutrition__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}

.nd-recipe .nd-nutrition__head h2 {
	font-family: var(--nd-font-display, "Fraunces", Georgia, serif);
	font-weight: 500;
	font-size: 32px;
	letter-spacing: -0.01em;
	margin: 0;
}

.nd-recipe .nd-nutrition__note {
	font-family: var(--nd-font-serif, "Newsreader", Georgia, serif);
	font-style: italic;
	font-size: 12px;
	color: var(--nd-muted);
	margin: 0;
}

.nd-recipe .nd-nutrition-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.nd-recipe .nd-nutrition-card {
	padding: 32px 24px;
	background: var(--nd-ivory);
	border: 1px solid var(--nd-hairline);
	text-align: center;
}

.nd-recipe .nd-nutrition-card strong {
	display: block;
	font-family: var(--nd-font-display, "Fraunces", Georgia, serif);
	font-weight: 500;
	font-size: 44px;
	letter-spacing: -0.015em;
	margin-top: 10px;
}

.nd-recipe .nd-similar-recipes__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.nd-recipe .nd-similar-recipes__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 24px;
	gap: 16px;
	flex-wrap: wrap;
}

.nd-recipe .nd-recipe-closing {
	padding-top: 32px;
	border-top: 1px solid var(--nd-hairline);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.nd-recipe .nd-recipe-closing__title {
	font-family: var(--nd-font-display, "Fraunces", Georgia, serif);
	font-size: 22px;
	margin-bottom: 4px;
}

.nd-recipe .nd-recipe-closing__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Final dark band — 1.4fr 1fr, gap 32px. */
.nd-recipe .nd-recipe-final-wrap {
	display: block;
	width: 100%;
}

/* The CTA eyebrow sits on ink, so it uses the light champagne ink. */
.nd-recipe .nd-eyebrow-lt { color: var(--nd-champagne-lt); }

.nd-recipe .nd-recipe-final {
	margin-top: 32px;
	background: var(--nd-ink);
	color: var(--nd-ivory);
	padding: clamp(32px, 4vw, 56px);
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 32px;
	align-items: center;
}

.nd-recipe .nd-recipe-final h2 {
	font-family: var(--nd-font-display, "Fraunces", Georgia, serif);
	font-weight: 500;
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.1;
	margin: 0 0 12px;
	color: var(--nd-ivory);
}

.nd-recipe .nd-recipe-final p {
	font-family: var(--nd-font-serif, "Newsreader", Georgia, serif);
	font-style: italic;
	font-size: 17px;
	color: var(--nd-champagne-lt);
	margin: 0;
	max-width: 560px;
}

.nd-recipe .nd-recipe-final__actions {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	flex-wrap: wrap;
}

/* ============================================================================
   Responsive — recovered specification
   ============================================================================ */

/* 900–1199px: the rail moves BELOW the upper content. Never squeeze it
   beside the Recipe, and never shrink Ingredients/Instructions to make
   room for it. */
@media (max-width: 1199px) {
	.nd-recipe .nd-recipe-columns {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.nd-recipe .nd-rail {
		position: static;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.nd-recipe .nd-recipe-description { gap: 32px; }
	.nd-recipe .nd-recipe-workspace { gap: 36px; }
}

/* < 900px: tablet / narrow composition. */
@media (max-width: 899px) {
	.nd-recipe .nd-recipe-stats { grid-template-columns: repeat(3, 1fr); }
	.nd-recipe .nd-recipe-stats > div:nth-child(3n) { border-right: 0; }
	.nd-recipe .nd-recipe-description { grid-template-columns: 1fr; gap: 20px; }
	.nd-recipe .nd-recipe-workspace { grid-template-columns: 1fr; gap: 36px; }
	.nd-recipe .nd-nutrition-grid { grid-template-columns: repeat(2, 1fr); }
	.nd-recipe .nd-similar-recipes__grid { grid-template-columns: repeat(2, 1fr); }
	.nd-recipe .nd-recipe-final { grid-template-columns: 1fr; }
	.nd-recipe .nd-recipe-final__actions { justify-content: flex-start; }
	.nd-recipe .nd-recipe-description h2 { font-size: 34px; }
	.nd-recipe .nd-recipe-section-title { font-size: 28px; }
}

/* Mobile: deliberate single column. */
@media (max-width: 640px) {
	.nd-recipe .nd-rail { grid-template-columns: 1fr; }
	.nd-recipe .nd-recipe-stats { grid-template-columns: repeat(2, 1fr); }
	.nd-recipe .nd-recipe-stats > div { border-right: 1px solid var(--nd-hairline); }
	.nd-recipe .nd-instruction-step { grid-template-columns: 1fr; }
	.nd-recipe .nd-nutrition-grid { grid-template-columns: repeat(2, 1fr); }
	.nd-recipe .nd-similar-recipes__grid { grid-template-columns: 1fr; }
	.nd-recipe .nd-recipe-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================================
   Rail containment + the helper output that lives inside the rail
   ============================================================================
   The rail is a 1fr column of the authored 1.7fr / 1fr hero grid. The global
   `.nd-rail` rule in the component stylesheet is a full-width page band
   (padding var(--nd-section-y) var(--nd-gutter), max-width 1560px), so it is
   neutralised here for the Recipe only.                                     */

.nd-recipe .nd-rail {
	padding: 0;
	max-width: none;
	margin: 0;
	background: transparent;
	border: 0;
}

/* Rail module card. Emitted as BOTH `.nd-rail-block` (the hook the frontend
   script wires its segmented control against) and `.nd-rail__block` (the
   presentation class used above). */
.nd-recipe .nd-rail-block {
	padding: 20px;
	background: var(--nd-ivory);
	border: 1px solid var(--nd-hairline);
}

.nd-recipe .nd-rail-block--flush { padding: 0; overflow: hidden; }

.nd-recipe .nd-rail-block--advantage {
	background: var(--nd-ink);
	border-color: var(--nd-ink);
}

/* Get What You Need — segmented control. Stays plain anchors without JS, so
   every real product group remains visible. */
.nd-recipe .nd-rail-block .nd-shop-tabs {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	margin: 0 0 16px;
	padding: 0 0 10px;
	border-bottom: 1px solid var(--nd-hairline);
}

.nd-recipe .nd-rail-block .nd-shop-tabs a {
	padding: 8px 12px;
	border: none;
	background: transparent;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nd-muted);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

.nd-recipe .nd-rail-block .nd-shop-tabs a.is-active {
	color: var(--nd-ink);
	border-bottom-color: var(--nd-ink);
}

.nd-recipe .nd-rail-block[data-nd-shop-tabs="on"] .nd-product-group { display: none; }
.nd-recipe .nd-rail-block[data-nd-shop-tabs="on"] .nd-product-group.is-active { display: block; }
.nd-recipe .nd-rail-block[data-nd-shop-tabs="on"] .nd-product-group .nd-related-heading { display: none; }

/* Product group inside the rail — the authored two-up linen cells. */
.nd-recipe .nd-rail-block .nd-related-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
}

.nd-recipe .nd-rail-block .nd-related-heading {
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--nd-muted);
	margin: 14px 0 8px;
	padding: 0;
	border: 0;
}

.nd-recipe .nd-rail-block .nd-product-group + .nd-product-group { margin-top: 14px; }

.nd-recipe .nd-rail-block .nd-product-card {
	display: flex;
	flex-direction: column;
	background: var(--nd-linen);
	border: 0;
	padding: 10px;
	height: 100%;
}

.nd-recipe .nd-rail-block .nd-related-card__image {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--nd-ivory);
	margin-bottom: 8px;
}

.nd-recipe .nd-rail-block .nd-related-card__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.nd-recipe .nd-rail-block .nd-product-card__seller {
	display: block;
	font-size: 9px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nd-muted);
	margin-bottom: 6px;
}

.nd-recipe .nd-rail-block .nd-product-card__title {
	display: block;
	font-size: 12px;
	line-height: 1.3;
	font-weight: 500;
	color: var(--nd-ink);
	margin-bottom: 6px;
}

.nd-recipe .nd-rail-block .nd-product-card__price {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: var(--nd-ink);
	margin-bottom: 6px;
}

.nd-recipe .nd-rail-block .nd-product-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 28px;
	padding: 6px 10px;
	background: var(--nd-champagne);
	border: 1px solid var(--nd-champagne);
	color: var(--nd-ink);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
}

.nd-recipe .nd-rail-block .nd-product-card__cta:hover {
	background: var(--nd-ink);
	border-color: var(--nd-ink);
	color: var(--nd-ivory);
}

/* Listing / recipe / creator blocks keep the rail's own rhythm. */
.nd-recipe .nd-rail-block .nd-rail-list { gap: 12px; }

.nd-recipe .nd-rail-block .nd-creator-block,
.nd-recipe .nd-rail-block .nd-related-block { margin: 0; }

/* ============================================================================
   Notes, reviews, disclosure
   ============================================================================ */

.nd-recipe .nd-recipe-notes {
	margin-bottom: 64px;
	padding-top: 32px;
	border-top: 1px solid var(--nd-hairline);
}

.nd-recipe .nd-recipe-notes h2 {
	font-family: var(--nd-font-display, "Fraunces", Georgia, serif);
	font-weight: 500;
	font-size: 32px;
	letter-spacing: -0.01em;
	margin: 0 0 16px;
}

.nd-recipe .nd-recipe-notes p {
	font-family: var(--nd-font-serif, "Newsreader", Georgia, serif);
	font-size: 18px;
	line-height: 1.6;
	color: var(--nd-soft-ink);
	margin: 0;
	max-width: 780px;
}

.nd-recipe .nd-recipe-reviews { margin-bottom: 64px; }

.nd-recipe .nd-recipe-reviews h2 {
	font-family: var(--nd-font-display, "Fraunces", Georgia, serif);
	font-weight: 500;
	font-size: 32px;
	letter-spacing: -0.01em;
	margin: 0 0 24px;
}

.nd-recipe .nd-disclosure {
	font-family: var(--nd-font-serif, "Newsreader", Georgia, serif);
	font-style: italic;
	font-size: 12px;
	color: var(--nd-muted);
	margin: 12px 0 0;
}

/* Recovered mobile/narrow additions for the body grid. */
@media (max-width: 899px) {
	.nd-recipe .nd-recipe-tabs { overflow-x: auto; }
	.nd-recipe .nd-recipe-tabs a { flex: 1 0 auto; }
	.nd-recipe .nd-rail-block .nd-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media print {
	.nd-recipe .nd-recipe-head__actions,
	.nd-recipe .nd-rail,
	.nd-recipe .nd-recipe-final,
	.nd-recipe .nd-recipe-tabs { display: none !important; }
}
/* ==============================================================
   ND RECIPE — GET WHAT YOU NEED / SHOPPING CAROUSEL
   ============================================================== */

.nd-recipe .nd-shopping-slider {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 12px;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	overscroll-behavior-inline: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 2px 2px 10px;
}

.nd-recipe .nd-shopping-slider::-webkit-scrollbar {
	display: none;
}

/* Each item stays contained instead of becoming one long narrow column. */
.nd-recipe .nd-shopping-slider > * {
	flex: 0 0 calc(50% - 6px);
	min-width: 0;
	max-width: calc(50% - 6px);
	scroll-snap-align: start;
	box-sizing: border-box;
}

/* Affiliate recommendations become compact shopping cards. */
.nd-recipe .nd-affiliate-links.nd-shopping-slider .nd-affiliate-link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 88px;
	padding: 14px;
	white-space: normal;
	text-align: center;
	line-height: 1.35;
	border: 1px solid var(--nd-stone, #e9e2d8);
	background: var(--nd-ivory, #fffdf8);
	color: var(--nd-ink, #151613);
	text-decoration: none;
}

/* Previous / next controls */
.nd-recipe .nd-shopping-slider-controls {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin: 0 0 10px;
}

.nd-recipe .nd-shopping-slider-prev,
.nd-recipe .nd-shopping-slider-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	min-width: 34px;
	padding: 0;
	border: 1px solid var(--nd-champagne, #b99b62);
	border-radius: 50%;
	background: transparent;
	color: var(--nd-ink, #151613);
	font-size: 25px;
	line-height: 1;
	cursor: pointer;
	transition:
		background-color .2s ease,
		color .2s ease,
		border-color .2s ease;
}

.nd-recipe .nd-shopping-slider-prev:hover,
.nd-recipe .nd-shopping-slider-next:hover,
.nd-recipe .nd-shopping-slider-prev:focus-visible,
.nd-recipe .nd-shopping-slider-next:focus-visible {
	background: var(--nd-champagne, #b99b62);
	color: var(--nd-ivory, #fffdf8);
	outline: none;
}

/* Amazon + Instacart actions stay underneath the product carousel. */
.nd-recipe .nd-affiliate-actions {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	margin-top: 14px;
}

.nd-recipe .nd-affiliate-actions .nd-btn {
	width: 100%;
	box-sizing: border-box;
	white-space: normal;
	text-align: center;
}

/* Keep long affiliate product names inside their cards. */
.nd-recipe .nd-affiliate-link {
	overflow-wrap: anywhere;
	word-break: normal;
}

/* Tablet / narrow rail */
@media (max-width: 1199px) {
	.nd-recipe .nd-shopping-slider > * {
		flex-basis: min(280px, 70vw);
		max-width: min(280px, 70vw);
	}
}

/* Phone */
@media (max-width: 600px) {
	.nd-recipe .nd-shopping-slider > * {
		flex-basis: 82%;
		max-width: 82%;
	}

	.nd-recipe .nd-shopping-slider-controls {
		justify-content: space-between;
	}
}