/* /o-nas/, /kontakt/ i podstrony informacyjne (polityka prywatności, zdjęcia i prawa autorskie).
   Tokeny i komponenty z main.css; okruszki i finał (.crumbs, .pg-order, .pg-more) z pierogi.css — bez nowego systemu.
   Mobile-first; progi: 640 / 768 / 1024. */

@layer sections {

  .ab-lead { font-size: var(--fs-lead); line-height: 1.5; }
  /* Podpis zdjęcia przejściowego (stock): mała etykieta w rogu kadru. Własne zdjęcia firmy podpisu nie mają. */
  .ab-caption {
    position: absolute; right: 0.75rem; bottom: 0.75rem; padding: 0.2rem 0.625rem; border-radius: var(--chip-radius);
    background: rgb(26 20 15 / 0.62); color: var(--flour); font-size: 0.8125rem; font-weight: 500; line-height: 1.4;
  }

  /* ═════════ /O-NAS/ ═════════ */

  /* 1. Intro: nagłówek + dwa talerze jak odbitki (główna 4:5, mała 1:1 zachodzi na róg). */
  .ab-intro { padding: clamp(1rem, 0.6rem + 1.6vw, 2.5rem) 0 clamp(3.5rem, 2rem + 5vw, 7rem); overflow-x: clip; }
  .ab-intro__grid { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
  .ab-intro__text { display: grid; gap: 1.125rem; justify-items: start; align-content: start; }
  .ab-intro__title { font-size: clamp(2.75rem, 1.5rem + 5.6vw, 5.75rem); font-weight: 650; line-height: 0.96; letter-spacing: -0.022em; text-wrap: balance; }
  .ab-intro__lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--color-text-muted); max-width: 36ch; }
  .ab-intro__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; margin-top: 0.5rem; }
  .ab-intro__actions .link { display: inline-flex; align-items: center; min-height: 44px; }
  @media (max-width: 479px) { .ab-intro__actions .btn { width: 100%; } }

  .ab-intro__media { position: relative; width: 78%; justify-self: end; margin-bottom: 2rem; --px: 0; --py: 0; }
  .ab-intro__photo { overflow: hidden; background: var(--dough); }
  .ab-intro__photo img { width: 100%; object-fit: cover; }
  .ab-intro__photo--main { border-radius: 10px; rotate: 1.5deg; box-shadow: 0 30px 56px -32px rgb(60 38 20 / 0.6), 0 2px 6px -2px rgb(60 38 20 / 0.12); }
  .ab-intro__photo--main img { aspect-ratio: 1; }
  .ab-intro__photo--side {
    position: absolute; left: -26%; bottom: -2rem; width: 50%; rotate: -4deg;
    border: 6px solid var(--flour); border-radius: 16px; box-shadow: 0 22px 40px -24px rgb(60 38 20 / 0.55);
  }
  .ab-intro__photo--side img { aspect-ratio: 1; }
  @media (min-width: 768px) {
    .ab-intro__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 5vw, 5.5rem); align-items: center; }
    .ab-intro__text { gap: 1.25rem; padding-block: 1rem 2rem; }
    .ab-intro__media { width: 100%; margin: 0 0 3rem; }
    .ab-intro__photo--main img { aspect-ratio: 4 / 5; }
    .ab-intro__photo--side { left: -22%; bottom: -3rem; width: 52%; border-width: 8px; }
  }
  @media (prefers-reduced-motion: no-preference) {
    @keyframes ab-settle { from { scale: 1.08; } }
    @keyframes ab-drop { from { opacity: 0; translate: -1.5rem 1.5rem; rotate: -10deg; } }
    .ab-intro__photo--main img { animation: ab-settle 2.2s cubic-bezier(.16, .8, .24, 1) both; }
    .ab-intro__photo--side { animation: ab-drop 900ms var(--ease-out) 350ms both; }
  }
  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .ab-intro__photo--side { translate: calc(var(--px) * 8px) calc(var(--py) * 6px); transition: translate 900ms var(--ease-out); }
  }

  /* 2. Od 2008: rok w kolorze logo jako obiekt, obok dwa zdania o firmie i marce. Ciasto z falbanką. */
  .ab-since { position: relative; margin-top: 14px; padding-block: clamp(3.5rem, 2.5rem + 5vw, 7.5rem); background: var(--dough); overflow-x: clip; }
  .ab-since::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;
  }
  .ab-since__grid { display: grid; gap: 1.25rem; }
  .ab-since__year {
    font-family: var(--font-display); font-weight: 650; font-size: clamp(6.5rem, 2rem + 21vw, 17rem); line-height: 0.8; letter-spacing: -0.045em;
    font-variant-numeric: lining-nums; color: var(--butter); margin-left: -0.04em;
  }
  .ab-since__year::before { content: attr(data-year); }
  .ab-since__text { display: grid; gap: 1rem; max-width: 36rem; }
  .ab-since__text p { font-size: var(--fs-lead); line-height: 1.5; max-width: 40ch; }
  .ab-since__text p + p { color: var(--color-text-muted); }
  @media (min-width: 1024px) {
    .ab-since__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
    /* Etap 18: przy 1024–1430 px cyfry roku (ok. 2,3 × stopień) wchodziły na kolumnę tekstu — stopień ograniczony do 19vw
       (od ok. 1430 px bez zmian: 17rem). */
    .ab-since__year { font-size: min(17rem, 19vw); }
  }
  @media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
      @keyframes ab-year { from { transform: translateX(-12%); opacity: 0.2; } }
      .ab-since { view-timeline: --since; }
      .ab-since__year { animation: ab-year linear both; animation-timeline: --since; animation-range: entry 10% cover 45%; }
    }
  }

  /* 3. Lepione ręcznie: szeroki kadr od krawędzi do krawędzi, detal falbanki zachodzi na jego dolną krawędź. */
  .ab-hand { padding-bottom: var(--section-y); }
  .ab-hand__wide { position: relative; overflow: hidden; background: var(--dough); }
  .ab-hand__wide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .ab-hand__grid { display: grid; gap: 2.5rem; margin-top: clamp(2.25rem, 1.5rem + 3vw, 4rem); }
  .ab-hand__text { display: grid; gap: 1rem; align-content: start; max-width: 36rem; }
  .ab-hand__text p { max-width: 44ch; }
  .ab-hand__text p:last-child { color: var(--color-text-muted); }
  .ab-hand__detail {
    position: relative; width: 72%; justify-self: end; overflow: hidden; rotate: 2deg;
    border: 6px solid var(--flour); border-radius: 16px; background: var(--dough); box-shadow: 0 24px 44px -26px rgb(60 38 20 / 0.55);
  }
  .ab-hand__detail img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  @media (min-width: 768px) {
    .ab-hand__wide img { aspect-ratio: 16 / 9; max-height: 78svh; }
    .ab-hand__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 5vw, 5.5rem); align-items: start; }
    .ab-hand__detail { width: 100%; margin-top: calc(-1 * clamp(6rem, 13vw, 11rem)); border-width: 8px; }
    .ab-hand__wide .ab-caption { right: auto; left: max(var(--gutter), (100% - var(--container)) / 2); bottom: 1rem; }
  }
  @media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
      @keyframes ab-wide { from { transform: scale(1.12); } }
      .ab-hand__wide { view-timeline: --abwide; }
      .ab-hand__wide img { animation: ab-wide linear both; animation-timeline: --abwide; animation-range: entry 0% cover 60%; }
    }
  }

  /* 4. Smaki: cztery pionowe kadry w rzędzie, co drugi niżej (rytm jak przekładane strony menu). */
  .ab-range { padding-bottom: var(--section-y); }
  .ab-range__head { display: grid; gap: 1.25rem; margin-bottom: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }
  .ab-range__text { display: grid; gap: 1rem; max-width: 36rem; }
  .ab-range__text p:last-child { color: var(--color-text-muted); max-width: 48ch; }
  .ab-range__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem clamp(0.875rem, 2.4vw, 2rem); }
  .ab-taste { position: relative; display: grid; gap: 0.25rem; align-content: start; }
  .ab-taste__media { margin-bottom: 0.625rem; overflow: hidden; border-radius: var(--media-radius); background: var(--dough); transition: translate 420ms var(--ease-out), box-shadow 420ms var(--ease-out); }
  .ab-taste__media img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: scale 700ms cubic-bezier(.2, .8, .2, 1); }
  .ab-taste__name { font-family: var(--font-display); font-weight: 560; font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); line-height: 1.12; letter-spacing: -0.008em; }
  .ab-taste--signature .ab-taste__name { color: var(--raspberry-deep); }
  .ab-taste__link { text-decoration: none; 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; }
  .ab-taste__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--media-radius); }
  .ab-taste:hover .ab-taste__link, .ab-taste__link:focus-visible { background-size: 100% 0.26em; }
  .ab-taste:has(.ab-taste__link:focus-visible) .ab-taste__media { outline: 2px solid var(--color-focus); outline-offset: 3px; }
  .ab-taste__filling { color: var(--color-text-muted); line-height: 1.45; }
  .ab-range__more { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
  .ab-range__more .link { display: inline-flex; align-items: center; min-height: 44px; }
  @media (min-width: 768px) {
    .ab-range__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ab-taste__media img { aspect-ratio: 4 / 5; }
    .ab-taste:nth-child(even) { padding-top: 2.5rem; }
  }
  @media (min-width: 1024px) {
    .ab-range__head { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: clamp(2.5rem, 6vw, 6rem); align-items: end; }
  }
  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .ab-taste:hover .ab-taste__media { translate: 0 -4px; box-shadow: 0 22px 36px -24px rgb(60 38 20 / 0.55); }
    .ab-taste:hover .ab-taste__media img { scale: 1.035; }
  }

  /* 5. Nie tylko pierogi: dwie „furtki” — inne wyroby (Ciasto) i święta (Skórka). Cała karta jest linkiem. */
  .ab-more { padding-bottom: var(--section-y); }
  .ab-more .h2 { margin-bottom: clamp(1.75rem, 1.25rem + 2vw, 3rem); }
  .ab-more__list { display: grid; gap: 1rem; }
  .ab-door { position: relative; display: grid; overflow: hidden; border-radius: 20px; background: var(--dough); transition: translate 420ms var(--ease-out); }
  .ab-door--season { background: var(--crust); color: var(--flour); }
  .ab-door--season :focus-visible { outline-color: var(--color-focus-on-dark); }
  .ab-door__media { overflow: hidden; }
  .ab-door__media img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: scale 700ms cubic-bezier(.2, .8, .2, 1); }
  .ab-door__body { display: grid; gap: 0.625rem; align-content: center; padding: 1.5rem clamp(1.25rem, 1rem + 1.4vw, 2.25rem) 1.75rem; }
  .ab-door__name { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); font-weight: 620; line-height: 1.04; letter-spacing: -0.012em; }
  .ab-door__link { text-decoration: none; background: linear-gradient(var(--butter), var(--butter)) 0 90% / 0 0.22em no-repeat; transition: background-size 350ms var(--ease-out); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .ab-door__link::after { content: ""; position: absolute; inset: 0; border-radius: 20px; }
  .ab-door:hover .ab-door__link, .ab-door__link:focus-visible { background-size: 100% 0.22em; }
  .ab-door:has(.ab-door__link:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 3px; }
  .ab-door__body p { max-width: 36ch; line-height: 1.5; color: var(--color-text-muted); }
  .ab-door--season .ab-door__body p { color: var(--dough); }
  @media (min-width: 640px) {
    .ab-door { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
    /* Zdjęcie wypełnia całą wysokość karty (tekst bywa wyższy niż kwadrat zdjęcia). */
    .ab-door__media { position: relative; aspect-ratio: 1; }
    .ab-door__media picture { position: absolute; inset: 0; }
    .ab-door__media img { aspect-ratio: auto; }
  }
  @media (min-width: 1024px) {
    .ab-more__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); }
  }
  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .ab-door:hover { translate: 0 -4px; }
    .ab-door:hover .ab-door__media img { scale: 1.05; }
  }

  /* 6. Jak u nas kupić: cztery fakty jak pozycje karty. Ciasto z falbanką; finał (.pg-order) wchodzi na nie swoją falbanką. */
  .ab-facts { position: relative; margin-top: 14px; padding-block: clamp(3.5rem, 2.5rem + 5vw, 7rem); background: var(--dough); }
  .ab-facts::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;
  }
  .ab-facts .h2 { margin-bottom: clamp(1.75rem, 1.25rem + 2vw, 3rem); }
  .ab-facts__list { display: grid; gap: 0; border-top: 1px solid rgb(43 33 26 / 0.14); }
  .ab-fact { display: grid; gap: 0.375rem; padding-block: 1.375rem; border-bottom: 1px solid rgb(43 33 26 / 0.14); }
  .ab-fact dt { font-family: var(--font-display); font-weight: 620; font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem); line-height: 1.08; letter-spacing: -0.01em; }
  .ab-fact dd { max-width: 40ch; line-height: 1.5; color: var(--color-text-muted); }
  .ab-facts__b2b { margin-top: 1.75rem; max-width: 60ch; color: var(--color-text-muted); }
  .ab-facts__b2b a { display: inline-block; padding-block: 0.375rem; color: var(--crust); font-weight: 600; overflow-wrap: anywhere; }
  @media (min-width: 640px) {
    .ab-facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 4rem); border-top: 0; }
    .ab-fact { border-top: 1px solid rgb(43 33 26 / 0.14); border-bottom: 0; }
  }
  @media (min-width: 1024px) {
    .ab-facts__list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); }
    .ab-fact { align-content: start; padding-bottom: 0; }
  }

  /* ═════════ /KONTAKT/ ═════════ */

  /* 1. Intro: nagłówek po lewej, telefon i e-mail jako największe elementy po prawej. */
  .ct-intro { padding: clamp(1rem, 0.6rem + 1.6vw, 2.5rem) 0 clamp(3rem, 2rem + 4vw, 6rem); }
  .ct-intro__grid { display: grid; gap: 2.25rem; grid-template-columns: minmax(0, 1fr); }
  .ct-intro__text { display: grid; gap: 1rem; justify-items: start; align-content: start; }
  .ct-intro__title { font-size: clamp(3rem, 1.7rem + 6vw, 6.25rem); font-weight: 650; line-height: 0.94; letter-spacing: -0.022em; text-wrap: balance; }
  .ct-intro__lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--color-text-muted); max-width: 34ch; }
  .ct-direct { display: grid; gap: 0.25rem; align-content: start; min-width: 0; }
  .ct-direct__row { display: grid; gap: 0; padding-block: 0.875rem; border-top: 1px solid var(--color-border-decor); }
  .ct-direct__label { font-size: var(--fs-small); font-weight: 600; color: var(--color-text-muted); }
  .ct-direct__phone {
    justify-self: start; display: inline-flex; align-items: center; min-height: 56px;
    font-family: var(--font-display); font-weight: 650; font-size: clamp(2.75rem, 1.7rem + 5vw, 5rem); line-height: 1;
    letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; text-decoration: none;
    background: linear-gradient(var(--butter), var(--butter)) 0 88% / 0 0.2em no-repeat; transition: background-size 350ms var(--ease-out);
  }
  .ct-direct__phone:hover, .ct-direct__phone:focus-visible { background-size: 100% 0.2em; }
  .ct-direct__mail {
    justify-self: start; display: inline-flex; align-items: center; min-height: 48px; max-width: 100%;
    font-family: var(--font-display); font-weight: 560; font-size: clamp(1.25rem, 1rem + 1.3vw, 2rem); line-height: 1.15; overflow-wrap: anywhere;
    text-decoration-thickness: 1px; text-underline-offset: 0.22em;
  }
  .ct-direct__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border-decor); }
  .ct-direct__actions .btn { padding-inline: 0.5rem; gap: 0.4rem; font-size: 1rem; white-space: nowrap; }
  @media (min-width: 480px) { .ct-direct__actions { display: flex; flex-wrap: wrap; } .ct-direct__actions .btn { padding-inline: 1.375rem; gap: 0.5rem; font-size: 1.0625rem; } }
  @media (min-width: 1024px) {
    .ct-intro__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: clamp(2.5rem, 6vw, 6rem); align-items: end; }
    .ct-intro__text { gap: 1.25rem; padding-bottom: 0.5rem; }
  }

  /* 2. Gdzie i kiedy: dwie karty na Cieście (adres + trasa, godziny + status). */
  .ct-visit { position: relative; margin-top: 14px; padding-block: clamp(3rem, 2rem + 4.5vw, 6.5rem); background: var(--dough); }
  .ct-visit::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;
  }
  .ct-visit__grid { display: grid; gap: 1rem; }
  .ct-card {
    display: grid; gap: 1rem; justify-items: start; align-content: start;
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--flour); border-radius: 14px; box-shadow: 0 30px 50px -36px rgb(60 38 20 / 0.45);
  }
  .ct-card__title { font-size: clamp(1.625rem, 1.35rem + 1.1vw, 2.25rem); font-weight: 620; line-height: 1.05; letter-spacing: -0.01em; }
  .ct-card__address { font-size: var(--fs-lead); line-height: 1.5; }
  .ct-card__address strong { font-weight: 600; }
  .ct-card__terms { display: grid; width: 100%; border-top: 1px dashed var(--line); }
  .ct-card__terms > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.75rem; padding-block: 0.625rem; border-bottom: 1px dashed var(--line); }
  .ct-card__terms dt { font-size: var(--fs-small); font-weight: 600; color: var(--color-text-muted); padding-top: 0.1em; }
  .ct-card__terms dd { line-height: 1.45; }
  .ct-card__map { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0.25rem; }
  .ct-card__hint { font-size: var(--fs-small); line-height: 1.5; color: var(--color-text-muted); max-width: 40ch; }
  .ct-card__hours { width: 100%; }
  .ct-card__hours > div { padding-block: 0.625rem; }
  .ct-card__hours > div:last-child { border-bottom: 0; }

  @media (min-width: 768px) {
    .ct-visit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); }
  }

  /* 3. Lokalizacja (etap 17, zamiast instrukcji dojazdu): adres + „Wyznacz trasę” obok podglądu mapy. Podgląd to rysunek SVG
     (bez zewnętrznych żądań); pinezka i etykieta są w HTML, więc nie skalują się z rysunkiem. Klik → Mapy Google. */
  .ct-map { padding-block: var(--section-y); scroll-margin-top: calc(var(--header-h) + 1rem); }
  .ct-map__grid { display: grid; gap: clamp(1.75rem, 1.25rem + 2vw, 3rem); }
  .ct-map__head { display: grid; gap: 1rem; justify-items: start; align-content: center; }
  .ct-map__address { font-style: normal; font-size: var(--fs-lead); line-height: 1.5; }
  .ct-map__address strong { font-weight: 600; }
  .ct-map__route { margin-top: 0.25rem; }
  .ct-map__photo { width: 100%; margin-top: 0.5rem; overflow: hidden; border-radius: 10px; background: var(--dough); }
  .ct-map__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .ct-map__preview {
    position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 14px; background: #F2E9DA;
    color: var(--crust); text-decoration: none; box-shadow: 0 30px 50px -36px rgb(60 38 20 / 0.45); isolation: isolate;
  }
  .ct-map__art { position: absolute; inset: 0; width: 100%; height: 100%; transition: scale 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .ct-map__preview:hover .ct-map__art { scale: 1.03; }
  .ct-map__preview:focus-visible { outline: 3px solid var(--crust); outline-offset: 4px; }
  .ct-map__pin { position: absolute; left: 50%; top: 44%; width: 44px; height: 56px; translate: -50% -100%; filter: drop-shadow(0 8px 10px rgb(60 38 20 / 0.3)); }
  .ct-map__pulse {
    position: absolute; left: 50%; top: 44%; width: 18px; height: 18px; translate: -50% -50%; border-radius: 50%;
    background: rgb(201 58 98 / 0.35); animation: ct-map-pulse 2.6s cubic-bezier(0.2, 0.7, 0.2, 1) infinite;
  }
  @keyframes ct-map-pulse { 0% { scale: 0.6; opacity: 0.9; } 80%, 100% { scale: 4; opacity: 0; } }
  .ct-map__label {
    position: absolute; left: 50%; top: calc(44% + 0.875rem); translate: -50% 0; display: grid; gap: 0.1rem; padding: 0.5rem 0.875rem;
    background: var(--flour); border-radius: 10px; box-shadow: 0 14px 24px -16px rgb(60 38 20 / 0.5);
    font-size: var(--fs-small); line-height: 1.3; text-align: center; white-space: nowrap;
  }
  .ct-map__label strong { font-weight: 600; }
  .ct-map__open {
    position: absolute; right: 0.75rem; bottom: 0.75rem; padding: 0.4rem 0.8rem; border-radius: 999px;
    background: var(--flour); font-size: var(--fs-small); font-weight: 600; line-height: 1.2;
    box-shadow: 0 10px 20px -14px rgb(60 38 20 / 0.5); transition: background-color 0.2s;
  }
  .ct-map__preview:hover .ct-map__open { background: var(--butter-soft); }
  @media (prefers-reduced-motion: reduce) {
    .ct-map__pulse { animation: none; opacity: 0.6; scale: 1.6; }
    .ct-map__art { transition: none; }
    .ct-map__preview:hover .ct-map__art { scale: 1; }
  }
  @media (max-width: 479px) { .ct-map__route { width: 100%; } }
  @media (min-width: 900px) {
    .ct-map__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
    .ct-map__preview { aspect-ratio: 16 / 11; }
  }

  /* 2. Formularz kontaktowy (etap 10): po lewej zachęta i informacja dla restauracji / sklepów, po prawej karta formularza.
     Telefon: zachęta nad formularzem. Tematy jako karty wyboru (natywne radio) — dwie kolumny od 480 px. */
  .ct-form { padding-bottom: var(--section-y); scroll-margin-top: calc(var(--header-h) + 1rem); }
  .ct-form__grid { display: grid; gap: clamp(1.75rem, 1.25rem + 2vw, 3rem); }
  .ct-form__lead { display: grid; gap: 1.125rem; align-content: start; }
  .ct-form__intro { font-size: var(--fs-lead); line-height: 1.5; color: var(--color-text-muted); max-width: 36ch; }
  .ct-b2b { display: grid; gap: 0.375rem; max-width: 34rem; padding: 1.125rem 1.25rem; border-left: 4px solid var(--butter); border-radius: 0 12px 12px 0; background: var(--butter-soft); line-height: 1.5; }
  .ct-b2b__title { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.2; }
  .ct-form__order { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.625rem; align-items: start; max-width: 34rem; font-size: var(--fs-small); line-height: 1.5; color: var(--color-text-muted); }
  .ct-form__order .icon { width: 1.125rem; height: 1.125rem; margin-top: 0.15em; color: var(--dill); }
  .ct-form__order a { color: var(--crust); font-weight: 600; white-space: nowrap; }
  .ct-form__card { padding: clamp(1.25rem, 0.8rem + 2.2vw, 2.5rem); border-radius: 20px; background: var(--dough); }
  .ct-form__card .form { margin-top: 0; }
  .ct-form__form[hidden] { display: none; }
  @media (min-width: 1024px) {
    .ct-form__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
    .ct-form__lead { position: sticky; top: calc(var(--header-h) + 2.5rem); }
  }

  .topics { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
  .topics:focus { outline: none; }
  .topics__legend { margin-bottom: 0.5rem; padding: 0; font-weight: 600; font-size: 1rem; }
  .topics__list { display: grid; gap: 0.5rem; }
  @media (min-width: 480px) { .topics__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .topic {
    position: relative; display: grid; gap: 0.125rem; align-content: start; min-height: 44px; padding: 0.75rem 0.875rem 0.75rem 2.75rem;
    border: 1.5px solid var(--field); border-radius: 12px; background: var(--flour); cursor: pointer;
    transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background-color var(--dur-fast) ease;
  }
  .topic:hover { border-color: var(--crust); }
  .topic__input {
    position: absolute; left: 0.875rem; top: 0.875rem; width: 1.25rem; height: 1.25rem; margin: 0;
    accent-color: var(--crust); cursor: pointer;
  }
  .topic__label { font-weight: 600; line-height: 1.3; }
  .topic__hint { font-size: var(--fs-small); line-height: 1.4; color: var(--color-text-muted); }
  .topic:has(.topic__input:checked) { border-color: var(--crust); border-width: 2px; background: var(--butter-soft); box-shadow: inset 4px 0 0 var(--butter); }
  .topic:has(.topic__input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .topics[aria-invalid="true"] .topic { border-color: var(--color-danger); }
  .topics .field__error { margin-top: 0.5rem; }
  .field__counter { font-size: var(--fs-small); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

  .ct-done { display: grid; gap: 0.75rem; justify-items: start; padding-block: 0.5rem; }
  .ct-done__mark { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--dill); color: var(--flour); }
  .ct-done__mark .icon { width: 1.6rem; height: 1.6rem; stroke-width: 2.5; }
  .ct-done__title { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); line-height: 1.05; }
  .ct-done__title:focus { outline: none; }
  .ct-done__lead { font-size: var(--fs-lead); color: var(--color-text-muted); max-width: 36ch; }
  .ct-done__dry { padding: 0.625rem 0.875rem; border-radius: 10px; background: var(--color-info-bg); font-size: var(--fs-small); }
  .ct-done__again { min-height: 44px; padding: 0; border: 0; background-color: transparent; color: var(--crust); font-size: 1rem; }

  .ct-company__list .social { padding-block: 0.25rem; }

  /* 5. Dane firmy: spokojna tabela na Cieście; wchodzi pod falbankę stopki. */
  .ct-company { position: relative; margin-top: 14px; margin-bottom: -14px; padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) calc(clamp(3rem, 2rem + 4vw, 5.5rem) + 14px); background: var(--dough); }
  .ct-company::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;
  }
  .ct-company__grid { display: grid; gap: 1.5rem; }
  .ct-company__title { font-size: var(--fs-h2); font-weight: 620; line-height: 1.05; letter-spacing: -0.005em; }
  .ct-company__list { display: grid; border-top: 1px solid rgb(43 33 26 / 0.14); }
  .ct-company__list > div { display: grid; gap: 0.125rem; padding-block: 0.75rem; border-bottom: 1px solid rgb(43 33 26 / 0.14); }
  .ct-company__list dt { font-size: var(--fs-small); font-weight: 600; color: var(--color-text-muted); }
  .ct-company__list dd { font-weight: 500; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
  .ct-company__list a { display: inline-flex; align-items: center; min-height: 44px; }
  .ct-company__list > div:has(a) { padding-block: 0.25rem; }
  @media (min-width: 640px) {
    .ct-company__list > div { grid-template-columns: 8rem minmax(0, 1fr); gap: 1.25rem; align-items: baseline; }
  }
  @media (min-width: 1024px) {
    .ct-company__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 6vw, 6rem); }
  }

  /* ═════════ PODSTRONY INFORMACYJNE (polityka prywatności, zdjęcia i prawa autorskie) ═════════ */
  .doc { padding: clamp(1rem, 0.6rem + 1.6vw, 2.5rem) 0 var(--section-y); }
  .doc__wrap { display: grid; gap: clamp(1.75rem, 1.25rem + 2vw, 3rem); grid-template-columns: minmax(0, 1fr); }
  .doc__head { display: grid; gap: 0.875rem; justify-items: start; }
  .doc__title { font-size: clamp(2.5rem, 1.6rem + 4vw, 4.5rem); font-weight: 650; line-height: 0.98; letter-spacing: -0.02em; text-wrap: balance; max-width: 16ch; }
  .doc__meta { font-size: var(--fs-small); color: var(--color-text-muted); }
  .doc__body { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3rem); max-width: 44rem; }
  .doc__body section { display: grid; gap: 0.875rem; scroll-margin-top: calc(var(--header-h) + 1.5rem); }
  .doc__body h2 { font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem); font-weight: 620; line-height: 1.1; letter-spacing: -0.008em; }
  .doc__body h3 { margin-top: 0.75rem; font-family: var(--font-body); font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
  .doc__body p, .doc__body li, .doc__body dd { line-height: 1.65; }
  .doc__body ul { display: grid; gap: 0.5rem; padding-left: 1.25rem; }
  .doc__body ol { display: grid; gap: 0.5rem; padding-left: 1.5rem; }
  .doc__body ol li::marker { font-weight: 600; font-variant-numeric: tabular-nums; }
  .doc__body li::marker { color: var(--field); }
  .doc__body a { font-weight: 600; overflow-wrap: anywhere; }
  .doc-summary { padding: clamp(1.25rem, 1rem + 1.4vw, 2rem); background: var(--dough); border-radius: 14px; }
  .doc-facts { display: grid; border-top: 1px solid var(--color-border-decor); }
  .doc-facts > div { display: grid; gap: 0.125rem; padding-block: 0.75rem; border-bottom: 1px solid var(--color-border-decor); }
  .doc-facts dt { font-size: var(--fs-small); font-weight: 600; color: var(--color-text-muted); }
  @media (min-width: 640px) {
    .doc-facts > div { grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1.25rem; align-items: baseline; }
  }
  /* Oznaczenia projektu (widoczne tylko do czasu zatwierdzenia: site.legal.approved). */
  .doc-draft { display: grid; gap: 0.625rem; max-width: 44rem; padding: 1.25rem 1.375rem; border-left: 4px solid var(--butter); border-radius: 0 12px 12px 0; background: var(--butter-soft); }
  .doc-draft__title { font-family: var(--font-body); font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
  .doc-draft p, .doc-draft li { font-size: 1rem; line-height: 1.55; }
  .doc-draft__label { font-weight: 600; }
  .doc-draft ul { display: grid; gap: 0.25rem; padding-left: 1.25rem; }
  .doc-todo { padding: 0.05em 0.35em; border: 1px dashed var(--field); border-radius: 6px; background: var(--butter-soft); color: var(--crust); font-weight: 600; }
  .doc-verify {
    display: inline-block; padding: 0 0.5rem; border: 1px solid var(--field); border-radius: var(--chip-radius);
    font-size: 0.8125rem; font-weight: 600; line-height: 1.5; color: var(--cocoa); white-space: nowrap; vertical-align: 0.1em;
  }
  .doc__foot { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border-decor); max-width: 44rem; }
  .doc__foot .link { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Etap 10: linki w zdaniach formularza kontaktowego („Zamów online”, „Polityka prywatności”) — pole dotyku ≥ 44 px bez zmiany
   odstępów między wierszami (ujemny margines kompensuje padding). */
@layer sections {
  .ct-form__order a, .ct-form .form__privacy a { display: inline-block; padding-block: 0.8rem; margin-block: -0.8rem; }
}