/*
Theme Name: Kasy Fiskalne Zborała (lub Twoja nazwa)
Theme URI: https://example.com/twoj-motyw/
Author: Twoje Imię / DigiMakers
Author URI: https://digimakers.pl
Description: Custom theme based on the Zborała example.
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zborala-kasy
Tags: business, corporate, custom
*/

/* ==========================================================================
   0. Reset i Podstawy (opcjonalne, ale zalecane)
   ========================================================================== */
   *,
   *::before,
   *::after {
     box-sizing: border-box; /* Lepsze zarządzanie modelem pudełkowym */
   }
   
/* ==========================================================================
    1. Globalne Style i Podstawy
    ========================================================================== */

body:not(.front-page) .site-main {
        margin-top: 75px; /* Dopasuj wysokość do swojego nagłówka */
    }
    
    @media (max-width: 767px) {
        body:not(.front-page) .site-main {
            margin-top: 10px; /* Możesz dostosować w zależności od wysokości nagłówka */
        }
    }


body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    margin: 0;
    padding-top: 100px; /* <<< WAŻNE: DOSTOSUJ DO WYSOKOŚCI HEADERA! */
    color: #343a40;
    font-size: 16px;
    line-height: 1.6;
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    max-width: 1140px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

h1, h2, h3, h4, h5, h6 {
    color: #2f3a41;
    margin-top: 0;
    margin-bottom: 0.75em;
    font-weight: 600;
    line-height: 1.3;
}

h1 { font-size: 2.8em; }
h2 { font-size: 2.2em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.2em; }
h5 { font-size: 1.1em; }


p { margin-top: 0; margin-bottom: 1em; }

a { color: #da251d; text-decoration: none; transition: color 0.3s ease; }
a:hover { color: #2f3a41; }

.btn { display: inline-block; background-color: #da251d; color: #ffffff; padding: 10px 25px; border-radius: 5px; font-weight: bold; text-align: center; border: none; transition: background-color 0.3s ease, transform 0.2s ease; }
.btn:hover { background-color: #c82333; color: #ffffff; transform: translateY(-2px); }
.btn.btn-secondary { background-color: #6c757d; color: #ffffff; }
.btn.btn-secondary:hover { background-color: #5a6268; color: #ffffff; }

.section-title { text-align: center; font-size: 2.2em; color: #2f3a41; margin-bottom: 50px; position: relative; padding-bottom: 15px; }
.section-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 4px; background-color: #da251d; }

/* ==========================================================================
    2. Nagłówek (Header)
    ========================================================================== */
.site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background-color: #ffffff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); padding: 20px 0; border-bottom: 4px solid #da251d;}
body.admin-bar .site-header { top: 32px; }

.header-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.site-branding { flex-shrink: 0; padding: 0; margin: 0; }
.site-branding img { max-height: 100px; width: auto; display: block; padding: 0; }

.header-right-content { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.top-contact-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white; /* tło całego bloku */
    padding: 10px 20px;
    gap: 0;
  }
  
  .emergency-contact-tag {
    background-color: #2c353b;
    color: #fff;
    padding: 12px 20px;
    clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
    font-weight: bold;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    height: 100%;
  }
  
  .emergency-contact-tag p {
    margin: 0;
    white-space: nowrap;
  }
  
  .contact-separator-icon {
    width: 50px;
    height: auto;
    margin: 0 10px;
  }
  
  .phone-number-block {
    background-color: #d73e30;
    color: #fff;
    padding: 12px 20px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2rem;
    clip-path: polygon(5% 0, 100% 0, 100% 100%, 0% 100%);
    display: flex;
    align-items: center;
    white-space: nowrap;
  }
  
  

.main-navigation { display: flex; align-items: center; gap: 30px; position: relative; z-index: 50; }
.main-navigation ul#primary-menu { display: flex; align-items: center; gap: 20px; list-style: none; padding: 0; margin: 0; }
.main-navigation ul#primary-menu > li { margin: 0; padding: 0; position: relative; }
.main-navigation ul#primary-menu > li > a { text-decoration: none; color: #343a40; font-weight: 600; font-size: 1.1em; text-transform: uppercase; transition: color 0.3s ease; display: block; padding: 12px 12px; position: relative; z-index: 1; }
.main-navigation ul#primary-menu > li > a:hover { color: #da251d; }
.main-navigation ul li.menu-item-has-children > a { padding-right: 20px !important; padding-left: 12px; padding-top: 12px; padding-bottom: 12px; }
.main-navigation ul li.menu-item-has-children > a::after { content: '▼'; font-size: 0.7em; color: #da251d; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); transition: transform 0.2s ease-in-out; pointer-events: none; z-index: 2; }
.main-navigation ul li.menu-item-has-children:hover > a::after { transform: translateY(-50%) rotate(180deg); }

header#masthead nav#site-navigation ul#primary-menu > li > ul.sub-menu { display: none; position: absolute; top: 100%; left: 0; background-color: #ffffff; min-width: 240px; z-index: 1000; border: none; border-top: 3px solid #da251d; box-shadow: 0 8px 16px rgba(0,0,0,0.15); border-radius: 0 0 5px 5px; padding: 8px 0; margin: 0; list-style: none; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.25s ease-out, transform 0.25s ease-out, visibility 0s 0.25s; }
header#masthead nav#site-navigation ul#primary-menu > li.menu-item-has-children:hover > ul.sub-menu { display: block; opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
.main-navigation ul ul.sub-menu li { margin: 0 !important; padding: 0 !important; width: 100%; list-style-type: none !important; position: static; }
.main-navigation ul ul.sub-menu li a { padding: 10px 20px; color: #495057; font-size: 0.9em; text-transform: none; font-weight: 500; white-space: nowrap; display: block; border-bottom: none; transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease; line-height: 1.5; }
.main-navigation ul ul.sub-menu li:last-child a { border-bottom: none; }
.main-navigation ul ul.sub-menu li a:hover { background-color: #da251d; color: #ffffff; padding-left: 25px; }

.main-navigation .facebook-icon { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-size: 1.6em; color: #3b5998; transition: color 0.3s ease, opacity 0.3s ease; margin-left: 10px; line-height: 1; }
.main-navigation .facebook-icon:hover { color: #2f3a41; opacity: 0.8; }

/* W style.css */

/* ==========================================================================
   Style Menu Mobilnego (Przycisk Burgera i Panel)
   ========================================================================== */

   /* === 1. Czerwony krzyżyk po otwarciu === */
.mobile-menu-toggle.is-active .burger-line           {background:#da251d;}
.mobile-menu-toggle.is-active .burger-line:nth-child(2){opacity:0;}          /* środkowa znika */
.mobile-menu-toggle.is-active .burger-line:nth-child(1){                     /* górna ↘ */
    transform:translateY(8px) rotate(45deg);
}
.mobile-menu-toggle.is-active .burger-line:nth-child(3){                     /* dolna ↗ */
    transform:translateY(-8px) rotate(-45deg);
}

/* === 2. Gładkie wjazdy panelu === */
.mobile-menu-panel{
    /* stan startowy – lekko odsunięty i przygaszony */
    transform:translateX(-100%) scale(.94);
    opacity:0;
    transition:
        transform .45s cubic-bezier(.77,0,.175,1),
        opacity   .35s ease-out;
}
.mobile-menu-panel.is-open{
    /* końcowa pozycja */
    transform:translateX(0) scale(1);
    opacity:1;
}
/* drobny smaczek: opóźnij pojawianie się linków */
.mobile-menu-panel.is-open li{
    animation:menuLinkFade .4s forwards;
}
@keyframes menuLinkFade{
    from{opacity:0;transform:translateX(-12px);}
    to  {opacity:1;transform:translateX(0);}
}


/* Przycisk Burgera */
.mobile-menu-toggle {
    display: none; /* Domyślnie ukryty na desktopie */
    background: transparent;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 1050; /* Wyżej niż inne elementy headera */
    position: relative; /* Lub absolute względem header-inner */
    margin-left: auto; /* Aby był po prawej, jeśli .header-right-content jest ukryte */
}
.burger-icon {
    display: block;
    position: relative;
    width: 24px; /* Szerokość burgera */
    height: 18px; /* Wysokość burgera (3 linie * 2px + 2 * odstęp 6px) */
}
.burger-line {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px; /* Grubość linii */
    background-color: #333; /* Kolor linii burgera */
    border-radius: 1px;
    transition: all 0.3s ease-in-out;
}
.burger-line:nth-child(1) { top: 0; }
.burger-line:nth-child(2) { top: 50%; transform: translateY(-50%); }
.burger-line:nth-child(3) { bottom: 0; }

/* Styl burgera gdy menu jest otwarte (klasa .is-active dodawana przez JS) */
.mobile-menu-toggle.is-active .burger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg); /* 8px = (18px - 2px) / 2 */
}
.mobile-menu-toggle.is-active .burger-line:nth-child(2) {
    opacity: 0;
}
.mobile-menu-toggle.is-active .burger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


/* Panel Menu Mobilnego */
.mobile-menu-panel {
    display: none; /* JS będzie to zmieniać na 'flex' lub 'block' */
    position: fixed;
    top: 0; /* Od góry strony */
    left: 0; /* Od lewej */
    width: 100%;
    height: 100vh; /* Pełna wysokość ekranu */
    background-color: rgba(47, 58, 65, 0.98); /* Ciemne tło z lekką przezroczystością */
    z-index: 1040; /* Poniżej burgera, ale nad resztą strony */
    overflow-y: auto; /* Scroll, jeśli menu jest długie */
    padding-top: 100px; /* Miejsce na header, jeśli header jest fixed */
    flex-direction: column; /* Użyjemy flex do centrowania */
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-100%); /* Startowo wysunięte w lewo */
    transition: opacity 0.4s ease, visibility 0s 0.4s, transform 0.4s ease;
}
.mobile-menu-panel.is-open {
    display: flex; /* lub block */
    opacity: 1;
    visibility: visible;
    transform: translateX(0); /* Wsuwa się na miejsce */
    transition-delay: 0s;
}

.main-navigation-mobile ul#primary-menu-mobile {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0; /* Odstęp pod listą linków */
}
.main-navigation-mobile ul#primary-menu-mobile li {
    margin-bottom: 0; /* Usuwamy margines między LI */
}
.main-navigation-mobile ul#primary-menu-mobile li a {
    display: block;
    padding: 15px 20px; /* Większy padding dla łatwego klikania */
    color: #ffffff; /* Biały tekst */
    font-size: 1.3em; /* Większy font */
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 500; /* Lżejszy niż w desktopie */
    border-bottom: 1px solid rgba(255,255,255,0.1);
    transition: background-color 0.2s ease;
}
.main-navigation-mobile ul#primary-menu-mobile li:last-child a {
    border-bottom: none;
}
.main-navigation-mobile ul#primary-menu-mobile li a:hover {
    background-color: rgba(255,255,255,0.1);
}
/* Style dla sub-menu w menu mobilnym (jeśli je masz) */
.main-navigation-mobile ul ul.sub-menu {
    list-style: none;
    padding-left: 20px; /* Wcięcie dla sub-menu */
    margin-top: 5px;
    margin-bottom: 10px;
    background-color: transparent; /* Usuwamy tło z desktopowego sub-menu */
    border: none;
    box-shadow: none;
    position: static; /* Sub-menu w normalnym przepływie */
    display: block !important; /* Zawsze widoczne, jeśli rodzic jest rozwinięty */
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    min-width: auto;
}
.main-navigation-mobile ul ul.sub-menu li a {
    font-size: 1em; /* Mniejszy font dla sub-linków */
    padding: 10px 15px;
    color: #e0e0e0; /* Jaśniejszy tekst sub-linków */
    font-weight: 400;
    text-transform: none; /* Normalna wielkość liter */
}
.main-navigation-mobile ul ul.sub-menu li a:hover {
    background-color: rgba(255,255,255,0.15);
    color: #fff;
}


/* Dodatkowe elementy w menu mobilnym */
.mobile-menu-extra {
    margin-top: 20px;
}
.btn-mobile-call { /* Styl dla przycisku "Zadzwoń" */
    background-color: #da251d;
    color: #fff;
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
}

.mobile-menu-toggle.is-active{
    overflow: hidden;
}

/* W style.css - w sekcji 11. Responsywność */

/* --- Tablety (np. 991px) --- */
@media (max-width: 991px) {
    /* ... inne style dla tabletów ... */

    /* Header na Tablecie */
    .header-right-content .top-contact-wrapper {
        display: none; /* <<< UKRYJ górny pasek kontaktowy na tabletach i mniejszych */
    }
    .main-navigation {
        display: none; /* <<< UKRYJ nawigację desktopową */
    }
    .mobile-menu-toggle {
        display: block; /* <<< POKAŻ przycisk burgera */
        margin-right: 0; /* Jeśli .header-right-content jest ukryte */
        margin-left: auto; /* Wypchnij do prawej jeśli .site-branding jest po lewej */
    }
    .header-inner {
        /* Upewnij się, że jest miejsce na logo i burger */
        justify-content: space-between; /* Logo lewo, burger prawo */
    }
    .header-right-content {
        /* Można usunąć, jeśli cała prawa strona to tylko nav, który jest ukryty */
        /* display: none; */
    }
}

/* --- Telefony komórkowe (np. 767px) --- */
@media (max-width: 767px) {
    /* ... inne style dla telefonów ... */

    /* Header na Telefonie (style z tabletu są dziedziczone) */
    .site-branding img { max-height: 50px; } /* Mniejsze logo */

    /* Nie potrzebujemy tu specjalnych reguł dla .main-navigation i .mobile-menu-toggle, */
    /* bo są już ustawione w @media (max-width: 991px) */

    /* Panel menu mobilnego - dostosuj padding jeśli header ma inną wysokość na mobile */
    /* .mobile-menu-panel { padding-top: 80px; } */ /* Jeśli header ma 80px wysokości na mobile */
}

/* ==========================================================================
    3. Sekcja Hero
    ========================================================================== */
    .hero {
        position: relative; /* nic nie zmienia, tylko pozwala na pozycjonowanie tła */
        overflow: hidden;
      }
      
      .hero-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        z-index: -1;
        pointer-events: none; /* żeby nie zasłaniał przycisków ani treści */
      }
.hero .container { display: flex; justify-content: space-between; align-items: center; gap: 30px; width: 90%; }
.hero-text { flex-basis: 50%; z-index: 2; position: relative; opacity: 0; animation: slideInLeft 0.8s 0.2s ease-out forwards; }
.hero-image { flex-basis: 50%; text-align: right; z-index: 1; position: relative; opacity: 0; animation: slideInRight 0.9s 0.3s ease-out forwards; }
.hero-image img { display: block; padding: 0; max-width: 100%; filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3)); }
.hero h1 { font-size: 3.2em; line-height: 1.2; margin-bottom: 0.5em; color: #fff; animation: none; opacity: 1; }
.hero p { font-size: 1.15em; margin-bottom: 1.5em; max-width: 550px; color: #f8f9fa; animation: none; opacity: 1; }
.hero .btn { background-color: #da251d; color: #333333; padding: 12px 25px; border-radius: 5px; font-weight: bold; display: inline-block; border: none; transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease; animation: none; opacity: 1; }
.hero .btn:hover { background-color: #ffffff; color: #da251d !important;}

   /* ==========================================================================
      4. Sekcja Logotypów Partnerów
      ========================================================================== */
      .logos-bar { padding: 40px 0; background-color: #f8f9fa; border-top: 1px solid #e9ecef; border-bottom: 1px solid #e9ecef; }
      .logos-bar .intro-text-wrapper { max-width: 1140px; width: 90%; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; margin-bottom: 25px; }
      .logos-intro-text { text-align: left; margin: 0; font-size: 1.8em; color: #2f3a41; font-weight: 700; line-height: 1.3; }
      .logos-intro-text .highlight-red { color: #da251d; }
      .logos-bar .container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 80px; max-height: none; width: 100%; margin-top: 20px; }
      .logos-bar .container img { height: 60px; width: auto; max-width: 180px; object-fit: contain; filter: grayscale(100%); opacity: 0.7; transition: filter 0.4s ease, opacity 0.4s ease, transform 0.3s ease; padding: 0; }
      .logos-bar .container img:hover { filter: grayscale(0%); opacity: 1; transform: scale(1.05); }

      /* ================= logos-bar ================= */
.logos-bar {
	/* usuń domyślny max-width:100%, bo psuł auto-centrowanie */
	padding:40px 0;
}

.logos-bar .container{
	/* FLEX: wymusi wyśrodkowanie siatki */
	display:flex;
	justify-content:center;   /* poziomo */
	align-items:center;       /* pionowo (przy stałej wysokości) */
	flex-wrap:wrap;
	gap:60px;                 /* odstępy desktop */
	margin:0 auto;            /* faktyczne centrowanie wierszy */
	max-width:1140px;         /* szerokość taka sama jak reszta */
	width:90%;
}

/* logotypy — bez zbędnego paddingu i marginesów */
.logos-bar .container img{
	height:60px;
	width:auto;
	object-fit:contain;
	filter:grayscale(100%);
	opacity:.8;
	transition:filter .3s,opacity .3s,transform .25s;
	padding:0;               /* <-- tu bywały białe krawędzie */
}

/* delikatny hover */
.logos-bar .container img:hover{
	filter:none;
	opacity:1;
	transform:scale(1.07);
}

/* ====== RWD ====== */
@media(max-width:991px){
	.logos-bar .container{gap:40px;}
	.logos-bar .container img{height:48px;}
}
@media (max-width: 767px){
	.logos-bar{display:none !important;}
}

/* ==========================================================================
    5. Sekcja Bloków Produktowych/Funkcji
    ========================================================================== */
.product-features-section { padding: 0; background-color: #fff; }
.features-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; width: 100%; max-width: 100%; }
.feature-item { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 350px; background-size: cover; background-position: center center; background-repeat: no-repeat; text-decoration: none; color: #ffffff; overflow: hidden; transition: transform 0.3s ease; }
.feature-item:hover { transform: scale(1.02); }
.feature-item-1 { background-image: url('assets/images/kopiarka-sharp.avif'); }
.feature-item-2 { background-image: url('assets/images/dzierzawa.avif'); }
.feature-item-3 { background-image: url('assets/images/serwis.avif'); }

.feature-text-overlay { background-color: rgba(47, 58, 65, 0.85); padding: 25px 30px; width: 100%; box-sizing: border-box; position: relative; z-index: 2; transition: background-color 0.3s ease; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: 100px; }
.feature-item h2 { margin: 0; font-size: 1.6em; line-height: 1.3; font-weight: bold; color: #ffffff; }
.feature-item:hover .feature-text-overlay { background-color: rgba(218, 37, 29, 0.9); }
.feature-more-link {
   display: block;
   font-size: 0.9em;
   font-weight: bold;
   text-transform: uppercase;
   color: #ffffff;
   letter-spacing: 0.5px;
   opacity: 0;
   height: 0; /* Startowa wysokość 0 */
   overflow: hidden; /* Ukrywa treść, gdy height=0 */
   visibility: hidden; /* Ukrywa element, gdy nie jest widoczny */
   margin-top: 0;
   /* Przejście dla opacity, height, margin-top i visibility */
   transition: opacity 0.3s ease-in-out, height 0.3s ease-in-out, margin-top 0.3s ease-in-out, visibility 0s linear 0.3s;
   /* visibility zmienia się natychmiast po zakończeniu innych animacji */
   /* lub, jeśli chcesz, aby był od razu 'widoczny', ale pusty: transition-delay: 0s dla visibility */
}
.feature-item:hover .feature-more-link {
   opacity: 1;
   height: 1.2em; /* Konkretna wysokość docelowa dla animacji (wysokość jednej linii tekstu) */
   /* Jeśli tekst jest wieloliniowy, musisz ustawić odpowiednią wysokość */
   visibility: visible;
   margin-top: 10px;
   transition: opacity 0.3s ease-in-out, height 0.3s ease-in-out, margin-top 0.3s ease-in-out, visibility 0s linear 0s;
   /* visibility zmienia się natychmiast */
}

/* ==========================================================================
    6. Sekcja "O Nas (Rozbudowana)"
    ========================================================================== */
.about-detailed-section {
    padding: 80px 0;
    background-color: #ffffff;
    border-top: 1px solid #eee;
}

.section-title-left {
    text-align: left;
    font-size: 2.2em;
    color: #2f3a41;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 10px;
}
.section-title-left::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 4px;
    background-color: #da251d;
}

.about-detailed-content {
    display: flex;
    align-items: flex-start;
    gap: 60px;
}

.about-detailed-text {
    flex: 1.2;
    order: 1;
}
.about-detailed-text h3 {
    font-size: 1.5em;
    color: #343a40;
    margin-top: 0;
    margin-bottom: 15px;
}
.about-detailed-text h4 { /* Dla "Nasze Wyróżniki" */
    font-size: 1.3em;
    color: #2f3a41;
    margin-top: 1.8em;
    margin-bottom: 1em;
}
.about-detailed-text p {
    font-size: 1em;
    color: #495057;
    line-height: 1.7;
    margin-bottom: 1.2em;
}
.about-detailed-text p strong {
    color: #2f3a41;
    font-weight: 600;
}

/* Style dla przeniesionych atutów (Wyróżników) - układ ikona po lewej, tekst po prawej */
.moved-benefits-container {
    display: flex;          /* Używamy flexbox dla kontenera głównego */
    flex-direction: column; /* Elementy .moved-benefit-item jeden pod drugim */
    gap: 30px;              /* Odstęp pionowy między poszczególnymi atutami */
    margin-top: 30px;
    margin-bottom: 30px;
}

.moved-benefit-item {
    display: flex;          /* Każdy atut to kontener flex */
    align-items: flex-start; /* Wyrównanie do góry ikony i bloku tekstu (ważne, jeśli tekst jest wieloliniowy) */
    gap: 20px;              /* Odstęp między ikoną a blokiem tekstu */
    width: 100%;            /* Atuty zajmują całą dostępną szerokość w kolumnie tekstowej */
}

.moved-benefit-icon {
    flex-shrink: 0;         /* Zapobiega kurczeniu się ikony, jeśli tekst jest długi */
    /* margin-bottom: 0; Usuwamy, bo nie jest już potrzebny w tym układzie */
}

.moved-benefit-icon i {
    font-size: 1.8em;       /* Możesz dostosować rozmiar ikony */
    color: #ffffff;
    background-color: #da251d;
    width: 60px;            /* Dostosuj rozmiar kółka */
    height: 60px;           /* Dostosuj rozmiar kółka */
    line-height: 60px;      /* Wyśrodkowanie ikony w kółku */
    border-radius: 50%;
    display: flex;          /* Dodane dla lepszego centrowania ikony wewnątrz */
    align-items: center;    /* Centrowanie w pionie wewnątrz i */
    justify-content: center;/* Centrowanie w poziomie wewnątrz i */
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.moved-benefit-item:hover .moved-benefit-icon i {
    background-color: #2f3a41;
    transform: scale(1.1);
}

.moved-benefit-text-content { /* Nowy wrapper dla tytułu i opisu */
    flex-grow: 1;           /* Pozwala blokowi tekstu zająć resztę miejsca */
    text-align: left;       /* Tekst wyrównany do lewej */
}

.moved-benefit-title {
    font-size: 1.2em;       /* Dostosuj rozmiar tytułu */
    color: #343a40;
    font-weight: 600;
    margin-top: 0;          /* Usuwamy górny margines, bo wyrównujemy przez flexbox */
    margin-bottom: 5px;     /* Odstęp między tytułem a opisem */
}

.moved-benefit-description {
    font-size: 0.95em;
    color: #6c757d;
    line-height: 1.6;
    margin-top: 0;
    margin-bottom: 0;
}

.about-detailed-text .btn.btn-secondary {
    margin-top: 15px;
}

.about-detailed-image {
    flex: 1;
    text-align: center;
    order: 2;
    position: sticky;
    top: 120px; /* Dostosuj do wysokości headera + marginesu */
    align-self: flex-start;
}
.about-detailed-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.12);
    padding: 0;
}

/* ==========================================================================
   Sekcja Opinii Google (Trustindex Shortcode)
   ========================================================================== */
.google-reviews-section {
    padding: 60px 0;
    background-color: #f8f9fa;
}

/* FAQ */
.faq-section { /* Dodajmy dla kompletności */
   padding: 60px 0;
   background-color: #ffffff;
}

.faq-accordion { /* Dodajmy dla kompletności */
   max-width: 800px;
   margin: 0 auto;
   border-top: 1px solid #dee2e6;
}

.faq-item { /* Dodajmy dla kompletności */
   border-bottom: 1px solid #dee2e6;
}

.faq-question {
   display: block; /* Dodane dla pewności */
   font-size: 1.05em;
   padding: 15px 45px 15px 0;
   font-weight: 600; /* Dodane dla spójności z poprzednimi przykładami */
   color: #343a40;   /* Dodane */
   cursor: pointer;  /* Dodane */
   position: relative;/* Dodane */
   list-style: none; /* Dodane */
   transition: background-color 0.2s ease, color 0.2s ease; /* Dodane */
}
.faq-question::-webkit-details-marker { display: none; } /* Dodane */
.faq-question::marker { display: none; } /* Dodane */


.faq-icon { /* Dodajmy style dla ikony dla kompletności */
   position: absolute;
   right: 15px;
   top: 50%;
   width: 16px;
   height: 16px;
   transform: translateY(-50%);
   transition: transform 0.3s ease-out;
}
.faq-icon::before,
.faq-icon::after {
   content: '';
   position: absolute;
   background-color: #6c757d;
   transition: background-color 0.2s ease, transform 0.3s ease-out;
}
.faq-icon::before {
   top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px;
}
.faq-icon::after {
   top: 0; left: 50%; width: 2px; height: 100%; margin-left: -1px;
}


.faq-answer {
   padding-left: 20px;  /* Stały padding boczny */
   padding-right: 20px; /* Stały padding boczny */
   /* padding-top i padding-bottom będą zarządzane w stanie [open] lub przez marginesy wewnętrzne */
   margin: 0;
   font-size: 0.95em;
   color: #495057;
   line-height: 1.7;
   overflow: hidden;
   max-height: 0;
   opacity: 0;
   visibility: hidden;
   transition: max-height 0.4s ease-out,
               opacity 0.3s ease-out 0.1s,
               padding-top 0.4s ease-out, /* Możemy nadal animować padding-top */
               visibility 0s linear 0.4s;
               /* Usunięto padding-bottom z transition */
}

.faq-item[open] > .faq-question { /* Dodajmy dla kompletności */
   background-color: #f8f9fa;
   color: #da251d;
}
.faq-item[open] .faq-icon { /* Dodajmy dla kompletności */
   transform: translateY(-50%) rotate(45deg);
}
.faq-item[open] .faq-icon::after { /* Dodajmy dla kompletności */
   transform: scaleY(0);
}
.faq-item[open] .faq-icon::before,
.faq-item[open] .faq-icon::after { /* Dodajmy dla kompletności */
   background-color: #da251d;
}

.faq-item[open] .faq-answer {
   padding-top: 15px;
   /* Usunięto padding-bottom: 25px; stąd - będzie zarządzany przez margines ostatniego elementu */
   max-height: 2000px;
   opacity: 1;
   visibility: visible;
   transition: max-height 0.4s ease-in,
               opacity 0.3s ease-in,
               padding-top 0.4s ease-in, /* Możemy nadal animować padding-top */
               visibility 0s linear 0s;
               /* Usunięto padding-bottom z transition */
}

/* Kluczowe zmiany tutaj: */
.faq-answer > *:first-child {
   margin-top: 0; /* Usuwa górny margines pierwszego elementu w odpowiedzi */
}
.faq-answer > *:last-child {
   margin-bottom: 25px; /* <<< TO JEST WAŻNE! Dodaje stały odstęp POD OSTATNIM elementem w odpowiedzi (np. akapitem, listą) */
                         /* Dostosuj tę wartość (np. 15px, 20px, 25px) do pożądanego odstępu */
}
/* Jeśli chcesz mieć pewność, że tylko określone elementy dostają ten margines: */
/*
.faq-answer > p:last-child,
.faq-answer > ul:last-child,
.faq-answer > ol:last-child,
.faq-answer > div:last-child { // jeśli używasz divów jako ostatniego elementu
   margin-bottom: 15px;
}
*/


/* Ten margines odpycha następne pytanie, jeśli jest potrzebny dodatkowy odstęp globalny */
.faq-item[open] {
   margin-bottom: 10px; /* Odstęp pod całym otwartym blokiem FAQ. Dostosuj w razie potrzeby. */
}

.faq-more-info { /* Dodajmy dla kompletności */
   text-align: center;
   margin-top: 40px;
   font-size: 1.1em;
   color: #495057;
}
.faq-more-info a { font-weight: 600; } /* Dodajmy dla kompletności */

/* ==========================================================================
    10. Stopka (Footer - Wersja Rozbudowana)
    ========================================================================== */
.styled-footer { position: relative; padding: 0; background-image: url('assets/images/footer-background.avif'); background-size: cover; background-position: center center; background-repeat: no-repeat; color: #e9ecef; overflow: hidden; }
.footer-background-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(15, 40, 70, 0.85); z-index: 1; }
.footer-widgets-container { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding: 60px 0; }
.footer-widget-area h4 { color: #ffffff; font-size: 1.2em; margin-top: 0; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); display: inline-block; }
.footer-widget-area ul { list-style: none; padding: 0; margin: 0; }
.footer-widget-area ul li { margin-bottom: 12px; }
.footer-widget-area ul li a { color: #ced4da; text-decoration: none; transition: color 0.3s ease; display: inline-flex; align-items: center; font-size: 0.95em; }
.footer-widget-area ul li a:hover { color: #ffffff; }
.footer-widget-area ul li i { margin-right: 10px; width: 1.2em; text-align: center; color: #869ab8; font-size: 1.1em; }
.map-container { margin-bottom: 15px; line-height: 0; }
.map-container iframe { border-radius: 4px; max-width: 100%; border: none; }
.footer-address { color: #ced4da; font-size: 0.95em; line-height: 1.6; margin: 0; }
.footer-address i { margin-right: 8px; color: #869ab8; }
.site-info-container { background-color: rgba(0, 0, 0, 0.4); padding: 20px 0; position: relative; z-index: 2; }
.site-info { text-align: center; font-size: 0.9em; color: #adb5bd; }
.site-info a { color: #ced4da; text-decoration: none; }
.site-info a:hover { color: #ffffff; }
.site-info .fa-heart { color: #da251d; margin: 0 3px; }

/* ==========================================================================
   Szablon Strony Oferta - Kategoria Główna (Petarda)
   ========================================================================== */

/* --- Ogólne dla tej strony --- */
.page-oferta-kategoria {
    /* Możesz dodać specyficzne tło dla całej strony, jeśli chcesz */
}

/* --- Sekcja Hero dla Kategorii --- */
.category-hero {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 100px 0; /* Zwiększ dla większego hero */
    color: #fff;
    position: relative;
    text-align: center;
    min-height: 400px; /* Minimalna wysokość */
    display: flex;
    align-items: center;
    justify-content: center;
}
.category-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.category-hero .container {
    position: relative;
    z-index: 2;
}
.category-hero-title {
    font-size: 3.5em; /* Duży tytuł */
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.3em;
    line-height: 1.1;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}
.category-hero-subtitle {
    font-size: 1.3em;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    line-height: 1.6;
    opacity: 0.9;
}
.category-hero .btn-hero-category {
    background-color: #da251d;
    color: #fff;
    padding: 12px 30px;
    font-size: 1.1em;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.category-hero .btn-hero-category:hover {
    background-color: #fff;
    color: #da251d;
    transform: translateY(-3px);
}

/* --- Sekcja "Dlaczego My?" (Skondensowana) --- */
.category-why-us {
    padding: 60px 0;
    background-color: #f8f9fa; /* Jasne tło */
}
.section-title-center { /* Nowa klasa dla centrowanych tytułów sekcji */
    text-align: center;
    font-size: 2.2em;
    color: #2f3a41;
    margin-bottom: 50px;
    position: relative;
    padding-bottom: 15px;
}
.section-title-center::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: #da251d;
}
.category-benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}
.category-benefit-item {
    text-align: center;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.07);
    transition: transform 0.3s ease;
}
.category-benefit-item:hover {
    transform: translateY(-5px);
}
.category-benefit-item i {
    font-size: 2.5em;
    color: #da251d;
    margin-bottom: 15px;
    display: inline-block;
}
.category-benefit-item h3 {
    font-size: 1.3em;
    color: #333;
    margin-bottom: 8px;
}
.category-benefit-item p {
    font-size: 0.95em;
    color: #666;
    line-height: 1.5;
    margin-bottom: 0;
}

/* --- Interaktywny Przewodnik / Filtrowanie --- */
.interactive-guide-section {
    padding: 70px 0;
}
.section-subtitle-center { /* Nowa klasa dla centrowanych podtytułów */
    text-align: center;
    font-size: 1.1em;
    color: #555;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -30px; /* Podciągnięcie pod tytuł sekcji */
    margin-bottom: 40px;
}
.device-type-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
    justify-content: center;
}
.device-type-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.device-type-tile:hover {
    border-color: #da251d;
    background-color: #fef6f5; /* Bardzo jasny odcień czerwieni */
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 8px 20px rgba(218,37,29,0.1);
}
.device-type-icon-fa { /* Jeśli używasz FontAwesome */
    font-size: 3em;
    margin-bottom: 15px;
    color: #da251d;
    transition: color 0.3s ease;
}
.device-type-tile:hover .device-type-icon-fa {
    /* color: #c82333; */ /* Możesz zmienić kolor ikony na hover */
}
.device-type-icon { /* Jeśli używasz obrazka jako ikony */
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-bottom: 15px;
}
.device-type-name {
    font-size: 1.1em;
    font-weight: 600;
    color: #2f3a41;
}

/* --- Sekcja Treści SEO --- */
.category-seo-content { /* Klasa dodana do section w PHP */
    padding: 60px 0;
    background-color: #fff; /* Dla odróżnienia od sekcji why-us */
}
.category-seo-content .section-title-left { /* Użyjemy tytułu wyrównanego do lewej */
    margin-bottom: 30px;
}
.main-seo-content-acf, /* Używamy stylów z poprzedniej propozycji, dostosuj */
.default-page-content {
    line-height: 1.8;
    font-size: 1.05em;
}
.main-seo-content-acf h2, .default-page-content h2 {
    font-size: 1.8em; margin-top: 1.8em; margin-bottom: 0.8em; padding-bottom: 0.3em; border-bottom: 1px solid #eee;
}
.main-seo-content-acf h3, .default-page-content h3 {
    font-size: 1.4em; margin-top: 1.5em; margin-bottom: 0.6em;
}

/* --- Sekcja CTA Końcowe --- */
.category-final-cta {
    padding: 60px 0;
    background-color: #2f3a41;
    color: #fff;
    text-align: center;
}
.category-final-cta .container {
    max-width: 750px;
}
.category-final-cta h2 {
    font-size: 2.4em;
    color: #fff;
    margin-bottom: 15px;
}
.category-final-cta p {
    font-size: 1.15em;
    margin-bottom: 30px;
    color: #e0e0e0;
    line-height: 1.6;
}
.category-final-cta .btn-cta-final {
    background-color: #da251d;
    color: #fff;
    padding: 15px 35px;
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 5px;
    text-transform: uppercase;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.category-final-cta .btn-cta-final:hover {
    background-color: #fff;
    color: #da251d !important;
    transform: translateY(-3px) scale(1.03);
}

/* ===============================================================
   SHOWCASE CTA – 2025 refreshed
   =============================================================== */
   :root {
    /* łatwa zmiana brandu w jednym miejscu */
    --cta-from: #ff3d30;
    --cta-to:   #ff7046;
    --cta-text: #ffffff;
  }
  
  /* cały blok */
  .showcase-cta {
    position: relative;
    padding: 80px 0 90px;
    text-align: center;
    color: var(--cta-text);
    background: linear-gradient(135deg,var(--cta-from) 0%,var(--cta-to) 100%);
    overflow: hidden;
    isolation: isolate;         /* żeby kwiatki z pseudo nie wyciekały 😉 */
  }
  
  /* animowany “szum” w tle */
  .showcase-cta::before {
    content:"";
    position:absolute;
    inset:0;
    background: radial-gradient(circle at 30% 30%,rgba(255,255,255,.15) 0,transparent 60%) 0 0/250px 250px,
                radial-gradient(circle at 70% 60%,rgba(255,255,255,.12) 0,transparent 55%) 120px 120px/220px 220px;
    animation: ctaMove 13s linear infinite;
    opacity:.55;
  }
  @keyframes ctaMove { to { background-position: 250px 0, -120px 120px; } }
  
  /* fala (dziedziczy kolor tła przez currentColor) */
  .cta-wave {
    position:absolute;
    top:-1px; left:0; width:100%; height:90px;
    color:var(--cta-from);
    transform:scaleY(-1);        /* odwracamy, by “wyciąć” górę */
    pointer-events:none;
  }
  
  /* typografia */
  .showcase-cta__title  { font-size:clamp(28px,4.5vw,44px); margin-bottom:.35em; font-weight:700; color: #fff !important;}
  .showcase-cta__subtitle { font-size:clamp(16px,2.2vw,19px); max-width:760px; margin-inline:auto 2.5rem; line-height:1.6; }
  
  /* przycisk glassmorphism */
  .btn--glass {
    display:inline-block;
    margin-top:38px;
    padding:14px 38px;
    font-size:18px; font-weight:600; letter-spacing:.3px;
    color:var(--cta-text);
    border:2px solid rgba(255,255,255,.4);
    border-radius:56px;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(6px);
    transition: all .25s ease;
  }
  .btn--glass:hover {
    background: rgba(255,255,255,.25);
    border-color: rgba(255,255,255,.75);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,.15);
  }
  
  /* responsywne dostosowanie dla XS ekranów */
  @media (max-width: 480px){
    .showcase-cta { padding:60px 0 70px; }
    .btn--glass   { width:90%; max-width:320px; font-size:16px; padding:14px 0; }
  }
/* ===============================================================
   CTA – poprawiona czytelność & centrowanie
   =============================================================== */

/* 1. mocniejszy gradient i przyciemnienie rogów */
.showcase-cta {
    background: linear-gradient(135deg,#e52213 0%,#ff5d30 100%);
  }
  .showcase-cta::after{             /* lekki vignette przy krawędziach */
    content:"";
    position:absolute;inset:0;
    background: radial-gradient(circle at center,transparent 60%,rgba(0,0,0,.15) 100%);
    pointer-events:none;
  }
  
  /* 2. kontener = flexbox -> pełne centrowanie */
  .showcase-cta .container{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    max-width:900px;           /* ciut szerzej niż default „container” */
    padding-inline:20px;
  }
  
  /* 3. większa typografia + cień dla lepszej czytelności */
  .showcase-cta__title{
    font-size:clamp(32px,5vw,48px);
    text-shadow:0 2px 4px rgba(0,0,0,.35);
  }
  .showcase-cta__subtitle{
    font-size:clamp(17px,2.4vw,21px);
    line-height:1.7;
    margin-bottom:2.2rem;
    text-shadow:0 1px 3px rgba(0,0,0,.3);
  }
  
  /* 4. przycisk – wyżej i klarowniejsze obramowanie */
  .btn--glass{
    margin-top:0;                      /* była 38 px – zbędne po flex-centr */
    border:2px solid rgba(255,255,255,.55);
  }
  .btn--glass:hover{
    border-color:#fff;
  }
  
  /* 5. XS ekrany – zachowaj proporcje, ale daj trochę luzu */
  @media(max-width:480px){
    .showcase-cta{padding:70px 0 80px}
    .btn--glass{width:100%;max-width:100%;font-size:17px}
  }

  /* =======  HERO z falą i trzema gradientami  ======= */
.showcase-hero{
    position:relative;
    min-height:72vh;        /* zostaw tyle samo, co miałeś */
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    text-align:center;
    overflow:hidden;
  
    /* ⬇⬇⬇ cztery warstwy tła ⬇⬇⬇ */
    background:
      url("../img/paper-waves.svg") repeat,
      radial-gradient(at 15% 30%,  #e60012 0%, rgba(230,0,18,0) 65%),
      radial-gradient(at 85% 25%,  #0063d1 0%, rgba(0,99,209,0) 65%),
      radial-gradient(at 50% 80%,  #009a40 0%, rgba(0,154,64,0) 60%);
    background-size: 60px 60px, cover, cover, cover;
    background-blend-mode: overlay, normal, normal, normal;
  }
  
  /* cienka maska, żeby tekst był czytelny */
  .showcase-hero::after{
    content:"";
    position:absolute;inset:0;z-index:0;
    background:linear-gradient(180deg,rgba(0,0,0,.10)0%,rgba(0,0,0,.20)100%);
  }
  .showcase-hero > .container{position:relative;z-index:1;}
  
    
/* ==========================================================================
   STYL OFERTY URZĄDZEŃ SHOWCASE - WERSJA PANCERNA
   ========================================================================== */
   .page-showcase .showcase-section-title {
    text-align: center; font-size: 2.2em; color: var(--heading-color, #1d2d39);
    margin-bottom: 50px; position: relative; padding-bottom: 15px;
}
.page-showcase .showcase-section-title::after {
    content: ''; position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%); width: 60px; height: 4px;
    background-color: var(--primary-color, #da251d);
}

/* --- Hero Section --- */
.showcase-hero {
    position: relative; padding: 100px 0; display: flex; align-items: center;
    color: #fff; text-align: center; background-size: cover; background-position: center;
}
.showcase-hero__overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(0deg, rgba(29, 45, 57, 0.8) 0%, rgba(29, 45, 57, 0.5) 100%);
}
.showcase-hero .container { position: relative; z-index: 2; }
.showcase-hero__title { font-size: 3.2em; font-weight: 800; color: #fff; line-height: 1.2; margin: 0; text-shadow: 1px 1px 5px rgba(0,0,0,0.3); }
.showcase-hero__subtitle { font-size: 1.2em; max-width: 750px; margin: 25px auto 40px; opacity: 0.95; }
.showcase-hero__buttons {
    display: flex;
    justify-content: center; /* Wyśrodkowanie przycisków w poziomie */
    align-items: center;     /* Wyrównanie w pionie, jeśli mają różne wysokości */
    flex-wrap: wrap;         /* POZWALA PRZYCISKOM PRZEJŚĆ DO NOWEJ LINII, GDY BRAKUJE MIEJSCA */
    gap: 15px;               /* Odstęp między przyciskami */
    margin-top: 40px;        /* Odstęp od tekstu powyżej */
}
.showcase-hero .showcase-hero__buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px 20px; /* 15px odstępu w pionie, 20px w poziomie */
    margin-top: 40px;
}

/* --- Sekcja Przewaga Technologiczna --- */
.showcase-features { padding: 80px 0; background-color: var(--light-gray-bg, #f8f9fa); }
.showcase-features__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
.showcase-feature { text-align: center; }
.showcase-feature i { font-size: 2.5em; color: var(--primary-color, #da251d); margin-bottom: 20px; }
.showcase-feature h3 { font-size: 1.4em; }

/* ==========================================================================
   INTERAKTYWNA PREZENTACJA MAREK - WERSJA "TYLKO LOGO" (FINALNA)
   ========================================================================== */

   .brands-showcase {
    padding: 80px 30px !important;
    background-color: #fff;
}
.brands-showcase .showcase-section-title {
    text-align: center;
    font-size: 2.2em;
    color: var(--heading-color, #1d2d39);
    margin-bottom: 50px;
    position: relative;
    padding-bottom: 15px;
}
.brands-showcase .showcase-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: var(--primary-color, #da251d);
}

.brands-showcase-wrapper {
    display: grid;
    grid-template-columns: 220px 1fr; /* Ustalona szerokość dla kolumny z logami */
    gap: 60px;
    margin-top: 40px;
    align-items: flex-start;
    margin-left: 50px;
}

/* --- Nawigacja z logotypami po lewej --- */
.brands-nav {
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: sticky; /* Przyklejamy nawigację przy scrollowaniu! */
    top: 120px;       /* Dostosuj do wysokości swojego headera + margines */
}
.brand-nav-item {
    padding: 20px 15px;
    border-radius: 12px;
    border: 2px solid #f0f0f0;
    background-color: #fff;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}
.brand-nav-item:hover {
    border-color: #ddd;
    transform: scale(1.03);
}
.brand-nav-item.active {
    border-color: var(--primary-color, #da251d);
    box-shadow: 0 8px 25px rgba(218, 37, 29, 0.1);
}

/* --- LOGO WEWNĄTRZ PRZYCISKU --- */
.brand-nav-item img {
    max-height: 60px;
    max-width: 140px;
    width: auto;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}
.brand-nav-item:hover img {
    filter: grayscale(50%);
    opacity: 0.8;
}
.brand-nav-item.active img {
    filter: grayscale(0%);
    opacity: 1;
}

/* --- UKRYWAMY TEKST PRZY LOGO --- */
.brand-nav-item span {
    display: none !important; 
}


/* --- Kontener z treścią po prawej --- */
.brand-content-container {
    position: relative;
    min-height: 420px; /* Zapewnia stałą minimalną wysokość */
    transition: height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.brand-content-pane {
    position: absolute;
    top: 0; left: 0; width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s 0.4s;
}
.brand-content-pane.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

.brand-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.brand-text h3 {
    font-size: 2em;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--heading-color, #1d2d39);
}
.brand-text p {
    font-size: 1.1em;
    line-height: 1.8;
    margin-bottom: 30px;
}
.brand-text ul {
    list-style: none;
    padding: 0;
}
.brand-text ul li {
    padding-left: 30px;
    position: relative;
    margin-bottom: 12px;
    font-weight: 500;
}
.brand-text ul li::before {
    content: '\f058';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: var(--success-color, #2ecc71);
    position: absolute;
    left: 0;
}
.brand-image img {
    width: 100%;
    border-radius: 8px;
}


/* === RESPONSIVE DLA TEJ SEKCJI === */
@media (max-width: 991px) {
    .brands-showcase-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-left: 5px;
    }
    
    .brands-nav {
        position: static; /* Usuwamy przyklejenie na tabletach */
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }
    .brand-nav-item {
        flex-basis: 150px; /* Stała szerokość bazowa */
        flex-grow: 1;
        max-width: 180px;
        padding: 15px;
    }
    .brand-nav-item img {
        max-height: 50px;
    }
}

@media (max-width: 767px) {

    /* Zmieniamy cały układ na jednokolumnowy */
    .brands-showcase-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-left: 5px;
    }

    /* === NAWIGACJA Z LOGAMI - TERAZ TO JEST PASEK === */
    .brands-nav {
        display: flex;
        flex-direction: row;      /* UKŁAD POZIOMY! */
        justify-content: center;  /* IDEALNIE NA ŚRODKU! */
        align-items: center;      /* Wyrównanie w pionie */
        gap: 10px;                /* Mały odstęp między przyciskami */
        
        padding: 0 10px;          /* Minimalny padding po bokach, żeby nie dotykały krawędzi */
        border-right: none;
        border-bottom: 2px solid #e9ecef; /* Delikatny separator na dole */
        position: static;
    }

    /* === PRZYCISKI - MAJĄ BYĆ MAŁE I ZGRABNE === */
    .brand-nav-item {
        padding: 10px 12px !important;  /* BARDZO MAŁY PADDING */
        border: none !important;
        border-radius: 6px !important;  /* Lekkie zaokrąglenie */
        background-color: transparent !important;
        box-shadow: none !important;
        
        /* Delikatne podkreślenie dla aktywnego */
        border-bottom: 3px solid transparent !important;
        transition: border-color 0.3s ease;
    }

    .brand-nav-item.active {
        border-bottom-color: var(--primary-color, #da251d) !important;
    }
    
    /* === LOGO WEWNĄTRZ - MAŁE I CZYTELNE === */
    .brand-nav-item img {
        max-height: 28px !important; /* BARDZO MAŁE LOGO */
        width: auto !important;
        filter: grayscale(100%);
        opacity: 0.7;
    }
    
    .brand-nav-item.active img {
        filter: grayscale(0%);
        opacity: 1;
    }

    /* Zapewniamy, że treść jest w jednej kolumnie */
    .brand-content-grid { 
        grid-template-columns: 1fr; 
    }
    .brand-image { 
        order: -1; 
        margin-bottom: 30px; 
    }

}

/* ==========================================================================
   Benger Showcase – slider wygląd
   ========================================================================== */

/* Główny wrapper Swipera */
.brand-slider {
    /* Rozmiar */
    width: 100%;            /* pełna szerokość kolumny */
    max-width: 400px;       /* ale nie więcej niż 640 px */
    aspect-ratio: 4/4;   /* ~1920×1080 */
    margin-inline: auto;    /* środek, gdy kolumna szersza */
  
    /* Ramka & estetyka */
    border: 3px solid #E5E5E5;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    overflow: hidden;       /* wszystko w środku przycinamy */
    background: #f7f7f7;    /* szare tło, gdy foto się ładuje */
    position: relative;     /* kotwica dla strzałek */
  }
  
  /* Obrazki wewnątrz slajdów */
  .brand-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* wypełnij, przytnij nadmiar */
    display: block;         /* bez dziwnych przerw */
  }
  
  /* ----------- Paginacja (kropki) ----------- */
  .brand-slider .swiper-pagination-bullets {
    bottom: 10px !important;
  }
  .brand-slider .swiper-pagination-bullet {
    width: 10px; height: 10px;
    opacity: 1;
    background: #ffffffb3;
    border: 1px solid #ff3d30;
    transition: transform .25s;
  }
  .brand-slider .swiper-pagination-bullet-active {
    transform: scale(1.4);
    background: #ff3d30;
  }
  
  /* ----------- Strzałki ----------- */
  .brand-slider .swiper-button-next,
  .brand-slider .swiper-button-prev {
    width: 42px; height: 42px;
    margin-top: 0;          /* wyśrodkuj pionowo bez transformu */
    top: 50%;               /* 50 % kontenera */
    translate: 0 -50%;      /* prawdziwe wyśrodkowanie */
    color: #fff;
    background: #ff3d30;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    transition: opacity .25s, background .25s;
    opacity: 0;             /* ukryte, pokażemy przy hover */
  }
  .brand-slider:hover .swiper-button-next,
  .brand-slider:hover .swiper-button-prev {
    opacity: 1;
  }
  .brand-slider .swiper-button-next:after,
  .brand-slider .swiper-button-prev:after {
    font-size: 18px;        /* mniejsza ikonka */
  }
  .brand-slider .swiper-button-prev { left: 14px; }
  .brand-slider .swiper-button-next { right: 14px; }
  
  /* Responsive tweak: na telefonie strzałki mniejsze */
  @media (max-width: 480px) {
    .brand-slider { max-width: 100%; }
    .brand-slider .swiper-button-next,
    .brand-slider .swiper-button-prev {
      width: 34px; height: 34px;
    }
  }
  

/* ==========================================================================
   Szablon Strony Kategorii Produktów (np. /oferta/kasy-fiskalne/)
   Plik: template-strona-kategorii-produktow.php
   ========================================================================== */

/* --- Ogólne dla tej strony --- */
.page-custom-kategoria-produktow .site-main {
    /* Możesz dodać ogólne tło lub inne style dla całej strony kategorii */
}

/* --- Sekcja Hero dla Dedykowanej Strony Kategorii --- */
.custom-kategoria-hero-section {
    position: relative;
    background-color: #f0f2f5; /* Domyślne tło, jeśli nie ma obrazka */
    color: #fff; /* Domyślny kolor tekstu, jeśli nie ma obrazka */
    padding: 60px 0; /* Padding, gdy nie ma obrazka */
    text-align: center;
}
.custom-kategoria-hero-section.no-image {
    /* Style, gdy nie ma obrazka tła, np. inne tło, mniejszy padding */
}

.custom-kategoria-hero-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    z-index: 1;
}
.custom-kategoria-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.custom-kategoria-hero-section.no-image .custom-kategoria-hero-overlay,
.custom-kategoria-hero-section.no-image .custom-kategoria-hero-image-wrapper {
    display: none;
}

.custom-kategoria-hero-content {
    position: relative;
    z-index: 3;
    /* Domyślny padding, gdy nie ma obrazka, jest już w .custom-kategoria-hero-section */
}
.custom-kategoria-hero-content.with-image-content {
    color: #fff; /* Kolor tekstu, gdy jest obrazek tła */
    text-shadow: 1px 1px 4px rgba(0,0,0,0.2);
    padding: 80px 0; /* Większy padding, gdy jest obrazek */
}

.custom-kategoria-title {
    font-size: 2.8em;
    margin-bottom: 15px;
    font-weight: 700;
    line-height: 1.2;
}
.custom-kategoria-hero-section.no-image .custom-kategoria-title {
    color: #2f3a41; /* Ciemniejszy tytuł, jeśli nie ma obrazka */
}

.custom-kategoria-description {
    font-size: 1.15em;
    line-height: 1.7;
    max-width: 750px;
    margin: 0 auto 0 auto; /* Usunięty dolny margines, aby nie dublować z paddingiem sekcji */
    opacity: 0.95;
}
.custom-kategoria-hero-section.no-image .custom-kategoria-description {
    color: #fff;
}
.custom-kategoria-description p:last-child {
    margin-bottom: 0;
}

/* --- Sekcja Listowania Produktów --- */
.custom-products-listing-section {
    padding: 50px 0 30px 0; /* Zmniejszony dolny padding, bo bloki producentów mają swój margines */
}

.producent-listing-blok {
    margin-bottom: 50px; /* Odstęp między blokami różnych producentów */
}
.producent-listing-blok:last-of-type { /* Użyj -of-type dla pewności */
    margin-bottom: 20px;
}

.producent-header-title {
    font-size: 2.3em; /* Dostosuj rozmiar całego nagłówka */
    color: #2f3a41;
    font-weight: 600;
    margin: 0;
    display: flex; /* Użyj flexboxa do ułożenia elementów w linii */
    align-items: center; /* Wyrównanie w pionie */
    justify-content: center; /* Wyśrodkowanie, jeśli text-align: center dla rodzica */
    flex-wrap: wrap; /* Pozwól na zawijanie, jeśli jest za długie */
    gap: 0em; /* Odstęp między elementami w nagłówku */
}

.producent-header-prefix,
.producent-header-suffix {
    font-weight: 400; /* Lżejszy font dla tekstu pomocniczego */
    font-size: 1.3em;
    color: #555;
}

.producent-section-header.with-text {
    margin-bottom: 45px;
    padding-bottom: 20px;
    border-bottom: 8px solid #da251d;
    text-align: center; /* Lub left, jeśli wolisz */
}

.producent-logo-in-listing {
    max-height: 55px; /* Wysokość loga producenta */
    width: auto;
    max-width: 220px; /* Maksymalna szerokość loga */
    margin-bottom: 8px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.producent-logo-inline {
    max-height: 80px; /* Dostosuj wysokość loga w linii tekstu */
    width: auto;
    vertical-align: middle; /* Stara metoda, ale flexbox powinien to załatwić */
    /* margin: 0 0.3em; */ /* Zamiast tego używamy gap w .producent-header-title */
}

.producent-name-in-listing { /* Wyświetlane, jeśli nie ma logo */
    font-size: 2.2em;
    color: #333;
    font-weight: 600;
    margin: 0;
}

.podkategoria-produktow-blok {
    margin-bottom: 40px; /* Odstęp między różnymi podkategoriami tego samego producenta */
}
.podkategoria-produktow-blok:last-of-type { /* Użyj -of-type */
    margin-bottom: 10px; /* Mniejszy odstęp dla ostatniej podkategorii danego producenta */
}

.custom-kategoria-hero-content.with-image-content .custom-kategoria-title {
    color: #f5f5f5; /* Np. inny odcień białego/szarego dla tytułu */
}

.podkategoria-tytul {
    font-size: 1.7em; /* Tytuł podkategorii, np. "Małe Kasy Fiskalne" */
    color: #383838;
    margin-bottom: 25px;
    padding-bottom: 10px;
    /* border-bottom: 1px dashed #d0d0d0; */ /* Opcjonalna linia pod tytułem podkategorii */
    text-align: left; /* Lub center */
    font-weight: 500; /* Lżejszy niż H2 producenta */
}

/* --- Siatka Produktów (Karty Produktowe) --- */
.products-grid {
    display: grid;
    gap: 25px; /* Możesz dostosować odstęp */
    /* Domyślnie jedna kolumna na małych ekranach */
    grid-template-columns: 1fr;
}

@media (min-width: 768px) { /* Punkt przełamania dla tabletów, możesz dostosować */
    .products-grid {
        grid-template-columns: repeat(2, 1fr); /* Dwie równe kolumny */
    }
}

.product-item-card {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(0,0,0,0.07); /* Lżejszy cień dla mniejszych kart */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-item-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.product-card-link {
    display: flex;
    flex-direction: column;
    height: 100%; /* Link wypełnia całą kartę */
    text-decoration: none;
    color: inherit;
}

.product-card-image-wrapper {
    width: 100%;
    aspect-ratio: 1.2 / 1; /* Dostosuj proporcje, może być np. 1/1 dla kwadratu lub 4/3 */
    overflow: hidden;
    background-color: #ffffff;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-card-image-wrapper img {
    max-width: 85%; /* Obrazek nie dotyka krawędzi */
    max-height: 85%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Płynniejsza animacja */
}
.product-item-card:hover .product-card-image-wrapper img {
    transform: scale(1.03); /* Mniejsze powiększenie obrazka */
}
.product-placeholder-image {
    opacity: 0.4;
    padding: 20px;
}

.product-card-content {
    padding: 15px;
    text-align: center;
    flex-grow: 1; /* Aby treść zajęła dostępną przestrzeń, a overlay był na dole */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrowanie tytułu w pionie, jeśli nie ma innych elementów */
}

.product-card-title {
    font-size: 1.05em; /* Mniejszy font dla tytułu */
    color: #2f3a41;
    margin: 0;
    line-height: 1.3; /* Dostosuj interlinię */
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Max 2 linie */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.6em; /* (2 * 1.3em) */
}

.product-card-hover-overlay {
    position: absolute;
    top: 0; /* Zapewnia, że zaczyna od góry */
    left: 0;
    width: 100%;
    height: 100%; /* Zakrywa całą kartę */
    background-color: rgba(218, 37, 29, 0.88); /* Nieco mniej przezroczysty dla lepszego efektu, dostosuj */
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px 12px; /* Dodaj padding, aby tekst nie był przy krawędziach */
    opacity: 0;
    visibility: hidden;
    /* Usunięto transform: translateY(100%); */
    transition: opacity 0.35s ease, visibility 0s linear 0.35s; /* Płynniejsze przejście dla opacity */
    pointer-events: none; /* Domyślnie nie przechwytuje kliknięć */
}

.product-item-card:hover .product-card-hover-overlay {
    opacity: 1;
    visibility: visible;
    /* Usunięto transform: translateY(0%); */
    transition-delay: 0s; /* Natychmiastowa zmiana visibility przy hover */
    pointer-events: auto; /* Pozwala na interakcję, jeśli overlay ma linki (choć tu nie ma) */
}

.product-card-hover-overlay .hover-text {
    font-size: 0.95em; /* Nieco większy tekst */
    font-weight: 600; /* Pogrubiony */
    margin-bottom: 10px; /* Większy odstęp */
}
.product-card-hover-overlay .hover-icon {
    font-size: 1em; /* Większa ikona */
}

.no-products-found {
    text-align: center;
    font-size: 1.1em;
    color: #777;
    padding: 50px 20px;
    background-color: #f9f9f9;
    border-radius: 5px;
    margin-top: 20px;
}

/* --- Style dla Paginacji (jeśli używasz paginate_links) --- */
.navigation.pagination {
    margin-top: 50px;
    margin-bottom: 30px;
    text-align: center;
    clear: both;
}
.page-numbers {
    display: inline-block;
    padding: 10px 15px; /* Większe przyciski paginacji */
    margin: 0 4px;
    border: 1px solid #d8d8d8;
    text-decoration: none;
    color: #555;
    border-radius: 5px;
    font-size: 0.95em;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.page-numbers.current,
.page-numbers:hover {
    background-color: #da251d;
    color: #fff;
    border-color: #da251d;
}
.page-numbers.dots { /* Dla wielokropka w paginacji */
    border: none;
    padding: 10px 5px;
}


/* --- Sekcja Treści z Edytora WP (pod listą produktów) --- */
.page-default-content-section {
    padding: 50px 0;
    background-color: #ffffff; /* Czyste tło */
    border-top: 1px solid #f0f0f0; /* Delikatny separator */
    margin-top: 30px;
}
.page-default-content-section .section-title-left {
    margin-bottom: 30px;
    font-size: 2em; /* Tytuł tej sekcji */
}
.page-default-content-section .entry-content p, /* Celowanie w treść z edytora */
.page-default-content-section .entry-content ul,
.page-default-content-section .entry-content ol {
    font-size: 1.05em;
    line-height: 1.8;
    margin-bottom: 1.5em;
}
.page-default-content-section .entry-content h2,
.page-default-content-section .entry-content h3 {
    margin-top: 1.8em;
    margin-bottom: 0.8em;
}

/* ==========================================================================
   Panel Filtrów Produktów
   ========================================================================== */
   .product-filters-panel {
    padding: 30px 0 20px 0;
    background-color: #f8f9fa; /* Jasne tło dla panelu filtrów */
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 40px;
}

#product-filter-form {
    display: flex;
    flex-wrap: wrap; /* Pozwala na zawijanie na mniejszych ekranach */
    gap: 20px; /* Odstęp między grupami filtrów i przyciskami */
    align-items: flex-end; /* Wyrównuje elementy do dolnej krawędzi (przydatne dla przycisków) */
}

.filter-group {
    display: flex;
    flex-direction: column; /* Etykieta nad selectem */
    gap: 5px;
    flex-grow: 1; /* Pozwala grupom filtrów rosnąć */
    min-width: 200px; /* Minimalna szerokość dla selecta */
}

.filter-label {
    font-size: 0.9em;
    font-weight: 500;
    color: #555;
}

.filter-select {
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    font-size: 1em;
    width: 100%; /* Select zajmuje całą szerokość .filter-group */
    box-sizing: border-box;
}

.filter-actions {
    display: flex;
    gap: 10px;
    align-items: center; /* Wyrównanie przycisków, jeśli mają różne wysokości */
    padding-top: 20px; /* Aby były na równi z selectami, jeśli etykiety są nad nimi */
}

.btn-filter-submit,
.btn-filter-clear {
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
}

.btn-filter-submit {
    background-color: #da251d; /* Kolor główny */
    color: #fff;
    border: 1px solid #da251d;
}
.btn-filter-submit:hover {
    background-color: #c82333;
    border-color: #c82333;
}

.btn-filter-clear {
    background-color: #6c757d; /* Kolor drugorzędny/szary */
    color: #fff;
    border: 1px solid #6c757d;
    text-decoration: none;
}
.btn-filter-clear:hover {
    background-color: #5a6268;
    border-color: #5a6268;
}

/* ==========================================================================
   Nowa Sekcja Hero dla Strony Kategorii Produktów (Split Layout)
   ========================================================================== */

.custom-kategoria-hero-split {
    padding: 60px 0; /* Główny padding sekcji */
    background-color: #f8f9fa; /* Jasne tło dla całej sekcji, możesz zmienić */
    /* overflow: hidden; */ /* Może być potrzebne, jeśli animacje powodują "wystawanie" */
}

.hero-split-content-wrapper {
    display: grid;
    grid-template-columns: 1fr; /* Domyślnie jedna kolumna na mobile */
    gap: 30px; /* Odstęp na mobile */
    align-items: center; /* Wyrównanie elementów w pionie */
}

@media (min-width: 768px) { /* Układ dwukolumnowy od tabletów */
    .hero-split-content-wrapper {
        grid-template-columns: 1.2fr 1fr; /* Tekst trochę szerszy (1.2fr) niż obrazek (1fr) */
        /* Możesz też użyć: grid-template-columns: 55% 40%; gap: 5%; */
        /* Lub dla równych kolumn: grid-template-columns: 1fr 1fr; */
        gap: 50px; /* Większy odstęp na desktopie */
    }
}

.hero-split-text-column {
    /* Opcjonalne style dla kolumny tekstowej */
    /* Można dodać animację fade-in */
    opacity: 0;
    transform: translateX(-20px);
    animation: heroTextSlideIn 0.7s 0.2s forwards cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes heroTextSlideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.hero-split-title {
    font-size: 2.8em; /* Dostosuj */
    color: #2f3a41;   /* Ciemny kolor dla tekstu */
    margin-bottom: 0.6em;
    line-height: 1.2;
    font-weight: 700;
}

.hero-split-description {
    font-size: 1.1em;
    line-height: 1.75;
    color: #495057;
    margin-bottom: 30px; /* Odstęp przed przyciskiem CTA */
}
.hero-split-description p:last-child {
    margin-bottom: 0;
}

.btn-hero-split { /* Styl dla przycisku CTA w tej sekcji */
    background-color: #da251d; /* Twój główny kolor */
    color: #fff;
    padding: 12px 28px;
    font-size: 1em;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 5px;
    display: inline-block; /* Aby marginesy działały poprawnie */
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.btn-hero-split:hover {
    background-color: #c82333; /* Ciemniejszy odcień */
    transform: translateY(-2px);
}

.hero-split-image-column {
    text-align: center; /* Wyśrodkowanie obrazka, jeśli jest węższy niż kolumna */
    /* Można dodać animację fade-in dla obrazka */
    opacity: 0;
    transform: scale(0.95);
    animation: heroImageScaleIn 0.7s 0.4s forwards cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes heroImageScaleIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.hero-split-image {
    max-width: 100%;
    height: auto;
    border-radius: 10px; /* Zaokrąglenie rogów */
    box-shadow: 0 10px 35px rgba(0,0,0,0.12); /* Subtelny, ale wyraźny cień */
    display: block; /* Usuwa ewentualny dolny margines inline obrazka */
    margin-left: auto; /* Jeśli kolumna jest szersza, obrazek będzie po prawej */
    margin-right: 0;  /* lub auto dla centrowania w kolumnie */
}

/* Responsywność dla obrazka na mobile (jeśli chcesz go nad tekstem) */
@media (max-width: 767px) {
    .hero-split-content-wrapper {
        /* Domyślnie grid układa elementy w kolejności z HTML.
           Jeśli chcesz obrazek na górze na mobile, a w HTML jest drugi: */
        /* grid-template-areas: "image" "text"; */ /* Wymaga nazwania obszarów dla kolumn */
    }
    /* Jeśli obrazek ma być pierwszy na mobile, a w HTML jest drugi: */
    /* .hero-split-image-column {
        order: -1; // Jeśli używasz flexbox zamiast grid dla .hero-split-content-wrapper
    } */
    .hero-split-text-column {
        text-align: center; /* Wyśrodkowanie tekstu na mobile */
    }
    .hero-split-title {
        font-size: 2.2em;
    }
    .hero-split-description {
        font-size: 1em;
    }
    .btn-hero-split {
        font-size: 0.95em;
        padding: 10px 24px;
    }
    .hero-split-image {
        margin-left: auto;
        margin-right: auto; /* Centrowanie obrazka na mobile */
    }
}


/* ==========================================================================
   STYL BENGERA DLA STRON USŁUGOWYCH - WERSJA NAPRAWIONA
   (Dzierżawa, Serwis, Materiały)
   ========================================================================== */

/* --- Ustawienia wspólne i zmienne --- */
:root {
    --primary-color: #da251d;
    --primary-hover: #ae211a;
    --light-gray-bg: #f8f9fa;
    --dark-bg: #2f3a41;
    --text-color: #495057;
    --heading-color: #1d2d39;
}

/* --- Ogólne klasy dla sekcji --- */
.service-section, .dzierzawa-hero-section, .dzierzawa-main-content-section, .dzierzawa-benefits-section {
    padding: 80px 0;
}
.section-title {
    text-align: center;
    font-size: 2.2em;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 50px;
}
.section-title-left {
    font-size: 2.5em;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 20px;
}
.btn {
    display: inline-block;
    background-color: var(--primary-color);
    color: #fff !important; /* !important, żeby nadpisać ewentualne inne style */
    padding: 15px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
    border: none;
}
.btn:hover {
    background-color: var(--primary-hover);
    transform: translateY(-3px);
}

/* --- Hero Section --- */
.dzierzawa-hero-section { background-color: #fff; }
.dzierzawa-hero-content {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: 60px;
}
.dzierzawa-hero-text h3, .hero-dynamic-subtitle {
    font-size: 1.6em; /* Powiększamy dla lepszego efektu */
    line-height: 1.6;
    color: var(--text-color);
    margin: 1em 0 1.5em;
    min-height: 2em;
}
.hero-dynamic-subtitle .typed-text-element {
    color: var(--primary-color);
    font-weight: 600;
}
.dzierzawa-hero-image img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}
.hero-benefits-list { list-style: none; padding: 0; margin: 30px 0; }
.hero-benefits-list li { font-size: 1.1em; margin-bottom: 15px; display: flex; align-items: center; }
.hero-benefits-list i { color: var(--primary-color); margin-right: 15px; font-size: 1.4em; }
.hero-cta-wrapper { display: flex; align-items: center; gap: 25px; flex-wrap: wrap; margin-top: 25px; }
.hero-phone-link { font-size: 1.2em; font-weight: bold; color: var(--heading-color); text-decoration: none; }
.hero-phone-link i { margin-right: 8px; color: var(--primary-color); }


/* --- Karty "Co oferujemy / Co serwisujemy" --- */
.service-grid, .features-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}
.service-card {
    background-color: #fff; border-radius: 10px; padding: 40px 25px; text-align: center;
    box-shadow: 0 8px 25px rgba(0,0,0,0.07); transition: all 0.3s ease;
    border-top: 4px solid var(--primary-color);
}
.service-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0,0,0,0.1); }
.service-card__icon, .icon-wrapper {
    background-color: var(--primary-color); color: #fff; width: 80px; height: 80px;
    border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: 2.5em; margin-bottom: 25px;
}
.service-card__title, .feature-icon-item h4 {
    font-size: 1.3em; font-weight: 600; color: var(--heading-color);
}
.main-intro-text { max-width: 800px; margin: 0 auto 50px; text-align: center; font-size: 1.1em; color: var(--text-color); }

/* Animacja dla kart na stronie Dzierżawy */
.features-reveal-wrapper .feature-icon-item { opacity: 0; transform: translateY(30px); transition: all 0.5s ease-out; }
.features-reveal-wrapper.is-visible .feature-icon-item { opacity: 1; transform: translateY(0); }
.features-reveal-wrapper.is-visible .feature-icon-item:nth-child(2) { transition-delay: 0.2s; }
.features-reveal-wrapper.is-visible .feature-icon-item:nth-child(3) { transition-delay: 0.4s; }


/* --- Sekcja Dwukolumnowa (Atuty) --- */
.dzierzawa-benefits-section { background-color: #fff; }
.benefits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.benefits-text p { line-height: 1.7; color: var(--text-color); }
.benefits-list { list-style: none; padding: 0; margin-top: 25px; }
.benefits-list li { font-size: 1.05em; margin-bottom: 18px; display: flex; line-height: 1.6; }
.benefits-list li i { color: var(--primary-color); margin-right: 15px; margin-top: 5px; }


/* --- Sekcja Logotypy --- */
.logos-bar { padding: 60px 0; background-color: var(--light-gray-bg); }
.logos-bar .container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 50px; }
.logos-bar img { max-height: 45px; opacity: 0.7; transition: all 0.3s; filter: grayscale(100%); }
.logos-bar img:hover { opacity: 1; filter: grayscale(0%); }
.intro-text-wrapper { text-align: center; margin-bottom: 40px; }
.logos-intro-text { color: #555; font-weight: 500; font-size: 1.8em; }


/* --- Sekcja Finalne CTA --- */
.dzierzawa-final-cta-section {
    background-color: #da251d;
    color: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px; /* lub dowolna wysokość */
    padding: 20px; /* na wypadek wąskich ekranów */
  }
  
.dzierzawa-final-cta-section h2 { color: #fff; font-size: 2.3em; margin: 0; line-height: 1.4; max-width: 900px; margin-left: auto; margin-right: auto; align-items: center;}


/* --- Responsywność --- */
@media (max-width: 991px) {
    .dzierzawa-hero-content, .benefits-grid { grid-template-columns: 1fr; }
    .dzierzawa-hero-content { text-align: center; }
    .dzierzawa-hero-image { order: -1; margin-bottom: 40px; }
    .hero-cta-wrapper { justify-content: center; }
    .section-title-left { text-align: center; }
    .benefits-grid { gap: 50px; }
}

/* --- Poprawka koloru dla animowanego tekstu w Hero --- */
.category-hero-title #typed-text {
    color: var(--primary-color, #da251d); /* Ustawia kolor na czerwony */
    border-bottom: 3px solid var(--primary-color, #da251d); /* Dodaje fajne podkreślenie */
    padding-bottom: 5px;
}

/* ==========================================================================
   STYLIZACJA SEKCJI Z OFERTĄ (SPRZEDAŻ, DZIERŻAWA, SERWIS)
   ========================================================================== */
   .category-offer-details {
    padding: 80px 0;
    background-color: var(--light-gray-bg, #f8f9fa);
}

.offer-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

.offer-detail-item {
    background-color: #fff;
    padding: 40px 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(0,0,0,0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-bottom: 4px solid var(--primary-color, #da251d); /* Dajemy akcent na dole */
}

.offer-detail-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

.offer-detail-item i {
    font-size: 3em; /* Duża, wyraźna ikona */
    color: var(--primary-color, #da251d);
    margin-bottom: 25px;
    display: block;
}

.offer-detail-item h3 {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--heading-color, #1d2d39);
    margin-bottom: 15px;
}

.offer-detail-item p {
    font-size: 1.05em;
    line-height: 1.7;
    color: var(--text-color, #495057);
}

/* ==========================================================================
   SEKCJA: NIESKOŃCZONY CAROUSEL Z LOGOTYPAMI
   ========================================================================== */
   .logos-carousel-section {
    padding: 60px 0;
    background-color: var(--light-gray-bg, #f8f9fa);
    text-align: center;
}
.logos-bar-title {
    font-size: 1.5em;
    font-weight: 600;
    color: #495057;
    margin-bottom: 40px;
}

.logos-scroller {
    max-width: 1000px; /* Ograniczamy szerokość dla lepszego efektu maski */
    margin: 0 auto;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.logos-scroller__inner {
    display: flex;
    flex-wrap: nowrap;
    width: max-content; /* Pozwalamy kontenerowi być tak szerokim, jak jego zawartość */
    /* Animacja, która przesuwa kontener w lewo */
    animation: scroll 30s linear infinite;
}

.logos-scroller__inner img {
    height: 40px; /* Wysokość logotypów */
    margin: 0 40px; /* Odstęp między nimi */
    filter: grayscale(100%);
    opacity: 0.6;
    transition: filter 0.3s, opacity 0.3s;
}

/* Pauzowanie animacji po najechaniu myszką */
.logos-scroller:hover .logos-scroller__inner {
    animation-play-state: paused;
}
/* Efekt "podświetlenia" po najechaniu */
.logos-scroller:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* Definicja animacji przewijania */
@keyframes scroll {
    /* Zaczynamy od pozycji 0 */
    from {
        transform: translateX(0);
    }
    /* Kończymy na pozycji, która jest równa połowie szerokości kontenera */
    /* Dzięki temu, gdy pierwszy zestaw zniknie, drugi jest idealnie na jego miejscu */
    to {
        transform: translateX(calc(-50%));
    }
}




/* ==========================================================================
   Strona Kontaktowa (template-kontakt.php) - Zaawansowany Styl
   ========================================================================== */

/* --- Główny kontener i nagłówek strony --- */
.page-kontakt-template .site-main {
    padding-top: 10px; /* Dostosuj do wysokości swojego nagłówka */
    padding-bottom: 80px;
    background-color: #f8f9facb; /* Tło całej strony */
}

.page-kontakt-header.container {
    padding-top: 65px;
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    z-index: 1;
}

.page-kontakt-header .entry-title.section-title {
    margin-bottom: 25px;
    font-size: 2.5rem;
    font-weight: bold;
    color: #343a40;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    display: inline-block;
}

.page-kontakt-header .entry-title.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%; /* Możesz dostosować szerokość */
    height: 4px;
    background-color: #da251d; /* Akcent kolorystyczny */
    border-radius: 2px;
}


.page-kontakt-header .page-intro-text {
    font-size: 1.2em;
    color: #555;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    line-height: 1.7;
    padding: 0 20px;
}

/* --- Układ kolumnowy: Dane kontaktowe / Formularz --- */
.kontakt-layout-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Kolumna z danymi nieco węższa, formularz szerszy */
    gap: 80px;
    margin-bottom: 60px;
    padding: 0 20px;
}

.kontakt-details-column h4 {
    font-size: 1.6em;
    font-weight: 600;
    color: #343a40;
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #da251d;
    text-transform: uppercase;
}

.contact-info-block {
    margin-bottom: 35px;
}

.contact-info-block:last-child {
    margin-bottom: 0;
}

.contact-address {
    font-size: 1.1em;
    color: #343a40;
    line-height: 1.7;
}

.contact-address strong {
    display: block;
    margin-bottom: 8px;
    font-size: 1.2em;
    font-weight: 700;
    color: #2f3a41;
}

/* Ulepszona lista kontaktowa */
ul.contact-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

ul.contact-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.2em;
    margin-bottom: 20px;
    color: #343a40;
    font-weight: 400;
}

ul.contact-list li:last-child {
    margin-bottom: 0;
}

ul.contact-list li i {
    font-size: 1.5em;
    color: #da251d;
    width: 25px;
}

ul.contact-list li a {
    color: #343a40;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

ul.contact-list li a:hover {
    color: #da251d;
    transform: translateX(5px);
}

/* --- Kolumna formularza --- */
.kontakt-form-column h4 {
    font-size: 1.6em;
    font-weight: 600;
    color: #343a40;
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #da251d;
    text-transform: uppercase;
}

/* Styl formularza kontaktowego */
.kontakt-form-column .wpforms-field label, /* WPForms */
.kontakt-form-column .wpcf7-form label {   /* CF7 */
    font-size: 1.05em;
    color: #495057;
    margin-bottom: 10px;
    font-weight: 600;
}

.kontakt-form-column input[type="text"],
.kontakt-form-column input[type="email"],
.kontakt-form-column input[type="tel"],
.kontakt-form-column input[type="number"],
.kontakt-form-column textarea,
.kontakt-form-column select {
    width: 100%;
    padding: 15px 20px;
    border: 1px solid #ced4da;
    border-radius: 10px;
    font-size: 1em;
    background-color: #f7f7f7;
    margin-bottom: 20px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.kontakt-form-column input:focus,
.kontakt-form-column textarea:focus,
.kontakt-form-column select:focus {
    border-color: #da251d;
    box-shadow: 0 0 10px rgba(218, 37, 29, 0.2);
    outline: none;
}

.kontakt-form-column .wpforms-submit,
.kontakt-form-column .wpcf7-submit,
.kontakt-form-column button[type="submit"],
.kontakt-form-column input[type="submit"] {
    padding: 15px 35px;
    font-size: 1.1em;
    font-weight: 600;
    text-transform: uppercase;
    background-color: #da251d;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.kontakt-form-column .wpforms-submit:hover,
.kontakt-form-column .wpcf7-submit:hover,
.kontakt-form-column button[type="submit"]:hover,
.kontakt-form-column input[type="submit"]:hover {
    background-color: #c82333;
    transform: translateY(-3px);
}

/* Komunikaty z formularza */
.kontakt-form-column .wpforms-confirmation-container,
.kontakt-form-column .wpforms-error-container,
.kontakt-form-column .wpcf7-response-output {
    margin-top: 20px;
    padding: 15px;
    border-radius: 10px;
    font-size: 1em;
}

.kontakt-form-column .wpforms-confirmation-container {
    background-color: #d4edda;
    color: #155724;
}

.kontakt-form-column .wpforms-error-container,
.kontakt-form-column .wpcf7-validation-errors {
    background-color: #f8d7da;
    color: #721c24;
}

/* --- Sekcja Mapy --- */
.kontakt-map-section {
    margin-top: 60px;
    padding-top: 50px;
    border-top: 2px solid #e9ecef;
}

.map-title.section-title-left {
    font-size: 2em;
    margin-bottom: 30px;
    text-align: center;
}

.map-container iframe {
    width: 100%;
    min-height: 400px;
    border: none;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* --- Responsywność --- */

/* --- Tablety (np. do 991px) --- */
@media (max-width: 991px) {
    .kontakt-layout-wrapper {
        grid-template-columns: 1fr;
        gap: 50px;
    }
}

/* --- Telefony komórkowe (np. do 767px) --- */
@media (max-width: 767px) {
    .page-kontakt-header .entry-title.section-title {
        font-size: 2.2rem;
    }
    .kontakt-details-column h4,
    .kontakt-form-column h4,
    .map-title.section-title-left {
        font-size: 1.4em;
        text-align: center;
    }
    .kontakt-details-column {
        order: 1;
    }
    .kontakt-form-column {
        order: 2;
    }
    .map-container iframe {
        min-height: 300px;
    }
}
.error-404 {
    padding: 100px 20px;
    text-align: center;
}

.error-container {
    max-width: 700px;
    margin: 0 auto;
}

.error-code {
    font-size: 8rem;
    font-weight: 800;
    color: #da251d;
    margin: 0;
}

.error-message {
    font-size: 2rem;
    margin-top: 20px;
    color: #2c353b;
}

.error-description {
    font-size: 1.2rem;
    color: #6c757d;
    margin-bottom: 30px;
}

.btn-primary {
    background-color: #da251d;
    color: white;
    padding: 12px 24px;
    font-size: 1rem;
    text-decoration: none;
    border-radius: 4px;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #b51f15;
}


/* ===========================================
   ARCHIVE HEADER
=========================================== */
.archive-header {
    text-align: center;
    margin: 60px auto 40px;
    max-width: 800px;
    padding: 0 20px;
  }
  
  .archive-title {
    font-size: 3rem;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 15px;
    line-height: 1.2;
    letter-spacing: -0.5px;
  }
  
  .archive-description {
    font-size: 1.2rem;
    color: #666;
    line-height: 1.6;
  }
  
  /* ===========================================
     PRODUCTS GRID
  =========================================== */
  .products-grid {
    display: grid;
    gap: 35px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    padding: 0 20px;
    max-width: 1200px;
    margin: 0 auto 60px;
  }
  
  /* ===========================================
     PRODUCT CARD
  =========================================== */
  .product-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
  }
  
  .product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  }
  
  /* ===========================================
     THUMBNAIL
  =========================================== */
  .product-thumb {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: #f2f2f2;
  }
  
  .product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }
  
  .product-card:hover .product-thumb img {
    transform: scale(1.08);
  }
  
  .product-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 1rem;
    color: #aaa;
  }
  
  /* ===========================================
     INFO
  =========================================== */
  .product-info {
    padding: 20px 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }
  
  .product-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #222;
    margin-bottom: 8px;
    min-height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .product-excerpt {
    font-size: 0.95rem;
    color: #777;
    line-height: 1.5;
    margin-bottom: auto;
    margin-top: 6px;
  }
  
  /* ===========================================
     CTA
  =========================================== */
  .product-cta {
    display: inline-block;
    margin-top: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.9rem;
    color: #fff;
    background: #da251d;
    padding: 10px 16px;
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.2s ease;
  }
  
  .product-cta:hover {
    background: #a81c17;
    transform: translateY(-2px);
  }
  
  /* ===========================================
     EMPTY STATE
  =========================================== */
  .no-products {
    text-align: center;
    font-size: 1.2rem;
    color: #999;
    padding: 60px 20px;
  }
  
  /* ===========================================
     PAGINATION
  =========================================== */
  .pagination {
    text-align: center;
    margin: 40px auto;
  }
  
  .page-numbers {
    display: inline-block;
    margin: 0 5px;
    padding: 8px 14px;
    color: #444;
    font-size: 0.95rem;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.3s ease;
  }
  
  .page-numbers.current,
  .page-numbers:hover {
    background: #da251d;
    color: #fff;
  }
  
  /* ===========================================
     ANIMATIONS
  =========================================== */
  .products-grid .product-card {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.6s ease forwards;
  }
  
  .products-grid .product-card:nth-child(1) { animation-delay: 0s; }
  .products-grid .product-card:nth-child(2) { animation-delay: 0.05s; }
  .products-grid .product-card:nth-child(3) { animation-delay: 0.1s; }
  .products-grid .product-card:nth-child(4) { animation-delay: 0.15s; }
  .products-grid .product-card:nth-child(5) { animation-delay: 0.2s; }
  .products-grid .product-card:nth-child(6) { animation-delay: 0.25s; }
  
  @keyframes fadeUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* ===========================================
     MEDIA QUERIES
  =========================================== */
  @media (max-width: 768px) {
    .archive-title {
      font-size: 2.2rem;
    }
  
    .archive-description {
      font-size: 1rem;
    }
  
    .product-title {
      font-size: 1.1rem;
    }
  
    .products-grid {
      gap: 20px;
    }
  }
  



/* ==========================================================================
   Responsywność dla Strony Kontaktowej
   ========================================================================== */

/* --- Tablety (np. do 991px) --- */
@media (max-width: 991px) {
    .kontakt-layout-wrapper {
        grid-template-columns: 1fr; /* Jedna kolumna */
        gap: 45px; /* Mniejszy odstęp */
    }
    .kontakt-details-column {
        order: 1; /* Dane kontaktowe pierwsze */
    }
    .kontakt-form-column {
        order: 2; /* Formularz pod danymi */
    }
    .map-container iframe {
        min-height: 350px;
    }
}

/* --- Telefony komórkowe (np. do 767px) --- */
@media (max-width: 767px) {
    .page-kontakt-header.container {
        margin-bottom: 40px;
    }
    .page-kontakt-header .entry-title.section-title {
        font-size: 2em; /* Dostosuj do globalnych stylów H1 na mobile */
    }
    .page-kontakt-header .page-intro-text {
        font-size: 1em;
    }

    .kontakt-details-column h4,
    .kontakt-form-column h4,
    .map-title.section-title-left {
        font-size: 1.5em;
        text-align: center; /* Wyśrodkowanie tytułów */
        display: block; /* Aby text-align działało i border-bottom był pod tekstem */
        border-bottom-width: 0; /* Usuń border, bo zrobimy go przez ::after */
        padding-bottom: 0;
        position: relative;
        margin-bottom: 30px; /* Odstęp dla ::after */
    }
    .kontakt-details-column h4::after,
    .kontakt-form-column h4::after,
    .map-title.section-title-left::after {
        content: '';
        position: absolute;
        bottom: -10px; /* Odstęp między tekstem a linią */
        left: 50%;
        transform: translateX(-50%);
        width: 50px;
        height: 3px;
        background-color: #da251d;
    }

    .contact-info-block,
    .kontakt-form-column {
        /* Jeśli chcesz wyśrodkować całą zawartość, ale listy i adresy mogą wyglądać lepiej do lewej */
        /* text-align: center; */
    }

    /* Dla list kontaktowych wyśrodkowanych jako blok, ale tekst wewnątrz do lewej */
    ul.contact-list {
        /* Jeśli cały .contact-info-block jest text-align: center,
           możemy listę jako inline-flex wyśrodkować, a jej elementy wyrównać do lewej */
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start; /* Elementy li (ikona+tekst) wyrównane do lewej */
        /* text-align: left; - jeśli .contact-info-block ma text-align:center */
    }
    .contact-address {
        /* text-align: center; - jeśli cały blok ma być wyśrodkowany */
    }

    .map-container iframe {
        min-height: 300px;
    }

    .page-kontakt-template .page-editor-content.styled-content {
        margin-top: 50px;
        padding-top: 40px;
    }
}

/* ==========================================================================
    11. Responsywność (Media Queries)
    ========================================================================== */

/* --- Tablety (np. do 991px) --- */
@media (max-width: 991px) {
    body { padding-top: 90px; }
    .container { width: 95%; }
    h1 { font-size: 2.5em; }
    h2 { font-size: 2em; }

    /* Header */
    .site-header { padding: 15px 0; }
    .site-branding img { max-height: 55px; }
    .header-inner { flex-wrap: wrap; justify-content: center; }
    .header-right-content { align-items: center; margin-top: 10px; width: 100%; }
    .top-contact-wrapper { justify-content: center; }
    .main-navigation { justify-content: center; margin-top: 10px; width: 100%;}
    .main-navigation ul#primary-menu { gap: 15px; }
    

    /* Hero */
    .hero { padding: 60px 0; }
    .hero .container { flex-direction: column; text-align: center; }
    .hero-text { flex-basis: 100%; margin-bottom: 30px; order: 2; }
    .hero-image { flex-basis: 100%; text-align: center; order: 1; }
    .hero h1 { font-size: 2.8em; }
    .hero p { max-width: 100%; }

    /* Logos Bar */
    .logos-bar .logos-image-container { gap: 40px; }
    .logos-bar .logos-image-container img { height: 50px; max-width: 150px; }

    /* Product Features */
    .features-container { grid-template-columns: 1fr; }
    .feature-item h2 { font-size: 1.5em; }
    .feature-text-overlay { min-height: 80px; padding: 20px 25px; }

    /* About Detailed / Moved Benefits */
    .about-detailed-content { flex-direction: column; gap: 40px; }
    .about-detailed-image { order: 1; position: static; /* Usuń sticky na tabletach */ }
    .about-detailed-text { order: 2; }
    .moved-benefits-container {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Elastyczniej, 1-2 kolumny */
        gap: 25px;
    }
    .moved-benefit-icon i { width: 60px; height: 60px; line-height: 60px; font-size: 2em;}
    .moved-benefit-title { font-size: 1.15em; }


    /* Footer */
    .footer-widgets-container { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
}


/* --- Telefony komórkowe (np. do 767px) --- */
@media (max-width: 767px) {
    body { padding-top: 75px; }
    h1 { font-size: 2.2em; }
    h2 { font-size: 1.8em; }

    /* Header */
    .site-branding img { max-height: 50px; }
    .header-right-content { gap: 8px; }
    .top-contact-wrapper { height: auto; flex-wrap: wrap; justify-content: center; }
    .emergency-contact-tag, .phone-number-block { flex-grow: 1; justify-content: center; font-size: 0.8em; padding: 8px 10px; height: auto; clip-path: none !important; -webkit-clip-path: none !important; margin: 3px; border-radius: 4px; }
    .contact-separator-icon { display: none; }
    nav#site-navigation { display: none; } /* Ukryj nawigację desktop */

    /* Hero */
    .hero { padding: 50px 0; }
    .hero h1 { font-size: 2.2em; }
    .hero p { font-size: 1em; }

    /* Logos Bar */
    .logos-intro-text { font-size: 1.5em; }
    .logos-bar .logos-image-container { gap: 30px; }
    .logos-bar .logos-image-container img { height: 45px; max-width: 120px; }

    /* Product Features */
    /* Już jest 1 kolumna z poprzedniego media query */
    .feature-item { min-height: 280px; }
    .feature-item h2 { font-size: 1.4em; }
    .feature-text-overlay { padding: 20px 25px; }
    .feature-more-link { font-size: 0.9em; }

    /* About Detailed / Moved Benefits */
    .moved-benefits-container {
        grid-template-columns: 1fr; /* Jedna kolumna dla telefonów */
        gap: 25px;
    }
    .moved-benefit-item {
      max-width: 300px; /* Aby nie rozciągały się za bardzo */
      margin-left: auto;
      margin-right: auto;
    }

    /* Footer */
    .footer-widgets-container { grid-template-columns: 1fr; gap: 35px; padding: 40px 0; }
    .footer-widget-area { text-align: center; }
    .footer-widget-area h4 { display: block; }
    .footer-widget-area ul li a { justify-content: center; }
    .map-container iframe { height: 200px; }
    .footer-address { text-align: center; }
    .site-info-container { padding: 15px 0; }
    .site-info { font-size: 0.8em; }
}

/* ==========================================================================
    12. Animacje Wejściowe (Definicje)
    ========================================================================== */
@keyframes slideInLeft { from { opacity: 0; transform: translate3d(-50px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes slideInRight { from { opacity: 0; transform: translate3d(50px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }