@import "kroje.css";

/* =========================================================================
   herzeten.eu — arkusz silnika `syz_` (od Syzygium aromaticum, gozdzikowca).
   Odwzorowanie makiety Krzyska: rozowa paleta, duze zaokraglenia, miekkie
   cienie, karty na bieli, zielony przycisk zamowienia.

   ZASADY, KTORE SIEDZA W TYM PLIKU:
   * liczba kolumn siatki ZAWSZE jako klasa (.syz-k2/.syz-k3/.syz-k4), nigdy
     w atrybucie style — atrybut ma wyzsza wage niz zapytanie medialne i
     rozwalilby telefon (pkt 354);
   * zaden element html/body nie dostaje overflow-x (pkt 44/184);
   * kazde dziecko siatki ma min-width:0, kazda kolumna minmax(0,1fr);
   * kolory tylko przez zmienne, zeby paleta siedziala w jednym miejscu.
   ========================================================================= */

:root {
  --syz-roz: #e8407c;
  --syz-roz-ciemny: #cf1552;
  --syz-roz-jasny: #fde7f0;
  --syz-roz-tlo: #fff5f8;
  --syz-roz-obwodka: #f8cfdf;
  --syz-limonka: #c3d642;
  --syz-limonka-ciemna: #93a71f;
  --syz-krem: #fdf3e3;
  --syz-zielen: #43ad3f;
  --syz-zielen-ciemna: #2f8b2c;
  --syz-tusz: #1d1116;
  --syz-szary: #6d5d65;
  --syz-szary-jasny: #efe9ec;
  --syz-biel: #ffffff;
  --syz-r-mala: 12px;
  --syz-r: 20px;
  --syz-r-duza: 28px;
  --syz-cien: 0 2px 10px rgba(207, 21, 82, .07);
  --syz-cien-duzy: 0 10px 34px rgba(207, 21, 82, .12);
  --syz-szer: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--syz-biel);
  color: var(--syz-tusz);
  font: 400 17px/1.62 "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow-wrap: break-word;
}

h1, h2, h3, .syz-cyfra, .syz-cena-kwota {
  font-family: "Onest", "Mulish", system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--syz-roz-ciemny); }

img { max-width: 100%; height: auto; display: block; }

[hidden] { display: none !important; }

.syz-akcent { color: var(--syz-roz-ciemny); }

.syz-reka {
  font-family: "Marck Script", cursive;
  font-weight: 400;
  letter-spacing: 0;
}

.syz-szer {
  width: 100%;
  max-width: var(--syz-szer);
  margin-inline: auto;
  padding-inline: 18px;
}

.syz-tylko-czytnik {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ----------------------------------------------------------- siatki */

.syz-siatka { display: grid; gap: 18px; }
.syz-siatka > * { min-width: 0; }
.syz-k2, .syz-k3, .syz-k4, .syz-k5 { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 620px) {
  .syz-k2, .syz-k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .syz-k3, .syz-k5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .syz-k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .syz-k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .syz-k5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ----------------------------------------------------------- nagłówek */

.syz-gora {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--syz-roz-obwodka);
}
.syz-gora-w {
  display: flex; align-items: center; gap: 14px;
  min-height: 60px; flex-wrap: wrap;
}
.syz-znak {
  font-family: "Onest", sans-serif; font-weight: 800; font-size: 21px;
  letter-spacing: -.02em; color: var(--syz-tusz); text-decoration: none;
}
.syz-znak span { color: var(--syz-roz-ciemny); }
.syz-nawigacja { display: none; gap: 18px; margin-left: auto; }
.syz-nawigacja a {
  color: var(--syz-szary); text-decoration: none; font-size: 15px; font-weight: 600;
}
.syz-nawigacja a:hover { color: var(--syz-roz-ciemny); }
@media (min-width: 860px) { .syz-nawigacja { display: flex; } }

.syz-kraj-link {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; color: var(--syz-szary); text-decoration: none;
  background: var(--syz-roz-jasny); padding: 6px 12px; border-radius: 999px;
}
@media (min-width: 860px) { .syz-kraj-link { margin-left: 0; } }
.syz-kraj-link img { width: 20px; height: auto; border-radius: 3px; }

/* ----------------------------------------------------------- hero */

.syz-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(760px 520px at 78% 22%, #ffd9e6 0%, rgba(255, 217, 230, 0) 68%),
    radial-gradient(620px 460px at 12% 8%, #fff1f6 0%, rgba(255, 241, 246, 0) 70%),
    linear-gradient(180deg, var(--syz-roz-tlo) 0%, #fffdfe 100%);
  padding: 26px 0 34px;
}
.syz-hero-serce {
  position: absolute; top: -70px; right: -90px; width: 560px; max-width: 78vw;
  opacity: .5; pointer-events: none; z-index: 0;
}
.syz-hero-w { position: relative; z-index: 1; }
.syz-hero-siatka { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) {
  .syz-hero-siatka { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

.syz-plakietka {
  display: inline-block; background: var(--syz-biel); color: var(--syz-szary);
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  padding: 7px 16px; border-radius: 999px; box-shadow: var(--syz-cien);
  margin-bottom: 14px;
}

.syz-hero h1 { font-size: clamp(30px, 4.6vw, 46px); max-width: 17ch; }
.syz-hero-pod {
  font-size: clamp(20px, 3.4vw, 28px); font-weight: 800;
  font-family: "Onest", sans-serif; line-height: 1.16; margin: 8px 0 14px;
  letter-spacing: -.015em;
}
.syz-hero-lead { font-size: 16.5px; color: var(--syz-szary); max-width: 48ch; margin-bottom: .7em; }
.syz-hero-lead strong { color: var(--syz-tusz); }
.syz-hero-pierwszy { font-size: 18px; color: var(--syz-tusz); }

.syz-usp { display: flex; flex-wrap: wrap; gap: 20px 26px; margin: 22px 0 0; }
.syz-usp-el { width: 132px; }
.syz-usp-el img { width: 54px; height: 54px; margin-bottom: 9px; }
.syz-usp-el b { display: block; font-size: 14px; font-weight: 700; line-height: 1.35; }
.syz-usp-el span { display: block; font-size: 14px; color: var(--syz-szary); line-height: 1.35; }

/* Wysoki packshot ograniczamy WYSOKOSCIA, nie szerokoscia (pkt 367) —
   inaczej na waskim ekranie zajmuje dwie trzecie szerokosci i przygniata
   caly pierwszy ekran. */
.syz-hero-foto { position: relative; text-align: center; padding-top: 8px; }
/* UWAGA: klasa siedzi na samym <img>, nie na <picture> — selektor
   `.syz-pak img` nie trafial w nic i packshot rosl do pelnej szerokosci. */
.syz-hero-foto img.syz-pak {
  max-height: min(430px, 56vh); width: auto; margin-inline: auto;
  position: relative; z-index: 2;
  filter: drop-shadow(0 22px 34px rgba(207, 21, 82, .22));
}
.syz-hero-rosliny {
  position: absolute; left: 0; right: 0; bottom: 2px; z-index: 1;
  display: flex; align-items: flex-end; justify-content: center;
  gap: 0; pointer-events: none;
}
.syz-hero-rosliny img {
  width: 124px; height: 124px; object-fit: cover; border-radius: 999px;
  opacity: .95; box-shadow: 0 6px 18px rgba(207, 21, 82, .14);
  border: 4px solid rgba(255, 255, 255, .85);
}
.syz-hero-rosliny picture:nth-child(1) img { transform: translate(-46px, 10px) rotate(-4deg); }
.syz-hero-rosliny picture:nth-child(2) img { width: 132px; height: 132px; transform: translateY(26px); position: relative; z-index: 2; }
.syz-hero-rosliny picture:nth-child(3) img { transform: translate(46px, 10px) rotate(4deg); }
@media (max-width: 619px) { .syz-hero-rosliny img { width: 86px; height: 86px; } }

.syz-reka-hero {
  position: absolute; top: 2%; left: 0; z-index: 3;
  font-size: clamp(17px, 2.6vw, 23px); color: var(--syz-roz-ciemny);
  transform: rotate(-7deg); text-align: center; line-height: 1.2;
  max-width: 9ch;
}

/* ----------------------------------------------------------- pas zaufania */

.syz-pas { background: var(--syz-biel); padding: 20px 0; border-bottom: 1px solid var(--syz-roz-jasny); }
.syz-pas-el { display: flex; align-items: center; gap: 12px; }
.syz-pas-el img { width: 46px; height: 46px; flex: none; }
.syz-pas-el b { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; }
.syz-pas-el span { display: block; font-size: 15px; color: var(--syz-szary); line-height: 1.3; }

/* ----------------------------------------------------------- sekcje */

.syz-sekcja { padding: 42px 0; }
.syz-sekcja-roz { background: var(--syz-roz-tlo); }
.syz-sekcja h2 { font-size: clamp(26px, 5vw, 38px); margin-bottom: 10px; }
.syz-sekcja-wstep { color: var(--syz-szary); max-width: 62ch; margin-bottom: 22px; }

.syz-dwie { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) {
  .syz-dwie { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: start; }
}

/* karty skladnikow */
.syz-skl { }
.syz-skl-foto {
  border-radius: var(--syz-r); overflow: hidden; margin-bottom: 12px;
  background: var(--syz-roz-jasny); aspect-ratio: 16 / 13;
}
.syz-skl-foto img { width: 100%; height: 100%; object-fit: cover; }
.syz-skl h3 { font-size: 21px; margin-bottom: 4px; }
.syz-skl-ile { font-size: 14px; font-weight: 700; color: var(--syz-roz-ciemny); margin-bottom: 9px; }
.syz-lista { list-style: none; margin: 0; padding: 0; }
.syz-lista > li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 15px; line-height: 1.45; color: var(--syz-szary); margin-bottom: 8px;
}
.syz-lista > li img { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.syz-lista > li b { color: var(--syz-tusz); font-weight: 700; }

/* rozowa karta z sercem */
.syz-karta-serce {
  background: linear-gradient(180deg, #ffeaf2 0%, #ffe0ec 100%);
  border: 1px solid var(--syz-roz-obwodka);
  border-radius: var(--syz-r-duza); padding: 24px 22px;
}
.syz-karta-serce h2 { font-size: clamp(22px, 3.4vw, 30px); text-align: center; }
.syz-karta-serce .syz-serce-foto {
  width: min(330px, 92%); margin: 16px auto 20px;
  filter: drop-shadow(0 10px 26px rgba(207, 21, 82, .18));
  border-radius: var(--syz-r);
  mix-blend-mode: multiply;
}
.syz-karta-serce .syz-lista > li {
  align-items: center; color: var(--syz-tusz); font-weight: 600; font-size: 15px;
}
.syz-karta-serce .syz-lista > li img { width: 34px; height: 34px; }
.syz-zrodlo-claim {
  margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--syz-szary);
  background: rgba(255, 255, 255, .72); border-radius: var(--syz-r-mala); padding: 11px 13px;
}

/* ----------------------------------------------------------- tabela porownawcza */

.syz-porownanie {
  background: var(--syz-biel); border: 1px solid var(--syz-roz-obwodka);
  border-radius: var(--syz-r-duza); padding: 22px; box-shadow: var(--syz-cien);
}
.syz-porownanie table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.syz-porownanie th, .syz-porownanie td { padding: 11px 8px; vertical-align: middle; }
.syz-porownanie thead th { font-size: 13px; color: var(--syz-szary); font-weight: 700; text-align: center; }
.syz-porownanie thead th:first-child { text-align: left; }
.syz-porownanie tbody td { font-size: 15px; border-top: 1px solid var(--syz-szary-jasny); }
.syz-porownanie tbody td:first-child { text-align: left; }
.syz-porownanie td.syz-ptak, .syz-porownanie td.syz-krzyz { text-align: center; }
.syz-porownanie td img { width: 30px; height: 30px; margin-inline: auto; }
.syz-kol-nasza { background: linear-gradient(180deg, #fff2f7 0%, #ffe6ef 100%); }
.syz-glowa-nasza {
  background: linear-gradient(180deg, var(--syz-roz) 0%, var(--syz-roz-ciemny) 100%);
  color: #fff; border-radius: var(--syz-r) var(--syz-r) 0 0; padding: 14px 8px 10px;
}
.syz-glowa-nasza img { width: 66px; margin: 0 auto 6px; }
.syz-glowa-nasza b { font-size: 14px; }
.syz-glowa-obca { padding: 14px 8px 10px; }
.syz-glowa-obca img { width: 52px; margin: 0 auto 6px; opacity: .45; }

/* ----------------------------------------------------------- karta oferty */

.syz-oferta {
  position: relative; background: var(--syz-biel);
  border: 1px solid var(--syz-roz-obwodka); border-radius: var(--syz-r-duza);
  padding: 26px 22px 22px; box-shadow: var(--syz-cien-duzy); overflow: hidden;
}
.syz-oferta-zakladka {
  position: absolute; top: 0; left: 22px;
  background: linear-gradient(180deg, var(--syz-roz) 0%, var(--syz-roz-ciemny) 100%);
  color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .04em;
  padding: 6px 15px; border-radius: 0 0 12px 12px;
}
.syz-oferta h2 { font-size: clamp(24px, 4.2vw, 34px); margin: 18px 0 16px; }
.syz-oferta-siatka { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 720px) {
  .syz-oferta-siatka { grid-template-columns: minmax(0, 170px) minmax(0, 1fr); }
}
.syz-cena {
  background: var(--syz-roz-jasny); border-radius: var(--syz-r);
  padding: 16px 12px; text-align: center;
}
.syz-cena-nad { display: block; font-size: 14px; color: var(--syz-szary); font-weight: 600; }
.syz-cena-kwota { display: block; font-size: clamp(36px, 7vw, 52px); color: var(--syz-roz-ciemny); }
.syz-cena-pod { display: block; font-size: 14px; color: var(--syz-szary); }

.syz-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin-top: 18px; padding: 15px 18px;
  background: linear-gradient(180deg, var(--syz-zielen) 0%, var(--syz-zielen-ciemna) 100%);
  color: #fff; font: 700 17px/1.2 "Onest", sans-serif; letter-spacing: .01em;
  border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
  white-space: normal; text-align: center;
  box-shadow: 0 8px 20px rgba(47, 139, 44, .28);
}
.syz-cta:hover { filter: brightness(1.05); }
.syz-cta img { width: 22px; height: 22px; flex: none; }

.syz-bezpiecznie {
  display: flex; gap: 10px; align-items: center; margin-top: 14px;
  font-size: 13px; color: var(--syz-szary); line-height: 1.4;
}
.syz-bezpiecznie img { width: 28px; height: 28px; flex: none; }

/* Ozdobna butelka w karcie oferty. POZYCJONUJEMY <picture>, NIE <img>:
   pomocnik `syz_pak()` wiesza klase na obrazku, a obrazek siedzi w <picture>.
   Gdy pozycjonowanie trafialo na sam <img>, jego rodzic <picture> zostawal
   pustym elementem o zerowej szerokosci i butelka znikala (zmierzone:
   width 0px). Ten sam rodzaj pomylki co przy packshocie w hero. */
.syz-oferta > picture {
  position: absolute; right: -18px; bottom: -10px; width: 168px;
  opacity: .95; pointer-events: none; display: none; z-index: 0;
}
@media (min-width: 1040px) { .syz-oferta > picture { display: block; } }
.syz-oferta > picture img.syz-oferta-pak { width: 100%; height: auto; }

/* ----------------------------------------------------------- formularz */

.syz-form {
  background: var(--syz-biel); border: 1px solid var(--syz-roz-obwodka);
  border-radius: var(--syz-r-duza); padding: 22px; box-shadow: var(--syz-cien-duzy);
}
.syz-form h2, .syz-form .syz-form-tytul {
  font-family: "Onest", sans-serif; font-weight: 800; font-size: 24px; margin-bottom: 4px;
}
.syz-form-pod { font-size: 15px; color: var(--syz-szary); margin-bottom: 16px; }
.syz-pole { margin-bottom: 13px; }
.syz-pole label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 5px; }
.syz-pole input {
  width: 100%; padding: 13px 14px; font: 400 17px/1.3 "Mulish", sans-serif;
  color: var(--syz-tusz); background: var(--syz-roz-tlo);
  border: 1px solid var(--syz-roz-obwodka); border-radius: var(--syz-r-mala);
}
.syz-pole input:focus { outline: 2px solid var(--syz-roz); outline-offset: 1px; }
.syz-zgoda { font-size: 12.5px; color: var(--syz-szary); margin-top: 12px; line-height: 1.5; }
.syz-blad { color: var(--syz-roz-ciemny); font-size: 14px; font-weight: 700; margin-top: 8px; }
.syz-sukces {
  background: #eaf7ea; border: 1px solid #bfe3bd; border-radius: var(--syz-r);
  padding: 18px; font-size: 16px;
}
/* pulapka na roboty — POZA ekranem, nigdy display:none (pkt 182) */
.syz-firma {
  position: absolute !important; left: -9999px !important; top: -9999px !important;
  width: 1px; height: 1px; opacity: 0;
}

/* ----------------------------------------------------------- FAQ */

.syz-faq-el {
  background: var(--syz-biel); border: 1px solid var(--syz-roz-obwodka);
  border-radius: var(--syz-r); margin-bottom: 10px; overflow: hidden;
}
.syz-faq-el > summary {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 14px 16px; font-weight: 700; font-size: 16px; list-style: none;
}
.syz-faq-el > summary::-webkit-details-marker { display: none; }
.syz-faq-el > summary::after {
  content: ""; margin-left: auto; width: 22px; height: 22px; flex: none;
  background: center / contain no-repeat url("ikony/plus-goly.svg");
}
.syz-faq-el[open] > summary::after { background-image: url("ikony/minus-goly.svg"); }
.syz-faq-tresc { padding: 0 16px 16px; color: var(--syz-szary); font-size: 16px; }

.syz-zwijka {
  background: var(--syz-roz-tlo); border: 1px solid var(--syz-roz-obwodka);
  border-radius: var(--syz-r); margin-bottom: 12px; padding: 0;
}
.syz-zwijka > summary {
  cursor: pointer; padding: 14px 16px; font-weight: 700; font-size: 17px;
  font-family: "Onest", sans-serif;
}
.syz-zwijka > div { padding: 0 16px 16px; }

/* ----------------------------------------------------------- tabela skladu */

.syz-przewin { overflow-x: auto; border-radius: var(--syz-r); }
.syz-tab { width: 100%; border-collapse: collapse; background: var(--syz-biel); min-width: 460px; }
.syz-tab th, .syz-tab td { padding: 11px 13px; text-align: left; font-size: 15px; }
.syz-tab thead th {
  background: linear-gradient(180deg, var(--syz-roz) 0%, var(--syz-roz-ciemny) 100%);
  color: #fff; font-weight: 700;
}
.syz-tab tbody tr:nth-child(even) { background: var(--syz-roz-tlo); }
.syz-tab tbody td:last-child { font-weight: 700; white-space: nowrap; }
.syz-tab tr.syz-wiersz-b1 td { background: #f3f8dc; }

/* ----------------------------------------------------------- oswiadczenia */

.syz-claim {
  background: var(--syz-krem); border-left: 4px solid var(--syz-limonka);
  border-radius: 0 var(--syz-r-mala) var(--syz-r-mala) 0;
  padding: 14px 16px; margin-bottom: 10px; font-size: 16px; font-weight: 600;
}

/* ----------------------------------------------------------- kroki */

.syz-krok { background: var(--syz-biel); border-radius: var(--syz-r); padding: 16px; box-shadow: var(--syz-cien); }
.syz-krok .syz-cyfra {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px; font-size: 17px;
  background: linear-gradient(180deg, var(--syz-roz) 0%, var(--syz-roz-ciemny) 100%);
  color: #fff; margin-bottom: 9px;
}
.syz-krok b { display: block; font-size: 16px; margin-bottom: 3px; }
.syz-krok span { font-size: 15px; color: var(--syz-szary); }

/* ----------------------------------------------------------- zalety */

.syz-zaleta {
  background: var(--syz-roz-tlo);
  border: 1px solid var(--syz-roz-obwodka);
  border-radius: var(--syz-r); padding: 18px 20px;
  display: grid; grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: auto auto; gap: 4px 16px; align-content: start;
}
.syz-zaleta img { width: 46px; height: 46px; margin: 0; grid-column: 1; grid-row: 1; }
.syz-zaleta b {
  grid-column: 2; grid-row: 1; align-self: center;
  font-size: 18px; font-family: "Onest", sans-serif; line-height: 1.25;
}
.syz-zaleta span { grid-column: 2; grid-row: 2; font-size: 15px; color: var(--syz-szary); }
@media (max-width: 479px) {
  .syz-zaleta { grid-template-columns: minmax(0, 1fr); }
  .syz-zaleta img, .syz-zaleta b, .syz-zaleta span { grid-column: 1; }
  .syz-zaleta img { grid-row: 1; margin-bottom: 6px; }
  .syz-zaleta b { grid-row: 2; }
  .syz-zaleta span { grid-row: 3; }
}

/* ----------------------------------------------------------- ostrzezenia */

.syz-ostrz {
  background: var(--syz-szary-jasny); border-radius: var(--syz-r); padding: 20px;
}
.syz-ostrz h2 { font-size: 24px; margin-bottom: 12px; }
.syz-ostrz ul { margin: 0; padding-left: 20px; font-size: 15px; color: var(--syz-szary); }
.syz-ostrz li { margin-bottom: 6px; }
.syz-ostrz .syz-nota { font-size: 13.5px; margin-top: 12px; color: var(--syz-szary); }

/* ----------------------------------------------------------- stopka */

.syz-stopka { background: #2a1a20; color: #e8d8de; padding: 34px 0 26px; font-size: 15px; }
.syz-stopka a { color: #ffc2d8; }
.syz-stopka p { margin-bottom: .9em; }
.syz-stopka-linki { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 14px 0; }
.syz-stopka-naglowek { font-weight: 700; color: #fff; margin-bottom: 6px; }

/* ----------------------------------------------------------- pasek mobilny */

.syz-pasek {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; align-items: center; gap: 10px;
  padding: 9px 12px; background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--syz-roz-obwodka);
  box-shadow: 0 -4px 18px rgba(207, 21, 82, .12);
}
.syz-pasek b { font-size: 14px; line-height: 1.2; }
.syz-pasek span { font-size: 14px; color: var(--syz-roz-ciemny); font-weight: 700; }
.syz-pasek .syz-cta { width: auto; margin: 0; padding: 11px 16px; font-size: 15px; flex: none; }
@media (max-width: 899px) { .syz-pasek { display: flex; } body { padding-bottom: 74px; } }

/* ----------------------------------------------------------- wybor kraju */

.syz-kraje { padding: 34px 0 44px; background: var(--syz-roz-tlo); min-height: 100vh; }
.syz-kraje-pak { width: min(260px, 70%); margin: 0 auto 18px; }
.syz-kraje h1 { font-size: clamp(28px, 5vw, 40px); text-align: center; margin-bottom: 8px; }
.syz-kraje-wstep { text-align: center; color: var(--syz-szary); margin-bottom: 24px; }
.syz-kraje-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.syz-kraje-lista > li { min-width: 0; }
@media (min-width: 620px) { .syz-kraje-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .syz-kraje-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.syz-kraje-lista a {
  display: flex; align-items: center; gap: 12px; padding: 13px 15px;
  background: var(--syz-biel); border: 1px solid var(--syz-roz-obwodka);
  border-radius: var(--syz-r); text-decoration: none; color: var(--syz-tusz);
  font-weight: 700; box-shadow: var(--syz-cien);
}
.syz-kraje-lista a:hover { border-color: var(--syz-roz); }
.syz-kraje-lista img { width: 34px; height: auto; border-radius: 4px; flex: none; }
.syz-kraje-lista em { display: block; font-style: normal; font-weight: 400; font-size: 14px; color: var(--syz-szary); }

/* ----------------------------------------------------------- artykul i dokumenty */

.syz-pismo { padding: 34px 0 44px; }
.syz-pismo h1 { font-size: clamp(27px, 4.6vw, 40px); margin-bottom: 14px; }
.syz-pismo-lead { font-size: 19px; color: var(--syz-szary); margin-bottom: 26px; max-width: 68ch; }
.syz-pismo h2 { font-size: clamp(21px, 3.4vw, 27px); margin: 28px 0 10px; }
.syz-pismo p, .syz-pismo li { max-width: 72ch; }
.syz-zrodla { margin-top: 30px; padding-top: 18px; border-top: 2px solid var(--syz-roz-jasny); }
.syz-zrodla ol { font-size: 14.5px; color: var(--syz-szary); padding-left: 20px; }
.syz-zrodla li { margin-bottom: 7px; }

/* ----------------------------------------------------------- druk i ruch */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* formularz w hero — waski, zeby nie rozpychal pierwszego ekranu */
.syz-hero-form { max-width: 620px; }
.syz-glowa-nasza b { text-shadow: 0 1px 2px rgba(0,0,0,.18); }

/* ---------------------------------------------- poprawki po zrzutach Krzyśka

   1) KROKI W KARCIE OFERTY łamały wyrazy w środku („trvanliv|om médiu”).
      Karta ma ~493 px, a siatka dostawała `syz-k4`, czyli cztery kolumny po
      98 px — w takiej kolumnie żaden dłuższy wyraz się nie mieści i
      `overflow-wrap: break-word` tnie go w połowie. Wewnątrz karty liczba
      kolumn nie może być narzucona z góry: kolumna ma mieć co najmniej
      150 px, a ile ich wejdzie, decyduje szerokość karty. Dotyczy to
      zwłaszcza Słowacji, która ma PIĘĆ kroków zamiast czterech (pkt 295).

   2) KOTWICE MENU wskakiwały pod przyklejony nagłówek — `scroll-margin-top`
      odsuwa cel skoku o jego wysokość. */

.syz-oferta .syz-siatka,
.syz-oferta .syz-siatka.syz-k4,
.syz-oferta .syz-siatka.syz-k3 {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.syz-krok b { overflow-wrap: normal; word-break: keep-all; }

main section[id], main [id] { scroll-margin-top: 74px; }

/* -------------------------------------------------- klasy zamiast atrybutu style
   CSP tej domeny ma `style-src 'self'`, wiec atrybut style=""  jest cicho
   odrzucany, a konsola sypie bledami (pkt 215). Odstepy i drobne rozmiary
   trzymamy w klasach. */
.syz-g8  { margin-top: 8px; }
.syz-g12 { margin-top: 12px; }
.syz-g14 { margin-top: 14px; }
.syz-g16 { margin-top: 16px; }
.syz-g18 { margin-top: 18px; }
.syz-g22 { margin-top: 22px; }
.syz-g26 { margin-top: 26px; }
.syz-maly { font-size: 15px; color: var(--syz-szary); }
.syz-tekst-maly { font-size: 15px; }
.syz-h2-karty { font-size: clamp(22px, 3.2vw, 26px); margin-bottom: 8px; }
.syz-wstep-karty { font-size: 15px; color: var(--syz-szary); margin-bottom: 14px; }
.syz-do-gory { align-items: start; }

/* ------------------------------------ wyrównanie kolumn na dużym ekranie
   Pomiar na 1440 px: pod tabelą porównawczą zostawało 573 px pustki, obok
   składników 247 px, a siatki „5 kafli w 3 kolumnach” i „5 kroków w 2”
   kończyły się dziurą. Siatki dobierają teraz liczbę kolumn same, a dwa
   bloki, które rozjeżdżały wysokości, idą pełną szerokością. */

.syz-skladniki-rzad { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.syz-zalety-rzad    { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
@media (min-width: 900px) { .syz-zalety-rzad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* nieparzysty ostatni kafel bierze cala szerokosc, zeby nie zostala dziura */
.syz-zalety-rzad > .syz-zaleta:last-child:nth-child(odd) { grid-column: 1 / -1; }
.syz-kroki-rzad     { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

@media (max-width: 619px) {
  .syz-skladniki-rzad,
  .syz-zalety-rzad,
  .syz-kroki-rzad { grid-template-columns: minmax(0, 1fr); }
}

/* pas z sercem: zdjęcie z lewej, oświadczenia z prawej */
.syz-pas-serce { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); align-items: center; }
.syz-pas-serce > * { min-width: 0; }
.syz-pas-serce h2 { text-align: left; }
.syz-pas-serce-foto { text-align: center; }
.syz-pas-serce .syz-serce-foto { width: min(320px, 86%); margin: 0 auto; }
@media (min-width: 860px) {
  .syz-pas-serce { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 30px; }
  .syz-pas-serce .syz-serce-foto { width: 100%; }
}

/* Ozdobna butelka w karcie oferty stoi absolutnie w prawym dolnym rogu.
   Po wyrownaniu kolumn tekst siegnal az do niej i chowal sie pod zdjeciem —
   dlatego ostatni blok tekstu dostaje miejsce po prawej dokladnie wtedy,
   gdy butelka jest widoczna (od 1040 px, ten sam prog co ona). */
@media (min-width: 1040px) {
  .syz-oferta-tekst { padding-right: 168px; }
}
.syz-oferta > *:not(picture) { position: relative; z-index: 1; }

/* hero — prawa kolumna niesie produkt i formularz */
.syz-hero-prawa { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.syz-hero-foto { padding-bottom: 58px; }
.syz-hero-form { max-width: none; }
@media (max-width: 979px) {
  .syz-hero-foto { padding-bottom: 46px; }
}

/* pas z sercem — objaśnienia pod spodem, pełną szerokością.
   Przy czterech akapitach w prawej kolumnie pas rósł do 714 px, a ilustracja
   miała 360 px: obok zdjęcia zostawało 354 px różowej pustki. */
.syz-pas-serce-noty { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .syz-pas-serce-noty { columns: 2; column-gap: 12px; }
}
.syz-pas-serce-noty > * {
  min-width: 0; margin: 0 0 12px; break-inside: avoid; -webkit-column-break-inside: avoid;
}
.syz-pas-serce-noty > *:last-child { margin-bottom: 0; }
.syz-pas-serce { align-items: start; }
.syz-pas-serce-foto { align-self: center; }

/* karta oferty bez ozdobnej butelki — wcięcie 168 px nie jest już potrzebne,
   akapity mają pełną szerokość karty i nie rozpychają jej w pionie */
@media (min-width: 1040px) { .syz-oferta-tekst { padding-right: 0; } }

/* Karta porównawcza dociąga do wysokości karty oferty — nadmiar wchodzi
   w wiersze tabeli, a nie w pusty prostokąt pod nią. */
@media (min-width: 980px) {
  #oferta .syz-dwie { align-items: stretch; }
  .syz-porownanie { display: flex; flex-direction: column; }
  .syz-porownanie .syz-przewin-tab { flex: 1 1 auto; display: flex; }
  .syz-porownanie table { flex: 1 1 auto; }
}