/* ==============================================================================
 * BENTO CART STYLES - ZŁOTY STANDARD
 * ==============================================================================
 * Plik: bento-cart.css
 * Opis: Style specyficzne dla koszyka i procesu zamówienia (Checkout).
 * SPIS TREŚCI:
 * 1. KOSZYK + TOUCHSPIN — Globalny widget licznika ilości
 * 2. KOSZYK — Layout Bento Grid
 * 3. KOSZYK — Lista produktów (linie koszyka)
 * 4. KOSZYK — Podsumowanie / Suma / Kody rabatowe
 * ============================================================================== */

/*    7. KOSZYK + TOUCHSPIN — Globalny widget licznika ilości */
/* ============================================================ */

/* [SUGESTIA] Przenieść do kategorii: Komponenty > Widget TouchSpin (licznik ilości) */

body#cart .bootstrap-touchspin,
body#product .bootstrap-touchspin {
    display: flex !important;              /* Przyciski i input w jednym rzędzie */
    flex-direction: row !important;        /* Poziomy układ: [-] [liczba] [+] */
    align-items: center !important;        /* Pionowe wycentrowanie */
    justify-content: center !important;    /* Centrowanie bez odstępów (gap nie działa z display:contents children) */
    background: var(--btx-bg-input) !important; /* Szare tło obwiedni spinnera */
    border-radius: var(--btx-radius-pill) !important; /* Pigułka */
    padding: 3px !important;               /* Margines wewnętrzny dla przycisków */
    height: 40px !important;              /* Stała wysokość spinnera */
    width: 104px !important;              /* Idealne: 34 (-) + 30 (input) + 34 (+) + 6 (padding) = 104px */
    border: none !important;              /* Brak obramowania kontenera */
    box-sizing: border-box !important;    /* Padding wliczony w wymiary */
    box-shadow: none !important;          /* Zabicie niechcianych cieni kontenera */
    overflow: visible !important;         /* Pozwala cieniom przycisków naturalnie opadać */
}

body#cart .bootstrap-touchspin .input-group-btn-vertical,
body#product .bootstrap-touchspin .input-group-btn-vertical,
body#cart .bootstrap-touchspin .input-group-btn,
body#product .bootstrap-touchspin .input-group-btn {
    display: contents;                     /* Sprawia, że wrappery Bootstrap "znikają" — ich dzieci stają się bezpośrednimi dziećmi flex kontenera */
    position: static;                      /* Reset pozycjonowania */
    width: auto;                           /* Reset szerokości */
}

body#cart .bootstrap-touchspin .btn,
body#product .bootstrap-touchspin .btn {
    position: static !important;           /* Reset pozycjonowania Bootstrap */
    width: 34px !important;               /* Stała szerokość przycisku [-]/[+] */
    height: 34px !important;              /* Stała wysokość przycisku */
    border-radius: 50% !important;        /* Okrągły przycisk (kółko) */
    background: var(--btx-bg-tile) !important; /* Białe tło przycisku (kafelek w kafelku) */
    border: none !important;              /* Brak obramowania */
    box-shadow: var(--btx-shadow-tile) !important; /* Delikatny cień unoszący przycisk */
    display: flex !important;             /* Centrowanie znaku +/- */
    align-items: center !important;       /* Pionowe wycentrowanie */
    justify-content: center !important;   /* Poziome wycentrowanie */
    color: var(--btx-text-primary) !important; /* Ciemny kolor znaku */
    padding: 0 !important;               /* Brak paddingu — wymiary kontrolowane przez width/height */
    margin: 0 !important;                /* Brak marginesów */
    cursor: pointer !important;           /* Kursor wskazujący interaktywność */
    flex-shrink: 0 !important;           /* Przycisk nie zmniejsza się */
}

body#cart .bootstrap-touchspin .btn i,
body#product .bootstrap-touchspin .btn i,
body#cart .bootstrap-touchspin .btn svg,
body#product .bootstrap-touchspin .btn svg {
    display: none;                         /* Ukrycie natywnych ikon Presty — zastąpione przez ::after */
}

body#cart .bootstrap-touchspin .bootstrap-touchspin-down::after,
body#product .bootstrap-touchspin .bootstrap-touchspin-down::after {
    content: "-";                          /* Znak minus przez pseudoelement */
    font-size: 18px;                       /* Rozmiar znaku */
    font-weight: 600;                      /* Pogrubienie */
    line-height: 1;                        /* Bez dodatkowych odstępów */
}

body#cart .bootstrap-touchspin .bootstrap-touchspin-up::after,
body#product .bootstrap-touchspin .bootstrap-touchspin-up::after {
    content: "+";                          /* Znak plus przez pseudoelement */
    font-size: 18px;                       /* Rozmiar znaku */
    font-weight: 600;                      /* Pogrubienie */
    line-height: 1;                        /* Bez dodatkowych odstępów */
}

body#cart .bootstrap-touchspin .bootstrap-touchspin-down,
body#product .bootstrap-touchspin .bootstrap-touchspin-down {
    order: 1;                              /* Przycisk [-] jako pierwszy w flex order */
}

body#cart .bootstrap-touchspin input.js-cart-line-product-quantity,
body#product .bootstrap-touchspin input.qty {
    order: 2 !important;                  /* Input w środku (między przyciskami) */
    flex: 1 !important;                   /* Zajmuje całe wolne miejsce między przyciskami */
    width: 0 !important;                  /* Pozwala flex-grow działać (override domyślnej szerokości inputa) */
    min-width: 30px !important;           /* Minimum 30px — widoczna liczba */
    text-align: center !important;        /* Wycentrowanie liczby */
    border: none !important;              /* Brak obramowania */
    background: transparent !important;  /* Transparentne tło — widać tło spinnera */
    font-weight: 700 !important;          /* Pogrubiona liczba */
    font-size: var(--btx-text-md) !important; /* 15px */
    padding: 0 !important;               /* Brak paddingu — flex zarządza rozmiarem */
    margin: 0 !important;                /* Brak marginesów */
    box-shadow: none !important;         /* Reset box-shadow Bootstrap */
}

body#cart .bootstrap-touchspin .bootstrap-touchspin-up,
body#product .bootstrap-touchspin .bootstrap-touchspin-up {
    order: 3;                              /* Przycisk [+] jako ostatni w flex order */
}

/* Ujednolicenie steppera koszyka z wyglądem ze strony produktu:
   biała pigułka z ramką, szare okrągłe przyciski 42px */
body#cart .bootstrap-touchspin {
    background: #ffffff !important;        /* Białe tło pigułki (jak na produkcie) */
    border: 1px solid var(--btx-border-color) !important; /* Ramka pigułki */
    border-radius: var(--btx-radius-pill) !important;
    box-sizing: border-box !important;    /* Wysokość total = 40px (padding+border wliczone) */
    height: 40px !important;              /* MD — subtelniejszy stepper */
    min-height: 40px !important;
    max-height: 40px !important;
    width: auto !important;               /* Auto — przyciski + input decydują o szerokości */
    padding: 3px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

body#cart .bootstrap-touchspin .btn {
    width: 32px !important;               /* Mieści się w 40px border-box pigułce (40-6 padding-2 border) */
    height: 32px !important;
    margin: 0 !important;                 /* Równy inset dookoła (padding pigułki) */
    background: var(--btx-bg-input) !important; /* Szare tło przycisku */
    color: var(--btx-text-secondary) !important;
    box-shadow: none !important;          /* Bez cienia — płaski styl produktowy */
}

@media (hover: hover) {
    body#cart .bootstrap-touchspin .btn:hover {
        background: var(--btx-border-color) !important;
        color: var(--btx-color-primary) !important;
    }
}

body#cart .bootstrap-touchspin input.js-cart-line-product-quantity {
    min-width: 40px !important;           /* Szersze pole liczby — dopasowane do większej pigułki */
    color: var(--btx-text-primary) !important;
}


/* ============================================================
   7a. KOSZYK — Layout Bento Grid
   ============================================================ */

/* [SUGESTIA] Przenieść do kategorii: Layout (Grid / Flexbox / pozycjonowanie) > Koszyk - grid dwukolumnowy */

/* Wypełnienie ekranu — stopka schodzi poniżej widoku po załadowaniu */
body#cart .btx-cart-page {
    min-height: calc(100vh - var(--btx-header-height, 120px));
}

body#cart .btx-bento-grid {
    display: grid;                         /* Dwukolumnowy layout koszyka */
    grid-template-columns: minmax(0, 1fr) 420px; /* Lewa: lista produktów (flex), Prawa: podsumowanie (420px) */
    gap: var(--btx-gap-lg);               /* 24px odstęp między kolumnami */
    align-items: start;                    /* Kolumny wyrównane od góry */
    margin-bottom: 60px;                   /* Przestrzeń pod layoutem koszyka */
}

/* "Wróć do zakupów" — desktop: pod kaflem koszyka (kolumna 1);
   mobile: i tak ostatni w stacku, czyli pod podsumowaniem (2. kaflem). */
body#cart .btx-continue-wrap {
    grid-column: 1;
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

body#cart .btx-grid-col-right {
    align-self: start;                     /* Wyrównanie do góry, równo z lewą kolumną */
    display: flex;                         /* Kafelki w kolumnie */
    flex-direction: column;                /* Pionowy układ */
    gap: var(--btx-gap-lg);               /* 24px odstęp między kafelkami */
    z-index: 10;                           /* Nad lewą kolumną */
}

body#cart .btx-grid-col-left {
    display: flex;                         /* Lista produktów w kolumnie */
    flex-direction: column;                /* Pionowy układ */
    gap: var(--btx-gap-lg);               /* 24px odstęp między kafelkami */
}


/* ============================================================
   7b. KOSZYK — Responsive
   ============================================================ */

/* [SUGESTIA] Przenieść do kategorii: Responsywność (Media Queries) > Koszyk grid */

@media (max-width: 1200px) {
    body#cart .btx-bento-grid {
        grid-template-columns: minmax(0, 1fr) 350px; /* Węższa prawa kolumna na średnich ekranach */
    }
}

@media (max-width: 991px) {
    body#cart .btx-bento-grid {
        grid-template-columns: 1fr;        /* Jedna kolumna na mobile */
        padding: 0 16px;                   /* Ochrona przed krawędziami ekranu */
    }
    body#cart .btx-grid-col-right {
        position: static;                  /* Wyłączenie sticky na mobile */
    }
}


/* ============================================================
   7c. KOSZYK — Lista produktów (linie koszyka)
   ============================================================ */

/* [SUGESTIA] Przenieść do kategorii: Komponenty > Koszyk > Linia produktu */

body#cart .cart-container .cart-item {
    padding: var(--btx-gap-lg) 0;         /* 24px padding pionowy linii produktu */
    border-bottom: 1px solid var(--btx-border-color); /* Zwykła linia rozdzielająca produkty */
}

body#cart .cart-container .cart-item:first-child {
    border-top: 1px solid var(--btx-border-color); /* Separator nad pierwszym produktem */
}

body#cart .cart-container .cart-item:last-child {
    border-bottom: none;                   /* Brak linii pod ostatnim produktem */
}

/* ── LINIA PRODUKTU KOSZYKA (czysty flex, bez zagnieżdżonego Bootstrapa) ──
   [obraz] [nazwa/atrybuty] —— [stepper] [cena linii] [kosz] */
body#cart .btx-cart-line {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    width: 100% !important;
    padding: 16px 0 !important;            /* Równy pionowy inset linii */
}

/* Obraz */
body#cart .btx-cart-line-img {
    flex: 0 0 96px !important;
    width: 96px !important;
    max-width: none !important;            /* Reset Bootstrap col */
    padding: 0 !important;
}

body#cart .btx-cart-line-img .product-image {
    display: block !important;
}

body#cart .btx-cart-line-img img {
    width: 96px !important;
    height: 96px !important;
    object-fit: contain !important;
    border-radius: var(--btx-radius-lg) !important;
    border: 1px solid var(--btx-border-color) !important;
    background: #fff !important;
}

/* Mobile: mniejsze zdjęcie (oszczędność miejsca) */
@media (max-width: 768px) {
    body#cart .btx-cart-line-img {
        flex: 0 0 72px !important;
        width: 72px !important;
    }
    body#cart .btx-cart-line-img img {
        width: 72px !important;
        height: 72px !important;
    }
}

/* Treść: nazwa + atrybuty */
body#cart .btx-cart-line-body {
    flex: 1 1 auto !important;
    min-width: 0 !important;               /* Pozwala name'owi się skracać zamiast rozpychać */
    max-width: none !important;
    padding: 0 !important;
}

/* Nazwa produktu (tylko link a.label, NIE etykiety atrybutów) */
body#cart .btx-cart-line-body a.label {
    display: block !important;
    font-size: var(--btx-text-md) !important;
    font-weight: 700 !important;
    color: var(--btx-text-primary) !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
}

/* Atrybuty: etykieta + wartość w jednej linii, subtelne */
body#cart .btx-cart-line-body .product-line-info {
    margin-top: 3px !important;
    font-size: var(--btx-text-xs) !important;
    line-height: 1.4 !important;
}

body#cart .btx-cart-line-body .product-line-info span.label {
    display: inline !important;
    font-weight: 500 !important;
    color: var(--btx-text-muted) !important;
}

body#cart .btx-cart-line-body .product-line-info span.value {
    display: inline !important;
    font-weight: 700 !important;
    color: var(--btx-text-secondary) !important;
    margin-left: 4px !important;
}

body#cart .btx-cart-line-discount {
    margin-top: 4px !important;
    font-size: var(--btx-text-xs) !important;
}

body#cart .btx-cart-line-discount .regular-price {
    text-decoration: line-through !important;
    color: var(--btx-text-muted) !important;
    margin-right: 6px !important;
}

body#cart .btx-cart-line-discount .discount {
    color: var(--btx-color-danger) !important;
    font-weight: 700 !important;
}

/* Link personalizacji */
body#cart .btx-cart-line-body .customization-modal ~ a,
body#cart .btx-cart-line-body > a[data-toggle="modal"],
body#cart .btx-cart-line-body a[data-target^="#product-customizations"] {
    display: inline-block !important;
    margin-top: 4px !important;
    font-size: var(--btx-text-xs) !important;
    color: var(--btx-color-primary) !important;
    font-weight: 600 !important;
}

/* Akcje: stepper + cena + kosz, wyrównane do prawej, równe odstępy */
body#cart .btx-cart-line-actions {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    max-width: none !important;
    padding: 0 !important;
}

body#cart .btx-cart-line-qty {
    flex: 0 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* Touchspin wyśrodkowany pionowo w linii (reset inline vertical-align) */
body#cart .btx-cart-line-actions .bootstrap-touchspin {
    vertical-align: middle !important;
}

/* Cena linii (total) */
body#cart .btx-cart-line-price {
    flex: 0 0 auto !important;
    min-width: 90px !important;
    height: 40px !important;               /* Równa wysokość ze stepperem/koszem */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    line-height: 1 !important;
    font-size: var(--btx-text-lg) !important;
    font-weight: 800 !important;
    color: var(--btx-text-primary) !important;
    white-space: nowrap !important;
}

body#cart .btx-cart-line-actions .cart-line-product-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    height: 40px !important;                /* Równo ze stepperem/ceną — kosz nie spada w dół */
    margin: 0 !important;
    padding: 0 !important;
}

body#cart .btx-cart-line-actions .cart-line-product-actions .remove-from-cart {
    margin: 0 !important;
    align-self: center !important;
}

body#cart .btx-cart-line-actions .cart-line-product-actions .remove-from-cart .material-icons {
    display: block !important;
    line-height: 1 !important;
}

/* Kosz — wyrównany rozmiarem do pigułki steppera (40px MD) */
body#cart .cart-line-product-actions .remove-from-cart.btx-btn-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
}

/* Bazowy wygląd kosza pochodzi z .btx-btn-icon (uikit).
   Tu tylko czerwony hover sygnalizujący usuwanie. */
@media (hover: hover) {
    body#cart .cart-line-product-actions .remove-from-cart.btx-btn-icon:hover {
        background: var(--btx-color-danger-light) !important; /* Jasnoczerwone tło przy hover */
        border-color: var(--btx-color-danger) !important;     /* Czerwona ramka */
        color: var(--btx-color-danger) !important;            /* Czerwona ikona kosza */
    }
}


/* ============================================================
   7d. KOSZYK — Responsive linie produktów
   ============================================================ */

/* [SUGESTIA] Przenieść do kategorii: Responsywność (Media Queries) > Koszyk - linie produktów */

@media (max-width: 768px) {
    /* Mobile: zwarty grid — obraz po lewej (spanuje 2 rzędy),
       treść (nazwa/atrybuty/cena) prawy-górny, akcje (stepper|cena|kosz) prawy-dolny.
       Akcje wyrównane pod treścią, nie pod obrazem. */
    body#cart .btx-cart-line {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 72px 1fr !important;
        grid-template-areas:
            "img body"
            "actions actions" !important;
        column-gap: 14px !important;
        row-gap: 14px !important;
        align-items: start !important;
        padding: 16px 0 !important;
    }
    body#cart .btx-cart-line-img {
        grid-area: img !important;
    }
    body#cart .btx-cart-line-body {
        grid-area: body !important;
        padding-right: 90px !important; /* miejsce na cenę w prawym górnym rogu */
    }
    /* Cena w prawym górnym rogu linii */
    body#cart .btx-cart-line-price {
        position: absolute !important;
        top: 16px !important;
        right: 0 !important;
        min-width: 0 !important;
        height: auto !important;
    }
    /* Akcje w dolnym rzędzie: stepper po lewej, kosz po prawej (cena wyjęta z rzędu) */
    body#cart .btx-cart-line-actions {
        grid-area: actions !important;
        width: 100% !important;
        margin-left: 0 !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }
}


/* ============================================================
   7e. KOSZYK — Podsumowanie / Suma
   ============================================================ */

/* [SUGESTIA] Przenieść do kategorii: Komponenty > Koszyk > Podsumowanie i suma */

body#cart .btx-summary-lines {
    display: flex;                         /* Linie podsumowania w kolumnie */
    flex-direction: column;                /* Pionowy układ */
    gap: var(--btx-gap-sm);               /* 10px odstęp między liniami */
    margin-bottom: var(--btx-gap-md);     /* 16px pod listą linii */
}

body#cart .btx-summary-line {
    display: flex;                         /* Etykieta i wartość w jednej linii */
    flex-wrap: wrap;                       /* Hook szczegółów dostawy spada do nowej linii */
    align-items: center;                   /* Pionowe wycentrowanie */
    padding: 6px 0;                        /* Mały pionowy padding */
}

body#cart .btx-summary-line .label {
    color: var(--btx-text-secondary);     /* Szary kolor etykiety */
    font-size: var(--btx-text-sm);        /* 13px */
    font-weight: 500;                      /* Medium */
}

/* Pierwsza wartość zawsze przy prawej krawędzi (margin auto wypycha ją w prawo,
   niezależnie od dodatkowego 3. dziecka — hooka szczegółów dostawy przy wysyłce) */
body#cart .btx-summary-line > .value {
    margin-left: auto;
    font-weight: 800;                      /* Extra bold — wyróżniona kwota */
    color: var(--btx-text-primary);       /* Ciemny kolor */
}

/* Hook szczegółów dostawy (małe info pod wysyłką) — pełna szerokość, pod spodem */
body#cart .btx-summary-line > div {
    flex: 0 0 100%;
    text-align: right;
}

/* Reset klasykowego card-block paddingu — "Razem"/separator równo z resztą podsumowania */
body#cart .cart-summary-totals,
body#cart .cart-voucher,
body#cart .cart-voucher .promo-code {
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body#cart .cart-summary-totals .cart-total {
    display: flex;                         /* Etykieta "Razem" i kwota w jednej linii */
    justify-content: space-between;        /* Po przeciwnych stronach */
    align-items: center;                   /* Pionowe wycentrowanie */
    border-top: 1px solid var(--btx-border-color); /* Zwykła linia nad sumą */
    padding-top: var(--btx-gap-md);       /* 16px nad sumą */
    margin-top: var(--btx-gap-sm);        /* 10px margines */
    margin-bottom: var(--btx-gap-lg);     /* 24px pod sumą */
}

body#cart .cart-summary-totals .cart-total .label {
    font-size: var(--btx-text-md);        /* 15px etykieta "Razem" */
    font-weight: 800;                      /* Extra bold */
    color: var(--btx-text-primary);       /* Ciemny kolor */
}

body#cart .cart-summary-totals .cart-total .value {
    font-size: var(--btx-text-xl);        /* 22px — dominująca kwota finalna */
    font-weight: 900;                      /* Najgrubszy — główny akcent */
    color: var(--btx-color-primary);      /* Niebieski */
}


/* ============================================================
   7f. KOSZYK — Sekcja rabatowa (kody voucher)
   ============================================================ */

/* [SUGESTIA] Przenieść do kategorii: Komponenty > Koszyk > Voucher / Rabaty */

body#cart .btx-block-promo {
    border: none;                          /* Bez ramki — sekcja zlewa się z kafelkiem */
    background: transparent;               /* Bez tła */
    border-radius: 0;
    padding: 0;
    margin-bottom: var(--btx-gap-lg);     /* 24px pod sekcją */
}

/* Mobile: większy odstęp między polem kodu a "Przejdź do kasy" (touch-safe) */
@media (max-width: 768px) {
    body#cart .btx-block-promo {
        margin-bottom: 28px !important;
    }
}

/* Sekcja vouchera — równe pionowe odstępy między elementami
   (zastosowany kupon ↔ pole kodu ↔ błąd) */
body#cart .cart-voucher {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body#cart .cart-voucher .promo-code {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

body#cart .btx-promo-form {
    width: 100%;
}

/* Błąd vouchera — subtelny inline (jak .btx-input-error przy logowaniu),
   zamiast wielkiego czerwonego boxa Bootstrapa. NIE nadpisujemy display,
   żeby JS mógł go chować/pokazywać. */
body#cart .cart-voucher .alert.js-error {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 0 0 12px !important;
    margin: 0 !important;
    color: var(--btx-color-danger) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

body#cart .cart-voucher .alert.js-error .material-icons {
    font-size: 14px !important;
    color: var(--btx-color-danger) !important;
    vertical-align: middle !important;
    margin-right: 4px !important;
}

/* Pole kodu robi się czerwone przy błędzie (jak .is-invalid przy logowaniu).
   Stan błędu sygnalizuje klasa .btx-voucher-invalid dodawana przez JS, który
   też wrzuca treść błędu do placeholdera pola. */
body#cart .btx-promo-pill-wrap:has(.btx-promo-pill-input.btx-voucher-invalid) {
    border-color: var(--btx-color-danger) !important;
    background: var(--btx-color-danger-light) !important;
}

body#cart .btx-promo-pill-input.btx-voucher-invalid::placeholder {
    color: var(--btx-color-danger) !important;
    opacity: 1 !important;
}

body#cart .btx-promo-pill-wrap {
    display: flex;
    align-items: center;
    background: var(--btx-bg-input);
    border: 1px solid var(--btx-border-color);
    border-radius: var(--btx-radius-pill);
    height: 40px;
    padding: 0 4px 0 0;
    gap: 0;
}

body#cart .btx-promo-pill-input {
    flex: 1;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 16px !important;
    margin: 0 !important;
    font-size: var(--btx-text-body) !important; /* 14px — jak input logowania */
    color: var(--btx-text-secondary);
    height: 100% !important;
}

body#cart .btx-promo-pill-input:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

body#cart .btx-promo-pill-input::placeholder {
    color: var(--btx-text-muted);
}

body#cart .btx-promo-pill-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    box-sizing: border-box;
    padding: 0 16px !important;
    background: var(--btx-text-primary);
    color: #fff;
    border: none;
    border-radius: var(--btx-radius-pill);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    letter-spacing: 0.05em;
    line-height: 1;
}

body#cart .btn-btx-add {
    background: var(--btx-text-secondary); /* Szary przycisk "Dodaj" (drugorzędny) */
    color: var(--btx-text-on-primary);    /* Biały tekst */
    border: none;                          /* Brak obramowania */
    border-radius: var(--btx-radius-lg);  /* 14px zaokrąglenie */
    padding: 0 18px;                       /* Poziomy padding */
    font-weight: 700;                      /* Pogrubiony tekst */
    font-size: var(--btx-text-xs);        /* 11px — mały tekst przycisku */
    text-transform: uppercase;             /* Wielkie litery */
    cursor: pointer;                       /* Kursor */
    transition: background var(--btx-transition-fast); /* Animacja hover */
}

body#cart .btn-btx-add:hover {
    background: var(--btx-text-primary);  /* Ciemniejszy kolor przy hover */
}

body#cart .btx-promo-list,
body#cart .promo-name {
    list-style: none;                      /* Brak punktorów listy aktywnych kodów */
    padding: 0;                            /* Reset paddingu */
    margin: 0 !important;                 /* Reset marginesów (spacing zarządzany przez rodzica) */
    display: flex;                         /* Elementy w kolumnie */
    flex-direction: column;                /* Pionowy układ */
    gap: 8px;                              /* 8px odstęp między kodami */
}

body#cart .btx-promo-pill {
    display: flex;                         /* Etykieta kodu i przycisk usunięcia w jednej linii */
    justify-content: space-between;        /* Po przeciwnych stronach */
    align-items: center;                   /* Pionowe wycentrowanie */
    background: var(--btx-color-success-light); /* Jasnozielone tło — wizualny sukces/potwierdzenie */
    border: var(--btx-border-width) solid transparent; /* Transparentna ramka (rezerwuje miejsce) */
    border-radius: var(--btx-radius-md);  /* 10px zaokrąglenie */
    padding: 8px 16px;                     /* Wygodny padding */
}

body#cart .btx-promo-pill .label {
    color: var(--btx-color-success);      /* Zielony kolor nazwy kodu */
    font-weight: 700;                      /* Pogrubiony */
    font-size: var(--btx-text-sm);        /* 13px */
}

body#cart .btx-promo-right {
    display: flex;                         /* Kwota rabatu i przycisk X obok siebie */
    align-items: center;                   /* Pionowe wycentrowanie */
    gap: 8px;                              /* Odstęp */
}

body#cart .btx-promo-right .value {
    color: var(--btx-text-primary);       /* Ciemny kolor kwoty rabatu */
    font-weight: 800;                      /* Extra bold */
    font-size: var(--btx-text-sm);        /* 13px */
}

body#cart .btx-promo-remove {
    color: var(--btx-color-danger);       /* Czerwona ikona usunięcia kodu */
    display: flex;                         /* Centrowanie ikony */
    align-items: center;                   /* Wycentrowanie */
    justify-content: center;              /* Wycentrowanie */
    opacity: 0.7;                          /* Lekko wygaszony domyślnie */
    transition: opacity var(--btx-transition-fast); /* Animacja hover opacity */
}

body#cart .btx-promo-remove:hover {
    opacity: 1;                            /* Pełna widoczność przy hover */
}


/* ============================================================
   7g. KOSZYK — Przycisk "Przejdź do kasy"
   ============================================================ */

/* [SUGESTIA] Przenieść do kategorii: Komponenty > Koszyk > Przycisk checkout */

body#cart .btx-cart-actions .btx-btn-primary {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100% !important;                /* Pełna szerokość w koszyku */
    height: 48px !important;               /* CTA = systemowy LG */
    font-size: var(--btx-text-md) !important;
    text-transform: uppercase !important;
}


/* ============================================================ 



   12. STRONA KATEGORII — Layout główny, Toolbar, Siatka
============================================================ */

/* [SUGESTIA] Przenieść do kategorii: Layout (Grid / Flexbox / pozycjonowanie) > Strona kategorii */

body#category .btx-category-page,
body#search .btx-category-page {
    max-width: var(--btx-container-width) !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: var(--btx-page-padding) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--btx-gap-lg) !important;
}

body#category .btx-cat-layout,
body#search .btx-cat-layout {
    display: grid !important;             /* Sidebar + siatka produktów obok siebie */
    grid-template-columns: var(--btx-sidebar-width) 1fr !important; /* 260px sidebar, elastyczna siatka */
    gap: var(--btx-gap-lg) !important;   /* 24px odstęp */
    align-items: start !important;        /* Kolumny wyrównane od góry */
}

body#category .btx-cat-sidebar {
    position: sticky !important;          /* Sticky sidebar — podąża za scrollem */
    top: 110px !important;               /* 110px od góry (navbar + margines) */
    z-index: 10 !important;              /* Nad treścią siatki */
}

body#category .btx-toolbar,
body#search .btx-toolbar {
    background: var(--btx-bg-tile) !important; /* Białe tło toolbaru */
    border-radius: var(--btx-radius-xl) !important; /* 16px zaokrąglenie */
    border: var(--btx-border-width) solid var(--btx-border-color) !important; /* Ramka */
    box-shadow: var(--btx-shadow-tile) !important; /* Delikatny cień */
    padding: 10px 20px !important;        /* Padding */
    display: flex !important;             /* Licznik i sortowanie obok siebie */
    align-items: center !important;        /* Pionowe wycentrowanie */
    justify-content: space-between !important; /* Licznik po lewej, sortowanie po prawej */
    margin-bottom: var(--btx-gap-md) !important; /* 16px pod toolbarem */
}

body#category .btx-count {
    font-size: var(--btx-text-sm) !important; /* 13px */
    font-weight: 600 !important;          /* Semi-bold (lżejszy niż nagłówki) */
    color: var(--btx-text-secondary) !important; /* Szary kolor licznika */
    background: transparent !important;  /* Brak tła (usunięcie badge'a) */
    padding: 0 !important;               /* Brak paddingu badge'a */
    border-radius: 0 !important;         /* Brak zaokrągleń badge'a */
    text-transform: none !important;     /* Bez wielkich liter */
}

/* Reset zewnętrznego kontenera siatki (Bootstrap .row) */

body#category #products.row,
body#search #products.row {
    display: block !important;            /* Reset flex Bootstrapa na block */
    margin: 0 !important;                /* Usunięcie ujemnych marginesów Bootstrap .row */
    padding: 0 !important;               /* Reset paddingu */
    width: 100% !important;              /* Pełna szerokość */
}

/* Właściwa siatka produktów — 4 kolumny (Bento Density Fix) */

body#category #products .products.row,
body#category .products.row,
body#search #products .products.row,
body#search .products.row,
body#search .btx-products-grid,
body#search #js-product-list .products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-auto-rows: 1fr !important;
    align-items: stretch !important;
    gap: var(--btx-gap-md) !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Zewnętrzna komórka siatki (div opakowujący kartę) */

body#category #products .products.row > div,
body#category .products.row > .product,
body#search #products .products.row > div,
body#search .products.row > .product,
body#search .btx-products-grid > div,
body#search .btx-products-grid > .product {
    height: 100% !important;             /* Pełna wysokość wiersza siatki [DUPLIKAT — nadpisane przez: kolejne 'height: 100%' w tym samym bloku ~linia poniżej] */
    display: flex !important;             /* Flex wewnątrz komórki [DUPLIKAT — nadpisane przez: kolejne 'display: flex' w tym samym bloku ~linia poniżej] */
    height: 100% !important;             /* Wymusza pełną wysokość rzędu */
    padding: 0 !important;               /* Reset paddingów Bootstrap */
    margin: 0 !important;                /* Reset marginesów Bootstrap */
    display: flex !important;             /* Kolumnowy flex — dziecko (karta) rośnie do pełnej wysokości */
    flex-direction: column !important;    /* Pionowy układ */
    align-items: stretch !important;      /* Karta rozciąga się do pełnej szerokości */
}

/* Sam kafelek produktu */

body#category .btx-product-card,
body#search .btx-product-card {
    width: 100% !important;
    height: 100% !important;
    min-height: 360px !important;
    margin: 0 !important;                /* Reset marginesów */
    display: flex !important;            /* Kolumnowy flex dla rozciągania zawartości */
    flex-direction: column !important;   /* Zdjęcie, opis, cena w kolumnie */
}

body#category #products .products.row::before,
body#category #products .products.row::after,
body#search #products .products.row::before,
body#search #products .products.row::after {
    display: none !important;            /* Usunięcie clearfix Bootstrapa (niepotrzebny w grid) */
}


/* ============================================================ */

/* ============================================================
   8. KASA (CHECKOUT) — dostrojenie Bento na bazie szablonów Classic
   ============================================================ */

/* Przyciski "Kontynuuj" / "Zapisz" / "Zamów" — czarny primary Bento zamiast cyjanu */
body#checkout .btn-primary {
    background: var(--btx-color-primary) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--btx-radius-pill) !important;
    height: 48px !important;
    padding: 0 32px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background var(--btx-transition-fast) !important;
}

@media (hover: hover) {
    body#checkout .btn-primary:hover:not(:disabled) {
        background: var(--btx-color-primary-hover) !important;
    }
}

body#checkout .btn-primary:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
}

/* Linki akcji w kasie (Zamów jako gość / Zaloguj / Pokaż szczegóły / Zapomniałeś hasła)
   — z cyjanu na ciemny, podkreślenie na hover */
body#checkout .btn-link,
body#checkout #checkout-personal-information-step .nav-link,
body#checkout .forgot-password a,
body#checkout .showDetailsButton,
body#checkout .show-details {
    color: var(--btx-text-primary) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

@media (hover: hover) {
    body#checkout .btn-link:hover,
    body#checkout .forgot-password a:hover,
    body#checkout .showDetailsButton:hover {
        text-decoration: underline !important;
    }
}

/* "Zamów jako gość" / "Zaloguj się" jako secondary buttony (zakładki tab).
   data-toggle/href/.active nietknięte — tylko styl. */
body#checkout #checkout-personal-information-step .nav-inline {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
/* "Forgot your password?" na kasie jak na stronie logowania — muted i normalna
   waga (reguła linków akcji body#checkout .forgot-password a wymuszała primary+700). */
body#checkout #checkout-login-form .forgot-password a {
    color: var(--btx-text-muted) !important;
    font-weight: 400 !important;
}

/* Zakładka logowania na kasie — węższe i wyśrodkowane inputy.
   Pola (.btx-form-group) stackują się w .btx-form-section; zwężamy sekcję i
   centrujemy auto-marginesami. Scoped do #checkout-login-form (osobna strona
   logowania nietknięta). */
body#checkout #checkout-login-form .btx-form-section {
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Toggle gość/logowanie na samej górze lewego kafla, wyśrodkowany.
   nav siedzi w .content aktywnego kroku 1 — pozycjonujemy go absolutnie względem
   .cart-grid-body i robimy miejsce paddingiem. Tylko gdy krok 1 jest aktywny
   (:has) — po przejściu dalej toggle znika i padding nie zostaje. */
body#checkout .cart-grid-body:has(#checkout-personal-information-step.-current .nav-inline) {
    position: relative !important;
    padding-top: 80px !important;
}
body#checkout #checkout-personal-information-step.-current .nav-inline {
    position: absolute !important;
    top: 22px !important;
    left: 0 !important;
    right: 0 !important;
    justify-content: center !important;
    margin: 0 !important;
    z-index: 2 !important;
}
/* (Toggle gość/logowanie pozostaje pod tytułem kroku — próby przeniesienia nad
   tytuł, zarówno override bloku 'step', jak i CSS display:contents, wysypywały
   render kroku. Zostaje stabilny układ: secondary buttony pod "① DANE OSOBOWE".) */
body#checkout #checkout-personal-information-step .nav-item:has(.nav-separator) {
    display: none !important;
}
body#checkout #checkout-personal-information-step .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    padding: 0 18px !important;
    background: var(--btx-bg-tile) !important;
    border: 1px solid var(--btx-border-color) !important;
    border-radius: var(--btx-radius-pill) !important;
    color: var(--btx-text-secondary) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    text-decoration: none !important;
    transition: all var(--btx-transition-fast) !important;
}
/* Aktywna zakładka — stan "wybrany" spójny z pigułkami Pan/Pani */
body#checkout #checkout-personal-information-step .nav-link.active {
    background: var(--btx-bg-input) !important;
    border-color: #d1d5db !important;
    color: var(--btx-text-primary) !important;
}
@media (hover: hover) {
    body#checkout #checkout-personal-information-step .nav-link:not(.active):hover {
        background: #f9fafb !important;
        border-color: #a3a3a3 !important;
        color: var(--btx-text-primary) !important;
    }
}

/* Pan/Pani — pigułki-przełączniki jak w rejestracji.
   Child form-fields renderuje radio jako label.btx-radio-wrap > input.btx-radio + span. */
body#checkout .checkout-step .btx-form-group:has(input[name="id_gender"]) > div {
    gap: 20px !important;
}
body#checkout label.btx-radio-wrap:has(input[name="id_gender"]) {
    flex: 1 1 0 !important;
    min-width: 110px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    background: #fdfdfd !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: var(--btx-radius-pill) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--btx-text-secondary) !important;
    cursor: pointer !important;
    transition: all var(--btx-transition-fast) !important;
}

/* Ukrycie kropki radio w pigułce płci */
body#checkout label.btx-radio-wrap:has(input[name="id_gender"]) .btx-radio,
body#checkout label.btx-radio-wrap:has(input[name="id_gender"]) input[name="id_gender"] {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
}

body#checkout label.btx-radio-wrap:has(input[name="id_gender"]) span {
    margin: 0 !important;
}

/* Stan wybrany */
body#checkout label.btx-radio-wrap:has(input[name="id_gender"]:checked) {
    background: var(--btx-bg-input) !important;
    border-color: #d1d5db !important;
    color: var(--btx-text-primary) !important;
    font-weight: 700 !important;
}

@media (hover: hover) {
    body#checkout label.btx-radio-wrap:has(input[name="id_gender"]):hover {
        border-color: #a3a3a3 !important;
        background: #f9fafb !important;
        color: var(--btx-text-primary) !important;
        transform: translateY(-2px) translateZ(0) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
    }
    body#checkout label.btx-radio-wrap:has(input[name="id_gender"]:checked):hover {
        border-color: var(--btx-color-primary) !important;
    }
}

/* ── KASA: prawe podsumowanie jako kafel Bento ── */
body#checkout #js-checkout-summary,
body#checkout .cart-grid-right .card {
    background: var(--btx-bg-tile) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: var(--btx-radius-2xl) !important;
    box-shadow: var(--btx-shadow-tile) !important;
    overflow: hidden !important;
}

body#checkout #js-checkout-summary .card-block {
    padding: 24px !important;
}

/* Większa szczelina między lewym a prawym kaflem — prawy kafel dosunięty w prawo
   (tylko desktop ≥992px; niżej kolumny i tak stackują się pionowo).
   padding-right: 0 → prawa karta sięga prawej krawędzi rzędu (jak lewa do lewej),
   dzięki czemu para kart jest symetryczna wokół środka (równe marginesy). */
@media (min-width: 992px) {
    body#checkout .cart-grid-right {
        padding-left: 32px !important;
        padding-right: 0 !important;
    }
}

/* ── KASA: lewa kolumna jako JEDEN kafel Bento (kroki = sekcje z dividerami) ── */
body#checkout .cart-grid-body {
    background: var(--btx-bg-tile) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: var(--btx-radius-2xl) !important;
    box-shadow: var(--btx-shadow-tile) !important;
    overflow: hidden !important;
    padding: 8px 28px !important;
}

/* Kroki przezroczyste i płaskie — białe tło ORAZ kwadratowy box-shadow z motywu
   rodzica (.checkout-step{box-shadow:2px 2px 8px}) tworzyły drugi, kanciasty kafel */
body#checkout .checkout-step {
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    padding: 24px 0 !important;
}

body#checkout .checkout-step:last-child {
    border-bottom: none !important;
}

/* Numer kroku — kółko */
body#checkout .step-number {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: var(--btx-bg-input) !important;
    color: var(--btx-text-secondary) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
}

/* Tytuł kroku */
body#checkout .step-title {
    display: flex !important;
    align-items: center !important;
    font-size: var(--btx-text-h5) !important;
    font-weight: 800 !important;
    color: var(--btx-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin: 0 !important;
}

/* Krok aktywny */
body#checkout .checkout-step.-current .step-number {
    background: var(--btx-color-primary) !important;
    color: #fff !important;
}
body#checkout .checkout-step.-current .step-title {
    color: var(--btx-text-primary) !important;
}

/* Krok ukończony (zwinięty): kółko w kolorze tekstu muted, nie czarne.
   Aktywny+ukończony zostaje czarny (łapie go reguła .-current powyżej). */
body#checkout .checkout-step.-complete:not(.-current) .step-number {
    background: var(--btx-text-secondary) !important;
    color: #fff !important;
}
body#checkout .checkout-step.-complete .step-title {
    color: var(--btx-text-secondary) !important;
}

/* Krok ukończony (zwinięty): cyfra w kółku zamienia się w "ptaszek" (Material Icons "done").
   :not(.-current) — gdy krok jest aktywny+ukończony, zostawiamy numer. */
body#checkout .checkout-step.-complete:not(.-current) .step-number {
    font-size: 0 !important;
}
body#checkout .checkout-step.-complete:not(.-current) .step-number::after {
    content: '\e876' !important;
    font-family: 'Material Icons' !important;
    font-size: 18px !important;
    line-height: 1 !important;
    color: #fff !important;
}

/* Osobny zielony znaczek .done zbędny — kółko z numerem już go zastępuje */
body#checkout .step-title .done {
    display: none !important;
}

/* "edytuj" → secondary button, dosunięty w prawo (flexowy .step-title) */
body#checkout .checkout-step.-reachable.-complete .step-edit {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: auto !important;
    float: none !important;
    height: 32px !important;
    padding: 0 14px !important;
    background: var(--btx-bg-tile) !important;
    border: 1px solid var(--btx-border-color) !important;
    border-radius: var(--btx-radius-pill) !important;
    color: var(--btx-text-secondary) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    transition: all var(--btx-transition-fast) !important;
}
body#checkout .checkout-step.-reachable.-complete .step-edit .edit {
    font-size: 14px !important;
    margin: 0 !important;
}
@media (hover: hover) {
    body#checkout .checkout-step.-reachable.-complete .step-edit:hover {
        background: var(--btx-bg-input) !important;
        color: var(--btx-text-primary) !important;
    }
}

/* Sekcja "Załóż konto (opcjonalny)" + hasło: pełna szerokość, wydzielona dwoma
   separatorami — nad nagłówkiem konta i pod polem hasła. Grid auto-układa <p> i
   grupę hasła w sąsiednich komórkach, więc rozciągamy oba na całą szerokość. */
body#checkout .checkout-step .btx-form-fields-wrapper p:has(> span.font-weight-bold),
body#checkout .checkout-step .btx-form-fields-wrapper .btx-form-group:has(input[name="password"]) {
    grid-column: 1 / -1 !important;
}
/* Separator 1 — nad nagłówkiem konta */
body#checkout .checkout-step .btx-form-fields-wrapper p:has(> span.font-weight-bold) {
    border-top: 1px solid var(--btx-border-color) !important;
    margin-top: 12px !important;
    padding-top: 24px !important;
}
/* Usunięcie podtekstu "And save time on your next order!" + zbędnego <br> */
body#checkout .checkout-step .btx-form-fields-wrapper p:has(> span.font-weight-bold) .text-muted,
body#checkout .checkout-step .btx-form-fields-wrapper p:has(> span.font-weight-bold) br {
    display: none !important;
}
/* Separator 2 — pod polem hasła */
body#checkout .checkout-step .btx-form-fields-wrapper .btx-form-group:has(input[name="password"]) {
    border-bottom: 1px solid var(--btx-border-color) !important;
    padding-bottom: 24px !important;
}
/* Input hasła węższy — nie rozlewa się na całą szerokość (wrapper z inputem + "oczko") */
body#checkout .checkout-step .btx-form-fields-wrapper .btx-form-group:has(input[name="password"]) .js-parent-focus {
    max-width: 360px !important;
}
/* Usunięcie "(opcjonalny)" przy etykiecie hasła (inline-span w .btx-form-label) */
body#checkout .checkout-step .btx-form-fields-wrapper .btx-form-group:has(input[name="password"]) .btx-form-label span {
    display: none !important;
}

/* Etykiety pól na kasie 1:1 z uikitem (wzorzec .btx-h3) — .btx-form-label miało
   wagę 600 bez letter-spacing; uikit ma 700 + 0.06em. Reszta już się zgadzała. */
body#checkout .checkout-step .btx-form-label {
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 6px !important;
}

/* ── KASA: nagłówek — ukrycie zepsutego bloku telefonu (displayNav1 "% telefon%") ── */
body#checkout .header-nav .col-md-6.text-xs-right,
body#checkout .header-nav .hidden-sm-down.text-xs-right {
    display: none !important;
}

/* ── KASA: stopka — ukrycie kredytu PrestaShop ── */
body#checkout #footer .text-sm-center {
    color: var(--btx-text-muted) !important;
    font-size: var(--btx-text-xs) !important;
}

/* ── KASA: linki rozwijania/szczegółów (Pokaż szczegóły) — z cyjanu na ciemny ── */
body#checkout .cart-summary a[data-toggle="collapse"],
body#checkout #js-checkout-summary a {
    color: var(--btx-text-primary) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* ── KASA: voucher w podsumowaniu → pigułka Bento ── */
body#checkout .promo-input {
    background: var(--btx-bg-input) !important;
    border: 1px solid var(--btx-border-input) !important;
    border-radius: var(--btx-radius-pill) !important;
    height: 40px !important;
    padding: 0 16px !important;
    font-size: var(--btx-text-body) !important;
    color: var(--btx-text-secondary) !important;
    box-shadow: none !important;
    outline: none !important;
}

body#checkout .promo-code form,
body#checkout .input-group:has(.promo-input) {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

body#checkout .promo-code .btn,
body#checkout .input-group:has(.promo-input) .btn,
body#checkout .promo-input ~ button,
body#checkout .promo-input + button {
    background: var(--btx-color-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--btx-radius-pill) !important;
    height: 40px !important;
    padding: 0 18px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    flex-shrink: 0 !important;
}

/* ── KASA: logo w wyspie-pigułce — identycznie jak główny header (glass) ── */
body#checkout .header-nav #_desktop_logo {
    display: inline-flex !important;
    align-items: center !important;
    background: var(--btx-glass-bg) !important;
    backdrop-filter: var(--btx-glass-blur) !important;
    -webkit-backdrop-filter: var(--btx-glass-blur) !important;
    border: var(--btx-glass-border) !important;
    border-radius: 9999px !important;
    box-shadow: var(--btx-shadow-glass) !important;
    height: 48px !important;
    padding: 0 6px !important;
    position: fixed !important;
    top: 24px !important;
    left: 32px !important;
    z-index: 1000 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: max-content !important;
}

/* Wewnętrzny link jako sub-pigułka pod tło hovera (matematyka 6px ramki: (48-36)/2) */
body#checkout .header-nav #_desktop_logo a {
    display: flex !important;
    align-items: center !important;
    height: 36px !important;
    padding: 0 16px !important;
    border-radius: 9999px !important;
    transition: background var(--btx-transition-fast) !important;
}

body#checkout .header-nav #_desktop_logo img.logo {
    max-height: 28px !important;
    width: auto !important;
    display: block !important;
    margin: 0 !important;
    opacity: 0.6 !important;
    transition: opacity var(--btx-transition-fast) !important;
}

@media (hover: hover) {
    body#checkout .header-nav #_desktop_logo a:hover img.logo {
        opacity: 1 !important;
    }
    body#checkout .header-nav #_desktop_logo a:hover {
        background: rgba(0, 0, 0, 0.05) !important;
    }
}

body#checkout .header-nav #_desktop_logo a:active {
    background: rgba(0, 0, 0, 0.05) !important;
}

/* Placement bliżej krawędzi (jak floating header top:24 / left:32) */
body#checkout .header-nav .container {
    max-width: none !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
}
body#checkout .header-nav {
    padding-top: 16px !important;
}

/* Zerujemy rezerwę pod sticky-header z motywu rodzica (theme.css: body#checkout padding-top:92px),
   której kasa nie używa — wyspa z logo dociąga do góry. Odstęp 24px dają header-nav (16px) + logo margin (8px). */
/* Odstęp od góry: wyspa z logo jest fixed (top:24 + 48 = dół 72px),
   karty muszą zaczynać się poniżej, żeby nie wjeżdżały pod nią. */
body#checkout {
    padding-top: 88px !important;
}

/* ════════════════════════════════════════════════════════════════════════
   KASA — KROK 2 (ADRESY): 2A — selektor adresu jako kafle Bento
   Markup Classic: .address-selector > article.address-item(.selected) >
   header.h4 > label.radio-block > (.custom-radio, .address-alias, .address) + hr + footer.address-footer
   ════════════════════════════════════════════════════════════════════════ */
body#checkout .address-selector {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
}

/* Karta adresu — flex column, by stopkę z przyciskami zakotwiczyć do dołu */
body#checkout .checkout-step .address-item {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 calc(50% - 16px) !important;
    min-width: 260px !important;
    margin: 0 !important;
    background: var(--btx-bg-tile) !important;
    border: 1px solid var(--btx-border-color) !important;
    border-radius: var(--btx-radius-xl) !important;
    box-shadow: var(--btx-shadow-tile) !important;
    overflow: hidden !important;
    transition: border-color var(--btx-transition-fast), box-shadow var(--btx-transition-fast) !important;
}
/* Jedna karta → wyśrodkowana (brak drugiej .address-item w kontenerze) */
body#checkout .address-selector:not(:has(.address-item ~ .address-item)) {
    justify-content: center !important;
}
/* Stan wybrany — bez czarnej ramki primary; selekcję pokazuje kropka radio.
   Karta zostaje białym kaflem na szarym panelu (spójnie ze stroną konta). */
body#checkout .checkout-step .address-item.selected {
    background: var(--btx-bg-tile) !important;
    border-color: var(--btx-border-color) !important;
    box-shadow: var(--btx-shadow-tile) !important;
}
@media (hover: hover) {
    body#checkout .checkout-step .address-item:not(.selected):hover {
        border-color: #a3a3a3 !important;
    }
}

/* Etykieta z radio + alias + adres — grid: radio po lewej, treść w kolumnie */
body#checkout .checkout-step .address-item .h4 {
    margin: 0 !important;
}
body#checkout .checkout-step .address-item .radio-block {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    column-gap: 12px !important;
    row-gap: 4px !important;
    align-items: center !important;
    padding: 18px 20px !important;
    margin: 0 !important;
    cursor: pointer !important;
}

/* Radio .custom-radio → Bento (kółko w jednym wierszu z aliasem, wyśrodkowane) */
body#checkout .checkout-step .address-item .custom-radio {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    border: 2px solid #c4c4c4 !important;
    background: #fff !important;
    flex: 0 0 auto !important;
}
body#checkout .checkout-step .address-item.selected .custom-radio {
    border-color: var(--btx-color-primary) !important;
}
body#checkout .checkout-step .address-item .custom-radio input[type="radio"]:checked + span {
    background-color: var(--btx-color-primary) !important;
}

/* Alias "Mój adres" */
body#checkout .checkout-step .address-item .address-alias {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    font-size: var(--btx-text-body) !important;
    font-weight: 700 !important;
    color: var(--btx-text-primary) !important;
}
/* Treść adresu */
body#checkout .checkout-step .address-item .address {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    padding-left: 8px !important;   /* lekkie wcięcie — bliżej tytułu, ale nie pod alias */
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: var(--btx-text-secondary) !important;
}

/* <hr> w karcie zbędny — footer ma własny separator */
body#checkout .checkout-step .address-item hr {
    display: none !important;
}

/* Footer akcji (edytuj / Usuń) */
body#checkout .checkout-step .address-item .address-footer {
    display: flex !important;
    gap: 8px !important;
    justify-content: center !important;
    margin-top: auto !important;        /* zakotwiczenie stopki do dołu karty */
    margin-bottom: 0 !important;
    padding: 4px 16px 16px 16px !important;
    border-top: none !important;
    background: transparent !important;
    text-align: left !important;
}
/* edytuj / Usuń → ghost buttony (ikona + tekst) — 1:1 jak .btx-btn-ghost na koncie */
body#checkout .checkout-step .address-item .address-footer a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 36px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 14px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    border: none !important;
    border-radius: var(--btx-radius-pill) !important;
    background: var(--btx-neutral-100) !important;
    color: var(--btx-text-primary) !important;
    text-decoration: none !important;
    transition: all var(--btx-transition-fast) !important;
}
body#checkout .checkout-step .address-item .address-footer a i {
    font-size: 16px !important;
    margin: 0 !important;
}
@media (hover: hover) {
    body#checkout .checkout-step .address-item .address-footer a:hover {
        background: var(--btx-neutral-200) !important;
        color: var(--btx-text-primary) !important;
    }
    body#checkout .checkout-step .address-item .address-footer a.delete-address:hover {
        background: rgba(239, 68, 68, 0.1) !important;
        color: #ef4444 !important;
    }
}

/* ── Krok 2 (2B): "+ dodaj nowy adres" → secondary button, po lewej ── */
body#checkout .add-address {
    margin: 16px 0 0 0 !important;
    text-align: left !important;
}

/* ── Krok 2: dolny rząd — "+ dodaj adres" po lewej i KONTYNUUJ po prawej na
   jednym poziomie (równe górne krawędzie). Karty pełna szerokość, link "inny
   adres rozliczeniowy" schodzi w pełnej szerokości pod spodem.
   GUARD :not(:has(.address-selector ~ .address-selector)) — działa TYLKO gdy jest
   jedna sekcja adresów (wspólny adres). Przy "innym adresie do faktury" (2 sekcje)
   flex się NIE włącza, więc każdy "+ dodaj adres" zostaje w swojej sekcji. ── */
body#checkout #checkout-addresses-step .js-address-form > form:has(.address-selector):not(:has(.address-selector ~ .address-selector)) {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    column-gap: 16px !important;
    align-items: start !important;
}
/* Rząd 1: karty (pełna szerokość) */
body#checkout #checkout-addresses-step .js-address-form > form:has(.address-selector):not(:has(.address-selector ~ .address-selector)) > .address-selector {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
}
/* Rząd 2: "+ dodaj adres" po lewej, KONTYNUUJ po prawej (top-aligned) */
body#checkout #checkout-addresses-step .js-address-form > form:has(.address-selector):not(:has(.address-selector ~ .address-selector)) > .add-address {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 16px 0 0 0 !important;
}
body#checkout #checkout-addresses-step .js-address-form > form:has(.address-selector):not(:has(.address-selector ~ .address-selector)) > .clearfix {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start !important;
    margin: 16px 0 0 0 !important;
}
body#checkout #checkout-addresses-step .js-address-form > form:has(.address-selector):not(:has(.address-selector ~ .address-selector)) > .clearfix .continue {
    float: none !important;
}
/* Rząd 3: link "inny adres" TUŻ pod "+ dodaj adres" */
body#checkout #checkout-addresses-step .js-address-form > form:has(.address-selector):not(:has(.address-selector ~ .address-selector)) > p:has(a[data-link-action="different-invoice-address"]) {
    grid-column: 1 !important;
    grid-row: 3 !important;
    margin: 8px 0 0 0 !important;
}

/* ── Krok 2: tytuły sekcji ("adres wysyłki" / "Twój adres do faktury") —
   wielka pierwsza litera + bliżej swoich kafli ── */
body#checkout #checkout-addresses-step .js-address-form h2.h4 {
    margin: 24px 0 12px 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--btx-text-primary) !important;
    text-transform: none !important;
}
body#checkout #checkout-addresses-step .js-address-form h2.h4::first-letter {
    text-transform: uppercase !important;
}

/* ════════════════════════════════════════════════════════════════════════
   KASA — KROK 2: formularz adresu (edycja/dodawanie) — logiczny układ gridu
   Pola auto-flowują w .btx-form-fields-wrapper; pełna szerokość dla alias/adresu
   /uzupełnienia/checkboxa sprawia, że reszta paruje się sensownie
   (imię|nazwisko, firma|NIP, kod|miasto, kraj|telefon).
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
    body#checkout #checkout-addresses-step .btx-form-fields-wrapper .btx-form-group:has([name="alias"]),
    body#checkout #checkout-addresses-step .btx-form-fields-wrapper .btx-form-group:has([name="address1"]),
    body#checkout #checkout-addresses-step .btx-form-fields-wrapper .btx-form-group:has([name="address2"]) {
        grid-column: 1 / -1 !important;
    }
}
/* checkbox "Użyj tego adresu do fakturowania" — pełna szerokość, reset offsetu */
body#checkout #checkout-addresses-step .btx-form-fields-wrapper .form-group.row:has(#use_same_address) {
    grid-column: 1 / -1 !important;
    margin: 4px 0 0 0 !important;
}

/* Stopka formularza: KONTYNUUJ + Anuluj w rzędzie, "Anuluj" jako secondary */
body#checkout #checkout-addresses-step .form-footer,
body#checkout #checkout-addresses-step .form-footer form {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
}
body#checkout #checkout-addresses-step .form-footer .continue,
body#checkout #checkout-addresses-step .form-footer .cancel-address {
    float: none !important;
    margin: 0 !important;
}
body#checkout #checkout-addresses-step .cancel-address {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 48px !important;
    padding: 0 24px !important;
    background: var(--btx-bg-tile) !important;
    border: 1px solid var(--btx-border-color) !important;
    border-radius: var(--btx-radius-pill) !important;
    color: var(--btx-text-secondary) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    text-decoration: none !important;
    transition: all var(--btx-transition-fast) !important;
}
@media (hover: hover) {
    body#checkout #checkout-addresses-step .cancel-address:hover {
        border-color: #a3a3a3 !important;
        color: var(--btx-text-primary) !important;
        background: var(--btx-bg-input) !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   KASA — POWIADOMIENIA (np. "Adres pomyślnie usunięty!") → Bento alert
   Markup Classic: aside#notifications > .container > article.alert.alert-* > ul > li
   ════════════════════════════════════════════════════════════════════════ */
/* Powiadomienie wyrównane do tych samych krawędzi co rząd kart (border-box
   kontenera), żeby marginesy od krawędzi ekranu były równe. */
body#checkout #notifications .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body#checkout #notifications .alert {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 20px !important;
    margin: 0 0 20px 0 !important;
    border: 1px solid transparent !important;
    border-radius: var(--btx-radius-lg) !important;
    font-size: var(--btx-text-sm) !important;
    font-weight: 600 !important;
}
body#checkout #notifications .alert ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
body#checkout #notifications .alert li {
    margin: 0 !important;
    list-style: none !important;
}
/* Warianty kolorystyczne (jak .btx-alert-*) */
body#checkout #notifications .alert-success {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
    color: #065f46 !important;
}
body#checkout #notifications .alert-danger {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
    color: #991b1b !important;
}
body#checkout #notifications .alert-warning {
    background: rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.25) !important;
    color: #92400e !important;
}
body#checkout #notifications .alert-info {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: var(--btx-border-color) !important;
    color: var(--btx-text-secondary) !important;
}
/* "+ dodaj nowy adres" → secondary, mały (rozmiar jak EDYTUJ/Wyloguj) */
body#checkout .add-address a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 32px !important;
    padding: 0 14px !important;
    background: var(--btx-bg-tile) !important;
    border: 1px solid var(--btx-border-color) !important;
    border-radius: var(--btx-radius-pill) !important;
    color: var(--btx-text-secondary) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    text-decoration: none !important;
    transition: all var(--btx-transition-fast) !important;
}
body#checkout .add-address a i {
    font-size: 14px !important;
    margin: 0 !important;
}
@media (hover: hover) {
    body#checkout .add-address a:hover {
        border-color: #a3a3a3 !important;
        color: var(--btx-text-primary) !important;
        background: var(--btx-bg-input) !important;
    }
}

/* ── Krok 2 (2B): "Adres rozliczeniowy inny niż wysyłki" → muted tekst-link
   jak "Forgot password?" pod hasłem (muted, 13px, normalna waga, bez cyjanu) ── */
body#checkout .js-address-form a[data-link-action="different-invoice-address"] {
    color: var(--btx-text-muted) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
}
@media (hover: hover) {
    body#checkout .js-address-form a[data-link-action="different-invoice-address"]:hover {
        color: var(--btx-text-primary) !important;
        text-decoration: none !important;
    }
}

/* ── Krok 2: select KRAJ — natywna strzałka → chevron Bento (1:1 jak .btx-select).
   Tylko <select>, żeby nie dotknąć inputów tekstowych. ── */
body#checkout select.btx-form-control {
    -webkit-appearance: none !important;
    appearance: none !important;
    padding-right: 44px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
}

/* ── Krok 2: checkbox "Użyj tego adresu do fakturowania" (natywny #use_same_address) → Bento ── */
body#checkout .col-md-9:has(> #use_same_address) {
    margin-left: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
body#checkout #use_same_address {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    border: 2px solid #c4c4c4 !important;
    border-radius: 6px !important;
    background: #fff !important;
    cursor: pointer !important;
    position: relative !important;
    flex: 0 0 auto !important;
    transition: background var(--btx-transition-fast), border-color var(--btx-transition-fast) !important;
}
body#checkout #use_same_address:checked {
    background: var(--btx-color-primary) !important;
    border-color: var(--btx-color-primary) !important;
}
body#checkout #use_same_address:checked::after {
    content: '' !important;
    position: absolute !important;
    left: 4px !important;
    top: 1px !important;
    width: 5px !important;
    height: 9px !important;
    border: solid #fff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}
body#checkout label[for="use_same_address"] {
    margin: 0 !important;
    cursor: pointer !important;
    font-size: var(--btx-text-body) !important;
    font-weight: 500 !important;
    color: var(--btx-text-secondary) !important;
}

/* ── Krok 2: usunięcie opisowego akapitu "Wybrany adres będzie używany zarówno
   jako adres osobisty (do faktury), jak i jako adres dostawy." — intro <p> bez
   klasy i bez linka (nie rusza .add-address ani linku "different-invoice"). ── */
body#checkout .js-address-form > form > p:not([class]):not(:has(a)) {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   KASA — KROK 1: podgląd ZALOGOWANEGO (awatar + imię + email + logout secondary)
   ════════════════════════════════════════════════════════════════════════ */
body#checkout #checkout-personal-information-step .btx-checkout-identity {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 24px 0 24px 0 !important;   /* odstęp nad awatarem */
}
/* Awatar z inicjałami */
body#checkout .btx-identity-avatar {
    flex: 0 0 auto !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: var(--btx-color-primary) !important;
    color: var(--btx-text-on-primary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
}
body#checkout .btx-identity-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
}
body#checkout .btx-identity-name {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--btx-text-primary) !important;
    line-height: 1.2 !important;
}
body#checkout .btx-identity-email {
    font-size: 14px !important;
    color: var(--btx-text-muted) !important;
    word-break: break-word !important;
}
/* "Wyloguj" — secondary button nad notką (grupa po lewej) */
body#checkout .btx-logout-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
}
body#checkout .btx-identity-logout {
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    height: 32px !important;        /* ten sam rozmiar co przycisk EDYTUJ (.step-edit) */
    padding: 0 14px !important;
    font-size: 10px !important;
}

/* Dolny rząd: grupa (Wyloguj + notka) po lewej, KONTYNUUJ po prawej.
   align-items: flex-start → górne krawędzie "Wyloguj" i "Kontynuuj" na równi. */
body#checkout #checkout-personal-information-step .btx-identity-actions {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-top: 24px !important;
}
body#checkout .btx-logout-note {
    margin: 0 !important;
    white-space: nowrap !important;
}
body#checkout .btx-logout-note small {
    color: var(--btx-text-muted) !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}
body#checkout #checkout-personal-information-step .btx-identity-actions form {
    margin-left: auto !important;   /* KONTYNUUJ zawsze po prawej, też gdy brak notki */
    flex: 0 0 auto !important;
}
body#checkout #checkout-personal-information-step .btx-identity-actions .continue {
    float: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   KASA — KROK 3 (METODA DOSTAWY): 3A — przewoźnicy jako selectowalne kafle Bento
   Markup Classic: .delivery-options > .row.delivery-option > [col-sm-1 .custom-radio]
   + label.delivery-option-2 > .row > (.carrier .carrier-name | .carrier-delay | .carrier-price)
   ════════════════════════════════════════════════════════════════════════ */
/* Blok zamiast flex-gap — gap obejmował też puste .carrier-extra-content i .clearfix,
   przez co zaznaczenie przewoźnika przesuwało kafle (skakanie góra-dół). */
body#checkout .delivery-options {
    display: block !important;
}
/* reset klasycznego border-right na kolumnie radio */
body#checkout .delivery-options > .row {
    border-right: none !important;
}
/* Pusty clearfix po każdym przewoźniku — usuwamy z układu */
body#checkout .delivery-options > .clearfix {
    display: none !important;
}
/* Extra-content (mapa/punkt odbioru) — przyklejona pod wybranym przewoźnikiem,
   bez skoków; gdy ukryta (display:none z szablonu) nie zajmuje miejsca */
body#checkout .carrier-extra-content {
    margin: -4px 0 12px 0 !important;
}

/* Wiersz przewoźnika = kafel */
body#checkout .delivery-option {
    display: flex !important;
    align-items: center !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    background: var(--btx-bg-tile) !important;
    border: 1px solid var(--btx-border-color) !important;
    border-radius: var(--btx-radius-xl) !important;
    box-shadow: var(--btx-shadow-tile) !important;
    overflow: hidden !important;
    transition: border-color var(--btx-transition-fast), box-shadow var(--btx-transition-fast) !important;
}
/* Stan wybrany (radio zaznaczone) — ramka primary */
body#checkout .delivery-option:has(input[type="radio"]:checked) {
    border-color: var(--btx-color-primary) !important;
    box-shadow: 0 0 0 1px var(--btx-color-primary) !important;
}
@media (hover: hover) {
    body#checkout .delivery-option:not(:has(input[type="radio"]:checked)):hover {
        border-color: #a3a3a3 !important;
    }
}

/* Kolumna radio */
body#checkout .delivery-option > .col-sm-1 {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 0 0 20px !important;
}
/* Radio .custom-radio → Bento */
body#checkout .delivery-option .custom-radio {
    float: none !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    border: 2px solid #c4c4c4 !important;
    background: #fff !important;
}
body#checkout .delivery-option:has(input[type="radio"]:checked) .custom-radio {
    border-color: var(--btx-color-primary) !important;
}
body#checkout .delivery-option .custom-radio input[type="radio"]:checked + span {
    background-color: var(--btx-color-primary) !important;
}

/* Label z treścią (nazwa / czas / cena) */
body#checkout .delivery-option .delivery-option-2 {
    flex: 1 1 auto !important;
    max-width: none !important;
    padding: 16px 20px !important;
    margin: 0 !important;
}
body#checkout .delivery-option .carrier-name {
    font-size: var(--btx-text-body) !important;
    font-weight: 700 !important;
    color: var(--btx-text-primary) !important;
}
body#checkout .delivery-option .carrier-delay {
    font-size: 13px !important;
    color: var(--btx-text-secondary) !important;
}
body#checkout .delivery-option .carrier-price {
    font-size: var(--btx-text-body) !important;
    font-weight: 800 !important;
    color: var(--btx-text-primary) !important;
}
/* Logo przewoźnika */
body#checkout .delivery-options .delivery-option img {
    width: auto !important;
    max-width: 50px !important;
    max-height: 36px !important;
}

/* 3B — komentarz do zamówienia (textarea) */
body#checkout #delivery > label[for="delivery_message"] {
    display: block !important;
    margin-bottom: 8px !important;
    font-size: 13px !important;
    color: var(--btx-text-secondary) !important;
}
body#checkout #delivery_message {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid var(--btx-border-input) !important;
    border-radius: var(--btx-radius-lg) !important;
    background: var(--btx-bg-input) !important;
    font-size: var(--btx-text-body) !important;
    color: var(--btx-text-secondary) !important;
    resize: vertical !important;
    outline: none !important;
    box-shadow: none !important;
}
body#checkout .order-options {
    margin-top: 20px !important;
}