/* ==========================================================================
   Wodzilla.pl — replika strony głównej (kamień milowy 1 migracji WP → HTML)
   Wartości (kolory, rozmiary, odstępy) przeniesione z produkcyjnego arkusza
   zrodla/css/a2ecf5e77c6e948e4a9efad2c7d5bebe.css
   ========================================================================== */

/* --------------------------------------------------------------- fonty --- */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("content/themes/wodzilla-theme/dist/fonts/outfit-v14-latin_latin-ext-300.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+1E00-1EFF, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("content/themes/wodzilla-theme/dist/fonts/outfit-v14-latin_latin-ext-regular.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+1E00-1EFF, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("content/themes/wodzilla-theme/dist/fonts/outfit-v14-latin_latin-ext-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+1E00-1EFF, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------- zmienne --- */
:root {
  --blue: #1a8fe3;            /* podstawowy błękit marki */
  --blue-dark: #0056d3;       /* ikony, przyciski tertiary */
  --blue-dot: #0d6efd;        /* kropka przy okręgach ikon */
  --navy: #021431;            /* podstawowy kolor tekstu / nagłówków */
  --ink: #0e1a23;
  --line: #d8e0ec;            /* obramowania */
  --white: #fff;
}

/* --------------------------------------------------------------- reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--navy);
  background: #fff;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
img { height: auto; border: 0; }
a { color: inherit; text-decoration: none; }

/* Odnosniki w tresci bloku "o firmie" na stronie glownej. Globalna regula wyzej
   robi z kazdego <a> tekst w kolorze otoczenia i bez podkreslenia - dobre dla
   przyciskow i kafelkow, ale w akapicie znaczy tyle, ze odnosnika nie widac.
   Blok b-icons ma teraz skroty do mapy zasiegu, wiec musza wygladac na klikalne.
   Kolor #0056d3 (a nie jasniejszy #1a8fe3 uzywany gdzie indziej) daje 6,42:1
   na bialym tle zamiast 3,45:1 - powyzej progu WCAG AA dla tekstu. */
.b-icons__description a { color: #0056d3; text-decoration: underline;
  text-underline-offset: 2px; }
.b-icons__description a:hover { text-decoration-thickness: 2px; }
.b-icons__description a strong { color: inherit; }
p { margin: 0 0 15px; }
h1, h2, h3, h4, h5, h6 { clear: both; }
h1 { margin: 0; font-size: 2em; }
h2 { font-size: 30px; font-weight: 700; margin: 0 0 15px; color: var(--navy); }
h3 { margin: 0 0 10px 0; color: var(--ink); font-size: 18px; font-weight: 700; line-height: normal; }

/* Blok .image-text stoi na mocnym niebieskim (#0056d3) i ustawia na kontenerze
   color:#fff - ale to tylko DZIEDZICZENIE, ktore przegrywa z kazda bezposrednia
   regula. Globalne h2/h3 wyzej maja wlasny kolor (--navy / --ink), wiec naglowki
   w tym bloku wychodzily ciemne na niebieskim: zmierzone 2,75:1 przy wymaganych
   4,5:1 (/misja-wizja-i-wartosci-firmy/, 4 naglowki h3).
   Produkcja nie miala globalnej reguly koloru dla h1-h6, wiec tam naglowki
   dziedziczyly biel i problem nie wystepowal. miasta.css ma juz ten sam wyjatek
   dla h2/h3 - tu domykamy go dla wszystkich stron i wszystkich poziomow. */
.image-text__text-container h1,
.image-text__text-container h2,
.image-text__text-container h3,
.image-text__text-container h4,
.image-text__text-container h5,
.image-text__text-container h6 { color: #fff; }
/* A3 (audyt axe 2026-09-03): "Dlaczego dystrybutory Wodzilla?" zmienione z <h3> na <h2>,
   zeby nie pomijac poziomu naglowka po H1 (heading-order) - wyglad ma zostac identyczny
   jak dawny <h3>, wiec przywracamy tu jego style dla tego jednego miejsca w kodzie. */
.b-text-and-form__desc h2 { margin: 0 0 10px 0; color: var(--ink); font-size: 18px; font-weight: 700; line-height: normal; }
ul { margin: 0; padding: 0 0 0 18px; }
button { font: inherit; }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* ---------------------------------------------------- siatka / kontener --- */
.container, .container-fluid {
  width: 100%;
  margin-inline: auto;
  padding-inline: 15px;
}
.container-fluid { padding-inline: 6px; }
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

.row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: -15px;
}
.row > * { padding-inline: 15px; }
.row > [class*="col"] { flex: 0 0 auto; width: 100%; }
.align-items-center { align-items: center; }
.col-lg { flex: 1 0 0%; width: auto; }
@media (min-width: 992px) {
  .row > .col-lg-2 { width: 16.6666667%; }
  .row > .col-lg-3 { width: 25%; }
  .row > .col-lg-4 { width: 33.3333333%; }
  .row > .col-lg-5 { width: 41.6666667%; }
  .row > .col-lg-6 { width: 50%; }
  .row > .col-lg-7 { width: 58.3333333%; }
  .row > .col-lg { flex: 1 0 0%; width: auto; }
  .d-lg-flex { display: flex !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) { .row > .col-md-6 { width: 50%; } }
@media (max-width: 991.98px) { .d-none { display: none; } }

/* ------------------------------------------------------------ przyciski --- */
.c-btn {
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  font-family: "Outfit";
  cursor: pointer;
  user-select: none;
  transition: .5s ease;
  transition-property: background, color;
  text-align: center;
  gap: 10px;
  padding: 10px 34px;
}
.c-btn--primary {
  background: var(--blue);
  border-radius: 999px;
  border: 1px solid var(--blue);
  padding: 14px 50px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: normal;
  text-decoration: none;
}
.c-btn--primary:hover { background: #1b719b; border-color: #1b719b; }
/* .c-btn--secondary — komponent GLOBALNY (glowne CTA "Dodaj do koszyka" na 54
   kartach produktu), a dotad zdefiniowany WYLACZNIE w public/css/strony.css,
   ktorego /produkt/<slug>/ nie laduje (ma wlasne /css/produkt.css) - przycisk
   zostawal z samym bazowym .c-btn i renderowal sie jako goly napis.
   Wartosci sa 1:1 ze strony.css; tam ten sam selektor ZOSTAJE i wygrywa
   kolejnoscia ladowania (styles.css idzie pierwszy), wiec na /produkty/,
   /szukaj/ i kategoriach nie zmienia sie nic.
   "#fff0" (a nie "transparent") - zeby computed background-color bylo
   identyczne jak w strony.css: rgba(255, 255, 255, 0).
   .c-btn--light-bg CELOWO nie jest tu przenoszone: w strony.css ma wylacznie
   reguly :hover, a na przycisku --secondary nadpisuje je pozniejsze
   .c-btn--secondary:hover - dla tego przycisku jest wiec bez znaczenia.
   Przeniesione zmienialoby za to hover przyciskow .c-btn--primary.c-btn--light-bg
   na stronach ladujacych sam styles.css (niebieski tekst na ciemnoniebieskim
   tle - regresja kontrastu). */
.c-btn--secondary {
  background: #fff0;
  border: 1px solid var(--blue);
  border-radius: 999px;
  padding: 9px 57px;
  color: var(--blue);
  font-size: 15px;
  font-weight: 700;
  line-height: normal;
  text-decoration: none;
}
.c-btn--secondary:hover { color: #fff; background: var(--blue); }
.c-btn--bigger { padding: 18px 43px; }
.c-btn--tertiary {
  background: var(--blue-dark);
  border-radius: 999px;
  padding: 14px 50px;
  color: #fff;
  border: 1px solid var(--blue-dark);
  font-size: 15px;
  font-weight: 600;
  line-height: normal;
}
/* :hover byl "background: transparent" - jedyne miejsce uzycia .c-btn--tertiary to
   .b-cta-2__link (na tle var(--blue), patrz .b-cta-2__box), wiec po zniknieciu
   wypelnienia biale litery ladowaly sie wprost na tym niebieskim tle: kontrast
   spadal z 6,42:1 (domyslny stan, tlo var(--blue-dark)) do 3,45:1 (ten sam wzorzec
   co blekit na bieli - ponizej wymaganych 4,5:1 dla tekstu). Zamiast znikac, tlo na
   hover przyciemnia sie (jak w .c-btn--primary:hover) - tekst zostaje czytelny
   (10,58:1) i nadal widac wobec tla boxa (3,06:1, granica UI komponentu). */
.c-btn--tertiary:hover { background: #003c85; border-color: #003c85; }

/* .b-small-hero__link (przycisk "Zamow darmowy test do biura" na /dlaczego-my/,
   sekcja .b-small-hero__background, jasny bledytny podklad rgb(220 240 255/.39)
   w public/css/strony.css) dziedziczy po .c-btn--primary bez klasy .c-btn--light-bg.
   strony.css laduje sie PO tym pliku i ma regule ".c-btn--primary:hover{background:
   #fff0}" (przezroczyste tlo na hover) - bez klasy light-bg tekst NIE dostaje wtedy
   niebieskiego koloru (to ma tylko .c-btn--light-bg:hover), wiec zostaje bialy tekst
   na niemal-bialym/jasnobledytnym tle sekcji: zmierzone piksele po hover daly 1,12:1
   (fragment_zrzutu: rgb(230,244,255) pod bialym tekstem "Zamow darmowy test do
   biura" - praktycznie niewidoczny przycisk). Selektor ponizej ma wyzsza
   specyficznosc (3 klasy) niz regula w strony.css (2 klasy), wiec wygrywa mimo
   pozniejszego zaladowania strony.css - przycisk na hover ciemnieje tak jak
   wszedzie indziej zamiast znikac. Dotyczy WYLACZNIE tego jednego przycisku
   (klasa .b-small-hero__link nie wystepuje nigdzie indziej w serwisie). */
.b-small-hero__link.c-btn--primary:hover { background: #1b719b; border-color: #1b719b; color: #fff; }

/* ======================================================= SKIP LINK ======== */
/* Pierwszy element w <body>. Niewidoczny do momentu otrzymania fokusu:
   nie uzywamy display:none ani visibility:hidden (te wyjmuja link z kolejnosci
   Tab), tylko wyjechania poza gorna krawedz okna. */
.c-skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 10000;
  display: inline-block;
  padding: 12px 24px;
  border-radius: 0 0 12px 12px;
  background: var(--blue-dark);
  color: #fff;
  font-family: "Outfit", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.c-skip-link:focus {
  top: 0;
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}
/* <main id="main"> ma tabindex="-1", zeby Enter na skip linku faktycznie
   przenosil fokus do tresci; obwodka wokol calej tresci jest zbedna. */
.site-main:focus { outline: none; }

/* ============================================================ TOP BAR ==== */
.c-header-top {
  padding: 20px 0;
  color: var(--navy);
  background: #fff;
}
.c-header-top__container { display: flex; align-items: center; justify-content: space-between; }
.c-header-top__text-container { display: flex; align-items: center; gap: 28px; height: 100%; }
.c-header-top__right {
  display: flex; align-items: center; gap: 28px; height: 100%;
  font-size: 13px; font-weight: 400; line-height: normal;
}
.c-header-top__email,
.c-header-top__phone {
  display: flex; align-items: center; justify-content: flex-start;
  color: var(--navy); font-size: 16px; transition: .2s color;
}
.c-header-top__email svg, .c-header-top__phone svg { margin-right: 6px; min-width: 16px; }
.c-header-top__email:hover, .c-header-top__phone:hover { color: var(--blue); }

.c-header-top__search { flex: none; }
.c-header-top__search .dgwt-wcas-sf-wrapp { position: relative; padding: 0; }
.c-header-top__search .dgwt-wcas-sf-wrapp input {
  background-color: transparent;
  padding: 11px 48px 11px 24px;
  border: 1px solid var(--line);
  border-radius: 24px;
  width: 400px;
  height: 48px;
  color: var(--navy);
  font-size: 15px; font-weight: 400; font-family: "Outfit";
}
.c-header-top__search input:focus { outline: 2px solid var(--blue); outline-offset: 2px; border: 1px solid var(--line); }
.c-header-top__search input::placeholder { color: var(--navy); opacity: 1; }
.dgwt-wcas-search-submit {
  position: absolute; right: 9px; top: 8px;
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: var(--blue); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.dgwt-wcas-search-submit svg { width: 13px; height: 13px; }
.dgwt-wcas-search-submit path { fill: #fff; }

.c-mini-cart-item { position: relative; }
.c-mini-cart-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 24px; border: 1px solid var(--line);
  cursor: pointer; position: relative;
}
.c-mini-cart-btn__count {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, -4px);
  min-width: 18px; height: 18px; border-radius: 9px;
  background: var(--blue); color: #fff;
  font-size: 11px; line-height: 18px; text-align: center; padding: 0 5px;
}

/* ============================================================= HEADER ==== */
.c-header__middle {
  position: relative;
  height: 100px;
  background: #fff;
  border-top: 1px solid rgba(216, 224, 236, .8);
  border-bottom: 1px solid rgba(216, 224, 236, .8);
}
.c-header__middle-container {
  display: flex; height: inherit; justify-content: space-between; align-items: center; gap: 33px;
}
.c-header__logo img { display: block; width: 138px; height: auto; }
.c-header__menu-wrapper { height: 100%; }
.c-header__cta { padding: 14px 20px; }
.c-header__middle--mobile { display: none; }

.c-menu-desktop { position: relative; width: 100%; height: 100%; }
.c-menu-desktop__list {
  display: flex; height: 100%; flex-direction: row; align-items: center; justify-content: center;
  list-style: none; margin: 0; padding: 0;
}
.c-menu-desktop__item { height: 100%; position: relative; }
.c-menu-desktop__link {
  color: var(--navy); font-size: 15px; font-weight: 400; line-height: normal;
  display: flex; align-items: center; transition: .2s color; height: 100%; padding-inline: 27px;
}
.c-menu-desktop__link:hover { color: var(--blue); }
.c-menu-desktop__link svg { margin-left: 8px; transition: transform .4s; }
/* Strzalka obraca sie tez gdy panel "Dystrybutory" jest otwarty z klawiatury
   (aria-expanded="true" ustawiany przez app.js) - parytet wizualny z myszą,
   bez zmiany mechanizmu myszy ponizej. */
.c-menu-desktop__item:hover .c-menu-desktop__link svg,
.c-menu-desktop__item--mega:has(.c-menu-desktop__link[aria-expanded="true"]) .c-menu-desktop__link svg {
  transform: rotate(180deg);
}
.c-menu-desktop__submenu {
  position: absolute; visibility: hidden; opacity: 0; top: 70%; left: 0;
  padding: 15px 0; width: fit-content; margin-left: 9px; transition: opacity .3s; z-index: 60;
}
.c-menu-desktop__item:hover .c-menu-desktop__submenu,
.c-menu-desktop__item:focus-within .c-menu-desktop__submenu { visibility: visible; opacity: 1; }
.c-menu-desktop__sublist {
  padding: 20px 0; margin: 0; list-style: none;
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto);
  background-color: #fff; box-shadow: 0 10px 30px rgba(2, 20, 49, .08);
}
.c-menu-desktop__sublink {
  white-space: nowrap; margin-top: 20px; padding-inline: 17px;
  color: var(--navy); font-size: 15px; font-weight: 400; display: flex; align-items: center;
  transition: .2s color;
}
.c-menu-desktop__sublink:hover { color: var(--blue); }
@media (min-width: 992px) and (max-width: 1199.98px) { .c-menu-desktop__link { padding-inline: 12px; } }

.c-header__hamburger {
  display: flex; justify-content: center; align-items: center;
  cursor: pointer; width: 48px; height: 48px;
  border: 1px solid var(--line); border-radius: 24px; background: #fff; padding: 0;
}
.c-header__hamburger svg:last-child { display: none; }
.c-header__hamburger.open svg:first-child { display: none; }
.c-header__hamburger.open svg:last-child { display: block; }

/* =============================================================== HERO ==== */
.b-hero { position: relative; color: #fff; margin-bottom: 50px; }
.b-hero .container { height: 100%; position: relative; z-index: 2; }
.b-hero__box { position: relative; width: 100%; max-width: 1775px; margin-inline: auto; }
.b-hero__inside { padding: 170px 0 140px 0; position: relative; z-index: 2; }
.b-hero__title { font-size: 67px; font-weight: 600; line-height: 82px; margin: 0 0 16px; }
.b-hero__description { font-size: 18px; font-weight: 400; line-height: 136.4%; width: 80%; margin-bottom: 28px; }
.b-hero__links { display: flex; flex-direction: row; gap: 20px; }
.b-hero__image { position: absolute; bottom: 0; right: 0; height: 100%; width: auto; max-width: none; z-index: 1; }
.b-hero__background {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: block; object-fit: cover; object-position: center; z-index: 0;
}
/* Wariantem mobilnym/desktopowym tla steruje <picture> w src/sekcje/b-hero.njk
   (element <source> z media-query), a nie klasy --mobile / --desktop znane
   z produkcji WordPressowej. Reguly dla tych klas byly martwe - usuniete. */

/* Przyciemnienie pod tekstem hero (tylko mobile/tablet, gdzie tekst lezy na
   jasnym zdjeciu). Bez niego bialy tekst mial na najjasniejszym pikselu
   zdjecia 1.85:1 przy wymaganych 4.5:1. z-index 1 = miedzy tlem (0)
   a trescia (.b-hero .container ma z-index 2). */
.b-hero__box::after { content: ""; display: none; }
@media (max-width: 991.98px) {
  .b-hero__box::after {
    display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg,
      rgba(2, 20, 49, .34) 0%,
      rgba(2, 20, 49, .48) 15%,
      rgba(2, 20, 49, .48) 85%,
      rgba(2, 20, 49, .18) 100%);
  }
}
.b-hero__down-arrow {
  position: absolute; bottom: -24.5px; left: 0;
  width: 49px; height: 49px; background-color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  border-radius: 100%; cursor: pointer; z-index: 5; transition: .3s background-color;
}
.b-hero__down-arrow:hover { background-color: #1b719b; }

/* ============================================================ OPINIE ==== */
.b-opinions { overflow: hidden; margin: 50px 0; }
.b-opinions__header {
  width: 100%; display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 40px;
}
.b-opinions__title {
  width: 50%; max-width: 572px; margin: 0;
  font-size: 30px; line-height: 120%; font-weight: 600; letter-spacing: -.02em; color: var(--navy);
}
.b-opinions__title span { color: var(--blue); }
.b-opinions__navigation { column-gap: 13px; display: flex; align-items: center; }
.b-opinions__arrow, .b-products__arrow {
  display: flex; align-items: center; justify-content: center;
  width: 33px; height: 33px; border-radius: 50%; border: 1px solid var(--blue-dark);
  cursor: pointer; transition: .3s background-color; flex: none;
}
.b-opinions__arrow--next, .b-products__arrow--next { rotate: 180deg; }
.b-opinions__arrow:hover, .b-products__arrow:hover { background-color: var(--blue-dark); }
.b-opinions__arrow:hover svg path, .b-products__arrow:hover svg path { fill: #fff; }

.swiper { position: relative; overflow: hidden; }
.js-opinions-swiper, .js-products-swiper { overflow: visible; }
.swiper-wrapper { display: flex; align-items: stretch; }
.swiper-slide { flex-shrink: 0; height: auto; }
/* Slajdy opinii nie są rozciągane do wspólnej wysokości — każda karta ma własną
   (tak jak na produkcji, gdzie .swiper-wrapper ma align-items: normal, a Swiper
   nadaje slajdom indywidualną wysokość). */
.js-opinions-swiper .swiper-wrapper { gap: 20px; align-items: flex-start; }
.js-opinions-swiper .swiper-slide { width: calc((100% + 20px) / 2.5 - 20px); }

.c-opinion {
  height: 100%;
  display: flex; flex-direction: row; justify-content: space-between; column-gap: 27px;
  padding: 15px 29px 26px 15px; border: 1px solid var(--line); border-radius: 10px;
}
.c-opinion__client {
  display: flex; justify-content: left; flex-direction: column; align-items: flex-start;
  max-width: 161px; width: 30.2%;
}
.c-opinion__img {
  width: 100%; height: auto; display: block; object-fit: cover; object-position: center; border-radius: 4px;
}
.c-opinion__name { margin: 11px 0 3px 0; color: var(--navy); line-height: 24px; font-size: 16px; font-weight: 300; }
.c-opinion__company { margin: 0 0 8px 0; color: var(--blue); font-size: 14px; line-height: 24px; font-weight: 300; }
.c-opinion__logo { display: block; width: 48%; height: auto; }
.c-opinion__text { max-width: 300px; display: flex; flex-direction: column; }
.c-opinion__description { margin: 16px 0 13px; font-size: 16px; line-height: 24px; font-weight: 300; }
.c-opinion__stars { margin-top: auto; }
.c-opinion__stars svg { width: auto; height: 16px; }

/* ============================================================= CTA-2 ===== */
.b-cta-2 { margin: 100px 0; }
.b-cta-2__box { overflow: hidden; background: var(--blue); border-radius: 10px; position: relative; }
.b-cta-2__row { position: relative; z-index: 1; }
.b-cta-2__col { min-height: 100%; }
.b-cta-2__content { padding: 43px 13px 43px 85px; }
.b-cta-2__title { margin: 0 0 17px; color: #fff; font-size: 30px; font-weight: 600; line-height: 36px; }
.b-cta-2__link { display: inline-flex; }
.b-cta-2__object { position: absolute; }
.b-cta-2__object--1 { top: 0; left: 0; z-index: 0; }

/* ============================================================= WIDEO ===== */
.youtube-video-container {
  position: relative; width: 100%; max-width: 1200px; margin: 40px auto;
  aspect-ratio: 16 / 9; background: #000; border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .2);
}
.youtube-video-container iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-facade { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; display: block; }
.yt-facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-facade__play {
  position: absolute; top: 50%; left: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%);
  background: rgba(23, 23, 23, .85); border-radius: 12px; transition: background .2s ease;
}
.yt-facade__play::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-40%, -50%);
  border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent #fff;
}
.yt-facade:hover .yt-facade__play, .yt-facade:focus-visible .yt-facade__play { background: #f00; }

/* ====================================================== JAK TO DZIAŁA ==== */
.b-how-it-works { display: flex; justify-content: center; align-items: center; flex-direction: column; }
.b-how-it-works__title {
  text-align: center; margin: 0 auto 40px; font-weight: 600; line-height: 100%;
  letter-spacing: -.02em; font-size: 46px; color: var(--navy);
}
.b-how-it-works__steps {
  display: flex; justify-content: space-between; align-items: center; flex-direction: row; position: relative;
}
.b-how-it-works__step {
  width: calc((100% - 230px) / 3); height: 250px;
  display: flex; justify-content: flex-start; align-items: center; flex-direction: column;
}
.b-how-it-works__img-wrap,
.b-services__icon,
.b-icons__single-img-wrap {
  border: solid var(--line) 1px; width: 102px; height: 102px; min-width: 102px; min-height: 102px;
  display: flex; justify-content: center; align-items: center; position: relative; border-radius: 50%; margin: 0;
}
.b-how-it-works__img-wrap::after,
.b-services__icon::after,
.b-icons__single-img-wrap::after,
.b-text-and-form__icon::after {
  width: 11px; height: 11px; border-radius: 50%; background-color: var(--blue-dot);
  content: " "; position: absolute; right: 0; top: 50%; transform: translate(50%, -50%);
}
.b-how-it-works__number {
  margin: 15px auto 6px auto; width: 100%; text-align: center;
  color: var(--blue-dot); font-size: 22px; line-height: 100%; font-weight: 900;
}
.b-how-it-works__description {
  text-align: center; color: var(--navy); font-size: 18px; line-height: 24px; font-weight: 300;
  margin: 18px 0 27px;
}
.b-how-it-works__line {
  width: 300%; height: 1px; position: absolute; right: -200%; top: 35%; border: 0;
  transform: translate(45%, calc(-150% + 1px)); background: var(--line); margin: 0;
}
.b-how-it-works__button { margin: 30px auto 0 auto; }

/* ============================================================ PAKIETY ==== */
.packages { margin-top: 100px; margin-bottom: 100px; overflow-x: clip; }
.packages__container { position: relative; }
.packages__title {
  text-align: center; font-size: 46px; font-weight: 700; line-height: 43px;
  margin: 0 auto 40px; color: var(--navy);
}
.packages__section-container {
  display: flex; align-items: stretch; justify-content: space-evenly; min-height: 442px;
  position: relative; gap: 30px;
}
.packages__section {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 0; border-radius: 10px; flex: 1 1 0%;
}
.packages__section-img-wrapper {
  position: relative; border-radius: 10px; width: 100%; margin-bottom: -20px; z-index: 3;
}
.packages__section-img { border-radius: 10px; height: 173px; width: 100%; object-fit: cover; display: block; }
.packages__section-wrap-info {
  display: flex; flex-direction: column; align-items: stretch; justify-content: space-between;
  position: relative; padding: 35px 30px 30px; height: 100%;
  border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px;
  width: 100%; text-align: left; color: var(--navy); z-index: 2;
}
.packages__section-title { font-size: 18px; font-weight: 700; line-height: normal; margin: 0 0 10px; color: var(--navy); }
.packages__section-benefits-container {
  position: relative; display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
  flex-wrap: wrap; gap: 6px 10px; margin: 10px 0 5px;
  color: var(--blue-dark); font-size: 16px; font-weight: 400; line-height: 24px;
}
.packages__section-desc { font-size: 16px; font-weight: 400; line-height: 24px; margin-bottom: 18px; }
.packages__section-desc .packages__price { font-size: 24px; font-weight: 700; color: var(--navy); margin: 20px 0; }
.packages__section-desc p { margin: 16px 0 24px; }
.packages__section-desc ul { margin: 30px 0; padding: 0 0 0 18px; }
.packages__section-desc ul li::marker { color: var(--blue); }

/* Wiersz wprowadzajacy w kafelku pakietu ("Wszystko z pakietu X, a ponadto:").
   Pakiet Wodzilla Max dziedziczy cechy po Pro, wiec zamiast powtarzac osiem
   tych samych punktow karta zaczyna sie od takiej zapowiedzi. Technicznie to
   nadal <li>, bo szablon renderuje liste w petli i nie przyjmuje osobnego pola
   -- dlatego chowamy mu punktor i cofamy wciecie listy.
   Selektor :has() jest tu bezpieczny: gdyby przegladarka go nie znala, wiersz
   wyswietli sie po prostu jako zwykly punkt listy -- czytelny, tylko mniej
   wyrozniony. Nic sie nie psuje. */
.packages__section-desc ul li:has(.packages__lead) {
  list-style: none;
  margin-left: -18px;
  margin-bottom: 12px;
  font-weight: 600;
  color: var(--navy);
}
.packages__section-btn { width: 100%; text-align: center; justify-content: center; }

/* =========================================================== PRODUKTY ==== */
.b-products { margin: 50px 0; overflow: hidden; }
.b-products .container { position: relative; }
.b-products__title {
  text-align: center; color: var(--navy); font-size: 46px; line-height: 100%;
  font-weight: 600; letter-spacing: -.02em; margin: 0;
}
.b-products__navigation {
  column-gap: 13px; position: absolute; right: 15px; top: 2%;
  display: flex; align-items: center; justify-content: center;
}
.b-products__products { margin-top: 60px; }
.js-products-swiper .swiper-wrapper { gap: 21px; }
.js-products-swiper .swiper-slide { width: calc((100% + 21px) / 4.505 - 21px); }
.b-products__img { display: block; width: 40%; height: auto; margin: 0 auto; }
.b-products__card { border-bottom: 1px solid var(--line); display: block; color: var(--navy); }
.b-products__text { margin-top: 35px; font-size: 16px; line-height: 24px; }
.b-products__price { margin: 12px 0 25px 0; font-size: 16px; line-height: 24px; }
.b-products__price span { font-size: 22px; font-weight: 600; line-height: 28px; }
.b-products__link { margin-top: 40px; text-align: center; }
.b-products__link a { display: inline-flex; }

/* ==================================================== TEKST + FORMULARZ === */
.b-text-and-form { margin: 50px 0; }
.b-text-and-form__content { margin-top: 34px; }
.b-text-and-form__title { color: var(--navy); font-size: 30px; font-weight: 600; line-height: 36px; margin: 0; }
.b-text-and-form__desc { color: var(--navy); font-size: 16px; line-height: 24px; }
.b-text-and-form__desc p { margin: 15px 0 29px; }
.b-text-and-form__single {
  display: flex; justify-content: flex-start; align-items: center; flex-direction: row; margin-top: 34px;
}
.b-text-and-form__icon {
  border: solid var(--line) 1px; width: 56px; min-width: 56px; height: 56px; min-height: 56px;
  display: flex; justify-content: center; align-items: center; position: relative; border-radius: 50%;
}
.b-text-and-form__icon svg { width: 29px; height: 29px; }
.b-text-and-form__text { margin-left: 20px; color: var(--navy); }
.b-text-and-form__form { position: relative; padding: 50px; border-radius: 10px; background: #f1f9ff; }
.b-text-and-form__form-object { position: relative; z-index: 1; }
.b-text-and-form__form-bg {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;
  position: absolute; top: 0; left: 0; border-radius: 10px; z-index: 0;
}
.b-text-and-form__form input:not([type=submit]),
.b-text-and-form__form textarea { background: #fff; }

input[type=text], input[type=email], input[type=tel], input[type=search], textarea {
  padding: 17px 27px; border: 1px solid var(--line); font-size: 16px; width: 100%;
  border-radius: 33px; background-color: transparent; font-weight: 400; line-height: normal;
  font-family: "Outfit"; color: var(--navy);
}
/* Produkcja: textarea jest inline-block (domyślne), więc jej wrapper ma +6 px
   światła z line-boxa — stąd wysokość pola 130 px, a wrappera 136 px. */
textarea { height: 130px; min-height: 130px; resize: vertical; border-radius: 15px; }
input:focus, textarea:focus { outline: 0; border: 1px solid var(--blue); box-shadow: 0 0 0 3px rgba(26,143,227,.35); }
input::placeholder, textarea::placeholder { color: var(--navy); opacity: 1; }
.c-form-cf7__wrap-input { position: relative; margin-bottom: 21px; }
.c-form-cf7__wrap-input p { margin: 16px 0 24px; }
.short-inf { font-size: 14px; font-style: italic; }
.short-inf p { margin-top: -5px; margin-bottom: 10px; }
.short-inf--reg { color: var(--ink); font-style: normal; }
.short-inf--reg a { color: #17648b; }
.cf7-submit-wrapper { position: relative; width: fit-content; }
.cf7-submit-wrapper input[type=submit] {
  /* Produkcja: 14px 50px — strzałka (::after wrappera) nachodzi na prawy padding,
     dzięki czemu przylega do napisu, a przycisk ma 143 px szerokości. */
  width: auto; padding: 14px 50px; border-radius: 999px; cursor: pointer;
  background: var(--blue); border: 1px solid var(--blue); color: #fff; font-size: 15px; font-weight: 600;
}
.cf7-submit-wrapper::after {
  position: absolute; top: calc(50% - 12.5px); left: calc(100% - 48px); transition: left .4s;
  content: ""; display: block; width: 25px; height: 25px;
  background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.2151 15.5961L24.7806 13.0306C24.9211 12.8897 25 12.6989 25 12.4999C25 12.3009 24.9211 12.1101 24.7806 11.9692L22.2151 9.40375C22.0343 9.2276 21.745 9.23045 21.5677 9.41011C21.3904 9.58977 21.3904 9.8785 21.5677 10.0582L23.4396 11.9301H0.43457C0.194574 11.9301 0 12.1247 0 12.3647C0 12.6047 0.194574 12.7992 0.43457 12.7992H23.4396L21.5677 14.6711C21.3904 14.8508 21.3904 15.1395 21.5677 15.3192C21.745 15.4989 22.0343 15.5017 22.2151 15.3255V15.5961Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; pointer-events: none;
}
.cf7-submit-wrapper:hover::after { left: calc(100% - 40px); }

/* ============================================================= OFERTA ==== */
.b-offer { max-width: 1713px; margin: 50px auto; }
.b-offer__box {
  overflow: hidden; position: relative;
  background: radial-gradient(56.12% 226.85% at 81.58% 103.92%, #054fc7 0%, #003fa5 100%);
  border-radius: 10px; margin: 0 15px;
}
.b-offer__content { padding: 109px 0 109px 245px; position: relative; z-index: 2; }
.b-offer__title {
  margin: 0 0 24px; color: #fff; font-size: 67px; line-height: 85px; font-weight: 600; letter-spacing: -.02em;
}
.b-offer__content a { display: inline-flex; }
.b-offer__product {
  position: absolute; width: auto; height: 416px; right: 8%; top: 50%; transform: translateY(-50%); z-index: 1;
  max-width: 100%;
}
.b-offer__bg { position: absolute; width: auto; height: 141%; right: -4%; top: -23%; z-index: 0; max-width: none; }
@media (max-width: 1200px) { .b-offer__content { padding: 109px 0 109px 109px; } }

/* =========================================================== KORZYŚCI ==== */
.b-services { position: relative; max-width: 1775px; margin: -50px auto 50px auto; padding-top: 50px; }
.b-services__img { width: 100%; height: auto; border-radius: 10px; object-fit: cover; }
.b-services__row--cols { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.b-services__col--single { margin: 22px 0; }
.b-services__single { display: flex; justify-content: left; align-items: center; flex-direction: row; }
.b-services__description { margin: 0 0 0 20px; color: var(--navy); }
.b-services__shape { position: absolute; z-index: -1; line-height: 0; }
.b-services__shape svg { width: 100%; height: auto; }
.b-services__shape--1 { left: 0; top: -10%; width: 25.7%; }
.b-services__shape--2 { top: -3%; right: 0; width: 59.8%; }
@media (min-width: 992px) and (max-width: 1200px) {
  .b-services__icon { width: 82px; min-width: 82px; height: 82px; min-height: 82px; }
  .b-services__icon svg { width: 50%; height: 50%; }
}

/* ===================================== WYNAJMIJ DO SWOJEJ FIRMY (b-icons) = */
.b-icons { position: relative; margin: 100px 0; }
.b-icons .container::after { content: ""; display: block; clear: both; }
.b-icons__img { position: absolute; top: 70px; right: 50.5%; width: 50.2%; max-width: 965px; border-radius: 10px; }
.b-icons__text-wrap {
  display: flex; float: right; padding: 116px 74px 91px 158px; flex-direction: column;
  width: 57.4%; border: 1px solid var(--line); border-radius: 10px;
}
.b-icons__title {
  width: 75%; color: var(--navy); font-size: 30px; line-height: 100%; font-weight: 600;
  letter-spacing: -.02em; margin: 30px 0 45px;
}
.b-icons__description { font-weight: 300; font-size: 16px; line-height: 24px; color: var(--navy); }
.b-icons__description p { margin: 16px 0 24px; }
.b-icons__options {
  clear: both; width: 100%; max-height: 350px; padding-top: 15.1%;
  display: flex; justify-content: space-between; align-items: center; flex-direction: row;
}
.b-icons__single { display: flex; justify-content: left; align-items: center; flex-direction: row; }
.b-icons__single-description { margin: 0 0 0 20px; }
@media (max-width: 1400px) {
  .b-icons__img { top: 100px; }
  .b-icons__text-wrap { padding: 101px 74px 76px 130px; }
  .b-icons__options { padding-top: 5%; }
  .b-icons__title { width: 90%; }
}
@media (max-width: 1200px) { .b-icons__text-wrap { padding: 71px 34px 46px 100px; } }

/* ================================================================ FAQ ==== */
.image-text-button { color: var(--ink); margin-top: 100px; margin-bottom: 100px; }
.image-text-button__row { align-items: center; }
.image-text-button__text-container {
  height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
}
.image-text-button__title { font-size: 30px; font-weight: 700; line-height: 43px; margin: 0 0 25px; color: var(--navy); }
.image-text-button__col--desc { width: 100%; padding-inline: 15px; }
.image-text-button__description { color: var(--navy); }
.image-text-button__description p { line-height: 24px; margin: 0 0 25px; }
/* H3 w FAQ mial przepisany domyslny styl przegladarki (18.72px = 1.17em),
   czyli w praktyce brak stylu i brak roznicy wzgledem tekstu. Skala:
   H2 sekcji 30px > H3 pytania 20px > tekst 16px. */
.image-text-button__description h3 {
  margin: 28px 0 8px; font-size: 20px; font-weight: 600; line-height: 28px; color: var(--navy);
}
.image-text-button__description h3:first-child { margin-top: 0; }
.image-text-button__description ul { margin: 0 0 25px; padding-left: 24px; }
.image-text-button__description ul li { margin: 0; }
.image-text-button__description ul li p { margin: 0 0 25px; }
.image-text-button__description ul li:last-child p { margin-bottom: 0; }
.image-text-button__description table {
  width: 100%; border-collapse: collapse; margin: 0 0 10px; font-size: 16px; line-height: 24px;
}
.image-text-button__description table td,
.image-text-button__description table th {
  padding: 1px 0; height: 42px; border-bottom: 1px solid var(--line); vertical-align: middle;
}
.image-text-button__description table th { text-align: left; font-weight: 700; }
.image-text-button__description table thead td,
.image-text-button__description table thead th { border-bottom: 1px solid var(--line); }
/* #7a8699 na bieli dawalo 3.68:1 (ponizej WCAG AA 4.5:1 dla malego tekstu);
   #667085 to ten sam chlodny szary o tym samym odcieniu, ale 4.97:1. */
.image-text-button__description p.c-source-note { font-size: 13px; line-height: 20px; color: #667085; margin: 6px 0 25px; }

/* ============================================================= STOPKA ==== */
.c-footer {
  background: radial-gradient(33.57% 102.59% at 74.32% 114.44%, #071E45 0%, #021431 100%);
  color: #fff; position: relative; z-index: 80; overflow: hidden; margin-top: 100px;
}
.c-footer .container { position: relative; z-index: 1; }
.c-footer__main-row { margin-top: 57px; margin-bottom: 110px; }
.c-footer__logo-box { margin-bottom: 40px; }
.c-footer__logo-box img { width: 138px; height: auto; }
.c-footer__address-info { margin-top: 20px; font-size: 15px; font-weight: 400; line-height: 21px; }
.c-footer__address-info p { margin: 0; }
.c-footer__address-info p:first-child { font-weight: 700; margin-bottom: 16px; }
.c-footer__main-menu-wrap ul { list-style: none; margin: 0; padding: 0 0 0 60px; }
.c-footer__main-menu-wrap ul li { padding-bottom: 5px; width: calc(50% - 15px); }
.c-footer__main-menu-wrap ul li:nth-child(odd) { width: calc(50% + 15px); }
.c-footer__main-menu-wrap ul li.c-footer__item--full-item { width: 100%; }
.c-footer__main-menu-wrap ul a { color: #fff; font-size: 15px; font-weight: 400; transition: .2s color; }
.c-footer__main-menu-wrap ul a:hover { color: var(--blue); }
.c-footer__upper-wrapper { position: relative; }
.c-footer__upper-wrapper::before {
  content: ""; position: absolute; z-index: -1; width: calc(100% + 2px); top: -1px; left: -1px;
  height: calc(100% + 2px); background: linear-gradient(180deg, #08244F 0%, #1152B5 100%); border-radius: 10px;
}
.c-footer__upper { margin-bottom: 30px; padding: 32px 54px; background: #051c3d; border-radius: 10px; }
.c-footer__upper-title { font-size: 30px; font-weight: 700; line-height: normal; margin: 0; }
.c-footer__upper-links a {
  margin-top: 27px; display: inline-flex; align-items: center; justify-content: flex-start;
  color: #fff; font-size: 16px; font-weight: 400; transition: .2s color;
}
.c-footer__upper-links a svg { margin-right: 6px; }
.c-footer__upper-links a:hover { color: var(--blue); }
.c-footer__latest-posts-title { margin-bottom: 20px; font-weight: 600; font-size: 16px; line-height: 100%; }
.c-footer__cities-title { margin: 0 0 12px; font-weight: 600; font-size: 16px; line-height: 100%; }
.c-footer__latest-posts-list { display: flex; flex-direction: column; gap: 16px; }
.c-footer__latest-posts-list a {
  display: flex; align-items: center; gap: 8px; font-weight: 300; font-size: 16px; line-height: 24px;
  color: #fff; transition: .3s color;
}
.c-footer__latest-posts-list a::before {
  content: ""; width: 6px; height: 6px; border-radius: 3px; background-color: var(--blue); flex: none;
}
.c-footer__latest-posts-list a:hover { color: var(--blue); }
.c-footer__bottom { padding-bottom: 48px; }
.c-footer__legal-menu-wrap ul {
  list-style: none; margin: 0; padding: 0; display: flex; align-items: center;
  justify-content: flex-end; gap: 32px;
  /* Po dodaniu piatej pozycji ("Ustawienia cookies") menu prawne nie miescilo
     sie przy 375 px - "Polityka prywatnosci" ladowala na left:-71px, czyli poza
     ekranem, i bez paska przewijania (body ma overflow-x:hidden). */
  flex-wrap: wrap;
}
.c-footer__legal-menu-wrap ul a { color: #fff; font-size: 14px; font-weight: 400; opacity: .7; transition: .2s color; }
.c-footer__legal-menu-wrap ul a:hover { color: var(--blue); }
.c-footer__copyright { font-size: 14px; line-height: normal; text-align: left; }
.c-footer__sign { position: absolute; left: -10px; bottom: -10px; z-index: 0; line-height: 0; }

/* ======================================================== MENU MOBILNE === */
.c-mobile-menu {
  background: #fff; position: fixed; top: 0; left: -100%; width: 100%; height: 100%;
  z-index: 90; transition: .2s left; display: flex; flex-direction: column;
}
.c-mobile-menu.open { left: 0; }
.c-mobile-menu__nav { flex-grow: 1; padding: 161.33px 0 15px 0; overflow: auto; }
.c-mobile-menu ul { list-style: none; padding: 0; margin: 0; }
.c-mobile-menu ul li { display: flex; justify-content: space-between; flex-wrap: wrap; }
.c-mobile-menu ul li a { padding: .75em 0; display: block; font-size: 15px; font-weight: 400; color: var(--ink); }
.c-mobile-menu__open {
  padding: 5px 20px; display: flex; justify-content: center; align-items: center;
  transition: transform .4s; cursor: pointer;
}
.c-mobile-menu__open.rotated { transform: rotate(180deg); }
.c-mobile-menu__sublist { width: 100%; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .8s, opacity .5s; }
.c-mobile-menu__sublist.open { max-height: 600px; opacity: 1; }
.c-mobile-menu ul ul li { display: flex; justify-content: flex-start; align-items: center; }
.c-mobile-menu ul ul li a { font-size: 14px; }
.c-mobile-menu ul ul li::before {
  content: " "; width: 2px; background-color: var(--blue); height: 14px; margin-right: 12px; flex: none;
}
@media (min-width: 992px) { .c-mobile-menu { display: none; } }

/* ============================================================== < 992 ==== */
@media (max-width: 991.98px) {
  .c-header-top {
    position: fixed; top: 73px; left: 0; width: 100%; z-index: 100; background: #fff;
    border-bottom: 1px solid rgba(216, 224, 236, .8);
  }
  .c-header-top__text-container { display: none; }
  /* Pasek wyszukiwarki ma wypelniac dostepna szerokosc i dociagac sie do
     krawedzi kontenera tak samo jak wiersz logo/telefon/hamburger nad nim.
     Wczesniej szerokosc byla liczona na DWIE ikony (48+48+32 = miejsce na
     koszyk I na "Moje konto"), a ikona konta zostala usunieta z
     src/_includes/header-top.njk - pasek mial przez to 217 px zamiast ~283 px,
     a justify-content:center zostawialo ~33 px martwego marginesu po bokach. */
  .c-header-top__right { justify-content: flex-start; width: 100%; gap: 14px; }
  .c-header-top__search { flex: 1 1 auto; width: auto; min-width: 0; }
  .c-mini-cart-item { flex: none; }
  /* Selektor musi miec te sama specyficznosc co
     ".c-header-top__search .dgwt-wcas-sf-wrapp input { width: 400px }" wyzej w
     tym pliku (i stac po nim), inaczej <input> ma na mobile 400 px w slocie
     kilkukrotnie wezszym i niewidocznie wystaje pod koszyk oraz poza ekran. */
  .c-header-top__search .dgwt-wcas-sf-wrapp input { width: 100%; }

  .c-header__middle { display: none; }
  .c-header__middle--mobile {
    display: block; position: fixed; top: 0; left: 0; width: 100%; z-index: 101;
    height: auto; background: #fff; border-top: 0;
  }
  .c-header__middle-top-mobile {
    padding: 12px 0; display: flex; justify-content: space-between; align-items: center; gap: 8px;
  }
  .c-header__middle-top-tel a { padding: 14px 15px; gap: 0 6px; }
  .c-header__middle-tel { display: flex; align-items: center; gap: 6px; font-size: 15px; }
  .c-header__logo-wrapper img { width: 100px; height: auto; }
  .c-header__mobile-items { display: flex; align-items: center; justify-content: flex-end; }

  .b-hero { margin-bottom: 50px; }
  .b-hero__inside { padding: 219px 0 38px 0; }
  .b-hero__title { font-size: 30px; line-height: 36px; margin-top: 5px; margin-bottom: 14px; }
  .b-hero__description { margin-bottom: 14px; }
  .b-hero__image { display: none; }
  .b-hero__down-arrow { bottom: -25px; left: calc(50% - 25px); width: 50px; height: 50px; }
  .b-hero .container-fluid, .b-hero .container-fluid { padding: 0; }

  .b-opinions__header { row-gap: 20px; flex-direction: column; align-items: flex-start; margin-bottom: 20px; }
  .b-opinions__title { width: 100%; font-size: 26px; }
  .js-opinions-swiper .swiper-slide,
  .js-products-swiper .swiper-slide { width: calc(100% - 35px); }

  .b-cta-2 { margin: 60px 0; }
  .b-cta-2__content { padding: 55px 25px 30px 25px; text-align: center; }
  .b-cta-2__title { font-size: 20px; line-height: 26px; }
  .b-cta-2__content .c-btn { margin-inline: auto; }

  .youtube-video-container { margin: 20px auto; border-radius: 0; }

  .b-how-it-works__title { font-size: 36px; }
  .b-how-it-works__steps { flex-direction: column; row-gap: 50px; align-items: stretch; }
  /* height -> min-height (2026-09-11). Sztywna wysokosc przycinala opis: przy 375px
     tekst kroku potrzebuje 151-199px, a pudelko mialo 120px, wiec tresc wylewala sie
     poza krok. Zamiana na min-height zachowuje rowna wysokosc krokow tam, gdzie tekst
     jest krotki, a pozwala urosnac tam, gdzie jest dluzszy. Linia lacznika
     (.b-how-it-works__line) jest pozycjonowana wzgledem .b-how-it-works__img-wrap,
     ktory ma wlasna stala wysokosc, wiec ta zmiana jej nie rusza. */
  .b-how-it-works__step { width: 100%; min-height: 130px; flex-direction: row; align-items: stretch; }
  .b-how-it-works__img-wrap { width: 78px; height: 78px; min-width: 78px; min-height: 78px; }
  .b-how-it-works svg { width: 40px; height: 40px; }
  .b-how-it-works__number { text-align: start; margin: 15px 0 6px; }
  .b-how-it-works__button { margin-top: 20px; }
  .b-how-it-works__text-wrap { margin-left: 20px; margin-top: 15px; width: 80%; }
  .b-how-it-works__description { text-align: start; width: 90%; }
  .b-how-it-works__line {
    margin: 0; width: 1px; height: 100%; left: 50%; right: auto; top: 35%; bottom: -50%;
    transform: translate(-50%, 84%);
  }

  .packages { margin-top: 60px; margin-bottom: 60px; }
  .packages__title { font-size: 26px; line-height: 1; margin-bottom: 30px; }
  .packages__section-container { flex-direction: column; justify-content: unset; min-height: unset; }

  .b-products__title { font-size: 36px; }
  .b-products__navigation { position: relative; right: auto; margin: 30px 0; justify-content: center; }
  .b-products__products { margin-top: 0; }

  .b-text-and-form__content { margin-bottom: 10px; }
  .b-text-and-form__title, .b-text-and-form__desc { text-align: center; }
  .b-text-and-form__form { padding: 20px; }

  .b-offer__content { padding: 35px 15px 0 15px; text-align: center; }
  .b-offer__content a { display: inline-flex; margin-inline: auto; }
  .b-offer__title { font-size: 26px; line-height: 26px; }
  .b-offer__title br { display: none; }
  .b-offer__product {
    position: relative; top: auto; right: auto; transform: none; margin: 0 auto; display: block; height: 316px;
  }
  .b-offer__bg { top: auto; right: auto; bottom: -23%; left: 43%; transform: translateX(-50%); height: 420px; }

  .b-services { margin: 0 auto 50px; padding-top: 0; }
  .b-services__shape { display: none; }
  .b-services__col--single { margin-top: 10px; margin-bottom: 10px; }

  .b-icons { margin: 60px 0; }
  .b-icons .container { display: flex; flex-direction: column; row-gap: 20px; }
  /* clearfix z widoku desktopowego stałby się tu 4. elementem flex i dokładał 20 px */
  .b-icons .container::after { display: none; }
  .b-icons__img { display: block; position: relative; top: 0; right: 0; width: 100%; }
  .b-icons__text-wrap { width: 100%; padding: 40px; float: none; }
  .b-icons__options {
    margin-top: 60px; display: grid; grid-template-columns: 1fr 1fr; row-gap: 30px;
    column-gap: 15%; padding: 0; max-height: none;
  }

  .image-text-button { margin-top: 60px; margin-bottom: 60px; }
  .image-text-button__title { font-size: 26px; line-height: 33px; }
  .image-text-button__description h3 { font-size: 18px; line-height: 26px; margin: 24px 0 8px; }

  .c-footer { margin-top: 60px; }
  .c-footer__main-row { margin-top: 35px; margin-bottom: 0; }
  .c-footer__main-menu-wrap { margin-top: 30px; }
  .c-footer__main-menu-wrap ul { padding-left: 0; display: flex; flex-wrap: wrap; }
  .c-footer__upper { padding: 32px; margin-top: 30px; }
  .c-footer__upper-links a { font-size: 18px; }
  .c-footer__latest-posts { margin-bottom: 34px; }
  .c-footer__bottom { padding-bottom: 35px; }
  .c-footer__row--copy { display: flex; flex-direction: column-reverse; }
  .c-footer__copyright { margin: 15px 0; }
  .c-footer__sign { display: none; }
}

/* ============================================================== < 768 ==== */
@media (max-width: 767.98px) {
  .c-opinion { padding: 20px; flex-direction: column-reverse; align-items: flex-start; row-gap: 26px; }
  .c-opinion__client { flex-direction: row; align-items: flex-start; column-gap: 23px; width: 100%; max-width: none; }
  .c-opinion__img { width: 72px; height: 72px; flex-shrink: 0; }
  .c-opinion__text { width: 100%; max-width: none; flex: 1 1 auto; }
  .c-opinion__description { margin-top: 0; }

  .b-icons__text-wrap { padding: 0; border: 0; }
  .b-icons__options { column-gap: 0; margin-top: 20px; }
  .b-icons__single { flex-direction: column; row-gap: 15px; }
  .b-icons__single-description { margin: 0; }

  .b-services__icon { width: 72px; min-width: 72px; height: 72px; min-height: 72px; }
  .b-products__title { font-size: 26px; }
}

/* ============================================================== < 576 ==== */
@media (max-width: 575.98px) {
  .b-hero__links { flex-direction: column; }
  .b-how-it-works__title { font-size: 26px; }
  .b-how-it-works__step { min-height: 120px; }   /* jw. - patrz komentarz wyzej */
  .b-how-it-works__img-wrap { width: 58px; height: 58px; min-width: 58px; min-height: 58px; }
  .b-how-it-works svg { width: 30px; height: 30px; }
  .b-how-it-works__text-wrap { margin-left: 20px; margin-top: 5px; width: 85%; }
  .b-how-it-works__description { width: 100%; }
  .b-how-it-works__steps { row-gap: 30px; }
  .b-services__icon { width: 102px; min-width: 102px; height: 102px; min-height: 102px; }
}

/* ================================================== CRO-07: scroll-margin === */
/* Wartości zmierzone Playwrightem (getBoundingClientRect) na buildzie z 2026-08-28:
   mobile (<992px) — nagłówek fixed (.c-header__middle--mobile + .c-header-top)
   zajmuje łącznie 162px (74px + 88px) + 10px zapasu = 172px.
   desktop (≥992px) — nagłówek NIE jest fixed (position: relative), więc kotwica
   i tak wypada poniżej niego; zostawiamy niewielki zapas 20px dla wygody. */
[id] { scroll-margin-top: 20px; }
@media (max-width: 991.98px) {
  [id] { scroll-margin-top: 172px; }
}

/* ================================================ WALIDACJA FORMULARZY === */
/* Wzorzec CF7 (Contact Form 7) — wartości koloru czerwonego przeniesione
   z produkcyjnego arkusza (.wpcf7-not-valid-tip, input.wpcf7-not-valid). */
input.wpcf7-not-valid, textarea.wpcf7-not-valid { border-color: #dc3232; }
input.wpcf7-not-valid:focus, textarea.wpcf7-not-valid:focus {
  border-color: #dc3232; box-shadow: 0 0 0 3px rgba(220, 50, 50, .2);
}
.wpcf7-not-valid-tip {
  display: block; margin-top: 8px; color: #dc3232; font-size: 13px; font-weight: 400; line-height: normal;
}
.c-form-cf7__error {
  margin-top: 16px; padding: 12px 20px; border: 1px solid #dc330f; border-radius: 10px;
  color: #021431; font-size: 14px; line-height: 22px;
}
.c-form-cf7__error a { color: #dc330f; font-weight: 600; text-decoration: underline; }

/* Honeypot — pole wypełniane wyłącznie przez boty, ukryte offscreen (nie display:none,
   żeby część botów, które sprawdzają widoczność, dalej próbowała je wypełnić). */
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ===================================================== POPUP PAKIETÓW === */
/* Odtworzone z produkcyjnego .c-popup (motyw wodzilla-theme) — domyślnie
   ukryty (display:none), więc nie zmienia niczego w stanie domyślnym strony. */
.c-popup {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;
  background-color: rgba(2, 20, 49, .45); z-index: 9999; display: none;
  flex-direction: row; align-items: center; justify-content: center; overflow: auto; padding: 20px;
}
.c-popup.is-active { display: flex; }
.c-popup__inner {
  position: relative; display: block; background-color: #fff; height: auto; width: 100%;
  max-width: 644px; max-height: calc(100vh - 40px); overflow-y: auto; border-radius: 10px;
  transform: translateY(24px); opacity: 0; transition: transform .3s ease, opacity .3s ease;
}
.c-popup.is-active.animation-change .c-popup__inner { transform: translateY(0); opacity: 1; }
.c-popup__header {
  position: relative; display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  padding: 30px 45px 20px; background-color: #fff; border-bottom: 1px solid var(--line);
}
.c-popup__header-spec-wrapper--centered { display: block; width: 100%; text-align: center; }
.c-popup__title { margin-bottom: 0; font-size: 22px; line-height: 28px; }
.c-popup__title .js-popup-package-name { color: var(--blue); }
.c-popup__subtitle { margin-top: 10px; font-size: 14px; line-height: 20px; color: var(--ink); }
.c-popup__btn-close {
  position: absolute; top: 17px; right: 18px; appearance: none; background-color: transparent;
  border: none; padding: 6px; line-height: 0; cursor: pointer;
}
.c-popup__btn-close svg path { transition: fill .2s ease-out; }
.c-popup__btn-close:hover svg path { fill: #5f5d5d; }
.c-popup__content { padding: 22px 45px 40px; }
.c-popup__simple-form form p { margin-top: 0; }
@media (max-width: 575.98px) {
  .c-popup { padding: 12px; }
  .c-popup__header { padding: 24px 20px 16px; }
  .c-popup__content { padding: 16px 20px 24px; }
  .c-popup__title { font-size: 19px; line-height: 24px; }
}

/* =============================================== STRONA /DZIĘKUJEMY/ === */
/* Wspolny komponent dwoch stron podziekowania: /dziekujemy/ (leady,
   src/dziekujemy.njk) i /zamowienie/dziekujemy/ (checkout "kup teraz",
   src/zamowienie/dziekujemy.njk).
   Strona nie ma trybu ciemnego (sprawdzone: brak prefers-color-scheme /
   [data-theme] / klas .dark w calym projekcie - ta sama uwaga co w
   public/css/cmp.css i public/szukaj.css), wiec kolory sa podane wprost:
   tlo biale, tekst var(--navy). Tekstowe linki uzywaja var(--blue-dark)
   (#0056d3 = ok. 6,3:1 na bieli, WCAG AA dla tekstu), a NIE jasniejszego
   var(--blue) (#1a8fe3 = ok. 3,5:1 - to za malo na tekst 15-18 px). */
.b-thank-you { margin: 110px 0; text-align: center; color: var(--navy); }
.b-thank-you__container { max-width: 760px; }
.b-thank-you__title { font-size: 36px; line-height: 44px; margin-bottom: 20px; }
.b-thank-you__desc { font-size: 16px; line-height: 26px; margin-bottom: 15px; }
.b-thank-you__desc--lead { font-size: 18px; line-height: 30px; }
.b-thank-you__back { margin: 40px auto 0; }

/* --- kontekst zgloszenia (parametry ?f= / ?p=, public/dziekujemy.js) ---
   Domyslnie ukryty atrybutem `hidden` w HTML - odslania go dopiero skrypt,
   gdy w adresie sa parametry. Bez JS blok po prostu nie istnieje wizualnie. */
.b-thank-you__context {
  display: inline-block; max-width: 100%; margin: 0 0 30px; padding: 10px 18px;
  background: #eef6fd; border: 1px solid #bcdcf6; border-radius: 999px;
  font-size: 15px; line-height: 22px; color: var(--navy); overflow-wrap: anywhere;
}
.b-thank-you__context-value { color: #0b4f86; font-weight: 700; }
/* display:inline-block wyzej bije regule [hidden]{display:none} z arkusza
   przegladarki (styl autora ma pierwszenstwo przed UA), wiec atrybut hidden
   trzeba obsluzyc jawnie - inaczej pusta "pigulka" renderuje sie zawsze. */
.b-thank-you__context[hidden] { display: none; }

/* --- "co sie teraz wydarzy" / "co dalej z zamowieniem" --- */
.b-thank-you__section-title { margin: 45px 0 20px; font-size: 22px; line-height: 30px; font-weight: 700; color: var(--navy); }
.b-thank-you__steps { list-style: none; margin: 0; padding: 0; text-align: left; }
.b-thank-you__step { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line); }
.b-thank-you__step:first-child { border-top: 0; padding-top: 0; }
.b-thank-you__step-num {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--blue-dark); color: #fff; font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.b-thank-you__step-body { display: block; }
.b-thank-you__step-title { display: block; font-size: 17px; font-weight: 700; line-height: 24px; color: var(--navy); margin-bottom: 4px; }
.b-thank-you__step-desc { display: block; font-size: 15px; line-height: 24px; color: #33414f; }

/* --- szybka alternatywa: telefon i e-mail --- */
.b-thank-you__contact {
  margin: 45px 0 0; padding: 26px 24px; text-align: center;
  background: #f4f8fc; border: 1px solid var(--line); border-radius: 10px;
}
.b-thank-you__contact-title { margin: 0 0 8px; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--navy); }
.b-thank-you__contact-desc { margin: 0 0 18px; font-size: 15px; line-height: 24px; color: #33414f; }
.b-thank-you__contact-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.b-thank-you__contact-link {
  display: block; min-width: 220px; padding: 12px 20px; background: #fff;
  border: 1px solid #bcdcf6; border-radius: 8px; text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
.b-thank-you__contact-link:hover { border-color: var(--blue-dark); box-shadow: 0 2px 10px rgba(0, 86, 211, .12); }
.b-thank-you__contact-link-label { display: block; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #33414f; }
.b-thank-you__contact-link-value { display: block; font-size: 18px; font-weight: 700; color: var(--blue-dark); overflow-wrap: anywhere; }

/* --- "zanim sie odezwiemy": 3 karty z dalszym ruchem --- */
.b-thank-you__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: left; }
.b-thank-you__card {
  display: block; padding: 20px; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; color: var(--navy); text-decoration: none;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.b-thank-you__card:hover { border-color: var(--blue-dark); box-shadow: 0 4px 16px rgba(2, 20, 49, .1); transform: translateY(-2px); }
.b-thank-you__card-kicker { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #0b4f86; }
.b-thank-you__card-title { display: block; margin-bottom: 6px; font-size: 17px; font-weight: 700; line-height: 24px; color: var(--navy); }
.b-thank-you__card:hover .b-thank-you__card-title { color: var(--blue-dark); }
.b-thank-you__card-desc { display: block; font-size: 14px; line-height: 22px; color: #33414f; }

/* fokus widoczny na kazdym odnosniku sekcji (takze na przycisku powrotu) */
.b-thank-you a:focus-visible { outline: 3px solid var(--blue-dark); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .b-thank-you__card, .b-thank-you__contact-link { transition: none; }
  .b-thank-you__card:hover { transform: none; }
}
@media (max-width: 991.98px) {
  .b-thank-you__cards { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .b-thank-you { margin: 60px 0; }
  .b-thank-you__title { font-size: 26px; line-height: 32px; }
  .b-thank-you__desc--lead { font-size: 16px; line-height: 26px; }
  .b-thank-you__section-title { font-size: 20px; line-height: 28px; }
  .b-thank-you__contact { padding: 20px 16px; }
  .b-thank-you__contact-link { min-width: 0; width: 100%; }
}

/* ============================================= MEGA-MENU: DYSTRYBUTORY === */
/* Desktop (panel pod pozycja "Dystrybutory" w .c-menu-desktop, otwierany na
   hover/focus-within - jak istniejacy wzorzec .c-menu-desktop__submenu) +
   mobile (panel wysuwany w .c-mobile-menu, drill-down z przyciskiem "Powrót").
   Tresc 1:1 z produkcji (zrodla/page/kontakt/page.html, bloki .c-mega-menu
   i .c-mobile-menu__mega-content) - linki/etykiety zrodlo: src/_data/megaMenu.json. */

/* --- desktop ----------------------------------------------------------------
   .c-mega-menu jest dzieckiem .c-header__middle (pelna szerokosc naglowka),
   NIE samego <li> - dzieki temu panel rozciaga sie na cala szerokosc bez
   sztuczek 100vw/translateX (ktore nie dzialaja poprawnie zagniezdzone w
   waskim <li>). Pokazuje go :has() na .c-header__middle przy hover myszy
   (niezmienione - decyzja klienta: panel ma sie otwierac NAJAZDEM, nie
   klikiem) LUB gdy app.js oznaczy wyzwalacz jako otwarty z klawiatury
   (aria-expanded="true" - patrz niżej i app.js).
   (.c-header__middle ma juz position:relative zdefiniowane wyzej.)

   Zmierzono (Playwright, 1280/1440/1920px): pionowej szczeliny miedzy
   dolem wyzwalacza a gora panelu NIE MA (panel zaczyna sie -2px, czyli
   lekko NA wyzwalaczu, bo .c-mega-menu ma top:100% wzgledem .c-header__middle,
   ktorej wysokosc = wysokosc calego <li> wyzwalacza). Realny problem to
   "ciecie rogu" po przekatnej: wyzwalacz to WASKI prostokat (tylko pod
   napisem "Dystrybutory"), a kursor jadacy po przekatnej do skrajnej
   kolumny panelu (daleko w lewo/prawo) opuszcza ten waski prostokat W BOK,
   zanim zejdzie wystarczajaco nisko, by wejsc w panel (ktory zaczyna sie
   dopiero od 100% wysokosci calego naglowka) - przez chwile kursor jest
   wiec nad ani jednym, ani drugim i :has() przestaje pasowac.
   Naprawa = "hover intent": ZAMYKANIE ma .3s opoznienia (transition-delay
   nizej), wiec krotkie przejscie przez ta strefe nie zamyka panelu - jesli
   kursor wroci na wyzwalacz/panel przed uplywem opoznienia, :has() znow
   zaczyna pasowac i zamkniecie nigdy sie nie zaczyna. OTWIERANIE zostaje
   natychmiastowe (regula ponizej nadpisuje transition-delay na 0).
   Odrzucony wariant: przezroczysty "most" (::before) domykajacy strefe -
   musialby pokrywac cala szerokosc naglowka w wysokosci wyzwalacza (tam,
   gdzie stoja logo/pozostale pozycje menu/CTA telefon), wiec przy otwartym
   panelu blokowalby klikniecia w te elementy. Hover-intent tego ryzyka nie ma. */
.c-mega-menu {
  position: absolute; top: 100%; left: 0; width: 100%;
  visibility: hidden; opacity: 0;
  /* Blokowanie klikniec opiera sie WYLACZNIE na visibility (element z
     visibility:hidden nie jest hit-testowalny) - celowo BEZ pointer-events.
     pointer-events nie animuje sie razem z opacity, wiec oparcie na nim
     dawalo stan "widoczny, ale martwy": pointer-events wracal na "none"
     NATYCHMIAST po utracie hover/fokusu, a opacity/visibility gasly jeszcze
     przez .3s - przez ten czas panel byl w pelni widoczny, ale linki byly
     nieklikalne. Visibility nie ma tego problemu: flip na "hidden" i utrata
     hit-testu sa zsynchronizowane (patrz delay/duration nizej), wiec panel
     jest klikalny przez caly czas, gdy jest choc czesciowo widoczny. */
  transition: opacity .3s ease .3s, visibility 0s linear .6s;
  z-index: 60;
}
/* Mega menu pozostaje widoczny gdy kursor jest nad wyzwalaczem lub panelem
   (mysz - czysty CSS, mechanizm niezmieniony), LUB gdy wyzwalacz ma
   aria-expanded="true" (klawiatura - app.js ustawia ten atrybut na fokusie/
   Escape/focusout, CSS tylko go czyta). transition-delay: 0 tutaj = otwieranie
   zawsze natychmiastowe; opoznienie z reguly bazowej dotyczy WYLACZNIE
   zamykania. */
.c-header__middle:has(.c-menu-desktop__item--mega:hover) .c-mega-menu,
.c-header__middle:has(.c-mega-menu:hover) .c-mega-menu,
.c-header__middle:has(.c-menu-desktop__link[aria-expanded="true"]) .c-mega-menu {
  visibility: visible; opacity: 1;
  transition: opacity .3s ease, visibility 0s linear;
}
.c-mega-menu__inner {
  background: #fff; border-radius: 0 0 8px 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, .1); padding: 30px 0;
}
.c-mega-menu__columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 25px; }
.c-mega-menu__column-title { color: var(--navy); font-size: 16px; font-weight: 600; line-height: 1.4; margin: 0 0 15px; }
.c-mega-menu__column-title a { color: inherit; text-decoration: none; transition: opacity .2s; }
.c-mega-menu__column-title a:hover { opacity: .8; }
.c-mega-menu__links { list-style: none; margin: 0; padding: 0; }
.c-mega-menu__link-item { margin-bottom: 10px; }
.c-mega-menu__link-item:last-child { margin-bottom: 0; }
.c-mega-menu__link {
  color: var(--navy); font-size: 15px; font-weight: 300; line-height: 24px; text-decoration: none;
  display: block; transition: color .2s, padding-left .2s;
}
.c-mega-menu__link:hover { color: #06c; padding-left: 8px; }
/* Obwodka fokusu (token serwisu: 2px var(--blue), offset 2px) - dotyczy
   zarowno linkow itemow (.c-mega-menu__link), jak i linkow nagłówkow kolumn
   (zwykle <a> bez klasy w .c-mega-menu__column-title), stad selektor na
   calym panelu, nie na pojedynczej klasie linku. */
.c-mega-menu a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* --- mobile ----------------------------------------------------------------
   Panel jest position:fixed zagniezdzony w .c-mobile-menu (z-index: 90), wiec
   dziedziczy jej kontekst uwarstwienia - naglowek mobilny (z-index: 101)
   zostaje widoczny nad panelem (przycisk zamkniecia "X" pozostaje klikalny),
   tak samo jak dzieje sie to juz dla samego .c-mobile-menu. */
.c-mobile-menu__item--mega { position: relative; }
.c-mobile-menu__open--mega {
  background: var(--blue); border: none; border-radius: 50%; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer;
  padding: 0; transform: rotate(-90deg); transition: transform .3s;
}
.c-mobile-menu__open--mega[aria-expanded="true"] { transform: rotate(0deg); }
.c-mobile-menu__mega-content {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff;
  z-index: 5; overflow-y: auto; transform: translateX(-100%); transition: transform .3s ease;
  padding: 161.33px 0 30px;
}
.c-mobile-menu__mega-content.open { transform: translateX(0); }
.c-mobile-menu__mega-header {
  position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff; border-bottom: 1px solid var(--line); padding: 12px 24px; margin-bottom: 10px;
}
.c-mobile-menu__mega-back {
  display: flex; align-items: center; gap: 8px; background: none; border: none; padding: 5px;
  color: #06c; font-size: 15px; font-weight: 600; cursor: pointer;
}
.c-mobile-menu__mega-main-title { font-size: 20px; font-weight: 700; color: var(--navy); margin: 0; }
.c-mobile-menu__mega-column { padding: 0 24px; }
.c-mobile-menu__mega-title { font-size: 17px; font-weight: 700; color: var(--navy); margin: 20px 0 10px; }
.c-mobile-menu__mega-title a { color: inherit; text-decoration: none; }
.c-mobile-menu__mega-links { list-style: none; margin: 0; padding: 0; }
.c-mobile-menu__mega-links li { margin-bottom: 6px; }
.c-mobile-menu__mega-links a { color: var(--navy); font-size: 14px; font-weight: 400; text-decoration: none; display: block; }
.c-mobile-menu__mega-links a:hover { color: var(--blue); }

/* --- Okruszki w hero: zawijanie na waskich ekranach -------------------------
   Problem (zmierzony Playwrightem 2026-09-10, 375 px): na 6 stronach kategorii
   3-poziomowych nav.c-breadcrumb miala 462 px szerokosci przy oknie 375 px.
   Element jest wycentrowany, wiec wystawal po OBU stronach (left -43, right 418)
   - uzytkownik nie widzial ani poczatku sciezki, ani jej konca, a paska
   przewijania nie bylo, bo body ma overflow-x:hidden. Nadmiar rosl z dlugoscia
   sciezki: od +6 px (dystrybutory-nablatowe) do +43 px (wolnostojace/page/2,
   gdzie dochodzi jeszcze segment "Strona 2").

   Dlaczego akurat kategorie: reguly .c-breadcrumb (nowrap + ellipsis) siedza w
   public/css/strony.css, ktorego strony kategorii NIE ladują (maja kategorie.css),
   a public/styles.css nie mial dla nich zadnej reguly. Na kartach produktu i na
   blogu problem nie wystepowal.

   Selektor jest dwuczlonowy (.c-breadcrumb__big-wrap .c-breadcrumb) celowo: ma
   wygrac z jednoczlonowa regula `white-space:nowrap` ze strony.css niezaleznie
   od kolejnosci ladowania arkuszy. Ograniczone do <=767,98 px, zeby na desktopie
   nie zmieniac wygladu jednowierszowej sciezki. */
@media (max-width: 767.98px) {
  .c-breadcrumb__big-wrap { max-width: 100%; }
  .c-breadcrumb__big-wrap .c-breadcrumb {
    max-width: 100%; white-space: normal; overflow-x: visible; text-overflow: clip;
  }
}