/* ===== Recipe page ===== */
.mol-recipe__hero--noimage { padding: clamp(2rem, 5vw, 3.5rem) 0 0; }
.mol-recipe__title { font-size: clamp(2rem, 4vw, 3.2rem); max-width: 20ch; }
.mol-recipe__lead { font-size: 1.1rem; color: var(--mol-ink-soft); max-width: 60ch; margin-top: .75rem; }

.mol-meta-bar { display: flex; flex-wrap: wrap; gap: 1.5rem; padding: 1.5rem 0; border-top: 1px solid var(--mol-line); border-bottom: 1px solid var(--mol-line); margin: 2rem 0; }
.mol-meta-bar li { display: flex; flex-direction: column; gap: .2rem; }
.mol-meta-bar__label { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--mol-ink-soft); }
.mol-meta-bar__value { font-family: var(--mol-font-display); font-weight: 600; font-size: 1.1rem; }

.mol-recipe__layout { max-width: 760px; margin: 0 auto; padding-bottom: 4rem; }
.mol-recipe__main section { margin-bottom: 3rem; }

.mol-recipe__ingredients-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.mol-ingredient-list { display: grid; gap: .1rem; margin-top: 1rem; }
.mol-ingredient-list li { display: flex; gap: .6rem; padding: .7rem 0; border-bottom: 1px dashed var(--mol-line); }
.mol-ingredient-list__qty { font-weight: 600; min-width: 3ch; }
.mol-ingredient-list__name { text-decoration: underline; text-decoration-color: var(--mol-line-strong); text-underline-offset: 3px; }
a.mol-ingredient-list__name:hover { color: var(--mol-terracotta-dark); }

.mol-step-list { display: grid; gap: 1.75rem; margin-top: 1rem; }
.mol-step-list__item { display: flex; gap: 1.25rem; }
.mol-step-list__number {
	flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--mol-terracotta); color: var(--mol-white);
	display: flex; align-items: center; justify-content: center; font-family: var(--mol-font-display); font-weight: 700;
}
.mol-step-list__content h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.mol-step-list__content img { border-radius: var(--mol-radius); margin-top: .75rem; max-width: 420px; }

.mol-variations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin-top: 1rem; }
.mol-variations-grid__item { padding: 1.25rem; border: 1px solid var(--mol-line); border-radius: var(--mol-radius); }
.mol-variations-grid__item h3 { font-size: 1rem; margin-bottom: .4rem; }

.mol-recipe__tips ul { display: grid; gap: .6rem; margin-top: .75rem; }
.mol-recipe__tips li { padding-left: 1.4rem; position: relative; }
.mol-recipe__tips li::before { content: '—'; position: absolute; left: 0; color: var(--mol-terracotta); }

/* ===== Nutrition table ===== */
.mol-nutrition-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.mol-nutrition-table caption { text-align: left; font-family: var(--mol-font-display); font-size: 1.2rem; margin-bottom: .75rem; }
.mol-nutrition-table th, .mol-nutrition-table td { text-align: left; padding: .75rem 0; border-bottom: 1px solid var(--mol-line); }
.mol-nutrition-table td { text-align: right; font-weight: 600; }

/* ===== FAQ ===== */
.mol-faq__item { border-bottom: 1px solid var(--mol-line); }
.mol-faq__question { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 0; text-align: left; font-weight: 600; font-size: 1rem; }
.mol-faq__icon { width: 18px; height: 18px; position: relative; flex-shrink: 0; }
.mol-faq__icon::before, .mol-faq__icon::after { content: ''; position: absolute; background: var(--mol-ink); }
.mol-faq__icon::before { width: 100%; height: 2px; top: 50%; transform: translateY(-50%); }
.mol-faq__icon::after { height: 100%; width: 2px; left: 50%; transform: translateX(-50%); transition: transform .2s ease; }
.mol-faq__question[aria-expanded="true"] .mol-faq__icon::after { transform: translateX(-50%) scaleY(0); }
.mol-faq__answer { padding-bottom: 1.1rem; color: var(--mol-ink-soft); }

/* ===== Ingredient page ===== */
.mol-ingredient__hero--noimage { padding: clamp(2rem, 5vw, 3.5rem) 0 0; }
.mol-ingredient__title { font-size: clamp(2rem, 4vw, 3rem); }
.mol-ingredient__layout { padding-bottom: 4rem; }
.mol-ingredient__main section { margin-bottom: 2.5rem; }
.mol-ingredient__kcal-figure { font-family: var(--mol-font-display); font-size: 3rem; font-weight: 700; color: var(--mol-terracotta-dark); }
.mol-ingredient__kcal-figure span { font-size: 1.2rem; font-weight: 400; color: var(--mol-ink-soft); }

/* ===== Calorie page ===== */
.mol-calorie-page__title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 2rem 0 1.5rem; }
.mol-calorie-page__headline { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; padding: 2rem; background: var(--mol-white); border-radius: var(--mol-radius-lg); border: 1px solid var(--mol-line); margin-bottom: 2.5rem; }
.mol-calorie-page__figure { display: flex; flex-direction: column; }
.mol-calorie-page__number { font-family: var(--mol-font-display); font-size: 3.5rem; font-weight: 700; color: var(--mol-terracotta-dark); line-height: 1; }
.mol-calorie-page__unit { font-size: .9rem; color: var(--mol-ink-soft); }
.mol-calorie-page__portion { border-left: 1px solid var(--mol-line-strong); padding-left: 2rem; }
.mol-calorie-page__portion strong { display: block; font-family: var(--mol-font-display); font-size: 1.4rem; margin-top: .3rem; }

.mol-macro-bars__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
.mol-macro-bars__item { padding: 1.25rem; background: var(--mol-white); border: 1px solid var(--mol-line); border-radius: var(--mol-radius); text-align: center; }
.mol-macro-bars__item span { display: block; font-size: .85rem; color: var(--mol-ink-soft); margin-bottom: .4rem; }
.mol-macro-bars__item strong { font-family: var(--mol-font-display); font-size: 1.3rem; }

.mol-comparison-table, .mol-comparison-table--archive { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.mol-comparison-table th, .mol-comparison-table td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--mol-line); }
.mol-comparison-table__current { background: var(--mol-paper); font-weight: 700; }
.mol-calorie-page__cta { margin: 2.5rem 0; }

/* ===== Tool page & interactive widgets ===== */
.mol-tool-page__title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 2rem 0 1.5rem; }
.mol-tool-page__widget { margin-bottom: 3rem; }
.mol-tool { background: var(--mol-white); border: 1px solid var(--mol-line); border-radius: var(--mol-radius-lg); padding: 2rem; }
.mol-tool__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.25rem; margin-bottom: 1.5rem; }
.mol-tool__grid label { display: flex; flex-direction: column; gap: .4rem; font-size: .85rem; font-weight: 600; color: var(--mol-ink-soft); }
.mol-tool__grid input, .mol-tool__grid select {
	padding: .75rem 1rem; border: 1px solid var(--mol-line-strong); border-radius: var(--mol-radius-sm); background: var(--mol-cream);
}
.mol-tool__result { margin-top: 1.5rem; padding: 1.25rem; background: var(--mol-paper); border-radius: var(--mol-radius); }
.mol-tool__result-figure { font-family: var(--mol-font-display); font-size: 2rem; font-weight: 700; color: var(--mol-terracotta-dark); }
.mol-tool__result--triple { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; text-align: center; }
.mol-tool__result--triple span { display: block; font-size: .8rem; color: var(--mol-ink-soft); }
.mol-tool__result--triple strong { font-family: var(--mol-font-display); font-size: 1.5rem; }

.mol-tool__error { color: var(--mol-terracotta-dark); background: var(--mol-highlight); border-radius: var(--mol-radius-sm); padding: .75rem 1rem; font-size: .9rem; margin-top: 1rem; }
.mol-tool__disclaimer { font-size: .82rem; color: var(--mol-ink-soft); margin: 1rem 0 0; }

.mol-tool__result-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; text-align: center; }
.mol-tool__result-row + .mol-tool__result-row { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--mol-line); }
.mol-tool__result-row div { display: flex; flex-direction: column; gap: .3rem; }
.mol-tool__result-row span { font-size: .78rem; color: var(--mol-ink-soft); }
.mol-tool__result-row strong { font-family: var(--mol-font-display); font-size: 1.4rem; color: var(--mol-terracotta-dark); }
.mol-tool__result-row small { font-size: .75rem; color: var(--mol-ink-soft); }
@media (max-width: 560px) { .mol-tool__result-row { grid-template-columns: 1fr 1fr; row-gap: 1rem; } }

.mol-tool__grid--servings { grid-template-columns: repeat(2, 1fr); margin-bottom: 1.25rem; }
.mol-scaler__rows { display: grid; gap: .75rem; margin-bottom: 1rem; }
.mol-scaler__row { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: .6rem; align-items: center; }
.mol-scaler__row input {
	padding: .65rem .85rem; border: 1px solid var(--mol-line-strong); border-radius: var(--mol-radius-sm); background: var(--mol-white);
	font-size: .9rem;
}
.mol-scaler__remove { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--mol-line-strong); color: var(--mol-terracotta-dark); font-size: 1.1rem; flex-shrink: 0; }
.mol-scaler__remove:hover { background: var(--mol-highlight); }
#mol-add-ingredient { margin-bottom: 1.5rem; }
.mol-scaler__output { display: grid; gap: .5rem; margin-top: .75rem; }
.mol-scaler__output li { padding: .6rem 0; border-bottom: 1px dashed var(--mol-line); font-size: .92rem; }
@media (max-width: 640px) {
	.mol-scaler__row { grid-template-columns: 1fr; }
	.mol-tool__grid--servings { grid-template-columns: 1fr; }
}

.mol-tool--portion { display: flex; align-items: center; gap: .75rem; background: transparent; border: none; padding: 0; }
.mol-tool--portion__btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--mol-line-strong); font-size: 1.1rem; }
.mol-tool--portion__value { font-family: var(--mol-font-display); font-weight: 700; min-width: 2ch; text-align: center; }

.mol-tool--fridge__quickadd { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.5rem; }
.mol-chip-add {
	display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1rem; border-radius: 999px;
	border: 1.5px solid var(--mol-line-strong); background: var(--mol-cream); font-size: .88rem; font-weight: 600;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mol-chip-add span { color: var(--mol-terracotta); font-weight: 700; }
.mol-chip-add:hover { border-color: var(--mol-terracotta); }
.mol-chip-add:disabled { opacity: .4; pointer-events: none; }
.mol-tool--fridge__input-row { display: flex; gap: .75rem; margin-bottom: 1.25rem; }
.mol-tool--fridge__input-row input { flex: 1; padding: .85rem 1.1rem; border: 1px solid var(--mol-line-strong); border-radius: 999px; background: var(--mol-cream); }
.mol-tool--fridge__chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.25rem; }
.mol-chip { display: flex; align-items: center; gap: .5rem; background: var(--mol-highlight); padding: .4rem .9rem; border-radius: 999px; font-size: .88rem; }
.mol-chip button { font-size: 1rem; line-height: 1; opacity: .6; }
.mol-tool--fridge__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }

.mol-tool--random__result { margin-top: 1.5rem; }
.mol-tool--random__result .mol-card { max-width: 420px; }
.mol-tool--random__again { margin-top: 1rem; }

/* ===== Taxonomy archive ===== */
.mol-tax-archive__title { font-size: clamp(2rem, 4vw, 3rem); margin: 2rem 0 .75rem; }
.mol-tax-archive__intro { color: var(--mol-ink-soft); max-width: 70ch; margin-bottom: 2rem; }
.mol-tax-archive__group { margin-bottom: 3rem; }

/* ===== Article ===== */
.mol-article__hero--noimage { padding: clamp(2rem, 5vw, 3.5rem) 0 0; }
.mol-article__title { font-size: clamp(2rem, 4vw, 3rem); max-width: 24ch; }
.mol-article__byline { color: var(--mol-ink-soft); margin-top: .5rem; }
.mol-article__body { max-width: 68ch; margin: 2.5rem auto; font-size: 1.08rem; }
.mol-article__body p { margin-bottom: 1.4em; }

/* ===== Misc ===== */
.mol-archive__title, .mol-archive__title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 2rem 0 1.5rem; }
.mol-404 { padding: 6rem 0; text-align: center; }
.mol-404 h1 { font-size: 2.4rem; margin-bottom: 1rem; }
.mol-searchform { display: flex; gap: .5rem; }
.mol-searchform input { flex: 1; padding: .75rem 1rem; border-radius: 999px; border: 1px solid var(--mol-line-strong); }
.mol-widget { margin-bottom: 2rem; }
.mol-widget__title { font-size: 1rem; margin-bottom: .75rem; }