.header-cart {
    background-color: #fff;
    padding: 25px 20px;
    margin-top: 20px;
    border-bottom: 1px solid #eaeaea;
}

.header-cart-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 90%;
    margin: 0 auto;
    flex-wrap: wrap; /* Dodano dla lepszej responsywności */
}

/* Logo */
.header-cart-logo img {
    width: 300px;
    height: auto;
    margin-left: -10px;
    flex-shrink: 0; /* Zapewnia, że logo nie zmniejsza się */
}

/* Kontener postępu */
.header-cart-progress-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    max-width: 700px; /* Domyślna szerokość na dużych ekranach */
    flex-grow: 1; /* Zapewnia, że pasek postępu zajmuje dostępne miejsce */
    margin-left: 20px;
}

/* Kroki */
.header-cart-progress {
    display: flex;
    justify-content: space-between;
    width: 100%; /* Dopasowanie do szerokości kontenera */
    margin-bottom: 10px;
    position: relative;
}

.header-cart-progress-step {
    font-size: 16px;
    flex: 1;
    text-align: center;
    color: #9e9e9e;
    white-space: nowrap; /* Zapobiega łamaniu tekstu */
    overflow: hidden; /* Ukrywa nadmiar tekstu, jeśli się nie mieści */
}

.header-cart-progress-step:first-child {
    text-align: left;
}

.header-cart-progress-step:last-child {
    text-align: right;
}

.header-cart-progress-step.active {
    color: #000;
    font-weight: bold;
}

/* Pasek postępu */
.header-cart-progress-bar {
    width: 100%; /* Pasek zajmuje całą szerokość kontenera */
    height: 8px;
    background-color: #f2f2f2;
    border-radius: 3px;
    overflow: hidden;
}

.header-cart-progress-fill {
    height: 100%;
    background: linear-gradient(to left, #e1001d 0%, #03294c 100%);
    border-radius: 3px;
}

.header-cart-progress-fill {
    height: 100%;
    background: linear-gradient(to left, #e1001d 0%, #03294c 100%);
    border-radius: 4px;
    position: relative; /* Ustawienie pozycji względnej, aby pseudo-element odnosił się do kontenera */
}

.header-cart-progress-fill::after {
    content: "33%"; /* Wartość tekstowa */
    position: absolute;
    top: 50%; /* Wyśrodkowanie w pionie */
    left: 50%; /* Wyśrodkowanie w poziomie */
    transform: translate(-50%, -50%); /* Poprawne wyśrodkowanie */
    font-size: 11px; /* Rozmiar tekstu */
    color: #fff; /* Kolor tekstu */
    font-weight: 500;
    white-space: nowrap; /* Zapobieganie zawijaniu tekstu */
    pointer-events: none; /* Wyłączenie interakcji */
}


/* Responsywność poniżej 1600px */
@media (max-width: 1600px) {
    .header-cart-progress-container {
        max-width: 600px; /* Zmniejszenie szerokości paska */
    }

    .header-cart-container {
        max-width: 95%;
     }
}

/* Responsywność poniżej 1400px */
@media (max-width: 1400px) {

    

    .header-cart-progress-container {
        max-width: 500px; /* Zmniejszenie szerokości paska */
    }

    .header-cart-progress-step {
        font-size: 15px; /* Zmniejszenie rozmiaru tekstu */
    }
}

/* Responsywność poniżej 1200px */
@media (max-width: 1200px) {
    .header-cart-progress-container {
        max-width: 440px; /* Zmniejszenie szerokości paska */
    }
}

/* Responsywność poniżej 1024px */
@media (max-width: 1024px) {
    .header-cart-progress-container {
        max-width: 410px; /* Pasek progresu zmniejsza szerokość */
    }

   
}

/* Responsywność poniżej 768px */






@media (max-width: 1050px) {



    .header-cart-container {
        flex-direction: column; /* Układ w kolumnie */
        align-items: flex-start; /* Logo wyrównane do lewej */
        width: 100%; /* Kontener zajmuje całą szerokość */
        padding: 0 15px; /* Dodanie odstępów po bokach */
    }

    .header-cart-logo img {
        width: 220px; /* Mniejsze logo */
        height: auto; /* Zachowanie proporcji */
        margin-bottom: 10px; /* Dodanie odstępu pod logo */
    }

    .header-cart-progress-container {
        align-items: flex-start; /* Pasek wyrównany do lewej */
        width: 100%; /* Kontener paska zajmuje całą szerokość */
        margin-top: 10px; /* Odstęp od logo */
        max-width: 100%; /* Zapewnienie pełnej szerokości */
        margin-left: -15px; /* Przesunięcie w lewo */
        padding-left: 15px; /* Dodanie wyrównania wewnętrznego */
    }

    .header-cart-progress {
        width: 100%; /* Pasek zajmuje pełną szerokość */
        margin-bottom: 10px; /* Odstęp między krokami a paskiem */
    }

    .header-cart-progress-bar {
        width: 100%; /* Pasek zajmuje całą szerokość kontenera */
        height: 6px; /* Cieńszy pasek */
        background-color: #f2f2f2;
        border-radius: 4px; /* Zaokrąglenie krawędzi */
        margin: 0; /* Usunięcie marginesów */
    }

    .header-cart-progress-fill {
        height: 100%; /* Wysokość wypełnienia */
        background: linear-gradient(to left, #e1001d 0%, #03294c 100%);
        border-radius: 4px; /* Dopasowanie zaokrąglenia */
    }

    .header-cart-progress-step {
        font-size: 13px; /* Pomniejszenie rozmiaru tekstu */
        text-align: center; /* Wyśrodkowanie tekstu */
        flex: 1; /* Równomierne rozmieszczenie kroków */
        margin: 0 5px; /* Dodanie odstępów między krokami */
        color: #7d7d7d; /* Subtelniejszy kolor tekstu */
        white-space: normal; /* Pozwolenie na zawijanie tekstu */
        overflow: visible; /* Wyłączenie ukrywania nadmiaru tekstu */
        text-overflow: clip; /* Usunięcie efektu "..." */
    }

    .header-cart-progress-step.active {
        font-size: 13px; /* Nieco większa czcionka dla aktywnego kroku */
        color: #000; /* Czarny kolor dla aktywnego kroku */
    }
}


@media (max-width: 768px) {
    .header-cart-container {
        flex-direction: column; /* Układ w kolumnie */
        align-items: center; /* Wyśrodkowanie elementów */
        width: 100%; /* Kontener zajmuje całą szerokość */
        padding: 0 10px; /* Dodatkowe odstępy po bokach */
    }

}


@media (max-width: 520px) {
 

    .header-cart-logo img {
        width: 180px; /* Jeszcze mniejsze logo */
        height: auto; /* Zachowanie proporcji */
        margin-bottom: 15px; /* Większy odstęp pod logo */
    }

    .header-cart-progress-container {
        align-items: flex-start; /* Pasek wyrównany do lewej */
        width: 100%; /* Kontener paska zajmuje całą szerokość */
        margin-top: 10px; /* Odstęp od logo */
        max-width: 100%;
    }

    .header-cart-progress {
        display: flex; /* Układ w wierszu */
        justify-content: space-between; /* Rozkład kroków */
        width: 100%; /* Pasek zajmuje całą szerokość */
        margin-bottom: 10px; /* Odstęp między krokami a paskiem */
        gap: 10px; /* Przerwa między tekstami */
    }

    .header-cart-progress-step {
        font-size: 13px; /* Pomniejszenie rozmiaru tekstu */
        text-align: center; /* Wyśrodkowanie tekstu */
        white-space: nowrap; /* Zapobiega łamaniu tekstu */
        margin: 0; /* Usunięcie marginesów */
    }

    .header-cart-progress-bar {
        width: 100%; /* Pasek zajmuje całą szerokość kontenera */
        height: 6px; /* Cieńszy pasek */
        background-color: #f2f2f2;
        border-radius: 4px; /* Zaokrąglenie krawędzi */
    }

    .header-cart-progress-fill {
        height: 100%;
        background: linear-gradient(to left, #e1001d 0%, #03294c 100%);
        border-radius: 4px;
    }
}


@media (max-width: 350px) {
    .header-cart-progress-step {
        font-size: 12px; /* Zmniejszenie rozmiaru tekstu */
    }
}

@media (max-width: 330px) {
    .header-cart-progress-bar {
        width: 100%; /* Skrócenie szerokości paska progresu */
   
    }

    .header-cart-progress-step {
        font-size: 11px; /* Jeszcze mniejszy rozmiar tekstu */
    }

    .header-cart-progress-step.active {
        font-size: 11px;
    }
} 



/* sekcja produktów *************************
************************************
*************************************
*************************************/



/* Sekcja produktów *************************
************************************
*************************************
*************************************/

.outer-container {
    padding: 20px;
    margin: 40px auto;
    max-width: 1600px;
}

/* Sekcja produktów */
.cart-container {
    display: flex;
    justify-content: space-between; /* Rozdziela kolumny */
    gap: 20px; /* Odstęp między kolumnami */
    flex-wrap: nowrap; /* Zapobiega zawijaniu kolumn */
    width: 100%;
    box-sizing: border-box; /* Uwzględnia padding w szerokości */
    align-items: flex-start; /* Zapewnia niezależną wysokość kolumn */
}



/* Wspólny kontener (prawa kolumna) */
.cart-right-and-payments {
    flex: 0 0 33%;
    max-width: 33%;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Odstęp między .cart-right a .footer-payments */
  }



.cart-left {
    flex: 1; /* Lewa kolumna zajmuje resztę dostępnego miejsca */
    max-width: 70%; /* Maksymalna szerokość */
    background-color: #f5f5f5;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
}

.cart-summary {
    margin-bottom: 20px;
}

.cart-summary-title {
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.cart-summary-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-summary-items {
    font-size: 14px;
    margin: 0;
    color: rgb(128, 128, 128);
}

.cart-summary-back {
    font-size: 14px;
    color: #333;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-weight: 500;
    margin-bottom: 10px;
}

.cart-summary-back i {
    margin-right: 5px; /* Dodaje odstęp między strzałką a tekstem */
    position: relative;
}

.cart-summary-back:hover span {
    color: #cc240f;
    text-decoration: underline;
}

.cart-products {
    padding-top: 20px; 
}

.cart-divider {
    border: none;
    border-top: 3px solid #fff; /* Kolor linii */
    margin: 0 -40px; /* Negatywny margines równoważący padding kontenera */
    width: calc(100% + 80px); /* Rozszerzenie szerokości o padding */
    margin-bottom: 10px;
}

.cart-product {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.cart-product-info {
    display: flex;
}

.cart-product-image {
    width: 100px;
    height: auto;
    margin-right: 15px;
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
}

.cart-product-details {
    font-size: 14px;
    margin: 20px 0 0 20px; /* Góra: 20px, Prawa: 0, Dół: 0, Lewa: 20px */
}


.cart-product-title a  {
    font-weight: 500;
    margin-bottom: 10px;
    color: #333;
}

.cart-product-title a:hover {
  text-decoration: underline;
}


.cart-product-code {
    margin-top: 5px;
    color: rgb(128, 128, 128);
    font-size: 14px;
    font-weight: 400;
}

.price-inline {
  font-size: 16px;
  color: #000;
  margin-left: 10px;
  font-weight: bold;
  display: none;
}

.cart-product-price {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Ensures spacing between price and quantity buttons */
    gap: 20px;
    margin-top: 20px;
}

.price {
    display: flex;
    align-items: baseline; /* Wyrównanie w linii */
    gap: 5px; /* Odstęp między liczbą a zł */
    white-space: nowrap; /* Zapobiega przełamaniu "195,00" i "zł" */
    flex-shrink: 0;
}

.price .value {
    font-size: 16px;
    font-weight: bold;
}

.price .currency {
    font-size: 12px;
    color: #000;
}

.cart-product-price {
    display: flex;
    align-items: center;
    gap: 15px; /* Odstęp między licznikiem a ikoną kosza */
    flex-shrink: 0; /* Nigdy nie ściskaj - cena zawsze w jednej linii */
}

.cart-product-quantity {
    display: flex;
    align-items: center;
    gap: 10px; /* Odstęp między przyciskami i polem */
    background-color: #fff; /* Białe tło */
    border-radius: 6px; /* Delikatne zaokrąglenie */
    padding: 5px 10px; /* Wewnętrzne odstępy */
}

.cart-product-quantity button {
    background-color: transparent; /* Przezroczyste tło */
    color: #000; /* Czarny tekst */
    border: none; /* Usuń obramowanie */
    cursor: pointer; /* Kursor wskazujący możliwość kliknięcia */
    font-size: 16px; /* Rozmiar tekstu */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px; /* Rozmiar przycisków */
    height: 20px;
    transition: color 0.3s, background-color 0.3s; /* Płynne przejścia na hover */
}

.cart-product-quantity-input {
    width: 40px; /* Szerokość pola */
    text-align: center; /* Wyrównanie tekstu */
    border: none; /* Usuń obramowanie */
    font-size: 14px; /* Rozmiar tekstu */
    background-color: transparent; /* Przezroczyste tło */
}

.cart-product-quantity-input:focus {
    outline: none; /* Usuń obramowanie */
}

.cart-product-delete {
    background: none; /* Bez tła */
    border: none; /* Bez obramowania */
    color: #ccc; /* Jasnoszary */
    cursor: pointer; /* Kursor wskazujący możliwość kliknięcia */
    font-size: 18px; /* Rozmiar ikony */
    transition: color 0.3s; /* Płynne przejście koloru */
}

.cart-product-delete:hover {
    color: #cc240f; /* Intensywny czerwony na hover */
}

.cart-right {
    background-color: #f5f5f5;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
  }


/* Punkt szerokości 1600px */
@media (max-width: 1600px) {
   
    .cart-input {
        font-size: 13px; /* Dostosowanie rozmiaru tekstu */
    }

    .cart-btn {
        padding: 8px 12px; /* Zmniejszenie paddingu w przycisku */
    }

    .checkout-btn {
        font-size: 15px; /* Pomniejszenie tekstu w przycisku */
        padding: 12px 15px;
    }
}

/* Punkt szerokości 1400px */


.cart-summary-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.cart-right {
    display: flex;
    flex-direction: column; /* Układ elementów w kolumnie */
    gap: 20px; /* Odstęp między wierszami */
}

.cart-right-row {
    display: flex;
    justify-content: space-between; /* Rozstrzelenie elementów w wierszu */
    align-items: center;
    gap: 10px; /* Odstęp między elementami w wierszu */
    width: 100%;

}

.cart-right-row span:first-child {
    color: rgb(128, 128, 128); /* Szary kolor dla pierwszych elementów (np. Wartość produktów, Dostawa, Czas wysyłki) */
    white-space: nowrap; /* Zapobiega łamaniu tekstu */
}

.cart-right-row:last-child span:first-child {
    color: #333; /* Czarny kolor tylko dla "Do zapłaty:" */
}



.cart-input-wrapper {
    display: flex; /* Układ w jednej linii dla inputa i przycisku */
    align-items: center; /* Wyrównanie w pionie */
    width: 100%; /* Pełna szerokość wiersza */
    gap: 0; /* Brak odstępu między inputem a przyciskiem */
}

.cart-input-wrapper input {
    flex-grow: 1; /* Input zajmuje maksymalną dostępną przestrzeń */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px 0 0 5px; /* Zaokrąglenie tylko po lewej stronie */
    font-size: 14px;
    box-sizing: border-box;
    outline: none; /* Usunięcie obramowania po kliknięciu */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.cart-input-wrapper button {
    flex-shrink: 0; /* Przyciski mają stałą szerokość */
    padding: 10px 16px;
    background: linear-gradient(to left, #e1001d 0%, #03294c 100%);
    color: #fff;
    border: none; /* Usunięcie obramowania */
    border-radius: 0 5px 5px 0; /* Zaokrąglenie tylko po prawej stronie */
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    outline: none !important; /* Wymuszenie usunięcia obramowania */
    box-shadow: none !important; /* Wymuszenie usunięcia cieni */
    transition: background-color 0.3s ease, transform 0.2s ease;
    appearance: none; /* Usunięcie stylów domyślnych */
}


/* Media Queries */

@media (max-width: 1400px) {
  
    .cart-input-wrapper input {
        width: 70%; /* Pomniejszenie szerokości inputu */
        padding: 10px; /* Dopasowanie paddingu */
        font-size: 12px; /* Mniejszy rozmiar tekstu */
    }

    .cart-input-wrapper button {
        font-size: 12px; /* Rozmiar tekstu na przycisku */
        padding: 10px 12px; /* Dopasowanie paddingu przycisku */
    }

}


/* Dodatkowe odstępy dla rozstrzelenia */
.cart-right-row span {
    flex: 1; /* Wyrównanie i zajęcie przestrzeni */
}

.cart-right-row .price-highlight {
    text-align: right; /* Wyrównanie ceny do prawej */
    font-weight: bold;
    white-space: nowrap; /* Zapobiega łamaniu tekstu */
}


.cart-right-row input:focus {
    border-color: #333; /* Border color on focus */
}

.cart-btn {
    padding: 10px 20px; /* Add padding for a balanced look */
    background: linear-gradient(to left, #e1001d 0%, #03294c 100%);
    color: #fff;
    border: none;
    border-radius: 0 5px 5px 0; /* Rounded right corners */
    font-size: 14px;
    font-weight: bold; /* Make text bold */
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Add hover transition */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px; /* Space for the arrow */
}

.cart-btn i {
    font-size: 16px; /* Increase arrow size */
    transition: transform 0.2s ease; /* Smooth rotation on hover */
}

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

.cart-btn:hover i {
    transform: translateX(5px); /* Move arrow slightly on hover */
}

.checkout-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    background: linear-gradient(to left, #e1001d 0%, #03294c 100%);
    border: none;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    margin-top: 20px;
    font-size: 16px;
    gap: 10px;
    border-radius: 25px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.checkout-btn i {
    transition: transform 0.2s ease;
}

.checkout-btn:hover {
    opacity: 0.9;
}

.checkout-btn:hover i {
    transform: translateX(5px); /* Move arrow slightly on hover */
}

.price-highlight {
    font-size: 1rem;
    font-weight: bold;
    color: #000;
}

.price-note {
    font-size: 0.875rem;
    color: #666;
}

/* Media Queries */
@media (max-width: 1600px) {
    .cart-product-title a {
        font-size: 15px;
    }


    .cart-product-price {
        white-space: nowrap; /* Zapobiega zawijaniu tekstu */
    }
    
    .price .value, .price .currency {
        white-space: nowrap; /* Dodatkowa ochrona przed zawijaniem w elementach ceny */
    }
    
}


@media (max-width: 1200px) {
    .cart-product-title a {
        font-size: 14px;
    }
}

.footer-payments {
    box-sizing: border-box;
    text-align: center;
  }

/* Nagłówek sekcji */
.footer-payments h3 {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
}

/* Ikony płatności */
.payments-icons {
    display: flex;
    justify-content: center; /* Wyśrodkowanie ikon */
    align-items: center;
    gap: 30px; /* Odstęp między ikonami */
    flex-wrap: wrap; /* Elastyczny układ dla mniejszych ekranów */
}

.payments-icons img {
    height: 30px; /* Wysokość ikon */
    max-width: 60px; /* Maksymalna szerokość */
    object-fit: contain; /* Zachowanie proporcji */
}


#cart-products-container{
    margin-top: 30px;
}

/* Media query dla ekranów poniżej 1200px */
@media (max-width: 1200px) {
    .payments-icons img {
        height: 24px; /* Pomniejszenie wysokości ikon */
        max-width: 50px; /* Pomniejszenie szerokości ikon */
    }
}



@media (max-width: 1050px) {
    .cart-container {
        flex-direction: column; 
        align-items: stretch; 
        gap: 20px;
      }
    
      .cart-left {
        width: 100%;
        max-width: 100%;
        flex: none;
        margin: 0;
        padding: 20px;
        box-sizing: border-box;
        background-color: #f5f5f5; /* Przywracamy tło */
        border-radius: 10px;
      }
    
      .cart-right-and-payments {
        width: 100%;
        max-width: 100%;
        flex: none;
        margin: 0;
        box-sizing: border-box;
        margin-top: 20px;
      }
    
      /* Jeśli w .cart-right chcesz mieć oddzielne tło, możesz to wstawić tutaj */
      .cart-right {
        background-color: #f5f5f5;
        border-radius: 10px;
        padding: 20px;
      }
      /* Sekcja płatności – bez tła, bez paddingu */
      .footer-payments {
        background: none;
        padding: 0; /* Lub 20px, jeśli chcesz tam odstęp */
      }

    /* Kontener kodu promocyjnego */
    .cart-input-wrapper {
        display: flex;
        align-items: center;
        gap: 0; /* Brak odstępu między inputem a przyciskiem */
        width: 100%; /* Dopasowanie szerokości do kontenera */
    }

    .cart-input-wrapper input {
        flex-grow: 1; /* Input zajmuje pozostałe miejsce */
        padding: 10px; /* Dopasowane odstępy wewnętrzne */
        border: 1px solid #ccc;
        border-right: none; /* Usuń obramowanie z prawej strony */
        border-radius: 5px 0 0 5px; /* Zaokrąglenie tylko z lewej strony */
        font-size: 14px;
    }

    .cart-input-wrapper button {
        flex-shrink: 0; /* Ustawienie stałej szerokości przycisku */
        padding: 10px 20px; /* Dopasowanie paddingu */
        color: #fff;
        font-size: 14px;
        border: none;
        border-radius: 0 5px 5px 0; /* Zaokrąglenie tylko z prawej strony */
        cursor: pointer;
    }

    /* Przycisk przejścia do kasy */
    .checkout-btn {
        font-size: 14px; /* Pomniejsz tekst */
        padding: 12px 16px; /* Zmniejsz padding */
        width: 100%; /* Dopasuj szerokość przycisku */
    }

    /* Sekcja płatności */
    .footer-payments {
        text-align: center;
        max-width: 100%;
        margin: 20px 0 0 0; /* Ustawienie tylko margin-top */
    }

    .footer-payments h3 {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin-bottom: 20px;
    }

    .payments-icons img {
        height: 24px;
        max-width: 60px;
    }
}



@media (max-width: 768px) {
    /* Kontener produktu */
    .cart-item {
        display: flex;
        flex-direction: row; /* Układ w wierszu */
        justify-content: space-between; /* Rozstaw elementów na całą szerokość */
        align-items: center; /* Wyrównanie w pionie */
        gap: 10px; /* Odstęp między elementami */
        padding: 10px 0; /* Wewnętrzne odstępy */
        border-bottom: 1px solid #ddd; /* Linia oddzielająca produkty */
    }

    #pc-cart-product-price{
        display: none !important;
    }




    /* Obraz produktu */
    .cart-item-image {
        flex-shrink: 0; /* Zatrzymuje zmianę rozmiaru */
        width: 60px; /* Stała szerokość */
        height: 60px; /* Stała wysokość */
    }

    .cart-item-image img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* Dopasowanie obrazu */
    }

    /* Szczegóły produktu */
    .cart-item-details {
        flex-grow: 1; /* Zajmuje resztę miejsca */
        display: flex;
        flex-direction: column; /* Elementy w kolumnie */
        gap: 5px; /* Odstęp między tekstami */
    }

    .cart-item-details h4 {
        font-size: 14px; /* Rozmiar tytułu */
        font-weight: bold;
        margin: 0;
    }

    .cart-item-details span {
        font-size: 12px; /* Rozmiar tekstu dla kodu */
        color: #333;
    }

    /* Cena i akcje */
    .cart-item-actions {
        display: flex;
        flex-direction: column; /* Elementy w kolumnie */
        align-items: flex-end; /* Wyrównanie do prawej */
        gap: 5px; /* Odstęp między elementami */
    }

    .cart-item-price {
        font-size: 14px; /* Rozmiar ceny */
        font-weight: bold;
    }

    .cart-item-quantity {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .cart-item-quantity button {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .cart-item-delete {
        font-size: 16px;
        color: #cc240f;
        cursor: pointer;
    }
}




@media (max-width: 768px) {

    .cart-product-image {
        width: 80px; /* Mniejsza szerokość zdjęcia */
        height: 80px; /* Mniejsza wysokość zdjęcia */
        object-fit: contain; /* Zachowanie proporcji zdjęcia */
        margin-right: 10px; /* Odstęp między zdjęciem a szczegółami */
        border-radius: 5px; /* Zaokrąglenie */
    }

    .cart-product {
        flex-direction: column; /* Układ w kolumnie */
        align-items: flex-start; /* Wyrównanie elementów do lewej */
    }

    .cart-product-price {
        display: flex;
        flex-direction: row; /* Układ w wierszu dla ceny, licznika i kosza */
        align-items: center; /* Wyrównanie w pionie */
        justify-content: space-between; /* Cena na lewo, reszta na prawo */
        width: 100%; /* Rozciągnięcie elementów na pełną szerokość */
        gap: 10px; /* Odstęp między elementami */
    }

    .cart-product-quantity {
        display: flex;
        align-items: center; /* Wyrównanie w pionie */
        justify-content: flex-end; /* Licznik wyrównany do prawej */
        margin-left: auto; /* Przesunięcie licznika na prawo */
    }

    .cart-product-delete {
        margin-left: 10px; /* Odstęp między licznikiem a koszem */
        align-self: center; /* Wyrównanie kosza do środka */
    }

    .cart-product-price .price {
        margin-right: auto; /* Cena pozostaje po lewej stronie */
    }

    
    .cart-product-details {

        margin: auto;
      }


      .cart-summary-back {
        margin-bottom: auto;
      }


      .cart-right-row span, 
      .cart-right-row .price-highlight {
          font-size: 16px; /* Pomniejszenie tekstów */
      }
  
      .cart-right-row span:first-child {
          font-size: 16px; /* Dodatkowo pomniejsz lewy tekst, np. "Wartość produktów" */
      }

}






@media (max-width: 500px) {
    .cart-product {
        gap: 10px; /* Odstęp między zdjęciem a szczegółami */
        padding: 10px 0; /* Odstęp wokół elementów */
    }

    .cart-product-image {
        width: 70px; /* Mniejsza szerokość zdjęcia */
        height: 70px; /* Mniejsza wysokość zdjęcia */
        object-fit: contain; /* Zachowanie proporcji zdjęcia */
        margin-right: 10px; /* Odstęp między zdjęciem a szczegółami */
        border-radius: 5px; /* Zaokrąglenie */
    }

    .cart-product-details {
        display: flex;
        flex-direction: column; /* Ułożenie tekstu w kolumnie */
        justify-content: flex-start; /* Wyrównanie tekstu do góry */
        font-size: 13px; /* Rozmiar tekstu */
        line-height: 1.4; /* Większy odstęp między liniami tekstu */
    }

    .cart-product-title a {
        font-size: 13px; /* Rozmiar tekstu tytułu */
        margin: 0; /* Usuń marginesy */
    }

    .cart-product-price {
        display: flex;
        flex-direction: row; /* Układ w wierszu */
        align-items: center; /* Wyrównanie elementów w pionie */
        justify-content: flex-end; /* Cena, licznik i kosz po prawej stronie */
        gap: 10px; /* Odstęp między elementami */
    }


    .cart-product-details {
        font-size: 13px;
        margin: auto;
      }

      .cart-product-quantity-input {
        width: 20px;
      }

      .cart-summary-items{
        font-size: 13px;
      }

      .cart-summary-back {
        font-size: 14px;
      }
}

@media (max-width: 500px) {


    
    .cart-input-wrapper input {
        width: 70%; /* Pomniejszenie szerokości inputu */
        padding: 10px; /* Dopasowanie paddingu */
        font-size: 12px; /* Mniejszy rozmiar tekstu */
    }

    .cart-input-wrapper button {
        font-size: 12px; /* Rozmiar tekstu na przycisku */
        padding: 10px 12px; /* Dopasowanie paddingu przycisku */
    }


    .cart-summary-title {
        font-size: 1.2rem;
      }
    
    .cart-right-row span, 
    .cart-right-row .price-highlight {
        font-size: 14px; /* Pomniejszenie tekstów */
    }

    .cart-right-row span:first-child {
        font-size: 14px; /* Dodatkowo pomniejsz lewy tekst, np. "Wartość produktów" */
    }

    .cart-right-row .price-highlight {
        font-weight: bold; /* Zachowanie wyrazistości dla wartości */
    }

    .payments-icons img {
        height: 24px;
        max-width: 40px;
      }
}



@media (max-width: 370px) {
    .cart-summary-back {
        font-size: 12px;
      }
}




.carousel-wrapper {
    max-width: 100%;
    display: flex;
    justify-content: center;
    padding: 40px 0;
    background-color: #f5f5f5;
    margin: 20px;
    border-radius: 25px;
}

.carousel-container {
    width: 100%;
    max-width: 1500px;
    margin: 0;
    text-align: center;
    position: relative;
    border-radius: 12px;
    padding: 20px;
}

.carousel-wrapper h2 {
    margin-bottom: 20px;
    font-size: 1.75em;
    font-weight: 600;
    text-align: left;
    margin-left: 10px;
}

.carousel {
    display: flex;
    overflow: hidden;
    scroll-behavior: smooth;
    gap: 15px;
    padding: 10px;
    justify-content: flex-start;
}



/* Pojedynczy produkt */

/* Wyśrodkowanie zdjęcia */
.carousel-item {
    flex: 0 0 calc((100% / 4) - 15px); /* 5 kart na pełną szerokość */
    height: 100%; /* Zmniejszona wysokość */
    box-sizing: border-box;
    border-radius: 8px;
    padding: 16px;
    background-color: white;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s
}



/* Wyśrodkowanie obrazka */
.carousel-item img {
    width: auto; /* Szerokość dostosowuje się do zawartości */
    max-width: 200px; /* Maksymalna szerokość */
    height: 250px; /* Ustalona wysokość */
    object-fit: contain; /* Dopasowanie proporcji */
    margin: auto; /* Wyśrodkowanie poziome i pionowe */
}

.producer-title{
    text-align: left;
    margin-bottom: 5px;
    color: #4a5568;
    font-size: 0.9rem;
    white-space: nowrap;
}

.carousel-item h3 {
    font-size: 1em;
    margin: 0 0 10px;
    flex-grow: 1;
    text-align: left;
}

.product-price {
    font-size: 1em;
    font-weight: 400;
    color: #333;
    margin-bottom: 10px;
    text-align: left;
}

.add-to-cart {
    padding: 10px 20px; /* Add padding for a balanced look */
    background: linear-gradient(to left, #e1001d 0%, #03294c 100%);
    color: #fff;
    border: none;
    border-radius: 25px;
    font-size: 14px;
    font-weight: bold; /* Make text bold */
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Add hover transition */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px; /* Space for the arrow */
}

.add-to-cart:hover {
  opacity: 0.9;
}

.product-title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    display: flex;
    align-items: center;
  }

/* Efekt hover na karcie */
.carousel-item:hover {
    transform: scale(1.03);
}

/* Strzałki nawigacyjne */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.1); /* Półprzezroczyste tło */
    border: none;
    padding: 5px; /* Padding dla okrągłego przycisku */
    border-radius: 50%; /* Okrągły kształt */
    cursor: pointer;
    opacity: 0.7; /* Początkowa przezroczystość */
    transition: opacity 0.3s ease, background-color 0.3s ease; /* Płynna zmiana tła i przezroczystości */
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-btn svg {
    width: 24px;
    height: 24px;
    fill: rgba(0, 0, 0, 1); /* Kolor ikonki */
}

/* Efekt hover dla strzałek */
.carousel-btn:hover {
   opacity: 0.9;
}

/* Pozycjonowanie strzałek */
.prev-btn {
    left: 10px;
}

.next-btn {
    right: 10px;
}

/* Responsywność */
@media (max-width: 1600px) {
    .carousel-item {
        flex: 0 0 calc((100% / 4) - 15px); /* 4 karty */
    }
}

@media (max-width: 1200px) {
    .carousel-item {
        flex: 0 0 calc((100% / 3) - 15px); /* 3 karty */
    }
}

@media (max-width: 1050px) {
    .carousel-item {
        flex: 0 0 calc((100% / 2) - 15px); /* 2 karty */
        height: 450px;
    }

    .carousel-btn {
        font-size: 1.5em;
    }

    .carousel-item img {
        width: auto;
        max-width: 170px;
        height: 250px;
        object-fit: contain;
        margin: auto;
      }

      .carousel-wrapper h2 {
        font-size: 1.4em;
    }

    .carousel-item:hover {
        transform: none; /* Usuwa efekt skalowania */
    }
}


@media (max-width: 768px) {
    .carousel-item {
        flex: 0 0 calc((100% / 2) - 15px); /* 2 karty */
        height: 100%;
    }

    .carousel-item img {
        width: auto;
        max-width: 170px;
        height: 250px;
        object-fit: contain;
        margin: auto;
      }

      .carousel-wrapper h2 {
        font-size: 1.2em;
    }
    
}



@media (max-width: 650px) {
    .carousel-item {
        flex: 0 0 calc((100% / 1) - 15px); /* 2 karty */
        height: 100%;
    }

    .carousel-btn {
        font-size: 1.5em;
    }
}





@media (max-width: 400px) {
    .carousel-item img {
        width: auto;
        max-width: 150px;
        height: 250px;
        object-fit: contain;
        margin: auto;
      }
}





@media (max-width: 330px) {
 .add-to-cart{
   font-size: 12px;
 }

 .price-highlight small {
    display: block; /* Wymusi przeniesienie "brutto" do osobnej linii */
    margin-left: 0; /* Zlikwiduj ewentualny margines */
    margin-top: -2px; /* Opcjonalnie dopasuj odstęp pionowy */
  }

}



/* Stopka koszyka */
.footer-cart {
    background-color: #111; /* Kolor tła */
    color: #aaa; /* Kolor tekstu */
    text-align: center; /* Wyśrodkowanie zawartości */
    padding: 15px 10px; /* Odstęp wewnętrzny */
    font-size: 14px; /* Rozmiar czcionki */
    font-family: Arial, sans-serif; /* Czcionka */
}

.footer-cart-text {
    margin: 0; /* Usuń domyślny margines */
}

.footer-link {
    color: #fff; /* Kolor linku */
    text-decoration: none; /* Usuń podkreślenie */
    font-weight: 400; /* Pogrubienie */
}

.footer-link:hover {
    text-decoration: underline; /* Podkreślenie po najechaniu */
}


ol li span {
    display: none;
}