/* /pierogi/ — pełny katalog 19/19: intro ze spisem smaków, przyklejony filtr, duże moduły klasyków, karty (trio / duet),
   Firmowe w Malinie, „Na słodko” na Cieście (przejście jak przełożenie strony menu), finał z zamówieniem.
   Tokeny i komponenty (przyciski, .tag, .link) z main.css — bez nowego systemu. Mobile-first; progi: 640 / 768 / 1024. */

@layer sections {

  /* ═════════ A. INTRO — bez zdjęcia (pierwszy obraz strony to od razu produkt z CTA)
     Telefon: okruszki → H1 → zdanie o ofercie → spis smaków. Desktop: H1 i zdanie po lewej, spis po prawej, do dołu. ═════════ */
  .pg-intro { padding: clamp(1rem, 0.6rem + 1.6vw, 2.5rem) 0 clamp(1.75rem, 1rem + 2.5vw, 3rem); }
  .pg-intro__grid { display: grid; gap: 1.75rem; grid-template-columns: minmax(0, 1fr); }
  .pg-intro__text { display: grid; gap: 1rem; justify-items: start; }
  .pg-intro__title {
    font-size: clamp(3rem, 1.7rem + 6.2vw, 6.75rem); font-weight: 650; line-height: 0.94; letter-spacing: -0.022em;
    text-wrap: balance;
  }
  .pg-intro__lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--color-text-muted); max-width: 38ch; }

  .crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; font-size: var(--fs-small); color: var(--color-text-muted); }
  .crumbs li + li::before { content: "/"; margin-inline: 0.5rem; color: var(--field); }
  .crumbs a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; }
  .crumbs a:hover { text-decoration: underline; }
  .crumbs a[aria-current="page"] { color: var(--crust); font-weight: 500; }

  /* Spis smaków: wszystkie nazwy naraz — widać skalę oferty, a każda nazwa jest skrótem do swojego zdjęcia. */
  .pg-index { display: grid; gap: 1.25rem; }
  .pg-index__group { display: grid; gap: 0.375rem; }
  .pg-index__label {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: var(--fs-small); font-weight: 600; color: var(--color-text-muted);
  }
  .pg-index__label::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--group-dot, var(--butter)); }
  .pg-index__group--na-slodko { --group-dot: var(--raspberry); }
  .pg-index__list { display: flex; flex-wrap: wrap; gap: 0 1rem; }
  /* Etap 10: link jest elementem liniowym (inline), nie inline-flex — podkreślenie ma szerokość TEKSTU, także gdy długa nazwa
     („Uszka z kapustą i grzybami”) się zawija (wtedy inline-flex rozciągał się na całą szerokość kontenera razem z tłem).
     box-decoration-break: clone = każda linia ma własne podkreślenie. Pole dotyku: padding linii + odstęp wiersza listy. */
  .pg-index__list > li { padding-block: 0.3rem; }
  .pg-index__link {
    display: inline; padding-block: 0.35rem;
    font-family: var(--font-display); font-weight: 560; font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem); line-height: 1.3;
    text-decoration: none;
    background: linear-gradient(var(--butter), var(--butter)) 0 calc(100% - 0.5rem) / 0 0.3em no-repeat;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    transition: background-size 280ms var(--ease-out);
  }
  .pg-index__link:hover, .pg-index__link:focus-visible { background-size: 100% 0.3em; }
  .pg-index__link--signature { color: var(--raspberry-deep); }

  @media (min-width: 1024px) {
    .pg-intro { padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
    /* Spis wyrównany do góry: przy podmianie fontu (Fraunces za zastępczy) rośnie w dół, nie przesuwa się (CLS). */
    .pg-intro__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
    .pg-index { padding-top: 0.5rem; }
    .pg-intro__text { gap: 1.25rem; padding-top: 0.5rem; }
    .pg-index { gap: 1.5rem; padding-bottom: 0.25rem; }
  }

  /* ═════════ B. FILTR — przyklejony pod nagłówkiem (gdy nagłówek się chowa, pasek dosuwa się do góry) ═════════ */
  .pg-catalog { position: relative; }
  /* Przewijanie po zmianie filtra ustawia JS — natywne zakotwiczenie przewinięcia dokładałoby drugą korektę. */
  .pg-groups { overflow-anchor: none; }
  .pg-filter {
    position: sticky; top: 0; z-index: 20;
    background: rgb(255 253 249 / 0.97); border-block: 1px solid var(--color-border-decor);
    transition: top var(--dur-base) var(--ease-out);
  }
  .site-header:not([data-hidden]) ~ main .pg-filter { top: var(--header-h); }
  .pg-filter__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.5rem; }
  .pg-filter__order { display: none; }

  .segmented {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px;
    width: 100%; max-width: 30rem; min-inline-size: 0; margin: 0; padding: 4px; border: 0;
    background: var(--dough); border-radius: 14px;
  }
  .segmented__opt {
    position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 0.5rem;
    border-radius: 10px; font-weight: 600; font-size: 0.9375rem; line-height: 1.15; text-align: center; white-space: nowrap;
    cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: background-color var(--dur-base) ease, color var(--dur-base) ease, box-shadow var(--dur-base) var(--ease-out);
  }
  .segmented__opt:hover { background: rgb(255 253 249 / 0.7); }
  /* Natywne radio pokrywa cały segment: klik, dotyk, strzałki w grupie, Tab = jeden przystanek. */
  .segmented__input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; appearance: none; border-radius: inherit; }
  .segmented__opt:has(.segmented__input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .segmented__opt:has(.segmented__input:checked) { background: var(--crust); color: var(--flour); box-shadow: 0 3px 0 0 var(--butter); }
  .segmented__n { margin-left: 0.3em; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--cocoa); }
  .segmented__opt:has(.segmented__input:checked) .segmented__n { color: var(--dough); }

  @media (min-width: 768px) {
    .pg-filter__inner { min-height: 64px; }
    .segmented__opt { font-size: 1rem; padding-inline: 1rem; }
    .pg-filter__order { display: inline-flex; align-items: center; min-height: 44px; flex: none; }
  }

  /* Widoczność grup = stan radia (działa także bez JS). JS dokłada przewijanie, ogłoszenie i wejście grupy.
     Obrazy w ukrytej grupie (display: none, loading="lazy") nie są pobierane. */
  .pg:has(.segmented__input[value="wytrawne"]:checked) .pg-group:not([data-group="wytrawne"]),
  .pg:has(.segmented__input[value="na-slodko"]:checked) .pg-group:not([data-group="na-slodko"]) { display: none; }

  html:has(.pg-filter) { scroll-padding-top: calc(var(--header-h) + 84px); }

  /* ═════════ GRUPA ═════════ */
  .pg-group { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) clamp(3rem, 2rem + 4vw, 6.5rem); }
  /* Pierwsza grupa bliżej filtra — na desktopie zdjęcie Ruskich zagląda już do pierwszego ekranu. */
  .pg-group:first-child { padding-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
  .pg-group:first-child .pg-group__head { margin-bottom: clamp(1.5rem, 1rem + 1.25vw, 2.25rem); }
  .pg-group__head { display: grid; gap: 0.75rem; margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }
  .pg-group__title { font-size: clamp(2.75rem, 1.6rem + 4.8vw, 5.5rem); font-weight: 650; line-height: 0.95; letter-spacing: -0.02em; }
  .pg-group__count {
    display: inline-block; margin-left: 0.35em; vertical-align: 0.9em;
    font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0; color: var(--color-text-muted);
  }
  .pg-group__lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--color-text-muted); max-width: 36ch; }
  @media (min-width: 1024px) {
    .pg-group__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: 3rem; }
    .pg-group__lead { padding-bottom: 0.5rem; }
  }

  /* Przejście między kategoriami: „Na słodko” leży na Cieście, z falbanką u góry — jak przełożenie strony w karcie menu. */
  .pg-group--na-slodko { position: relative; margin-top: 14px; background: var(--dough); }
  .pg-group--na-slodko::before {
    content: ""; position: absolute; left: 0; right: 0; top: -13px; height: 14px; background: var(--dough);
    -webkit-mask: radial-gradient(circle at 50% 100%, #000 13.5px, transparent 14px) 0 0 / 28px 14px repeat-x;
            mask: radial-gradient(circle at 50% 100%, #000 13.5px, transparent 14px) 0 0 / 28px 14px repeat-x;
  }
  .pg-group--na-slodko .btn--secondary:hover { background: var(--flour); }

  /* ═════════ DUŻY MODUŁ (4 klasyki) — 4:5 obok tekstu, strony naprzemiennie; telefon 1:1 nad tekstem ═════════ */
  .feature { display: grid; gap: 1.25rem; margin-block: clamp(2.5rem, 1.5rem + 4vw, 6rem); --px: 0; --py: 0; }
  .pg-group__head + .feature { margin-top: 0; }
  .feature__media { overflow: hidden; border-radius: 10px; background: var(--dough); box-shadow: 0 26px 48px -30px rgb(60 38 20 / 0.55), 0 2px 6px -2px rgb(60 38 20 / 0.1); }
  .feature__media img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: scale 900ms cubic-bezier(.2, .8, .2, 1), translate 900ms cubic-bezier(.2, .8, .2, 1); }
  .feature__body { display: grid; gap: 0.75rem; justify-items: start; align-content: center; }
  .feature__name { font-size: clamp(2.25rem, 1.5rem + 3.2vw, 4rem); font-weight: 620; line-height: 0.98; letter-spacing: -0.018em; text-wrap: balance; }
  .feature__filling { font-size: var(--fs-lead); line-height: 1.4; font-weight: 500; }
  .feature__note { max-width: 34ch; font-size: var(--fs-lead); line-height: 1.5; }
  .feature__serve { color: var(--color-text-muted); max-width: 36ch; }
  .feature__price { margin-top: 0.375rem; }
  .feature__price .price__amount { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); }
  .feature__price .price__unit { font-size: 1rem; }
  .feature__cta { margin-top: 0.75rem; width: 100%; }
  @media (min-width: 480px) { .feature__cta { width: auto; } }
  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .feature:hover .feature__media img { scale: 1.04; translate: calc(var(--px) * -8px) calc(var(--py) * -8px); }
  }
  @media (min-width: 768px) {
    .feature { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.25rem, 3vw, 3rem); align-items: center; }
    .feature__media img { aspect-ratio: 4 / 5; }
    .feature--left .feature__media { grid-column: 1 / span 6; }
    .feature--left .feature__body { grid-column: 8 / span 5; }
    .feature--right .feature__body { grid-column: 2 / span 5; grid-row: 1; }
    .feature--right .feature__media { grid-column: 7 / span 6; grid-row: 1; }
  }
  /* Pierwszy moment: Ruskie otwierają katalog — kadr „osiada” po wejściu (jedyny ruch bez akcji użytkownika poza Firmowymi). */
  @media (prefers-reduced-motion: no-preference) {
    @keyframes pg-settle { from { scale: 1.08; } }
    .feature--first .feature__media img { animation: pg-settle 2.2s cubic-bezier(.16, .8, .24, 1) both; }
  }

  /* ═════════ KARTY — trio / duet; katalog drukowany, nie sklep: bez ramki i cienia pudełka, zdjęcie + tekst na tle strony ═════════
     Telefon: jedna kolumna, zdjęcie 4:3 (krótsza strona niż 1:1). Tablet: trio = 2 + trzecia karta pozioma. Desktop: trio 3 kolumny,
     środkowa lekko niżej; duet 2 szerokie kolumny (zmiana tempa). CTA dosunięte do dołu — w rzędzie stoją w jednej linii. */
  .cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; margin-block: clamp(2.5rem, 1.5rem + 4vw, 6rem); }
  .pg-group__head + .cards { margin-top: 0; }
  .card { display: grid; }
  .card__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; height: 100%; }
  .card__media {
    width: 100%; margin-bottom: 0.75rem; overflow: hidden; border-radius: var(--media-radius); background: var(--line);
    transition: translate 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
  }
  .card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: scale 700ms cubic-bezier(.2, .8, .2, 1); }
  .card__name { font-size: clamp(1.5rem, 1.32rem + 0.7vw, 1.9375rem); font-weight: 560; line-height: 1.1; letter-spacing: -0.008em; text-wrap: balance; }
  /* Podkreślenie na tekście (span inline), nie na bloku nagłówka — przy zawiniętej nazwie nie rozciąga się na szerokość karty. */
  .card__name-text {
    background: linear-gradient(var(--butter), var(--butter)) 0 92% / 0 0.26em no-repeat; transition: background-size 320ms var(--ease-out);
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
  .card__filling { font-size: var(--fs-small); font-weight: 600; line-height: 1.45; }
  .card__note { line-height: 1.5; max-width: 38ch; }
  .card__serve { font-size: var(--fs-small); line-height: 1.45; color: var(--color-text-muted); max-width: 40ch; }
  .card__price { margin-top: 0.25rem; }
  /* CTA dosunięte do dołu karty; minimalny odstęp od tekstu daje margines elementu przed nim. */
  .card__cta { margin-top: auto; width: 100%; }
  .card__inner > :nth-last-child(2) { margin-bottom: 0.75rem; }

  @media (min-width: 480px) and (max-width: 767px) { .card__cta { width: auto; } }

  @media (min-width: 768px) {
    .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 2.5rem); row-gap: 3.5rem; }
    .card__media img { aspect-ratio: 1; }
    .card__cta { width: auto; }
    .cards--1 { grid-template-columns: minmax(0, 1fr); }
    .cards--1 .card { max-width: calc(50% - 1.25rem); }
  }
  /* Tablet: trzecia karta trio leży w poprzek (zdjęcie obok tekstu) — bez osieroconej połówki. */
  @media (min-width: 768px) and (max-width: 1023px) {
    .cards--3 .card:nth-child(3) { grid-column: 1 / -1; }
    .cards--3 .card:nth-child(3) .card__inner {
      display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(1.5rem, 3vw, 2.5rem);
      grid-auto-rows: min-content; align-content: center;
    }
    .cards--3 .card:nth-child(3) .card__media { grid-column: 1; grid-row: 1 / span 7; margin-bottom: 0; }
    .cards--3 .card:nth-child(3) .card__inner > :not(.card__media) { grid-column: 2; justify-self: start; }
    .cards--3 .card:nth-child(3) .card__cta { margin-top: 0.75rem; }
  }
  @media (min-width: 1024px) {
    .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* Środkowa karta trio niżej o 3rem: rytm przekładanych stron menu. Kolejność DOM = kolejność czytania. */
    .cards--3 .card:nth-child(3n + 2) { padding-top: 3rem; }
    .cards--2 { column-gap: clamp(2rem, 5vw, 5rem); }
  }
  @media (hover: hover) and (pointer: fine) {
    .card:hover .card__name-text { background-size: 100% 0.26em; }
  }
  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .card:hover .card__media { translate: 0 -4px; box-shadow: 0 22px 36px -24px rgb(60 38 20 / 0.55); }
    .card:hover .card__media img { scale: 1.035; }
  }

  /* ═════════ FIRMOWE — Malina, falbanki u góry i u dołu, zdjęcie + przybliżenie przełamanego pieroga ═════════ */
  .firm {
    position: relative; margin-block: 14px calc(clamp(2.5rem, 1.5rem + 4vw, 6rem) + 14px); padding-block: clamp(3.5rem, 2.5rem + 5vw, 7.5rem);
    background: var(--raspberry); color: var(--flour); overflow-x: clip;
  }
  .firm::before, .firm::after {
    content: ""; position: absolute; left: 0; right: 0; height: 14px; background: var(--raspberry);
    -webkit-mask: radial-gradient(circle at 50% 100%, #000 13.5px, transparent 14px) 0 0 / 28px 14px repeat-x;
            mask: radial-gradient(circle at 50% 100%, #000 13.5px, transparent 14px) 0 0 / 28px 14px repeat-x;
  }
  .firm::before { top: -13px; }
  .pg-group__head + .firm { margin-top: calc(clamp(1rem, 0.5rem + 2vw, 2.5rem) + 14px); }
  .firm::after { bottom: -13px; rotate: 180deg; }
  .firm :focus-visible { outline-color: var(--color-focus-on-dark); }
  .firm__grid { display: grid; gap: 2.75rem; }
  .firm__media { position: relative; width: 82%; margin-bottom: 1rem; }
  .firm__photo img { aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; box-shadow: 0 40px 70px -36px rgb(70 8 28 / 0.75); }
  .firm__macro {
    position: absolute; right: -16%; bottom: -1.5rem; width: 46%;
    border-radius: 50%; overflow: hidden; border: 6px solid var(--blush); background: var(--blush);
    box-shadow: 0 24px 40px -20px rgb(70 8 28 / 0.6);
  }
  .firm__macro img { aspect-ratio: 1; object-fit: cover; }
  .firm__body { display: grid; gap: 1.125rem; justify-items: start; }
  .firm__name { font-size: clamp(3.5rem, 1.6rem + 8vw, 7.5rem); font-weight: 650; line-height: 0.88; letter-spacing: -0.028em; }
  .firm__qual { display: block; margin-top: 0.75rem; font-size: var(--fs-h3); font-weight: 560; line-height: 1.2; letter-spacing: 0; }
  .firm__desc { font-size: var(--fs-lead); line-height: 1.45; max-width: 28ch; }
  .firm__parts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .firm__parts li {
    padding: 0.3rem 0.875rem; border: 1px solid rgb(255 253 249 / 0.55); border-radius: var(--chip-radius);
    font-size: var(--fs-small); font-weight: 500;
  }
  .firm .price__unit, .firm .price__per { color: inherit; }
  .firm .price__tbc { border-color: rgb(255 253 249 / 0.75); color: var(--flour); }
  .firm__cta { margin-top: 0.75rem; width: 100%; }
  @media (min-width: 480px) { .firm__cta { width: auto; min-width: 15rem; } }
  @media (min-width: 768px) {
    .firm__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(3rem, 7vw, 7.5rem); align-items: center; }
    .firm__media { width: 100%; margin-bottom: 0; }
    .firm__macro { right: -14%; bottom: -2rem; width: 44%; }
  }
  @media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
      /* Drugi moment: przybliżenie „ląduje” na zdjęciu, gdy Firmowe wchodzą na ekran. */
      @keyframes firm-macro { from { transform: translate(-30%, 18%) scale(0.55) rotate(-10deg); opacity: 0; } }
      .firm { view-timeline: --firm; }
      .firm__macro { animation: firm-macro linear both; animation-timeline: --firm; animation-range: entry 35% cover 45%; }
    }
  }

  /* ═════════ B2. NA ŚWIĘTA — oferta sezonowa widoczna cały rok: ciemna „karta wigilijna” (Skórka) z falbanką,
     cztery zdjęcia w rzędzie (telefon i tablet 2 × 2). Bez CTA zamówienia online — tylko informacja o dostępności. ═════════ */
  .pg-season {
    position: relative; margin-top: 14px; padding-block: clamp(3.5rem, 2.5rem + 4.5vw, 7rem);
    background: var(--crust); color: var(--flour);
  }
  .pg-season::before {
    content: ""; position: absolute; left: 0; right: 0; top: -13px; height: 14px; background: var(--crust);
    -webkit-mask: radial-gradient(circle at 50% 100%, #000 13.5px, transparent 14px) 0 0 / 28px 14px repeat-x;
            mask: radial-gradient(circle at 50% 100%, #000 13.5px, transparent 14px) 0 0 / 28px 14px repeat-x;
  }
  .pg-season :focus-visible { outline-color: var(--color-focus-on-dark); }
  .pg-season__head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }
  .pg-season__title { font-size: clamp(2.75rem, 1.6rem + 4.8vw, 5.5rem); font-weight: 650; line-height: 0.95; letter-spacing: -0.02em; }
  .pg-season__intro { display: grid; gap: 0.875rem; justify-items: start; }
  .pg-season__lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--dough); max-width: 38ch; }
  .pg-season__when {
    display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.875rem 0.4rem 0.625rem; border-radius: var(--chip-radius);
    background: var(--butter); color: var(--crust); font-size: var(--fs-small); font-weight: 600; line-height: 1.3;
  }
  .pg-season__when .icon { width: 1.125rem; height: 1.125rem; }
  .pg-season__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem clamp(0.875rem, 2.4vw, 2rem); }
  .season-card { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
  .season-card__inner { display: grid; gap: 0.375rem; align-content: start; justify-items: start; }
  .season-card__media { width: 100%; margin-bottom: 0.625rem; overflow: hidden; border-radius: var(--media-radius); background: var(--crust-deep); }
  .season-card__media img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: scale 700ms cubic-bezier(.2, .8, .2, 1); }
  .season-card__name { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); font-weight: 560; line-height: 1.12; letter-spacing: -0.008em; text-wrap: balance; }
  .season-card__filling { color: var(--dough); line-height: 1.45; }
  .season-card__price { margin-top: 0.25rem; }
  .pg-season .price__unit, .pg-season .price__per { color: var(--dough); }
  .pg-season .price__tbc { border-color: rgb(245 238 227 / 0.6); color: var(--dough); }
  .season-card__when { margin-top: 0.25rem; }
  .season-card__cta { margin-top: 0.625rem; min-height: 44px; padding-inline: 1rem; font-size: 1rem; }
  .tag--on-dark { border-color: rgb(241 174 14 / 0.7); color: var(--butter-soft); padding: 0.125rem 0.625rem; white-space: normal; }
  .pg-season__foot { display: grid; gap: 1.25rem; margin-top: clamp(2.5rem, 2rem + 2.5vw, 4rem); padding-top: 1.5rem; border-top: 1px solid rgb(255 253 249 / 0.16); }
  .pg-season__note { color: var(--dough); max-width: 40ch; }
  .pg-season__actions { display: grid; gap: 0.75rem; }
  @media (min-width: 640px) {
    .pg-season__actions { display: flex; flex-wrap: wrap; }
  }
  @media (min-width: 1024px) {
    .pg-season__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: 3rem; }
    .pg-season__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pg-season__foot { grid-template-columns: 1fr auto; align-items: center; }
  }
  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .season-card:hover .season-card__media img { scale: 1.04; }
  }
  /* Podświetlenie produktu, do którego prowadzi link (spis smaków, HOME). */
  .season-card:target .season-card__media { outline: 3px solid var(--butter); outline-offset: 4px; }

  .pg-index__group--swieta { --group-dot: var(--crust); }
  .pg-index__group--swieta .pg-index__list, .pg-index__group--swieta .pg-index__label { display: none; }
  .pg-index__short { display: flex; align-items: center; gap: 0.5rem; }
  .pg-index__short::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--group-dot); }
  @media (min-width: 768px) {
    .pg-index__group--swieta .pg-index__list, .pg-index__group--swieta .pg-index__label { display: flex; }
    .pg-index__short { display: none; }
  }
  .pg-index__when { font-weight: 500; }
  .pg-index__when::before { content: "· "; }

  /* ═════════ C. FINAŁ — zamówienie online + dalsze kroki (Mąka z falbanką na ciemnej karcie świątecznej) ═════════ */
  .pg-order {
    position: relative; margin-top: 14px; margin-bottom: -14px; /* Mąka wchodzi pod falbankę stopki */
    padding-block: var(--section-y) calc(var(--section-y) * 0.75 + 14px); background: var(--flour);
  }
  .pg-order::before {
    content: ""; position: absolute; left: 0; right: 0; top: -13px; height: 14px; background: var(--flour);
    -webkit-mask: radial-gradient(circle at 50% 100%, #000 13.5px, transparent 14px) 0 0 / 28px 14px repeat-x;
            mask: radial-gradient(circle at 50% 100%, #000 13.5px, transparent 14px) 0 0 / 28px 14px repeat-x;
  }
  .pg-order__grid { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
  .pg-order__lead { display: grid; gap: 1.25rem; justify-items: start; align-content: start; }
  .pg-order__title { font-size: clamp(2.375rem, 1.55rem + 3.4vw, 4.25rem); line-height: 1; letter-spacing: -0.01em; }
  .pg-order__text { font-size: var(--fs-lead); line-height: 1.5; max-width: 34ch; color: var(--color-text-muted); }
  .pg-order__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; width: 100%; margin-top: 0.25rem; }
  .pg-order__cta { min-width: 16rem; }
  .pg-order__call { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; font-variant-numeric: tabular-nums; }
  .pg-order__call .icon { width: 1.1rem; height: 1.1rem; }
  .pg-order__note { font-size: var(--fs-small); color: var(--color-text-muted); }
  @media (max-width: 479px) { .pg-order__cta { width: 100%; min-width: 0; } }

  .pg-more ul { display: grid; border-top: 1px solid rgb(43 33 26 / 0.14); }
  .pg-more li { border-bottom: 1px solid rgb(43 33 26 / 0.14); }
  .pg-more__link { display: grid; gap: 0.2rem; padding-block: 1.125rem; text-decoration: none; }
  .pg-more__name {
    justify-self: start; font-family: var(--font-display); font-weight: 620; font-size: clamp(1.625rem, 1.3rem + 1.3vw, 2.375rem); line-height: 1.05;
  }
  .pg-more__name-text {
    background: linear-gradient(var(--butter), var(--butter)) 0 90% / 0 0.24em no-repeat; transition: background-size 320ms var(--ease-out);
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
  .pg-more__hint { font-size: var(--fs-small); color: var(--color-text-muted); }
  .pg-more__link:hover .pg-more__name-text, .pg-more__link:focus-visible .pg-more__name-text { background-size: 100% 0.24em; }
  @media (min-width: 1024px) {
    .pg-order__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(3rem, 7vw, 7rem); align-items: start; }
  }
}

@layer utilities {
  @media print {
    .pg-filter { display: none; }
  }
}