/* vitonika.eu — skórka `gwa-`, odwzorowanie makiety Krzyśka (1.10.2026).
 *
 * Paleta wprost z opakowania: szmaragdowa zieleń etykiety, malinowy róż
 * wstęgi, ciepła żółć pola i pomarańcz owocu. Charakter ma być „premium,
 * świeży, europejski, sprzedażowy ale nie agresywny" — stąd dużo kremowej
 * bieli, miękkie promienie i delikatne cienie zamiast mocnych ramek.
 *
 * ⚠ Polityka CSP domeny to `style-src 'self'`, więc atrybut `style=""`
 * w HTML byłby ZABLOKOWANY przez przeglądarkę bez żadnego błędu w PHP.
 * Każdy odstęp ma tu klasę, a skrypty ruszają style tylko przez CSSOM.
 *
 * ⚠ ZAKAZ poziomego przewijania na telefonie — sprawdzane po każdej zmianie.
 */

:root {
  /* ——— zieleń: baza marki ——— */
  --g-zielen:    #0f5c3f;   /* szmaragd etykiety */
  --g-zielen-2:  #0a4631;   /* ciemniejsza, stopka i pas CTA */
  --g-zielen-3:  #157a52;
  --g-mieta:     #e4f4ea;   /* pastelowa mięta — tła sekcji */
  --g-mieta-2:   #f1faf4;

  /* ——— róż: CTA i akcenty ——— */
  --g-roz:       #e8468a;
  --g-roz-2:     #d12f74;
  --g-roz-3:     #fce7f0;   /* pastelowy, tła kart */

  /* ——— ciepłe akcenty ——— */
  --g-zolty:     #f6b93b;
  --g-zolty-2:   #fff6e2;
  --g-pomarancz: #ef8a3c;

  /* ——— neutralne ——— */
  --g-krem:      #fffcf6;
  --g-biel:      #ffffff;
  --g-tekst:     #1d3b2f;
  --g-cichy:     #5f7a6e;
  --g-linia:     #e3efe7;

  /* ——— cienie: zawsze zielonkawe, nigdy szare ——— */
  --g-cien:      0 2px 12px rgba(15, 92, 63, .06);
  --g-cien-2:    0 10px 30px rgba(15, 92, 63, .10);
  --g-cien-3:    0 18px 44px rgba(15, 92, 63, .14);

  --g-r:         20px;
  --g-r-s:       14px;
  --g-r-xl:      28px;
  --g-szer:      1240px;
}

*, *::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.gwa-body {
  margin: 0;
  background: var(--g-krem);
  color: var(--g-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.05em; }
img { max-width: 100%; height: auto; display: block; }

.gwa-szer  { width: min(var(--g-szer), 100% - 48px); margin-inline: auto; }
.gwa-waski { width: min(940px, 100% - 48px); margin-inline: auto; }

/* ═════════════════════════════════════════════ TYPOGRAFIA */
.gwa-h2 {
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.14; font-weight: 800; letter-spacing: -.022em;
  color: var(--g-zielen); margin: 0 0 .5em;
}
.gwa-h3 {
  font-size: clamp(18px, 1.9vw, 22px); font-weight: 700;
  color: var(--g-zielen); margin: 0 0 .35em;
}
.gwa-nad {
  text-transform: uppercase; letter-spacing: .16em;
  font-size: 12px; font-weight: 800; color: var(--g-roz);
  margin: 0 0 .85em;
}
.gwa-pod { color: var(--g-cichy); font-size: 17px; max-width: 64ch; }
.gwa-srodek { text-align: center; }
.gwa-srodek .gwa-pod { margin-inline: auto; }

/* ═════════════════════════════════════════════ PRZYCISKI */
.gwa-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(100deg, var(--g-roz) 0%, #f2589a 100%);
  color: #fff; text-decoration: none; font-weight: 700; font-size: 17px;
  border: 0; cursor: pointer; padding: 16px 32px;
  border-radius: 999px; min-height: 54px;
  box-shadow: 0 8px 20px rgba(232, 70, 138, .30);
  transition: transform .16s, box-shadow .16s;
}
.gwa-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(232, 70, 138, .38); }
.gwa-cta:active { transform: translateY(0); }
.gwa-cta:focus-visible { outline: 3px solid var(--g-zielen); outline-offset: 3px; }
.gwa-cta img { width: 17px; height: 17px; flex: 0 0 17px; }
.gwa-cta-pelny { width: 100%; }

/* ═════════════════════════════════════════════ LISTWA */
.gwa-listwa {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--g-linia);
}
.gwa-listwa-in { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.gwa-logo {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font-weight: 800; font-size: 22px; letter-spacing: .04em;
  color: var(--g-zielen); text-transform: uppercase;
}
.gwa-logo img { width: 26px; height: 26px; }
.gwa-menu { margin-left: auto; }
.gwa-menu ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.gwa-menu a {
  color: var(--g-tekst); text-decoration: none; font-size: 15px; font-weight: 500;
  display: inline-flex; align-items: center; min-height: 44px;
  border-bottom: 2px solid transparent;
}
.gwa-menu a:hover, .gwa-menu a:focus-visible { color: var(--g-roz); border-bottom-color: var(--g-roz); }
.gwa-listwa .gwa-cta { padding: 12px 24px; min-height: 46px; font-size: 15px; }

/* ═════════════════════════════════════════════ HERO */
.gwa-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(720px 440px at 12% 0%, #fdf6e0 0%, rgba(253,246,224,0) 70%),
    radial-gradient(620px 420px at 88% 8%, #e9f6ed 0%, rgba(233,246,237,0) 72%),
    linear-gradient(165deg, var(--g-krem) 0%, #f7fbf5 100%);
  padding: 46px 0 58px;
}
.gwa-hero-tlo { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.gwa-hero-tlo img { position: absolute; }
.gwa-lisc-1 { left: -70px; top: -30px;  width: 300px; opacity: .85; }
.gwa-lisc-2 { right: -50px; top: 40px;  width: 240px; opacity: .7; transform: scaleX(-1); }
.gwa-lisc-3 { left: 4%;    bottom: -60px; width: 200px; opacity: .55; }

.gwa-hero-in {
  position: relative; z-index: 1;
  display: grid; gap: 30px; align-items: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, .78fr);
}

.gwa-h1 {
  font-size: clamp(44px, 6.2vw, 76px); line-height: .96;
  font-weight: 800; letter-spacing: -.03em;
  color: var(--g-zielen); margin: 0 0 .06em; text-transform: uppercase;
}
.gwa-h1-dodatek {
  display: block; color: var(--g-roz);
  font-size: clamp(22px, 2.9vw, 36px); letter-spacing: -.02em;
}
.gwa-h1-pod {
  font-size: clamp(16px, 1.8vw, 19px); font-weight: 700;
  color: var(--g-zielen-3); margin: 0 0 .9em;
}
.gwa-hero-opis { color: var(--g-cichy); font-size: 16.5px; max-width: 46ch; }

/* cztery okrągłe cechy pod opisem */
.gwa-cechy {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.gwa-cechy li { display: grid; justify-items: center; text-align: center; gap: 8px; }
.gwa-kolko {
  width: 54px; height: 54px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--g-cien);
}
.gwa-kolko img { width: 25px; height: 25px; }
.gwa-kolko-mieta  { background: var(--g-mieta); }
.gwa-kolko-roz    { background: var(--g-roz-3); }
.gwa-kolko-zolty  { background: var(--g-zolty-2); }
.gwa-kolko-biel   { background: var(--g-biel); border: 1px solid var(--g-linia); }
.gwa-cechy span { font-size: 12.5px; line-height: 1.35; color: var(--g-tekst); }

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

/* packshot */
.gwa-hero-pak { position: relative; margin: 0; }
.gwa-hero-pak img { margin-inline: auto; filter: drop-shadow(0 20px 32px rgba(10, 70, 49, .20)); }

/* karta zamówienia */
.gwa-karta-zam {
  background: var(--g-biel); border: 1px solid var(--g-linia);
  border-radius: var(--g-r-xl); padding: 26px; box-shadow: var(--g-cien-3);
}
.gwa-karta-tyt { font-size: 19px; font-weight: 800; color: var(--g-zielen); text-align: center; margin: 0 0 12px; }
.gwa-ceny { display: flex; align-items: baseline; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.gwa-cena-teraz { font-size: 42px; font-weight: 800; color: var(--g-zielen); line-height: 1; }
.gwa-cena-stara { font-size: 20px; color: #9fb3a8; text-decoration: line-through; }
.gwa-karta-lista { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.gwa-karta-lista li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.gwa-karta-lista img { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px; }

/* ═════════════════════════════════════════════ FORMULARZ */
.gwa-pole { margin: 0 0 12px; position: relative; }
.gwa-pole label { display: block; font-size: 13px; font-weight: 600; color: var(--g-cichy); margin-bottom: 6px; }
.gwa-pole input {
  width: 100%; padding: 15px 18px 15px 46px; font: inherit; font-size: 16px;
  border: 1.5px solid var(--g-linia); border-radius: 999px;
  background: var(--g-mieta-2); color: inherit; min-height: 52px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.gwa-pole-ikona { position: absolute; left: 17px; bottom: 16px; width: 20px; height: 20px; pointer-events: none; }
.gwa-pole input::placeholder { color: #9db5a8; }
.gwa-pole input:hover { border-color: var(--g-zielen-3); }
.gwa-pole input:focus-visible {
  outline: none; border-color: var(--g-roz); background: var(--g-biel);
  box-shadow: 0 0 0 4px rgba(232, 70, 138, .12);
}
.gwa-pole input[aria-invalid="true"] { border-color: #cc3344; background: #fff5f6; }

/* Miodek MUSI być naprawdę niewidoczny — widoczny zjada leady (pkt 129). */
.gwa-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;
}
.gwa-zgoda { font-size: 11.5px; line-height: 1.5; color: var(--g-cichy); text-align: center; margin: 12px 0 0; }
.gwa-zgoda a { color: var(--g-roz); text-underline-offset: 2px; }
.gwa-stan { font-size: 14.5px; font-weight: 600; margin: 10px 0 0; min-height: 1.4em; text-align: center; }
.gwa-stan[data-stan="ok"]   { color: #17794a; }
.gwa-stan[data-stan="blad"] { color: #c0392b; }

/* ═════════════════════════════════════════════ SEKCJE */
.gwa-sek, [id] { scroll-margin-top: 90px; }
.gwa-sek { padding: 64px 0; position: relative; }
.gwa-sek-biala { background: var(--g-biel); }
.gwa-sek-krem  { background: var(--g-krem); }
.gwa-sek-mieta { background: var(--g-mieta); }
.gwa-sek-mieta-2 { background: var(--g-mieta-2); }

.gwa-dwie { display: grid; gap: 44px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
.gwa-dwie-tekst { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.gwa-fig { margin: 0; }
.gwa-foto-duza { border-radius: var(--g-r); box-shadow: var(--g-cien-2); }

/* trzy okrągłe ikony z podpisem (sekcja „Co to jest") */
.gwa-kola { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.gwa-kola-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gwa-kola-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gwa-kola li { display: grid; justify-items: center; text-align: center; gap: 12px; }
.gwa-kolo-duze { width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; }
.gwa-kolo-duze img { width: 36px; height: 36px; }
.gwa-kola strong { font-size: 15px; font-weight: 700; color: var(--g-zielen); line-height: 1.35; }
.gwa-kola span { font-size: 14px; color: var(--g-cichy); line-height: 1.5; }

/* ═════════════════════════════════════════════ CZTERY KARTY */
.gwa-karty-4 { display: grid; gap: 22px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gwa-karta {
  background: var(--g-biel); border: 1px solid var(--g-linia);
  border-radius: var(--g-r); padding: 26px 22px; box-shadow: var(--g-cien);
  display: grid; gap: 10px; justify-items: center; text-align: center;
}
.gwa-karta strong { font-size: 16px; color: var(--g-zielen); line-height: 1.35; }
.gwa-karta span { font-size: 14px; color: var(--g-cichy); line-height: 1.5; }

/* ═════════════════════════════════════════════ TABELA SKŁADU */
.gwa-tabela {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--g-biel); border: 1px solid var(--g-linia);
  border-radius: var(--g-r); overflow: hidden; font-size: 15.5px;
  box-shadow: var(--g-cien);
}
.gwa-tabela thead th {
  background: var(--g-mieta); color: var(--g-zielen); font-weight: 800;
  font-size: 14px; text-align: left; padding: 15px 20px;
}
.gwa-tabela td, .gwa-tabela tbody th {
  padding: 15px 20px; border-top: 1px solid var(--g-linia);
  text-align: left; font-weight: 500; vertical-align: top;
}
.gwa-tabela tbody tr:first-child td, .gwa-tabela tbody tr:first-child th { border-top: 0; }
.gwa-tabela em { color: var(--g-cichy); font-style: normal; font-size: 13.5px; display: block; }
.gwa-tabela .gwa-mocne { color: var(--g-roz); font-weight: 800; }
.gwa-gwiazdka { margin-top: 14px; font-size: 13px; color: var(--g-cichy); }

/* ═════════════════════════════════════════════ KARTY SKŁADNIKÓW */
.gwa-skladniki { display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gwa-karta-skl {
  border-radius: var(--g-r); padding: 24px; box-shadow: var(--g-cien);
  border: 1px solid var(--g-linia); display: grid; gap: 14px;
  grid-template-columns: 96px minmax(0, 1fr); align-items: start;
}
.gwa-karta-skl-1 { background: var(--g-mieta-2); }
.gwa-karta-skl-2 { background: var(--g-zolty-2); }
.gwa-karta-skl-3 { background: var(--g-roz-3); }
.gwa-karta-skl img { width: 96px; height: 96px; border-radius: 16px; object-fit: cover; }
.gwa-karta-skl p { font-size: 14px; color: var(--g-cichy); margin: 0; }
.gwa-karta-skl .gwa-h3 { font-size: 18px; }

/* ═════════════════════════════════════════════ DWIE DUŻE KARTY */
.gwa-pary { display: grid; gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gwa-karta-duza { border-radius: var(--g-r-xl); padding: 32px; box-shadow: var(--g-cien); }
.gwa-karta-zolta { background: var(--g-zolty-2); }
.gwa-karta-rozowa { background: var(--g-roz-3); }
.gwa-karta-duza-in { display: grid; gap: 18px; grid-template-columns: 76px minmax(0, 1fr); align-items: start; }
.gwa-karta-duza .gwa-kolko { width: 76px; height: 76px; background: var(--g-biel); }
.gwa-karta-duza .gwa-kolko img { width: 34px; height: 34px; }
.gwa-liczba {
  font-size: 56px; font-weight: 800; color: var(--g-roz); line-height: 1;
  display: inline-block; margin-right: 10px;
}
.gwa-liczba-opis { font-size: 20px; font-weight: 700; color: var(--g-zielen); }

/* ═════════════════════════════════════════════ DLA KOGO */
.gwa-osoby { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gwa-osoby li { display: grid; justify-items: center; text-align: center; gap: 14px; }
.gwa-osoba-foto {
  width: 116px; height: 116px; border-radius: 50%; object-fit: cover;
  box-shadow: var(--g-cien-2); border: 4px solid var(--g-biel);
}
.gwa-osoby span { font-size: 14.5px; color: var(--g-cichy); line-height: 1.5; }

/* ═════════════════════════════════════════════ TRZY KROKI */
.gwa-kroki { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gwa-kroki li { display: grid; grid-template-columns: 52px 46px minmax(0, 1fr); gap: 4px 14px; align-items: center; }
.gwa-krok-nr {
  grid-row: span 2; width: 52px; height: 52px; border-radius: 50%;
  background: var(--g-roz); color: #fff; font-weight: 800; font-size: 21px;
  display: grid; place-items: center; box-shadow: 0 6px 16px rgba(232, 70, 138, .28);
}
.gwa-krok-ikona { grid-row: span 2; width: 46px; height: 46px; }
.gwa-kroki strong { color: var(--g-zielen); font-size: 16.5px; align-self: end; }
.gwa-kroki span { color: var(--g-cichy); font-size: 14.5px; align-self: start; }

/* ═════════════════════════════════════════════ PAS CTA */
.gwa-pas {
  background: linear-gradient(104deg, var(--g-zielen-2) 0%, var(--g-zielen) 58%, var(--g-zielen-3) 100%);
  color: #fff; padding: 0; position: relative; overflow: hidden;
}
.gwa-pas-in {
  display: grid; gap: 30px; align-items: center;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, .8fr);
  padding: 40px 0;
}
.gwa-pas h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 800; margin: 0 0 .25em; color: #fff; line-height: 1.12; }
.gwa-pas-marka { display: block; font-size: clamp(22px, 2.4vw, 30px); color: #ffd9e8; }
.gwa-pas p { color: rgba(255, 255, 255, .88); font-size: 16px; margin: 0; }
.gwa-pas .gwa-zaufanie { margin-top: 18px; }
.gwa-pas .gwa-zaufanie li { color: rgba(255, 255, 255, .9); }
.gwa-pas-pak img { margin-inline: auto; filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .28)); }
.gwa-pas-karta {
  background: var(--g-biel); border-radius: var(--g-r-xl); padding: 26px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .22); text-align: center;
}
.gwa-pas-karta .gwa-cta { width: 100%; }
.gwa-plakietka {
  display: inline-block; background: var(--g-zolty); color: #4a3209;
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; padding: 6px 14px; border-radius: 999px; margin-bottom: 10px;
}

/* ═════════════════════════════════════════════ GDZIE KUPIĆ + OPINIE */
.gwa-dol { display: grid; gap: 44px; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; }
.gwa-gdzie-ikony { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gwa-gdzie-ikony li { display: grid; justify-items: center; text-align: center; gap: 10px; }
.gwa-gdzie-ikony .gwa-kolko { width: 58px; height: 58px; }
.gwa-gdzie-ikony span { font-size: 13.5px; color: var(--g-cichy); line-height: 1.4; }

.gwa-brak-opinii {
  background: var(--g-mieta-2); border: 1px dashed var(--g-linia);
  border-radius: var(--g-r); padding: 26px; color: var(--g-cichy); font-size: 15px;
}

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

/* ═════════════════════════════════════════════ STOPKA */
.gwa-stopka { background: var(--g-zielen-2); color: rgba(255, 255, 255, .82); padding: 44px 0 26px; }
.gwa-stopka-in { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.gwa-stopka .gwa-logo { color: #fff; }
.gwa-stopka-opis { font-size: 14px; max-width: 42ch; margin: 12px 0 0; color: rgba(255, 255, 255, .72); }
.gwa-stopka nav ul { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 0; padding: 0; }
.gwa-stopka a {
  color: rgba(255, 255, 255, .86); text-decoration: none; font-size: 14px;
  display: inline-flex; align-items: center; min-height: 44px;
  border-bottom: 1px solid transparent;
}
.gwa-stopka a:hover, .gwa-stopka a:focus-visible { color: #fff; border-bottom-color: var(--g-roz); }
.gwa-stopka-kreska { border: 0; border-top: 1px solid rgba(255, 255, 255, .16); margin: 28px 0 18px; }
.gwa-stopka-nota { font-size: 12.5px; color: rgba(255, 255, 255, .62); margin: 0; max-width: 90ch; }
.gwa-stopka-prawa { font-size: 12.5px; color: rgba(255, 255, 255, .5); margin: 12px 0 0; }

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

.gwa-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(--g-linia);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 20px rgba(15, 92, 63, .13);
}
.gwa-pasek-opis { flex: 1 1 auto; min-width: 0; }
.gwa-pasek-nazwa { margin: 0; font-weight: 700; font-size: 13.5px; color: var(--g-zielen); }
.gwa-pasek-cena { margin: 0; font-size: 16px; font-weight: 800; color: var(--g-roz); }
.gwa-pasek .gwa-cta { flex: 0 0 auto; padding: 12px 22px; min-height: 48px; font-size: 15px; }

/* ═════════════════════════════════════════════ POMOCNICZE */
.gwa-mt-s { margin-top: 20px; }
.gwa-mt-m { margin-top: 28px; }
.gwa-mt-l { margin-top: 36px; }
.gwa-mb-m { margin-bottom: 28px; }
.gwa-mb-l { margin-bottom: 36px; }
.gwa-cichy-14 { margin: 0; color: var(--g-cichy); font-size: 14px; }

/* ═════════════════════════════════════════════ RESPONSYWNOŚĆ */
@media (max-width: 1100px) {
  .gwa-hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gwa-karta-zam { grid-column: 1 / -1; max-width: 480px; }
  .gwa-karty-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gwa-skladniki { grid-template-columns: minmax(0, 1fr); }
  .gwa-osoby { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gwa-pas-in { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
  .gwa-pas-pak { display: none; }
  .gwa-dol, .gwa-faq-uklad { grid-template-columns: minmax(0, 1fr); }
  .gwa-faq-dekor { display: none; }
}

@media (max-width: 860px) {
  .gwa-szer, .gwa-waski { width: min(100% - 36px, 100%); }
  .gwa-menu { display: none; }
  .gwa-listwa-in { min-height: 64px; }
  .gwa-listwa .gwa-cta { margin-left: auto; }
  .gwa-hero { padding: 30px 0 40px; }
  .gwa-hero-in { grid-template-columns: minmax(0, 1fr); }
  /* Gałązki znikają: przy jednej kolumnie kładą się pod tekstem
     i akapit robi się nieczytelny (lekcja z cysterry). */
  .gwa-hero-tlo { display: none; }
  .gwa-hero-pak img { max-width: 320px; }
  .gwa-karta-zam { max-width: none; }
  .gwa-sek { padding: 46px 0; }
  .gwa-dwie, .gwa-dwie-tekst, .gwa-pary { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .gwa-kola-3, .gwa-kola-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gwa-kroki { grid-template-columns: minmax(0, 1fr); }
  .gwa-pas-in { grid-template-columns: minmax(0, 1fr); text-align: center; padding: 34px 0; }
  .gwa-pas .gwa-zaufanie { justify-content: center; }
  .gwa-stopka-in { grid-template-columns: minmax(0, 1fr); }
  body.gwa-landing { padding-bottom: 78px; }
  .gwa-pasek { display: flex; }
}

@media (max-width: 520px) {
  .gwa-cechy { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .gwa-karty-4 { grid-template-columns: minmax(0, 1fr); }
  .gwa-osoby { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .gwa-osoba-foto { width: 96px; height: 96px; }
  .gwa-karta-skl { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .gwa-karta-skl img { width: 100%; height: 150px; }
  .gwa-cena-teraz { font-size: 36px; }
  .gwa-tabela { font-size: 14.5px; }
  .gwa-tabela td, .gwa-tabela tbody th, .gwa-tabela thead th { padding: 12px 14px; }
  .gwa-karta-duza { padding: 24px; }
  .gwa-karta-duza-in { grid-template-columns: minmax(0, 1fr); }
}

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

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