/* ============================================================
   PODSTRONA PRZEPISU, wariant 1a „Tabliczki” z Claude Design, etap 2 (cała strona na trzech szerokościach).
   Źródło prawdy: .wayfinder/cd-export-przepis-strona-2/PrzepisStrona.dc.html (tabela UKLAD) i sekcja „Specyfikacja” planszy „Przepis Etap 2”.
   Progi: do 720 px układ 390, od 721 px układ 1024, od 1025 px układ 1440. Miary w komentarzach w kolejności 390 / 1024 / 1440.
   Wyjątek od systemu: pola co 10 px od krawędzi do krawędzi okna, kolor produktu jako tło, Druk w przyciskach, przyciski 60 px, pochylenia.
   Poza projektem (rysuje tylko 390, 1024 i 1440): pas 721-959 px (pole produktu i kartki jak na telefonie, bo obok siebie się nie mieszczą),
   pas 1025-1279 px (pole produktu z miarami układu 1024), film i kartki zwężane razem z oknem.
   Treść rysuje assets/przepis.js. Ruch: tylko transform i opacity.
   ============================================================ */
.rp { --rp-bg: var(--piasek); --rp-fg: var(--tusz); --e: cubic-bezier(.2, .7, .2, 1); --odbicie: cubic-bezier(.34, 1.56, .64, 1); }
.rp__kr { flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* kropka tabliczki */
.rp__druk { font-family: var(--f-druk); font-weight: 500; line-height: 1; text-transform: uppercase; }

/* ----- pierwszy ekran: mozaika pól co 10 px. Kolejność w kodzie: tytuł, film, czas i porcje, produkt (tak też stoi na telefonie) ----- */
.rp__ekran { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 10px; }
.rp__ekran > * { min-width: 0; }
.rp__pole { position: relative; background: var(--rp-bg); color: var(--rp-fg); }
.rp__pole::before { content: ""; position: absolute; inset: 10px; border: 1px dashed currentColor; opacity: .3; pointer-events: none; } /* ramka przerywana jak w kartach chutney */

/* tytuł w ramce. Rozmiar: min(32 / 36 / 54, szerokość ramki / najdłuższe słowo w em); --em ustawia przepis.js */
.rp__tytul { container-type: inline-size; position: relative; display: flex; flex-direction: column; align-items: center; padding: 8px 16px 28px; border: 1px solid var(--tusz); }
.rp__wstecz { align-self: flex-start; display: flex; align-items: center; gap: 8px; min-height: 44px; margin-left: -8px; padding: 0 8px; font-weight: 500; font-size: 16px; text-underline-offset: 4px; }
.rp__wstecz svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.rp__h { --tfs: 32px; margin-top: 10px; max-width: 100%; font-family: var(--f-druk); font-weight: 500; font-size: min(var(--tfs), calc(100cqw / var(--em, 10))); line-height: 1.04; letter-spacing: -.01em; text-transform: uppercase; text-align: center; text-wrap: balance; overflow-wrap: anywhere; }

/* pole filmu: film 320 / 400 / 520 w proporcji 540:658, pochylony o -2 stopnie; na telefonie pole ma 476 px (390 + 2 x 43) */
.rp__pole--film { overflow: hidden; display: grid; place-items: center; padding: 43px 0; }
.rp__ozd { position: absolute; pointer-events: none; }
.rp__ozd--tyl { left: -50px; top: 210px; width: 130px; transform: rotate(-16deg); filter: blur(2px); }
.rp__ozd--przod { z-index: 2; right: 2px; bottom: 22px; width: 112px; transform: rotate(10deg); }
.rp__ozd--gw1, .rp__ozd--gw2 { opacity: .35; fill: none; stroke: currentColor; }
.rp__ozd--gw1 { left: -60px; top: 0; width: 240px; stroke-width: .25; }
.rp__ozd--gw2 { display: none; }
.rp__film { position: relative; z-index: 1; width: min(320px, calc(100% - 50px)); aspect-ratio: 540 / 658; transform: rotate(-2deg); }
.rp__kadr { position: absolute; inset: 0; overflow: hidden; border: 1px solid currentColor; background: var(--tusz); }
.rp__kadr img, .rp__kadr video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.rp__graj, .rp__stop { position: absolute; display: flex; align-items: center; background: var(--krem); color: var(--tusz); border: 2px solid var(--tusz); white-space: nowrap; cursor: pointer; }
.rp__graj svg, .rp__stop svg { flex: none; fill: currentColor; }
.rp__graj { left: 50%; top: 50%; transform: translate(-50%, -50%); gap: 10px; height: 52px; padding: 0 20px 0 16px; font-size: 12px; }
.rp__graj svg { width: 15px; height: 15px; }
.rp__stop { left: 10px; bottom: 34px; gap: 8px; height: 44px; padding: 0 14px 0 12px; font-size: 10px; }
.rp__stop svg { width: 13px; height: 13px; }
.rp__graj:active { transform: translate(-50%, -50%) scale(.97); }
.rp__stop:active { transform: scale(.97); }
/* gwiazdka z minutami: ta sama co na karcie przepisu na stronie głównej */
.rp__gw { position: absolute; z-index: 3; right: -20px; top: -26px; display: grid; place-items: center; width: 100px; height: 96px; color: var(--krem); transform: rotate(-12deg); }
.rp__gw svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rp__gw span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.rp__gw b { font-weight: 500; font-size: 22px; }
.rp__gw i { font-style: normal; font-size: 10px; }
.rp__ig { position: absolute; z-index: 3; left: 50%; bottom: -22px; transform: translateX(-50%) rotate(2deg); display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; background: var(--krem); border: 1px solid var(--tusz); color: var(--tusz); white-space: nowrap; }
.rp__ig .rp__druk { font-size: 10px; }
.rp__ig b { font-weight: 500; font-size: 16px; color: var(--czerwien); text-decoration: underline; text-underline-offset: 3px; }

/* czas i porcje: dwie tabliczki */
.rp__fakty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rp__fakt { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 108px; padding: 14px 14px 16px; border: 1px solid var(--tusz); }
.rp__fakt dt { display: flex; align-items: center; justify-content: space-between; font-size: 11px; }
.rp__fakt dt .rp__kr { width: 5px; height: 5px; }
.rp__fakt dd { font-weight: 500; font-size: 20px; line-height: 1.2; text-align: center; text-wrap: balance; }

/* pole produktu: mała karta chutney. --on (0 albo 1): najechanie, fokus, a na telefonie pole na środku okna */
.rp__prod { --on: 0; --lift: -12px; overflow: hidden; display: flex; flex-direction: column; padding: 34px 22px 22px; }
.rp__scena { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 214px; }
.rp__sloik { position: relative; display: block; width: var(--jw-m); height: var(--jh-m); transform: translateY(calc(var(--on) * var(--lift))); transition: transform 400ms cubic-bezier(.22, 1, .36, 1); }
.rp__klaks { position: absolute; z-index: 0; left: -2%; top: var(--klaks); width: 104%; fill: var(--krem); transform-origin: 50% 70%; transform: scale(var(--on)) rotate(calc((var(--on) - 1) * 12deg)); }
.rp__cien { position: absolute; z-index: 0; left: -14%; right: -14%; bottom: -18px; height: 44px; background: radial-gradient(closest-side, rgba(19, 19, 19, .5), rgba(19, 19, 19, 0)); }
.rp__sloik > img { position: relative; z-index: 2; display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transform: rotate(3deg); }
.rp__sloik > .rp__ow-tyl { position: absolute; z-index: 1; right: -18%; top: -34%; width: 48%; height: auto; transform: rotate(3deg); }
.rp__sloik > .rp__ow-przod { position: absolute; z-index: 3; left: -16%; bottom: -6%; width: 44%; height: auto; transform-origin: 100% 100%; transform: scale(var(--on)); }
.rp__klaks, .rp__sloik > .rp__ow-przod { transition: transform 300ms cubic-bezier(.55, 0, 1, .45); } /* zejście bez odbicia */
.rp__prod.is-on, .rp__prod:focus-within { --on: 1; }
@media (hover: hover) { .rp__prod:hover { --on: 1; } }
.rp__prod.is-on .rp__klaks, .rp__prod.is-on .rp__ow-przod, .rp__prod:focus-within .rp__klaks, .rp__prod:focus-within .rp__ow-przod { transition: transform 600ms var(--odbicie); } /* wejście z odbiciem */
@media (hover: hover) { .rp__prod:hover .rp__klaks, .rp__prod:hover .rp__ow-przod { transition: transform 600ms var(--odbicie); } }
.rp__ptxt { position: relative; display: flex; flex-direction: column; min-width: 0; }
.rp__tabl { align-self: flex-start; display: inline-flex; align-items: center; gap: 14px; height: 34px; margin-top: 30px; padding: 0 12px; background: var(--krem); color: var(--tusz); border: 1px solid var(--tusz); transform: rotate(-2deg); font-size: 11px; white-space: nowrap; }
.rp__tabl .rp__kr { width: 5px; height: 5px; }
.rp__tip { margin-top: 14px; font-size: 17px; line-height: 1.45; text-wrap: pretty; }
.rp__nazwa { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin-top: 18px; font-size: 12px; line-height: 1.1; text-underline-offset: 3px; }
.rp__nazwa svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
/* „do koszyka”: zawsze czerwony, obrys 2 px w kolorze tekstu pola (czerwień zlewa się z częścią kolorów). Najechanie to nakładka w ciemniejszej czerwieni, 120 ms */
.rp__kup, .rp__kup2 { position: relative; isolation: isolate; align-items: center; background: var(--czerwien); color: var(--krem); white-space: nowrap; cursor: pointer; }
.rp__kup::before, .rp__kup2::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--czerwien-najechanie); opacity: 0; transition: opacity 120ms var(--e); }
.rp__kup { display: flex; gap: 12px; height: 60px; margin-top: 8px; padding: 0 18px; border: 2px solid var(--rp-fg); font-size: 13px; }
.rp__kup svg, .rp__kup2 svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }
.rp__kup svg { width: 20px; height: 20px; }
.rp__kup > span:first-of-type { margin-right: auto; }
.rp__zl { font-family: var(--f-mono); font-weight: 400; text-transform: none; }
.rp__kup .rp__zl { font-size: 16px; }
@media (hover: hover) {
  .rp__kup:hover::before, .rp__kup2:hover::before { opacity: 1; }
  .rp__wstecz:hover, .rp__nazwa:hover { text-decoration: underline; }
  .rp__graj:hover, .rp__stop:hover, .rp__ig:hover { background: var(--tusz); color: var(--krem); }
  .rp__ig:hover b { color: var(--krem); }
}
.rp__kup:active, .rp__kup2:active { transform: scale(.98); }
.rp__kup:active::before, .rp__kup2:active::before { background: var(--czerwien-wcisniety); opacity: 1; }
.rp__wstecz:active, .rp__nazwa:active, .rp__ig:active { opacity: .7; }

/* wstęp: Relative Book 22 / 26 / 32 */
.rp__wstep { padding: 30px 22px 40px; }
.rp__wstep p { max-width: 600px; margin: 0 auto; font-size: 22px; line-height: 1.32; text-wrap: pretty; }

/* ----- „stół” w kolorze produktu, na nim dwie kremowe kartki: składniki i kroki. Na telefonie kartki stoją prosto, jedna pod drugą ----- */
.rp__stol { display: grid; grid-template-columns: minmax(0, 1fr); gap: 64px; align-items: start; margin: 0 10px 10px; padding: 64px 16px 40px; }
.rp__kol { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.rp__kartka { --rot: 0deg; position: relative; z-index: 1; align-self: stretch; padding: 48px 18px 18px; background: var(--krem); color: var(--tusz); border: 1px solid var(--tusz); box-shadow: 0 26px 40px -26px rgba(19, 19, 19, .6); transform: rotate(var(--rot)); }
.rp__kartka--kroki { padding-bottom: 14px; }
/* nagłówek kartki: tabliczka 40 / 40 / 42 na górnej krawędzi */
.rp__kh { position: absolute; top: -20px; left: 50%; transform: translateX(-50%) rotate(2deg); display: flex; align-items: center; gap: 16px; height: 40px; padding: 0 18px; background: var(--krem); color: var(--tusz); border: 1px solid var(--tusz); font-size: 14px; white-space: nowrap; }
.rp__kartka--kroki .rp__kh { transform: translateX(-50%) rotate(-2deg); }
.rp__skl li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 14px; padding: 14px 0 15px; }
.rp__skl li + li, .rp__kroki li + li { border-top: 2px dotted var(--linia); }
.rp__romb { width: 9px; height: 9px; margin: 8px 0 0 4px; transform: rotate(45deg); background: var(--rp-bg); border: 1px solid var(--tusz); }
.rp__skl li > div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.rp__skl li > div > span, .rp__kroki li > span:last-child { font-size: 18px; text-wrap: pretty; }
.rp__skl li > div > span { line-height: 1.45; }
.rp__kup2 { flex: none; display: inline-flex; gap: 12px; height: 44px; padding: 0 16px 0 14px; border: 0; font-size: 11px; }
.rp__kup2 svg { width: 18px; height: 18px; }
.rp__kup2 > span:first-of-type { margin-right: 10px; }
.rp__kup2 .rp__zl { font-size: 14px; }
.rp__sloik2 { display: none; position: relative; margin-top: 44px; }
.rp__sloik2 .rp__cien { bottom: -20px; height: 48px; }
.rp__sloik2 img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transform: rotate(-4deg); }
/* numer kroku: kwadrat 36 / 40 / 44 w kolorze produktu */
.rp__kroki li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding: 18px 0; }
.rp__num { display: grid; place-items: center; width: 36px; height: 36px; background: var(--rp-bg); color: var(--rp-fg); border: 1px solid var(--tusz); font-size: 15px; }
.rp__kroki li > span:last-child { padding-top: 4px; line-height: 1.5; }

/* ----- inne przepisy: nagłówek w dwóch głosach jak w module chutney („PRZEPISY” konturem na szerokość okna minus 40 / 40 / 60, „INNE” = 0,324 tego rozmiaru),
   pod nim karty „Okładka” ze strony głównej (assets/przepisy-modul.css) z plakatem zamiast filmu: 296 px na telefonie, dalej po 3 w rzędzie ----- */
.rp__inne { container-type: inline-size; padding: 72px 0; }
.rp__ih { --ih: calc((100cqw - 40px) / var(--em, 7.68)); display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: var(--f-druk); font-weight: 500; text-transform: uppercase; text-align: center; white-space: nowrap; }
.rp__ih span { font-size: max(20px, calc(var(--ih) * .324)); line-height: .92; }
.rp__ih b { font-weight: 500; font-size: var(--ih); line-height: .82; color: var(--krem); -webkit-text-stroke: 1.5px var(--tusz); }
.rp__strz { justify-content: flex-end; margin: 16px 10px 0; }
.rp__rzad { display: flex; justify-content: safe center; gap: 10px; margin-top: 28px; padding: 6px 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 10px; scrollbar-width: none; } /* 6 px: miejsce na pierścień fokusu karty */
.rp__rzad::-webkit-scrollbar { display: none; }
.rp__strz + .rp__rzad { margin-top: 6px; }
.rp__rzad .pr__card { width: 296px; }
.rp__rzad .pr__in > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rp__rzad .pr__et h2 { max-width: calc(270 * var(--u)); font-family: var(--f-druk); font-weight: 500; font-size: calc(28 * var(--u)); line-height: 1; text-transform: uppercase; text-wrap: balance; } /* błędny adres: tytuł karty jest nagłówkiem drugiego stopnia */
.rp__rzad .pr__card:focus-visible { box-shadow: 0 0 0 3px var(--krem); }

/* ----- błędny adres: ramka z tytułem 260 / 240 / 300, pod nią wszystkie przepisy (296 px na telefonie, dalej po 4 w rzędzie) ----- */
.rp__blad { container-type: inline-size; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 260px; margin: 10px 10px 0; padding: 68px 16px 32px; border: 1px solid var(--tusz); }
.rp__blad .rp__wstecz { position: absolute; top: 8px; left: 8px; margin: 0; padding: 0 10px; }
.rp__blad .rp__h { --tfs: 30px; margin: 0; line-height: 1.02; }
.rp__lead { font-size: 18px; line-height: 1.4; color: var(--tusz-2); text-align: center; text-wrap: balance; }
.rp__inne--blad { padding: 4px 0 72px; }
.rp__inne--blad .rp__rzad { margin-top: 0; }

/* ----- układ 1024 (od 721 px): mozaika w dwóch kolumnach, film z lewej na całą wysokość ----- */
@media (min-width: 721px) {
  .rp__ekran { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(230px, auto) minmax(112px, auto) minmax(325px, 1fr); min-height: min(calc(100vh - var(--pasek-h)), 1100px); min-height: min(calc(100svh - var(--pasek-h)), 1100px); } /* co najmniej okno minus pasek; 1100 px: w bardzo wysokim oknie pola nie rosną bez końca */
  .rp__tytul { grid-column: 2; grid-row: 1; flex-direction: row; justify-content: center; padding: 62px 24px 28px; }
  .rp__tytul .rp__wstecz { position: absolute; top: 14px; left: 14px; margin: 0; padding: 0 10px; }
  .rp__tytul .rp__h { --tfs: 36px; margin: 0; line-height: 1.02; }
  .rp__pole--film { grid-column: 1; grid-row: 1 / span 3; padding: 60px 0; }
  .rp__ozd--tyl { left: -40px; top: 320px; width: 170px; filter: blur(3px); }
  .rp__ozd--przod { right: 8px; bottom: 26px; width: 136px; }
  .rp__ozd--gw1 { left: -70px; top: 0; width: 300px; stroke-width: .18; }
  .rp__ozd--gw2 { display: block; right: -30px; bottom: -20px; width: 170px; stroke-width: .28; }
  .rp__film { width: min(400px, calc(100% - 97px)); } /* 97 px: tyle zostaje wokół filmu w projekcie 1024 (pole 497, film 400) */
  .rp__stop { left: 12px; gap: 10px; padding: 0 18px 0 14px; }
  .rp__gw { right: -40px; top: -40px; width: 112px; height: 107px; }
  .rp__gw span { gap: 4px; }
  .rp__gw b { font-size: 26px; }
  .rp__gw i { font-size: 11px; }
  .rp__ig { padding: 0 16px; }
  .rp__ig .rp__kr { width: 7px; height: 7px; }
  .rp__fakty { grid-column: 2; grid-row: 2; }
  .rp__fakt { gap: 12px; min-height: 0; padding: 14px 16px 18px; }
  .rp__fakt dt .rp__kr { width: 6px; height: 6px; }
  .rp__fakt dd { font-size: 22px; }
  .rp__prod { grid-column: 2; grid-row: 3; }
  .rp__wstep { padding: 96px 40px 0; }
  .rp__wstep p { max-width: 820px; font-size: 26px; text-align: center; }
  .rp__stol { grid-template-columns: minmax(0, 520px); justify-content: center; margin-top: 80px; padding: 96px 24px 72px; }
  .rp__kartka { padding: 52px 28px 24px; }
  .rp__kartka--kroki { padding: 52px 32px 20px; }
  .rp__kroki li { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; }
  .rp__num { width: 40px; height: 40px; font-size: 16px; }
  .rp__kroki li > span:last-child { padding-top: 6px; }
  .rp__inne { padding: 96px 0; }
  .rp__rzad { margin-top: 40px; }
  .rp__rzad .pr__card { width: calc((100% - 20px) / 3); width: round(down, calc((100% - 20px) / 3), 1px); }
  .rp__blad { min-height: 240px; padding: 64px 32px 44px; }
  .rp__blad .rp__wstecz { top: 14px; left: 14px; }
  .rp__blad .rp__h { --tfs: 40px; }
  .rp__lead { font-size: 20px; }
  .rp__inne--blad { padding: 4px 0 96px; }
  .rp__inne--blad .pr__card { width: calc((100% - 30px) / 4); width: round(down, calc((100% - 30px) / 4), 1px); }
}
/* od 960 px mieszczą się obok siebie: słoik z tekstem w polu produktu (kolumna słoika 190) i dwie kartki (400 + 520, odstęp 36, pochylone o -1 i 0,75 stopnia) */
@media (min-width: 960px) {
  .rp__prod { display: grid; grid-template-columns: 190px minmax(0, 1fr); padding: 0; }
  .rp__scena { height: auto; padding-bottom: 36px; }
  .rp__sloik { width: var(--jw-t); height: var(--jh-t); }
  .rp__cien { bottom: -22px; height: 52px; }
  .rp__ptxt { padding: 26px 22px 22px 0; }
  .rp__tabl { margin-top: 0; padding: 0 14px; }
  .rp__tip { margin-bottom: 14px; font-size: 16px; }
  .rp__nazwa { margin-top: auto; }
  .rp__kup { height: 56px; }
  .rp__kup .rp__zl { font-size: 15px; }
  .rp__stol { grid-template-columns: minmax(0, 400fr) minmax(0, 520fr); gap: 36px; padding: 96px max(24px, calc((100% - 976px) / 2)) 72px; } /* 976 = 400 + 36 + 520 i 2 x 10 marginesu stołu */
  .rp__kartka--skl { --rot: -1deg; }
  .rp__kartka--kroki { --rot: .75deg; margin-top: 48px; }
  .rp__sloik2 { display: block; width: var(--jw-t); height: var(--jh-t); }
}

/* ----- układ 1440 (od 1025 px): pola 700 + 710 przy oknie 1440 x 900 ----- */
@media (min-width: 1025px) {
  .rp__ekran { grid-template-columns: minmax(0, 700fr) minmax(0, 710fr); grid-template-rows: minmax(330px, auto) minmax(140px, auto) minmax(326px, 1fr); }
  .rp__tytul { padding: 62px 32px 36px; }
  .rp__tytul .rp__h { --tfs: 54px; }
  .rp__pole--film { padding: 70px 0; }
  .rp__ozd--tyl { left: -46px; top: 372px; width: 230px; }
  .rp__ozd--przod { right: 22px; bottom: 34px; width: 180px; }
  .rp__ozd--gw1 { left: -80px; top: 10px; width: 380px; }
  .rp__ozd--gw2 { bottom: -24px; width: 220px; }
  .rp__film { width: min(520px, calc(100% - 97px)); }
  .rp__graj { gap: 12px; height: 56px; padding: 0 24px 0 20px; font-size: 13px; }
  .rp__graj svg { width: 16px; height: 16px; }
  .rp__stop { left: 14px; bottom: 36px; height: 48px; font-size: 11px; }
  .rp__stop svg { width: 14px; height: 14px; }
  .rp__gw { right: -58px; top: -52px; width: 144px; height: 138px; }
  .rp__gw span { gap: 5px; }
  .rp__gw b { font-size: 32px; }
  .rp__gw i { font-size: 13px; }
  .rp__ig { bottom: -24px; gap: 16px; height: 48px; }
  .rp__ig .rp__druk { font-size: 11px; }
  .rp__fakt { padding: 18px 20px 22px; }
  .rp__fakt dt { font-size: 12px; }
  .rp__fakt dd { font-size: 26px; }
  .rp__wstep { padding: 112px 40px 0; }
  .rp__wstep p { max-width: 980px; font-size: 32px; }
  .rp__stol { grid-template-columns: minmax(0, 520fr) minmax(0, 700fr); gap: 56px; margin-top: 100px; padding: 120px max(24px, calc((100% - 1296px) / 2)) 96px; } /* 1296 = 520 + 56 + 700 i 2 x 10 */
  .rp__kartka { padding: 56px 40px 28px; }
  .rp__kartka--skl { --rot: -1.5deg; }
  .rp__kartka--kroki { --rot: 1deg; margin-top: 56px; padding: 56px 44px 24px; }
  .rp__kh { top: -21px; gap: 20px; height: 42px; font-size: 15px; }
  .rp__kh .rp__kr { width: 7px; height: 7px; }
  .rp__kroki li { grid-template-columns: 44px minmax(0, 1fr); gap: 20px; }
  .rp__num { width: 44px; height: 44px; font-size: 18px; }
  .rp__kroki li > span:last-child { padding-top: 8px; }
  .rp__sloik2 { width: var(--jw-m); height: var(--jh-m); } /* słoik pod kartką: 200, tyle co słoik na telefonie */
  .rp__inne { padding: 120px 0; }
  .rp__ih { --ih: calc((100cqw - 60px) / var(--em, 7.68)); }
  .rp__ih b { -webkit-text-stroke-width: 2px; }
  .rp__rzad { margin-top: 48px; }
  .rp__blad { gap: 18px; min-height: 300px; padding: 72px 40px 56px; }
  .rp__blad .rp__h { --tfs: 54px; }
  .rp__lead { font-size: 22px; }
  .rp__inne--blad { padding: 4px 0 120px; }
}
/* pole produktu z miarami 1440 (kolumna słoika 300) dopiero od 1280 px: w węższej prawej kolumnie „do koszyka” by się nie zmieścił */
@media (min-width: 1280px) {
  .rp__prod { --lift: -14px; grid-template-columns: 300px minmax(0, 1fr); }
  .rp__scena { padding-bottom: 42px; }
  .rp__sloik { width: var(--jw-d); height: var(--jh-d); }
  .rp__ptxt { padding: 32px 30px 30px 0; }
  .rp__tabl { gap: 16px; height: 36px; font-size: 12px; }
  .rp__tabl .rp__kr { width: 6px; height: 6px; }
  .rp__tip { font-size: 17px; }
  .rp__nazwa { font-size: 13px; }
  .rp__kup { gap: 14px; height: 60px; padding: 0 22px; font-size: 14px; }
  .rp__kup .rp__zl { font-size: 16px; }
}

/* ----- ruch, raz (przepis.js dodaje .is-in): pola 24 px w górę z przenikaniem co 60 ms, film obraca się do -2 stopni, gwiazdka wyskakuje z odbiciem;
   kartki (bez zmiany krycia, tekst widać od początku) i karty wchodzą, gdy 12% stołu albo sekcji wejdzie w kadr.
   Bez skryptu i przy ograniczonym ruchu wszystko stoi od razu w stanie końcowym. ----- */
@media (prefers-reduced-motion: no-preference) {
  .rp.js .rp__ekran > * { opacity: 0; transform: translateY(24px); transition: opacity 480ms var(--e) var(--d, 0ms), transform 480ms var(--e) var(--d, 0ms); }
  .rp.js .rp__ekran > :nth-child(2) { --d: 60ms; }
  .rp.js .rp__ekran > :nth-child(3) { --d: 120ms; }
  .rp.js .rp__ekran > :nth-child(4) { --d: 180ms; }
  @media (min-width: 721px) { .rp.js .rp__ekran > :nth-child(1) { --d: 60ms; } .rp.js .rp__ekran > :nth-child(2) { --d: 0ms; } } /* w mozaice pierwszy idzie film, potem tytuł */
  .rp.js.is-in .rp__ekran > * { opacity: 1; transform: none; }
  .rp.js .rp__film { transform: rotate(0deg) scale(.97); transition: transform 700ms var(--e) 120ms; }
  .rp.js.is-in .rp__film { transform: rotate(-2deg); }
  .rp.js .rp__gw { transform: rotate(-50deg) scale(0); transition: transform 640ms var(--odbicie) 380ms; }
  .rp.js.is-in .rp__gw { transform: rotate(-12deg) scale(1); }
  .rp.js .rp__stol .rp__kartka { transform: rotate(0deg) translateY(40px); transition: transform 700ms var(--e); }
  .rp.js .rp__stol .rp__kartka--kroki { transition-delay: 120ms; }
  .rp.js .rp__stol.is-in .rp__kartka { transform: rotate(var(--rot)); }
  .rp.js .rp__inne .pr__card { transform: translateY(24px); transition: transform 480ms var(--e) calc(var(--i, 0) * 60ms); }
  .rp.js .rp__inne.is-in .pr__card { transform: none; }
}
/* bez ruchu: słoik się nie unosi, klaks i owoc pojawiają się w pełnym rozmiarze przez przenikanie 120 ms; pochylenia zostają.
   !important: site.css skraca przy ograniczonym ruchu wszystkie przejścia do 1 ms */
@media (prefers-reduced-motion: reduce) {
  .rp .rp__sloik { transform: none; }
  .rp .rp__klaks, .rp .rp__sloik > .rp__ow-przod { transform: none; opacity: var(--on); transition: opacity 120ms linear !important; }
}

/* ----- wydruk A4: czarno-biały przepis (blok .rp__a4), bez filmu, kolorów i przycisków; ekranowa wersja znika ----- */
.rp__a4 { display: none; }
@media print {
  @page { size: A4; margin: 16mm 19mm; }
  html, body { background: #fff !important; }
  .nav, .st, .rp--przepis > :not(.rp__a4) { display: none !important; }
  .rp__a4 { display: block; color: #000; font-size: 11pt; line-height: 1.5; }
  .rp__a4 header { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 8pt; border-bottom: 1pt solid #000; }
  .rp__a4 header b, .rp__a4-h, .rp__a4 h2, .rp__a4 ol b { font-family: var(--f-druk); font-weight: 500; }
  .rp__a4 header b { font-size: 11pt; }
  .rp__a4 header span { font-family: var(--f-mono); font-size: 9pt; }
  .rp__a4-h { margin: 20pt 0 8pt; font-size: 22pt; line-height: 1.05; text-transform: uppercase; text-wrap: balance; }
  .rp__a4-fakty { display: flex; flex-wrap: wrap; gap: 4pt 24pt; font-family: var(--f-mono); font-size: 10pt; }
  .rp__a4-wstep { max-width: 62ch; margin-top: 14pt; }
  .rp__a4-kol { display: grid; grid-template-columns: 36% minmax(0, 1fr); gap: 26pt; align-items: start; margin-top: 20pt; }
  .rp__a4 h2 { margin-bottom: 6pt; padding-bottom: 4pt; border-bottom: 1pt solid #000; font-size: 10pt; text-transform: uppercase; }
  .rp__a4 h2 ~ h2 { margin-top: 16pt; }
  .rp__a4 li { display: grid; gap: 6pt; break-inside: avoid; }
  .rp__a4 ul li { grid-template-columns: 12pt minmax(0, 1fr); padding: 4pt 0; }
  .rp__a4 ul i { width: 8pt; height: 8pt; margin-top: 4pt; border: 1pt solid #000; } /* kwadrat do odhaczania */
  .rp__a4 ol li { grid-template-columns: 18pt minmax(0, 1fr); padding: 5pt 0; }
  .rp__a4 ol b { font-size: 10pt; line-height: 1.6; }
}