/* Ostróżka - strona demonstracyjna Telar
   Kolory samego kwiatu i warsztatu florystki: fiolet ostróżki, łodyga, szary papier pakowy (projekt.md).
   Kroje: Petrona (nagłówki, często kursywą) i Figtree (tekst). Oba lokalnie, licencja SIL OFL.
   Kształty: przyciski i pola 6 px, zdjęcia i papier 3 px. */

@font-face { font-family: "Petrona"; src: url(fonts/petrona-latin-ext.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Petrona"; src: url(fonts/petrona-latin.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Petrona"; src: url(fonts/petrona-italic-latin-ext.woff2) format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Petrona"; src: url(fonts/petrona-italic-latin.woff2) format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; src: url(fonts/figtree-latin-ext.woff2) format("woff2"); font-weight: 300 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; src: url(fonts/figtree-latin.woff2) format("woff2"); font-weight: 300 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Jasny motyw: biel, tekst w kolorze śliwki, fiolet ostróżki jako jedyny akcent. */
:root {
  color-scheme: light;
  --tlo: #FBFAF8;
  --tlo-2: #F1EEF6;
  --tekst: #2B2350;            /* śliwka: 13,8 : 1 na bieli */
  --tekst-2: #5B5476;          /* 6,8 : 1 */
  --linia: #E4E0EA;
  --linia-mocna: #C9C3D6;
  --akcent: #4B4FA6;           /* ostróżka: biel na nim 6,8 : 1 */
  --akcent-hover: #3B3F8F;
  --akcent-tekst: #4B4FA6;
  --na-akcencie: #FBFAF8;
  --pole: #FFFFFF;
  --stopka: #2B2350;
  --cien: rgb(43 35 80 / .14);
  --m-tlo: #FFFFFF;
  --m-blok: #E7E3EC;
  --m-ulica: #FBFAF8;
  --m-drzewo: #C9D6C2;

  /* Roślina */
  --platek: #4B4FA6;
  --platek-2: #6A6EC6;
  --platek-zylka: #2F3380;
  --pak: #7478BE;
  --srodek: #FBFAF8;
  --oczko: #2B2350;
  --lodyga: #5E7B55;
  --lisc: #5E7B55;
  --lisc-2: #74936A;

  /* Papier pakowy to przedmiot - te same kolory w obu motywach. */
  --papier: #CDB48F;
  --papier-ciemny: #B99E76;
  --na-papierze: #2B2350;      /* 7,2 : 1 */
  --na-papierze-2: #41385E;
  --roza: #E7A1B0;             /* pąk róży: tylko pojedyncze akcenty */

  --kroj: "Figtree", system-ui, sans-serif;
  --kroj-szeryf: "Petrona", Georgia, serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --naglowek-h: 68px;
  --margines: clamp(16px, 4vw, 48px);
  --szer: min(1120px, 100% - 2 * var(--margines));
  --rabata: 0px;
}

/* Ciemny motyw: noc w kolorze śliwki, ostróżka rozjaśniona do czytelnego kontrastu. */
:root[data-motyw="ciemny"] {
  color-scheme: dark;
  --tlo: #15122A;
  --tlo-2: #1F1B39;
  --tekst: #EEEBF6;            /* 15,5 : 1 */
  --tekst-2: #B6B0CF;          /* 8,8 : 1, na tle-2 7,9 : 1 */
  --linia: #2E2950;
  --linia-mocna: #48426B;
  --akcent: #A4A7F2;           /* tło na nim 8,2 : 1 */
  --akcent-hover: #BEC0F7;
  --akcent-tekst: #A4A7F2;
  --na-akcencie: #15122A;
  --pole: #1F1B39;
  --stopka: #0E0C1D;
  --cien: rgb(0 0 0 / .45);
  --m-tlo: #1F1B39;
  --m-blok: #2B2650;
  --m-ulica: #1F1B39;
  --m-drzewo: #33473A;

  --platek: #7E82DE;
  --platek-2: #A0A3EE;
  --platek-zylka: #4B4FA6;
  --pak: #8A8DD0;
  --srodek: #EEEBF6;
  --oczko: #15122A;
  --lodyga: #86A87B;
  --lisc: #7A9C6F;
  --lisc-2: #93B387;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--naglowek-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font: 400 1.0625rem/1.6 var(--kroj);
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s, color .3s;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
h2 { font: italic 600 clamp(2rem, 3.6vw, 3rem)/1.12 var(--kroj-szeryf); letter-spacing: -.01em; margin-bottom: .45em; }
h3 { font: 650 1.2rem/1.25 var(--kroj); }
p { margin: 0 0 1em; }
a { color: var(--akcent-tekst); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--akcent-tekst); outline-offset: 3px; }
::selection { background: var(--akcent); color: var(--na-akcencie); }
.pomin { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--akcent); color: var(--na-akcencie); padding: .5em 1em; }
.pomin:focus { left: 8px; }
.sekcja { width: var(--szer); margin-inline: auto; padding-block: clamp(64px, 8vw, 112px); }
.sekcja__wstep { color: var(--tekst-2); max-width: 54ch; margin-bottom: clamp(28px, 3.5vw, 48px); }
.sekcja__dopisek { margin: 1.5rem 0 0; font-size: .92rem; color: var(--tekst-2); }

/* ---------- Przyciski ---------- */
.przycisk {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: .55em 1.4em; max-width: 100%; text-align: center;
  background: var(--akcent); color: var(--na-akcencie);
  border: 2px solid var(--akcent); border-radius: 6px;
  font: 650 1rem/1.15 var(--kroj); text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .12s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.przycisk:active { transform: scale(.97); }
.przycisk--obrys { background: transparent; color: var(--tekst); border-color: currentColor; }
.przycisk--maly { min-height: 44px; padding: 0 1.1em; font-size: .95rem; }
@media (hover: hover) and (pointer: fine) {
  .przycisk:hover { background: var(--akcent-hover); border-color: var(--akcent-hover); }
  .przycisk--obrys:hover { background: var(--tekst); border-color: var(--tekst); color: var(--tlo); }
}
.link-strzalka, .link-przycisk {
  display: inline-flex; align-items: center; gap: .4em; min-height: 44px; padding: 0;
  color: var(--akcent-tekst); font: 650 1rem/1.2 var(--kroj); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
  background: none; border: 0; cursor: pointer;
}
.link-strzalka span { transition: transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .link-strzalka:hover span { transform: translateX(4px); } }

/* ---------- Nagłówek ---------- */
.naglowek {
  position: sticky; top: 0; z-index: 50; height: var(--naglowek-h);
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  padding-inline: var(--margines);
  background: var(--tlo); border-bottom: 1px solid var(--linia);
  transition: background-color .3s;
}
.logo { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; color: var(--tekst); text-decoration: none; }
.logo__znak { width: 15px; height: 28px; flex: none; color: var(--akcent-tekst); }
.logo__nazwa { font: italic 650 1.6rem/1 var(--kroj-szeryf); letter-spacing: -.01em; }
.logo__dopisek { font-size: .85rem; color: var(--tekst-2); padding-top: .25rem; }
.nawigacja { display: flex; gap: clamp(1rem, 2.2vw, 1.9rem); }
.nawigacja a { color: var(--tekst); text-decoration: none; font-weight: 550; font-size: 1rem; padding-block: .6rem; }
.nawigacja a:hover { color: var(--akcent-tekst); text-decoration: underline; }
.naglowek__narzedzia { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.motyw {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  background: transparent; color: var(--tekst); border: 2px solid var(--linia-mocna); border-radius: 50%; cursor: pointer;
  transition: border-color .2s ease;
}
.motyw:hover { border-color: var(--tekst); }
.motyw svg { width: 20px; height: 20px; }
.motyw .slonce, :root[data-motyw="ciemny"] .motyw .ksiezyc { display: none; }
:root[data-motyw="ciemny"] .motyw .slonce { display: block; }
.przelacznik { display: none; }

@media (max-width: 1059px) { .logo__dopisek { display: none; } }
@media (max-width: 859px) {
  .przelacznik {
    display: grid; gap: 5px; place-content: center; width: 44px; height: 44px;
    background: transparent; border: 0; cursor: pointer;
  }
  .przelacznik span { display: block; width: 22px; height: 2px; background: var(--tekst); transition: transform .2s var(--ease-out), opacity .2s; }
  .przelacznik[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .przelacznik[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .przelacznik[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nawigacja {
    position: absolute; inset: var(--naglowek-h) 0 auto; display: none; flex-direction: column; gap: 0;
    background: var(--tlo); padding: .25rem var(--margines) 1rem; box-shadow: 0 16px 24px var(--cien);
    border-bottom: 1px solid var(--linia);
  }
  .nawigacja.otwarta { display: flex; }
  .nawigacja a { padding: .9rem 0; border-bottom: 1px solid var(--linia); font-size: 1.1rem; }
  .nawigacja a:last-child { border-bottom: 0; }
}
/* Telefon: zamówienie jest w pasku na dole ekranu, w nagłówku go nie dublujemy. */
@media (max-width: 719px) { .naglowek__zamow { display: none; } }

/* ---------- Układ: rabata z ostróżką przy lewej krawędzi (komputer) ---------- */
@media (min-width: 900px) {
  /* Szerokość z wysokości ekranu: rysunek ma proporcje 160 : 900. */
  :root { --rabata: clamp(96px, (100svh - 84px) * .178, 172px); }
}
.uklad { display: grid; grid-template-columns: var(--rabata) minmax(0, 1fr); }
.rabata {
  grid-column: 1; grid-row: 1; align-self: start;
  position: sticky; top: var(--naglowek-h);
  height: calc(100svh - var(--naglowek-h)); padding-top: 16px;
}
.ostrozka { display: block; width: 100%; height: 100%; overflow: visible; }
main { grid-column: 2; grid-row: 1; min-width: 0; }
@media (max-width: 899px) {
  .uklad { display: block; }
  .rabata { display: none; }
}

/* ---------- Rysunek ostróżki (rabata i gałązki) ---------- */
.platek { fill: var(--platek); }
.platek-2 { fill: var(--platek-2); }
.zylka { fill: none; stroke: var(--platek-zylka); stroke-width: .6; stroke-linecap: round; opacity: .45; }
.srodek { fill: var(--srodek); }
.oczko { fill: var(--oczko); }
.pak-ksztalt { fill: var(--pak); }
.lisc--a { fill: var(--lisc); }
.lisc--b { fill: var(--lisc-2); }
.lodyga { fill: none; stroke: var(--lodyga); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 1; }
.szypulka, .ogonek { fill: none; stroke: var(--lodyga); stroke-width: 1.4; stroke-linecap: round; }
.ogonek { stroke-width: 1.8; }
.wezel, .kwiat, .pak, .lisc-lodygi { transform-box: fill-box; transform-origin: center; }
/* Bez animacji kwiat jest od razu w pełni rozwinięty: pąki schowane, zostają tylko te na czubku. */
.pak { opacity: 0; }
.pak--staly { opacity: 1; }

@keyframes rosnij { from { stroke-dashoffset: .82; } }
@keyframes pojaw { from { opacity: 0; transform: scale(.4); } }
@keyframes rozkwit { from { opacity: 0; transform: rotate(-40deg) scale(.3); } 35% { opacity: 1; } }
@keyframes zwin { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.6); } }

/* Przewijanie steruje wzrostem: łodyga rośnie przez pierwsze 30% drogi do „Zamów bukiet”,
   potem kwiaty otwierają się od dołu do góry. Przeglądarka bez tej funkcji pokazuje kwiat w pełni. */
@supports (animation-timeline: view()) and (timeline-scope: --a) {
  @media (prefers-reduced-motion: no-preference) {
    .uklad { timeline-scope: --droga; }
    .droga { view-timeline: --droga block; }
    .rabata .lodyga { animation: rosnij linear both; animation-timeline: --droga; animation-range: contain 0% contain 30%; }
    .rabata .wezel, .rabata .lisc-lodygi {
      animation: pojaw both var(--ease-out); animation-timeline: --droga;
      animation-range: contain var(--a) contain calc(var(--a) + 4%);
    }
    .rabata .kwiat {
      animation: rozkwit both var(--ease-out); animation-timeline: --droga;
      animation-range: contain var(--b) contain calc(var(--b) + 10%);
    }
    .rabata .pak:not(.pak--staly) {
      animation: zwin both linear; animation-timeline: --droga;
      animation-range: contain var(--b) contain calc(var(--b) + 6%);
    }
  }
}

/* Telefon: gałązka leży między sekcjami i wyrasta, gdy przewijasz ją przez ekran: łodyga od lewej,
   przy niej pąki, potem kwiaty otwierają się po kolei. Na każdej kolejnej gałązce otwartych jest więcej
   (--etap). Bez animacji i w przeglądarkach bez tej funkcji - gałązka od razu w swoim etapie. */
.galazka { display: none; }
@keyframes rosnij-galazka { from { stroke-dashoffset: .65; } }   /* widać łodygę od 35% jej długości */
@media (max-width: 899px) {
  .galazka { display: block; width: var(--szer); margin-inline: auto; }
  .galazka svg { display: block; width: 100%; height: auto; }
  .galazka .wezel:not(.wezel--otwarty) .kwiat { opacity: 0; }
  .galazka .wezel:not(.wezel--otwarty) .pak { opacity: 1; }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .galazka { view-timeline: --galazka block; }
      .galazka .lodyga { animation: rosnij-galazka linear both; animation-timeline: --galazka; animation-range: cover 12% cover 32%; }
      .galazka .wezel {
        --od: calc(12% + (var(--s) - .35) / .65 * 20%);
        animation: pojaw both var(--ease-out); animation-timeline: --galazka;
        animation-range: cover var(--od) cover calc(var(--od) + 4%);
      }
      .galazka .wezel--otwarty { --kw: calc(32% + var(--i) * 26% / var(--etap)); }
      .galazka .wezel--otwarty .kwiat { animation: rozkwit both var(--ease-out); animation-timeline: --galazka; animation-range: cover var(--kw) cover calc(var(--kw) + 8%); }
      .galazka .wezel--otwarty .pak { animation: zwin both linear; animation-timeline: --galazka; animation-range: cover var(--kw) cover calc(var(--kw) + 5%); }
    }
  }
}

/* ---------- Wejście ---------- */
.wejscie {
  width: var(--szer); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center;
  gap: clamp(32px, 5vw, 80px);
  min-height: min(calc(100svh - var(--naglowek-h)), 780px);
  padding-block: clamp(32px, 4vw, 56px);
}
.wejscie h1 { font: 650 clamp(2.7rem, 5.3vw, 5rem)/1.04 var(--kroj-szeryf); letter-spacing: -.02em; margin-bottom: .45em; }
.wejscie h1 span { display: block; }
/* Druga linia kursywą w kolorze kwiatu. Wyższa interlinia, żeby „y” w „kiedyś” nie było ucięte. */
.wejscie h1 .w2 { font-style: italic; font-weight: 450; color: var(--akcent-tekst); line-height: 1.12; padding-bottom: .04em; }
.wejscie__lead { font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.5; max-width: 30ch; }
.wejscie__przyciski { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1.8rem; }
.link-telefon { display: inline-flex; align-items: center; gap: .35em; min-height: 44px; color: var(--tekst); text-decoration: none; }
.link-telefon b { font-weight: 650; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; font-variant-numeric: tabular-nums; }
/* Czy dziś jeszcze dowieziemy - kropka ma znaczenie: zielona = tak, różowa = już nie. */
.wejscie__dzis { display: flex; align-items: baseline; gap: .55em; margin: 1.6rem 0 0; font-size: .95rem; color: var(--tekst-2); max-width: 42ch; }
.wejscie__dzis::before { content: ""; flex: none; width: .55em; height: .55em; border-radius: 50%; background: var(--lodyga); }
.wejscie__dzis.po-czasie::before { background: var(--roza); }
.wejscie__foto { margin: 0; }
.wejscie__foto img { width: 100%; aspect-ratio: 4 / 5; max-height: calc(100svh - var(--naglowek-h) - 72px); object-fit: cover; object-position: 50% 30%; border-radius: 3px; }

/* ---------- Bukiety tego tygodnia ----------
   Karty z papieru pakowego - jak bukiet zawinięty do wyniesienia. Jedna duża, trzy mniejsze. */
.bukiety__siatka { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(16px, 2vw, 28px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bukiet {
  --tekst: var(--na-papierze); --tekst-2: var(--na-papierze-2); --tlo: var(--papier);
  display: flex; flex-direction: column;
  padding: 12px 12px 20px; border-radius: 3px;
  background: var(--papier); color: var(--tekst);
}
.bukiet img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
.bukiet__opis { display: flex; flex-direction: column; flex: 1; padding: 16px 8px 0; }
.bukiet h3 { font: italic 600 1.5rem/1.15 var(--kroj-szeryf); margin-bottom: .35rem; }
.bukiet p { color: var(--tekst-2); font-size: .98rem; margin-bottom: .9rem; }
.bukiet .bukiet__cena { margin-top: auto; color: var(--tekst); font: 650 1.25rem/1 var(--kroj-szeryf); font-variant-numeric: lining-nums; }
.bukiet .przycisk { align-self: flex-start; }
.bukiet .przycisk:focus-visible { outline-color: var(--na-papierze); }
@media (min-width: 1180px) {
  .bukiety__siatka { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
  .bukiet--duzy { grid-row: span 2; }
  .bukiet--duzy img { flex: 1 1 0; min-height: 420px; aspect-ratio: auto; }
  .bukiet--duzy .bukiet__opis { flex: none; }
  .bukiet--duzy h3 { font-size: 2.1rem; }
  .bukiet--poziomy { grid-column: 2 / span 2; flex-direction: row; gap: 8px; }
  .bukiet--poziomy img { width: 44%; aspect-ratio: 1 / 1; }
  .bukiet--poziomy .bukiet__opis { padding: 10px 14px 0; }
}
/* Telefon: bukiety przesuwane palcem w bok, kolejny wystaje zza krawędzi. */
@media (max-width: 699px) {
  .bukiety__siatka {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--margines)); padding: 0 var(--margines) 4px; scroll-padding-inline: var(--margines);
  }
  .bukiety__siatka::-webkit-scrollbar { display: none; }
  .bukiet { scroll-snap-align: start; }
}

/* ---------- Na okazje ---------- */
.okazje__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linia-mocna); }
.okazja {
  display: grid; grid-template-columns: 140px minmax(0, 1fr) minmax(0, 15rem); align-items: center;
  gap: clamp(16px, 3vw, 40px); padding-block: 22px; border-bottom: 1px solid var(--linia-mocna);
}
.okazja img { width: 140px; aspect-ratio: 1; object-fit: cover; border-radius: 3px; }
.okazja h3 { font: italic 600 clamp(1.6rem, 2.6vw, 2.1rem)/1.1 var(--kroj-szeryf); margin-bottom: .3rem; }
.okazja__tekst p { color: var(--tekst-2); margin: 0; max-width: 52ch; }
.okazja__bok { display: grid; justify-items: start; gap: .1rem; }
.okazja__cena { margin: 0; font-weight: 650; }
/* Pożegnanie: stonowane - zdjęcie bez nasycenia, bez akcentu. */
.okazja--cicha img { filter: saturate(.35); }
.okazja--cicha .link-strzalka { color: var(--tekst); }
@media (max-width: 799px) {
  .okazja { grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: 6px 18px; }
  .okazja img { width: 96px; grid-row: span 2; }
  .okazja__bok { grid-column: 2; }
}

/* ---------- Jak zamówić ---------- */
.jak { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.jak__foto { margin: 0; }
.jak__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; }
/* Numer ma sens: to kolejność, w jakiej idzie zamówienie. Kroki łączy łodyga. */
.kroki { list-style: none; margin: 1.6rem 0 0; padding: 0; counter-reset: krok; }
.kroki li { counter-increment: krok; position: relative; padding: 0 0 2rem 4.25rem; }
.kroki li::before {
  content: counter(krok); position: absolute; left: 0; top: -.2em; width: 2.75rem; text-align: center;
  font: italic 500 2.75rem/1 var(--kroj-szeryf); color: var(--akcent-tekst);
}
.kroki li::after { content: ""; position: absolute; left: 1.32rem; top: 2.9rem; bottom: .5rem; width: 2px; border-radius: 1px; background: var(--lodyga); opacity: .6; }
.kroki li:last-child { padding-bottom: 0; }
.kroki li:last-child::after { display: none; }
.kroki h3 { margin-bottom: .35rem; }
.kroki p { color: var(--tekst-2); margin: 0; max-width: 46ch; }

/* ---------- Dowóz ---------- */
.dowoz { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
/* Zawieszka z papieru pakowego: ścięte rogi i dziurka na sznurek. */
.zawieszka {
  position: relative; margin-top: 1.4rem; padding: 26px 28px 24px 64px;
  background: var(--papier); color: var(--na-papierze); border-radius: 3px;
  clip-path: polygon(30px 0, 100% 0, 100% 100%, 30px 100%, 0 calc(100% - 30px), 0 30px);
}
.zawieszka::before {
  content: ""; position: absolute; left: 20px; top: calc(50% - 8px); width: 16px; height: 16px; border-radius: 50%;
  background: var(--tlo); box-shadow: 0 0 0 4px var(--papier-ciemny);
}
.zawieszka dl { margin: 0; display: grid; gap: 14px; }
.zawieszka div { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); gap: .25rem 1rem; padding-bottom: 14px; border-bottom: 1px dashed rgb(43 35 80 / .4); }
.zawieszka div:last-child { padding-bottom: 0; border-bottom: 0; }
.zawieszka dt { font: italic 650 1.15rem/1.35 var(--kroj-szeryf); }
.zawieszka dd { margin: 0; }
.dowoz__obietnice { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .6rem; color: var(--tekst-2); }
.dowoz__obietnice li { position: relative; padding-left: 1.6rem; }
.dowoz__obietnice li::before { content: ""; position: absolute; left: 0; top: .78em; width: .9rem; height: 2px; border-radius: 1px; background: var(--lodyga); }
.dowoz__foto { margin: 0; }
.dowoz__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; }

/* ---------- Opinie ---------- */
.opinie { background: var(--tlo-2); transition: background-color .3s; }
.opinie__srodek { width: var(--szer); margin-inline: auto; padding-block: clamp(64px, 8vw, 112px); }
/* Trzy opinie w równym rzędzie: tekst od góry, imię zawsze na tej samej wysokości. */
.opinie__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); margin-top: .5rem; }
.opinia { display: flex; flex-direction: column; margin: 0; }
.opinia blockquote { margin: 0; }
.opinia p { margin: 0 0 1rem; font: italic 450 clamp(1.2rem, 1.6vw, 1.4rem)/1.45 var(--kroj-szeryf); }
.opinia p::before { content: "„"; }
.opinia p::after { content: "”"; }
.opinia figcaption { display: flex; align-items: center; gap: .6rem; margin-top: auto; font-weight: 650; }
.opinia figcaption::before { content: ""; width: 1.4rem; height: 2px; border-radius: 1px; background: var(--akcent); }

/* ---------- Zamów bukiet ---------- */
.zamow { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.zamow__telefon { margin-bottom: .3rem; }
.zamow__telefon a { display: inline-flex; align-items: center; min-height: 48px; font: 650 clamp(1.8rem, 3.2vw, 2.4rem)/1.1 var(--kroj-szeryf); color: var(--tekst); text-decoration: none; font-variant-numeric: lining-nums tabular-nums; }
.zamow__telefon a:hover { color: var(--akcent-tekst); }
.zamow__formularz > p { color: var(--tekst-2); }
.formularz { margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px solid var(--linia-mocna); display: grid; gap: 1.25rem; }
.wybrany {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .25rem 1rem;
  padding: .6rem 1rem; border-radius: 3px; background: var(--papier); color: var(--na-papierze);
}
.wybrany[hidden] { display: none; }
.wybrany p { margin: 0; }
.wybrany .link-przycisk { color: var(--na-papierze); }
.komunikat { margin: 0; font-size: .95rem; color: var(--tekst-2); }
.komunikat:empty { display: none; }
.pole { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: .4rem; align-content: start; }
.pole label, .pole legend { font-weight: 650; padding: 0; }
.pole legend { margin-bottom: .4rem; }
.pole__opcja { font-weight: 400; color: var(--tekst-2); }
.pole-para { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; }
.pole input[type="text"], .pole input[type="tel"], .pole input[type="date"], .pole select, .pole textarea {
  width: 100%; min-height: 52px; padding: .6rem .9rem;
  background: var(--pole); color: var(--tekst); border: 2px solid var(--linia-mocna); border-radius: 6px;
  font: 400 1.0625rem/1.35 var(--kroj);        /* ponad 16 px - telefon nie powiększa strony przy wpisywaniu */
}
/* Bez natywnego uchwytu do rozciągania: jego pierwsze narysowanie zajmowało kartę graficzną na 75-200 ms
   i przewijanie zacinało się, gdy formularz wjeżdżał na ekran (zmierzone 07.10). Pole samo rośnie z tekstem. */
.pole textarea { resize: none; min-height: 96px; max-height: 320px; field-sizing: content; }
.pole input:focus-visible, .pole select:focus-visible, .pole textarea:focus-visible { outline-offset: 0; border-color: var(--akcent-tekst); }
.pole [aria-invalid="true"] { border-color: #B3261E; }
:root[data-motyw="ciemny"] .pole [aria-invalid="true"] { border-color: #F2A19B; }
.pole__blad { margin: 0; font-size: .95rem; font-weight: 600; color: #A1231B; }
:root[data-motyw="ciemny"] .pole__blad { color: #F2A19B; }
.pole__blad:empty { display: none; }
.pole__pomoc { margin: 0; font-size: .92rem; color: var(--tekst-2); }
.wybory { display: flex; flex-wrap: wrap; gap: .5rem; }
.wybory label {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 46px; padding: .35rem .95rem .35rem .75rem;
  background: var(--pole); border: 2px solid var(--linia-mocna); border-radius: 6px; font-weight: 550; cursor: pointer;
  transition: border-color .15s ease;
}
.wybory label:has(input:checked) { border-color: var(--akcent-tekst); }
.wybory input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--akcent); }
/* Odbiór w kwiaciarni - adres dowozu niepotrzebny. */
.formularz:has(#f-odbior:checked) .pole--adres { display: none; }
.formularz__uwaga { margin: 0; font-size: .95rem; color: var(--tekst-2); }
.formularz .przycisk { justify-self: start; }

.zamow__bok { display: grid; gap: 1.1rem; justify-items: start; }
.zamow__bok h3 { font: italic 600 1.8rem/1.1 var(--kroj-szeryf); }
.adres { margin: 0; }
.godziny { margin: 0; width: 100%; }
.godziny div { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--linia); }
.godziny div:first-child { border-top: 1px solid var(--linia); }
.godziny dd { margin: 0; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mapa { margin: 0; width: 100%; }
.mapa svg { display: block; width: 100%; height: auto; border-radius: 3px; border: 1px solid var(--linia); }
.mapa figcaption { margin-top: .6rem; font-size: .92rem; color: var(--tekst-2); }
.m-tlo { fill: var(--m-tlo); }
.m-blok rect { fill: var(--m-blok); }
.m-drzewa circle { fill: var(--m-drzewo); }
.m-ulica { fill: var(--m-ulica); }
.m-srodek { fill: none; stroke: var(--linia-mocna); stroke-width: 2; stroke-dasharray: 10 10; }
.m-pawilon { fill: var(--papier); }
.m-wejscie { stroke: var(--akcent-tekst); stroke-width: 5; stroke-linecap: round; }
.m-pinezka path { fill: var(--akcent); stroke: var(--m-tlo); stroke-width: 2; }
.m-pinezka text { font: 700 13px var(--kroj); fill: var(--na-akcencie); }
.m-etykieta { font: 400 13px var(--kroj); fill: var(--tekst-2); }
.m-etykieta--nasza { font: 800 15px var(--kroj); letter-spacing: 1.5px; fill: var(--tekst); }
.m-nazwa-ulicy { font: 700 13px var(--kroj); fill: var(--tekst); letter-spacing: .5px; paint-order: stroke; stroke: var(--m-ulica); stroke-width: 8px; stroke-linejoin: round; }
.m-polnoc path { fill: var(--tekst-2); }
.m-polnoc text { font: 700 12px var(--kroj); fill: var(--tekst-2); }

/* ---------- Stopka ---------- */
.stopka { background: var(--stopka); color: #EEEBF6; padding: clamp(48px, 7vw, 80px) var(--margines) 2rem; }
.stopka :focus-visible { outline-color: #B7B9F5; }
.stopka__kolumny { width: min(1120px, 100%); margin: 0 auto; overflow-wrap: anywhere; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; font-size: 1rem; }
.stopka__logo { display: flex; align-items: center; gap: .55rem; margin-bottom: 1rem; font: italic 650 1.9rem/1 var(--kroj-szeryf); }
.stopka__logo svg { width: 17px; height: 32px; color: #B7B9F5; --lodyga: #93B387; }
.stopka__kontakt { display: grid; justify-items: start; align-content: start; }
.stopka__kontakt a { display: inline-flex; align-items: center; min-height: 44px; color: #EEEBF6; }
.stopka__autorzy summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.stopka__autorzy p { margin-top: .6rem; font-size: .9rem; color: #B9B3D3; }
.stopka__demo { width: min(1120px, 100%); margin: 2.5rem auto 0; padding-top: 1.25rem; border-top: 1px solid rgb(238 235 246 / .2); font-size: .9rem; color: #B9B3D3; }

/* ---------- Pasek na telefonie ---------- */
.pasek { display: none; }
@media (max-width: 719px) {
  html { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .stopka { padding-bottom: calc(2rem + 76px + env(safe-area-inset-bottom)); }
  .pasek {
    display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 10px;
    position: fixed; inset: auto 0 0; z-index: 40;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--tlo); border-top: 1px solid var(--linia);
    transform: translateY(100%); visibility: hidden;
    transition: transform .24s var(--ease-out), visibility 0s .24s, background-color .3s;
  }
  .pasek.widoczny { transform: none; visibility: visible; transition: transform .24s var(--ease-out), visibility 0s, background-color .3s; }
}

/* ---------- Dymek (informacje demo) ---------- */
.dymek {
  position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translate(-50%, 12px);
  width: max-content; max-width: min(480px, calc(100vw - 32px)); padding: .9rem 1.2rem; border-radius: 6px;
  background: var(--tekst); color: var(--tlo); font-size: 1rem; box-shadow: 0 10px 30px rgb(0 0 0 / .25);
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s var(--ease-out);
}
.dymek.widoczny { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 719px) { .dymek { bottom: calc(88px + env(safe-area-inset-bottom)); } }

/* ---------- Tablet i telefon ---------- */
@media (max-width: 899px) {
  .wejscie { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 32px; padding-block: 32px 40px; }
  .wejscie__foto img { aspect-ratio: 4 / 3; max-height: none; }
  .jak, .dowoz, .zamow, .opinie__lista { grid-template-columns: minmax(0, 1fr); }
  .jak__foto img { aspect-ratio: 16 / 10; object-position: 50% 45%; }
  .dowoz__foto { order: -1; }
  .dowoz__foto img { aspect-ratio: 16 / 10; object-position: 50% 60%; }
  .stopka__kolumny { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .pole-para { grid-template-columns: minmax(0, 1fr); }
  .zawieszka { padding: 22px 18px 20px 48px; clip-path: polygon(22px 0, 100% 0, 100% 100%, 22px 100%, 0 calc(100% - 22px), 0 22px); }
  .zawieszka::before { left: 14px; width: 13px; height: 13px; top: calc(50% - 6.5px); box-shadow: 0 0 0 3px var(--papier-ciemny); }
  .zawieszka div { grid-template-columns: minmax(0, 1fr); }
  /* Mapka ma na telefonie ok. 0,55 swojej wielkości - napisy powiększone, żeby miały ok. 11 px. */
  .m-nazwa-ulicy { font-size: 20px; }
  .m-etykieta { font-size: 18px; }
  .m-etykieta--nasza { font-size: 20px; }
  .m-pinezka text { font-size: 16px; transform: translateY(1px); }
  .m-polnoc text { font-size: 18px; }
}