/* 
Theme Name: BWTrening Theme
Theme URI: https://bwtrening.com/
Author: BWTrening
Author URI: https://bwtrening.com/
Description: Własny motyw WordPress do strony treningowej
Version: 1.0
*/

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    font-family: 'Archivo Black', sans-serif;
    background-color: #fff;
}

/* ======================= */
/* ======= HEADER ======== */
/* ======================= */
header.site-header {
    background-color: #111;
    color: #f5eee0;
    padding: 30px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
    z-index: 10;
}

.logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 10;
}

.logo span {
    font-size: 52px;
    font-weight: 700;
    color: #f5eee0;
    display: inline-block;
    font-family: 'BinateText', sans-serif;
}

.site-header a {
    color: #f5eee0;
    text-decoration: none;
}

.header-left,
.header-right {
    display: flex;
    gap: 20px;
    align-items: center;
}

.header-left i,
.header-right i {
    font-size: 32px;
    color: #f5eee0;
}

/* ======================= */
/* ======= MENU ========= */
/* ======================= */
.double-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #111;
    padding: 10px 0;
    gap: 10px;
}

.menu-row {
    display: flex;
    gap: 60px;
}

.menu-row a {
    font-family: 'Archivo Black', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: #f5eee0 !important;
    text-decoration: none;
    transition: color 0.3s ease;
}

.menu-row a:hover {
    color: #ffffff;
}

.menu-row.long-names {
    display: flex;
}

.menu-row.short-names {
    display: none;
}

/* ======================= */
/* ======= FOOTER ======== */
/* ======================= */
footer.site-footer {
    background-color: #111;
    color: #f5eee0;
    text-align: center;
    padding: 20px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.footer-logo {
    margin-bottom: 8px;
}

.footer-logo a {
    font-size: 44px;
    color: #f5eee0;
    text-decoration: none;
    font-family: 'Archivo Black', sans-serif;
    font-weight: 700;
}

.footer-menu {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.footer-menu a {
    font-size: 16px;
    color: #f5eee0;
    text-decoration: none;
    font-family: 'Archivo Black', sans-serif;
    font-weight: 600;
}

.footer-menu a:hover {
    color: #ffffff;
}

.footer-socials {
    display: flex;
    gap: 24px;
    margin-top: 8px;
    font-size: 28px;
}

.footer-socials a {
    color: #f5eee0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-socials a:hover {
    color: #ffffff;
}

.footer-copy {
    font-size: 12px;
    color: #f5eee0;
    font-family: 'Archivo Black', sans-serif;
    font-weight: normal;
}

/* ======================= */
/* ======= CONTENT ======= */
/* ======================= */
.site-main {
    background-color: #f5eee0;
    min-height: 60vh;
    padding: 40px 0;
}

.site-main .content-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ======================= */
/* ======= FONTS ========= */
/* ======================= */
@font-face {
    font-family: 'BinateText';
    src: url('fonts/BinateText-BlackItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* ============================ */
/* == RESPONSYWNOŚĆ (MOBILE) == */
/* ============================ */
@media (max-width: 1024px) {
    header.site-header {
        padding: 10px 20px !important;
    }

    .logo span {
        font-size: 24px !important;
        font-weight: 600 !important;
    }

    .header-left i,
    .header-right i {
        font-size: 20px !important;
    }

    .menu-row.long-names {
        display: none;
    }

    .menu-row.short-names {
        display: flex;
        gap: 20px;
    }

    .menu-row.short-names a {
        font-size: 16px;
    }

    .footer-logo a {
        font-size: 28px;
    }

    .footer-menu {
        flex-direction: column;
        gap: 10px;
    }

    .footer-menu a {
        font-size: 14px;
    }

    .footer-socials {
        font-size: 24px;
        margin-top: 8px;
    }

    .site-header .header-right {
        transition: none;
        transform: none !important;
    }

    .cart-panel {
        display: none;
    }
}


/* === PANEL KOSZYKA === */
.cart-panel {
    position: fixed;
    top: 0.5cm;
    right: 0.5cm;
    width: 340px;
    height: calc(100vh - 1cm);
    background-color: #999999;
    color: #111;
    border-radius: 10px;
    padding: 20px;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    transform: translateX(150%);
    z-index: 9999;
    margin-bottom: 0.5cm;
}

.cart-panel.open {
    transform: translateX(0);
}

.cart-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid #111;
    padding-bottom: 10px;
}

.cart-panel-header h2 {
    font-size: 24px;
    color: #111;
    margin: 0;
    text-transform: uppercase;
    font-weight: 850;
}

.cart-panel-content {
    font-size: 16px;
    color: #111;
}

.cart-panel-content a {
    color: #111;
    text-decoration: underline;
}

.site-header .header-right {
    transition: transform 0.3s ease;
}

@media (min-width: 1025px) {
    .cart-open .site-header .header-right {
        transform: translateX(-120px);
    }
}

.close-cart {
    background: none;
    border: none;
    font-size: 24px;
    color: #111;
    cursor: pointer;
    margin-left: 20px;
    margin-top: 2px;
}

/* ======================= */
/* === PANEL KOSZYKA 2 === */
/* ======================= */

/* Standardowe przesunięcie dla komputerów (większe niż wcześniej) */
@media (min-width: 1025px) {
    .cart-open .site-header .header-right {
        transform: translateX(-290px);
    }
}


.account-header {
  background: #111;
  color: #f5eee0;
  text-align: center;
  padding: 1rem 0;
}
.account-header__name {
  margin: 0;
  font-size: 1.5rem;
}
.account-header__since {
  margin-top: .25rem;
  font-size: .9rem;
}

.account-nav {
  background: #222;
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: .75rem 0;
}
.account-nav__item {
  color: #aaa;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: .9rem;
  opacity: .8;
  transition: opacity .2s;
}
.account-nav__item i {
  font-size: 1.25rem;
  margin-bottom: .25rem;
}
.account-nav__item.is-active,
.account-nav__item:hover {
  color: #fff;
  opacity: 1;
}
.account-nav__item.is-active i {
  color: #4caf50;
}



.user-icon-loader {
    margin-left: 6px;
    font-size: 14px;
    color: #f5eee0;
}




/* === STRONA LOGOWANIA – STYLIZACJA NA WZÓR NIKE (Z AKTUALIZACJAMI) === */
.bw-login-form-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 40px;
}

.bw-login-form {
    background-color: transparent; /* usunięcie białego tła */
    border-radius: 10px;
    padding: 40px;
    max-width: 500px;
    width: 100%;
    box-shadow: none; /* usunięcie cienia */
    color: #111; /* kolor tekstu */
}

.bw-login-form h2 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 25px;
    color: #111 !important;
    text-align: left;
}

.bw-login-form label {
    display: none;
}

.bw-login-form input[type="email"] {
    width: 100%;
    padding: 14px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 15px;
    margin-bottom: 20px;
    background-color: #fff;
    color: #111;
}

.bw-login-form input[type="email"]::placeholder {
    color: #888;
    font-size: 15px;
}

.bw-login-form p {
    font-size: 12px;
    color: #111 !important;
    line-height: 1.6;
    margin-bottom: 30px;
}

.bw-login-form a {
   color: #111 !important;
    text-decoration: underline;
}

.bw-login-form input[type="submit"] {
    background-color: #111;
    color: #fff;
    border: none;
    padding: 14px 20px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.bw-login-form input[type="submit"]:hover {
    background-color: #000;
}

/* Nagłówek formularza logowania */
.login-intro {
    color: #111 !important;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

/* Dopiski pod polem e-mail */
.login-note {
    color: #f5eee0;
    font-size: 13px;
    font-weight: 400;
    text-align: center;
    margin-top: 12px;
    line-height: 1.5;
}

.login-note a {
    color: #f5eee0;
    text-decoration: underline;
}

.login-note a:hover {
    color: #ffffff;
}


/* usuwamy tło i cień */
.bw-login-form {
  background: transparent !important;
  box-shadow: none !important;
}

/* komunikat błędu */
.error-message {
  color: #ff5555;
  font-size: 13px;
  margin: 8px 0 0;
}

/* nagłówek & notatka */
.login-intro,
.login-note {
  color: #111 !important;
}



/* Placeholder zawsze widoczny i w ciemnym kolorze */
.bw-login-form input::placeholder {
  color: #888 !important;
  opacity: 1 !important;
}

/* Vendor prefixes żeby działało we wszystkich przeglądarkach */
.bw-login-form input::-webkit-input-placeholder {
  color: #888 !important;
}
.bw-login-form input::-moz-placeholder {
  color: #888 !important;
}
.bw-login-form input:-ms-input-placeholder {
  color: #888 !important;
}
.bw-login-form input:-moz-placeholder {
  color: #888 !important;
}


/* ========== CUSTOM EMAIL FIELD ========== */
.bw-login-form {
  max-width: 400px;
  margin: 0 auto;          /* wyśrodkowanie formularza */
}

.bw-login-form input[type="text"],
.bw-login-form input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  border: 2px solid #111;  /* czarne obramowanie */
  border-radius: 6px;
  background-color: #fff;   /* białe tło */
  color: #111;              /* czarny tekst */
  box-sizing: border-box;
  transition: border-color .2s;
}

/* placeholder */
.bw-login-form input::placeholder {
  color: #666; /* ciemnoszary */
  opacity: 1;
}

/* przy focusie zmiana obramowania */
.bw-login-form input:focus {
  outline: none;
  border-color: #333;
}






/* ============================= */
/* = CUSTOM EMAIL FIELD STYLE  = */
/* ============================= */

/* Celujemy bezpośrednio w Twój formularz i w pole email */
#bw-email-form input#user_email {
  width: 100% !important;       /* na pełną szerokość rodzica */
  max-width: 100% !important;   /* teraz pole nie będzie ograniczone żadnym 700px */
  padding: 0 14px !important;            /* zachowujemy poziome odsunięcie */
  font-size: 16px !important;   /* rozmiar tekstu */
  border: 2px solid #111 !important; /* czarne obramowanie */
  border-radius: 6px !important;     /* zaokrąglone rogi */
  background-color: #f5eee0 !important; /* takie samo jak tło strony */
  color: #111 !important;             /* czarny tekst */
  box-sizing: border-box !important;  /* padding wliczony w szerokość */
  transition: border-color .2s !important;
  height: 60px !important;               /* zwiększamy wysokość */
  line-height: 1.3 !important;           /* wyrównanie tekstu w pionie */
  margin: 0 auto 20px auto !important; /* wycentrowanie i odstęp pod */
}

/* placeholder */
#bw-email-form input#user_email::placeholder {
  color: #666 !important; /* ciemnoszary tekst placeholdera */
  opacity: 1 !important;
}

/* focus */
#bw-email-form input#user_email:focus {
  outline: none !important;
  border-color: #333 !important;
}

/* Rozciągamy kontener formularza do max. szerokości */
#bw-email-form.bw-login-form {
  width: 100% !important;         /* zawsze 100% rodzica */
  max-width: 500px !important;    /* lub dowolna szerokość wg Nike */
  margin: 0 auto 20px auto !important; /* centrujemy formularz */
  padding: 0 !important;          /* jeśli masz nadmiarowe paddingi */
}


/* Rozciągamy cały formularz do max. 700px i centrujemy */
.bw-login-form {
  width: 100% !important;        /* zajmuje całą szerokość kontenera nadrzędnego */
  max-width: 500px !important;   /* takie maksymalne podobne do Nike */
  margin: 40px auto 0 auto;      /* góra 40px, wycentrowanie w poziomie */
  padding: 0 !important;         /* usuń ewentualne paddingi, jeśli są */
  box-sizing: border-box;
}

#bw-email-form input#user_email {
  width: 100% !important;
}


/* Powiększenie nagłówka formularza logowania */
.bw-login-form .login-intro {
  font-size: 24px !important;   /* nowy rozmiar – możesz też podać np. 1.5rem */
  line-height: 1.3 !important;   /* trochę więcej odstępu między wierszami */
  text-align: center !important; /* już jest, ale dla pewności */
}


/* =====================================================================
   Styl „Kontynuuj” – szeroki, zaokrąglony, jak u Nike
===================================================================== */
#bw-email-form input[type="submit"] {
  /* Kolory */
  background-color: #111 !important;
  color: #fff !important;

  /* Brak obramowania, zaokrąglone rogi */
  border: none !important;
  border-radius: 6px !important;

  /* Wymiary – rozciągnij na całą szerokość formularza, max 600px */
  width: 100% !important;
  max-width: 300px !important;
  padding: 16px 0 !important;
  
  /* Tekst */
  font-size: 16px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;

  /* Myszka */
  cursor: pointer !important;

  /* Przejście koloru */
  transition: background-color .3s ease !important;
  
  /* Wycentrowanie w kontenerze */
  display: block !important;
  margin: 30px auto 0 auto !important;
}

/* Hover */
#bw-email-form input[type="submit"]:hover {
  background-color: #000 !important;
}



/* tło „białego paska” pod stopką */
body {
  background-color: #111 !important;
}
html {
  background-color: #111 !important;
}


/* zwiększone odstępy w formularzu logowania */
.bw-login-form .login-intro {
  margin-bottom: 2.5rem !important;  /* odległość od napisu do pola */
}

#bw-email-form input#user_email {
  margin-bottom: 2.5rem !important;  /* odległość od pola do tekstu o regulaminie */
}

/* usunięcie podkreślenia tylko dla “Politykę prywatności BWTrening” */
.login-note a:last-of-type {
  text-decoration: none !important;
}
.login-note a:last-of-type:hover {
  text-decoration: none !important;
}






/* === REJESTRACJA BWTrening – stylizacja na wzór Nike === */

.bw-reg-form-container {
  display: flex;
  justify-content: center;
  margin: 5px 0;
}

.bw-reg-form {
  background-color: transparent;
  max-width: 500px;
  width: 100%;
  padding: 0;
  box-shadow: none;
}

/* nagłówek z adresem i linkiem „Edytuj” */
.bw-reg-form .reg-intro {
  font-size: 20px;
  font-weight: 600;
  color: #111;
  margin-bottom: 24px;
}

/* wszystkie inputy */
.bw-reg-form input[type="text"],
.bw-reg-form input[type="password"],
.bw-reg-form input[type="tel"] {
  width: 100%;
  height: 56px;
  padding: 0 16px;
  margin-bottom: 16px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  box-sizing: border-box;
  color: #111;
}

/* placeholder */
.bw-reg-form input::placeholder {
  color: #888;
}

/* rząd: kod + ikonka odświeżania (tu zostawimy miejsce na SVG) */
.bw-reg-form #reg_code {
  position: relative;
}
.bw-reg-form #reg_code + .error-code {
  margin: 0;   /* usuwa zarówno margin-top, jak i margin-bottom */
}



/* imię i nazwisko obok siebie */
.bw-reg-form .reg-name-row {
  display: flex;
  gap: 12px;
}
.bw-reg-form .reg-name-row input {
  flex: 1;
}

/* data urodzenia obok siebie */
.bw-reg-form .reg-dob-row {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}
.bw-reg-form .reg-dob-row input {
  flex: 1;
}

/* hasło + criteria */
.bw-reg-form .password-criteria {
  font-size: 13px;
  margin-top: -8px;
  margin-bottom: 16px;
}
.bw-reg-form .password-criteria div {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #999;
}

/* powtórz hasło */
.bw-reg-form .error-passmatch {
  font-size: 13px;
  color: #e60000;
  margin-top: -8px;
  margin-bottom: 16px;
}

/* pole preferencji – można nadpisać selecta Woocommerce */
.bw-reg-form select {
  width: 100%;
  height: 56px;
  padding: 0 16px;
  margin-bottom: 16px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg ...>'); /* dodaj strzałkę */
  background-repeat: no-repeat;
  background-position: right 16px center;
  box-sizing: border-box;
}

/* przycisk */
.bw-reg-form .register-button {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 24px auto 0;
  padding: 14px 0;
  background-color: #000;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: background-color .3s;
}
.bw-reg-form .register-button:hover {
  background-color: #111;
}

.bw-password-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}
.bw-password-wrapper input {
  padding-right: 2.5em;
}
.bw-password-wrapper .toggle-password {
  position: absolute;
  top: 50%;
  right: 0.75em;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 1.1em;
  color: #888;
  user-select: none;
}
.bw-password-wrapper .toggle-password:hover {
  color: #333;
}

/* 1. Upewniamy się, że kontener inputa jest position:relative */
.bw-reg-form .bw-reg-form input[type="password"] {
  position: relative;
  padding-right: 2.5em; /* zostaw miejsce na ikonę */
}

/* 2. Styl dla ikonki „oka” */
.bw-reg-form .toggle-password {
  position: absolute;
  top: 40%;
  right: 1em;           /* odsunięcie od prawej krawędzi pola */
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 1.1em;     /* rozmiar ikony – dopasuj do swojego */
  color: #888;
}

/* 3. Gdy pole ma focus, możesz zmienić kolor ikony */
.bw-reg-form input[type="password"]:focus + .toggle-password {
  color: #111;
}







/* ==== CUSTOM CHECKBOX „na wzór Nike” ==== */
.bw-reg-form .bw-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  border: 2px solid #111;
  border-radius: 4px;
  background-color: transparent;
  position: relative;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}

.bw-reg-form .bw-checkbox input[type="checkbox"]:checked {
  background-color: #111;
  border-color: #111;
}

/* pseudo‐element „ptaszek” */
.bw-reg-form .bw-checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 70% !important;
  left: 50% !important;
  width: 6px !important;
  height: 12px !important;
  border: solid #fff !important;
  border-width: 0 2px 2px 0 !important;
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

/* ==== NOWY STYL REG-INTRO ==== */
.bw-reg-form .reg-intro {
  text-align: center;
  margin-bottom: 24px;
}

.bw-reg-form .reg-intro-title {
  font-size: 28px;
  font-weight: 600;
  color: #111;
  margin-bottom: 12px;
}

.bw-reg-form .reg-intro-subtitle {
  font-size: 16px;
  color: #111;
  margin: 0;
}

.bw-reg-form .reg-intro-email {
  font-size: 16px;
  font-weight: 600;
  color: #111;
  margin: 4px 0 0;
}

/* ------------------------------------------------ */
/* PW-CRITERIA – domyślnie szare, potem valid/invalid */
/* ------------------------------------------------ */
/* domyślnie szary */
#pw-criteria [data-criterion],
#pw-match [data-criterion] {
  color: #999;
}

/* kiedy OK – zielony */
#pw-criteria [data-criterion].valid,
#pw-match [data-criterion].valid {
  color: #4caf50;
}

/* tylko po blur, gdy dodamy invalid – czerwony */
#pw-criteria [data-criterion].invalid,
#pw-match [data-criterion].invalid {
  color: #e60000;
}

/* obramowanie inputów */
.bw-reg-form input.valid {
  border-color: #4caf50;
}

.bw-reg-form input.invalid {
  border-color: #e60000;
}

/* 1) cyfry wpisywane w polach daty będą wyśrodkowane */
.bw-reg-form .reg-dob-row input {
  text-align: center;
}

/* 2) a placeholdery w tych polach zostaną wyrównane do lewej */
.bw-reg-form .reg-dob-row input::placeholder {
  text-align: left;
}
/* zmniejszony odstęp między datą a telefonem */
.bw-reg-form .reg-dob-row {
  margin-bottom: 0px !important;
}

/* Każdy checkbox w osobnym wierszu, z mniejszym odstępem */
.bw-reg-form label.bw-checkbox {
  display: block !important;
  margin: 6px 0 12px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}
.bw-reg-form .bw-checkbox a {
  text-decoration: underline;
  color: #111;  /* albo nieco jaśniejszy odcień brandowego koloru */
}
/* -------------------------------------------------
   Lista zgód w formularzu
   ------------------------------------------------- */
.bw-reg-form .bw-consents {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bw-reg-form .bw-consents li {
  margin-bottom: 12px;      /* odstęp między zgodami */
}
.bw-reg-form .bw-consents .bw-checkbox {
  display: flex;            /* checkbox + tekst w jednej linii */
  align-items: flex-start;
  gap: 8px;                 /* odstęp między samym checkboxem a tekstem */
  font-size: 14px;          /* trochę mniejszy tekst zgód */
  line-height: 1.4;  
}
.bw-reg-form .bw-consents a {
  text-decoration: underline;
  color: #111;
}
/* Usuń punktor (kropki) z listy zgód */
.bw-reg-form .bw-consents {
  list-style: none;
  margin: 0;
  padding: 0;
}


/* Wyrównanie checkbox + tekst w labelu za pomocą padding + absolute */
.bw-reg-form .bw-consents .bw-checkbox {
  position: relative;
  display: block;       /* każdy label jako blok */
  padding-left: 28px;   /* tyle, by zmieścić checkbox + gap */
  margin-bottom: 12px;  /* odstęp między zgodami */
  font-size: 14px;
  line-height: 1.4;
}

/* Checkbox absolutnie w lewym górnym rogu labelu */
.bw-reg-form .bw-consents .bw-checkbox input[type="checkbox"] {
  position: absolute;
  top: 4px;    /* dopasuj wertykalnie do środka tekstu */
  left: 0;
  margin: 0;   /* zresetuj domyślne marginesy */
}
/* lekko obniżamy tekst przy checkboxach */
.bw-reg-form .bw-consents .bw-checkbox {
  padding-top: 6px; /* przesuń tekst w dół – eksperymentuj z wartością (1–4px) */
}
.resend-code-btn {
  background: none;
  border: none;
  color: #111;
  font-size: 14px;
  margin-top: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.resend-code-btn i {
  margin-right: 4px;
  transition: transform .3s;
}
.resend-code-btn:disabled i {
  transform: rotate(90deg);
}
.resend-msg {
  font-size: 13px;
  margin-top: 4px;
  color: #4caf50;
}
.resend-msg.error {
  color: #e60000;
}
.resend-msg {
  margin-top: .5em;
  font-size: 14px;
  line-height: 1.2;
}
.resend-msg.success { color: #4caf50; }   /* zielony */
.resend-msg.error   { color: #e60000; }   /* czerwony */

input.invalid {
  border-color: #e00 !important;
}

.error-code.invalid {
  color: #e00;
  margin-top: .25em;
  font-size: .9em;
}
/* 1) czerwone obramowanie błędnego inputa */
.bw-reg-form input.invalid {
  border: 1px solid #d32f2f;      /* ciemnoczerwony border */
  box-shadow: none !important;    /* skasowanie ewentualnych innych cieni */
}

/* 2) styl komunikatu i margines nad nim */
.bw-reg-form .error-code.invalid {
  color: #d32f2f;                 /* ciemnoczerwony tekst */
  margin-top: 4px;                /* mniejszy odstęp od pola */
  font-size: 0.875rem;            /* lekko zmniejszony rozmiar czcionki */
  line-height: 1.2;               /* zwarta linia */
}

/* w razie potrzeby, wymuś też, żeby inputy miały domyślnie szary border */
.bw-reg-form input {
  border: 1px solid #ccc;
  transition: border-color .2s;
}
.bw-reg-form input:focus {
  border-color: #666;
}




/* ============================================================
   A) Rozmiar ikonki (tylko tu ustawiasz font-size dla <i>)
   ============================================================ */
.bw-code-wrapper .resend-code-btn i {
  font-size: 1.25rem; /* <-- tu możesz podbić/dobić rozmiar ikonki */
  line-height: 1;
  display: block;
}

/* ============================================================
   1) wrapper musi być relative
   ============================================================ */
.bw-code-wrapper {
  position: relative;
}

/* ============================================================
   2) input dostaje wystarczający padding po prawej,
      by nie zachodzić na ikonę
   ============================================================ */
.bw-code-wrapper input[type="text"] {
  padding-right: 2rem !important; /* 2rem ≈ szerokość ikonki + trochę oddechu */
}

/* ============================================================
   3) pozycjonujemy przycisk absolutnie
   ============================================================ */
.bw-code-wrapper .resend-code-btn {
  position: absolute;
  top: 32%;
  right: 1rem;               /* przesuwaj w poziomie aż idealnie będzie wbijać się w środek */
  transform: translateY(-50%);
  width: auto;
  height: auto;

  display: flex;
  align-items: center;
  justify-content: center;

  background: none;
  border: none;
  cursor: pointer;

  /* ten sam kolor co ikonka oka */
  color: inherit;
  opacity: 0.6;
  transition: opacity .2s;
}
.bw-code-wrapper .resend-code-btn:hover {
  opacity: 1;
}

/* ============================================================
   4) focus outline dla dostępności
   ============================================================ */
.bw-code-wrapper .resend-code-btn:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
/* 5) wygląd ikonki, gdy przycisk jest wyłączony (disabled) */
.bw-code-wrapper .resend-code-btn:disabled {
  /* opcjonalnie zmień opacity lub kolor, żeby było widać, że jest nieaktywne */
  opacity: 0.3 !important;
  cursor: not-allowed;
  /* jeśli chcesz, żeby ikona była jeszcze jaśniejsza, możesz też override’ować color:
     color: #ccc;   */
}
/* pod przyciskiem ikonki pojawi się licznik */
.bw-code-wrapper .resend-code-btn .resend-timer {
  margin-left: 0.5rem;
  font-size: 0.875rem;
  color: currentColor;
  opacity: 0.8;
}














/* === PROFILE HERO (Twoje Konto) === */
.profile-hero {
  position: relative;     /* konieczne, by children absolute działało względem tego kontenera */
  width: 100%;
  height: 18vh;
  background-color: #111;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 2rem;
  text-align: center;
}

/* kontener tekstów */
.profile-hero__content {
  z-index: 1;
}
/* odstęp między tytułem a podtytułem w banerze */
.profile-hero__content .hero-title {
  margin-bottom: 1rem; /* dostosuj wartość według uznania */
}
/* większy rozmiar głównego napisu w banerze */
.profile-hero__content .hero-title {
  font-size: 2.25rem; /* możesz dostosować, np. 1.75rem, 2.25rem itd. */
  line-height: 1.2;
}
/* większy rozmiar podtytułu w banerze */
.profile-hero__content .hero-subtitle {
  font-size: 1.1rem; /* domyślnie ~0.875rem, możesz podbić do 1rem lub więcej */
  margin-top: 0.25rem; /* odrobinę odstępu od tytułu */
  line-height: 1.3;
}


/* ===== POWIĘKSZONE BIAŁE MENU NAWIGACYJNE ===== */
.account-nav {
  position: absolute;
  left: 50%;
  bottom: -3rem;             /* delikatnie niżej, by belka mogła być wyższa */
  transform: translateX(-50%);
  background: #fff;
  width: 95%;                /* szersze */
  max-width: 900px;          /* większy max */
  padding: 2rem 0;           /* więcej góra/dół */
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 2;
}

.account-nav__item {
  color: #111;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.1rem;         /* większy font */
}

.account-nav__item i {
  font-size: 2rem;           /* większe ikonki */
  margin-bottom: 0.5rem;     /* większy odstęp pod ikonką */
}

.account-nav__item:hover {
  color: #333;
}
/* Rozciągnięcie belki na większą szerokość i lepsze rozmieszczenie */
.account-nav {
  width: 95%;               /* zamiast 90% */
  max-width: 1000px;        /* zamiast 800px */
  padding: 1rem 2rem;       /* zostawiamy wysokość, ale dajemy padding po bokach */
  justify-content: space-between; /* rozkładamy elementy na całą szerokość */
}

/* Opcjonalnie – dodajmy trochę odstępu wewnątrz pozycji, żeby klikalne były większe */
.account-nav__item {
  padding: 0 .5rem;         /* lekki padding poziomy */
}
.site-main {
  background-color: #f5eee0;
  min-height: 60vh;
  padding: 40px 0;
}
.account-nav__item.is-active,
.account-nav__item.is-active i {
  color: #4caf50;  /* lub inny brandowy */
}
/* =============== */
/* ACTIVE TAB FIX  */
/* =============== */

/* 1) Upewnij się, że nie ma żadnego domyślnego podkreślenia */
.account-nav__item,
.account-nav__item .account-nav__label {
  text-decoration: none !important;
}

/* 2) Pozycja relatywna potrzebna dla ::after */
.account-nav__item {
  position: relative;
}

/* 3) Aktywna zakładka – ikona i tekst czarne */
.account-nav__item.is-active i,
.account-nav__item.is-active .account-nav__label {
  color: #111 !important;
}

/* 4) Gruba kreska (indicator) pod aktywną labelką */
.account-nav__item.is-active .account-nav__label::after {
  content: "";
  position: absolute;
  bottom: -0.5rem;        /* przesunięcie od tekstu */
  left: 50%;
  transform: translateX(-50%);
  width: 80%;             /* szerokość kreski względem tekstu */
  height: 4px;            /* grubość kreski */
  background-color: #111; /* kolor czarny */
  border-radius: 2px;     /* lekko zaokrąglone końce */
  transition: all 0.3s ease;
}


/* ==================================================================== */
/*  RESPONSYWNE ROZŁOŻENIE MENU TWOJEGO KONTA                          */
/*  – na ekranach ≤600px: 2 ikony w pierwszym wierszu, 3 w drugim      */
/* ==================================================================== */
@media (max-width: 600px) {
  /* 1) HERO w kolumnę i lżejsze paddingi */
  .profile-hero {
    display: block !important;
    padding: 1rem 0 0 !important;
    height: 20vh !important;
	padding: 1rem 0 rem !important; 
  }
  .profile-hero__content {
    text-align: center !important;
    margin-bottom: 1rem !important;
  }
  .hero-title {
    font-size: 1.4rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.5rem !important;
  }
  .hero-subtitle {
    font-size: 1rem !important;
    margin-bottom: 1rem !important;
  }

  /* 2) NAV statycznie, łamanie na dwa wiersze */
  .account-nav {
    position: static !important;
    transform: none !important;
    margin: 0 auto 1rem !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0.5rem 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    column-gap: 0 !important;  
    row-gap: 0.5rem !important;   
  }


  /* 3) Pierwsze 3 po 1/3 szerokości, pozostałe po 1/2 */
  .account-nav__item {
    flex: 0 0 33.333% !important;
    margin-bottom: 0.5rem !important; 
    text-align: center !important;
  }
  .account-nav__item:nth-child(4),
  .account-nav__item:nth-child(5) {
  flex: 0 0 auto    !important;
  max-width: none   !important;
  margin-right: 0.75rem !important;
}


  /* 4) Ikonki i podpisy – zostawiamy bez zmian */
  .account-nav__item i {
    font-size: 1.8rem !important;
    margin-bottom: 0.4rem !important;
  }
  .account-nav__label {
    font-size: 0.85rem !important;
  }
}

/* Ewentualny licznik przy ikonce (opcjonalnie) */
.account-nav__item .badge {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  background: #e60000;
  color: #fff;
  font-size: 0.75rem;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
}
/* Upewniamy się, że tytuł i podtytuł w hero zawsze są jasne */
.profile-hero .hero-title {
  color: #f5eee0 !important;
}

.profile-hero .hero-subtitle {
  color: #ddd !important;
}




/* ====== FORMULARZ LOGOWANIA HASŁEM ====== */
.bw-login-form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;           /* odstęp od góry i dołu */
}

#bw-password-form.bw-login-form {
  background: transparent;   /* lub np. biały, jeśli chcesz */
  width: 100%;
  max-width: 400px;          /* szerokość formularza */
  padding: 0;                /* już odpowiada główny wrapper */
  box-shadow: none;
}

/* nagłówek i nota */
#bw-password-form .login-intro {
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 1rem;
  color: #111;
}
#bw-password-form .login-note {
  font-size: 1rem;
  text-align: center;
  margin-bottom: 1.5rem;
  color: #111;
}

/* styl inputu */
#user_pass {
  width: 100%;
  padding: 14px;
  border: 2px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  margin-bottom: 1rem;
  box-sizing: border-box;
}

/* ikonka show/hide */
.bw-password-wrapper {
  position: relative;
}
.bw-password-wrapper .toggle-password {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  cursor: pointer;
  opacity: .6;
}
.bw-password-wrapper .toggle-password:hover {
  opacity: 1;
}

/* przycisk */
#bw-password-form input[type="submit"] {
  background-color: #111;
  color: #fff;
  border: none;
  border-radius: 6px;
  width: 100%;
  padding: 14px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 0.5rem;
}
#bw-password-form input[type="submit"]:hover {
  background-color: #000;
}

/* link “Nie pamiętam hasła” */
.forgot-password-link {
  display: block;
  text-align: center;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #111;
  text-decoration: underline;
}
.forgot-password-link:hover {
  color: #333;
}


/* ==================================================== */
/* PODZAKŁADKI w „Moje konto” – dwie kolumny           */
/* ==================================================== */

/* całość: sidebar + panel obok siebie */
.account-inner {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
}

/* LEWA kolumna: pionowy sidebar */
.account-sidebar {
  flex: 0 0 200px;            /* sztywna szerokość bocznego menu */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.account-sidebar__item {
  display: block;
  padding: 0.75rem 1rem;
  background: #fff;           /* ten sam biały co Twój kontener */
  border-radius: 4px;
  color: #444;
  text-decoration: none;
  transition: background 0.2s;
}

.account-sidebar__item.is-active,
.account-sidebar__item:hover {
  background: #f0f0f0;        /* lekko szare tło przy aktywnym/hover */
  color: #111;
}
/* 1) Niech .account-inner siedzi w tym samym kontenerze co belka głównych zakładek */
.content-container {
  position: relative;
  z-index: 1;
}

/* 2) Wyśrodkuj i nadaj mu tę samą maks. szerokość co belka */
/* 1) Uwolnij szerokość wrappera */
.content-container {
  max-width: none !important;
  width: 100% !important;
  padding: 0 20px; /* jeśli chcesz zachować trochę marginesu po bokach */
}

/* 2) A teraz panel możesz skalować dowolnie w środku */
.account-inner {
  width: 100%;
  max-width: 1100px;     /* wpisz swoją docelową szerokość */
  margin: 30px auto 0;   /* 30px od góry, wycentrowanie w poziomie */
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  padding: 20px;
  display: flex;
  gap: 30px;
}
/* 3) Sidebar z podzakładkami ustaw jako wąski pasek */
.account-sidebar {
  flex: 0 0 220px;        /* stała szerokość 220px */
}

/* 4) Panel treści zajmuje resztę */
.account-panel {
  flex: 1;
}

/* 5) Drobne poprawki linków w sidebarze */
.account-sidebar__item {
  display: block;
  margin-bottom: 12px;
  padding: 10px;
  background: #f9f9f9;
  border-radius: 4px;
  color: #333;
  text-decoration: none;
}
.account-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0; /* <-- to wyłącza przestrzeń między podzakładkami */
}

.account-sidebar__item.is-active {
  background: #eee;
  font-weight: bold;
}
.account-sidebar__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  text-decoration: none;
  color: #333;
  font-weight: 500;
  font-size: 15px;
  border-left: 4px solid transparent;
  background: transparent;
  transition: all 0.2s ease;
}

.account-sidebar__item:hover {
  background-color: #f5f5f5;
  border-left-color: #000000;
}

.account-sidebar__item.is-active {
  background-color: #f5f5f5;
  border-left-color: #000000;
  font-weight: bold;
}
.account-sidebar__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px; 
  margin: 0;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.2s ease;
  font-size: 18px;             
}

.account-sidebar__item .icon {
  flex-shrink: 0;
  stroke: #333;
}

.account-sidebar__item:hover {
  background: #f0f0f0;
}

.account-sidebar__item.is-active {
  background: #f5f5f5;
  font-weight: bold;
  border-left: 4px solid #000;
  padding-left: 6px;
}
.account-sidebar__item svg {
  width: 22px;         
  height: 22px;
  flex-shrink: 0;
  stroke: #333;       
}
.account-sidebar__item[data-subtab="usun"] {
  align-items: flex-start;
  margin-top: -3px;
}
.account-sidebar__item[data-subtab="usun"] .icon {
  position: relative;
  top: -3px; 
}
.account-sidebar__item[data-subtab="logi"] .icon {
  position: relative;
  top: -1.5px; 
}
.account-sidebar__item[data-subtab="dane"] .icon {
  position: relative;
  top: -2px; 
}
.account-sidebar__item[data-subtab="info"] .icon {
  position: relative;
  top: -2px; 
}
.account-sidebar__item[data-subtab="info"].is-active .icon {
  transform: translateY(-9px);
}
.account-section-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #111;
}
.account-row {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.account-label {
  flex: 0 0 180px;
  font-weight: 600;
  color: #333;
}
.account-input {
  flex: 1;
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 16px;
  color: #333;
  pointer-events: none;
}
.account-input-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.account-input-group .account-input {
  flex: 1;
  min-width: 120px;
}
.account-row {
  margin-top: 10px; /* odstęp nad całym rzędem */
}

.account-label {
  display: block;
  margin-bottom: 6px; /* odstęp między etykietą a polami */
  font-weight: bold;
}

.account-label {
  margin-right: -40px; /* zmniejszamy odstęp */
  white-space: nowrap; /* zapobiega zawijaniu */
  align-self: center; /* dopasowanie do wysokości inputu */
}

.account-input-group {
  display: flex;
  gap: 12px; /* odstęp tylko między imieniem i nazwiskiem */
}
.account-input-group .account-input {
  transform: translateY(-2px); 
}
.account-input-group {
  display: flex;
  gap: 10px;
  margin-top: 5px;
}

.account-input.short {
  width: 60px;
  text-align: center;
}

.account-input.short {
  max-width: 80px;
  width: 100%;
}
.account-input.medium {
  width: 130px;  /* dostosuj jeśli trzeba */
  min-width: 120px;
  max-width: 160px;
}
.account-input.medium {
  text-align: center;
}
/* Styl strzałki ▼ wewnątrz pola select — większa wersja */
.account-input.medium {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23444' height='40' viewBox='0 0 24 24' width='40' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: 75% center;
  background-size: 1.6rem; /* większa strzałka */
  padding-right: 2.4rem; /* więcej miejsca na ikonę */
  cursor: pointer;
  text-align: center;
}
.account-input[readonly] {
  background-color: #f5f5f5;
  cursor: default;
}
.account-input:focus {
  outline: 2px solid #999;
}
.account-input {
  width: 100%;
  max-width: 400px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  resize: vertical;
}
.account-label {
  display: inline-block;
  max-width: 180px;     /* lub mniej, np. 150px */
  white-space: normal;  /* pozwala na zawijanie */
  word-break: break-word;
}
/* Tylko dla etykiety 'Dodatkowe informacje dla trenerów' */
.label-long {
  display: inline-block;
  max-width: 160px;       /* tylko dla tego jednego pola */
  white-space: normal;
  word-break: break-word;
}
.account-row:nth-of-type(5) .account-input {
  margin-left: 20px !important;
}
.account-input[name="info_dodatkowe"] {
  width: 440px; /* możesz zwiększyć np. do 300px lub więcej */
  max-width: 100%;
}

.account-edit-button-wrapper {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

.account-edit-button {
  padding: 10px 20px;
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
}


.account-edit-button:hover {
  background-color: #333;
}

.account-row {
  display: block;
}

.account-label:contains("Wiek zawodnika:") {
  min-width: 160px;
}

.account-label + .account-input.short {
  display: inline-block;
  width: 100px;
  margin-left: 10px;
}

#input-wiek-zawodnika {
  margin-top: 12px !important;
  display: block;
}
#input-wiek-zawodnika {
  margin-top: 12px !important;
  margin-left: 2px; /* dostosuj w razie potrzeby */
  display: block;
}

#input-plec {
  margin-left: 0.5rem;  /* zdecyduj, ile dokładnie potrzebujesz */
}
/* Tylko select „Płeć” */
#input-plec {
  display: block !important;      /* wymuś przełamanie linii pod etykietą */
  margin-top: 0.5rem !important;   /* odsuń w dół od napisu „Płeć:” */
  margin-left: 0 !important;      /* usuń ewentualne przesunięcie w lewo */
  width: auto !important;         /* dopasuj szerokość, jeśli trzeba */
}

#input-plec:disabled {
  opacity: 1 !important;        /* usuń wyblaknięcie */
  color: #1a1a1a !important;       /* pełny kontrast dla tekstu */
  background-color: #fff !important; /* białe tło jak pozostałe pola */
  cursor: not-allowed;          /* opcjonalnie: pokazuje że jest nieklikalne */
  background-color: #f5f5f5 !important;
}

/* Rozwijamy etykietę na jedną linię */
.account-label.label-long {
  white-space: nowrap;
  display: inline-block;    /* pozwala na kontrolę szerokości */
  max-width: none;          /* znosimy ewentualne ograniczenie */
}

/* Aby całość pola wyglądała równie estetycznie jak reszta: */
.account-row.account-row-info .account-input-group {
  display: flex;
  flex-direction: column;
}

.account-row.account-row-info .account-input-group textarea {
  width: 100%;              /* lub inna wartość, którą masz u reszty */
  box-sizing: border-box;
}
/* ręczne przesunięcie pola "Dodatkowe informacje dla trenerów" */
.subtab-content[data-subtab="dane"] > div.account-row:nth-of-type(5) .account-input-group {
  margin-left: -20px !important;  /* dostosuj wartość do szerokości swoich etykiet */
}
/* margines pod tytułem sekcji “Dane zawodnika” */
.subtab-content[data-subtab="dane"] .account-subtitle {
  margin-bottom: 1rem;
}
/* Zwężenie pól Imię i Nazwisko */
.subtab-content[data-subtab="dane"] .account-row:nth-of-type(1) .account-input {
  max-width: 180px;      /* dostosuj szerokość według potrzeby */
  width: 100%;           /* pozwala flexowi skalować pole do max-width */
}
/* Dopasowanie szerokości pola Nazwisko do szerokości .account-input.short */
.subtab-content[data-subtab="dane"] .account-row:nth-of-type(1) .account-input-group .account-input:last-child {
  max-width: 120px;   
  width: 120%;
}
/* zwiększenie szerokości pola “Nazwisko” */
.subtab-content[data-subtab="dane"] .account-row:nth-of-type(1) .account-input-group .account-input:last-child {
  max-width: 190px;  /* dostosuj wartość według potrzeby */
  width: 100%;
}

/* mniejszy margines pod wierszem Imię i nazwisko */
.subtab-content[data-subtab="dane"] .account-row:nth-of-type(1) {
  margin-bottom: 0.5rem !important; /* zamiast domyślnego 1rem */
}

/* mniejszy margines między Data urodzenia a Wiek zawodnika */
.subtab-content[data-subtab="dane"] .account-row:nth-of-type(2) {
  margin-bottom: 0.5rem !important;  /* zamiast domyślnego ~1rem */
}

/* wyrównanie pola “Wiek zawodnika” */
#input-wiek-zawodnika {
  margin-left: 0px !important; /* zmień -150px aż będzie idealnie */
}

/* dopasowanie szerokości pola „Wiek zawodnika” do .account-input.short */
#input-wiek-zawodnika,
.subtab-content[data-subtab="dane"] .account-row.account-row-wiek .account-input {
  max-width: 120px !important;  /* tyle samo co .account-input.short */
  width: 100% !important;
}

/* 1) Wyłączamy flex tylko dla wiersza z wiekiem */
.subtab-content[data-subtab="dane"] .account-row.account-row-wiek {
  display: block !important;
}

/* 2) Label wymuszamy jako blok z odstępem poniżej */
.subtab-content[data-subtab="dane"] .account-row.account-row-wiek .account-label {
  display: block !important;
  margin-bottom: 0.5rem !important; /* tu ustawiasz odstęp nagłówek→input */
}

/* 3) Input też jako blok, bez lewego marginesu */
.subtab-content[data-subtab="dane"] .account-row.account-row-wiek .account-input {
  display: block !important;
  margin-left: 0 !important;
  max-width: 60px; /* lub jaka wartość Ci odpowiada */
}

/* 1) Wyłączamy flex/grid dla wiersza “Płeć” */
.subtab-content[data-subtab="dane"] .account-row:nth-of-type(4) {
  display: block !important;
}

/* 2) Label jako blok z odstępem poniżej */
.subtab-content[data-subtab="dane"] .account-row:nth-of-type(4) .account-label {
  display: block !important;
  margin-bottom: 0.5rem !important;  /* kontroluje odległość label→select */
}

/* 3) Select jako blok, bez lewej przesuwki */
.subtab-content[data-subtab="dane"] .account-row:nth-of-type(4) .account-input {
  display: block !important;
  margin-left: 0 !important;
  max-width: 150px;  /* lub dowolna szerokość, jak wolisz */
}

/* margines pod polem “Wiek zawodnika” */
.subtab-content[data-subtab="dane"] .account-row.account-row-wiek {
  margin-bottom: 0.5rem !important;  /* zmień 0.5rem na wartość jaką chcesz */
}

/* zmniejszenie górnego marginesu tylko dla pola z wiekiem zawodnika */
#input-wiek-zawodnika {
  margin-top: 0.5rem !important; /* dostosuj wartość według uznania */
}

.subtab-content[data-subtab="dane"] .account-row:nth-of-type(4) {
  margin-bottom: 0.5rem !important; /* dostosuj 0.5rem według potrzeb */
}

/* dopasowanie font-size w sidebarze Moje wydarzenia do etykiet z Dane zawodnika */
.tab-content[data-tab="wydarzenia"] .account-sidebar__item {
  font-size: 0.875rem;      /* taki sam rozmiar jak .account-label */
  line-height: 1.4;         /* taka sama wysokość linii jak w .account-label */
}























/* ==================================================== */
/*                      NASZA_OFERTA                    */
/* ==================================================== */
/* Wyśrodkowanie tekstu w sekcji offer-hero */
.offer-hero {
  text-align: center;
  /* opcjonalnie: dodaj trochę paddingu dla lepszego odstępu */
  padding: 2rem 0;
}

.offer-hero .offer-title {
  display: inline-block;
  margin: 0 auto;
}
.offer-hero .offer-title {
  font-size: 2rem;  /* dostosuj wartość wg uznania */
  line-height: 1.2;   /* opcjonalnie, dla lepszej czytelności */
}
.offer-hero {
  text-align: center;
  padding: 2.5rem 1rem;
  background-color: #000;     /* opcjonalnie, jeśli chcesz czarne tło */
  color: #fff;                /* jeśli jest czarne tło, tekst będzie biały */
}

.offer-hero .offer-title {
  font-family: "Montserrat", sans-serif; /* lub inna nowoczesna bezszeryfowa */
  font-size: 3rem;          /* dostosuj wg potrzeb */
  font-weight: 900;         /* mocne pogrubienie */
  letter-spacing: 0.05em;   /* delikatne rozsunięcie liter */
  text-transform: uppercase;/* opcjonalnie, wielkie litery */
  line-height: 1.1;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}

.offer-hero {
  text-align: center;
  padding: 2.5rem 1rem;
  background-color: transparent; /* lub dokładny kolor Twojego tła, np. #F7EEDC */
}

.offer-hero .offer-title {
  color: #000;             /* czarny tekst */
  text-shadow: none;       /* usuń cień */
}
.offer-hero .offer-title {
  font-size: 1.5rem; /* zmniejsz tę wartość do preferowanej wielkości */
}
.offer-hero .offer-title {
  text-transform: none;
}
/* w <head> dociągnij Google Font, np. */
/* <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet"> */

.offer-hero .offer-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;          /* nieco mocniejsze wyjściowo */
  font-size: 2.5rem;         /* dostosuj do swoich potrzeb */
  line-height: 1.2;
  letter-spacing: 0.02em;    /* delikatne rozluźnienie liter */
  text-transform: none;      /* przywraca normalną kapitalizację */
  text-align: center;        /* wyśrodkowanie */
  margin: 2rem 0;            /* pionowe odseparowanie od reszty */
  color: #000;               /* czarny kolor tekstu */
}

/* Zmniejszamy górny odstęp całego hero-bloku */
.offer-hero {
  /* domyślnie masz pewnie coś takiego: padding: 4rem 0; 
     obniż wartość górnego paddingu (pierwsza liczba) */
  padding: 0rem 0 4rem; /* 1rem od góry, 4rem od dołu */
}

/* Upewniamy się, że nagłówek nie ma własnego marginu */
.offer-hero .offer-title {
  margin-top: 0;
}


































/* ===================== NASZA OFERTA ===================== */
.offer-hero {
  text-align: center;
  padding: 2rem 1rem;
}
.offer-hero .offer-title {
  font-size: 2rem;
  font-weight: 700;
}

/* TABS */
.offer-tabs {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 1.5rem auto;
  width: max-content;
  border-bottom: 1px solid rgba(0,0,0,0.15);
}
.offer-tabs__item {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  text-decoration: none;
  cursor: pointer;
  transition: color .2s;
}
.offer-tabs__item:hover,
.offer-tabs__item.is-active {
  color: #000;
}

/* INDICATOR */
.offer-tabs__indicator {
  position: absolute;
  bottom: -2px;
  left: 0;
  height: 3px;
  background-color: #000;
  transition: left 0.3s ease, width 0.3s ease;
  z-index: 1;
}

/* PANELS */
.offer-panels {
  margin-top: 2rem;
}
.offer-panel {
  /* tu ewentualnie dodaj padding/margines */
}

.offer-tabs {
  position: relative; /* so our absolute indicators sit inside it */
}

/* this is the thin grey line on hover */
.offer-tabs__hover-indicator {
  position: absolute;
  bottom: 0;              /* right on top of the nav’s border-bottom */
  left: 0;                /* will be moved by JS */
  width: 0;               /* initial, JS will grow it to the tab’s width */
  height: 2px;            /* thin line */
  background-color: rgba(0,0,0,0.15);
  transition: left 0.2s ease, width 0.2s ease;
  z-index: 5;             /* underneath your black “active” indicator (z-index:10) */
  pointer-events: none;   /* so it never steals your hover/click events */
}

/* 1) Większy nagłówek */
.offer-hero .offer-title {
  font-size: 3rem;      /* zamiast ~2rem */
  margin-bottom: 1rem;  /* trochę większy odstęp pod tytułem */
}

/* 2) Większe zakładki */
.offer-tabs__item {
  font-size: 1.25rem;      /* zamiast ~1rem */
  padding: 1rem 1.5rem;    /* więcej przestrzeni dookoła tekstu */
}

/* 3) Większa czarna wskazówka (indicator) */
.offer-tabs__indicator {
  height: 4px !important;  /* zamiast 2–3px */
}

/* 4) Większa szara wskazówka na hover */
.offer-tabs__hover-indicator {
  height: 3px !important;  /* zamiast 2px */
}

/* 5) Większy odstęp między tytułem a paskiem */
.offer-tabs {
  margin-top: 1rem !important;    /* możesz dostosować między 0.5–1.5rem */
  margin-bottom: 2rem !important; /* więcej miejsca pod paskiem */
}

/* 1) Domyślny (nieaktywna) kolor zakładek – jaśniejszy szary */
.offer-tabs__item {
  color: #999999;           /* dobierz sobie niuans (np. #aaa albo #ccc) */
  transition: color 0.2s;   /* płynna zmiana koloru przy hover */
}

/* 2) Kolor aktywnej zakładki */
.offer-tabs__item.is-active {
  color: #000000 !important;
}

/* 3) Hover na nieaktywnej – tekst robi się czarny */
.offer-tabs__item:not(.is-active):hover {
  color: #000000 !important;
}

.offer-tabs {
  display: flex; /* upewniamy się, że to flex */
}
.offer-tabs__item[data-tab="szkolenia"] { order: 1; }
.offer-tabs__item[data-tab="treningi"]   { order: 2; }
.offer-tabs__item[data-tab="analiza"]    { order: 3; }
.offer-tabs__item[data-tab="niedlugo"]   { order: 4; }

/* odsunięcie całego bloku hero od góry */
.offer-hero {
  margin-top: -2rem; /* zmień 2rem na dowolną wartość */
}

/* zmniejszamy odstęp nad paskiem zakładek */
.offer-tabs {
  margin-top: -1.5rem !important;
}

/* kontener kafelków obok siebie */
.training-cards {
  display: flex;
  gap: 1rem;              /* odstęp między kafelkami */
  justify-content: center;/* wycentrowanie */
  flex-wrap: wrap;        /* w razie potrzeby łamanie w dół na mniejszych ekranach */
  margin-top: 1.5rem;     /* odstęp od góry panelu */
}

/* pojedynczy kafelek */
.training-card {
  flex: 1 1 30%;          /* 3 w rzędzie (około 30% szerokości każdy) */
  max-width: 300px;       /* ograniczenie maksymalnej szerokości */
  border: 1px solid rgba(0,0,0,0.2);
  padding: 1rem;
  background-color: #f9f9f9;
  text-align: center;
  border-radius: 4px;
}

/* tytuł kafelka */
.training-card__title {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  color: #000;
}

/* przycisk wewnątrz kafelka */
.training-card__btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  border: 2px solid #000;
  text-decoration: none;
  color: #000;
  font-weight: 600;
  border-radius: 2px;
  transition: background-color 0.2s, color 0.2s;
}
.training-card__btn:hover {
  background-color: #000;
  color: #fff;
}

.training-card {
  height: 350px;    /* np. dokładnie 250px wysokości */
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* większy tytuł kafelka */
.training-card__title {
  font-size: 1.5rem;   /* zamiast 1.25rem */
}

/* większy tekst przycisku */
.training-card__btn {
  font-size: 1rem;     /* zamiast domyślnego ~0.875rem */
  padding: 0.75rem 1.25rem; /* nieco więcej przestrzeni w przycisku */
}

.training-card {
  background-color: #f0f0f0; /* jasnoszare tło */
  border: 2px solid #000;   /* pogrubiona czarna obwódka */
}
.training-card {
  border-color: #000 !important;
}

.training-card {
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}
.training-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.training-card {
  background: #fff;
  border: 2px solid #8DC63F;
}
.training-card__btn {
  border-color: #8DC63F;
  color: #8DC63F;
}
.training-card__btn:hover {
  background: #8DC63F;
  color: #fff;
}

.training-card {
  background-color: #f0f0f0; /* jasnoszare tło */
}/* pogrubienie obramowania kafelków */
.training-card {
  border: 2.5px solid #000; /* zamiast 1px → 3px */
}

.offer-panel {
  opacity: 0;
  transition: opacity .3s ease;
}
.offer-panel:not([hidden]) {
  opacity: 1;
}

.training-card:hover {
  transform: translateY(-5px);
  /* zamiast czarnego cienia – zielonkawy w brandowym odcieniu */
  box-shadow: 0 8px 20px rgba(141, 198, 63, 0.4);
}

.training-card:hover {
  transform: scale(1.02);
  /* już masz zielony cień */
}

/* podtytuł w kafelku */
.training-card__subtitle {
  margin: 0.5rem 0 1rem;       /* odstęp nad i pod tekstem */
  font-size: 0.875rem;         /* ~14px */
  font-weight: 500;            /* półpogrubienie */
  color: #666666;              /* ciemna szarość */
  text-transform: lowercase;   /* właśnie taki styl */
}

.training-card__subtitle {
  margin: -7.5rem 0 1rem;
}

.training-card__subtitle {
  margin: -11rem 0 1rem;       /* obecnie mamy 0.5rem od góry i 1rem od dołu */
  font-size: 0.875rem;
  font-weight: 500;
  color: #666666;
  text-transform: lowercase;
}

.training-card__subtitle {
  font-weight: 600;    /* zamiast 500 — nieco mocniejsze pogrubienie */
}

.offer-panel[data-tab="treningi"] .training-card {
  background-color: #fff !important;
}

.page-id-594 .offer-title {
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.offer-panel[data-tab="treningi"] .training-card {
  background-color: #fff;                    /* białe tło */
  border: 1px solid rgba(0,0,0,0.1) !important; /* cienka, jasnoszara obwódka */
  border-radius: 8px;                        /* zaokrąglone rogi */
  box-shadow: none;                          /* bez cienia na starcie */
  transition: border-color 0.2s ease,        /* animacja obwódki */
              box-shadow    0.2s ease;
}

/* najechanie: zielone podbicie jak na drugim ekranie */
.offer-panel[data-tab="treningi"] .training-card:hover {
  border-color: #8DC63F !important;          /* zielona linia */
  box-shadow: 0 8px 16px rgba(141,198,63,0.4);/* delikatny, zielony cień */
}

/* ——— przyciski w kafelkach (nasza-oferta › Treningi) ——— */
.offer-panel[data-tab="treningi"] .training-card__btn {
  display: inline-block;
  width: 100%;
  padding: 0.75rem 1.25rem;
  margin-top: 1rem;
  background-color: #8DC63F !important;  /* zielone tło */
  color: #fff !important;               /* biały tekst */
  border: none !important;              /* bez obramowania */
  border-radius: 2px;
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  transition: background-color 0.2s ease;
}

/* hover dokładnie jak na podstronie wyboru formatu */
.offer-panel[data-tab="treningi"] .training-card__btn:hover {
  background-color: #7BB032 !important;  /* ciut ciemniejszy zielony */
}

/* === Wybór formatu treningu piłkarskiego === */
.choose-format {
  text-align: center;
  padding: 2rem 1rem;
}
.choose-format__title {
  font-size: 2.5rem;
  margin-bottom: 2rem;
  font-weight: 700;
}

/* Kontener kart */
.choose-format__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
}

/* Pojedyncza karta */
.format-card {
  background: #fff;
  border: 2px solid #eee;
  border-radius: 8px;
  padding: 1.5rem;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  display: flex;
  flex-direction: column;
}
.format-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  border-color: #8dc63f;
}

/* Nagłówek karty */
.format-card__heading {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #000;
}

/* Lista punktów */
.format-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  text-align: left;
  color: #555;
}
.format-card__list li {
  margin-bottom: .5rem;
  position: relative;
  padding-left: 1rem;
}
.format-card__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #8dc63f;
}

/* Przycisk CTA */
.format-card__btn {
  margin-top: auto;
  padding: .75rem 1.5rem;
  background: #8dc63f;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  border-radius: 4px;
  transition: background .2s;
}
.format-card__btn:hover {
  background: #6fae33;
}

/* Responsywność */
@media (max-width: 600px) {
  .choose-format__cards {
    grid-template-columns: 1fr;
  }
}

/* zwiększona wysokość kart na stronie wyboru treningu */
.format-card {
  min-height: 360px;        /* dowolnie dostosuj – np. 360px lub więcej */
  display: flex;
  flex-direction: column;   /* już masz, ale upewnij się */
  justify-content: space-between;
}

/* cena w wyborze formatu treningu */
.choice-card__price,
.format-card__price {
  margin: 0.5rem 0 1rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: #8DC63F;
  text-align: center;
}

/* mniejsze marginesy wokół ceny w kartach wyboru treningu */
.format-card__price {
  margin: -0.5rem 0 0.75rem; /* 0.25rem nad ceną, 0.75rem pod ceną */
}

.choose-format__title {
  margin-bottom: 4.5rem;  /* możesz dostosować wartość (np. 2rem, 3rem itd.) */
}

/* kontener detail */
.offer-detail__hero {
  display: flex;
  gap: 2rem;
  align-items: center;
  margin: 3rem 0;
}
.offer-detail__media img {
  width: 100%;
  max-width: 500px;
  border-radius: 8px;
  object-fit: cover;
}
.offer-detail__info {
  flex: 1;
}
.offer-detail__title {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
.offer-detail__price {
  font-size: 2rem;
  font-weight: 700;
  color: #8DC63F;
  margin-bottom: 1.5rem;
}
.offer-detail__list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}
.offer-detail__list li {
  margin-bottom: .75rem;
  padding-left: 1.25rem;
  position: relative;
}
.offer-detail__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #8DC63F;
}
.offer-detail__btn {
  display: inline-block;
  padding: 1rem 2rem;
  background: #8DC63F;
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background .2s;
}
.offer-detail__btn:hover {
  background: #6fae33;
}

/* responsywność */
@media (max-width: 768px) {
  .offer-detail__hero {
    flex-direction: column;
  }
  .offer-detail__media img {
    max-width: 100%;
  }
}

/* 1) Domyślnie chowamy headerowy panel koszyka tylko na tej stronie,
      ale nie usuwamy go z DOM, tylko po prostu przesuwamy poza ekran
      i ustawiamy niewidoczność (visibility:hidden) */
body.page-id-1769 #cart-panel {
  visibility: hidden !important;
  transform: translateX(100%) !important;
  transition: transform .3s ease, visibility 0s linear .3s !important;
}

/* 2) Gdy JS (headerowy skrypt) otworzy koszyk i doda klasę .cart-open na <body>,
      to przywracamy visibility i przesunięcie do 0, płynnie wysuwając panel */
body.page-id-1769.cart-open #cart-panel {
  visibility: visible !important;
  transform: translateX(0) !important;
  transition: transform .3s ease, visibility 0s linear 0s !important;
}

/* Usuń białe tło przy ikonce koszyka */
.cart-open-btn {
  background-color: transparent !important;
  border: none             !important;
  padding: 0               !important;
  margin: 0                !important;
}

/* Na wszelki wypadek zdeklaruj też dla samej ikony */
.cart-open-btn i {
  background-color: transparent !important;
}

/* Upewniamy się, że panel to flex-column */
.cart-panel {
  display: flex;
  flex-direction: column;
}

/* Sekcja content wypełnia wolną przestrzeń i przewija się, gdy jest za długa */
.cart-panel-content {
  flex: 1 1 auto;
  overflow-y: auto;
}

/* Stopka z przyciskiem na dole */
.cart-panel-footer {
  flex-shrink: 0;
  padding: 1rem;
  border-top: 1px solid #ddd;
  text-align: center;
  background: #f9f9f9;
}

/* Styl przycisku PODSUMOWANIE */
.cart-summary-btn {
  background-color: #000;
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 4px;
}

.cart-summary-btn:hover {
  opacity: 0.9;
}

/* Tło paska kroków na biały */
.checkout-steps {
  background-color: #fff;
  /* opcjonalnie padding, żeby tekst się nie przyklejał do krawędzi: */
  padding: 1rem 0;
}

.checkout-steps {
  background-color: #fff;
  padding: 1rem 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  /* lub zamiast cienia: */
  border-bottom: 1px solid #e0e0e0;
}

/* wrapper paska kroków */
.checkout-steps {
  background-color: #fff;       /* białe tło */
  padding: 1rem 0;              /* odstęp góra/dół */
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* lista kroków jako flex */
.steps-list {
  display: flex;
  justify-content: space-between; /* rozciągamy równo na całą szerokość */
  align-items: center;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1024px;             /* opcjonalnie centrowanie w containerze */
}

/* pojedynczy krok */
.step {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;                       /* każdy krok zabiera równą część szerokości */
  text-align: center;
  cursor: default;
}

/* kółko z numerem */
.step-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-weight: bold;
  z-index: 1;
}

/* etykieta obok kółka */
.step-label {
  margin-left: 0.5rem;
  font-weight: 500;
  white-space: nowrap;
  z-index: 1;
}

/* aktywny krok */
.step.active .step-circle {
  background-color: #FFD600; /* żółte */
  color: #000;
}
.step.active .step-label {
  color: #000;
}

/* kroki nieaktywne */
.step:not(.active) .step-circle {
  background-color: #ececec;
  color: #888;
}
.step:not(.active) .step-label {
  color: #888;
}

/* Kontener nawigacji kroków */
.checkout-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
}

/* Wróć */
.btn-back {
  color: #0073aa;
  text-decoration: none;
  font-weight: 500;
}

/* Dalej */
.btn-next {
  background: #ffd600;
  color: #000;
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: 500;
}
.btn-next:hover {
  opacity: 0.9;
}

.steps-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1024px;
}

/* każda zakładka zabiera dokładnie 1 część dostępnej szerokości */
.steps-list .step {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center; /* opcjonalnie wycentruje kółko i etykietę */
  cursor: default;
}

/* Powiększenie i pogrubienie numeru w kółku */
.steps-list .step-circle {
  font-size: 1.1rem;    /* nieco większy niż domyślny 1rem */
  font-weight: 700;     /* pogrubiony */
}

/* Powiększenie i pogrubienie etykiety kroku */
.steps-list .step-label {
  font-size: 1rem;      /* zamiast np. 0.9rem */
  font-weight: 600;     /* półpogrubiony */
}

.steps-list {
  display: flex;
  align-items: center;
  justify-content: space-evenly; /* lub space-between, jeśli wolisz */
  gap: 5rem;                     /* tutaj zmień na dowolną wartość */
}

/* Upewniamy się, że każdy krok jest konteinerem pozycyjnym */
.steps-list .step {
  position: relative;
}

/* --- WSPÓLNY STYL WSZYSTKICH ŁĄCZNIKÓW --- */

.steps-list .step:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;                       /* start w połowie kroku */
  width: calc(5rem - 2rem);        /* domyślnie gap(5rem) minus kółko(2rem) = 3rem */
  height: 2px;
  background: #ddd;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

/* --- OSOBNE REGUŁY DLA KAŻDEGO ŁĄCZNIKA --- */

/* między krokiem 1 a 2 */
.steps-list .step:nth-child(2)::before {
  /* np. zmień tutaj left lub width tylko dla tego łącznika */
  left: -36%;
  /* width: 3.5rem; */
}

/* między krokiem 2 a 3 */
.steps-list .step:nth-child(3)::before {
  left: -60%;
  /* width: 3rem; */
}

/* między krokiem 3 a 4 */
.steps-list .step:nth-child(4)::before {
  left: -45%;
  /* width: 2.8rem; */
}

/* pogrubienie wszystkich connectorów */
.steps-list .step:not(:first-child)::before {
  height: 2.5px; /* zamiast 2px */
}

/* Kontener kroków jako flex */
.steps-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Każdy krok zabiera równą część dostępnej przestrzeni */
.steps-list .step {
  flex: 1;
  text-align: center;      /* wycentrowanie numeru i etykiety */
  position: relative;      /* dla Twoich linii później */
}

.checkout-steps .steps-list {
  display: flex;
  justify-content: space-between; /* równy odstęp między krokami */
  list-style: none;
  padding: 0;
  margin: 0 auto;                /* wyśrodkowanie na osi X */
  max-width: 800px;              /* lub dowolna szerokość, która Ci pasuje */
  width: 100%;                   /* ale nie przekracza 100% ekranu */
}
.checkout-steps .steps-list {
  display: inline-flex;    /* zamiast flex */
  justify-content: center;  /* wyśrodkuj wszystkie kroki */
  gap: 2px;                /* tutaj zwiększasz, np. 4rem, 5rem – według uznania */
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: none;          /* lub zachowaj swoją max-width, nie wpływa to na gap */
}

/* 1. Wycentrowanie listy kroków */
.checkout-steps {
  text-align: center;        /* flex inline będzie wyśrodkowany */
}

/* 2. Lista kroków jako inline-flex, nie rozciągamy jej */
.checkout-steps .steps-list {
  display: inline-flex;      /* dopasowuje szerokość do sumy dzieci */
  gap: 2px;                  /* bardzo mały odstęp */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 3. Każdy krok to tylko tyle szerokości, ile contentu */
.checkout-steps .steps-list .step {
  flex: none;                /* wyłączamy flex:1 */
  display: flex;
  align-items: center;
  position: relative;        /* potrzebne dla ::after lub ::before */
}

/* 4. Przykład krótkiego łącznika (pomiędzy krokami) */
.checkout-steps .steps-list .step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 20px;               /* stała długość łącznika, możesz dostosować */
  height: 2px;
  background: #ddd;
  transform: translate(50%, -50%); /* przesunięty o połowę swojego width */
  pointer-events: none;
  z-index: 0;
}

.checkout-steps .steps-list {
  display: inline-flex;
  gap: 140px;   /* <-- tu ustaw wartość odstępu, np. 8px, 4px, 16px... */
  list-style: none;
  padding: 0;
  margin: 0 auto; /* wyrównanie na środku */
}

/* Zakrywamy łączniki pod etykietami */
.steps-list .step-label {
  position: relative;
  z-index: 2;                  /* wyżej niż linie (z-index:0) */
  background-color: #fff;      /* takie samo tło jak pasku kroków */
  padding: 0 0.25rem;          /* minimalny bufor z boków */
}

/* kontener całości elementów */
.cart-items {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1rem;
}

/* pojedynczy „kartowy” produkt */
.cart-item {
  display: flex;
  background: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
}

/* lewy fragment z obrazkiem */
.cart-item__img {
  flex: 0 0 120px;
  background: #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.cart-item__img img {
  max-width: 100%;
  height: auto;
}

/* główna zawartość */
.cart-item__content {
  flex: 1;
  padding: 1rem 1.5rem;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

/* tytuł i cena */
.cart-item__title {
  flex: 1 1 60%;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.cart-item__price {
  flex: 0 0 auto;
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
}

/* kontrolki ilości */
.cart-item__qty {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  overflow: hidden;
}
.cart-item__qty button {
  background: none;
  border: none;
  padding: 0.5rem;
  font-size: 1rem;
  cursor: pointer;
}
.cart-item__qty .qty-number {
  display: inline-block;
  width: 2rem;
  text-align: center;
}

/* przycisk usuń */
.cart-item__remove {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  color: #666;
}

/* Zwężamy kontenery produktów i wyśrodkowujemy */
.cart-items .cart-item {
  max-width: 1200px;       /* zmień na dowolną szerokość */
  margin: 0 auto;         /* 0 od góry/dół, auto po bokach → wyśrodkowanie */
  width: 100%;            /* by nie wykraczał poza parent */
  box-sizing: border-box; /* padding i border wliczone w max-width */
}

/* 1. Ustawiamy main jako kontener pozycyjny */
.site-main {
  position: relative;
}

/* 2. Przyczepiamy nawigację absolutnie do dołu main */
.checkout-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.5rem;      /* 0.5rem nad stopką; możesz zmniejszyć do 0.25rem lub zwiększyć */
  text-align: center;
  z-index: 10;         /* nad beżowym tłem */
}

/* 3. Reset marginesów i wyśrodkowanie przycisków */
.checkout-nav .btn-back,
.checkout-nav .btn-next {
  display: inline-block;
  margin: 0 1rem;
}

/* Szary pasek z zielonym napisem „Dostępny” pod kartą produktu */
.cart-item__availability {
  background: #f2f2f2;              /* jasnoszare tło */
  color: #28a745;                   /* zielony kolor tekstu */
  font-weight: 600;                 /* pogrubiony */
  padding: 0.75rem 1rem;            /* wypełnienie wewnętrzne */
  border-top: 1px solid #e0e0e0;    /* delikatne oddzielenie od .cart-item__content */
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem; 
}

/* 1) Większa przerwa między kartami */
.cart-items {
  gap: 2rem; /* zamiast 1.5rem */
}

/* 2) Większy padding wewnątrz obrazka */
.cart-item__img {
  padding: 1.5rem; /* zamiast 1rem */
}

/* 3) Większy padding w treści: tytuł, cena, qty, remove */
.cart-item__content {
  padding: 1.5rem 2rem; /* 1.5rem góra/dół, 2rem boki */
}

/* 4) Większy padding w bloku dostępności */
.cart-item__availability {
  padding: 1rem 1.5rem; /* 1rem góra/dół, 1.5rem boki */
}




















/* 1) Upewniamy się, że kontener rośnie w pionie i ustalamy kolumnowy układ */
.cart-item {
  display: flex;
  flex-direction: column;
}

/* 2) Dajemy treści (title, price, qty, remove) możliwość rozciągnięcia */
.cart-item__content {
  flex: 1;               /* zajmuje całą pozostałą wysokość */
  /* ... Twoje dotychczasowe paddingi itp. ... */
  margin-bottom: 0;      /* usuwamy ewentualne dolne marginesy */
}

/* 3) Dopiero teraz pasek dostępności schodzi na dół kontenera */
/*    i dostaje odstęp od góry (tj. od .cart-item__content) */
.cart-item__availability {
  margin-top: 1rem;      /* odstęp nad paskiem Dostępny */
  /* ... Twoje wcześniejsze style dla availability ... */
}























.cart-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 1rem;
  padding: 1rem;
}

.cart-item__img {
  flex: 0 0 60px;
  height: 60px;
  margin-right: 1rem;
}

.cart-item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cart-item__content {
  flex: 1;
}

/* opcjonalnie wyrównanie przycisku usuń i dostępności:
.cart-item__availability {
  margin-left: auto;
  font-weight: bold;
  color: #2c7;
}
*/


























.cart-item {
  display: flex;
  align-items: center;
  background: #fff;
  margin-bottom: .5rem;
  padding: .75rem;
  border-radius: .25rem;
}
.cart-item__img {
  flex: 0 0 50px;
  height: 50px;
  margin-right: .75rem;
}
.cart-item__img img,
.cart-item__img .fa-box-open {
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-size: 1.5rem;
  color: #555;
}
.cart-item__content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cart-item__name {
  font-weight: 600;
}
.cart-item__price {
  margin-left: 1rem;
}
.cart-remove-btn {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
}
.cart-remove-btn:hover {
  color: #000;
}














/* Ukryj obrazek w karcie produktu (tymczasowo) */
.cart-item__img img {
  display: none;
}

/* Ukryj ikonę zamiast obrazka w kontenerach koszyka */
.cart-item__img i {
  display: none;
}

/* Ukryj cały blok z obrazkiem/ikoną w pozycjach koszyka */
.cart-item__img {
  display: none;
}






/* 1) Zmień .cart-item na flex, żeby łatwo ustawiać elementy */
.cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 2) Zawartość tytułu i ceny ma iść na lewo, a controls (qty + trash) na prawo */
.cart-item__content {
  flex: 1;
  text-align: left;
  margin-right: 1rem; /* odstęp między nazwą a prawą stroną */
}

/* 3) Przyciski qty i kosz powinny być razem z prawej */
.cart-item__qty,
.cart-item__remove {
  margin-left: 0.5rem;
}

/* 4) Dodatkowo wyrównaj cenę do krawędzi prawej */
.cart-item__price {
  margin-left: auto;
  text-align: right;
}






/* 1) Upewniamy się, że każdy .cart-item to flex-kontener */
.cart-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* 2) Wnętrze (tekst, cena, qty i remove) też robimy flexem,
      ale w kolumnie, wyrównanym do lewej */
.cart-item__content {
  display: flex !important;         /* flex-kontener */
  flex-direction: column !important; /* kolumnowo */
  align-items: flex-start !important;/* wszystkie elementy do lewej */
  flex: 1 1 auto !important;         /* niech zajmie tyle miejsca ile może */
  text-align: left !important;       /* wymuś wyrównanie tekstu */
}

/* 3) Jeżeli potrzebujesz dodatkowo odjąć jakieś paddingi/marginesy: */
.cart-item__content > * {
  margin: 0 !important;
  padding: 0 !important;
}







/* 1) Upewniamy się, że cała zawartość itema jest flexem (wierszowo) */
.cart-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* 2) Kontener z tekstem + qty + remove też ma być flexem w rzędzie */
.cart-item__content {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important; /* wszystko do lewej */
  flex: 1 1 auto !important;                /* zajmuje pozostałą szerokość */
  text-align: left !important;              /* wymuś wyrównanie tekstu do lewej */
}

/* 3) Tytuł niech wyrasta maksymalnie w lewo i zabiera tyle miejsca, ile może */
.cart-item__title {
  margin: 0 !important;
  margin-right: auto !important;
}













/* 1) Sprawiamy, że wewnętrzny blok .cart-item__content to flex‐box wyrównany do lewej */
.cart-item__content {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 1rem !important;             /* odstęp między tytułem, ceną, kontrolkami */
  text-align: left !important;
  padding-right: 0 !important;       /* żeby nie dodawało wewnętrznej przestrzeni od prawej */
}

/* 2) Tytuł zawsze przyklejony do lewej krawędzi swojego kontenera */
.cart-item__title {
  margin: 0 !important;
}

/* (opcjonalnie) jeśli chcesz osobno odsunąć np. ilość lub kosz od tytułu,
   możesz zadeklarować marginesy na tych elementach, np.: */
.cart-item__price {
  margin-right: 1rem !important;
}
.cart-item__qty {
  margin-right: 1rem !important;
}





/* 1) Kontener całego wiersza */
.cart-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;       /* pełna szerokość rodzica */
  box-sizing: border-box !important;
  padding: 1rem !important;     /* odrobinę wewnętrznych odstępów */
}

/* 2) Blok tytułu, cen, qty i kosza */
.cart-item__content {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 1 1 auto !important;    /* rośnie i kurczy się, zajmując resztę miejsca */
  min-width: 0 !important;       /* potrzebne żeby flex children się właściwie skalowały */
  gap: 1rem !important;          /* odstęp między elementami wewnątrz */
}

/* 3) Tytuł sam w sobie */
.cart-item__title {
  margin: 0 !important;
  white-space: nowrap;          /* nie łamie się w dwóch wierszach */
  overflow: hidden;             /* przy długim tekście */
  text-overflow: ellipsis;      /* wyświetla "..." */
  flex: 0 0 auto !important;    /* nie rozciąga się, tylko tyle ile potrzebuje */
}

/* 4) Cena obok title */
.cart-item__price {
  margin: 0 !important;
  flex: 0 0 auto !important;
}

/* 5) Ilość */
.cart-item__qty {
  flex: 0 0 auto !important;
}

/* 6) Przycisk usuń */
.cart-item__remove {
  flex: 0 0 auto !important;
}

/* 7) Dostępność (na dole) */
.cart-item__availability {
  width: 100% !important;
  text-align: center !important;
  margin-top: 0.5rem !important;
}







/* 1) Sprawiamy, że cała zawartość .cart-item__content rozciąga się na 100% */
.cart-item__content {
  flex: 1 1 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  gap: 1rem !important;
  min-width: 0 !important;
}

/* 2) Grupujemy lewą część (tytuł + ewentualnie ikonka) */
.cart-item__content > .cart-item__title {
  flex: 0 0 auto !important; /* tyle miejsca ile potrzebuje */
  margin: 0 !important;
  text-align: left !important;
}

/* 3) Grupujemy środkową część (qty) */
.cart-item__qty {
  flex: 0 0 auto !important;
}

/* 4) Grupujemy prawą część (cena + kosz) */
.cart-item__price,
.cart-item__remove {
  flex: 0 0 auto !important;
}

/* 5) Usuwamy wszelkie zbędne paddingi/marginesy wewnątrz .cart-item */
.cart-item {
  padding: 1rem !important;       /* zostaw lekki odstęp wokół całości */
  box-sizing: border-box !important;
}

/* 6) Pasek Dostępny niech będzie ręcznie rozciągnięty */
.cart-item__availability {
  width: 100% !important;
  text-align: center !important;
  margin-top: 1rem !important;
}






















/* 1) Upewnij się, że .cart-item__content to flex-row, bez justify-content:center */
.cart-item__content {
  display: flex !important;
  align-items: center !important;
  /* usuń ewentualne justify-content:center z poprzednich reguł! */
  justify-content: flex-start !important;
}

/* 2) Spraw, żeby tytuł ciągnął się w lewo i wypychał resztę na prawo */
.cart-item__title {
  margin-right: auto !important;
  text-align: left !important;
}

/* 3) Dodaj sobie minimalne odstępy między qty / ceną / koszem */
.cart-item__qty,
.cart-item__price,
.cart-item__remove {
  margin-left: 1rem !important;
}

/* 4) Jeśli chcesz, żeby wszystko siedziało dokładnie przy lewej krawędzi, usuń padding z .cart-item__content */
.cart-item__content {
  padding-left: 0 !important;
}

/* 5) Dla pewności nadpisujemy wszelkie centrowania, które mogły zostać gdzieś wrzucone: */
.cart-item__content *,
.cart-item__content {
  justify-content: flex-start !important;
  text-align: left !important;
}
.cart-item__content {
  padding-left: -1020px !important;  /* odsuwamy całą zawartość o 20px */
}

.cart-item__title {
  margin-right: auto !important;
  margin-left: 0 !important;      /* korzysta z paddingu rodzica */
}








/* 1. Schowaj blok z ikoną całkowicie */
.cart-item__img {
  display: none !important;
}

/* 2. Ustaw flex-container od lewej */
/* 3. gap definiuje odstępy między kolejnymi dziećmi (.cart-item__content, .cart-item__availability itd.) */
.cart-item {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 1rem !important;  /* daj tu ile pikseli potrzebujesz */
}

/* 4. Spraw, żeby blok z tytułem i ceną rozciągał się maksymalnie na lewo */
.cart-item__content {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* (opcjonalnie) jeśli chcesz dodatkowo przesunąć tytuł w lewo o X px */
.cart-item__title {
  margin-left: 0 !important;     /* reset jeśli gdzieś miałeś padding/margin */
  padding-left: 0 !important;    /* także reset paddingu */
  /* margin-left: -10px !important;  jeśli dalej chcesz minimalne przesunięcie */
}









/* 1) Ukrywamy ikonę całkowicie */
.cart-item__img {
  display: none !important;
}

/* 2) Cały wiersz .cart-item robimy gridem */
.cart-item {
  display: grid !important;
  /* 3 kolumny: auto (ikonka), 1fr (treść), auto (przycisk dostępności) */
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  /* 4) Odstęp między nimi – tutaj 1rem, możesz zmniejszać/powiększać */
  column-gap: 1rem !important;
  /* Jeśli masz padding na .cart-item to zostanie zachowany po bokach */
}

/* 3) Treść w środkowej kolumnie, przyklejona do lewej */
.cart-item__content {
  justify-self: start !important;
  /* jeśli gdzieś jest width ustawione, możemy je zignorować */
  width: auto !important;
}

/* 4) Dostępność na prawo */
.cart-item__availability {
  justify-self: end !important;
}

/* Dodatkowo upewnij się, że tytuł nie ma własnych margin/padding przesuwających go */
.cart-item__title {
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}


	
	
	








/* 1) Musimy mieć odniesienie dla absolute: */
.cart-item {
  position: relative;
}

/* 2) Przesuwamy tytuł absolutnie względem lewej krawędzi kartki: */
.cart-item__title {
  position: absolute !important;
  left: -28rem !important;   /* tu możesz podstawić dowolną wartość px/rem */
  top: 1rem !important;    /* dostosuj w razie potrzeby odległość od góry */
  margin: 0 !important;
}

.cart-item {
  position: relative; /* już masz */
}

/* 1) Ustawiamy przycisk usuwania (śmietnik) absolutnie po prawej stronie */
.cart-item__remove {
  position: absolute !important;
  right: 1rem !important;         /* odległość od prawej krawędzi kontenera */
  top: 1.5rem !important;            /* punkt odniesienia w pionie */
  transform: translateY(-50%) !important; /* wycentrowanie pionowe */
  background: none !important;    /* usuń ewentualne tło */
  border: none !important;        /* usuń ewentualne obramowanie */
  padding: 0 !important;          /* usuń ewentualne paddingi */
}

/* 2) Żeby nie nachodził na cenę, możesz np. dać trochę większy right: */
.cart-item__remove {
  right: -29rem !important;
}

/* delikatne przesunięcie ceny w prawo bez ruszania innych elementów */
.cart-item__price {
  transform: translateX(34rem) !important; /* zmień 1rem na dowolną wartość */
}

.cart-item__title {
  font-size: 1.2rem !important;  /* zmień 1.5rem na dowolną wartość */
  font-weight: 650 !important;    /* opcjonalnie pogrubienie */
  line-height: 1.2 !important;    /* opcjonalnie dostosowanie wysokości linii */
}
/* .cart-item__availability – zaokrąglone dolne narożniki i bez górnej krawędzi */
.cart-item__availability {
  background-color: #f5f5f5;      /* lub dowolny kolor tła */
  border-top: none !important;    /* usuwa tę cienką linię z góry */
  border: 1px solid #f5f5f5 !important; /* opcjonalnie – otacza badge, dopasuj kolor */
  border-radius: 8px !important;
  padding: 0.75rem 1rem !important;       /* wewnętrzne odstępy */
  text-align: center !important;
  font-weight: 600;
}
/* Powiększenie ikonki kosza (fa-trash) */
.cart-item__remove i {
  font-size: 1.3rem !important;  /* zmień na dowolną wartość, np. 2rem albo 24px */
  line-height: 1 !important;
}

/* Tylko pogrubienie i lekkie powiększenie ceny */
.cart-item__price {
  font-size: 1.2rem;
  font-weight: 600;
}

.cart-item__price {
  position: relative;   /* pozwala na przesunięcie elementu bez zmiany flow */
  top: 4px;             /* przesunięcie o 4px w dół; dostosuj wg uznania */
  margin: 0;            /* reset marginesów */
  display: inline-block;/* utrzymuje naturalny flow sąsiadów */
}

/* tylko „zapadki” plus/minus – niewidoczne, ale bez przesuwania layoutu */
.qty-decrease,
.qty-increase {
  visibility: hidden !important;
  /* zachowujemy ich miejsce w układzie, ale nie są widoczne ani klikalne */
  pointer-events: none !important;
}

/* opcjonalnie doprecyzuj wygląd samego pola z liczbą */
.qty-number {
  width: 2rem;         /* dostosuj szerokość jeśli trzeba */
  text-align: center;  /* cyfra wyśrodkowana */
}

.qty-number {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.cart-item__qty {
  position: relative;
  top: 10px; /* przesunięcie całego pola ilości w dół o 4px — dostosuj wg uznania */
}

.cart-item__qty {
  position: relative;
  left: 300px; /* dostosuj wartość w prawo: większa → bardziej w prawo */
}

.cart-item__price {
  margin-top: 10px !important; /* obniża cenę o 4px */
}

/* Przesunięcie samej ikonki śmietnika lekko w dół */
.cart-item__remove i {
  display: inline-block;
  transform: translateY(4px) !important; /* dostosuj wartość w razie potrzeby */
}

/* Przesunięcie przycisku „Dalej” delikatnie w lewo */
.btn-next {
  display: inline-block;               /* upewnia, że transform działa tylko na ten element */
  transform: translateX(-343px) !important;  /* zmień -10px na dowolną wartość */
}

/* Zwiększenie szerokości przycisku „Dalej” */
.btn-next {
  padding: 0.75rem 1.5rem !important; /* więcej poziomego paddingu */
  min-width: 180px !important;        /* gwarantowana minimalna szerokość */
  box-sizing: border-box !important;
}

/* Pogrubienie tekstu w przycisku „Dalej >” */
.btn-next {
  font-weight: 700 !important;
}
/* Pogrubienie tekstu w przycisku „← Wróć” */
.btn-back {
  font-weight: 700 !important;
}
/* Delikatne obniżenie przycisku „← Wróć” bez wpływu na inne elementy */
.btn-back {
  position: relative;
  top: 8px; /* zmień wartość na mniejszą/większą, aby dostosować położenie */
}

/* Przesunięcie przycisku „← Wróć” w prawo */
.btn-back {
  position: relative;
  left: 345px; /* dostosuj wartość, by przesunąć bardziej w prawo lub w lewo */
}
/* Zmiana koloru tekstu przycisku „← Wróć” na czarny */
.btn-back {
  color: #000 !important;
}

/* Na sam dół Twojego CSS: */
.site-main {
  height: auto !important;
  min-height: 650px !important;
}

.content-container {
  height: auto !important;
  min-height: auto !important;
}

.checkout-nav .btn-next {
  width: 250px; /* ustaw szerokość przycisku */
}

.checkout-nav .btn-next {
  position: relative !important;
  left: 8px !important; /* tu ustaw, o ile px chcesz przesunąć w prawo */
}

.checkout-nav .btn-back {
  position: relative !important;
  left: 339px !important; /* dostosuj wartość wg potrzeby */
}

.checkout-nav .btn-next {
  background-color: #000 !important; /* czarne tło */
  color: #fff !important;            /* biały tekst */
  border-color: #000 !important;     /* jeśli mają obramowanie */
}

/* === BLOK PODSUMOWANIA === */
.order-summary {
  max-width: 800px;           /* dopasuj szerokość */
  margin: 2rem auto;          /* wyśrodkuj i dodaj odstęp od góry i dołu */
  padding: 1rem;              /* wewnętrzny odstęp */
  background-color: #f7f7f7;  /* jasne tło */
  border-radius: 8px;         /* zaokrąglone rogi */
}

/* Etykieta "Łącznie:" */
.order-summary > span:first-child {
  font-weight: bold;
  font-size: 1rem;
  color: #333;
}

/* Kwota */
.order-summary > span:last-child {
  font-size: 1.25rem;
  margin-left: 0.5rem;
  color: #000;
}

.order-summary {
  background-color: transparent !important;
  /* jeśli chcesz całkowicie skasować też ramkę: */
  border: none !important;
  /* albo zamiast none: border: 1px solid #ddd; */
}

.order-summary {
  position: relative !important;
  left: 681px !important;
}

/* zmniejsza odstęp między blokiem podsumowania a przyciskiem */
.order-summary {
  margin-bottom: 0.5rem !important;
}

/* powiększa napis "Łącznie:" w bloku podsumowania */
.order-summary > span:first-child {
  font-size: 1.25rem !important;
  font-weight: bold; /* jeśli chcesz dodatkowo pogrubić */
}

/* uderzamy tylko w drugi <span> wewnątrz .order-summary */
.order-summary > span:last-of-type {
  display: inline-block !important;          /* potrzebne do transform */
  transform: translateX(75px) !important;    /* przesunięcie w prawo */
}

/* Pogrubienie samej kwoty w bloku podsumowania */
.order-summary > span:last-of-type {
  font-weight: 700 !important;
}

.order-summary {
  position: relative; /* żeby ::before mogło się absolutnie pozycjonować względem tego bloku */
}

.order-summary::before {
  content: "";
  position: absolute;
  top: -12px;        /* podnieś/pomieść w górę – zmień wartość na swoje potrzeby */
  left: 0;
  width: calc(100% + 35px + 102px);
  height: 2px;       /* grubość lini */
  background: #000;  /* kolor linii */
  border-radius: 0;  /* wyłącz jakiekolwiek zaokrąglenia */
  left: -5rem;
  right: -1rem;
}

.order-summary {
  position: relative;
  /* żeby wyrównać linijkę do krawędzi content-container: 
     odejmujemy z obu stron tyle, ile wynosi padding kontenera */
  margin: 2rem -1rem  /* 2rem góra-dół, -1rem lewo-prawo */;
}

.order-summary {
  position: relative; /* potrzebne, żeby pseudo-element odnosił się do tego kontenera */
}

.order-summary::before {
  content: "";
  position: absolute;                          
  left: -341px;                      /* o ile pikseli wydłużamy w lewo */
  width: calc(100% + 390px);         /* 100% + ten sam margines po lewej */
  height: 2px;                      /* grubość linii – bez zmian */
  background-color: #000;           /* kolor linii */
}

























.cart-items-step2 .cart-item {
  border-radius: 5px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.cart-item__content { display: flex; justify-content: space-between; align-items: center; }
.btn-select-date {
  background: #FFD600;
  border: none;
  padding: .5rem 1rem;
  font-weight: bold;
  border-radius: .25rem;
  cursor: pointer;
}
.calendar-wrapper { display: none; margin-top: 1rem; }










.cart-items-step2 .cart-item {
  /* ustaw szerokość na 80% rodzica (możesz zmienić na 75%, 70% itp.) */
  width: 100%;
  /* maksymalna szerokość w pikselach */
  max-width: 1200px;
  /* wyśrodkuj poziomo i dodaj odstęp między kartami */
  margin: 0 auto 1rem;
   margin-top: 1rem; /* dostosuj wartość wg potrzeby */
}





/* Tylko w kroku 2 – przesunięcie samego tytułu w lewo */
.cart-items-step2 .cart-item__title {
  position: relative !important;
  left: -370px !important; /* wstaw tu swoją wartość, np. -10px, -30px itd. */
}


/* w kroku 2: unieś tytuł o kilka pikseli w górę */
.cart-items-step2 .cart-item__title {
  position: relative !important;
  top: 12px !important;  /* zmień wartość, żeby idealnie dopasować */
}








.order-summary {
  background-color: #f5f5f5;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  margin: 2rem 0;
}
.order-summary__total {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
}
.order-summary__label {
  font-weight: bold;
  font-size: 1rem;
  color: #333;
  margin-right: 0.5rem;
}
.order-summary__amount {
  font-size: 1.25rem;
  font-weight: bold;
}



/* Powiększamy etykietę „Łącznie:” */
.order-summary__label {
  font-size: 1.25rem;  /* możesz dostosować wartość według potrzeb */
  font-weight: bold;
}

/* przesunięcie napisu “Łącznie:” tylko w kroku 2 */
.cart-items-step2 + .order-summary .order-summary__label {
  position: relative !important;
  left: -4.1px !important;  /* tu podmień na dowolną wartość w px/rem */
}

/* Przesunięcie ceny w podsumowaniu tylko w kroku 2 */
.cart-items-step2 + .order-summary .order-summary__amount {
  position: relative !important;
  left: 75px !important;  /* zmień na swoją wartość, by dopasować przesunięcie */
}

















.order-summary::before {
  content: "";
  position: absolute;                          
  left: -346px;                      /* o ile pikseli wydłużamy w lewo */
  width: calc(100% + 397px);         /* 100% + ten sam margines po lewej */
  height: 2px;                      /* grubość linii – bez zmian */
  background-color: #000;           /* kolor linii */
}









































/* wymuś widoczność i pokazanie ceny w kroku 2 */
.cart-items-step2 .cart-item__price {
  display: inline-block !important;   /* nie pozwól na ukrycie */
  visibility: visible !important;     /* na wszelki wypadek */
  opacity: 1 !important;              /* pełna widoczność */
  position: relative !important;      /* anuluj wszelkie przesunięcia */
  left: auto !important;
  top: auto !important;
  transform: none !important;         /* usuń ewentualne przekształcenia */
  color: #000 !important;             /* upewnij się, że jest widoczny kontrast */
  background: none !important;        /* usuń tło, jeżeli by zasłaniało */
  z-index: 10 !important;             /* wyciągnij na wierzch */
}

.cart-items-step2 .cart-item__qty {
  display: flex;
  align-items: center;
}

.cart-items-step2 .qty-decrease,
.cart-items-step2 .qty-increase {
  border: none;
  background: transparent;
  font-size: 1.2rem;
  cursor: pointer;
}

.cart-items-step2 .qty-number {
  margin: 0 0.5rem;
}





/* Styl kontenera ilości w kroku 2 */
.cart-items-step2 .cart-item__qty {
  display: inline-flex;          /* elastyczny kontener */
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;        /* obramowanie */
  border-radius: .25rem;         /* zaokrąglone rogi */
  padding: .5rem 1rem;        /* wypełnienie wewnątrz */
  min-width: 6rem;               /* minimalna szerokość */
  background: #fff;              /* tło jak w kroku 1 */
  font-size: 1rem;               /* wielkość tekstu */
  font-weight: bold;             /* pogrubienie cyfry */
}

/* Dodatkowo możesz wymusić czarne litery i widoczność */
.cart-items-step2 .cart-item__qty .qty-number {
  color: #000 !important;
  display: block !important;
}






/* Przesunięcie pola ilości w kroku 2 na lewą stronę */
.cart-items-step2 .cart-item__qty {
  margin-left: -290px !important;
  align-self: flex-start !important;
}









.cart-items-step2 .cart-item__price { position: relative !important; left: -550px !important; }

.cart-items-step2 .cart-item__price { position: relative !important; top: 55px !important; }



















.cart-items-step2 .selected-date-container {
  margin-top: .5rem;
}
.cart-items-step2 .selected-date-label {
  display: inline-flex;
  align-items: center;
  font-size: .9rem;
  color: #333;
  user-select: none;
}
.cart-items-step2 .date-selected-checkbox {
  width: 1rem;
  height: 1rem;
  margin-right: .5rem;
  border: 1px solid #ccc;
  background: #fff;
  appearance: none;
  cursor: default;
  position: relative;
}
.cart-items-step2 .date-selected-checkbox.checked::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: .5rem; height: .5rem;
  background: #000;
}







/* Odwrócenie kolejności checkboxa i tekstu w etykiecie */
.cart-items-step2 .selected-date-label {
  display: inline-flex !important;
  flex-direction: row-reverse !important;
  align-items: center;
}

/* Przesunięcie odstępu ze strony lewej na prawą */
.cart-items-step2 .selected-date-label .date-selected-checkbox {
  margin-left: .5rem !important;
  margin-right: 0 !important;
}








/* Powiększenie przycisku „Wybierz termin” w kroku 2 */
.cart-items-step2 .btn-select-date {
  padding: 0.75rem 1.5rem !important;  /* większy obszar klikalny */
  font-size: 1rem !important;        /* większa czcionka */
  font-weight: bold !important;        /* pogrubienie tekstu */
  border-radius: 0.3rem !important;    /* bardziej zaokrąglone rogi */
}







/* Zmiana kolorów przycisku „Wybierz termin” */
.cart-items-step2 .btn-select-date {
  background-color: #000 !important;  /* czarne tło */
  color: #fff !important;             /* biały tekst */
  border: none !important;            /* usuń obramowanie */
}

/* Wersja hover (opcjonalnie) */
.cart-items-step2 .btn-select-date:hover {
  background-color: #333 !important;  /* ciemnoszary przy najechaniu */
}



/* Zmniejszenie grubości tekstu w przycisku „Wybierz termin” */
.cart-items-step2 .btn-select-date {
  font-weight: 700 !important;  /* lub spróbuj font-weight: 500 */
}





/* Pogrubienie i powiększenie tekstu „Wybrany termin” */
.cart-items-step2 .selected-date-label {
  font-size: 1rem !important;     /* większa czcionka – dostosuj wartość wg potrzeb */
  font-weight: bold !important;   /* pogrubiony tekst */
  line-height: 1.3 !important;    /* lepsze wyrównanie pionowe */
}








/* Powiększenie checkboxa i pogrubienie jego obramowania */
.cart-items-step2 .date-selected-checkbox {
  width: 1.25rem !important;        /* zwiększona szerokość */
  height: 1.25rem !important;       /* zwiększona wysokość */
  border: 2px solid #333 !important;/* grubsza, ciemniejsza ramka */
  margin-right: .5rem !important;   /* zachowaj odstęp od tekstu */
}

/* Dostosowanie znaku zaznaczenia */
.cart-items-step2 .date-selected-checkbox.checked::after {
  top: 3px !important;
  left: 3px !important;
  width: .6rem !important;
  height: .6rem !important;
  background: #000 !important;
}
/* Ustawienie koloru granicy checkboxa tak jak pole ilości */
.cart-items-step2 .date-selected-checkbox {
  border-color: #ccc !important;  /* taki sam szary odcień jak w polu ilości */
}
/* Przesunięcie checkboxa z napisem „Wybrany termin” w górę */
.cart-items-step2 .selected-date-container {
  margin-top: -8rem !important;  /* dopasuj wartość: większy ujemny wpłynie wyżej */
}












/* Zapobiega „skracaniu” się kontenera .cart-item */
.cart-items-step2 .cart-item {
  min-height: 8rem !important;       /* minimalna wysokość 8rem – dostosuj według potrzeb */
  box-sizing: border-box !important; /* padding/border liczą się do wysokości */
}

/* Jeżeli wcześniej dodawałeś margin-top na selected-date-container, usuń go: */
.cart-items-step2 .selected-date-container {
  margin-top: 0 !important;
}





/* 1) Usuń negatywne przesunięcie */
.cart-items-step2 .selected-date-container {
  margin-top: 0 !important;
}

/* 2) Nadaj minimalną wysokość i dolny padding .cart-item */
.cart-items-step2 .cart-item {
  min-height: 10rem !important;      /* dostosuj wysokość (tu np. 10rem) */
  padding-bottom: 2rem !important;   /* rezerwujemy miejsce u dołu */
  box-sizing: border-box !important;
}







/* 1) Ustaw .cart-item jako kontekst dla absolutnego pozycjonowania */
.cart-items-step2 .cart-item {
  position: relative;
}

/* 2) Absolutnie przesuń wybrany termin bliżej górnej krawędzi */
.cart-items-step2 .cart-item .selected-date-container {
  position: absolute !important;
  top: 2.5rem !important;     /* odległość od góry kontenera – dostosuj wg potrzeb */
  left: 50% !important;     /* wyśrodkuj poziomo */
  transform: translateX(-50%) !important;
  margin: 0 !important;     /* usuń wszelkie marginy */
}
/* Przesunięcie „Wybrany termin” z checkboxem na prawo */
.cart-items-step2 .cart-item .selected-date-container {
  left: auto !important;       /* anulujemy wcześniejsze left */
  right: 4rem !important;      /* odległość od prawej krawędzi kontenera */
  transform: none !important;  /* wyłączamy przesunięcie poziome */
}


















































/* (już masz te reguły...) */
.calendar-grid {
  display: none;              /* ukryte domyślnie */
  grid-template-columns: repeat(7, 1fr);
  gap: 1rem;
  margin: 2rem 0;
  opacity: 0;                 /* do animacji */
  transform: translateY(-10px);
  transition: opacity .3s, transform .3s;
}
.calendar-grid.open {
  display: grid;              /* pokazujemy */
  opacity: 1;
  transform: translateY(0);
}










/* Kontener produktu – złożony */
.cart-item {
  max-height: 6rem;           /* wysokość samego wiersza z tytułem, ceną i przyciskiem */
  overflow: hidden;
  transition: max-height .4s ease;
}

/* Kiedy chcemy go rozwinąć, nadajemy klasę .expanded */
.cart-item.expanded {
  max-height: 1000px;         /* albo inna wystarczająco duża wartość */
}



/* tylko w kroku 1: wymuś min-height na kontenerach .cart-item */
.cart-items .cart-item {
  min-height: 10rem; /* dostosuj tę wartość tak, by wyrównać wysokość */
}

/* 1) Powiększ cały blok “Łącznie:” w kroku 1 */
.cart-items .order-summary {
  /* to ustawi podstawowy rozmiar dla wszystkich dzieci, w tym inline-ów */
  font-size: 1.3rem !important;
  font-weight: 350   !important;
}























/* 1) Usuń centrowanie na wrapperze total i wymuś lewy text-align */
.cart-items .order-summary__total {
  text-align: left !important;
  width: 100% !important;
  display: flex !important;
  align-items: baseline !important;
}

/* 2) Wypchnij tylko kwotę na prawo */
.cart-items .order-summary__amount {
  margin-left: auto !important;
  /* opcjonalnie padding-right, jeśli chcesz bufor od krawędzi */
  padding-right: 1rem !important;
}















/* Krok 2 – przesunięcie kwoty w lewo !*/
.cart-items-step2 + .order-summary .order-summary__amount {
  display: inline-block !important;
  transform: translateX(-5rem) !important; /* zmień -1rem na dowolną wartość */
}

/* Pogrubienie napisu „Łącznie:” w kroku 2 */
.cart-items-step2 + .order-summary .order-summary__label {
  font-weight: 600 !important;
}

/* Zmiana rozmiaru czcionki napisu „Łącznie:” w kroku 2 */
.cart-items-step2 + .order-summary .order-summary__label {
  font-size: 1.31rem !important; /* dostosuj wartość według potrzeb */
}

/* Delikatne przesunięcie „Łącznie:” w prawo */
.cart-items-step2 + .order-summary .order-summary__label {
  margin-left: -1rem !important;  /* zmień 1rem na potrzebną wartość */
}

/* Delikatne przesunięcie ceny w prawo */
.cart-items-step2 + .order-summary .order-summary__amount {
  margin-left: -0.3rem !important;  /* użyj tej samej lub innej wartości */
}

/* Usuń pogrubienie z kwoty w podsumowaniu kroku 2 */
.cart-items-step2 + .order-summary .order-summary__amount {
  font-weight: normal !important;
}

/* Delikatny margines między „Łącznie:” a kwotą w kroku 2 */
.cart-items-step2 + .order-summary .order-summary__label {
  margin-right: 0.6rem !important; /* dostosuj wartość wg potrzeby */
}

/* Krok 1 – obniżenie ikony usuwania w dół */
.cart-items .cart-item__remove {
  margin-top: 0.45rem !important; /* zwiększ wartość, by opuścić ikonę jeszcze bardziej */
}































/* Krok 2 – uniesienie przycisku „Wybierz termin” bliżej górnej krawędzi kartki */
.cart-items-step2 .cart-item__select-date {
  margin-top: -2rem !important;  /* zmień -0.5rem na większą lub mniejszą wartość, by idealnie dopasować */
}

/* Jeśli wolisz przesuwać sam button, a zachować wrapper: */
.cart-items-step2 .btn-select-date {
  transform: translateY(-0.5rem) !important;  /* analogicznie dostosuj wartość */
}



/* Krok 2 – przesunięcie przycisku „Wybierz termin” w prawo */
.cart-items-step2 .cart-item__select-date {
  margin-left: auto !important;
  /* jeśli chcesz dodać dodatkowy odstęp od krawędzi: */
  padding-right: 1rem !important;
}














.calendar-grid {
  display: none;                /* domyślnie ukryte */
}
.calendar-grid.loaded {
  display: grid !important;     /* gdy już załadowane */
  grid-template-columns: repeat(7, 1fr);
  gap: 1rem;
  margin: 2rem 0;
}































/* ograniczamy główne zdjęcie galerii do 100% szerokości kontenera */
.offer-gallery__main img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* miniaturki: stały rozmiar 80×80px, dopasowanie */
.offer-gallery__thumbs .offer-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  cursor: pointer;
  border: 1px solid #ddd; /* lub swój kolor */
  border-radius: .25rem;
  transition: transform .2s;
}
.offer-gallery__thumbs .offer-thumb:hover {
  transform: scale(1.05);
  border-color: #aaa;
}

/* ograniczamy główne zdjęcie galerii do maks. 70% szerokości kontenera i wyśrodkowujemy */
.offer-gallery__main {
  text-align: center;
}
.offer-gallery__main img {
  max-width: 70%;
  height: auto;
  margin: 0 auto;
  display: inline-block;
}

.offer-gallery__main img {
  max-width: 70%;
  max-height: 200px;
  object-fit: contain;
  margin: 0 auto;
  display: inline-block;
}

/* Galeria – pionowe miniatury */
.offer-gallery__thumbs {
  display: flex !important;
  flex-direction: column !important; /* ustaw pionowo */
  gap: 0.5rem;                       /* odstęp między miniaturkami */
}

/* (opcjonalnie) zmniejsz szerokość miniatur, żeby nie były za duże */
.offer-gallery__thumbs .offer-thumb {
  width: 4rem !important;  /* albo inna wartość która Ci pasuje */
  height: auto !important;
}

/* Przesunięcie tytułu strony w prawo */
.entry-header .entry-title {
  margin-left: 70rem; /* <-- tu możesz dostosować odległość */
}

/* → Powiększone miniaturki w galerii oferty */
.offer-gallery__thumbs .offer-thumb {
  width: 6rem !important;   /* ~80px */
  height: 8rem !important;  /* dopasuj do width */
  object-fit: cover;
}

/* Podnieś pionową listę miniatur w galerii */
.offer-gallery__thumbs {
  /* zmień na wartość która Ci pasuje, np. -0.5rem, -1rem itp */
  margin-top: -15rem !important;
}

/* Przesunięcie pionowej listy miniatur w prawo */
.offer-gallery__thumbs {
  margin-left: 3rem !important;  /* użyj wartości, która Ci odpowiada */
}

/* Usuń zaokrąglenia z miniaturek */
.offer-gallery__thumbs .offer-thumb {
  border-radius: 0 !important;
}













/* Powiększenie tylko głównego obrazka */
#main-image {
  max-width: 100%;      /* albo np. 600px zamiast procentów */
  max-height: 800px;   /* podnieś lub obniż tę wartość wg potrzeby */
}

/* Podnieś pionową listę miniatur w galerii */
.offer-gallery__thumbs {
  /* zmień na wartość która Ci pasuje, np. -0.5rem, -1rem itp */
  margin-top: -50.3rem !important;
}

/* reset centrowania i przesunięcie głównego obrazka w lewo */
#main-image {
  /* usuń auto-marginesy */
  margin: 0 !important;
  /* ewentualne dodatkowe przesunięcie (ujemne = w lewo, dodatnie = w prawo) */
  position: relative;
  left: -500px; /* zmień wartość według potrzeby */
}






/* tylko dla tej oferty: Pilkarski Indywidualny */
body.page-template-page-pilkarski-indywidualny .site-main {
  /* tu możesz dostosować wartość, ale zacznij od 400px */
  padding-bottom: 250px;
}







.offer-gallery__main {
  position: relative !important;   /* na wszelki wypadek */
  overflow: visible !important;    /* żeby nic nie uciąć */
}

.gallery-arrow {
  position: absolute;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  cursor: pointer;
  z-index: 10;
}

.gallery-arrow--prev {
  top: 50%;
  right: 10px;                     /* wewnątrz obrazka */
  transform: translateY(-100%);    /* unieś w górę nad obrazek */
}

.gallery-arrow--next {
  top: 50%;
  right: 10px;
  transform: translateY(0);        /* poniżej środka obrazka */
}







.gallery-arrow {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #f9f9f9;           /* jasne tło */
  border: 1px solid #ddd;        /* subtelna obwódka */
  border-radius: 50%;            /* okrąg */
  color: #666;                   /* ciemnoszary kolor strzałki */
  font-size: 16px;               /* żeby strzałka była większa */
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  transition: background .2s, color .2s;
}

.gallery-arrow:hover {
  background: #eee;
  color: #333;
}

/* pozycjonowanie */
.gallery-arrow--prev {
  top: 10px;                     /* nieco od krawędzi */
  right: 10px;
}

.gallery-arrow--next {
  bottom: 10px;                  /* nieco od krawędzi */
  right: 10px;
}


.gallery-arrow {
  width: 44px;
  height: 44px;
  font-size: 20px;
}

/* opcjonalnie zmniejsz padding wewnętrzny, jeśli jest */
.gallery-arrow {
  padding: 0;
}

/* pogrubienie samego znaku strzałki */
.gallery-arrow {
  font-weight: bold;
}

.gallery-arrow {
  background-color: inherit !important;
}

.gallery-arrow {
  /* zamiast stałej barwy, użyj obecnego koloru ikony */
  border: 1px solid currentColor !important;
}

.gallery-arrow {
  /* pogrubiamy obwódkę do 2px */
  border: 2px solid currentColor !important;
}







@media (min-width: 768px) {
  /* 1. Wymuś jednorzędowy układ galerii + prawej kolumny */
  body.page-template-page-pilkarski-indywidualny 
    .flex.flex-wrap.-mx-4.mb-8 {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start;
  }

  /* 2. Wypchnij drugą kolumnę (cena/qty/btn) na prawo */
  body.page-template-page-pilkarski-indywidualny 
    .flex.flex-wrap.-mx-4.mb-8 > div:nth-child(2) {
    margin-left: auto !important;
  }
}










/* Pozycjonowanie strzałek na prawo od głównego obrazka */
.offer-gallery__main {
  position: relative !important;
  overflow: visible !important;
}

.offer-gallery__main .gallery-arrow {
  position: absolute !important;
  left: 100% !important;       /* zaczynamy od krawędzi obrazka */
  margin-left: 8px !important; /* odsunięcie w prawo */
}

/* góra i dół */
.offer-gallery__main .gallery-arrow--prev {
  top: 50% !important;
  transform: translateY(-150%) !important;  /* nad środkiem */
}

.offer-gallery__main .gallery-arrow--next {
  top: 50% !important;
  transform: translateY(50%) !important;    /* pod środkiem */
}










.offer-gallery__main .gallery-arrow {
  margin-left: 480px !important;
}








/* Przesunięcie tylko głównego obrazka w prawo */
.offer-gallery__main {
  position: relative;
  left: 670px; /* tu ustaw jak bardzo w prawo */
}















.offer-gallery .gallery-arrow {
  /* im większa wartość, tym dalej w lewo */
  margin-left: -480px !important;
}







/* Tylko zmniejsza odstęp pionowy między strzałkami */
.offer-gallery__main .gallery-arrow--prev {
  top: 760px !important;  /* pozycja pierwszej strzałki */
}
.offer-gallery__main .gallery-arrow--next {
  top: 735px !important;  /* o ile mniejszą różnicę chcesz, tu: 20px dalej od pierwszej */
}







/* Powiększony i pogrubiony tytuł na stronie Pilkarski Indywidualny */
body.page-template-page-pilkarski-indywidualny .entry-title {
  font-size: 2.8rem;      /* możesz dostosować rozmiar */
  font-weight: 800;     /* pogrubienie — 700 to bold, 800 będzie jeszcze grubsze */
  line-height: 1;     /* opcjonalnie, by zminimalizować odstępy w multi-liniach */
}








body.page-template-page-pilkarski-indywidualny .entry-content {
  margin-bottom: -40px !important;
}

body.page-template-page-pilkarski-indywidualny .entry-header .entry-title {
  margin-left: 850px !important;
}




/* Przesunięcie ceny w dół tylko na stronie Pilkarski Indywidualny */
body.page-template-page-pilkarski-indywidualny .text-2xl.font-semibold {
  margin-top: 40px !important; /* dostosuj wartość pionowego przesunięcia */
}









/* Przesuń samą cenę w dół na stronie Pilkarski Indywidualny */
body.page-template-page-pilkarski-indywidualny
  p.text-2xl.font-semibold {
  position: relative;
  top: 40px; /* tu dostosuj o ile px w dół ma pójść cena */
  left: -845px; /* tu dostosuj o ile px w lewo ma pójść cena */
}

/* Powiększ cenę na stronie Pilkarski Indywidualny */
body.page-template-page-pilkarski-indywidualny
  p.text-2xl.font-semibold {
  font-size: 2rem; /* zmień wg potrzeby, np. 3rem, 32px itp. */
  line-height: 1.2;
}
















/* tylko na tej stronie (template page-pilkarski-indywidualny) */
body.page-template-page-pilkarski-indywidualny
  .site-main > article .flex > .w-full.md\:w-1\/2.px-4:nth-child(2) {
  margin-top: 20rem; /* tu ustawiasz odsunięcie w dół */
}
/* Przesuń samą cenę w dół na stronie Pilkarski Indywidualny */
body.page-template-page-pilkarski-indywidualny
  p.text-2xl.font-semibold {
  position: relative;
  top: -290px; /* tu dostosuj o ile px w dół ma pójść cena */
  left: -195px; /* tu dostosuj o ile px w lewo ma pójść cena */
}











/* tylko na stronie Pilkarski Indywidualny */
body.page-template-page-pilkarski-indywidualny {

  /* 1) odsuwamy opis od ceny */
  .mb-6.prose {
    /* usuń dotychczasowy dolny margines i dodaj górny */
    margin-bottom: 0 !important;
    margin-top: 2rem !important;
  }

  /* 2) odsuwamy blok z ilością i przyciskiem od opisu */
  .flex.items-center.mb-6 {
    margin-top: 1.5rem !important;
  }
}





.offer-static-description {
  position: relative !important;
  top: -80px !important;
  left: -50px;
}

.offer-static-description p {
  font-weight: 700 !important;
  font-size: 1.1rem;
}


/* Przesuń samą cenę w dół na stronie Pilkarski Indywidualny */
body.page-template-page-pilkarski-indywidualny
  p.text-2xl.font-semibold {
  position: relative;
  top: -290px; /* tu dostosuj o ile px w dół ma pójść cena */
  left: -33px; /* tu dostosuj o ile px w lewo ma pójść cena */
}

/* Przesunięcie opisu oferty w górę i w lewo */
.offer-static-description {
  transform: translate(19px, -180px) !important;
}




























.offer-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


.offer-price {
  position: relative;  /* potrzebne, by przesunięcie zadziałało tylko na ten blok */
  left: -250px;         /* wartość dobierz wg uznania */
}

/* 1) Upewnij się, że wrapper ma klasę .offer-details */
.offer-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* 2) Nadaj opisowi stałą szerokość i usuń wszelkie ograniczenia */
.offer-details .offer-description {
  position: relative;        /* izoluje przesunięcie */
  left: -270px;               /* ruchem w lewo – dostosuj */
  width: 770px !important;   /* wymuszona szerokość */
  max-width: none !important;/* usuwa każde wcześniejsze max-width */
  word-wrap: break-word;
  top: -80px
}

/* Styl czcionki dla bloku opisu (tylko ten element) */
.offer-details .offer-description {
  /* jeśli masz już width/left to zostaw tę część i dopisz poniższe */
  font-size: 1.125rem;    /* ~18px – zmień na inną wartość według uznania */
  font-weight: 600;       /* półpogrubienie; użyj 700 dla pełnego bold */
  line-height: 1.5;       /* lepsza czytelność przy większej czcionce */
}













/* wyrenderowane powyżej metadane oferty */
.offer-meta__item {
  font-size: 1.2rem;       /* ok. 16px, dostosuj wg potrzeb */
  line-height: 1.4;
  margin: 0;
}

.offer-meta__label {
  font-weight: 700;      /* pogrubiona etykieta */
}

.offer-meta__value {
  font-weight: 400;      /* normalna waga wartości */
}

/* Przesunięcie bloku z dodatkowymi informacjami */
.offer-meta {
  position: relative;  /* izoluje przesunięcie tylko do tego kontenera */
  top:    -270px;       /* ruch w górę – dostosuj wartość */
  left:   -278px;       /* ruch w lewo – dostosuj wartość */
}

















/* 2) Pełne nadpisanie wyglądu przycisku „Do koszyka” */
.offer-addtocart .do-koszyka-button,
.offer-addtocart #add-to-cart {
  display: inline-block !important;
  background-color: #000 !important;       /* czarne tło */
  color: #fff !important;                  /* biały tekst */
  padding: 0.75rem 2rem !important;        /* 12px w pionie, 32px w poziomie */
  border: none !important;                 /* bez obramowania */
  border-radius: 9999px !important;        /* maksymalne zaokrąglenie */
  font-size: 1rem !important;              /* 16px */
  font-weight: 600 !important;             /* półpogrubienie */
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: none !important;             /* usuń ewentualny cień */
}

/* 3) (opcjonalnie) Jeśli button ma jakieś hover/focus z Tailwinda, nadpisz je: */
.offer-addtocart .do-koszyka-button:hover,
.offer-addtocart #add-to-cart:hover {
  background-color: #111 !important;
}

/* Wymuszenie większej czcionki w przycisku Do koszyka */
.offer-addtocart button#do-cart-add,
.offer-addtocart .do-koszyka-button,
.offer-addtocart #add-to-cart {
  font-size: 1.3rem !important;  /* zmień na 1.75rem, 2rem itp. według potrzeb */
  line-height: 1.2 !important;
}

/* Zmniejszenie grubości czcionki w przycisku „Do koszyka” */
.offer-addtocart .do-koszyka-button,
.offer-addtocart #add-to-cart {
  font-weight: 500 !important;  /* lub 500, jeśli 400 będzie zbyt cienkie */
}

/* Poszerzenie obszaru kliknięcia i granic przycisku „Do koszyka” */
.offer-addtocart .do-koszyka-button,
.offer-addtocart #add-to-cart {
  display: inline-block !important;    /* upewniamy się, że padding zadziała prawidłowo */
  padding: 1rem 3rem !important;       /* 16px w pionie, 48px w poziomie – dostosuj według potrzeby */
  min-width: 350px !important;         /* minimalna szerokość przycisku */
  box-sizing: border-box !important;   /* padding wlicza się do szerokości */
  text-align: center !important;       /* centrowanie tekstu */
}






.offer-addtocart .do-koszyka-button,
.offer-addtocart #add-to-cart {
  font-weight: 500 !important;
  /* dwie lekkie poświaty po bokach, które pogrubią krój */
  text-shadow:
    0.3px 0 currentColor,
   -0.3px 0 currentColor;
}















/* Kontener przełącznika */
.offer-switcher {
  display: inline-flex;
  margin-bottom: 1.5rem;      /* odstęp od kolejnego elementu */
}

/* Podstawowy wygląd każdego przycisku */
.offer-switcher__item {
  display: inline-block;
  padding: 0.5rem 1.25rem;    /* 8px pion / 20px poziom */
  border: 1px solid #ccc;
  background-color: #fff;
  color: #000;
  text-decoration: none;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
}

/* Zakładki stykają się – skok o 1px w lewo, by nie było podwójnej ramki */
.offer-switcher__item + .offer-switcher__item {
  margin-left: -1px;
}

/* Zaokrąglenia rogów */
.offer-switcher__item:first-child {
  border-radius: 4px 0 0 4px;
}
.offer-switcher__item:last-child {
  border-radius: 0 4px 4px 0;
}

/* Stan aktywny (z czarnym tłem, białym tekstem i granicą) */
.offer-switcher__item--active {
  background-color: #000;
  color: #fff;
  border-color: #000;
  font-weight: 600;
}

.offer-switcher {
  display: flex;
  gap: 1.5rem;  /* odległość między bloczkami */
}

/* Każdy z rogów dla obu przełączników */
.offer-switcher__item {
  border-radius: 8px !important;  /* lub 9999px, jeśli chcesz kształt „pigułki” */
}






/* Grubsze szare obwódki dla nieaktywnego przycisku */
.offer-switcher__item:not(.offer-switcher__item--active) {
  border: 2px solid #ccc;   /* zamiast 1px na 2px */
}



.offer-switcher__item {
  font-weight: 600 !important;
}

/* Ustalenie koloru tekstu nieaktywnego przycisku na ten sam, co obwódka */
.offer-switcher__item:not(.offer-switcher__item--active) {
  color: #ccc !important;   /* ten sam odcień co border: #ccc */
}

/* Hover na nieaktywnym przełączniku */
.offer-switcher__item:not(.offer-switcher__item--active):hover {
  background-color: #ccc !important;  /* to samo, co border */
  color: #fff !important;             /* biały tekst */
}

.offer-switcher__item {
  transition: background-color 0.2s ease, color 0.2s ease;
}












/* Kontener sekcji pod przyciskiem */
.offer-sections {
  margin-bottom: 1.5rem;
}

/* Nagłówki sekcji (<summary> i link) */
.offer-section__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: #000;
  text-decoration: none;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}

/* Strzałka przy tytułach */
.offer-section__arrow {
  display: inline-block;
  transition: transform 0.2s ease;
  margin-left: 0.5rem;
}

/* Obrót strzałki, gdy <details> jest otwarte */
.offer-section[open] .offer-section__arrow {
  transform: rotate(180deg);
}

/* Treść rozwijanego accordionu */
.offer-section__body {
  padding: 0.75rem 0;
  border-bottom: 1px solid #eee;
  font-size: 0.95rem;
  line-height: 1.4;
  color: #333;
}

/* Płynne przewijanie do kotwicy */
html {
  scroll-behavior: smooth;
}















.offer-section__arrow {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.5rem;

  /* trójkąt skierowany w dół: przezroczyste boki + kolor na górnej krawędzi */
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #000;

  transition: transform 0.2s ease;
  transform: rotate(0deg);  /* domyślnie w dół */
}

/* po kliknięciu (gdy <details> ma open) – obrót o 180° → ku górze */
.offer-section[open] .offer-section__arrow {
  transform: rotate(180deg);
}

/* Usuń szarą kreskę pod linkiem „Dokładny opis treningu” */
.offer-section__link {
  border-bottom: none !important;
}






























/* =============== Pełnowymiarowy opis treningu =============== */
.full-description {
  padding: 2rem 1rem;              /* odstępy wewnętrzne */
  background-color: #fff;          /* białe tło, żeby odcinać od beżowego */
  border-top: 1px solid #e2e8f0;   /* cienka, jasna kreska u góry */
  margin-top: 2rem;
}

.full-description__title {
  font-size: 1.75rem;              /* 28px */
  font-weight: 700;
  margin-bottom: 1rem;
  color: #111;
}

.full-description__content {
  max-width: 800px;                /* szerokość tekstu */
  margin: 0 auto;                  /* wyśrodkowanie */
  line-height: 1.6;
  color: #333;
}

/* Pełnowymiarowy opis treningu – tło zgodne z resztą strony */
.full-description {
  background-color: transparent !important;
}

/* Usuń pozostałą szarą linię (kontur) sekcji pełnego opisu */
.full-description {
  border: none !important;
}











/* Przesunięcie bloku „Czas treningu / Zawodnicy na trenera” w dół bez użycia marginesu */
.offer-meta {
  position: relative;
  top: 2rem;   /* przesuń w dół o 2rem – dostosuj wartość według potrzeb */
}











/* Przesunięcie ceny w dół tak samo jak meta-informacji */
.offer-price {
  position: relative;
  top: 20rem;   /* przesuwa o 2rem w dół – dostosuj wartość według potrzeby */
}








/* Przesunięcie krótkiego opisu treningu lekko w lewo */
.offer-details .offer-description {
  position: relative !important;
  left: -1rem !important;   /* ~16px w lewo – zmień według potrzeb */
}

/* Alternatywnie za pomocą transform dla lepszego wydajności */
.offer-details .offer-description {
  transform: translateX(-16.4rem) !important;
}



/* Delikatne przesunięcie ceny w prawo */
.offer-price {
  position: relative !important;
  left: -15.5rem !important;   /* ~16px w prawo – dostosuj wartość według potrzeby */
}

/* Przesunięcie krótkiego opisu treningu tylko w osi Y (w górę) */
.offer-details .offer-description {
  position: relative !important;
  top: -22rem !important;   /* przesuwa w górę o 1rem (ok. 16px) – dostosuj wartość */
  /* usuń wszelkie transform: translateX/translateY, żeby nie nakładały się */
}

/* Przesunięcie ceny w górę o 1rem */
.offer-price {
  position: relative !important;
  top: 8rem !important;  /* ok. 16px w górę – dostosuj wartość wg potrzeby */
}

/* Przesunięcie bloku „Czas treningu / Zawodnicy na trenera” w górę */
.offer-meta {
  position: relative !important;
  top: -9rem !important;   /* przesuwa w górę o 1rem (~16px) – zmień według potrzeb */
}






/* Powiększenie przycisków „Trening indywidualny” i „Trening personalny” */
.offer-switcher__item {
  font-size: 1.125rem !important;    /* ~18px zamiast 16px */
  padding: 0.75rem 1.5rem !important; /* 12px w pionie, 24px w poziomie */
}
/* Wyrównanie pionowego paddingu w przyciskach przełącznika */
.offer-switcher__item {
  padding: 0.6rem 1.5rem !important;  /* 1rem górą i dołem, 1.5rem bokami */
  line-height: 1.2 !important;      /* upewnia równomierne rozłożenie tekstu */
}

/* Rozciągnięcie przycisku „Do koszyka” na całą szerokość kontenera */
.offer-addtocart .do-koszyka-button,
.offer-addtocart #add-to-cart {
  display: block !important;
  min-width: 474.5px !important;
  box-sizing: border-box !important; /* padding wlicza się w szerokość */
}

/* Przesunięcie przełącznika Trening indywidualny/Trening personalny w górę */
.offer-switcher {
  position: relative !important;
  top: -12rem !important;   /* przesuwa w górę o 1rem (~16px) – dostosuj wg potrzeby */
}





/* Zwiększenie rozmiaru czcionki w tytułach sekcji */
.offer-section__title {
  font-size: 1.2rem !important;  /* ok. 20px – dostosuj według potrzeb */
}

/* Zwiększenie rozmiaru czcionki w nagłówku pełnego opisu treningu */
.full-description__title {
  font-size: 1.7rem !important;     /* ok. 32px – dostosuj według potrzeb */
}





/* Lżejsze tytuły z delikatnym cieniem dla optycznej grubości */
.offer-section__title,
.full-description__title {
  font-weight: 400 !important;    /* normalna waga */
  /* cienki cień po obu stronach, symulujący 0.5px pogrubienia */
  text-shadow:
    0.3px 0 currentColor,
   -0.3px 0 currentColor;
}





/* Większy odstęp między tekstem a strzałką w tytułach sekcji */
.offer-section__title .offer-section__arrow {
  margin-left: 16.2rem;  /* zwiększa przerwę – zmień na 0.5rem, 1.2rem itp. wg uznania */
}








/* 1) Przestrzeń pomiędzy tekstem a szarą kreską (nad linią) */
.offer-sections .offer-section__title {
  padding-bottom: 2rem;   /* dostosuj wartość, np. 0.5rem, 1rem, 1.5rem */
}

/* 2) Przestrzeń pomiędzy szarą kreską a następnym elementem (pod linią) */
.offer-sections .offer-section__title {
  margin-bottom: 1.4rem;    /* dostosuj wartość, np. 1rem, 2rem, 3rem */
}



/* Pogrubienie szarej kreski pod tytułami sekcji */
.offer-sections .offer-section__title {
  border-bottom: 2px solid #ccc !important;  /* zamiast 1px → 2px */
}

/* Usuń border-bottom pod „Dokładny opis treningu” */
.offer-sections .offer-section:last-child .offer-section__title {
  border-bottom: none !important;
}




/* Przesunięcie całego bloku przełącznika sekcji w lewo */
.offer-sections {
  position: relative !important;
  left: -17rem !important;  /* przesuń w lewo o 1.5rem (~24px) – dostosuj wg potrzeb */
  top: -4.5rem !important;
}

/* Przesunięcie napisu pod przyciskiem w lewo */
.offer-addtocart__note {
  position: relative !important;
  left: -15rem !important; /* przesunięcie o 1rem w lewo – dostosuj według potrzeb */
  top: -10rem !important;
}



/* Przesunięcie napisu pod przyciskiem lekko w górę */
.offer-addtocart__note {
  position: relative !important;
  top: -2rem !important;  /* przesuwa w górę o ~12px – dostosuj wartość według potrzeb */
}






/* Przesunięcie przycisku „Do koszyka” w górę i w lewo */
.offer-addtocart .do-koszyka-button,
.offer-addtocart #add-to-cart {
  position: relative !important;
  top:   -5rem !important;  /* przesuwa w górę o 1rem (~16px) */
  left:  -17.5rem !important;  /* przesuwa w lewo o 1rem (~16px) */
}




















/* Granica pod całym kontenerem, która przesuwa się razem z treścią */
.offer-section {
  border-bottom: 1px solid #ccc !important;
  padding-bottom: 1rem;   /* odstęp wewnętrzny na wypadek potrzeby */
  margin-bottom: 1.5rem;  /* przestrzeń do następnego elementu */
}

/* Usuń granicę ze summary */
.offer-section__title {
  border-bottom: none !important;
}





/* Usuń starą szarą linię spod tytułu (summary) */
.offer-sections summary.offer-section__title {
  border-bottom: none !important;
}

/* Usuń granicę pod drugą sekcją (Dokładny opis treningu) */
.offer-sections .offer-section:nth-child(2) {
  border-bottom: none !important;
}






/* Bardzo mały odstęp nad linią */
.offer-section {
  padding-bottom: 1px !important;   /* ~0.125rem, tylko 2px */
  /* jeśli potrzebujesz pod linią inny odstęp: */
  margin-bottom: 10px !important;     /* np. 8px = 0.5rem */
}





/* Użycie ujemnej wartości marginesu pod tytułem, aby linia pod nim była bliżej */
.offer-sections .offer-section__title {
  margin-bottom: -2px !important;   /* spróbuj -1px, -2px, -3px… aż uzyskasz pożądany efekt */
}

/* Alternatywnie: przesunięcie treści body w górę, tak by zbliżyć ją do linii */
.offer-sections .offer-section__body {
  margin-top: -2px !important;      /* ujemny margin-top podniesie całą zawartość */
}




/* Przesunięcie napisu „Dokończysz zakupy w Twoim koszyku” wyżej */
.offer-addtocart__note {
  position: relative !important;
  top: -5rem !important;  /* przesuwa w górę o 1rem (~16px) – dostosuj wg potrzeby */
}



/* Delikatne pogrubienie szarej kreski pod elementami .offer-section */
.offer-section {
  border-bottom: 2px solid #ccc !important;  /* zamiast 1px → 2px dla subtelnego pogrubienia */
}
















/* Zmniejszenie przestrzeni między tytułem a zawartością po otwarciu */
.offer-section__body {
  padding-top: 1px !important; /* zmniejsza odstęp nad pierwszym elementem */
}




/* Przesunięcie zawartości kontenera w górę za pomocą ujemnej wartości */
.offer-section__body {
  /* zamiast padding-top, użyj ujemnego margin-top */
  margin-top: -8px !important;  /* wpisz tu dowolną ujemną wartość w px, np. -3px, -8px */
}






/* Usuń kropki z listy w sekcji trenerów */
.offer-section__body ul {
  list-style-type: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
}











/* Lekko pogrubiony tekst w rozwijanej treści z delikatnym cieniem */
.offer-section__body,
.offer-section__body p,
.offer-section__body li {
  font-weight: 500 !important;    /* półpogrubienie */
  /* subtelny cień po obu stronach litery dla optycznego wzmocnienia */
  text-shadow:
    0.3px 0 currentColor,
   -0.3px 0 currentColor;
}

/* Styl dodatkowego akapitu w rozwijanym bloku trenerów */
.offer-section__cta {
  margin-top: 1rem;        /* odstęp od listy */
  font-weight: 600;         /* pogrubienie */
  color: #000;              /* czarny kolor, jak nagłówek */
}






/* Styl linku CTA w sekcji trenerów */
.offer-section__cta-link {
  color: #000;               /* czarny tekst */
  font-weight: 600;          /* pogrubienie */
  text-decoration: none;     /* usuń podkreślenie */
  border-bottom: 1px solid #000; /* cienka kreska pod linkiem */
  padding-bottom: 2px;       /* mały odstęp do kreski */
  transition: color 0.2s ease, border-color 0.2s ease;
}
.offer-section__cta-link:hover {
  color: #555;               /* zmiana koloru przy najechaniu */
  border-color: #555;        /* zmiana koloru kreski przy najechaniu */
}




/* Powiększenie tekstu nazwisk trenerów w rozwijanym bloku */
.offer-section__body ul li {
  font-size: 1.125rem;    /* ~18px — dostosuj według uznania */
  line-height: 1.4;       /* dla czytelności */
}









/* Zwiększenie odstępów między pozycjami w liście trenerów */
.offer-section__body ul li {
  margin-bottom: 0.75rem;  /* ok. 12px odstępu – dostosuj wg potrzeby */
}

/* Usuń dolny margines z ostatniego elementu, żeby nie był zbyt daleko */
.offer-section__body ul li:last-child {
  margin-bottom: 0;
}




/* Podniesienie przycisku „Do koszyka” w górę */
.offer-addtocart .do-koszyka-button {
  position: relative !important;
  top: -30px !important;  /* przesuwa w górę o 1.5 rem (~24 px) – dostosuj według potrzeb */
}







.offer-sections {
  position: relative !important;
  top: -140px !important;      /* przesunięcie o 24px w górę */
}





/* Przesunięcie przycisku “Do koszyka” w górę za pomocą transform */
.offer-addtocart .do-koszyka-button,
.offer-addtocart #add-to-cart {
  transform: translateY(-5rem); /* przesuwa w górę o 1rem (~16px) – zmień na -0.5rem, -1.5rem itp. */
}




/* Przesunięcie napisu „Dokończysz zakupy w Twoim koszyku” w górę */
.offer-addtocart__note {
  /* Metoda 1: translateY */
  transform: translateY(-4.75rem) !important;  /* przesuwa w górę o 1rem (~16px) */
}











/* Subtelny cień dla tekstu pod przyciskiem “Do koszyka” */
.offer-addtocart__note {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);  /* x-offset, y-offset, blur, kolor */
}

/* Przesunięcie napisu pod przyciskiem „Dokończysz zakupy…” w prawo */
.offer-addtocart__note {
  position: relative !important;
  left: -175px !important;  /* przesuwa w prawo o ~12px – dostosuj według potrzeby */
}

/* Przesunięcie przycisków Trening indywidualny/Trening personalny w lewo */
.offer-switcher {
  position: relative !important;
  left: -17.5rem !important;   /* przesuwa w lewo o 1rem (~16px) – dostosuj według uznania */
}

/* Przesunięcie przycisków Trening indywidualny/Trening personalny w dół */
.offer-switcher {
  position: relative !important;
  top: -10rem !important;     /* przesuwa w dół o 1rem (~16px) – dostosuj wg potrzeby */
}





/* Hover: zmiana koloru tekstu i strzałki na szary (#ccc) */
.offer-section__title:hover {
  color: #ccc !important;
}

/* Jeśli używasz CSS-owej strzałki (border-triangle), a nie SVG: */
.offer-section__title:hover .offer-section__arrow {
  border-top-color: #ccc !important;  /* dla trójkąta skierowanego w dół */
  border-bottom-color: #ccc !important; /* i odwrotnie, gdy odwrócona */
}









/* Przesunięcie głównego nagłówka „Dokładny opis treningu” nieco niżej */
.full-description__title {
  /* Metoda 1: margin-top */
  margin-top: 1rem !important;
}




/* Przesunięcie głównego nagłówka „Dokładny opis treningu” w prawo */
.full-description__title {
  position: relative !important;
  left: 2.2rem !important;  /* przesuwa w prawo o ~16px – dostosuj według potrzeb */
}











/* Hover: tło przycisku „Do koszyka” zmienia się na szary (#ccc), tekst na czarny */
.offer-addtocart .do-koszyka-button:hover,
.offer-addtocart #add-to-cart:hover {
  background-color: #ccc !important;
  color: #ffffff !important;
}

/* Płynne przejście kolorów */
.offer-addtocart .do-koszyka-button,
.offer-addtocart #add-to-cart {
  transition: background-color 0.2s ease, color 0.2s ease;
}






























/* Szare tło panelu „Twój koszyk” */
#cart-panel {
  background-color: #ccc !important;  /* #ccc to ten sam szary, którego używamy przy obramowaniach */
}

/* Jeżeli chcesz dopasować też tło wnętrza listy: */
#cart-panel .cart-item {
  background-color: #eee !important;  /* nieco jaśniejszy odcień, dla kontrastu */
}

/* Panel koszyka — usuń tła i cienie wewnątrz kart */
#cart-panel .cart-item,
#cart-panel .cart-item__img,
#cart-panel .cart-item__content {
  background: transparent !important;
  border:     none       !important;
  box-shadow: none       !important;
}
/* Usuń tło z kontenera „Podsumowanie” w panelu koszyka */
#cart-panel .cart-actions,
#cart-panel .cart-footer,
#cart-panel .cart-summary {
  background: transparent !important;
  border:     none       !important;
  box-shadow: none       !important;
}
/* Usuń tło z kontenera „Podsumowanie” w panelu koszyka */
#cart-panel .cart-actions,
#cart-panel .cart-footer,
#cart-panel .cart-summary {
  background: transparent !important;
  border:     none       !important;
  box-shadow: none       !important;
}
/* Usuń tło/obramowanie z wrappera zawierającego przycisk „Podsumowanie” */
#cart-panel > *:last-child {
  background-color: transparent !important;
  border:           none       !important;
  box-shadow:       none       !important;
}






/* Rozszerzenie i wyśrodkowanie przycisku „PODSUMOWANIE” */
.cart-panel-footer .cart-summary-btn {
  display: block !important;
  width: 100% !important;        /* zajmie 90% szerokości kontenera */
  max-width: 500px !important;  /* ograniczenie maksymalnej szerokości */
  margin: 0.5rem auto !important; /* margines góra/dół oraz wyśrodkowanie */
  padding: 1rem !important;      /* większy padding wewnętrzny */
  font-size: 1rem !important;    /* nieco większa czcionka */
  text-align: center !important; /* wyśrodkowanie tekstu */
}
/* Pogrubienie i delikatny cień dla napisu w przycisku „PODSUMOWANIE” */
.cart-panel-footer .cart-summary-btn {
  font-weight: 600 !important;              /* półpogrubienie */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;  /* subtelny cień pod literami */
}
/* Przesunięcie przycisku „PODSUMOWANIE” nieco w dół */
.cart-panel-footer .cart-summary-btn {
  position: relative !important;
  top: 1rem !important;  /* przesuwa w dół o 0.5rem (~8px) – zmień wartość według potrzeby */
}








/* ---- Sekcja z sumą w panelu koszyka ---- */
.cart-panel-footer .cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  font-weight: 600;
}

/* etykieta i kwota: */
.cart-panel-footer .cart-total__label {
  margin-right: 0.5rem;
}
.cart-panel-footer .cart-total__amount {
  white-space: nowrap;
}
/* Powiększenie czcionki dla napisu „Łącznie” oraz kwoty */
.cart-panel-footer .cart-total__label,
.cart-panel-footer .cart-total__amount {
  font-size: 1.125rem !important; /* ok. 18px – dostosuj według uznania */
  font-weight: 600 !important;    /* lekko pogrubione dla lepszej czytelności */
}
/* Przesunięcie napisu „Łącznie” w prawo */
.cart-panel-footer .cart-total__label {
  position: relative !important;
  left: 0.05rem !important;   /* przesuwa w prawo o ~8px – dostosuj wg potrzeby */
}

/* Przesunięcie kwoty łącznej w lewo */
.cart-panel-footer .cart-total__amount {
  position: relative !important;
  left: -0.2rem !important;  /* przesuwa w lewo o ~8px – dostosuj wg potrzeby */
}





/* Czarna kreska nad „Łącznie” */
.cart-panel-footer .cart-total {
  border-top: 2px solid #000;  /* grubość i kolor jak pod tytułem */
  margin-top: 1.5rem;          /* dystans od elementów wyżej */
  padding-top: 1rem;           /* odstęp między kreską a tekstem */
}

/* Usuń dotychczasowy border i dodaj przesuniętą kreskę */
.cart-panel-footer .cart-total {
  position: relative;
  border-top: none !important;
}

.cart-panel-footer .cart-total::before {
  content: "";
  position: absolute;
  top: 0;
  left: -0.1rem;               /* przesunięcie w lewo o 0.25rem; dostosuj wartość */
  width: calc(99% + 0.01rem);  /* wydłużenie kreski o tę samą wartość */
  border-top: 2px solid #000;
}
























/* 1) Rozciągnięta nazwa usługi */
.cart-item__name--full {
  display: block;
  width: 100%;
  margin-bottom: 0.25rem;
}

/* 2) Kontener na cenę i ikonę */
.cart-item__details {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 3) Styl ceny */
.cart-item__price {
  font-weight: 600;
  font-size: 1rem;
}

/* 4) Ikona koszyka */
.cart-item__icon {
  font-size: 1rem;
  margin-left: 0.5rem;
  color: inherit; /* dostosuje się do koloru tekstu */
}














/* Nazwa rozciągnięta na pełną szerokość */
.cart-item__name--full {
  display: block !important;
  width: 100% !important;
  margin-bottom: 0.25rem !important;
  font-weight: 600 !important;
  color: #000 !important; /* upewnij się, że jest kontrastujący kolor */
}

/* Kontener z ceną i ikoną – obok siebie */
.cart-item__details {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* Styl ceny */
.cart-item__price {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #000 !important; /* czarny lub inny kontrastujący */
}

/* Ikona koszyka obok ceny */
.cart-item__icon {
  font-size: 1rem !important;
  margin-left: 0.5rem !important;
  color: #000 !important;
}







/* 
  Nadpisujemy wszelkie wcześniejsze transform: translateX(...) 
  dla .cart-item__price, tak aby cena pozostała w swoim miejscu.
*/
.cart-item__price {
  transform: none !important;
}

/* 
  Ukrywamy ikonę koszyka w liście pozycji koszyka, 
  czyli <i class="fas fa-shopping-cart cart-item__icon">…</i>
*/
.cart-item__icon {
  display: none !important;
}




























































/* Krok 2: kalendarz */
.calendar-grid {
  display: none;                    /* domyślnie ukryty */
  grid-template-columns: repeat(7, 1fr);
  gap: 1rem;
  margin: 2rem 0;
  position: relative;               /* potrzebne do absolutnego pozycjonowania .time-list */
}
.calendar-grid.open {
  display: grid;                    /* jeśli JS doda .open → pokaż grid */
}

/* Wiersz z nagłówkami dni tygodnia */
.calendar-header-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1rem;
  margin-bottom: .5rem;
}
.calendar-header-cell {
  text-align: center;
  font-weight: bold;
  color: #555;
}

/* Pojedynczy dzień w kalendarzu */
.calendar-day {
  position: relative;
  border: 1px solid #ddd;
  border-radius: .25rem;
  padding: .5rem;
  text-align: center;
  background: #fff;
  cursor: default;
  transition: transform .2s, box-shadow .2s;
}
.calendar-day.available {
  cursor: pointer;
}
.calendar-day.available:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.calendar-day.unavailable {
  opacity: .5;
  cursor: default;
}
.calendar-day .day-num {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: .25rem;
}
.calendar-day .day-label {
  font-size: .75rem;
  color: #666;
}

/* Dropdown z godzinami (lista .time-list) */
.time-list {
  list-style: none;
  margin: 0;
  padding: .5rem;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: .25rem;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: none;    /* ukryte, aż JS je pokaże */
  z-index: 50;      /* żeby było nad kafelkiem dnia */
}
.time-list li {
  padding: .25rem 0;
  cursor: pointer;
}
.time-list li:hover {
  background: #f0f0f0;
}



















/* ====================================================
   2.1. Kontener kalendarza (ukryty do momentu kliknięcia)
   ==================================================== */
.calendar-grid {
  display: none;                /* Początkowo niewidoczny */
  margin-top: 1rem;
  padding: 0.5rem;
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 0.25rem;
}

/* ====================================================
   2.2. Układ siatki: 7 kolumn, automatyczny układ dwurzędowy
   ==================================================== */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
}

/* ====================================================
   2.3. Wygląd pojedynczej karty dnia
   ==================================================== */
.calendar-day {
  position: relative;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  padding: 0.75rem;
  text-align: center;
  cursor: default;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 5.5rem; /* Ustalona wysokość, by wszystkie karty były jednakowe */
}

/* Dla dni dostępnych – podświetlenie obramowania i kursor pointer */
.calendar-day.available {
  cursor: pointer;
  border-color: #2a9d8f; /* ciemniejszy zielony odcień obramowania */
}
.calendar-day.available:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Dla dni niedostępnych – przyciemniony, brak interakcji */
.calendar-day.unavailable {
  background: #f0f0f0;
  color: #999;
  border-color: #e0e0e0;
}

/* ====================================================
   2.4. Nazwa dnia tygodnia (górny wiersz)
   ==================================================== */
.day-name {
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
  text-transform: capitalize;
}

/* ====================================================
   2.5. Numer dnia (duża cyfra)
   ==================================================== */
.day-num {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 0.25rem;
}

/* ====================================================
   2.6. Etykieta dostępności (dolny wiersz)
   ==================================================== */
.day-label {
  font-size: 0.75rem;
}

/* Dostępne terminy – zielony tekst */
.calendar-day.available .day-label {
  color: #2a9d8f; /* możesz dobrać inny odcień zielonego */
}

/* Brak dostępnych terminów – szary tekst */
.calendar-day.unavailable .day-label {
  color: #999;
}

/* ====================================================
   2.7. Opcjonalny wskaźnik wyboru (półokrąg w prawym górnym rogu)
   ==================================================== */
.day-selector {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1rem;
  height: 1rem;
  border: 2px solid #ccc;
  border-radius: 50%;
  background: #fff;
}

/* Jeśli dzień jest aktywny (po zaznaczeniu), obramowanie na zielono */
.calendar-day.selected .day-selector {
  border-color: #2a9d8f;
  background: #2a9d8f;
}

/* ====================================================
   2.8. Styl dla tekstu ‚Brak dostępnych terminów’:
   wyróżnienie w środku karty (może być dopasowane)
   ==================================================== */
.calendar-day.unavailable .day-label {
  font-style: italic;
}















/* Upewnijmy się, że .calendar-grid jest już ukryte, a gdy dodamy .grid-visible, będzie display: grid */
.calendar-grid {
  display: none;
  margin: 2rem 0;
  gap: 1rem;
}
.calendar-grid.grid-visible {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
}

/* Podstawowe formatowanie każdej komórki dnia */
.calendar-day {
  position: relative;
  padding: 0.75rem 0.5rem;
  background-color: #fff;      /* białe tło, żeby tekst kontrastował z resztą strony */
  border: 1px solid #ddd;      /* lekko szara obwódka */
  border-radius: 4px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 6rem;                /* ustalona wysokość, aby siatka była jednolita */
  font-family: sans-serif;
  font-size: 0.9rem;
  color: #333;                 /* ciemny tekst, lepszy kontrast */
}
.calendar-day.available {
  border-color: #2a9d8f;       /* obwódka zielona, jeśli są dostępne terminy */
}
.calendar-day.available .day-label {
  color: #2a9d8f;              /* zielony tekst „Dostępne terminy” */
}
.calendar-day.unavailable {
  opacity: 0.5;                /* nieaktywna, przygaszona */
  cursor: default;
}
.calendar-day.unavailable .day-label {
  color: #999;                 /* szary tekst „Brak dostępnych terminów” */
  font-style: italic;
}
.calendar-day:hover {
  background-color: #f9f9f9;   /* lekkie podświetlenie w hover, nawet dla unavailable */
}

/* Nazwa dnia (np. „Poniedziałek”) */
.calendar-day .day-name {
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
  text-transform: capitalize;
}
/* Numer dnia (cyfra) */
.calendar-day .day-num {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 0.25rem;
}
/* Etykieta („Dostępne terminy” lub „Brak dostępnych terminów”) */
.calendar-day .day-label {
  font-size: 0.75rem;
  text-align: center;
  line-height: 1.1;
}

/* Małe kółeczko selektora (puste) – w razie potrzeby */
.calendar-day .day-selector {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 0.8rem;
  height: 0.8rem;
  border: 2px solid #ccc;
  border-radius: 50%;
  background-color: white;
}
.calendar-day.available.selected .day-selector {
  border-color: #2a9d8f;
  background-color: #2a9d8f;
}

/* Kalendarz na starcie jest niewidoczny */
.calendar-grid {
  display: none;
}

/* Gdy JS doda klasę grid-visible, wymuszamy siatkę 7 kolumn */
.calendar-grid.grid-visible {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 1rem;             /* odstępy między komórkami */
  margin: 2rem 0;        /* marginesy nad i pod kalendarzem */
}











/* Domyślnie ukryjemy kalendarz */
.calendar-grid {
  display: none;
}

/* Gdy pojawi się klasa .grid-visible → użyj siatki */
.calendar-grid.grid-visible {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 1rem !important;
  margin: 2rem 0 !important;
}

/* Jeżeli chcesz ostylować samą komórkę */
.calendar-day {
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  box-sizing: border-box;
  padding: 0.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  min-height: 4rem;
  color: #333;
}

/* Styl dnia niedostępnego */
.calendar-day.unavailable {
  opacity: 0.6;
}
.calendar-day.unavailable .day-label {
  color: #999;
  font-style: italic;
}

/* Styl dnia dostępnego */
.calendar-day.available {
  border-color: #2a9d8f;
  background-color: #e6f4f1;
  color: #2a9d8f;
  font-weight: bold;
}
.calendar-day.available:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}








/* --------------------------------------------------
   Krok 2: kalendarz – teraz domyślnie ukrywamy grid
   -------------------------------------------------- */
.calendar-grid {
  display: none;           /* 1) na starcie element jest ukryty */
  /* usuwamy grid-template-columns, gap, margin – dodamy to dopiero w klasie .grid-visible */
}

/* gdy JS doda klasę .grid-visible — pokazujemy siatkę */
.calendar-grid.grid-visible {
  display: grid !important;            /* wymuś: siatka zamiast inline‐style z jQuery */
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 1rem !important;
  margin: 2rem 0 !important;
}

/* styl pojedynczego dnia (“kafelek”) – może zostać bez zmian */
.calendar-day {
  position: relative;
  border: 1px solid #ddd;
  border-radius: 0.25rem;
  padding: 0.5rem;
  text-align: center;
  background: #fff;
  cursor: pointer;
  transition: transform 0.2s;
}
/* ... reszta .calendar-day.available/unavailable itd. ... */
.calendar-day.available:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.calendar-day.unavailable {
  opacity: 0.5;
  cursor: default;
}
.day-name { font-size: 0.85rem; margin-bottom: 0.25rem; }
.day-num  { font-size: 1.25rem; font-weight: bold; margin-bottom: 0.25rem; }
.day-label { font-size: 0.75rem; color: #666; }
.day-selector { position: absolute; top: 0.5rem; right: 0.5rem; }
.day-radio    { display: inline-block; width: 0.75rem; height: 0.75rem; border: 2px solid #333; border-radius: 50%; }












/* 1) Nadpisujemy overflow na kartach (cart-item), żeby 
   dzieci (calendar-grid) nie były przycinane */
.cart-item {
  overflow: visible !important;
}

/* 2) Gdy dodajemy klasę .expanded (czyli po kliknięciu „Wybierz termin”), 
   wymuszamy automatyczne dopasowanie wysokości */
.cart-item.expanded {
  height: auto !important;
}

/* Jeżeli .cart-item ma jakieś inne reguły wysokości w stylach motywu (np. max-height), 
   możemy je również unieważnić: */
.cart-item {
  max-height: none !important;
}

/* 3) Na wszelki wypadek można dopisać, żeby .calendar-grid 
   nie miało własnych inline-stylów block/none, ale skoro już jest „grid-visible”, to wystarczy: */
.calendar-grid {
  display: grid !important;
}


























/* ——————————————————————————————————————
   1) Na .cart-item usuwamy przycinanie (overflow)
   —————————————————————————————————————— */
.cart-item {
  overflow: visible !important;
  /* W razie gdyby .cart-item miało inną narzuconą wysokość: */
  height: auto !important;
  max-height: none !important;
}

/* ——————————————————————————————————————
   2) Zadbajmy o to, żeby .calendar-grid w ogóle było widoczne
   i miało jakieś minimalne wymiary (jeżeli jeszcze nie wypełniliśmy go JS-em).
   Możesz ustawić np. min-height, aby kafelki nie powstawały na 0px:
   —————————————————————————————————————— */
.calendar-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 1rem !important;
  margin: 2rem 0 !important;
  /* Jeśli chcesz, żeby wstępnie widać było miejsce na kafelki,
     możesz dać min-height, np. na wysokość 2 rzędów: */
  min-height: calc(2 * (1rem + /*padding*/ 1.5rem + /*border*/ 2px + /*margin*/ 0 )) !important;
  /* (wartość min-height można dobierać w zależności od stylów .calendar-day) */
}

/* ——————————————————————————————————————
   3) Styl każdego kafelka
   —————————————————————————————————————— */
.calendar-day {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 0.25rem;
  padding: 0.5rem;
  text-align: center;
  cursor: pointer;
  transition: transform .2s;
}

/* kafelki bez slotów będą półprzezroczyste: */
.calendar-day.unavailable {
  opacity: 0.5;
  cursor: default;
}

/* kafelki z slotami: */
.calendar-day.available:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* wewnętrzne elementy kafelka: */
.day-name {
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}
.day-num {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 0.25rem;
}
.day-label {
  font-size: 0.75rem;
  color: #666;
}










/* -----------------------------------------------------
   1) Upewnij się, że rodzic (cart-item) nie przycina niczego 
      – nadpisujemy overflow, bo widzieliśmy, że było hidden
   ----------------------------------------------------- */
.cart-items-step2 .cart-item {
  overflow: visible !important;
}

/* -----------------------------------------------------
   2) Aby łatwo zobaczyć, czy kafelki w ogóle są w DOM-ie,
      nadaj im wyraźne tło i grubszą obwódkę:
   ----------------------------------------------------- */
.calendar-day {
  background-color: #cce5ff !important;  /* jasnoniebieskie tło */
  border: 2px dashed #0056b3 !important;  /* ciemnoniebieska, przerywana obwódka */
  padding: 0.5rem !important;
  margin: 0 !important;
  text-align: center;
  cursor: pointer;
}

/* Jeżeli kafelek jest “unavailable”, nieco przygaś go: */
.calendar-day.unavailable {
  opacity: 0.4 !important;
  cursor: default;
  background-color: #e2e3e5 !important; /* lekkie szare tło, żeby było widać różnicę */
}

/* Wyświetlamy grid od razu: */
.calendar-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 0.75rem !important;
  margin: 1.5rem 0 !important;
  /* na wszelki wypadek: żadne inline-style=”display:none” nie powinno tu pozostać */
  height: auto !important;
}























/* ===== KONTEJNER NA CZTERY PRZYCISKI ===== */
#kategorie {
    padding: 60px 0;
    background-color: #f9f3e8; /* beżowe tło sekcji (możesz zmienić lub usunąć) */
}

.container-kategorie {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* Możesz dodać gap zamiast marginow: gap: 20px; */
}

/* ===== PODSTAWOWE STYLE DLA WSZYSTKICH PRZYCISKÓW ===== */
.kategoria-przycisk {
    position: relative;
    display: block;
    width: 24%;           /* cztery przyciski po 24% = 96% szerokości kontenera */
    height: 200px;        /* stała wysokość */
    margin-bottom: 20px;  /* odstęp poniżej na wypadek zawartości pod sekcją */
    color: #ffffff;
    text-decoration: none;
    border-radius: 8px;
    overflow: hidden;
    /* transition dla efektu hover (opcjonalnie) */
    transition: filter 0.3s ease, background-color 0.3s ease;
}

/* Wyśrodkowanie napisu wewnątrz przycisku */
.kategoria-przycisk span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    font-weight: 600;
    z-index: 2;
    text-transform: uppercase;
    text-align: center;
}

/* ===== INDYWIDUALNE STYLE DLA KAŻDEJ KATEGORII ===== */

/* 1. Trenerzy – na razie czarne tło */
.kategoria-trenerzy {
    background-color: #000000;
}

/* 2. Oferta – na razie czarne tło */
.kategoria-oferta {
    background-color: #000000;
}

/* 3. Obozy – tło: wskazane zdjęcie; przyciemnione przez brightness */
.kategoria-obozy {
    background-image: url('https://bwtrening.com/wp-content/uploads/2025/06/IMG_2342-rotated.jpg');
    background-size: cover;
    background-position: center;
    filter: brightness(40%);
}

/* 4. Nasze ubrania – na razie czarne tło */
.kategoria-ubrania {
    background-color: #000000;
}

/* ===== EFEKT HOVER (opcjonalnie) ===== */
.kategoria-przycisk:hover {
    filter: brightness(60%); /* lekko rozjaśnia przyciemnione tło */
}

/* ===== RESPONSYWNOŚĆ ===== */
@media (max-width: 992px) {
    .kategoria-przycisk {
        width: 48%;  /* dwa przyciski obok siebie */
    }
}

@media (max-width: 600px) {
    .kategoria-przycisk {
        width: 100%; /* jeden przycisk na całą szerokość */
    }
}

.container-kategorie {
    max-width: 100%;
    padding: 0;
    margin: 120px;
    display: flex;
}

.kategoria-przycisk {
    width: 24%;
    margin: 0;
}

.kategoria-przycisk {
    height: 120px;
}

.kategoria-obozy span {
    color: #ffffff;
}
.kategoria-obozy span {
    color: #ffffff !important;
}
.kategoria-obozy {
    filter: none; /* usuwa wszelkie filtry, które mogą przyciemniać tekst */
}

.kategoria-obozy span {
    color: #ffffff !important;
    z-index: 2; /* upewnia się, że napis jest nad wszelkimi nakładkami */
}

.kategoria-obozy {
    position: relative;
    background-image: url('https://bwtrening.com/wp-content/uploads/2025/06/IMG_2342-rotated.jpg');
    background-size: cover;
    background-position: center;
}

.kategoria-obozy::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.kategoria-obozy span {
    position: relative;
    z-index: 2;
    color: #ffffff;
}

.kategoria-obozy span {
    position: relative;
    z-index: 2;
    color: #ffffff;
    /* Przesunięcie napisu: 10px w górę i 10px w lewo */
    top: 48px;
    left: 160px;
}





.kategoria-obozy {
    background-position: 10% 90%; /* 30% to środek w osi X, 80% przesunięte w dół w osi Y (dostosuj według potrzeby) */
}
.kategoria-obozy::before {
    background-color: rgba(0, 0, 0, 0.7);
}






.kategoria-oferta {
    background-image: url('https://bwtrening.com/wp-content/uploads/2025/06/Zrzut-ekranu-2025-06-01-200956.png');
    background-size: cover;
    background-position: center;
    /* opcjonalnie przyciemnienie: */
    filter: brightness(40%);
}

.kategoria-oferta span {
    color: #ffffff;
}
.kategoria-oferta:hover {
    filter: brightness(60%) !important;
}
a.kategoria-oferta > span {
    color: #ffffff !important;
}

.kategoria-ubrania {
    background-image: url('https://bwtrening.com/wp-content/uploads/2025/06/Zrzut-ekranu-2025-06-02-202309.png');
    background-size: cover;
    background-position: center;
    filter: brightness(40%);
}

.kategoria-ubrania span {
    color: #ffffff !important;
}

.kategoria-trenerzy {
    background-image: url('https://bwtrening.com/wp-content/uploads/2025/06/obraz_2025-06-02_204238517.png');
    background-size: cover;
    background-position: center;
    filter: brightness(40%);
}

.kategoria-trenerzy span {
    color: #ffffff !important;
}

.kategoria-trenerzy {
    background-size: 175%;
    background-position: center;
    filter: brightness(40%);
}

.kategoria-trenerzy {
    background-position: center 55%;
}

.kategoria-trenerzy:hover,
.kategoria-ubrania:hover {
    filter: brightness(60%) !important;
}

.kategoria-trenerzy span,
.kategoria-oferta span,
.kategoria-ubrania span {
    color: #ffffff !important;
}

/* Usuń wszelkie filtry nakładane bezpośrednio na przyciski: */
.kategoria-trenerzy,
.kategoria-oferta,
.kategoria-ubrania {
    filter: none !important;
    position: relative;
}

/* Dodaj półprzezroczystą warstwę pod tekstem za pomocą pseudo-elementu */
.kategoria-trenerzy::before,
.kategoria-oferta::before,
.kategoria-ubrania::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5); /* 50% czerni */
    z-index: 1;
}

/* Tekst (span) nad overlay’em i w kolorze białym */
.kategoria-trenerzy span,
.kategoria-oferta span,
.kategoria-ubrania span {
    position: relative;
    z-index: 2;
    color: #ffffff !important;
}

.kategoria-trenerzy span,
.kategoria-oferta span,
.kategoria-ubrania span {
    position: relative;
    top: 48px;   /* przesunięcie 10px w górę */
    left: 150px;  /* przesunięcie 10px w lewo */
}











/* ===== SEKCJA SLIDERA ===== */
#simple-slider {
  width: 100%;
  overflow: hidden;
  margin-bottom: 40px;
}

.slider-container {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.slides {
  display: flex;
  width: 300%;
  transition: transform 0.5s ease-in-out;
  transform: translateX(0);
}

.slide {
  width: 100%;
  flex-shrink: 0;
}

.slide img {
  width: 100%;
  display: block;
  object-fit: cover;
  height: 450px; /* wysokość slidera */
}

/* ===== STRZAŁKI NAWIGACYJNE ===== */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0,0,0,0.5);
  color: #ffffff;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 50%;
  font-size: 1.5rem;
  z-index: 10;
}

.arrow.prev {
  left: 20px;
}

.arrow.next {
  right: 20px;
}

/* ===== KROPKI (indikatory) ===== */
.dot-container {
  position: absolute;
  bottom: 15px;
  width: 100%;
  text-align: center;
  z-index: 10;
}

.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 5px;
  background-color: rgba(255,255,255,0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.dot.active {
  background-color: #ffffff;
}

/* ===== RESPONSYWNOŚĆ ===== */
@media (max-width: 768px) {
  .slide img {
    height: 300px;
  }
  .arrow {
    padding: 8px 12px;
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .slide img {
    height: 200px;
  }
  .arrow {
    padding: 6px 10px;
    font-size: 1rem;
  }
  .dot {
    width: 10px;
    height: 10px;
    margin: 0 3px;
  }
}






.content-container,
#simple-slider {
  width: 100%;
  padding: 0;
  margin: 0;
}

/* Usuń padding/marginesy z głównego kontenera, by slider był pełnej szerokości */
.content-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#simple-slider {
  margin-top: 0 !important;
}

/* Usuń wszelkie pionowe odstępy nad i pod sliderem */



/* 2) Usuń odstęp nad samym sliderem */
#simple-slider {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 3) Jeśli sekcja #simple-slider ma domyślne padding w pliku motywu, wyzeruj go */
#simple-slider > .slider-container {
  margin: 0 !important;
  padding: 0 !important;
}








/* CSS: ustaw strzałki w dolnych rogach pod obrazem, kropki w środku */
#simple-slider {
  width: 100%;
}

.slider-container {
  overflow: hidden;
}

.slides {
  display: flex;
  width: 300%;
  transition: transform 0.5s ease-in-out;
}

.slide {
  width: 100%;
  flex-shrink: 0;
}

.slide img {
  width: 100%;
  display: block;
  object-fit: cover;
  height: 450px;
}

.slider-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  width: 100%;
  max-width: 1200px; /* dostosuj do szerokości slidera */
  margin-left: auto;
  margin-right: auto;
}

.arrow {
  background: none;
  border: none;
  font-size: 2rem;
  color: #000;
  cursor: pointer;
}

.dot-container {
  display: flex;
  gap: 10px;
}

.dot {
  width: 40px;
  height: 4px;
  background-color: #ddd;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.dot.active {
  background-color: #00c7ff;
}

/* responsywność */
@media (max-width: 768px) {
  .arrow { font-size: 1.5rem; }
  .dot { width: 30px; height: 3px; }
}





/* 1. Usuń wszelkie absolute/position: overlay z .slider-nav */
.slider-nav {
  position: relative; /* pozwala, by pozycjonować w normalnym flow */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;     /* trochę odstępu od samego obrazka */
  width: 100%;
  max-width: 1200px;    /* dopasuj do szerokości slidera */
  margin-left: auto;
  margin-right: auto;
  z-index: 2;           /* niżej niż obrazek, ale wyżej niż tło */
}

/* 2. Upewnij się, że slider-container nie ma paddingu ani pozycji, która nakrywa slider-nav */
.slider-container {
  position: relative;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  width: 100%;
}

/* 3. Jeśli w CSS gdzieś były reguły typu `.slider-nav { position: absolute; top: ... }`, usuń je lub nadpisz: */
.slider-nav {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
}

/* 4. Strzałki i kropki – tylko styl wizualny, nie pozycjonowanie */
.arrow {
  background: none;
  border: none;
  font-size: 2rem;
  color: #000;
  cursor: pointer;
}

.dot-container {
  display: flex;
  gap: 10px;
}

.dot {
  width: 40px;
  height: 4px;
  background-color: #ddd;
  border-radius: 2px;
  cursor: pointer;
}

.dot.active {
  background-color: #00c7ff;
}




#simple-slider {
  margin-bottom: 40px; /* zwiększa odstęp pod głównym zdjęciem */
}



/* Zmniejsz rozmiar i nadaj strzałkom okrągły, półprzezroczysty wygląd */
.slider-nav .arrow {
  font-size: 1.5rem;               /* mniejszy rozmiar ikony */
  width: 40px;                     /* ustalona szerokość przycisku */
  height: 40px;                    /* ustalona wysokość przycisku */
  background-color: rgba(0, 0, 0, 0.5); /* półprzezroczyste tło */
  border-radius: 50%;              /* okrągły kształt */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;                  /* biały kolor ikony */
  border: none;                    /* usuń domyślną obwódkę */
  cursor: pointer;
  margin: 0;                       /* usuń dodatkowe marginesy */
}

/* Opcjonalnie: dodaj niewielki odstęp od kropki, żeby nie nachodziły na siebie */
.slider-nav .arrow.prev {
  margin-right: 1px;
}

.slider-nav .arrow.next {
  margin-left: 1px;
}


/* Dodaj odstęp pod obrazkiem, żeby strzałki były w całości widoczne */
.slider-nav {
  margin-top: 20px; /* zwiększ wartość według potrzeby (np. 20px, 30px) */
}
/* Rozciągnięcie kontenera slidera w dół, aby strzałki były w pełni widoczne */
.slider-container {
  padding-bottom: 40px; /* dodaje przestrzeń pod obrazem – dostosuj wartość według potrzeb */
  overflow: visible;    /* pozwala strzałkom wykraczać poza obszar */
}















/* Tylko na stronie głównej (klasa .home w <body>) */
body.home #simple-slider {
  margin-top: -40px !important; /* spróbuj 80px lub dostosuj liczbę, aż slider znajdzie się tuż pod menu */
}

/* Powiększenie obrazu w pionie (osi Y) za pomocą wysokości */
#simple-slider .slide img {
  height: 110%;
  width: auto;               /* automatycznie zachowuje proporcje */
  object-fit: cover;
  object-position: center;   /* wyśrodkowanie powiększonego obrazu */
}

/* Upewnij się, że kontenery przycinają nadmiar */
#simple-slider .slide,
#simple-slider .slider-container {
  overflow: hidden;
}












/* 1. Wypchnij samą sekcję slidera na pełną szerokość widoku */
#simple-slider {
  position: relative;
  width: 100vw;           /* pełna szerokość ekranu */
  left: 50%;              /* przesuń punkt odniesienia w prawo o połowę szerokości rodzica */
  margin-left: -50vw;     /* wycofaj w lewo o połowę szerokości widoku */
  overflow: hidden;
}

/* 2. Upewnij się, że wewnętrzne kontenery nie ograniczają szerokości */
#simple-slider .slider-container,
#simple-slider .slides,
#simple-slider .slide {
  width: 100vw;           /* każdy element rozciągnięty na pełen viewport width */
  margin: 0;
  padding: 0;
}

/* 3. Dopasuj sam obraz, by wypełniał cały kontener */
#simple-slider .slide img {
  width: 100vw;           /* rozciąga obraz na 100% szerokości widoku */
  height: 700px;
  display: block;
  object-fit: cover;
}

/* 1. Upewnij się, że strzałki i kropki są w normalnym flow, tuż pod obrazkiem */
.slider-nav {
  display: flex;
  justify-content: space-between;   /* lewa strzałka przy lewej krawędzi, prawa przy prawej */
  align-items: center;
  width: 100%;
  max-width: 1200px;                /* dostosuj do faktycznej szerokości slidera */
  margin: 20px auto 0;              /* 20px odstępu od obrazka, wyśrodkowanie */
  padding: 0;
}

/* 2. Strzałki: prosty czarny kształt bez tła, wyśrodkowane wertykalnie w .slider-nav */
.slider-nav .arrow {
  background: none;
  border: none;
  font-size: 2rem;                  /* rozmiar ikony */
  color: #000;                      /* czarne strzałki */
  cursor: pointer;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 3. Kropki: trzy paski wyrównane poziomo, pośrodku .slider-nav */
.slider-nav .dot-container {
  display: flex;
  gap: 10px;
}

.slider-nav .dot {
  width: 40px;
  height: 4px;
  background-color: #ddd;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.slider-nav .dot.active {
  background-color: #00c7ff;
}

/* 4. Usuń wszelkie wcześniejsze absolute/position z .arrow i .dot-container, 
      by nic nie zachodziło na obrazek */
.slider-nav .arrow,
.slider-nav .dot-container {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
}

/* 5. Przycięcie nadmiaru w slider-container, by nic się nie nakładało */
#simple-slider .slider-container {
  overflow: hidden;
}

/* 6. Jeśli strzałki są wciąż trochę za wysoko, popraw marginalną odległość od obrazka */
.slider-nav {
  margin-top: 30px; /* zwiększ lub zmniejsz według potrzeby */
}

/* Wycentrowanie samych kropek w poziomie */
.slider-nav .dot-container {
  display: inline-flex;        /* traktujemy .dot-container jak element liniowy wewnątrz bloku */
  justify-content: center;     /* wyśrodkuj kropki wewnątrz .dot-container */
  position: relative;          
  left: 50%;                   /* przesuwamy punkt odniesienia na środek rodzica */
  transform: translateX(-50%); /* faktyczne wyśrodkowanie dot-container */
}

/* Upewnij się, że rodzic (.slider-nav) rozciąga się na 100% szerokości */
.slider-nav {
  width: 100%;
  position: relative; 
}

/* Powiększenie długości kresek */
.slider-nav .dot {
  width: 100px;  /* zwiększ długość do 60px (dostosuj według potrzeb) */
  height: 5px;  /* możesz też zwiększyć wysokość, np. do 6px */
  border-radius: 3px; /* dostosuj zaokrąglenie, jeśli zmieniasz wysokość */
}








/* Pogrubienie ikon strzałek i zwiększenie ich widoczności */
.slider-nav .arrow {
  font-size: 4rem;       /* większy rozmiar ikony */
  font-weight: bold;       /* pogrubienie (w zależności od fontu może być bardziej wyraźne) */
  color: #000;             /* upewnij się, że kolor jest kontrastowy */
  padding: 0;              /* usuń dodatkowe wewnętrzne odstępy */
  line-height: 1;          /* poprawne wyrównanie wysokości linii */
}

/* Jeśli strzałki są pozycjonowane absolutnie: 
   zmniejsz ich odległość od krawędzi */
.slider-nav .arrow.prev {
  left: -300px !important;   /* np. 10px od lewej krawędzi */
}

.slider-nav .arrow.next {
  right: -300px !important;  /* np. 10px od prawej krawędzi */
}

/* Jeśli strzałki są ułożone w flexie z paddingiem, 
   usuń lub zmniejsz boczny padding na kontenerze: */
.slider-nav {
  padding-left: -50px !important;
  padding-right: -60px !important;
}

/* Przykładowo ustaw tło sekcji z przyciskami na nieco ciemniejszy odcień beżu */
#kategorie {
  background-color: #f5eee0; /* zmień ten kod kolor na próbny i dostosuj w DevTools */
}

/* Przesunięcie sekcji z przyciskami nieznacznie w górę */
#kategorie {
  margin-top: -190px; /* zmień wartość (np. -20px, -40px), aż uzyskasz pożądaną pozycję */
}

/* Przesuń tylko same „kreski” (dot-container) w górę, nie ruszając strzałek */
.slider-nav .dot-container {
  margin-top: -25px; /* np. -10px, dostosuj tę wartość według uznania */
}








































/* ===== Cała sekcja karuzeli ===== */
#trainer-carousel {
  position: relative;
  width: 100%;
  max-width: 1200px;      /* maksymalna szerokość kontenera na desktopie */
  margin: 40px auto 60px; /* odstęp od góry 40px, od dołu 60px */
  display: flex;
  align-items: center;
}

/* ===== Strzałki nawigacyjne ===== */
#trainer-carousel .nav-arrow {
  background: none;
  border: none;
  font-size: 2rem;         /* wielkość strzałki */
  font-weight: bold;       /* pogrubienie dla lepszej widoczności */
  color: #000;             /* czarne strzałki */
  cursor: pointer;
  z-index: 2;
  padding: 0;
  line-height: 1;
}

/* Dodatkowe przesunięcie strzałek od krawędzi ekranu */
#trainer-carousel .nav-arrow.prev {
  margin-right: 10px;  /* odsunięcie lewej strzałki od lewej krawędzi karuzeli */
}

#trainer-carousel .nav-arrow.next {
  margin-left: 10px;   /* odsunięcie prawej strzałki od prawej krawędzi karuzeli */
}

/* ===== Wrapper wokół listy slajdów (ukrywa nadmiar poza widokiem) ===== */
.trainer-slides-wrapper {
  overflow: hidden;
  flex: 1;               /* zajmuje całą pozostałą szerokość między strzałkami */
}

/* ===== Lista slajdów w linii (flex-row) ===== */
.trainer-slides {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform 0.5s ease; /* płynna animacja przesunięcia w Os X */
}

/* ===== Pojedynczy slajd ===== */
/* Domyślnie: najmniejsza skala (50% wielkości aktywnego) */
.trainer-slide {
  flex: 0 0 8.333%;      /* 8.333% z 1200px ≈ 100px szerokości */
  margin: 0 10px;        /* odstęp 10px na boki między slajdami */
  text-align: center;
  opacity: 0.6;          /* 60% przezroczystości */
  transform: scale(0.5); /* skalowany do 50% (100×150) */
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* ===== Slajd sąsiadujący ze środkiem (75% skali) ===== */
.trainer-slide.adjacent {
  flex: 0 0 12.5%;       /* 12.5% z 1200px ≈ 150px szerokości */
  opacity: 0.8;          /* 80% przezroczystości */
  transform: scale(0.75);/* skalowany do 75% (150×225) */
}

/* ===== Slajd aktywny (środkowy) ===== */
.trainer-slide.active {
  flex: 0 0 16.666%;     /* 16.666% z 1200px ≈ 200px szerokości */
  opacity: 1;            /* pełna ostrość */
  transform: scale(1);   /* 100% (200×300) */
}

/* ===== Obraz w slajdzie – zawsze wypełnia całą szerokość elementu ===== */
.trainer-slide img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;    /* lekko zaokrąglone rogi */
}

/* ===== Podpisy pod zdjęciem ===== */
.trainer-info {
  margin-top: 8px;
}

.trainer-slide .trainer-name {
  font-size: 0.9rem;         /* 14px */
  margin: 4px 0 0;
  line-height: 1.2;
}

.trainer-slide .trainer-role {
  font-size: 0.8rem;         /* 12px */
  color: #333;
  margin: 2px 0 0;
  line-height: 1.2;
}

/* Jeśli slajd ma klasę .active, powiększamy czcionki podpisów */
.trainer-slide.active .trainer-name {
  font-size: 1.1rem;         /* 17px */
}

.trainer-slide.active .trainer-role {
  font-size: 1rem;           /* 16px */
}

/* ===== Przykład responsywny (opcjonalnie później dopracujesz pod tablet+mobilne) ===== */
@media (max-width: 768px) {
  /* Przy węższych ekranach pokaż tylko 3 slajdy: aktywne (+1 sąsiedni z każdej strony) */
  .trainer-slide {
    flex: 0 0 20%;           /* ok. 20% z 100% szerokości (czyli ok. 60–80px w zależności od ekranu) */
    transform: scale(0.5);
  }
  .trainer-slide.adjacent {
    flex: 0 0 25%;
    transform: scale(0.75);
  }
  .trainer-slide.active {
    flex: 0 0 30%;
    transform: scale(1);
  }
}






/* 1. Zmniejszamy skalowanie skrajnych slajdów, żeby były takie same jak sąsiadujące */

/* Zamiast:
.trainer-slide {
  flex: 0 0 8.333%;  transform: scale(0.5);
}
.trainer-slide.adjacent {
  flex: 0 0 12.5%;   transform: scale(0.75);
}
.trainer-slide.active {
  flex: 0 0 16.666%; transform: scale(1);
}
*/
/* Ustawiamy: wszystkie nieaktywne (w tym skrajne i sąsiadujące) po 75% skali */
.trainer-slide {
  flex: 0 0 12.5%;      /* 12.5% z kontenera → ok. 150px przy 1200px */
  transform: scale(0.75);
  opacity: 0.8;
}

/* Klasa .adjacent przestaje być potrzebna (można ją usunąć), ale jeśli zostawisz, upewnij się, że ma identyczne wartości co powyżej */
.trainer-slide.adjacent {
  flex: 0 0 12.5%;
  transform: scale(0.75);
  opacity: 0.8;
}

/* 2. Środkowe zdjęcie nadal w pełnej skali, ale zwiększymy mu proporcjonalnie szerokość kontenera */
.trainer-slide.active {
  flex: 0 0 16.666%;    /* 16.666% z kontenera → ok. 200px przy 1200px */
  transform: scale(1);
  opacity: 1;
}

/* 3. Powiększamy cały kontener karuzeli – np. zamiast 1200px, dajmy 1400px lub 1600px */
#trainer-carousel {
  max-width: 1400px;   /* zamiast 1200px, teraz 1400px – wszystkie wartości procentowe skalują się proporcjonalnie */
  margin: 40px auto 60px;
}

/* W razie potrzeby możesz zwiększyć jeszcze bardziej, np.: */
/*
#trainer-carousel {
  max-width: 1600px;
  margin: 40px auto 60px;
}
*/

/* Upewnij się, że wrapper i pozostałe pozostają bez zmian: */
.trainer-slides-wrapper {
  overflow: hidden;
  flex: 1;
}
.trainer-slides {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform 0.5s ease;
}

/* 4. Dostosowanie podpisów – jeśli chcesz, żeby pod środkowym tekst był jeszcze większy */
.trainer-slide.active .trainer-name {
  font-size: 1.2rem;   /* np. 1.2 zamiast 1.1 */
}
.trainer-slide.active .trainer-role {
  font-size: 1.05rem;  /* np. 1.05 zamiast 1 */
}

/* Powiększ cały kontener karuzeli do 1800px */
#trainer-carousel {
  max-width: 1800px;   /* wcześniej było 1400px, teraz 1800px */
}

/* Pozostałe reguły pozostają bez zmian – proporcje zachowają się automatycznie */

/* Zmniejszamy skrajne slajdy (bez klasy .adjacent lub .active) o około 70% skali */
.trainer-slide {
  flex: 0 0 12.5%;         /* ok. 12.5% z 1800px ≈ 225px szerokości */
  transform: scale(0.7);    /* skala 70% zamiast 75% */
  opacity: 0.6;
}

/* „Adjacent” pozostają w 75% skali */
.trainer-slide.adjacent {
  flex: 0 0 12.5%;         /* ok. 12.5% szerokości */
  transform: scale(0.75);   /* 75% skali */
  opacity: 0.8;
}

/* Aktywny środek niezmieniony */
.trainer-slide.active {
  flex: 0 0 16.666%;       /* ok. 16.666% szerokości */
  transform: scale(1);
  opacity: 1;
}



/* ==========================================
   1) WYŚRODKOWANIE CAŁEJ KARUZELI
   ========================================== */
#trainer-carousel {
  display: flex !important; 
  justify-content: center !important; /* wypoziomuj karuzelę względem środka strony */
  align-items: center !important;    /* wypoziomuj w pionie */
  width: 100% !important;             /* rozciągnij na całą możliwą szerokość kontenera */
  max-width: 1800px !important;       /* maksymalna szerokość, którą ustawiłeś wcześniej */
  margin: 0 auto !important;          /* wyśrodkuj #trainer-carousel w rodzicu */
  padding: 40px 0 !important;         /* opcjonalny odstęp od góry i dołu */
  box-sizing: border-box !important;  /* uwzględnia padding w szerokości */
}

/* ==========================================
   2) STRZAŁKI NAWIGACYJNE: niech nie rozciągają
      się na całą szerokość i trzymają równo
   ========================================== */
#trainer-carousel .nav-arrow {
  flex: 0 0 auto !important;   /* strzałkom nie pozwalamy się rozciągać */
  margin: 0 20px !important;   /* odstęp od wrappera slajdów (20px z lewej/prawej) */
  background: none !important; 
  border: none !important;
  font-size: 2rem !important;
  color: #000 !important;
  cursor: pointer !important;
}

/* ==========================================
   3) WRAPPER SLIDÓW: zlikwiduj wszelkie dodatkowe
      marginesy/padding i upewnij się, że istnieje
   ========================================== */
.trainer-slides-wrapper {
  flex: 0 0 auto !important;   /* wrapper nie będzie rozciągany */
  margin: 0 0 !important;      /* usuń/wyzeruj marginesy wrappera */
  padding: 0 !important;       /* usuń/wyzeruj padding wrappera */
  overflow: hidden !important; /* chowaj slajdy poza obrębem wrappera */
  box-sizing: border-box !important;
}

/* ==========================================
   4) LISTA SLIDÓW: wyczyść odstępy
   ========================================== */
.trainer-slides {
  display: flex !important;
  list-style: none !important;
  margin: 0 !important;   
  padding: 0 !important;
  transition: transform 0.5s ease !important;
}

/* ==========================================
   5) SKALOWANIE SLIDÓW:  
      - Skrajne: 70%  
      - Adjacent (tuż obok środka): 75%  
      - Active (środek): 100%
   ========================================== */
.trainer-slide {
  flex: 0 0 12.5% !important;       /* ok. 12.5% kontenera */
  transform: scale(0.7) !important; /* 70% skali */
  opacity: 0.6 !important;
  transition: transform 0.3s ease, opacity 0.3s ease !important;
}

.trainer-slide.adjacent {
  flex: 0 0 12.5% !important;       
  transform: scale(0.75) !important;/* 75% skali */
  opacity: 0.8 !important;
}

.trainer-slide.active {
  flex: 0 0 16.6666% !important;    /* ok. 16.666% kontenera */
  transform: scale(1) !important;   /* 100% skali */
  opacity: 1 !important;
}

/* ==========================================
   6) DODATKOWE: podpisy są pod slajdami –
      ewentualnie można zwiększyć font-size
      tylko w centralnym slajdzie
   ========================================== */
.trainer-slide .trainer-info {
  text-align: center;
  margin-top: 10px !important;
}

.trainer-slide.active .trainer-name {
  font-size: 1.2rem !important;  
  font-weight: bold !important;
}

.trainer-slide.active .trainer-role {
  font-size: 1rem !important;
  color: #333 !important;
}

/* ========================
   1) WYŁAM KONTENER KARUZELI
      NA PEŁNĄ SZEROKOŚĆ OKNA
   ======================== */
#trainer-carousel {
  /* Ustawiamy szerokość na 100vw (= cała szerokość widoku) */
  width: 100vw !important;
  /* Usuń max-width lub nadpisz, by nie było ograniczenia przez .content-container */
  max-width: none !important;
  /* Przesuń w lewo o połowę szerokości okna, aby faktycznie wypełnić całość */
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  /* — dalej klasyczne flexowe wyśrodkowanie wnętrza */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  /* Jeśli chcesz zachować odstępy od góry/dół, dostosuj padding-y */
  padding: 40px 0 !important;
  box-sizing: border-box !important;
}

/* ========================
   2) STRZAŁKI PO BOKACH KARUZELI
   ======================== */
/* Upewniamy się, że strzałki NIE rozciągają kontenera i leżą równo po bokach */
#trainer-carousel .nav-arrow {
  flex: 0 0 auto !important;
  margin: 0 20px !important;      /* odstęp od wrappera slajdów */
  background: none !important;
  border: none !important;
  font-size: 2rem !important;
  color: #000 !important;
  cursor: pointer !important;
}

/* ========================
   3) WRAPPER I LISTA SLIDÓW:
      Usuń wszelkie boczne marginesy/paddingi
   ======================== */
.trainer-slides-wrapper {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.trainer-slides {
  display: flex !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: transform 0.5s ease !important;
}

/* ========================
   4) SKALOWANIE SLIDÓW
   ======================== */
.trainer-slide {
  flex: 0 0 12.5% !important;       /* ok. 12.5% szerokości kontenera */
  transform: scale(0.7) !important;  /* 70% skali dla skrajnych */
  opacity: 0.6 !important;
  transition: transform 0.3s ease, opacity 0.3s ease !important;
}

.trainer-slide.adjacent {
  flex: 0 0 12.5% !important;      
  transform: scale(0.75) !important; /* 75% skali dla „adjacent” */
  opacity: 0.8 !important;
}

.trainer-slide.active {
  flex: 0 0 16.6666% !important;    /* ok. 16.666% szerokości kontenera */
  transform: scale(1) !important;    /* pełna skala dla środka */
  opacity: 1 !important;
}

/* ========================
   5) PODPISY POD ŚRODKOWYM
      Możesz dostosować wielkość czcionki
   ======================== */
.trainer-slide .trainer-info {
  text-align: center;
  margin-top: 10px !important;
}

.trainer-slide.active .trainer-name {
  font-size: 1.2rem !important;
  font-weight: bold !important;
}

.trainer-slide.active .trainer-role {
  font-size: 1rem !important;
  color: #333 !important;
}




/* 1. Wyśrodkowanie sekcji trainee-carousel względem osi X */
#trainer-carousel {
  display: flex;
  justify-content: center; /* poziome wyśrodkowanie zawartości */
  align-items: center;     /* opcjonalnie: pionowe wyśrodkowanie */
  width: 100%;             /* upewnij się, że sekcja zajmuje całą szerokość kontenera nadrzędnego */
  box-sizing: border-box;  /* zabezpiecza przed nieoczekiwanymi marginesami/paddingami */
  padding: 20px 0;         /* w razie potrzeby można dodać odstęp od góry/dół */
}

/* 2. Ograniczenie szerokości wrappera i wyśrodkowanie listy slajdów */
.trainer-slides-wrapper {
  width: 800px;            /* przykład stałej szerokości karuzeli; dobierz wartość do swoich grafik */
  max-width: 100%;         /* zapewnia responsywność */
  margin: 0 auto;          /* poziome wyśrodkowanie kontenera, jeśli #trainer-carousel nie używa flex */
  overflow: hidden;        /* ukrywa wystające slajdy, aby działała animacja przesuwania */
}

/* 3. Ustawienie listy slajdów jako flex, aby elementy wewnątrz były obok siebie */
.trainer-slides {
  display: flex;
  justify-content: center; /* jeżeli wciąż chcesz mieć slajdy wyrównane do środka wrappera */
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 4. Ustalenie szerokości każdego slajdu (li) – aby karuzela wiedziała, jak rozłożyć elementy */
.trainer-slide {
  flex: 0 0 160px;         /* każdy slajd zajmuje 160px szerokości (dopasuj do własnych zdjęć) */
  margin: 0 10px;          /* odstęp między slajdami */
  text-align: center;
}

/* 5. Wyśrodkowanie przycisków nawigacyjnych względem karuzeli */
#trainer-carousel .nav-arrow {
  background: transparent;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: #333;            /* dobierz kolor do designu */
}

/* Opcjonalnie: umiejscowienie strzałek po lewej i prawej stronie karuzeli */
#trainer-carousel .prev {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

#trainer-carousel .next {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

/* 6. (Jeśli potrzebne) Kontener nadrzędny, żeby elementy absolutne działały poprawnie */
#trainer-carousel {
  position: relative;
}



/* ---------- 1. Skalowanie całego kontenera karuzeli (opcjonalne) ---------- */
/* Uwaga: jeżeli zdecydujesz się tylko na skalowanie poszczególnych elementów, tę sekcję możesz pominąć. */
/* #trainer-carousel {
  transform: scale(1.2);
  transform-origin: center top;
} */

/* ---------- 2. Powiększenie wrappera (zamiast stałych 800px ustawiamy wartość ×1.2) ---------- */
.trainer-slides-wrapper {
  width: 960px;       /* 800px × 1.2 = 960px */
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

/* ---------- 3. Powiększenie każdego slajdu (li.trainer-slide) ---------- */
/* Zamiast flex: 0 0 160px; → 160px × 1.2 = 192px */
/* Margines boku z 10px → 10px × 1.2 = 12px */
.trainer-slide {
  flex: 0 0 192px;
  margin: 0 12px;
  text-align: center;
}

/* ---------- 4. Powiększenie obrazków wewnątrz slajdu ---------- */
/* Jeśli Twoje oryginalne grafiki mają np. 150×150, można zwiększyć tak: */
/* albo pozostawić max-width: 100%, żeby dostosowało się do wymiaru li.trainer-slide */
.trainer-slide img {
  width: 100%;          /* zajmuje całą szerokość slajdu (192px) */
  height: auto;
  display: block;
  border-radius: 8px;   /* jeśli chcesz zaokrąglone rogi – dobierz proporcjonalnie */
}

/* ---------- 5. Powiększenie nazw i ról trenerów (font-size ×1.2) ---------- */
.trainer-name {
  font-size: 1.2rem;    /* poprzednio np. 1rem → teraz 1.2rem */
  margin: 8px 0 4px;    /* np. oryginalnie było 8px, pozostawiamy lub dostosowujemy */
}

.trainer-role {
  font-size: 1rem;      /* poprzednio 0.9rem → teraz 1rem */
  color: #555;          /* kolor można zostawić bez zmian lub dobrać ponownie */
}

/* ---------- 6. Powiększenie przycisków nawigacyjnych (×1.2) ---------- */
#trainer-carousel .nav-arrow {
  font-size: 2.4rem;    /* zamiast 2rem → 2rem × 1.2 = 2.4rem */
  background: transparent;
  border: none;
  cursor: pointer;
  color: #333;
  z-index: 10;          /* upewnij się, że strzałki są nad slajdami */
}

/* ---------- 7. Dostosowanie pozycji strzałek (±10px × 1.2 = ±12px) ---------- */
#trainer-carousel .prev {
  position: absolute;
  left: 12px;           /* było 10px, teraz 12px */
  top: 50%;
  transform: translateY(-50%);
}

#trainer-carousel .next {
  position: absolute;
  right: 12px;          /* było 10px, teraz 12px */
  top: 50%;
  transform: translateY(-50%);
}

/* ---------- 8. Upewnienie się, że kontener ma position: relative (jeżeli go nie ma) ---------- */
#trainer-carousel {
  position: relative;
  padding: 24px 0;      /* zamiast padding: 20px 0 (20px × 1.2 = 24px) */
  box-sizing: border-box;
}

/* 1. Kontener karuzeli – zostaje bezpośrednio wyśrodkowany, ale zwiększamy padding */
#trainer-carousel {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 30px 0;    /* było 20px × 1,5 = 30px */
}

/* 2. Wrapper slajdów – szerokość ×1,5 */
.trainer-slides-wrapper {
  width: 1200px;      /* było 800px × 1,5 = 1200px */
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

/* 3. Lista slajdów jako flex, wyrównanie do środka (bez zmian w zasadzie) */
.trainer-slides {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 4. Każdy slajd (li) – szerokość i marginesy ×1,5 */
.trainer-slide {
  flex: 0 0 240px;    /* było 160px × 1,5 = 240px */
  margin: 0 15px;     /* było 10px × 1,5 = 15px */
  text-align: center;
}

/* 5. Obrazki wewnątrz slajdu – dostosowanie do nowej szerokości slajdu */
.trainer-slide img {
  width: 100%;         /* zajmuje całą szerokość 240px */
  height: auto;
  display: block;
  border-radius: 8px;  /* pozostaw lub skoryguj według uznania */
}

/* 6. Teksty trenerów – font-size ×1,5 */
.trainer-name {
  font-size: 1.5rem;   /* było 1rem × 1,5 = 1.5rem */
  margin: 12px 0 6px;  /* oryginalnie 8px 0 4px → teraz 12px 0 6px */
}

.trainer-role {
  font-size: 1.35rem;  /* było 0.9rem × 1,5 = 1.35rem */
  color: #555;
}

/* 7. Przyciski nawigacyjne (strzałki) – font-size ×1,5 */
#trainer-carousel .nav-arrow {
  font-size: 3rem;     /* było 2rem × 1,5 = 3rem */
  background: transparent;
  border: none;
  cursor: pointer;
  color: #333;
  z-index: 10;
}

/* 8. Pozycjonowanie strzałek względem bordera karuzeli – odległość ×1,5 */
#trainer-carousel .prev {
  position: absolute;
  left: 15px;          /* było 10px × 1,5 = 15px */
  top: 50%;
  transform: translateY(-50%);
}

#trainer-carousel .next {
  position: absolute;
  right: 15px;         /* było 10px × 1,5 = 15px */
  top: 50%;
  transform: translateY(-50%);
}





/* ============================================================
   WYMUSZONE POMNIEJSZENIE KARUZELI TRENERÓW (z ×2,5 → ×1,5)
   Wartości bazowe: wrapper:800px, slajd:160px, margin:10px,
   font-size nazwy:1rem, font-size roli:0.9rem, padding:20px,
   rozmiar strzałek:2rem, offset strzałek:10px.
   ============================================================ */

/* 1. BOX-SIZING – dla pewności, że wszystkie wymiary się zgadzają */
#trainer-carousel,
#trainer-carousel *,
#trainer-carousel *::before,
#trainer-carousel *::after {
  box-sizing: border-box !important;
}

/* 2. KONTEKST KARUZELI – wyśrodkowanie i padding (×1,5) */
#trainer-carousel {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  padding: 30px 0 !important; /* 20px × 1,5 = 30px */
}

/* 3. WRAPPER SLIDE’ÓW – usuwamy sztywne ograniczenia */
#trainer-carousel .trainer-slides-wrapper {
  width: auto !important;
  max-width: none !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

/* 4. LISTA SLIDE’ÓW – zawsze flex i wyśrodkowana */
#trainer-carousel .trainer-slides {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* 5. POJEDYNCZY SLIDE – szerokość i marginesy ×1,5 */
#trainer-carousel .trainer-slide {
  flex: 0 0 auto !important;
  width: 240px !important;    /* 160px × 1,5 = 240px */
  margin: 0 15px !important;   /* 10px × 1,5 = 15px */
  text-align: center !important;
}

/* 6. GRAFIKA W SLIDE’ACH – dopasowana do szerokości slajdu */
#trainer-carousel .trainer-slide img {
  display: block !important;
  width: 100% !important;      /* wypełnia całą szerokość 240px */
  max-width: none !important;   /* usuwa możliwe ograniczenia */
  height: auto !important;
  border-radius: 8px !important; /* pozostaw lub zmień wedle uznania */
}

/* 7. NAZWA TRENERA – font-size ×1,5 */
#trainer-carousel .trainer-name {
  font-size: 1.5rem !important;  /* 1rem × 1,5 = 1,5rem */
  margin: 12px 0 6px !important; /* 8px 0 4px → 12px 0 6px */
  line-height: 1.2 !important;
}

/* 8. ROLA TRENERA – font-size ×1,5 */
#trainer-carousel .trainer-role {
  font-size: 1.35rem !important; /* 0,9rem × 1,5 = 1,35rem */
  color: #555 !important;
  margin: 0 !important;
}

/* 9. STRZAŁKI NAWIGACYJNE – font-size ×1,5 */
#trainer-carousel .nav-arrow {
  font-size: 3rem !important;    /* 2rem × 1,5 = 3rem */
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  color: #333 !important;
  z-index: 10 !important;
}

/* 10. POZYCJONOWANIE STRZAŁEK – offset ×1,5 */
#trainer-carousel .prev {
  position: absolute !important;
  left: 15px !important;         /* 10px × 1,5 = 15px */
  top: 50% !important;
  transform: translateY(-50%) !important;
}

#trainer-carousel .next {
  position: absolute !important;
  right: 15px !important;        /* 10px × 1,5 = 15px */
  top: 50% !important;
  transform: translateY(-50%) !important;
}





/* ==============================================================
   POWIĘKSZENIE CAŁEJ KARUZELI TRENERÓW ZA POMOCĄ transform: scale
   — współczynnik ×1,5 (150 % oryginalnego rozmiaru)
   ============================================================== */

/* 1. Upewniamy się, że wrapper z całą zawartością karuzeli 
      zostanie skalowany poprawnie */
#trainer-carousel .trainer-slides-wrapper {
  transform: scale(1.5) !important;        /* powiększa do 150 % */
  transform-origin: center top !important; /* punkt, względem którego skala działa */
  width: auto !important;
  max-width: none !important;
  overflow: visible !important;
}

/* 2. Dostosowanie paddingu kontenera karuzeli (opcjonalne) */
#trainer-carousel {
  padding-top: 30px !important;   /* 20px × 1,5 = 30px */
  padding-bottom: 30px !important;
}

/* 3. (Opcjonalne) Jeżeli strzałki są za małe lub źle pozycjonowane,
      można je skalować samodzielnie lub zmienić offsety: */
#trainer-carousel .nav-arrow {
  /* Przykład: zwiększenie czcionki strzałek do 3rem (z 2rem bazowo) */
  font-size: 3rem !important;    /* 2rem × 1,5 = 3rem */
}

/* 4. (Opcjonalnie) Jeśli strzałki wymagają przesunięcia względem boków: */
#trainer-carousel .prev {
  left: 15px !important;  /* 10px × 1,5 = 15px */
}
#trainer-carousel .next {
  right: 15px !important; /* 10px × 1,5 = 15px */
}

#trainer-carousel .trainer-slides-wrapper {
  padding-top: 40px !important;
  padding-bottom: 150px !important;
}

#trainer-carousel .trainer-info {
  background: none !important;
}














/* CSS: wklej na koniec style.css lub w Dodatkowy CSS */
.offer-heading {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  margin: 0 0 24px;
  color: #004080;
}

.offer-tabs {
  display: flex;
  background: #e6f4ff;
  border-radius: 40px;
  padding: 4px;
  list-style: none;
  margin: 0 0 16px;
}
.offer-tab {
  flex: 1;
  text-align: center;
  padding: 8px 16px;
  margin: 0 4px;
  cursor: pointer;
  border-radius: 36px;
  font-weight: 500;
  color: #004080;
  transition: background-color .3s, box-shadow .3s;
}
.offer-tab.active {
  background: #007bff;
  color: #fff;
  box-shadow: 0 4px 8px rgba(0,123,255,.4);
}

.offer-content .offer-panel {
  display: none;
}
.offer-content .offer-panel.active {
  display: block;
}





/* Usuń lub zmniejsz odstęp pod przyciskami w sekcji “kategorie” */
#kategorie {
  margin-bottom: -10px !important;  /* ustaw tu wartość, jaka Ci odpowiada */
  padding-bottom: 0 !important;
}

/* Jeżeli kolejna sekcja ma własny odstęp od góry, zmniejsz go: */
#kategorie + section {
  margin-top: -2px !important;     /* zmniejsza przerwę przed następną sekcją */
}

/* Usuń odstęp pod przyciskami w sekcji „kategorie” */
#kategorie,
#kategorie .container-kategorie {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#kategorie {
  margin-bottom: 60px !important; /* ustaw tutaj dowolną wartość w px */
}


.offer-heading {
  color: #000 !important;
}

.offer-tabs {
  margin-top: 65px !important; /* zwiększ lub zmniejsz wartość, aby przesunąć w dół */
}


/* Wyśrodkowanie niebieskiego paska zakładek */
.offer-tabs {
  display: flex !important;
  justify-content: center !important; /* środek w poziomie */
  width: fit-content !important;       /* szerokość dopasowana do zawartości */
  margin: 0 auto !important;           /* automatyczne marginesy poziome */
}




/* Zapewnia, że wszystkie zakładki mieszczą się w jednym wierszu */
.offer-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;    /* zabrania zawijania w nowy wiersz */
  justify-content: center !important;
  width: 600px !important;         /* dostosuj szerokość do swoich potrzeb */
  margin: 0 auto !important;
  white-space: nowrap !important;  /* dodatkowo zabezpiecza przed zawijaniem tekstu */
}

/* Upewnij się też, że pojedyncze zakładki nie łamią się na dwie linijki */
.offer-tab {
  flex: 0 0 auto !important;       /* każdy przycisk zachowuje swoją naturalną szerokość */
  white-space: nowrap !important;
}





/* Równomierne powiększenie całej sekcji zakładek */
.offer-tabs {
  transform: scale(1.2) !important;         /* powiększenie o 20% */
  transform-origin: center center !important;
}

.offer-tab.active {
  font-weight: bold !important;
}

.offer-tab {
  font-weight: bold !important;
}




.offer-tabs {
  margin-top: 36px !important; /* zwiększ wartość, aby powiększyć odstęp */
}

.offer-tabs {
  background-color: #e0d5c0 !important; /* ciemniejszy beż */
}

.offer-tab:not(.active) {
  color: #000 !important;
}

.offer-tab.active {
  background-color: #000 !important;
  color: #fff !important;
}

.offer-tab.active {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 1) !important;
}


































/* kontener trzech bloków */
.offer-cards {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 24px;
}

/* pojedynczy card */
.offer-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  width: 240px;
  padding: 16px;
  box-sizing: border-box;
  text-align: left;
}

/* nagłówek z etykietą promocji */
.offer-card h3 {
  font-size: 1.2rem;
  margin: 0 0 8px;
  position: relative;
}
.offer-card .promo {
  display: inline-block;
  background: #b9802f;
  color: #fff;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 12px;
  position: absolute;
  top: 0;
  right: 0;
}

/* opis pod tytułem */
.offer-card .description {
  font-size: 0.9rem;
  margin: 0 0 16px;
  color: #555;
}

/* wiersz z ceną */
.price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.offer-card .price {
  font-size: 1.5rem;
  font-weight: 700;
  color: #000;
}
.offer-card .price-old {
  font-size: 1rem;
  text-decoration: line-through;
  color: #999;
}

/* przycisk CTA */
.offer-card .cta {
  display: block;
  text-align: center;
  margin-top: 16px;
  padding: 10px 0;
  background: #000;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}
.offer-card .cta:hover {
  background: #333;
}

/* Powiększenie kart treningów */
.offer-cards .offer-card {
  width: 300px !important;        /* zamiast 240px */
  padding: 24px !important;       /* zamiast 16px */
}

/* Większy odstęp między kartami */
.offer-cards {
  gap: 32px !important;           /* zamiast 24px */
}

/* Większe tytuły */
.offer-card h3 {
  font-size: 1.5rem !important;   /* zamiast 1.2rem */
  margin-bottom: 12px !important; /* zamiast 8px */
}

/* Większy opis */
.offer-card .description {
  font-size: 1rem !important;     /* zamiast 0.9rem */
  margin-bottom: 20px !important; /* zamiast 16px */
}

/* Większe ceny */
.offer-card .price {
  font-size: 2rem !important;     /* zamiast 1.5rem */
}
.offer-card .price-old {
  font-size: 1.2rem !important;   /* zamiast 1rem */
}

/* Większy przycisk */
.offer-card .cta {
  padding: 14px 0 !important;     /* zamiast 10px */
  font-size: 1rem !important;     /* zamiast domyślnego */
  border-radius: 10px !important; /* zamiast 8px */
}



















@media (max-width: 767px) {
  #kategorie .container-kategorie {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important; /* odstęp między przyciskami */
    padding: 0 !important;
  }
  #kategorie .kategoria-przycisk {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
}

/* Globalny przycisk pod całą sekcją ofert */
.offer-global-button {
  text-align: center;
  margin-top: 16px; /* dostosuj odstęp względem kontenera */
}

.btn-offer {
  display: inline-block;
  background-color: #000;
  color: #fff;
  padding: 12px 28px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: background-color .3s;
}

.btn-offer:hover {
  background-color: #333;
}

/* Wyśrodkowanie tytułów w ofertowych blokach */
.offer-card h3 {
  text-align: center !important;
}

/* Wyśrodkowanie opisów w ofertowych blokach */
.offer-card .description {
  text-align: center !important;
}

/* Pogrubienie opisów w ofertowych blokach */
.offer-card .description {
  font-weight: 600 !important;
}

/* Lekkie zmniejszenie rozmiaru ceny w blokach ofert */
.offer-card .price {
  font-size: 1.6rem !important; /* zmniejsz wartość według potrzeb, np. 1.4rem lub 1.8rem */
}


























/* Biały kontener na stronie Nasi trenerzy */
.nasi-trenerzy .content-wrapper {
  background-color: #fff !important;
  max-width: 1400px;           /* lub inna szerokość wg projektu */
  margin: 0 auto;              /* wyśrodkowanie */
  padding: 40px 20px;          /* wewnętrzny odstęp */
  border-radius: 16px;         /* zaokrąglone rogi */
  box-shadow: 0 4px 16px rgba(0,0,0,0.1); /* subtelny cień */
  box-sizing: border-box;
}

/* Responsywność */
@media (max-width: 768px) {
  .nasi-trenerzy .content-wrapper {
    padding: 24px 12px;
    border-radius: 8px;
    margin: 0 10px;
  }
}

/* Styl tytułu wewnątrz białego kontenera */
.nasi-trenerzy .container-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 24px;
  color: #000;  /* czarny kolor jak w reszcie sekcji */
}

/* Nawigacja sekcji trenerów */
.trainer-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 24px 0;
}

.trainer-nav__btn {
  background: #0055a5;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s;
}

.trainer-nav__btn:hover,
.trainer-nav__btn.active {
  background: #003f7f;
}

/* Przyciski w nawigacji trenerów – stonowana szarość zamiast niebieskiego */
.trainer-nav__btn {
  background-color: #f0f0f0 !important;  /* lekko ciemniejszy od białego kontenera */
  color: #333 !important;               /* ciemny odcień tekstu */
}

.trainer-nav__btn:hover,
.trainer-nav__btn.active {
  background-color: #d8d8d8 !important; /* jeszcze ciemniejszy po najechaniu/aktywacji */
  color: #000 !important;
}

/* Pogrubienie tekstu w przyciskach nawigacji trenerów */
.trainer-nav__btn {
  font-weight: 1000 !important;
}

/* Styl dla bloku z opisem trenerów */
.trainer-description {
  max-width: 800px;            /* ogranicz szerokość linii */
  margin: 0 auto 32px;         /* wyśrodkowanie + odstęp poniżej */
  padding: 0 16px;             /* padding po bokach na urządzeniach mobilnych */
  text-align: center;          /* centrowanie tekstu */
  font-size: 1rem;             /* rozmiar czcionki */
  line-height: 1.6;            /* czytelny odstęp między wierszami */
  color: #444;                 /* ciemnoszary tekst */
}

/* Jeśli chcesz wyróżnić nagłówek wewnątrz opisu */
.trainer-description p:first-child {
  font-weight: 600;
  margin-bottom: 8px;
}

/* Wyśrodkowanie nagłówka sekcji „Trenerzy piłkarscy” */
#piłkarscy h2 {
  text-align: center !important;
}

#piłkarscy h2 {
  font-size: 2rem !important;   /* taki sam rozmiar jak "Nasi Trenerzy" */
  font-weight: 700 !important;
  text-align: center !important;
}














/* grid kart trenerów */
.trainer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

/* każda karta */
.trainer-card {
  position: relative;
  overflow: hidden;
  width: 240px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}
.trainer-card img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.3s;
}
/* opcjonalny zoom obrazka na hover */
.trainer-card:hover img {
  transform: scale(1.05);
}

/* nakładka ze statystykami – początkowo schowana poniżej */
.trainer-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  /* wysokość tyle, ile potrzeba na statystyki */
  transform: translateY(100%);
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 16px;
  box-sizing: border-box;
  transition: transform 0.4s ease-out;
}

/* na hover wysuwamy nakładkę do góry */
.trainer-card:hover .trainer-overlay {
  transform: translateY(0);
}

/* styl nagłówka i opisu wewnątrz nakładki */
.trainer-overlay h3 {
  margin: 0 0 4px;
  font-size: 1.2rem;
}
.trainer-overlay p {
  margin: 0 0 12px;
  font-size: 0.9rem;
  opacity: 0.8;
}

/* lista statystyk */
.trainer-overlay .stats {
  list-style: none;
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}
.trainer-overlay .stats li {
  text-align: center;
  font-size: 0.85rem;
}
.trainer-overlay .stats li strong {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 2px;
}

/* Wymuszamy kwadratowy kształt zdjęć trenerów */
.trainer-card img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;  /* zapewnia proporcje 1:1 */
  object-fit: cover !important;     /* przycina obraz do kwadratu, zachowując proporcje */
  display: block !important;
}

/* Usuń zaokrąglenia krawędzi kart i obrazów trenerów */
.trainer-card,
.trainer-card img {
  border-radius: 0 !important;
}
/* Powiększenie kart trenerów do rozmiarów z wzorca Barcelona */
.trainer-grid {
  gap: 32px !important;             /* większy odstęp między kartami */
}

.trainer-card {
  width: 320px !important;          /* szerokość karty */
  height: 480px !important;         /* wysokość karty, by obraz był większy */
}

.trainer-card img {
  height: 100% !important;          /* obraz wypełnia całą wysokość karty */
  object-fit: cover !important;
}

.trainer-overlay {
  padding: 24px !important;         /* większy padding wewnątrz nakładki */
}

.trainer-overlay h3 {
  font-size: 1.8rem !important;     /* większa czcionka tytułu */
}

.trainer-overlay p {
  font-size: 1rem !important;       /* większa czcionka stanowiska */
}

.trainer-overlay .stats li strong {
  font-size: 1.4rem !important;     /* większe wartości statystyk */
}
/* Wymuszenie kwadratu i większego rozmiaru głównego zdjęcia w sekcji “Trenerzy piłkarscy” */
#piłkarscy img {
  display: block !important;
  width: 300px !important;     /* ustaw szerokość kwadratu */
  height: 300px !important;    /* wysokość równa szerokości – tworzy kwadrat */
  object-fit: cover !important; /* przycinanie, zachowuje proporcje */
  margin: 0 auto !important;    /* wyśrodkowanie obrazka */
}

/* Spraw, by obraz w sekcji “Trenerzy piłkarscy” skalował się do kwadratu, 
   ale nie wychodził poza rodzica */
#piłkarscy img {
  display: block !important;
  width: 100% !important;           /* zajmuje całą dostępną szerokość sekcji */
  max-width: 600px !important;      /* ogranicza się do 600px szerokości */
  aspect-ratio: 1 / 1 !important;   /* proporcje 1:1 */
  object-fit: cover !important;     /* wypełnia cały kwadrat, obcinając nadmiar */
  margin: 0 auto !important;        /* wyśrodkowanie */
}

/* Powiększenie zdjęcia o 20% bez zmiany proporcji */
#piłkarscy img {
  display: block !important;
  width: 120% !important;        /* zdjęcie zajmuje teraz 80% szerokości kontenera */
  max-width: none !important;
  height: auto !important;      /* wysokość dostosuje się automatycznie */
  margin: 0 auto !important;    /* wyśrodkuj w poziomie */
}

/* Rozszerzenie „pola” ze zdjęciem i opisem o 20% */
#piłkarscy .trainer-card {
  transform: scale(1.2) !important;
  transform-origin: top center !important;
  /* upewnij się, że rodzic ma overflow: visible */
}

#piłkarscy .trainer-card img {
  width: 100% !important;  /* wypełnia skalowany kontener */
  height: auto !important;
}
/* Powiększenie szerokości karty trenera w sekcji „Trenerzy piłkarscy” */
#piłkarscy .trainer-card {
  width: 350px !important;    /* zamiast dotychczasowej szerokości */
}

/* Upewnij się, że nakładka również wypełnia całą szerokość karty */
#piłkarscy .trainer-overlay {
  width: 100% !important;
}




/* Usuń narzuconą wysokość karty, aby była dokładnie taka jak obraz */
.trainer-card {
  height: auto !important;
  max-height: none !important;
}

/* Teraz nakładka będzie wysuwać się dokładnie do dolnej krawędzi obrazka,
   bo karta nie ma już dodatkowego, białego pola poniżej */
.trainer-overlay {
  height: 50% !important;            /* pokrywa dolną połowę obrazka */
  bottom: 0 !important;
  transform: translateY(100%) !important;
  transition: transform .4s ease-out !important;
}
.trainer-card:hover .trainer-overlay {
  transform: translateY(50%) !important;
}
































































.site-footer .footer-container {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 24px !important;
  align-items: start !important;
}

/* Opcjonalnie: wyrównanie każdej kolumny do środka */
.site-footer .footer-col {
  text-align: center;
}

/* Zmniejszenie rozmiaru logo w stopce */
.site-footer .footer-logo img {
  max-width: 120px !important;  /* ustaw docelową szerokość logo */
  height: auto !important;
}

/* Dodanie odstępu nad tytułami kolumn w stopce */
.site-footer .footer-col h4 {
  margin-top: 30px !important;  /* ustaw tu wartość, żeby tytuły były niżej */
}

/* Ujednolicenie rozmiaru nagłówka “OBSERWUJ NAS” z innymi kolumnami */
.site-footer .footer-socials h4 {
  font-size: 1rem !important;    /* taka sama wielkość jak w pozostałych kolumnach */
  font-weight: 700 !important;   /* pogrubienie zgodne z innymi nagłówkami */
}

/* Przenieś ikonki pod nagłówek “OBSERWUJ NAS” */
.site-footer .footer-socials {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Dodaj odstęp między nagłówkiem a ikonami */
.site-footer .footer-socials h4 {
  margin-bottom: 12px !important;
}

/* Rozmieść ikonki w jednej linii pod nagłówkiem */
.site-footer .footer-socials a {
  margin: 0 8px !important;
}

/* Podnieś nagłówek “OBSERWUJ NAS” wyżej względem ikon */
.site-footer .footer-socials h4 {
  margin-top: 22px !important;  /* zmień wartość na mniejszą lub większą według potrzeby */
}

/* Zwiększenie odstępu i poszerzenie kolumn w stopce */
.site-footer .footer-container {
  display: grid !important;
  /* pierwsza i ostatnia kolumna węższe (logo i social), środkowe szersze */
  grid-template-columns: 150px repeat(3, 1fr) 150px !important;
  gap: 270px !important;  /* większy odstęp między wszystkimi kolumnami */
}

/* Przesunięcie wszystkich kolumn poza logiem w lewo o 20px */
.site-footer .footer-container > .footer-col:not(.footer-logo) {
  margin-left: 30px !important;
}

/* Przesunięcie samego nagłówka "OBSERWUJ NAS" w lewo */
.site-footer .footer-socials h4 {
  margin-left: -100px !important; /* zmień wartość na dowolną, np. -10px, -30px */
}

/* Przesunięcie kolumny ZAKUPY (druga kolumna) w lewo */
.site-footer .footer-container > .footer-col:nth-child(2) {
  margin-left: -60px !important; /* dostosuj wartość według potrzeby */
}

/* Przesunięcie obrazka (logo) w stopce nieco w górę */
.site-footer .footer-logo img {
  margin-top: -20px !important; /* zmień wartość na odpowiednią dla Twojego layoutu */
}

/* Wyrównanie tekstu w kolumnie “ZAKUPY” do lewej strony */
.site-footer .footer-container > .footer-col:nth-child(2) {
  text-align: left !important;
}

.site-footer .footer-container > .footer-col:nth-child(2) ul,
.site-footer .footer-container > .footer-col:nth-child(2) ul li,
.site-footer .footer-container > .footer-col:nth-child(2) ul li a {
  text-align: left !important;
}

/* Wyrównanie tekstu do lewej w kolumnach POMOC (3) i INFORMACJE (4) */
.site-footer .footer-container > .footer-col:nth-child(3),
.site-footer .footer-container > .footer-col:nth-child(4) {
  text-align: left !important;
}

.site-footer .footer-container > .footer-col:nth-child(3) ul,
.site-footer .footer-container > .footer-col:nth-child(4) ul,
.site-footer .footer-container > .footer-col:nth-child(3) ul li,
.site-footer .footer-container > .footer-col:nth-child(4) ul li,
.site-footer .footer-container > .footer-col:nth-child(3) ul li a,
.site-footer .footer-container > .footer-col:nth-child(4) ul li a {
  text-align: left !important;
}

/* Przesunięcie kolumny POMOC (3) w lewo o 60px bez wpływu na układ innych kolumn */
.site-footer .footer-container > .footer-col:nth-child(3) {
  transform: translateX(-120px) !important;
}

/* Przesunięcie kolumny INFORMACJE (4) w lewo o 60px bez wpływu na inne kolumny */
.site-footer .footer-container > .footer-col:nth-child(4) {
  transform: translateX(-160px) !important;
}

/* Wyrównanie zawartości kolumny “OBSERWUJ NAS” do lewej */
.site-footer .footer-socials {
  text-align: left !important;
}

/* Upewnij się, że ikony nie są wyśrodkowane */
.site-footer .footer-socials a {
  display: inline-block !important;
  margin: 0 8px 8px 0 !important; /* odstęp poziomy i pionowy */
}

/* Przesunięcie kolumny OBSERWUJ NAS (5) w lewo o 60px bez wpływu na inne kolumny */
.site-footer .footer-container > .footer-col:nth-child(5) {
  transform: translateX(-80px) !important;
}

/* Ustawienie ikon „Obserwuj nas” w jednym wierszu */
.site-footer .footer-socials {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important; /* odstęp między ikonami */
}

.footer-socials h4 {
  margin-bottom: 10px;
  text-align: left; /* lub center – zależnie od Twojej koncepcji */
}

.footer-socials .social-icons {
  display: flex;
  flex-direction: row;
  gap: 12px; /* odstęp między ikonami */
  flex-wrap: wrap; /* ikony się zawiną, jeśli zabraknie miejsca */
  justify-content: flex-start; /* ikony wyrównane do lewej */
}

.footer-socials .social-icons a {
  font-size: 20px;
  color: #fff; /* lub inny kolor ikon */
  text-decoration: none;
  transition: transform 0.2s ease;
}

.footer-socials .social-icons a:hover {
  transform: scale(1.15);
}

/* Wymuszenie ułożenia ikon pod nagłówkiem w kolumnie */
.footer-socials .social-icons {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important; /* lub center, jeśli chcesz centrować */
  gap: 12px !important;               /* odstęp między ikonami */
}

/* Upewnij się, że same linki są elementami blokowymi */
.footer-socials .social-icons a {
  display: block !important;
  margin: 0 !important;
}

/* Bardzo specyficzne selektory + !important, żeby przebić poprzednie reguły */
footer.site-footer .footer-socials {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  margin-left: 0 !important;  /* usuń ewentualne sztuczne przesunięcia */
}

footer.site-footer .footer-socials h4 {
  display: block !important;
  margin: 0 0 0.5rem !important;
}

footer.site-footer .footer-socials .social-icons {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0.5rem !important;
}

/* 1. Zapobiega łamaniu tytułu */
.footer-socials h4 {
  white-space: nowrap;
}

/* 2. Nie pozwala kolumnie się kurczyć poniżej szerokości treści */
footer.site-footer .footer-socials {
  flex: 0 0 auto;          /* stałe minimum, nie kurczy się */
  min-width: max-content;   /* szerokość zależna od najdłuższego wiersza */
}

/* 3. Ikonki zawsze w jednej linii */
.footer-socials .social-icons {
  display: flex !important;
  flex-wrap: nowrap !important;
}

/* 1. Kontener ikon zawsze w rzędzie */
footer.site-footer .footer-socials .social-icons {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0.5rem !important;      /* odstęp między ikonami */
  align-items: center !important;
  margin-top: 0.5rem !important;
}

/* 2. Każda ikona jako inline-flex, by zachować wymiary i centrowanie */
footer.site-footer .footer-socials .social-icons a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;          /* skaluj wedle potrzeb */
  line-height: 1;
  width: auto;
}

/* Usunięcie kropek z list w stopce */
footer.site-footer .footer-col ul {
  list-style: none;
}

/* Kolor linków w stopce taki sam jak kolor nagłówków */
footer.site-footer .footer-col ul li a {
  color: inherit;      /* dziedziczy kolor z .footer-col, czyli tak jak h4 */
  text-decoration: none;
}

/* Jeśli chcesz ustawić konkretny kolor, np. biały (#fff): */
footer.site-footer .footer-col ul li a {
  color: #f5eee0;
  text-decoration: none;
}

/* Ustawienie koloru nagłówków kolumn na biały */
footer.site-footer .footer-col h4 {
  color: #ffffff;
}

/* Tytuł kolumny „Obserwuj nas” również na biało */
footer.site-footer .footer-socials h4 {
  color: #ffffff;
}

/* Wymuszone pogrubienie tytułów kolumn */
footer.site-footer .footer-col h4,
footer.site-footer .footer-socials h4 {
  font-weight: 1000 !important;
}

/* Dodanie odstępu pod nagłówkami trzech pierwszych kolumn */
footer.site-footer .footer-col:not(.footer-socials) h4 {
  margin-bottom: 1.4rem;
}

/* Odstęp między pozycjami list w stopce */
footer.site-footer .footer-col ul li {
  margin-bottom: 0.8rem;
}

/* Usuń margines spod ostatniego elementu w każdej liście (opcjonalnie) */
footer.site-footer .footer-col ul li:last-child {
  margin-bottom: 0;
}

/* Wyśrodkowanie i jednolinijkowość bloku z prawami autorskimi */
footer.site-footer .footer-copy {
  display: block !important;
  white-space: nowrap !important;   /* nie łamie tekstu */
  width: max-content !important;    /* dopasowuje szerokość do zawartości */
  margin: 0 auto !important;        /* centruje poziomo */
}

footer.site-footer .footer-copy {
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  white-space: nowrap !important;  /* jedna linijka */
}

/* Przesunięcie bloku praw autorskich w prawo */
footer.site-footer .footer-copy {
  position: relative !important;
  left: 970px !important; /* zmień wartość na pożądaną odległość */
}

/* Redukcja przestrzeni nad sekcją praw autorskich */
footer.site-footer .footer-copy {
  margin-top: -13rem !important; /* zmniejsz z np. 2rem do 0.5rem */
  padding-top: 0rem !important;     /* usuń ewentualne paddingi */
}

/* Usuń wyłącznie pionową przestrzeń pod stopką bez zmiany innych odstępów */

/* 1. Zlikwiduj dolny padding całego footer */
footer.site-footer {
  padding-bottom: 0 !important;
}

/* 2. Zlikwiduj margines dolny pod blokiem praw autorskich */
footer.site-footer .footer-copy {
  margin-bottom: -25px !important;
}

/* 1. Przygotuj site-footer jako kontener dla absolutnie pozycjonowanego .footer-copy */
footer.site-footer {
  position: relative !important;
  padding-bottom: 0 !important;    /* usuń wszelkie wewnętrzne odstępy na dole */
}

/* 2. Usuń też padding z kontenera kolumn (jeśli istnieje) */
footer.site-footer .footer-container {
  padding-bottom: 0 !important;
}

/* 3. Pozycjonuj absolutnie prawie na samym dole stopki */
footer.site-footer .footer-copy {
  position: absolute !important;
  bottom: 0 !important;             
  left: 50% !important;             
  transform: translateX(-50%) !important;
  margin: 0 !important;              /* usuń marginy */
  white-space: nowrap !important;    /* jedna linijka */
}

/* Dodaje przestrzeń pod prawami autorskimi */
footer.site-footer {
  padding-bottom: 80px !important;  /* dostosuj wysokość */
}

/* Delikatne przesunięcie bloku praw autorskich w prawo */
footer.site-footer .footer-copy {
  left: calc(50% + 30px) !important; /* przesuwa o 10px w prawo względem środka */
  transform: translateX(-50%) !important; /* nadal centruje względem nowej pozycji */
}

/* 1. Upewnij się, że kolumna „Obserwuj nas” ma pozycjonowanie względne */
footer.site-footer .footer-socials {
  position: relative;
}

/* 2. Przesunięcie całej kolumny w dół i w lewo */
footer.site-footer .footer-socials {
  top: 22px;    /* przesuwa w dół o 20px – dostosuj wartość wedle potrzeby */
  left: -120px;  /* przesuwa w lewo o 30px – dostosuj wartość wedle potrzeby */
}

/* Zwiększenie rozmiaru ikonek, przy zachowaniu jednej linii */

/* Kontener ikon w jednej linii */
footer.site-footer .footer-socials .social-icons {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0.75rem; /* ewentualnie zwiększ odstęp między ikonami */
}

/* Każda ikonka: większy font-size i wyrównanie */
footer.site-footer .footer-socials .social-icons a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem !important;  /* zwiększ rozmiar, np. 2rem, 2.25rem */
  width: auto;
  height: auto;
  line-height: 1;
}

/* Zwiększenie odstępów między ikonkami w kolumnie “Obserwuj nas” */
footer.site-footer .footer-socials .social-icons {
  gap: 1.5rem !important; /* dostosuj wartość (np. 2rem) w zależności od potrzeb */
}

/* Przesunięcie logotypu nie wpływające na resztę stopki */
footer.site-footer .footer-logo {
  position: relative;
  left: 20px; /* dostosuj wartość w prawo, np. 10px, 15px itp. */
}



/* Responsywne ułożenie stopki na urządzeniach mobilnych */
@media (max-width: 768px) {
  /* Zmiana układu kolumn na pionowy */
  footer.site-footer .footer-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Każda kolumna (oraz sekcja social) na pełną szerokość */
  footer.site-footer .footer-container > div {
    width: 100% !important;
    margin-bottom: 1.5rem !important; /* odstęp między sekcjami */
  }

  /* Usuń dodatkowe przesunięcia w mobile */
  footer.site-footer .footer-logo,
  footer.site-footer .footer-socials {
    left: 0 !important;
    top: 0 !important;
    position: static !important;
    transform: none !important;
  }

  /* Wyśrodkuj zawartość, jeśli potrzebne */
  footer.site-footer .footer-col,
  footer.site-footer .footer-socials {
    text-align: center !important;
  }

  /* Ewentualnie zmniejsz odstęp pod listami w mobile */
  footer.site-footer .footer-col ul li {
    margin-bottom: 0.75rem !important;
  }
}





/* reset poprzednich responsywnych zmian */
@media (max-width: 768px) {
  footer.site-footer,
  footer.site-footer .footer-container,
  footer.site-footer .footer-logo {
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
  }
  /* logo rozciąga się na całą szerokość i jest wyrównane do lewej */
  footer.site-footer .footer-logo img {
    display: block;
    width: 100%;        /* zajmuje całą szerokość kontenera */
    max-width: 200px;    /* lub inna pożądana maksymalna szerokość */
    height: auto;
    margin: 0;           /* usunięcie automatycznych marżeń */
  }
}

/* Na urządzeniach mobilnych (max-width: 768px): wyrównanie kolumny „Obserwuj nas” i ikon do lewej krawędzi ekranu */
@media (max-width: 768px) {
  /* Resetowanie wszelkich przesunięć z poprzednich reguł */
  footer.site-footer .footer-socials {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  /* Kontener ikon: zaczyna się przy lewej krawędzi i nie ma zbędnych wcięć */
  footer.site-footer .footer-socials .social-icons {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 1rem !important;    /* dostosuj odstęp między ikonami, jeśli potrzeba */
    margin: 0.5rem 0 0 0 !important;
    padding: 0 !important;
  }

  /* Upewnij się, że ikony nie mają marginesów wypychających je w prawo */
  footer.site-footer .footer-socials .social-icons a {
    margin: 0 !important;
    padding: 0 !important;
  }
}



/* Na urządzeniach mobilnych: cztery przyciski pionowo pod sobą */
@media (max-width: 768px) {
  /* Kontener przycisków układany w kolumnie */
  #kategorie .container-kategorie {
    display: flex;
    flex-direction: column;
    gap: 1rem;              /* odstęp między przyciskami */
  }

  /* Każdy przycisk jako blok na pełną szerokość */
  #kategorie .container-kategorie .kategoria-przycisk {
    display: block;
    width: 100%;
  }
}

/* Na urządzeniach mobilnych: przyciski szerokie na niemal cały ekran */
@media (max-width: 768px) {
  #kategorie .container-kategorie .kategoria-przycisk {
    width: 90% !important;       /* zajmują 90% szerokości ekranu */
    max-width: 400px;            /* opcjonalne ograniczenie maksymalnej szerokości */
    margin: 0 auto 1rem auto;    /* wyśrodkowanie i odstęp pod przyciskiem */
  }
}














/* Wymuszenie większej szerokości kart w sekcji “Oferta” za pomocą flexbox */
.offer-cards {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 2rem !important; /* większy odstęp między kartami */
}

/* Każda karta ma stałą, większą szerokość */
.offer-card {
  flex: 0 0 500px !important;  /* dostosuj szerokość karty, np. 500px, 550px */
  max-width: 420px !important;
  width: 100% !important;
}

/* Kontener obrazu o proporcjach 16:9 z ukrytą nadmiarową częścią */
.offer-card-image {
  width: 100%;
  aspect-ratio: 16/9;      /* wymusza proporcje */
  overflow: hidden;        /* ucina część obrazu wykraczającą poza ramę */
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

/* Zdjęcie wypełnia całą ramkę, przycina się estetycznie */
.offer-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* przycinanie i wypełnianie proporcji */
  display: block;
}

/* Zmniejszenie przestrzeni nad obrazkiem w karcie oferty */
#offer .offer-card .offer-card-image {
  margin-top: -1.1rem !important;  /* dopasuj wartość do górnego paddingu .offer-card */
}

/* 2) Dodanie ujemnych marginesów po bokach obrazka */
#offer .offer-card .offer-card-image {
  margin-left: -1.1rem !important;
  margin-right: -1.1rem !important;
}

/* Wyrównanie obrazka do pełnej szerokości karty – tylko 2 linie */
#offer .offer-card .offer-card-image {
  margin: 0 -1rem !important;                /* podciąga kontener obrazka o 1rem z każdej strony */
  width: calc(100% + 2rem) !important;       /* poszerza go o 2rem (= 2×1rem) */
}

/* Przywrócenie marginesu nad obrazkiem bez wpływu na boczne wyrównanie */
#offer .offer-card .offer-card-image {
  margin-top: -1.1rem !important;    /* podciąga obrazek o 1.1rem do góry */
}

/* Zaokrąglenie dolnych rogów obrazka */
#offer .offer-card .offer-card-image img {
  border-bottom-left-radius: 1rem !important;
  border-bottom-right-radius: 1rem !important;
}

/* Dodanie przestrzeni między obrazkiem a tytułem karty */
#offer .offer-card .offer-card-image {
  margin-bottom: 1.6rem !important; /* dostosuj wartość do własnych potrzeb */
}

/* Zmniejszenie przestrzeni między tytułem a opisem w kartach oferty */
#offer .offer-card h3 {
  margin-bottom: 0.25rem !important;  /* dostosuj wartość */
}

#offer .offer-card .description {
  margin-top: 0 !important;
}



























/* Wymuszenie układu kolumnowego w sekcji karuzeli trenerów */
#trainer-carousel {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Nagłówek zajmuje całą szerokość i jest wyśrodkowany */
#trainer-carousel .offer-heading {
  width: 100% !important;
  text-align: center !important;
  margin: 0 0 1.5rem !important; /* odstęp pod tytułem */
}

/* Pozostałe elementy karuzeli – zachowują się normalnie */
#trainer-carousel .nav-arrow,
#trainer-carousel .trainer-slides-wrapper {
  width: 100% !important;
}


/* Zmniejszenie odstępu między nagłówkiem a karuzelą trenerów */
#trainer-carousel .offer-heading {
  margin-bottom: 0.1rem !important; /* zmniejsz wartość do pożądanego */
}

#trainer-carousel .trainer-slides-wrapper {
  margin-top: 0.5rem !important; /* ewentualna korekta od góry wrappera */
}

/* Ujednolicenie marginesów nad i pod nagłówkiem trenerów */
#trainer-carousel .offer-heading {
  margin: 2rem 0 !important;  /* taka sama wartość jak w sekcji „Sprawdź naszą ofertę!” */
}

/* 1) Usuń margines pod nagłówkiem */
#trainer-carousel > h2.offer-heading {
  margin-bottom: 0.5rem !important;   /* zmniejsza odstęp pod tytułem */
}

/* 2) Usuń margines nad wrapperem slajdów */
#trainer-carousel > .trainer-slides-wrapper {
  margin-top: 0 !important;           /* zeruje odstęp nad karuzelą */
}

/* Jeśli nadal jest za duża przerwa, spróbuj ujemnej korekty na wrapperze */
#trainer-carousel > .trainer-slides-wrapper {
  margin-top: -0.5rem !important;     /* przykład ujemnego marginesu */
}

/* Dalsza redukcja odstępów między nagłówkiem a karuzelą trenerów */
#trainer-carousel > h2.offer-heading {
  margin-bottom: -1.2rem !important;
}

#trainer-carousel > .trainer-slides-wrapper {
  margin-top: 0 !important;
}

/* Stylizacja dodatkowego opisu (.offer-extra) bez ozdobnej linii */
.offer-card .offer-extra {
  font-size: 0.95rem;            /* nieco mniejszy tekst */
  font-weight: 400;              /* normalna waga czcionki */
  font-style: italic;            /* kursywa dla wyróżnienia */
  color: #333;                   /* ciemnoszary kolor dla subtelności */
  margin: 0.75rem 0 1.25rem;     /* odstęp nad i pod opisem */
  line-height: 1.5;              /* lepsza czytelność wielowierszowego tekstu */
  padding: 0;                    /* usuwa dodatkowe wcięcia */
  border: none;                  /* usuwa wcześniej dodaną linię */
}






footer {
  padding: 40px 20px;
  background-color: #222;
  color: #fff;
  overflow-x: hidden;
}

.footer-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-column {
  flex: 1 1 200px;
  min-width: 0;
}


footer,
footer * {
  box-sizing: border-box;
  max-width: 100%;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Ogólny kontener stopki */
.site-footer {
  background-color: #111;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Eliminuje problem z szerokością na mniejszych ekranach */
.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Kolumny stopki */
.footer-col {
  flex: 1 1 180px;
  min-width: 160px;
  max-width: 100%;
  box-sizing: border-box;
}

/* Logo – ogranicz maksymalną szerokość */
.footer-logo img {
  max-width: 160px;
  height: auto;
  display: block;
}

/* Nagłówki */
.footer-col h4 {
  font-size: 1rem;
  margin-bottom: 12px;
}

/* Lista linków */
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin-bottom: 8px;
}

.footer-col ul li a {
  color: #ccc;
  text-decoration: none;
}

.footer-col ul li a:hover {
  color: #fff;
}

/* Ikony społecznościowe */
.footer-socials .social-icons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-socials .social-icons a {
  font-size: 1.2rem;
  color: #ccc;
  transition: color 0.2s;
}

.footer-socials .social-icons a:hover {
  color: #fff;
}

/* Pasek praw autorskich */
.footer-copy {
  text-align: center;
  margin-top: 40px;
  font-size: 0.85rem;
  color: #aaa;
}

/* Zabezpieczenie przed wyciekiem po prawej */
.site-footer *,
.site-footer *::before,
.site-footer *::after {
  box-sizing: border-box;
  max-width: 100%;
  overflow-wrap: break-word;
}

.polkolonie-title {
  font-size: 2rem;           /* duży, wyraźny nagłówek */
  font-weight: bold;
  color: #000;               /* czysty kontrast z beżowym tłem */
  text-align: center;
  margin-bottom: 24px;       /* odstęp przed grafikami */
  text-transform: uppercase; /* opcjonalnie wersaliki dla podkreślenia */
  letter-spacing: 1px;       /* drobne rozluźnienie liter */
}

.polkolonie-wrapper {
  display: flex;            /* flex-box ułoży .polkolonie-box obok siebie */
  justify-content: center;  /* wycentruje je w poziomie; możesz też użyć space-between */
  gap: 20px;                /* odstęp między obrazkami */
  flex-wrap: nowrap;        /* zapobiegnie zawijaniu obrazków do kolejnego wiersza */
}

.polkolonie-wrapper {
  display: flex;
  flex-wrap: wrap;          /* pozwala zawijać przy wąskich ekranach */
  justify-content: center;
  gap: 20px;
}

.polkolonie-box {
  position: relative;
  aspect-ratio: 1 / 1;      /* zawsze kwadrat */
  width: calc((100% - 20px) / 2); /* każdy zajmuje połowę szer. kontenera minus gap */
  max-width: 400px;         /* opcjonalne ograniczenie, by nie były zbyt wielkie */
  min-width: 200px;         /* opcjonalne ograniczenie, by nie kurczyły się poniżej czytelności */
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.polkolonie-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dla naprawdę wąskich ekranów – przełożenie w jeden słupek */
@media (max-width: 600px) {
  .polkolonie-box {
    width: 100%;
    max-width: none;
    min-width: 0;
  }
}


.polkolonie-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.polkolonie-box {
  position: relative;
  width: calc((100% - 20px) / 2);
  max-width: 400px;
  aspect-ratio: 1/1;         /* gwarantuje kwadrat */
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.polkolonie-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* tutaj magiczne pozycjonowanie przycisku */
.polkolonie-btn {
  position: absolute;
  bottom: 5%;                /* 5% wysokości boxa od dolnej krawędzi */
  left: 50%;
  transform: translateX(-50%);
  padding: 0.75em 1.5em;      /* względne do font-size */
  background-color: #000;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.polkolonie-btn:hover {
  background-color: #333;
}

/* na bardzo wąskich ekranach jednokolumnowo */
@media (max-width: 600px) {
  .polkolonie-box {
    width: 100%;
    max-width: none;
  }
}

.polkolonie-btn {
  position: absolute;
  bottom: 5%;        /* 5% wysokości boxa od dolnej krawędzi */
  right: 5%;         /* 5% szerokości boxa od prawej krawędzi */
  left: auto;        /* wyłączamy wcześniejsze przesunięcie od lewej */
  transform: none;   /* usuwamy centrowanie */
  padding: 0.75em 1.5em;
  background-color: #000;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.polkolonie-btn:hover {
  background-color: #333;
}

.polkolonie-btn {
  position: absolute;
  /* zamiast procentów używamy stałej wartości em/rem/px, 
     dzięki czemu położenie będzie spójne na wszystkich ekranach */
  bottom: 2rem;        /* odległość od dolnej krawędzi boxa */
  right: 5%;           /* możesz zostawić procent od prawej lub zastąpić np. right: 2rem; */
  left: auto;          /* wyłączamy wcześniejsze przesunięcie od lewej */
  transform: none;     /* usuwamy centrowanie */
  padding: 0.75em 1.5em;
  background-color: #000;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.polkolonie-btn:hover {
  background-color: #333;
}

.polkolonie-btn:hover {
  /* Powiększenie o 5% */
  transform: scale(1.1);
  /* Dodatkowy cień pod przyciskiem dla efektu “unoszenia” */
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Zmiana koloru tła pierwszego przycisku na beż #e7ddca */
.polkolonie-wrapper .polkolonie-box:first-child .polkolonie-btn {
  background-color: #e7ddca;
  color: #000; /* czarny tekst dla kontrastu */
}

/* Hover: delikatnie przyciemnij tło */
.polkolonie-wrapper .polkolonie-box:first-child .polkolonie-btn:hover {
  background-color: #d4cab8;
}

.polkolonie-btn {
  /* Pogrubienie napisu w przyciskach */
  font-weight: 700 !important;
}

/* Zwiększenie odstępu między blokami półkolonii */
.polkolonie-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 70px;    /* zamiast 20px dajemy 40px odstępu */
}

/* CSS */
/* Kontener akordeonu */
.accordion {
  max-width: 600px;
  margin: 0 auto;
  font-family: sans-serif;
}

/* Styl przycisku nagłówka */
.accordion-header {
  width: 100%;
  background: #0056b3;
  color: #fff;
  border: none;
  padding: 0.75rem 1.25rem;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  position: relative;
  outline: none;
  transition: background 0.3s;
}
.accordion-header:hover {
  background: #004499;
}

/* Strzałki */
.arrow {
  display: inline-block;
  width: 8px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transition: transform 0.3s;
}
.arrow.left  { transform: rotate(135deg); }
.arrow.right { transform: rotate(-45deg); }

/* Sekcja rozwijana */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: #f8f9fa;
  padding: 0 1.25rem;
}

/* Aktywna pozycja */
.accordion-item.active .accordion-content {
  max-height: 300px; /* dostosuj do liczby terminów */
  padding: 0.75rem 1.25rem;
}

/* Obrót strzałek przy rozwinięciu */
.accordion-item.active .arrow.left  { transform: rotate(-45deg); }
.accordion-item.active .arrow.right { transform: rotate(135deg); }

/* Style przycisków terminów */
.term-btn {
  display: block;
  width: 100%;
  margin: 0.5rem 0;
  padding: 0.5rem;
  background: #fff;
  border: 1px solid #0056b3;
  border-radius: 0.375rem;
  text-align: center;
  color: #0056b3;
  text-decoration: none;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.term-btn:hover {
  background: #0056b3;
  color: #fff;
}

.accordion-header {
  position: relative;
  width: 100%;
  background: #0056b3;
  color: #fff;
  border: none;
  padding: 0.75rem 1.25rem;
  font-size: 1.1rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.3s;
}

/* Strzałka jako pojedynczy element */
.accordion-arrow {
  position: absolute;
  top: 50%;
  right: 1.25rem;
  width: 8px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translateY(-50%) rotate(45deg);
  transition: transform 0.3s, right 0.3s;
}

/* Hover: delikatny ruch w prawo */
.accordion-header:hover .accordion-arrow {
  right: 1rem;
}

/* Gdy kontener ma klasę .active: obracamy o 180° */
.accordion-item.active .accordion-arrow {
  transform: translateY(-50%) rotate(-135deg);
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.75rem 1.25rem;
  background: #0056b3;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}



/* 1) Domyślnie ukrywamy treść */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* 2) Po dodaniu .active rozwijamy panel */
.accordion-item.active .accordion-content {
  max-height: 500px; /* albo większa wartość, dostosuj do zawartości */
}

/* (opcjonalnie) jeśli treść jest zmiennej wysokości, zamiast sztywnego max-height
   możesz użyć JS-owego rozwiązania dynamicznego: */

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* ========== Kontakt – ogólne ========== */
.site-main.page-kontakt {
  padding: 0;
  margin: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: #333;
}

/* Hero */
.page-kontakt .hero {
  background-size: cover;
  background-position: center;
  padding: 80px 0;
  text-align: center;
  color: #fff;
}
.page-kontakt .hero .page-title {
  font-size: 2.5rem;
  margin-bottom: 0.5em;
}
.page-kontakt .hero p {
  font-size: 1.125rem;
  opacity: 0.9;
}

/* Zawartość strony */
.page-kontakt .page-content {
  max-width: 800px;
  margin: 40px auto;
  line-height: 1.6;
}
.page-kontakt .page-content p {
  margin-bottom: 1.2em;
}

/* Formularz kontaktowy */
.page-kontakt .contact-form {
  max-width: 600px;
  margin: 60px auto;
}
.page-kontakt .contact-form input,
.page-kontakt .contact-form textarea,
.page-kontakt .contact-form select {
  width: 100%;
  padding: 12px;
  margin-bottom: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}
.page-kontakt .contact-form button {
  display: inline-block;
  padding: 12px 32px;
  font-size: 1rem;
  background-color: #0073aa;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.page-kontakt .contact-form button:hover {
  background-color: #005f8d;
}

/* Dane kontaktowe */
.page-kontakt .contact-info {
  background-color: #f9f9f9;
  padding: 60px 20px;
  text-align: center;
}
.page-kontakt .contact-info .info-item {
  margin-bottom: 1.5em;
  font-size: 1.125rem;
}
.page-kontakt .contact-info .info-item i {
  margin-right: 8px;
  color: #0073aa;
}

/* Ikonki mediów społecznościowych */
.page-kontakt .contact-info .social-icons {
  display: inline-flex;
  gap: 16px;
  margin-bottom: 24px;
}
.page-kontakt .contact-info .social-icons a {
  font-size: 1.75rem;
  transition: transform 0.2s;
}
.page-kontakt .contact-info .social-icons a:hover {
  transform: translateY(-4px);
}

/* Godziny pracy */
.page-kontakt .contact-info .work-hours {
  font-size: 1rem;
  opacity: 0.8;
}
.page-kontakt .contact-info .work-hours i {
  margin-right: 6px;
}

.page-gdzie-trenujemy .hero {
  text-align: center;
}

/* FAQ – spis treści */
.faq-toc {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 6px;
}
.faq-toc .toc-title {
  font-size: 1.25rem;
  margin-bottom: 12px;
  color: #0073aa;
}
.faq-toc .toc-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.faq-toc .toc-list li {
}
.faq-toc .toc-list a {
  text-decoration: none;
  font-weight: 500;
  color: #333;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: background-color 0.2s, border-color 0.2s;
}
.faq-toc .toc-list a:hover {
  background-color: #0073aa;
  color: #fff;
  border-color: #005f8d;
}

/* Sekcje FAQ */
.faq-section {
  scroll-margin-top: 80px; /* uwzględnia stały nagłówek, jeśli jest */
}
.faq-section h3 {
  font-size: 1.5rem;
  margin-bottom: 8px;
  color: #0073aa;
}
.faq-section p {
  margin-bottom: 1.5em;
  line-height: 1.6;
}

/* Główna stopka */
.site-footer {
  background-color: #111;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Główny kontener kolumn */
.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Każda kolumna */
.footer-col {
  flex: 1 1 200px;
  min-width: 160px;
  max-width: 100%;
}

/* Logo */
.footer-logo img {
  max-width: 160px;
  height: auto;
  display: block;
}

/* Nagłówki */
.footer-col h4 {
  font-size: 1rem;
  margin-bottom: 12px;
}

/* Linki */
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col ul li {
  margin-bottom: 8px;
}
.footer-col ul li a {
  color: #ccc;
  text-decoration: none;
  font-size: 0.95rem;
}
.footer-col ul li a:hover {
  color: #fff;
}

/* Ikony społecznościowe */
.footer-socials .social-icons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.footer-socials .social-icons a {
  font-size: 1.4rem;
  color: #ccc;
  transition: color 0.3s;
}
.footer-socials .social-icons a:hover {
  color: #fff;
}

/* Tekst na dole */
.footer-copy {
  text-align: center;
  margin-top: 40px;
  font-size: 0.85rem;
  color: #aaa;
}

/* Uniwersalne zabezpieczenia */
.site-footer *,
.site-footer *::before,
.site-footer *::after {
  box-sizing: border-box;
  max-width: 100%;
  overflow-wrap: break-word;
}

@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-col {
    flex: 1 1 auto;
    width: 100%;
    margin-bottom: 30px;
  }

  .footer-socials .social-icons {
    justify-content: center;
  }
}

/* 1. Wyzeruj gap (jeśli używasz flex-gap lub grid-gap) */
.footer-container {
  gap: 0 !important;
  padding: 0 !important;        /* usuń też padding po bokach, jeśli to przeszkadza */
}

/* 2. Wyzeruj marginy na kolumnach */
.footer-col {
  margin: 0 !important;
}


@media (max-width: 576px) {
  /* Kontener stopki */
  .site-footer,
  .site-footer .footer-container {
    overflow-x: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .site-footer .footer-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;          /* odstęp między kolumnami */
    padding: 0 12px !important;    /* bufory po bokach */
  }

  /* Każda kolumna zajmuje 100% szerokości */
  .site-footer .footer-container > .footer-col {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px 0 !important;     /* dodatkowe przestrzenie w pionie */
    box-sizing: border-box !important;
  }

  /* Prawa autorskie też pełna szerokość */
  .footer-copy {
    width: 100% !important;
    padding: 8px 0 !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 576px) {
  /* 1) Kolumnowy układ od lewej, z wewnętrznym paddingiem po bokach */
  .site-footer .footer-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding: 0 12px !important;
    gap: 0 !important;
  }

  /* 2) Logo pierwsze, bez marginesów */
  .site-footer .footer-container > .footer-col.footer-logo {
    order: 1 !important;
    margin: 0 !important;
  }

  /* 3) „Zakupy” tuż pod logo, wyrównane do lewej i uniesione o 30px */
  .site-footer .footer-container > .footer-col:nth-child(2) {
    order: 2 !important;
    margin: 0 !important;        /* usuń wszystkie margins */
    position: relative !important;
    top: -30px !important;        /* podnieś o 30px – zmień na np. -40px, jeśli potrzebujesz wyżej */
    left: 0 !important;           /* wyrównaj idealnie pod logo */
    width: 100% !important;       /* pełna szerokość */
    box-sizing: border-box !important;
    padding: 8px 0 !important;    /* pionowy padding dla wygody czytania */
  }

  /* 4) Pozostałe kolumny normalnie poniżej (order 3+) */
  .site-footer .footer-container > .footer-col:nth-child(n+3) {
    order: 3 !important;
    margin: 0 !important;
    width: 100% !important;
  }
}



@media (max-width: 576px) {
  /* 1) Pozwól całemu kontenerowi rozwinąć się w poziomie */
  .site-footer .footer-container {
    overflow-x: visible !important;
    width: 100% !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }

  /* 2) Pełna szerokość i reset wszelkich przesunięć dla kolumny „Pomoc” */
  .site-footer .footer-container > .footer-col:nth-child(3) {
    position: static !important;       /* usuń relative/top/left */
    top: auto !important;
    left: auto !important;
    transform: none !important;
    flex: 0 0 100% !important;         /* pełna szerokość w flex */
    width: 100% !important;            /* wymuś 100% */
    min-width: 0 !important;           /* zapobiega rozciąganiu */
    margin: 0 !important;              /* usuń marginesy */
    padding: 8px 0 !important;         /* bufor wewnętrzny pionowy */
    box-sizing: border-box !important;
  }

  /* 3) Upewnij się, że nic nie klipuje zawartości */
  .site-footer,
  .site-footer .footer-container,
  .site-footer .footer-col {
    overflow: visible !important;
  }
}

@media (max-width: 576px) {
  .site-footer .footer-container > .footer-col:nth-child(3) {
    position: relative !important;
    top: -20px !important;
  }
}

@media (max-width: 576px) {
  /* Pełna widoczność i uniesienie kolumny „Informacje” */
  .site-footer .footer-container > .footer-col:nth-child(4) {
    /* reset pozycjonowania i rozmiarów */
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    overflow: visible !important;

    /* pełna szerokość, brak marginesów */
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;

    /* wewnętrzny padding dla czytelności */
    padding: 8px 12px !important;
    box-sizing: border-box !important;

    /* uniesienie o 10px */
    position: relative !important;
    top: -20px !important;
    left: 0 !important;
  }
}

@media (max-width: 576px) {
  .site-footer .footer-container > .footer-col:nth-child(4) {
    /* pełna szerokość i reset przesunięć */
    position: relative !important;
    top: -20px !important;       /* uniesienie jak pozostałe kolumny */
    left: 0 !important;           /* wyrównanie do lewej */
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 0 !important;
    
    /* tylko pionowy padding, bez dodatkowego odsunięcia poziomego */
    padding: 8px 0 !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 576px) {
  .site-footer .footer-container > .footer-col.footer-socials {
    /* reset pozycji i przesunięć */
    position: static !important;
    top: -20px !important;
    left: auto !important;
    transform: none !important;
    
    /* pełna szerokość i brak marginesów */
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 0 !important;
    min-width: 0 !important;
    
    /* padding tylko w pionie dla czytelności */
    padding: 8px 0 !important;
    box-sizing: border-box !important;
    
    /* upewnij się, że zawartość się łamie i nic nie wyjedzie */
    overflow: visible !important;
    white-space: normal !important;
    word-wrap: break-word !important;
  }
}

@media (max-width: 576px) {
  .site-footer .footer-copy {
    display: block !important;
    width: 100% !important;
    margin: 12px auto !important;   /* automatyczne marginesy poziome */
    text-align: center !important;   /* wyśrodkuj tekst wewnątrz */
  }
}


/* ——— Tytuł strony ——— */
.page-nasze-obozy .page-title {
  color: #000;
  text-align: center;
}

/* ——— Kontener akordeonu ——— */
.page-nasze-obozy .accordion {
  max-width: 900px;
  margin: 2.5rem auto;
}

/* ——— Poszczególne panele ——— */
.page-nasze-obozy .accordion-item {
  margin-bottom: 2rem;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  overflow: hidden;
}

/* ——— Nagłówek panelu ——— */
.page-nasze-obozy .accordion-header {
  padding: 1.5rem 2rem;
  font-size: 1.25rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

/* ——— Strzałka ——— */
.page-nasze-obozy .accordion-arrow {
  transition: transform 0.3s ease;
}
.page-nasze-obozy .accordion-item.active .accordion-arrow {
  transform: rotate(225deg);
}

/* ——— Zawartość panelu ——— */
.page-nasze-obozy .accordion-content {
  max-height: 0;
  padding: 0 2rem;
  overflow: hidden;
  transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
  will-change: max-height, padding;
}
/* gdy panel jest rozwinięty */
.page-nasze-obozy .accordion-item.active .accordion-content {
  max-height: 800px;    /* dopasuj, jeśli treść jest wyższa */
  padding: 1rem 2rem;
}

/* ——— Odstępy wewnątrz zawartości ——— */
.page-nasze-obozy .accordion-content > *:not(:last-child) {
  margin-bottom: 1rem;
}

/* ——— Przykładowe przyciski wewnątrz ——— */
.page-nasze-obozy .accordion-content .term-btn {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  border: 1px solid #0073aa;
  border-radius: 4px;
  color: #0073aa;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.page-nasze-obozy .accordion-content .term-btn:hover {
  background-color: #0073aa;
  color: #fff;
}

/* Wymuszenie czarnego tła paneli */
.page-nasze-obozy .accordion-item {
  background-color: #000 !important;
}

.page-nasze-obozy .accordion-item {
  box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
}

/* Nasze Obozy — wymuszenie czarnego tła dla całego panelu */
.page-nasze-obozy .accordion-item,
.page-nasze-obozy .accordion-header,
.page-nasze-obozy .accordion-content {
  background-color: #000 !important;
}

/* Jeśli nagłówek miał osobne tło (np. niebieskie), nadpisujemy je też: */
.page-nasze-obozy .accordion-header {
  background-color: #000 !important;
}

/* Dostosowanie koloru tekstu, żeby było widać na czarnym tle */
.page-nasze-obozy .accordion-header,
.page-nasze-obozy .accordion-content {
  color: #fff !important;
}

/* Strzałka w nagłówku na biało */
.page-nasze-obozy .accordion-arrow {
  border-color: #fff !important;
}

/* Przyciski w treści, żeby nie miały białego tła */
.page-nasze-obozy .accordion-content .term-btn {
  background: transparent !important;
  border-color: #fff !important;
  color: #fff !important;
}
.page-nasze-obozy .accordion-content .term-btn:hover {
  background-color: #fff !important;
  color: #000 !important;
}

/* Tło rozwijanej zawartości akordeonu */
.page-nasze-obozy .accordion-item .accordion-content {
  background-color: #e7ddca !important;
  color: #000 !important; /* ciemny tekst na jasnym tle */
}

/* Jeśli masz bordery/pudełka wokół przycisków, możesz je dostosować również */
.page-nasze-obozy .accordion-content .term-btn {
  border-color: #000 !important;
  color: #000 !important;
}
.page-nasze-obozy .accordion-content .term-btn:hover {
  background-color: #000 !important;
  color: #fff !important;
}

/* Pogrubienie obwódek term-btn wewnątrz rozwijanej zawartości */
.page-nasze-obozy .accordion-content .term-btn {
  border-width: 2px !important;   /* zamiast domyślnych 1px */
  /* możesz też zmienić styl np. na solid, jeśli było inaczej: */
  border-style: solid !important;
}

/* Pogrubienie tekstu w przyciskach term-btn */
.page-nasze-obozy .accordion-content .term-btn {
  font-weight: 600 !important;  /* lub bold */
}

/* Hover background dla term-btn */
.page-nasze-obozy .accordion-content .term-btn:hover {
  background-color: #f5eee0 !important;
  /* zachowaj kontrast tekstu – czarny lub zmień w razie potrzeby */
  color: #000 !important;
}

@media (max-width: 576px) {
  /* Kontener: kolumnowy flow, każdy przycisk w osobnym wierszu */
  #kategorie .container-kategorie {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;        /* odstęp między przyciskami */
    padding: 0 12px !important; /* bufory po bokach */
    box-sizing: border-box !important;
  }

  /* Przyciski: pełna szerokość, blokowy układ */
  #kategorie .kategoria-przycisk {
    display: block !important;
    width: 100% !important;
    padding: 12px 0 !important;   /* wygodny obszar do tapnięcia */
    text-align: center !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
}

@media (max-width: 576px) {
  #kategorie .kategoria-przycisk {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;        /* pełna szerokość wiersza */
    min-height: 50px !important;    /* stała wysokość prostokąta */
    padding: 0 !important;          /* bez zbędnych paddingów */
    box-sizing: border-box !important;
    text-align: center !important;
  }
}

@media (max-width: 576px) {
  /* Upewnij się, że kontener zajmuje całą szerokość i ma padding */
  #kategorie .container-kategorie {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    gap: 8px !important;
  }

  /* Rozciągnij każdy przycisk na całą szerokość kontenera */
  #kategorie .kategoria-przycisk {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;        /* pełna szerokość wiersza */
    max-width: 100% !important;
    aspect-ratio: auto !important; /* wyłącz wymuszoną proporcję */
    height: auto !important;       /* pozwól naturalnie rosnąć */
    min-height: 48px !important;   /* minimalna wysokość dla komfortu */
    padding: 12px 0 !important;    /* pionowy padding */
    margin: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: normal !important;
    word-wrap: break-word !important;
  }
}

@media (max-width: 576px) {
  /* 1) Ustaw kontener przycisków jako flex-column i wyśrodkuj je poziomo */
  #kategorie .container-kategorie {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;   /* wyśrodkuje wszystkie dzieci */
    box-sizing: border-box !important;
  }

  /* 2) Nadaj przyciskom szerokość 90% wewnątrz kontenera, aby były poziome i wyśrodkowane */
  #kategorie .kategoria-przycisk {
    width: 90% !important;
    max-width: 360px !important;      /* opcjonalnie ogranicz maksymalną szerokość */
    padding: 12px 0 !important;       /* zachowaj wygodną wysokość */
    text-align: center !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 576px) {
  /* 1) Nadaj kontenerowi wewnętrzny padding, żeby nic nie wystawało poza ekran */
  #kategorie .container-kategorie {
    padding: 0 12px !important;
    box-sizing: border-box !important;
    display: block !important; /* nie używamy już flex/grid, tylko blokowy flow */
  }

  /* 2) Każdy przycisk jako blok 100% szerokości kontenera, z marginesem pionowym */
  #kategorie .kategoria-przycisk {
    display: block !important;
    width: 100% !important;       /* wypełnia cały wewnętrzny obszar kontenera */
    max-width: none !important;    /* usuwa wszelkie wcześniejsze ograniczenia */
    margin: 8px 0 !important;      /* odstęp między wierszami przycisków */
    padding: 12px 0 !important;    /* wygodna wysokość */
    text-align: center !important; /* wyśrodkuj tekst */
    box-sizing: border-box !important;
  }
}

@media (max-width: 576px) {
  /* 1) Kontener bez specjalnego flow, tylko zwykły blok */
  #kategorie .container-kategorie {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 2) Każdy przycisk to blok, 90% szerokości ekranu i auto-marginesy */
  #kategorie .kategoria-przycisk {
    display: block !important;
    width: 90% !important;       /* 90% szerokości, więc zostaje 5% marginesu z każdej strony */
    max-width: none !important;
    margin: 8px auto !important;  /* 8px odstępu pionowego i wyśrodkowanie poziome */
    padding: 12px 0 !important;    /* wygodna wysokość do tapnięcia */
    box-sizing: border-box !important;
    text-align: center !important;
  }
}

@media (max-width: 576px) {
  /* margines nad sekcją przycisków */
  #kategorie {
    margin-top: 20px !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 576px) {
  /* Maksymalnie powiększone przyciski na telefonach */
  #kategorie .kategoria-przycisk {
    font-size: 1.6rem !important;    /* większy tekst */
    padding: 24px 0 !important;      /* więcej przestrzeni pionowej */
    line-height: 1.4 !important;     /* dostosowana wysokość linii */
  }
}

@media (max-width: 576px) {
  /* Jeszcze większe przyciski na telefonach */
  #kategorie .kategoria-przycisk {
    font-size: 2rem !important;    /* duży, wyraźny tekst */
    padding: 32px 0 !important;    /* więcej przestrzeni pionowej */
    line-height: 1.5 !important;   /* zachowanie czytelności */
  }
}

@media (max-width: 576px) {
  /* Wyśrodkuj tekst w przyciskach poziomo i pionowo */
  #kategorie .kategoria-przycisk {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important; /* na wszelki wypadek */
  }
}


@media (max-width: 576px) {
  /* Wycentruj tekst w przycisku „Trenerzy” w pionie, bez zmiany samego przycisku */
  #kategorie .kategoria-trenerzy span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    box-sizing: border-box !important;
  }
}


@media (max-width: 576px) {
  /* 1) Ustaw przycisk „Trenerzy” jako kontekst dla absolutnego pozycjonowania */
  #kategorie .kategoria-trenerzy {
    position: relative !important;
  }

  /* 2) Centruj napis dokładnie w środku przycisku, bez zmiany jego rozmiaru */
  #kategorie .kategoria-trenerzy span {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 576px) {
  /* Tylko minimalna wysokość przycisku „Trenerzy”, bez zmiany szerokości */
  #kategorie .container-kategorie .kategoria-trenerzy {
    min-height: 80px !important;    /* ustaw tutaj pożądaną wysokość, np. 60px */
    display: flex !important;        /* utrzymaj wyśrodkowanie treści */
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 576px) {
  /* 1) Ustaw przycisk „Oferta” jako kontekst dla absolutnego pozycjonowania */
  #kategorie .kategoria-oferta {
    position: relative !important;
  }

  /* 2) Centruj napis dokładnie w środku przycisku „Oferta” */
  #kategorie .kategoria-oferta span {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  /* 3) Ustaw minimalną wysokość przycisku „Oferta” na 80px i wycentruj treść */
  #kategorie .container-kategorie .kategoria-oferta {
    min-height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 576px) {
  /* 1) Ustaw przycisk „Obozy” jako kontekst dla absolutnego pozycjonowania */
  #kategorie .kategoria-obozy {
    position: relative !important;
  }

  /* 2) Centruj napis dokładnie w środku przycisku „Obozy” */
  #kategorie .kategoria-obozy span {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  /* 3) Ustaw minimalną wysokość przycisku „Obozy” na 80px i wycentruj treść */
  #kategorie .container-kategorie .kategoria-obozy {
    min-height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 576px) {
  /* 1) Ustaw przycisk „Ubrania” jako kontekst dla absolutnego pozycjonowania */
  #kategorie .kategoria-ubrania {
    position: relative !important;
  }

  /* 2) Centruj napis dokładnie w środku przycisku „Ubrania” */
  #kategorie .kategoria-ubrania span {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  /* 3) Ustaw minimalną wysokość przycisku „Ubrania” na 80px i wycentruj treść */
  #kategorie .container-kategorie .kategoria-ubrania {
    min-height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 576px) {
  /* Zmniejszenie wysokości głównego obrazka w prostym sliderze na telefonach */
  #simple-slider .slide img {
    width: 100% !important;       /* pełna szerokość, by nie wychodziło poza ekran */
    height: auto !important;
    max-height: 200px !important; /* ograniczamy wysokość do 200px */
    object-fit: cover !important;  /* zachowanie proporcji i przycięcie nadmiaru */
    display: block !important;
  }

  /* Jeśli masz jeszcze jakiś duży obraz na froncie poza sliderem, np. .hero-image */
  .hero-image img,
  .main-banner img {
    width: 100% !important;
    height: auto !important;
    max-height: 200px !important;
    object-fit: cover !important;
  }
}

/* Ukryj tylko strzałki w sliderze, pozostawiając kropki */
#simple-slider .slider-nav .arrow {
  display: none !important;
}

@media (max-width: 576px) {
  /* Nieco dłuższe i grubsze paski pod sliderem na telefonach */
  #simple-slider .dot {
    width: 36px !important;     /* nieco dłuższy */
    height: 4px !important;     /* nieco grubszy */
    margin: 0 5px !important;   /* delikatnie powiększone odstępy */
  }
}

@media (max-width: 576px) {
  /* Jeszcze większe paski pod sliderem na telefonach */
  #simple-slider .dot {
    width: 40px !important;     /* zwiększona długość */
    height: 5px !important;     /* zwiększona grubość */
    margin: 0 6px !important;   /* lekko większe odstępy */
  }
}

@media (max-width: 576px) {
  /* Jeszcze większa czcionka w przyciskach na telefonach */
  #kategorie .kategoria-przycisk span {
    font-size: 1.1rem !important;   /* zwiększone z 1rem do 1.1rem */
    line-height: 1.3 !important;    /* dopasowana wysokość linii */
  }
}

@media (max-width: 576px) {
  /* Podbijamy rozmiar nagłówka „Sprawdź naszą ofertę!” na telefonach */
  #offer .offer-heading {
    font-size: 1.6rem !important;    /* zwiększone z 1.3rem do 1.6rem */
    line-height: 1.3 !important;     /* zachowuje czytelność */
    margin-bottom: 0.6em !important; /* lekko większy odsęp pod nagłówkiem */
  }
}

@media (max-width: 576px) {
  /* Proporcjonalne zmniejszenie całego paska zakładek na telefonach */
  #offer .offer-tabs {
    font-size: 0.9rem !important;    /* mniejszy tekst całego paska */
    padding: 0 12px !important;      /* mniej buforów po bokach */
    box-sizing: border-box !important;
  }

  #offer .offer-tab {
    padding: 6px 8px !important;     /* węższe i niższe przyciski */
    margin: 0 4px !important;        /* mniejsze odstępy między zakładkami */
  }
}

@media (max-width: 576px) {
  /* pozwól na łamanie wierszy i wymuś flex-wrap */
  #offer .offer-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
  }

  /* spraw, by „Pakiety Treningów” (4-ta zakładka) zajmowała cały wiersz */
  #offer .offer-tab:nth-child(4) {
    flex: 0 0 100% !important;
    margin-top: 8px !important;  /* odstęp od poprzedniego wiersza */
  }
}

@media (max-width: 576px) {
  /* Na telefonach: zamieniamy pasek zakładek na grid 3-kolumnowy */
  #offer .offer-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, max-content) !important;
    grid-auto-rows: auto !important;
    gap: 8px !important;
    justify-content: center !important;  /* centrowanie całego gridu */
    padding: 0 12px !important;          /* ewentualne bufory po bokach */
    box-sizing: border-box !important;
  }

  /* Czwartą zakładkę („Pakiety Treningów”) umieszczamy w środkowej kolumnie drugiego wiersza */
  #offer .offer-tab:nth-child(4) {
    grid-column: 2 !important;
  }
}


@media (max-width: 576px) {
  /* 1) Flex-wrap, centrowanie i zmniejszone bufory dla paska zakładek */
  #offer .offer-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding: 0 8px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  /* 2) Każda zakładka nie kurczy się za bardzo i ma niewielkie marginesy */
  #offer .offer-tab {
    flex: 0 1 auto !important;
    margin: 4px !important;   /* 4px z każdej strony */
    white-space: nowrap !important;
  }

  /* 3) Czwarta zakładka (“Pakiety Treningów”) na osobnym wierszu */
  #offer .offer-tab:nth-child(4) {
    flex-basis: 100% !important;
    margin-top: 8px !important;
  }
}

@media (max-width: 576px) {
  /* 1) Reset domyślnych paddingów/marginesów ul i ustaw pełną szerokość */
  #offer .offer-tabs {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* 2) Każdy tab: minimalne marginesy, by wszystko było wyśrodkowane */
  #offer .offer-tab {
    flex: 0 1 auto !important;
    margin: 4px 8px !important;    /* 4px pionowo, 8px poziomo */
    white-space: nowrap !important;
  }

  /* 3) Czwarty tab („Pakiety Treningów”) na osobnym wierszu, też wyrównany do środka */
  #offer .offer-tab:nth-child(4) {
    flex-basis: 100% !important;
    margin: 8px auto !important;   /* 8px w pionie, auto poziomo */
  }
}






@media (max-width: 576px) {
  /* 1) Wyzeruj tło, cień i animację dla wszystkich zakładek */
  #offer .offer-tab {
    background: transparent !important;
    box-shadow: none !important;
    transition: none !important;
  }

  /* 2) Przywróć czarne pigułkowe wyróżnienie tylko dla aktywnej zakładki */
  #offer .offer-tab.active {
    background-color: #000 !important;
    color: #fff !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
    border-radius: 999px !important;
    flex: 0 0 auto !important;
    width: auto !important;
  }
}

@media (max-width: 576px) {
  /* Dodajemy odsunięcie od lewej i prawej dla całej sekcji „Oferta” */
  #offer {
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  /* Ewentualnie, jeśli karty w panelach nadal stykają się z krawędzią,
     dodatkowo ograniczamy ich szerokość i wyśrodkowujemy */
  #offer .offer-panel {
    margin: 0 auto 16px !important;           /* 16px odstępu pod każdym panelem */
    max-width: calc(100% - 32px) !important;   /* 16px paddingu z każdej strony */
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 576px) {
  /* Najbardziej minimalne boczne bufory dla paneli oferty */
  #offer .offer-panel {
    padding: 0 1px !important;    /* 1px bufor od lewej i prawej */
    box-sizing: border-box !important;
  }

  /* Karty wewnątrz paneli — szerokość z 2px buforem i 1px odstępu pod kartą */
  #offer .offer-card {
    max-width: calc(100% - 2px) !important; /* 2×1px bufor */
    margin: 0 auto 1px !important;          /* 1px odstępu pod kartą */
    box-sizing: border-box !important;
  }
}

@media (max-width: 576px) {
  /* Usuwamy każdy boczny bufor — margin i padding = 0 */
  #offer .offer-panel {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #offer .offer-card {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 576px) {
  /* Zmniejszenie odstępów między panelami oferty na telefonach */
  #offer .offer-content > .offer-panel {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }
}

@media (max-width: 576px) {
  /* 1) Zmniejszamy odstęp między panelami oferty */
  #offer .offer-content > .offer-panel {
    padding-bottom: 0 !important;
  }

  /* 2) Ustawiamy kolumnowy układ kart i gap zamiast marginów */
  #offer .offer-cards {
    gap: 15px !important;       /* odstęp 4px między kartami */

  }

  /* 3) Resetujemy wszelkie margin-bottom w .offer-card */
  #offer .offer-card {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 576px) {
  /* Zmniejszenie nagłówka „Wakacyjne Półkolonie Piłkarskie 2025” do rozmiaru jak „Sprawdź naszą ofertę!” */
  .polkolonie-title {
    font-size: 1.6rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.6em !important;
  }
}

@media (max-width: 576px) {
  /* Dodajemy lekki bufor po bokach i odstęp między blokami w sekcji Półkolonie */
  .polkolonie-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;       /* odstęp 8px między boxami */
    padding: 0 16px !important; /* 16px bufora od lewej i prawej */
    box-sizing: border-box !important;
  }

  /* Gwarantujemy, że każdy box jest wyśrodkowany i węższy od ekranu */
  .polkolonie-box {
    width: 100% !important;
    max-width: calc(100% - 32px) !important; /* 32px = 2×16px */
    margin: 0 auto !important;               /* centrowanie */
    box-sizing: border-box !important;
  }
}


@media (max-width: 576px) {
  .polkolonie-box .polkolonie-btn {
    /* przesunięcie wizualne bez zmiany układu */
    transform: translateY(12px) !important; 
    /* upewniamy się, że przycisk nadal jest klikalny */
    display: inline-block !important;
  }
}

@media (max-width: 576px) {
  /* Dopasowanie rozmiaru nagłówka “Poznaj naszych trenerów” do pozostałych głównych tytułów */
  #trainer-carousel .offer-heading,
  #trainer-carousel h2 {
    font-size: 1.6rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.6em !important;
  }
}

@media (max-width: 576px) {
  /* Marginesy boczne i pionowe dla kontenerów accordion */
  .page-nasze-obozy .accordion-item {
    margin: 0 12px 18px !important; /* 0 góra, 12px boki, 8px dół */
    box-sizing: border-box !important;
  }

  /* Opcjonalnie: usuń margines dolny dla ostatniego elementu */
  .page-nasze-obozy .accordion-item:last-child {
    margin-bottom: 0 !important;
  }
}

@media only screen and (max-width: 768px) {
  #simple-slider .slide {
    /* przypisujemy nowe tło i wymiary */
    background-image: url("https://bwtrening.com/wp-content/uploads/2025/06/tlo-glowna-strona-telefon-375-x-300-px.png") !important;
    background-size: cover !important;
    background-position: center !important;
    height: 300px !important;
  }
}




















































































































































































































































































/*PÓŁKOLONIEEEEEE*/
#countdown {
  padding: 60px 20px;
  background-color: #111;       /* ciemne tło dla kontrastu */
  color: #ffd600;               /* żółty akcent */
  text-align: center;
}

.countdown-title {
  font-size: 2rem;
  margin-bottom: 40px;
}

.countdown-container {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
}

.countdown-item span {
  font-size: 2.5rem;
  font-weight: bold;
}

.countdown-item small {
  display: block;
  margin-top: 8px;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#countdown {
  padding: 60px 20px;
  background-color: #111;
  color: #ffd600;
  text-align: center;
}

.countdown-title {
  font-size: 2rem;
  margin-bottom: 40px;
}

.countdown-container {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.countdown-item {
  position: relative;
  width: 120px;
  height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.countdown-ring {
  width: 120px;
  height: 120px;
  transform: rotate(-90deg);
}

.ring-bg,
.ring-progress {
  fill: none;
  stroke-width: 12;
  cx: 60; cy: 60; r: 54;
}

.ring-bg {
  stroke: rgba(255, 214, 0, 0.2);
}

.ring-progress {
  stroke: #ffd600;
  stroke-dasharray: 339.292;    /* 2π*54 */
  stroke-dashoffset: 339.292;
  transition: stroke-dashoffset 1s linear;
}

.countdown-item span {
  position: absolute;
  top: 50%;
  transform: translateY(-10%);
  font-size: 2.5rem;
  font-weight: bold;
  color: #ffd600;
}

.countdown-item small {
  position: absolute;
  bottom: 0;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #ffd600;
}

/* ————————————————
   Większe, grubsze pierścienie
   ———————————————— */

/* 1) Rozmiar kontenera każdego licznika */
.countdown-item {
  width: 160px;    /* zamiast 120px */
  height: 200px;   /* dopasuj, by zostawić miejsce pod opis */
}

/* 2) Rozmiar samego SVG */
.countdown-ring {
  width: 160px;    /* zwiększamy średnicę koła */
  height: 160px;
}

/* 3) Grubość kreski */
.ring-bg,
.ring-progress {
  stroke-width: 16;  /* zamiast 12px */
}

/* Mniej grube kreski w SVG-pierścieniach */
.ring-bg,
.ring-progress {
  stroke-width: 10; /* zmień wartość na 8–12, aby dopasować grubość */
}

.countdown-item span {
  position: absolute;
  top: 40%;           /* środek pierścienia przy SVG=160px */
  left: 50%;
  transform: translate(-50%, -50%); /* wypośrodkuj dokładnie  */
}

/* Beżowy kolor dla tytułu */
#countdown .countdown-title {
  color: #e7ddca;
}

/* Beżowy kolor dla obręczy postępu */
#countdown .ring-progress {
  stroke: #e7ddca;
}

/* Opcjonalnie: delikatniejsze tło obręczy w odcieniu beżu */
#countdown .ring-bg {
  stroke: rgba(231, 221, 202, 0.3);
}

/* Beżowy kolor dla cyfr i podpisów */
#countdown .countdown-item span,
#countdown .countdown-item small {
  color: #e7ddca;
}

/* Pogrubienie etykiet Dni, Godz., Min., Sek. */
#countdown .countdown-item small {
  font-weight: 700;   /* lub 600–800 w zależności od dostępnych wariantów fontu */
}

/* ===== Sekcja FAQ ===== */
.faq-section {
  background-color: #21004f;
  color: #fff;
  padding: 60px 20px;
}
.faq-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
}
.faq-container {
  max-width: 800px;
  margin: 0 auto;
}
.faq-item {
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  margin-bottom: 16px;
  overflow: hidden;
}
.faq-question {
  width: 100%;
  background: transparent;
  border: none;
  color: #fff;
  padding: 16px;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.faq-toggle {
  transition: transform 0.3s ease;
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 16px;
}
.faq-answer p {
  margin: 16px 0;
  line-height: 1.5;
}

/* Aktywny stan */
.faq-item.active .faq-toggle {
  transform: rotate(180deg);
}
.faq-item.active .faq-answer {
  max-height: 200px; /* dostosuj, jeśli odpowiedzi są dłuższe */
}

/* Przycisk „Zobacz więcej” */
.faq-more {
  text-align: center;
  margin-top: 24px;
}
.faq-more .button {
  display: inline-block;
  padding: 12px 28px;
  border: 1px solid #8e18ff;
  background: transparent;
  color: #8e18ff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.faq-more .button:hover {
  background-color: #8e18ff;
  color: #fff;
}

/* Responsywność */
@media (max-width: 600px) {
  .faq-question {
    font-size: 0.95rem;
    padding: 14px;
  }
}

/* 1) Usuń dolne paddingi/marginesy głównego wrappera */
.site-main,
.content-container {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 2) Usuń domyślne tło beżowego kontenera (jeżeli to ono prześwituje) */
.content-container {
  background: transparent !important;
}

/* 3) Upewnij się, że pod FAQ nie ma dodatkowego marginesu */
.faq-section {
  margin-bottom: 0 !important;
}

/* Zmiana tła sekcji FAQ na #f5eee0 */
.faq-section {
  background-color: #f5eee0 !important;
}

/* Ustawienie koloru tekstu na czarny wewnątrz sekcji FAQ */
.faq-section {
  color: #000 !important;
}

/* Dodatkowo nadpisujemy specyficzne elementy, które mogłyby mieć inny kolor */
.faq-section .faq-title,
.faq-section .faq-question,
.faq-section .faq-question .faq-toggle,
.faq-section .faq-answer,
.faq-section .faq-answer p,
.faq-section .faq-item small,
.faq-section .faq-more .button {
  color: #000 !important;
}

/* Zmiana konturu bloczków FAQ na czarny */
.faq-section .faq-item {
  border-color: #000 !important;
}

.faq-question .faq-toggle {
  position: relative;
  top: -4px; /* podnieś o 4px; dostosuj wartość do swoich potrzeb */
}

/* Styl podstawowy dla przycisku “Zobacz więcej” */
.faq-more .button {
  border: 2px solid #000;       /* czarna obwódka */
  background-color: transparent;
  color: #000;                  /* czarny tekst */
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* Stan hover: powiększenie i inwersja kolorów */
.faq-more .button:hover {
  transform: scale(1.1);        /* powiększenie o 10% */
  background-color: #000;       /* czarne tło */
  color: #fff;                  /* biały tekst */
}

/* Poprawiony hover: czarne tło, biały tekst, 10% powiększenia */
.faq-more .button:hover {
  transform: scale(1.1);
  background-color: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}

/* Styl “błędnego” checkboxa */
.polkolonie-form-row.error {
  color: #a00; /* czerwony tekst etykiety */
}

.polkolonie-form-row.error input[type="checkbox"] {
  /* podkreślenie obwódki checkboxa */
  box-shadow: 0 0 0 2px #a00;
}

@media (max-width: 576px) {
  /* Ustawiamy dwa zegary w jednym wierszu na telefonie */
  #countdown .countdown-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }
  /* Dopasowujemy każdy zegar do dostępnej komórki i zmniejszamy ich rozmiar */
  #countdown .countdown-item {
    width: 100% !important;
    max-width: none !important;
    text-align: center !important;
  }
  /* Opcjonalnie: zmniejszamy sam okrąg (ring) */
  #countdown .countdown-ring {
    width: 80px !important;
    height: 80px !important;
  }
  /* I zmniejszamy czcionkę liczb pod zegarem */
  #countdown .countdown-item span {
    font-size: 1.2rem !important;
  }
  #countdown .countdown-item small {
    font-size: 0.8rem !important;
  }
}
@media (max-width: 576px) {
  /* Jeszcze większe kółka (ringi) w liczniku na telefonach */
  #countdown .countdown-ring {
    width: 140px !important;   /* zwiększone do 140px */
    height: 140px !important;
  }
  /* Dostosowanie odstępów wokół każdego elementu */
  #countdown .countdown-item {
    padding: 16px 0 !important; /* więcej przestrzeni nad i pod */
  }
}
@media (max-width: 576px) {
  /* Powiększenie cyfr wewnątrz ringów w liczniku na telefonach */
  #countdown .countdown-item span {
    font-size: 1.8rem !important;   /* zwiększone z 1.2rem do 1.8rem */
    line-height: 1 !important;
  }
  /* Delikatna korekta pozycji cyfr, jeśli potrzeba */
  #countdown .countdown-item span {
    display: block !important;
    margin-top: 8px !important;     /* dostosuj, jeśli cyfry są za wysoko/za nisko */
  }
}
@media (max-width: 576px) {
  /* Powiększenie podpisów pod ringami licznika na telefonach */
  #countdown .countdown-item small {
    font-size: 1rem !important;   /* zwiększone z 0.8rem do 1rem */
    line-height: 1.2 !important;
  }
}

/* Tylko margines między tytułem a zegarami */
#countdown .countdown-container {
  margin-top: 16px !important; /* ustaw pożądany odstęp */
}

/* Zmniejszenie odstępu nad nagłówkiem „Do rozpoczęcia półkolonii pozostało” */
#countdown .countdown-title {
  margin-top: 8px !important;  /* zmniejsz wartość według potrzeb, np. 4px albo 0 */
}

.page-polkolonie-letnie .polkolonie-contact {
  background:
    linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
    url('https://bwtrening.com/wp-content/uploads/2025/06/Bez-nazwy-1920-x-700-px.png') center/cover no-repeat;
}

/* Dla ekranów ≤ 1200px – mniejszy obraz */
@media (max-width: 1200px) {
  .page-polkolonie-letnie .polkolonie-contact {
    background-image:
      linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
      url('/wp-content/uploads/form-bg-1200x400.jpg');
  }
}

/* Dla ekranów ≤ 768px – jeszcze mniejszy */
@media (max-width: 768px) {
  .page-polkolonie-letnie .polkolonie-contact {
    background-image:
      linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
      url('/wp-content/uploads/form-bg-768x256.jpg');
  }
}

/* Zmiana koloru wszystkich tekstów w tle formularza */
.page-polkolonie-letnie .polkolonie-contact,
.page-polkolonie-letnie .polkolonie-contact * {
  color: #f5eee0 !important;
}

/* Dodatkowo: placeholdery w polach input/textarea */
.page-polkolonie-letnie .polkolonie-form-row input::placeholder,
.page-polkolonie-letnie .polkolonie-form-row textarea::placeholder {
  color: #f5eee0 !important;
  opacity: 1; /* gwarantuje pełną widoczność */
}

.site-main.page-polkolonie-letnie .polkolonie-contact {
  position: relative; /* upewnij się, że jest ustawione */
}

.site-main.page-polkolonie-letnie .polkolonie-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5); /* 50% przyciemnienia, zmień na 0.6 lub 0.7 dla mocniejszego efektu */
  pointer-events: none;
  z-index: 1;
}

/* Przesuń całą zawartość ponad overlay */
.site-main.page-polkolonie-letnie .polkolonie-contact .content-container {
  position: relative;
  z-index: 2;
}

/* 1. Nadpisanie układu formularza: grid z 2 kolumnami */
.page-polkolonie-letnie .polkolonie-form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;            /* odstępy między polami */
  justify-items: center;  /* wycentrowanie zawartości każdej komórki */
  margin: 0 auto;         /* wyśrodkowanie całego formularza */
  max-width: 800px;       /* szerokość formularza */
}

/* 2. Każde pole/form-row wypełnia całą swoją “komórkę” */
.page-polkolonie-letnie .polkolonie-form-row {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* 3. Rozciągnięcie długich wierszy (textarea i checkboxy) na 2 kolumny */
.page-polkolonie-letnie .polkolonie-form-row:nth-child(4),
.page-polkolonie-letnie .polkolonie-form-row:nth-child(5),
.page-polkolonie-letnie .polkolonie-form-row:nth-child(6),
.page-polkolonie-letnie .form-notice,
.page-polkolonie-letnie .polkolonie-form-submit {
  grid-column: 1 / -1;
}

/* 4. Przycisk centrowany w wierszu */
.page-polkolonie-letnie .polkolonie-form-submit {
  justify-self: center;
}

/* 5. Dla naprawdę wąskich ekranów – jedna kolumna */
@media (max-width: 600px) {
  .page-polkolonie-letnie .polkolonie-form {
    grid-template-columns: 1fr;
  }
}

/* 1. Upewniamy się, że cała sekcja jest kolumną */
.site-main.page-polkolonie-letnie .polkolonie-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 2. Tytuł w normalnym flow, na samej górze */
.site-main.page-polkolonie-letnie .polkolonie-contact-title {
  order: -1;                        /* daje mu pierwszeństwo */
  margin-bottom: 1.5rem;            /* odstęp od formularza */
  background: rgba(0,0,0,0.6);      /* półprzezroczyste tło */
  color: #f5eee0;                   /* beżowy tekst */
  padding: 0.5rem 1rem;
  border-radius: 4px;
  display: inline-block;
}

/* 3. Formularz poniżej */
.site-main.page-polkolonie-letnie .polkolonie-contact .content-container {
  width: 100%;
}

/* 1) Przywrócenie normalnego flow */
.site-main.page-polkolonie-letnie .polkolonie-contact {
  display: block !important;
}

/* 2) Tytuł jako pełny wiersz, nad formularzem */
.site-main.page-polkolonie-letnie .polkolonie-contact-title {
  display: block !important;
  margin: 0 0 1.5rem;          /* odstęp od formularza */
  background: rgba(0,0,0,0.6); /* półprzezroczyste tło */
  color: #f5eee0;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  text-align: center;
  font-size: 1.25rem;
  position: relative;
  z-index: 2;
}

/* 3) Stawiamy formę niżej, bez nadpisywania flow */
.site-main.page-polkolonie-letnie .polkolonie-contact .content-container {
  position: relative;
  z-index: 1;
}

.page-polkolonie-letnie .polkolonie-contact-title {
  font-size: 1.75rem !important;
  line-height: 1.3 !important;
}

@media (max-width: 768px) {
  .site-main.page-polkolonie-letnie .polkolonie-contact {
    background:
      linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
      url('https://bwtrening.com/wp-content/uploads/2025/06/Bez-nazwy-1920-x-700-px-1.png')
      center/cover no-repeat;
  }
}

.pakiety-cta {
  margin: 2rem 0 !important;
  text-align: center !important;
}

.pakiety-cta__box {
  display: inline-flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: #000 !important;
  color: #fff !important;
  border-radius: 1rem !important;
  padding: 1rem 1.5rem !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

.pakiety-cta__text {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  margin-right: 1rem !important;
}

.pakiety-cta__btn {
  background: #fff !important;
  color: #000 !important;
  padding: 0.5rem 1rem !important;
  border-radius: 0.5rem !important;
  text-decoration: none !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
}

.pakiety-cta__btn:hover {
  opacity: 0.9 !important;
}
.pakiety-cta__box {
  /* Przywracamy sensowny limit szerokości */
  width: 100%;
  max-width: 800px; /* lub np. 700px — dostosuj według potrzeby */
  margin: 0 auto !important; /* wycentrowanie */
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: #000 !important;
  color: #fff !important;
  border-radius: 1rem !important;
  padding: 1rem 1.5rem !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

@media (max-width: 767px) {
  .pakiety-cta__box {
    max-width: 90vw !important; /* lekko zmniejszone na mobilkach */
  }
}
.pakiety-cta__box {
  border-radius: 9999px !important;
}

.pakiety-cta__text {
  font-size: 1.25rem !important;
}
.pakiety-cta__btn {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;

  border-radius: 9999px;
  font-weight: 600;
  text-transform: uppercase;
  transition: 
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.2s ease;
}

.pakiety-cta__btn:hover {
  background-color: #fff;
  color: #000;
  transform: translateY(-2px);
}

.pakiety-cta__box {
  max-width: 600px !important;  /* np. zwężamy do 600px */
  margin: 0 auto !important;    /* wycentrowanie */
}

@media (max-width: 767px) {
  /* odsunięcie poziome dla całej głównej zawartości */
  #primary.content-area,
  /* oraz dla bloku CTA pakietów */
  section.pakiety-cta {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

/* Wymuś widoczny odstęp pod czarnym kontenerem, niezależnie od marginesów czy kolapsu */
.pakiety-cta::after {
  content: "";
  display: block;
  height: 2rem; /* wyskość odstępu */
}

.pakiety-treningow .container-title {
  text-align: center;
  font-size: 2.5rem;      /* dopasowane do wcześniejszego głównego tytułu */
  font-weight: 700;       /* pogrubienie */
  line-height: 1.2;       /* zwarta wysokość wiersza */
  margin: 0 0 1.5rem;     /* odstęp poniżej tytułu */
}

























/*PRZEKAŹNIKI DO KONKRETNYCH TRENINGÓW*/
.training-container {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

/* Każdy blok treningu */
.training-card {
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 1.5rem;
  flex: 1 1 45%;
  box-sizing: border-box;
}

/* Jeśli chcesz dokładnie 2 w wierszu: */
.training-card:nth-child(odd) { margin-right: 1rem; }

/* Nagłówek */
.training-title {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

/* Krótki opis */
.training-short {
  font-weight: 500;
  margin-bottom: 1rem;
  color: #555;
}

/* Dłuższy opis – każda linijka odseparowana */
.training-description p {
  margin: 0.5rem 0;
  line-height: 1.4;
  color: #333;
}

/* Cena */
.training-price {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 1rem 0;
}

/* Przycisk */
.training-button {
  display: inline-block;
  background: #000;
  color: #fff;
  padding: 0.6rem 1.2rem;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease;
}
.training-button:hover {
  background: #333;
  transform: translateY(-2px);
}

/* RESPONSYWNOŚĆ: na mobile 1 w wierszu */
@media (max-width: 767px) {
  .training-card {
    flex: 0 0 100%;
    margin-right: 0 !important;
  }
}

.training-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center; /* <-- to centruje karty */
}

/* Wyśrodkowanie nagłówka strony */
.training-header {
  text-align: center;
}

/* Jeśli potrzebujesz dodatkowo wyrównać marginesy */
.training-header__title,
.training-header__subtitle {
  margin-left: auto;
  margin-right: auto;
}

/* Usuń czarne obramowanie i cień z kart treningów */
.training-card {
  border: none !important;
  box-shadow: none !important;
}

/* Spraw, by karty były szersze i wyższe */
.training-container {
  justify-content: center; /* upewnij się, że karty są wyśrodkowane */
  gap: 2.5rem;             /* trochę większy odstęp między kartami */
}

.training-card {
  /* szerokość ok. 45% kontenera (dwie obok siebie z odstępem) */
  flex: 0 0 45% !important;
  max-width: 45% !important;

  /* minimalna wysokość, by karty były wyższe */
  min-height: 400px !important;

  /* zachowujemy padding wewnątrz */
  padding: 2rem 1.5rem !important;
  box-sizing: border-box;
}

/* Na urządzeniach mobilnych wróć do pełnej szerokości */
@media (max-width: 767px) {
  .training-card {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
  }
}

/* Większy odstęp między nagłówkiem a blokami treningów */
.training-header {
  margin-bottom: 4rem !important;
}

/* Wymuszenie kwadratu przy zachowaniu wysokości 400px */
.training-card {
  flex: 0 0 400px !important;
  max-width: 400px !important;
}

/* Styl krótkiego opisu „Indywidualny / Personalny” */
.training-short {
  font-size: 0.875rem;      /* lekko mniejszy tekst */
  font-style: normal;       /* usuń pochylenie */
  font-weight: 400;         /* standardowa grubość */
  color: #555;              /* stonowany, ciemnoszary odcień */
  text-align: center;       /* wyśrodkowanie */
  margin: 0.25rem 0 1rem;   /* niewielki odstęp ponad i większy pod */
  line-height: 1.3;         /* zwarta wysokość linii */
}

/* Doprecyzowane style dla linii „Indywidualny / Personalny” */
.training-short {
  /* Rozmiar czcionki ok. 0.85rem, by pasował proporcjami */
  font-size: 0.85rem !important;
  /* Normalna grubość (nie bold) */
  font-weight: 400 !important;
  /* Stonowany, ciemnoszary kolor */
  color: #444444 !important;
  /* Wyśrodkowanie pod tytułem */
  text-align: center !important;
  /* Usuń dodatkowe marginesy, tylko minimalne odstępy */
  margin: 0.25rem 0 1rem !important;
  /* Gęstość linii dopasowana do fontu */
  line-height: 1.2 !important;
  /* Pochylenie wyłączone, zachowujemy prosty krój */
  font-style: normal !important;
}

/* Przycisk w kartach – pełna szerokość i styl jak w drugiej grafice */
.training-button {
  display: block;              /* blokowy, zajmuje całą szerokość */
  width: 100%;                 /* pełna szerokość kontenera */
  text-align: center;          /* wyśrodkowanie tekstu */
  background-color: #000;      /* czarne tło */
  color: #fff;                 /* biały tekst */
  padding: 0.75rem 0;          /* 0.75rem góra/dół, brak poziomego paddingu */
  border-radius: 0.5rem;       /* lekko zaokrąglone narożniki */
  font-weight: 600;            /* nieco pogrubiony tekst */
  text-transform: none;        /* zachowujemy wielkość liter */
  margin-top: 1rem;            /* odstęp od góry */
  box-shadow: none;            /* bez dodatkowego cienia */
}

/* Ewentualny hover */
.training-button:hover {
  background-color: #222;      /* ciut jaśniejszy/cieńszy odcień przy najechaniu */
}

/* Pogrubienie krótkiego opisu pod tytułem */
.training-short {
  font-weight: 700 !important;  /* lub 'bold' */
}

/* Powiększenie tekstu krótkiego opisu w kartach treningów */
.training-short {
  font-size: 1rem !important;   /* nowy rozmiar — możesz podbić, np. do 1.1rem */
  line-height: 1.4 !important;  /* utrzymanie czytelnej wysokości linii */
}

/* Zmniejszenie odstępu między ceną a przyciskiem */
.training-button {
  margin-top: -10px !important; /* zamiast domyślnego 1rem */
}

/* Dopasowanie rozmiaru głównego nagłówka na stronie Treningi Piłkarskie */
.training-header__title {
  font-size: 2.5rem !important;  /* zmień na 2.25rem lub 2.75rem, aby idealnie dobrać wielkość */
  line-height: 1.2 !important;
}

/* Stylizacja linii opisu bez kropek, z lekką poświatą i akcentem */
.training-description p {
  font-style: italic;                          /* kursywa */
  color: #333;                                 /* ciemniejszy, ale nie czarny */
  margin: 0.6rem 0;                            /* odstępy między wierszami */
  font-size: 0.95rem;                          /* niewielka redukcja rozmiaru */
  line-height: 1.4;                            /* wygodna wysokość linii */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);   /* subtelna poświata pod tekstem */
  transition: color 0.3s ease;                 /* płynna zmiana koloru przy hover */
}
.training-description p:hover {
  color: #000;                                 /* ciemniejszy akcent przy najechaniu */
}

/* Delikatne pogrubienie linii opisu */
.training-description p {
  font-weight: 600 !important;  /* zamiast domyślnego 400 */
}

@media (max-width: 767px) {
  /* Zmniejszenie rozmiaru tytułu na urządzeniach mobilnych */
  .training-header__title {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 767px) {
  /* Kontener – trochę wewnętrznego paddingu i mniejszy gap */
  .training-container {
    padding: 0 1rem;
    gap: 1rem !important;
    justify-content: center;
  }

  /* Karty – zmniejszona szerokość, usuń minimalną wysokość */
  .training-card {
    flex: 0 0 90% !important;
    max-width: 90% !important;
    min-height: auto !important;
    padding: 1.5rem !important;
  }
}

@media (max-width: 767px) {
  /* Na tej stronie usuń ograniczenie szerokości „container” */
  .page-template-template-treningi-pilkarskie .container.mx-auto,
  .page-template-template-treningi-pilkarskie .site-main.container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

@media (max-width: 767px) {
  /* Nadpisujemy WSZYSTKIE główne wrappery na tej stronie */
  body.page-template-template-treningi-pilkarskie,
  body.page-template-template-treningi-pilkarskie #page,
  body.page-template-template-treningi-pilkarskie #primary,
  body.page-template-template-treningi-pilkarskie .content-area,
  body.page-template-template-treningi-pilkarskie #main,
  body.page-template-template-treningi-pilkarskie .site-main,
  body.page-template-template-treningi-pilkarskie .container,
  body.page-template-template-treningi-pilkarskie .container.mx-auto {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 1rem !important; /* lekki odstęp od krawędzi */
  }

  /* Upewniamy się, że trening-container też dochodzi do krawędzi */
  body.page-template-template-treningi-pilkarskie .training-container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    gap: 1rem !important;
    justify-content: center !important;
  }

  /* Karty w pełnej szerokości */
  body.page-template-template-treningi-pilkarskie .training-card {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 767px) {
  /* Zadbaj, by główna zawartość rozciągała się na 100% ekranu */
  body.page-template-template-treningi-pilkarskie #primary,
  body.page-template-template-treningi-pilkarskie #main,
  body.page-template-template-treningi-pilkarskie .site-main,
  body.page-template-template-treningi-pilkarskie .container.mx-auto,
  body.page-template-template-treningi-pilkarskie .offer-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 1rem !important; /* mały odstęp od krawędzi */
    box-sizing: border-box !important;
  }
}

@media (max-width: 767px) {
  /* Usuń ograniczenia szerokości Tailwindowych klas na tej stronie */
  body.page-template-template-treningi-pilkarskie .site-main,
  body.page-template-template-treningi-pilkarskie .site-main.container,
  body.page-template-template-treningi-pilkarskie .site-main.container.mx-auto,
  body.page-template-template-treningi-pilkarskie .container,
  body.page-template-template-treningi-pilkarskie .container.mx-auto {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 1rem !important; /* lekki odstęp od krawędzi */
    box-sizing: border-box !important;
  }
}

@media (max-width: 767px) {
  /* Wyłączienie domyślnego kontenera na tej stronie */
  #primary.content-area,
  #main.site-main,
  .site-main.container,
  .container.mx-auto {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

@supports(padding: max(0px)) {
  body.page-template-treningi-pilkarskie {
    background-color: #f5eee0 !important;
    padding-left: env(safe-area-inset-left)   !important;
    padding-right: env(safe-area-inset-right) !important;
    padding-top: env(safe-area-inset-top)     !important;
    padding-bottom: env(safe-area-inset-bottom)!important;
    box-sizing: border-box;
  }
}






















































































































/*OFERTAAAAAAAAAAA*/
.product-layout {
  display: flex;
  flex-wrap: wrap;
}

/* GALERIA: LEWA KOLUMNA 40% */
.product-gallery {
  flex: 0 0 40%;
  max-width: 40%;
  box-sizing: border-box;
  padding: 1rem;
}

/* REZERWA: PRAWA KOLUMNA 60% – na razie pusta */
.product-details {
  flex: 0 0 60%;
  max-width: 60%;
  box-sizing: border-box;
  padding: 1rem;
}

/* Główne zdjęcie */
.gallery-main {
  width: 100%;
  margin-bottom: 0.5rem;
}
.gallery-main img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

/* Miniaturki */
.gallery-thumbs {
  display: flex;
  gap: 0.5rem;
}
.gallery-thumbs .thumb {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 4px;
}
.gallery-thumbs .thumb:hover,
.gallery-thumbs .thumb:focus {
  outline: none;
  border-color: #000;
}

/* zawężamy kolumnę galerii do 30% */
.offer-gallery {
  flex: 0 0 30% !important;
  max-width: 30% !important;
}

/* wymuszamy sztywną szerokość głównego obrazka */
.offer-gallery__main img {
  display: block !important;
  margin: 0 auto !important;
  width: 300px !important;    /* <–– tutaj zmień na dowolny px jeśli za duże/za małe */
  max-width: 100% !important;  /* nie przekroczy naturalnej szerokości */
  height: auto !important;
}

/* Zaaplikuj to w Twoim Additional CSS albo bezpośrednio w szablonie, 
   upewniając się że ładuje się **po** wszystkich innych stylach */

#main-image {
  width: 300px !important;    /* ustawia dokładną szerokość w px */
  max-width: 100% !important;  /* nigdy nie będzie szersze niż kontener */
  height: auto !important;     /* wysokość zachowa proporcje */
  display: block !important;
  margin: 0 auto !important;   /* wycentruje w swoim kontenerze */
}

/* 1. Układ: lewa kolumna 40%, prawa 60% */
.product-layout {
  display: flex;
  gap: 20px;
}
.product-gallery {
  flex: 0 0 40%;
}
.product-details {
  flex: 1;
}

/* 2. Stylizacja głównego obrazka */
.gallery-main {
  margin-bottom: 10px;
  /* opcjonalnie: wymiar kontenera, np. aby nie był zbyt wysoki */
  max-width: 400px;
  max-height: 300px;
}
#mainImage {
  display: block;
  width: 100%;         /* wypełnia szerokość kontenera */
  height: auto;        /* zachowuje proporcje */
  object-fit: contain; /* zapobiega deformacji obrazka */
}

/* 3. Miniaturki */
.gallery-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.gallery-thumbs .thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .2s;
}
.gallery-thumbs .thumb:hover,
.gallery-thumbs .thumb.active {
  border-color: #333;
}

/* 1. Wymuś układ wertykalny w galerii */
.product-gallery {
  display: flex;
  flex-direction: column;
}

/* 2. Główne zdjęcie zajmuje całą szerokość kontenera */
.gallery-main {
  width: 100%;
  max-width: 400px;   /* lub inna pożądana szerokość */
  max-height: 300px;  /* lub inna pożądana wysokość */
  margin-bottom: 15px; /* odstęp pod zdjęciem */
}

/* 3. Miniaturki zawsze pod .gallery-main */
.gallery-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

/* 4. Styl miniaturek */
.gallery-thumbs .thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .2s;
}
.gallery-thumbs .thumb:hover,
.gallery-thumbs .thumb.active {
  border-color: #333;
}

/* Zamiast width:100% – tylko max-width, i push do prawej */
.gallery-main {
  max-width: 400px;      /* lub inna wartość, której używasz */
  max-height: 300px;     /* lub inna wysokość */
  margin: 0 0 15px auto; /* góra 0, dół 15px, lewo auto – czyli wyrównanie do prawej */
}

/* Główne zdjęcie wypełnia kontener .gallery-main */
#mainImage {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.gallery-main {
  width: 100%;           /* wypełnia całą szerokość swojej 40%-owej kolumny */
  margin: 0 0 15px 0;    /* tylko odstęp pod spodem */
}

#mainImage {
  width: 100%;
  height: auto;          /* ignorujemy wysokość, zachowując proporcje */
  object-fit: contain;
}

.gallery-main {
  width: 700px;          /* nowa, szersza wartość */
  margin: 0 0 15px auto; /* wyrównanie do prawej w kolumnie 40% */
}

#mainImage {
  width: 100%;
  height: auto;
  object-fit: contain;
}


.gallery-main {
  width: 100%;       /* wypełni całą szerokość kolumny galerii */
  max-width: none;   /* znosi ewentualne wcześniejsze limity */
  margin: 0 0 15px 0; /* tylko odstęp pod spodem */
}

#mainImage {
  width: 100%;       /* obraz wypełnia cały .gallery-main */
  height: auto;      /* zachowuje proporcje */
  object-fit: contain;
}

.gallery-main {
  width: 65%;             /* zmień na 80%–90%, według potrzeb */
  max-width: none;        /* usuń wszelkie limity z poprzednich reguł */
  margin: 0 auto 15px;    /* wycentrowanie w kolumnie + odstęp pod spodem */
}

#mainImage {
  width: 100%;            /* zdjęcie wypełni cały kontener .gallery-main */
  height: auto;
  object-fit: contain;
}

.gallery-main {
  width: 66%;        /* zostaw to, co masz */
  /* nie ustawiamy tu wysokości – robi to #mainImage */
  overflow: hidden;  /* obetnie nadmiar, jeśli obraz będzie większy */
}

#mainImage {
  width: 100%;       /* wypełnia 60% strony */
  height: 700px;     /* nowa, krótsza wysokość – możesz zmienić na dowolną wartość */
  object-fit: cover; /* wypełni cały kontener, przycinając boczne fragmenty, ale zachowa proporcje */
}

.gallery-main {
  width: 65%;        /* teraz 65% szerokości kolumny */
  overflow: hidden;  /* ukryje nadmiar, jeśli proporcje będą różne */
  margin: 0 auto 15px;
}

#mainImage {
  width: 100%;       /* wypełnia 65% strony */
  height: 600px;     /* ustalona wysokość */
  object-fit: cover; /* zachowa proporcje, przytnij nadmiar */
}

/* kontener galerii nie obcina już dziecka */
.gallery-main {
  overflow: visible; 
  margin: 0 auto 15px;
}

/* obrazek sam ma 520×650 i zachowuje całe swoje proporcje */
#mainImage {
  display: block;
  width: 520px;
  height: 650px;
  object-fit: contain; /* całość obrazka w obszarze 520×650, bez przycinania */
}

/* Wypełnienie pionowe całego widoku minus header i footer */
#primary.site-main {
  min-height: calc(200vh - 200px); /* dostosuj 200px do sumy wysokości nagłówka i stopki */
  padding-top: 20px;                /* opcjonalne odsunięcie od headera */
  padding-bottom: 20px;             /* dodatkowy odstęp pod stopką */
}

/* 1. Main – usuń każdą wysokość i min-height, pozwól mu rosnąć z zawartością */
#primary.site-main {
  height: auto !important;
  min-height: auto !important;
  padding: 20px 0; /* opcjonalnie: odstępy ponad/poniżej */
}

/* 2. Flex layout – nie rozciągaj w pionie dzieci, ale skup się na treści */
.product-layout {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start; /* wyrównanie do góry, nie rozciąganie na wysokość */
  gap: 20px;
}

/* 3. Lewa i prawa kolumna – Flex: lewa 40%, prawa 60% ale obie rosną z zawartością */
.product-gallery {
  flex: 0 0 40%;
}
.product-details {
  flex: 1; /* 60%, ale też rośnie z treścią */
}

/* 4. Galeria – usuń wszelkie fixed height’y */
.gallery-main,
#mainImage {
  height: auto !important;
  max-height: none !important;
}

/* 5. Jeśli po drodze gdzieś masz min-height na product-layout czy na gallery, 
      usuń/zakomentuj je albo nadpisz tak: */
.product-layout,
.product-gallery,
.product-details {
  min-height: 0 !important;
}

.product-gallery {
  overflow: visible;
}

/* Miniaturki – nowy rozmiar */
.gallery-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;           /* zwiększony odstęp między miniaturkami */
  margin-top: 10px;    /* niewielki odstęp od głównego obrazka */
}

.gallery-thumbs .thumb {
  width: 100px;        /* nowa szerokość */
  height: 100px;       /* nowa wysokość */
  object-fit: cover;   /* przytnie nadmiar, zachowując proporcje */
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s, transform 0.2s;
}

.gallery-thumbs .thumb:hover,
.gallery-thumbs .thumb.active {
  border-color: #333;
  transform: scale(1.05);  /* lekko powiększy miniaturkę przy najechaniu/aktywnej */
}

/* 1. Kolumna galerii nadal 40% strony */
.product-gallery {
  flex: 0 0 40%;
  display: flex;
  flex-direction: column;
}

/* 2. Wrapper zdjęcia wypełnia 100% kolumny i jest flex-container */
.gallery-main {
  display: flex;
  justify-content: flex-end; /* wyrównuje dziecko (img) do prawej */
  width: 100%;
}

/* 3. Sam obrazek zajmuje % szerokości wrappera */
#mainImage {
  width: 80%;        /* możesz zmienić: np. 75%, 85% – według gustu */
  height: 650px;     /* jak potrzebujesz */
  object-fit: cover;
  display: block;    /* usuwa domyślne inline-spacing */
}

.product-gallery .gallery-thumbs {
  display: flex;
  gap: 10px;          /* odstęp między miniaturkami */
  width: 65%;         /* taka sama szerokość, jak masz ustawioną dla .gallery-main */
  margin-left: auto;  /* „przylgnięcie” do prawej krawędzi kolumny */
}

/* 1. Kontener galerii jako flex-kolumna */
.product-gallery {
  display: flex;
  flex-direction: column;
}

/* 2. Wrapper głównego zdjęcia (ma już width:65%; margin-left:auto;) */

/* 3. Wrapper miniaturek wyrównany pod głównym obrazkiem */
.gallery-thumbs {
  width: 65% !important;           /* ta sama szerokość, co główne zdjęcie */
  display: flex !important;        
  flex-wrap: nowrap !important;    /* wszystkie w jednym rzędzie */
  gap: 10px !important;            
  margin: 0 !important;            
  align-self: flex-end !important; /* przykleja wrapper do prawej krawędzi kolumny */
}

.product-gallery {
  display: flex;
  flex-direction: column;
}

/* główny obrazek masz już gdzieś tak: 
.gallery-main { width:65%; align-self:flex-end; … }
#mainImage { width:100%; … }
*/

/* teraz just dla miniaturek: */
.gallery-thumbs {
  width: 65%;              /* dokładnie jak .gallery-main */
  align-self: flex-end;    /* wypchnie wrapper do prawej krawędzi kolumny */
  margin-top: 10px;        /* lekki odstęp od obrazka */
  display: flex;
  justify-content: center; /* wycentruje miniaturki wewnątrz wrappera */
  gap: 10px;
}

/* reszta bez zmian */
.gallery-thumbs .thumb {
  width: 100px;
  height: 100px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .2s, transform .2s;
}
.gallery-thumbs .thumb:hover,
.gallery-thumbs .thumb.active {
  border-color: #333;
  transform: scale(1.05);
}

.gallery-thumbs {
  display: flex;
  gap: 10px;
  width: 65%;           /* ten sam % co główne zdjęcie */
  margin-left: auto;    /* wyrównanie do prawej */
}

.gallery-thumbs .thumb {
  flex: 1 1 0;          /* każdy element może rosnąć i kurczyć się równomiernie */
  max-width: 120px;     /* opcjonalne górne ograniczenie */
  height: auto;         /* zachowuje proporcje */
  object-fit: cover;
}

.gallery-thumbs {
  display: flex;
  gap: 10px;
  width: 65%;
  margin: 0 auto;
  justify-content: center;

  /* lekko przesuwamy o 12% w lewo */
  transform: translateX(-12%);
}

.product-details .product-header h1 {
  font-size: 2.2rem;       /* dostosuj wielkość czcionki */
  font-weight: bold;
  margin-bottom: 1rem;   /* odstęp pod nagłówkiem */
  color: #111;           /* ew. kolor tekstu */
}

/* --- Mobile styles: do 767px szerokości ekranu --- */
@media (max-width: 767px) {

  /* 1. Cały układ galerii + detale jako kolumna */
  .product-layout {
    display: flex;
    flex-direction: column;
  }

  /* 2. Kontener galerii na pełną szerokość */
  .product-gallery {
    flex: 0 0 auto;
    width: 100% !important;
    overflow: visible;
  }

  /* 3. Główne zdjęcie rozciągnięte na 100% ekranu */
  .gallery-main {
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    display: block;
  }
  #mainImage {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
  }

  /* 4. Miniaturki też na pełną szerokość i w rzędzie pod zdjęciem */
  .gallery-thumbs {
    width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center;
    gap: 8px;
    overflow-x: auto; /* dopóki się mieszczą – auto-scroll w poziomie */
  }

  /* 5. Prawa kolumna (detale) pod galerią */
  .product-details {
    width: 100% !important;
    padding: 15px;
  }
}

@media (max-width: 767px) {
  /* Rozszerzamy wrapper zdjęcia na całą szerokość widoku */
  .gallery-main {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  /* Sam obrazek także wypełnia pełną szerokość */
  #mainImage {
    width: 100vw !important;
    height: auto !important;
    object-fit: cover;
    margin: 0 !important;
    display: block;
  }

  /* Usuń wszelkie paddingi/marginesy z kontenera, jeśli nadal hamują pełną szerokość */
  .product-gallery,
  .product-layout,
  .site-main {
    padding: 0 !important;
    margin: 0 !important;
  }
}

@media (max-width: 767px) {
  /* usuń wszelkie marginesy/paddingi i ukryj poziomy scroll */
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
  }

  /* cały layout i kontenery galerii na full viewport width */
  .product-layout,
  .product-gallery,
  .gallery-main {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* sam obrazek na 100% szerokości wrappera (=100vw) */
  #mainImage {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (max-width: 767px) {
  /* 1) ukryj miniaturki */
  .gallery-thumbs {
    display: none !important;
  }

  /* 2) pokaż kropeczki */
  .gallery-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 10px 0;
  }
  .gallery-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ccc;
    transition: background 0.3s;
  }
  .gallery-dots .dot.active {
    background: #333;
  }
}

/* globalnie ukrywamy kropeczki */
.gallery-dots {
  display: none;
}

/* tylko na telefonach (≤767px) pokazujemy je jako flex */
@media only screen and (max-width: 767px) {
  .gallery-dots {
    display: flex;           /* pokazujemy kontener */
    justify-content: center; /* wyśrodkowanie */
    gap: 8px;
    margin: 10px 0;
  }
  .gallery-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ccc;
    transition: background 0.3s;
  }
  .gallery-dots .dot.active {
    background: #333;
  }
}

@media only screen and (max-width: 767px) {
  .gallery-main,
  #mainImage {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 400px !important;     /* zwiększona wysokość */
    object-fit: cover !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
}

@media only screen and (max-width: 767px) {
  .gallery-main,
  #mainImage {
    border-radius: 0 !important;
  }
}

#mainImage {
  transition: opacity 0.4s ease-in-out;
  opacity: 1;
}

#mainImage.fade-out {
  opacity: 0;
}

@media only screen and (max-width: 767px) {
  /* 1) galerii głównej: */
  .gallery-main {
    position: relative;
    overflow: hidden;
    width: 100vw !important;
    margin: 0 !important;
    height: 400px; /* dostosuj wysokość */
  }

  /* 2) tor slajdów: */
  .gallery-track {
    display: flex;
    transition: transform 0.3s ease;
    touch-action: pan-y;
  }

  .gallery-track .slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 3) kropeczki paginacji (jeśli używasz) */
  .gallery-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 10px 0;
  }
  .gallery-dots .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ccc;
    transition: background 0.3s;
  }
  .gallery-dots .dot.active {
    background: #333;
  }

  /* 4) ukrywamy miniaturki */
  .gallery-thumbs {
    display: none !important;
  }
}

@media only screen and (max-width: 767px) {
  .gallery-main {
    overflow: hidden;
    position: relative;
    width: 100vw !important;
    margin: 0 !important;
    height: 400px; /* dostosuj wysokość */
  }
  .gallery-track {
    display: flex;
    transition: transform 0.3s ease;
    touch-action: pan-y;
  }
  .gallery-track .slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .gallery-thumbs {
    display: none !important;
  }
  .gallery-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 10px 0;
  }
  .gallery-dots .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ccc;
    transition: background 0.3s;
  }
  .gallery-dots .dot.active {
    background: #333;
  }
}

@media only screen and (max-width: 767px) {
  .gallery-main {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    width: 100vw !important;
    height: 400px; /* Twoja mobilna wysokość */
    margin: 0 !important;
    padding: 0;
  }
  .gallery-track {
    display: flex;
  }
  .gallery-track .slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    scroll-snap-align: start;
  }
  .gallery-thumbs {
    display: none !important;
  }
  .gallery-dots {
    display: flex !important;
    justify-content: center;
    gap: 8px;
    margin: 10px 0;
  }
  .gallery-dots .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ccc;
    transition: background 0.3s;
  }
  .gallery-dots .dot.active {
    background: #333;
  }
}

@media only screen and (max-width: 767px) {
  .gallery-main {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    width: 100vw !important;
    height: 400px; /* Twoja wysokość mobilna */
    margin: 0 !important;
    padding: 0;
  }
  .gallery-track {
    display: flex;
  }
  .gallery-track .slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    scroll-snap-align: start;
  }
  .gallery-thumbs {
    display: none !important;
  }
  .gallery-dots {
    display: flex !important;
    justify-content: center;
    gap: 8px;
    margin: 10px 0;
  }
  .gallery-dots .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ccc;
    transition: background 0.3s;
  }
  .gallery-dots .dot.active {
    background: #333;
  }
}

@media only screen and (max-width: 767px) {
  /* główny obrazek */
  #mainImage {
    touch-action: pan-y;           /* tylko pionowy scroll na wrapperze */
    will-change: transform;        /* optymalizacja GPU */
    transition: transform 0.3s ease;
    cursor: grab;
  }
  #mainImage.dragging {
    transition: none;              /* bez transition podczas przeciągania */
    cursor: grabbing;
  }
}

@media only screen and (max-width: 767px) {
  .gallery-main {
    position: relative;        /* potrzebne do absolutnego pozycjonowania */
    overflow: hidden;
  }
  .gallery-main img {
    display: block;
    width: 100%;
    height: auto;
  }
  .gallery-main .anim {
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.3s ease;
    will-change: transform;
  }
}

/* DOMYŚLNIE UKRYJ KROPECZKI I TRACK NA DESKTOPIE */
.gallery-dots { display: none; }

/* ——— MOBILE ONLY (≤767px) ——— */
@media only screen and (max-width: 767px) {
  /* ukryj miniaturki i oryginalny <img> */
  .gallery-thumbs { display: none !important; }
  #mainImage     { display: none !important; }

  /* kontener scroll-snap */
  .gallery-main {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    width: 100vw !important;
    height: 400px;           /* dostosuj wysokość */
    margin: 0 !important;
    padding: 0;
    box-sizing: border-box;
    position: relative;
  }

  /* track i slajdy */
  .gallery-track {
    display: flex;
  }
  .gallery-track .slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    scroll-snap-align: start;
  }

  /* pokaż kropeczki */
  .gallery-dots {
    display: flex !important;
    justify-content: center;
    gap: 8px;
    margin: 10px 0;
  }
  .gallery-dots .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ccc;
    transition: background 0.3s;
  }
  .gallery-dots .dot.active {
    background: #333;
  }
}
/* ——— END MOBILE ONLY ——— */

/* ——— MOBILE ONLY (≤767px) ——— */
@media only screen and (max-width: 767px) {

  /* ukryj miniaturki i oryginalne #mainImage */
  .gallery-thumbs,
  #mainImage {
    display: none !important;
  }

  /* kontener poziomego scroll-snap */
  .gallery-main {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    width: 100vw !important;
    height: 400px;           /* ustaw wedle potrzeb */
    margin: 0 !important;
    padding: 0;
    box-sizing: border-box;
    position: relative;
  }

  /* track i slajdy */
  .gallery-track {
    display: flex;
  }
  .gallery-track .slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    scroll-snap-align: start;
  }

  /* kropeczki */
  .gallery-dots {
    display: flex !important;
    justify-content: center;
    gap: 8px;
    margin: 10px 0;
  }
  .gallery-dots .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ccc;
    transition: background 0.3s;
  }
  .gallery-dots .dot.active {
    background: #333;
  }
}
/* ——— END MOBILE ONLY ——— */

/* ——— MOBILE ONLY (≤767px) ——— */
@media only screen and (max-width: 767px) {
  .gallery-thumbs,
  #mainImage:not(.forced-visible) { display: none !important; }

  .gallery-main {
    overflow: hidden !important;
    width: 100vw !important;
    height: 400px !important;   /* dostosuj mobilną wysokość */
    position: relative !important;
    box-sizing: border-box !important;
  }
  /* zapas dla nextImg, ale nie potrzebujesz track/slides */
  .gallery-main img {
    display: block;
  }
}
/* ——— END MOBILE ONLY ——— */

/* Kontener galerii */
.product-gallery {
  display: flex;
  flex-direction: column;
}

/* Główne zdjęcie: zajmuje 100% szerokości, ukrywa wszystko poza obszarem */
.gallery-main {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.gallery-main img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* (Opcjonalnie) kropeczki pod galerią */
.gallery-dots {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
.gallery-dots .dot {
  width: 8px;
  height: 8px;
  background: #ccc;
  border-radius: 50%;
  margin: 0 4px;
  cursor: pointer;
}
.gallery-dots .dot.active {
  background: #333;
}


@media only screen and (max-width: 767px) {
  #mainImage {
    display: block !important;
  }
}

/* Na samym dole Twojego pliku CSS (lub w osobnym pliku ładowanym po wszystkich innych) */
@media only screen and (max-width: 767px) {
  #mainImage {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

@media only screen and (max-width: 767px) {
  /* Wyłącz scroll-snap i przewijanie poziome */
  .gallery-main {
    overflow-x: hidden !important;
    scroll-snap-type: none !important;
    -webkit-overflow-scrolling: auto !important;
  }
}

.product-header {
  margin-bottom: 1rem;
}

.product-subtitle {
  display: block;
  color: #E87722;         /* odcień pomarańczowy, możesz dostosować */
  font-size: 0.875rem;    /* ~14px */
  font-weight: 600;
  text-transform: uppercase;
  margin: 0 0 0.25rem;    /* odstęp pod spodem przed h1 */
  letter-spacing: 0.05em; /* opcjonalnie lekkie rozciągnięcie liter */
}
.product-header h1 {
  margin: 0;
  font-size: 1.75rem;     /* ~28px, dostosuj według potrzeb */
}

/* meta-tekst pod opisem oferty */
.product-type {
  font-size: 0.875rem;      /* ok. 14px */
  font-style: italic;       /* jak w kartach */
  color: #666;              /* szary odcień */
  margin-top: 0.5rem;       /* niewielki odstęp od opisu */
  text-transform: none;     /* zachowaj normalny zapis */
  line-height: 1.4;
}

.product-type {
  letter-spacing: 0.02em;
  font-weight: 400;
}

@media only screen and (max-width: 767px) {
  .product-header h1 {
    white-space: nowrap;        /* nie pozwala na łamanie linii */
    overflow: hidden;           /* ukrywa ewentualny wystający fragment */
    text-overflow: ellipsis;    /* (opcjonalnie) dodaje „…” jeśli się nie zmieści */
    font-size: 1.1rem;         /* dostosuj, by tytuł zmieścił się w szerokości ekranu */
  }
}

@media only screen and (max-width: 767px) {
  .product-header h1 {
    /* zniosienie wszelkich ograniczeń szerokości tylko dla tego elementu */
    display: block !important;
    width: auto !important;
    max-width: none !important;

    /* przywrócenie normalnego łamania linii */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

@media only screen and (max-width: 767px) {
  .product-header h1 {
    font-size: 1.5rem !important;   /* zmniejsz w razie potrzeby na 1.2rem, 1.3rem itp. */
    line-height: 1.3 !important;     /* zachowaj dobrą czytelność */
  }
}

.product-price {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 2rem;                /* ok. 32px na desktopie */
  font-weight: 700;
  color: #E87722;                  /* pomarańczowy akcent */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  margin: 0.5rem 0 1rem;           /* odstęp nad i pod ceną */
  line-height: 1.1;
}

@media only screen and (max-width: 767px) {
  .product-price {
    font-size: 1.5rem;             /* ok. 24px na telefonie */
    margin: 0.4rem 0 0.8rem;
  }
}

/* domyślnie chowamy kropki */
.gallery-dots {
  display: none !important;
}

/* tylko na telefonach (≤767px) przywracamy wyświetlanie */
@media only screen and (max-width: 767px) {
  .gallery-dots {
    display: flex !important;
  }
}





















/* Kontener przycisków */
.product-nav {
  display: flex;
  flex-direction: column;
  gap: 0;           /* bez odstępów między nimi */
  margin: 1.5rem 0;
}

/* „Przycisk” wyglądem jak nagłówek akordeonu */
.nav-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1rem 0;                /* pionowy odstęp, bez poziomego */
  font-size: 1rem;
  font-weight: 600;
  color: #111;                   /* ciemny, kontrastowy tekst */
  text-decoration: none;
  background: transparent;
  border: none;
  border-bottom: 1px solid #ddd; /* linia pod spodem */
  cursor: pointer;
}

/* Strzałka w prawo (możesz zmienić na inny znak/ikonę) */
.nav-button::after {
  content: "⌄";                  /* ▼ lub ⌄ */
  font-size: 0.8rem;
  transition: transform 0.2s;
}

/* Hover – lekki efekt podświetlenia */
.nav-button:hover {
  background: rgba(0,0,0,0.02);
}

/* (Opcjonalnie) Obracanie strzałki przy aktywnej sekcji */
.nav-button.active::after {
  transform: rotate(180deg);
}

/* Responsywnie – mniejszych telefonów */
@media (max-width: 767px) {
  .nav-button {
    font-size: 0.95rem;
    padding: 0.75rem 0;
  }
}

@media only screen and (max-width: 767px) {
  /* 1. Przełączamy układ 40/60 na jeden słupek */
  .product-layout {
    flex-direction: column !important;
  }
  .product-gallery,
  .product-details {
    width: 100% !important;
    max-width: none !important;
  }

  /* 2. Rozciągamy przyciski na całą szerokość */
  .product-nav {
    width: 100% !important;
    margin: 1.5rem 0 !important;
  }
  .nav-button {
    width: 100% !important;
    box-sizing: border-box;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Powiększenie font-size przycisków */
.nav-button {
  font-size: 1.125rem !important;  /* ~18px zamiast 16px */
}

/* Dla mobilków – proporcjonalnie większy tekst */
@media only screen and (max-width: 767px) {
  .nav-button {
    font-size: 1.0625rem !important; /* ~17px na telefonie */
  }
}

@media only screen and (max-width: 767px) {
  /* usuwamy maksymalnie przerwę pod kropkami */
  .gallery-dots {
    margin-bottom: 0 !important;
  }

  /* usuwamy maksymalnie przerwę nad podtytułem */
  .product-subtitle {
    margin-top: 0 !important;
  }

  /* ewentualne lekkie nakładanie się, jeśli chcesz jeszcze ciaśniej */
  .gallery-dots {
    margin-bottom: -0.4rem !important;
  }
  .product-subtitle {
    margin-top: -0.4rem !important;
  }
}

@media only screen and (max-width: 767px) {
  /* Zmniejszenie przerwy między tytułem a krótkim opisem */
  .product-header h1 {
    margin-bottom: 0.05rem !important;  /* domyślnie mogło być np. 0.5rem */
  }
  .product-type {
    margin-top: 0.05rem !important;     /* domyślnie mogło być np. 0.5rem */
  }
}

.product-price {
  display: inline-block;
  background-color: #333;         /* ciemne, kontrastowe tło */
  color: #fff !important;         /* biały tekst */
  font-size: 1.5rem;              /* ~24px */
  font-weight: 700;
  padding: 0.3rem 0.8rem;
  border-radius: 0.25rem;         /* zaokrąglone rogi */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  margin: 0.5rem 0 1rem;          /* odstęp nad i pod ceną */
  line-height: 1;
}

/* adaptacja na telefonach */
@media only screen and (max-width: 767px) {
  .product-price {
    font-size: 1.25rem;           /* ~20px */
    padding: 0.25rem 0.6rem;
    margin: 0.4rem 0 0.8rem;
  }
}

@media only screen and (max-width: 767px) {
  /* upewniamy się, że kolumna ma odpowiedni padding */
  .product-details {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* przyciski „wchodzą” w padding kontenera, bez dodatkowego przesunięcia */
  .product-nav {
    margin: 1rem 0 !important;
  }
  .nav-button {
    margin: 0 !important;       /* usuń marginalne odsunięcie */
    padding-left: 0 !important;  /* tekst zaczyna się przy krawędzi paddingu */
    padding-right: 0 !important;
    width: 100% !important;
  }
}

/* Nieznaczne powiększenie fontu przycisków */
.nav-button {
  font-size: 1.125rem !important;  /* z 1rem → 1.125rem (~18px) */
}

/* Drobna modyfikacja dla mobilków */
@media only screen and (max-width: 767px) {
  .nav-button {
    font-size: 1.1875rem !important;  /* ~19px na telefonie */
  }
}

@media only screen and (max-width: 767px) {
  .nav-button {
    /* usuń tap highlight na WebKit */
    -webkit-tap-highlight-color: transparent;
    /* zapobiega zaznaczeniu tła przy aktywacji */
    background-color: transparent !important;
  }
  .nav-button:active,
  .nav-button:focus {
    /* zbij domyślny efekt active/focus */
    background-color: transparent !important;
    outline: none !important;
  }
}

/* Pogrubienie separatorów między nav‐buttonami */
.product-nav .nav-button {
  border-bottom-width: 2px !important;    /* z 1px → 2px */
  border-bottom-style: solid !important;
  border-bottom-color: #bbb !important;    /* ciut ciemniejszy szary, możesz zmienić na #999 lub inny */
}

/* Usuń dolną linię przy ostatnim przycisku */
.product-nav .nav-button:last-child {
  border-bottom: none !important;
}

/* Usuń tę regułę, żeby kreska pod ostatnim przyciskiem też została */
.product-nav .nav-button:last-child {
  border-bottom: none !important;
}

@media only screen and (max-width: 767px) {
  /* Powiększenie strzałki w przyciskach na telefonach */
  .nav-button::after {
    font-size: 1.5rem !important;  /* dopasuj wartość wedle uznania */
    line-height: 1 !important;
  }
}

@media only screen and (max-width: 767px) {
  .nav-button {
    align-items: center; /* upewnij się, że są wyśrodkowane pionowo */
  }
  .nav-button::after {
    /* już masz większy font-size; teraz podnieść o kilka pikseli */
    display: inline-block;
    transform: translateY(-4px) !important; /* przesunięcie w górę */
  }
}

@media only screen and (min-width: 768px) {
  .section-content {
    /* Pełna szerokość minus lewy offset */
    margin-left: calc(40% + 1rem) !important;
    width: calc(100% - (40% + 1rem)) !important;

    /* Usuń ewentualne ograniczenia centrowania */
    max-width: none !important;
    /* Zachowaj tylko wewnętrzny padding dla czytelności */
    padding: 0 1rem !important;
  }
}

/* CTA “Sprawdź terminy…” pod 40/60 */
.product-cta {
  width: 100%;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 600;
  color: #E87722;             /* Twój pomarańczowy akcent */
  margin: 2rem 0;             /* odstęp od kolumn i sekcji */
  padding: 1rem;
  background: #fff5eb;        /* jasne tlewko nawiązujące do brandingu */
  border-radius: 0.5rem;      /* delikatnie zaokrąglone rogi */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Responsywne zmiany dla mobilków */
@media only screen and (max-width: 767px) {
  .product-cta {
    font-size: 1.1rem;
    margin: 1.5rem 0;
    padding: 0.75rem;
  }
}

@media only screen and (min-width: 768px) {
  .nav-button {
    width: auto !important;          /* pozwala dopasować szerokość do treści */
    max-width: 725px !important;     /* maksymalnie 300 px, zmień wedle potrzeby */
  }
}

/* Nieznaczne powiększenie fontu w nav‐button */
.nav-button {
  font-size: 1.25rem !important;  /* ~20px – dostosuj wedle uznania */
}

/* Jeśli chcesz trochę mniejsze powiększenie na telefonach */
@media only screen and (max-width: 767px) {
  .nav-button {
    font-size: 1.25rem !important; /* ~18px */
  }
}

.nav-button::after {
  font-size: 1.3em !important;    /* 1.3× rozmiaru rodzica */
  line-height: 1 !important;
  font-weight: 700 !important;
}

/* Kontener przycisków akcji */
.product-actions {
  display: flex;
  gap: 1rem;
  margin: 1.5rem 0;
}

/* Wspólne style przycisków */
.action-button {
  cursor: pointer;
  border: none;
  border-radius: 0.25rem;
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  transition: all 0.2s;
}

/* 1) Czarny przycisk “Dodaj do koszyka” */
.btn-add-to-cart {
  background: #000;
  color: #fff;
}
.btn-add-to-cart:hover {
  background: #555;
}

/* 2) Konturowy przycisk “Sprawdź terminy treningów” */
.btn-scroll-terms {
  background: transparent;
  color: #333;
  border: 2px solid #ccc;
}
.btn-scroll-terms:hover {
  border-color: #000;
  color: #000;
}

/* Płynny scroll — już pewnie masz, ale na wszelki wypadek */
html {
  scroll-behavior: smooth;
}

/* Podniesienie strzałki “v” w nav-button */
.nav-button::after {
  display: inline-block;
  /* zamiast translateY(-2px), większy przesuw: */
  transform: translateY(-8px) !important;
  /* upewnij się, że używamy tej samej wielkości co wcześniej */
  line-height: 1 !important;
}

/* Stacking przycisków pod sobą */
.product-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important; /* odstęp między przyciskami */
  align-items: flex-start; /* wyrównanie do lewej krawędzi */
}

/* Pełne zaokrąglenie przycisków */
.btn-add-to-cart,
.btn-scroll-terms {
  border-radius: 999px !important;   /* duża wartość gwarantuje pill‐shape */
}

/* Dla pewności usuń ewentualne inne border‐radius */
.btn-add-to-cart {
  border-radius: 999px !important;
}
.btn-scroll-terms {
  border-radius: 999px !important;
}

/* 1) Powiększenie przycisków i wyrównanie rozmiarów */
.product-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  align-items: stretch;          /* każdemu przyciskowi daje tę samą szerokość */
}

.product-actions .action-button {
  width: 100% !important;        /* pełna szerokość rodzica */
  padding: 1rem 1.5rem !important; /* więcej paddingu dla większego rozmiaru */
  font-size: 1.25rem !important;   /* większy tekst */
  box-sizing: border-box;         /* uwzględnia padding w szerokości */
}

/* 2) Opcjonalnie ogranicz max‐width, jeśli nie chcesz, żeby były bardzo szerokie */
@media only screen and (min-width: 768px) {
  .product-actions {
    align-items: center;          /* środek, jeśli węższy max-width chcemy centrować */
  }
  .product-actions .action-button {
    max-width: 300px !important;  /* oba przyciski o tej samej maksymalnej szerokości */
  }
}

.product-actions .action-button {
  font-size: 1.125rem !important;  /* ~18px zamiast 1.25rem (~20px) */
  padding: 0.9rem 1.5rem !important; /* delikatnie mniej „wysoki” przycisk */
}

/* Opcjonalnie – na telefonach można jeszcze trochę zmniejszyć */
@media only screen and (max-width: 767px) {
  .product-actions .action-button {
    font-size: 1rem !important;     /* ~16px */
    padding: 0.8rem 1.2rem !important;
  }
}

@media only screen and (min-width: 768px) {
  /* Usuń wszelkie sztuczne przesunięcia */
  .product-actions {
    margin: 1.5rem 0 !important;      /* tylko odstęp w pionie */
    padding: 0 !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* wyrównanie do lewej krawędzi kontenera */
  }

  /* Przyciski dostosowują się do szerokości treści + paddingu .product-details */
  .product-actions .action-button {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;             /* usuń zewnętrzne marginesy */
    align-self: stretch;              /* lub flex-start, jeśli chcesz tylko tyle co treść */
  }
}

@media only screen and (min-width: 768px) {
  .product-actions .action-button {
    width: auto !important;
    max-width: 300px !important;  /* zmień 300px na dowolną szerokość */
    box-sizing: border-box;
  }
}

/* od 0 do 1200px — content ma 100% szerokości */
body {
  max-width: 100vw;
  margin: 0 auto;
}

/* od 1200px wzwyż — content ograniczony do 1140–1200px i wycentrowany */
@media (min-width: 1200px) {
  body {
    max-width: 1320px; /* lub 1200px, w zależności od projektu */
    overflow-x: hidden;
  }
}


/* Ustawienie tła całej strony na #DADADA */
body {
  background-color: #E0DBD2 !important;
}

/* Jeśli chcesz zmienić tylko tło głównego kontenera z treścią */
#primary,
.site-main,
.product-layout {
  background-color: #E0DBD2 !important;
}

/* wymuś tło boczków po bokach */
html,
body {
  background-color: #E0DBD2 !important;
}

footer.site-footer {
  background-color: #000000 !important;
}

.site-main, 
.content-container {
  overflow: visible !important;
}

footer.site-footer {
  position: relative !important;
  width: 100vw !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  max-width: none !important;
  background-color: #000000 !important;
  z-index: 1;
}

@media screen and (min-width: 1024px) {
  /* 1) Zmniejszenie logo */
  .site-header .logo span {
    font-size: 1.5rem !important;
    line-height: 1 !important;
  }

  /* 2) Zmniejszenie ikon domu, profilu i koszyka */
  .site-header .header-left a i,
  .site-header .header-right a i,
  .site-header .cart-open-btn i {
    font-size: 1.25rem !important;
  }

  /* 3) Dostosowanie paddingów, by header był niższy */
  .site-header .header-left,
  .site-header .header-right,
  .site-header .cart-open-btn {
    padding: 0.5rem !important;
  }
}

@media screen and (min-width: 1024px) {
  .site-header .logo span {
    font-size: 2.3rem !important;
  }
}

@media screen and (min-width: 1024px) {
  /* Dostosowanie rozmiaru ikon w headerze */
  .site-header .header-left a i,
  .site-header .header-right a i,
  .site-header .cart-open-btn i {
    font-size: 1.6rem !important;
    line-height: 1 !important;
  }
}

@media screen and (min-width: 1024px) {
  /* 1) Usuń padding bezpośrednio z całego headera */
  .site-header {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  /* 2) Usuń dodatkowe marginesy wokół logo */
  .site-header .logo {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* 3) Zmniejsz pionowe paddingi przy ikonach (lewy/prawy bok headera) */
  .site-header .header-left,
  .site-header .header-right,
  .site-header .cart-open-btn {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }

  /* 4) Usuń/zmniejsz pionowe paddingi w menu pod headerem */
  .double-menu {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .double-menu .menu-row a {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
}

@media screen and (min-width: 1024px) {
  /* Zmniejszenie czcionki w górnym menu */
  .double-menu .menu-row.long-names a,
  .double-menu .menu-row.short-names a {
    font-size: 1.5rem !important;  /* dostosuj wartość, np. 0.9rem lub 1.1rem */
  }
}

/* —————————  CZARNE BOCZKI W STOPCE  ————————— */
footer.site-footer{
  /* → tło na całe skrzydła */
  background:#000 !important;

  /* → wyciągamy stopkę na pełną szerokość ekranu  */
  width:100vw !important;
  left:50% !important;
  transform:translateX(-50%) !important;

  /* → nie pozwól niczemu jej „przyciąć”  */
  overflow:visible !important;
}

/* skrzydła z tła – korzystamy z cienienia, więc nic nie wycina */
footer.site-footer{
  box-shadow:0 0 0 9999px #000 !important;
  clip-path:inset(0 -9999px) !important;
}

/* === czarne boczki TYLKO na wysokości stopki ============ */
/* 1) wysokość stopki wpisz raz tutaj ↓ */
:root{
  --footer-h: 240px;   /* jeśli stopka ma ~240 px; zmień gdy inna */
}

/* 2) powyżej 1200 px dodajemy „dwu-kolorowe” tło dla <body>  */
@media (min-width:1200px){
  body{
    /* warstwa bazowa – Twój beż */
    background:#E0DBD2 !important;

    /* warstwa górna – gradient, który
       przez 100%-240 px jest beżowy,
       a ostatnie 240 px (wysokość stopki) robi czarne */
    background:
      linear-gradient(
        to bottom,
        #E0DBD2 0 calc(100% - var(--footer-h)),
        #000      calc(100% - var(--footer-h)) 100%
      ) !important;
    /* nic więcej nie zmieniamy: szer., marginesów itp. */
  }
}


/* ─────────────────────────────────────────────
   1. Beżowe boczki tła (cała strona) – NA SPÓD
   ───────────────────────────────────────────── */
body::before,
body::after{
  z-index:0 !important;          /* poniżej całej treści strony */
}

/* ─────────────────────────────────────────────
   2. Czarny pas po bokach – WYŁĄCZNIE dla stopki
   ───────────────────────────────────────────── */
@media (min-width:1200px){       /* tylko gdy boczki w ogóle istnieją */
  footer.site-footer{
    position:relative;
    z-index:1;                   /* nad beżowymi paskami */
  }
  footer.site-footer::before,
  footer.site-footer::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;                   /* pełna wysokość stopki */
    width:50vw;                 /* znacznie szerzej niż beżowy margines */
    background:#000;            /* czarne „skrzydła” */
    pointer-events:none;
  }
  footer.site-footer::before{ left:-50vw; }   /* lewy bok */
  footer.site-footer::after { right:-50vw; }  /* prawy bok */
}

/* 1. Odblokuj poziome przelewanie się tylko na dużych ekranach */
@media (min-width:1200px){
  html{ overflow-x:visible !important; }
}

/* 2. (bez zmian) skrzydła przy stopce – jeśli masz już wklejone,
      nie powielaj, zostaw tylko jedną wersję.                     */

/* TYLKO NA DUŻYCH EKRANACH */
@media (min-width:1200px){

  footer.site-footer{
    position:relative;          /* potrzebne pseudo-elementom  */
    background:#000;            /* czarny środek (fallback)   */
    z-index:1;
  }

  /* lewy + prawy pseudo-element = czarne boki */
  footer.site-footer::before,
  footer.site-footer::after{
    content:"";
    position:absolute;
    top:0; bottom:0;
    width:50vw;                 /* pół ekranu na każdą stronę */
    background:#000;
    pointer-events:none;
    z-index:-1;                 /* pod treścią stopki         */
  }
  footer.site-footer::before{left:-50vw;}
  footer.site-footer::after {right:-50vw;}

  /* treść wraca do środka */
  footer .footer-container{
    max-width:1200px;           /* lub Twoje 1140 px          */
    margin:0 auto;
  }
}

/* ——————————————————————————
   Pełnoszerokie skrzydła dla HEADERA
   —————————————————————————— */
@media (min-width:1200px){

  /* sam pasek z logo + ikonami */
  .site-header{
    position:relative;
    background:#111;
    z-index:20;                     /* nad pseudo-elementami               */
  }
  .site-header::before,
  .site-header::after{
    content:"";
    position:absolute;
    top:0; bottom:0;
    width:50vw;                     /* lewa + prawa połowa ekranu          */
    background:#111;
    pointer-events:none;
    z-index:-1;                     /* pod prawdziwą treścią headera       */
  }
  .site-header::before{left:-50vw;}
  .site-header::after {right:-50vw;}
}

/* ——————————————————————————
   Pełnoszerokie skrzydła dla PASKA MENU
   —————————————————————————— */
@media (min-width:1200px){

  /* cały blok z linkami “NASI TRENERZY / NASZA OFERTA / …” */
  .double-menu{
    position:relative;
    background:#111;
    z-index:15;                     /* trochę mniej niż header, wystarczy  */
  }
  .double-menu::before,
  .double-menu::after{
    content:"";
    position:absolute;
    top:0; bottom:0;
    width:50vw;
    background:#111;
    pointer-events:none;
    z-index:-1;
  }
  .double-menu::before{left:-50vw;}
  .double-menu::after {right:-50vw;}

  /* Treść menu wraca do środka – te dwie linijki *nadpisują*
     ewentualne wcześniejsze max-width z Tailwinda / motywu  */
  .double-menu .menu-row{
    max-width:1200px;      /* dopasuj do tego, czego używasz przy layoucie */
    margin:0 auto;
  }
}

/* ——————————————————————————
   Konieczne odblokowanie poziomego obszaru
   (widzieliśmy, że masz overflow-x:hidden; – trzeba go wyłączyć)
   —————————————————————————— */
html{overflow-x:visible !important;}

/* —— SLIDER: pilnujemy, by siedział w 1200 px środku —— */
@media (min-width:768px){
  /* <- ZAMIEN  #simple-slider  NA RZECZYWISTY ID/KLASĘ, którą podglądniesz */
  #simple-slider{
    max-width:1200px;   /* dokładnie tyle samo, co reszta treści */
    margin:0 auto;      /* centrowanie między beżowymi "skrzydełkami" */
    overflow:hidden;    /* gdyby coś wystawało (np. animacje) */
  }
}

@media (min-width:768px){
  #simple-slider{
    position:relative;      /* daje kontekst elementom wewnątrz */
    left:0 !important;      /* zeruje ewentualne przesunięcia JS */
    transform:none !important; /* kasuje translateX(-50%) */
  }
}

/* 3 karty w jednym rzędzie — wszystkie urządzenia ≥ 768 px */
@media (min-width:768px){
  /* kontener z kartami */
  #offer .offer-cards{
    display:flex !important;
    gap:24px !important;          /* odstęp między kaflami; zmień wg gustu */
    justify-content:center;       /* wyśrodkowanie całego rzędu */
  }

  /* pojedyncza karta – 1/3 szerokości (z uwzględnieniem gap-ów) */
  #offer .offer-card{
    flex:0 1 calc((100% - 48px)/3) !important;  /* 48 px = 2 × 24 px gap-u */
    max-width:calc((100% - 48px)/3) !important;
  }
}

@media (min-width:768px){

  /* rząd + marginesy – to zostaje bez zmian */
  #kategorie .kategorie-row,
  #kategorie .kategorie-list{
    display:flex !important;
    gap:24px !important;
    padding:0 24px !important;
    box-sizing:border-box !important;
    justify-content:center;
  }

  /* ------------ NOWE / ZMODYFIKOWANE -------------- */
  /* sam kafel – szerszy */
  #kategorie .kategoria-przycisk{
    flex:1 1 260px !important;   /* 260 px bazowo, ale może rosnąć */
    max-width:300px !important;  /* granica, żeby obrazek się nie rozciągał za bardzo */
  }
}

/* desktop & tablet (powyżej telefonów) */
@media (min-width: 768px){

  /* sam rząd kafli */
  #kategorie .kategorie-row,
  #kategorie .kategorie-list{
    display:flex !important;
    gap:12px !important;           /* odstęp między kaflami */
    padding:0 12px !important;     /* ten sam odstęp przy krawędziach */
    box-sizing:border-box;
    justify-content:center;        /* równe rozłożenie */
  }

  /* pojedynczy kafel – elastyczny, ale max 4 w linii */
  #kategorie .kategoria-przycisk{
    flex: 0 1 calc(25% - 18px) !important; /* 4 szt. → ~25% minus zapas */
    max-width: 330px !important;           /* możesz zwiększyć / usunąć */
  }
}

@media (min-width:768px){
  /* rząd kafli – zajmuje pełną szerokość wrappera */
  #kategorie .kategorie-row,
  #kategorie .kategorie-list{
      width:100%  !important;        /* kasuje ewentualne max-width */
      max-width:none !important;
      display:flex !important;
      gap:12px     !important;        /* nadal 12 px odstępu */
      padding:0 12px !important;      /* 12 px przy bokach */
      box-sizing:border-box;
  }

  /* pojedynczy kafel – dokładnie ¼ szerokości rzędu (-12 px × 3 szczeliny) */
  #kategorie .kategoria-przycisk{
      flex:0 0 calc((100% - 36px)/4) !important;   /* ~25% – jeszcze szerszy */
      max-width:none !important;                   /* usuwa stare limity */
  }
}

/* desktop / tablet  ≥ 768 px  – 4 szerokie kafle w jednej linii */
@media (min-width:768px){

  /* rząd kafli */
  #kategorie .kategorie-row,
  #kategorie .kategorie-list{
      display:flex !important;
      gap:12px !important;          /* odstęp między kaflami zostaje 12 px */
      padding:0 12px !important;    /* taki sam bufor przy bokach */
      box-sizing:border-box;
      width:100%;                   /* pełna szerokość sekcji */
      max-width:none !important;
  }

  /* pojedynczy kafel – 1/4 rzędu minus łączny gap */
  #kategorie .kategoria-przycisk{
      /* 4 kafle  → 3 szczeliny × 12 px = 36 px
         36 px / 4 ≈ 9 px ⇒ bezpieczny „zapas” ≈ 18 px   */
      flex:0 0 calc((100% - 36px)/4) !important;
      max-width:none !important;    /* żadnego sztucznego limitu */
  }
}

@media (min-width: 769px) {

  /* KONTENER -------------------------------------------------- */
  #kategorie .container-kategorie {
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    gap: 8px;               /* odstęp między kaflami */
  }

  /* PRZYCISK --------------------------------------------------- */
  #kategorie .kategoria-przycisk {
    flex: 1 1 0;            /* cztery równe kafle */
    display: block;         /* prostsze niż flex-box */
    height: 140px;          /* jedna, spójna wysokość – zmień wg uznania */
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    background-size: cover;     /* NIE nadpisuje background-image */
    background-position: center;
    text-decoration: none;
  }

  /* PÓŁTRANSPARENTNA MASKA – delikatna ------------------------ */
  #kategorie .kategoria-przycisk::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .35);   /* 35 % krycia */
    transition: background .25s;
  }
  #kategorie .kategoria-przycisk:hover::before {
    background: rgba(0, 0, 0, .55);   /* ciemniej w hoverze */
  }

  /* NAPIS ------------------------------------------------------ */
  #kategorie .kategoria-przycisk span {
    position: absolute;
    left: 50%;
    bottom: 12px;                  /* przy dolnej krawędzi */
    transform: translateX(-50%);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    z-index: 1;                    /* nad maską */
    pointer-events: none;          /* klik trafia w <a>, nie w span */
  }
}

/* ===== odstęp między sliderem a kaflami ===== */
@media (min-width: 769px) {
  #kategorie {
    margin-top: 40px;   /* zmień wg uznania: 24‒60 px */
  }
}

@media (min-width: 769px) {

  /* docelowa wysokość – zmień 100 px wg potrzeb (80-120 px wygląda dobrze) */
  #kategorie .kategoria-przycisk {
      height: 100px;          /* ↓ usuń to, jeżeli wolisz proporcje patrz niżej */
      padding: 0;             /* zerujemy nadmiar wnętrza, tekst i tak jest absolutny */
  }

  /* pozycjonowanie napisu niżej, bo zmieniliśmy wysokość */
  #kategorie .kategoria-przycisk span {
      bottom: 8px;            /* zjeżdżamy trochę wyżej - dopasuj */
  }

  /* —––– ALTERNATYWA ––––
     Zamiast sztywnej wysokości możesz użyć proporcji 4:1 lub 16:5 */

  /* #kategorie .kategoria-przycisk {
       aspect-ratio: 4 / 1;   /* szerokość : wysokość */
       height: auto;          /* brak fixed height */
     } */
}

@media (min-width: 769px) {

  /* ——— KAFLE: ogólne ustawienia szer./wys. (już były) ——— */
  #kategorie .kategoria-przycisk {
      flex: 1 1 0;
      height: 100px;
      display: block;
      position: relative;
      overflow: hidden;
      background-size: cover;
      background-position: center;
      border-radius: 6px;
      text-decoration: none;
  }

  /* ——— MASKA PRZYCIEMNIAJĄCA *TYLKO* DLA TYCH KAFELKÓW ——— */
  #kategorie .kategoria-przycisk::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,.45);   /* 45 % krycia */
      transition: background .25s;
      pointer-events: none;          /* nie blokuje kliku */
      z-index: 0;                    /* pod tekstem */
  }

  #kategorie .kategoria-przycisk:hover::before {
      background: rgba(0,0,0,.65);   /* mocniej przy hoverze */
  }

  /* ——— TEKST ——— */
  #kategorie .kategoria-przycisk span {
      position: absolute;
      left: 50%;
      bottom: 8px;
      transform: translateX(-50%);
      color: #fff;
      font-weight: 700;
      text-transform: uppercase;
      z-index: 1;                    /* nad maską */
  }
}

/* =========================================================
   Sekcja #kategorie – samo „przydymienie” tła
   ========================================================= */

/* baza: niczego nie nadpisujemy, tylko dodajemy relatywność */
#kategorie .kategoria-przycisk {
    position: relative;       /* potrzebne dla ::after */
    overflow: hidden;         /* maska nie wychodzi poza kafel */
}

/* półprzezroczysta warstwa przyciemnienia */
#kategorie .kategoria-przycisk::after {
    content: "";
    position: absolute;
    inset: 0;                 /* rozciąga się na cały kafel */
    background: rgba(0, 0, 0, .45);   /* 45 % krycia – dopasuj według uznania */
    pointer-events: none;     /* nie blokuje kliknięć */
    z-index: 0;               /* pod napisem, nad zdjęciem */
    transition: background .25s;
}

/* mocniejsze ściemnienie w hoverze (opcjonalnie) */
#kategorie .kategoria-przycisk:hover::after {
    background: rgba(0, 0, 0, .65);
}

/* napis – zawsze nad maską */
#kategorie .kategoria-przycisk span {
    position: relative;
    z-index: 1;               /* wyżej niż ::after */
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
}

/* JAŚNIEJSZY HOVER – zamień dotychczasową regułę */
#kategorie .kategoria-przycisk:hover::after {
    background: rgba(0, 0, 0, .35);   /* np. .50-.55 daje subtelny efekt */
}

/* =======================================================
   #kategorie  |  Wyśrodkowanie napisu w kaflu
   ======================================================= */
#kategorie .kategoria-przycisk{
    display:flex !important;
    align-items:center !important;      /* środek w pionie   */
    justify-content:center !important;  /* środek w poziomie */
}

/* kasujemy stare przesunięcia */
#kategorie .kategoria-przycisk span{
    position:relative !important;
    bottom:auto !important;
    left:auto !important;
    transform:none !important;
    z-index:1;                           /* nad maską */
}

/* ===============================
   DESKTOP ≥ 769 px – korekta Y-axis
   ===============================*/
@media (min-width: 769px) {

    /* kontener przycisku staje się flex-boxem */
    #kategorie .kategoria-przycisk{
        display: flex !important;          /* jeden wymiar – kolumna */
        align-items: center !important;    /* wyśrodkuj pionowo */
        justify-content: center !important;/* wyśrodkuj poziomo (już OK) */
    }

    /* zerujemy stare przesunięcia napisu */
    #kategorie .kategoria-przycisk span{
        position: static !important;       /* usuwa bottom / transform */
        line-height: 1 !important;         /* brak sztucznego podbijania */
    }
}

/* =========================================
   DESKTOP ≥ 769 px  
   Sekcja z kaflami (#kategorie) –  
   usunięcie własnego tła, aby przyjąć
   dokładnie ten sam kolor co całe <body>
   ========================================= */


    /* cały pas za kafelkami */
    #kategorie{
        background: transparent !important;   /* zero nadpisywania koloru */
    }

    /* wewnętrzny kontener (jeśli motyw nadaje mu inne tło) */
    #kategorie .container-kategorie{
        background: transparent !important;
    }
}









/* ═══════════════════════════════════════════════════════
   DESKTOP | hero-slider – sztywny sufit 340 px
   (przebija nawet style INLINE)
   ═══════════════════════════════════════════════════════ */
@media (min-width: 769px){

    /* sekcja + wszystkie warstwy podrzędne + samo <img> */
    #simple-slider,
    #simple-slider *{
        height:     340px !important;   /* sufit – zmień na 300-380 gdy trzeba */
        max-height: 340px !important;
        overflow:   hidden  !important; /* obetnij nadmiar kadru               */
    }

    /* obraz kadruje się jak cover */
    #simple-slider img{
        width: 100%  !important;
        object-fit: cover !important;
        object-position: center;
        display:block;
    }
}









/* ==============================================================
   DESKTOP ≥ 769 px  —  
   1) resetujemy wszystkie podejrzane reguły w #simple-slider,
   2) nakładamy nową wysokość 340 px + object-fit:cover
   ============================================================== */
@media (min-width: 769px) {

  /* 1. RESET – czyścimy height/min-height/max-height/padding/overflow */
  #simple-slider,
  #simple-slider > .slider-container,
  #simple-slider .slides,
  #simple-slider .slide {
    height:        auto     !important;
    min-height:    0        !important;
    max-height:    none     !important;
    padding:       0        !important;
    margin:        0        !important;
    overflow:      visible  !important;
  }

  /* 2. NOWY „Sufit” – slider nie wyższy niż 340px */
  #simple-slider {
    height:     340px    !important;
    max-height: 340px    !important;
    overflow:   hidden   !important;
    position:   relative !important;
  }

  /* 3. Obraz wypełnia kadr, zachowuje proporcje i jest przycinany */
  #simple-slider .slide img {
    width:         100%    !important;
    height:        100%    !important;
    object-fit:    cover   !important;
    object-position: center !important;
    display:       block   !important;
  }
}

/* ====================================================
   DESKTOP ≥ 769 px  |  Obraz w slajdach zawsze cover
   ==================================================== */
@media (min-width: 769px) {
  /* 1) Upewniamy się, że każdy slide ma 340px wysokości */
  #simple-slider .slide {
    height: 340px !important;
  }

  /* 2) Obraz wypełnia całe 340px i kadruje się równomiernie */
  #simple-slider .slide img {
    width:           100%      !important;
    height:          100%      !important;
    object-fit:      cover     !important;
    object-position: center    !important;
    display:         block     !important;
  }
}

@media (min-width: 769px) {
  /* 1) Sekcja slidera = cały panel x 330px wysokości */
  #simple-slider {
    height:     330px !important;
    max-height: 330px !important;
    overflow:   hidden !important;
  }

  /* 2) Wewnętrzny wrapper (.slider-container) */
  #simple-slider .slider-container {
    height:     100%   !important; /* przejmij te 330px z sekcji */
    max-height: none   !important;
  }

  /* 3) Lista slajdów (.slides) też */
  #simple-slider .slides {
    height:     100%   !important;
  }
}

@media (min-width: 769px) {
  /* 1) slider bierze 100% szerokości content-container */
  .content-container > #simple-slider {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 2) jego wewnętrzny wrapper również */
  #simple-slider .slider-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 3) każdy slide rozciąga się w poziomie na całość */
  #simple-slider .slides,
  #simple-slider .slide {
    width: 100% !important;
  }

  /* 4) obraz zgrywa się z krawędziami slajdu */
  #simple-slider .slide img {
    width:           100%   !important;
    height:          100%   !important;
    object-fit:      cover  !important;
    object-position: center !important;
    display:         block  !important;
  }
}

@media (min-width: 769px) {
  /* dodaje przerwę nad sliderem, tylko na desktopie */
  .content-container {
    padding-top: 40px !important;  /* zmień 24px na potrzebną wartość */
  }
}

/* ====================================================
   Zaokrąglone rogi głównego zdjęcia (slidera) – tylko desktop
   ==================================================== */
@media (min-width: 769px) {
  /* 1) Zaokrąglone rogi na kontenerze slidera */
  #simple-slider {
    overflow: hidden !important;       /* obcina wystający obraz */
    border-radius: 12px !important;    /* zmień wartość wg gustu */
  }

  /* 2) Dla pewności – zaokrąglenie samych <img> */
  #simple-slider .slide img {
    border-radius: 12px !important;    /* identyczna wartość */
  }
}

@media (min-width: 769px) {
  /* 1) sekcja + główny wrapper slidera */
  #simple-slider,
  #simple-slider .slider-container {
    height:     450px !important;
    max-height: 450px !important;
    overflow:   hidden  !important;
  }

  /* 2) każdy pojedynczy slide */
  #simple-slider .slide {
    height: 100% !important;
  }
}


@media (min-width: 769px) {
  /* 1) Slider – pozwalamy, by nawigacja wystawała poza kadr slajdu */
  #simple-slider {
    position: relative !important;
    overflow: visible !important;
  }

  /* 2) Tor slajdów – przycinaj obrazy, ale nie nawigację */
  #simple-slider .slider-container {
    overflow: hidden !important;
  }

  /* 3) Pozycjonujemy navkę absolutnie pod slajdem */
  #simple-slider .slider-nav {
    position: absolute     !important;
    bottom:   -28px        !important;  /* podsuń go w dół pod slajd */
    left:     50%          !important;
    transform: translateX(-50%) !important;
    display:  flex         !important;
    gap:      12px         !important;
    z-index:  999          !important;
  }

  /* 4) Upewnij się, że kropki są bite i widać je */
  #simple-slider .slider-nav .dot {
    display:        block   !important;
    visibility:     visible !important;
    opacity:        0.4     !important;
    width:          10px    !important;
    height:         10px    !important;
    background:     #fff    !important;
    border-radius:  50%     !important;
  }
  #simple-slider .slider-nav .dot.active {
    opacity: 1 !important;
  }

  /* 5) I strzałki też pokaż */
  #simple-slider .slider-nav .arrow {
    display:        flex    !important;
    visibility:     visible !important;
    opacity:        1       !important;
    width:          32px    !important;
    height:         32px    !important;
    background:     rgba(0,0,0,0.3) !important;
    color:          #fff    !important;
    border-radius:  50%     !important;
    align-items:    center  !important;
    justify-content:center  !important;
    font-size:      1.2rem  !important;
  }
}

@media (min-width: 769px) {
  /* 1) Slider i container pozwalają na wyświetlenie nawigacji */
  #simple-slider,
  #simple-slider .slider-container {
    overflow: visible !important;
  }

  /* 2) Tor slajdów przycina kolejne obrazy (pokazuje tylko jeden) */
  #simple-slider .slides {
    overflow: hidden !important;
  }

  /* 3) Przywracamy normalny przepływ dla navki */
  #simple-slider .slider-nav {
    position: static     !important;  /* usuń absolute */
    margin:   16px auto  !important;  /* odstęp nad/poniżej + centrowanie */
    display:  flex       !important;
    justify-content: center !important;
    align-items:    center !important;
    gap:      12px       !important;  /* odległość między paskami */
    transform: none     !important;
    z-index:   20       !important;
    visibility: visible !important;
  }

  /* 4) Ukrywamy strzałki, jeśli nie są potrzebne */
  #simple-slider .slider-nav .arrow {
    display: none !important;
  }

  /* 5) Zamieniamy kropki na poziome paski */
  #simple-slider .slider-nav .dot {
    display:        block   !important;
    width:          120px   !important;  /* szerokość paska – dostosuj */
    height:         6px     !important;  /* grubość paska */
    background:     #EBEBEB !important;  /* kolor nieaktywnego */
    border-radius:  3px     !important;  /* zaokrąglone końce */
    opacity:        1       !important;
  }
  #simple-slider .slider-nav .dot.active {
    background: #00C7FF !important;      /* kolor aktywnego */
  }
}

@media (min-width: 769px) {
  /* 0) Ukryj domyślne paski Jetpacka */
  .jp-carousel-indicators,
  .jp-carousel-progress {
    display: none !important;
  }

  /* 1) Przywróć widoczność Twojej nawigacji */
  #simple-slider .slider-nav {
    display: flex      !important;
    justify-content: center !important;
    align-items:    center !important;
    overflow:       visible !important;
    position:       relative !important;
    margin-top:    16px !important; /* odstęp od obrazka */
    gap:            16px !important;
    z-index:       20      !important;
  }

  /* 2) Upewnij się, że kontener krotek jest widoczny */
  #simple-slider .slider-nav .dot-container {
    display: flex !important;
    gap:     16px !important;
  }

  /* 3) Zamień kropki na paski */
  #simple-slider .slider-nav .dot-container .dot {
    display:        block    !important;
    width:          120px    !important;  /* szerokość paska */
    height:         8px      !important;  /* grubość paska */
    background:     #EBEBEB  !important;  /* kolor nieaktywnego */
    border-radius:  4px      !important;  /* zaokrąglone końce */
    opacity:        1        !important;
  }
  #simple-slider .slider-nav .dot-container .dot.active {
    background: #00C7FF !important;       /* kolor aktywnego */
  }
}

@media (min-width: 769px) {
  #simple-slider .slider-nav {
    position: relative    !important; /* zamiast absolute */
    left:     auto        !important; /* usuń przesunięcie w lewo */
    right:    auto        !important;
    transform:none        !important; /* usuń translateX */
    margin:   16px auto 0 !important; /* 16px od obrazu, poziomo auto-center */
  }
}

@media (min-width: 769px) {
  /* Zmniejszamy odstęp między paskami slidera a przyciskami kategorii */
  #kategorie {
    margin-top: 10px !important; /* zmień 8px na mniejszą/większą wartość */
  }
}

@media (min-width: 769px) {
  /* Przybliżenie tła przycisku Trenerzy */
  .kategoria-przycisk.kategoria-trenerzy {
    background-size: 180% auto !important;   /* 150% szerokość, dopasuj wg uznania */
    background-position: center center !important; /* wycentrowanie obiektu */
  }
}

@media (min-width: 769px) {
  /* Podniesienie tła w przycisku „Trenerzy” */
  .kategoria-przycisk.kategoria-trenerzy {
    /* 50% środka → 40% przesunięte o 10% w górę */
    background-position: center 55% !important;
  }
}

@media (min-width: 769px) {
  /* Przybliżenie i przesunięcie tła w przycisku Oferta */
  .kategoria-przycisk.kategoria-oferta {
    background-position: center 30% !important;
  }
}

@media (min-width: 769px) {
  /* Przesunięcie tła w przycisku Obozy w dół */
  .kategoria-przycisk.kategoria-obozy {
    background-position: center 90% !important;
  }
}




/* === Sekcja UBRANIA BWT === */
.ubrania-section {
  padding: 60px 0;
}
.ubrania-heading {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 30px;
  color: #000;
}
.ubrania-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  justify-items: center;
}
.ubranie-card {
  position: relative;
  width: 260px;
  height: 160px;
  overflow: hidden;
  border-radius: 12px;
  text-decoration: none;
}
.ubranie-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.ubranie-label {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 8px 0;
  text-align: center;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-weight: bold;
}

/* 1. sztywna wysokość wszystkich kafelków */
.ubranie-card {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 370px;         /* <--- tu podnieś lub obniż, by dobrać idealną wysokość */
  border-radius: 12px;
  overflow: hidden;
}

/* 2. podpis na dole – stała wysokość */
.ubranie-label {
  flex: 0 0 36px;        /* <--- 36px to wysokość podpisu; dostosuj w razie potrzeby */
  line-height: 36px;     /* wyśrodkuj pionowo tekst */
  background: rgba(0,0,0,0.5);
  color: #fff;
  text-align: center;
  font-weight: bold;
}

/* 3. obszar obrazka zajmuje resztę przestrzeni */
.ubranie-image {
  flex: 1 1 auto;        /* wypełnia całą dostępną przestrzeń ponad podpis */
  background-size: cover;
  background-position: center;
}


/* 1. Wyłącz wszelkie przejścia/transformacje na obrazkach w przyciskach */
.ubranie-card img {
  transition: none !important;
  transform: none !important;
}

/* 2. Wyłącz wszelkie reguły hoverowe */
.ubranie-card:hover img {
  transform: none !important;
}

/* 1) Wyłącz wszelkie przejścia/transformacje na obrazkach w kontenerze przycisków */
#offer .podkategorie img,
#offer .podkategorie a img {
  transition: none !important;
  transform: none !important;
}

/* 2) Wyłącz też transformację na hover */
#offer .podkategorie a:hover img {
  transform: none !important;
}

/* 1) Kontener karty – zaokrąglone rogi i overflow dla gradientu */
.ubranie-card {
  display: block;
  overflow: hidden;
  border-radius: 12px;
}

/* 2) Twoje tło jako obrazek */
.ubranie-image {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 – możesz zmienić proporcje */
  background-size: cover;
  background-position: center;
}

/* 3) Gradientowe przyciemnienie od środka w dół */
.ubranie-image::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(0,0,0,0.6) 100%
  );
  pointer-events: none;
  transition: background 0.3s;
}

/* 4) Podpis pod obrazkiem + kolorowa kreska */
.ubranie-label {
  display: block;
  position: relative;
  margin-top: -1.5em; /* wciągamy podpis w obszar gradientu */
  padding-top: 0.5em;
  color: #fff;
  text-align: center;
  font-weight: bold;
}
.ubranie-label::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 4px;
  background-color: #00cffe; /* tu Twój akcent */
  border-radius: 2px;
}

/* 5) Hover – nieco rozjaśniony gradient */
@media (hover: hover) {
  .ubranie-card:hover .ubranie-image::after {
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      rgba(0,0,0,0.3) 100%
    );
  }
}

.ubranie-label {
  display: block;
  background: none !important;
  margin-top: -1.5em;    /* wciąga tekst w obszar gradientu */
  padding: 0.5em 0;       /* możesz dostosować wysokość „kliknięcia” */
  color: #fff;
  text-align: center;
  font-weight: bold;
  border-radius: 0 !important;
}

.ubranie-card .ubranie-label {
  position: relative;
  top: -40px; /* podnieś etykietę o 20px – dostosuj wartość według potrzeb */
}

.ubranie-card .ubranie-label::after {
  display: none;
}

.ubranie-card .ubranie-label {
  font-size: 1.4rem;
  font-weight: 700;
}





@media (min-width: 769px) {
  /* ograniczenie do 1320px i wyśrodkowanie */
  .content-container,
  .site-footer .footer-container {
    max-width: 1320px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* przykład innego stylu tylko na desktopie */
  /* .site-footer { background: #000; } */
}


/* tylko na desktopie */
@media (min-width: 769px) {
  .site-footer .footer-container {
    /* domyślnie masz pewnie coś w stylu:
       display: grid;
       grid-template-columns: 150px 1fr 1fr 1fr 150px;
       gap: 270px;
    */
    grid-template-columns: 150px repeat(3, 1fr) 150px !important;
    gap: 150px !important;         /* zredukuj od razu odstęp między wszystkimi kolumnami */
    /* jeśli chcesz kontrolować tylko między pierwszymi dwoma: */
    /* column-gap: 40px !important; */
  }
}

@media (min-width: 769px) {
  .site-footer .footer-container > .footer-col:nth-child(3) {
    margin-left: 70px !important;
  }
}

@media (min-width: 769px) {
  /* Zmniejsza odstęp przed 4. kolumną (Informacje) */
  .site-footer .footer-container > .footer-col:nth-child(4) {
    margin-left: -10px !important;
  }
}

  /* przesunięcie w dół tylko ostatniej kolumny "Obserwuj nas" */
  .site-footer .footer-col.footer-socials {
    margin-top: 7px !important;
  }
}

/* Przykład – usuń tło w wrapperze Gutenbergowym wewnątrz ubrania */
.ubrania-section .wp-block-group.has-background {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Dla pewności jeszcze raz nadpisz główny wrapper */
.ubrania-section > .content-container {
  background: none !important;
}



/* ——————————————————————————————
   GŁÓWNY BIAŁY KONTENER STRONY
   —————————————————————————————— */
.white-container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;               /* centrowanie w poziomie */
  padding: 60px 20px;           /* góra/dół 60px, boki 20px */
  background-color: #fff;       /* białe tło */
  border-radius: 8px;           /* opcjonalnie: lekko zaokrąglone rogi */
  box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* subtelny cień, żeby kontener „odstawał” */
}

/* zwiększa margines nad głównym białym kontenerem */
.white-container {
  margin-top: 20px; /* dostosuj wartość według potrzeby */
}

.white-container {
  /* już masz margin-top: 20px; */
  margin-bottom: 40px;  /* dystans pod białym kontenerem */
}


.white-container {
  padding-top: 40px;    /* zamiast 60px ustaw 20px */
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 20px;
  /* pozostałe właściwości jak dotychczas */
}





/* ————————————————————————————————
   Sekcja “Współpracuj z BWT”
   ———————————————————————————————— */
.collab-section {
  padding: 80px 0;
}
.collab-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.collab-heading {
  text-align: center;
  font-size: 2rem;
  margin: 40px 0 30px;
}
.collab-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  padding-bottom: 40px;
}
.collab-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 6px;
  overflow: hidden;
  transition: transform .3s, box-shadow .3s;
}
.collab-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.collab-image {
  width: 100%;
  padding-top: 75%;       /* proporcja 4:3 – dostosuj wg potrzeb */
  background-size: cover;
  background-position: center;
}
.collab-label {
  display: block;
  text-align: center;
  padding: 16px 0;
  font-size: 1.1rem;
}


/* Hero image na stronie Współpraca z BWT */
.page-hero .hero-container {
  max-width: 1320px;
  margin: 0 auto;
}
.page-hero .hero-container img {
  width: 100%;
  height: auto;
  display: block;
}

/* Biały pasek z zawartością poniżej hero */
.content-section .white-container {
  background: #fff;
  max-width: 1320px;
  margin: 20px auto 40px; /* górny margines między hero a treścią, dolny — do stopki */
  padding: 40px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* delikatny margines nad hero image */
.page-hero {
  margin-top: 20px; /* zmień wartość wg potrzeby */
}

/* zaokrąglone rogi hero image */
.page-hero .hero-container {
  border-radius: 8px;   /* możesz zmienić na inną wartość */
  overflow: hidden;     /* zapobiega wypadaniu obrazu poza zaokrąglone rogi */
}

/* hero-container musi być position:relative */
.page-hero .hero-container {
  position: relative;
  max-width: 1320px;
  margin: 20px auto 0;    /* górny margines już skonfigurowany */
  border-radius: 8px;
  overflow: hidden;
}

/* obrazek w tle */
.page-hero .hero-container img {
  display: block;
  width: 100%;
  height: auto;
}

/* półprzezroczysta, ciemna nakładka */
.page-hero .hero-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,0.4);
}

/* pozycjonowanie i styl tekstu */
.page-hero .hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  padding: 0 20px;
}
.page-hero .hero-text h1 {
  font-size: 2.5rem;
  margin: 0 0 0.5em;
}
.page-hero .hero-text p {
  font-size: 1.2rem;
  margin: 0;
}

/* mocniejsza nakładka */
.page-hero .hero-overlay {
  background: rgba(0, 0, 0, 0.6); /* zamiast 0.4 */
}

/* opcjonalnie: dodatkowy filtr na obrazku */
.page-hero .hero-container img {
  filter: brightness(0.75); /* przyciemnia obrazek o 25% */
}

/* ustawiona wysokość hero-container */
.page-hero .hero-container {
  height: 300px;           /* dostosuj wysokość, np. 300–400px */
  max-width: 1320px;
  margin: 20px auto 0;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

/* obrazek wypełnia cały kontener, przycinany zachowując proporcje */
.page-hero .hero-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* nakładka i tekst pozostają bez zmian */

.page-hero .hero-container img {
  /* zamiast object-position: center; */
  object-position: center 100%; /* 60% w dół – dostosuj według potrzeb */
}

.page-hero .hero-text h1 {
  font-size: 3rem;    /* zwiększone z 2.5rem na 3rem */
  line-height: 1.1;   /* opcjonalnie: dopasuj odstęp między wierszami */
}

/* 1. Rozszerzamy obszar tekstu wewnątrz hero */
.page-hero .hero-text {
  width: 80%;           /* np. 80% szerokości kontenera */
  max-width: 1200px;    /* lub dowolna wartość w px */
  padding: 0 20px;
}

/* 2. Nie pozwalamy nagłówkowi łamać się */
.page-hero .hero-text h1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* opcjonalnie, jeśli ma za długi tekst */
}

/* (ewentualnie zmniejszaj font-size, jeśli na mniejszych ekranach wciąż się nie mieści) */
@media (max-width: 768px) {
  .page-hero .hero-text h1 {
    font-size: 2rem;
  }
}

/* powiększony tekst pod nagłówkiem w hero */
.page-hero .hero-text p {
  font-size: 1.4rem;   /* zamiast 1.2rem możesz ustawić 1.3rem–1.5rem */
  line-height: 1.4;    /* dostosuj, by dać więcej przestrzeni pionowej */
}



/* Opakowanie sekcji trenerów dla oferty */
.offer-trainers-wrapper {
  margin-top: 60px;
  text-align: center;
}

.offer-trainers-title {
  font-size: 2rem;
  margin-bottom: 12px;
}

.offer-trainers-subtitle {
  font-size: 1.1rem;
  color: #555;
  margin-bottom: 32px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Grid z trenerami */
.offer-trainer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.offer-trainer-item {
  text-align: center;
}

.offer-trainer-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  margin-bottom: 12px;
}

.offer-trainer-item h3 {
  font-size: 1.25rem;
  margin: 0 0 4px;
}

.offer-trainer-item p {
  font-size: 1rem;
  color: #666;
  margin: 0;
}

/* 1) Większy odstęp między kartami */
.offer-trainer-grid {
  gap: 40px;  /* zamiast 24px */
}

/* 2) Boczne paddingi w wrapperze */
.offer-trainers-wrapper {
  padding: 0 60px;    /* po 60px z lewej i prawej */
}

/* 3) Limit szerokości pojedynczej karty */
.offer-trainer-item {
  max-width: 500px;   /* kart nie rozciągną się ponad 500px */
  margin: 0 auto;     /* wycentrowanie wewnątrz komórki grid */
}

/* (nie zmieniamy aspect-ratio ani object-fit, zdjęcie pozostaje kwadratowe) */

/* Większy odstęp między kartami */
.offer-trainer-grid {
  gap: 60px;      /* zamiast 40px – więcej „powietrza” */
}

/* Rozszerzony boczny padding w wrapperze */
.offer-trainers-wrapper {
  padding: 0 80px;  /* zamiast 60px – jeszcze więcej marginesu po bokach */
}

/* Jeszcze mniejsza maksymalna szerokość karty */
.offer-trainer-item {
  max-width: 400px; /* zamiast 500px – karty są węższe */
  margin: 0 auto;
}

.offer-trainer-grid {
  gap: 1px;   /* z 60px na 20px */
}

/* mniejszy margines nad nagłówkiem sekcji trenerów */
.offer-trainers-wrapper .offer-trainers-title {
  margin-top: -70px;  /* zamiast domyślnego np. 60px ustaw 20px */
}


/* Wrapper i tytuły */
.offer-trainers-wrapper {
  text-align: center;
  margin-top: 40px;
}
.offer-trainers-title {
  font-size: 2rem;
  margin-bottom: 8px;
}
.offer-trainers-subtitle {
  color: #555;
  margin-bottom: 24px;
  font-size: 1rem;
}

/* Grid z trenerami */
.offer-trainer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

/* Pojedyncza karta trenera */
.offer-trainer-item {
  position: relative;
}

/* Kwadratowy wrapper z tłem */
.trainer-card-wrapper {
  width: 100%;
  padding-top: 100%;          /* zachowuje proporcje 1:1 */
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  overflow: hidden;
}

/* Nakładka z imieniem i rolą */
.trainer-info-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 12px;
  box-sizing: border-box;
  text-align: center;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* Styl tekstu */
.trainer-name {
  margin: 0;
  font-size: 1.2rem;
  font-weight: bold;
}
.trainer-role {
  margin: 4px 0 0;
  font-size: 0.9rem;
  opacity: 0.85;
}



/* Wyrównanie sekcji pod 40/60 do lewej krawędzi kontenera */
#section-terms,
#section-details,
#section-where {
  /* zajmują całą szerokość białego kontenera */
  width: 100% !important;
  max-width: 1320px;       /* dopasuj, jeśli Twój kontener ma inną max-szerokość */
  margin: 40px auto 20px !important;  /* 40px od góry, auto pośrodku, 20px pod spodem */
  padding: 0 20px !important;         /* 20px paddingu po bokach */
  box-sizing: border-box;
}

/* ─── AKORDEON: ogólne ─── */
.accordion {
  max-width: 1320px;
  margin: 0 auto;
}
.accordion-item + .accordion-item {
  margin-top: 16px;
}

/* ─── NAGŁÓWKI ─── */
.accordion-header {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-size: 1.1rem;
  font-weight: bold;
  padding: 12px 16px;
  cursor: pointer;
  position: relative;
  outline: none;
}
/* plus/minus na końcu przycisku */
.accordion-header::after {
  content: '+';
  position: absolute;
  right: 16px;
  font-size: 1.2rem;
  transition: transform 0.2s;
}
/* kiedy otwarte */
.accordion-item.open .accordion-header::after {
  content: '–';
  transform: none;
}

/* ─── ZAWARTOŚĆ ─── */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.accordion-item.open .accordion-content {
  max-height: 500px; /* wystarczy na kilka linijek tekstu */
}

/* wewnętrzny paragraf */
.accordion-content p {
  margin: 12px 16px;
  font-size: 1rem;
  line-height: 1.5;
}

/* większy margines pod <h2> w sekcji Szczegóły */
#section-details h2 {
  margin-bottom: 24px; /* zamiast domyślnego np. 8px ustaw 24px */
}

/* ewentualnie, jeśli chcesz dołożyć odstęp tylko pomiędzy nagłówkiem a akordeonem: */
#section-details .accordion {
  margin-top: 16px;  /* dodaje przestrzeń nad całą listą pól */
}

/* 1. Usuń tło nagłówków (zwykłe i w stanie open) */
.accordion-header,
.accordion-item.open .accordion-header {
  background: none !important;
  border: none !important;
}

/* 2. Usuń tło paneli odpowiedzi */
.accordion-content {
  background: none !important;
  box-shadow: none !important;
}

/* 3. Usuń ewentualne obramowanie pomiędzy elementami */
.accordion-item {
  border-bottom: none !important;
}

/* 4. Zachowaj jedynie tekst i ikonę +/- */
.accordion-header {
  padding: 8px 16px;  /* możesz tu zostawić swoje wartości */
}

/* Wyrównanie tekstu przycisków akordeonu do tytułów sekcji */
#section-details .accordion-header {
  padding-left: 0 !important;
}

/* domyślny czarny kolor nagłówków i ikon +/- */
#section-details .accordion-header {
  color: #000 !important;
}
#section-details .accordion-header::after {
  color: #000 !important;
  border-color: #000 !important;
}

/* na hover – pomarańczowy kolor, jak na Twoim zrzucie */
#section-details .accordion-header:hover {
  color: #f57c00 !important;
}
#section-details .accordion-header:hover::after {
  color: #f57c00 !important;
  border-color: #f57c00 !important;
}

/* Hover: szary kolor zamiast pomarańczowego */
#section-details .accordion-header:hover {
  color: #888888 !important;
}
#section-details .accordion-header:hover::after {
  color: #888888 !important;
  border-color: #888888 !important;
}

/* Usuń podkreślenie w „Sprawdź więcej pytań!” */
#section-details .accordion-item.faq-link .accordion-header {
  text-decoration: none !important;
}
#section-details .accordion-item.faq-link .accordion-header:hover {
  text-decoration: none !important;
}

/* 1) Usuń granicę spod każdego headera (jeśli jeszcze została) */
#section-details .accordion-header {
  border-bottom: none !important;
}

/* 2) Dodaj granicę pod każdym .accordion-item */
#section-details .accordion-item {
  border-bottom: 1px solid #888888 !important;
}

/* 3) Usuń granicę pod ostatnim, żeby nie było wiszącej linii na końcu */
#section-details .accordion-item:last-child {
  border-bottom: none !important;
}

/* linia nad pierwszym przyciskiem */
#section-details .accordion-item:first-child {
  border-top: 1px solid #888888 !important;
}

/* linia pod ostatnim przyciskiem */
#section-details .accordion-item:last-child {
  border-bottom: 1px solid #888888 !important;
}

/* Dostosowanie odstępu nad pierwszym pytaniem */
#section-details .accordion-item:first-child .accordion-header {
  /* Zmień 8px na dowolną wartość, której potrzebujesz */
  padding-top: 20px !important;
}

/* Zwiększenie rozmiaru fontu głównych nagłówków akordeonu */
#section-details .accordion-header {
  font-size: 1.25rem !important;  /* zamiast 1.1rem – dostosuj według potrzeby */
}

/* Dostosowanie odstępu między pierwszym nagłówkiem a jego separatorem */
#section-details .accordion-item:first-child .accordion-header {
  /* Zmień wartość na pożądaną wysokość odstępu */
  margin-bottom: 10px !important;
}

/* Zmniejszenie odstępu między pierwszym pytaniem a jego odpowiedzią */
#section-details .accordion-item:first-child.open .accordion-header {
  /* zmniejsz margin-bottom – np. do 8px */
  margin-bottom: 1px !important;
}

/* Odstęp nad „Jaki jest cel?” – zmień 12px na wybraną wartość */
#section-details .accordion-item:nth-child(2) .accordion-header {
  margin-top: -6px !important;
}

/* Odstęp pod nagłówkiem „Jaki jest cel?” */
#section-details .accordion-item:nth-child(2) .accordion-header {
  margin-bottom: 6px !important;
}

/* Odstęp nad nagłówkiem „Jaka jest realizacja Treningu Indywidualnego?” */
#section-details .accordion-item:nth-child(3) .accordion-header {
  margin-top: -7px !important;  /* dostosuj wartość według potrzeby */
}

/* Odstęp pod nagłówkiem „Jaka jest realizacja Treningu Indywidualnego?” */
#section-details .accordion-item:nth-child(3) .accordion-header {
  margin-bottom: 7px !important;
}

/* Odstęp nad nagłówkiem „Dlaczego warto? Jaki jest efekt?” */
#section-details .accordion-item:nth-child(4) .accordion-header {
  margin-top: -7px !important;  /* zmień 12px na dowolną wartość */
}

/* Odstęp pod nagłówkiem „Dlaczego warto? Jaki jest efekt?” */
#section-details .accordion-item:nth-child(4) .accordion-header {
  margin-bottom: 7px !important;  /* dostosuj wartość według potrzeby */
}

/* Odstęp nad linkiem „Sprawdź więcej pytań!” */
#section-details .accordion-item.faq-link .accordion-header {
  margin-top: -6px !important;  /* dostosuj wartość według potrzeby */
}

/* Odstęp pod linkiem „Sprawdź więcej pytań!” */
#section-details .accordion-item.faq-link .accordion-header {
  margin-bottom: 7px !important;  /* dostosuj wartość według potrzeby */
}

.container-title {
  text-align: center !important;
}

/* === Styl przycisków nawigacyjnych trenerów === */
.trainer-nav {
  text-align: center;
  margin: 2rem 0;                    /* przerwa nad i pod paskiem */
}

.trainer-nav a {
  display: inline-block;
  margin: 0 0.5rem 0.5rem;          /* odstępy między przyciskami */
  padding: 0.5rem 1rem;             /* wewnętrzne wcięcia */
  background-color: #f5f5f5;        /* kolor tła */
  color: #333333;                   /* kolor tekstu */
  text-transform: uppercase;        /* wielkie litery */
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 999px;             /* zaokrąglone końce */
  text-decoration: none;            /* usuń podkreślenie */
  transition: background-color .3s, color .3s;
}

.trainer-nav a:hover,
.trainer-nav a:focus {
  background-color: #e0e0e0;        /* jaśniejsze przy najechaniu */
  color: #000000;
}

/* opcjonalnie: wyróżnienie aktywnego odnośnika */
/* dodaj klasę `.active` na tym <a>, którego sekcja jest widoczna */
.trainer-nav a.active {
  background-color: #cccccc;
  color: #000000;
}

/* Prostokątne przyciski nawigacji trenerów */
.trainer-nav a {
  border-radius: 0 !important;
}

.trainer-nav a.active {
  border-radius: 0 !important;
}

/* === Zastosuj od razu efekt „hover” === */
.trainer-nav a {
  background-color: #f9fafb !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  border-color: #cbd5e1 !important;
}

/* Hover: trochę ciemniejsze tło i obwódka */
.trainer-nav a:hover {
  background-color: #e5e7eb !important;  /* ciemniejsze niż #f9fafb */
  border-color:    #b0b8c1 !important;  /* ciemniejszy odcień obwódki */
  box-shadow:      0 4px 6px rgba(0, 0, 0, 0.15) !important; /* nieco mocniejszy cień */
  color:           #1f2937 !important;  /* upewnij się, że tekst pozostaje czytelny */
}

/* Zmniejszenie odstępu między paskiem przycisków a opisem */
.trainer-nav {
  margin-bottom: 8px !important; /* dostosuj wartość według potrzeby */
}

.trainer-description {
  margin-top: 8px !important; /* dostosuj wartość według potrzeby */
}

/* Specjalna siatka 3 kolumn tylko dla sekcji pilkarscy */
.football-section .trainer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

/* Styl karty i overlay (jeśli jeszcze nie masz) */
.trainer-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #e0e0e0;
}
.trainer-card img {
  width: 100%;
  display: block;
  object-fit: cover;
}
.trainer-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  opacity: 0;
  transition: opacity .3s ease;
  color: #fff;
}
.trainer-card:hover .trainer-overlay {
  opacity: 1;
}
.trainer-overlay h3 {
  margin: 0 0 .5rem;
  font-size: 1.25rem;
}
.trainer-overlay p {
  margin: 0 0 1rem;
}
.trainer-overlay .btn {
  display: inline-block;
  padding: .5rem 1rem;
  background: #f57c00;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}
.trainer-overlay .btn:hover {
  background: #e66b00;
}

/* Wyłączenie zoomu na hover dla obrazów w kartach trenerów */
.trainer-card img {
  transition: none !important;
}
.trainer-card:hover img {
  transform: none !important;
}

/* ——— Powiększenie kart w sekcji „Trenerzy Piłkarscy” ——— */
.football-section .trainer-grid {
  display: flex !important;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;              /* odstęp między kartami */
}

/* narzucamy konkretną szerokość każdej karty */
.football-section .trainer-card {
  flex: 0 0 400px !important;  /* każda karta ma 400px szerokości */
  position: relative;
  overflow: hidden;
}

/* utrzymujemy proporcje 1:1 */
.football-section .trainer-card img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1/1 !important;
  object-fit: cover !important;
}

/* overlay z imieniem i rolą zawsze widoczne */
.trainer-overlay {
  opacity: 1 !important;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  padding: 1rem !important;
}

/* domyślnie chowamy statystyki i button */
.trainer-overlay .stats,
.trainer-overlay .btn {
  opacity: 0;
  visibility: hidden;
  max-height: 0;
  overflow: hidden;
  transition: opacity .3s, max-height .3s;
}

/* nagłówek i rola zawsze widać */
.trainer-overlay h3,
.trainer-overlay p {
  opacity: 1;
  visibility: visible;
}

/* na hover pokazujemy statystyki i przycisk */
.trainer-card:hover .trainer-overlay .stats,
.trainer-card:hover .trainer-overlay .btn {
  opacity: 1;
  visibility: visible;
  max-height: 200px; /* dostosuj jeśli potrzeba więcej miejsca */
}

/* 1) Overlay zawsze widoczne – imię i rola */
.trainer-card .trainer-overlay {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* 2) Ukrywamy jedynie listę statystyk i przycisk */
.trainer-card .trainer-overlay .stats,
.trainer-card .trainer-overlay .btn {
  opacity: 0;
  visibility: hidden;
  max-height: 0;
  overflow: hidden;
  transition: opacity .3s ease, max-height .3s ease;
}

/* 3) Po hover na kartę pokazujemy statystyki i przycisk */
.trainer-card:hover .trainer-overlay .stats,
.trainer-card:hover .trainer-overlay .btn {
  opacity: 1;
  visibility: visible;
  max-height: 200px;  /* dostosuj, jeśli potrzebujesz więcej miejsca */
}

/* Zmniejszenie strefy overlay – dolne 25% karty */
.trainer-card .trainer-overlay {
  height: 25% !important;
}

/* Wyśrodkowanie tekstu w overlayu */
.trainer-card .trainer-overlay {
  display: flex !important;
  flex-direction: column;
  justify-content: center;  /* wyśrodkowanie w pionie */
  align-items: center;      /* wyśrodkowanie w poziomie */
  text-align: center;       /* wyrównanie tekstu */
}

/* Usuń zbędne marginesy, by wyśrodkowanie było precyzyjne */
.trainer-card .trainer-overlay h3,
.trainer-card .trainer-overlay p {
  margin: 0.2rem 0 !important;
}

/* === RESET WSZELKICH ANIMACJI I PRZEJŚĆ === */

/* Usuń przejścia i transformacje z obrazów */
.trainer-card img {
  transition: none !important;
  transform: none !important;
}

/* Usuń przejścia, transformacje i animacje z overlay */
.trainer-card .trainer-overlay {
  transition: none !important;
  transform: none !important;
  animation: none !important;
}

/* Usuń przejścia z listy statystyk i przycisku */
.trainer-card .trainer-overlay .stats,
.trainer-card .trainer-overlay .btn {
  transition: none !important;
  animation: none !important;
  transform: none !important;
}

/* Jeśli były jakiekolwiek klucze @keyframes, wyłącz je globalnie */
* {
  animation: none !important;
  transition: none !important;
}

/* === Overlay z imieniem/rolą zawsze widoczny, statystyki tylko na hover === */

/* 1) Bazowy overlay: dolne 25% karty, flex z space-between */
.trainer-card .trainer-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 25%;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  display: flex;
  flex-direction: column;
  justify-content: space-between;  /* statystyki u góry, imię/rola u dołu */
  align-items: center;
  padding: 0.5rem 1rem;
  box-sizing: border-box;
  overflow: hidden;
  transition: height 0.3s ease;
}

/* 2) Ukrywamy statystyki i przycisk: */
.trainer-card .trainer-overlay .stats,
.trainer-card .trainer-overlay .btn {
  opacity: 0;
  visibility: hidden;
  max-height: 0;
  transition: opacity 0.3s ease 0.1s, max-height 0.3s ease 0.1s;
}

/* 3) Imię i rola zawsze widać */
.trainer-card .trainer-overlay h3,
.trainer-card .trainer-overlay p {
  opacity: 1;
  visibility: visible;
  margin: 0;
  color: #fff;
}

/* 4) Na hover: rozszerzamy overlay i pokazujemy statystyki + button */
.trainer-card:hover .trainer-overlay {
  height: 60%;
}
.trainer-card:hover .trainer-overlay .stats,
.trainer-card:hover .trainer-overlay .btn {
  opacity: 1;
  visibility: visible;
  max-height: 200px;
}

.trainer-card .trainer-overlay {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;  /* zawsze wyśrodkujemy tekst */
  align-items: center !important;
  text-align: center !important;
  transition: height 0.3s ease !important;
}

/* domyślnie overlay to 25% wysokości */
.trainer-card .trainer-overlay {
  height: 25% !important;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent) !important;
  overflow: hidden !important;
}

/* na hover: rozszerzamy do 60% */
.trainer-card:hover .trainer-overlay {
  height: 60% !important;
}

.trainer-overlay .stats,
.trainer-overlay .btn {
  opacity: 0;
  visibility: hidden;
  max-height: 0;
  transition: opacity 0.3s ease 0.1s, max-height 0.3s ease 0.1s;
}

.trainer-card:hover .trainer-overlay .stats,
.trainer-card:hover .trainer-overlay .btn {
  opacity: 1;
  visibility: visible;
  max-height: 200px;
}

/* 1) Zawsze pełny overlay, ale gradientowy od dołu */
.trainer-card .trainer-overlay {
  position: absolute;
  inset: 0;                                         /* top/​right/​bottom/​left = 0 */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;                        /* imię/rola zawsze przy dolnej krawędzi */
  align-items: center;
  padding: 1rem;
  box-sizing: border-box;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0) 100%);
  pointer-events: none;                             /* sam overlay nie przechwytuje hovera */
}

/* 2) Kontener na statystyki – domyślnie schowany */
.trainer-card .trainer-overlay .stats,
.trainer-card .trainer-overlay .btn {
  pointer-events: auto;                             /* przywracamy klikalność buttona */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .4s ease, opacity .4s ease;
}

/* 3) Imię i rola – zawsze widoczne, przy dolnej krawędzi */
.trainer-card .trainer-overlay h3,
.trainer-card .trainer-overlay p {
  margin: 0;
  color: #fff;
  pointer-events: auto;
}

/* 4) Na hover karty: tylko rozwijamy statystyki – imię/rola zostaje na dole */
.trainer-card:hover .trainer-overlay .stats,
.trainer-card:hover .trainer-overlay .btn {
  max-height: 200px;       /* wystarczająco, by pokazać listę */
  opacity: 1;
}

/* Karta jako link */
.trainer-card {
  display: block;           /* cała karta klikalna */
  text-decoration: none;    /* usuń podkreślenie */
  cursor: pointer;          /* wskaźnik ręki */
}

/* Usuń resztki przycisku */
.trainer-overlay .btn {
  display: none !important;
}

.page-gdzie-trenujemy .gdzie-title {
  text-align: center;
}

.page-gdzie-trenujemy .gdzie-title {
  text-align: center;
  margin-top: 32px;
  margin-bottom: 32px;
}

/* Kontener z dwoma obrazkami wyrównany i w jednej linii */
.page-gdzie-trenujemy .gdzie-lokacje {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;            /* odstęp pomiędzy zdjęciami */
  margin-top: 2rem;     /* opcjonalnie odstęp nad całym blokiem */
}

/* Każda lokalizacja jako blok o określonej szerokości */
.page-gdzie-trenujemy .lokacja {
  position: relative;
  width: 45%;           /* dwa obrazki obok siebie zajmą 90% szerokości */
  max-width: 600px;     /* ograniczenie maksymalnej szerokości */
  overflow: hidden;
}

/* Obrazek wypełnia cały blok */
.page-gdzie-trenujemy .lokacja img {
  display: block;
  width: 100%;
  height: auto;
}

/* Wspólne ustawienia napisów wewnątrz obrazka */
.page-gdzie-trenujemy .lokacja-napis,
.page-gdzie-trenujemy .lokacja-podtytul {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  text-shadow: 0 0 6px rgba(0,0,0,0.7);
  text-align: center;
  width: 90%;
  pointer-events: none; /* napisy nie blokują klikalności */
}

/* Główny napis (większy i wyżej) */
.page-gdzie-trenujemy .lokacja-napis {
  bottom: 35%;
  font-size: 2rem;
  font-weight: 700;
}

/* Podtytuł (mniejszy, niżej) */
.page-gdzie-trenujemy .lokacja-podtytul {
  bottom: 10%;
  font-size: 1.2rem;
}

/* Zaokrąglone narożniki zdjęć */
.page-gdzie-trenujemy .lokacja {
  border-radius: 12px;  /* stopień zaokrąglenia */
  overflow: hidden;     /* żeby obraz też miał zaokrąglone rogi */
}

/* Ustawiona wysokość kontenera obrazka i przycięcie nadmiaru */
.page-gdzie-trenujemy .lokacja {
  height: 650px;       /* docelowa wysokość bloku z obrazem */
  overflow: hidden;    /* przycina wszystko poza limitem wysokości */
}

/* Rozciągnięcie obrazka na cały kontener i kadrowanie */
.page-gdzie-trenujemy .lokacja img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* wypełnia i przycina, zachowując proporcje */
  display: block;
}

/* Odstęp pod sekcją ze zdjęciami */
.page-gdzie-trenujemy .gdzie-lokacje {
  margin-bottom: 2rem;  /* zmień 2rem na dowolną wartość */
}

.page-gdzie-trenujemy .lokacja-napis {
  font-size: 2.5rem;       /* zwiększona wielkość czcionki */
  line-height: 1.1;       /* opcjonalnie lepsze wyśrodkowanie w pionie */
}

/* Podtytuł nieco wyżej */
.page-gdzie-trenujemy .lokacja-podtytul {
  bottom: 25%;    /* zamiast 10% */
}

.page-gdzie-trenujemy .lokacja-podtytul {
  font-size: 1.6rem;    /* nowe powiększone rozmiary – dopasuj wedle uznania */
  line-height: 1.2;      /* opcjonalnie dla lepszej czytelności */
}

/* Upewnij się, że kontener jest pozycjonowany */
.page-gdzie-trenujemy .lokacja {
  position: relative;
  overflow: hidden;
}

/* Półprzezroczysta nakładka */
.page-gdzie-trenujemy .lokacja::after {
  content: "";
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  background-color: rgba(0, 0, 0, 0.5); /* czarne przyciemnienie o 40% kryciu */
  pointer-events: none; /* nakładka nie blokuje klikalności */
  z-index: 1;
}

/* Tekst nad nakładką */
.page-gdzie-trenujemy .lokacja-napis,
.page-gdzie-trenujemy .lokacja-podtytul {
  position: absolute; /* już zadeklarowane wcześniej */
  z-index: 2;         /* ponad nakładką */
}

.white-container .container-title {
  font-size: 2.5rem;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

/* Wyśrodkowanie nagłówka sekcji „Trenerzy Piłkarscy” */
.trainer-section-title {
  text-align: center !important;
  margin: 0 auto 1.5rem;
}

/* 1) Celujemy bezpośrednio w <h2> wewnątrz sekcji o ID pilkarscy */
section#pilkarscy > h2.trainer-section-title {
  margin-top: 5rem !important;
}



/* Powiększenie napisu „Trenerzy Piłkarscy” */
section#pilkarscy h2 {
  font-size: 2rem !important;  /* ustaw dowolnie: 2.5rem / 4rem itd. */
  line-height: 1.1 !important;
  font-weight: 700 !important;
}


/* ⚽ Zmniejszenie odstępów tylko w sekcji „Trenerzy Piłkarscy” */
section#pilkarscy .trainer-grid {
  display: flex !important;      /* flex, by gap działał pewnie */
  flex-wrap: nowrap !important;  /* bez zawijania */
  gap: 0.5rem !important;        /* zmniejszony odstęp między kartami */
}

/* Usuń wszystkie dodatkowe marginesy z kart */
section#pilkarscy .trainer-card {
  margin: 0 !important;
}

/* Jeśli potrzebujesz ostatniej karty bez prawa przerwy: */
section#pilkarscy .trainer-card:last-child {
  margin-right: 0 !important;
}

/* Wszystkie sekcje trenerów */
section.trainer-section .trainer-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0.5rem !important;
}
section.trainer-section .trainer-card {
  margin: 0 !important;
}

/* Ujednolicenie rozmiaru wszystkich tytułów sekcji trenerów */
.trainer-section-title {
  font-size: 2rem !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

/* Margines nad tytułami sekcji oprócz piłkarskiej */
section.trainer-section:not(#pilkarscy) .trainer-section-title {
  margin-top: 3rem; /* ustaw wg potrzeb, np. 1.5rem lub 3rem */
}


/* Powiększenie zdjęć tylko w sekcji „Trenerzy Motoryczni” */
section#motoryczni .trainer-card {
  flex: 0 0 auto !important;
  width: 400px !important;      /* zwiększona szerokość karty */
}

section#motoryczni .trainer-card img {
  display: block !important;
  width: 100% !important;       /* obraz wypełnia całą szerokość karty */
  height: auto !important;      /* zachowuje proporcje */
  object-fit: cover !important; /* kadruje nadmiar, jeśli trzeba */
}

/* Powiększenie zdjęć tylko w sekcji „Trenerzy Bramkarscy” do szerokości 400px */
section#bramkarze .trainer-card {
  flex: 0 0 auto !important;
  width: 400px !important;      /* zwiększona szerokość karty do 400px */
}

section#bramkarze .trainer-card img {
  display: block !important;
  width: 100% !important;       /* obraz wypełnia całą szerokość karty */
  height: auto !important;      /* zachowuje proporcje */
  object-fit: cover !important; /* kadruje nadmiar, jeśli trzeba */
}

/* Powiększenie zdjęć tylko w sekcji „Trenerzy Mentalni” */
section#mentalni .trainer-card {
  flex: 0 0 auto !important;
  width: 400px !important;      /* dostosuj szerokość karty wedle potrzeby */
}

section#mentalni .trainer-card img {
  display: block !important;
  width: 100% !important;       /* obraz wypełnia całą szerokość karty */
  height: auto !important;      /* zachowuje proporcje */
  object-fit: cover !important; /* kadruje nadmiar, jeśli trzeba */
}

/* Zwiększenie odstępu pod zdjęciami w sekcji „Trenerzy Mentalni” */
section#mentalni .trainer-grid {
  margin-bottom: 2rem; /* dostosuj wielkość marginesu wedle potrzeb */
}

/* (Opcjonalnie) Jeśli chcesz zwiększyć padding całej sekcji */
section#mentalni {
  padding-bottom: 2rem; /* dodatkowy wewnętrzny odstęp na dole sekcji */
}


/* Zapobieganie poziomemu scrollowaniu i zawężenie strony na telefonach */
@media (max-width: 768px) {
  /* Wyłącz poziome przewijanie dla całego dokumentu */
  html, body {
    overflow-x: hidden !important;
  }

  /* Zawężenie głównych kontenerów i dodanie paddingu */
  .site-main,
  .white-container,
  .content-container,
  .container {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
  }

  /* Upewnij się, że żaden element nie wychodzi poza ekran */
  section,
  .trainer-grid,
  .gdzie-lokacje,
  .double-menu,
  header,
  img {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}



@media only screen and (max-width: 768px) {
  html,
  body {
    background-color: #000 !important;
  }
}

@media only screen and (max-width: 768px) {
  /* Na urządzeniach mobilnych ustawiamy tło nagłówka na czarne */
  header {
    background-color: #000 !important;
  }
  
  /* Jeśli używasz klasy zamiast taga <header>, np. .site-header, zmień selector: */
  /* .site-header { background-color: #000 !important; } */
}
  
  

@media only screen and (max-width: 768px) {
  /* POKAŻ krótkie nazwy i ukryj długie */
  .menu-row.short-names {
    display: flex !important;
    gap: 20px;           /* zachowaj odstępy */
  }
  .menu-row.long-names {
    display: none !important;
  }
}













@media (min-width: 768px) {
  /* przełączamy układ na flex (jeśli jeszcze nie jest) */
  .product-layout {
    display: flex;
    align-items: flex-start;
  }

  /* zwiększamy lewą kolumnę z galerią do 50% szerokości */
  .product-gallery {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* zmniejszamy prawą kolumnę szczegółów do 50% */
  .product-details {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* upewniamy się, że obrazek wypełnia w całości kontener */
  .gallery-main img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}


@media (min-width: 768px) {
  .product-gallery .gallery-thumbs .thumb {
    height: 95px !important;   /* nieco większa wysokość */
    width: auto !important;     /* proporcje zachowane */
    margin-right: 8px;
  }
}





/* kontener przycisków */
.where-section .locations-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-bottom: 40px;
}

/* sam przycisk‑karta */
.location-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  /* nieco szerszy niż standardowe karty */
  width: 320px;
  height: 180px;

  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  text-decoration: none;

  transition: transform .2s, box-shadow .2s;
}

/* ciemna nakładka pod tekstem */
.location-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}

/* tytuł na wierzchu */
.location-btn__title {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* efekt hover */
.location-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

/* Dolna przestrzeń pod tytułem */
.where-section h2 {
  margin-bottom: 24px;
}

/* Dodatkowy górny margines dla kontenera przycisków */
.where-section .locations-buttons {
  margin-top: 16px;
}

/* ————— kontener przycisków ————— */
.locations-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 16px;
  margin-bottom: 40px;
}

/* ————— sam przycisk ————— */
.location-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 320px;
  height: 180px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.location-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}
.location-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

/* ————— tytuł wewnątrz przycisku ————— */
.location-btn__title {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
}

/* ————— adres pod tytułem ————— */
.lokacja-podtytul {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 6px;
  font-size: 0.9rem;
  font-weight: 400;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  text-align: center;
}

/* ————— odstęp pod nagłówkiem sekcji ————— */
.where-section h2 {
  margin-bottom: 24px;
}

/* Wyłącz animację unoszenia i cień na hover */
.location-btn:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Dodaj płynne przejście dla nakładki */
.location-btn::before {
  transition: background .2s ease;
}

/* Na hover zwiększamy przezroczystość filtra, by przyciemnić zdjęcie */
.location-btn:hover::before {
  background: rgba(0, 0, 0, 0.6) !important;
}

/* mocniejszy domyślny filtr */
.location-btn::before {
  background: rgba(0, 0, 0, 0.5) !important;      /* z 0.4 → 0.5 */
  transition: background .2s ease;
}

/* jeszcze mocniejszy filtr na hover */
.location-btn:hover::before {
  background: rgba(0, 0, 0, 0.8) !important;      /* z 0.6 → 0.8 */
}

/* delikatnie jaśniejszy domyślny filtr */
.location-btn::before {
  background: rgba(0, 0, 0, 0.6) !important;  /* z 0.7 → 0.6 */
}

/* jaśniejszy efekt po najechaniu */
.location-btn:hover::before {
  background: rgba(0, 0, 0, 0.7) !important;  /* z 0.8 → 0.75 */
}

/* zmniejszona wysokość przycisków‑kart Gdzie trenujemy */
.location-btn {
  height: 100px !important;  /* z 180px → 160px */
}

/* zwiększona szerokość przycisków‑kart Gdzie trenujemy */
.location-btn {
  width: 450px !important;  /* z 320px → 360px */
}

/* wyrównanie przycisków do lewej pod nagłówkiem */
.where-section .locations-buttons {
  justify-content: flex-start !important;
  /* opcjonalnie: jeśli chcesz, żeby przyciski zaczynały się dokładnie pod tytułem,
     usuń padding/margin kontenera i ewentualnie dodaj własny margines: */
  margin-left: 0;
  padding-left: 0;
}

/* pogrubienie adresów w przyciskach */
.lokacja-podtytul {
  font-weight: 600 !important;
}

@media (min-width: 768px) {
  /* Rozciągamy te sekcje na pełną szerokość kontenera */
  #section-benefits,
  #section-gallery,
  #section-coaches {
    max-width: none !important;
    width: 100% !important;
    /* jeżeli chcesz zachować boczny odstęp, np. 20px: */
    padding: 0px 20px !important;
    /* lub jeśli bez bocznych paddingów: */
    /* padding: 40px 0 !important; */
  }
}




/* biały kontener wokół sekcji Korzyści */
.section-benefits .benefits-container {
  background-color: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  /* jeśli chcesz, wycentruj szerokość lub ogranicz max-width: */
  /* max-width: 800px; margin: 0 auto; */
}

/* opcjonalnie: wewnętrzne odstępy H2 i content */
.section-benefits .benefits-container h2 {
  margin-top: 0;
  margin-bottom: 16px;
}
.section-benefits .benefits-content {
  /* tutaj możesz dodać grid lub list-style dla swoich benefitów */
}

/* wyśrodkowanie tekstu nagłówka Korzyści */
.section-benefits .benefits-container h2 {
  text-align: center;
}

/* delikatnie jaśniejsze tło dla sekcji Korzyści */
.section-benefits .benefits-container {
  background-color: #f7f4ef !important;
}

/* kontener Korzyści */
.section-benefits .benefits-container {
  background-color: #f7f4ef;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* wyśrodkowanie nagłówka */
.section-benefits .benefits-container h2 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 16px;
}

/* siatka ikon w sekcji Korzyści */
.section-benefits .benefits-content .benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 24px;
  text-align: center;
}

/* styl emotki */
.benefit-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 8px;
}

/* podpis pod emotką */
.benefit-text {
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
}

/* wymuszenie B&W na emoji */
.section-benefits .benefit-icon {
  display: inline-block;       /* by filter zadziałał poprawnie */
  filter: grayscale(100%) 
          contrast(150%)       /* zwiększa czytelność detali */
          brightness(80%);     /* przyciemnia nieco */
}

/* biały kontener wokół sekcji Korzyści */
.section-benefits .benefits-container {
  background-color: #f7f4ef;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* wyśrodkowanie nagłówka */
.section-benefits .benefits-container h2 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 16px;
}

/* siatka ikon w sekcji Korzyści */
.section-benefits .benefits-content .benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 24px;
  text-align: center;
}

/* styl emotki */
.benefit-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 8px;
}

/* podpis pod emotką */
.benefit-text {
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
}

/* krótki opis korzyści */
.benefit-desc {
  font-size: 0.875rem;
  color: #555;
  margin-top: 6px;
  margin-bottom: 0;
}

/* większe emotki w sekcji Korzyści */
.section-benefits .benefit-icon {
  font-size: 7.5rem !important; /* z 2.5rem → 3.5rem */
}

/* większy nagłówek „Korzyści” */
.section-benefits .benefits-container h2 {
  font-size: 2.5rem !important; /* dostosuj wartość: np. 2.2rem, 3rem itd. */
}

.section-benefits .benefits-container h2 {
  margin-bottom: 42px !important; /* z 16px → 32px */
}

/* powiększenie i pogrubienie tytułów korzyści */
.section-benefits .benefit-text {
  font-size: 1.3rem !important;   /* np. z 1rem → 1.1rem */
  font-weight: 600    !important; /* pogrubienie */
  line-height: 1.3;               /* zachowanie czytelnej interlinii */
}

/* pogrubienie dodatkowych opisów korzyści */
.section-benefits .benefit-desc {
  font-weight: 600 !important;
}

/* 1) Upewniamy się, że wszystkie karty startują od góry */
.section-benefits .benefits-grid {
  align-items: start !important;
}

/* 2) Każda karta układa się od góry: */
.section-benefits .benefit-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;  /* kluczowe */
}

/* 3) Ikonka ma zerowe marginesy i linię dokładnie na górze */
.section-benefits .benefit-icon {
  display: block !important;
  margin: 0 !important;
  line-height: 1 !important;
  vertical-align: top !important;
}

/* podniesienie ikonki w pierwszej korzyści (Wiele powtórzeń) */
.section-benefits .benefits-grid .benefit-item:nth-child(1) .benefit-icon {
  transform: translateY(-8px);
}

/* przesunięcie tekstu i opisu w pierwszym benefit-item (Wiele powtórzeń) niżej */
.section-benefits .benefits-grid .benefit-item:nth-child(1) .benefit-text,
.section-benefits .benefits-grid .benefit-item:nth-child(1) .benefit-desc {
  margin-top: 4px !important;  /* dostosuj wartość w razie potrzeby */
}


/* przesunięcie tylko opisu „Wiele powtórzeń” niżej */
.section-benefits .benefits-grid .benefit-item:nth-child(1) .benefit-desc {
  margin-top: 7px !important; /* dostosuj, jeśli potrzeba więcej/mniej */
}

/* wyśrodkowanie nagłówka w sekcji Trenerzy Piłkarscy BWT */
.section-coaches h2 {
  text-align: center !important;
}

/* powiększenie czcionki nagłówka „Trenerzy Piłkarscy BWT” */
.section-coaches h2 {
  font-size: 2.2rem !important;  /* zmień 2.5rem na 3rem, jeśli wolisz jeszcze większe */
  font-weight: 700 !important;   /* opcjonalnie pogrubienie */
}

/* większy odstęp między Korzyściami a sekcją Trenerzy */
.section-coaches {
  margin-top: 30px !important;  /* dostosuj wartość do swoich potrzeb */
}

/* Ustawienie rozmiaru i wagi fontu dla nagłówka sekcji Korzyści */
#section-benefits h2 {
  font-size: 2.2rem !important;
  font-weight: 700  !important;
}

/* Jednolity rozmiar i waga fontu dla wszystkich nagłówków sekcji */
#section-details h2,
#section-where h2,
#section-gallery h2 {
  font-size: 2rem !important;
  font-weight: 700  !important;
}

/* wyśrodkowanie nagłówków w sekcjach Szczegóły, Gdzie trenujemy i Galeria */
#section-details h2,
#section-where h2,
#section-gallery h2 {
  text-align: center !important;
}

/* wyśrodkowanie przycisków w sekcji Gdzie trenujemy? */
#section-where .locations-buttons {
  justify-content: center !important;
}

/* wyśrodkowanie przycisku‑karty w teaserze galerii */
#section-gallery-teaser .locations-buttons {
  justify-content: center !important;
}

/* przywrócenie normalnego tekstu (brak uppercase) w tytule przycisku galerii */
#section-gallery .location-btn__title {
  text-transform: none !important;
}

/* niższy przycisk‑karta w sekcji Galeria */
#section-gallery .locations-buttons .location-btn {
  height: 80px !important;  /* zamiast 180px – dostosuj wartość wg potrzeby */
}

/* szerszy przycisk‑karta w sekcji Galeria */
#section-gallery .locations-buttons .location-btn {
  width: 500px !important;  /* zmień 360px na dowolną wartość, która Ci odpowiada */
}





/* kontener siatki trenerów */
.section-coaches .coaches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

/* pojedyncza karta trenera */
.coach-card {

  border-radius: 8px;

  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  text-align: center;
  transition: transform .2s, box-shadow .2s;
}

.coach-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}

/* zdjęcie */
.coach-photo {
  width: 100%;
  padding-top: 75%; /* proporcja 4:3 */
  background-size: cover;
  background-position: center;
}

/* imię i rola */
.coach-name {
  margin: 16px 0 4px;
  font-size: 1.25rem;
  font-weight: 700;
}

.coach-role {
  margin: 0 0 16px;
  font-size: 0.95rem;
  color: #555;
}

/* 1) Przygotuj photo-container */
.section-coaches .coach-photo {
  position: relative;      /* będzie odniesieniem dla pseudo */
  overflow: visible;       /* by belka nadrunęła na zawartość */
}

/* 2) Nowa belka na dole obrazka */
.section-coaches .coach-photo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px; /* wysokość belki — dostosuj */
  background: rgba(0, 0, 0, 0.6);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* 3) Przesuń tekst w górę, żeby wylądował w tej belce */
.section-coaches .coach-name {
  margin-top: -60px;   /* dopasuj do połowy wysokości belki */
  color: #fff !important;
}
.section-coaches .coach-role {
  margin-top: 4px;
  color: #fff !important;
}

/* zwiększenie wysokości zdjęć trenerów */
.section-coaches .coach-photo {
  padding-top: 95% !important; /* z 75% → 85% */
}

/* tekst trenerów nad pseudoelementem belki i w kolorze białym */
.section-coaches .coach-card {
  position: relative; /* upewniamy się, że można pozycjonować wewnętrzne elementy */
}

.section-coaches .coach-photo::after {
  z-index: 1; /* belka jest niżej */
}

.section-coaches .coach-name,
.section-coaches .coach-role {
  position: relative !important;
  z-index: 2 !important;    /* nad belką */
  color: #ffffff !important;/* czysty biały */
}






/* 3) Belka i tekst zachowują się jak dotąd */
.section-coaches .coach-photo::after {
  z-index: 1;
}
.section-coaches .coach-name,
.section-coaches .coach-role {
  z-index: 2;
}

/* pełne zaokrąglenie rogów zdjęć trenerów */
.section-coaches .coach-photo {
  border-radius: 8px !important;
  overflow: hidden    !important;
}

/* jeszcze ciemniejszy odcień tekstu stanowiska trenerów */
.section-coaches .coach-role {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* pogrubienie napisu stanowiska trenerów */
.section-coaches .coach-role {
  font-weight: 600 !important;
}































/* 1. Wyśrodkowanie i ograniczenie szerokości FAQ */
#section-details {
  text-align: center;
}
#section-details .accordion {
  max-width: 600px;
  margin: 0 auto;
}

/* 2. Styl każdej pozycji FAQ */
#section-details .accordion-item {
  border: 1px solid #000;
  border-radius: 8px;
  margin-bottom: 16px;
  background-color: #fff;
  overflow: hidden;
  transition: background-color .3s, box-shadow .3s;
}

/* 3. Nagłówek (tytuł pytania) */
#section-details .accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  font-weight: 600;
  font-size: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
}

/* strzałka po prawej */
#section-details .accordion-header::after {
  content: "v";
  font-size: 0.8em;
  transition: transform .3s;
}

/* obrócenie strzałki, gdy rozwinięte */
#section-details .accordion-item.open .accordion-header::after {
  transform: rotate(180deg);
}

/* 4. Sekcja odpowiedzi */
#section-details .accordion-content {
  padding: 0 20px 16px;
  font-size: 0.95rem;
  color: #333;
  line-height: 1.5;
  display: none;
}

/* pokazujemy odpowiedź tylko dla otwartych */
#section-details .accordion-item.open .accordion-content {
  display: block;
}

/* 5. Hover efekt na nagłówku */
#section-details .accordion-header:hover {
  background-color: rgba(0,0,0,0.05);
}

/* 6. Opcjonalnie: przy otwarciu lekki cień */
#section-details .accordion-item.open {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* usuń biały background w blokach FAQ */
#section-details .accordion-item {
  background-color: transparent !important;
}

/* opcja 1: zwiększamy max-width do 800px */
#section-details .accordion {
  max-width: 1000px !important;
}

/* opcja 2 (alternatywna): całkowicie usuwamy ograniczenie szerokości */
/*
#section-details .accordion {
  max-width: none !important;
  width: 100% !important;
}
*/

/* padding wewnątrz bloków FAQ */
#section-details .accordion-header,
#section-details .accordion-content {
  padding-left: 30px !important;
  padding-right: 24px !important;
}

/* pogrubienie konturu FAQ */
#section-details .accordion-item {
  border-width: 2px !important;    /* z 1px → 2px */
  border-style: solid !important;
}

/* —— USUNIĘCIE EFEKTÓW Z FAQ —— */

/* 1) Usuń wszystkie cienie i przejścia z kart */
#section-details .accordion-item {
  box-shadow: none      !important;
  transition: none      !important;
}

/* 2) Przywróć jednolite obramowanie i tło */
#section-details .accordion-item {
  background-color: transparent !important;
  border: 2px solid #000        !important;
}

/* 3) Usuń hover‑owe podbarwienie nagłówka */
#section-details .accordion-header:hover {
  background-color: transparent !important;
}

/* 4) Usuń obrót strzałki z przejściem */
#section-details .accordion-header::after {
  transition: none !important;
}

/* 5) Usuń cień przy otwartej karcie */
#section-details .accordion-item.open {
  box-shadow: none !important;
}

/* 1) Wyzeruj zaokrąglenia na wszystkich nagłówkach */
#section-details .accordion-header {
  border-radius: 0 !important;
}

/* 2) Pierwszy nagłówek – zaokrąglone tylko górne rogi */
#section-details .accordion-item:first-child .accordion-header {
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
}

/* 3) Ostatni nagłówek – zaokrąglone tylko dolne rogi */
#section-details .accordion-item:last-child .accordion-header {
  border-bottom-left-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}

/* —— Korekta górnej krawędzi tylko pierwszego bloku FAQ —— */
#section-details .accordion-item:first-child {
  /* upewniamy się, że ma zaokrąglone tylko górne rogi */
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
  /* i że nie ma „podwójnej” linii przy samej górze */
  margin-top: 0 !important;
}

/* Jeżeli header ma własne obramowanie, usuńmy je nad pierwszym blokiem */
#section-details .accordion-item:first-child .accordion-header {
  border-top: none !important;
}

/* pogrubienie górnej granicy tylko pierwszego FAQ-bloku */
#section-details .accordion-item:first-child {
  border-top: 2px solid #000 !important;  /* zmień 3px na 4px, jeśli potrzebujesz grubszej */
}

/* pogrubienie dolnej granicy tylko ostatniego FAQ-bloku */
#section-details .accordion-item:last-child {
  border-bottom: 2px solid #000 !important;
}

/* wyrównanie odstępu tytułów wewnątrz FAQ-bloków */
#section-details .accordion-header {
  /* ustaw tę samą wartość padding‑top dla wszystkich nagłówków */
  padding-top: 24px !important;
  /* jeśli trzeba – i padding‑bottom, by zachować wysokość */
  padding-bottom: 24px !important;
}

/* jednakowy padding pod tytułem we wszystkich nagłówkach FAQ */
#section-details .accordion-header {
  padding-bottom: 24px !important;  /* ta sama wartość, co padding-top */
}

/* jednakowy padding pod tytułem we wszystkich nagłówkach FAQ */
#section-details .accordion-header {
  padding-bottom: 12px !important;  /* ta sama wartość, co padding-top */
}

/* FAQ: kolor tekstu odpowiedzi jak na zrzucie ekranu */
#section-details .accordion-content {
  color: #757575 !important;
}

/* pogrubienie tekstu zarówno pytań, jak i odpowiedzi w FAQ */
#section-details .accordion-header,
#section-details .accordion-content {
  font-weight: 600 !important;
}

/* ——— KARUZELA TRENERÓW ——— */
.trainers-carousel {
  padding: 40px 0;
  background-color: #f5eee0;
}
.trainers-carousel__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}
.trainers-carousel__heading {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

/* Nawigacja */
.trainers-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  background: rgba(0,0,0,0.3);
  border: none; border-radius: 50%;
  color: #fff; font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .3s;
  z-index: 10;
}
.trainers-carousel__nav:hover {
  background: rgba(0,0,0,0.5);
}
.trainers-carousel__nav--prev { left: 15px; }
.trainers-carousel__nav--next { right: 15px; }

/* Widok slajdów */
.trainers-carousel__viewport {
  overflow: hidden;
}
.trainers-carousel__track {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
  transition: transform .4s ease;
}

/* Pojedynczy slajd */
.trainers-carousel__slide {
  position: relative;
  flex: 0 0 calc(20% - 16px);
  opacity: 0.5;
  cursor: pointer;
  transition: transform .4s, opacity .4s;
}
.trainers-carousel__slide.active {
  transform: scale(1.1);
  opacity: 1;
  z-index: 5;
}
.trainers-carousel__slide.adjacent {
  opacity: 0.8;
}

.trainers-carousel__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.trainers-carousel__info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 8px;
  text-align: center;
}
.trainers-carousel__name {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}
.trainers-carousel__role {
  margin: 4px 0 0;
  font-size: 0.9rem;
}

.trainers-carousel {
  padding: 10px 0;    /* zmniejszony odstęp góra/dół */
  /* … */
}

/* Zmniejszenie odstępu nad nagłówkiem */
.trainers-carousel__heading {
  margin-top: -0.5rem;    /* ustaw dowolną wartość */
  margin-bottom: 1.5rem; /* można zostawić dotychczasowe */
}

/* wymuszamy stałą wysokość slajdu i dopasowanie obrazka */
.trainers-carousel__slide {
  /* wysokość możesz dobrać sam, np. 260px jak wcześniej */
  height: 260px;
  position: relative;
  overflow: hidden;
}

.trainers-carousel__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;    /* zachowuje proporcje i przycina grafikę */
  border-radius: 8px;
}

/* 1. Ustawienie wspólnego przejścia */
.trainers-carousel__slide {
  transition: transform .4s ease, opacity .4s ease;
  transform-origin: center center;
}

/* 2. Domyślny rozmiar „najdalej od środka” */
.trainers-carousel__slide {
  transform: scale(0.75);   /* najmniejsze slajdy */
  opacity: 0.5;
  z-index: 1;
}

/* 3. Slajdy pośrednie (adjacent) */
.trainers-carousel__slide.adjacent {
  transform: scale(0.9);    /* trochę większe */
  opacity: 0.8;
  z-index: 3;
}

/* 4. Slajd aktywny (środek) */
.trainers-carousel__slide.active {
  transform: scale(1.1);    /* największy */
  opacity: 1;
  z-index: 5;
}

/* 1. Podstawowy odstęp między wszystkimi slajdami */
.trainers-carousel__track {
  gap: 20px;    /* zmień na 12px / 20px – w zależności od potrzeb */
}

/* 2. Dodatkowy margines tylko wokół środkowego (active) */
.trainers-carousel__slide.active {
  /* zwiększamy przestrzeń po bokach środkowego slajdu:
     gap + dodatkowy margin = optycznie równy odstęp */
  margin: 0 16px;    /* tutaj daj tyle, ile wynosi gap z punktu 1 */
}

/* 3. Ewentualnie – żeby zmniejszyć odstęp między mniejszymi slajdami */
.trainers-carousel__slide:not(.active) {
  margin: 0;         /* czyść marginesy, by gap był jedynym źródłem spacingu */
}

/* Dodanie indywidualnego marginesu między 1. a 2. slajdem */
.trainers-carousel__track .trainers-carousel__slide:nth-child(1) {
  margin-right: -5px; /* ustaw tu wartość odstępu */
}

/* RESET: usuń wszystkie marginesy i odstępy między slajdami */
.trainers-carousel__track {
  display: flex;
  gap: 0;             /* likwiduje odstępy ustawione przez gap */
  margin: 0;
  padding: 0;
  list-style: none;
}

.trainers-carousel__slide {
  margin: 0 !important;   /* usuwa wszelkie narzucone marginesy */
  padding: 0;
}

/* 1) Wrapper musi być flexem i centrować zawartość */
.trainers-carousel__viewport {
  display: flex;
  justify-content: center; /* poziome wyśrodkowanie tracka */
  overflow: hidden;
  position: relative;
  padding: 0 40px;
}

/* 2) Track – flex bez rozciągania na 100% i ze środowym ustawieniem */
.trainers-carousel__track {
  display: flex;
  justify-content: center; /* środkowanie slajdów */
  gap: 16px;               /* odstęp między wszystkimi slajdami */
  margin: 0;               /* usuwamy wszelkie marginesy */
  padding: 0;
  list-style: none;
  width: max-content;      /* track dostosowuje się do szerokości slajdów */
}

/* 3) Slajdy – reset marginesów */
.trainers-carousel__slide {
  margin: 0;
}

/* Powiększenie tylko środkowego (active) slajdu */
.trainers-carousel__slide.active {
  transform: scale(1.3);   /* zwiększ skalę do 1.3 lub innej wartości */
  transition: transform .4s ease;
}

/* 1. Upewnij się, że wszystkie slajdy mają bazową wysokość */
.trainers-carousel__slide {
  height: 260px;                 /* dotychczasowa wysokość mniejszych slajdów */
  transition: height .4s ease;   /* płynna zmiana wysokości */
  overflow: hidden;
}

/* 2. Wyższy środkowy slajd */
.trainers-carousel__slide.active {
  height: 360px;                 /* nowa, większa wysokość środkowego slajdu */
}

/* 3. Aby dolne krawędzie były równe, wypoziomuj je w flex-containerze */
.trainers-carousel__track {
  display: flex;
  align-items: flex-end;         /* bottom-align slajdów */
  gap: 16px;                     /* odstęp między slajdami */
}

/* 4. Obrazek wypełnia cały slajd */
.trainers-carousel__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 1. Równy odstęp między slajdami */
.trainers-carousel__track {
  display: flex;
  gap: 16px;
}

/* 2. Bazowa szerokość dla pozostałych slajdów */
.trainers-carousel__slide {
  flex: 0 0 20%;       /* 20% szerokości kontenera */
  transition: flex-basis .4s ease;
}

/* 3. Delikatnie większy slajd active */
.trainers-carousel__slide.active {
  flex: 0 0 22%;       /* 22% szerokości kontenera */
}

/* Pozycjonowanie i typografia tylko na głównym slajdzie */
.trainers-carousel__slide.active .trainers-carousel__info {
  bottom: 24px;              /* odsuń info wyżej */
  padding: 10px 0;           /* wewnętrzny odstęp */
  background: rgba(0, 0, 0, 0.7);
}

.trainers-carousel__slide.active .trainers-carousel__name {
  font-size: 1.3rem;         /* większy nagłówek */
  line-height: 1.2;
  margin: 0;
}

.trainers-carousel__slide.active .trainers-carousel__role {
  font-size: 1rem;           /* większy podtytuł */
  margin: 4px 0 0;
}

/* Podniesienie tekstu jeszcze wyżej na głównym slajdzie */
.trainers-carousel__slide.active .trainers-carousel__info {
  bottom: 36px;   /* zamiast 24px */
}

/* Centerujemy slajdy względem naj­wyższego active */
.trainers-carousel__track {
  display: flex;           
  align-items: center;     /* zamiast flex-end */
  min-height: 360px;       /* = wysokość active slide, by track miał odpowiednią wysokość */
  gap: 16px;               /* zachowujemy odstępy między slajdami */
}

/* baza – mały gap między wszystkimi slajdami */
.trainers-carousel__track {
  display: flex;
  gap: 16px;
}

/* dodatkowy odstęp wokół środkowego (3. w kolejności) slajdu */
.trainers-carousel__track > .trainers-carousel__slide:nth-child(3) {
  margin-left: 32px !important;
  margin-right: 32px !important;
}

/* Główny slajd — nieco węższy */
.trainers-carousel__slide.active {
  flex: 0 0 21%;    /* zamiast np. 22% lub 24% */
}

/* —————— 1) GLOBALNY RESET ZAOKRAGLÉŃ I OVERFLOW —————— */
#trainers-carousel *,
#trainers-carousel *::before,
#trainers-carousel *::after {
  border-radius: 0 !important;
  overflow: visible !important;
}

/* —————— 2) NOWE ZAOKRAGLENIE TYLKO GŁÓWNEGO SLAJDU —————— */
/* wrapper */
#trainers-carousel .trainers-carousel__slide.active {
  overflow: hidden !important;
  border-radius: 12px !important;
}

/* obrazek */
#trainers-carousel .trainers-carousel__slide.active img.trainers-carousel__image {
  display: block !important;
  border-radius: 12px !important;
}

/* nakładka z imieniem/rolą */
#trainers-carousel .trainers-carousel__slide.active .trainers-carousel__info {
  overflow: hidden !important;
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

/* —————— 1) Globalny reset (już masz) —————— */
/* #trainers-carousel *, …  wyzeruje border-radius dla wszystkich */

/* —————— 2) Przywrócenie zaokrąglenia na każdy slajd —————— */
#trainers-carousel .trainers-carousel__slide {
  border-radius: 8px !important;
  overflow: hidden !important;   /* by wrapper przycinał zawartość */
}

/* —————— 3) Większe zaokrąglenie tylko centralnego slajdu —————— */
#trainers-carousel .trainers-carousel__slide.active {
  border-radius: 12px !important;
}

/* —————— 4) Dla pewności — zaokrąglamy też obrazki i nakładki —————— */
#trainers-carousel .trainers-carousel__slide img {
  display: block !important;
  border-radius: 8px !important;
}
#trainers-carousel .trainers-carousel__slide.active img {
  border-radius: 12px !important;
}

#trainers-carousel .trainers-carousel__slide .trainer-info {
  overflow: hidden !important;
  border-bottom-left-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}
#trainers-carousel .trainers-carousel__slide.active .trainer-info {
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

/* WYMIENIE KOD TYLKO DLA AKTYWNEGO SLAJDU */

/* 1. Ustaw wysokość wyłącznie dla głównego (active) slajdu */
#trainers-carousel .trainers-carousel__slide.active {
  height: 280px;              /* dopasuj wartość do swoich potrzeb */
  overflow: hidden;           /* przytnie wszystko, co wyjdzie poza ramkę */
}

/* 2. Obrazek wypełnia cały obszar active-slajdu */
#trainers-carousel .trainers-carousel__slide.active img.trainers-carousel__image {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* zachowa proporcje, obetnie nadmiar */
  display: block;
}

/* Przesunięcie tekstu aktywnego slajdu niżej */
#trainers-carousel .trainers-carousel__slide.active .trainers-carousel__info {
  bottom: 2px !important;   /* niżej niż było 16px */
}

/* Zmniejszenie font-size tylko dla stanowiska na głównym slajdzie */
#trainers-carousel .trainers-carousel__slide.active .trainers-carousel__role {
  font-size: 0.8rem;    /* dostosuj wartość (np. 0.85rem lub 0.8rem) */
  line-height: 1.2;     /* opcjonalnie – by zachować proporcje */
}

/* Kolor dla wszystkich napisów z rolami trenerów */
#trainers-carousel .trainers-carousel__role {
  color: #cccccc !important;  /* zastąp #cccccc dokładnym kodem z próbki, jeśli inny */
}

/* Pogrubienie tekstu stanowisk na wszystkich slajdach */
#trainers-carousel .trainers-carousel__role {
  font-weight: 700 !important;  /* lub „bold”!important */
}

#trainers-carousel .trainers-carousel__slide.active .trainers-carousel__name {
  font-size: 1.2rem !important;  /* przykład mniejszego rozmiaru */
}

/* OKRĄGŁE PRZYCISKI NAWIGACYJNE W KARUZELI TRENERÓW */
#trainers-carousel .trainers-carousel__nav {
  width: 36px !important;               /* szerokość */
  height: 36px !important;              /* wysokość */
  border-radius: 50% !important;        /* pełne koło */
  background: rgba(0, 0, 0, 0.3) !important;
  display: flex !important;             /* centrowanie ikony */
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;                /* usuń dodatkowe paddingi */
  border: none !important;
}

/* Pogrubienie strzałki wewnątrz kółka nawigacji */
#trainers-carousel .trainers-carousel__nav {
  font-weight: 1500 !important;   /* lub „bold” */
}

#trainers-carousel .trainers-carousel__nav {
  top: calc(50% + 30px) !important;
}

/* ===== Usunięcie tła sekcji karuzeli trenerów ===== */
#trainers-carousel,
#trainer-carousel {
  background: none !important;
  background-color: transparent !important;
}

/* Zmniejszenie przerwy tylko między 1–2 i 4–5, bez ruszania gap między 2–3 i 3–4 */
#trainers-carousel .trainers-carousel__slide:nth-child(1) {
  margin-right: -8px !important;  /* nowa wartość między 1 a 2 */
}
#trainers-carousel .trainers-carousel__slide:nth-child(4) {
  margin-right: -8px !important;  /* nowa wartość między 4 a 5 */
}

/* Zmniejszenie odstępu nad nagłówkiem „Poznaj trenerów BWT” */
#trainers-carousel .trainers-carousel__heading {
  margin-top: -50px !important;  /* zamiast 8px wstaw dowolną mniejszą wartość */
}

/* Dodanie odstępu poniżej całej karuzeli trenerów */
#trainers-carousel {
  margin-bottom: 40px !important; /* dostosuj wartość wedle potrzeby */
}

/* ===== Sekcja Wydarzenia BWT ===== */
.wydarzenia-bwt {
  padding: 60px 0;
  background: #f5eee0;
}
.wydarzenia-bwt__heading {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
}

/* Karty w rzędzie */
.wydarzenia-bwt__cards {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

/* Pojedyncza karta-obrazek */
.wydarzenia-bwt__card {
  display: block;
  width: 220px;
  height: 300px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform .3s, box-shadow .3s;
}
.wydarzenia-bwt__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.wydarzenia-bwt__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Przycisk „Sprawdź wszystkie” */
.wydarzenia-bwt__more {
  text-align: center;
}
.wydarzenia-bwt__more .button {
  background-color: #000;
  color: #fff;
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: background-color .3s;
}
.wydarzenia-bwt__more .button:hover {
  background-color: #333;
}

/* Usunięcie tła sekcji Wydarzenia BWT */
.wydarzenia-bwt {
  background: none !important;
  background-color: transparent !important;
}

/* ——— Przycisk „Sprawdź Trenerów BWT” pod karuzelą ——— */
.trainers-carousel__more {
  text-align: center;
  margin-top: 32px;       /* odstęp od karuzeli */
}

.trainers-carousel__button {
  display: inline-block;
  background-color: #000;  /* czarne tło */
  color: #fff;             /* biały tekst */
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: background-color .3s;
}

.trainers-carousel__button:hover {
  background-color: #333;
}

/* Przesunięcie sekcji Wydarzenia BWT nieco wyżej o 20px */
.wydarzenia-bwt {
  margin-top: -110px !important;  /* możesz podać dowolną liczbę ujemną */
}

/* Przesunięcie sekcji Ubrania o 20px wyżej */
.ubrania-section {
  margin-top: -100px !important;  /* zmień wartość na dowolną ujemną liczbę */
}

/* === Baner na stronie Nasze Obozy === */
.page-nasze-obozy__banner {
  position: relative;
  width: 100%;
  margin-bottom: 40px;
  overflow: hidden;
  border-radius: 12px;
}

.page-nasze-obozy__banner-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* półprzezroczysta nakładka z tekstem */
.page-nasze-obozy__banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
}

.page-nasze-obozy__banner-title {
  font-size: 2.5rem;
  margin: 0 0 0.5rem;
  line-height: 1.1;
}

.page-nasze-obozy__banner-subtitle {
  font-size: 1.125rem;
  margin: 0;
  opacity: 0.9;
}

.page-nasze-obozy__banner {
  height: 400px;            
  max-width: 1150px;        /* teraz 1150px szerokości */
  margin: 0 auto 40px;      
  overflow: hidden;
  border-radius: 12px;
}

/* Zmniejszenie odstępu nad banerem na stronie Nasze Obozy */
.page-nasze-obozy__banner {
  margin-top: -60px !important;  /* zmniejsz do 10px lub ustaw na 0 */
}

/* Zmniejszenie wysokości banera na stronie Nasze Obozy */
.page-nasze-obozy__banner {
  height: 140px !important;   /* ustaw nową, mniejszą wysokość */
}

/* Usuń tylko ten “+” w ::after, zachowując strzałkę */
button.accordion-header::after {
  content: none !important;
  display: none !important;
}

/* Zmniejszenie odstępu nad głównym obrazem na stronie głównej */
.home .site-main .content-container {
  /* usuń wszelki padding-top i ewentualny margin-top */
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* dodatkowo upewnij się, że pierwszy section nie dorzuca własnego marginesu */
.home .site-main .content-container > section:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* --- lekki odstęp nad głównym sliderem na stronie głównej –-- */
body.home #simple-slider {
  padding-top: 20px !important;  /* zmień 20px na swoją wartość */
}

/* ================== Banner na stronie Kontakt ================== */
.page-kontakt__banner {
  position: relative;
  max-width: 1150px;         /* szerokość banera */
  height: 300px;             /* wysokość banera */
  margin: 20px auto 40px;    /* centrowanie i odstępy */
  overflow: hidden;
  border-radius: 12px;
}

.page-kontakt__banner-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-kontakt__banner-overlay {
  position: absolute;
  inset: 0;                  /* top:0; right:0; bottom:0; left:0 */
  background: rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
  padding: 0 20px;
  box-sizing: border-box;
}

.page-kontakt__banner-title {
  font-size: 2.5rem;
  margin: 0 0 0.5rem;
}

.page-kontakt__banner-subtitle {
  font-size: 1.125rem;
  margin: 0;
  opacity: 0.9;
}

/* ==== Skorygowana wysokość banera wyłącznie na stronie Kontakt ==== */
.page-kontakt__banner {
  max-height: 100px !important;
  overflow: hidden !important;
  margin-top: -20px !important; /* jeśli nadal potrzebujesz tego odstępu */
}

.page-kontakt__banner-img {
  display: block !important;
  width: 100% !important;
  height: 100px !important;
  object-fit: cover !important;
}

/* Zmniejszona wysokość banera tylko na stronie Kontakt */
.page-kontakt__banner {
  height: 120px !important;       /* ustaw tu nową, mniejszą wysokość */
  overflow: hidden !important;
}

.page-kontakt__banner-img {
  height: 100px !important;       /* dopasuj do wrappera */
  object-fit: cover !important;
}

/* Wyłączamy wszystko z .hero i wymuszamy naszą wysokość */
.hero.page-kontakt__banner {
  all: unset;                /* usuwa wszystkie dotychczasowe właściwości */
  display: block;            /* przywróć elementowi podstawowe zachowanie */
  position: relative;        /* żeby overlay działał */
  max-width: 1150px;
  height: 140px !important;  /* ustaw tu właściwą wysokość */
  margin: 20px auto 40px !important;
  overflow: hidden !important;
  border-radius: 12px !important;
}

/* Obrazek wypełnia wrapper */
.page-kontakt__banner-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.page-kontakt__banner { height: 100px!important; … }
.page-kontakt__banner-img { height: 100px!important; … }

/* ——— Banner Kontakt: 140px wysokości ——— */
.page-kontakt__banner {
  height: 140px !important;
  max-height: 140px !important;
  overflow: hidden !important;
}

.page-kontakt__banner-img {
  display: block !important;
  width: 100% !important;
  height: 140px !important;
  object-fit: cover !important;
}

/* ===== Baner na stronie FAQ ===== */
.page-faq__banner {
  position: relative;
  max-width: 1150px;
  height: 140px;
  margin: -60px auto 40px;
  overflow: hidden;
  border-radius: 12px;
}

.page-faq__banner-img {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
}

.page-faq__banner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
  padding: 0 20px;
  box-sizing: border-box;
}

.page-faq__banner-title {
  font-size: 2.5rem;
  margin: 0 0 0.5rem;
}

.page-faq__banner-subtitle {
  font-size: 1.125rem;
  margin: 0;
  opacity: 0.9;
}

/* ===== Baner na stronie O nas ===== */
.page-onas__banner {
  position: relative;
  max-width: 1150px;
  height: 140px;
  margin: -60px auto 40px;
  overflow: hidden;
  border-radius: 12px;
}

.page-onas__banner-img {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
}

.page-onas__banner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
  padding: 0 20px;
  box-sizing: border-box;
}

.page-onas__banner-title {
  font-size: 2.5rem;
  margin: 0 0 0.5rem;
}

.page-onas__banner-subtitle {
  font-size: 1.125rem;
  margin: 0;
  opacity: 0.9;
}

/* ===== Baner na stronie Współpracuj z BWT ===== */
.page-wspolpracuj-z-bwt__banner {
  position: relative;
  max-width: 1150px;
  height: 140px;
  margin: -80px auto 40px;
  overflow: hidden;
  border-radius: 12px;
}

.page-wspolpracuj-z-bwt__banner-img {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
}

.page-wspolpracuj-z-bwt__banner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
  padding: 0 20px;
  box-sizing: border-box;
}

.page-wspolpracuj-z-bwt__banner-title {
  font-size: 2.5rem;
  margin: 0 0 0.5rem;
}

.page-wspolpracuj-z-bwt__banner-subtitle {
  font-size: 1.125rem;
  margin: 0;
  opacity: 0.9;
}

/* Baner na stronie Gdzie trenujemy */
.page-gdzie-trenujemy__banner {
  position: relative;
  max-width: 1150px;
  height: 140px;
  margin: 20px auto 40px;
  overflow: hidden;
  border-radius: 12px;
}

.page-gdzie-trenujemy__banner-img {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
}

.page-gdzie-trenujemy__banner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
  padding: 0 20px;
  box-sizing: border-box;
}

.page-gdzie-trenujemy__banner-title {
  font-size: 2.5rem;
  margin: 0 0 0.5rem;
}

.page-gdzie-trenujemy__banner-subtitle {
  font-size: 1.125rem;
  margin: 0;
  opacity: 0.9;
}

/* ===== Baner na stronie BWT MRKS ===== */
.page-bwt-mrks__banner {
  position: relative;
  max-width: 1150px;
  height: 140px;
  margin: -60px auto 40px;
  overflow: hidden;
  border-radius: 12px;
}

.page-bwt-mrks__banner-img {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
}

.page-bwt-mrks__banner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
  padding: 0 20px;
  box-sizing: border-box;
}

.page-bwt-mrks__banner-title {
  font-size: 2.5rem;
  margin: 0 0 0.5rem;
}

.page-bwt-mrks__banner-subtitle {
  font-size: 1.125rem;
  margin: 0;
  opacity: 0.9;
}

/* ——— Lokacje BWT Gedanensis jako klikalne karty ——— */
.lokacja {
  display: inline-block;       /* lub block, jeśli wolisz układ kolumnowy */
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  margin: 0 16px 32px;         /* odstępy między kartami */
  transition: transform .2s, box-shadow .2s;
}
.lokacja:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Przekazujemy kliknięcie zawsze do linka */
.lokacja img,
.lokacja .lokacja-napis,
.lokacja .lokacja-podtytul {
  pointer-events: none;
}

/* Obrazek i napisy wypełniającie lokację */
.lokacja img {
  display: block;
  width: 100%;
  height: auto;
}
.lokacja .lokacja-napis {
  display: block;
  margin-top: 8px;
  font-weight: 600;
}
.lokacja .lokacja-podtytul {
  display: block;
  font-size: 0.9rem;
  color: #666;
}

/* ===== Baner na stronie BWT Gedanensis ===== */
.page-bwt-gedanensis__banner {
  position: relative;
  max-width: 1150px;
  height: 140px;
  margin: 20px auto 40px;
  overflow: hidden;
  border-radius: 12px;
}

.page-bwt-gedanensis__banner-img {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
}

.page-bwt-gedanensis__banner-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
  padding: 0 20px;
  box-sizing: border-box;
}

.page-bwt-gedanensis__banner-title {
  font-size: 2.5rem;
  margin: 0 0 0.5rem;
}

.page-bwt-gedanensis__banner-subtitle {
  font-size: 1.125rem;
  margin: 0;
  opacity: 0.9;
}


/* ===== Karty lokalizacji (lokacja) ===== */
.lokacja {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  margin: 0 16px 32px;
  transition: transform .2s, box-shadow .2s;
}

.lokacja:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Ustawienie kliknięcia zawsze na link */
.lokacja img,
.lokacja .lokacja-napis,
.lokacja .lokacja-podtytul {
  pointer-events: none;
}

.lokacja img {
  display: block;
  width: 100%;
  height: auto;
}

.lokacja .lokacja-napis {
  display: block;
  margin-top: 8px;
  font-weight: 600;
}

.lokacja .lokacja-podtytul {
  display: block;
  font-size: 0.9rem;
  color: #666;
}

/* Obraz w slajdzie ma stałą "długość" 1175px i jest wyśrodkowany */
@media (min-width: 769px) {
  #simple-slider .slide {
    display: flex;
    justify-content: center;   /* centrowanie poziome */
  }
  #simple-slider .slide > img {
    width: 1175px !important;  /* docelowa szerokość obrazu */
    max-width: 100%;           /* responsywność przy węższym ekranie */
    height: auto;
    display: block;
  }
}

@media (min-width: 769px) {
  /* gdy .slider-nav jest bezpośrednio w sekcji */
  #simple-slider > .slider-nav,
  /* lub gdy przeniesiesz ją kiedyś do .slider-container */
  #simple-slider .slider-container > .slider-nav {
    margin-top: 0 !important;
    transform: translateY(-16px); /* zmień np. na -10 / -24 px */
  }

  /* zerowanie ewentualnych wypełnień */
  #simple-slider .slider-nav,
  #simple-slider .dot-container { padding-top: 0 !important; }
}

/* Kontener slidera */
#simple-slider .slider-container{ position:relative; margin:0 auto; max-width:1175px; overflow:hidden; }
/* Stos slajdów z fade */
#simple-slider .slides{ position:relative; }
#simple-slider .slide{
  position:absolute; inset:0;
  opacity:0; pointer-events:none;
  transition:opacity .35s ease;
  display:flex; justify-content:center; align-items:flex-start;
}
#simple-slider .slide.is-active{ opacity:1; pointer-events:auto; }

/* Obraz „krótszy” na desktopie */
@media (min-width:769px){
  #simple-slider .slide>img{ width:1175px; max-width:100%; height:auto; display:block; }
}

/* Kontener przycisków ograniczony do 1175px i wyśrodkowany */
#kategorie .container-kategorie {
  max-width: 1175px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;       /* pozwala zawijać się na mniejszych ekranach */
  gap: 10px;             /* odstęp między przyciskami */
  justify-content: center;
}

/* Same przyciski — pełna responsywność */
.kategoria-przycisk {
  flex: 1 1 calc(25% - 10px); /* 4 w rzędzie na desktopie */
  min-width: 200px;           /* na mniejszych ekranach nie za małe */
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background-color: #000;     /* przykładowe tło — zmień wedle potrzeb */
  color: #fff;
  border-radius: 8px;
  padding: 10px;
  font-weight: bold;
  text-align: center;
}

/* Efekt hover */
.kategoria-przycisk:hover {
  background-color: #222;
}

/* ===== OFERTA: szerokość 1175px i wyśrodkowanie ===== */
#offer .offer-tabs,
#offer .offer-content {
  max-width: 1175px;
  margin: 0 auto;
}

/* Estetyczny odstęp między tabs a treścią (opcjonalnie) */
#offer .offer-tabs { margin-bottom: 16px; }

/* ===== Siatka kart w każdej sekcji oferty ===== */
#offer .offer-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 kolumny na desktopie */
  gap: 16px;
}

/* Karty o równej wysokości + przycisk na dole */
#offer .offer-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#offer .offer-card-image img {
  width: 100%;
  height: auto;
  display: block;
}

#offer .offer-card .cta { 
  margin-top: auto;          /* przycisk przesunięty do dołu karty */
  display: inline-block;
}

/* ===== Responsywność ===== */
@media (max-width: 1024px) {
  #offer .offer-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  #offer .offer-cards { grid-template-columns: 1fr; }
}

/* Większy odstęp nad nagłówkiem sekcji Wydarzenia BWT */
.wydarzenia-bwt__heading {
  margin-top: 100px; /* możesz zmienić wartość na większą/mniejszą */
}

/* ===== Wydarzenia BWT - styl taki sam jak Ubrania ===== */
.wydarzenia-bwt__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 kolumny na desktopie */
  gap: 16px;
  max-width: 1175px; /* tak jak reszta sekcji */
  margin: 0 auto;
}

.wydarzenia-bwt__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  background: #f8f8f8; /* takie samo tło jak w ubraniach */
  border-radius: 8px;
  overflow: hidden;
}

.wydarzenia-bwt__image {
  width: 100%;
  aspect-ratio: 1 / 1; /* kwadratowe proporcje jak w ubraniach */
  background-size: cover;
  background-position: center;
}

.wydarzenia-bwt__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== Responsywność ===== */
@media (max-width: 1024px) {
  .wydarzenia-bwt__cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .wydarzenia-bwt__cards { grid-template-columns: 1fr; }
}

/* Wyśrodkowanie kafelków Wydarzenia BWT i Sprawdź Ubrania BWT */
.wydarzenia-bwt__cards,
.ubrania-cards {
  max-width: 1175px;
  margin: 0 auto;
}

/* Wyśrodkowanie kafelków Wydarzenia BWT i Sprawdź Ubrania BWT */
.wydarzenia-bwt__cards{
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Wyśrodkowanie w poziomie */
  max-width: 1175px;
  margin: 0 auto;
}

/* ===== Sekcja Wydarzenia BWT - stała szerokość kafelków ===== */
.wydarzenia-bwt__cards {
  max-width: 1175px;      /* szerokość całej sekcji */
  margin: 0 auto;
  display: flex;          /* ustawiamy flexbox */
  flex-wrap: wrap;        /* zawijanie wierszy */
  justify-content: center;/* wyśrodkowanie */
  gap: 20px;              /* odstęp między kafelkami */
}

.wydarzenia-bwt__card {
  width: 300px;           /* tu ustawiasz docelową szerokość kafelka */
  background: #f8f8f8;    /* opcjonalne tło */
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

.wydarzenia-bwt__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
}

.wydarzenia-bwt__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wydarzenia-bwt__card {
  width: 300px;    /* Twoja szerokość z poprzedniego kodu */
  height: 370px;   /* <-- tutaj ustaw docelową wysokość */
}

/* TYLKO TELEFONY: ukryj pasek .double-menu */
@media (max-width: 768px) {
  .double-menu { display: none !important; }
}

/* Wyświetlanie paska mobilnego tylko na telefonach */
@media (max-width: 768px) {
  .mobile-header {
    background: #000; /* dopasuj do koloru headera */
    padding: 10px 15px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .mobile-menu-toggle {
    background: none;
    border: none;
    font-size: 26px;
    color: #fff;
    cursor: pointer;
  }

  .mobile-menu {
    display: none;
    flex-direction: column;
    background: #111;
  }

  .mobile-menu a {
    color: #fff;
    padding: 12px 15px;
    text-decoration: none;
    border-bottom: 1px solid #333;
  }

  .mobile-menu a:hover {
    background: #222;
  }

  /* Po otwarciu */
  .mobile-menu.open {
    display: flex;
  }
}

/* Na większych ekranach ukrywamy */
@media (min-width: 769px) {
  .mobile-header,
  .mobile-menu {
    display: none !important;
  }
}

/* Ukryj stary pasek .double-menu na telefonach */
@media (max-width: 768px){
  .double-menu { display: none !important; }
}

/* Hamburger w headerze – tylko mobile */
@media (max-width: 768px){
  .site-header .header-left { display: flex; align-items: center; gap: 10px; }
  .bwt-mobile-toggle{
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; font-size: 22px; color: #fff;
    background: none; border: 0; border-radius: 6px; cursor: pointer;
  }
}
@media (min-width: 769px){
  .bwt-mobile-toggle{ display: none !important; }
}

/* Overlay menu – pełny ekran, domyślnie ukryte atrybutem [hidden] */
@media (max-width: 768px){
  .bwt-mobile-overlay{
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,.96);
  }
  .bwt-mobile-overlay[hidden]{ display: none !important; }

  .bwt-mobile-overlay__inner{
    position: relative; height: 100%;
    display: flex; flex-direction: column; gap: 18px;
    align-items: center; justify-content: center;
    padding: 24px;
    opacity: 0; transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease;
  }
  .bwt-mobile-overlay.is-open .bwt-mobile-overlay__inner,
  .bwt-mobile-overlay:not([hidden]) .bwt-mobile-overlay__inner{
    opacity: 1; transform: translateY(0);
  }

  .bwt-mobile-overlay__inner a{
    color: #fff; text-decoration: none; font-weight: 700;
    font-size: 20px; letter-spacing: .4px;
    padding: 12px 18px; border-radius: 999px;
    background: rgba(255,255,255,.10);
    width: min(420px, 90%);
    text-align: center;
  }
  .bwt-mobile-overlay__inner a:active{ background: rgba(255,255,255,.20); }

  .bwt-mobile-close{
    position: absolute; top: 14px; right: 14px;
    width: 40px; height: 40px; font-size: 22px; color: #fff;
    background: none; border: 0; cursor: pointer;
  }

  /* Blokada przewijania tła, gdy menu otwarte */
  body.bwt-menu-open{ overflow: hidden; touch-action: none; }
}


@media (max-width: 768px) {
  #simple-slider .slider-nav,
  #simple-slider .dot-container,
  #simple-slider .slider-nav .arrow {
    display: flex !important;
    position: relative !important;
    z-index: 50 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

@media (max-width: 768px) {
  /* Wyciągamy cały slider poza ograniczenie .content-container */
  #simple-slider {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
  }

  /* Slajdy - pełne wypełnienie */
  #simple-slider .slide {
    width: 100%;
    background-size: cover !important;
    background-position: center !important;
    overflow: hidden;
  }

  /* Gdy obrazek jeszcze się ładuje, zanim JS zamieni na tło */
  #simple-slider .slide > img {
    width: 100%;
    height: auto;
    display: block;
  }
}

@media (max-width: 768px) {
  body.home #simple-slider {
    width: 100vw !important;       /* szerokość całego ekranu */
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
  }

  body.home #simple-slider .slider-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (max-width: 768px) {
  body.home #simple-slider {
    width: calc(100vw - 30px) !important; /* 15px marginesu z każdej strony */
    max-width: calc(100vw - 30px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 768px) {
  body.home #simple-slider {
    height: 200px !important; /* ustaw wysokość slidera */
    overflow: hidden !important; /* ukrywa nadmiar zdjęcia */
  }

  body.home #simple-slider img {
    height: 100% !important;
    width: auto !important;
    object-fit: cover !important; /* żeby nie było rozciągnięcia */
  }
}

/* Tylko mobile: odstęp nad głównym zdjęciem */
@media (max-width: 768px) {
  /* 1) Najprościej: padding zamiast margin (margin mógł się zapaść) */
  body.home #simple-slider {
    padding-top: 8px !important;   /* zmień np. na 20px */
  }

  /* 2) Gdyby coś nadal nadpisywało, dobij „wirtualną” spacją */
  body.home #simple-slider::before {
    content: "";
    display: block;
    height: 8px;                   /* ten sam odstęp co wyżej */
  }
}



/* Tylko mobile: zaokrąglenie rogów głównego obrazka */
@media (max-width: 768px) {
  body.home #simple-slider img {
    border-radius: 12px !important; /* ustaw np. 12px, możesz zwiększyć */
    overflow: hidden;
  }

  /* Jeśli tło jest ustawiane na elemencie .slide */
  body.home #simple-slider .slide {
    border-radius: 12px !important;
    overflow: hidden;
  }
}

/* Mobile: pełne zaokrąglenie ramki slidera i twarde przycięcie zawartości */
@media (max-width: 768px) {
  /* usuń ewentualny pseudo-odstęp, który mógł przykrywać prawy górny róg */
  body.home #simple-slider::before { display: none !important; }

  /* ZAOKRĄGLENIE NA RAMCE KONTENERA */
  body.home #simple-slider .slider-container {
    position: relative;
    z-index: 0;
    border-radius: 12px !important;     /* zmień na 10/16 px wg uznania */
    overflow: hidden !important;         /* przytnij wszystko do promienia */
    clip-path: inset(0 round 12px) !important; /* dodatkowe „wymuszenie” 4 rogów */
  }

  /* przeniesienie promienia na dzieci (gdyby coś rysowało własne tło) */
  body.home #simple-slider .slides,
  body.home #simple-slider .slide {
    border-radius: inherit !important;
    background-clip: padding-box;
  }
}

/* Domyślnie widoczny desktopowy slider, ukryty mobilny */
#simple-slider-mobile-only { display: none; }

/* Tylko na telefonach */
@media (max-width: 768px) {
  #simple-slider { display: none !important; }
  #simple-slider-mobile-only { display: block !important; }
}

/* Style mobilnego slidera */
@media (max-width: 768px) {
  #simple-slider-mobile-only .slider-container { 
    max-width: none;
    width: 100%;
    margin: 0 auto;
  }

  #simple-slider-mobile-only .slides {
    display: flex;
    transition: transform .3s ease;
    will-change: transform;
  }

  #simple-slider-mobile-only .slide {
    min-width: 100%;
    overflow: hidden;
  }

  #simple-slider-mobile-only .slide img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  #simple-slider-mobile-only .slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 0;
  }

  #simple-slider-mobile-only .arrow {
    background: none;
    border: 0;
    font-size: 20px;
    cursor: pointer;
  }

  #simple-slider-mobile-only .dot-container { 
    display: flex; 
    gap: 8px; 
  }

  #simple-slider-mobile-only .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #bbb;
    display: inline-block;
    cursor: pointer;
  }

  #simple-slider-mobile-only .dot.active { background: #000; }
}

@media (max-width: 768px) {
  .mobile-slider img {
    border-radius: 15px; /* możesz zmienić na dowolną wartość */
    width: 100%;
    height: auto;
    display: block;
  }
}

@media (max-width: 768px) {
  .mobile-slider img {
    width: 100%;         /* dopasowanie do szerokości ekranu */
    max-width: 100%;     /* zakaz wychodzenia poza rodzica */
    height: auto;        /* proporcjonalna wysokość */
    display: block;      /* usuwa ewentualne spacje pod img */
    border-radius: 15px; /* zaokrąglenie rogów */
    margin: 0 auto;      /* wyśrodkowanie */
  }
}

@media (max-width: 768px) {
  .mobile-slider {
    overflow: hidden;    /* odcina wszystko co wychodzi poza */
    padding: 0 10px;     /* marginesy po bokach */
    box-sizing: border-box;
  }
}

@media (max-width: 768px) {
  #mobile-slider .slide {
    background-size: cover;        /* rozciąga na całą szerokość */
    background-position: center;   /* wyśrodkowanie */
    border-radius: 15px;
    overflow: hidden;
    margin: 0 auto;
    width: calc(100% - 20px);       /* z marginesami po bokach */
  }
}

/* Tylko telefony: wysokość bloku i dopasowanie obrazu */
@media (max-width: 768px) {
  #simple-slider-mobile-only {
    width: 100%;
    margin: 0 auto;
    overflow: hidden; /* nic nie wyjedzie poza blok */
  }

  /* Klucz: stała wysokość slajdu */
  #simple-slider-mobile-only .slide {
    height: 220px !important;      /* <-- zmień na swoją wartość (np. 180/240) */
    border-radius: 12px;            /* opcjonalnie */
    overflow: hidden;
  }

  /* Obraz zawsze wypełnia blok slajdu */
  #simple-slider-mobile-only .slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;   /* przycina bez zniekształceń */
    display: block !important;
  }
}

@media (max-width: 768px) {
  /* Usuń marginesy i paddingi z rodziców */
  #simple-slider-mobile-only,
  #simple-slider-mobile-only .slider-container,
  #simple-slider-mobile-only .slides,
  #simple-slider-mobile-only .slide,
  #simple-slider-mobile-only img {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
  }

  /* Minimalne marginesy po bokach */
  #simple-slider-mobile-only {
    width: calc(100% - 6px) !important; /* po 3px z każdej strony */
    margin-left: 3px !important;
    margin-right: 3px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
  }

  #simple-slider-mobile-only img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
  }
}

@media (max-width: 768px) {
  #simple-slider-mobile-only {
    max-width: 105% !important; /* trochę szersze niż kontener */
    width: 105% !important;
    margin: 0 auto !important; /* wyśrodkowanie */
  }
}

@media (max-width: 768px) {
  #simple-slider-mobile-only {
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100vw - 20px) !important; /* ~10px z każdej strony */
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 768px) {
  /* odsuń slider od nagłówka niezależnie od stylów headera */
  #simple-slider-mobile-only {
    position: relative;
  }
  #simple-slider-mobile-only::before {
    content: "";
    display: block;
    height: 10px;        /* tyle samo co margines z jednej strony */
    background: transparent; /* przezroczyste tło */
  }
}

/* MOBILE: paski nawigacji jak na desktopie */
@media (max-width: 768px) {
  /* upewnij się, że nawigacja jest widoczna i wyśrodkowana */
  #simple-slider-mobile-only .slider-nav {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 14px;
  }
  #simple-slider-mobile-only .dot-container {
    display: flex !important;
    gap: 22px;                 /* odstęp między paskami */
  }

  /* wygląd "nieaktywnego" paska */
  #simple-slider-mobile-only .dot {
    display: inline-block !important;
    width: 120px;              /* długość paska – dopasuj do desktopu */
    height: 8px;               /* grubość paska */
    border-radius: 999px;
    background: #e9e6df;       /* jasny beż jak na screenie */
    opacity: 1;
    transition: background-color .25s ease, opacity .25s ease;
  }

  /* aktywny pasek (turkus jak na desktopie) */
  #simple-slider-mobile-only .dot.active {
    background: #00cfff !important;
    opacity: 1 !important;
  }

  /* (opcjonalnie) ukryj strzałki na mobile, jeśli chcesz same paski */
  /* #simple-slider-mobile-only .arrow { display: none !important; } */
}

  #simple-slider-mobile-only .dot {
    width: 50px;       /* krótszy pasek */
    height: 6px;       /* cieńszy pasek */
  }

@media (max-width: 768px) {
  /* mniejszy odstęp między kreskami */
  #simple-slider-mobile-only .dot-container {
    display: flex !important;
    gap: 14px !important;        /* zmień np. na 4px, 8px */
    padding: 0 !important;
  }
  /* zero marginesów zewnętrznych – tylko gap steruje dystansem */
  #simple-slider-mobile-only .dot {
    display: block !important;  /* eliminuje przerwy od inline/inline-block */
    margin: 0 !important;
  }
}

@media (max-width: 768px) {
  #simple-slider-mobile-only .dot-container {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important; /* wyśrodkowanie */
    bottom: 0px !important; /* minimalny odstęp od zdjęcia */
    margin: 0 !important;
  }
}










@media (max-width: 768px) {
  #simple-slider-mobile-only .slider-nav {
    margin-top: -34px !important; /* zmniejsz odstęp między zdjęciem a kreskami */
  }
}




@media (max-width: 768px) {
  #simple-slider-mobile-only .slider-container { touch-action: pan-y; }
  #simple-slider-mobile-only .slides {
    will-change: transform;
    backface-visibility: hidden;
  }
}

.page-nasze-obozy__banner {
    max-width: 1175px;
    margin: 0 auto; /* wyśrodkowanie */
}

.page-nasze-obozy__banner-img {
    width: 100%;
    height: auto;
    border-radius: 12px; /* zachowanie obecnego efektu */
}

.page-onas__banner {
    max-width: 1175px;
}

.page-onas__banner-img {
    width: 100%;
    height: auto;
    border-radius: 12px; /* ten sam efekt co w obozach */
}

/* Tylko /gdzie-trenujemy/ */
.page-gdzie-trenujemy .gdzie-container {
  max-width: none;        /* usuwa ewentualne globalne ograniczenie */
}

.page-gdzie-trenujemy .page-gdzie-trenujemy__banner {
  max-width: 1175px;      /* docelowa szerokość bloku */
}

.page-gdzie-trenujemy .page-gdzie-trenujemy__banner-img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* /kontakt/ */
.page-kontakt .content-container {
  max-width: none;              /* usuwa globalny limit szerokości */
}

.page-kontakt .page-kontakt__banner {
  max-width: 1175px;             /* docelowa szerokość */
  width: 100%;
}

.page-kontakt .page-kontakt__banner-img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* /współpracuj-z-bwt/ */
.page-wspolpracuj-z-bwt__banner {
  max-width: 1175px;   /* docelowa szerokość */
  width: 100%;
}

.page-wspolpracuj-z-bwt__banner-img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* /faq/ */
.page-faq .content-container {
  max-width: none;              /* usuwa globalne ograniczenie */
  justify-content: center;      /* wyśrodkowanie bez margin */
}

.page-faq .page-faq__banner {
  max-width: 1175px;             /* docelowa szerokość */
  width: 100%;
}

.page-faq .page-faq__banner-img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

@media (max-width: 767px) {
  .page-nasze-obozy .content-container {
    padding-top: 70px; /* możesz zwiększyć np. do 40px */
  }
}



@media (max-width: 767px) {
  .page-nasze-obozy__banner-title {
    font-size: 30px; /* dostosuj wartość, np. 20px jeśli chcesz jeszcze mniejszy */
  }
}

@media (max-width: 767px) {
  .page-nasze-obozy .content-container {
    padding-left: 10px;  /* mniej miejsca z lewej */
    padding-right: 10px; /* mniej miejsca z prawej */
  }
}

@media (max-width: 767px) {
  .page-nasze-obozy__banner-subtitle {
    font-size: 14px; /* możesz zmienić np. na 12px jeśli ma być jeszcze mniejszy */
    line-height: 1.3; /* trochę ciaśniejsze odstępy między liniami */
  }
}

@media (max-width: 767px) {
  .page-nasze-obozy__banner-img {
    height: 140px; /* docelowa mniejsza wysokość */
    object-fit: cover; /* przycina obraz zamiast rozciągania */
  }

  .page-nasze-obozy__banner {
    overflow: hidden; /* żeby nic nie wystawało poza obraz */
  }
}

@media (max-width: 767px) {
  main.page-nasze-obozy .page-nasze-obozy__banner {
    height: 100px !important;   /* cały blok */
    overflow: hidden !important;
  }

  main.page-nasze-obozy .page-nasze-obozy__banner-img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    display: block;
  }
}

@media (max-width: 767px) {
  .page-nasze-obozy__banner {
    width: 96vw !important;   /* pełna szerokość ekranu */
    max-width: 96vw !important;
    margin-left: -25px;        /* kompensacja paddingu .content-container */
    margin-right: -25px;
  }
}








/* Blok banera – NASZA OFERTA (oddzielne nazewnictwo BEM) */
.page-nasza-oferta__banner {
  position: relative;
  margin-top: 20px;          /* odstęp NAD całym blokiem; możesz dopasować */
  /* jeśli margin-top był ignorowany przez kolaps, zamień na padding-top: */
  /* padding-top: 40px; */
  overflow: hidden;          /* jak w /nasze-obozy/, jeśli chcesz ukryć nadmiar obrazka */
}

.page-nasza-oferta__banner-img {
  width: 100%;
  height: auto;
  display: block;
  /* jeżeli w /nasze-obozy/ jest stała wysokość i przycinanie, skopiuj to:
  height: 280px;
  object-fit: cover;
  */
}

.page-nasza-oferta__banner-overlay {
  position: absolute;
  inset: 0;                  /* skrót: top/right/bottom/left: 0 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;   /* wyśrodkowanie tekstów na obrazku */
  text-align: center;
  padding: 16px;
}

.page-nasza-oferta__banner-title {
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 700;
  color: #ffffff;            /* dopasuj do wersji „obozy”, jeśli inny kolor */
  margin: 0 0 8px 0;
  text-shadow: 0 2px 6px rgba(0,0,0,0.35); /* jak w /nasze-obozy/ (opcjonalnie) */
}

.page-nasza-oferta__banner-subtitle {
  font-size: clamp(14px, 2.4vw, 18px);
  color: #ffffff;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

/* Przykładowe dostosowanie na mniejsze ekrany (opcjonalnie) */
@media (max-width: 640px) {
  .page-nasza-oferta__banner {
    margin-top: 24px;       /* mniejszy odstęp na mobile */
    /* albo padding-top: 24px; jeśli wybrałeś padding zamiast margin */
  }
}

.page-nasza-oferta__banner {
  position: relative;
  margin: -20px auto;       /* odstęp od góry i wyśrodkowanie w poziomie */
  max-width: 1175px;       /* szerokość maksymalna (zmień np. na 1000px, 1400px itp.) */
  border-radius: 12px;     /* stopień zaokrąglenia rogów */
  overflow: hidden;        /* żeby obrazek nie wystawał poza zaokrąglone rogi */
}

.page-nasza-oferta__banner-img {
  width: 100%;             /* obrazek dopasuje się do szerokości bloku */
  height: auto;
  display: block;
}

.page-nasza-oferta__banner {
  height: 140px;
}

.page-nasza-oferta__banner-img {
  filter: brightness(0.6); /* 1 = normalnie, <1 = ciemniej, np. 0.5 = 50% */
}





.page-nasi-trenerzy__banner {
  position: relative;
  height: 140px;
  max-width: 1175px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
}

.page-nasi-trenerzy__banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.6); /* przyciemnienie */
}

.page-nasi-trenerzy__banner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.page-nasi-trenerzy__banner-title {
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px 0;
  text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

.page-nasi-trenerzy__banner-subtitle {
  font-size: clamp(14px, 2.4vw, 18px);
  color: #fff;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

/* Baner dla /nasze-ubrania/ */
.page-nasze-ubrania__banner {
  position: relative;
  height: 140px;
  max-width: 1175px;
  border-radius: 12px;
  overflow: hidden;
}

.page-nasze-ubrania__banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.6);
}

.page-nasze-ubrania__banner {
  margin-left: auto;
  margin-right: auto;
}

.page-nasze-ubrania__banner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.page-nasze-ubrania__banner-title {
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px 0;
  text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

.page-nasze-ubrania__banner-subtitle {
  font-size: clamp(14px, 2.4vw, 18px);
  color: #fff;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

.page-nasze-ubrania__banner-subtitle {
  font-size: clamp(14px, 2.4vw, 18px);
  color: #dddddd; /* ciemniejszy od #fff */
  margin: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}





/* Baner dla strony /obozy-letnie-bwt/ */
.page-obozy-letnie-bwt__banner {
  position: relative;
  height: 140px;
  max-width: 1175px;
  margin: 0px auto;
  border-radius: 12px;
  overflow: hidden;
}

.page-obozy-letnie-bwt__banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.6);
}

.page-obozy-letnie-bwt__banner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.page-obozy-letnie-bwt__banner-title {
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px 0;
  text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

.page-obozy-letnie-bwt__banner-subtitle {
  font-size: clamp(14px, 2.4vw, 18px);
  color: #dddddd; /* ciemniejszy niż tytuł */
  margin: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}





/* Karta */
.faq-toc{
  position: sticky; top: 12px; z-index: 10;
  background:#fff; border:1px solid #e9e9e9; border-radius:14px;
  padding:14px 18px; max-width:1175px; margin:16px auto 24px;
  box-shadow:0 4px 14px rgba(0,0,0,.05);
}
.faq-toc .toc-title{margin:0 0 8px;font-weight:700;font-size:16px;color:#111}

/* Segmented tabs */
.faq-toc .toc-list{
  display:flex; gap:18px; align-items:center;
  list-style:none; padding:0; margin:0; position:relative;
}
.faq-toc .toc-list a{
  position:relative; display:block; padding:10px 2px;
  font-weight:700; text-decoration:none; color:#2a2a2a;
  transition:color .2s;
}
.faq-toc .toc-list a:hover{ color:#000; }

/* Dolny wskaźnik */
.faq-toc .toc-list a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px;
  background:#111; border-radius:2px; transform:scaleX(0); transform-origin:center;
  transition:transform .25s ease;
}
.faq-toc .toc-list a.is-active::after{ transform:scaleX(1); }

/* Offset dla kotwic pod sticky headerem */
.faq-section{ scroll-margin-top:110px; }

/* FAQ TOC – wyłączenie hover (osuń wszelki efekt) */
.faq-toc .toc-list a {
  color: #333;
  transition: none;
}

.faq-toc .toc-list a:hover,
.faq-toc .toc-list a:focus,
.faq-toc .toc-list a:active {
  color: #333 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  text-decoration: none !important;
}

/* Zostawiamy tylko stan aktywny ze scroll-spy */
.faq-toc .toc-list a.is-active {
  color: #000;
}
.faq-toc .toc-list a.is-active::before {
  background: #111;
  transform: translateY(-50%) scale(1.1);
}

/* Wyłączenie obramówki przy hover/focus/active */
.faq-toc .toc-list a:hover,
.faq-toc .toc-list a:focus,
.faq-toc .toc-list a:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}





/* Baner – Współpraca z Klubami */
.page-wspolpraca-klubami__banner {
  position: relative;
  height: 140px;
  max-width: 1175px;
  margin: 0px auto;   /* wyśrodkowanie w poziomie */
  border-radius: 12px;
  overflow: hidden;
}

.page-wspolpraca-klubami__banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.6); /* przyciemnienie zdjęcia */
}

.page-wspolpraca-klubami__banner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.page-wspolpraca-klubami__banner-title {
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px 0;
  text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

.page-wspolpraca-klubami__banner-subtitle {
  font-size: clamp(14px, 2.4vw, 18px);
  color: #dddddd; /* trochę ciemniejszy podtytuł */
  margin: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

/* === FAQ – akordeon w stylu z podglądu === */
.page-faq .accordion{
  display: grid;
  gap: 14px;                      /* odstęp między kartami */
  margin-top: 10px;
}

/* KARTA */
.page-faq .accordion-item{
  background: #e9e1d3;            /* beżowe tło jak w screenie */
  border: 2px solid #111;         /* wyraźna, ciemna ramka */
  border-radius: 12px;            /* zaokrąglenie */
  overflow: hidden;               /* żeby zawartość nie wystawała przy animacji */
}

/* NAGŁÓWEK */
.page-faq .accordion-header{
  width: 100%;
  display: block;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 16px 44px 16px 20px;   /* miejsce na strzałkę po prawej */
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  cursor: pointer;
  position: relative;
}

/* Strzałka po prawej (caret) */
.page-faq .accordion-header::after{
  content: "▾";                   /* prosta, wyraźna strzałka */
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform .25s ease;
  font-size: 18px;
  font-weight: 700;
}

/* Obrót strzałki po otwarciu */
.page-faq .accordion-item.open .accordion-header::after{
  transform: translateY(-50%) rotate(180deg);
}

/* ZAWARTOŚĆ – gładkie rozwijanie */
.page-faq .accordion-content{
  max-height: 0;
  overflow: hidden;
  transition: max-height .28s ease;
  padding: 0 20px;                /* wstępny padding poziomy */
}

.page-faq .accordion-item.open .accordion-content{
  max-height: 800px;              /* wystarczająco na większość treści */
  padding: 0 20px 16px;           /* odsłonięte dolne wypełnienie */
}

/* Link-karta (np. „Sprawdź więcej pytań!”) – styl jak karta */
.page-faq .accordion-item.faq-link .accordion-header{
  text-decoration: none;
  width: 100%;
}

/* Brak efektu hover/outline na nagłówkach (jak prosiłeś) */
.page-faq .accordion-header:hover,
.page-faq .accordion-header:focus,
.page-faq .accordion-header:active{
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: inherit !important;
}

/* Mobile – drobne korekty */
@media (max-width: 480px){
  .page-faq .accordion-header{ font-size: 16px; padding: 14px 40px 14px 16px; }
  .page-faq .accordion-header::after{ right: 12px; }
}

/* Usuń tło sekcji FAQ */
.page-faq .faq-section {
  background: transparent !important;
  border: none !important;
}

.page-faq .faq-section h3 {
  text-align: center;
  margin-bottom: 20px; /* trochę przestrzeni pod tytułem */
}

/* FAQ – nagłówki sekcji takie jak "Poznaj trenerów BWT" */
.page-faq .faq-section h3 {
  text-align: center;
  font-size: 26px;       /* podobna wielkość jak w "Poznaj trenerów BWT" */
  font-weight: 700;
  margin: 40px 0 25px;   /* odstęp góra/dół */
  color: #000;           /* czarny tekst */
}

/* Usuń marginesy pod banerem FAQ */
.page-faq__banner {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Dociśnij menu do banera */
.page-faq .faq-toc {
  margin-top: 20px !important;
  padding-top: 20px !important;
}

/* FAQ – akordeonowe bloki bez tła */
.page-faq .accordion-item {
  background: transparent !important;
}

/* FAQ – kolor pytań (nagłówków akordeonu) */
.page-faq .accordion-header {
  color: #000 !important;
}

/* FAQ – zwężone bloki pytań */
.page-faq .accordion {
  max-width: 1000px;      /* szerokość np. 800px */
  margin: 0 auto;        /* wyśrodkowanie */
}

/* 1) Ramka tylko na całym elemencie, nie na nagłówku */
.page-faq .accordion-item{
  border: 2px solid #111 !important;
  border-radius: 12px !important;
  background: transparent;
  overflow: hidden;              /* zachowuje zaokrąglenia */
}

/* 2) Nagłówek i zawartość bez własnych ramek/tła, bez marginesów które mogły kolapsować */
.page-faq .accordion-header,
.page-faq .accordion-content{
  border: 0 !important;
  background: transparent !important;
  margin: 0 !important;
}

/* 3) Wewnętrzne odstępy – żeby nie „pchać” borderu */
.page-faq .accordion-header{ padding: 16px 20px; }
.page-faq .accordion-content{
  max-height: 0;
  overflow: hidden;
  transition: max-height .28s ease;
  padding: 0 20px;               /* poziomy padding */
}
.page-faq .accordion-item.open .accordion-content{
  max-height: 800px;
  padding: 0 20px 16px;          /* dolny padding po otwarciu */
}

/* 4) Upewnij się, że dolna krawędź nie jest „przykrywana” */
.page-faq .accordion-item + .accordion-item{
  margin-top: 14px;              /* odstęp między kartami, zamiast paddingu rodzica */
}

/* FAQ – wyższe bloki pytań */
.page-faq .accordion-header {
  padding: 20px 20px;   /* było np. 16px, teraz więcej w pionie */
  font-size: 18px;      /* możesz też powiększyć czcionkę, jeśli chcesz */
}

/* FAQ – zmniejszenie marginesu nad tytułami sekcji */
.page-faq .faq-section h3 {
  margin-top: -50px;   /* np. 20px zamiast domyślnego (często 40–60px) */
  margin-bottom: 10px;
}

/* FAQ – odstęp tekstu od lewej krawędzi w blokach */
.page-faq .accordion-header,
.page-faq .accordion-content {
  padding-left: 35px;   /* zwiększ odstęp od lewej */
  padding-right: 20px;  /* dla symetrii, ale opcjonalne */
}

/* FAQ – wyśrodkowanie całego menu zakładek */
.page-faq .faq-toc .toc-list {
  display: flex;
  justify-content: center; /* wyrównanie do środka */
  gap: 20px; /* odstępy między zakładkami */
  padding: 0;
  margin: 0 auto;
}

.page-faq .faq-toc .toc-list li {
  list-style: none;
}

.page-faq .faq-toc .toc-list a {
  display: block;
  text-align: center;
}

/* Odpowiedzi w FAQ */
.page-faq .accordion-content p {
  color: #6c6c6c;        /* przygaszony szary (możesz zmienić np. na #666666 albo jaśniejszy #7a7a7a) */
  font-weight: 600;      /* normalna grubość */
  font-size: 15px;       /* delikatnie mniejsza czcionka niż pytania */
  line-height: 1.6;      /* większy odstęp między liniami dla czytelności */
  text-align: justify;   /* opcjonalnie: wyjustowanie tekstu */
}

/* Sekcja: Obserwuj nas */
#home-social {
  max-width: 1175px;
  margin: 60px auto;
  text-align: center;
}

#home-social .hs-title {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 30px 0;
}

#home-social .hs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  justify-content: center;
}

#home-social .hs-item {
  position: relative;
  display: block;
  width: 280px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s, box-shadow 0.3s;
}

#home-social .hs-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

#home-social .hs-preview {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

#home-social .hs-label {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

#home-social .hs-icon {
  width: 18px;
  height: 18px;
  filter: invert(1);
  flex-shrink: 0;
  display: inline-block;
}

@media (max-width: 640px) {
  #home-social {
    margin: 40px auto;
  }
  #home-social .hs-item {
    width: 100%;
    max-width: 340px;
  }
}

#home-social .hs-item {
  position: relative;
  display: block;
  width: 360px;        /* było 280px → szersze */
  height: 220px;       /* dodajemy stałą wysokość */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s, box-shadow 0.3s;
}

#home-social .hs-preview {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;   /* dopasowanie zdjęcia */
}

#home-social .hs-item:hover {
  transform: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* takie samo jak bez hovera */
}

/* Efekt przyciemnienia obrazka po najechaniu */
#home-social .hs-item:hover .hs-preview {
  filter: brightness(70%);
  transition: filter 0.3s ease;
}

#home-social .hs-preview {
  transition: filter 0.3s ease;
}

/* ===== 4 pionowe kafle – desktop w 1 linii, mobile w kolumnie ===== */
.collab-cta { padding: 28px 0 48px; }
.collab-cta__container { max-width: 1175px; margin: 0 auto; }

/* 4 kolumny na desktopie */
.collab-cta__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

/* 1 kolumna na telefonie */
@media (max-width: 900px) {
  .collab-cta__grid { grid-template-columns: 1fr; }
}

/* Kafle – wariant pionowy */
.collab-cta__item--portrait {
  position: relative;
  display: block;
  height: 360px;                 /* pionowy prostokąt */
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

@media (max-width: 900px) {
  .collab-cta__item--portrait { height: 200px; } /* poziome zdjęcie na mobile */
}

/* Obraz wypełnia kafel */
.collab-cta__img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: filter .25s ease, transform .25s ease;
}

/* Overlay: delikatne przyciemnienie + gradient */
.collab-cta__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.45) 100%);
  pointer-events: none;
  transition: opacity .25s ease;
}

/* Tytuł przy dolnej krawędzi (czytelny na tle) */
.collab-cta__title {
  position: absolute;
  left: 16px; right: 16px; bottom: 14px;
  text-align: center;
  font-weight: 800;
  font-size: clamp(18px, 2.2vw, 26px);
  letter-spacing: .2px;
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
}

/* Hover: bez „podnoszenia”; tylko lekko ciemniej i subtelny zoom */
.collab-cta__item--portrait:hover .collab-cta__img { filter: brightness(82%); transform: scale(1.02); }
.collab-cta__item--portrait:hover .collab-cta__overlay { opacity: 1; }

/* Focus (klawiatura) */
.collab-cta__item--portrait:focus-visible { outline: 3px solid #111; outline-offset: 3px; }

/* Zapewnienie, że <picture> nie psuje zaokrągleń */
.collab-cta__item--portrait picture,
.collab-cta__item--portrait img { border-radius: 16px; }
}

.collab-card .collab-image {
  position: relative;
}

.collab-card .collab-image::before,
.collab-card .collab-image::after {
  content: none !important;
  background: none !important;
}

.collab-card .collab-image {
  filter: none !important;
  opacity: 1 !important;
  background-color: transparent !important;
}

.collab-card .collab-image img {
  filter: none !important;
  opacity: 1 !important;
}

/* Uporządkowanie warstw w kaflu */
.collab-cta__item { position: relative; opacity: 1 !important; filter: none !important; }
.collab-cta__img { position: absolute; inset: 0; z-index: 0; }
.collab-cta__overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.collab-cta__title { position: absolute; inset: 0; z-index: 2; color: #fff !important; }

/* Gdy chcesz całkiem wyłączyć stałe przyciemnienie tła */
.collab-cta__overlay { background: none !important; }

/* Na wszelki wypadek wyłącz mieszanie kolorów, jeśli gdzieś zostało ustawione */
.collab-cta__item,
.collab-cta__img,
.collab-cta__overlay,
.collab-cta__title { mix-blend-mode: normal !important; }
}


/* Współpracuj – zmniejszenie odstępu pod kaflami */
.collab-cta { padding-bottom: 40px !important; margin-bottom: 0 !important; }
.collab-cta__container { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.collab-cta__grid { margin-bottom: 0 !important; }

/* Jeśli odstęp robi poprzednia/stara sekcja z przyciskami */
.collab-section { margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* Dociśnij element następujący po sekcji (np. stopkę) */
.collab-cta + * { margin-top: 40px !important; }
}

.collab-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.collab-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.page-wspolpracuj-z-bwt__banner {
  margin-bottom: 20px !important;
  padding-bottom: 40px !important; /* tu regulujesz faktyczny odstęp */
}

.collab-section {
  margin-bottom: 50px !important; /* ustaw większy margines pod zdjęciami */
}



.home-cta {
  margin: 40px auto;
  max-width: 1175px;
}

.home-cta__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.home-cta__item {
  position: relative;
  display: block;
  height: 360px;
  border-radius: 12px;
  overflow: hidden;
  text-align: center;
  color: #fff;
  text-decoration: none;
}

.home-cta__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.home-cta__overlay {
  position: absolute;
  inset: 0;
  background: none;
  transition: background 0.3s ease;
  z-index: 1;
}

.home-cta__item:hover .home-cta__overlay {
  background: rgba(0,0,0,0.4);
}

.home-cta__title {
  position: relative;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: bold;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
}

/* Mobile */
@media (max-width: 768px) {
  .home-cta__grid {
    grid-template-columns: 1fr;
  }
  .home-cta__item {
    height: 200px;
  }
}

.home-cta__title-section {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 25px;
  color: #111;
}

.home-cta__grid {
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap; /* żeby na mniejszych ekranach się zawijały */
}

.home-cta__item {
  position: relative;
  display: block;
  width: 278px;     /* szerokość taka sama jak kafle we współpracy */
  height: 360px;    /* wysokość */
  border-radius: 12px;
  overflow: hidden;
  text-align: center;
  color: #fff;
  text-decoration: none;
}

.home-cta__grid {
  display: flex;
  justify-content: center;
  gap: 36px; /* odstęp między kaflami - możesz regulować np. 28px, 32px, 36px */
  flex-wrap: wrap;
}

/* Sekcja współpracy z klubami – baner */
#home-collab-banner {
  margin: 40px auto;
}

.home-collab-banner__container {
  position: relative;
  max-width: 1000px;   /* szerokość desktop */
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}

.home-collab-banner__img {
  width: 100%;
  height: auto;
  display: block;
}

/* Przycisk CTA na obrazie */
.home-collab-banner__cta {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.65);
  color: #fff;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  transition: background .3s;
}

.home-collab-banner__cta:hover {
  background: rgba(0,0,0,.85);
}

.home-collab-banner__img {
  width: 100%;
  height: 200px;       /* wysokość banera */
  object-fit: cover;   /* przycinanie tak, aby wypełniło całość */
  display: block;
}

.trainers-carousel__heading {
  font-size: 1.7rem;   /* zwiększony rozmiar, możesz zmienić np. na 2.5rem */
  font-weight: 700;    /* grubość czcionki (jeśli chcesz pogrubić) */
  text-align: center;  /* opcjonalnie wyśrodkowanie */
}

.ubrania-heading {
  font-size: 1.7rem;   /* ten sam rozmiar co .trainers-carousel__heading */
  font-weight: 700;
  text-align: center;
}

#offer .offer-tabs {
  margin-top: -30px !important; /* zwiększ odstęp nad zakładkami */
}

.home-cta__title-section {
  margin-top: -15px; /* ustaw wartość jaka Ci pasuje, np. 10px, 15px, 20px */
}

.site-main .hs-title {
  margin-top: -30px !important;
}

.home-clothes {
  display: flex;
  justify-content: center;
  margin: 40px 0;
}

.home-clothes__banner {
  position: relative;
  width: 100%;
  max-width: 1000px; /* jak sekcja współpracy */
}

.home-clothes__img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

.home-clothes__overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
}

.home-clothes__title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 15px;
}

.home-clothes__btn {
  display: inline-block;
  padding: 12px 24px;
  background: #000;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s ease;
}

.home-clothes__btn:hover {
  background: #333;
}

/* obsługa wersji mobilnej */
.desktop-only { display: block; }
.mobile-only { display: none; }

@media (max-width: 768px) {
  .desktop-only { display: none; }
  .mobile-only { display: block; }
}

.home-clothes__img {
  width: 100%;
  height: 200px;       /* stała wysokość */
  object-fit: cover;   /* przycięcie i dopasowanie zdjęcia */
  border-radius: 12px;
  display: block;
}

/* Domyślnie na desktopie – pokazuj desktop, ukrywaj mobile */
.home-clothes .desktop-only { display: block !important; }
.home-clothes .mobile-only  { display: none  !important; }

/* Tylko na telefonach – odwróć logikę */
@media (max-width: 768px) {
  .home-clothes .desktop-only { display: none  !important; }
  .home-clothes .mobile-only  { display: block !important; }
}

/* Ubrania – przycisk znacznie niżej (na dole banera) */
.home-clothes__banner { position: relative; }

.home-clothes__btn {
  left: 50%;
  bottom: 30px;          /* reguluj: im mniejsza wartość, tym bliżej dolnej krawędzi */
  transform: translateX(60%);
}

/* Szerokość przycisku w sekcji ubrań */
.home-clothes__btn {
  min-width: 180px;   /* zmień np. na 200px jeśli chcesz jeszcze szerszy */
  padding: 12px 28px; /* więcej miejsca wewnątrz przycisku */
  font-size: 16px;    /* trochę większy tekst */
}

/* Przycisk w sekcji ubrań */
.home-clothes__btn {
  margin-top: 120px; /* zwiększ/zmniejsz wartość w px, żeby ustawić wysokość */
}

/* Margines pod grafiką w sekcji ubrań */
.home-clothes {
  margin-bottom: 70px; /* zmień wartość według potrzeb, np. 40px, 80px */
}

/* Sekcja współpracy – layout bez tła, pełna kontrola rozmiarów przez zmienne */
.club-collab-duo {
  /* USTAWIENIA DOMYŚLNE – można nadpisać w klasach modyfikujących */
  --max-container: 1175px;   /* szerokość całej sekcji */
  --gap: clamp(12px, 2vw, 20px);
  --pad-y: clamp(20px, 4vw, 48px);
  --title-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  --img-max: 520px;          /* MAKS. SZEROKOŚĆ POJEDYNCZEGO OBRAZU → ZMNIEJSZ TU */
  --ratio: 3 / 2;            /* proporcje obrazów; np. 16/9, 4/3, 1/1 */
  --radius: 0;               /* zaokrąglenia obrazów; np. 12px */
}

.club-collab-duo {
  padding: var(--pad-y) 0;
  background: transparent; /* brak białego tła */
}

.club-collab-duo__container {
  max-width: var(--max-container);
  margin: 0 auto;
  padding: 0 16px;
}

.club-collab-duo__header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto clamp(16px, 2.5vw, 28px);
}

.club-collab-duo__title {
  margin: 0 0 8px;
  line-height: 1.2;
  font-size: var(--title-size);
}

.club-collab-duo__desc {
  margin: 0;
  color: #333;
}

.club-collab-duo__grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  justify-items: center; /* wyśrodkowanie obrazów w kolumnach */
}

.club-collab-duo__item {
  margin: 0;
  width: 100%;
  max-width: var(--img-max); /* KONTROLA ROZMIARU OBRAZÓW */
}

.club-collab-duo__item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio);
  object-fit: cover;
  border-radius: var(--radius);
}

/* PRZYKŁADOWE MODYFIKATORY ROZMIARU (opcjonalnie dodaj klasę do <section>) */
.club-collab-duo.is-small  { --img-max: 420px; }
.club-collab-duo.is-tiny   { --img-max: 340px; }
.club-collab-duo.is-large  { --img-max: 640px; }
}

/* Kontener sekcji – 1175px */
.club-collab-duo .club-collab-duo__container {
  max-width: 1175px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Grid i rozmiar kart */
.club-collab-duo .club-collab-duo__grid {
  display: grid;
  gap: clamp(12px, 2vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  justify-items: center;
}

.club-collab-duo .club-collab-duo__item {
  width: 100%;
  max-width: 420px; /* zmniejsza obraz – dostosuj */
}

/* Wymuszenie kwadratu + nadpisanie innych styli */
:where(body) .club-collab-duo .club-collab-duo__item img {
  display: block;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;           /* wysokość wyliczy się z aspect-ratio */
  object-fit: cover !important;
  object-position: center !important;
}

.club-collab-duo .club-collab-duo__grid {
  gap: 0px !important; /* zmień wartość według potrzeb */
}

.club-collab-duo .club-collab-duo__item {
  margin: 0 !important; /* na wypadek, gdyby elementy miały własne marginesy */
}

@media (min-width: 768px) {
  .club-collab-duo .club-collab-duo__grid {
    gap: 0 !important;
    overflow: hidden; /* zapobiega przewijaniu w poziomie */
  }
  .club-collab-duo .club-collab-duo__item { margin: 0 !important; }
  .club-collab-duo .club-collab-duo__item + .club-collab-duo__item {
    margin-left: -12px !important; /* ← tu ustaw wartość na minusie */
  }
}

/* Zmniejszenie rozmiaru obrazów (kafli) w tej sekcji */
.club-collab-duo .club-collab-duo__item {
  max-width: 360px !important; /* ustaw mniejszą wartość, np. 320px / 300px */
}

/* Opcjonalnie: na telefonach zostaw pełną szerokość */
@media (max-width: 767px) {
  .club-collab-duo .club-collab-duo__item {
    max-width: 100% !important;
  }
}

/* Zmniejszenie odstępu między dwiema grafikami (desktop) */
@media (min-width: 768px) {
  .club-collab-duo .club-collab-duo__grid {
    display: flex !important;
    justify-content: center;
    gap: 8px !important;      /* ← ustaw docelowy odstęp, np. 4px / 6px / 10px */
  }
  .club-collab-duo .club-collab-duo__item {
    width: 360px;             /* szerokość każdego kafla – zgodnie z Twoim ustawieniem */
    max-width: none !important;
    margin: 0 !important;     /* zeruje ewentualne dodatkowe marginesy */
  }
}

/* Lekki odstęp między grafikami (tylko desktop) */
@media (min-width: 768px) {
  .club-collab-duo .club-collab-duo__grid { display: flex !important; gap: 0 !important; }
  .club-collab-duo .club-collab-duo__item { width: 360px; margin: 0 !important; }
  .club-collab-duo .club-collab-duo__item + .club-collab-duo__item { margin-left: 60px !important; } /* ← ustaw wartość */
}

/* Pogrubienie opisu pod tytułem w sekcji */
.club-collab-duo .club-collab-duo__desc {
  font-weight: 700 !important; /* ewentualnie 600 dla półpogrubienia */
}

/* Ciemniejszy szary dla opisu pod tytułem */
.club-collab-duo .club-collab-duo__desc {
  color: #4a4a4a !important; /* dostosuj np. na #454545 / #404040 jeśli chcesz jeszcze ciemniej */
}

/* Jaśniejszy szary dla opisu */
.club-collab-duo .club-collab-duo__desc {
  color: #6a6a6a !important; /* ewentualnie #707070, jeśli chcesz odrobinę jaśniej */
}

/* Kontener + nagłówek */
.why-choose { padding: clamp(24px,4vw,56px) 0; }
.why-choose__container { max-width: 1175px; margin: 0 auto; padding: 0 16px; }
.why-choose__header { text-align: center; max-width: 900px; margin: 0 auto clamp(16px,2.5vw,28px); }
.why-choose__title { margin: 0 0 8px; line-height: 1.2; font-size: clamp(1.6rem,1.2rem + 1.4vw,2.2rem); }
/* opis – identycznie jak w sekcji trenerów (pogrubiony, jaśniejszy szary) */
.why-choose__desc { margin: 0; font-weight: 700; color: #6a6a6a; }

/* Taby – układ 3 kolumny na desktopie */
.why-choose__tabs {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(10px,2vw,16px);
  margin-top: clamp(12px,2vw,20px);
}
@media (min-width: 992px) {
  .why-choose__tabs { grid-template-columns: repeat(3, 1fr); }
}

/* Karta/przycisk */
.wc-tab {
  position: relative;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  color: #111;
  border-radius: 16px;
  padding: 20px;
  height: 160px; /* wizualnie jak na screenie; zmień w razie potrzeby */
  text-align: left;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
  outline: none;
}
.wc-tab:is(:hover, :focus-visible) { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.wc-tab .wc-tab__title { font-weight: 700; font-size: 1.05rem; }

/* Aktywna – ciemne tło, jasny tekst */
.wc-tab.is-active {
  background: #0b0b0b;
  color: #fff;
  border-color: transparent;
}

/* Panele treści – pojedynczy widoczny */
.why-choose__panels { margin-top: clamp(14px,2vw,22px); }
.wc-panel { border-radius: 16px; background: #fff; padding: 22px; border: 1px solid rgba(0,0,0,0.08); }
.wc-panel.is-active { display: block; }
.wc-panel[hidden] { display: none !important; }

/* NIEAKTYWNE karty – lekko ciemniejsze niż tło strony */
:root{
  /* Ustaw tu dokładny kolor tła strony (przykład): */
  --site-bg: #e6dfd3;
}

.why-choose .wc-tab:not(.is-active){
  background: color-mix(in srgb, var(--site-bg) 90%, #000 10%) !important; /* ~10% ciemniej */
  border-color: color-mix(in srgb, var(--site-bg) 85%, #000 15%) !important;
}

.why-choose .wc-tab:not(.is-active):hover,
.why-choose .wc-tab:not(.is-active):focus-visible{
  background: color-mix(in srgb, var(--site-bg) 85%, #000 15%) !important; /* odrobinę ciemniej na hover */
}

/* Panel treści bez białego tła i ramek */
.why-choose .wc-panel {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;     /* zostaw 0; zmień np. na 16px jeśli chcesz odstęp wewnątrz */
}

/* Tytuł każdej przypisanej treści */
.why-choose .wc-panel__title {
  margin: 0 0 8px;
  font-weight: 800;
  line-height: 1.25;
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
}

/* === USTAWIENIA === */
:root{
  /* Podaj realny kolor tła strony (przykład poniżej) */
  --site-bg: #e6dfd3;
}

/* === SEKCJA: kontener i nagłówek === */
.why-choose { padding: clamp(24px,4vw,56px) 0; }
.why-choose__container { max-width: 1175px; margin: 0 auto; padding: 0 16px; }

.why-choose__header { text-align: center; max-width: 900px; margin: 0 auto clamp(16px,2.5vw,28px); }
.why-choose__title { margin: 0 0 8px; line-height: 1.2; font-size: clamp(1.6rem,1.2rem + 1.4vw,2.2rem); }
.why-choose__desc { margin: 0; font-weight: 700; color: #6a6a6a; }

/* === KARTY/PRZYCISKI === */
.why-choose__tabs {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(10px,2vw,16px);
  margin-top: clamp(12px,2vw,20px);
}
@media (min-width: 992px){
  .why-choose__tabs { grid-template-columns: repeat(3, 1fr); }
}

.wc-tab {
  position: relative;
  border-radius: 16px;
  padding: 20px;
  height: 160px;               /* wysokość jak na referencji */
  text-align: left;
  cursor: pointer;
  outline: none;
  border: 1px solid rgba(0,0,0,.08);
  /* nieaktywna: lekko ciemniejsza od tła strony */
  background: color-mix(in srgb, var(--site-bg) 90%, #000 10%);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
  color: #111;
}
.wc-tab:not(.is-active):is(:hover,:focus-visible){
  background: color-mix(in srgb, var(--site-bg) 85%, #000 15%);
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.wc-tab.is-active{
  background: #0b0b0b;
  color: #fff;
  border-color: transparent;
}
.wc-tab .wc-tab__title{
  font-weight: 700;
  font-size: 1.05rem;
}

/* Ikona w lewym górnym rogu karty */
.wc-tab__icon{
  position: absolute;
  top: 12px;
  left: 12px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #eee;
  display: grid;
  place-items: center;
  color: #111;                 /* SVG ma stroke=currentColor */
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.05);
}
.wc-tab__icon svg{ width:18px; height:18px; }
.wc-tab.is-active .wc-tab__icon{ background: #efefef; }

/* === PANELE TREŚCI === */
.why-choose__panels { margin-top: clamp(14px,2vw,22px); }
.wc-panel { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.wc-panel[hidden]{ display: none !important; }

.wc-panel__title{
  margin: 0 0 8px;
  font-weight: 800;
  line-height: 1.25;
  font-size: clamp(1.1rem,1rem + 0.4vw,1.3rem);
}

/* ===== Sekcja „Dlaczego Warto?” – CSS ===== */

/* Ustaw realny kolor tła strony (zmień wartość) */
:root { --site-bg: #e6dfd3; }

/* Kontener i nagłówek */
.why-choose { padding: clamp(24px,4vw,56px) 0; }
.why-choose__container { max-width: 1175px; margin: 0 auto; padding: 0 16px; }
.why-choose__header { text-align: center; max-width: 900px; margin: 0 auto clamp(16px,2.5vw,28px); }
.why-choose__title { margin: 0 0 8px; line-height: 1.2; font-size: clamp(1.6rem,1.2rem + 1.4vw,2.2rem); }
.why-choose__desc { margin: 0; font-weight: 700; color: #6a6a6a; }

/* Karty/przyciski */
.why-choose__tabs {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(10px,2vw,16px);
  margin-top: clamp(12px,2vw,20px);
}
@media (min-width: 992px) {
  .why-choose__tabs { grid-template-columns: repeat(3, 1fr); }
}

.wc-tab {
  position: relative;
  border-radius: 16px;
  padding: 20px;
  height: 160px;
  text-align: left;
  cursor: pointer;
  outline: none;
  border: 1px solid rgba(0,0,0,.08);
  background: #ded7cb; /* fallback */
  background: color-mix(in srgb, var(--site-bg) 90%, #000 10%);
  color: #111;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.wc-tab:not(.is-active):is(:hover,:focus-visible){
  background: #d9d1c4; /* fallback */
  background: color-mix(in srgb, var(--site-bg) 85%, #000 15%);
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.wc-tab.is-active {
  background: #0b0b0b;
  color: #fff;
  border-color: transparent;
}
.wc-tab .wc-tab__title { font-weight: 700; font-size: 1.05rem; }

/* Ikony w lewym górnym rogu */
.wc-tab__icon {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #eee;
  display: grid;
  place-items: center;
  color: #111; /* SVG stroke=currentColor */
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.05);
}
.wc-tab__icon svg { width: 18px; height: 18px; }
.wc-tab.is-active .wc-tab__icon { background: #efefef; }

/* Panele treści */
.why-choose__panels { margin-top: clamp(14px,2vw,22px); }
.wc-panel { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.wc-panel[hidden] { display: none !important; }

.wc-panel__title {
  margin: 0 0 8px;
  font-weight: 800;
  line-height: 1.25;
  font-size: clamp(1.1rem,1rem + 0.4vw,1.3rem);
}

/* powiększenie i wzmocnienie ikon w kółku, by były wyraźne */
.wc-tab__icon{ width: 44px; height: 44px; }      /* możesz wrócić do 40px, jeśli za duże */
.wc-tab__icon svg{ width: 24px; height: 24px; }  /* docelowy rozmiar glyphu */
}

/* Strzałka w prawym górnym rogu karty */
.wc-tab__arrow{
  position: absolute;
  top: 12px;
  right: 12px;
  color: #111;           /* nieaktywna karta */
  pointer-events: none;  /* ozdoba – brak interakcji */
}
.wc-tab.is-active .wc-tab__arrow{ color: #fff; }  /* aktywna karta – biała strzałka */
.wc-tab__arrow svg{ width: 18px; height: 18px; stroke-width: 2.2; }

.wc-tab { position: relative; } /* upewnia absolutne pozycjonowanie wewnątrz karty */

.wc-tab__arrow{
  position: absolute;
  top: 12px;
  right: 12px;          /* prawy górny róg */
  color: #111;          /* nieaktywna karta */
  pointer-events: none; /* to tylko ozdoba */
}

.wc-tab.is-active .wc-tab__arrow{
  color: #fff;          /* na aktywnej – biała */
}

.wc-tab__arrow svg{
  width: 18px;
  height: 18px;
  display: block;
  stroke-width: 2.2;
}

/* Większa strzałka w prawym górnym rogu */
.wc-tab__arrow svg {
  width: 26px;   /* było 18px */
  height: 26px;
  stroke-width: 2.6; /* delikatnie grubsza linia, opcjonalnie 2.2–2.6 */
}

/* Jeśli po powiększeniu wydaje się minimalnie „za nisko/za blisko” krawędzi: */
.wc-tab__arrow { top: 10px; right: 10px; }
}

/* Upewnij się, że przycisk jest kontekstem pozycjonowania */
.why-choose .why-choose__tabs .wc-tab {
  position: relative !important;
}

/* Przesunięcie strzałki nieco niżej i w prawo */
.why-choose .why-choose__tabs .wc-tab > .wc-tab__arrow {
  position: absolute !important;
  top: 14px !important;   /* dostosuj: 13–15px */
  right: 12px !important;
}

/* Opuść napis (tytuł) wewnątrz przycisku */
.why-choose .why-choose__tabs .wc-tab .wc-tab__title {
  display: block;
  margin-top: 10px !important; /* dostosuj: 6–14px */
}

/* Delikatne powiększenie tytułu w przyciskach */
.why-choose .why-choose__tabs .wc-tab .wc-tab__title {
  font-size: 1.12rem !important; /* np. 1.10–1.14rem */
  line-height: 1.25;             /* opcjonalnie dla czytelności */
}

/* Sekcja: 3 obrazy w jednej linii + warianty mobilne */
.club-collab-trio { padding: clamp(20px, 4vw, 48px) 0; background: transparent; }
.club-collab-trio__container { max-width: 1175px; margin: 0 auto; padding: 0 16px; }

.club-collab-trio__header { text-align: center; max-width: 900px; margin: 0 auto clamp(16px, 2.5vw, 28px); }
.club-collab-trio__title { margin: 0 0 8px; line-height: 1.2; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.club-collab-trio__desc  { margin: 0; color: #6a6a6a; font-weight: 700; }

.club-collab-trio__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(8px, 1.5vw, 16px);
  justify-items: center;
}
@media (min-width: 992px) {
  .club-collab-trio__grid { grid-template-columns: repeat(3, 1fr); }
}

.club-collab-trio__item { margin: 0; width: 100%; max-width: 360px; } /* chcesz mniejsze/większe: zmień 360px */
.club-collab-trio__item picture { display: block; width: 100%; }
.club-collab-trio__item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;      /* kwadraty */
  object-fit: cover;
  border-radius: 14px;
}

/* Sekcja: 3 obrazy w jednej linii + warianty mobilne + napisy na obrazach */
.club-collab-trio { padding: clamp(20px, 4vw, 48px) 0; }
.club-collab-trio__container { max-width: 1175px; margin: 0 auto; padding: 0 16px; }

.club-collab-trio__header { text-align: center; max-width: 900px; margin: 0 auto clamp(16px, 2.5vw, 28px); }
.club-collab-trio__title { margin: 0 0 8px; line-height: 1.2; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.club-collab-trio__desc  { margin: 0; color: #6a6a6a; font-weight: 700; }

/* Siatka */
.club-collab-trio__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(8px, 1.5vw, 16px);
  justify-items: center;
}
@media (min-width: 992px) {
  .club-collab-trio__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Kafle */
.club-collab-trio__item { position: relative; margin: 0; width: 100%; max-width: 360px; border-radius: 14px; }
.club-collab-trio__item picture,
.club-collab-trio__link { display: block; width: 100%; border-radius: 14px; position: relative; }
.club-collab-trio__item img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px;
}

/* Gradient dla czytelności napisów (delikatny) */
.club-collab-trio__item::after{
  content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.2) 38%, transparent 70%);
}

/* Napisy na obrazku */
.club-collab-trio__cap{
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  display: grid; gap: 4px; color: #fff; z-index: 2;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.club-collab-trio__cap .cap-title{
  font-weight: 800; line-height: 1.2; font-size: clamp(1rem, .9rem + .4vw, 1.2rem);
}
.club-collab-trio__cap .cap-sub{
  font-weight: 600; line-height: 1.25; font-size: clamp(.9rem, .84rem + .3vw, 1.05rem);
  opacity: .95;
}

/* (Opcjonalnie) efekt hover dla linkowanych kafli */
.club-collab-trio__link:hover img,
.club-collab-trio__link:focus-visible img { transform: scale(1.01); transition: transform .25s ease; }
}

/* Gdzie trenujemy – większa wysokość kafli (desktop) */
@media (min-width: 992px) {
  .club-collab-trio .club-collab-trio__grid {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows: 460px !important;      /* ← docelowa wysokość wiersza/kafla */
    align-items: stretch !important;
  }

  .club-collab-trio .club-collab-trio__item {
    height: 100% !important;               /* kafel wypełnia wiersz grida */
    position: relative !important;
    overflow: hidden !important;
  }

  .club-collab-trio .club-collab-trio__item picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  .club-collab-trio .club-collab-trio__item img {
    width: 100% !important;
    height: 100% !important;               /* obraz wypełnia kafel */
    object-fit: cover !important;
    aspect-ratio: auto !important;         /* wyłącza kwadrat, jeśli gdzieś jest */
  }

  /* gradient i podpisy zostają dopasowane do pełnej wysokości */
  .club-collab-trio .club-collab-trio__item::after { inset: 0 !important; }
}

/* --- Gdzie trenujemy: naprawa widoczności zdjęć i napisów --- */
@media (min-width: 992px) {
  /* Wysokość wiersza (czyli kafla) */
  .club-collab-trio .club-collab-trio__grid {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows: 460px !important;              /* zmień na 420–520px wg potrzeb */
  }

  /* Kafel jako kontekst pozycjonowania */
  .club-collab-trio .club-collab-trio__item {
    position: relative !important;
    height: 100% !important;
    overflow: hidden !important;
    border-radius: 14px;
    display: grid;                                  /* prosto rozciągamy obraz */
  }

  /* Cofamy absoluty i przyklejamy obraz przez height:100% */
  .club-collab-trio .club-collab-trio__item picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }
  .club-collab-trio .club-collab-trio__item img {
    position: static !important;                    /* ← było absolute */
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;                  /* wyłącza kwadrat */
    object-fit: cover !important;
    object-position: center;
  }

  /* Gradient i podpisy (nad zdjęciem) */
  .club-collab-trio .club-collab-trio__item::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 14px;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.2) 38%, transparent 70%);
    z-index: 1;                                     /* poniżej napisów */
  }
  .club-collab-trio .club-collab-trio__cap {
    position: absolute !important;
    left: 12px; right: 12px; bottom: 12px;
    z-index: 2;                                     /* nad gradientem i obrazem */
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
  }
}

/* Gdzie trenujemy – zbij odstęp nad obrazami */
.page-gdzie-trenujemy .club-collab-trio{padding-top:0 !important; margin-top:0 !important;}
.page-gdzie-trenujemy .club-collab-trio__container{padding-top:0 !important;}
.page-gdzie-trenujemy .club-collab-trio__grid{margin-top:0 !important;}

/* jeżeli luz robi baner nad sekcją – zredukuj jego dół */
.page-gdzie-trenujemy .page-gdzie-trenujemy__banner{margin-bottom:8px !important;} /* ustaw 0–12px */

/* awaryjnie, gdy coś nadal trzyma przestrzeń – dociśnij sekcję do góry */
.page-gdzie-trenujemy .club-collab-trio.tight{margin-top:-4px !important;}
}

/* Gdzie trenujemy – mocne, stałe przyciemnienie zdjęć */
.page-gdzie-trenujemy .club-collab-trio .club-collab-trio__item {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 14px;
}

/* overlay nad zdjęciem, pod napisami */
.page-gdzie-trenujemy .club-collab-trio .club-collab-trio__item::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,.64) !important; /* zwiększ np. do .68/.72 jeśli chcesz jeszcze ciemniej */
  border-radius: inherit !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* upewnij się, że obraz jest pod overlayem */
.page-gdzie-trenujemy .club-collab-trio .club-collab-trio__item img{
  position: relative !important;
  z-index: 1 !important;
}

/* napisy mają być nad overlayem */
.page-gdzie-trenujemy .club-collab-trio .club-collab-trio__cap{
  position: absolute !important;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 3 !important;
}

/* Gdzie trenujemy – mocne, stałe przyciemnienie zdjęć */
.page-gdzie-trenujemy .club-collab-trio .club-collab-trio__item {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 14px;
}

/* overlay nad zdjęciem, pod napisami */
.page-gdzie-trenujemy .club-collab-trio .club-collab-trio__item::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,.64) !important; /* zwiększ np. do .68/.72 jeśli chcesz jeszcze ciemniej */
  border-radius: inherit !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* upewnij się, że obraz jest pod overlayem */
.page-gdzie-trenujemy .club-collab-trio .club-collab-trio__item img{
  position: relative !important;
  z-index: 1 !important;
}

/* napisy mają być nad overlayem */
.page-gdzie-trenujemy .club-collab-trio .club-collab-trio__cap{
  position: absolute !important;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 3 !important;
}

/* Domyślne przyciemnienie + animacja */
.page-gdzie-trenujemy .club-collab-trio .club-collab-trio__item::after{
  background: rgba(0,0,0,.64) !important;
  transition: background .25s ease;
}

/* Mocniejsze przyciemnienie po najechaniu / focusie z klawiatury */
.page-gdzie-trenujemy .club-collab-trio .club-collab-trio__item:hover::after,
.page-gdzie-trenujemy .club-collab-trio .club-collab-trio__item:focus-within::after{
  background: rgba(0,0,0,.78) !important; /* zwiększ do .82, jeśli chcesz jeszcze ciemniej */
}

/* Gdzie trenujemy – wyśrodkowane napisy na obrazach */
.page-gdzie-trenujemy .club-collab-trio .club-collab-trio__cap{
  left: 12px;
  right: 12px;
  bottom: 12px;              /* nadal przy dole */
  text-align: center;        /* wyśrodkowanie tekstu */
  display: grid;
  justify-items: center;     /* wyśrodkowanie elementów */
  gap: 4px;
}

.page-gdzie-trenujemy .club-collab-trio .club-collab-trio__cap .cap-title,
.page-gdzie-trenujemy .club-collab-trio .club-collab-trio__cap .cap-sub{
  margin: 0;
}

/* Gdzie trenujemy – ciemniejszy szary dla opisu (adresu) */
.page-gdzie-trenujemy .club-collab-trio .club-collab-trio__cap .cap-sub{
  color: #b8b8b8 !important;  /* nieco ciemniej niż #cfcfcf */
}

/* (opcjonalnie jeszcze ciemniej)
.page-gdzie-trenujemy .club-collab-trio .club-collab-trio__cap .cap-sub{ color:#a5a5a5 !important; }
*/

/* Gdzie trenujemy – większy tytuł lokalizacji */
.page-gdzie-trenujemy .club-collab-trio .club-collab-trio__cap .cap-title{
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 2.2rem) !important; /* było ~1.2rem max */
  line-height: 1.2;
}

/* Gdzie trenujemy – przesuń sam tytuł (nazwę miejsca) nieco wyżej */
.page-gdzie-trenujemy .club-collab-trio .club-collab-trio__cap .cap-title{
  transform: translateY(-140px) !important; /* dostosuj: -4px do -10px */
}

/* (opcjonalnie) utrzymaj mały odstęp między tytułem a adresem */
.page-gdzie-trenujemy .club-collab-trio .club-collab-trio__cap{
  gap: 2px !important; /* było 4px */
}

/* Gdzie trenujemy — trochę niższe kafle (desktop) */
@media (min-width: 992px) {
  .page-gdzie-trenujemy .club-collab-trio .club-collab-trio__grid{
    grid-auto-rows: 420px !important; /* było 460px */
  }
}

/* Gdzie trenujemy – delikatnie większy opis (adres) */
.page-gdzie-trenujemy .club-collab-trio .club-collab-trio__cap .cap-sub{
  font-size: clamp(1rem, 0.96rem + 0.35vw, 1.3rem) !important; /* subtelne powiększenie */
  line-height: 1.25;
}

/* Gdzie trenujemy – podnieś sam opis (adres) */
.page-gdzie-trenujemy .club-collab-trio .club-collab-trio__cap .cap-sub{
  transform: translateY(-126px) !important; /* w razie potrzeby: -8px lub -10px */
}

/* /wspolpraca-z-klubami/ – większe napisy w przyciskach sekcji "Dlaczego Warto?" */
.why-choose .why-choose__tabs .wc-tab .wc-tab__title{
  font-size: clamp(1.12rem, 1rem + 0.45vw, 1.1rem) !important;
  line-height: 1.3;
  font-weight: 800; /* opcjonalnie mocniej – usuń, jeśli wolisz 700 */
}

/* /wspolpraca-z-klubami/ – mniej pustej przestrzeni POD tytułem w kartach */
.why-choose .why-choose__tabs .wc-tab{
  height: 120px !important;              /* było ~160px – zmniejsza „dół” karty */
  padding-bottom: 10px !important;       /* mniejszy dół wewnątrz karty */
}

.why-choose .why-choose__tabs .wc-tab .wc-tab__title{
  margin-bottom: 0 !important;           /* zeruje ewentualny margines pod tytułem */
}

/* Jeśli chcesz jeszcze ciaśniej, użyj tego zamiast height stałego: */
/*
.why-choose .why-choose__tabs .wc-tab{ height:auto !important; min-height:120px !important; }
*/

/* /wspolpraca-z-klubami/ – lekki margines NAD tytułem w przyciskach */
.why-choose .why-choose__tabs .wc-tab .wc-tab__title{
  margin-top: 40px !important;  /* dostosuj: 6–12px wg potrzeby */
}

/* /wspolpraca-z-klubami/ – przesuń w prawo tytuł i opis w panelach */
.why-choose .why-choose__panels .wc-panel{
  padding-left: 20px; /* dostosuj: 12–24px */
}

/* (opcjonalnie – trochę więcej tylko na desktopie)
@media (min-width: 992px){
  .why-choose .why-choose__panels .wc-panel{ padding-left: 20px; }
}
*/

/* /wspolpraca-z-klubami/ – przesuń w prawo tytuł i opis w panelach */
.why-choose .why-choose__panels .wc-panel .wc-panel__title,
.why-choose .why-choose__panels .wc-panel > p{
  margin-left: 12px !important;   /* zwiększ np. do 20–24px */
}

/* (jeśli chcesz przesuwać cały panel zamiast samych elementów) */
/*
.why-choose .why-choose__panels .wc-panel{
  padding-left: 16px !important;
}
*/

/* /wspolpraca-z-klubami/ – opis w panelu: lekko pogrubiony i ciemniejszy szary */
.why-choose .why-choose__panels .wc-panel > p{
  font-weight: 600 !important;   /* półbold */
  color: #6f6f6f !important;      /* trochę ciemniejszy szary */
}

.page-wspolpraca-klubami__banner{
  margin-bottom: 300px !important; /* zmień wg potrzeb */
}

/* === Szybki kontakt (/kontakt/) === */
.section-contact-quick { padding: 32px 0; }
.section-contact-quick .section-header h2 { margin: 0 0 6px; font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem); }
.section-contact-quick .section-lead { margin: 0 0 16px; opacity: .9; }

/* Zmienne kolorów – dostosuj do motywu BWTrening Theme */
:root {
  --c-icon-bg: #1f1f1f;   /* bazowe tło ikony (ciemne jak header) */
  --c-phone:   #2b8a3e;   /* Telefon */
  --c-sms:     #1971c2;   /* SMS */
  --c-mail:    #ae3ec9;   /* E-mail */
  --c-focus:   #7cc2ff;   /* obwódka focus */
}

/* Kontener ikon */
.contact-icons {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* Ikona/przycisk */
.contact-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--c-icon-bg);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-decoration: none;
  outline-offset: 3px;
}
.contact-icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* Kolory wg typu */
.contact-icon.phone { background: var(--c-phone); }
.contact-icon.sms   { background: var(--c-sms); }
.contact-icon.mail  { background: var(--c-mail); }

/* Interakcje */
.contact-icon:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.25); }
.contact-icon:active { transform: translateY(0); }
.contact-icon:focus-visible { box-shadow: 0 0 0 3px var(--c-focus); }

/* Większe hit-area na mobile */
@media (hover: none) {
  .contact-icon { width: 56px; height: 56px; }
  .contact-icon svg { width: 24px; height: 24px; }
}

/* Preferencje redukcji animacji */
@media (prefers-reduced-motion: reduce) {
  .contact-icon { transition: none; }
}

/* Narzędzie dostępności – ukryty tekst dla czytników ekranu */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* === /pracuj-w-bwt/ – BANER === */
.page-pracuj-w-bwt__banner {
  position: relative;
  width: 100%;
  min-height: clamp(220px, 28vh, 420px);
  overflow: hidden;
}

.page-pracuj-w-bwt__banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-pracuj-w-bwt__banner-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.35));
}

.page-pracuj-w-bwt__banner-title {
  margin: 0 0 6px;
  color: #fff;
  font-size: clamp(1.6rem, 1.2rem + 2vw, 3rem);
  letter-spacing: .2px;
}

.page-pracuj-w-bwt__banner-subtitle {
  margin: 0;
  color: rgba(255,255,255,.92);
  font-size: clamp(1rem, .9rem + .6vw, 1.25rem);
}

/* Responsywność – delikatne zwiększenie paddingu na bardzo małych ekranach */
@media (max-width: 480px) {
  .page-pracuj-w-bwt__banner-overlay { padding: 28px; }
}

/* Preferencje systemowe – redukcja animacji (na wypadek późniejszych efektów) */
@media (prefers-reduced-motion: reduce) {
  .page-pracuj-w-bwt__banner,
  .page-pracuj-w-bwt__banner-img,
  .page-pracuj-w-bwt__banner-overlay { transition: none !important; }
}

/* === /zareklamuj-sie/ – BANER === */
.page-zareklamuj-sie__banner {
  position: relative;
  width: 100%;
  min-height: clamp(220px, 28vh, 420px);
  overflow: hidden;
}
.page-zareklamuj-sie__banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-zareklamuj-sie__banner-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.35));
}
.page-zareklamuj-sie__banner-title {
  margin: 0 0 6px;
  color: #fff;
  font-size: clamp(1.6rem, 1.2rem + 2vw, 3rem);
  letter-spacing: .2px;
}
.page-zareklamuj-sie__banner-subtitle {
  margin: 0;
  color: rgba(255,255,255,.92);
  font-size: clamp(1rem, .9rem + .6vw, 1.25rem);
}
@media (max-width: 480px) {
  .page-zareklamuj-sie__banner-overlay { padding: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-zareklamuj-sie__banner,
  .page-zareklamuj-sie__banner-img,
  .page-zareklamuj-sie__banner-overlay { transition: none !important; }
}

/* === /inna-forma-wspolpracy/ – BANER === */
.page-inna-forma-wspolpracy__banner {
  position: relative;
  width: 100%;
  min-height: clamp(220px, 28vh, 420px);
  overflow: hidden;
}
.page-inna-forma-wspolpracy__banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-inna-forma-wspolpracy__banner-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.35));
}
.page-inna-forma-wspolpracy__banner-title {
  margin: 0 0 6px;
  color: #fff;
  font-size: clamp(1.6rem, 1.2rem + 2vw, 3rem);
  letter-spacing: .2px;
}
.page-inna-forma-wspolpracy__banner-subtitle {
  margin: 0;
  color: rgba(255,255,255,.92);
  font-size: clamp(1rem, .9rem + .6vw, 1.25rem);
}
@media (max-width: 480px) {
  .page-inna-forma-wspolpracy__banner-overlay { padding: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-inna-forma-wspolpracy__banner,
  .page-inna-forma-wspolpracy__banner-img,
  .page-inna-forma-wspolpracy__banner-overlay { transition: none !important; }
}

/* 1) Zredukuj margines nad banerem do zera */
.privacy-policy .page-wspolpracuj-z-bwt__banner {
  margin-top: 0 !important;
}

/* 2) Jeśli motyw dokłada padding w kontenerze głównym – wyłącz go na tej stronie */
.privacy-policy main#primary,
.privacy-policy .site-main {
  padding-top: 0 !important;
}

/* 3) (Opcjonalnie) Jeśli chcesz minimalny odstęp zamiast zera */
.privacy-policy .page-wspolpracuj-z-bwt__banner {
  margin-top: 2px !important; /* ustaw np. 2–4px */
}

/* 4) (Opcjonalnie) Gdy chcesz przesunąć baner jeszcze bliżej headera */
.privacy-policy .page-wspolpracuj-z-bwt__banner {
  margin-top: 0px !important; /* delikatne "podjechanie" pod header */
}

/* 1) Zredukuj margines nad banerem do zera – strona Regulamin */
.terms .page-wspolpracuj-z-bwt__banner {
  margin-top: 0 !important;
}

/* 2) Jeśli motyw dokłada padding w kontenerze głównym – wyłącz go na tej stronie */
.terms main#primary,
.terms .site-main {
  padding-top: 0 !important;
}

/* 3) (Opcjonalnie) Jeśli chcesz minimalny odstęp zamiast zera */
.terms .page-wspolpracuj-z-bwt__banner {
  margin-top: 2px !important; /* ustaw np. 2–4px */
}

/* 4) (Opcjonalnie) Gdy chcesz przesunąć baner jeszcze bliżej headera */
.terms .page-wspolpracuj-z-bwt__banner {
  margin-top: 0px !important; /* delikatne "podjechanie" pod header */
}

/* 1) Zredukuj margines nad banerem do zera – strona Zwroty i reklamacje */
.returns .page-wspolpracuj-z-bwt__banner {
  margin-top: 0 !important;
}

/* 2) Jeśli motyw dokłada padding w kontenerze głównym – wyłącz go na tej stronie */
.returns main#primary,
.returns .site-main {
  padding-top: 0 !important;
}

/* 3) (Opcjonalnie) Jeśli chcesz minimalny odstęp zamiast zera */
.returns .page-wspolpracuj-z-bwt__banner {
  margin-top: 2px !important; /* ustaw np. 2–4px */
}

/* 4) (Opcjonalnie) Gdy chcesz przesunąć baner jeszcze bliżej headera */
.returns .page-wspolpracuj-z-bwt__banner {
  margin-top: 0px !important; /* delikatne "podjechanie" pod header */
}

/* 1) Zredukuj margines nad banerem do zera – strona Formy płatności */
.payments .page-wspolpracuj-z-bwt__banner {
  margin-top: 0 !important;
}

/* 2) Jeśli motyw dokłada padding w kontenerze głównym – wyłącz go na tej stronie */
.payments main#primary,
.payments .site-main {
  padding-top: 0 !important;
}

/* 3) (Opcjonalnie) Minimalny odstęp zamiast zera */
.payments .page-wspolpracuj-z-bwt__banner {
  margin-top: 2px !important; /* np. 2–4px */
}

/* 4) (Opcjonalnie) Jeszcze bliżej headera */
.payments .page-wspolpracuj-z-bwt__banner {
  margin-top: 0px !important; /* delikatne "podjechanie" pod header */
}

/* 1) Zredukuj margines nad banerem do zera – strona Czas i koszt dostawy */
.shipping .page-wspolpracuj-z-bwt__banner {
  margin-top: 0 !important;
}

/* 2) Jeśli motyw dokłada padding w kontenerze głównym – wyłącz go na tej stronie */
.shipping main#primary,
.shipping .site-main {
  padding-top: 0 !important;
}

/* 3) (Opcjonalnie) Minimalny odstęp zamiast zera */
.shipping .page-wspolpracuj-z-bwt__banner {
  margin-top: 2px !important; /* np. 2–4px */
}

/* 4) (Opcjonalnie) Jeszcze bliżej headera */
.shipping .page-wspolpracuj-z-bwt__banner {
  margin-top: 0px !important; /* delikatne "podjechanie" pod header */
}

/* 1) Zredukuj margines nad banerem do zera – strona Karnety i pakiety */
.passes .page-wspolpracuj-z-bwt__banner {
  margin-top: 0 !important;
}

/* 2) Jeśli motyw dokłada padding w kontenerze głównym – wyłącz go na tej stronie */
.passes main#primary,
.passes .site-main {
  padding-top: 0 !important;
}

/* 3) (Opcjonalnie) Minimalny odstęp zamiast zera */
.passes .page-wspolpracuj-z-bwt__banner {
  margin-top: 2px !important; /* np. 2–4px */
}

/* 4) (Opcjonalnie) Jeszcze bliżej headera */
.passes .page-wspolpracuj-z-bwt__banner {
  margin-top: 0px !important; /* delikatne "podjechanie" pod header */
}

/* 1) Zredukuj margines nad banerem do zera – strona Zareklamuj się */
.advertise .page-wspolpracuj-z-bwt__banner {
  margin-top: 0 !important;
}

/* 2) Jeśli motyw dokłada padding w kontenerze głównym – wyłącz go na tej stronie */
.advertise main#primary,
.advertise .site-main {
  padding-top: 0 !important;
}

/* 3) (Opcjonalnie) Minimalny odstęp zamiast zera */
.advertise .page-wspolpracuj-z-bwt__banner {
  margin-top: 2px !important; /* np. 2–4px */
}

/* 4) (Opcjonalnie) Jeszcze bliżej headera */
.advertise .page-wspolpracuj-z-bwt__banner {
  margin-top: 0px !important; /* delikatne "podjechanie" pod header */
}

/* 1) Zredukuj margines nad banerem do zera – strona Pracuj w BWT */
.careers .page-wspolpracuj-z-bwt__banner {
  margin-top: 0 !important;
}

/* 2) Jeśli motyw dokłada padding w kontenerze głównym – wyłącz go na tej stronie */
.careers main#primary,
.careers .site-main {
  padding-top: 0 !important;
}

/* 3) (Opcjonalnie) Minimalny odstęp zamiast zera */
.careers .page-wspolpracuj-z-bwt__banner {
  margin-top: 2px !important; /* np. 2–4px */
}

/* 4) (Opcjonalnie) Jeszcze bliżej headera */
.careers .page-wspolpracuj-z-bwt__banner {
  margin-top: 0px !important; /* delikatne "podjechanie" pod header */
}

/* 1) Zredukuj margines nad banerem do zera – strona Inna forma współpracy */
.collab-alt .page-wspolpracuj-z-bwt__banner {
  margin-top: 0 !important;
}

/* 2) Jeśli motyw dokłada padding w kontenerze głównym – wyłącz go na tej stronie */
.collab-alt main#primary,
.collab-alt .site-main {
  padding-top: 0 !important;
}

/* 3) (Opcjonalnie) Minimalny odstęp zamiast zera */
.collab-alt .page-wspolpracuj-z-bwt__banner {
  margin-top: 2px !important; /* np. 2–4px */
}

/* 4) (Opcjonalnie) Jeszcze bliżej headera */
.collab-alt .page-wspolpracuj-z-bwt__banner {
  margin-top: 0px !important; /* delikatne "podjechanie" pod header */
}

/* === /nasze-obozy/ – układ 4 w 1 rzędzie + max 1175px === */
.why-choose--camps .why-choose__container{
  max-width:1175px;
  margin:0 auto;
  padding-inline:12px;
}

.why-choose--camps .why-choose__tabs{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(4, minmax(0,1fr)); /* 4 kolumny w jednym rzędzie */
  align-items:stretch;
}

/* Kompaktowe kafelki, żeby się zmieściły */
.why-choose--camps .wc-tab{
  padding:14px 16px;
  min-height:88px;
}
.why-choose--camps .wc-tab__title{
  font-size:16px;
  line-height:1.2;
}
.why-choose--camps .wc-tab__icon svg{
  width:20px; height:20px;
}

/* Panel treści w tym samym ograniczeniu szerokości */
.why-choose--camps .why-choose__panels{
  max-width:1175px;
  margin:24px auto 0;
  padding-inline:12px;
}

/* Responsywność */
@media (max-width:1024px){
  .why-choose--camps .why-choose__tabs{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}
@media (max-width:640px){
  .why-choose--camps .why-choose__tabs{
    grid-template-columns:1fr;
  }
}

/* Kontener i panele – szerokość robocza 1175px */
.why-choose--camps .why-choose__container,
.why-choose--camps .why-choose__panels{
  max-width:1175px;
  margin:0 auto;
  padding-inline:12px;
}

/* 3 kafelki w jednym rzędzie (desktop) */
.why-choose--camps .why-choose__tabs{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(3, minmax(0,1fr));
  align-items:stretch;
}

/* Delikatne zmniejszenie kafelków (opcjonalnie) */
.why-choose--camps .wc-tab{
  padding:14px 16px;
  min-height:88px;
}
.why-choose--camps .wc-tab__title{ font-size:16px; line-height:1.2; }
.why-choose--camps .wc-tab__icon svg{ width:20px; height:20px; }

/* Responsywność */
@media (max-width:1024px){
  .why-choose--camps .why-choose__tabs{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  .why-choose--camps .why-choose__tabs{ grid-template-columns:1fr; }
}

/* /nasze-obozy/ – bez ikon i bez strzałki w kafelkach */
.why-choose--camps .wc-tab__icon,
.why-choose--camps .wc-tab__arrow{
  display: none !important;
}

/* Drobna korekta odstępów po usunięciu ikon/strzałek */
.why-choose--camps .wc-tab{
  padding: 14px 16px;              /* zachowaj kompaktową wysokość */
}
.why-choose--camps .wc-tab__title{
  margin: 0;                       /* wyrównanie tytułu */
  display: inline-block;
  vertical-align: middle;
}

/* Kontener sekcji – szerokość robocza */
.why-choose--camps .why-choose__container,
.why-choose--camps .why-choose__panels{
  max-width:1175px;
  margin:0 auto;
  padding-inline:12px;
  position: relative;
  z-index: 2; /* nad warstwą tła */
}

/* Warstwa tła (jeden element; JS podmienia background-image) */
.why-choose--camps{
  position: relative;
  overflow: hidden;
}
.why-choose--camps .why-choose__bg{
  position:absolute;
  inset:0;
  background: #000;               /* fallback zanim wczyta się zdjęcie */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  transition: opacity .28s ease;
  z-index: 1;
  pointer-events: none;
}
/* Przyciemnienie zdjęcia dla czytelności tekstu */
.why-choose--camps .why-choose__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.55));
}

/* Układ 3 kafelków w jednym rzędzie (desktop) */
.why-choose--camps .why-choose__tabs{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(3, minmax(0,1fr));
  align-items:stretch;
}

/* Opcjonalnie: uprość kafelki, bo tło jest „na sekcji”, nie w kafelkach */
.why-choose--camps .wc-tab{
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(2px);
  color: #fff;                    /* czytelność na zdjęciu */
  border: 1px solid rgba(255,255,255,0.12);
}
.why-choose--camps .wc-tab.is-active{
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.22);
}

/* Jeśli chcesz ukryć ikonę i strzałkę (jak ustalaliśmy): */
.why-choose--camps .wc-tab__icon,
.why-choose--camps .wc-tab__arrow{ display:none; }

/* Responsywność */
@media (max-width:1024px){
  .why-choose--camps .why-choose__tabs{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  .why-choose--camps .why-choose__tabs{ grid-template-columns:1fr; }
}

/* --- /nasze-obozy/ — niższe przyciski (pewne nadpisanie) --- */
body .why-choose--camps .why-choose__tabs{ gap:12px !important; }

body .why-choose--camps .why-choose__tabs .wc-tab{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;

  padding:8px 12px !important;     /* mniejszy padding */
  min-height:52px !important;       /* docelowa niższa wysokość */
  height:auto !important;           /* zdejmujemy ewentualne height */
  line-height:1.15 !important;

  /* wyłącz ewentualne wymuszenia wysokości */
  max-height:none !important;
  aspect-ratio:auto !important;
}

/* tytuł kompaktowo + bez łamania (żeby nie podbijał wysokości) */
body .why-choose--camps .why-choose__tabs .wc-tab .wc-tab__title{
  font-size:14px !important;
  line-height:1.15 !important;
  margin:0 !important;
  white-space:nowrap !important;      /* jeśli za długie, usuń tę linię */
  text-overflow:ellipsis !important;  /* i dodaj overflow: hidden (poniżej) */
  overflow:hidden !important;
}

/* jeśli ikony/strzałki są w DOM – upewnij się, że nie podbijają wysokości */
body .why-choose--camps .why-choose__tabs .wc-tab .wc-tab__icon,
body .why-choose--camps .why-choose__tabs .wc-tab .wc-tab__arrow{
  display:none !important;
}

/* zeruj marginesy ewentualnych elementów wewnątrz przycisku */
body .why-choose--camps .why-choose__tabs .wc-tab *{
  margin:0 !important;
}

/* /nasze-obozy/ — odrobinę większe kafelki */
body .why-choose--camps .why-choose__tabs .wc-tab{
  padding:12px 16px !important;  /* +2px w pionie i poziomie */
  min-height:62px !important;     /* było 58px */
}

body .why-choose--camps .why-choose__tabs .wc-tab .wc-tab__title{
  font-size:16px !important;      /* było 15px */
  line-height:1.18 !important;
}

/* /nasze-obozy/ — pełne wyśrodkowanie napisów w kafelkach */
body .why-choose--camps .why-choose__tabs .wc-tab{
  display: flex !important;
  align-items: center !important;      /* oś Y */
  justify-content: center !important;  /* oś X */
  text-align: center !important;
}

body .why-choose--camps .why-choose__tabs .wc-tab .wc-tab__title{
  margin: 0 !important;
  white-space: normal !important;      /* nadpisuje wcześniejsze nowrap */
  overflow: visible !important;        /* usuwa elipsę, jeśli była */
  text-overflow: clip !important;
}

/* Jeśli ikony/strzałki są w DOM — ukryj, by nie rozpychały układu */
body .why-choose--camps .wc-tab__icon,
body .why-choose--camps .wc-tab__arrow{
  display: none !important;
}

/* /nasze-obozy/ — usuń „>” dokładane CSS-em z najwyższą specyficznością */
body .why-choose--camps .why-choose__tabs .wc-tab .wc-tab__title::before,
body .why-choose--camps .why-choose__tabs .wc-tab.is-active .wc-tab__title::before,
body .why-choose--camps .why-choose__tabs .wc-tab:hover .wc-tab__title::before,
body .why-choose--camps .why-choose__tabs .wc-tab::before,
body .why-choose--camps .why-choose__tabs .wc-tab::after,
body .why-choose--camps .why-choose__tabs .wc-tab .wc-tab__title::after{
  content: "" !important;       /* ważne: pusty string, nie 'none' */
  display: none !important;
}

/* na wszelki wypadek — zeruj marker/list-style, jeśli przyciski siedzą w li */
body .why-choose--camps .why-choose__tabs,
body .why-choose--camps .why-choose__tabs *{
  list-style: none !important;
}

/* /nasze-obozy/ — usuń dekoracyjne „>” dodawane CSS-em */
.why-choose--camps .why-choose__tabs .wc-tab::before,
.why-choose--camps .why-choose__tabs .wc-tab *::before{
  content: "" !important;
  display: none !important;
}

/* na wszelki wypadek usuń też ::after, jeśli tam było dodane */
.why-choose--camps .why-choose__tabs .wc-tab::after,
.why-choose--camps .why-choose__tabs .wc-tab *::after{
  content: "" !important;
  display: none !important;
}

/* zeruj ewentualne wcięcia pod „strzałkę” */
.why-choose--camps .why-choose__tabs .wc-tab .wc-tab__title{
  padding-left: 0 !important;
  text-indent: 0 !important;
}

/* /nasze-obozy/ — zoom tła tylko w 1. przycisku */
#camps-why #why-1{
  background-size: 160% auto !important;   /* powiększenie zdjęcia */
  background-position: 50% 38% !important; /* kadr: środek, lekko wyżej */
}

/* Przyciemnienie jako warstwa tła (bez ::after) */
#camps-why .wc-tab{
  /* domyślna siła przyciemnienia */
  --wc-overlay: rgba(0,0,0,.45);
  /* warstwa 1: gradient (przyciemnienie), warstwa 2: zdjęcie z --wc-bg */
  background-image: linear-gradient(var(--wc-overlay), var(--wc-overlay)), var(--wc-bg) !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Mocniej tylko dla pierwszego przycisku + Twój zoom/kadr */
#camps-why #why-1{
  --wc-overlay: rgba(0,0,0,.65);     /* intensywniejszy filtr */
  background-size: 140% auto !important;
  background-position: 50% 38% !important;
}

/* Opcjonalnie: mocniej przy hover/active dla wszystkich */
#camps-why .wc-tab:hover,
#camps-why .wc-tab.is-active{
  --wc-overlay: rgba(0,0,0,.60);
}

/* bazowo bez obrazu */
#camps-why .wc-tab{
  background-image: none !important;
  background-color: #111; /* dostosuj do motywu */
  color: #fff;
}

/* obraz + przyciemnienie tylko na hover */
#camps-why .wc-tab:hover{
  --wc-overlay: rgba(0,0,0,.55);
  background-image: linear-gradient(var(--wc-overlay), var(--wc-overlay)), var(--wc-bg) !important;
  background-size: cover !important;
  background-position: center !important;
}

/* (opcjonalnie) pierwszy przycisk: mocniej i zbliżenie na hover */
#camps-why #why-1:hover{
  --wc-overlay: rgba(0,0,0,.65);
  background-size: 140% auto !important;
  background-position: 50% 38% !important;
}

/* dostępność: pokaż obraz także przy focusie z klawiatury */
#camps-why .wc-tab:focus-visible{
  --wc-overlay: rgba(0,0,0,.55);
  background-image: linear-gradient(var(--wc-overlay), var(--wc-overlay)), var(--wc-bg) !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Domyślnie bez obrazu */
#camps-why .wc-tab{
  background-image: none !important;
  background-color: #111;
  color: #fff;
  --wc-overlay: rgba(0,0,0,.55);
  background-size: cover !important;
  background-position: center !important;
  transition: background-size .25s ease;
}

/* Obraz widoczny przy hover, aktywnym kliknięciu i po aktywacji taba */
#camps-why .wc-tab:hover,
#camps-why .wc-tab:active,
#camps-why .wc-tab.is-active,
#camps-why .wc-tab[aria-selected="true"],
#camps-why .wc-tab:focus-visible{
  background-image: linear-gradient(var(--wc-overlay), var(--wc-overlay)), var(--wc-bg) !important;
}

/* Pierwszy przycisk – przybliżenie i mocniejsze przyciemnienie w stanach aktywnych */
#camps-why #why-1:hover,
#camps-why #why-1:active,
#camps-why #why-1.is-active,
#camps-why #why-1[aria-selected="true"],
#camps-why #why-1:focus-visible{
  --wc-overlay: rgba(0,0,0,.65);
  background-size: 140% auto !important;
  background-position: 50% 38% !important;
}

/* /nasze-obozy/ — większa czcionka w przyciskach */
#camps-why .wc-tab__title{
  font-size: 18px !important;   /* było ~16px */
  line-height: 1.2 !important;
  font-weight: 700;              /* zostawiamy wyraźny */
}

/* delikatna korekta na tablet/telefon */
@media (max-width:1024px){
  #camps-why .wc-tab__title{ font-size: 17px !important; }
}
@media (max-width:640px){
  #camps-why .wc-tab__title{ font-size: 16px !important; }
}

/* /nasze-obozy/ — mniejszy margines nad przyciskami */
#camps-why .why-choose__header{ margin-bottom: -30px !important; }   /* było więcej */
#camps-why .why-choose__title{ margin: 0 0 6px !important; }
#camps-why .why-choose__desc{ margin: 0 !important; }
#camps-why .why-choose__tabs{ margin-top: 2px !important; }        /* jeśli miały własny margines */
}

/* /nasza-oferta/ — trzy kafelki zawsze w jednym rzędzie, w kolejności 1-2-3 */
#offer-why .why-choose__tabs{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

#offer-why .why-choose__tabs > *{        /* gdyby motyw dodał wrappery */
  grid-column: auto !important;
  grid-row: auto !important;
  margin: 0 !important;
}

#offer-why .why-choose__tabs .wc-tab{
  width: 100% !important;
  grid-column: auto !important;
  grid-row: auto !important;
  float: none !important;
}

/* PIN: ustaw pozycję każdego elementu w pierwszym rzędzie */
#offer-why .why-choose__tabs > :nth-child(1){ grid-column: 1 !important; grid-row: 1 !important; }
#offer-why .why-choose__tabs > :nth-child(2){ grid-column: 2 !important; grid-row: 1 !important; }
#offer-why .why-choose__tabs > :nth-child(3){ grid-column: 3 !important; grid-row: 1 !important; }

/* Breakpointy – opcjonalnie niżej możesz wrócić do 2/1 kolumn */
@media (max-width:1024px){
  #offer-why .why-choose__tabs{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  #offer-why .why-choose__tabs > :nth-child(3){ grid-column: 1 / span 2 !important; grid-row: 2 !important; }
}
@media (max-width:640px){
  #offer-why .why-choose__tabs{ grid-template-columns: 1fr !important; }
  #offer-why .why-choose__tabs > :nth-child(n){ grid-column: 1 !important; grid-row: auto !important; }
}

/* /nasza-oferta/ — pełne centrowanie treści w przyciskach */
#offer-why .wc-tab{
  display: flex !important;
  align-items: center !important;      /* oś Y */
  justify-content: center !important;  /* oś X */
  text-align: center !important;
  min-height: 62px !important;         /* bezpieczna wysokość */
}

#offer-why .wc-tab__title{
  margin: 0 !important;
  line-height: 1.2 !important;
  white-space: normal !important;      /* gdyby gdzieś było nowrap */
  text-align: center !important;
  padding: 0 !important;               /* usuń ewentualne wcięcia */
}

/* /nasza-oferta/ — niższe kafelki */
#offer-why .wc-tab{
  padding: 8px 14px !important;   /* mniejszy padding */
  min-height: 52px !important;    /* było 62px */
  height: auto !important;        /* zdejmij ewentualne sztywne height */
  line-height: 1.15 !important;   /* ciaśniej w pionie */
}

#offer-why .wc-tab__title{
  font-size: 16px !important;     /* jeśli trzeba, delikatnie mniejszy tekst */
  line-height: 1.15 !important;
  margin: 0 !important;
}

/* mobile – odrobinę wyżej dla wygody dotyku (opcjonalnie) */
@media (max-width:640px){
  #offer-why .wc-tab{
    min-height: 56px !important;
    padding: 10px 12px !important;
  }
}

/* /nasza-oferta/ — mniejszy margines nad przyciskami */
#offer-why .why-choose__header{ margin-bottom: 35px !important; }
#offer-why .why-choose__title{  margin: 0 0 10px !important; }
#offer-why .why-choose__desc{   margin: 0 !important; }
#offer-why .why-choose__tabs{   margin-top: 10px !important; }

/* jeśli coś jeszcze „trzyma” odstęp sekcji od góry */
#offer-why{ margin-top: 0 !important; padding-top: 0 !important; }
}

/* Schowaj tytuł i pierwszy akapit (lead) w panelach /nasza-oferta/ */
#offer-why .wc-panel__title{ display:none !important; }
#offer-why .wc-panel > p:first-of-type{ display:none !important; }

/* Dociśnij karty bliżej przycisków */
#offer-why .offer-cards{ margin-top: 8px !important; }
}

/* /nasza-oferta/ — 3 karty w jednym rzędzie, ciaśniej */
#offer-why .offer-cards{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:16px !important;
}

#offer-why .offer-cards .offer-card{
  box-sizing:border-box !important;
  flex:0 0 calc((100% - 32px)/3) !important;   /* 3 kolumny */
  max-width:calc((100% - 32px)/3) !important;
  margin:0 !important;
  padding:12px !important;                      /* było 16px */
  border-radius:10px !important;
}

/* Panel z 2 kartami (Twoja analiza) */
#offer-why #offer-3-panel .offer-cards .offer-card{
  flex:0 0 calc((100% - 16px)/2) !important;    /* 2 kolumny */
  max-width:calc((100% - 16px)/2) !important;
}

/* Mniejsze obrazki, by karty były niższe */
#offer-why .offer-card-image img{
  width:100% !important;
  height:160px !important;                      /* było 200px */
  object-fit:cover !important;
  display:block !important;
  border-radius:8px !important;
}

/* Ciaśniejsze odstępy w treści */
#offer-why .offer-card h3{ margin:10px 0 4px !important; font-size:18px !important; }
#offer-why .offer-card .description{ margin:0 0 6px !important; }
#offer-why .offer-card .offer-extra{ margin:0 !important; font-size:0.95rem !important; }
#offer-why .offer-card .cta{ margin-top:10px !important; padding:9px 12px !important; }

/* Breakpointy */
@media (max-width:1024px){
  #offer-why .offer-cards{ flex-wrap:wrap !important; }
  #offer-why .offer-cards .offer-card{ flex:0 0 calc((100% - 16px)/2) !important; max-width:calc((100% - 16px)/2) !important; }
}
@media (max-width:640px){
  #offer-why .offer-cards .offer-card{ flex:0 0 100% !important; max-width:100% !important; }
}

/* 1) KONTENER KART – jeden rząd */
#offer-why .offer-cards{
  display: flex !important;
  flex-wrap: nowrap !important;     /* bez zawijania */
  gap: 16px !important;
}

/* 2) SZEROKOŚCI KART – 3 kolumny w panelach 1 i 2 */
#offer-why #offer-1-panel .offer-card,
#offer-why #offer-2-panel .offer-card{
  flex: 0 0 calc((100% - 32px)/3) !important;  /* 3 karty + 2 odstępy */
  max-width: calc((100% - 32px)/3) !important;
}

/* 3) Panel „Twoja analiza” – 2 kolumny */
#offer-why #offer-3-panel .offer-card{
  flex: 0 0 calc((100% - 16px)/2) !important;  /* 2 karty + 1 odstęp */
  max-width: calc((100% - 16px)/2) !important;
}

/* 4) Zdejmij wszelkie limity, które ściskają karty */
#offer-why .offer-cards > *,
#offer-why .offer-card{
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  float: none !important;
  flex-grow: 0 !important;
}

/* 5) Obrazki – stała wysokość, żeby karty były zwarte */
#offer-why .offer-card-image img{
  width: 100% !important;
  height: 160px !important;         /* ew. 140–180px */
  object-fit: cover !important;
  display: block !important;
  border-radius: 8px !important;
}

/* /nasza-oferta/ — ujednolicenie wyglądu panelu "Twoja Analiza" (offer-3) */

/* kontener kart: taki sam jak w pozostałych panelach */
#offer-why #offer-3-panel .offer-cards{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  justify-content: flex-start !important;
}

/* każda karta ma tę samą szerokość co w panelach 1 i 2 (≈ 1/3) */
#offer-why #offer-3-panel .offer-cards .offer-card{
  box-sizing: border-box !important;
  flex: 0 0 calc((100% - 32px) / 3) !important;  /* 3 kolumny */
  max-width: calc((100% - 32px) / 3) !important;
  min-width: 0 !important;
  width: auto !important;
}

/* obrazek w karcie – ta sama wysokość jak w pozostałych */
#offer-why #offer-3-panel .offer-card-image img{
  width: 100% !important;
  height: 160px !important;        /* dopasuj do reszty, np. 160px */
  object-fit: cover !important;
  display: block !important;
  border-radius: 8px !important;
}

/* responsywność spójna z resztą sekcji */
@media (max-width:1024px){
  #offer-why #offer-3-panel .offer-cards{ flex-wrap: wrap !important; }
  #offer-why #offer-3-panel .offer-cards .offer-card{
    flex: 0 0 calc((100% - 16px) / 2) !important; /* 2 kolumny */
    max-width: calc((100% - 16px) / 2) !important;
  }
}
@media (max-width:640px){
  #offer-why #offer-3-panel .offer-cards .offer-card{
    flex: 0 0 100% !important;                     /* 1 kolumna */
    max-width: 100% !important;
  }
}

/* /nasza-oferta/ — wyśrodkowanie kart w panelu "Twoja Analiza" */
#offer-why #offer-3-panel .offer-cards{
  justify-content: center !important;   /* środkuje rząd kart */
}

/* (opcjonalnie) na tabletach, gdy karty przechodzą do 2 kolumn */
@media (max-width:1024px){
  #offer-why #offer-3-panel .offer-cards{
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
}

/* /nasza-oferta/ — lekko większe tytuły w kartach */
#offer-why .offer-card h3{
  font-size: 21px !important;
  line-height: 1.25 !important;
  margin: 10px 0 6px !important;
}

/* subtelna skala na mniejszych ekranach */
@media (max-width:1024px){
  #offer-why .offer-card h3{ font-size: 18px !important; }
}
@media (max-width:640px){
  #offer-why .offer-card h3{ font-size: 17px !important; }
}

/* /nasza-oferta/ — mniejszy margines nad tytułem karty */
#offer-why .offer-card h3{
  margin-top: 6px !important;   /* dostosuj: 4–10px */
  margin-bottom: 6px !important;
}

/* na wszelki wypadek przytnij też odstęp pod obrazkiem */
#offer-why .offer-card-image{ 
  margin-bottom: 6px !important; 
}








/* /nasza-oferta/ — wyższe zdjęcia w kartach */
#offer-why .offer-card-image img{
  height: 180px !important;   /* było ~160px; dostosuj 170–200px */
  object-fit: cover !important;
}

/* responsywność (opcjonalnie) */
@media (max-width:1024px){
  #offer-why .offer-card-image img{ height: 160px !important; }
}
@media (max-width:640px){
  #offer-why .offer-card-image img{ height: 140px !important; }
}

/* /nasza-oferta/ — spójna wysokość zdjęć także w 3. podgrupie */
#offer-why #offer-3-panel .offer-card-image img{
  height: 180px !important;   /* dostosuj 170–200px */
  object-fit: cover !important;
}

@media (max-width:1024px){
  #offer-why #offer-3-panel .offer-card-image img{ height: 160px !important; }
}
@media (max-width:640px){
  #offer-why #offer-3-panel .offer-card-image img{ height: 140px !important; }
}

/* /nasza-oferta/ — ciaśniej NAD .description (tym wcześniejszym, krótszym wierszem) */
#offer-why .offer-card h3{
  margin-bottom: 2px !important;   /* mniejsza przerwa pod tytułem */
}
#offer-why .offer-card .description{
  margin-top: 1px !important;      /* mniejsza przerwa nad .description */
  margin-bottom: 10px !important;    /* zostaw lekki oddech pod spodem (dostosuj) */
  line-height: 1
}

/* /nasza-oferta/ — krótsze przyciski w kartach */
#offer-why .offer-card .cta{
  width: 90% !important;      /* było ~78% */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* delikatnie szerzej na mniejszych ekranach */
@media (max-width:1024px){
  #offer-why .offer-card .cta{ width: 70% !important; }
}
@media (max-width:640px){
  #offer-why .offer-card .cta{ width: 78% !important; }
}

/* /nasza-oferta/ — jeszcze węższe kolumny tekstu */
#offer-why .offer-card .description,
#offer-why .offer-card .offer-extra{
  max-width: 34ch !important;   /* w razie potrzeby zejdź do 32ch */
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* dłuższy opis najwężej */
#offer-why .offer-card .offer-extra{ max-width: 32ch !important; }
}

/* /nasza-oferta/ — lekko szersze kolumny tekstu */
#offer-why .offer-card .description{ max-width: 38ch !important; }
#offer-why .offer-card .offer-extra{ max-width: 34ch !important; }
}

/* /nasza-oferta/ — CTA pod sekcją */
#offer-next-cta .offer-next-cta__container{
  max-width:1175px; margin:18px auto 0; padding-inline:12px;
}
#offer-next-cta .offer-next-cta__btn{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:100%; height:220px; border-radius:16px; overflow:hidden;
  text-decoration:none; color:#fff; background:#000; /* fallback, gdy obraz się nie wczyta */
  border:1px solid rgba(0,0,0,.18);
}
#offer-next-cta .offer-next-cta__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter:brightness(.72);
  transition:transform .35s ease, filter .2s ease;
  pointer-events:none; /* klik zawsze w link */
}
/* overlay dla czytelności napisu */
#offer-next-cta .offer-next-cta__btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,.35));
  transition:background .2s ease;
}
/* etykieta */
#offer-next-cta .offer-next-cta__label{
  position:relative; z-index:1;
  font-weight:800; font-size:22px; line-height:1.2;
  padding:10px 16px; border-radius:10px;
  background:rgba(0,0,0,.35);
  backdrop-filter:saturate(130%) blur(1px);
}
/* hover/focus */
#offer-next-cta .offer-next-cta__btn:hover .offer-next-cta__img{ transform:scale(1.04); filter:brightness(.68); }
#offer-next-cta .offer-next-cta__btn:hover::after{ background:linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.45)); }
#offer-next-cta .offer-next-cta__btn:focus-visible{ outline:2px solid #000; outline-offset:3px; }

/* responsywność */
@media (max-width:1024px){ #offer-next-cta .offer-next-cta__btn{ height:200px; } }
@media (max-width:640px){
  #offer-next-cta .offer-next-cta__btn{ height:180px; }
  #offer-next-cta .offer-next-cta__label{ font-size:18px; }
}

/* /nasza-oferta/ — szerokość CTA */
#offer-next-cta{ --cta-max: 800px; }          /* ← podmień np. na 840/960 */
#offer-next-cta .offer-next-cta__container{
  max-width: var(--cta-max) !important;
  margin: 18px auto 0 !important;
}

/* /nasza-oferta/ — margines pod CTA i niższy blok */
#offer-next-cta .offer-next-cta__btn{
  height: 180px !important;      /* ↓ ustaw docelową wysokość, np. 160–200px */
}
#offer-next-cta .offer-next-cta__container{
  margin-bottom: 40px !important; /* ↓ margines POD blokiem */
}

/* (opcjonalnie) ciaśniej na mobile */
@media (max-width: 640px){
  #offer-next-cta .offer-next-cta__btn{ height: 160px !important; }
  #offer-next-cta .offer-next-cta__container{ margin-bottom: 28px !important; }
}



/* /nasza-oferta/ — margines pod CTA i niższy blok */
#offer-next-cta .offer-next-cta__btn{
  height: 100px !important;      /* ↓ ustaw docelową wysokość, np. 160–200px */
}
#offer-next-cta .offer-next-cta__container{
  margin-bottom: 40px !important; /* ↓ margines POD blokiem */
}

/* (opcjonalnie) ciaśniej na mobile */
@media (max-width: 640px){
  #offer-next-cta .offer-next-cta__btn{ height: 160px !important; }
  #offer-next-cta .offer-next-cta__container{ margin-bottom: 28px !important; }
}


/* /nasza-oferta/ — pogrubiona krawędź tylko w nieaktywnych przyciskach */
#offer-why .wc-tab:not(.is-active):not([aria-selected="true"]) {
  /* bazowa ramka zostaje jak była; dokładamy „drugi pierścień” */
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.25) !important;
  border-color: rgba(0,0,0,.18) !important;
}
#offer-why .wc-tab:not(.is-active):not([aria-selected="true"]):hover {
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.30) !important; /* subtelnie mocniej na hover */
}

/* aktywny bez dodatkowego obrysu (czarny przycisk jak dotąd) */
#offer-why .wc-tab.is-active,
#offer-why .wc-tab[aria-selected="true"]{
  box-shadow: none !important;
}

/* /nasza-oferta/ — trochę wyższe „Zobacz więcej” */
#offer-why .offer-card .cta{
  padding: 14px 0 !important;   /* było mniej; +2–4 px */
  min-height: 35px !important;  /* delikatny wzrost wysokości */
  line-height: 1.05 !important; /* bez ścisku tekstu */
}

/* opcjonalnie: na mobile odrobinę niższe */
@media (max-width:640px){
  #offer-why .offer-card .cta{
    padding: 12px 0 !important;
    min-height: 48px !important;
  }
}

/* /nasza-oferta/ — delikatniejszy efekt zbliżenia w CTA pod ofertami */
#offer-next-cta .offer-next-cta__img{
  transition: transform .25s ease-out !important;
}

#offer-next-cta .offer-next-cta__btn:hover .offer-next-cta__img,
#offer-next-cta .offer-next-cta__btn:focus-visible .offer-next-cta__img{
  transform: scale(1.015) !important; /* było ~1.04; subtelnie 1.01–1.02–1.015 */
}

/* /nasza-oferta/ — bez przyciemnienia zdjęcia w CTA */
#offer-next-cta .offer-next-cta__img{
  filter: none !important;
}
#offer-next-cta .offer-next-cta__btn::after{
  background: none !important;   /* wyłącza nakładkę */
}
/* także w stanach hover/focus */
#offer-next-cta .offer-next-cta__btn:hover .offer-next-cta__img,
#offer-next-cta .offer-next-cta__btn:focus-visible .offer-next-cta__img{
  filter: none !important;
}
#offer-next-cta .offer-next-cta__btn:hover::after,
#offer-next-cta .offer-next-cta__btn:focus-visible::after{
  background: none !important;
}

/* (opcjonalnie) jeśli chcesz również usunąć ciemne tło pod etykietą */
#offer-next-cta .offer-next-cta__label{
  background: transparent !important;
  backdrop-filter: none !important;
}

/* /nasza-oferta/ — mniejszy margines NAD CTA */
#offer-next-cta .offer-next-cta__container{
  margin-top: 8px !important;   /* było więcej; ustaw np. 0–12px */
}

/* (jeśli coś wciąż trzyma odstęp z góry, dołóż) */
#offer-next-cta{ margin-top: 0 !important; padding-top: 0 !important; }
#offer-why{ margin-bottom: -28px !important; }  /* zmniejsza odstęp sekcji powyżej */
}

/* /nasza-oferta/ — hover: ciemnoszary przycisk "Zobacz więcej" */
#offer-why .offer-card .cta{
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

#offer-why .offer-card .cta:hover{
  background: #2b2b2b !important;   /* ciemny szary */
  color: #fff !important;
  border-color: rgba(0,0,0,.40) !important;
}

/* (opcjonalnie) aktywny/focus – odrobinę ciemniejszy */
#offer-why .offer-card .cta:active,
#offer-why .offer-card .cta:focus-visible{
  background: #1f1f1f !important;
  color: #fff !important;
  outline: none;
}

.page-nasza-oferta__banner-subtitle{
  color: #e3e3e3 !important;                 /* ciut jaśniej niż #d9d9d9 */
  text-shadow: 0 1px 2px rgba(0,0,0,.28);    /* delikatniejszy cień */
}

/* Wariant 3: divider */
#offer-why .offer-card .offer-extra{
  position: relative;
  color: #555;
  line-height: 1.4;
  padding-top: 10px;
}
#offer-why .offer-card .offer-extra::before{
  content:"";
  position: absolute; left: 50%; top: 0;
  width: 56px; height: 2px; transform: translateX(-50%);
  background: #d8cfc4;           /* odcień zgodny z tłem strony */
  border-radius: 2px;
}

/* /nasze-obozy/ — wyśrodkowanie tytułów w przyciskach zakładek */
#camps-offer-why .wc-tab{
  display: flex !important;
  align-items: center !important;   /* centrowanie w pionie */
  justify-content: center !important;/* centrowanie w poziomie */
  text-align: center !important;
  line-height: normal !important;   /* reset ewentualnego „line-height hacka” z motywu */
  min-height: 56px;                 /* dostosuj, jeśli chcesz wyższe/niższe */
  padding: 12px 16px;
}

#camps-offer-why .wc-tab__title{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  margin: 0 !important;
  line-height: 1.2 !important;
  text-indent: 0 !important;
}

/* bezpieczeństwo: wyłącz pseudo-elementy, które potrafią przesuwać treść */
#camps-offer-why .wc-tab::before,
#camps-offer-why .wc-tab::after,
#camps-offer-why .wc-tab__title::before,
#camps-offer-why .wc-tab__title::after{
  content: "" !important;
  display: none !important;
}

/* /nasze-obozy/ — wysokość przycisków i margines nad nimi (twarde nadpisanie) */
#camps-offer-why .why-choose__tabs{
  margin-top: 6px !important;              /* ← ustaw docelową wartość (np. 0–16px) */
}

/* stała wysokość przycisków */
#camps-offer-why .why-choose__tabs .wc-tab{
  --tab-h: 58px;                            /* ← zmień na 54–68px wg potrzeby */
  height: var(--tab-h) !important;
  min-height: var(--tab-h) !important;
  line-height: var(--tab-h) !important;     /* „przyciska” tytuł do środka, jeśli motyw narzuca line-height */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* bezpieczeństwo: wyłącz obce reguły, które potrafią psuć wysokość */
#camps-offer-why .why-choose__tabs .wc-tab *{
  line-height: 1.2 !important;              /* tekst wewnątrz */
}
#camps-offer-why .why-choose__tabs .wc-tab::before,
#camps-offer-why .why-choose__tabs .wc-tab::after{
  content: "" !important; display: none !important;  /* pseudo-elementy z motywu */
}

/* /nasze-obozy/ — mniejszy odstęp NAD przyciskami */
#camps-offer-why .why-choose__header{
  margin-bottom: -4px !important;   /* było więcej; zmień np. na 0–6px */
}
#camps-offer-why .why-choose__tabs{
  margin-top: -65px !important;      /* było ~6–8px; zmień wg potrzeby */
}

/* (opcjonalnie) wyzeruj wewnętrzne marginesy tytułu/opisu w nagłówku,
   jeśli to one generują dodatkową przerwę */
#camps-offer-why .why-choose__title{ margin: 0 0 -43px !important; }
#camps-offer-why .why-choose__desc{  margin: 0 !important; }
}







/* Odstęp NAD przyciskami (px) */
#camps-offer-why .why-choose__header{ margin-bottom: 4px !important; }
#camps-offer-why .why-choose__tabs{   margin-top: 2px !important; }

/* Wysokość przycisków (px) */
#camps-offer-why .why-choose__tabs .wc-tab{
  height: 52px !important;
  min-height: 48px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  display: flex !important;
  align-items: center !important;   /* centrowanie w pionie */
  justify-content: center !important; /* centrowanie w poziomie */
  box-sizing: border-box !important;
}

/* Tytuł w przycisku – bez rozpychania (px) */
#camps-offer-why .wc-tab__title{
  margin: 0px !important;
  line-height: 14px !important;   /* dopasuj do używanego font-size */
}

/* Mobile (px) */
@media (max-width: 640px){
  #camps-offer-why .why-choose__tabs .wc-tab{
    height: 44px !important;
    min-height: 44px !important;
  }
  #camps-offer-why .why-choose__header{ margin-bottom: 4px !important; }
  #camps-offer-why .why-choose__tabs{   margin-top: 2px !important; }
}


/* /nasze-obozy/ — TYLKO napisy wewnątrz przycisków (zakładek) */
#camps-offer-why .wc-tab__title{
  font-weight: 600 !important;           /* grubość dla wszystkich */
}

/* (opcjonalnie) inna grubość dla aktywnego przycisku */
#camps-offer-why .wc-tab.is-active .wc-tab__title,
#camps-offer-why .wc-tab[aria-selected="true"] .wc-tab__title{
  font-weight: 600 !important;
}

/* /nasze-obozy/ — mniejsza czcionka w tytułach przycisków */
#camps-offer-why .why-choose__tabs .wc-tab .wc-tab__title{
  font-size: 16px !important;   /* ustaw docelowo, np. 15–16px */
  line-height: 1.15 !important; /* żeby nie zwiększać wysokości przycisku */
}

/* (opcjonalnie) jeszcze ciaśniej na mniejszych ekranach */
@media (max-width: 1024px){
  #camps-offer-why .why-choose__tabs .wc-tab .wc-tab__title{ font-size: 15px !important; }
}
@media (max-width: 640px){
  #camps-offer-why .why-choose__tabs .wc-tab .wc-tab__title{ font-size: 14px !important; }
}

/* /nasze-obozy/ — szerokość bloków (3 kolumny jak na /nasza-oferta/) */
#camps-offer-why .offer-cards{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}

/* Zdejmij ograniczenia z dzieci */
#camps-offer-why .offer-cards > *{
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Ostatnia zakładka — 2 karty o szerokości 1/3 i wyśrodkowane */
#camps-offer-why #camps-3-panel .offer-cards{
  display: flex !important;
  gap: 16px !important;
  justify-content: center !important;           /* wyśrodkuj dwie karty */
}
#camps-offer-why #camps-3-panel .offer-cards .offer-card{
  flex: 0 0 calc((100% - 32px) / 3) !important; /* szerokość jak pozostałe karty */
  max-width: calc((100% - 32px) / 3) !important;
}

/* Responsywność spójna z /nasza-oferta/ */
@media (max-width:1024px){
  #camps-offer-why .offer-cards{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  #camps-offer-why #camps-3-panel .offer-cards{ flex-wrap: wrap !important; }
  #camps-offer-why #camps-3-panel .offer-cards .offer-card{
    flex: 0 0 calc((100% - 16px) / 2) !important;
    max-width: calc((100% - 16px) / 2) !important;
  }
}
@media (max-width:640px){
  #camps-offer-why .offer-cards{ grid-template-columns: 1fr !important; }
  #camps-offer-why #camps-3-panel .offer-cards .offer-card{
    flex: 0 0 100% !important; max-width: 100% !important;
  }
}

/* Wyśrodkowanie każdego kontenera, który MA tylko 2 karty (współczesne przeglądarki) */
#camps-offer-why .offer-cards:not(:has(> .offer-card:nth-child(3))){
  display: flex !important;
  justify-content: center !important;
  gap: 16px !important;
}
#camps-offer-why .offer-cards:not(:has(> .offer-card:nth-child(3))) .offer-card{
  flex: 0 0 calc((100% - 32px) / 3) !important;
  max-width: calc((100% - 32px) / 3) !important;
}

/* /nasze-obozy/ — obrazki w kartach jak na /nasza-oferta/ */
#camps-offer-why .offer-card-image{
  height: 180px !important;
  overflow: hidden !important;
  border-radius: 10px !important;
}

#camps-offer-why .offer-card-image img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* breakpoints spójne z poprzednią stroną */
@media (max-width:1024px){
  #camps-offer-why .offer-card-image{ height: 160px !important; }
}
@media (max-width:640px){
  #camps-offer-why .offer-card-image{ height: 140px !important; }
}

/* /nasze-obozy/ — większy odstęp między zakładkami a blokami */
#camps-offer-why .wc-panel .offer-cards{
  margin-top: 24px !important;  /* było ~16px; dostosuj np. 20–28px */
}





/* /nasze-obozy/ — mniejszy odstęp NAD zdjęciem w karcie */
#camps-offer-why .offer-card{
  padding-top: 12px !important;   /* było ~16px; zmień według potrzeby */
}
#camps-offer-why .offer-card-image{
  margin-top: 0 !important;      /* na wypadek narzuconych marginesów motywu */
}

/* /nasze-obozy/ — obrazek bliżej krawędzi bloku (zostawiamy odstęp u góry bez zmian) */
#camps-offer-why .offer-card{
  padding-left: 12px !important;   /* było szerzej */
  padding-right: 12px !important;
}

/* /nasza-oferta/ — mniej zaokrąglone GÓRNE rogi zdjęć w kartach */
#offer-why .offer-card-image img{
  border-radius: 6px 6px 10px 10px !important; /* TL TR BL BR */
}

/* (jeśli zaokrąglenie było też na kontenerze, dopnij dla pewności) */
#offer-why .offer-card-image{
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
  overflow: hidden; /* żeby obraz nie „wystawał” */
}

/* /nasza-oferta/ — większy odstęp między tytułem a krótkim opisem */
#offer-why .offer-card h3{
  margin-bottom: 10px !important;   /* dostosuj np. 12–18px */
}
#offer-why .offer-card .description{
  margin-top: 0 !important;         /* żeby nie kumulować marginesów */
}



/* /nasza-oferta/ — większy odstęp między krótkim opisem a dłuższym */
#offer-why .offer-card .description{
  margin-bottom: 18px !important;  /* dostosuj np. 12–18px */
}
#offer-why .offer-card .offer-extra{
  margin-top: 0 !important;        /* zeruje ewentualny własny odstęp motywu */
}

/* /nasza-oferta/ — większy margines NAD przyciskiem "Zobacz więcej" */
#offer-why .offer-card .cta{
  margin-top: 24px !important;   /* dostosuj np. 16–24px */
}

#offer-why .offer-card .description + .offer-extra{
  margin-top: 16px !important; /* ustaw np. 14–20px */
}

/* /nasze-obozy/ — rozmiar głównego tytułu w blokach */
#camps-offer-why .offer-card h3{
  font-size: 20px !important;   /* dostosuj wg potrzeb */
  line-height: 1.25 !important;
}

/* responsywność (opcjonalnie) */
@media (max-width:1024px){
  #camps-offer-why .offer-card h3{ font-size: 19px !important; }
}
@media (max-width:640px){
  #camps-offer-why .offer-card h3{ font-size: 18px !important; }
}

/* /nasze-obozy/ — rozmiar czcionki opisu pod tytułem */
#camps-offer-why .offer-card .description{
  font-size: 16px !important;   /* ustaw docelowo, np. 15–17px */
  line-height: 1.35 !important;
}

/* (opcjonalnie) mniejsze na mobile */
@media (max-width: 640px){
  #camps-offer-why .offer-card .description{ font-size: 15px !important; }
}


/* /nasze-obozy/ — margines NAD opisem (między tytułem a .description) */
#camps-offer-why .offer-card h3 + .description{
  margin-top: -13px !important;  /* dostosuj np. 8–16px */
}


/* odstęp NAD .offer-extra (między .description a .offer-extra) */
#camps-offer-why .offer-card .description + .offer-extra{
  margin-top: -12px !important;   /* ustaw np. 8–20px */
}

/* odstęp POD .offer-extra (przed przyciskiem) */
#camps-offer-why .offer-card .offer-extra{
  margin-bottom: 8px !important; /* ustaw np. 10–24px */
}

/* /nasze-obozy/ — szerszy przycisk "Zobacz więcej" */
#camps-offer-why .offer-card .cta{
  width: 90% !important;   /* było 64%; ustaw wg potrzeb: 72–88% */
}

/* (opcjonalnie) na mobile jeszcze szerzej */
@media (max-width: 640px){
  #camps-offer-why .offer-card .cta{ width: 90% !important; }
}

/* === KARUZELA — SZTYWNE 1175 px + SZCZELNOŚĆ === */

/* 1) Wymuś 1175 px nawet przy obecności .content-container */
#trainers-carousel .trainers-carousel__inner,
#trainers-carousel .content-container {
  max-width: 1175px !important;
  margin: 0 auto;
  position: relative;
  padding: 24px 16px; /* możesz zmniejszyć do 0 16px jeśli potrzeba */
}

/* 2) Jeśli rodzic jest flex — pozwól się zwężać (kluczowe!) */
#trainers-carousel .trainers-carousel__inner,
#trainers-carousel .trainers-carousel__frame,
#trainers-carousel .trainers-carousel__viewport { min-width: 0; }

/* 3) Viewport przycina nadmiar i nie powiększa szerokości */
#trainers-carousel .trainers-carousel__frame   { width: 100%; }
#trainers-carousel .trainers-carousel__viewport{
  width: 100%;
  overflow: hidden;       /* przytnij to, co poza 1175 px */
  --tc-visible: 5;        /* desktop: 5 kart */
}

/* 4) Tor i slajdy dokładnie mieszczą się w 1175 px */
#trainers-carousel .trainers-carousel__track{
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  will-change: transform;
  transform: translate3d(0,0,0);
}

#trainers-carousel .trainers-carousel__slide{
  flex: 0 0 auto;
  width: calc((100% - (var(--tc-visible) - 1) * 20px) / var(--tc-visible));
}

#trainers-carousel .trainers-carousel__image{
  display: block;
  width: 100%;
  max-width: 100%; /* zapobiega „rozpychaniu” */
  height: auto;
  border-radius: 12px;
}

/* 5) Strzałki wewnątrz 1175 px (overlay — nie zwiększają szerokości) */
#trainers-carousel .trainers-carousel__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px; height: 40px;
  border: 0;
  border-radius: 999px;
  background: #ececec;
  display: grid; place-items: center;
  cursor: pointer;
}
#trainers-carousel .trainers-carousel__nav--prev{ left: 0; }
#trainers-carousel .trainers-carousel__nav--next{ right: 0; }
#trainers-carousel .trainers-carousel__nav:hover{ background: #dedede; }

/* 6) Breakpointy — ile kart widoczne */
@media (max-width: 1199.98px){
  #trainers-carousel .trainers-carousel__viewport{ --tc-visible: 3; }
}
@media (max-width: 767.98px){
  #trainers-carousel .trainers-carousel__viewport{ --tc-visible: 1; }
}

/* Mniejszy odstęp między kartami (tylko desktop 1175px) */
@media (min-width: 1200px) {
  #trainers-carousel { --tc-gutter: 12px; } /* było 20px – dostosuj wg uznania */
}










/* Karuzela: zmniejsz wewnętrzny odstęp, NIE zmieniaj szerokości kart (desktop) */
@media (min-width: 1200px) {
  /* 1) Zachowaj obecną szerokość karty ~219px (przy 1175px i gap=20px) */
  #trainers-carousel .trainers-carousel__slide {
    width: 195px !important;   /* NIE ruszamy rozmiaru zdjęcia */
    flex: 0 0 auto !important;
  }

  /* 2) Zmniejsz przerwę między kartami */
  #trainers-carousel .trainers-carousel__track {
    gap: 10px !important;      /* ustaw 12/10/8px wg uznania */
    justify-content: center !important; /* nadmiar miejsca rozdziel po bokach */
  }
}

/* === Karuzela Trenerów – usuń przyciemnienie/filtry ze zdjęć === */
#trainers-carousel .trainers-carousel__slide,
#trainers-carousel .trainers-carousel__card,
#trainers-carousel .trainers-carousel__image {
  background: transparent !important;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

/* wyłącz ewentualne globalne reguły typu :not(.is-center), .adjacent, .active */
#trainers-carousel .trainers-carousel__slide:not(.is-center) .trainers-carousel__image,
#trainers-carousel .trainers-carousel__slide.adjacent .trainers-carousel__image,
#trainers-carousel .trainers-carousel__slide.active   .trainers-carousel__image {
  filter: none !important;
  opacity: 1 !important;
}

/* skasuj nakładki z :before/:after, jeśli motyw je dodaje */
#trainers-carousel .trainers-carousel__slide::before,
#trainers-carousel .trainers-carousel__slide::after,
#trainers-carousel .trainers-carousel__card::before,
#trainers-carousel .trainers-carousel__card::after {
  content: none !important;
  background: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* dla pewności obrazek ponad tłem/overlayem */
#trainers-carousel .trainers-carousel__slide,
#trainers-carousel .trainers-carousel__card { position: relative; }
#trainers-carousel .trainers-carousel__image { position: relative; z-index: 1; }
}

/* Uczyń bieżący kontener kontekstem pozycjonowania.
   Jeśli nie znasz jego klasy, to linia NIE zaszkodzi (większość rodziców i tak ma position:relative). */
.trainers-carousel { position: relative !important; }

/* Maksymalna specyficzność + !important, żeby przebić wbudowane style */
button.trainers-carousel__nav.trainers-carousel__nav--prev{
  position: absolute !important;
  top: 50% !important;
  left: 14px !important;                 /* dosunięcie od lewej krawędzi – zmień np. 8–20px */
  transform: translateY(-50%) !important;/* zostaje idealnie w pionowym środku */
  z-index: 5 !important;
}

button.trainers-carousel__nav.trainers-carousel__nav--next{
  position: absolute !important;
  top: 50% !important;
  right: 14px !important;                /* dosunięcie od prawej krawędzi */
  transform: translateY(-50%) !important;
  z-index: 5 !important;
}

/* Opcjonalnie ciaśniej na mobile */
@media (max-width:640px){
  button.trainers-carousel__nav.trainers-carousel__nav--prev{ left: 10px !important; }
  button.trainers-carousel__nav.trainers-carousel__nav--next{ right: 10px !important; }
}






/* Dosuń strzałki jeszcze bliżej krawędzi */
button.trainers-carousel__nav.trainers-carousel__nav--prev{
  position: absolute !important;
  top: 50% !important;
  left: 24px !important;                  /* było 14px */
  transform: translateY(-50%) !important;
  z-index: 5 !important;
}

button.trainers-carousel__nav.trainers-carousel__nav--next{
  position: absolute !important;
  top: 50% !important;
  right: 24px !important;                 /* było 14px */
  transform: translateY(-50%) !important;
  z-index: 5 !important;
}

/* Ciaśniej na mobile */
@media (max-width:640px){
  button.trainers-carousel__nav.trainers-carousel__nav--prev{ left: 4px !important; }
  button.trainers-carousel__nav.trainers-carousel__nav--next{ right: 4px !important; }
}

/* === Strona: Trening Indywidualny Piłkarski === */
.training-single .container { max-width: 1175px; margin: 0 auto; padding: 24px; }
.training-hero { text-align: center; padding-top: 24px; }
.training-title { margin: 0 0 8px; line-height: 1.2; }
.training-subtitle { opacity: .85; margin: 0; }
.training-content { padding: 16px 24px; }
.training-cta { text-align: center; padding: 24px 0 40px; }
.btn { display: inline-block; padding: 12px 20px; border-radius: 10px; text-decoration: none; }
.btn-primary { background: #111; color: #fff; }
.btn-primary:hover { filter: brightness(1.1); }
}














































































































































/* Kontener sekcji */
.ti-wrap { padding: 24px; }
.ti-grid {
  max-width: 1175px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px; /* przerwa dokładnie na środku */
}

/* Lewa: galeria */
.ti-gallery {
  display: grid;
  grid-template-columns: 96px 1fr; /* kolumna miniaturek + duża scena */
  column-gap: 16px;
  align-items: start;
}

.ti-thumbs { display: flex; flex-direction: column; gap: 16px; }
.ti-thumb {
  display: block; width: 84px; height: 84px;
  border: 2px solid transparent; border-radius: 12px;
  padding: 0; background: #f3f3f3; cursor: pointer;
  overflow: hidden;
}
.ti-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ti-thumb:is(:hover,:focus-visible) { border-color: #bbb; }
.ti-thumb.is-active { border-color: #000; transform: translateZ(0); }

.ti-stage {
  position: relative; border-radius: 16px; background: #f3f3f3;
  overflow: hidden; aspect-ratio: 4 / 5; /* stała proporcja pod zdjęcie */
  display: grid; place-items: center;
}
.ti-photo { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .2s ease; }
.ti-photo.is-visible { opacity: 1; }

.ti-nav { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 12px; }
.ti-nav button {
  width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.12);
  cursor: pointer; font-size: 20px; line-height: 40px;
}
.ti-nav button:hover { filter: brightness(1.05); }

/* Prawa: treści */
.ti-details { align-self: start; }
.ti-overline { margin: 0 0 6px; font-size: 14px; opacity: .8; }
.ti-title { margin: 0 0 8px; line-height: 1.2; }
.ti-lead { margin: 0 0 16px; font-size: 18px; opacity: .95; }
.ti-body p { margin: 0 0 14px; }
.ti-note { opacity: .9; }

/* Responsywność */
@media (max-width: 1199px) {
  .ti-grid { gap: 32px; }
}
@media (max-width: 767px) {
  .ti-grid { grid-template-columns: 1fr; gap: 24px; }
  .ti-gallery { grid-template-columns: 80px 1fr; }
  .ti-thumb { width: 72px; height: 72px; }
}

/* Odstęp nad sekcją "TI" */
.ti-wrap { margin-top: 10px; }            /* domyślnie */
@media (min-width: 1200px) { .ti-wrap { margin-top: 10px; } }  /* desktop */
@media (max-width: 767px)  { .ti-wrap { margin-top: 32px; } }  /* mobile */
}

/* Mniejsze zaokrąglenia */
.ti-stage { border-radius: 6px; }   /* było 16px */
.ti-thumb { border-radius: 6px; }   /* było 12px */
}

/* 1) Zaokrąglenie kontenera + cięcie zawartości */
main .ti-grid .ti-gallery .ti-stage{
  border-radius: 6px !important;
  overflow: hidden !important;
}

/* 2) Wymuś zaokrąglenie na obrazie (jeśli ma własne style) */
main .ti-grid .ti-gallery .ti-stage > img,
main .ti-grid .ti-gallery .ti-stage > .ti-photo{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  border-radius: inherit !important;
}

/* 3) „Pancerne” przycięcie – działa nawet gdy coś psuje overflow/border-radius */
@supports (clip-path: inset(0 round 6px)){
  main .ti-grid .ti-gallery .ti-stage > img,
  main .ti-grid .ti-gallery .ti-stage > .ti-photo{
    border-radius: 0 !important;
    clip-path: inset(0 round 6px) !important;
  }
}

/* Miniatury bez otoczek + przyciemnienie na hover/active */
.ti-gallery .ti-thumb{
  position: relative;
  border: 0 !important;               /* usuń obramowanie */
  outline: none;                      /* usuń domyślny focus */
  transform: none !important;         /* wyłącz wcześniejsze skalowanie itd. */
}

/* Zneutralizuj stare reguły obramowania (jeśli były) */
.ti-gallery .ti-thumb:is(:hover, :focus-visible),
.ti-gallery .ti-thumb.is-active{
  border-color: transparent !important;
}

/* Nakładka przyciemniająca */
.ti-gallery .ti-thumb::after{
  content: "";
  position: absolute; inset: 0;
  background: rgba(0,0,0,0);          /* domyślnie brak */
  transition: background .18s ease;
  pointer-events: none;               /* nie blokuje klików */
  border-radius: inherit;             /* dopasuj do zaokrągleń miniatury */
}

/* Hover i focus – lekkie przyciemnienie */
.ti-gallery .ti-thumb:hover::after,
.ti-gallery .ti-thumb:focus-visible::after{
  background: rgba(0,0,0,.18);
}

/* Miniatura aktywna – mocniejsze przyciemnienie */
.ti-gallery .ti-thumb.is-active::after{
  background: rgba(0,0,0,.28);
}

/* Obrazek bez zmian, tylko upewnij się że wypełnia kafelek */
.ti-gallery .ti-thumb img{
  display:block; width:100%; height:100%; object-fit:cover;
}

/* Overline – delikatnie większy i grubszy */
.ti-details .ti-overline{
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .01em;
}

@media (max-width: 767px){
  .ti-details .ti-overline{ font-size: 15px; }
}

.ti-details .ti-overline{
  color: #4b5563; /* ciemniejszy szary */
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .01em;
}

/* Większe strzałki w nawigacji galerii */
.ti-gallery .ti-nav .ti-prev,
.ti-gallery .ti-nav .ti-next{
  font-size: 28px;        /* było ~20px */
  font-weight: 500;       /* wyraźniejszy „grotszy” glif */
  line-height: 40px;      /* zostaw jak rozmiar koła, żeby było wycentrowane */
}

/* Przesunięcie strzałek wewnątrz kółek – tylko glif, nie guzik */
.ti-gallery .ti-nav .ti-prev,
.ti-gallery .ti-nav .ti-next{
  position: relative;
  color: transparent;              /* ukryj oryginalny glif */
}

.ti-gallery .ti-nav .ti-prev::after,
.ti-gallery .ti-nav .ti-next::after{
  content: attr(data-arrow);       /* wstawimy glif z atrybutu lub nadpisz poniżej */
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-size: inherit;
  font-weight: 500;
  transform: translateY(-2px);     /* <<< lekko w górę; zmień na -1/-3 px wg uznania */
}

/* Jeśli nie używasz data-arrow – jawnie ustaw znaki: */
.ti-gallery .ti-nav .ti-prev::after{ content: "‹"; }
.ti-gallery .ti-nav .ti-next::after{ content: "›"; }
}

/* --- CTA: Do koszyka --- */
.ti-buy { margin: 16px 0 20px; }
.ti-btn-cart{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; width:100%; height:56px; padding:0 22px;
  background:#0f0f0f; color:#fff; text-decoration:none;
  border-radius:9999px; font-weight:700; font-size:18px;
  box-shadow:0 2px 0 rgba(0,0,0,.12) inset;
}
.ti-btn-cart:hover{ filter:brightness(1.08); }
.ti-icon-cart{ width:22px; height:22px; fill:currentColor; }

/* --- Szybkie odnośniki --- */
.ti-quicklinks{ margin-top:14px; }
.ti-qitem{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:18px 4px; color:inherit; text-decoration:none;
}
.ti-qitem + .ti-qitem{ border-top:1px solid rgba(0,0,0,.08); }
.ti-qitem:hover{ color:#111; }
.ti-chevron{ width:20px; height:20px; stroke:#111; stroke-width:2; fill:none; }

/* Dark header/ciemne tło – dopasowanie koloru linii (opcjonalnie) */
@media (prefers-color-scheme: dark){
  .ti-qitem + .ti-qitem{ border-top-color: rgba(255,255,255,.08); }
  .ti-chevron{ stroke:#e5e7eb; }
}

/* Kotwice – zachowaj odstęp pod sticky header (skoryguj jeśli masz inny header) */
.ti-anchor-offset{ scroll-margin-top: 96px; }  /* dodamy tę klasę JS-em do celów */
}

/* Sekcje docelowe – kontener 1175 px */
.ti-section{
  max-width:1175px;
  margin:64px auto;
  padding:24px;
}
.ti-section__head h2{
  margin:0 0 6px;
  line-height:1.2;
}
.ti-section__lead{
  margin:0 0 16px;
  opacity:.9;
}
.ti-slots{ margin:0; padding-left:20px; }
.ti-slots li{ margin:8px 0; }

/* Gładkie przewijanie: kompensacja sticky headera */
.ti-anchor-offset{ scroll-margin-top:96px; } /* dostosuj do wysokości nagłówka */

/* Drobny separator między sekcjami (opcjonalnie) */
.ti-section + .ti-section{ border-top:1px solid rgba(0,0,0,.08); padding-top:32px; }
@media (max-width:767px){
  .ti-section{ margin:40px auto; padding:20px; }
}

/* Mocniejsze przyciemnienie miniaturek */
.ti-gallery .ti-thumb:hover::after,
.ti-gallery .ti-thumb:focus-visible::after{
  background: rgba(0,0,0,.26); /* było .18 */
}

.ti-gallery .ti-thumb.is-active::after{
  background: rgba(0,0,0,.42); /* było .28 */
}

/* Styl jak na zrzucie: rzędy z liniami i małą strzałką */
.ti-quicklinks{
  margin-top: 18px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.ti-qitem{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding: 18px 0;
  text-decoration:none;
  color:#111;
  font-weight: 700;              /* grubszy tytuł */
  font-size: 18px;
}

.ti-qitem + .ti-qitem{
  border-top: 1px solid rgba(0,0,0,.08); /* cienka linia między wierszami */
}

/* Mała, delikatna strzałka w dół po prawej */
.ti-qitem .ti-chevron{
  width: 18px; height: 18px;
  stroke: #111; stroke-width: 2; fill: none;
  opacity: .7;
  flex: 0 0 auto;
}

/* Subtelny hover – jak w sklepowych listach */
.ti-qitem:hover{ color:#0f0f0f; }
.ti-qitem:hover .ti-chevron{ opacity: 1; }

/* Ciemny motyw (jeśli używasz) */
@media (prefers-color-scheme: dark){
  .ti-quicklinks{ border-top-color: rgba(255,255,255,.08); }
  .ti-qitem{ color:#e5e7eb; }
  .ti-qitem + .ti-qitem{ border-top-color: rgba(255,255,255,.08); }
  .ti-qitem .ti-chevron{ stroke:#e5e7eb; opacity:.8; }
}

/* Strzałeczki po prawej w wierszach linków */
.ti-quicklinks { border-top: 1px solid rgba(0,0,0,.08); }

.ti-qitem{
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0;                 /* odstęp pionowy */
  text-decoration: none; color: #111; font-weight: 700; font-size: 18px;
}

.ti-qitem + .ti-qitem{ border-top: 1px solid rgba(0,0,0,.08); }

/* Ikonka strzałki (chevron w dół) dodana pseudo-elementem */
.ti-qitem::after{
  content: "";
  position: absolute; right: 0; top: 50%;
  width: 20px; height: 20px; transform: translateY(-50%);
  background: no-repeat center / 18px 18px;
  /* SVG jako data URI – cienka, ciemnoszara strzałka */
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M6 9l6 6 6-6' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>");
  opacity: .85;
}

.ti-qitem:hover::after{ opacity: 1; }
}

/* 1) Jeśli w HTML są ikony <svg class="ti-chevron"> – ukryj je */
.ti-details .ti-quicklinks .ti-chevron{ display:none !important; }

/* 2) Strzałka jako pseudo-element – większa, zawsze na wierzchu */
.ti-details .ti-quicklinks a.ti-qitem::after{
  content:"";
  position:absolute;
  right:0; top:50%;
  width:28px !important;
  height:28px !important;
  margin-top:-14px !important;              /* centrowanie w pionie */
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:26px 26px !important;     /* <<< rozmiar strzałki */
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M6 9l6 6 6-6' fill='none' stroke='%23222326' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>") !important;
  z-index:1;
}

/* 1) Schowaj ewentualne SVG w HTML (białe strzałki) */
.ti-quicklinks .ti-chevron,
.ti-quicklinks a.ti-qitem svg{
  display: none !important;
}

/* 2) Gdyby motyw dodawał własną ikonę pseudo-elementem */
.ti-quicklinks .ti-qitem::before{
  content: none !important;
  background: none !important;
}

/* 3) Zostawiamy JEDNĄ, czarną strzałkę z ::after (jeśli już masz – nic nie zmieniaj).
   Dla pewności – finalna definicja: */
.ti-quicklinks a.ti-qitem::after{
  content:"";
  position:absolute; right:0; top:50%; margin-top:-14px;
  width:28px; height:28px;
  background:no-repeat center/26px 26px;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M6 9l6 6 6-6' fill='none' stroke='%23222326' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>");
}

/* Usuń górną linię nad pierwszym wierszem */
.ti-quicklinks{ border-top: 0 !important; }

/* Na wszelki wypadek: jeśli linia była na pierwszym elemencie */
.ti-quicklinks .ti-qitem:first-child{
  border-top: 0 !important;
}

/* Jaśniejsze tło + wymuszona, powolna animacja */
.ti-details .ti-buy .ti-btn-cart{
  background: #111 !important;              /* bazowy */
  background-color: #111 !important;
  filter: none !important;                   /* wyłącz wcześniejsze filtry */
  transition: background-color 900ms ease !important;
}

.ti-details .ti-buy .ti-btn-cart:hover,
.ti-details .ti-buy .ti-btn-cart:focus-visible{
  background: #7a7a7a !important;           /* wyraźnie JAŚNIEJSZY */
  background-color: #7a7a7a !important;
}

.ti-details .ti-buy .ti-btn-cart:active{
  background: #6a6a6a !important;           /* odcień przy kliknięciu */
  background-color: #6a6a6a !important;
}

/* Dla przeglądarek z ograniczonym ruchem – zachowaj domyślne */
@media (prefers-reduced-motion: reduce){
  .ti-details .ti-buy .ti-btn-cart{ transition: none !important; }
}

/* Linia ceny – duża kwota, subtelna jednostka */
.ti-details .ti-price{
  display:flex; align-items:baseline; gap:10px;
  margin: 10px 0 14px;
  line-height:1;
  font-variant-numeric: lining-nums tabular-nums;
}

.ti-details .ti-price__amount{
  font-size: 34px;          /* wyraźnie większa liczba */
  font-weight: 900;
  letter-spacing: -0.2px;
}

.ti-details .ti-price__currency{
  font-size: 20px;           /* mniejsza waluta */
  font-weight: 800;
  margin-left: 4px;
  position: relative; top: 2px; /* delikatne dosunięcie do baseline */
  opacity: .95;
}

.ti-details .ti-price__sep{
  color: #9ca3af;            /* dyskretny ukośnik */
  font-weight: 600;
}

.ti-details .ti-price__unit{
  color: #4b5563;            /* ciemnoszary jak w overline */
  font-weight: 700;
  font-size: 18px;
}

@media (max-width: 767px){
  .ti-details .ti-price__amount{ font-size: 30px; }
  .ti-details .ti-price__currency{ font-size: 18px; top: 1px; }
  .ti-details .ti-price__unit{ font-size: 16px; }
}

/* Mniejsza, schludna cena */
.ti-details .ti-price{
  gap: 8px;
  margin: 6px 0 12px;
  line-height: 1.1;
}

.ti-details .ti-price__amount{
  font-size: 26px;   /* było 34px */
  font-weight: 800;
  letter-spacing: -0.1px;
}

.ti-details .ti-price__currency{
  font-size: 16px;   /* było 20px */
  font-weight: 700;
  top: 1px;
  opacity: .95;
  position: relative;
}

.ti-details .ti-price__sep{
  color: #9ca3af;
  font-weight: 600;
}

.ti-details .ti-price__unit{
  font-size: 16px;   /* spójne z walutą */
  font-weight: 700;
  color: #4b5563;
}

/* Mobilnie jeszcze odrobinę mniejsze */
@media (max-width: 767px){
  .ti-details .ti-price__amount{ font-size: 24px; }
  .ti-details .ti-price__currency,
  .ti-details .ti-price__unit{ font-size: 15px; }
}

/* Delikatniejsze wagi dla ceny */
.ti-details .ti-price__amount{   /* 199 */
  font-weight: 700;              /* było 800–900 */
}

.ti-details .ti-price__currency{ /* zł */
  font-weight: 600;              /* było ~700–800 */
}

.ti-details .ti-price__unit{     /* / 75 min */
  font-weight: 600;              /* było 700 */
}

/* Jeśli nadal za grubo – użyj tego wariantu: */
/*
.ti-details .ti-price__amount{ font-weight: 600; }
.ti-details .ti-price__currency,
.ti-details .ti-price__unit{ font-weight: 500; }
*/

/* 1) Kolumny w tym samym wierszu mają mieć równą wysokość */
.ti-grid{ align-items: stretch; }        /* nadpisuje wcześniejsze start */

/* 2) Prawa kolumna jako kolumna flex o pełnej wysokości wiersza */
.ti-details{
  display: flex;
  flex-direction: column;
  align-self: stretch;                    /* nie skracaj kolumny */
}

/* 3) „Przyklej” część z przyciskiem na dół,
      quicklinks zostaną tuż pod nim */
.ti-details > .ti-buy{ margin-top: auto; }

/* odstęp między przyciskiem a wierszami linków */
.ti-details .ti-quicklinks{ margin-top: 12px; }

/* (opcjonalnie) na mobile nie „przyklejaj” */
@media (max-width: 767px){
  .ti-details > .ti-buy{ margin-top: 16px; }
}

/* Mocniejsze przyciemnienie miniaturek */
.ti-gallery .ti-thumb::after{
  transition: background .2s ease;
}

.ti-gallery .ti-thumb:hover::after,
.ti-gallery .ti-thumb:focus-visible::after{
  background: rgba(0,0,0,.34) !important; /* było jaśniej */
}

.ti-gallery .ti-thumb.is-active::after{
  background: rgba(0,0,0,.50) !important; /* aktywna – ciemniej */
}

/* Prawa strzałka – możliwość przesunięcia w osi X i Y */
.ti-gallery .ti-nav .ti-next{
  --ti-next-shift-x: 1px;   /* + w prawo / – w lewo */
  --ti-next-shift-y: -2px;   /* – w górę  / + w dół  */
  position: relative;
  color: transparent;
}

.ti-gallery .ti-nav .ti-next::after{
  content: "›";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  transform: translate(var(--ti-next-shift-x), var(--ti-next-shift-y));
}




/* Lewa strzałka – przesunięcie w osi X/Y sterowane zmiennymi */
.ti-gallery .ti-nav .ti-prev{
  --ti-prev-shift-x: -1px;  /* – w lewo / + w prawo */
  --ti-prev-shift-y: -2px;   /* – w górę / + w dół  */
  position: relative;
  color: transparent;       /* ukryj oryginalny glif */
}

.ti-gallery .ti-nav .ti-prev::after{
  content: "‹";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  transform: translate(var(--ti-prev-shift-x), var(--ti-prev-shift-y));
}

/* Przesunięcie strzałek w dół o 2px – tylko ikona, bez tekstu */
.ti-quicklinks .ti-qitem::after{
  transform: translateY(1px);
}


/* Sekcja 3 zdjęć – w 1175 px */
.ti-showcase{ padding-top: 8px; } /* dopasuj do reszty */
.ti-showcase .ti-tiles{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Kafle: idealny kwadrat */
.ti-showcase .ti-tile{
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  background: #eee;
  display: block;
}
.ti-showcase .ti-tile img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .35s ease;
}
.ti-showcase .ti-tile:hover img{ transform: scale(1.03); }

/* Responsywność */
@media (max-width: 1024px){
  .ti-showcase .ti-tiles{ gap: 20px; }
}
@media (max-width: 767px){
  .ti-showcase .ti-tiles{ grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 480px){
  .ti-showcase .ti-tiles{ grid-template-columns: 1fr; }
}

/* Wyśrodkowanie nagłówka i opisu w sekcji 3 zdjęć */
.ti-showcase .ti-section__head{
  text-align: center;
}
.ti-showcase .ti-section__head h2{
  margin: 0 0 6px;
}
.ti-showcase .ti-section__lead{
  margin: 0 auto 20px;
  max-width: 720px;   /* lepsza czytelność dłuższego opisu */
  line-height: 1.5;
}

/* Showcase – opis jako ciemnoszary, semibold, wyśrodkowany */
.ti-showcase .ti-section__lead{
  color: #4b5563;        /* ciemny szary */
  font-weight: 600;      /* lekko pogrubiony */
  font-size: 16px;
  letter-spacing: .01em;
}

/* === Sekcja 3 zdjęć – większe kafle === */

/* mniejszy padding w tej sekcji -> więcej miejsca na zdjęcia */
.ti-showcase{
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* mniejszy odstęp między kaflami -> kafle rosną */
.ti-showcase .ti-tiles{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px !important;     /* było 24px; możesz zejść do 12px */
}

/* kwadraty jak były */
.ti-showcase .ti-tile{
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
}
.ti-showcase .ti-tile img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* responsywność bez zmian (opcjonalnie) */
@media (max-width: 767px){
  .ti-showcase .ti-tiles{ grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 480px){
  .ti-showcase .ti-tiles{ grid-template-columns: 1fr; }
}

/* Subtelnie mniejsze kwadraty w 3-kolumnowej siatce */
.ti-showcase .ti-tiles{ grid-template-columns: repeat(3, 1fr); }

.ti-showcase .ti-tile{
  width: 94% !important;          /* zmień na 93–96% wg uznania */
  justify-self: center !important; /* żeby kafel był wyśrodkowany w kolumnie */
  aspect-ratio: 1 / 1;             /* zachowaj kwadrat */
}

/* Wyłączenie „przybliżenia” na hover w sekcji 3 zdjęć */
.ti-showcase .ti-tile img{
  transform: none !important;
  transition: none !important;
}
.ti-showcase .ti-tile:hover img{
  transform: none !important;
}

/* Mini-karty parametrów (2 szt.) */
.ti-details .ti-params{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin: 8px 0 12px;
}

.ti-details .ti-param{
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,.045);            /* delikatne tło */
}

.ti-details .ti-param__icon{
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: rgba(0,0,0,.06);             /* kafelek pod ikonę */
  color: #111;
}
.ti-details .ti-param__icon svg{ width: 20px; height: 20px; }

.ti-details .ti-param__label{
  display: block;
  font-size: 12px; font-weight: 600;
  color: #6b7280;                           /* szarość jak w overline */
  letter-spacing: .02em;
  margin-bottom: 2px;
}
.ti-details .ti-param__value{
  font-size: 15px; font-weight: 700; color: #111;
}

/* Mobile: karty jedna pod drugą */
@media (max-width: 767px){
  .ti-details .ti-params{ grid-template-columns: 1fr; }
}

/* Dark mode (opcjonalnie) */
@media (prefers-color-scheme: dark){
  .ti-details .ti-param{ background: rgba(255,255,255,.06); }
  .ti-details .ti-param__icon{ background: rgba(255,255,255,.08); color:#e5e7eb; }
  .ti-details .ti-param__label{ color:#9ca3af; }
  .ti-details .ti-param__value{ color:#f3f4f6; }
}





/* === Parametry – wersja bardziej widoczna === */
.ti-details .ti-params{
  gap: 14px;
  margin: 10px 0 14px;
}

.ti-details .ti-param{
  --ti-accent: #111;                  /* zmień, jeśli masz kolor marki */
  background: #fff;                   /* jasne tło na beżowym body */
  border: 1px solid rgba(0,0,0,.10);  /* subtelna ramka */
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  border-radius: 12px;
  padding: 12px 14px;
  grid-template-columns: 44px 1fr;    /* trochę większa ikona */
}

.ti-details .ti-param__icon{
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--ti-accent);
  color: #fff;                        /* ikona kontrastowa */
}
.ti-details .ti-param__icon svg{ width: 22px; height: 22px; }

.ti-details .ti-param__label{
  font-size: 13px;                    /* większa etykieta */
  color: #374151;                     /* ciemniejsza szarość */
  margin-bottom: 3px;
}

.ti-details .ti-param__value{
  font-size: 16px;                    /* większa wartość */
  font-weight: 700;
  color: #111;
}

/* Hover: lekka elevacja (opcjonalnie) */
.ti-details .ti-param:hover{
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  transform: translateY(-1px);
  transition: box-shadow .2s ease, transform .2s ease;
}

/* Dark mode (jeśli używasz) */
@media (prefers-color-scheme: dark){
  .ti-details .ti-param{
    background: #1f1f1f;
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
  }
  .ti-details .ti-param__label{ color:#cbd5e1; }
  .ti-details .ti-param__value{ color:#f8fafc; }
}

/* Parametry – wariant niższy/kompaktowy */
.ti-details .ti-params{ gap: 12px; }

.ti-details .ti-param{
  padding: 8px 12px;                 /* było 12px 14px */
  grid-template-columns: 38px 1fr;   /* było 44px 1fr */
  border-radius: 10px;
}

.ti-details .ti-param__icon{
  width: 38px; height: 38px;         /* było 44 */
}
.ti-details .ti-param__icon svg{
  width: 18px; height: 18px;         /* było 22 */
}

.ti-details .ti-param__label{
  font-size: 12px;                   /* było 13 */
  margin-bottom: 1px;                /* było 3px */
  line-height: 1.2;
}
.ti-details .ti-param__value{
  font-size: 15px;                   /* było 16 */
  line-height: 1.2;
}

/* Parametry – wariant bardzo kompaktowy */
.ti-details .ti-params{ gap: 10px; }

.ti-details .ti-param{
  padding: 6px 10px;              /* było 8–12 px */
  grid-template-columns: 34px 1fr;/* było 38–44 px */
  border-radius: 8px;
  box-shadow: 0 3px 8px rgba(0,0,0,.05); /* subtelniejszy cień */
}

.ti-details .ti-param__icon{
  width: 34px; height: 34px;      /* było 38–44 px */
  border-radius: 8px;
}
.ti-details .ti-param__icon svg{ width: 16px; height: 16px; } /* było 18–22 px */

.ti-details .ti-param__label{
  font-size: 11px;                /* było 12–13 px */
  margin-bottom: 0;
  letter-spacing: .01em;
  line-height: 1.2;
}
.ti-details .ti-param__value{
  font-size: 14px;                /* było 15–16 px */
  font-weight: 700;
  line-height: 1.2;
}

/* Jeśli używasz paska akcentu po lewej – dopasuj wysokość */
.ti-details .ti-param::before{
  top: 6px; bottom: 6px;          /* było 10px */
  width: 2px;                     /* było 3px */
}

/* Mniejszy margines NAD parametrami */
.ti-details .ti-params{
  margin-top: -2px !important;    /* ustaw wg potrzeb: 4–10px */
}

/* Mniejszy margines NAD ceną */
.ti-details .ti-price{
  margin-top: -2px !important;   /* ustaw 0–6 px wg potrzeb */
}

/* (opcjonalnie) skróć też odstęp pod leadem, który jest nad ceną */
.ti-details .ti-lead{
  margin-bottom: 2px !important;
}


/* Mniejszy margines pod listą quicklinków */
.ti-details .ti-quicklinks{
  margin-bottom: -9px !important;   /* było więcej */
}

/* Dokręć dolny padding tylko w ostatnim wierszu */
.ti-details .ti-quicklinks .ti-qitem:last-child{
  padding-bottom: 10px !important; /* zmień na 6–12 px wg uznania */
}

/* (opcjonalnie) gdy coś jeszcze zostawia przerwę poniżej */
.ti-details .ti-quicklinks + *{
  margin-top: 8px !important;      /* kontrola odstępu elementu po quicklinkach */
}

/* Grubsze obrysy ikon w .ti-param__icon */
.ti-details .ti-param__icon svg {
  width: 22px;            /* ew. +1–2px większa ikona */
  height: 22px;
  shape-rendering: geometricPrecision;
}

.ti-details .ti-param__icon svg path,
.ti-details .ti-param__icon svg circle,
.ti-details .ti-param__icon svg line,
.ti-details .ti-param__icon svg polyline {
  stroke-width: 2.8 !important;   /* było ~2; spróbuj 2.6–3.2 wg uznania */
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* === FAQ: styl jak na zrzucie (ramki, beżowe tło strony) === */
.faq__accordion{ max-width:1175px; margin:0 auto; }

.faq__item{
  background: transparent;                 /* bez wypełnienia */
  border: 2px solid #111;                  /* gruba ramka */
  border-radius: 14px;                     /* duże zaokrąglenie */
  overflow: hidden;                        /* kontrola zawartości */
}
.faq__item + .faq__item{ margin-top: 18px; }  /* odstęp między polami */

/* Nagłówek pytania */
.faq__header{
  width:100%;
  text-align:left;
  background: transparent;
  border:0;
  cursor:pointer;
  padding: 18px 22px;                      /* spory „oddech” */
  font-weight: 800;                        /* jak w podglądzie */
  font-size: 18px;
  color:#111;
  line-height:1.25;
}

/* Ukryj wcześniejsze strzałki (jeśli były) */
.faq__chev{ display:none !important; }

/* Panel odpowiedzi – bez tła, bez górnej linii, tylko wewnętrzny odstęp */
.faq__panel{
  max-height:0;
  overflow:hidden;
  transition:max-height .28s ease;
  padding: 0 22px 0;                       /* dopiero po otwarciu dostanie dół */
  background: transparent;
  border-top: 0;
}
.faq__panel p{
  margin: 6px 0 18px;                      /* lekki odstęp pod odpowiedzią */
  line-height: 1.55;
  font-weight: 600;                         /* półgrube jak w przykładzie */
  color:#4b4b4b;                            /* nieco jaśniejsze niż tytuł */
}

/* Stan otwarty – tylko wysokość (bez zmiany tła) */
.faq__header[aria-expanded="true"] + .faq__panel{
  padding-bottom: 18px;
}

/* Usuń linię nad sekcją FAQ */
.ti-section.faq,
#faq.ti-section{
  border-top: 0 !important;
  padding-top: 0 !important;   /* jeśli separator dodawał też dodatkowy padding */
}

/* Gdyby linia była pseudo-elementem motywu */
.ti-section.faq::before,
#faq.ti-section::before{
  content: none !important;
}

/* FAQ — węższe pola pytań/odpowiedzi */
.faq{ --faq-inner-width: 920px; }  /* ustaw 860–980 px wg uznania */

.faq .faq__accordion{
  max-width: var(--faq-inner-width) !important;
  margin: 0 auto !important;   /* wyśrodkuj */
}

/* Na mniejszych ekranach zostaw pełną szerokość */
@media (max-width: 1024px){
  .faq .faq__accordion{
    max-width: 100% !important;
    padding: 0 16px;           /* delikatne marginesy wewnętrzne */
  }
}




/* Chips – selektor typu treningu (jak rozmiary) */
.ti-details .ti-variants{
  display: flex; gap: 10px; flex-wrap: wrap;
  margin: 8px 0 10px;             /* ustaw wg uznania */
}

.ti-details .ti-chip{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 40px; padding: 0 14px;
  border-radius: 12px;
  border: 2px solid #1a1a1a;
  background: transparent;
  color: #111; font-weight: 700; font-size: 14px;
  text-decoration: none; cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.ti-details .ti-chip:hover,
.ti-details .ti-chip:focus-visible{
  border-color: #111; background: rgba(0,0,0,.06);
  outline: none;
}

/* Aktywna – nieklikalna, czytelny sygnał „jesteś tu” */
.ti-details .ti-chip.is-active{
  background: #111; color: #fff; border-color: #111;
  cursor: default; pointer-events: none;      /* nie klika */
  position: relative;
}
/* subtelny znacznik aktywności (ptaszek) – opcjonalnie */
.ti-details .ti-chip.is-active::before{
  content:""; width: 14px; height: 14px; margin-right: 8px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 7l-9 9-4-4' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    center/14px 14px no-repeat;
  mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 7l-9 9-4-4' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    center/14px 14px no-repeat;
}


/* Wspólny kolor „szary z animacji Do koszyka” */
:root{
  --cart-hover: #7a7a7a; /* ten sam, którego używasz na hover przycisku */
}

/* Aktywny chip = ten sam szary */
.ti-details .ti-variants .ti-chip.is-active{
  background: var(--cart-hover) !important;
  border-color: var(--cart-hover) !important;
  color: #fff !important;
}

/* (opcjonalnie) jeżeli masz znacznik ptaszka w aktywnym chipie */
.ti-details .ti-variants .ti-chip.is-active::before{
  background: currentColor; /* zostaje biały ptaszek */
}

/* ===== Koncepcja Treningu ===== */
.concept__head{ text-align:center; }
.concept__head h2{ margin:0 0 6px; }
.concept__lead{ margin:0 auto 20px; max-width:760px; color:#4b5563; font-weight:600; }

/* Kafle / tabs */
.concept-tabs{
  --card-radius: 16px;
  --card-border: rgba(0,0,0,.12);
  --card-hover: rgba(0,0,0,.04);
  --card-active: #fff;

  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 20px;
  counter-reset: concept-step;
}

.concept-card{
  position:relative;
  counter-increment: concept-step;

  display:block;
  padding: 18px 18px 18px 18px;
  text-align:left;
  background: var(--card-active);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  color:#111;

  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.concept-card:hover{ border-color:#111; box-shadow:0 6px 20px rgba(0,0,0,.06); }
.concept-card.is-active{ border-color:#111; box-shadow:0 8px 28px rgba(0,0,0,.10); }

.concept-card h3{
  margin: 8px 0 6px;
  font-size: 20px; font-weight: 800; line-height:1.2;
}
.concept-card p{
  margin:0; color:#6b7280; font-weight:600;
}

/* Ikona w kółku */
.concept-icon{
  width: 40px; height: 40px; border-radius: 999px;
  display:grid; place-items:center;
  background:#111; color:#fff;
}
.concept-icon svg{ width:22px; height:22px; stroke-width:2.25; }

/* Duży numer w prawym górnym rogu */
.concept-card::after{
  content: counter(concept-step, decimal-leading-zero);
  position:absolute; top: 8px; right: 12px;
  font-weight: 900;
  font-size: clamp(44px, 6vw, 96px);
  line-height:1;
  color: rgba(0,0,0,.06);
  pointer-events:none; user-select:none;
}
.concept-card:hover::after,
.concept-card.is-active::after{ color: rgba(0,0,0,.10); }

/* Panele treści */
.concept-panels{ margin-top: 18px; }
.concept-panel{
  display:none;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 18px;
}
.concept-panel.is-active{ display:block; animation: concept-fade .22s ease; }
@keyframes concept-fade { from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }

/* Responsywność */
@media (max-width: 1024px){
  .concept-tabs{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .concept-tabs{ grid-template-columns: 1fr; }
}

/* Dark mode (opcjonalnie) */
@media (prefers-color-scheme: dark){
  .concept-tabs{ --card-border: rgba(255,255,255,.14); --card-active:#1f1f1f; }
  .concept-card p{ color:#cbd5e1; }
  .concept-card::after{ color: rgba(255,255,255,.10); }
  .concept-card:hover::after, .concept-card.is-active::after{ color: rgba(255,255,255,.16); }
  .concept-panel{ background:#1b1b1b; border-color:rgba(255,255,255,.12); }
}

/* Koncepcja Treningu – panele bez tła/ramki */
.concept-panel{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;          /* jeśli chcesz zachować oddech, usuń tę linię */
}

/* Jeśli chcesz jednak delikatny odstęp od kart: */
.concept-panels{ margin-top: 14px; }
.concept-panel.is-active{ padding: 0 !important; }  /* zostaw bez wypełnienia */
}

/* Karty "Koncepcja Treningu" — ZAWSZE bez wypełnienia (tylko obramówka) */
.ti-section.concept .concept-card,
#koncepcja.ti-section .concept-card,
.ti-section.concept .concept-card:hover,
#koncepcja.ti-section .concept-card:hover,
.ti-section.concept .concept-card:focus-visible,
#koncepcja.ti-section .concept-card:focus-visible,
.ti-section.concept .concept-card:active,
#koncepcja.ti-section .concept-card:active,
.ti-section.concept .concept-card.is-active,
#koncepcja.ti-section .concept-card.is-active{
  background: transparent !important;
  background-color: transparent !important;
  -webkit-appearance: none;
  appearance: none;
  border: 2px solid #111 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Jeżeli wcześniej użyliśmy zmiennej tła — wyzeruj ją na kontenerze kart */
.ti-section.concept .concept-tabs{ --card-active: transparent !important; }
}

/* Koncepcja – węższe kafle w swoich kolumnach */
.ti-section.concept .concept-tabs{ grid-template-columns: repeat(3, 1fr); }

.ti-section.concept .concept-card{
  --card-shrink: 90%;            /* ustaw 90–97% wg uznania */
  width: var(--card-shrink) !important;
  justify-self: center !important; /* wyśrodkuj w kolumnie */
}


/* Koncepcja – czarne otoczki dla wszystkich kafli */
.ti-section.concept .concept-card,
.ti-section.concept .concept-card:hover,
.ti-section.concept .concept-card:focus-visible,
.ti-section.concept .concept-card.is-active{
  border: 2px solid #111 !important;
  background: transparent !important;  /* bez wypełnienia, jak ustalaliśmy */
  box-shadow: none !important;
}

/* Koncepcja – jaśniejsze szare obramowania */
:root{ --ti-gray-light: #9ca3af; } /* jaśniejszy szary */

.ti-section.concept .concept-card,
.ti-section.concept .concept-card:hover,
.ti-section.concept .concept-card:focus-visible,
.ti-section.concept .concept-card.is-active{
  border: 2px solid var(--ti-gray-light) !important;
}

/* Opcjonalnie: subtelne ściemnienie na hover (bez wypełnienia) */
.ti-section.concept .concept-card:hover{
  border-color: #6b7280 !important; /* o ton ciemniej przy najechaniu */
}

/* Aktywny kafel: tło = jak obramowanie (jaśniejszy szary) */
:root{ --ti-gray-light: #9ca3af; } /* ten sam, co dla ramek */

.ti-section.concept .concept-card.is-active{
  background: var(--ti-gray-light) !important;
  border-color: var(--ti-gray-light) !important;
  box-shadow: none !important;
}

/* Neutralne szarości (bez domieszki niebieskiego) */
:root{
  --ti-gray-neutral: #b3b3b3;    /* jasna szarość – ramka i tło aktywnego */
  --ti-gray-neutral-hover: #8e8e8e; /* odcień na hover */
}

/* Ramki wszystkich kafli – neutralny szary */
.ti-section.concept .concept-card,
.ti-section.concept .concept-card:hover,
.ti-section.concept .concept-card:focus-visible,
.ti-section.concept .concept-card.is-active{
  border: 2px solid var(--ti-gray-neutral) !important;
}

/* Subtelne ściemnienie ramki na hover (nadal bez wypełnienia) */
.ti-section.concept .concept-card:hover{
  border-color: var(--ti-gray-neutral-hover) !important;
}

/* Kafel aktywny: tło = ta sama neutralna szarość co ramka */
.ti-section.concept .concept-card.is-active{
  background: var(--ti-gray-neutral) !important;
  border-color: var(--ti-gray-neutral) !important;
  box-shadow: none !important;
}

/* Kontrast treści na aktywnym kaflu */
.ti-section.concept .concept-card.is-active h3{ color: #111 !important; }
.ti-section.concept .concept-card.is-active p{ color: #2f2f2f !important; }
}

/* Zmienna koloru (jeśli już masz, możesz pominąć) */
:root{ --ti-gray-neutral: #b3b3b3; }

/* Nieaktywne karty: grubszy kontur 3px */
.ti-section.concept .concept-card:not(.is-active){
  box-sizing: border-box;
  border: 3px solid var(--ti-gray-neutral) !important; /* pełne nadpisanie */
  padding: 17px !important; /* kompensacja +1px na każdej krawędzi (by nie rosła wysokość) */
}

/* Aktywna karta: zostaje cieńsza (2px) i z Twoim tłem */
.ti-section.concept .concept-card.is-active{
  border: 2px solid var(--ti-gray-neutral) !important;
  padding: 18px !important; /* pierwotne */
}

/* Hover/focus – nie zmieniaj grubości, tylko ewentualnie odcień */
.ti-section.concept .concept-card:not(.is-active):hover,
.ti-section.concept .concept-card:not(.is-active):focus-visible{
  border: 3px solid #8e8e8e !important; /* ciemniejszy o ton, grubość bez zmian */
}

/* Stała strefa na ikonę w każdym kaflu + reset marginesów nagłówka */
#koncepcja.ti-section .concept-card{
  /* położenie i rozmiar kółka/ikony — reguluj tylko te 4 zmienne */
  --icon-size: 40px;       /* średnica kółka */
  --icon-top: 14px;        /* od góry */
  --icon-left: 14px;       /* od lewej */
  --icon-gap-vert: 12px;   /* odstęp pod kółkiem do tytułu */

  position: relative;
  /* solidnie wymuszony padding-top = miejsce na kółko + odstęp */
  padding: calc(var(--icon-top) + var(--icon-size) + var(--icon-gap-vert))
           18px 18px 18px !important;
}

#koncepcja.ti-section .concept-icon{
  position: absolute !important;
  top: var(--icon-top) !important;
  left: var(--icon-left) !important;
  width: var(--icon-size) !important;
  height: var(--icon-size) !important;
  display: grid; place-items: center;
  border-radius: 999px;
  z-index: 1;
}

#koncepcja.ti-section .concept-card h3{
  margin-top: 0 !important;   /* żeby nie „wpychał” się pod ikonę */
}
#koncepcja.ti-section .concept-card p{
  margin-top: 4px;            /* delikatny oddech pod tytułem */
}

/* Koncepcja – ciemnoszare opisy w nieaktywnych kartach */
.ti-section.concept .concept-card:not(.is-active) p{
  color: #374151 !important;   /* ciemny szary */
  font-weight: 600;            /* jak dotychczas */
}

/* Koncepcja – kółko z ikoną w NIEaktywnych kartach */
.ti-section.concept .concept-card:not(.is-active) .concept-icon{
  background: rgba(0,0,0,.06) !important; /* lekko ciemniejsze od tła */
  color: #111 !important;                 /* czarna ikonka (stroke/fill) */
  transition: background .2s ease, color .2s ease;
}

/* (opcjonalnie) delikatny hover bez wypełniania całej karty */
.ti-section.concept .concept-card:not(.is-active):hover .concept-icon{
  background: rgba(0,0,0,.08) !important;
}

/* Dark mode – subtelne rozjaśnienie tła kółka, biała ikonka */
@media (prefers-color-scheme: dark){
  .ti-section.concept .concept-card:not(.is-active) .concept-icon{
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
  }
}

/* Koncepcja – czarne ikonki w NIEaktywnych kartach */
.ti-section.concept .concept-card:not(.is-active) .concept-icon{
  background: rgba(0,0,0,.06) !important; /* lekko ciemniejsze tło kółka */
  color: #000 !important;                 /* ikona = czarna */
  opacity: 1 !important;                  /* na wypadek globalnych wygaszeń */
}

/* Gdyby coś nadpisywało stroke/fill w SVG – dociśnij: */
.ti-section.concept .concept-card:not(.is-active) .concept-icon svg,
.ti-section.concept .concept-card:not(.is-active) .concept-icon svg *{
  stroke: #000 !important;
  fill: none; /* nasze ikony są line-icon; jeśli użyjesz wypełnionych, usuń tę linię */
}

/* Kolory aktywnego kafla i jego ikonki (łatwe do strojenia) */
:root{
  --concept-active-bg: #b3b3b3;      /* tło aktywnego kafla (jasny szary) */
  --concept-icon-active-bg: #9a9a9a; /* kółko ikony – ciemniejsze od kafla */
}

/* Aktywny kafel */
.ti-section.concept .concept-card.is-active{
  background: var(--concept-active-bg) !important;
  border-color: var(--concept-active-bg) !important;
  box-shadow: none !important;
}

/* Kółko + ikonka w aktywnym kaflu */
.ti-section.concept .concept-card.is-active .concept-icon{
  background: var(--concept-icon-active-bg) !important; /* odrobinę ciemniej */
  color: #000 !important;                                /* ikona czarna */
}

/* Wymuszenie czarnego stroke fill dla SVG w aktywnym kółku */
.ti-section.concept .concept-card.is-active .concept-icon svg,
.ti-section.concept .concept-card.is-active .concept-icon svg *{
  stroke: #000 !important;
  fill: none; /* jeśli użyjesz pełnych ikon, możesz usunąć tę linię */
}

/* Koncepcja – kompakt: ikona + tytuł w jednej linii, bez zmiany rozmiarów ikony */
#koncepcja.ti-section .concept-card{
  display: grid !important;
  grid-template-columns: auto 1fr;  /* [ikona] | [tytuł/opis] */
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 6px;
  padding: 12px 16px !important;    /* mniejsze oddechy = niższy kafel */
}

/* Ikona wraca do normalnego przepływu (nie absolutna) */
#koncepcja.ti-section .concept-card .concept-icon{
  position: static !important;
  align-self: center;     /* pionowe wyrównanie do tytułu */
  justify-self: start;
  /* brak zmian szer./wys. i stylu kółka/obramowania */
}

/* Tytuł obok ikony, w tej samej linii */
#koncepcja.ti-section .concept-card h3{
  grid-column: 2; grid-row: 1;
  margin: 0 !important;
  line-height: 1.2;
}

/* Opis pod tytułem */
#koncepcja.ti-section .concept-card p{
  grid-column: 2; grid-row: 2;
  margin: 0;
  line-height: 1.45;
}

/* Ikona zajmuje kolumnę 1, wiersz 1 */
#koncepcja.ti-section .concept-card .concept-icon{
  grid-column: 1; grid-row: 1;
}

/* Numer dekoracyjny minimalnie bliżej krawędzi (bez ingerencji w ikonę) */
#koncepcja.ti-section .concept-card::after{
  top: 6px; right: 10px;
}

/* Koncepcja – tytuł na środku względem ikony + lekkie opuszczenie */
#koncepcja.ti-section .concept-card{
  display: grid !important;
  grid-template-columns: auto 1fr;  /* ikona | treść */
  grid-template-rows: auto auto;    /* [ikona+tytuł] / [opis] */
  column-gap: 12px;
  row-gap: 6px;
  padding: 12px 16px !important;
}

#koncepcja.ti-section .concept-card .concept-icon{
  grid-column: 1; grid-row: 1;
  align-self: center;               /* ikona wyśrodkowana w pionie */
}

#koncepcja.ti-section .concept-card h3{
  grid-column: 2; grid-row: 1;
  margin: 0 !important;
  line-height: 1.2;
  align-self: center;               /* tytuł na środku względem ikony */
  --title-shift-y: 2px;             /* regulacja w dół/górę */
  transform: translateY(var(--title-shift-y));
}

#koncepcja.ti-section .concept-card p{
  grid-column: 2; grid-row: 2;
  margin: 0;
  line-height: 1.45;
}

/* Koncepcja – tytuł ciut wyżej */
#koncepcja.ti-section .concept-card h3{
  --title-shift-y: -0.5px;  /* było 2px w dół; teraz 1px w górę */
}

/* Koncepcja – przesuń tytuł (h3) delikatnie w prawo */
#koncepcja.ti-section .concept-card h3{
  --title-shift-x: 4px;                 /* zwiększ/zmniejsz: 4–8px */
  /* jeśli już masz przesunięcie w osi Y, nie tracimy go: */
  transform: translate(var(--title-shift-x), var(--title-shift-y, 0)) !important;
  justify-self: start;
  /* awaryjnie, gdyby coś nadpisywało transform: */
  padding-left: 0.001px; /* hack utrzymujący specyficzność bez realnej zmiany szerokości */
}

/* Koncepcja – opis na pełną szerokość kafla */
#koncepcja.ti-section .concept-card p{
  grid-column: 1 / -1;   /* zamiast tylko kolumny z tytułem */
  margin-left: 0;        /* usuń wcześniejsze przesunięcie w prawo */
  width: 100%;
}

/* Koncepcja – ciaśniejsze odstępy między blokami */
#koncepcja.ti-section .concept-tabs{
  gap: 2px !important;   /* było ~20–24px; ustaw wg uznania: 8–14px */
}

/* Węższe ekrany: jeszcze odrobinkę ciaśniej (gdy wchodzą 2 kolumny) */
@media (max-width: 1024px){
  #koncepcja.ti-section .concept-tabs{ gap: 10px !important; }
}
@media (max-width: 640px){
  #koncepcja.ti-section .concept-tabs{ gap: 8px !important; }
}

/* Koncepcja – podnieś cyfry 01/02/03 w prawym górnym rogu */
#koncepcja.ti-section .concept-card::after{
  top: -2.5px !important;     /* delikatnie wyżej; spróbuj -3px lub -4px jeśli chcesz mocniej */
}

/* FAQ – wyśrodkowanie tytułu i opisu */
.faq .faq__head{
  text-align: center;
}

.faq .faq__head h2{
  margin: 0 0 6px;
  line-height: 1.2;
}

.faq .faq__lead{
  margin: 0 auto 18px;      /* auto = wyśrodkowanie */
  max-width: 720px;         /* lepsza czytelność dłuższego opisu */
  line-height: 1.5;
}

/* FAQ – opis w stylu innych sekcji */
.faq .faq__lead{
  color: #4b5563;        /* ten sam ciemny szary */
  font-weight: 600;      /* lekko pogrubiony */
  font-size: 16px;
  letter-spacing: .01em;
  text-align: center;
  max-width: 720px;      /* czytelna szerokość akapitu */
  margin: 0 auto 20px;   /* wyśrodkowany, z odstępem pod spodem */
  line-height: 1.5;
}

/* FAQ – węższe bloki pytań */
.faq{
  --faq-inner-width: 880px; /* było ~920px; zmień na 860–900 px wg uznania */
}

.faq .faq__accordion{
  max-width: var(--faq-inner-width) !important;
  margin: 0 auto !important;
}

.faq__header.faq__link{ display:block; text-decoration:none; position:relative; padding-right:44px; }
.faq__header.faq__link:hover{ background:rgba(0,0,0,.03); }

/* Strzałka w prawo po prawej (spójna z chevronem) */
.faq__arrow{
  position:absolute; right:12px; top:50%; width:22px; height:22px; margin-top:-11px;
  background:no-repeat center/22px 22px;
  opacity:.9;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M9 6l6 6-6 6' fill='none' stroke='%23222326' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}


/* Większy odstęp nad tytułem sekcji FAQ */
#faq.ti-section{
  padding-top: 24px !important;   /* zmień np. na 32px, jeśli chcesz więcej */
}

/* Sekcja wariantów – lepsza czytelność i dostępność */
.ti-details .ti-variants{
  display:flex; gap:12px; flex-wrap:wrap;
  margin: 10px 0 12px;        /* minimalnie więcej powietrza */
}

/* Chip bazowy */
.ti-details .ti-chip{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 46px; height: 42px; padding: 0 16px;
  border-radius: 12px;
  border: 2px solid var(--ti-gray-neutral, #b3b3b3);
  background: transparent;
  color:#111; font-weight:700; font-size:14px;
  text-decoration:none; cursor:pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* Hover/focus – delikatnie, bez wypełniania */
.ti-details .ti-chip:hover,
.ti-details .ti-chip:focus-visible{
  border-color: #8e8e8e;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,0,0,.05);
}

/* Chip aktywny = jak ustalaliśmy: neutralny szary */
.ti-details .ti-chip.is-active{
  background: var(--concept-active-bg, #b3b3b3);
  border-color: var(--concept-active-bg, #b3b3b3);
  color:#111;
  cursor: default; pointer-events: none;
}

/* Chip-link do strony "Trening Personalny": strzałka po prawej */
.ti-details .ti-chip[href]{
  position: relative;
  padding-right: 34px;         /* miejsce na strzałkę */
}
.ti-details .ti-chip[href]::after{
  content:"";
  position:absolute; right:12px; top:50%; width:18px; height:18px; margin-top:-9px;
  background:no-repeat center/18px 18px;
  opacity:.9;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M9 6l6 6-6 6' fill='none' stroke='%23222326' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>");
}

/* Mobile: w jednej kolumnie – pełna szerokość dla wygodnego tapu */
@media (max-width: 640px){
  .ti-details .ti-variants{ gap:10px; }
  .ti-details .ti-chip{ flex:1 1 100%; justify-content:center; }
}

/* Upewnij się, że mamy wspólną zmienną koloru aktywnego */
:root{ --concept-active-bg: #b3b3b3; } /* podmień, jeśli używasz innego odcienia */

/* Hover/focus na chipie-linku = tło jak aktywny */
.ti-details .ti-variants .ti-chip[href]:hover,
.ti-details .ti-variants .ti-chip[href]:focus-visible{
  background: var(--concept-active-bg) !important;
  border-color: var(--concept-active-bg) !important;
  color: #111 !important;
  box-shadow: none !important;
  outline: none;
}

/* Jedno źródło koloru dla aktywnego chipa i hoveru */
:root{
  /* użyj dokładnie tego samego koloru co przy hoverze "Do koszyka" */
  --chip-active-bg: var(--cart-hover, #7a7a7a);
}

/* Aktywny chip (Trening Indywidualny) */
.ti-details .ti-variants .ti-chip.is-active{
  background: var(--chip-active-bg) !important;
  border-color: var(--chip-active-bg) !important;
  color: #fff !important;
}

/* Hover na linku (Trening Personalny) = identyczny kolor jak aktywny */
.ti-details .ti-variants .ti-chip[href]:hover,
.ti-details .ti-variants .ti-chip[href]:focus-visible{
  background: var(--chip-active-bg) !important;
  border-color: var(--chip-active-bg) !important;
  color: #fff !important;
  box-shadow: none !important;
  outline: none;
}

/* Strzałka w chipie-linku – biała przy hoverze */
.ti-details .ti-variants .ti-chip[href]:hover::after,
.ti-details .ti-variants .ti-chip[href]:focus-visible::after{
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M9 6l6 6-6 6' fill='none' stroke='white' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>");
}

/* Kolor bazowy + wolna animacja tylko dla chipa-linku (Trening Personalny) */
.ti-details .ti-variants .ti-chip[href]{
  background-color: transparent !important;         /* stan bazowy jawnie */
  border-color: var(--chip-active-bg, #7a7a7a);     /* ten sam obrys co aktywny */
  transition: background-color .6s ease !important,
              border-color .6s ease !important,
              color .6s ease !important;
  will-change: background-color, border-color, color;
}

/* Hover = dokładnie ten sam kolor co aktywny chip, ale z .6s przejściem */
.ti-details .ti-variants .ti-chip[href]:hover,
.ti-details .ti-variants .ti-chip[href]:focus-visible{
  background-color: var(--chip-active-bg, #7a7a7a) !important;
  border-color: var(--chip-active-bg, #7a7a7a) !important;
  color: #fff !important;
}

/* Dla spójności: aktywny chip też jawnie definiuje background-color */
.ti-details .ti-variants .ti-chip.is-active{
  background-color: var(--chip-active-bg, #7a7a7a) !important;
  border-color: var(--chip-active-bg, #7a7a7a) !important;
  color: #fff !important;
}

/* Ten sam kolor co aktywny chip */
:root{ --chip-active-bg: #7a7a7a; } /* podmień, jeśli masz inny */

/* STAN BAZOWY (jawnie background-color) + WOLNY TRANSITION */
.ti-details .ti-variants .ti-chip[href]{
  background-color: transparent !important;            /* ważne: nie 'background' */
  border-color: var(--chip-active-bg) !important;
  color: #111;
  transition-property: background-color, border-color, color;
  transition-duration: 0.9s;                           /* << spowolnienie */
  transition-timing-function: ease;                    /* możesz zmienić: ease-in-out */
}

/* HOVER = taki sam kolor jak aktywny chip, z animacją 0.9s */
.ti-details .ti-variants .ti-chip[href]:hover,
.ti-details .ti-variants .ti-chip[href]:focus-visible{
  background-color: var(--chip-active-bg) !important;  /* ważne: nie 'background' */
  border-color: var(--chip-active-bg) !important;
  color: #fff !important;
}

/* >>> Tylko tło ma się animować – tekst bez zmian <<< */
:root{ --chip-active-bg: #7a7a7a; } /* ten sam kolor co aktywny chip */
}


/* === STICKY BELKA „CENA + DO KOSZYKA” — TYLKO MOBILE === */

/* 0) Domyślnie ukryta (na desktopie i gdy media query nie zadziała) */
.ti-sticky-bar { display: none; }

/* 1) Telefony */
@media (max-width: 767px) {
  /* pokaż i przyklej do dołu ekranu */
  .ti-sticky-bar {
    display: flex !important;
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    z-index: 1000;

    align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: rgba(20,20,20,.96);
    color: #fff;
    border-top: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(6px);
  }

  /* typografia */
  .ti-sticky-bar__price {
    display: flex; align-items: baseline; gap: 6px;
    font-weight: 800; font-size: 18px; line-height: 1.1;
  }
  .ti-sticky-bar__unit { font-size: 12px; opacity: .8; font-weight: 600; }

  .ti-sticky-bar__btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 16px;
    border-radius: 999px;
    background: #fff; color: #111; text-decoration: none;
    font-weight: 800; line-height: 1;
  }

  /* rozmiar ikony — to rozwiązuje problem „wielkiej ikony” */
  .ti-sticky-bar svg,
  .ti-sticky-bar .ti-icon {
    width: 18px; height: 18px; flex: 0 0 auto;
  }

  /* zapas pod treść, by belka niczego nie zasłaniała */
  .site-main.training-single { 
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }
}

/* 2) Dla pewności – na >=768 px belka zawsze ukryta */
@media (min-width: 768px) {
  .ti-sticky-bar { display: none !important; }
}

/* iOS hairline fix dla sticky belki — tylko mobile */
@media (max-width: 767px) {
  .ti-sticky-bar {
    bottom: 0;
    /* bez zaokrągleń i z prawidłowym safe-area */
    border-radius: 0 !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
  /* fallback dla starszych iOS */
  @supports (padding: constant(safe-area-inset-bottom)) {
    .ti-sticky-bar {
      padding-bottom: calc(12px + constant(safe-area-inset-bottom));
    }
  }

  /* zniweluj 1px „szparę” iOS przy kompozycji warstw */
  .ti-sticky-bar {
    margin-bottom: -1px;                 /* dociśnij do samej krawędzi */
    -webkit-backface-visibility: hidden; /* wymuś compositing */
    transform: translateZ(0);
    will-change: transform;
    background-clip: padding-box;        /* bez „prześwitów” spod obramowania */
  }
  /* rozszerz tło belki pod spód (safe-area + 1px) */
  .ti-sticky-bar::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: calc(-1px - env(safe-area-inset-bottom));
    height: calc(1px + env(safe-area-inset-bottom));
    background: inherit;     /* ten sam kolor/blur co belka */
    pointer-events: none;
  }
}

@media (max-width: 767px) {
  .ti-sticky-bar__btn {
    flex: 0 1 auto;                 /* może rosnąć, ale nie zajmie całej belki */
    padding: 13px 20px;
    min-height: 44px;
    min-width: clamp(160px, 40vw, 210px);  /* elastycznie: 160–210 px, ok. 40% szer. */
    border-radius: 12px;             /* mniejsze zaokrąglenie */
    white-space: nowrap;
    justify-content: center;
  }
  .ti-sticky-bar { gap: 12px; }
  .ti-sticky-bar .ti-icon { width: 18px; height: 18px; }
}

@media (max-width: 767px) {
  /* Zamiast rozpychać na boki – zbij elementy razem po prawej */
  .ti-sticky-bar {
    justify-content: flex-end;   /* było: space-between */
    gap: 8px;                    /* globalny odstęp między ceną a przyciskiem */
  }

  /* Cena trzyma wymiar i nie rozpycha w lewo */
  .ti-sticky-bar__price {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;                    /* ciaśniej między kwotą, walutą i jednostką */
  }

  /* Opcjonalnie: odrobina bliżej jednostka czasu */
  .ti-sticky-bar__unit {
    margin-left: 2px;            /* było większe – teraz ciaśniej */
  }

  /* Przycisk – bez zmian szerokości z poprzedniego kroku */
  .ti-sticky-bar__btn {
    flex: 0 1 auto;
  }
}

@media (max-width: 767px) {
  /* delikatny margines między ceną a przyciskiem */
  .ti-sticky-bar__price {
    margin-inline-end: 20px;   /* możesz zmienić na 8px / 12px */
    gap: 4px;                   /* ciaśniej wewnątrz ceny */
  }
  /* jeśli używasz globalnego gap w .ti-sticky-bar, możesz go wyzerować,
     by kontrolować odstęp wyłącznie marginesem powyżej */
  /* .ti-sticky-bar { gap: 0; } */
}

@media (max-width: 767px) {
  /* wyraźnie większa cena i jednostka, z pewnym override */
  .ti-sticky-bar .ti-sticky-bar__amount {
    font-size: 26px !important;
    line-height: 1.05;
    font-weight: 800;
  }
  .ti-sticky-bar .ti-sticky-bar__currency {
    font-size: 16px !important;
    line-height: 1.1;
    font-weight: 700;
  }
  .ti-sticky-bar .ti-sticky-bar__unit {
    font-size: 16px !important;
    line-height: 1.1;
    font-weight: 600;
  }

  /* odrobina „powietrza” wewnątrz bloku ceny */
  .ti-sticky-bar .ti-sticky-bar__price { gap: 6px; }
}

@media (max-width: 767px) {
  .ti-gallery { display: none !important; }  /* ukryj starą galerię na mobile */
  .ti-gallery-mobile { display: block; }

  .ti-gallery-mobile .mg-stage { position: relative; overflow: hidden; border-radius: 18px; background:#e9e4da; aspect-ratio: 4/3; }
  .ti-gallery-mobile .mg-photo { width: 100%; height: 100%; object-fit: cover; display: block; }

  .ti-gallery-mobile .mg-dots { display:flex; justify-content:center; gap:10px; padding:10px 0 0; }
  .ti-gallery-mobile .mg-dot { width:8px; height:8px; border-radius:999px; background:#fff; opacity:.55; border:1px solid rgba(0,0,0,.25); }
  .ti-gallery-mobile .mg-dot.is-active { width:10px; height:10px; opacity:1; background:#111; border-color:#111; }
}
@media (min-width: 768px) { .ti-gallery-mobile { display: none !important; } }  /* desktop bez zmian */


/* MOBILE – kropki w stylu "pigułki" */
@media (max-width: 767px) {
  .ti-gallery-mobile .mg-dots{
    display:flex;
    justify-content:center;
    align-items:center;
    gap: 12px;                 /* odstęp między kropkami */
    padding: 12px 0 0;
  }

  /* Zmienne – łatwo dostosujesz rozmiary */
  .ti-gallery-mobile{ --dot: 8px; --dotActiveW: 28px; --dotColor: #111; --dotInactive: #9e9e9e; }

  .ti-gallery-mobile .mg-dot{
    position: relative;
    width: var(--dot);
    height: var(--dot);
    border-radius: 999px;
    background: var(--dotInactive);
    opacity: .9;
    border: 0;
    transition: width .25s ease, background-color .25s ease, opacity .25s ease;
  }

  /* aktywna = pigułka */
  .ti-gallery-mobile .mg-dot.is-active{
    width: var(--dotActiveW);
    height: var(--dot);
    background: var(--dotColor);
    opacity: 1;
  }

  /* większy obszar dotyku bez zmiany wizualnej */
  .ti-gallery-mobile .mg-dot::before{
    content:"";
    position:absolute; inset:-10px;  /* 10px hit-area */
  }

  /* preferencje dostępności */
  @media (prefers-reduced-motion: reduce){
    .ti-gallery-mobile .mg-dot{ transition: none; }
  }
}

/* MOBILE – kropki w stylu strony (pigułka aktywna) */
@media (max-width: 767px) {
  /* Kolory/rozmiary – możesz podregulować */
  .ti-gallery-mobile{
    --dot-h: 8px;                 /* wysokość kropki */
    --dot-w-active: 28px;         /* szerokość aktywnej „pigułki” */
    --dot-gap: 14px;              /* odstęp między kropkami */
    --dot-inactive: #d9d9d9;      /* jasna szarość jak na stronie */
    --dot-active: var(--accent, #25c9ff); /* akcent (fallback turkus jak na screenie) */
  }

  .ti-gallery-mobile .mg-dots{
    display:flex;
    justify-content:center;
    align-items:center;
    gap: var(--dot-gap);
    padding: 12px 0 0;
  }

  .ti-gallery-mobile .mg-dot{
    width: var(--dot-h);
    height: var(--dot-h);
    border-radius: 999px;
    background: var(--dot-inactive);
    border: 0;
    opacity: .95;
    transition: width .25s ease, background-color .25s ease, opacity .25s ease;
    position: relative;
  }

  /* aktywna = pigułka w kolorze akcentu */
  .ti-gallery-mobile .mg-dot.is-active{
    width: var(--dot-w-active);
    background: var(--dot-active);
    opacity: 1;
  }

  /* większa strefa dotyku bez wpływu na wygląd */
  .ti-gallery-mobile .mg-dot::before{
    content:"";
    position:absolute;
    inset:-10px;
  }

  @media (prefers-reduced-motion: reduce){
    .ti-gallery-mobile .mg-dot{ transition:none; }
  }
}

@media (max-width: 767px) {
  .ti-gallery-mobile{
    /* było #d9d9d9 – dajemy ciemniejszy szary */
    --dot-inactive: #888888;
  }
  /* jeśli chcesz jeszcze wyraźniej: odkomentuj jedną z poniższych wartości */
  /* .ti-gallery-mobile{ --dot-inactive: #888888; } */
  /* .ti-gallery-mobile{ --dot-inactive: #777777; } */
}


/* MOBILE – równe marginesy góra = boki, bez ucinania prawej krawędzi */
@media (max-width: 767px) {
  .ti-gallery-mobile{
    --gap: 12px; /* docelowy odstęp: nad zdjęciem i po bokach */
    box-sizing: border-box;

    /* szerokość = viewport - lewy/prawy gap - safe-area */
    width: min(
      100%,
      calc(100vw - (var(--gap) + env(safe-area-inset-left)) - (var(--gap) + env(safe-area-inset-right)))
    );

    margin-left: auto;
    margin-right: auto;

    /* zerujemy poprzednie ustawienia, jeśli były */
    padding: 0 !important;
    transform: none !important;
  }

  .ti-gallery-mobile .mg-stage{
    margin-top: var(--gap);      /* górny margines = boczne */
  }

  /* żeby kropki też wyrównywały się do „ramki” */
  .ti-gallery-mobile .mg-dots{
    padding-left: var(--gap);
    padding-right: var(--gap);
  }
}

/* MOBILE — usuń wyłącznie tło w nagłówku sekcji "Koncepcja" */
@media (max-width: 767px) {
  /* kontener sekcji (na wypadek tła na całej sekcji) */
  #koncepcja {
    background: transparent !important;
    background-image: none !important;
  }

  /* sam nagłówek z tytułem i opisem */
  #koncepcja .concept__head {
    background: transparent !important;
    background-image: none !important;
  }

  /* ewentualne pseudo-elementy rysujące tło */
  #koncepcja .concept__head::before,
  #koncepcja .concept__head::after {
    background: transparent !important;
    background-image: none !important;
  }
}

/* MOBILE — przyciski w #koncepcja na pełną szerokość viewportu */
@media (max-width: 767px) {
  #koncepcja .concept-tabs {
    --k-gap: 12px; /* odstęp między przyciskami i od krawędzi ekranu */
    display: flex !important;
    flex-direction: column;
    gap: var(--k-gap);

    /* full-bleed: wyjdź z paddingów rodzica i sięgnij do krawędzi ekranu */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: calc(var(--k-gap) + env(safe-area-inset-left));
    padding-right: calc(var(--k-gap) + env(safe-area-inset-right));
  }

  #koncepcja .concept-card {
    width: 100% !important;   /* każdy „przycisk” wypełnia całą ramkę */
    display: block;
    min-height: 48px;         /* wygodny tap target */
    /* bez zmian koloru/typografii */
  }
}

/* MOBILE — tytuł bliżej ikonki w #koncepcja */
@media (max-width: 767px) {
  /* ustawiamy układ karty w jednym wierszu: ikonka + tytuł, opis pod spodem */
  #koncepcja .concept-tabs .concept-card {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap;                 /* pozwala zwinąć opis do drugiego wiersza */
    gap: 6px !important;             /* odstęp między ikoną a tytułem */
    column-gap: 6px !important;      /* na wszelki wypadek */
    row-gap: 6px !important;
  }

  /* ZERO marginesów, które zwykle robią „odstęp” */
  #koncepcja .concept-tabs .concept-card .concept-icon {
    margin: 0 !important;
  }
  #koncepcja .concept-tabs .concept-card .concept-icon + h3 {
    margin: 0 !important;
    padding: 0 !important;           /* gdyby motyw dodawał padding po lewej */
  }
  #koncepcja .concept-tabs .concept-card h3 {
    margin: 0 !important;            /* zbicie domyślnych marginesów nagłówka */
  }

  /* opis zawsze w nowej linii, blisko tytułu */
  #koncepcja .concept-tabs .concept-card p {
    width: 100% !important;
    margin: 4px 0 0 !important;
  }
}

@media (max-width: 767px) {
  /* Tylko opis (p) w kartach, bez wpływu na tytuł */
  #koncepcja .concept-tabs .concept-card p {
    font-size: 16px !important;  /* delikatnie większy; zmień na 15/17px wg uznania */
    line-height: 1.4;
    margin-top: 4px;             /* zachowaj oddech po powiększeniu */
  }
}

/* MOBILE – przesunięcie opisów (p) w kartach #koncepcja w prawo */
@media (max-width: 767px) {
  /* Jedna zmienna do regulacji – domyślnie ~wyrównanie pod tytuł */
  #koncepcja .concept-tabs .concept-card { --desc-indent: 4px; } /* spróbuj 32–44px */

  #koncepcja .concept-tabs .concept-card p {
    padding-inline-start: var(--desc-indent) !important; /* przesunięcie w prawo */
    margin-top: 4px; /* zachowaj oddech po tytule */
  }
}


/* /trening-indywidualny-pilkarski – usuń linię nad tytułem w sekcji #koncepcja */
#koncepcja,
#koncepcja .concept__head,
#koncepcja .ti-section__head {
  border-top: 0 !important;
}
#koncepcja::before,
#koncepcja::after,
#koncepcja .concept__head::before,
#koncepcja .concept__head::after,
#koncepcja .ti-section__head::before,
#koncepcja .ti-section__head::after {
  content: none !important;
  display: none !important;
  height: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
/* gdyby motyw wstawił <hr> */
#koncepcja hr { display: none !important; }


/* /trening-indywidualny-pilkarski — usuń linię nad tytułem w sekcji #ti-showcase */
#ti-showcase,
#ti-showcase .ti-section__head {
  border-top: 0 !important;
}
#ti-showcase::before,
#ti-showcase::after,
#ti-showcase .ti-section__head::before,
#ti-showcase .ti-section__head::after {
  content: none !important;
  display: none !important;
  height: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
/* gdyby motyw wstawiał <hr> */
#ti-showcase hr { display: none !important; }


/* MOBILE – usuń wyłącznie tło w nagłówku sekcji FAQ (tytuł + opis) */
@media (max-width: 767px) {
  #faq .faq__head,
  #faq .faq__head *,
  #faq .faq__head::before,
  #faq .faq__head::after {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  /* jeśli motyw używa ogólnego .ti-section__head dla tego bloku */
  #faq .ti-section__head,
  #faq .ti-section__head *,
  #faq .ti-section__head::before,
  #faq .ti-section__head::after {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }
}














/* MOBILE — równe boczne marginesy i poszerzenie FAQ (tylko w poziomie) */
@media (max-width: 767px) {
  #faq .faq__accordion {
    --faq-gap: 12px; /* regulujesz szerokość bufora po bokach */

    box-sizing: border-box;
    /* szerokość = viewport - (bufor L+R + safe-area) */
    width: min(
      100%,
      calc(100vw - (var(--faq-gap) + env(safe-area-inset-left)) - (var(--faq-gap) + env(safe-area-inset-right)))
    ) !important;

    /* wycentruj i zresetuj wcześniejsze kombinacje z calc(50% - 50vw) */
    margin-left: auto !important;
    margin-right: auto !important;

    /* tylko boczne wcięcia (bez wpływu na wysokość) */
    padding-left: calc(var(--faq-gap) + env(safe-area-inset-left)) !important;
    padding-right: calc(var(--faq-gap) + env(safe-area-inset-right)) !important;
  }

  /* elementy wewnątrz dziedziczą pełną szerokość; wysokości bez zmian */
  #faq .faq__item,
  #faq .faq__header,
  #faq .faq__panel { width: 100% !important; }
}

/* MOBILE — jeszcze szerzej: ciaśniejsze boczne marginesy w FAQ */
@media (max-width: 767px) {
  /* wariant „prawie do krawędzi” */
  #faq .faq__accordion { --faq-gap: 6px; }
}

/* jeśli chcesz absolutne „edge-to-edge” (zostanie tylko safe-area) */
@media (max-width: 767px) {
  #faq .faq__accordion { --faq-gap: 0px; }
}




















































































































/* TYLKO strona "Nasza Oferta" (bo tylko ona ma #offer-why w main) */
@media (max-width: 767px) {
  .site-main:has(#offer-why) .page-nasza-oferta__banner {
    position: relative !important;
    height: 100px !important;        /* ustaw wysokość na mobile */
    overflow: hidden !important;
    margin-top: 2px !important;     /* odstęp pod headerem */
  }
  .site-main:has(#offer-why) .page-nasza-oferta__banner > img.page-nasza-oferta__banner-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  .site-main:has(#offer-why) .page-nasza-oferta__banner-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: transparent !important;
  }

  /* odstęp w kontenerze TYLKO na tej stronie */
  .site-main:has(#offer-why) { padding-top: 10px !important; }
}

/* MOBILE — tylko telefon: regulowane marginesy i szerokość banera /nasza-oferta/ */
@media (max-width: 767px) {
  .page-nasza-oferta__banner{
    /* USTAWIENIA (zmień wedle potrzeb) */
    --side-gap: 18px;                 /* marginesy boczne */
    --banner-width: calc(100vw - 2 * var(--side-gap)); /* albo np. 94vw */
    /* --banner-width: 94vw; */
    /* --banner-height: 300px; */     /* opcjonalnie: stała wysokość */

    position: relative;
    width: var(--banner-width);
    max-width: none;

    /* wycentrowanie względem okna */
    left: 50%;
    transform: translateX(-50%);

    /* bufor wewnętrzny = kontrola „marginesów” po bokach */
    padding-left: var(--side-gap);
    padding-right: var(--side-gap);

    overflow: hidden;
  }

  .page-nasza-oferta__banner-img{
    display: block;
    width: 100%;
    height: var(--banner-height, auto);
    object-fit: cover;
  }
}

/* (opcjonalne) iOS safe-area dla wycięć ekranu — nadal tylko mobile */
@media (max-width: 767px) and (padding: max(0px)) {
  .page-nasza-oferta__banner{
    padding-left: calc(var(--side-gap) + env(safe-area-inset-left));
    padding-right: calc(var(--side-gap) + env(safe-area-inset-right));
  }
}

/* MOBILE — większe zaokrąglenie banera /nasza-oferta/ */
@media (max-width: 767px) {
  .page-nasza-oferta__banner{
    --banner-radius: 18px;         /* ← zmień np. na 20px / 24px */
    border-radius: var(--banner-radius);
    overflow: hidden;              /* żeby obraz był też zaokrąglony */
  }
  .page-nasza-oferta__banner-img{
    border-radius: inherit;        /* dziedziczy promień z kontenera */
    display: block;
  }
}

/* MOBILE — zmniejszenie wysokości banera /nasza-oferta/ */
@media (max-width: 767px) {
  /* kontener banera */
  .page-nasza-oferta__banner,
  #primary .site-main .page-nasza-oferta__banner {
    --banner-height-mobile: 80px;        /* ← ZMIEŃ wg potrzeb: np. 220–300px */
    position: relative !important;
    height: var(--banner-height-mobile) !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  /* obraz wypełnia wysokość kontenera */
  .page-nasza-oferta__banner > img.page-nasza-oferta__banner-img,
  #primary .site-main .page-nasza-oferta__banner > img.page-nasza-oferta__banner-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;   /* kasuje ewentualne 16/9 */
    object-fit: cover !important;
    display: block !important;
  }
}

@media (max-width: 767px) {
  .page-nasza-oferta__banner-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 2px; /* reguluj 2–8px */
  }
  .page-nasza-oferta__banner-title {
    margin-bottom: 1px !important; /* było większe – teraz ciaśniej */
  }
  .page-nasza-oferta__banner-subtitle {
    margin-top: 0 !important;
  }
}



/* MOBILE – baner /nasze-obozy/ (max 767px) */
@media (max-width: 767px) {
  .page-nasze-obozy__banner{
    /* USTAWIENIA – możesz zmienić wg potrzeb */
    --side-gap: 18px;                                      /* marginesy boczne wewnątrz */
    --banner-width: calc(100vw - 2 * var(--side-gap));     /* szerokość względem okna */
    --banner-height-mobile: 80px;                          /* docelowa wysokość */
    --banner-radius: 18px;                                 /* zaokrąglenie rogów */

    position: relative !important;
    width: var(--banner-width) !important;
    height: var(--banner-height-mobile) !important;
    max-width: none !important;
    border-radius: var(--banner-radius) !important;
    overflow: hidden !important;

    /* wycentrowanie względem okna + bufor po bokach */
    left: 50% !important;
    transform: translateX(-50%) !important;
    padding: 0 var(--side-gap) !important;
  }

  /* obraz wypełnia kontener i dziedziczy zaokrąglenie */
  .page-nasze-obozy__banner > img.page-nasze-obozy__banner-img{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: inherit !important;
    aspect-ratio: auto !important; /* kasuje ewentualny ratio z motywu */
  }

  /* overlay z tytułem/podtytułem */
  .page-nasze-obozy__banner-overlay{
    position: absolute !important;
    inset: 0 !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    row-gap: 2px !important; /* 2–8px według preferencji */
  }
  .page-nasze-obozy__banner-title{ margin-bottom: 1px !important; }
  .page-nasze-obozy__banner-subtitle{ margin-top: 0 !important; }
}

/* iOS safe-area – wycięcia ekranu */
@media (max-width: 767px) and (padding: max(0px)) {
  .page-nasze-obozy__banner{
    padding-left: calc(var(--side-gap) + env(safe-area-inset-left)) !important;
    padding-right: calc(var(--side-gap) + env(safe-area-inset-right)) !important;
  }
}

/* (opcjonalnie) jeśli potrzebny jest dystans pod headerem TYLKO na tej stronie,
   odkomentuj właściwy selektor body i usuń drugi. */
/*
@media (max-width: 767px) {
  body.page-slug-nasze-obozy .site-main { padding-top: 10px !important; }
  body.page-slug-wydarzenia-bwt .site-main { padding-top: 10px !important; }
}
*/



/* MOBILE – baner /nasze-ubrania/ */
@media (max-width: 767px) {
  .page-nasze-ubrania__banner{
    /* USTAWIENIA – zmień wg potrzeb */
    --side-gap: 18px;                                      /* marginesy wewnętrzne po bokach */
    --banner-width: calc(100vw - 2 * var(--side-gap));     /* szerokość względem okna */
    --banner-height-mobile: 80px;                          /* docelowa wysokość */
    --banner-radius: 18px;                                 /* zaokrąglenie rogów */

    position: relative !important;
    width: var(--banner-width) !important;
    height: var(--banner-height-mobile) !important;
    max-width: none !important;
    border-radius: var(--banner-radius) !important;
    overflow: hidden !important;

    /* wycentrowanie względem okna + bufor po bokach */
    left: 50% !important;
    transform: translateX(-50%) !important;
    padding: 0 var(--side-gap) !important;
  }

  /* obraz wypełnia kontener i dziedziczy zaokrąglenie */
  .page-nasze-ubrania__banner > img.page-nasze-ubrania__banner-img{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: inherit !important;
    aspect-ratio: auto !important; /* kasuje ewentualny ratio z motywu */
  }

  /* overlay z tytułem i podtytułem */
  .page-nasze-ubrania__banner-overlay{
    position: absolute !important;
    inset: 0 !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    row-gap: 2px !important; /* 2–8px wg preferencji */
  }
  .page-nasze-ubrania__banner-title{ margin-bottom: 1px !important; }
  .page-nasze-ubrania__banner-subtitle{ margin-top: 0 !important; }
}

/* iOS safe-area – wycięcia ekranu */
@media (max-width: 767px) and (padding: max(0px)) {
  .page-nasze-ubrania__banner{
    padding-left: calc(var(--side-gap) + env(safe-area-inset-left)) !important;
    padding-right: calc(var(--side-gap) + env(safe-area-inset-right)) !important;
  }
}

/* (opcjonalnie) dystans pod headerem TYLKO na tej stronie – odkomentuj właściwy selektor */
/*
@media (max-width: 767px) {
  body.page-slug-nasze-ubrania .site-main { padding-top: 10px !important; }
  body.page-template-page-nasze-ubrania .site-main { padding-top: 10px !important; }
}
*/

/* MOBILE – odstęp NAD banerem, wewnątrz #primary (Nasze Ubrania) */
@media (max-width: 767px) {
  #primary.site-main:has(> .page-nasze-ubrania__banner)::before{
    content: "";
    display: block;
    height: 12px;            /* zmień na docelową wartość */
  }
}

/* MOBILE – baner /nasi-trenerzy/ */
@media (max-width: 767px) {
  .page-nasi-trenerzy__banner{
    /* USTAWIENIA – w razie potrzeby zmieniaj */
    --side-gap: 18px;                                      /* marginesy wewnętrzne po bokach */
    --banner-width: calc(100vw - 2 * var(--side-gap));     /* szerokość względem okna */
    --banner-height-mobile: 80px;                          /* docelowa wysokość */
    --banner-radius: 18px;                                 /* zaokrąglenie rogów */

    position: relative !important;
    width: var(--banner-width) !important;
    height: var(--banner-height-mobile) !important;
    max-width: none !important;
    border-radius: var(--banner-radius) !important;
    overflow: hidden !important;

    /* wycentrowanie względem okna + bufor po bokach */
    left: 50% !important;
    transform: translateX(-50%) !important;
    padding: 0 var(--side-gap) !important;
  }

  /* obraz wypełnia kontener i dziedziczy zaokrąglenie */
  .page-nasi-trenerzy__banner > img.page-nasi-trenerzy__banner-img{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: inherit !important;
    aspect-ratio: auto !important; /* kasuje ewentualny ratio z motywu */
  }

  /* overlay z tytułem/podtytułem */
  .page-nasi-trenerzy__banner-overlay{
    position: absolute !important;
    inset: 0 !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    row-gap: 2px !important; /* 2–8px wg preferencji */
  }
  .page-nasi-trenerzy__banner-title{ margin-bottom: 1px !important; }
  .page-nasi-trenerzy__banner-subtitle{ margin-top: 0 !important; }
}

/* iOS safe-area – wycięcia ekranu */
@media (max-width: 767px) and (padding: max(0px)) {
  .page-nasi-trenerzy__banner{
    padding-left: calc(var(--side-gap) + env(safe-area-inset-left)) !important;
    padding-right: calc(var(--side-gap) + env(safe-area-inset-right)) !important;
  }
}

/* MOBILE – „spacer” przed banerem WEWNĄTRZ #primary (bez wpływu na header) */
@media (max-width: 767px) {
  #primary.site-main:has(> .page-nasi-trenerzy__banner)::before{
    content: "";
    display: block;
    height: 12px; /* zmień na docelową wartość */
  }
}

/* MOBILE – baner /wspolpracuj-z-bwt/ */
@media (max-width: 767px) {
  .page-wspolpracuj-z-bwt__banner{
    /* USTAWIENIA – dostosuj w razie potrzeby */
    --side-gap: 18px;                                      /* marginesy wewnętrzne po bokach */
    --banner-width: calc(100vw - 2 * var(--side-gap));     /* szerokość względem okna */
    --banner-height-mobile: 80px;                          /* wysokość banera */
    --banner-radius: 18px;                                 /* zaokrąglenie rogów */

    position: relative !important;
    width: var(--banner-width) !important;
    height: var(--banner-height-mobile) !important;
    max-width: none !important;
    border-radius: var(--banner-radius) !important;
    overflow: hidden !important;

    /* wycentrowanie względem okna + bufor po bokach */
    left: 50% !important;
    transform: translateX(-50%) !important;
    padding: 0 var(--side-gap) !important;
  }

  /* obraz wypełnia kontener i dziedziczy zaokrąglenie */
  .page-wspolpracuj-z-bwt__banner > img.page-wspolpracuj-z-bwt__banner-img{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: inherit !important;
    aspect-ratio: auto !important; /* kasuje ewentualny ratio z motywu */
  }

  /* overlay z tytułem/podtytułem */
  .page-wspolpracuj-z-bwt__banner-overlay{
    position: absolute !important;
    inset: 0 !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    row-gap: 2px !important; /* 2–8px wg preferencji */
  }
  .page-wspolpracuj-z-bwt__banner-title{ margin-bottom: 1px !important; }
  .page-wspolpracuj-z-bwt__banner-subtitle{ margin-top: 0 !important; }
}

/* iOS safe-area – wycięcia ekranu */
@media (max-width: 767px) and (padding: max(0px)) {
  .page-wspolpracuj-z-bwt__banner{
    padding-left: calc(var(--side-gap) + env(safe-area-inset-left)) !important;
    padding-right: calc(var(--side-gap) + env(safe-area-inset-right)) !important;
  }
}

/* MOBILE – „spacer” przed banerem WEWNĄTRZ #primary (nie wpływa na header) */
@media (max-width: 767px) {
  #primary.site-main:has(.page-wspolpracuj-z-bwt__banner)::before{
    content: "";
    display: block;
    height: 12px; /* zmień na docelową wartość */
  }
}

/* MOBILE – baner /gdzie-trenujemy/ */
@media (max-width: 767px) {
  .page-gdzie-trenujemy__banner{
    /* Parametry do szybkiej regulacji */
    --side-gap: 18px;                                      /* marginesy wewnętrzne po bokach */
    --banner-width: calc(100vw - 2 * var(--side-gap));     /* szerokość względem okna */
    --banner-height-mobile: 80px;                          /* wysokość banera */
    --banner-radius: 18px;                                 /* zaokrąglenie rogów */

    position: relative !important;
    width: var(--banner-width) !important;
    height: var(--banner-height-mobile) !important;
    max-width: none !important;
    border-radius: var(--banner-radius) !important;
    overflow: hidden !important;

    /* wycentrowanie względem okna + bufor po bokach */
    left: 50% !important;
    transform: translateX(-50%) !important;
    padding: 0 var(--side-gap) !important;
  }

  /* obraz wypełnia kontener i dziedziczy zaokrąglenie */
  .page-gdzie-trenujemy__banner > img.page-gdzie-trenujemy__banner-img{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: inherit !important;
    aspect-ratio: auto !important; /* kasuje ewentualny ratio z motywu */
  }

  /* overlay z tytułem/podtytułem */
  .page-gdzie-trenujemy__banner-overlay{
    position: absolute !important;
    inset: 0 !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    row-gap: 2px !important; /* 2–8px wg preferencji */
  }
  .page-gdzie-trenujemy__banner-title{ margin-bottom: 1px !important; }
  .page-gdzie-trenujemy__banner-subtitle{ margin-top: 0 !important; }
}

/* iOS safe-area – wycięcia ekranu */
@media (max-width: 767px) and (padding: max(0px)) {
  .page-gdzie-trenujemy__banner{
    padding-left: calc(var(--side-gap) + env(safe-area-inset-left)) !important;
    padding-right: calc(var(--side-gap) + env(safe-area-inset-right)) !important;
  }
}

/* MOBILE – „spacer” przed banerem WEWNĄTRZ main.page-gdzie-trenujemy (nie wpływa na header) */
@media (max-width: 767px) {
  main.page-gdzie-trenujemy:has(.page-gdzie-trenujemy__banner)::before{
    content: "";
    display: block;
    height: 12px; /* zmień na docelową wartość */
  }
}

/* MOBILE – baner /o-nas/ */
@media (max-width: 767px) {
  .page-onas__banner{
    /* Parametry do regulacji */
    --side-gap: 18px;                                      /* marginesy wewnętrzne po bokach */
    --banner-width: calc(100vw - 2 * var(--side-gap));     /* szerokość względem okna */
    --banner-height-mobile: 80px;                          /* wysokość banera */
    --banner-radius: 18px;                                 /* zaokrąglenie rogów */

    position: relative !important;
    width: var(--banner-width) !important;
    height: var(--banner-height-mobile) !important;
    max-width: none !important;
    border-radius: var(--banner-radius) !important;
    overflow: hidden !important;

    /* wycentrowanie względem okna + bufor po bokach */
    left: 50% !important;
    transform: translateX(-50%) !important;
    padding: 0 var(--side-gap) !important;
  }

  /* obraz wypełnia kontener i dziedziczy zaokrąglenie */
  .page-onas__banner > img.page-onas__banner-img{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: inherit !important;
    aspect-ratio: auto !important; /* kasuje ewentualny ratio z motywu */
  }

  /* overlay – tytuł/podtytuł */
  .page-onas__banner-overlay{
    position: absolute !important;
    inset: 0 !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    row-gap: 2px !important; /* 2–8px według preferencji */
  }
  .page-onas__banner-title{ margin-bottom: 1px !important; }
  .page-onas__banner-subtitle{ margin-top: 0 !important; }
}

/* iOS safe-area – wycięcia ekranu */
@media (max-width: 767px) and (padding: max(0px)) {
  .page-onas__banner{
    padding-left: calc(var(--side-gap) + env(safe-area-inset-left)) !important;
    padding-right: calc(var(--side-gap) + env(safe-area-inset-right)) !important;
  }
}

/* MOBILE – „spacer” przed banerem WEWNĄTRZ main.site-main.page-onas (bez wpływu na header) */
@media (max-width: 767px) {
  main.site-main.page-onas:has(.page-onas__banner)::before{
    content: "";
    display: block;
    height: 12px; /* zmień na docelową wartość */
  }
}

/* MOBILE – odstęp nad banerem na stronie O nas */
@media (max-width: 767px) {
  .site-main.page-onas .content-container:has(> .page-onas__banner)::before{
    content: "";
    display: block;
    height: 60px; /* zmień wg potrzeby, np. 16px */
  }
}

/* Fallback, gdy :has nie jest wspierane */
@media (max-width: 767px) {
  @supports not (selector(:has(*))) {
    .site-main.page-onas .content-container{
      padding-top: 30px !important;
    }
    .site-main.page-onas .page-onas__banner{
      margin-top: 10px !important; /* wyłącza ewentualne kolapsowanie */
    }
  }
}

/* MOBILE – baner /faq/ */
@media (max-width: 767px) {
  .page-faq__banner{
    /* Parametry do regulacji */
    --side-gap: 18px;                                      /* marginesy wewnętrzne po bokach */
    --banner-width: calc(100vw - 2 * var(--side-gap));     /* szerokość względem okna */
    --banner-height-mobile: 80px;                          /* wysokość banera */
    --banner-radius: 18px;                                 /* zaokrąglenie rogów */

    position: relative !important;
    width: var(--banner-width) !important;
    height: var(--banner-height-mobile) !important;
    max-width: none !important;
    border-radius: var(--banner-radius) !important;
    overflow: hidden !important;

    /* wycentrowanie względem okna + bufor po bokach */
    left: 50% !important;
    transform: translateX(-50%) !important;
    padding: 0 var(--side-gap) !important;
  }

  /* obraz wypełnia kontener i dziedziczy zaokrąglenie */
  .page-faq__banner > img.page-faq__banner-img{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: inherit !important;
    aspect-ratio: auto !important; /* kasuje ewentualny ratio z motywu */
  }

  /* overlay – tytuł/podtytuł */
  .page-faq__banner-overlay{
    position: absolute !important;
    inset: 0 !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    row-gap: 2px !important; /* 2–8px wg preferencji */
  }
  .page-faq__banner-title{ margin-bottom: 1px !important; }
  .page-faq__banner-subtitle{ margin-top: 0 !important; }
}

/* iOS safe-area – wycięcia ekranu */
@media (max-width: 767px) and (padding: max(0px)) {
  .page-faq__banner{
    padding-left: calc(var(--side-gap) + env(safe-area-inset-left)) !important;
    padding-right: calc(var(--side-gap) + env(safe-area-inset-right)) !important;
  }
}

/* MOBILE – „spacer” nad banerem wewnątrz .content-container (bez wpływu na header) */
@media (max-width: 767px) {
  .site-main.page-faq .content-container:has(> .page-faq__banner)::before{
    content: "";
    display: block;
    height: 12px; /* zmień wg potrzeby, np. 16px */
  }
}

/* Fallback, gdy :has nie jest wspierane */
@media (max-width: 767px) {
  @supports not (selector(:has(*))) {
    .site-main.page-faq .content-container{
      padding-top: 12px !important;
    }
    .site-main.page-faq .page-faq__banner{
      margin-top: 0 !important; /* zapobiega kolapsowaniu marginesów */
    }
  }
}

/* MOBILE – odstęp nad banerem FAQ wewnątrz .content-container */
@media (max-width: 767px) {
  .site-main.page-faq .content-container:has(> .page-faq__banner)::before{
    content: "";
    display: block;
    height: 72px; /* zmień np. na 16px/20px wedle potrzeby */
  }
}

/* Fallback, gdy :has nie jest wspierane */
@media (max-width: 767px) {
  @supports not (selector(:has(*))) {
    .site-main.page-faq .content-container{
      padding-top: 12px !important;
    }
    .site-main.page-faq .page-faq__banner{
      margin-top: 0 !important; /* zapobiega kolapsowaniu marginesów */
    }
  }
}

/* MOBILE – baner /kontakt/ */
@media (max-width: 767px) {
  .page-kontakt__banner{
    /* Parametry do regulacji */
    --side-gap: 18px;                                      /* marginesy wewnętrzne po bokach */
    --banner-width: calc(100vw - 2 * var(--side-gap));     /* szerokość względem okna */
    --banner-height-mobile: 80px;                          /* wysokość banera */
    --banner-radius: 18px;                                 /* zaokrąglenie rogów */

    position: relative !important;
    width: var(--banner-width) !important;
    height: var(--banner-height-mobile) !important;
    max-width: none !important;
    border-radius: var(--banner-radius) !important;
    overflow: hidden !important;

    /* wycentrowanie względem okna + bufor po bokach */
    left: 50% !important;
    transform: translateX(-50%) !important;
    padding: 0 var(--side-gap) !important;
  }

  /* obraz wypełnia kontener i dziedziczy zaokrąglenie */
  .page-kontakt__banner > img.page-kontakt__banner-img{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: inherit !important;
    aspect-ratio: auto !important; /* kasuje ewentualny ratio z motywu */
  }

  /* overlay – tytuł/podtytuł */
  .page-kontakt__banner-overlay{
    position: absolute !important;
    inset: 0 !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    row-gap: 2px !important; /* 2–8px wg preferencji */
  }
  .page-kontakt__banner-title{ margin-bottom: 1px !important; }
  .page-kontakt__banner-subtitle{ margin-top: 0 !important; }
}

/* iOS safe-area – wycięcia ekranu */
@media (max-width: 767px) and (padding: max(0px)) {
  .page-kontakt__banner{
    padding-left: calc(var(--side-gap) + env(safe-area-inset-left)) !important;
    padding-right: calc(var(--side-gap) + env(safe-area-inset-right)) !important;
  }
}

/* MOBILE – „spacer” nad banerem wewnątrz .content-container (bez wpływu na header) */
@media (max-width: 767px) {
  .site-main.page-kontakt .content-container:has(> .page-kontakt__banner)::before{
    content: "";
    display: block;
    height: 12px; /* zmień wg potrzeby, np. 16px/20px */
  }
}

/* Fallback, gdy :has nie jest wspierane */
@media (max-width: 767px) {
  @supports not (selector(:has(*))) {
    .site-main.page-kontakt .content-container{
      padding-top: 12px !important;
    }
    .site-main.page-kontakt .page-kontakt__banner{
      margin-top: 0 !important; /* zapobiega kolapsowaniu marginesów */
    }
  }
}

/* MOBILE – odstęp nad banerem /kontakt/ */
@media (max-width: 767px) {
  .site-main.page-kontakt .content-container:has(> .page-kontakt__banner)::before{
    content: "";
    display: block;
    height: 32px; /* zmień wg potrzeby, np. 16px/20px */
  }
}

/* Fallback, gdy :has nie jest wspierane */
@media (max-width: 767px) {
  @supports not (selector(:has(*))) {
    .site-main.page-kontakt .content-container{
      padding-top: 12px !important;
    }
    .site-main.page-kontakt .page-kontakt__banner{
      margin-top: 0 !important; /* zapobiega kolapsowaniu marginesów */
    }
  }
}











/* MOBILE – 1 karta na widoku + delikatny „peek” sąsiednich (Nasza Oferta) */
@media (max-width: 767px) {
  /* tor przewijania – wyłączamy grid, wymuszamy flex i pełny viewport */
  #offer-why .wc-panel.is-active > .offer-cards{
    display: flex !important;
    grid-template-columns: unset !important;
    grid-auto-flow: unset !important;

    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    /* centrowanie 1. karty + „peek” po bokach */
    --peek: 20px; /* 16–28px wg uznania */
    padding-left: var(--peek) !important;
    padding-right: var(--peek) !important;
    gap: 12px !important;

    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;

    /* brak dodatkowych wcięć od rodziców */
    margin: 0 !important;
  }

  /* klucz: każda karta ma SZTYWNĄ szerokość ~88vw i nie może się kurczyć */
  #offer-why .wc-panel.is-active > .offer-cards > .offer-card{
    box-sizing: border-box !important;
    flex: 0 0 calc(100vw - 2 * var(--peek)) !important;
    width: calc(100vw - 2 * var(--peek)) !important;
    min-width: calc(100vw - 2 * var(--peek)) !important;
    max-width: none !important;
    flex-shrink: 0 !important;

    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  /* zdjęcie – stała wysokość, spójne kadry */
  #offer-why .wc-panel.is-active .offer-card .offer-card-image img{
    width: 100% !important;
    height: 160px !important; /* ewentualnie 140–180px */
    object-fit: cover !important;
    border-radius: 10px !important;
    display: block !important;
  }

  /* kontener paneli – bez bocznych paddingów na mobile */
  #offer-why .why-choose__panels{
    padding-inline: 0 !important;
  }

  /* kosmetyka: ukrycie paska przewijania */
  #offer-why .wc-panel.is-active > .offer-cards{ scrollbar-width: none; }
  #offer-why .wc-panel.is-active > .offer-cards::-webkit-scrollbar{ display: none; }
}

/* MOBILE – węższa karta + większy „peek” sąsiednich (Nasza Oferta) */
@media (max-width: 767px) {
  #offer-why .wc-panel.is-active > .offer-cards{
    --peek: 36px;                 /* było ~20px → więcej widać po bokach */
    gap: 10px !important;         /* mniejsza przerwa między kartami = większy podgląd */
  }

  /* szerokość jednej karty = 100vw - 2*peek (czyli węższa niż wcześniej) */
  #offer-why .wc-panel.is-active > .offer-cards > .offer-card{
    box-sizing: border-box !important;
    flex: 0 0 calc(100vw - 2 * var(--peek)) !important;
    width: calc(100vw - 2 * var(--peek)) !important;
    min-width: calc(100vw - 2 * var(--peek)) !important;
    flex-shrink: 0 !important;
  }
}

























/* MOBILE – realny bufor z LEWEJ dla pierwszej zakładki (offer-1) */
@media (max-width: 767px) {
  /* tor kart: wyłącz grid i twardo ustaw flex + reset potencjalnych przesunięć */
  #offer-1-panel > .offer-cards{
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    gap: 10px !important;

    /* zerujemy wszystko, co mogło niwelować bufor po lewej */
    padding: 0 !important;
    margin: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    grid-template-columns: unset !important;
    grid-auto-flow: unset !important;
  }

  /* KLUCZ: stały bufor z LEWEJ – prawdziwa pusta przestrzeń przed 1. kartą */
  #offer-1-panel > .offer-cards::before{
    content: "";
    display: block;
    flex: 0 0 36px;   /* ← ustaw 24–48px wg efektu */
    width: 36px;
    height: 1px;      /* nie wpływa na wysokość toru */
  }

  /* (opcjonalnie) bufor po PRAWEJ, by ostatnia karta też mogła centrować się ładnie */
  #offer-1-panel > .offer-cards::after{
    content: "";
    display: block;
    flex: 0 0 36px;
    width: 36px;
    height: 1px;
  }

  /* karty: bez kurczenia, snap na środek – zachowujemy obecny wygląd */
  #offer-1-panel > .offer-cards > .offer-card{
    flex-shrink: 0 !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
}

/* MOBILE – realny bufor z LEWEJ dla zakładki INNE TRENINGI (offer-2) */
@media (max-width: 767px) {
  /* tor kart: twardy reset + flex + snap */
  #offer-2-panel > .offer-cards{
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    gap: 10px !important;

    /* reset potencjalnych nadpisań */
    padding: 0 !important;
    margin: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    grid-template-columns: unset !important;
    grid-auto-flow: unset !important;
  }

  /* KLUCZ: stały bufor z LEWEJ – pusta przestrzeń przed 1. kartą */
  #offer-2-panel > .offer-cards::before{
    content: "";
    display: block;
    flex: 0 0 36px;   /* dostosuj: 24–48px */
    width: 36px;
    height: 1px;      /* nie zmienia wysokości toru */
  }

  /* karty: brak kurczenia + snap na środek */
  #offer-2-panel > .offer-cards > .offer-card{
    flex-shrink: 0 !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
}

@media (max-width: 640px) {
  #offer-3-panel > .offer-cards { scrollbar-width: none; }
  #offer-3-panel > .offer-cards::-webkit-scrollbar { display: none; }
}

/* MOBILE ≤640px — większy odstęp między zdjęciem a opisem (tylko TWOJA ANALIZA) */
@media (max-width: 640px) {
  /* parametry do szybkiej regulacji */
  #offer-3-panel .offer-card{
    --gap-img-to-text: 12px;  /* ile odstępu pod zdjęciem (8–14px) */
    --gap-h-to-desc: 5px;     /* ile między H3 a .description (6–10px) */
  }

  /* więcej luzu pod zdjęciem */
  #offer-3-panel .offer-card .offer-card-image{
    margin-bottom: var(--gap-img-to-text) !important;
  }

  /* i trochę większy odstęp pod tytułem (wpływa na dystans do .description) */
  #offer-3-panel .offer-card h3{
    margin-bottom: var(--gap-h-to-desc) !important;
  }
}







/* MOBILE ≤640px — większe tytuły tylko w panelu TWOJA ANALIZA */
@media (max-width: 640px) {
  #offer-3-panel .offer-card h3{
    font-size: 19px !important;   /* lekko większe; zmień na 22px, jeśli chcesz mocniej */
    line-height: 1.45 !important;
    text-align: center !important;
    font-weight: 700 !important;
  }
}



/* MOBILE ≤640px — większe tytuły w panelach OFFER-1 i OFFER-2 */
@media (max-width: 640px) {
  #offer-1-panel .offer-card h3,
  #offer-2-panel .offer-card h3{
    font-size: 19px !important;
    line-height: 1.45 !important;
    text-align: center !important;
    font-weight: 700 !important;
  }
}



/* MOBILE ≤640px — ciaśniej wokół "Już Niedługo!" (offer-2) i opisów (offer-1) */
@media (max-width: 640px) {
  /* mniejszy dystans między tytułem a krótkim opisem/„Już Niedługo!” */
  #offer-1-panel .offer-card h3,
  #offer-2-panel .offer-card h3{
    margin-bottom: 4px !important;
  }


.offer-next-cta__picture{ display:block; }
.offer-next-cta__picture > img{ display:block; width:100%; height:auto; }


/* MOBILE ≤640px — stała wysokość banera CTA (nie wpływa na desktop) */
@media (max-width: 640px) {
  #offer-next-cta { --cta-h: 80px; } /* ← ustaw docelową wysokość (np. 100–140px) */

  /* link = kontener o stałej wysokości */
  #offer-next-cta .offer-next-cta__btn{
    display: block !important;
    position: relative !important;
    height: var(--cta-h) !important;
    line-height: 0 !important;     /* zero „dodatkowej” wysokości */
    overflow: hidden !important;
    border-radius: 14px;           /* opcjonalnie */
    padding: 0 !important;         /* jeśli tema dodaje padding do <a> */
  }

  /* <picture> / <img> wypełniają 100% wysokości linku */
  #offer-next-cta .offer-next-cta__picture{
    display: block !important;
    height: 100% !important;
  }
  #offer-next-cta .offer-next-cta__picture > img,
  #offer-next-cta img.offer-next-cta__img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 14px;           /* opcjonalnie */
  }

  /* etykieta na środku (gdy jest nakładką) */
  #offer-next-cta .offer-next-cta__label{
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 16px !important;
    pointer-events: none;
  }
}

/* MOBILE ≤640px — margines nad przyciskiem w #offer-next-cta */
@media (max-width: 640px) {
  #offer-next-cta { --cta-gap-top: 16px; } /* dostosuj np. 12–24px */

  /* pewny odstęp – działa nawet przy kolapsie marginesów */
  #offer-next-cta::before{
    content: "";
    display: block;
    height: var(--cta-gap-top);
  }
}






@media (max-width: 640px) {
  #offer-next-cta { --cta-gap-bottom: 8px; } /* ustaw np. 6–12px */
  #offer-next-cta::after{
    height: var(--cta-gap-bottom) !important;
  }
}

@media (max-width: 640px) {
  /* wyłącz ewentualny ::after z poprzednich prób */
  #offer-next-cta::after{ content:none !important; display:none !important; height:0 !important; }

  /* minimalny odstęp pod obrazem/przyciskiem */
  #offer-next-cta{ padding-bottom: 4px !important; }
}

/* MOBILE ≤640px — delikatnie mniejsza wysokość CTA */
@media (max-width: 640px) {
  #offer-next-cta { --cta-h: 60px; } /* było 120px */

  /* upewnij się, że kontener trzyma nową wysokość */
  #offer-next-cta .offer-next-cta__btn{
    height: var(--cta-h) !important;
  }

  /* obraz wypełnia 100% nowej wysokości */
  #offer-next-cta .offer-next-cta__picture{ height: 100% !important; }
  #offer-next-cta .offer-next-cta__picture > img,
  #offer-next-cta img.offer-next-cta__img{
    height: 100% !important;
    object-fit: cover !important;
  }
}



/* MOBILE ≤640px — pionowe wyśrodkowanie tekstu w przyciskach kart */
@media (max-width: 640px) {
  #offer-why .offer-card .cta{
    display: flex !important;
    align-items: center !important;   /* wyśrodkowanie w osi Y */
    justify-content: center !important;/* i w osi X */
    line-height: 1.15 !important;     /* stabilny interlinia */
    min-height: 44px !important;      /* ujednolicony „hit area” (44–48px) */
    padding-top: 10px !important;     /* możesz zmniejszyć/zwiekszyć wg potrzeby */
    padding-bottom: 11px !important;
  }
}


































































































/* MOBILE ≤767px — sekcja trenerów: full-bleed, 1 kafel na widoku + „peeki” */
@media (max-width: 767px) {
  /* rodzic nie ucina zawartości */
  .training-single .ti-section.ti-showcase,
  .training-single #ti-showcase{
    overflow: visible !important;
  }

  .training-single #ti-showcase .ti-tiles{
    /* parametry do regulacji */
    --peek: 36px;     /* ile „wystaje” sąsiad (24–48px) */
    --card: 82vw;     /* szerokość kafla (80–86vw) */
    --gap: 10px;      /* odstęp między kaflami */
    --tileH: 340px;   /* wysokość zdjęcia/kafla (np. 220–260px) */

    /* FULL-BLEED: tor na całą szerokość okna */
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    /* jedna linia + poziomy scroll + snap */
    display: block !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;

    /* reset ewentualnego grida + kosmetyka */
    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    grid-template-columns: unset !important;
    grid-auto-flow: unset !important;
    font-size: 0 !important;       /* brak „szpar” między inline-blockami */
    line-height: 0 !important;
    padding: 0 !important;
  }

  /* bufory po bokach – ładne centrowanie 1. i ostatniego */
  .training-single #ti-showcase .ti-tiles::before,
  .training-single #ti-showcase .ti-tiles::after{
    content: "";
    display: inline-block;
    width: var(--peek);
    height: 1px;
  }

  /* kafle: obok siebie, stała szerokość, snap na środek */
  .training-single #ti-showcase .ti-tile{
    display: inline-block !important;
    vertical-align: top !important;
    width: var(--card) !important;
    height: var(--tileH) !important;
    margin-right: var(--gap) !important;
    white-space: normal !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    border-radius: 12px !important;
    overflow: hidden !important;
    float: none !important;
    clear: none !important;
  }
  .training-single #ti-showcase .ti-tile:last-child{ margin-right: 0 !important; }

  /* obraz: pełne wypełnienie kafla, delikatne opuszczenie kadru */
  .training-single #ti-showcase .ti-tile img{
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: 50% 55% !important; /* koryguj 45–60% w razie potrzeby */
    border-radius: 12px !important;
  }

  /* (opcjonalnie) ukryj pasek przewijania */
  .training-single #ti-showcase .ti-tiles{ scrollbar-width: none; }
  .training-single #ti-showcase .ti-tiles::-webkit-scrollbar{ display: none; }
}



/* MOBILE ≤767px — usuń czarne tło w nagłówku sekcji trenerów */
@media (max-width: 767px) {
  /* wyczyść tła na kontenerze nagłówka i jego dzieciach */
  .training-single #ti-showcase .ti-section__head,
  .training-single #ti-showcase .ti-section__head h2,
  .training-single #ti-showcase .ti-section__lead {
    background: transparent !important;
  }

  /* wyłącz ewentualne pseudo-elementy robiące tło/gradient */
  .training-single #ti-showcase::before,
  .training-single #ti-showcase .ti-section__head::before,
  .training-single #ti-showcase .ti-section__head::after {
    content: none !important;
    background: transparent !important;
  }

  /* na wszelki wypadek: dziedziczenie z tła sekcji (jeśli jest jasno) */
  .training-single #ti-showcase .ti-section__head {
    background-color: transparent !important;
  }
}

/* MOBILE ≤767px — drobna korekta położenia napisu ceny w sticky bar */
@media (max-width: 767px) {
  /* wartości do regulacji */
  .training-single .ti-sticky-bar{
    --price-shift-x: 8px;   /* + w prawo, − w lewo */
    --price-shift-y: -2px;  /* + w dół,  − w górę */
  }

  .training-single .ti-sticky-bar__price{
    position: relative; /* nie wpływa na układ sąsiadów */
    transform: translate(var(--price-shift-x), var(--price-shift-y));
    will-change: transform;
  }

  /* (opcjonalnie) delikatna korekta odstępów między częściami ceny */
  .training-single .ti-sticky-bar__currency{ margin-left: .25em; }
  .training-single .ti-sticky-bar__unit{ margin-left: .35em; }
}

/* MOBILE ≤767px — przesuń napis ceny w prawo i nieco do góry */
@media (max-width: 767px) {
  .training-single .ti-sticky-bar__price{
    position: relative;
    transform: translate(-19px, -2px) !important; /* X = w prawo, Y = w górę */
  }
}



/* MOBILE ≤767px — usuń „otoczkę” po przewinięciu do sekcji */
@media (max-width: 767px) {

  /* brak highlightu przy tapnięciu w odnośniki */
  .ti-quicklinks .ti-qitem {
    -webkit-tap-highlight-color: transparent;
    outline: none !important;
  }
  .ti-quicklinks .ti-qitem:focus,
  .ti-quicklinks .ti-qitem:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }

  /* docelowe sekcje kotwic: bez obrysu/poświaty, nawet gdy mają focus/target */
  .training-single #terminy,
  .training-single #koncepcja,
  .training-single .ti-anchor-offset {
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .training-single #terminy:focus,
  .training-single #terminy:focus-visible,
  .training-single #terminy:focus-within,
  .training-single #terminy:target,
  .training-single #koncepcja:focus,
  .training-single #koncepcja:focus-visible,
  .training-single #koncepcja:focus-within,
  .training-single #koncepcja:target,
  .training-single .ti-anchor-offset:focus,
  .training-single .ti-anchor-offset:focus-visible,
  .training-single .ti-anchor-offset:focus-within,
  .training-single .ti-anchor-offset:target {
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* dodatkowy bezpiecznik: wyłącz jakiekolwiek style :target w obrębie tej strony */
  .training-single :target {
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}


/* MOBILE ≤767px — po kliknięciu „Koncepcja Treningu” przewiń trochę niżej */
@media (max-width: 767px) {
  #koncepcja{
    /* o ile niżej ma zatrzymać się widok (reguluj 12–36px) */
    --extra-anchor-offset: -90px;

    /* gdy przeglądarka używa natywnego #hash, to też pomaga */
    scroll-margin-top: 96px;

    /* klucz: wizualne opuszczenie treści sekcji, bez zmiany pozycji samej sekcji */
    padding-top: var(--extra-anchor-offset) !important;
    margin-top: calc(-1 * var(--extra-anchor-offset)) !important;
  }
}



/* Mobile: zmniejszenie marginesu nad tytułem "Koncepcja Treningu" */
@media (max-width: 767.98px) {
  /* zapobiega kolapsowi marginesów, dzięki czemu kontrolujemy odstęp nad h2 */
  #koncepcja-treningu { 
    padding-top: 4px;
  }

  /* redukcja własnego marginesu h2 (często motywy nadają duże margin-block-start) */
  #koncepcja-treningu .section-title,
  #koncepcja-treningu h2 {
    margin-top: 6px;     /* dostosuj wg potrzeb (np. 0–10px) */
  }
}







/* === CTA3: sekcja z 3 przyciskami-kartami === */
.cta3 { 
  padding: 24px 0 32px;
}

.cta3__container {
  max-width: 1150px;   /* wymóg: mieści się w 1150px */
  margin: 0 auto;
  padding: 0 16px;     /* bezpieczny wewnętrzny margines */
}

.cta3__header { 
  text-align: center; 
  margin-bottom: 16px;
}

.cta3__title {
  margin: 0 0 8px 0;
  font-size: clamp(20px, 2.5vw, 28px);
  line-height: 1.2;
}

.cta3__desc {
  margin: 0 auto;
  max-width: 70ch;
  opacity: 0.9;
  font-size: 0.95rem;
}

/* Siatka: mobile najpierw – pionowo, 3 linie */
.cta3__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* Karta/przycisk */
.cta3__item {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  background: var(--bw-surface, #141414);   /* dopasuj do swojego motywu */
  color: var(--bw-on-surface, #f5f5f5);
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.cta3__item:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.cta3__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}

/* Obraz */
.cta3__media {
  display: block;
  aspect-ratio: 16 / 9;               /* stabilna wysokość; możesz zmienić np. na 4/3 */
  background: #222;                    /* tło awaryjne */
}

.cta3__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Etykieta przycisku */
.cta3__label {
  display: block;
  text-align: center;
  font-weight: 700;
  letter-spacing: .2px;
  padding: 12px 14px 14px;
  font-size: 1rem;
}

/* >= tablet/desktop: 3 kolumny w jednym rzędzie */
@media (min-width: 992px) {
  .cta3 { 
    padding: 32px 0 40px;
  }
  .cta3__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  .cta3__label {
    font-size: 1.05rem;
    padding: 14px 16px 16px;
  }
}


/* TEST: jeśli to działa, header sekcji obrysuje się na fioletowo */
#sekcja-cta3 .cta3__header { outline: 3px solid magenta !important; }












/* MOBILE ≤767px — karuzela kafli w /wspolpracuj-z-bwt/ */
@media (max-width: 767px) {
  /* rodzice nie mogą ucinać zawartości */
  .collab-section,
  .collab-section .collab-cta,
  .collab-section .collab-cta__container{
    overflow: visible !important;
  }

  .collab-section .collab-cta__grid{
    /* parametry do regulacji */
    --peek: 28px;     /* ile „wystaje” sąsiad (24–40px) */
    --card: 82vw;     /* szerokość kafla (80–86vw) */
    --gap: 10px;      /* odstęp między kaflami */
    --tileH: 180px;   /* wysokość obrazka (160–200px) */

    /* full-bleed: tor na szerokość okna */
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    /* jedna linia + przewijanie + snap */
    display: block !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;

    /* reset ewentualnego grida i „szpar” */
    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    grid-template-columns: unset !important;
    grid-auto-flow: unset !important;
    font-size: 0 !important;
    padding: 0 !important;
  }

  /* bufory po lewej/prawej, by 1. i ostatni kafel ładnie się centrowały */
  .collab-section .collab-cta__grid::before,
  .collab-section .collab-cta__grid::after{
    content: "";
    display: inline-block;
    width: var(--peek);
    height: 1px;
  }

  /* poj. kafel jako element w linii o stałej szerokości, ze snapem na środek */
  .collab-section .collab-cta__item{
    display: inline-block !important;
    vertical-align: top !important;
    width: var(--card) !important;
    height: var(--tileH) !important;
    margin-right: var(--gap) !important;
    white-space: normal !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    border-radius: 12px !important;
    overflow: hidden !important;

    /* pewne resety */
    float: none !important;
    clear: none !important;
    position: relative !important;
  }
  .collab-section .collab-cta__item:last-child{ margin-right: 0 !important; }

  /* obrazek ma wypełnić kafel */
  .collab-section .collab-cta__item picture{ 
    display: block !important; 
    height: 100% !important; 
  }
  .collab-section .collab-cta__img{
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 12px !important;
  }

  /* (opcjonalnie) ukrycie paska przewijania */
  .collab-section .collab-cta__grid{ scrollbar-width: none; }
  .collab-section .collab-cta__grid::-webkit-scrollbar{ display: none; }
}

/* MOBILE ≤767px — „Wydarzenia BWTrening”: 1 kafel na widoku + peeki + poziomy scroll */
@media (max-width: 767px) {
  .home-cta .home-cta__container{ overflow: visible !important; }

  .home-cta .home-cta__grid{
    /* parametry do regulacji */
    --peek: 28px;     /* ile ma „wystawać” sąsiad (24–40px) */
    --card: 82vw;     /* szerokość kafla (80–86vw) = ile widoczne na ekranie */
    --gap: 10px;      /* odstęp między kaflami */
    --tileH: 200px;   /* wysokość jednego kafla (180–220px) */

    /* full-bleed: tor na szerokość okna, niezależnie od kontenera */
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    /* jedna linia + przewijanie + snap */
    display: block !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;

    /* reset gridowych luk i „szpar” między inline-blockami */
    gap: 0 !important; column-gap: 0 !important; row-gap: 0 !important;
    grid-template-columns: unset !important; grid-auto-flow: unset !important;
    font-size: 0 !important; line-height: 0 !important; padding: 0 !important;
  }

  /* bufory lewy/prawy — żeby 1. i 3. kafel ładnie centrowały się na skrajach */
  .home-cta .home-cta__grid::before,
  .home-cta .home-cta__grid::after{
    content: "";
    display: inline-block;
    width: var(--peek);
    height: 100px;
  }

  /* kafel = element w linii o stałej szerokości; snap na środek */
  .home-cta .home-cta__item{
    display: inline-block !important;
    vertical-align: top !important;
    width: var(--card) !important;
    height: var(--tileH) !important;
    margin-right: var(--gap) !important;
    white-space: normal !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;

    border-radius: 12px !important;
    overflow: hidden !important;
    position: relative !important;
    float: none !important; clear: none !important;
  }
  .home-cta .home-cta__item:last-child{ margin-right: 0 !important; }

  /* obraz (u Ciebie to <div style="background-image:…">) wypełnia kafel */
  .home-cta .home-cta__img{
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 12px !important;
  }

  /* (opcjonalnie) ukryj pasek przewijania */
  .home-cta .home-cta__grid{ scrollbar-width: none; }
  .home-cta .home-cta__grid::-webkit-scrollbar{ display: none; }
}





/* MOBILE ≤767px — „Wydarzenia BWTrening”: 1 kafel + „peeki”, poziomy scroll, bez pętli */
@media (max-width: 767px) {
  .home-cta .home-cta__container{ overflow: visible !important; }

  .home-cta .home-cta__grid{
    /* parametry do regulacji */
    --peek: 28px;     /* ile ma „wystawać” sąsiad (24–40px) */
    --card: 82vw;     /* szerokość kafla (80–86vw) */
    --gap: 10px;      /* odstęp między kaflami */
    --tileH: 200px;   /* wysokość kafla (180–220px) */

    /* full-bleed */
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    /* 1 linia + przewijanie + snap */
    display: block !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;

    /* reset grida i „szpar” */
    gap: 0 !important; column-gap: 0 !important; row-gap: 0 !important;
    grid-template-columns: unset !important; grid-auto-flow: unset !important;
    font-size: 0 !important; line-height: 0 !important; padding: 0 !important;
  }

  /* bufory po bokach, by 1. i ostatni mogły się ładnie centrować */
  .home-cta .home-cta__grid::before,
  .home-cta .home-cta__grid::after{
    content: "";
    display: inline-block;
    width: var(--peek);
    height: 1px;
  }

  /* kafel: stała szerokość, snap na środek */
  .home-cta .home-cta__item{
    display: inline-block !important;
    vertical-align: top !important;
    width: var(--card) !important;
    height: var(--tileH) !important;
    margin-right: var(--gap) !important;
    white-space: normal !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;

    border-radius: 12px !important;
    overflow: hidden !important;
    position: relative !important;
    float: none !important; clear: none !important;
  }
  .home-cta .home-cta__item:last-child{ margin-right: 0 !important; }

  /* obraz wypełnia kafel (u Ciebie to div z background-image) */
  .home-cta .home-cta__img{
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 12px !important;
  }

  /* (opcjonalnie) ukryj pasek przewijania */
  .home-cta .home-cta__grid{ scrollbar-width: none; }
  .home-cta .home-cta__grid::-webkit-scrollbar{ display: none; }
}



.home-cta .home-cta__item picture{ display:block; height:100%; }
.home-cta .home-cta__item img.home-cta__img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center;
  border-radius:12px;
}


@media (max-width: 767px) {
  .home-cta .home-cta__grid{
    --card: 82vw;   /* szerokość jednego kafla */
    --tileH: 200px; /* wysokość jednego kafla */
  }
}


/* MOBILE ≤767px — wysokość 280px */
@media (max-width: 767px) {
  .home-cta .home-cta__grid{ --tileH: 280px; }  /* było 240px/200px */
  .home-cta .home-cta__item{ height: var(--tileH) !important; }
  .home-cta .home-cta__item picture,
  .home-cta .home-cta__img{
    height: 100% !important;
    object-fit: cover !important; /* tnie nadmiar, trzyma wypełnienie */
  }
}

/* MOBILE ≤767px — niższe „pola” kafli w sekcji Obserwuj BWTrening */
@media (max-width: 767px) {
  /* wysokości do regulacji */
  #home-social .hs-item{
    --card-h: 120px;   /* ← łączna wysokość POLA (np. 160–200px) */
    --media-h: 120px;  /* ← wysokość części ze zdjęciem w środku */
    
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    height: var(--card-h) !important;     /* klucz: ogranicza całe pole */
    overflow: hidden !important;
    border-radius: 12px !important;
    padding: 0 !important;                 /* ciasno, bez dodatkowych odstępów */
  }

  /* obrazek w polu: stała, mniejsza wysokość */
  #home-social .hs-preview{
    flex: 0 0 var(--media-h) !important;
    width: 100% !important;
    height: var(--media-h) !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* podpis zajmuje resztę wysokości pola; lekko ściśnięty */
  #home-social .hs-label{
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
  #home-social .hs-icon{
    width: 16px !important;
    height: 16px !important;
    margin-right: 6px !important;
  }
}

/* Domyślnie ukryj mobilną sekcję */
#trainers-swipe-mobile { display: none; }

@media (max-width: 767px) {
  /* Jeśli masz inne warianty – ukryj je na mobile */
  #trainers-static-mobile,
  #trainers-carousel,
  #trainers-carousel-mobile { display: none !important; }

  #trainers-swipe-mobile { display: block; }

  /* Bez „puchnięcia” strony */
  html, body { overflow-x: clip; }

  /* NAGŁÓWEK: full-bleed, wycentrowany */
  .tswipe__header{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 12px;
  }
  .tswipe__heading{
    margin: 8px auto 10px;
    text-align: center;
    font-weight: 800;
    line-height: 1.1;
    font-size: clamp(20px, 5.8vw, 28px); /* responsywnie */
  }

  /* TOR – jak wcześniej */
  .tswipe__track{
    --peek: 36px;  /* ile „wystaje” sąsiad (24–48px) */
    --card: 82vw;  /* szerokość kafla (80–86vw) */
    --h: 240px;    /* wysokość obrazka */

    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding: 0;
  }
  .tswipe__track::before,
  .tswipe__track::after{
    content: "";
    display: block;
    flex: 0 0 var(--peek);
  }

  .tswipe__item{
    flex: 0 0 var(--card);
    min-width: var(--card);
    flex-shrink: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    border-radius: 16px;
    overflow: hidden;
  }
  .tswipe__item img{
    display: block;
    width: 100%;
    height: var(--h);
    object-fit: cover;
  }

  /* (opcjonalnie) ukryj pasek przewijania */
  .tswipe__track { scrollbar-width: none; }
  .tswipe__track::-webkit-scrollbar { display: none; }
}

/* MOBILE ≤767px — wymuś wyższą kartę i obraz wypełniający 100% jej wysokości */
@media (max-width: 767px) {
  /* wysokość karty sterowana zmienną */
  #trainers-swipe-mobile .tswipe__track { align-items: stretch !important; }

  #trainers-swipe-mobile .tswipe__item {
    --card-h: 370px;                 /* ← ZMIEŃ TU (np. 280–340px) */
    height: var(--card-h) !important;
    min-height: var(--card-h) !important;
    aspect-ratio: auto !important;   /* wyłącz ewentualny ratio */
    overflow: hidden !important;
  }

  /* złap img niezależnie od klasy */
  #trainers-swipe-mobile .tswipe__item img,
  #trainers-swipe-mobile .tswipe__img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;         /* klucz: wypełnia kartę */
    max-height: none !important;
    object-fit: cover !important;
    aspect-ratio: auto !important;
    border-radius: 16px !important;  /* opcjonalnie */
  }

  /* jeśli gdzieś był hack z pseudo-elementem do wysokości – wyłącz go */
  #trainers-swipe-mobile .tswipe__item::before {
    content: none !important;
  }
}

/* Schowaj wrapper i overlay Jetpack Carousel */
#jp-carousel-loading-wrapper,
.jp-carousel-overlay,
.jp-carousel-wrap,
.jp-carousel-next-button,
.jp-carousel-previous-button,
.jp-carousel-close-hint{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
  width:0 !important; height:0 !important;
  max-width:0 !important; max-height:0 !important;
  position:fixed !important; inset:auto !important;
}

/* TYLKO TELEFON (≤640px) — baner */
@media (max-width:640px){
  .page-nasze-obozy__banner{
    position: relative;
    max-width: 100%;
    margin: 0 auto;           /* wyśrodkowanie na mobile */
  }
  .page-nasze-obozy__banner-img{
    display: block;
    width: 100%;
    height: auto;
    margin-inline: auto;
    object-fit: cover;
    object-position: center;
  }
  .site-main.page-nasze-obozy .content-container > .page-nasze-obozy__banner{
    margin-top: -58px !important; /* tylko na telefonie */
  }
}

/* MOBILE ≤640px — tylko baner (bez zmian w overlay/tekstach) */
@media (max-width:640px){
  .site-main.page-nasze-obozy .content-container > .page-nasze-obozy__banner{
    height: 80px !important;   /* zmniejszona wysokość na telefonie */
    overflow: hidden;
  }
  .site-main.page-nasze-obozy .page-nasze-obozy__banner-img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
  }
}

/* Baner – delikatnie jaśniejszy filtr */
.site-main.page-nasze-obozy .page-nasze-obozy__banner-img{
  filter: brightness(0.64) contrast(1.05) saturate(1.02) !important;
  -webkit-filter: brightness(0.64) contrast(1.05) saturate(1.02) !important;
}

/* TYLKO TELEFON (≤640px) — lekko mniejszy główny tytuł w banerze */
@media (max-width:640px){
  .site-main.page-nasze-obozy .page-nasze-obozy__banner-title{
    font-size: 26px !important;
    line-height: 1.1;
  }
}

/* TYLKO TELEFON (≤640px) — większy margines NAD przyciskami zakładek */
@media (max-width:640px){
  .site-main.page-nasze-obozy #camps-offer-why .why-choose__tabs{
    margin-top: 35px !important;  /* zwiększ w razie potrzeby */
  }
}


/* TYLKO TELEFON (≤640px) — większy margines NAD głównym tytułem w banerze */
@media (max-width:640px){
  .site-main.page-nasze-obozy .page-nasze-obozy__banner-title{
    margin-top: 2px !important; /* zwiększ w razie potrzeby */
  }
}


/* TYLKO TELEFON (≤640px) — większy odstęp pod tytułem, bez zmiany położenia tytułu */
@media (max-width:640px){
  .site-main.page-nasze-obozy .page-nasze-obozy__banner-subtitle{
    position: relative;
    top: -0.1px;               /* przesuń tylko podtytuł w dół wizualnie */
    margin-top: 0 !important; /* nie korzystamy z marginesu, żeby nie ruszać tytułu */
    display: inline-block;    /* dla pewności względem top */
  }
}


/* TYLKO TELEFON (≤640px) — jaśniejszy kolor drugiego opisu w banerze */
@media (max-width:640px){
  .site-main.page-nasze-obozy .page-nasze-obozy__banner-subtitle{
    color: #F3EEE7 !important;
  }
}


/* TYLKO TELEFON (≤640px) — jeszcze grubsza czcionka w przyciskach zakładek */
@media (max-width:640px){
  .site-main.page-nasze-obozy #camps-offer-why .wc-tab__title{
    font-weight: 900 !important;
  }
  /* Fallback, gdy tytuł nie jest w .wc-tab__title */
  .site-main.page-nasze-obozy #camps-offer-why .wc-tab{
    font-weight: 900 !important;
  }
}



/* TYLKO TELEFON (≤640px) — przyciski zakładek na /nasza-oferta/ jak na /nasze-obozy/ */
@media (max-width:640px){
  /* ten sam górny margines nad przyciskami */
  #offer-why .why-choose__tabs{
    margin-top: -8px !important;
  }
  /* to samo pogrubienie tytułów */
  #offer-why .wc-tab__title{
    font-weight: 900 !important;
  }
  /* fallback, gdy tytuł nie jest owinięty w .wc-tab__title */
  #offer-why .wc-tab{
    font-weight: 900 !important;
  }
  /* ten sam wygląd nieaktywnego (wewnętrzna „ramka”) */
  #offer-why .wc-tab:not(.is-active):not([aria-selected="true"]){
    box-shadow: inset 0 0 0 2px rgba(0,0,0,.25);
  }
}

/* TYLKO TELEFON (≤640px) — większy margines nad przyciskami na /nasza-oferta/ */
@media (max-width:640px){
  #offer-why .why-choose__header{
    margin-bottom: 20px !important; /* zwiększ w razie potrzeby */
  }
}

/* TYLKO TELEFON (≤640px) — niższe przyciski zakładek na /nasza-oferta/ */
@media (max-width:640px){
  #offer-why .why-choose__tabs .wc-tab{
    min-height:44px !important;   /* było 52px */
    padding:8px 14px !important;   /* było 12px 16px */
  }
  #offer-why .why-choose__tabs .wc-tab__title{
    line-height:1.1 !important;    /* pewne wycentrowanie tekstu w niższym przycisku */
  }
}



/* TYLKO TELEFON (≤640px) — mniejsza czcionka w przyciskach zakładek na /nasza-oferta/ */
@media (max-width:640px){
  #offer-why .why-choose__tabs .wc-tab__title{
    font-size:14px !important; /* było 18px */
    line-height:1.1 !important;
  }
  /* Fallback, gdy tytuł nie jest owinięty w .wc-tab__title */
  #offer-why .why-choose__tabs .wc-tab{
    font-size:14px !important;
  }
}