/* ==========================================================================
   UKŁAD PRODUKTÓW GBOX (4 KOLUMNY / 2 KOLUMNY / MOBILE)
   ========================================================================== */

/* 1. GŁÓWNA STRUKTURA BOXA */
.flex_column.gbox-product-new {
    background: #ffffff !important;
    border-radius: 25px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    min-height: 630px; /* Zapewnia równą wysokość boxów */
    position: relative !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Delikatny cień dla efektu premium */
}
.gbox-product-new .av-special-heading {margin-top:30px;}
.gbox-product-new h4.av-special-heading-tag,.gbox-product-new .av-subheading.av-subheading_below, .gbox-product-new strong {color:#121212}
/* Kolor tekstu i rozciąganie środka boxa */
.gbox-product-new .av_textblock_section {
    color: #414141 !important; /* Twój kolor tekstu */
    padding: 0 25px !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.gbox-product-new h4 {
    margin-top: 10px !important;
	padding-top: 0 !important;
	color:#444;
	font-size:1.5em;
}

.gbox-product-new h3 {
		color:#444;
		 margin-top: 10px !important;
    padding-top: 0 !important;
}

/* Usunięcie odstępu pod obrazkiem produktu */
.gbox-product .avia-image-container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
	 max-height: 120px !important; /* To zlikwiduje 'puste pudełko' po obrazku */
}
/* 3. Dodatkowa poprawka, jeśli pusta przestrzeń nadal jest duża */
.gbox-product .av_textblock_section {
    margin-top: -20px !important; /* Podciąga cały blok opisu wyżej */
}

/* 1. KONTENER PRZYCISKÓW - Wymuszamy elastyczny rząd */
/* 1. Resetujemy strukturę Enfolda - to jest kluczowe */
.gbox-product .przyciski-produkty .avia-buttonrow-inner {
    display: flex !important;
    flex-direction: row !important; /* Wymuszamy układ poziomy */
    flex-wrap: nowrap !important;   /* Zakaz przeskakiwania do nowej linii */
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    gap: 10px !important;           /* Odstęp między przyciskami */
}

#top .gbox-product .avia-button {
padding: 10px 2px !important; }
/* 2. Każdy "owijacz" przycisku musi przestać być blokiem */
#top .gbox-product .avia-button-wrap {
    display: inline-block !important;
    float: none !important;
    width: auto !important;         /* Nie może brać 100% szerokości */
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Twój konkretny wymiar przycisku (137px) */
#top .gbox-product .avia-button-wrap a.avia-button {
    width: 137px !important;
    min-width: 137px !important;
    max-width: 137px !important;
    padding: 10px 2px !important;   /* Mały boczny padding, by tekst wszedł */
    margin: 0 !important;
    font-size: 12px !important;     /* Bezpiecznik, by napisy się zmieściły */
    border-radius: 50px !important;
}

/* 4. Usuwamy ukryte elementy Enfolda, które mogą robić odstępy */
.gbox-product .avia-buttonrow-inner::before,
.gbox-product .avia-buttonrow-inner::after {
    display: none !important;
}

/* 3. OBRAZKI (Fix na ucinanie i blokowanie kliknięć) */
.gbox-product-new .avia-image-container {
    padding-top: 30px !important;
    margin-bottom: 10px !important;
    pointer-events: none !important; /* Kliknięcia "przelatują" do przycisków */
    z-index: 1 !important;
    overflow: visible !important;
}

.gbox-product-new .avia-image-container-inner,
.gbox-product-new .avia_image {
    overflow: visible !important;
}

/* 4. RESPONSYWNOŚĆ (Media Queries) */

/* A. DUŻE EKRANY (4 kolumny w rzędzie) */
@media only screen and (min-width: 1201px) {
    #top .flex_column.gbox-product-new {
        width: 24% !important;
        margin-left: 1% !important;
        float: left !important;
		min-height: 640px; 
    }
    #top .flex_column.gbox-product-new.avia-builder-el-first {
        margin-left: 0 !important;
    }
}

/* B. TABLETY I MAŁE LAPTOPY (2 kolumny wyśrodkowane - np. 970px) */
@media only screen and (max-width: 1200px) and (min-width: 768px) {
    #top .entry-content-wrapper {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    #top .flex_column.gbox-product-new {
        width: 44% !important;
        max-width: 380px !important; /* Zapobiega zbyt szerokim boxom */
        margin: 0 15px 40px 15px !important;
        float: none !important;
    }
}

/* C. TELEFONY (Wąski box wyśrodkowany) */
@media only screen and (max-width: 767px) {
    #top .flex_column.gbox-product-new {
        width: 85% !important;
        max-width: 320px !important;
        margin: 0 auto 30px auto !important;
        float: none !important;
        min-height: auto !important;
    }
    /* Na mobile przyciski 137px ustawiamy jeden pod drugim */
    .gbox-product-new .przyciski-produkty a.avia-button {
    
    }
}

/* podniesienie obrazka */
/* 1. Podniesienie obrazka nad box */
.gbox-product-new .img-produkt {
    margin-top: -120px !important; /* Wyciąga obrazek w górę na niebieskie tło */
    margin-bottom: -40px !important; /* Likwiduje 'dziurę', która powstałaby pod obrazkiem */
    z-index: 5 !important;
    position: relative !important;
    pointer-events: none !important; /* Kluczowe: obrazek nie zasłoni klikalności przycisków */
}

/* 2. Odblokowanie ucinania (żeby obrazek był widoczny poza boxem) */
#top .flex_column.gbox-product-new {
    overflow: visible !important;
}

/* 3. Rezerwacja miejsca nad boxami w rzędzie */
/* Żeby obrazki z drugiego rzędu nie wchodziły na przyciski rzędu powyżej */
#top .flex_column.gbox-product-new {
    margin-top: 100px !important;
    margin-bottom: 90px !important;
}

/* 4. Zapewnienie, że kontenery Enfolda nie ucinają wystającego obrazka */
.img-produkt .avia-image-container-inner,
.img-produkt .avia_image {
    overflow: visible !important;
}