/* cysterra.eu — skórka `zur-`, odwzorowanie makiety Krzyśka (1.10.2026).
 *
 * Paleta wzięta z opakowania: malinowa magenta nadruku, pudrowy róż tła,
 * złamana biel kartonika. Charakter ma być „editorial commerce”, nie
 * kosmetyczny landing — stąd dużo bieli, cienkie linie, delikatne cienie
 * i botaniczne motywy w tle zamiast kolorowych plam.
 *
 * ZAKAZ `overflow-x` na telefonie — sprawdzane po każdej zmianie.
 * Style przez CSSOM w skryptach, bo CSP domeny to `style-src 'self'`.
 */

:root {
  /* ——— kolory ——— */
  --z-berry:     #d51b6b;   /* magenta z nadruku na pudełku */
  --z-berry-2:   #b01457;   /* ciemniejsza, nagłówki */
  --z-berry-3:   #8d0f45;   /* najciemniejsza, akcenty */
  --z-roz:       #ec6fa0;
  --z-blush:     #fce8f0;   /* pudrowy róż — tła sekcji */
  --z-blush-2:   #fdf3f7;   /* jaśniejszy */
  --z-krem:      #fffafc;   /* złamana biel */
  --z-bialy:     #ffffff;
  --z-tekst:     #3f2b34;
  --z-cichy:     #816b75;
  --z-linia:     #f4d9e5;
  --z-linia-2:   #fae8f0;

  /* ——— cienie: zawsze różowawe, nigdy szare ——— */
  --z-cien:      0 2px 14px rgba(181, 20, 87, .07);
  --z-cien-2:    0 10px 34px rgba(181, 20, 87, .12);
  --z-cien-3:    0 18px 48px rgba(181, 20, 87, .16);

  /* ——— promienie ——— */
  --z-r:         20px;
  --z-r-s:       14px;
  --z-r-xl:      28px;

  --z-szer:      1180px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.zur-body {
  margin: 0;
  background: var(--z-krem);
  color: var(--z-tekst);
  font: 400 17px/1.7 "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
        "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

p { margin: 0 0 1.1em; }
img { max-width: 100%; height: auto; display: block; }

.zur-szer { width: min(var(--z-szer), 100% - 40px); margin-inline: auto; }
.zur-waski { width: min(880px, 100% - 40px); margin-inline: auto; }

/* ═══════════════════════════════════════════ TYPOGRAFIA */
.zur-h2 {
  font-size: clamp(27px, 3.4vw, 40px);
  line-height: 1.18;
  font-weight: 800;
  color: var(--z-berry-2);
  letter-spacing: -.02em;
  margin: 0 0 .55em;
}
.zur-h3 {
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 700;
  color: var(--z-berry-2);
  margin: 0 0 .4em;
}
.zur-nad {
  text-transform: uppercase;
  letter-spacing: .17em;
  font-size: 12px;
  font-weight: 700;
  color: var(--z-roz);
  margin: 0 0 .9em;
}
.zur-pod-h2 { color: var(--z-cichy); font-size: 17px; max-width: 62ch; }

/* ═══════════════════════════════════════════ PRZYCISKI */
.zur-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(100deg, var(--z-berry) 0%, #e8397f 100%);
  color: #fff; text-decoration: none; font-weight: 700; font-size: 17px;
  border: 0; cursor: pointer; padding: 16px 34px;
  border-radius: 999px; min-height: 54px;
  box-shadow: 0 8px 22px rgba(213, 27, 107, .3);
  transition: transform .16s, box-shadow .16s, filter .16s;
}
.zur-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(213, 27, 107, .38); }
.zur-cta:active { transform: translateY(0); }
.zur-cta:focus-visible { outline: 3px solid var(--z-berry-3); outline-offset: 3px; }
.zur-cta svg { width: 18px; height: 18px; flex: 0 0 18px; }
.zur-cta-pelny { width: 100%; }

.zur-cta-lekki {
  background: none; color: var(--z-berry); box-shadow: none;
  border: 1.5px solid var(--z-linia); padding: 13px 26px; min-height: 48px;
}
.zur-cta-lekki:hover { background: var(--z-blush-2); border-color: var(--z-roz); transform: none; box-shadow: none; }

/* ═══════════════════════════════════════════ LISTWA */
.zur-listwa {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--z-linia-2);
}
.zur-listwa-in { display: flex; align-items: center; gap: 26px; min-height: 74px; }

.zur-logo {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; font-weight: 800; font-size: 22px;
  letter-spacing: .05em; color: var(--z-berry); text-transform: uppercase;
}
.zur-logo img { width: 24px; height: 24px; }

.zur-menu { margin-left: auto; }
.zur-menu ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.zur-menu a {
  color: var(--z-tekst); text-decoration: none; font-size: 15px; font-weight: 500;
  display: inline-flex; align-items: center; min-height: 44px;
  border-bottom: 2px solid transparent;
}
.zur-menu a:hover, .zur-menu a:focus-visible { color: var(--z-berry); border-bottom-color: var(--z-roz); }

.zur-listwa .zur-cta { padding: 12px 26px; min-height: 46px; font-size: 15px; }

/* ═══════════════════════════════════════════ HERO */
.zur-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(760px 420px at 18% 6%, #fdeef4 0%, rgba(253,238,244,0) 68%),
    linear-gradient(168deg, var(--z-krem) 0%, var(--z-blush-2) 100%);
  padding: 52px 0 64px;
}
/* botaniczne tło — dekoracja, nigdy treść */
.zur-hero-tlo { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.zur-hero-tlo img { position: absolute; opacity: .5; }
.zur-hero-tlo .zur-lisc-lg { left: -80px; top: -40px; width: 340px; }
.zur-hero-tlo .zur-lisc-pg { right: -60px; top: -30px; width: 300px; transform: scaleX(-1); }
.zur-hero-tlo .zur-lisc-ld { left: -70px; bottom: -80px; width: 260px; opacity: .38; }

.zur-hero-in {
  position: relative; z-index: 1;
  display: grid; gap: 34px; align-items: center;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .95fr) minmax(0, .72fr);
}

.zur-h1 {
  font-size: clamp(42px, 6.4vw, 78px);
  line-height: .98; font-weight: 800; letter-spacing: -.03em;
  color: var(--z-berry); margin: 0 0 .12em; text-transform: uppercase;
}
.zur-h1-pod {
  font-size: clamp(17px, 1.9vw, 21px); font-weight: 700;
  color: var(--z-berry-2); margin: 0 0 1em;
}
.zur-hero-opis { color: var(--z-cichy); font-size: 16.5px; max-width: 46ch; }

/* cztery odznaki pod opisem */
.zur-odznaki {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.zur-odznaki li { display: grid; justify-items: center; text-align: center; gap: 9px; }
.zur-odznaka-ikona {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--z-bialy); border: 1px solid var(--z-linia);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--z-cien);
}
.zur-odznaka-ikona img { width: 24px; height: 24px; }
.zur-odznaki span { font-size: 13px; line-height: 1.35; color: var(--z-tekst); }

/* pasek zaufania pod CTA */
.zur-zaufanie {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 22px;
}
.zur-zaufanie li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--z-cichy);
}
.zur-zaufanie img { width: 20px; height: 20px; }

/* packshot + pieczęć.
 * Figura dostaje zapas nad zdjeciem, zeby pieczec miala WLASNE miejsce.
 * Bez tego lezala na nadruku pudelka: w prawym gornym rogu kartonik ma
 * wlasna pieczec „10 CAPSULES”, a przy dolnej krawedzi — liste skladnikow.
 * Sprawdzone na zrzucie w obu polozeniach, nie w edytorze. */
.zur-hero-pak { position: relative; margin: 0; padding-top: 62px; }
.zur-hero-pak img { margin-inline: auto; filter: drop-shadow(0 22px 34px rgba(141, 15, 69, .18)); }
.zur-pieczec {
  position: absolute; top: 0; right: 4px;
  width: 124px; height: 124px; border-radius: 50%;
  background: var(--z-bialy); border: 2px solid #eec25a;
  display: grid; place-items: center; text-align: center; padding: 14px;
  box-shadow: var(--z-cien-2);
}
.zur-pieczec span {
  font-size: 11px; line-height: 1.25; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; color: var(--z-berry-2);
}

/* karta zamówienia */
.zur-karta-zam {
  background: var(--z-bialy); border: 1px solid var(--z-linia);
  border-radius: var(--z-r-xl); padding: 26px;
  box-shadow: var(--z-cien-3);
}
.zur-karta-zam-tyt {
  font-size: 19px; font-weight: 800; color: var(--z-berry-2);
  text-align: center; margin: 0 0 14px;
}
.zur-plakietka {
  display: block; text-align: center; text-transform: uppercase;
  letter-spacing: .12em; font-size: 11px; font-weight: 800;
  color: var(--z-roz); margin-bottom: 4px;
}
.zur-ceny { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin-bottom: 16px; }
.zur-cena-teraz { font-size: 40px; font-weight: 800; color: var(--z-berry); line-height: 1; }
.zur-cena-stara { font-size: 20px; color: #b9a3ad; text-decoration: line-through; }

.zur-karta-lista { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.zur-karta-lista li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.zur-karta-lista img { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px; }

/* ═══════════════════════════════════════════ FORMULARZ */
.zur-pole { margin: 0 0 12px; }
.zur-pole label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--z-cichy); margin-bottom: 6px;
}
.zur-pole input {
  width: 100%; padding: 15px 18px; font: inherit; font-size: 16px;
  border: 1.5px solid var(--z-linia); border-radius: 999px;
  background: var(--z-blush-2); color: inherit; min-height: 52px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.zur-pole input::placeholder { color: #c0a8b3; }
.zur-pole input:hover { border-color: var(--z-roz); }
.zur-pole input:focus-visible {
  outline: none; border-color: var(--z-berry);
  background: var(--z-bialy);
  box-shadow: 0 0 0 4px rgba(213, 27, 107, .12);
}
.zur-pole input[aria-invalid="true"] { border-color: #cc3344; background: #fff5f6; }

/* Miodek MUSI byc naprawde niewidoczny — widoczny zjada leady. */
.zur-miodek {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.zur-zgoda { font-size: 11.5px; line-height: 1.5; color: var(--z-cichy); text-align: center; margin: 12px 0 0; }
.zur-zgoda a { color: var(--z-berry); text-underline-offset: 2px; }
.zur-stan { font-size: 14.5px; font-weight: 600; margin: 10px 0 0; min-height: 1.4em; text-align: center; }
.zur-stan[data-stan="ok"]   { color: #1e7a45; }
.zur-stan[data-stan="blad"] { color: #c0392b; }

/* ═══════════════════════════════════════════ SEKCJE */
/* Listwa jest przyklejona, wiec skok po kotwicy chowalby naglowek pod nia. */
.zur-sek, .zur-hero, [id] { scroll-margin-top: 92px; }

.zur-sek { padding: 66px 0; position: relative; }
.zur-sek-blush { background: var(--z-blush); }
.zur-sek-blush-2 { background: var(--z-blush-2); }
.zur-sek-biala { background: var(--z-bialy); }

.zur-dwie { display: grid; gap: 44px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
.zur-dwie-lewa { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }

/* kółka z ikoną i podpisem — używane w kilku sekcjach */
.zur-kola { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.zur-kola-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zur-kola-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.zur-kola-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.zur-kola li { display: grid; justify-items: center; text-align: center; gap: 12px; }
.zur-kolo {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--z-blush); display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px var(--z-linia);
}
.zur-kolo img { width: 34px; height: 34px; }
.zur-kola strong { font-size: 15.5px; font-weight: 700; color: var(--z-berry-2); }
.zur-kola span { font-size: 14px; color: var(--z-cichy); line-height: 1.5; }

/* ═══════════════════════════════════════════ TABELA SKŁADU */
.zur-tabela {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--z-bialy); border: 1px solid var(--z-linia);
  border-radius: var(--z-r); overflow: hidden; font-size: 15.5px;
  box-shadow: var(--z-cien);
}
.zur-tabela thead th {
  background: var(--z-berry); color: #fff; font-weight: 700; font-size: 14px;
  text-align: left; padding: 14px 20px;
}
.zur-tabela td, .zur-tabela tbody th {
  padding: 15px 20px; border-top: 1px solid var(--z-linia-2);
  text-align: left; font-weight: 500; vertical-align: top;
}
.zur-tabela tbody tr:first-child td, .zur-tabela tbody tr:first-child th { border-top: 0; }
.zur-tabela em { color: var(--z-cichy); font-style: normal; font-size: 14px; display: block; }

/* ═══════════════════════════════════════════ KARTY SKŁADNIKÓW */
.zur-skladniki { display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zur-karta-skl {
  background: var(--z-bialy); border: 1px solid var(--z-linia);
  border-radius: var(--z-r); padding: 28px 26px 26px;
  box-shadow: var(--z-cien); position: relative; overflow: hidden;
}
.zur-karta-skl-foto {
  float: right; width: 108px; height: 108px; margin: 0 0 10px 16px;
  border-radius: 50%; object-fit: cover; box-shadow: var(--z-cien);
}
.zur-karta-skl p { font-size: 14.5px; color: var(--z-cichy); }
.zur-ptaszki { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 11px; clear: both; }
.zur-ptaszki li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.zur-ptaszki img { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px; }

/* ═══════════════════════════════════════════ PAS STOSOWANIA */
.zur-stosowanie { display: grid; gap: 40px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zur-blok-ikona { display: flex; gap: 18px; align-items: flex-start; }
.zur-blok-ikona .zur-kolo { flex: 0 0 68px; width: 68px; height: 68px; background: var(--z-bialy); }
.zur-blok-ikona .zur-kolo img { width: 30px; height: 30px; }

/* ═══════════════════════════════════════════ KROKI ZAMÓWIENIA */
.zur-kroki { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zur-kroki li {
  display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 4px 16px;
  align-items: start; position: relative;
}
.zur-krok-nr {
  grid-row: span 2; width: 54px; height: 54px; border-radius: 50%;
  background: var(--z-berry); color: #fff; font-weight: 800; font-size: 21px;
  display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(213, 27, 107, .28);
}
.zur-kroki strong { color: var(--z-berry-2); font-size: 16.5px; }
.zur-kroki span { color: var(--z-cichy); font-size: 14.5px; }

/* ═══════════════════════════════════════════ PAS CENY */
.zur-pas-ceny {
  background: var(--z-bialy); border: 1px solid var(--z-linia);
  border-radius: var(--z-r-xl); padding: 34px 40px;
  box-shadow: var(--z-cien-2);
  display: grid; gap: 26px; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto auto;
}
.zur-pas-ceny .zur-ceny { margin: 0; }

/* ═══════════════════════════════════════════ OPINIE */
.zur-opinie-ramka { position: relative; }
.zur-opinie {
  display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.zur-opinia {
  background: var(--z-bialy); border: 1px solid var(--z-linia);
  border-radius: var(--z-r); padding: 24px; box-shadow: var(--z-cien);
}
.zur-gwiazdki { display: flex; gap: 3px; margin-bottom: 12px; }
.zur-gwiazdki img { width: 17px; height: 17px; }
.zur-opinia blockquote { margin: 0 0 14px; font-size: 14.5px; color: var(--z-tekst); font-style: italic; }
.zur-opinia cite { font-style: normal; font-weight: 700; font-size: 13.5px; color: var(--z-berry-2); }

.zur-strzalka {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--z-bialy); border: 1px solid var(--z-linia);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--z-cien); z-index: 2;
}
.zur-strzalka:hover { border-color: var(--z-roz); }
.zur-strzalka-l { left: -22px; }
.zur-strzalka-p { right: -22px; }
.zur-kropki { display: flex; gap: 8px; justify-content: center; margin-top: 22px; }
.zur-kropka { width: 9px; height: 9px; border-radius: 50%; background: var(--z-linia); border: 0; padding: 0; cursor: pointer; }
.zur-kropka[aria-current="true"] { background: var(--z-berry); width: 26px; border-radius: 999px; }

/* ═══════════════════════════════════════════ PAS KOŃCOWY */
.zur-pas-koncowy {
  background: linear-gradient(104deg, var(--z-berry-3) 0%, var(--z-berry) 58%, #e8397f 100%);
  color: #fff; padding: 46px 0; position: relative; overflow: hidden;
}
.zur-pas-koncowy .zur-szer {
  display: grid; gap: 30px; align-items: center;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .5fr) auto;
}
.zur-pas-koncowy h2 { font-size: clamp(23px, 2.7vw, 32px); font-weight: 800; margin: 0 0 .4em; color: #fff; }
.zur-pas-koncowy p { color: rgba(255, 255, 255, .88); font-size: 15.5px; margin: 0; }
.zur-pas-koncowy .zur-cta { background: #fff; color: var(--z-berry); box-shadow: 0 8px 22px rgba(0, 0, 0, .18); }
.zur-pas-koncowy .zur-cta:hover { background: #fff; filter: brightness(.97); }
.zur-pas-koncowy .zur-zaufanie li { color: rgba(255, 255, 255, .9); }

/* ═══════════════════════════════════════════ FAQ */
.zur-faq { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zur-roz {
  background: var(--z-bialy); border: 1px solid var(--z-linia);
  border-radius: var(--z-r-s); overflow: hidden;
}
.zur-roz > summary {
  cursor: pointer; list-style: none; padding: 17px 52px 17px 22px;
  font-weight: 600; color: var(--z-tekst); position: relative; font-size: 15.5px;
  min-height: 56px; display: flex; align-items: center;
}
.zur-roz > summary::-webkit-details-marker { display: none; }
.zur-roz > summary::after,
.zur-roz > summary::before {
  content: ""; position: absolute; right: 22px; top: 50%;
  background: var(--z-berry); transition: opacity .18s, transform .18s;
}
.zur-roz > summary::after  { width: 13px; height: 2px; margin-top: -1px; }
.zur-roz > summary::before { width: 2px; height: 13px; margin-top: -6.5px; right: 27.5px; }
.zur-roz[open] > summary::before { opacity: 0; transform: rotate(90deg); }
.zur-roz > summary:hover { color: var(--z-berry); }
.zur-roz > div { padding: 0 22px 18px; color: var(--z-cichy); font-size: 15px; }

/* ═══════════════════════════════════════════ STOPKA */
.zur-stopka { background: var(--z-bialy); border-top: 1px solid var(--z-linia); padding: 30px 0; }
.zur-stopka-in { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.zur-stopka nav ul { display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none; margin: 0; padding: 0; }
.zur-stopka a {
  color: var(--z-cichy); text-decoration: none; font-size: 14px;
  display: inline-flex; align-items: center; min-height: 44px;
  border-bottom: 1px solid transparent;
}
.zur-stopka a:hover, .zur-stopka a:focus-visible { color: var(--z-berry); border-bottom-color: var(--z-roz); }
.zur-stopka-prawa { color: #a9939d; font-size: 13px; margin: 0; }
.zur-stopka-nota { color: var(--z-cichy); font-size: 13px; margin: 14px 0 0; max-width: 78ch; }

/* ═══════════════════════════════════════════ SKIP LINK */
.zur-skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--z-berry); color: #fff; padding: 13px 20px;
  border-radius: 0 0 var(--z-r-s) 0; font-weight: 700; text-decoration: none;
}
.zur-skip:focus { left: 0; }

/* ═══════════════════════════════════════════ PASEK NA TELEFONIE */
.zur-pasek {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; align-items: center; gap: 14px;
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--z-linia);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 22px rgba(181, 20, 87, .13);
}
.zur-pasek-opis { flex: 1 1 auto; min-width: 0; }
.zur-pasek-nazwa { margin: 0; font-weight: 700; font-size: 13.5px; color: var(--z-berry-2); }
.zur-pasek-cena { margin: 0; font-size: 16px; font-weight: 800; color: var(--z-berry); }
.zur-pasek .zur-cta { flex: 0 0 auto; padding: 12px 22px; min-height: 48px; font-size: 15px; }

/* ═══════════════════════════════════════════ POMOCNICZE
 * Polityka CSP domeny to `style-src 'self'` — atrybut `style=""` w HTML
 * zostalby ZABLOKOWANY przez przegladarke i sekcje rozjechalyby sie bez
 * zadnego bledu w PHP. Dlatego nawet drobny odstep ma tu klase.
 */
.zur-fig { margin: 0; }
.zur-foto-duza { border-radius: var(--z-r); box-shadow: var(--z-cien-2); }
.zur-srodek { text-align: center; }
.zur-cichy-14 { margin: 0; color: var(--z-cichy); font-size: 14px; }
.zur-cichy-15 { margin: 0; color: var(--z-cichy); font-size: 15px; }
.zur-nota-tab { margin-top: 18px; font-size: 14px; }
.zur-mt-s { margin-top: 20px; }
.zur-mt-m { margin-top: 28px; }
.zur-mt-l { margin-top: 34px; }
.zur-mb-s { margin-bottom: 20px; }
.zur-mb-m { margin-bottom: 28px; }
.zur-mb-l { margin-bottom: 34px; }
.zur-nad-ciasny { margin-bottom: 6px; }
.zur-pas-h2 { font-size: clamp(23px, 2.6vw, 31px); margin-bottom: .3em; }
.zur-pas-form { min-width: 280px; }

/* „Dla kogo”: w DOM najpierw TEKST (czyta się sam na telefonie),
 * na szerokim ekranie zdjęcie przechodzi do pierwszej kolumny. */
@media (min-width: 861px) {
  .zur-dwie-odwr > :first-child { grid-column: 2; }
  .zur-dwie-odwr > :last-child  { grid-column: 1; grid-row: 1; }
}

/* ═══════════════════════════════════════════ RESPONSYWNOŚĆ */
@media (max-width: 1080px) {
  .zur-hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .zur-karta-zam { grid-column: 1 / -1; max-width: 460px; }
  .zur-skladniki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zur-kola-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zur-opinie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zur-opinie > :nth-child(3) { display: none; }
  .zur-pas-ceny { grid-template-columns: minmax(0, 1fr) auto; }
}

@media (max-width: 860px) {
  .zur-menu { display: none; }
  .zur-listwa-in { min-height: 64px; }
  .zur-listwa .zur-cta { margin-left: auto; }
  .zur-hero { padding: 34px 0 44px; }
  .zur-hero-in { grid-template-columns: minmax(0, 1fr); }
  .zur-hero-pak { padding-top: 0; }
  .zur-hero-pak img { max-width: 340px; }

  /* Gałązki znikają na telefonie. Na szerokim ekranie leżą w narożnikach
   * i są ledwie widoczne, ale przy jednej kolumnie kładą się wprost pod
   * tekstem hero i akapit robi się nieczytelny — widać to dopiero na
   * zrzucie z telefonu, nie w edytorze. */
  .zur-hero-tlo { display: none; }

  /* Pieczęć wraca na zdjęcie, bo kolumny już nie ma — ale mniejsza
   * i przy krawędzi, żeby nie zakryła nadruku. */
  .zur-pieczec { width: 92px; height: 92px; top: auto; bottom: -8px; right: 0; }
  .zur-pieczec span { font-size: 9.5px; }
  .zur-karta-zam { max-width: none; }
  .zur-sek { padding: 46px 0; }
  .zur-dwie, .zur-dwie-lewa, .zur-stosowanie { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .zur-kola-3, .zur-kola-4, .zur-kola-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zur-kroki { grid-template-columns: minmax(0, 1fr); }
  .zur-faq { grid-template-columns: minmax(0, 1fr); }
  .zur-pas-ceny { grid-template-columns: minmax(0, 1fr); padding: 26px; text-align: center; }
  .zur-pas-ceny .zur-ceny { justify-content: center; }
  .zur-pas-koncowy .zur-szer { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .zur-pas-koncowy .zur-zaufanie { justify-content: center; }
  .zur-strzalka { display: none; }
  .zur-opinie { grid-template-columns: minmax(0, 1fr); }
  .zur-opinie > :nth-child(2), .zur-opinie > :nth-child(3) { display: none; }
  body.zur-landing { padding-bottom: 78px; }
  .zur-pasek { display: flex; }
}

@media (max-width: 520px) {
  .zur-szer, .zur-waski { width: min(100% - 32px, 100%); }
  .zur-odznaki { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .zur-skladniki { grid-template-columns: minmax(0, 1fr); }
  .zur-karta-skl-foto { width: 88px; height: 88px; }
  .zur-cena-teraz { font-size: 34px; }
  .zur-tabela { font-size: 14.5px; }
  .zur-tabela td, .zur-tabela tbody th, .zur-tabela thead th { padding: 12px 14px; }
}

@media (max-width: 380px) {
  .zur-logo { font-size: 18px; }
  .zur-listwa .zur-cta { padding: 10px 16px; font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}