/* ============================================================
   Mountain Waffle Co. — Recipes section
   Shared by /recipes/index.html and every /recipes/[slug].html.
   Builds on ../styles.css (variables, nav, footer) and changes nothing in it.
   ============================================================ */

/* --- Shared: focus, skip link, buttons --- */
:focus-visible { outline: 3px solid var(--dark); outline-offset: 3px; }
footer :focus-visible, .mobile-menu :focus-visible, .rp-kitchen :focus-visible, .rl-hero :focus-visible { outline-color: var(--gold-light); }

.skip-link {
  position: absolute; left: 16px; top: -80px; z-index: 1100;
  padding: 12px 18px; background: var(--dark); color: var(--white);
  font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.rp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 22px;
  font-family: 'Montserrat', sans-serif; font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  color: var(--brown); background: transparent; border: 1px solid var(--brown);
  cursor: pointer; transition: background .25s, color .25s, border-color .25s;
}
.rp-btn:hover { background: var(--dark); border-color: var(--dark); color: var(--white); }
.rp-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rp-btn--primary { background: var(--dark); border-color: var(--dark); color: var(--white); }
.rp-btn--primary:hover { background: var(--gold); border-color: var(--gold); color: var(--dark); }

.rp-eyebrow {
  font-size: .72rem; font-weight: 600; letter-spacing: .24em;
  text-transform: uppercase; color: var(--brown);
}

/* --- Site nav on /recipes/ pages ---
   Same logo image, logo size and bar padding as the product and spec pages, so the bar is
   100px tall (92px at 1024px and below). The offsets marked "header" below follow from that.
   Like those pages, these switch to the menu button at 1024px, and tighten the link gap just above that. */
nav.scrolled { padding: 22px 60px; }
.nav-logo { display: block; line-height: 0; }
.nav-logo-img { height: 55px; width: auto; display: block; }
@media (max-width: 1024px) {
  nav.scrolled { padding: 18px 30px; }
  nav .nav-links, nav .nav-cta { display: none; }
  nav .nav-hamburger { display: flex; }
}
@media (min-width: 1025px) and (max-width: 1140px) {
  nav .nav-links { gap: 20px; }
}

/* --- Recipe page shell --- */
/* header: .rp and .rl start below the fixed 100px bar */
.rp { padding-top: 100px; background: var(--cream); color: var(--dark); font-size: 1.0625rem; line-height: 1.7; }
.rp h2 { font-family: 'Cormorant Garamond', serif; font-size: 2.1rem; font-weight: 400; line-height: 1.15; }

.rp-crumbs { max-width: 1160px; margin: 0 auto; padding: 18px 24px 14px; }
.rp-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0 10px; font-size: .8rem; letter-spacing: .04em; color: var(--brown); }
.rp-crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--gold); }
.rp-crumbs a { color: var(--brown); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(61,43,31,.35); }
.rp-crumbs a:hover { text-decoration-color: var(--brown); }
.rp-crumbs [aria-current] { color: var(--dark); font-weight: 500; }

/* --- Hero photo + "Made with" badge --- */
.rp-hero-photo { position: relative; max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.rp-hero-photo > img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 520px;
  object-fit: cover; background: var(--off-white);
}
.rp-badge {
  position: absolute; left: 48px; bottom: -36px;
  display: flex; align-items: center; gap: 14px; max-width: calc(100% - 96px);
  padding: 10px 22px 10px 10px; background: var(--white); color: var(--dark);
  border: 1px solid rgba(201,168,76,.55); box-shadow: 0 10px 30px rgba(26,20,16,.16);
  text-decoration: none; transition: transform .25s, box-shadow .25s;
}
.rp-badge:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(26,20,16,.2); }
.rp-badge img { flex: none; width: 64px; height: 64px; object-fit: contain; background: var(--white); }
.rp-badge-label { display: block; font-size: .66rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--brown); margin-bottom: 3px; }
.rp-badge-name { display: block; font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 600; line-height: 1.15; }
.rp-badge-name::after { content: "\00a0\2192"; color: var(--gold); }
.rp-badge--text { padding-left: 22px; }

/* --- Title block --- */
.rp-head { max-width: 800px; margin: 0 auto; padding: 76px 24px 0; text-align: center; }
.rp-head .rp-eyebrow { margin-bottom: 14px; }
.rp-head h1 { text-wrap: balance; font-family: 'Cormorant Garamond', serif; font-size: clamp(2.5rem, 6vw, 4.2rem); font-weight: 300; line-height: 1.06; margin-bottom: 20px; }
.rp-intro { text-wrap: pretty; max-width: 660px; margin: 0 auto 28px; font-size: 1.125rem; line-height: 1.75; color: var(--brown); }
.rp-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
.rp-status { flex-basis: 100%; min-height: 1.5em; font-size: .88rem; color: var(--brown); }

/* --- At-a-glance strip --- */
.rp-glance {
  list-style: none; display: grid; grid-template-columns: repeat(5, 1fr);
  margin: 12px auto 0; border-top: 1px solid rgba(201,168,76,.55); border-bottom: 1px solid rgba(201,168,76,.55);
}
.rp-glance li { padding: 18px 6px 16px; text-align: center; }
.rp-glance li + li { border-left: 1px solid rgba(201,168,76,.3); }
.rp-glance svg { display: block; width: 26px; height: 26px; margin: 0 auto 8px; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rp-glance-label { display: block; font-size: .66rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--brown); }
.rp-glance-val { display: block; margin-top: 2px; font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 600; line-height: 1.2; font-variant-numeric: lining-nums; }
.rp-glance-val[data-long] { font-size: 1.15rem; line-height: 1.25; text-wrap: balance; }   /* a worded total, e.g. "1 hr + overnight soak" */
.rp-time-note { margin-top: 12px; font-size: .92rem; color: var(--brown); }

/* --- Recipe: ingredients + steps --- */
.rp-recipe { max-width: 1160px; margin: 0 auto; padding: 64px 24px 0; scroll-margin-top: 108px; }
.rp-note { text-wrap: balance; max-width: 760px; margin: 0 auto 44px; text-align: center; font-family: 'Cormorant Garamond', serif; font-size: 1.45rem; font-style: italic; line-height: 1.5; color: var(--brown); }
.rp-cols { display: grid; grid-template-columns: minmax(300px, 390px) minmax(0, 1fr); gap: 60px; align-items: start; }

.rp-ingredients {
  position: sticky; top: 120px; max-height: calc(100vh - 136px); overflow-y: auto;
  padding: 28px 28px 20px; background: var(--white); border: 1px solid rgba(201,168,76,.45);
}
.rp-servings-static { margin-top: 6px; font-size: .95rem; color: var(--brown); }
.rp-servings { display: none; align-items: center; gap: 8px; margin: 16px 0 4px; padding: 12px 0; border-top: 1px solid rgba(138,126,116,.3); border-bottom: 1px solid rgba(138,126,116,.3); }
.js .rp-servings { display: flex; }
.js .rp-servings-static { display: none; }
.rp-servings-label { margin-right: auto; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--brown); }
.rp-step-btn {
  width: 44px; height: 44px; border: 1px solid var(--brown); background: transparent; color: var(--dark);
  font-family: 'Montserrat', sans-serif; font-size: 1.4rem; line-height: 1; cursor: pointer; transition: background .2s, color .2s;
}
.rp-step-btn:hover { background: var(--dark); color: var(--white); }
.rp-step-btn:disabled { opacity: .35; cursor: default; background: transparent; color: var(--dark); }
.rp-servings input {
  width: 58px; height: 44px; text-align: center; border: 1px solid rgba(61,43,31,.45); border-radius: 0; background: var(--cream);
  font-family: 'Montserrat', sans-serif; font-size: 1.1rem; font-weight: 600; color: var(--dark);
  -moz-appearance: textfield; appearance: textfield;
}
.rp-servings input::-webkit-outer-spin-button, .rp-servings input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rp-scale-note { font-size: .82rem; line-height: 1.45; color: var(--brown); }
.rp-scale-note:not(:empty) { padding: 8px 0 4px; }
.rp-servings + .rp-scale-note:empty { margin-bottom: 10px; }
.rp-reset { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--dark); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.rp-ing-group { margin: 22px 0 2px; font-family: 'Montserrat', sans-serif; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--brown); }
.rp-ing-list { list-style: none; }
.rp-ing { border-bottom: 1px solid rgba(138,126,116,.22); }
.rp-ing-list .rp-ing:last-child { border-bottom: 0; }
.rp-ing label { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; cursor: pointer; line-height: 1.5; }
.rp-ing input { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--brown); cursor: pointer; }
.rp-ing input:checked + .rp-ing-text { text-decoration: line-through; opacity: .5; }
.rp-ing--product { margin: 0 -14px 6px; padding: 0 14px; background: var(--cream); border-bottom: 0; border-left: 3px solid var(--gold); }
.rp-ing--product .rp-ing-text { font-weight: 600; }
.rp-ing-link { display: inline-block; margin: -4px 0 12px 36px; font-size: .84rem; font-weight: 600; color: var(--brown); text-decoration: underline; text-underline-offset: 3px; }
.rp-ing-link:hover { color: var(--dark); }
.is-scaled .rp-base-only { display: none; }

.rp-steps-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; }
.rp-hint { margin: 2px 0 10px; font-size: .9rem; color: var(--brown); }
.rp-step-list { list-style: none; }
.rp-step { border-bottom: 1px solid rgba(138,126,116,.22); }
.rp-step label { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 20px; align-items: start; padding: 22px 0; cursor: pointer; }
.rp-step-check { position: absolute; left: 12px; top: 34px; width: 1px; height: 1px; opacity: 0; }
.rp-step-num {
  display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid var(--gold); background: var(--white); color: var(--dark);
  font-family: 'Cormorant Garamond', serif; font-size: 1.65rem; font-weight: 600; line-height: 1; font-variant-numeric: lining-nums;
  transition: background .2s;
}
.rp-step-text { padding-top: 7px; font-size: 1.1875rem; line-height: 1.7; transition: opacity .2s; }
.rp-step-check:checked + .rp-step-num { background: var(--gold); }
.rp-step-check:checked ~ .rp-step-text { opacity: .4; }
.rp-step-check:focus-visible + .rp-step-num { outline: 3px solid var(--dark); outline-offset: 3px; }

/* Cook Mode switch (shown only when the browser supports Wake Lock) */
.rp-switch { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px; background: none; border: 0; cursor: pointer; font-family: 'Montserrat', sans-serif; font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--dark); }
.rp-switch[hidden] { display: none; }
.rp-switch-track { position: relative; flex: none; width: 46px; height: 26px; border-radius: 13px; border: 1.5px solid var(--brown); background: var(--white); transition: background .2s; }
.rp-switch-thumb { position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: var(--brown); transition: transform .2s, background .2s; }
.rp-switch[aria-checked="true"] .rp-switch-track { background: var(--dark); border-color: var(--dark); }
.rp-switch[aria-checked="true"] .rp-switch-thumb { transform: translateX(20px); background: var(--gold-light); }

/* --- Tips & Swaps --- */
.rp-tips { margin-top: 44px; padding: 28px 32px 22px; background: var(--off-white); border-left: 3px solid var(--gold); }
.rp-tips h2 { font-size: 1.8rem; margin-bottom: 10px; }
.rp-tips ul { list-style: none; }
.rp-tips li { padding: 9px 0; line-height: 1.7; }
.rp-tips li + li { border-top: 1px solid rgba(138,126,116,.25); }
.rp-tips strong { font-weight: 600; }

/* --- In Your Kitchen (for operators) --- */
.rp-kitchen { margin-top: 88px; padding: 76px 24px 80px; background: var(--dark); color: rgba(255,255,255,.88); }
.rp-kitchen-inner { max-width: 1160px; margin: 0 auto; }
.rp-kitchen .rp-eyebrow { color: var(--gold-light); margin-bottom: 14px; }
.rp-kitchen .rp-eyebrow .dot { margin: 0 .6em; color: var(--gold); }
.rp-kitchen h2 { font-size: clamp(2.1rem, 4vw, 3rem); font-weight: 300; color: var(--white); }
.rp-kitchen h2 em { font-style: italic; color: var(--gold-light); }
.rp-kitchen-sub { max-width: 620px; margin-top: 12px; color: rgba(255,255,255,.76); }
/* Fit box: who it's for, when it sells, why it works, and a copy-ready menu line. */
.rp-fit { margin: 36px 0 0; padding: 6px 28px; border: 1px solid rgba(232,201,122,.38); background: rgba(255,255,255,.04); }
.rp-fit > div { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 6px 24px; align-items: baseline; padding: 16px 0; }
.rp-fit > div + div { border-top: 1px solid rgba(232,201,122,.2); }
.rp-fit dt { font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-light); }
.rp-fit dd { font-size: 1rem; line-height: 1.6; }
.rp-fit-menu dd { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.rp-fit-line { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-style: italic; line-height: 1.3; color: var(--white); }
.rp-copy {
  flex: none; min-height: 36px; padding: 0 14px;
  font-family: 'Montserrat', sans-serif; font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-light); background: transparent; border: 1px solid rgba(232,201,122,.6); cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.rp-copy:hover { background: var(--gold-light); border-color: var(--gold-light); color: var(--dark); }
.rp-copy-status { font-size: .82rem; color: var(--gold-light); }
.rp-copy-status.is-ok { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rp-allergen { margin-top: 16px; padding: 12px 18px; border-left: 3px solid var(--gold-light); background: rgba(255,255,255,.06); font-size: .95rem; }
.rp-allergen strong { color: var(--white); }
.rp-kitchen-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 56px; margin: 40px 0 52px; }
.rp-kitchen-grid dt { padding-top: 18px; margin-bottom: 8px; border-top: 1px solid rgba(232,201,122,.38); font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-light); }
.rp-kitchen-grid dd { font-size: 1rem; line-height: 1.7; }
.rp-kitchen-grid a, .rp-wholesale a { color: var(--gold-light); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.rp-kitchen-grid a:hover, .rp-wholesale a:hover { color: var(--white); }

.rp-made { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 34px; align-items: center; padding: 28px; background: var(--cream); color: var(--dark); }
.rp-made--text { grid-template-columns: 1fr; }
.rp-made img { display: block; width: 200px; height: 200px; object-fit: contain; background: var(--white); }
.rp-made .rp-eyebrow { color: var(--brown); margin-bottom: 8px; }
.rp-made h3 { font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 400; line-height: 1.15; }
.rp-made-meta { margin: 8px 0 20px; font-size: .95rem; color: var(--brown); }
.rp-made-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.rp-wholesale { margin-top: 30px; font-size: 1.05rem; }

/* --- You might also love + recipe cards (also used on /recipes/) --- */
.rp-related { max-width: 1160px; margin: 0 auto; padding: 76px 24px 96px; }
.rp-related h2 { margin-bottom: 34px; text-align: center; }
.rc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.rc { display: flex; flex-direction: column; background: var(--white); color: var(--dark); text-decoration: none; border: 1px solid rgba(201,168,76,.32); transition: transform .25s, box-shadow .25s; }
.rc:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(26,20,16,.12); }
.rc[hidden], [data-group][hidden] { display: none; }
.rc img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--off-white); }
.rc-body { display: block; padding: 20px 22px 24px; }
.rc-badge { display: inline-block; margin-bottom: 10px; padding: 3px 9px; font-size: .66rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--brown); border: 1px solid rgba(61,43,31,.4); }
.rc-title { display: block; margin-bottom: 8px; font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 600; line-height: 1.15; }
.rc-desc { display: block; font-size: .94rem; line-height: 1.6; color: var(--brown); }

/* --- Recipes landing page (/recipes/) --- */
.rl { padding-top: 100px; background: var(--cream); color: var(--dark); }
.rl-hero .page-hero-title { margin-bottom: 14px; }
.rl-hero-rule { width: 50px; height: 1px; margin-bottom: 18px; background: var(--gold); }
.rl-body { max-width: 1160px; margin: 0 auto; padding: 72px 24px 96px; scroll-margin-top: 108px; }
.rl-intro { max-width: 700px; margin: 0 auto 34px; text-align: center; text-wrap: pretty; font-size: 1.0625rem; line-height: 1.75; color: var(--brown); }
.rl-filters { display: none; flex-wrap: wrap; gap: 10px; justify-content: center; }
.js .rl-filters { display: flex; }
.rl-filter {
  min-height: 44px; padding: 0 20px; font-family: 'Montserrat', sans-serif; font-size: .76rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brown); background: transparent;
  border: 1px solid rgba(61,43,31,.45); cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.rl-filter:hover { border-color: var(--dark); color: var(--dark); }
.rl-filter[aria-pressed="true"] { background: var(--dark); border-color: var(--dark); color: var(--white); }
.rl-count { display: none; min-height: 1.5em; margin-top: 14px; text-align: center; font-size: .88rem; color: var(--brown); }
.js .rl-count { display: block; }
.rl-group { margin-top: 52px; }
.rl-group-title { margin-bottom: 28px; padding-bottom: 12px; border-bottom: 1px solid rgba(201,168,76,.5); font-family: 'Cormorant Garamond', serif; font-size: 2.1rem; font-weight: 400; line-height: 1.15; }
.rl-cta { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 80px; }

/* --- Responsive --- */
@media (max-width: 1024px) {   /* header: the bar is 92px tall here */
  .rp, .rl { padding-top: 92px; }
  .rp-recipe, .rl-body { scroll-margin-top: 100px; }
}
@media (max-width: 900px) {
  .rp-cols { grid-template-columns: 1fr; gap: 44px; }
  .rp-ingredients { position: static; max-height: none; overflow: visible; }
  .rc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .rp-crumbs { padding: 14px 20px 12px; }
  .rp-hero-photo { padding: 0; }
  .rp-hero-photo > img { aspect-ratio: 4 / 3; }
  .rp-badge { left: 20px; bottom: -32px; max-width: calc(100% - 40px); gap: 12px; padding: 8px 16px 8px 8px; }
  .rp-badge img { width: 54px; height: 54px; }
  .rp-badge-name { font-size: 1.15rem; }
  .rp-head { padding: 64px 20px 0; }
  .rp-actions .rp-btn--primary { flex-basis: 100%; }
  .rp-actions .rp-btn { flex-grow: 1; padding: 0 14px; }
  .rp-glance { grid-template-columns: repeat(6, 1fr); }
  .rp-glance li { grid-column: span 2; }
  .rp-glance li:nth-child(n+4) { grid-column: span 3; border-top: 1px solid rgba(201,168,76,.3); }
  .rp-glance li:nth-child(4) { border-left: 0; }
  .rp-recipe { padding: 52px 20px 0; }
  .rp-note { margin-bottom: 36px; font-size: 1.3rem; }
  .rp-ingredients { padding: 24px 20px 16px; }
  .rp-step label { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; }
  .rp-step-num { width: 44px; height: 44px; font-size: 1.5rem; }
  .rp-step-text { padding-top: 5px; }
  .rp-tips { padding: 24px 22px 18px; }
  .rp-kitchen { margin-top: 64px; padding: 60px 20px 64px; }
  .rp-kitchen .rp-eyebrow { font-size: .62rem; letter-spacing: .12em; }
  .rp-kitchen-grid { grid-template-columns: 1fr; gap: 24px; margin: 32px 0 40px; }
  .rp-fit { margin-top: 28px; padding: 4px 18px; }
  .rp-fit > div { grid-template-columns: 1fr; padding: 14px 0; }
  .rp-fit-line { font-size: 1.25rem; }
  .rp-copy { min-height: 44px; padding: 0 18px; }
  .rp-made { grid-template-columns: 1fr; gap: 22px; padding: 22px; }
  .rp-made img { width: 100%; height: 220px; }
  .rl-body { padding: 52px 20px 72px; }
  .rl-filter { padding: 0 14px; }
  .rl-group-title { font-size: 1.8rem; }
  .rp-related { padding: 60px 20px 72px; }
  .rc-grid { grid-template-columns: 1fr; }
  /* the site's floating back-to-top button covers the checklist on a phone */
  .rp ~ .scroll-top { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rc, .rp-badge, .rp-btn, .rp-step-text, .rp-step-num, .rp-switch-thumb, .rp-switch-track { transition: none; }
  .rl .marquee-track { animation: none; }
  .rc:hover, .rp-badge:hover { transform: none; }
}

/* --- Print: title, at-a-glance line, ingredients, steps and tip only --- */
@media print {
  @page { margin: 14mm; }
  html, body { background: #fff !important; }
  body > nav, .mobile-menu, body > footer, .scroll-top, .skip-link,
  .rp-crumbs, .rp-hero-photo, .rp-head .rp-eyebrow, .rp-intro, .rp-actions, .rp-note,
  .rp-servings, .rp-servings-static, .rp-scale-note, .rp-switch, .rp-hint, .rp-ing-link,
  .rp-kitchen, .rp-related { display: none !important; }

  .rp { padding: 0; background: #fff; color: #000; font-size: 10.5pt; line-height: 1.45; }
  .rp-head { max-width: none; padding: 0; text-align: left; }
  .rp-head h1 { margin-bottom: 6pt; font-size: 26pt; font-weight: 400; }
  .rp-glance { display: flex; flex-wrap: wrap; gap: 2pt 16pt; margin: 0 0 12pt; padding: 0 0 7pt; border: 0; border-bottom: .75pt solid #888; }
  .rp-glance li, .rp-glance li + li { padding: 0; border: 0; text-align: left; }
  .rp-glance svg { display: none; }
  .rp-glance-label, .rp-glance-val { display: inline; margin: 0; font-family: 'Montserrat', sans-serif; font-size: 9.5pt; letter-spacing: 0; text-transform: none; color: #000; }
  .rp-glance-label { font-weight: 600; }
  .rp-glance-label::after { content: ": "; }
  .rp-glance-val { font-weight: 400; }
  .rp-time-note { margin: -6pt 0 10pt; font-size: 9.5pt; color: #000; }

  .rp-recipe { max-width: none; padding: 0; }
  .rp-cols { grid-template-columns: 33% minmax(0, 1fr); gap: 20pt; }
  .rp h2 { margin-bottom: 4pt; font-size: 15pt; }
  .rp-ingredients { position: static; max-height: none; overflow: visible; padding: 0; background: none; border: 0; }
  .rp-ing-group { margin: 8pt 0 0; font-size: 8pt; color: #000; }
  .rp-ing, .rp-step { break-inside: avoid; border-color: #ccc; }
  .rp-ing label { gap: 7pt; padding: 3.5pt 0; }
  .rp-ing input { -webkit-appearance: none; appearance: none; width: 8.5pt; height: 8.5pt; margin-top: 2.5pt; border: .75pt solid #333; background: #fff; }
  .rp-ing input:checked + .rp-ing-text { text-decoration: none; opacity: 1; }
  .rp-ing--product { margin: 0; padding: 0; background: none; border-left: 0; border-bottom: .5pt solid #ccc; }
  .rp-steps-head { min-height: 0; }
  .rp-step label { grid-template-columns: 16pt minmax(0, 1fr); gap: 6pt; padding: 5pt 0; }
  .rp-step-num, .rp-step-check:checked + .rp-step-num { display: block; width: auto; height: auto; border: 0; border-radius: 0; background: none; font-size: 13pt; line-height: 1.2; }
  .rp-step-text, .rp-step-check:checked ~ .rp-step-text { padding: 0; font-size: 10.5pt; line-height: 1.45; opacity: 1; }
  .rp-tips { margin-top: 10pt; padding: 7pt 0 0; background: none; border: 0; border-top: .75pt solid #888; break-inside: avoid; }
  .rp-tips h2 { font-size: 13pt; margin-bottom: 2pt; }
  .rp-tips li { padding: 2pt 0; line-height: 1.45; }
  .rp-tips li + li { border: 0; }
}