@layer sections {
  /* Product line (PROD-01, PROD-02, PROD-07; Figma PRRESENT 1/2/3, D-21 pixel-perfect).
     One template, three Figma compositions chosen by the modifier class: .line--image_left
     (protein), .line--image_right (nut), .line--image_center (chocolate). Literal Figma px:
     375 frame below 1024 px (phones and tablets share it; text centred, art on the edges), 1280
     frame from 1024 px (positions measured from the page centre). Badge colours arrive as
     validated #RRGGBB in the inline --badge-bg / --badge-fg on the section (T-04-09).

     Layers of the intro (Figma INTRO / BARS 1), bottom first, inside .line-intro:
       .line-bg (z 0)        INTRO gradient (::before), triangle (::after), floor/plane (__floor)
       .line-stage__art (1)  the flattened Figma art (streams + bars), at its Figma place
       .line-plane (2)       protein "Frame 46" plane over the bars, clipped like BARS 1
       text (3)              flag, headline, sub, signs, description, tagline
     The tastes block sits above the intro (z 1 on the section), as TASTES does in Figma. */

  /* --- Section --- */
  .line {
    /* Figma colours without a global token. */
    --line-grey-0: rgb(238 238 238 / 0);
    --line-floor-top: #fafafa;
    --line-floor-mid: #f0f0f0;
    --line-shade: rgb(0 0 0 / 0.028);
    --line-shade-soft: rgb(0 0 0 / 0.012);
    --line-shade-m: rgb(0 0 0 / 0.02);
    /* Below 1024 px the text of the 375 composition sits in a centred 375 px frame (--fx is
       its left edge), so every phone and tablet keeps Figma's line breaks; the art and its
       planes stay on the viewport edges. */
    --fx: max(0px, (100% - 375px) / 2);
    --frame: min(100%, 375px);
    /* Below 375 px the frame is narrower than Figma's: --cut (negative there, 0 from 375 px) moves
       the art and the planes it stands on out by the missing width, so they keep their place
       against the text and the viewport edge cuts them instead of the text running into them. */
    --cut: min(0px, 100% - 375px);
    /* Decorative art may bleed sideways (and up into the previous section, as in Figma), but
       never causes page-level horizontal scroll. */
    display: flow-root;
    overflow-x: clip;
    scroll-margin-top: 0;
    padding-bottom: 71.5px;
  }

  .line--image_right {
    margin-top: 10px;
    padding-bottom: 48.5px;
  }

  .line--image_center {
    margin-top: 31px;
    padding-bottom: 43.5px;
  }

  /* Focus target of the About category links (tabindex="-1"): no ring for programmatic focus,
     the 2 px ring when it arrives by keyboard (02-UI-REVIEW finding 7). */
  .line:focus:not(:focus-visible) {
    outline: none;
  }

  .line:focus-visible {
    outline: 2px solid var(--c-black);
    outline-offset: -2px;
  }

  /* --- A. Intro layers --- */
  .line-intro {
    position: relative;
    isolation: isolate;
  }

  .line-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  .line-bg::before,
  .line-bg::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
  }

  .line-bg__floor {
    position: absolute;
    z-index: 1;
    display: none;
  }

  /* Protein: #EEEEEE triangle under the Why section, the bars' floor band. The white or grey
     planes that meet another layer's edge start 1 px early (a 1 px band above the Figma top,
     the diagonal unchanged): two antialiased edges at the same fractional y leave a hairline
     seam on 2x screens, which Figma does not have. */
  .line--image_left .line-bg::after {
    top: -1px;
    width: 101.334%;
    height: 142px;
    background: var(--c-grey-150);
    clip-path: polygon(0 0, 100% 0, 100% 1px, 0 100%);
  }

  .line--image_left .line-bg__floor {
    display: block;
    left: calc(var(--cut) - 589.31px);
    top: 697.51px;
    width: 1786.91px;
    height: 400px;
    transform-origin: 0 0;
    transform: rotate(-3.8338deg);
    background: linear-gradient(
      180deg,
      var(--line-floor-top) 0,
      var(--line-floor-mid) 3px,
      var(--c-grey-150) 35px
    );
  }

  /* Nut and chocolate: the INTRO gradient (#EEEEEE to transparent) under a white triangle. */
  .line--image_right .line-bg::before,
  .line--image_center .line-bg::before {
    background: linear-gradient(180deg, var(--c-grey-150) 30%, var(--line-grey-0) 100%);
  }

  .line--image_right .line-bg::before {
    top: -6px;
    height: 1310px;
  }

  .line--image_right .line-bg::after {
    top: -7px;
    height: 132px;
    background: var(--c-white);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 1px);
  }

  /* Nut: the white plane the bars stand on (its part around the bars is in the art). */
  .line--image_right .line-bg__floor {
    display: block;
    right: calc(var(--cut) - 200px);
    top: 614.09px;
    width: 1200px;
    height: 381.58px;
    transform-origin: 100% 0;
    transform: rotate(5.6049deg);
    background: var(--c-white);
  }

  /* The plane's soft grey under its top edge (the art carries it around the bars; this
     continues it past the art's edge on wider screens). */
  .line--image_right .line-bg__floor::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      var(--line-shade-m) 10px,
      var(--line-shade-soft) 60px,
      transparent 110px
    );
  }

  .line--image_center .line-bg::before {
    top: -10px;
    height: 934px;
  }

  .line--image_center .line-bg::after {
    top: -11px;
    height: 236px;
    background: var(--c-white);
    clip-path: polygon(0 0, 100% 0, 100% 1px, 0 100%);
  }

  /* Protein "Frame 46": #EEEEEE → white plane over the bars' foot, clipped by BARS 1. */
  .line-plane {
    display: none;
  }

  .line--image_left .line-plane {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1332px;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
  }

  .line--image_left .line-plane::before {
    content: "";
    position: absolute;
    left: calc(var(--cut) - 379.64px);
    top: 707.6px;
    width: 1474.33px;
    height: 817.36px;
    transform-origin: 0 0;
    transform: rotate(-3.7437deg);
    background: linear-gradient(
      180deg,
      var(--line-grey-0) 0%,
      var(--c-grey-150) 5.775%,
      var(--c-white) 100%
    );
  }

  /* The flattened Figma art (decorative): boxes as printed by scripts/build_catalog_images.py. */
  .line-stage__art {
    position: absolute;
    z-index: 1;
    pointer-events: none;
  }

  .line-stage__picture,
  .line-stage__picture img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .line-stage__picture img {
    max-width: none;
    object-fit: cover;
  }

  .line--image_left .line-stage__art {
    left: calc(var(--cut) - 60px);
    top: -184px;
    width: 435px;
    height: 924px;
  }

  .line--image_right .line-stage__art {
    right: var(--cut);
    top: -197px;
    width: 480px;
    height: 1175.5px;
  }

  /* Chocolate below 1024: the same bar stack, mirrored, cut by the left edge. */
  .line--image_center .line-stage__art {
    left: calc(var(--cut) - 211px);
    top: 155px;
    width: 361.225px;
    height: 331px;
  }

  .line--image_center .line-stage__picture img {
    transform: scaleX(-1);
  }

  /* Optional decor layers: desktop only, never above the stage (see >=1024). */
  .line-stage__decor {
    display: none;
  }

  /* --- A. Stage text --- */
  .line-stage__text,
  .line-desc,
  .line-tagline {
    position: relative;
    z-index: 3;
  }

  .line-stage__text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: var(--frame);
    margin-inline: auto;
    padding: 151px 40px 0 0;
    text-align: right;
  }

  .line--image_right .line-stage__text {
    align-items: flex-start;
    padding: 125px 0 0 40px;
    text-align: left;
  }

  .line--image_center .line-stage__text {
    padding-top: 135px;
  }

  /* Flag: wordmark over the badge plank. */
  .line-flag {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    width: 115px;
  }

  .line--image_center .line-flag {
    margin-right: -2px;
  }

  /* --logo-w (template) is the wordmark width in the 180 px desktop flag; the 115 px mobile
     flag scales it the way Figma does (115 / 180 wide, 10 / 15 tall). */
  .line-flag__logo {
    align-self: center;
    width: calc(var(--logo-w) / 180 * 100%);
    max-width: none;
    height: 10px;
    object-fit: fill;
  }

  .line-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 23px;
    background: var(--badge-bg);
    color: var(--badge-fg);
    font-size: 12px;
    line-height: 22px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* Figma sets the plank text 1 px lower than an exact centre (7 px into the 35 px plank). */
  .line-flag .line-badge {
    padding-top: 1px;
  }

  /* Figma drops the letter-spacing after a line's last letter; CSS keeps it, so right-aligned
     headlines are one letter-spacing wider and pulled right by it (the ink ends on the edge). */
  .line-stage__headline {
    width: 231.3px;
    margin-top: 48px;
    margin-right: -2.3px;
    font-size: 23px;
    line-height: 28px;
    font-weight: 500;
    letter-spacing: 2.3px;
    text-transform: uppercase;
  }

  .line--image_right .line-stage__headline {
    width: 258px;
    margin-right: 0;
  }

  /* Chocolate (375): Figma keeps the trailing letter-spacing on its one soft-wrapped line
     («ЯКИЙ ЛАМАЄ») and drops it at the hand break and the text end, so the box does not hang;
     the hooks before the hand breaks (span.vb-end, catalog.break_hooks) and the end carry -ls. */
  .line--image_center .line-stage__headline {
    width: 314.3px;
    margin-top: 59px;
    margin-right: 0;
  }

  .line--image_center .line-stage__headline::after {
    content: "";
  }

  .line--image_center .line-stage__headline::after,
  .line--image_center .line-stage__headline .vb-end {
    margin-right: -2.3px;
  }

  .line-stage__sub {
    width: 229px;
    margin-top: 30px;
    font-size: 12px;
    line-height: 15px;
    font-weight: 400;
    text-transform: uppercase;
  }

  .line--image_center .line-stage__sub {
    width: auto;
  }

  .line-signs {
    display: flex;
    column-gap: 20px;
    margin-top: 61px;
    list-style: none;
    padding: 0;
  }

  .line--image_center .line-signs {
    margin-top: 51px;
  }

  .line-signs__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 5px;
    text-align: center;
  }

  /* Inline SVG (38-unit paths, non-scaling stroke): Figma's 1.5 px stroke on the 24 px icon. */
  .line-signs__icon {
    flex: none;
    width: 24px;
    height: 24px;
    stroke-width: 1.5px;
  }

  /* Figma breaks the labels by hand on mobile ("Premium⏎quality", "NO ADDED⏎SUGAR"): the
     label boxes keep those Figma widths. */
  .line-signs__label {
    font-size: 7px;
    line-height: 9px;
    font-weight: 600;
    text-transform: uppercase;
  }

  .line-signs__item--quality .line-signs__label {
    width: 36px;
  }

  .line-signs__item--no-sugar .line-signs__label {
    width: 41px;
  }

  /* --- B. Description --- */
  .line-desc {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 50px;
    width: calc(var(--frame) - 40px);
    margin: 207px auto 0;
    font-size: 14px;
    line-height: 17px;
  }

  .line--image_right .line-desc {
    row-gap: 30px;
    margin-left: calc(var(--fx) + 25px);
  }

  /* Chocolate: Figma's left text ends with an empty line (+21 px before the title). */
  .line--image_center .line-desc {
    row-gap: 51px;
    margin-top: 57px;
  }

  /* Figma fits «… суперфуди та без» into the 335 box with no room to spare; Chrome needs a
     hair more. */
  .line--image_center .line-desc__left {
    margin-right: -1px;
  }

  .line-desc :is(strong, b) {
    font-weight: 700;
  }

  /* Chrome sets these sizes about 1 px higher in their line than Figma: nudge the ink only. */
  .line-desc__left,
  .line-desc__title,
  .line--image_right .line-desc__list,
  .line--image_center .line-desc__list,
  .line-tagline {
    translate: 0 1px;
  }

  .line-desc__left :is(p, ul, ol) + :is(p, ul, ol) {
    margin-top: 17px;
  }

  .line-desc__title {
    font-weight: 700;
  }

  .line-desc__list {
    margin-top: 22px;
  }

  .line--image_left .line-desc__list {
    font-size: 13px;
    line-height: 16px;
  }

  .line-desc__list ul {
    list-style: none;
    padding: 0;
  }

  .line-desc__list li {
    position: relative;
    padding-inline-start: 1.5em;
  }

  .line-desc__list li::before {
    content: "•";
    position: absolute;
    left: 0.6em;
  }

  .line-desc__list :is(p, ul, ol) + :is(p, ul, ol) {
    margin-top: 17px;
  }

  /* --- C. Tagline --- */
  .line-tagline {
    width: calc(var(--frame) - 40px);
    margin: 64px auto 0;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    text-align: center;
  }

  .line--image_right .line-tagline {
    margin: 56px 0 0 calc(var(--fx) + 25px);
  }

  /* Figma's protein tagline keeps a space before its mobile hand breaks («BITE - ⏎»,
     «шукають ⏎») and centres those lines with it; pre-wrap keeps the space vbreaks puts before
     each <br> (the copy has single spaces and no newlines, D-16). */
  .line--image_left .line-tagline {
    white-space: pre-wrap;
  }

  .line--image_center .line-tagline {
    margin-top: 52px;
  }

  /* --- D. Flavour grid --- */
  .tastes {
    position: relative;
    z-index: 1;
    margin-top: 110px;
  }

  .line--image_right .tastes {
    margin-top: 109px;
  }

  .line--image_center .tastes {
    margin-top: 113px;
  }

  .tastes__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(var(--frame) - 40px);
    margin-inline: auto;
    text-align: center;
  }

  .line-badge.line-badge--sm {
    width: 87px;
    height: 20px;
    font-size: 9px;
    font-weight: 800;
  }

  /* Figma centres a hand-broken (and the last) line without its trailing letter-spacing, a
     soft-wrapped one with it; CSS always counts it. padding-left moves the lines right by half of
     it: 1.5 px splits the protein / nut titles (one soft line each, +0.75 / -0.25 px), the
     chocolate title (hand breaks only) takes the full 2 px. */
  .tastes__title {
    margin-top: 22px;
    padding-left: 1.5px;
    font-size: 20px;
    line-height: 24px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
  }

  .line--image_center .tastes__title {
    padding-left: 2px;
  }

  .tastes__sub {
    margin-top: 22px;
    font-size: 12px;
    line-height: 15px;
    font-weight: 400;
    text-transform: uppercase;
  }

  /* Incomplete last rows centre by themselves: no spacer cells. */
  .flavour-grid {
    --cols: 2;
    --col-gap: 25px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: var(--col-gap);
    row-gap: 40px;
    width: 325px;
    max-width: 100%;
    margin: 66px auto 0;
    list-style: none;
    padding: 0;
  }

  .line--image_center .flavour-grid {
    margin-top: 70px;
  }

  .flavour-grid__item {
    flex: 0 0 calc((100% - (var(--cols) - 1) * var(--col-gap)) / var(--cols));
    min-width: 0;
  }

  .flavour-card {
    /* Hover / press lift; reduced motion sets both to 0. */
    --card-lift: -4px;
    --card-press: -2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    text-align: center;
    color: inherit;
    text-decoration: none;
  }

  .flavour-card__media {
    width: 100%;
    aspect-ratio: 1073 / 636;
    transition: transform 150ms ease;
  }

  .flavour-card__img {
    display: block;
  }

  .flavour-grid--cut_with_tag .flavour-card__img,
  .flavour-grid--cut_with_tag .flavour-card__img img {
    width: 100%;
    height: 100%;
  }

  .flavour-grid--cut_with_tag .flavour-card__img img {
    object-fit: contain;
    object-position: 50% 50%;
  }

  /* Chocolate illustrations: each drawn at its own Figma size (the source is a 2x export, so
     half its pixel size on desktop) and standing on the name, like Figma's bottom-aligned PIC
     frames; the row is as tall as its tallest card. */
  .flavour-grid--illustration .flavour-card {
    justify-content: flex-end;
  }

  .flavour-grid--illustration .flavour-card__media {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    height: var(--pic-h, auto);
    aspect-ratio: auto;
  }

  /* The <img> keeps the width/height attributes of its source (no CSS width): zoom halves
     the 2x export on desktop and applies Figma's mobile scale below 1024 (about 0.86; per
     flavour below). --art-dx / --art-dy move the art off its centred, bottom-aligned spot. */
  .flavour-grid--illustration .flavour-card__img {
    flex: none;
    max-width: none;
    position: relative;
    left: var(--art-dx, 0px);
    top: var(--art-dy, 0px);
  }

  .flavour-grid--illustration .flavour-card__img img {
    display: block;
    max-width: none;
    zoom: var(--art-zoom, 0.43);
  }

  /* Figma's mobile chocolate cards (TASTES / CUTS 1, keyed by the flavour slug): the PIC box
     height of each card and the scale of its group against the desktop export (rows 226 / 250 /
     226 px). The strawberry art is re-arranged in Figma's mobile group; it is matched on its big
     bar. Flavours without a rule keep the generic 0.43 scale. */
  .line--image_center [data-flavour="raspberry"] {
    --pic-h: 151px;
    --art-zoom: 0.432;
    --art-dx: -0.6px;
  }

  .line--image_center [data-flavour="orange"] {
    --pic-h: 170px;
    --art-zoom: 0.4428;
    --art-dx: -0.6px;
    --art-dy: 1.3px;
  }

  .line--image_center [data-flavour="strawberry"] {
    --pic-h: 190px;
    --art-zoom: 0.4487;
    --art-dx: 0.5px;
    --art-dy: -2.3px;
  }

  .line--image_center [data-flavour="matcha-mango"] {
    --pic-h: 190px;
    --art-zoom: 0.427;
    --art-dx: -0.3px;
    --art-dy: 0.9px;
  }

  .line--image_center [data-flavour="blueberry"] {
    --pic-h: 170px;
    --art-zoom: 0.431;
    --art-dx: 0.4px;
    --art-dy: 0.3px;
  }

  /* Figma's matcha name box is 17 px tall (a fixed box from desktop), so that card's art and
     name sit 4 px above its neighbour's. */
  .line--image_center [data-flavour="matcha-mango"] .flavour-card__name {
    min-height: 17px;
  }

  .flavour-card__name,
  .flavour-card__desc {
    display: block;
    width: 100%;
    font-size: 11px;
    line-height: 13px;
  }

  .flavour-card__name {
    margin-top: 2px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .flavour-grid--illustration .flavour-card__name {
    margin-top: 15px;
  }

  .flavour-card__desc {
    margin-top: 2px;
    font-weight: 400;
  }

  /* Figma's МИГДАЛЬ-ЖУРАВЛИНА description ends its first line with a stray CR («шоколаді\r⏎»)
     and centres the line with it: pre-wrap keeps the space vbreaks puts before the <br>, which
     moves the line left by the same half space (the copy has single spaces, D-16). */
  .line--image_right [data-flavour="almond-cranberry"] .flavour-card__desc {
    white-space: pre-wrap;
  }

  /* Protein cards are set in the second face on mobile (D-22). */
  .line--image_left .flavour-card__name,
  .line--image_left .flavour-card__desc {
    font-family: var(--font-alt);
  }

  .flavour-card--link {
    cursor: pointer;
  }

  @media (hover: hover) {
    .flavour-card--link:hover {
      text-decoration: none;
    }

    .flavour-card--link:hover .flavour-card__media {
      transform: translateY(var(--card-lift));
    }

    .flavour-card--link:hover .flavour-card__name {
      text-decoration: underline 1px;
      text-underline-offset: 4px;
    }
  }

  .flavour-card--link:active .flavour-card__media {
    transform: translateY(var(--card-press));
  }

  .flavour-card--link:focus-visible {
    outline: 2px solid var(--c-black);
    outline-offset: 4px;
    border-radius: var(--radius-btn);
  }

  @media (prefers-reduced-motion: reduce) {
    .flavour-card {
      --card-lift: 0px;
      --card-press: 0px;
    }

    .flavour-card__media {
      transition: none;
    }
  }

  /* --- F. CTA row --- */
  /* Figma CTA BUTTONS: stacked, centred, each button hugging its label. --cta-gap is Figma's
     distance from the SLIDER frame bottom to CTA BUTTONS (the .slider box is that frame). */
  .line-ctas {
    --cta-gap: 32.5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: var(--cta-gap);
  }

  .line--image_right .line-ctas,
  .line--image_center .line-ctas {
    --cta-gap: 12.5px;
  }

  /* --- Desktop (>=1024 px): the 1280 frame, measured from the page centre --- */
  @media (min-width: 1024px) {
    .line {
      padding-bottom: 0;
    }

    .line--image_right {
      margin-top: 112px;
      padding-bottom: 76px;
    }

    .line--image_center {
      margin-top: 65px;
      padding-bottom: 48px;
    }

    /* Layers */
    .line--image_left .line-bg::after {
      width: 100%;
      height: 188px;
    }

    .line--image_left .line-bg__floor {
      left: calc(50% - 1586.68px);
      top: 815.74px;
      width: 3262.39px;
      height: 700px;
      background: linear-gradient(
        180deg,
        var(--line-floor-top) 0,
        var(--line-floor-top) 2px,
        var(--line-floor-mid) 6.5px,
        var(--c-grey-150) 61px
      );
    }

    .line--image_right .line-bg::before {
      top: 0;
      height: 1135px;
    }

    .line--image_right .line-bg::after {
      top: -1px;
      height: 192px;
    }

    .line--image_right .line-bg__floor {
      right: auto;
      left: calc(50% - 1340px);
      top: 452.47px;
      width: 3000px;
      height: 716.96px;
      transform-origin: 0 0;
    }

    /* Desktop: deeper grey that fades out to the left (the art carries it from x 560). */
    .line--image_right .line-bg__floor::before {
      background: linear-gradient(
        180deg,
        var(--line-shade) 30px,
        var(--line-shade-soft) 160px,
        transparent 280px
      );
      mask-image: linear-gradient(
        90deg,
        transparent 650px,
        rgb(0 0 0 / 0.4) 800px,
        rgb(0 0 0 / 0.7) 1000px,
        black 1120px
      );
    }

    .line--image_center .line-bg::before {
      top: 10px;
    }

    .line--image_center .line-bg::after {
      top: 9px;
      height: 254px;
    }

    .line--image_left .line-plane {
      top: 6px;
      height: 1688px;
    }

    .line--image_left .line-plane::before {
      left: calc(50% - 1350.64px);
      top: 849.25px;
      width: 2592.86px;
    }

    .line--image_left .line-stage__art {
      left: calc(50% - 760px);
      top: -617.35px;
      width: 880px;
      height: 1485.55px;
    }

    .line--image_right .line-stage__art {
      right: auto;
      left: calc(50% - 80px);
      top: -669.7px;
      width: 880px;
      height: 1785.85px;
    }

    .line--image_center .line-stage__art {
      left: calc(50% - 273px);
      top: 10px;
      width: 509px;
      height: 466px;
    }

    .line--image_center .line-stage__picture img {
      transform: none;
    }

    /* Wide screens: the protein raster's left edge comes into view past 1520 px (50% - 760px > 0)
       and the nut raster's right edge past 1600 px (50% + 800px < 100%). The art fades out over
       that visible distance (up to 200 / 176 px), so streams and the nut plane run into the
       background instead of ending on a straight cut. Up to those widths the fade is 0 px and the
       mask fully opaque (the 1280 frame is unchanged).
       The protein raster's first 80 px hold two streams cut flat at the top by Figma's crop
       (off-screen at <= 1280, where raster x < 120 sits left of the viewport): they stay hidden
       (transparent to 85 px) and the art fades in by 120 px at the least, so from 1281 px on no
       flat top shows. */
    .line--image_left .line-stage__picture {
      mask-image: linear-gradient(
        90deg,
        transparent 85px,
        black max(120px, clamp(0px, 50vw - 760px, 200px))
      );
    }

    .line--image_right .line-stage__picture {
      mask-image: linear-gradient(270deg, transparent, black clamp(0px, 50vw - 800px, 176px));
    }

    .line-stage__decor {
      display: block;
      position: absolute;
      top: 0;
      z-index: 0;
      width: clamp(160px, 18vw, 280px);
      pointer-events: none;
    }

    .line-stage__decor img {
      display: block;
      width: 100%;
      height: auto;
    }

    /* WR-01: decor 2 sits at the bottom of the stage, so the two layers never overlap. */
    .line-stage__decor--2 {
      top: auto;
      bottom: 0;
    }

    .line--image_left .line-stage__decor {
      left: 8vw;
    }

    .line--image_right .line-stage__decor {
      right: 8vw;
    }

    /* Centred art: decor 1 on the left, decor 2 on the right. */
    .line--image_center .line-stage__decor--1 {
      left: 8vw;
    }

    .line--image_center .line-stage__decor--2 {
      right: 8vw;
    }

    /* Stage text */
    /* Text columns at their 1280 place, kept 32 px off the viewport edge below ~1100 px. */
    .line-stage__text {
      width: 597px;
      margin: 0 0 0 min(50% - 97px, 100% - 629px);
      padding: 177px 0 0;
    }

    .line--image_right .line-stage__text {
      width: 700px;
      margin-left: max(32px, 50% - 510px);
      padding: 157px 0 0;
    }

    /* Chocolate: flag and signs on the left, headline and sub on the right. */
    .line--image_center .line-stage__text {
      display: grid;
      grid-template-columns: 180px minmax(0, 1fr) 312px;
      align-items: start;
      width: min(1055px, 100% - 64px);
      margin-left: max(32px, 50% - 542px);
      padding: 106px 0 0;
    }

    .line--image_center .line-flag {
      grid-area: 1 / 1;
      margin-right: 0;
    }

    .line--image_center .line-stage__headline {
      grid-area: 1 / 3;
      margin-top: 56px;
    }

    .line--image_center .line-stage__sub {
      grid-area: 2 / 3;
      justify-self: end;
      margin-top: 45px;
    }

    .line--image_center .line-signs {
      grid-area: 2 / 1;
      justify-self: start;
      margin-top: 27px;
    }

    .line-flag {
      row-gap: 12px;
      width: 180px;
    }

    .line-flag__logo {
      height: 15px;
    }

    .line-badge {
      height: 35px;
      font-size: 20px;
    }

    .line-stage__headline,
    .line--image_right .line-stage__headline {
      width: calc(100% + 3.8px);
      margin-top: 77px;
      margin-right: -3.8px;
      font-size: 38px;
      line-height: 46px;
      letter-spacing: 3.8px;
    }

    .line--image_right .line-stage__headline {
      width: 100%;
      margin-top: 78px;
      margin-right: 0;
    }

    .line--image_center .line-stage__headline {
      width: 315.8px;
      margin-right: -3.8px;
    }

    .line--image_center .line-stage__headline::after,
    .line--image_center .line-stage__headline .vb-end {
      margin-right: 0;
    }

    /* Chrome sets these sizes about 1 px higher in their line than Figma: nudge the ink only. */
    .line-stage__headline,
    .line-stage__sub,
    .line-signs__label,
    .flavour-card__name,
    .flavour-card__desc,
    .line--image_right .tastes__sub,
    .line--image_center .tastes__sub {
      translate: 0 1px;
    }

    .line-stage__sub {
      width: 100%;
      margin-top: 45px;
      font-size: 17px;
      line-height: 21px;
    }

    .line-signs {
      column-gap: 13px;
      margin-right: -9px;
    }

    .line--image_right .line-signs {
      margin: 121px 0 0 28px;
    }

    .line-signs__item {
      width: 79px;
    }

    .line-signs__icon {
      width: 38px;
      height: 38px;
      stroke-width: 2px;
    }

    .line-signs__label,
    .line-signs__item--quality .line-signs__label,
    .line-signs__item--no-sugar .line-signs__label {
      width: 100%;
      font-size: 10px;
      line-height: 12px;
    }

    .line-signs__label .br-m {
      display: none;
    }

    /* Description: 490 | 72 | 490, centred. Below ~1100 px the gap closes to 24 px first, then
       the left text column gives way, so the list keeps its 490 px lines (no one-word orphans). */
    .line-desc,
    .line--image_right .line-desc,
    .line--image_center .line-desc {
      grid-template-columns: minmax(0, 1fr) minmax(0, 490px);
      justify-content: center;
      column-gap: clamp(24px, 100% - 980px, 72px);
      width: min(1052px, 100% - 64px);
      margin: 197px auto 0;
      font-size: 16px;
      line-height: 20px;
    }

    .line--image_right .line-desc {
      margin-top: 50px;
    }

    .line--image_center .line-desc {
      margin-top: 160px;
    }

    .line-desc__left,
    .line--image_center .line-desc__left {
      margin-right: 0;
      text-align: right;
    }

    .line-desc__left :is(p, ul, ol) + :is(p, ul, ol) {
      margin-top: 20px;
    }

    .line-desc__list,
    .line--image_left .line-desc__list {
      font-size: 15px;
      line-height: 18px;
    }

    .line--image_right .line-desc__list,
    .line--image_center .line-desc__list {
      translate: none;
    }

    .line-desc.line-desc--single {
      grid-template-columns: minmax(0, 1fr);
    }

    .line-desc--single .line-desc__left {
      text-align: left;
    }

    /* Tagline */
    .line-tagline,
    .line--image_right .line-tagline,
    .line--image_center .line-tagline {
      width: 771px;
      max-width: calc(100% - 64px);
      margin: 118px 0 0 max(32px, 50% - 384px);
      font-size: 22px;
      line-height: 27px;
      translate: none;
    }

    .line--image_left .line-tagline {
      white-space: normal;
    }

    .line--image_right .line-tagline {
      width: 624px;
      margin: 119px 0 0 calc(50% - 312px);
    }

    /* Figma's chocolate left text ends with an empty 23 px line before the tagline's 95 px. */
    .line--image_center .line-tagline {
      width: 785px;
      margin: 118px 0 0 max(32px, 50% - 392px);
    }

    /* Tastes */
    .tastes {
      margin-top: 151px;
    }

    .line--image_right .tastes {
      margin-top: 123px;
    }

    .line--image_center .tastes {
      margin-top: 109px;
    }

    .tastes__head {
      width: min(676px, 100% - 64px);
    }

    .line-badge.line-badge--sm {
      width: 120px;
      height: 24px;
      font-size: 12px;
    }

    /* Nut and chocolate badges are set in the second face on desktop (D-22). */
    .line--image_right .line-badge--sm,
    .line--image_center .line-badge--sm {
      font-family: var(--font-alt);
    }

    /* Figma's nut FLAG box sits 1 px right of the centre while its text does not: the box moves,
       the 2 px right padding keeps the text centred where it was. */
    .line--image_right .line-badge--sm {
      translate: 1px 0;
      padding-right: 2px;
    }

    /* Hand breaks only on desktop: the full letter-spacing; the nut box (Figma 354..927) is
       centred at 640.5. */
    .tastes__title,
    .line--image_center .tastes__title {
      margin-top: 27px;
      padding-left: 3.2px;
      font-size: 32px;
      line-height: 39px;
      letter-spacing: 3.2px;
    }

    .line--image_right .tastes__title {
      padding-left: 4.2px;
    }

    .tastes__sub {
      margin-top: 27px;
      font-size: 15px;
      line-height: 18px;
    }

    /* Figma centres the nut subtitle 1 px right of the page centre (box 446..836). */
    .line--image_right .tastes__sub {
      margin-top: 26px;
      padding-left: 2px;
    }

    .line--image_right .tastes__sub,
    .line--image_center .tastes__sub {
      font-size: 14px;
      line-height: 17px;
    }

    /* Protein: 60 px gaps at 1280; narrower screens close them (down to 40 px) before the
       205 px cards shrink, so their Figma line breaks hold from 1024 px. The formula aims at
       4 × 204.875 px cards: its 60.17 px at 1000 px is clamped to an exact 60 (an exact
       (100% - 820px) / 3 rounds to 59.98 and moves the 1280 cards by 0.02 px). */
    .flavour-grid {
      --cols: var(--per-row);
      --col-gap: clamp(40px, (100% - 819.5px) / 3, 60px);
      row-gap: 55px;
      width: min(1000px, 100% - 64px);
      margin-top: 110px;
    }

    .line--image_right .flavour-grid,
    .line--image_center .flavour-grid {
      --col-gap: 30px;
      row-gap: 35px;
      width: min(1121px, 100% - 64px);
    }

    /* Figma's nut CUTS row starts at x 80 (centre 640.5) and its third card is 201 wide:
       200, 200, 201, 200, 200 with 30 gaps. */
    .line--image_right .flavour-grid {
      margin: 101px auto 0 max(32px, 50% - 560px);
    }

    .line--image_right .flavour-grid__item:first-child:nth-last-child(5),
    .line--image_right .flavour-grid__item:first-child:nth-last-child(5) ~ .flavour-grid__item {
      flex-basis: calc((100% - 120px) * 200 / 1001);
    }

    .line--image_right
      .flavour-grid__item:first-child:nth-last-child(5)
      ~ .flavour-grid__item:nth-child(3) {
      flex-basis: calc((100% - 120px) * 201 / 1001);
    }

    .line--image_center .flavour-grid {
      margin-top: 79px;
    }

    /* Cut images: 250 × 148 over a 205 (protein) / 200 (nut) card. */
    .flavour-card__media {
      flex: none;
      width: calc(100% * 250 / 205);
    }

    .line--image_right .flavour-card__media {
      width: calc(100% * 250 / 200);
    }

    .line--image_right
      .flavour-grid__item:first-child:nth-last-child(5)
      ~ .flavour-grid__item:nth-child(3)
      .flavour-card__media {
      width: calc(100% * 250 / 201);
    }

    /* Figma's desktop cut boxes are 250 × 148 (the export's own ratio would give 148.18, and the
       rows below would creep down). */
    .flavour-grid--cut_with_tag .flavour-card__media {
      aspect-ratio: 250 / 148;
      min-height: 0;
    }

    .flavour-grid--illustration .flavour-card__media {
      width: 100%;
      height: auto;
    }

    .flavour-grid--illustration .flavour-card__img {
      left: 0;
      top: 0;
    }

    .flavour-grid--illustration .flavour-card__img img {
      zoom: 0.5;
    }

    .flavour-card__name,
    .flavour-card__desc,
    .line--image_left .flavour-card__name,
    .line--image_left .flavour-card__desc {
      font-family: var(--font);
      font-size: 14px;
      line-height: 17px;
    }

    .flavour-grid--illustration .flavour-card__name {
      margin-top: 20px;
    }

    /* Figma's desktop МАЛИНА-ЖУРАВЛИНА description wraps at a run of spaces and centres its
       first line with one of them (its 375 card does not): pre-wrap keeps the space vbreaks puts
       before the <br>. */
    .line--image_left [data-flavour="raspberry-cranberry"] .flavour-card__desc {
      white-space: pre-wrap;
    }

    /* Nut names keep one line on a 200 px card: Figma lets the name box run 17 px past it
       («АРАХІС - СОЛОНА КАРАМЕЛЬ» is 234 wide). On narrower cards (1024..1100 px screens) the box
       keeps those 234 px, up to half the gap on each side, so the name does not wrap and push its
       description a line below its neighbours'; from 200 px cards it is the card + 34 px. */
    .line--image_right .flavour-card__name {
      width: clamp(100% + 34px, 234px, 100% + 34px + var(--col-gap));
    }

    /* Nut and chocolate descriptions break by hand only (markers): on cards narrower than Figma's
       200 px (1024..1100 px screens) they keep a 200 px box, up to half the gap on each side, so
       they do not gain a line and lift the title; from 200 px cards the box is the card. */
    .line--image_right .flavour-card__desc,
    .line--image_center .flavour-card__desc {
      width: clamp(100%, 200px, 100% + var(--col-gap));
    }

    /* CTA row */
    .line-ctas,
    .line--image_right .line-ctas {
      --cta-gap: 56px;
      flex-direction: row;
      justify-content: center;
      gap: 41px;
    }

    .line--image_center .line-ctas {
      --cta-gap: 16px;
      flex-direction: row;
      justify-content: center;
      gap: 41px;
    }

    /* Protein: Figma's PRRESENT 1 frame ends 19 px above the buttons' bottom edge. */
    .line--image_left .line-ctas {
      margin-bottom: -19px;
    }
  }
}