/*
 * Modern Theme — odświeżenie samej warstwy graficznej strony.
 *
 * Ładowany jako ostatni arkusz w includes/head.php. Zmienia WYŁĄCZNIE wygląd
 * (kolory, zaokrąglenia, cienie, obramowania, ruch, ostrość kontrastu).
 * NIE zmienia układu: żadnych width/height/margin/padding/display/position/
 * font-size ani line-height istniejących elementów — kolumny, odstępy i
 * zawijanie tekstu zostają takie same jak w style.css.
 *
 * Wycofanie: usuń link do tego pliku z includes/head.php.
 */

:root {
    /* Cienie w dwóch warstwach: ostra krawędź + miękka poświata (bardziej „fizyczne” niż jeden rozmyty cień). */
    --mt-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
    --mt-shadow-md: 0 2px 4px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.08);
    --mt-shadow-lg: 0 4px 8px rgba(16, 24, 40, 0.05), 0 16px 40px rgba(16, 24, 40, 0.12);
    --mt-border: rgba(16, 24, 40, 0.07);
    --mt-radius-sm: 10px;
    --mt-radius-md: 16px;
    --mt-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

    /* Kolory: marka bez zmian, tylko spokojniejsze odcienie tła i lepszy kontrast tekstu. */
    /* PALETA: czerń i czerwień z logo (próbkowane z images/logo.png: #e01820 i #282828). */
    --primary-color: #e01820;
    --secondary-color: #121315;
    --dark-color: #121315;
    --mt-red-text: #c4121a;           /* czerwień do tekstu na bieli (6:1) — #e01820 ma 4,9:1 */
    --gray-color: #5a6470;            /* było #6c757d (4,7:1) → 6,1:1 na bieli, WCAG AA z zapasem */
    --mt-yellow-top: #ff4d55;         /* żółć nagłówka: cieplejsza i mniej agresywna niż #edca12 */
    --mt-yellow-bottom: #e01820;
    --mt-navy-deep: #121315;          /* pasek górny i stopka: ciemniejszy granat, spójny z marką */
    --mt-surface: #f5f5f6;            /* chłodne tło sekcji zamiast neutralnego #f8f9fa */
    --mt-orange-on-light: #c46a00;    /* pomarańcz na jasnym tle (ikony) — #ff9800 miał ~2,2:1 */
}

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background-color: #fff;
}

::selection {
    background: rgba(224, 24, 32, 0.18);
}

/* ===== Typografia: ciaśniejszy odstęp liter w dużych nagłówkach ===== */
h1, h2 {
    letter-spacing: -0.02em;
}

h3, h4 {
    letter-spacing: -0.01em;
}

.section-title h6,
.hero-content h5 {
    letter-spacing: 0.06em;
}

/* ===== Przyciski ===== */
.btn-primary,
.btn-outline,
.btn-white {
    border-radius: var(--mt-radius-sm);
    transition: transform 0.2s var(--mt-ease), box-shadow 0.2s var(--mt-ease),
        background-color 0.2s var(--mt-ease), color 0.2s var(--mt-ease);
}

.btn-primary {
    background-image: linear-gradient(180deg, #f0323a 0%, var(--primary-color) 100%);
    box-shadow: 0 1px 2px rgba(18, 19, 21, 0.3), 0 6px 16px rgba(224, 24, 32, 0.25);
}

.btn-primary:hover {
    background-image: linear-gradient(180deg, #f0323a 0%, var(--secondary-color) 100%);
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(18, 19, 21, 0.3), 0 10px 22px rgba(224, 24, 32, 0.3);
}

.btn-outline:hover,
.btn-white:hover {
    transform: translateY(-2px);
    box-shadow: var(--mt-shadow-md);
}

.btn-primary:active,
.btn-outline:active,
.btn-white:active {
    transform: translateY(0);
    box-shadow: var(--mt-shadow-sm);
}

/* Wyraźny, dostępny fokus klawiatury (WCAG 2.4.7) — wcześniej zależał od domyślnej przeglądarki. */
a:focus-visible,
button:focus-visible,
.btn-primary:focus-visible,
.btn-outline:focus-visible,
.btn-white:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(224, 24, 32, 0.45);
    outline-offset: 2px;
    border-radius: var(--mt-radius-sm);
}

/* ===== Nagłówek strony ===== */
.top-header {
    background-image: linear-gradient(90deg, var(--mt-navy-deep) 0%, var(--secondary-color) 100%);
}

.main-header {
    background-image: linear-gradient(180deg, var(--mt-yellow-top) 0%, var(--mt-yellow-bottom) 100%);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 8px 24px rgba(16, 24, 40, 0.1);
}

/* Przyklejony nagłówek: półprzezroczysty „szklany” zamiast pełnej bieli. */
.sticky-header {
    background-color: rgba(255, 255, 255, 0.97);
    box-shadow: 0 1px 0 var(--mt-border), 0 10px 30px rgba(16, 24, 40, 0.1);
}

/* Animacja wsuwania przyklejonego nagłówka (style.css: slideDown, transform translateY(-100%) → 0) też robi z nagłówka „blok zawierający”
   dla position: fixed — przez pół sekundy po każdym dodaniu klasy .sticky-header menu mobilne (nakładka fixed wewnątrz nagłówka) kurczy się do
   wysokości nagłówka i leży nad ekranem. Otwarcie menu ustawia body overflow: hidden, co na telefonie potrafi wywołać zdarzenie scroll i ponowne
   dodanie klasy (restart animacji), więc na stronach z długą treścią (pomoc) menu zostawało w tym stanie. Na telefonie animacji nie ma. */
@media (max-width: 991px) {
    .sticky-header {
        animation: none;
    }
}

/* backdrop-filter tylko na desktopie: element z backdrop-filter staje się „blokiem zawierającym” dla potomków position: fixed, więc na telefonie
   (gdzie menu jest nakładką position: fixed wewnątrz .main-header) po przewinięciu strony nakładka kurczyła się do wysokości nagłówka
   i menu po kliknięciu hamburgera nie otwierało się, tylko pokazywało dziwny pasek. */
@media (min-width: 992px) {
    .sticky-header {
        background-color: rgba(255, 255, 255, 0.82);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
    }
}

.navbar-nav .nav-link {
    border-radius: var(--mt-radius-sm);
    transition: background-color 0.2s var(--mt-ease), color 0.2s var(--mt-ease);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    background-color: rgba(224, 24, 32, 0.08);
}

.language-switcher a {
    border-radius: 4px;
}

.language-switcher a.active {
    border-radius: 4px;
}

.dropdown-menu {
    border: 1px solid var(--mt-border);
    border-radius: var(--mt-radius-md);
    box-shadow: var(--mt-shadow-lg);
}

.dropdown-item {
    border-radius: 8px;
}

/* ===== Sekcja hero ===== */
.hero-area {
    background: linear-gradient(180deg, #ffffff 0%, var(--mt-surface) 100%);
}

.hero-image img,
.about-img img {
    border-radius: var(--mt-radius-md);
}

.about-img img {
    box-shadow: var(--mt-shadow-lg);
}

/* ===== Karty: zaokrąglenia, delikatna ramka, spokojniejszy ruch ===== */
.feature-box,
.product-card {
    border: 1px solid var(--mt-border);
    border-radius: var(--mt-radius-md);
    box-shadow: var(--mt-shadow-sm);
    transition: transform 0.3s var(--mt-ease), box-shadow 0.3s var(--mt-ease),
        border-color 0.3s var(--mt-ease);
}

.feature-box:hover,
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--mt-shadow-lg);
    border-color: rgba(224, 24, 32, 0.18);
}

.product-img img {
    transition: transform 0.5s var(--mt-ease);
}

/* ===== Pasek wezwania do działania i stopka ===== */
.cta-area {
    background-image: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
}

.footer-area {
    background-image: linear-gradient(180deg, #1b1b1d 0%, var(--mt-navy-deep) 100%);
}

.footer-social a {
    transition: transform 0.2s var(--mt-ease), background-color 0.2s var(--mt-ease);
}

.footer-social a:hover {
    transform: translateY(-2px);
}

/* ===== Kolory pomocnicze ===== */
/* Bootstrap 5 daje .bg-light z !important, stąd !important także tu. */
.bg-light {
    background-color: var(--mt-surface) !important;
}

/* Pomarańcz tylko jako akcent: ikony na jasnym tle dostają ciemniejszy odcień (kontrast 3:1 dla grafiki, WCAG 1.4.11). */
.highlight-item i {
    color: var(--mt-orange-on-light);
}

/* ===== Formularze ===== */
.form-control,
.form-select {
    border-radius: var(--mt-radius-sm);
    border-color: rgba(16, 24, 40, 0.15);
    transition: border-color 0.2s var(--mt-ease), box-shadow 0.2s var(--mt-ease);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(224, 24, 32, 0.15);
}

/* ===== Pływające przyciski (koszyk, czat) ===== */
.cart-icon-mobile {
    box-shadow: 0 2px 4px rgba(16, 24, 40, 0.15), 0 8px 20px rgba(224, 24, 32, 0.35);
    transition: transform 0.2s var(--mt-ease), box-shadow 0.2s var(--mt-ease);
}

.cart-icon-mobile:hover {
    transform: scale(1.06);
}

.cart-count {
    box-shadow: 0 0 0 2px #fff;
}

/* ===== Obrazki ===== */
img {
    image-rendering: auto;
}

/* =====================================================================
 * EFEKT „WOW” — dekoracje i ruch. Wszystko dochodzi przez pseudo-elementy
 * z position:absolute, filtry, cienie i transform, więc nie przesuwa żadnego
 * elementu strony. Teksty zawsze na jasnym lub ciemnym tle o wysokim kontraście.
 * ===================================================================== */

:root {
    --mt-blue-glow: rgba(224, 24, 32, 0.16);
    --mt-yellow-glow: rgba(224, 24, 32, 0.28);
}

/* ----- Hero: „rysunek techniczny” — siatka + dwie plamy światła ----- */
.hero-area {
    position: relative;
    overflow: clip;           /* clip (nie hidden): nie tworzy nowego kontekstu układu, marginesy dzieci bez zmian */
    isolation: isolate;
    background:
        radial-gradient(820px 420px at 88% 18%, var(--mt-blue-glow), transparent 62%),
        radial-gradient(640px 380px at 6% 92%, var(--mt-yellow-glow), transparent 62%),
        linear-gradient(180deg, #ffffff 0%, var(--mt-surface) 100%);
}

.hero-area::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(18, 19, 21, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18, 19, 21, 0.055) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 72% 42%, #000 0%, transparent 72%);
    mask-image: radial-gradient(ellipse 70% 80% at 72% 42%, #000 0%, transparent 72%);
}

/* Nagłówek hero: gradient granat → niebieski (kontrast > 7:1 na jasnym tle) */
.hero-content h1 {
    letter-spacing: normal;   /* bez ściskania liter: zawijanie tytułu zostaje jak w oryginale (na telefonie „do / rur PE”) */
    background-image: linear-gradient(115deg, var(--mt-navy-deep) 10%, var(--primary-color) 85%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--secondary-color);   /* zapasowy kolor, gdy przeglądarka nie zna background-clip:text */
}

.hero-content h5 {
    background-image: linear-gradient(90deg, var(--primary-color), #ff6b70);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--primary-color);
}

/* Zdjęcie produktu: miękki cień pod urządzeniami (bez poświaty za nimi) */
.hero-image {
    position: relative;
    z-index: 0;
}

.hero-image img {
    filter: drop-shadow(0 22px 26px rgba(18, 19, 21, 0.28));
}

/* ----- Nagłówki sekcji: akcent pod h2 (żółć → niebieski) ----- */
.section-title h2 {
    position: relative;
}

.section-title.text-center h2::after,
.about-content .section-title h2::after {
    content: "";
    position: absolute;
    bottom: -12px;
    width: 64px;
    height: 4px;
    border-radius: 4px;
    background-image: linear-gradient(90deg, var(--mt-yellow-bottom), var(--primary-color));
}

.section-title.text-center h2::after {
    left: 50%;
    transform: translateX(-50%);
}

.about-content .section-title h2::after {
    left: 0;
}

/* ----- Ikony atutów: neutralne, jasne kółko pod ikoną (bez kolorowej poświaty) ----- */
/* Pole ikony ma stały rozmiar 120 px, a kółko wypełnia je w całości — dzięki temu nic nie wystaje poza pole
   i nie zasłania tytułu pod ikoną (na stronie „O nas” wcześniej pole miało wysokość samego obrazka).
   Ikony 96 px (!important, bo część obrazków ma wymiary w atrybucie style). */
.service-box-features .icon {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    margin: 0 auto 14px;
}

.service-box-features .icon::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    background-color: #f4f4f5;
    border: 1px solid rgba(18, 19, 21, 0.06);
}

.service-box-features .icon img {
    width: 96px !important;
    height: auto !important;
    max-height: 96px;
    object-fit: contain;
}

/* Odznaki „Nasze atuty” (gotowe okrągłe grafiki z ramką i cieniem): bez szarego koła pod spodem, nieco większe niż zwykłe ikony. */
.service-box-features .icon--badge::before {
    display: none;
}

.service-box-features .icon--badge img {
    width: 116px !important;
    max-height: 116px;
}

/* Ikony okrągłe (np. niezawodność, ePlatforma) mają w style border-radius:50% i obcięcie do kwadratu */
.service-box-features .icon img[style*="border-radius"] {
    height: 96px !important;
    object-fit: cover;
}

/* ----- Przyciski: pasmo światła przesuwające się po najechaniu ----- */
/* Bez overflow:hidden — ono przesuwa linię bazową inline-block i przycisk „Poznaj ofertę” ląduje niżej niż „Skontaktuj się”.
   Dlatego światło to tło pseudo-elementu z animowanym background-position, przycięte border-radius. */
.btn-primary {
    position: relative;
    isolation: isolate;
}

.btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    background-image: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.38) 50%, transparent 62%);
    background-size: 260% 100%;
    background-position: 130% 0;
    background-repeat: no-repeat;
    transition: background-position 0.7s var(--mt-ease);
}

.btn-primary:hover::after {
    background-position: -30% 0;
}

.btn-outline {
    background-color: rgba(255, 255, 255, 0.6);
}

.btn-outline:hover {
    background-image: linear-gradient(180deg, #f0323a 0%, var(--primary-color) 100%);
}

/* ----- Menu: wskaźnik aktywnej pozycji ----- */
.navbar-nav .nav-link.active {
    box-shadow: inset 0 -3px 0 var(--primary-color);
}

/* ----- Karty produktów: pasek akcentu na górze po najechaniu ----- */
.product-card {
    position: relative;
}

.product-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 2;
    background-image: linear-gradient(90deg, var(--mt-yellow-bottom), var(--primary-color));
    opacity: 0;
    transition: opacity 0.3s var(--mt-ease);
}

.product-card:hover::before {
    opacity: 1;
}

/* ----- Pasek wezwania do działania: głębia, światło i siatka ----- */
.cta-area {
    position: relative;
    overflow: clip;
    isolation: isolate;
    background:
        radial-gradient(520px 260px at 88% -10%, rgba(224, 24, 32, 0.42), transparent 62%),
        radial-gradient(460px 260px at 4% 110%, rgba(255, 255, 255, 0.16), transparent 62%),
        linear-gradient(135deg, var(--mt-navy-deep) 0%, var(--primary-color) 100%);
}

.cta-area::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 36px 36px;
}

.cta-area .btn-white {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* ----- Stopka: żółta linia na górze i podświetlone ikony społecznościowe ----- */
.footer-area {
    box-shadow: inset 0 4px 0 0 var(--mt-yellow-bottom);
}

.footer-social a:hover {
    box-shadow: 0 6px 16px rgba(224, 24, 32, 0.35);
}

/* =====================================================================
 * PRZEBUDOWA SEKCJI — „granat nocy + sygnałowa żółć”.
 * Hero i górny pasek są ciemne (jak panel przyrządu), reszta strony jasna z
 * kartami w ramkach. Kolumny i kolejność treści bez zmian; sekcje dostają
 * własne tła, ramki, ukośne krawędzie i karty. Zawsze: jasny tekst na ciemnym,
 * ciemny na jasnym (kontrast ≥ 4,5:1).
 * ===================================================================== */

:root {
    --mt-night: #121315;
    --mt-banner: #fff;                /* tło paska z okruszkami: białe, tylko cienki separator na dole */
    --mt-banner-line: #e5e7eb;
    --mt-crumb: #6b7280;
    --mt-night-2: #2b2b2e;
    --mt-signal: #ff4d55;
    --mt-signal-deep: #e01820;
    --mt-card-border: rgba(18, 19, 21, 0.10);
}

/* ----- Pasek z tytułem strony (na wszystkich podstronach) ----- */
.page-banner {
    background-color: var(--mt-banner);
    color: var(--mt-night);
}

.page-banner h1,
.page-banner h2,
.page-banner h3 {
    color: var(--mt-night);
}

.page-banner .breadcrumb-item a {
    color: var(--mt-crumb);
    text-decoration: none;
    text-underline-offset: 3px;
}

.page-banner .breadcrumb-item a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.page-banner .breadcrumb-item.active {
    color: var(--mt-night);
}

.page-banner .breadcrumb-item + .breadcrumb-item::before {
    color: #9ca3af;
}

/* ----- Hero: ciemny „panel przyrządu” z siatką, żółtą poświatą za produktem i ukośną dolną krawędzią ----- */
.hero-area {
    color: #fff;
    background:
        radial-gradient(900px 520px at 0% 0%, rgba(255, 107, 112, 0.28), transparent 62%),
        linear-gradient(180deg, var(--mt-night) 0%, var(--mt-night-2) 100%);
}

.hero-area::before {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    /* Siatka obejmuje całe hero (także kolumnę z opisem), wygasa dopiero przy brzegach. */
    -webkit-mask-image: radial-gradient(ellipse 95% 120% at 50% 50%, #000 35%, transparent 100%);
    mask-image: radial-gradient(ellipse 95% 120% at 50% 50%, #000 35%, transparent 100%);
}

.hero-area .section-title h6 {
    color: var(--mt-signal);
}

.hero-area .hero-content h5 {
    background-image: linear-gradient(90deg, var(--mt-signal), #ffb3b6);
    color: var(--mt-signal);
}

.hero-area .hero-content h1 {
    background-image: linear-gradient(115deg, #ffffff 25%, #ffc2c4 100%);
    color: #fff;
}

.hero-area .hero-content p {
    color: rgba(255, 255, 255, 0.86);
}

.hero-area .hero-image img {
    filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.45));
}

/* Przyciski na ciemnym tle: główny czerwony z białym tekstem, drugi z białą obwódką */
.hero-area .btn-primary {
    background-image: linear-gradient(180deg, #f0323a 0%, var(--mt-signal-deep) 100%);
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 22px rgba(224, 24, 32, 0.45);
}

.hero-area .btn-primary:hover {
    background-image: linear-gradient(180deg, #ff4d55 0%, #e01820 100%);
    color: #fff;
}

.hero-area .btn-outline {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.75);
    color: #fff;
}

.hero-area .btn-outline:hover {
    background-image: none;
    background-color: #fff;
    color: var(--mt-night);
}

/* ----- Sekcja „Akcesoria”: jasna, z ramką wokół zdjęcia jak w katalogu ----- */
.products-area {
    background:
        radial-gradient(520px 320px at 100% 0%, rgba(224, 24, 32, 0.20), transparent 65%),
        linear-gradient(180deg, #efeff1 0%, #f8f8f9 100%);
}

/* Zdjęcie akcesoriów bez ramki: żółta poświata i delikatna siatka kreślarska „pod” narzędziami, cień pod nimi.
   Pseudo-element jest pod obrazkiem (z-index -1), więc nie zmienia wymiarów kolumny. */
.products-area,
body .product-top-section {
    /* Siatka pod zdjęciem (pseudo-element) wystaje poza kolumnę — na telefonie rozpychała stronę poziomo. clip nie zmienia układu. */
    overflow-x: clip;
}

.products-area .col-lg-6 > a {
    position: relative;
    display: block;
    isolation: isolate;
}

.products-area .col-lg-6 > a::before {
    content: "";
    position: absolute;
    inset: -18% -12%;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(rgba(18, 19, 21, 0.07) 1px, transparent 1px) 0 0 / 36px 36px,
        linear-gradient(90deg, rgba(18, 19, 21, 0.07) 1px, transparent 1px) 0 0 / 36px 36px;
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, transparent 100%);
}

.products-area .col-lg-6 > a img {
    filter: drop-shadow(0 18px 22px rgba(18, 19, 21, 0.28));
}

/* ----- Atuty: trzy karty z kolorowym paskiem u góry na tle z kropek ----- */
.features-area {
    position: relative;
    isolation: isolate;
    background: #fff;
}

.features-area::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(rgba(224, 24, 32, 0.16) 1.3px, transparent 1.6px);
    background-size: 24px 24px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}

.features-area .service-box-features {
    position: relative;
    /* Oryginalny flex-wrap:wrap przy stałej wysokości kafla łamał opis do drugiej kolumny — jedna kolumna od góry. */
    flex-wrap: nowrap;
    align-content: stretch;
    justify-content: flex-start;
    height: calc(100% - 24px);
    margin-bottom: 24px;
    padding: 36px 28px 30px;
    background: #fff;
    border: 1px solid var(--mt-card-border);
    border-radius: 22px;
    box-shadow: var(--mt-shadow-md);
    transition: box-shadow 0.3s var(--mt-ease), border-color 0.3s var(--mt-ease), transform 0.3s var(--mt-ease);
}

.features-area .service-box-features::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 5px;
    border-radius: 0 0 6px 6px;
    background-image: linear-gradient(90deg, var(--mt-signal-deep), var(--primary-color));
}

.features-area .service-box-features:hover {
    transform: translateY(-4px);
    box-shadow: var(--mt-shadow-lg);
    border-color: rgba(224, 24, 32, 0.25);
}

/* ----- „O nas”: tekst w białej karcie, tło w delikatnym gradiencie, lista z żółtymi znacznikami ----- */
.about-area {
    background:
        radial-gradient(560px 360px at 0% 100%, rgba(224, 24, 32, 0.22), transparent 65%),
        linear-gradient(180deg, #ffffff 0%, #efeff1 100%);
}

.about-area .about-img img,
.about-area .col-lg-6 > img {
    filter: drop-shadow(0 18px 28px rgba(18, 19, 21, 0.22));
}

.about-content {
    padding: 38px 40px;
    background: #fff;
    border: 1px solid var(--mt-card-border);
    border-radius: 26px;
    box-shadow: var(--mt-shadow-lg);
}

.about-list ul li i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-image: linear-gradient(135deg, #f0323a, var(--mt-signal-deep));
    color: #fff;
    font-size: 11px;
}

@media (max-width: 576px) {
    .about-content {
        padding: 26px 20px;
    }

    .features-area .service-box-features {
        padding: 30px 20px 26px;
    }
}

/* ----- Pasek wezwania do działania: żółty przycisk jak „sygnał” na ciemnym tle ----- */
.cta-area {
    background:
        radial-gradient(520px 260px at 88% -10%, rgba(224, 24, 32, 0.40), transparent 62%),
        radial-gradient(460px 260px at 4% 110%, rgba(255, 255, 255, 0.07), transparent 62%),
        linear-gradient(135deg, #121315 0%, #2b2b2e 100%);
}

.cta-area .btn-white {
    background-color: var(--primary-color);
    background-image: linear-gradient(180deg, #f0323a 0%, var(--primary-color) 100%);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 26px rgba(224, 24, 32, 0.45);
}

.cta-area .btn-white:hover {
    background-color: #ff4d55;
    background-image: linear-gradient(180deg, #ff4d55 0%, #e01820 100%);
    color: #fff;
}

/* ----- Nagłówek: biały, żeby logo (czerwone „LAB” + czarne „TRONIK”) miało swoje naturalne tło ----- */
/* Czerwień na żółci gryzła się; na bieli logo ma pełny kontrast, a żółć zostaje jako cienka linia marki. */
.main-header {
    background-color: #fff;
    background-image: none;
    box-shadow: inset 0 -4px 0 0 var(--mt-signal-deep), 0 12px 30px rgba(18, 19, 21, 0.10);
    /* +4 px na dole równoważy czerwoną linię (inset shadow), żeby treść była wyśrodkowana w widocznej części. */
    padding-bottom: 14px;
}

/* Desktop: logo obejmuje oba wiersze (kontakt + menu po prawej), więc jest wyśrodkowane w pionie
   względem całego nagłówka. Wcześniej flex-wrap trzymał je w pierwszym wierszu, nad środkiem. */
@media (min-width: 992px) {
    .main-header .navbar {
        display: grid !important;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        column-gap: 24px;
        align-items: center;
    }

    .main-header .navbar-brand {
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: center;
    }

    .main-header .header-contact-info,
    .main-header .mobile-controls {
        grid-column: 2;
        grid-row: 1;
    }

    .main-header .navbar-collapse {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
    }
}

.navbar-nav .nav-link {
    color: var(--mt-night);
}

.navbar-nav .nav-link:hover {
    color: var(--primary-color);
    background-color: rgba(224, 24, 32, 0.08);
}

.navbar-nav .nav-link.active {
    color: var(--mt-red-text);
    background-color: rgba(224, 24, 32, 0.08);
    box-shadow: inset 0 -3px 0 var(--mt-signal-deep);
}

.header-contact-info .contact-item a {
    color: var(--mt-night);
    opacity: 1;
}

.header-contact-info .contact-item a:hover {
    color: var(--primary-color);
}

.brand-since {
    color: var(--secondary-color);
}

/* Przyciski nagłówka na telefonie były projektowane pod żółte tło (białe, półprzezroczyste) — na bieli znikały. */
.mobile-lang-toggle {
    background-color: rgba(18, 19, 21, 0.05);
    border-color: rgba(18, 19, 21, 0.22);
    color: var(--mt-night);
}

.mobile-lang-toggle:hover,
.mobile-lang-toggle:focus,
.mobile-lang-toggle[aria-expanded="true"] {
    background-color: rgba(18, 19, 21, 0.10);
}

.navbar-toggler {
    background-color: rgba(18, 19, 21, 0.05);
    border-color: rgba(18, 19, 21, 0.22);
}

/* =====================================================================
 * PODSTRONY — spójność z paletą czerń + czerwień z logo.
 * Wiele podstron ma własne arkusze z zaszytymi niebieskimi kolorami (#007bff,
 * #0056b3) i własne nagłówki strony; tu je ujednolicamy bez zmian w HTML.
 * ===================================================================== */

/* ----- Ciemny pasek z tytułem na stronach bez .page-banner (serwis, o nas, pomoc, karta produktu) ----- */
/* Pełna szerokość z kontenera przez box-shadow + clip-path — bez dodawania znaczników. */
header + .container:has(> nav[aria-label="breadcrumb"]),
header + .container:has(.page-header-content),
header + .container:has(> .row .breadcrumb) {
    position: relative;
    margin-top: 0 !important;
    margin-bottom: 28px;
    padding-top: 14px;
    padding-bottom: 14px;
    background: var(--mt-banner);
    color: var(--mt-night);
    box-shadow: 0 0 0 100vmax var(--mt-banner);
    clip-path: inset(0 -100vmax);
}

section.page-header-content {
    padding: 14px 0;
    margin: 0 0 28px;
    background: var(--mt-banner);
    color: var(--mt-night);
}

header + .container .page-header-content {
    margin-top: 0;
}

header + .container h1,
header + .container h2,
section.page-header-content h1,
section.page-header-content h2,
.page-header-content h2 {
    color: var(--mt-night);
}

header + .container .breadcrumb,
section.page-header-content .breadcrumb {
    margin-bottom: 0;
}

header + .container .breadcrumb-item a,
section.page-header-content .breadcrumb-item a {
    color: var(--mt-crumb);
    text-decoration: none;
    text-underline-offset: 3px;
}

header + .container .breadcrumb-item a:hover,
section.page-header-content .breadcrumb-item a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

header + .container .breadcrumb-item.active,
section.page-header-content .breadcrumb-item.active {
    color: var(--mt-night);
}

header + .container .breadcrumb-item + .breadcrumb-item::before,
section.page-header-content .breadcrumb-item + .breadcrumb-item::before {
    color: #9ca3af;
}

/* ----- Bootstrap: „niebieski” z kart i przycisków przechodzi na czerwień marki ----- */
.btn.btn-primary {
    --bs-btn-bg: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-bg: #b8121a;
    --bs-btn-hover-border-color: #b8121a;
    --bs-btn-active-bg: #a80f16;
    --bs-btn-active-border-color: #a80f16;
    --bs-btn-disabled-bg: var(--primary-color);
    --bs-btn-disabled-border-color: var(--primary-color);
}

.btn.btn-outline-primary {
    --bs-btn-color: var(--mt-red-text);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-bg: var(--primary-color);
    --bs-btn-hover-border-color: var(--primary-color);
    --bs-btn-active-bg: #b8121a;
}

.text-primary {
    color: var(--mt-red-text) !important;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

.border-primary {
    border-color: var(--primary-color) !important;
}

.alert-info {
    --bs-alert-border-color: rgba(18, 19, 21, 0.12);
    --bs-alert-bg: #f5f5f6;
    --bs-alert-color: var(--mt-night);
    border-left: 4px solid var(--primary-color);
}

/* ----- Pliki do pobrania ----- */
.download-section h3 {
    border-bottom-color: var(--primary-color);
}

.download-list a,
.download-icon,
.advantage-icon {
    color: var(--mt-red-text);
}

.download-list a:hover {
    color: var(--mt-night);
}

/* ----- Karta produktu i porównanie ----- */
.comparison-table thead th {
    background-color: var(--mt-night);
}

.product-features-list li:before,
.product-catalog-link,
.param-highlight {
    color: var(--mt-red-text);
}

.btn-cart {
    background-color: var(--primary-color);
    background-image: linear-gradient(180deg, #f0323a 0%, var(--primary-color) 100%);
    border-color: var(--primary-color);
}

.btn-cart:hover {
    background-color: #b8121a;
    background-image: none;
}

/* ----- Pomoc (style wbudowane w help.php i dobor-czytnika-kodow.php używają #007bff) ----- */
.help-topics .help-topic h3,
.help-topics .help-topic .icon {
    color: var(--mt-red-text);
}

.help-topics .help-topic {
    border-radius: var(--mt-radius-md);
    border-color: var(--mt-card-border);
    box-shadow: var(--mt-shadow-sm);
}

.help-topics .help-topic:hover {
    box-shadow: var(--mt-shadow-lg);
    border-color: rgba(224, 24, 32, 0.3);
}

.back-to-main a {
    background-color: var(--primary-color);
    border-radius: var(--mt-radius-sm);
}

.back-to-main a:hover {
    background-color: #b8121a;
}

/* ----- Poprawki z podglądu ----- */
/* Napis „ZGRZEWARKI ELEKTROOPOROWE” przylegał do górnej krawędzi hero — oddech nad nim. */
.hero-area .section-title {
    padding-top: 26px;
}

/* Pasek z flagami na samej górze: czerń. Czerwień zostaje w logo i na przyciskach, a flagi (PL, CZ, ES, IT mają czerwone pasy)
   odcinają się od czerni bez żadnych dodatkowych ramek. Wcześniejsze wersje (czerwony pasek, białe obwódki, czarna kapsułka) usunięte. */
.top-header {
    background-image: linear-gradient(90deg, #0d0e0f 0%, #1f2022 100%);
    padding: 3px 0;   /* było 10 px (pasek ok. 40 px wysokości); teraz ok. 26 px — same flagi z obwódką */
}

/* Wiersz flag: line-height z body (1,6) robił z linii ok. 35 px, mimo że flaga ma 16 px + obwódkę; flex usuwa tę „linię tekstu”. */
.top-header .language-switcher {
    display: flex;
    justify-content: flex-end;
    line-height: 1;
}

.language-switcher a {
    border-radius: 3px;
}

.language-switcher a.active {
    border-color: #fff;
}

/* ----- Ceny i nazwy produktów: bez czerwieni ----- */
/* Czerwień kojarzy się z ostrzeżeniem, a tu ma zachęcać do zakupu. Nazwy są czarne (czytelność, spokój),
   ceny ciemnozielone (#15803d, kontrast 5:1 na bieli) — skojarzenie „OK / korzystnie”. Czerwień zostaje na przyciskach.
   Prefiks `body` w selektorach: product-detail.css, products.css i similar-products.css ładują się PO tym arkuszu
   (dokłada je sama podstrona) i bez wyższej specyficzności wygrywałyby z nim. */
body .product-title,
body .product-title a,
body .product-card .product-content h3,
body .product-card .product-content h3 a,
body .related-products .product-card h4,
body .related-products .product-card h4 a,
body .related-products .product-card h5 a {
    color: var(--mt-night);
}

body .product-title a:hover,
body .product-card .product-content h3 a:hover,
body .related-products .product-card h4 a:hover {
    color: var(--mt-night);
    text-decoration: underline;
    text-decoration-color: var(--primary-color);
    text-underline-offset: 3px;
}

body .product-price,
body .product-price *,
body .price-value,
body .current-price,
body .related-products .product-price,
body .product-card .price {
    color: #15803d;
}

body .price-tax-info,
body .product-price .tax-info {
    color: var(--gray-color);
}

/* ----- Pasek z okruszkami: delikatny separator 1px na dolnej krawędzi ----- */
.page-banner,
section.page-header-content {
    position: relative;
}

.page-banner::after,
section.page-header-content::after,
header + .container:has(> nav[aria-label="breadcrumb"])::after,
header + .container:has(.page-header-content)::after,
header + .container:has(> .row .breadcrumb)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: var(--mt-banner-line);
    pointer-events: none;
}

/* Wariant z kontenerem rysowanym na pełną szerokość (box-shadow + clip-path): linia też na całą szerokość. */
header + .container:has(> nav[aria-label="breadcrumb"])::after,
header + .container:has(.page-header-content)::after,
header + .container:has(> .row .breadcrumb)::after {
    left: calc(50% - 50vw);   /* dokładnie szerokość okna; -100vmax wystawało poza stronę i robiło poziome przewijanie (menu mobilne) */
    right: calc(50% - 50vw);
}

/* ----- Pasek z okruszkami: bez widocznego tytułu ----- */
/* Tytuł strony (h1/h2 w pasku) jest ukryty wizualnie, ale zostaje w DOM — czytniki ekranu i wyszukiwarki dalej go widzą.
   Widoczny tytuł niosą nagłówki sekcji poniżej. */
.page-banner h1,
.page-banner h2,
.page-header-content h1,
.page-header-content h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.page-banner .page-header-content,
header + .container .page-header-content {
    margin-top: 0;
}

.page-banner {
    padding: 12px 0;
}

.page-banner .breadcrumb,
.page-header-content .breadcrumb {
    margin-bottom: 0;
}

/* =====================================================================
 * STRONY PRODUKTÓW — ten sam język co sekcja „Akcesoria” na stronie głównej:
 * zdjęcia bez ramek na „scenie” (żółta poświata + siatka + cień), karty z paskiem
 * akcentu, nagłówki sekcji ciemne z czerwoną kreską. Prefiks `body`, bo
 * product-detail.css i products.css ładują się po tym arkuszu.
 * ===================================================================== */

/* ----- Karta produktu: główne zdjęcie bez ramki ----- */
body .product-image-container {
    isolation: isolate;
    background: none;
    box-shadow: none;
    border-radius: 0;
}

body .product-image-container::before {
    content: "";
    position: absolute;
    inset: -4% -6%;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(rgba(18, 19, 21, 0.07) 1px, transparent 1px) 0 0 / 36px 36px,
        linear-gradient(90deg, rgba(18, 19, 21, 0.07) 1px, transparent 1px) 0 0 / 36px 36px;
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, transparent 100%);
}

body .product-main-img {
    filter: drop-shadow(0 18px 22px rgba(18, 19, 21, 0.28));
}

/* ----- Karta z ceną: biała, z czerwono-czarnym paskiem u góry ----- */
body .product-price-card,
body .product-features-card {
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid var(--mt-card-border);
    border-radius: 22px;
    box-shadow: var(--mt-shadow-md);
}

body .product-price-card::before,
body .product-features-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background-image: linear-gradient(90deg, var(--mt-signal-deep), var(--mt-night));
}

/* ----- Nagłówki sekcji (Opis produktu, Specyfikacja…) ----- */
body .product-section .section-title {
    color: var(--mt-night);
}

body .product-section .section-title:after {
    height: 4px;
    border-radius: 4px;
    background-color: transparent;
    background-image: linear-gradient(90deg, var(--mt-signal-deep), var(--mt-night));
}

body .product-section {
    border-bottom-color: rgba(18, 19, 21, 0.08);
}

/* ----- Opis produktu: karty cech jak na stronie głównej ----- */
body .product-detail-sections .feature-box {
    position: relative;
    overflow: hidden;
    padding-top: 28px;
    background-color: #fff;
    border: 1px solid var(--mt-card-border);
    border-radius: 22px;
    box-shadow: var(--mt-shadow-md);
}

body .product-detail-sections .feature-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 5px;
    border-radius: 0 0 6px 6px;
    background-image: linear-gradient(90deg, var(--mt-signal-deep), var(--mt-night));
}

body .product-detail-sections .feature-box:hover {
    transform: translateY(-4px);
    box-shadow: var(--mt-shadow-lg);
    border-color: rgba(224, 24, 32, 0.25);
}

body .product-detail-sections .feature-box img {
    border-radius: 14px;
}

body .product-detail-sections .feature-box h4,
body .product-detail-sections .feature-box h4 strong {
    color: var(--mt-night);
}

/* ----- Opis produktu: treść łatwa do skanowania (znaczniki dodaje js/product-enhance.js) ----- */
body .product-detail-sections .feature-box .lead-sentence {
    color: var(--mt-night);
    font-weight: 600;
    font-size: 1.04em;
}

body .product-detail-sections .feature-box p {
    color: #4a4b50;
    line-height: 1.6;
}

/* Kluczowe wartości (liczby z jednostkami, nazwy funkcji): ciemny tekst + czerwone podkreślenie-marker */
body .product-detail-sections .feature-box .key-fact {
    color: var(--mt-night);
    font-weight: 700;
    white-space: nowrap;
    background-image: linear-gradient(rgba(224, 24, 32, 0.16), rgba(224, 24, 32, 0.16));
    background-repeat: no-repeat;
    background-size: 100% 0.42em;
    background-position: 0 88%;
    padding: 0 2px;
    border-radius: 2px;
}

/* Listy: numerowane kafelki z terminem i opisem pod spodem */
body .product-detail-sections .feature-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: feat;
    display: grid;
    gap: 8px;
}

body .product-detail-sections .feature-box ul > li {
    counter-increment: feat;
    position: relative;
    padding: 10px 12px 10px 48px;
    background: var(--mt-surface);
    border-radius: 12px;
    line-height: 1.45;
}

body .product-detail-sections .feature-box ul > li::before {
    content: counter(feat);
    position: absolute;
    left: 12px;
    top: 10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--mt-night);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

body .product-detail-sections .feature-box .list-term {
    display: block;
    color: var(--mt-night);
    font-weight: 700;
}

body .product-detail-sections .feature-box .list-desc {
    display: block;
    color: #4a4b50;
    font-size: 0.94em;
}

/* Ostatni kafelek samotny w rzędzie → pełna szerokość, układ poziomy (obraz po lewej, tekst po prawej) */
@media (min-width: 992px) {
    body .description-columns > .col-md-6:last-child:nth-child(3n + 1) {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    body .description-columns > .col-md-6:last-child:nth-child(2n + 1) {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 768px) {
    body .description-columns > .col-md-6:last-child:nth-child(3n + 1) .feature-box,
    body .description-columns > .col-md-6:last-child:nth-child(2n + 1) .feature-box {
        display: grid;
        grid-template-columns: minmax(180px, 34%) 1fr;
        grid-template-rows: auto 1fr;
        column-gap: 32px;
        align-items: start;
        text-align: left;
    }

    body .description-columns > .col-md-6:last-child:nth-child(3n + 1) .feature-box img,
    body .description-columns > .col-md-6:last-child:nth-child(2n + 1) .feature-box img {
        grid-row: 1 / span 2;
        grid-column: 1;
        align-self: center;
        width: 100%;
    }

    body .description-columns > .col-md-6:last-child:nth-child(3n + 1) .feature-box > :not(img),
    body .description-columns > .col-md-6:last-child:nth-child(2n + 1) .feature-box > :not(img) {
        grid-column: 2;
    }
}

/* ----- Dane techniczne: wartości wyróżnione, „Tak” jako plakietka ----- */
body .welder-params-table td.spec-label {
    color: #4a4b50;
}

body .welder-params-table td.spec-value {
    color: var(--mt-night);
    font-weight: 700;
}

body .welder-params-table .spec-yes {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(21, 128, 61, 0.12);
    color: #15803d;
    font-size: 13px;
}

body .welder-params-table .spec-opt {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid var(--mt-card-border);
    background: var(--mt-surface);
    font-weight: 600;
    font-size: 0.9em;
}

/* ----- Tabele (dane techniczne, porównanie): zaokrąglony kontener z ramką ----- */
body .product-detail-sections .welder-params-table,
body .comparison-section .comparison-table {
    border: 1px solid var(--mt-card-border);
    border-radius: 14px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}

/* ----- Lista produktów: kafelki bez ramek, zdjęcia na wyraźnej „scenie” ----- */
/* Na liście kafelek to .product-box (nie .product-card jak na stronie głównej i w „powiązanych”). Nie ma obramowania ani cienia —
   tekst leży na tle sekcji, a białą kartę z cieniem dostaje dopiero po najechaniu. */
body .shop-area {
    background: linear-gradient(180deg, #ffffff 0%, #f3f3f4 100%);
}

body .shop-area .product-box {
    background-color: transparent;
    box-shadow: none;
    border-radius: 24px;
    transition: background-color 0.3s var(--mt-ease), box-shadow 0.3s var(--mt-ease), transform 0.3s var(--mt-ease);
}

body .shop-area .product-box:hover {
    background-color: #fff;
    box-shadow: var(--mt-shadow-lg);
    transform: translateY(-4px);
}

body .product-box .product-image {
    position: relative;
    isolation: isolate;
}

body .product-box .product-image::before {
    content: "";
    position: absolute;
    inset: -6% -8% 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(rgba(18, 19, 21, 0.09) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(90deg, rgba(18, 19, 21, 0.09) 1px, transparent 1px) 0 0 / 28px 28px;
    -webkit-mask-image: radial-gradient(ellipse 54% 54% at 50% 52%, #000 38%, transparent 100%);
    mask-image: radial-gradient(ellipse 54% 54% at 50% 52%, #000 38%, transparent 100%);
}

body .product-box .product-image img {
    filter: drop-shadow(0 16px 18px rgba(18, 19, 21, 0.32));
}

/* ----- Strona główna: bez paska z okruszkami, wyższe hero ----- */
/* Pasek „Strona główna” nad hero nic nie wnosi na samej stronie głównej. Selektor łapie go tylko wtedy,
   gdy zaraz po nim jest .hero-area (występuje wyłącznie na stronie głównej) — na podstronach okruszki zostają. */
.page-banner:has(+ .hero-slider),
.page-banner:has(+ .hero-area) {
    display: none;
}

.page-banner + .hero-area,
header + .hero-area {
    padding-top: 28px;
    padding-bottom: 72px;
}

/* Hero ze slajdami: małe odstępy, żeby jego wysokość wynikała ze zdjęcia, a nie z paddingów (typowe proporcje, bez przytłaczania). */
.hero-slider .hero-area {
    padding-top: 10px;
    padding-bottom: 38px;
}

.hero-slider .hero-area .section-title {
    padding-top: 12px;
    margin-bottom: 4px;
}

/* ----- „O nas” → „Nasze atuty”: ikony Font Awesome nad tytułami ----- */
/* Wcześniej bez żadnego rozmiaru (domyślne ~16 px, wyglądały jak kropki). Tu: 28 px w jasnoszarym kółku 64 px,
   spójnie z ikonami w „Nasze usługi”. Kolor zostaje z atrybutu style każdej ikony. */
.choose-item .advantage-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 0 14px;
    border-radius: 50%;
    background-color: #f4f4f5;
    border: 1px solid rgba(18, 19, 21, 0.06);
    font-size: 28px;
}

/* Całe „atut” wyśrodkowany: ikona (margin auto), tytuł i opis. Wcześniej wszystko było przy lewej krawędzi kolumny. */
.choose-item {
    text-align: center;
}

.choose-item .advantage-icon {
    margin-left: auto;
    margin-right: auto;
}

/* =====================================================================
 * HERO — dwa slajdy na przemian (js/hero-slider.js)
 * ===================================================================== */
.hero-slider {
    position: relative;
}

/* Wszystkie slajdy w jednej komórce siatki: wysokość = wyższy slajd, więc zmiana nie przesuwa strony. */
.hero-slides {
    display: grid;
    /* minmax(0, …): bez tego najszerszy slajd rozpychał kolumnę ponad szerokość ekranu (przewijanie w poziomie na telefonie). */
    grid-template-columns: minmax(0, 1fr);
}

.hero-slide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}

.hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.9s ease, visibility 0s;
}

.hero-slide > .hero-area {
    height: 100%;
}

/* Oba slajdy mają tę samą wysokość (wyższy z nich) — treść pod etykietą wyśrodkowana w pionie, bez pustego pasa na dole. */
.hero-slide > .hero-area {
    display: flex;
    flex-direction: column;
}

.hero-slide > .hero-area > .container {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
}

.hero-slide > .hero-area > .container > .row {
    flex: 1 1 auto;
}

/* Slajd 2: zdjęcie sieci wodociągowej dopasowane do WYSOKOŚCI hero (cały kadr, bez przycinania jak przy `cover`),
   ustawione za zdjęciem zgrzewarki. Boki wygasają maską, więc płynnie przechodzą w ciemne tło hero.
   Tło slajdu to zwykłe tło .hero-area (ciemny gradient + siatka); zdjęcie jest pseudo-elementem pod siatką. */
.hero-area--photo::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 64%;
    z-index: -2;
    height: 100%;
    aspect-ratio: var(--hero-photo-ratio);
    transform: translateX(-50%);
    pointer-events: none;
    background: var(--hero-photo) center / 100% 100% no-repeat;
    filter: brightness(0.78) saturate(1.05);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 10%, rgba(0, 0, 0, 0.75) 22%, #000 38%, #000 62%, rgba(0, 0, 0, 0.75) 78%, rgba(0, 0, 0, 0.35) 90%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 10%, rgba(0, 0, 0, 0.75) 22%, #000 38%, #000 62%, rgba(0, 0, 0, 0.75) 78%, rgba(0, 0, 0, 0.35) 90%, transparent 100%);
}

/* Zdjęcia tła kolejnych slajdów: adres i proporcje w zmiennych (url() zadeklarowany tu, więc ścieżka względem tego pliku). */
.hero-area--zk160 {
    --hero-photo: url("../images/hero-water-supply.jpg");
    --hero-photo-ratio: 1089 / 776;
}

.hero-area--zk315 {
    --hero-photo: url("../images/hero-zk315-pipes.jpg");
    --hero-photo-ratio: 1535 / 849;
}

.hero-area--zk90 {
    --hero-photo: url("../images/hero-house-connection.jpg");
    --hero-photo-ratio: 1535 / 1025;
}

/* Slajd 1: zdjęcie sieci (woda / kanalizacja / gaz) z ikonami; wcześniejsza wersja miała też wypalone napisy. Ściemniona mocniej niż inne zdjęcia,
   żeby nie konkurowała z tekstem hero i zdjęciem zgrzewarek. */
.hero-area--infographic {
    --hero-photo: url("../images/hero-network-wide.jpg");
    --hero-photo-ratio: 4 / 1;
}

/* Układ dwukolumnowy (≥ 992 px); na telefonie zostaje infografika u dołu (reguły mobilne niżej). */
@media (min-width: 992px) {
    .hero-area--infographic::after {
        /* Panoramiczne zdjęcie (4:1) na całą szerokość slajdu: ramka jest wyższa od hero (130%) i przesunięta w górę o 35%,
           więc rury z ikonami (ok. 65% wysokości zdjęcia) leżą mniej więcej w połowie hero, nad rzędem zgrzewarek;
           cover przycina boki zdjęcia, a nie wysokość. */
        top: -35%;
        bottom: auto;
        left: 0;
        right: 0;
        width: 100%;
        height: 130%;
        aspect-ratio: auto;
        transform: none;
        background:
            /* Przyciemnienie za tekstem po lewej. */
            linear-gradient(90deg, rgba(10, 11, 12, 0.62) 0%, rgba(10, 11, 12, 0.38) 26%, rgba(10, 11, 12, 0) 48%),
            linear-gradient(rgba(10, 11, 12, 0.1), rgba(10, 11, 12, 0.1)),
            var(--hero-photo) center / cover no-repeat;
        filter: brightness(0.95) saturate(1.1);
        /* Boki wygasają do ciemnego tła hero na 30% szerokości z każdej strony (maska pozioma × maska pionowa). */
        -webkit-mask-image:
            linear-gradient(90deg, transparent 0%, transparent 10%, rgba(0, 0, 0, 0.2) 19%, rgba(0, 0, 0, 0.6) 29%, #000 39%, #000 61%, rgba(0, 0, 0, 0.6) 71%, rgba(0, 0, 0, 0.2) 81%, transparent 90%, transparent 100%),
            linear-gradient(180deg, #000 0%, #000 82%, transparent 99%);
        -webkit-mask-composite: source-in;
        mask-image:
            linear-gradient(90deg, transparent 0%, transparent 10%, rgba(0, 0, 0, 0.2) 19%, rgba(0, 0, 0, 0.6) 29%, #000 39%, #000 61%, rgba(0, 0, 0, 0.6) 71%, rgba(0, 0, 0, 0.2) 81%, transparent 90%, transparent 100%),
            linear-gradient(180deg, #000 0%, #000 82%, transparent 99%);
        mask-composite: intersect;
    }
}

/* Treść slajdu 1 schodzi pod ikony z obrazu (zależą od wysokości hero, więc stały odstęp). */
@media (min-width: 992px) {
    .hero-area--infographic .row {
        /* Tekst od samej góry, tuż pod ikonami z obrazu (dolna krawędź ikon: 295 px − 12,9 vw; etykieta nad hero zajmuje ok. 70 px).
           Wcześniej schodził niżej, bo w obrazie były napisy; teraz nad zgrzewarkami jest wolne miejsce. */
        align-items: flex-start !important;   /* Bootstrapowe .align-items-center na wierszu ma !important */
        margin-top: 60px;
    }

    /* Wszystkie slajdy: ten sam początek treści i przyciski PRZYPIĘTE DO DOŁU lewej kolumny, pod tekstem (tytuł → opis → cechy → przyciski).
       Wszystkie slajdy mają wysokość najwyższego, a przyciski mają ten sam odstęp od dołu, więc „Poznaj ofertę” / „Więcej szczegółów”
       i „Skontaktuj się z nami” są zawsze w tym samym miejscu hero i nie skaczą przy zmianie slajdu. */
    .hero-slide > .hero-area {
        padding-bottom: 0;
    }

    .hero-slide .row {
        align-items: stretch !important;
        margin-top: max(0px, calc(248px - 12.9vw));
    }

    .hero-slide .row > .col-lg-6:first-child {
        display: flex;
        flex-direction: column;
    }

    /* Zdjęcie produktu w slajdach 2 i 3 dalej wyśrodkowane w pionie (slajd 1 ma rząd zgrzewarek przy dolnej krawędzi). */
    .hero-slide .hero-area:not(.hero-area--infographic) .row > .col-lg-6:last-child {
        align-self: center;
    }

    .hero-slide .hero-content {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        padding-bottom: 44px;
    }

    .hero-slide .hero-content > h1,
    .hero-slide .hero-content > h2 {
        order: 0;
        min-height: 104px;
        margin-bottom: 16px;
    }

    .hero-slide .hero-content > p {
        order: 1;
        margin-bottom: 16px;
    }

    .hero-slide .hero-content > .hero-features {
        order: 2;
        margin-bottom: 0;
    }

    .hero-slide .hero-content > .hero-buttons {
        order: 3;
        margin: auto 0 0;
    }

    /* Przyciski mieszczą się w jednym wierszu w każdym slajdzie, pierwszy ma stałą szerokość (drugi stoi wtedy w tym samym miejscu). */
    .hero-slide .hero-content > .hero-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .hero-slide .hero-content > .hero-buttons > a {
        padding: 12px 18px;
        font-size: 15px;
        white-space: nowrap;
        margin-left: 0;
    }

    .hero-slide .hero-content > .hero-buttons > a:first-child {
        min-width: 190px;
        text-align: center;
    }

    .hero-slide .hero-content > p {
        order: 2;
        margin-bottom: 16px;
    }

    .hero-slide .hero-content > .hero-features {
        order: 3;
        margin-bottom: 0;
    }

    /* Zgrzewarki na samym dole hero (bez dolnego paddingu slajdu), szerszy rząd: wychodzi poza kolumnę w prawo i w lewo,
       żeby każda była jak największa, ale nie sięga napisów infografiki u góry. */
    .hero-area--infographic {
        padding-bottom: 0;
    }

    .hero-area--infographic .row > .col-lg-6:last-child {
        align-self: flex-end;
    }

    /* Zgrzewarki ≥ 30% większe niż wcześniej (224 → ok. 290 px): rząd ma ok. 980 px szerokości, więc zaczyna się już w kolumnie
       tekstu. Tekst slajdu jest dlatego zwężony (max 400 px, 3 linie tytułu), żeby się nie stykał ze zgrzewarkami.
       Liczone od kontenera (stała szerokość ≥ 1400 px), nie od okna. */
    .hero-area--infographic .hero-content {
        max-width: 412px;   /* 190 + 10 + 200,4 px przycisków po polsku musi się zmieścić w jednym wierszu (400 px było o ułamek za mało) */
    }

    /* Slajd 1: tytuł w lewej kolumnie razem z opisem — blok (tytuł, opis, przyciski) stoi na dole, a góra zostaje wolna dla ikon z obrazu.
       Tytuł dostaje margines auto (wypycha cały blok w dół), zawija się zwykle (3 linie w kolumnie 400 px). */
    .hero-area--infographic .hero-content > h1 {
        width: auto;
        min-height: 0;
        margin-top: 0;
        margin-bottom: 16px;
        font-size: 38px;
        white-space: normal;
    }

    /* Tytuł stoi u góry kolumny, a opis i przyciski są wypchnięte na dół (margines auto na opisie). */
    .hero-area--infographic .hero-content > p {
        margin-top: auto;
        max-width: 372px;   /* opis nie może wchodzić pod pierwszą zgrzewarkę (długie tłumaczenia, np. niemieckie) */
        margin-bottom: 20px;
    }

    .hero-area--infographic .hero-content > .hero-buttons {
        margin-top: 0;
    }

    /* Przyciski w jednym wiersze lub równo jeden pod drugim (flex + gap); stary margines 15 px na „Skontaktuj się z nami” przesuwał go w bok po zawinięciu. */
    .hero-area--infographic .hero-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 24px;
    }

    .hero-area--infographic .hero-buttons .btn-outline {
        margin-left: 0;
    }

    .hero-area--infographic .hero-buttons a {
        padding: 12px 20px;
    }

    .hero-area--infographic .hero-image--lineup {
        margin-right: -78px;
        margin-left: -350px;
    }
}

/* Slajd 3: środek zdjęcia (siodło elektrooporowe na rurze) nie może być zasłonięty przez zgrzewarkę.
   Zgrzewarka jest przesunięta w lewo, a zdjęcie tła w prawo; oba przesunięcia liczone od środka, bo kontener ma stałą szerokość
   niezależnie od szerokości okna powyżej 1400 px (kontener Bootstrapa 1320 px; stąd calc(50% + …), a nie sam procent). Tylko układ dwukolumnowy. */
@media (min-width: 992px) {
    .hero-area--zk90 .hero-image--product {
        transform: translateX(-180px);
    }

    .hero-area--zk90::after {
        left: calc(50% + 425px);
    }
}

/* Na wąskich ekranach (kolumny jedna pod drugą) hero jest wysokie, więc dopasowanie do wysokości dawałoby gigantyczne,
   nierozpoznawalne tło. Tam zdjęcie leży u dołu na całą szerokość (za zdjęciem zgrzewarki) i wygasa ku górze. */
@media (max-width: 991px) {
    .hero-area--photo::after {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: auto;
        transform: none;
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 22%, #000 55%);
        mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 22%, #000 55%);
    }
}

.hero-area--photo .hero-slide-title {
    margin-bottom: 18px;
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}

/* Lista cech ZK160PRO */
.hero-features {
    display: grid;
    gap: 10px;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}

.hero-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 17px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.94);
}

.hero-features li i {
    flex: 0 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border-radius: 50%;
    background-image: linear-gradient(180deg, #f0323a 0%, var(--primary-color) 100%);
    color: #fff;
    font-size: 11px;
}

.hero-image--product img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 480px;
    margin: 0 auto;
}

@media (max-width: 991px) {
    .hero-area--photo .hero-slide-title {
        font-size: 29px;
    }

    .hero-image--product img {
        max-height: 340px;
    }

    .hero-features li {
        font-size: 16px;
    }
}

/* Kropki przełączania slajdów */
.hero-slider-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    z-index: 5;
    display: flex;
    justify-content: center;
    gap: 10px;
    pointer-events: none;
}

.hero-slider-dots button {
    pointer-events: auto;
    width: 12px;
    height: 12px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: width 0.3s var(--mt-ease), background-color 0.3s var(--mt-ease);
}

.hero-slider-dots button:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

.hero-slider-dots button.is-active {
    width: 32px;
    background-color: var(--primary-color);
}

.hero-slider-dots button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* Infografika na telefonie: jak pozostałe zdjęcia tła — u dołu na całą szerokość (reguła desktopowa powyżej jest późniejsza w pliku,
   więc bez tego nadpisałaby układ mobilny). */
@media (max-width: 991px) {
    .hero-area--infographic::after {
        /* Panorama 4:1 na wąskim ekranie: cover z wysokością 60% hero pokazuje środkowy wycinek (rury z ikonami) zamiast cienkiego paska. */
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60%;
        background: var(--hero-photo) 50% 62% / cover no-repeat;
        transform: none;
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 22%, #000 55%);
        mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 22%, #000 55%);
        -webkit-mask-composite: source-over;
        mask-composite: add;
    }
}

/* ----- Hero na telefonie: tekst nad zdjęciem, przyciski pod zdjęciem ----- */
/* Bez zmian w HTML: kolumny i blok treści dostają display: contents, dzięki czemu nagłówki, opis, lista, zdjęcie i przyciski
   stają się bezpośrednimi dziećmi wiersza i można je uporządkować własnym order. Bootstrap daje kolumnom padding 12 px,
   który przy display: contents znika — wraca jako padding dzieci. Dotyczy układu jednokolumnowego (< 992 px). */
@media (max-width: 991px) {
    .hero-slide .row {
        display: flex;
        flex-direction: column;
        /* Wszystkie slajdy mają wysokość najwyższego (ZK90PRO) — krótsze mają treść pośrodku, a nie z pustym pasem na dole. */
        justify-content: center;
    }

    .hero-slide .row > .col-lg-6,
    .hero-slide .hero-content {
        display: contents;
    }

    .hero-slide .row .hero-content > *,
    .hero-slide .row .hero-image {
        width: 100%;
        padding-right: 12px;
        padding-left: 12px;
    }

    .hero-slide .row .hero-image {
        order: 1;
    }

    .hero-slide .row .hero-buttons {
        order: 2;
        margin-top: 4px;
    }

    /* Lista cech do lewej (reszta hero na telefonie jest wyśrodkowana) — wielolinijkowe pozycje nie powinny być centrowane. */
    .hero-features {
        text-align: left;
    }
}

/* ----- Hero, slajd 1: cztery zgrzewarki w rzędzie po prawej ----- */
/* Zamiast jednego zdjęcia grupowego: małe, osobne zdjęcia obok siebie (lekko zachodzą na siebie), żeby nie zasłaniały infografiki w tle. */
.hero-lineup {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hero-lineup li {
    /* Docelowo 360 px (+60% względem wcześniejszych 224 px; zgrzewarki mają być jak największe), ale kurczą się, gdy kolumna jest węższa (okna 992–1399 px). */
    flex: 0 1 360px;
    min-width: 0;
}

.hero-lineup li + li {
    /* Piksele, nie %: procent marginesu liczy się od szerokości całego rzędu, nie zdjęcia (zdjęcia mają przezroczyste marginesy po ok. 15% — walizki się stykają). */
    margin-left: -130px;
}

.hero-lineup a {
    display: block;
    text-align: center;
    text-decoration: none;
    transition: transform 0.3s var(--mt-ease);
}

.hero-lineup a:hover {
    transform: translateY(-6px);
}

.hero-lineup img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none !important;
}

/* Zamiast ciemnego cienia (przygaszał napisy infografiki) — jasna, delikatna łuna: żółte walizki zlewały się z żółtą rurą i trawą.
   Dwie warstwy: ciaśniejsza nadaje kontur, szersza daje miękkie odcięcie od tła. */
.hero-area .hero-lineup img {
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 46px rgba(255, 255, 255, 0.28)) !important;
}

/* Okna 992–1399 px: kontener jest węższy niż 1320 px, więc rząd zgrzewarek liczę z szerokości okna, tak by zaczynał się tuż za tekstem
   (max 400 px od lewej krawędzi kontenera + 20 px luzu) i sięgał prawej krawędzi okna. Szerokość rzędu = vw/2 + stała; jedna zgrzewarka
   to 1/2,92 tego (cztery z zachodzeniem 36%). */
@media (min-width: 992px) and (max-width: 1199px) {
    .hero-area--infographic .hero-content h1 {
        font-size: 34px;
    }

    .hero-lineup li {
        flex: 0 1 calc((50vw + 48px) * 0.342);
    }

    .hero-lineup li + li {
        margin-left: calc((50vw + 48px) * -0.1233);
    }

    .hero-area--infographic .hero-image--lineup {
        margin-left: -60px;
        margin-right: calc(468px - 50vw);
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .hero-lineup li {
        flex: 0 1 calc((50vw + 138px) * 0.342);
    }

    .hero-lineup li + li {
        margin-left: calc((50vw + 138px) * -0.1233);
    }

    .hero-area--infographic .hero-image--lineup {
        margin-left: -150px;
        margin-right: calc(558px - 50vw);
    }
}

/* Telefon: cztery w jednym rzędzie byłyby za małe — siatka 2 × 2. */
@media (max-width: 991px) {
    .hero-lineup {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px 0;
    }

    .hero-lineup li + li {
        margin-left: 0;
    }
}

/* =====================================================================
 * STRONA KONTAKTU — karty zamiast szarych ramek (Generalny dystrybutor, Serwis i kalibracja), ikony w kółkach,
 * formularz jako biała karta, mapa z zaokrąglonymi rogami. Klasy .contact-info / .contact-form-section występują tylko tu.
 * ===================================================================== */
.contact-info {
    background: linear-gradient(180deg, #ffffff 0%, #f4f4f5 100%);
}

/* Nagłówki grup („Sprzedaż:”, „Serwis, kalibracja i doradztwo techniczne:”): kreska akcentu zamiast dwukropka na gołym tekście */
.contact-info .distributor-info > h3,
.contact-info .service-info > h3 {
    position: relative;
    margin-bottom: 26px;
    padding-bottom: 14px;
    font-size: 26px;
    color: var(--mt-night);
}

.contact-info .distributor-info > h3::after,
.contact-info .service-info > h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 4px;
    border-radius: 4px;
    background-image: linear-gradient(90deg, var(--mt-signal-deep), var(--mt-night));
}

/* ----- Generalny dystrybutor: karta z logo ----- */
.contact-info .distributor-box {
    position: relative;
    padding: 34px 40px;
    background-color: #fff;
    border: 1px solid var(--mt-card-border);
    border-radius: 24px;
    box-shadow: var(--mt-shadow-md);
}

.contact-info .distributor-box::before {
    content: "";
    position: absolute;
    top: 24px;
    bottom: 24px;
    left: 0;
    width: 6px;
    border-radius: 0 6px 6px 0;
    background-image: linear-gradient(180deg, var(--mt-signal-deep), var(--mt-night));
}

.contact-info .distributor-box-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px 40px;
}

.contact-info .distributor-text h4 {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-color);
}

.contact-info .distributor-text p {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
}

.contact-info .distributor-text strong {
    font-size: 19px;
    color: var(--mt-night);
}

.contact-info .distributor-logo a {
    display: block;
    transition: transform 0.3s var(--mt-ease);
}

.contact-info .distributor-logo a:hover {
    transform: scale(1.04);
}

.contact-info .distributor-logo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 96px;
}

/* ----- Serwis i kalibracja: trzy karty z ikonami w kółkach (bez wspólnej szarej ramki) ----- */
.contact-info .service-box {
    padding: 0;
    background: none;
    border: 0;
}

.contact-info .service-box > .row {
    --bs-gutter-y: 24px;
}

.contact-info .contact-box {
    position: relative;
    height: 100%;
    padding: 30px 28px;
    text-align: center;
    background-color: #fff;
    border: 1px solid var(--mt-card-border);
    border-radius: 22px;
    box-shadow: var(--mt-shadow-sm);
    transition: transform 0.3s var(--mt-ease), box-shadow 0.3s var(--mt-ease), border-color 0.3s var(--mt-ease);
}

.contact-info .contact-box:hover {
    transform: translateY(-4px);
    box-shadow: var(--mt-shadow-lg);
    border-color: rgba(224, 24, 32, 0.25);
}

.contact-info .contact-box .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background-image: linear-gradient(180deg, #f0323a 0%, var(--primary-color) 100%);
    box-shadow: 0 8px 20px rgba(224, 24, 32, 0.3);
}

.contact-info .contact-box .icon i {
    font-size: 24px;
    color: #fff;
}

.contact-info .contact-box h4 {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-color);
}

.contact-info .contact-box p {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--mt-night);
}

.contact-info .contact-box p a {
    font-weight: 600;
    color: var(--mt-night);
    text-decoration-color: var(--primary-color);
    text-underline-offset: 3px;
}

.contact-info .contact-box p a:hover {
    color: var(--mt-red-text);
}

/* ----- Formularz jako biała karta, mapa z zaokrąglonymi rogami ----- */
.contact-form-section .contact-form {
    padding: 32px;
    background-color: #fff;
    border: 1px solid var(--mt-card-border);
    border-radius: 24px;
    box-shadow: var(--mt-shadow-md);
}

.contact-form-section .form-control {
    padding: 14px 16px;
    background-color: #fafafa;
}

.contact-form-section .form-control:focus {
    background-color: #fff;
}

.contact-form-section .map-area {
    height: 100%;
    min-height: 450px;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: var(--mt-shadow-lg);
}

.contact-form-section .map-area iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 450px;
}

@media (max-width: 576px) {
    .contact-info .distributor-box {
        padding: 26px 22px 26px 26px;
    }

    .contact-form-section .contact-form {
        padding: 22px;
    }
}

/* =====================================================================
 * UJEDNOLICENIE KOLORÓW PODSTRON (serwis, pliki do pobrania, dobór czytnika kodów, parametry zgrzewarek)
 * Wygenerowane z arkuszy services.css, downloads.css, help_barcode_reader.css i welder-params.css: tylko deklaracje kolorystyczne,
 * w których były kolory spoza palety (niebieski #3498db/#007bff, zielony, granat #2c3e50…), zamienione na czerwień, czerń i szarości
 * strony. Selektory mają prefiks `body`, bo te arkusze ładują się po tym pliku. Przy zmianie palety trzeba je zregenerować.
 * Mapowanie: niebieski/zielony/czerwony Bootstrapa → czerwień marki (tekst #c4121a, tło #e01820, hover #b8121a), granat → czerń,
 * zielony zostaje tylko na „ptaszkach” list cech.
 * ===================================================================== */
/* --- z services.css (35 regu�) --- */
body .services-eplatform-intro {
    border-left: 4px solid #e01820;
    background: #f5f5f6;
    color: #121315;
}

body .services-eplatform-intro strong {
    color: #121315;
}

body .services-create-order-btn {
    border: 2px solid #e01820;
    background-color: #e01820;
}

body .services-create-order-btn:hover,
body .services-create-order-btn:focus {
    background-color: #b8121a;
    border-color: #b8121a;
}

body .services-create-order-btn:active {
    background-color: #b8121a;
}

body .service-icon {
    background: #f5f5f6;
}

body .service-icon .fa-tools {
    color: #c4121a;
}

body .service-icon .fa-balance-scale {
    color: #c4121a;
}

body .service-icon .fa-sync-alt {
    color: #c4121a;
}

body .service-icon .fa-wrench {
    color: #c4121a;
}

body .service-icon .fa-truck {
    color: #c4121a;
}

body .service-icon .fa-cogs {
    color: #c4121a;
}

body .eplatform-features {
    background: #f5f5f6;
}

body .eplatform-features ul li i {
    color: #15803d;
}

body .process-icon {
    background: #f5f5f6;
}

body .faq-area {
    background: linear-gradient(135deg, #f5f5f6 0%, #f5f5f6 100%);
}

body .accordion-button:not(.collapsed) {
    background: #e01820;
}

body .faq-icon {
    color: #c4121a;
}

body .feature-icon {
    background: #f5f5f6;
    color: #c4121a;
}

body .floating-badge {
    background: #e01820;
}

body .hero-section {
    background-color: #121315;
}

body .section-tag {
    background-color: #e01820;
}

body .service-icon {
    color: #c4121a;
}

body .service-card h3 {
    color: #121315;
}

body .new-badge {
    background: #e01820;
}

body .feature-icon {
    color: #c4121a;
}

body .feature-item h5 {
    color: #121315;
}

body .step-number {
    background-color: #e01820;
}

body .step-icon {
    color: #121315;
}

body .process-step h4 {
    color: #121315;
}

body .accordion-button {
    color: #121315;
    background-color: #f5f5f6;
}

body .accordion-button:not(.collapsed) {
    color: #c4121a;
    background-color: #f5f5f6;
}

body .cta-section {
    background-color: #121315;
}

body .link-highlight {
    color: #c4121a;
    border: 2px solid #e01820;
}

body .link-highlight:hover {
    background-color: #b8121a;
}

/* --- z downloads.css (5 regu�) --- */
body .download-section h3 {
    border-bottom: 2px solid #e01820;
}

body .download-list a {
    color: #c4121a;
}

body .download-list a:hover {
    color: #c4121a;
}

body .download-icon {
    color: #c4121a;
}

body .advantage-icon {
    color: #c4121a;
}

/* --- z help_barcode_reader.css (29 regu�) --- */
body .help-description {
    color: #121315;
    border-left: 4px solid #e01820;
}

body .category-title {
    color: #121315;
    border-bottom: 3px solid #e01820;
}

body .category-models {
    color: #121315;
}

body .model-zk90eco {
    color: #c4121a;
}

body .model-zk160eco {
    color: #c4121a;
}

body .model-zk250pro {
    color: #c4121a;
}

body .model-zk90pro {
    color: #c4121a;
}

body .model-zk160pro {
    color: #c4121a;
}

body .model-zk315pro {
    color: #c4121a;
}

body .section-subtitle {
    color: #121315;
    border-bottom: 3px solid #e01820;
}

body .device-connector-group {
    background: linear-gradient(135deg, #f5f5f6 0%, #ffffff 100%);
}

body .device-connector-group::before {
    color: #c4121a;
}

body .device-info h4,
body .connector-info h4 {
    color: #121315;
}

body .device-info p,
body .connector-info p {
    color: #121315;
}

body .connector-badge.rs232 {
    background: linear-gradient(135deg, #e01820 0%, #e01820 100%);
}

body .connector-badge.xlr {
    background: linear-gradient(135deg, #e01820 0%, #e01820 100%);
}

body .connector-badge.square {
    background: linear-gradient(135deg, #e01820 0%, #e01820 100%);
}

body .connector-card.rs232 {
    border-left: 4px solid #e01820;
}

body .connector-card.xlr {
    border-left: 4px solid #e01820;
}

body .connector-card.square {
    border-left: 4px solid #e01820;
}

body .or-divider {
    color: #121315;
}

body .info-section {
    background: linear-gradient(135deg, #f5f5f6 0%, #fff 100%);
    border-left: 4px solid #e01820;
}

body .info-section .info-icon {
    background: #e01820;
}

body .info-section .info-text {
    color: #121315;
}

body .requirements-title {
    color: #121315;
    border-bottom: 2px solid #e01820;
}

body .requirements-list {
    color: #121315;
}

body .requirements-list li {
    background: #f5f5f6;
    border-left: 4px solid #e01820;
}

body .requirements-list li:hover {
    background: #f5f5f6;
}

body .requirements-list li:before {
    color: #c4121a;
}

/* --- z welder-params.css (1 regu�) --- */
body .param-highlight {
    color: #c4121a;
}

/* Etykieta „Zgrzewarki elektrooporowe – ponad 30 lat na rynku” na zdjęciach tła: ciemna pastylka zamiast cienia tekstu
   (cienia w tytule hero nie chcemy, a na jasnym, nierównym tle sam czerwony tekst jest nieczytelny). */
.hero-area--photo .section-title h6 {
    display: inline-block;
    padding: 5px 18px;
    border-radius: 999px;
    background-color: rgba(10, 11, 12, 0.62);
    text-shadow: none;
}

/* ===== Ruch ograniczony na życzenie użytkownika (WCAG 2.3.3) ===== */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Nazwy modeli w tytułach hero: ZK90PRO żółta, ZK160PRO jasnoniebieska (PHP owija nazwę w .hero-model) */
.hero-area--photo .hero-model--yellow {
    color: #ffd21f;
}

.hero-area--photo .hero-model--lightblue {
    color: #7cc7ff;
}

.hero-area--photo .hero-model--orange {
    color: #ff9a3c;
}

/* Slajd 4 (ZK315PRO): zdjęcie trzech sieci (woda / kanalizacja / gaz) jest szerokie i symetryczne, więc zamiast „wyspy” za zgrzewarką
   rozciągam je na całą szerokość slajdu (cover). Lewy brzeg ciemnieje za tekstem, reszta zostaje czytelna dla zgrzewarki z prawej. */
@media (min-width: 992px) {
    .hero-area--zk315::after {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        transform: none;
        background:
            linear-gradient(90deg, rgba(10, 11, 12, 0.62) 0%, rgba(10, 11, 12, 0.42) 30%, rgba(10, 11, 12, 0.05) 52%, rgba(10, 11, 12, 0) 100%),
            var(--hero-photo) center 72% / cover no-repeat;
        filter: brightness(0.9) saturate(1.05);
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* Długie tłumaczenia (np. niemieckie „Elektroschweißgeräte”, „Entdecken Sie unser Angebot”) nie mogą wychodzić poza kolumnę tekstu hero:
   tytuły łamią się z dzieleniem wyrazów (lang jest ustawiony na <html>), a przyciski nie kurczą się poniżej szerokości napisu —
   zamiast tego zawijają się do drugiego wiersza (kontener .hero-buttons ma flex-wrap). */
.hero-slide .hero-content > h1,
.hero-slide .hero-content > h2 {
    hyphens: auto;
}

/* „Elektroschweißgeräte” (20 liter) przy 38 px ma ok. 430 px, a kolumna tekstu slajdu 1 ma 400 px; łamanie w środku wyrazu wyglądało gorzej
   niż mniejsza czcionka, więc niemiecki tytuł jest o 6 px mniejszy (ok. 365 px). */
@media (min-width: 992px) {
    :lang(de) .hero-area--infographic .hero-content > h1 {
        font-size: 32px;
    }
}

.hero-slide .hero-buttons a {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ----- Menu mobilne (nakładka na pełny ekran): większe logo, ciaśniej do pierwszej pozycji ----- */
/* Logo i „od 1995 r.” rysują pseudo-elementy .navbar-collapse (navbar-layout-fix.css): logo miało 120×30 px, a między nim a listą było
   ok. 100 px (margines logo 20 + napis przesunięty o top: 35 px + padding listy 40 px). Teraz logo 200×56 px, napis tuż pod nim w normalnym
   przepływie, a lista zaczyna się 8 px niżej. */
@media (max-width: 991px) {
    .header-area .navbar-collapse::before {
        width: 200px;
        height: 56px;
        margin-bottom: 8px;
    }

    /* „od 1995 r.” nie jest w menu mobilnym potrzebne (logo w nagłówku strony ma ten napis); ::after lądował pod listą, więc go ukrywam. */
    .header-area .navbar-collapse::after {
        display: none;
    }

    .header-area .navbar-collapse .navbar-nav {
        padding-top: 8px;
    }
}