/* =====================================================================
   xmotors.pl - arkusz nowoczesny

   Zastepuje css/style.css (kopia arkusza z 2020 roku) i css/uzupelnienie.css.
   Znaczniki w szablonach zostaja te same - zmienia sie wylacznie wyglad,
   wiec powrot do poprzedniej wersji to jedna stala w app/konfiguracja.php:

       define('XM_WYGLAD', 'klasyczny');

   Kierunek: ciemny, sportowy. Kolory marki bez zmian - niebieski #0A9BD9
   z logo i czern. Zdjecia dostaja wiecej miejsca, tresc wiecej powietrza,
   a wszystkie elementy klikalne wygladaja tak samo na calej stronie.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* 1. ZMIENNE                                                          */
/* ------------------------------------------------------------------ */

:root {
    --niebieski: #0a9bd9;
    --niebieski-ciemny: #0782b6;
    --niebieski-jasny: #3fb9ef;

    /* Stara nazwa uzywana przez css/tla.css i kilka miejsc w kodzie. */
    --hoverColor: #0a9bd9;
    --maxWidth: 1280px;

    --czern: #0d1317;
    --czern-2: #151f26;
    --czern-3: #1e2a33;

    --tekst: #101a20;
    --tekst-2: #55646f;
    --tekst-3: #8b99a4;
    --tekst-jasny: #eef3f6;
    --tekst-jasny-2: #a8b6c0;

    --tlo: #ffffff;
    --tlo-2: #f4f7f9;
    --ramka: #e2e8ec;

    --czerwony: #e02e28;
    --zielony: #1e7a45;

    --r-duze: 16px;
    --r-srednie: 12px;
    --r-male: 9px;

    --cien-1: 0 1px 2px rgba(13, 19, 23, .06);
    --cien-2: 0 4px 14px rgba(13, 19, 23, .10);
    --cien-3: 0 14px 40px rgba(13, 19, 23, .18);

    --przejscie: .18s cubic-bezier(.4, 0, .2, 1);
}

/* ------------------------------------------------------------------ */
/* 2. PODSTAWY                                                         */
/* ------------------------------------------------------------------ */

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

/* Atrybut `hidden` chowa element przez arkusz przegladarki, a KAZDA
   nasza regula z `display` jest od niego mocniejsza. Powiekszenie
   zdjecia ma `.powiekszenie { display: flex }` i przez to nie dawalo
   sie zamknac - skrypt ustawial `hidden`, a okno dalej bylo widoczne.
   Ta jedna linijka zalatwia to raz dla calego serwisu. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--tlo);
    color: var(--tekst);
    font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img, picture, svg, iframe { max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, h5 {
    margin: 0;
    line-height: 1.2;
    letter-spacing: -.01em;
    font-weight: 800;
}

h1 { font-size: clamp(30px, 5vw, 54px); }
h2 { font-size: clamp(23px, 3vw, 34px); }
h3 { font-size: clamp(18px, 2vw, 21px); }
h4 { font-size: 18px; }

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

a { color: var(--niebieski); text-decoration: none; transition: color var(--przejscie); }
a:hover { color: var(--niebieski-ciemny); }

ul { margin: 0; padding: 0; list-style: none; }

button { font: inherit; }

:focus-visible {
    outline: 3px solid var(--niebieski);
    outline-offset: 2px;
    border-radius: 4px;
}

.tylko-dla-czytnika {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.ikona {
    height: 1em;
    width: auto;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

/* Wspolna szerokosc tresci. */
.wrapper > div > section,
main > div > section {
    max-width: var(--maxWidth);
    margin: 0 auto;
    padding: 0 20px;
}

/* ------------------------------------------------------------------ */
/* 3. PRZYCISKI                                                        */
/* ------------------------------------------------------------------ */

.przycisk,
div.wrapper div.header section.header div.slider div.slide button,
div.wrapper div.contact section.contact div.info button,
div.wrapper div.footer footer.footer div.col button,
main.productpage div.productinfo div.informacje div.buttons a,
main.productpage div.productinfo div.informacje div.buttons button,
div.modal section.modal button[type="submit"],
main.contactpage div.data section.data form button,
main.contactpage div.data section.data form input[type="submit"],
main.shoppage div.shoppage section.shoppage div.filtry button.filtruj,
div.wrapper div.products div.product button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 22px;
    border: 0;
    border-radius: var(--r-male);
    background: var(--niebieski);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--przejscie), transform var(--przejscie);
}

.przycisk:hover,
div.wrapper div.header section.header div.slider div.slide button:hover,
div.wrapper div.contact section.contact div.info button:hover,
div.wrapper div.footer footer.footer div.col button:hover,
main.productpage div.productinfo div.informacje div.buttons a:hover,
main.productpage div.productinfo div.informacje div.buttons button:hover,
div.modal section.modal button[type="submit"]:hover,
main.contactpage div.data section.data form button:hover,
main.contactpage div.data section.data form input[type="submit"]:hover,
main.shoppage div.shoppage section.shoppage div.filtry button.filtruj:hover,
div.wrapper div.products div.product button:hover {
    background: var(--niebieski-ciemny);
    color: #fff;
}

/* ------------------------------------------------------------------ */
/* 4. POLA FORMULARZY                                                  */
/* ------------------------------------------------------------------ */

input[type="text"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--ramka);
    border-radius: var(--r-male);
    background: #fff;
    color: var(--tekst);
    font: inherit;
    transition: border-color var(--przejscie), box-shadow var(--przejscie);
}

input::placeholder, textarea::placeholder { color: var(--tekst-3); }

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--niebieski);
    box-shadow: 0 0 0 3px rgba(10, 155, 217, .16);
}

textarea { min-height: 130px; resize: vertical; }

span.blad { display: block; margin-top: 4px; color: var(--czerwony); font-size: 14px; }

/* ------------------------------------------------------------------ */
/* 5. GORNY PASEK I MENU                                               */
/* ------------------------------------------------------------------ */

div.wrapper div.topbar {
    background: var(--czern);
    color: var(--tekst-jasny-2);
    font-size: 14px;
}

div.wrapper div.topbar section.topbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

div.wrapper div.topbar section.topbar div.contact { text-align: center; }
div.wrapper div.topbar section.topbar div.contact a { color: #fff; font-weight: 700; }
div.wrapper div.topbar section.topbar div.contact a:hover { color: var(--niebieski-jasny); }

div.wrapper div.topbar section.topbar div.form { width: 100%; max-width: 420px; }

div.wrapper div.topbar section.topbar form {
    display: flex;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    overflow: hidden;
    transition: border-color var(--przejscie);
}

div.wrapper div.topbar section.topbar form:focus-within { border-color: var(--niebieski); }

div.wrapper div.topbar section.topbar form input {
    flex: 1;
    min-width: 0;
    padding: 8px 16px;
    border: 0;
    background: none;
    color: #fff;
    font-size: 14px;
}
div.wrapper div.topbar section.topbar form input::placeholder { color: rgba(255, 255, 255, .5); }
div.wrapper div.topbar section.topbar form input:focus { box-shadow: none; }

div.wrapper div.topbar section.topbar form button {
    padding: 8px 18px;
    border: 0;
    background: var(--niebieski);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    transition: background-color var(--przejscie);
}
div.wrapper div.topbar section.topbar form button:hover { background: var(--niebieski-ciemny); }

/* --- menu ------------------------------------------------------------ */

div.wrapper div.navbar {
    background: var(--czern-2);
    position: sticky;
    top: 0;
    z-index: 60;
    box-shadow: var(--cien-2);
}

div.wrapper div.navbar section.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Bez zawijania rozwiniete menu na telefonie probuje sie zmiescic
       w tym samym rzedzie co logo i przycisk - i wchodzi na nie
       z prawej strony zamiast rozwinac sie pod spodem. */
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 10px;
    padding-bottom: 10px;
}

div.wrapper div.navbar section.navbar div.logo a { display: block; line-height: 0; }
div.wrapper div.navbar section.navbar div.logo img { width: 104px; height: auto; }

div.wrapper div.navbar section.navbar div.burger button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--r-male);
    background: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

div.wrapper div.navbar section.navbar div.nav nav > ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

div.wrapper div.navbar section.navbar div.nav nav > ul > li { position: relative; }

div.wrapper div.navbar section.navbar div.nav nav > ul > li > a {
    /* W bazie pozycje menu sa zapisane mala litera ("strona glowna") -
       tak samo jak na produkcji, gdzie arkusz robil z nich "Strona
       glowna". Zostawiamy to samo zachowanie, zeby nie trzeba bylo
       ruszac wpisow w panelu. */
    text-transform: capitalize;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px 14px;
    border-radius: var(--r-male);
    color: var(--tekst-jasny);
    font-size: 15px;
    font-weight: 700;
    transition: background-color var(--przejscie), color var(--przejscie);
}

div.wrapper div.navbar section.navbar div.nav nav > ul > li > a:hover,
div.wrapper div.navbar section.navbar div.nav nav > ul > li > a.active {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

div.wrapper div.navbar section.navbar div.nav nav > ul > li > a.active {
    box-shadow: inset 0 -3px 0 var(--niebieski);
}

div.wrapper div.navbar section.navbar div.nav nav > ul > li > a .ikona {
    font-size: 11px;
    transition: transform var(--przejscie);
}
div.wrapper div.navbar section.navbar div.nav nav > ul > li > a[aria-expanded="true"] .ikona {
    transform: rotate(180deg);
}

/* --- podmenu ---------------------------------------------------------- */

div.wrapper div.navbar section.navbar div.nav ul.submenu {
    display: none;
    padding: 6px 0 6px 14px;
}

div.wrapper div.navbar section.navbar div.nav li:hover > ul.submenu,
div.wrapper div.navbar section.navbar div.nav a[aria-expanded="true"] + ul.submenu {
    display: block;
}

div.wrapper div.navbar section.navbar div.nav ul.submenu a {
    text-transform: capitalize;
    display: block;
    padding: 7px 12px;
    border-radius: var(--r-male);
    color: var(--tekst-jasny-2);
    font-size: 14px;
}
div.wrapper div.navbar section.navbar div.nav ul.submenu a:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

/* --- menu na telefonie ------------------------------------------------- */

.js div.wrapper div.navbar section.navbar div.nav { display: none; }
/* Rozwiniete menu na telefonie to panel NA WIERZCHU, a nie kolejny
   element w pasku. Wczesniej wpychalo sie miedzy logo a tresc strony
   i cala strona podskakiwala przy kazdym otwarciu. Teraz nakłada sie
   na tresc, ma pelna wysokosc ekranu i wlasne przewijanie. */
.js div.wrapper div.navbar section.navbar { position: relative; }

.js div.wrapper div.navbar section.navbar div.nav.active {
    display: block;
    position: absolute;
    z-index: 65;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100dvh - 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 20px 28px;
    background: var(--czern-2);
    border-top: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}

/* Starsze przegladarki bez `dvh` - pasek adresu zjada troche miejsca,
   ale panel i tak siega do dolu ekranu. */
@supports not (height: 100dvh) {
    .js div.wrapper div.navbar section.navbar div.nav.active { height: calc(100vh - 100%); }
}

/* Na telefonie pozycje menu sa szersze - latwiej w nie trafic palcem. */
div.wrapper div.navbar section.navbar div.nav nav > ul > li > a {
    padding: 13px 14px;
}

/* --- pasek z ogloszeniem ------------------------------------------------ */

div.wrapper div.navbar section.popup {
    max-width: none;
    padding: 0;
    background: var(--czerwony);
}

div.wrapper div.navbar section.popup div.bar {
    max-width: var(--maxWidth);
    margin: 0 auto;
    padding: 9px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fff;
    text-align: center;
}

div.wrapper div.navbar section.popup div.bar p { margin: 0; font-size: 14px; font-weight: 700; }
div.wrapper div.navbar section.popup div.bar a { color: #fff; text-decoration: underline; }
div.wrapper div.navbar section.popup div.bar .ikona { font-size: 18px; flex: 0 0 auto; }

/* Krzyzyk do zamkniecia. Pole dotyku 40x40 - tyle, zeby dalo sie
   trafic kciukiem, bez powiekszania samego paska. */
div.wrapper div.navbar section.popup div.bar .bar-zamknij {
    flex: 0 0 auto;
    margin-left: auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    opacity: .85;
    border-radius: 6px;
}
div.wrapper div.navbar section.popup div.bar .bar-zamknij:hover,
div.wrapper div.navbar section.popup div.bar .bar-zamknij:focus-visible {
    opacity: 1;
    background: rgba(0, 0, 0, .18);
}

/* Na telefonie komunikat zjadal cztery linijki nad trescia strony.
   Zwijamy go do jednej - caly tekst zostaje dostepny pod odnosnikiem,
   a kto nie chce czytac, zamyka krzyzykiem. */
@media (max-width: 767px) {
    div.wrapper div.navbar section.popup div.bar {
        padding: 7px 6px 7px 14px;
        gap: 8px;
        text-align: left;
        justify-content: flex-start;
    }
    div.wrapper div.navbar section.popup div.bar p {
        font-size: 13px;
        line-height: 1.35;
        min-width: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    div.wrapper div.navbar section.popup div.bar .ikona { font-size: 15px; }
}

@media (min-width: 1024px) {
    div.wrapper div.topbar section.topbar {
        flex-direction: row;
        justify-content: space-between;
    }
    div.wrapper div.navbar section.navbar { flex-wrap: nowrap; position: static; }
    .js div.wrapper div.navbar section.navbar { position: static; }
    .js div.wrapper div.navbar section.navbar div.nav.active {
        position: static;
        height: auto;
        padding: 0;
        background: none;
        border-top: 0;
        box-shadow: none;
        overflow: visible;
    }
    div.wrapper div.navbar section.navbar div.burger { display: none; }
    div.wrapper div.navbar section.navbar div.nav nav > ul > li > a { padding: 11px 14px; }
    .js div.wrapper div.navbar section.navbar div.nav { display: block; }
    div.wrapper div.navbar section.navbar div.nav nav > ul { flex-direction: row; gap: 2px; }
    div.wrapper div.navbar section.navbar div.nav ul.submenu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 220px;
        max-height: 70vh;
        overflow-y: auto;
        padding: 8px;
        background: var(--czern-2);
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: var(--r-srednie);
        box-shadow: var(--cien-3);
        z-index: 70;
    }
}

/* ------------------------------------------------------------------ */
/* 6. STRONA GLOWNA - HERO                                             */
/* ------------------------------------------------------------------ */

div.wrapper div.header section.header {
    max-width: none;
    padding: 0;
}

div.wrapper div.header section.header div.slider {
    position: relative;
    min-height: min(78vh, 680px);
    display: flex;
    align-items: center;
    /* Zdjecia podstawia css/tla.css - tam jest tez animacja `bgu`,
       ktora przewija cztery ujecia. */
    background-size: cover;
    background-position: center;
    animation: bgu 32s infinite;
}

div.wrapper div.header section.header div.slider::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(8, 12, 15, .88) 0%, rgba(8, 12, 15, .55) 55%, rgba(8, 12, 15, .25) 100%),
        linear-gradient(180deg, rgba(8, 12, 15, .35) 0%, rgba(8, 12, 15, .75) 100%);
}

div.wrapper div.header section.header div.slider div.slide {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--maxWidth);
    margin: 0 auto;
    padding: 60px 20px;
}

/* Widoczny jest tylko pierwszy slajd - napisy pozostalych sa w kodzie
   dla wyszukiwarek, ale nie nakladaja sie na siebie. */
div.wrapper div.header section.header div.slider div.slide:not(:first-child) { display: none; }

div.wrapper div.header section.header div.slider div.slide div.txt { max-width: 720px; }

div.wrapper div.header section.header div.slider div.slide h1 {
    margin-bottom: 22px;
    color: #fff;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .5);
}

div.wrapper div.header section.header div.slider div.slide a { text-decoration: none; }

div.wrapper div.header section.header div.slider div.slide button {
    padding: 15px 30px;
    font-size: 16px;
}

/* Pasek z liczbami pod naglowkiem - buduje go szablon strony glownej. */
div.hero-fakty {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 34px;
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .18);
}

div.hero-fakty div {
    color: var(--tekst-jasny-2);
    font-size: 14px;
}

div.hero-fakty strong {
    display: block;
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
}

/* ------------------------------------------------------------------ */
/* 7. WSPOLNE NAGLOWKI SEKCJI                                          */
/* ------------------------------------------------------------------ */

.sekcja { padding: 64px 0; }
.sekcja-jasna { background: var(--tlo-2); }
.sekcja-ciemna { background: var(--czern); color: var(--tekst-jasny); }
.sekcja-ciemna h2, .sekcja-ciemna h3, .sekcja-ciemna h4 { color: #fff; }
.sekcja-ciemna p { color: var(--tekst-jasny-2); }

.naglowek-sekcji { margin-bottom: 30px; }

.naglowek-sekcji span {
    display: block;
    margin-bottom: 8px;
    color: var(--niebieski);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.naglowek-sekcji h2 { text-transform: uppercase; }

.naglowek-sekcji p {
    max-width: 760px;
    margin-top: 12px;
    color: var(--tekst-2);
}

/* ------------------------------------------------------------------ */
/* 8. KAFELKI KATEGORII                                                */
/* ------------------------------------------------------------------ */

/* Dolny odstep, zeby ciemny pas "o firmie" nie dotykal ostatniego
   rzedu kafelkow - bez niego wygladalo to jak sklejone sekcje. */
div.wrapper div.features { padding: 54px 0 60px; }

div.wrapper div.features section.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

div.wrapper div.features section.features div.feature { min-width: 0; }

div.wrapper div.features section.features div.feature a {
    position: relative;
    display: block;
    height: 230px;
    border-radius: var(--r-duze);
    overflow: hidden;
    background: var(--czern-2);
    box-shadow: var(--cien-1);
    transition: transform var(--przejscie), box-shadow var(--przejscie);
}

div.wrapper div.features section.features div.feature a:hover {
    transform: translateY(-4px);
    box-shadow: var(--cien-3);
}

div.wrapper div.features section.features div.feature img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}

div.wrapper div.features section.features div.feature a:hover img { transform: scale(1.07); }

div.wrapper div.features section.features div.feature div.txt {
    position: absolute;
    inset: auto 0 0 0;
    padding: 46px 18px 18px;
    background: linear-gradient(180deg, rgba(8, 12, 15, 0) 0%, rgba(8, 12, 15, .9) 100%);
}

div.wrapper div.features section.features div.feature div.txt h2 {
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
    text-wrap: balance;
}

div.wrapper div.features section.features div.feature div.txt h2::after {
    content: "";
    display: block;
    width: 34px;
    height: 3px;
    margin-top: 10px;
    background: var(--niebieski);
    border-radius: 2px;
    transition: width var(--przejscie);
}

div.wrapper div.features section.features div.feature a:hover div.txt h2::after { width: 64px; }

/* ------------------------------------------------------------------ */
/* 9. O FIRMIE                                                         */
/* ------------------------------------------------------------------ */

div.wrapper div.info { padding: 54px 0; }

div.wrapper div.info section.info h2 {
    margin-bottom: 16px;
    text-transform: uppercase;
}

div.wrapper div.info section.info p {
    max-width: 880px;
    color: var(--tekst-2);
    font-size: 17px;
}

/* ------------------------------------------------------------------ */
/* 10. KAFELEK PRODUKTU                                                */
/*     Uzywany w czterech miejscach: sklep, najnowsze na glownej,      */
/*     wyniki wyszukiwania i produkty pokrewne.                        */
/* ------------------------------------------------------------------ */

div.wrapper div.products,
div.wrapper div.lastproduct section.lastproduct div.products,
div.wrapper div.relevantproducts section.relevantproducts div.products,
div.wrapper div.shoppage section.shoppage div.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 18px;
}

div.wrapper div.products div.product {
    display: flex;
    background: #fff;
    border: 1px solid var(--ramka);
    border-radius: var(--r-duze);
    overflow: hidden;
    box-shadow: var(--cien-1);
    transition: border-color var(--przejscie), box-shadow var(--przejscie), transform var(--przejscie);
}

div.wrapper div.products div.product:hover,
div.wrapper div.products div.product:focus-within {
    border-color: var(--niebieski);
    box-shadow: var(--cien-3);
    transform: translateY(-4px);
}

div.wrapper div.products div.product > a {
    display: flex;
    flex-direction: column;
    width: 100%;
    color: inherit;
}

div.wrapper div.products div.product div.img {
    height: 195px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

div.wrapper div.products div.product div.img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

div.wrapper div.products div.product:hover div.img img { transform: scale(1.05); }

div.wrapper div.products div.product div.txt {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 4px 16px 16px;
    text-align: left;
}

div.wrapper div.products div.product div.txt div.title { flex-grow: 1; }

div.wrapper div.products div.product div.txt div.title h3 {
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}

div.wrapper div.products div.product div.txt div.price {
    margin-top: 10px;
    color: var(--tekst);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
}

div.wrapper div.products div.product div.txt div.price .cena-stara {
    display: inline-block;
    margin-right: 8px;
    color: var(--tekst-3);
    font-size: 15px;
    font-weight: 400;
    text-decoration: line-through;
}

div.wrapper div.products div.product button {
    width: 100%;
    border-radius: 0;
    padding: 13px;
    background: var(--czern-2);
}

div.wrapper div.products div.product:hover button { background: var(--niebieski); }

/* ------------------------------------------------------------------ */
/* 11. NAJNOWSZE PRODUKTY NA GLOWNEJ                                   */
/* ------------------------------------------------------------------ */

div.wrapper div.lastproduct { padding: 64px 0; background: var(--tlo-2); }

@media (min-width: 1100px) {
    div.wrapper div.lastproduct section.lastproduct div.products {
        grid-template-columns: repeat(4, 1fr);
    }
}

div.wrapper div.lastproduct > h2 {
    max-width: var(--maxWidth);
    margin: 0 auto 30px;
    padding: 0 20px;
    text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* 12. PASEK ZAUFANIA (transport / salon)                              */
/* ------------------------------------------------------------------ */

div.wrapper div.transport { background: var(--czern); }

div.wrapper div.transport section.transport {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    max-width: none;
}

div.wrapper div.transport section.transport div.info {
    position: relative;
    min-height: 300px;
    overflow: hidden;
}

div.wrapper div.transport section.transport div.info img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

div.wrapper div.transport section.transport div.info p {
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 0;
    padding: 12px 22px;
    background: var(--czerwony);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    border-top-right-radius: var(--r-srednie);
}

div.wrapper div.transport section.transport div.location {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
    padding: 54px 24px;
    background: var(--niebieski);
    color: #fff;
}

div.wrapper div.transport section.transport div.location .ikona { font-size: 34px; }
div.wrapper div.transport section.transport div.location h4 {
    font-size: 24px;
    text-transform: uppercase;
}
div.wrapper div.transport section.transport div.location p {
    margin: 0;
    max-width: 460px;
    color: rgba(255, 255, 255, .92);
}

@media (min-width: 900px) {
    div.wrapper div.transport section.transport { grid-template-columns: 1fr 1fr; }
    div.wrapper div.transport section.transport div.info { min-height: 380px; }
    div.wrapper div.transport section.transport div.location { padding: 54px 60px; }
}

/* ------------------------------------------------------------------ */
/* 13. MARKI                                                           */
/* ------------------------------------------------------------------ */

div.wrapper div.brands { padding: 46px 0; background: #fff; border-top: 1px solid var(--ramka); }

div.wrapper div.brands section.brands div.brands {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 26px 52px;
}

div.wrapper div.brands section.brands div.brand img {
    max-height: 46px;
    width: auto;
    filter: grayscale(1);
    opacity: .55;
    transition: filter var(--przejscie), opacity var(--przejscie);
}

div.wrapper div.brands section.brands div.brand img:hover {
    filter: none;
    opacity: 1;
}

/* ------------------------------------------------------------------ */
/* 14. BLOK "POMOC" / KONTAKT NA GLOWNEJ                               */
/* ------------------------------------------------------------------ */

div.wrapper div.contact { background: var(--czern); }

div.wrapper div.contact section.contact {
    display: grid;
    grid-template-columns: 1fr;
    max-width: none;
    padding: 0;
}

div.wrapper div.contact section.contact div.img {
    position: relative;
    min-height: 240px;
    background-size: cover;
    background-position: center;
}

div.wrapper div.contact section.contact div.img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 12, 15, .25), rgba(8, 12, 15, .7));
}

div.wrapper div.contact section.contact div.img div.pomoc {
    position: absolute;
    z-index: 1;
    top: 18px;
    left: 18px;
    padding: 7px 16px;
    background: var(--niebieski);
    color: #fff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

div.wrapper div.contact section.contact div.info {
    display: flex;
    align-items: center;
    padding: 54px 24px;
}

div.wrapper div.contact section.contact div.info div.txt { max-width: 560px; }

div.wrapper div.contact section.contact div.info h4 {
    margin-bottom: 10px;
    color: #fff;
    font-size: 28px;
    text-transform: uppercase;
}

div.wrapper div.contact section.contact div.info p {
    margin-bottom: 22px;
    color: var(--tekst-jasny-2);
    font-size: 17px;
}

div.wrapper div.contact section.contact div.info a { text-decoration: none; }

@media (min-width: 900px) {
    div.wrapper div.contact section.contact { grid-template-columns: 1fr 1fr; }
    div.wrapper div.contact section.contact div.img { min-height: 340px; }
    div.wrapper div.contact section.contact div.info { padding: 54px 60px; }
}

/* ------------------------------------------------------------------ */
/* 15. MAPA                                                            */
/* ------------------------------------------------------------------ */

div.wrapper div.iframe { line-height: 0; }
div.wrapper div.iframe iframe {
    width: 100%;
    height: 380px;
    border: 0;
    filter: grayscale(.25);
}

/* ------------------------------------------------------------------ */
/* 16. NAGLOWEK PODSTRONY                                              */
/* ------------------------------------------------------------------ */

main.page div.header {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 300px;
    background-size: cover;
    background-position: center;
}

main.page div.header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 12, 15, .55), rgba(8, 12, 15, .82));
}

main.page div.header div.txt {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--maxWidth);
    margin: 0 auto;
    padding: 40px 20px;
}

main.page div.header div.txt h1 {
    color: #fff;
    font-size: clamp(28px, 4.2vw, 46px);
    text-transform: uppercase;
    text-wrap: balance;
}

main.page div.header div.txt h1 sup { font-size: .5em; }

/* ------------------------------------------------------------------ */
/* 17. OKRUSZKI                                                        */
/* ------------------------------------------------------------------ */

div.breadcrumbs { border-bottom: 1px solid var(--ramka); background: #fff; }

div.breadcrumbs section.breadcrumbs { padding-top: 14px; padding-bottom: 14px; }

div.breadcrumbs section.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--tekst-3);
}

div.breadcrumbs section.breadcrumbs ol li { display: flex; align-items: center; gap: 8px; }
div.breadcrumbs section.breadcrumbs ol li a { display: flex; align-items: center; gap: 6px; font-weight: 600; }
div.breadcrumbs section.breadcrumbs ol li:last-child { color: var(--tekst-2); }

/* ------------------------------------------------------------------ */
/* 18. SKLEP                                                           */
/* ------------------------------------------------------------------ */

main.shoppage div.shoppage { background: var(--tlo-2); }

main.shoppage div.shoppage section.shoppage {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 34px;
    padding-bottom: 54px;
    align-items: start;
}

/* --- panel filtrow ----------------------------------------------------- */

main.shoppage div.shoppage section.shoppage div.filtry {
    background: #fff;
    border: 1px solid var(--ramka);
    border-radius: var(--r-duze);
    box-shadow: var(--cien-1);
    overflow: hidden;
}

main.shoppage div.shoppage section.shoppage div.filtry form.filtry-forma {
    display: flex;
    flex-direction: column;
    padding: 6px 18px 18px;
}

main.shoppage div.shoppage section.shoppage div.filtry h3 {
    margin: 18px 0 10px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--tekst-3);
}

main.shoppage div.shoppage section.shoppage div.filtry div.search { position: relative; }
main.shoppage div.shoppage section.shoppage div.filtry div.search input { padding-left: 40px; }
main.shoppage div.shoppage section.shoppage div.filtry div.search .ikona {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tekst-3);
    font-size: 15px;
    pointer-events: none;
}

/* --- pigulki filtrow ---------------------------------------------------- */

main.shoppage div.shoppage section.shoppage div.filtry div.checkbox {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

main.shoppage div.shoppage section.shoppage div.filtry div.checkbox.categories {
    flex-direction: column;
    align-items: stretch;
}

main.shoppage div.shoppage section.shoppage div.filtry div.checkbox div.single a {
    display: block;
    padding: 7px 13px;
    border: 1px solid var(--ramka);
    border-radius: 999px;
    background: #fff;
    color: var(--tekst);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    transition: all var(--przejscie);
}

main.shoppage div.shoppage section.shoppage div.filtry div.checkbox.categories div.single a { text-align: left; }

main.shoppage div.shoppage section.shoppage div.filtry div.checkbox div.single a:hover {
    border-color: var(--niebieski);
    color: var(--niebieski);
}

main.shoppage div.shoppage section.shoppage div.filtry div.checkbox div.single a.wybrana {
    background: var(--niebieski);
    border-color: var(--niebieski);
    color: #fff;
}

main.shoppage div.shoppage section.shoppage div.filtry p.grupa-filtra {
    margin: 12px 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--tekst-3);
}

/* --- suwak ceny ---------------------------------------------------------- */

main.shoppage div.shoppage section.shoppage div.filtry div.price { margin-bottom: 4px; }

main.shoppage div.shoppage section.shoppage div.filtry div.price p {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--tekst-2);
}

main.shoppage div.shoppage section.shoppage div.filtry div.price p input#amount {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--niebieski) !important;
    font-size: 15px;
    font-weight: 800 !important;
}

#slider-range { display: none; position: relative; height: 20px; margin: 0 8px 4px; }
.js #slider-range { display: block; }

#slider-range .tor {
    position: absolute;
    top: 8px; left: 0; right: 0;
    height: 4px;
    border-radius: 2px;
    background: var(--ramka);
}
#slider-range .tor .wybrany {
    position: absolute;
    top: 0; bottom: 0;
    background: var(--niebieski);
    border-radius: 2px;
}
#slider-range .uchwyt {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 20px;
    margin: 0; padding: 0;
    border: 0; background: none;
    appearance: none; -webkit-appearance: none;
    pointer-events: none;
}
#slider-range .uchwyt:focus { outline: none; box-shadow: none; }
#slider-range .uchwyt::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--niebieski);
    box-shadow: var(--cien-1);
    cursor: pointer;
}
#slider-range .uchwyt::-moz-range-thumb {
    pointer-events: auto;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--niebieski);
    cursor: pointer;
}
#slider-range .uchwyt:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(10, 155, 217, .3); }
#slider-range .uchwyt:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(10, 155, 217, .3); }

main.shoppage div.shoppage section.shoppage div.filtry div.price div.liczbowo {
    display: flex;
    align-items: center;
    gap: 8px;
}
main.shoppage div.shoppage section.shoppage div.filtry div.price div.liczbowo label { font-size: 14px; color: var(--tekst-2); }
.js main.shoppage div.shoppage section.shoppage div.filtry div.price div.liczbowo { display: none; }

main.shoppage div.shoppage section.shoppage div.filtry button.filtruj { margin-top: 22px; width: 100%; }

main.shoppage div.shoppage section.shoppage div.filtry a.wyczysc {
    display: block;
    margin-top: 10px;
    text-align: center;
    font-size: 14px;
    color: var(--tekst-2);
}

/* --- przycisk filtrow na telefonie -------------------------------------- */

.przelacz-filtry { display: none; }

.js .przelacz-filtry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px 18px;
    border: 0;
    background: #fff;
    color: var(--tekst);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.js .przelacz-filtry .ikona { transition: transform var(--przejscie); }
.js .przelacz-filtry[aria-expanded="true"] .ikona { transform: rotate(180deg); }
.js form.filtry-forma .zwijane { display: none; }
.js form.filtry-forma.rozwiniete .zwijane { display: block; }

/* --- lista produktow ----------------------------------------------------- */

main.shoppage div.shoppage section.shoppage div.shop p.results {
    margin: 0 0 16px;
    color: var(--tekst-2);
    font-size: 15px;
}

/* --- stronicowanie -------------------------------------------------------
   Uwaga na znacznik: to <nav class="pagination">, biezaca strona to
   <span class="aktywna">, a wielokropek <span class="przerwa">.
   Poprzednia wersja tych regul celowala w `div.pagination` i nie lapala
   sie na nic - numery szly golym tekstem. */

/* `min-width: 0` jest tu konieczne: element siatki domyslnie nie da sie
   scisnac ponizej swojej tresci, wiec rzad numerow rozpychal cala strone
   i na telefonie pojawialo sie poziome przewijanie calego serwisu. */
main.shoppage div.shoppage section.shoppage div.shop { min-width: 0; }

nav.pagination {
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 38px;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--ramka);
    border-radius: var(--r-duze);
    box-shadow: var(--cien-1);
}

nav.pagination a,
nav.pagination span.aktywna {
    min-width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    border: 1px solid var(--ramka);
    border-radius: var(--r-male);
    background: #fff;
    color: var(--tekst);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: border-color var(--przejscie), background-color var(--przejscie), color var(--przejscie);
}

nav.pagination a:hover {
    border-color: var(--niebieski);
    background: rgba(10, 155, 217, .07);
    color: var(--niebieski);
}

nav.pagination span.aktywna {
    background: var(--niebieski);
    border-color: var(--niebieski);
    color: #fff;
    box-shadow: 0 4px 12px rgba(10, 155, 217, .32);
}

/* "Poprzednia" i "Nastepna" - szersze, ciemne, wyraznie odsuniete
   od numerow. Na telefonie zostaja same strzalki. */
nav.pagination a[rel="prev"],
nav.pagination a[rel="next"] {
    background: var(--czern-2);
    border-color: var(--czern-2);
    color: #fff;
}

nav.pagination a[rel="prev"]:hover,
nav.pagination a[rel="next"]:hover {
    background: var(--niebieski);
    border-color: var(--niebieski);
    color: #fff;
}

nav.pagination a[rel="prev"] { margin-right: auto; }
nav.pagination a[rel="next"] { margin-left: auto; }

nav.pagination span.przerwa {
    min-width: 22px;
    text-align: center;
    color: var(--tekst-3);
    font-weight: 700;
    letter-spacing: 1px;
}

@media (max-width: 560px) {
    /* Siedem numerow i dwie strzalki nie mieszcza sie w jednym rzedzie
       na telefonie, a przy zawijaniu ostatni numer laduje sam w drugiej
       linii. Zamiast tego jeden rzad przesuwany palcem - bez widocznego
       paska przewijania. */
    nav.pagination {
        gap: 6px;
        padding: 14px;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
    }
    nav.pagination::-webkit-scrollbar { display: none; }
    nav.pagination a,
    nav.pagination span.aktywna,
    nav.pagination span.przerwa { flex: 0 0 auto; }
    nav.pagination a,
    nav.pagination span.aktywna { min-width: 40px; height: 40px; padding: 0 10px; font-size: 14px; }
    /* Same strzalki - pelne napisy nie mieszcza sie w jednym rzedzie. */
    nav.pagination a[rel="prev"] { font-size: 0; padding: 0; min-width: 40px; }
    nav.pagination a[rel="next"] { font-size: 0; padding: 0; min-width: 40px; }
    nav.pagination a[rel="prev"]::before { content: "\00ab"; font-size: 18px; }
    nav.pagination a[rel="next"]::before { content: "\00bb"; font-size: 18px; }
    /* Bez rozpychania na boki - przy zawijaniu strzalki laduja wtedy
       w dwoch roznych rzedach i wyglada to na przypadek. */
    nav.pagination a[rel="prev"],
    nav.pagination a[rel="next"] { margin: 0; }
}

@media (min-width: 1024px) {
    main.shoppage div.shoppage section.shoppage {
        grid-template-columns: 290px 1fr;
        gap: 30px;
    }
    .js .przelacz-filtry { display: none; }
    .js form.filtry-forma .zwijane { display: block; }
    main.shoppage div.shoppage section.shoppage div.filtry {
        position: sticky;
        top: 96px;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }
}

/* ------------------------------------------------------------------ */
/* 19. STRONA PRODUKTU                                                 */
/* ------------------------------------------------------------------ */

main.productpage div.productinfo {
    max-width: var(--maxWidth);
    margin: 0 auto;
    padding: 34px 20px 10px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
}

main.productpage div.productinfo div.galery div.imgbig {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--ramka);
    border-radius: var(--r-duze);
    box-shadow: var(--cien-1);
}

main.productpage div.productinfo div.galery div.imgbig a { display: block; width: 100%; }
main.productpage div.productinfo div.galery div.imgbig img {
    width: 100%;
    max-height: 460px;
    object-fit: contain;
}

main.productpage div.productinfo div.galery div.images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

main.productpage div.productinfo div.galery div.images div.img {
    border: 1px solid var(--ramka);
    border-radius: var(--r-male);
    overflow: hidden;
    background: #fff;
    transition: border-color var(--przejscie), transform var(--przejscie);
}
main.productpage div.productinfo div.galery div.images div.img:hover {
    border-color: var(--niebieski);
    transform: translateY(-2px);
}
main.productpage div.productinfo div.galery div.images div.img img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

main.productpage div.productinfo div.informacje h2 {
    margin-bottom: 6px;
    font-size: clamp(24px, 3vw, 32px);
}

main.productpage div.productinfo div.informacje div.cena {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 15px;
    color: var(--tekst-2);
}

/* W znacznikach napis "Juz od:" siedzi w <span>, a sama kwota jest
   golym tekstem obok niego - wiec to blok dostaje wielkosc ceny,
   a <span> wraca do wielkosci podpisu. */
main.productpage div.productinfo div.informacje div.cena {
    color: var(--tekst);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.02em;
}

main.productpage div.productinfo div.informacje div.cena > span {
    color: var(--tekst-2);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
}

main.productpage div.productinfo div.informacje div.cena s.cena-stara {
    color: var(--tekst-3);
    font-size: 18px;
    font-weight: 400;
}

main.productpage div.productinfo div.informacje div.dostawa span,
main.productpage div.productinfo div.informacje div.platnosc span {
    font-weight: 700;
    color: var(--tekst);
}

main.productpage div.productinfo div.informacje div.dostawa,
main.productpage div.productinfo div.informacje div.platnosc {
    padding: 13px 16px;
    margin-bottom: 12px;
    border-radius: var(--r-srednie);
    font-size: 15px;
}

main.productpage div.productinfo div.informacje div.dostawa {
    background: rgba(10, 155, 217, .09);
    border: 1px solid rgba(10, 155, 217, .25);
}

main.productpage div.productinfo div.informacje div.platnosc {
    background: var(--tlo-2);
    border: 1px solid var(--ramka);
}

main.productpage div.productinfo div.informacje div.opis {
    margin: 18px 0 24px;
    color: var(--tekst-2);
}
main.productpage div.productinfo div.informacje div.opis p { text-align: left; }

main.productpage div.productinfo div.informacje div.buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

main.productpage div.productinfo div.informacje div.buttons a[href^="tel:"] {
    background: var(--czern-2);
}
main.productpage div.productinfo div.informacje div.buttons a[href^="tel:"]:hover {
    background: var(--czern);
}

@media (min-width: 900px) {
    main.productpage div.productinfo { grid-template-columns: 1.05fr 1fr; gap: 40px; }
    main.productpage div.productinfo div.informacje div.buttons { grid-template-columns: 1fr 1fr; }
}

/* --- dane techniczne ------------------------------------------------------ */

div.additionalinfo { padding: 20px 0 54px; }

div.additionalinfo section.additionalinfo h2 {
    margin-bottom: 18px;
    font-size: 22px;
    text-transform: uppercase;
}

div.additionalinfo section.additionalinfo table {
    width: 100%;
    border: 1px solid var(--ramka);
    border-radius: var(--r-duze);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: #fff;
}

div.additionalinfo section.additionalinfo table thead tr {
    background: var(--czern-2);
    color: #fff;
}

div.additionalinfo section.additionalinfo table th,
div.additionalinfo section.additionalinfo table td {
    padding: 12px 18px;
    text-align: left;
    font-size: 15px;
    vertical-align: top;
}

div.additionalinfo section.additionalinfo table th {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

div.additionalinfo section.additionalinfo table tbody tr:nth-child(even) { background: var(--tlo-2); }

div.additionalinfo section.additionalinfo table tbody td:first-child {
    width: 38%;
    font-weight: 700;
    color: var(--tekst);
}
div.additionalinfo section.additionalinfo table tbody td:last-child { color: var(--tekst-2); }

/* --- produkty pokrewne ----------------------------------------------------- */

div.wrapper div.relevantproducts { padding: 0 0 54px; background: var(--tlo-2); }
div.wrapper div.relevantproducts section.relevantproducts { padding-top: 54px; }
div.wrapper div.relevantproducts section.relevantproducts h2 {
    margin: 0 0 24px;
    text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* 20. GALERIA                                                         */
/* ------------------------------------------------------------------ */

main.galerypage div.data { max-width: var(--maxWidth); margin: 0 auto; padding: 34px 20px 0; }
main.galerypage div.data h2 { font-size: 22px; }

main.galerypage div.galery {
    max-width: var(--maxWidth);
    margin: 0 auto;
    padding: 28px 20px 60px;
}

main.galerypage div.galery div.images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
}

main.galerypage div.galery div.images div.img {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-srednie);
    overflow: hidden;
    background: var(--czern-2);
    box-shadow: var(--cien-1);
    transition: transform var(--przejscie), box-shadow var(--przejscie);
}

main.galerypage div.galery div.images div.img:hover {
    transform: translateY(-3px);
    box-shadow: var(--cien-3);
}

main.galerypage div.galery div.images div.img a { display: block; height: 100%; }

main.galerypage div.galery div.images div.img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

main.galerypage div.galery div.images div.img:hover img { transform: scale(1.06); }

/* ------------------------------------------------------------------ */
/* 21. KONTAKT                                                         */
/* ------------------------------------------------------------------ */

main.contactpage div.data { background: var(--tlo-2); }

main.contactpage div.data section.data {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 40px;
    padding-bottom: 54px;
    align-items: start;
}

main.contactpage div.data section.data > h2 {
    grid-column: 1 / -1;
    text-transform: uppercase;
}

main.contactpage div.data section.data div.dane {
    padding: 26px;
    background: #fff;
    border: 1px solid var(--ramka);
    border-radius: var(--r-duze);
    box-shadow: var(--cien-1);
}

main.contactpage div.data section.data div.dane div.col + div.col { margin-top: 22px; }
main.contactpage div.data section.data div.dane h3 {
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--tekst-3);
}
main.contactpage div.data section.data div.dane img { width: 130px; margin-bottom: 12px; }
main.contactpage div.data section.data div.dane a { display: block; font-weight: 600; }

main.contactpage div.data section.data form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px;
    background: var(--czern);
    border-radius: var(--r-duze);
    color: var(--tekst-jasny);
}

main.contactpage div.data section.data form label { font-size: 14px; font-weight: 600; }
main.contactpage div.data section.data form label.tylko-dla-czytnika { position: absolute; }
main.contactpage div.data section.data form button { margin-top: 4px; }

main.contactpage div.data section.data form p.confirmation,
main.contactpage div.data section.data form label.confirmation {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 12px 15px;
    border-radius: var(--r-srednie);
    background: rgba(30, 122, 69, .16);
    border: 1px solid rgba(60, 190, 120, .45);
    color: #9be8bb;
    font-weight: 600;
}

main.contactpage div.data section.data form p.confirmation.blad,
main.contactpage div.data section.data form label.confirmation.blad {
    background: rgba(224, 46, 40, .15);
    border-color: rgba(224, 46, 40, .45);
    color: #ffb4b0;
}

main.contactpage div.iframe iframe { width: 100%; height: 400px; border: 0; }

@media (min-width: 900px) {
    main.contactpage div.data section.data { grid-template-columns: 1fr 1.1fr; gap: 30px; }
}

/* ------------------------------------------------------------------ */
/* 22. OKNO ZAPYTANIA O PRODUKT                                        */
/* ------------------------------------------------------------------ */

div.modal section.modal { display: none; }

div.modal:has(section.modal.active),
div.modal:has(section.modal:target) {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(8, 12, 15, .6);
    backdrop-filter: blur(3px);
}

div.modal section.modal.active,
div.modal section.modal:target {
    display: grid;
    position: fixed;
    z-index: 999;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 28px));
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 26px 24px 24px;
    background: #fff;
    border-radius: var(--r-duze);
    box-shadow: var(--cien-3);
    grid-template-columns: 96px 1fr;
    gap: 8px 16px;
    align-items: start;
}

div.modal section.modal h3 {
    grid-column: 1 / -1;
    padding-right: 36px;
    font-size: 19px;
}

div.modal section.modal picture {
    grid-column: 1;
    display: block;
    border: 1px solid var(--ramka);
    border-radius: var(--r-male);
    overflow: hidden;
    background: #fff;
}
div.modal section.modal picture img {
    display: block;
    width: 96px;
    height: 96px;
    object-fit: contain;
}

div.modal section.modal p {
    grid-column: 2;
    align-self: center;
    margin: 0;
    font-size: 14px;
    color: var(--tekst-2);
}
div.modal section.modal p span {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: var(--tekst);
}

div.modal section.modal p.confirmation {
    grid-column: 1 / -1;
    padding: 12px 15px;
    border-radius: var(--r-srednie);
    background: rgba(30, 122, 69, .1);
    border: 1px solid rgba(30, 122, 69, .3);
    color: var(--zielony);
    font-weight: 600;
}

div.modal section.modal form {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 14px;
}

/* Pulapka na automaty - pole, ktorego czlowiek nie widzi. Regula musi
   dzialac na calym serwisie, a nie tylko w oknie zapytania: na stronie
   kontaktu pole bylo widoczne razem z podpisem "Nie wypelniaj tego pola". */
.pulapka {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

div.modal section.modal button.close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--tlo-2);
    color: var(--tekst-2);
    font-size: 15px;
    cursor: pointer;
    transition: background-color var(--przejscie), color var(--przejscie);
}
div.modal section.modal button.close:hover { background: var(--czern-2); color: #fff; }

/* Rozmycie tla pod otwartym oknem - okno lezy poza wrapperem. */
div.wrapper.modal-open { filter: blur(2px); }

/* ------------------------------------------------------------------ */
/* 23. POWIEKSZENIE ZDJECIA                                            */
/* ------------------------------------------------------------------ */

.powiekszenie {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    background: rgba(8, 12, 15, .92);
}

.powiekszenie img {
    max-width: 100%;
    max-height: 82vh;
    border-radius: var(--r-srednie);
    object-fit: contain;
}

.powiekszenie p { margin: 0; color: var(--tekst-jasny-2); font-size: 15px; text-align: center; }

/* UWAGA: w powiekszeniu sa TRZY przyciski - zamkniecie i dwie strzalki.
   Wspolna regula z `top: 18px; right: 18px` ustawiala wszystkie trzy
   w tym samym rogu, jeden na drugim. Krzyzyk byl pod strzalka "dalej",
   wiec klikniecie go przewijalo zdjecie zamiast zamknac okno. Kazdy
   przycisk ma teraz swoje miejsce. */

.powiekszenie button {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--przejscie);
}

.powiekszenie button:hover { background: rgba(255, 255, 255, .28); }

.powiekszenie button.zamknij {
    top: 18px;
    right: 18px;
    font-size: 30px;
}

.powiekszenie button.poprzednie,
.powiekszenie button.nastepne {
    top: 50%;
    transform: translateY(-50%);
    width: 54px;
    height: 54px;
    font-size: 34px;
}

.powiekszenie button.poprzednie { left: 18px; }
.powiekszenie button.nastepne  { right: 18px; }

.powiekszenie p.licznik {
    color: var(--tekst-3);
    font-size: 13px;
    letter-spacing: 1px;
}

.powiekszenie .ikona { height: 20px; }

@media (max-width: 640px) {
    .powiekszenie button.poprzednie,
    .powiekszenie button.nastepne {
        top: auto;
        bottom: 18px;
        transform: none;
        width: 48px;
        height: 48px;
    }
    .powiekszenie img { max-height: 64vh; }
}

/* ------------------------------------------------------------------ */
/* 24. STOPKA                                                          */
/* ------------------------------------------------------------------ */

div.wrapper div.footer { background: var(--czern); color: var(--tekst-jasny-2); }

div.wrapper div.footer footer.footer {
    max-width: var(--maxWidth);
    margin: 0 auto;
    padding: 54px 20px 34px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 34px;
}

div.wrapper div.footer footer.footer div.col { display: flex; flex-direction: column; }

div.wrapper div.footer footer.footer div.col h4 {
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

div.wrapper div.footer footer.footer div.col img { width: 118px; margin-bottom: 16px; }

div.wrapper div.footer footer.footer div.col a {
    color: var(--tekst-jasny-2);
    padding: 3px 0;
    transition: color var(--przejscie);
}
div.wrapper div.footer footer.footer div.col a:hover { color: var(--niebieski-jasny); }

div.wrapper div.footer footer.footer div.col p { color: var(--tekst-jasny-2); }

div.wrapper div.footer footer.footer div.col button { margin-top: 14px; align-self: flex-start; }

div.wrapper div.footer footer.footer div.col iframe {
    width: 100%;
    height: 190px;
    border: 0;
    border-radius: var(--r-srednie);
}

div.wrapper div.footer footer.footer div.col div.socials {
    display: flex;
    gap: 16px;
    margin-top: 16px;
}
div.wrapper div.footer footer.footer div.col div.socials a {
    display: flex;
    font-size: 26px;
    color: #fff;
    transition: color var(--przejscie), transform var(--przejscie);
}
div.wrapper div.footer footer.footer div.col div.socials a:hover {
    color: var(--niebieski-jasny);
    transform: translateY(-2px);
}

div.wrapper div.footer .realization-container {
    max-width: var(--maxWidth);
    margin: 0 auto;
    padding: 0 20px 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}
div.wrapper div.footer .realization-container p { margin: 0; font-size: 13px; color: var(--tekst-3); }
div.wrapper div.footer .realization-container a { display: inline-flex; align-items: center; }
div.wrapper div.footer .realization-container svg { width: 84px; height: auto; }

div.wrapper div.copyright {
    padding: 16px 20px;
    background: #080c0f;
    border-top: 1px solid rgba(255, 255, 255, .07);
    text-align: center;
    color: var(--tekst-3);
    font-size: 14px;
}
div.wrapper div.copyright p { margin: 0; }

@media (min-width: 768px) {
    div.wrapper div.footer footer.footer { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}

/* ------------------------------------------------------------------ */
/* 25. PRZYCISK "DO GORY"                                              */
/* ------------------------------------------------------------------ */

button.Totop {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 90;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--czern-2);
    color: #fff;
    opacity: 0;
    pointer-events: none;
    box-shadow: var(--cien-3);
    cursor: pointer;
    transition: opacity var(--przejscie), background-color var(--przejscie);
}
button.Totop.active { opacity: 1; pointer-events: auto; }
button.Totop:hover { background: var(--niebieski); }

/* ------------------------------------------------------------------ */
/* 26. STRONA 404 I WYNIKI WYSZUKIWANIA                                */
/* ------------------------------------------------------------------ */

main.page div.data {
    max-width: var(--maxWidth);
    margin: 0 auto;
    padding: 40px 20px 60px;
}
main.page div.data h2 { margin-bottom: 12px; }
main.page div.data p { color: var(--tekst-2); }

/* ------------------------------------------------------------------ */
/* 27. MNIEJ RUCHU                                                     */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* Dane firmy na stronie kontaktu - wiersze adresu stoja ciasniej,
   a telefon i e-mail nie lamia sie po etykiecie. */
main.contactpage div.data section.data div.dane p { margin: 0 0 2px; }
main.contactpage div.data section.data div.dane p a { display: inline; }
main.contactpage div.data section.data div.dane div.col + div.col { margin-top: 20px; }

/* Duze przyciski wezwania do dzialania - w bazie napisy sa zapisane
   mala litera, tak jak na produkcji, gdzie arkusz robil z nich wersaliki. */
div.wrapper div.header section.header div.slider div.slide button,
div.wrapper div.contact section.contact div.info button {
    text-transform: uppercase;
    letter-spacing: .6px;
}

/* Panel filtrow przyklejony z boku: przy dlugiej liscie pojemnosci
   ostatni rzad pigulek ucinal sie przy dolnej krawedzi. Dokladamy
   odstep na dole i weszy, mniej rzucajacy sie w oczy pasek przewijania. */
@media (min-width: 1024px) {
    main.shoppage div.shoppage section.shoppage div.filtry {
        padding-bottom: 6px;
        scrollbar-width: thin;
        scrollbar-color: var(--ramka) transparent;
    }
    main.shoppage div.shoppage section.shoppage div.filtry::-webkit-scrollbar { width: 8px; }
    main.shoppage div.shoppage section.shoppage div.filtry::-webkit-scrollbar-thumb {
        background: var(--ramka);
        border-radius: 4px;
    }
}

/* ==================================================================== */
/* 28. POPRAWKI PO PRZEGLADZIE                                          */
/* ==================================================================== */

/* --- 28a. slajder: napisy przelaczaja sie razem z tlem ----------------
   css/tla.css przewija cztery zdjecia animacja `bgu` trwajaca 32 s.
   Napisy dostaja te sama dlugosc cyklu i przesuniecie co 8 s, wiec
   tekst zmienia sie dokladnie wtedy, co zdjecie pod nim.
   Wszystkie slajdy leza na sobie - pierwszy wyznacza wysokosc. */

div.wrapper div.header section.header div.slider div.slide:not(:first-child) {
    display: block;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
}

div.wrapper div.header section.header div.slider div.slide {
    display: flex;
    align-items: center;
    opacity: 0;
    animation: slajd-tekst 32s infinite;
}

div.wrapper div.header section.header div.slider div.slide:nth-child(1) { animation-delay: 0s; }
div.wrapper div.header section.header div.slider div.slide:nth-child(2) { animation-delay: 8s; }
div.wrapper div.header section.header div.slider div.slide:nth-child(3) { animation-delay: 16s; }
div.wrapper div.header section.header div.slider div.slide:nth-child(4) { animation-delay: 24s; }

@keyframes slajd-tekst {
      0% { opacity: 0; transform: translateY(14px); }
      3% { opacity: 1; transform: translateY(0); }
     22% { opacity: 1; transform: translateY(0); }
     25% { opacity: 0; transform: translateY(-14px); }
    100% { opacity: 0; transform: translateY(-14px); }
}

/* Bez JavaScriptu i przy wylaczonych animacjach widac pierwszy slajd. */
@media (prefers-reduced-motion: reduce) {
    div.wrapper div.header section.header div.slider div.slide { animation: none; opacity: 0; }
    div.wrapper div.header section.header div.slider div.slide:first-child { opacity: 1; }
    div.wrapper div.header section.header div.slider div.slide:not(:first-child) { display: none; }
}

/* Kropki pokazujace, ktory slajd leci - buduje je js/serwis.js. */
div.slajd-kropki {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    display: flex;
    gap: 9px;
}

div.slajd-kropki span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
    animation: kropka 32s infinite;
}
div.slajd-kropki span:nth-child(1) { animation-delay: 0s; }
div.slajd-kropki span:nth-child(2) { animation-delay: 8s; }
div.slajd-kropki span:nth-child(3) { animation-delay: 16s; }
div.slajd-kropki span:nth-child(4) { animation-delay: 24s; }

@keyframes kropka {
      0% { background: #fff; width: 26px; border-radius: 5px; }
     24% { background: #fff; width: 26px; border-radius: 5px; }
     25% { background: rgba(255, 255, 255, .35); width: 9px; border-radius: 50%; }
    100% { background: rgba(255, 255, 255, .35); width: 9px; border-radius: 50%; }
}

/* --- 28b. nazwa podstrony na srodku ----------------------------------- */

main.page div.header div.txt { text-align: center; }
main.page div.header div.txt h1 { margin: 0 auto; max-width: 20ch; }

/* --- 28c. blok "o firmie" ---------------------------------------------

   Trzy podejscia temu byl to wysrodkowany, justowany akapit wciśniety
   w pas przez srodek bialej strony. Potem biala karta z liczbami na
   bialym tle - prawie jej nie bylo widac, a po prawej zostawalo pol
   ekranu pustki.

   Teraz: ciemny pas na cala szerokosc, tak jak pasek menu i kafelki
   nad nim. Po lewej naglowek i dwa wyjscia dalej (telefon, oferta),
   po prawej tekst w dwoch kolumnach, na dole pasek liczb przez cala
   szerokosc. Zadnego justowania i zadnego przenoszenia z dywizem -
   po polsku wychodzilo z tego "naj-szybciej" i "pod-powiemy".
   --------------------------------------------------------------------- */

div.wrapper div.info {
    position: relative;
    padding: 86px 0;
    background:
        radial-gradient(900px 420px at 12% 0%, rgba(10, 155, 217, .20), transparent 65%),
        radial-gradient(700px 400px at 92% 100%, rgba(10, 155, 217, .10), transparent 60%),
        linear-gradient(160deg, #141b22 0%, #0b1016 100%);
    color: var(--tekst-jasny, #e7edf3);
}

div.wrapper div.info section.info {
    display: grid;
    gap: 36px;
    text-align: left;
}

div.wrapper div.info section.info h2 {
    margin: 0;
    max-width: 22ch;
    color: #fff;
    text-wrap: balance;
}

div.wrapper div.info section.info h2::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    margin: 22px 0 0;
    background: var(--niebieski);
    border-radius: 2px;
}

/* --- wyjscia dalej ---------------------------------------------------- */
.o-nas-akcje {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.o-nas-akcje .przycisk { white-space: nowrap; }

.przycisk-obrys,
.o-nas-akcje .przycisk-obrys {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .34);
    color: #fff;
}

.przycisk-obrys:hover,
.o-nas-akcje .przycisk-obrys:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .6);
    color: #fff;
}

/* --- tekst ------------------------------------------------------------ */
div.wrapper div.info section.info p {
    margin: 0 0 20px;
    font-size: 16.5px;
    line-height: 1.8;
    color: rgba(231, 237, 243, .78);
    text-align: left;
    text-align-last: auto;
    hyphens: manual;
}

div.wrapper div.info section.info .o-nas-tresc p:first-child {
    font-size: 19px;
    line-height: 1.7;
    color: #fff;
}

div.wrapper div.info section.info p:last-child { margin-bottom: 0; }

/* --- pasek liczb ------------------------------------------------------ */
.o-nas-fakty {
    list-style: none;
    margin: 14px 0 0;
    padding: 36px 0 0;
    display: grid;
    gap: 26px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.o-nas-fakty li {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.o-nas-fakty strong {
    font-size: 58px;
    line-height: .95;
    font-weight: 800;
    font-variant-numeric: tabular-nums;   /* licznik nie skacze na szerokosc */
    color: #fff;
}

.o-nas-fakty span {
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: .02em;
    color: rgba(231, 237, 243, .6);
}

@media (min-width: 900px) {
    div.wrapper div.info section.info {
        grid-template-columns: minmax(290px, 0.78fr) minmax(0, 1.22fr);
        gap: 28px 72px;
        align-items: start;
    }

    /* Tekst w dwoch kolumnach - inaczej przy 1280 px akapity konczyly sie
       w polowie szerokosci i prawa strona swiecila pustka. */
    div.wrapper div.info section.info .o-nas-tresc {
        columns: 2;
        column-gap: 48px;
    }
    div.wrapper div.info section.info .o-nas-tresc p {
        break-inside: avoid;
        margin-bottom: 18px;
    }
    div.wrapper div.info section.info .o-nas-tresc p:first-child {
        column-span: all;
        margin-bottom: 26px;
    }

    .o-nas-fakty {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        margin-top: 24px;
    }
    .o-nas-fakty li { padding-right: 28px; }
    .o-nas-fakty li + li {
        padding-left: 36px;
        border-left: 1px solid rgba(255, 255, 255, .14);
    }
}

@media (max-width: 899px) {
    div.wrapper div.info { padding: 56px 0; }
    div.wrapper div.info section.info h2 { max-width: none; }

    .o-nas-fakty {
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        padding-top: 28px;
    }
    .o-nas-fakty li { padding-right: 14px; }
    .o-nas-fakty li + li {
        padding-left: 18px;
        border-left: 1px solid rgba(255, 255, 255, .14);
    }
    .o-nas-fakty strong { font-size: 38px; }
    .o-nas-fakty span { font-size: 12.5px; }
}

@media (max-width: 479px) {
    .o-nas-fakty { grid-template-columns: 1fr; gap: 20px; }
    .o-nas-fakty li { flex-direction: row; align-items: baseline; gap: 14px; padding: 0; }
    .o-nas-fakty li + li { padding-left: 0; border-left: 0; }
    .o-nas-fakty strong { min-width: 2.2em; font-size: 34px; }
}

/* --- 28d. cechy produktu jako lista ------------------------------------ */

main.productpage div.productinfo div.informacje div.opis p.opis-wstep {
    margin-bottom: 12px;
    font-weight: 700;
    color: var(--tekst);
}

main.productpage div.productinfo div.informacje div.opis ul.cechy {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px 22px;
    margin: 0;
}

main.productpage div.productinfo div.informacje div.opis ul.cechy li {
    position: relative;
    padding-left: 24px;
    line-height: 1.5;
    font-size: 15px;
}

main.productpage div.productinfo div.informacje div.opis ul.cechy li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: .62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--niebieski);
}

@media (min-width: 560px) {
    main.productpage div.productinfo div.informacje div.opis ul.cechy {
        grid-template-columns: 1fr 1fr;
    }
}

/* --- 28e. pulsujacy przycisk telefonu ---------------------------------- */

a.dzwon {
    position: fixed;
    right: 20px;
    bottom: 78px;
    z-index: 95;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--niebieski);
    color: #fff;
    font-size: 22px;
    box-shadow: 0 8px 24px rgba(10, 155, 217, .45);
    transition: background-color var(--przejscie), transform var(--przejscie);
}

a.dzwon:hover { background: var(--niebieski-ciemny); color: #fff; transform: scale(1.06); }

/* Fala rozchodzaca sie od przycisku - sam przycisk sie nie rusza,
   zeby nie bylo trudno w niego trafic. */
a.dzwon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--niebieski);
    animation: fala 2.4s ease-out infinite;
    z-index: -1;
}

@keyframes fala {
      0% { transform: scale(1);   opacity: .55; }
    100% { transform: scale(1.9); opacity: 0; }
}

a.dzwon .ikona { height: 22px; }

@media (prefers-reduced-motion: reduce) {
    a.dzwon::before { animation: none; opacity: 0; }
}

/* --- 28f. telefon: wszystko na srodku ----------------------------------- */

@media (max-width: 767px) {
    div.wrapper div.header section.header div.slider div.slide div.txt {
        text-align: center;
        margin: 0 auto;
    }
    div.wrapper div.header section.header div.slider::after {
        background: linear-gradient(180deg, rgba(8, 12, 15, .5) 0%, rgba(8, 12, 15, .82) 100%);
    }

    div.wrapper div.features section.features div.feature div.txt { text-align: center; }
    div.wrapper div.features section.features div.feature div.txt h2::after { margin-left: auto; margin-right: auto; }

    div.wrapper div.products div.product div.txt { text-align: center; }

    div.wrapper div.transport section.transport div.location { align-items: center; text-align: center; }
    div.wrapper div.contact section.contact div.info { justify-content: center; text-align: center; }
    div.wrapper div.contact section.contact div.info div.txt { margin: 0 auto; }
    div.wrapper div.contact section.contact div.img div.pomoc { left: 50%; transform: translateX(-50%); }

    div.wrapper div.footer footer.footer div.col { align-items: center; text-align: center; }
    div.wrapper div.footer footer.footer div.col h4 { width: 100%; text-align: center; }
    div.wrapper div.footer footer.footer div.col button { align-self: center; }

    main.contactpage div.data section.data div.dane { text-align: center; }

    div.breadcrumbs section.breadcrumbs ol { justify-content: center; }

    main.productpage div.productinfo div.informacje { text-align: center; }
    main.productpage div.productinfo div.informacje div.cena { justify-content: center; }
    main.productpage div.productinfo div.informacje div.opis ul.cechy li { text-align: left; }
}

/* --- 28g. podstrony zakladane w panelu -------------------------------- */

main.podstrona div.data { padding: 44px 20px 60px; }

main.podstrona div.tresc-podstrony {
    max-width: 78ch;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.8;
    color: var(--tekst-2);
}

main.podstrona div.tresc-podstrony h2,
main.podstrona div.tresc-podstrony h3,
main.podstrona div.tresc-podstrony h4 {
    margin: 32px 0 12px;
    color: var(--tekst);
}
main.podstrona div.tresc-podstrony h2:first-child { margin-top: 0; }

main.podstrona div.tresc-podstrony ul,
main.podstrona div.tresc-podstrony ol {
    margin: 0 0 1em;
    padding-left: 22px;
    list-style: disc;
}
main.podstrona div.tresc-podstrony ol { list-style: decimal; }
main.podstrona div.tresc-podstrony li { margin-bottom: 6px; }

main.podstrona div.tresc-podstrony blockquote {
    margin: 22px 0;
    padding: 4px 0 4px 20px;
    border-left: 4px solid var(--niebieski);
    font-style: italic;
}

main.podstrona div.tresc-podstrony hr {
    margin: 32px 0;
    border: 0;
    border-top: 1px solid var(--ramka);
}

/* Przycisk wysylki na stronie kontaktu: to <input type="submit">, wiec
   nie lapie sie na reguly pisane dla <button>. Napis w bazie jest mala
   litera, stad wersaliki. */
main.contactpage div.data section.data form input[type="submit"] {
    width: 100%;
    margin-top: 6px;
    padding: 14px 22px;
    border: 0;
    border-radius: var(--r-male);
    background: var(--niebieski);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--przejscie);
}
main.contactpage div.data section.data form input[type="submit"]:hover {
    background: var(--niebieski-ciemny);
}

/* --- odznaki na kafelku produktu ---------------------------------------
   Nowość / Promocja / homologacja. Wszystkie trzy liczą się same
   z danych produktu, nic nie trzeba zaznaczać w panelu.
   ---------------------------------------------------------------------- */

div.product div.img { position: relative; }

div.product div.img div.odznaki {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    pointer-events: none;
}

div.product div.img span.odznaka {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .02em;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

span.odznaka--promocja   { background: var(--czerwony, #d93025); }
span.odznaka--nowosc     { background: #1e8449; }
/* Homologacja to informacja techniczna, nie krzyk - stad spokojniejszy
   granat zamiast koloru akcentowego. */
span.odznaka--homologacja { background: #1b3a5c; }

@media (max-width: 767px) {
    div.product div.img div.odznaki { top: 7px; left: 7px; gap: 4px; }
    div.product div.img span.odznaka { padding: 3px 7px; font-size: 10px; }
}

/* --- nowe filtry w sklepie: napęd i homologacja ------------------------ */

div.filtry p.podpowiedz-filtra {
    margin: -6px 0 8px;
    font-size: 12px;
    line-height: 1.45;
    color: #5a6673;
}
div.filtry div.checkbox span.ile {
    font-weight: 400;
    opacity: .6;
    font-size: .9em;
}

/* --- produkt bez ceny (akcesoria od importera bez cennika) ------------- */

div.product span.cena-zapytaj {
    color: var(--glowny, #0a9bd9);
    font-weight: 700;
}
div.cena.cena--zapytaj { color: var(--glowny, #0a9bd9); }

/* === opinie z wizytówki Google ========================================
   Sekcja pojawia się tylko wtedy, gdy Google coś zwróci - patrz
   app/opinie.php. Układ: nagłówek z oceną, pod nim karty z opiniami.
   ===================================================================== */

div.wrapper div.opinie {
    background:
        radial-gradient(900px 320px at 50% 0%, rgba(10, 155, 217, .07), transparent 70%),
        #f4f6f8;
}
div.wrapper div.opinie section.opinie {
    max-width: var(--maxWidth);
    margin: 0 auto;
    padding: 56px 20px;
}

.opinie-naglowek { text-align: center; margin-bottom: 34px; }
.opinie-naglowek h2 { margin: 0 0 18px; }

/* --- pasek gwiazdek -------------------------------------------------
   Dwie warstwy tego samego napisu: szara spodem, zlota na wierzchu
   przycieta do procentu oceny. Dzieki temu 4,7 wyglada jak 4,7, a nie
   jak zaokraglone 5 - i nie trzeba polowkowych znakow unicode, ktore
   w czesci przegladarek wychodza pustym prostokatem. */
.gwiazdki {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    line-height: 1;
    letter-spacing: 2px;
    font-size: 15px;
}
.gwiazdki-tlo { color: #cfd6dd; }
.gwiazdki-pelne {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: #f5a623;
}
.gwiazdki-duze { font-size: 26px; letter-spacing: 3px; }

/* --- srednia ocena nad lista ----------------------------------------
   Ocena stoi w bialej karcie, zeby byla pierwsza rzecza, ktora widac
   po wejsciu w sekcje. Sama liczba na szarym tle ginela miedzy
   naglowkiem a opiniami. */
.opinie-ocena {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 18px 28px;
    background: #fff;
    border: 1px solid #e3e9ee;
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(16, 32, 48, .08);
}
.opinie-ocena-liczba {
    font-size: 46px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--czern-2, #11161b);
}
.opinie-ocena-prawa {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
}
.opinie-ocena-opis { color: #5a6673; font-size: 14px; }
.opinie-ocena-opis a { color: inherit; text-decoration: underline; }

/* --- odznaka do wstawienia gdzie indziej ----------------------------- */
.ocena-odznaka {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--cien-1, 0 1px 3px rgba(0, 0, 0, .18));
    color: inherit;
    text-decoration: none;
}
.ocena-odznaka .ocena-liczba { font-size: 20px; font-weight: 800; }
.ocena-odznaka .ocena-opis { font-size: 13px; color: #5a6673; }

/* Karty maja gorna szerokosc i stoja na srodku. Bez tego jedna albo
   dwie opinie rozciagaly sie na cala szerokosc strony - wygladalo to
   jak bład ukladu, a nie jak celowy wybor. */
.opinie-lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 400px));
    justify-content: center;
    /* Kazda karta ma swoja wysokosc. Rozciagane do najwyzszej zostawialy
       pod krotka opinia pol karty pustki. */
    align-items: start;
    gap: 18px;
}

figure.opinia {
    position: relative;
    margin: 0;
    background: #fff;
    border: 1px solid #e3e9ee;
    border-radius: var(--r-duze, 14px);
    padding: 26px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 6px 20px rgba(16, 32, 48, .06);
    transition: transform var(--przejscie, .2s ease), box-shadow var(--przejscie, .2s ease);
}

/* Cudzyslow w tle - tani sposob, zeby karta czytala sie jako cytat,
   a nie jako kolejny kafelek z tekstem. */
figure.opinia::before {
    content: "\201D";
    position: absolute;
    top: 2px;
    right: 18px;
    font-size: 86px;
    line-height: 1;
    font-weight: 800;
    color: rgba(10, 155, 217, .12);
    pointer-events: none;
}

figure.opinia:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 38px rgba(16, 32, 48, .12);
}

figure.opinia .opinia-gwiazdki { line-height: 1; }
figure.opinia blockquote {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: #1b1f24;
    flex: 1 1 auto;
}
figure.opinia figcaption {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    color: #5a6673;
    border-top: 1px solid #eef1f4;
    padding-top: 12px;
}
figure.opinia figcaption img { border-radius: 50%; flex: 0 0 auto; }

/* Kolko z pierwsza litera imienia. Google nie zawsze daje zdjecie
   autora, a sama nazwa bez niczego wyglada jak niedokonczona stopka. */
figure.opinia .opinia-inicjal {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(10, 155, 217, .12);
    color: var(--niebieski);
    font-weight: 800;
    font-size: 14px;
}
figure.opinia figcaption .autor { font-weight: 700; color: #1b1f24; }
figure.opinia figcaption .kiedy { margin-left: auto; white-space: nowrap; }

.opinie-zrodlo {
    margin: 22px 0 0;
    text-align: center;
    font-size: 13px;
    color: #5a6673;
}
.opinie-zrodlo a { color: inherit; }

@media (max-width: 767px) {
    /* Dolny zapas, zeby plywajacy przycisk telefonu nie siadal
       na ostatniej karcie. */
    div.wrapper div.opinie section.opinie { padding: 38px 16px 84px; }
    .opinie-lista { grid-template-columns: 1fr; }
    .opinie-ocena { padding: 16px 20px; gap: 14px; }
    .opinie-ocena-liczba { font-size: 40px; }
}

/* ------------------------------------------------------------------ */
/* 23. MENU NA WASKIM DESKTOPIE                                        */
/* ------------------------------------------------------------------ */
/*
 * Dziesiec pozycji menu miescilo sie w jednym rzedzie dopiero okolo
 * 1280 px. Ponizej tego lista nie miala sie gdzie podziac: nazwy
 * lamaly sie w srodku ("Strona / Glowna", "Projekty / Specjalne"),
 * pasek rosl do dwoch rzedow i - bo jest przyklejony do gory -
 * wchodzil na tresc pod spodem.
 *
 * Zamiast zawijania pozycje teraz PLYNNIE sie zwezaja: odstep i
 * stopien pisma schodza w dol razem z szerokoscia okna, a
 * `white-space: nowrap` pilnuje, zeby nazwa nie pekla w polowie.
 * Przy 1280 px i szerzej wyglada dokladnie tak jak dotad, przy
 * 1024 px jest ciasniej - ale wszystko jest w jednej linii.
 *
 * Liczby w clamp() sa policzone na dwa punkty: 1024 px -> 1280 px.
 *   odstep pozycji   7 px -> 14 px   (2.73vw - 21px)
 *   stopien pisma   13 px -> 15 px   (0.78vw + 5px)
 */
@media (min-width: 1024px) {
    div.wrapper div.navbar section.navbar {
        gap: clamp(8px, 3.13vw - 24px, 16px);
    }

    /* Bez tego pozycja z dluga nazwa rozpycha rzad zamiast sie zwezic. */
    div.wrapper div.navbar section.navbar div.nav { min-width: 0; }

    div.wrapper div.navbar section.navbar div.nav nav > ul {
        flex-wrap: nowrap;
        justify-content: flex-end;
    }

    div.wrapper div.navbar section.navbar div.nav nav > ul > li {
        flex: 0 0 auto;
    }

    div.wrapper div.navbar section.navbar div.nav nav > ul > li > a {
        white-space: nowrap;
        padding: 11px clamp(7px, 2.73vw - 21px, 14px);
        font-size: clamp(13px, 0.78vw + 5px, 15px);
        gap: clamp(3px, 0.4vw, 6px);
    }

    /* Rozwijane podmenu zaczepia sie o pozycje, wiec przy waskim
       oknie ostatnie z brzegu uciekalo poza ekran. */
    div.wrapper div.navbar section.navbar div.nav nav > ul > li:nth-last-child(-n+3) ul.submenu {
        left: auto;
        right: 0;
    }
}

/* ------------------------------------------------------------------ */
/* 24. KAFELEK BEZ ZDJECIA                                             */
/* ------------------------------------------------------------------ */
/*
 * Akcesoria mamy od importera z opisami, ale bez zdjec - a kafelek bez
 * obrazka byl po prostu bialym prostokatem i wygladal na niedokonczona
 * strone. Znak miejsca mowi wprost, ze zdjecia nie ma, zamiast udawac,
 * ze cos sie nie wczytalo.
 */
div.product div.img .brak-zdjecia {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(160deg, #eef1f4 0%, #e2e7ec 100%);
    color: #93a1ae;
}

div.product div.img .brak-zdjecia span {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* 25. POJAWIANIE SIE TRESCI PRZY PRZEWIJANIU                          */
/* ------------------------------------------------------------------ */
/*
 * Element z `data-pojaw` wjezdza delikatnie od dolu, gdy wejdzie
 * w ekran, i ZOSTAJE - obserwator w js/serwis.js przestaje go
 * pilnowac po pierwszym pokazaniu, wiec nic nie miga przy przewijaniu
 * w gore i w dol.
 *
 * Chowamy tylko wtedy, gdy dziala JavaScript (klasa `js` na <html>).
 * Bez skryptu - i przy wylaczonych animacjach w systemie - tresc stoi
 * normalnie na swoim miejscu. Nie ma nic gorszego niz strona, ktora
 * bez JS jest pusta.
 *
 * Wartosc atrybutu to miejsce w kolejce: data-pojaw="2" rusza
 * 2 x 90 ms pozniej. Dzieki temu rzad kart wyglada jak jeden ruch,
 * a nie jak trzy osobne skoki.
 */
.js [data-pojaw] {
    opacity: 0;
    transform: translateY(22px) scale(.985);
    transition:
        opacity .62s cubic-bezier(.22, .68, .3, 1),
        transform .62s cubic-bezier(.22, .68, .3, 1);
    will-change: opacity, transform;
}

.js [data-pojaw].widoczne {
    opacity: 1;
    transform: none;
    will-change: auto;
}

.js [data-pojaw="1"] { transition-delay: .09s; }
.js [data-pojaw="2"] { transition-delay: .18s; }
.js [data-pojaw="3"] { transition-delay: .27s; }
.js [data-pojaw="4"] { transition-delay: .36s; }
.js [data-pojaw="5"] { transition-delay: .45s; }

@media (prefers-reduced-motion: reduce) {
    .js [data-pojaw] {
        opacity: 1;
        transform: none;
        transition: none;
    }
    figure.opinia { transition: none; }
    figure.opinia:hover { transform: none; }
}

/* ------------------------------------------------------------------ */
/* 26. PASEK ZAUFANIA NA KARCIE POJAZDU                                */
/* ------------------------------------------------------------------ */
/*
 * Stoi pod ceną i przyciskami - tam, gdzie klient podejmuje decyzję,
 * a nie w stopce, do której i tak nie dojdzie. Cztery krótkie zdania
 * z ptaszkiem; treść z panelu (Podstrony -> Produkt), ta sama dla
 * wszystkich modeli.
 */
main.productpage div.productinfo div.informacje ul.zaufanie {
    list-style: none;
    margin: 22px 0 0;
    padding: 18px 20px;
    display: grid;
    gap: 12px;
    background: #f5f8fa;
    border: 1px solid #e3e9ee;
    border-radius: var(--r-srednie, 10px);
}

main.productpage div.productinfo div.informacje ul.zaufanie li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--tekst, #1b1f24);
}

/* Ptaszek w kółku - bez tła gubił się w tekście. */
main.productpage div.productinfo div.informacje ul.zaufanie li .ikona {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    margin-top: 1px;
    border-radius: 50%;
    background: rgba(10, 155, 217, .14);
    color: var(--niebieski);
    font-size: 11px;
}

@media (min-width: 560px) {
    main.productpage div.productinfo div.informacje ul.zaufanie {
        grid-template-columns: 1fr 1fr;
        gap: 12px 22px;
    }
}