/* recipes.css — «Рецепты» (8.B1–B3) and «Рецепт» (9.B1–B4) of the 017 demo (build P6, 27.09.2026). Rules: ../DESIGN.md.
   Motion: transform and opacity only. Static clip-paths below only hide stray bits at the edges of three drawings. */

/* ---------- 8.B1 head: icy air (R14), the drawings fly over the pick ---------- */
.rhead { min-height: 600px; padding-bottom: 150px; background: #e7eef6; }
.rhead .pattern { opacity: .06; }
.rhead__in { position: relative; z-index: 4; }
.rhead .phead__t { max-width: 7.4em; }
.rhead .t-promise { max-width: 27ch; }
.rhead .wave--bot { bottom: 0; transform: none; color: var(--paper); z-index: 3; }
.rhead .wave--bot svg { bottom: 0; }

.rfly { position: absolute; z-index: 5; right: calc(var(--g) - 10px); top: 22px; width: min(46vw, 640px); aspect-ratio: 640 / 500; pointer-events: none; }
.rfly__it { position: absolute; display: block; pointer-events: auto; cursor: pointer; will-change: transform; }
.rfly__in { position: relative; display: block; transform: rotate(var(--r, 0deg)); }
.rfly__it img { width: 100%; height: auto; filter: drop-shadow(0 18px 16px rgba(22, 36, 94, .14)); transition: transform .8s var(--out); }
.rfly__it:hover img, .rfly__it:focus-visible img { transform: scale(1.06) rotate(-3deg); }
.rfly__it--krab { left: 19%; top: 49%; width: 60%; --r: -3deg; }
.rfly__it--krevetki { left: 1%; top: 4%; width: 30%; --r: -14deg; }
.rfly__it--ryba { left: 57%; top: 2%; width: 41%; --r: 9deg; }
.rfly__it--grebeshok { left: 35%; top: 17%; width: 19%; --r: -8deg; }
.rfly__it--midii { left: 71%; top: 31%; width: 24%; --r: 11deg; }
.rfly .dot__card { min-width: 0; white-space: nowrap; padding: 10px 16px 11px; }
.rfly .dot__card b { font-size: 21px; }
.rfly .dot__card span { font-size: 13px; gap: 10px; }
.rfly .dot__card em { font-style: normal; }
.rfly__it:hover .dot__card, .rfly__it:focus-visible .dot__card { transform: none; opacity: 1; }
.rfly__shadow { position: absolute; left: 25%; top: 95%; width: 50%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(13, 26, 69, .2), rgba(13, 26, 69, 0)); }
.rfly__salt i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); opacity: .55; }
.rfly__salt i:nth-child(3n) { width: 3px; height: 3px; }
.rfly__salt i:nth-child(4n) { background: #fff; box-shadow: 0 0 0 1px rgba(22, 36, 94, .35); width: 6px; height: 6px; }
/* stray bit of the next drawing along the top edge of shrimp.webp */
.ico--shrimp { clip-path: inset(10.5% 0 0 0); }

/* ---------- 8.B1 pick: chips with the drawn products (S01), stuck under the header ---------- */
.rlist { position: relative; padding: 0 0 130px; }
.rbar { position: sticky; top: var(--hdr); z-index: 40; background: rgba(244, 238, 226, .94); backdrop-filter: blur(10px); }
.rbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink-3); }
.rbar__in { display: flex; align-items: center; min-height: 80px; }
.rchips { gap: 10px; }
.rchip { height: 52px; padding: 0 18px 0 12px; gap: 10px; font-size: 15px; border-radius: 26px; background: rgba(255, 255, 255, .55); }
.rchip:first-child { padding-left: 20px; }
.rchip img { height: 32px; width: auto; transition: transform .5s var(--out); }
.rchip:hover img { transform: rotate(-8deg) scale(1.08); }
.rchip.is-on img, .rchip:hover img { filter: brightness(0) invert(1); }
.rchip sup { font: 500 12px/1 var(--sans); opacity: .6; align-self: flex-start; margin-top: 13px; font-variant-numeric: tabular-nums; }

/* ---------- 8.B2 grid ---------- */
.rgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px 32px; padding-top: 56px; }
.rcard { position: relative; display: flex; flex-direction: column; }
.rcard[hidden] { display: none; }
.rcard__a { display: block; }
.rcard__img { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: var(--paper-2); isolation: isolate; box-shadow: 0 26px 50px -32px rgba(13, 26, 69, .5); }
.rcard__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--out); }
.rcard:hover .rcard__img img { transform: scale(1.05); }
.rcard__t { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-top: 20px; font: 500 27px/1.08 var(--serif); }
.rcard__t svg { flex: none; width: 20px; height: 20px; margin-top: 6px; color: var(--red); opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .5s var(--out); }
.rcard:hover .rcard__t svg, .rcard__a:focus-visible .rcard__t svg { opacity: 1; transform: none; }
.rcard__lead { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rtag { position: absolute; z-index: 2; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px 0 8px; border-radius: 19px; background: rgba(255, 255, 255, .93); color: var(--ink); font: 600 13px/1 var(--sans); letter-spacing: .03em; box-shadow: 0 10px 22px -12px rgba(13, 26, 69, .45); transition: transform .45s var(--out); }
.rtag img { height: 26px; width: auto; }
.rtag--text { padding-left: 15px; }
.rtag:hover { transform: translateY(-2px); }
.rtag:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 8.B3 «Привезём, научим!» — the specimen plate (R39) ---------- */
.rcut, .rmore { padding-bottom: 190px; }
.rcut__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.85fr); gap: 56px; align-items: center; }
.rcut__text .t-cap { display: block; margin-bottom: 18px; }
.rcut__text .t-promise { margin: 20px 0 34px; max-width: 26ch; color: var(--ink-2); }
.rcut__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 30px; }
.rcut__btns .btn { height: auto; min-height: 58px; padding: 14px 28px; white-space: normal; text-align: left; line-height: 1.25; }
.rcut__btns .btn__arr { flex: none; }
.rcut__price { opacity: .8; font-weight: 500; white-space: nowrap; }
.rcut__price:not(:empty)::before { content: "·"; margin-right: 10px; }
.rplate { position: relative; margin: 0; padding: 34px 40px 24px; background: var(--paper) url(../img/paper.webp); border: 1px solid var(--ink); border-radius: 3px;
  box-shadow: inset 0 0 0 7px var(--paper), inset 0 0 0 8px var(--ink), 0 50px 90px -46px rgba(13, 26, 69, .55); transform: rotate(.6deg); }
.rplate__rule { display: flex; align-items: center; gap: 16px; margin: 0 6px 26px; }
.rplate__rule::before, .rplate__rule::after { content: ""; flex: 1; height: 4px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.rplate__rule i::before { content: "◆"; font-style: normal; font-size: 10px; color: var(--red); }
.rplate__figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: end; }
.rplate__fig { display: grid; justify-items: center; gap: 14px; }
.rplate__fig img { width: 100%; height: auto; transition: transform .9s var(--out); }
.rplate__fig:hover img { transform: translateY(-6px) rotate(-2deg); }
.rplate__fig--1 img { width: 92%; }
.rplate__fig--3 img { width: 86%; }
/* stray bits of the neighbouring drawings at the edges of cut2 (right, bottom) and cut3 (left, middle) */
.rplate__fig--2 img { clip-path: polygon(0 0, 100% 0, 100% 83%, 93% 83%, 93% 100%, 0 100%); }
.rplate__fig--3 img { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 78%, 6.5% 78%, 6.5% 65%, 0 65%); }
.rplate__n { font: 500 22px/1 var(--serif); letter-spacing: .2em; color: var(--ink); }
.rplate__cap { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--ink-3); text-align: center; font-size: 14px; }
/* the footer follows right after the last section; its own top wave is clipped by .ftr{overflow:hidden} (base.css, reported),
   so the sea rises in waves inside the bottom of the last section */
.page-recipes .ftr, .page-recipe .ftr { margin-top: 0; }
.wave--sea { bottom: -1px; transform: none; color: var(--sea); z-index: 1; }

/* =================== 9 · Рецепт =================== */

/* ---------- 9.B1 photo and title — the head takes the style of its product's category (DESIGN «Стиль категорий») ---------- */
.rhero { position: relative; padding: 48px 0 170px; overflow: hidden; background: var(--paper-2) url(../img/paper.webp); }
.rhero .pattern { opacity: .07; }
.rhero--sea { background: var(--sea); color: #fff; }
.rhero--slate { background: #111d44; color: #fff; }
.rhero--sea .pattern, .rhero--slate .pattern { background-image: url(../img/pattern_w.webp); opacity: .06; }
.rhero--air { background: linear-gradient(180deg, #e7eef6, #f4f7fa); }
.rhero--sky { background: linear-gradient(180deg, #dfeaf7, #f4f7fa); }
.rhero--marble { background: #f7f3ec; }
.rhero__grid { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 64px; align-items: center; }
.rhero .crumbs { margin-bottom: 30px; }
.rhero--sea .crumbs, .rhero--slate .crumbs { color: rgba(255, 255, 255, .72); }
/* newspaper dateline — the homepage's (home.css), repeated here because this page does not load home.css */
.rhero .dateline { display: flex; gap: 22px; align-items: center; width: max-content; max-width: 100%; margin-bottom: 26px; padding: 10px 0; border-top: 1px solid currentColor; border-bottom: 4px double currentColor; }
.rhero .dateline span + span::before { content: "◆"; font-size: 8px; margin-right: 22px; color: var(--red); vertical-align: 2px; }
.rhero--sea .dateline span + span::before, .rhero--slate .dateline span + span::before { color: var(--coral); }
.rhero .dateline a { text-decoration: underline; text-underline-offset: 4px; }
.rhero__t { font-size: clamp(48px, 4.9vw, 80px); max-width: 10em; }
.rhero__lead { margin: 22px 0 0; max-width: 32ch; color: var(--ink-2); }
.rhero--sea .rhero__lead, .rhero--slate .rhero__lead { color: rgba(255, 255, 255, .8); }
.rhero__ph { position: relative; margin: 0; }
.rhero__frame { position: relative; aspect-ratio: 5 / 4; border-radius: 26px; overflow: hidden; background: var(--paper-2); box-shadow: 0 50px 90px -40px rgba(4, 10, 30, .65); transform: rotate(1.2deg); }
.rhero__frame img { width: 100%; height: 100%; object-fit: cover; }
.rhero__dot { left: 7%; top: 12%; }
.rhero__dot .dot__card { min-width: 250px; max-width: 330px; }
.rhero__dot .dot__card b { font-size: 21px; }
.rhero__decor { width: min(26vw, 360px); right: calc(var(--g) - 70px); top: -6px; opacity: .45; z-index: 1; transform: rotate(10deg); }
.rhero--sea .rhero__decor, .rhero--slate .rhero__decor { filter: brightness(0) invert(1); opacity: .2; }
.rhero .wave--bot { bottom: 0; transform: none; color: var(--paper); z-index: 2; }
.rhero .wave--bot svg { bottom: 0; }

/* ---------- 9.B2 ingredients + 9.B3 steps ---------- */
.rbody { padding-top: 70px; }
.rbody__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 90px; align-items: start; }
.ring { position: sticky; top: calc(var(--hdr) + 28px); padding: 34px 32px 32px; border-radius: 28px; background: rgba(255, 255, 255, .55); box-shadow: 0 1px 0 var(--ink-3); }
.ring.is-tall { position: relative; top: 0; }
.ring .t-h3 { margin-bottom: 18px; }
.ring__list { list-style: none; margin: 0; padding: 0; }
.ring__it { position: relative; padding: 11px 0 11px 22px; border-top: 1px solid var(--ink-3); font-size: 16.5px; line-height: 1.45; }
.ring__it::before { content: ""; position: absolute; left: 2px; top: 19px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); opacity: .35; }
.ring__it.is-sub { padding-left: 0; padding-top: 18px; font: 500 21px/1.2 var(--serif); }
.ring__it.is-sub::before { display: none; }
.ring__it.is-shop::before { left: 0; top: 16px; width: 12px; height: 12px; opacity: 1; background: var(--red); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--red); }
.ring__it.is-shop > span { font-weight: 600; }
.rprod { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 14px; align-items: center; margin: 10px 0 2px; padding: 8px; border-radius: 16px; background: var(--paper); }
.rprod__img { grid-row: span 2; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: var(--paper-2); }
.rprod__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--out); }
.rprod:hover .rprod__img img { transform: scale(1.08); }
.rprod__name { font: 500 18px/1.15 var(--serif); }
.rprod__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.rprod__buy { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ink-2); }
.rprod__buy .price { font-size: 16px; color: var(--ink); }
.rprod__buy .add { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 16px; }
.ring__extra { margin-top: 12px; }
.ring__extra .rprod { margin-top: 0; margin-bottom: 10px; }
.ring__cta { margin-top: 22px; }
.ring__btn { width: 100%; height: auto; min-height: 60px; padding: 14px 26px; white-space: normal; text-align: left; justify-content: space-between; line-height: 1.25; }
.ring__btn .num { white-space: nowrap; opacity: .85; }
.ring__btn svg { flex: none; width: 20px; height: 20px; }
.ring__btn .ck { display: none; }
.ring__btn.is-done .ck { display: block; animation: ckin .5s var(--out); }
.ring__btn.is-done .btn__arr { display: none; }
@keyframes ckin { from { transform: scale(.4) rotate(-20deg); opacity: 0; } }

.rsteps__t { font: 500 clamp(42px, 3.6vw, 58px)/1 var(--serif); margin: 6px 0 30px; }
.rsteps__list { list-style: none; margin: 0; padding: 0; counter-reset: st; }
.rsteps__list li { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; padding: 24px 0 26px; border-top: 1px solid var(--ink-3); font-size: 20px; line-height: 1.65; }
.rsteps__list li::before { counter-increment: st; content: counter(st, decimal-leading-zero); font: italic 500 40px/1 var(--serif); color: var(--cobalt); padding-top: 2px; }
.rsteps__tail { display: flex; align-items: center; gap: 22px; margin: 6px 0 0; padding-top: 28px; border-top: 4px double var(--ink); font: italic 400 clamp(34px, 3vw, 46px)/1.1 var(--serif); color: var(--cobalt); }
.rsteps__tail img { width: 120px; height: auto; flex: none; }
.rsteps__tail:empty { display: none; }

/* ---------- 9.B4 «Ещё с …» ---------- */
.rmore .rgrid { padding-top: 0; }
.rmore .head { margin-bottom: 44px; }

/* ---------- smaller screens (demo is desktop; keep it tidy) ---------- */
@media (max-width: 1100px) {
  .rfly { width: 44vw; top: 120px; }
  .rgrid { grid-template-columns: repeat(2, 1fr); }
  .rcut__grid, .rhero__grid, .rbody__grid { grid-template-columns: 1fr; }
  .ring { position: relative; top: 0; }
}
@media (max-width: 700px) {
  .rfly { position: relative; right: auto; top: auto; width: 100%; margin: -40px 0 0; }
  .rhead { padding-bottom: 110px; }
  .rgrid { grid-template-columns: 1fr; }
  .rbar__in { overflow-x: auto; }
  .rchips { flex-wrap: nowrap; }
  .rplate { padding: 24px 18px 18px; }
}