/**
 * Koszyk — arkusz wspolny dla obu wariantow.
 *
 * Wymiary i proporcje wziete z pomiaru wzorca (lemonglow.pl): szuflada
 * 420 px z ograniczeniem do szerokosci ekranu, wysokosc 100dvh (nie 100vh —
 * na iPhonie pasek adresu zjada roznice), przesuniecie translateX zamiast
 * animowania "right", cien -4px 0 20px i przykrycie 50% czerni.
 *
 * Kolory i wymiary ida zmiennymi z panelu — arkusz jest jeden, a sklep
 * ustawia wartosci.
 */

/* ── Szuflada ─────────────────────────────────────────────── */

/* Wysokosc panelu w jednej zmiennej: uchwyt liczy z niej swoje polozenie,
   wiec panel i ikona zawsze stoja na tej samej wysokosci. Telefon podmienia
   ja w jednym miejscu, zamiast powtarzac wyliczenie w dwoch regulach. */
.mkosz-szuflada,
.mkosz-uchwyt { --mkosz-wys-teraz: var(--mkosz-wys, 75dvh); }

/* Odstep z bokow WEWNATRZ panelu = oddech panelu od krawedzi ekranu
   (--mkosz-pad-x liczy css_zmiennych z "Oddech dookola panelu", 10-24 px).
   Do 4.12 bylo na sztywno 18 px przy oddechu 16 — tresc wygladala na
   wcisnieta w srodek, a na telefonie brakowalo miejsca. */
.mkosz-szuflada { --mkosz-px: var(--mkosz-pad-x, 16px); }

/* Fokus przy otwarciu idzie na sam panel (koszyk-front.js otworz), nie na X —
   panel nie rysuje obwodki, a klawiatura i tak zaczyna od X */
.mkosz-szuflada:focus { outline: none; }

/* Warstwa musi byc WYZEJ niz naglowek motywu. Salient trzyma #header-outer
   na 9999, przyciski menu i koszyka na 10000, a wlasny komunikat "dodano"
   az na 100000 — przy naszym dawnym 1200 przyciski menu przebijaly sie
   przez otwarta szuflade. Wartosc idzie ze zmiennej, wiec sklep z jeszcze
   wyzsza warstwa da sie dostroic bez ruszania arkusza. */
.mkosz-szuflada {
    position: fixed;
    top: 0;
    z-index: var(--mkosz-warstwa, 100200);

    display: flex;
    flex-direction: column;

    width: var(--mkosz-szer, 420px);
    max-width: calc(100vw - var(--mkosz-margines, 16px));

    /* Panel nie siega od gory do dolu: stoi posrodku wysokosci z oddechem
       dookola, wiec widac, ze strona jest pod spodem — i widac, gdzie
       kliknac, zeby go zamknac. */
    height: var(--mkosz-wys-teraz, 75dvh);
    max-height: calc(100dvh - 2 * var(--mkosz-margines, 16px));

    /* Panel dotyka krawedzi ekranu — zaokraglony tylko od strony srodka */
    border-radius: var(--mkosz-radius-panel, 16px) 0 0 var(--mkosz-radius-panel, 16px);
    overflow: hidden;

    background: var(--mkosz-tlo, #fff);
    color: var(--mkosz-tekst, #1a1a1a);
    font-family: var(--mkosz-font, inherit);
    font-size: var(--mkosz-fs, 14px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);

    /* Animujemy WYLACZNIE transform. Animowanie "right" albo szerokosci
       przelicza uklad przy kazdej klatce i na telefonie widac zacinanie. */
    transition: transform var(--mkosz-czas, 300ms) ease;
}

/* Pion trzyma `top: 50%` plus przesuniecie o polowe wysokosci — to samo
   przesuniecie musi byc w obu stanach, inaczej panel skakalby przy otwieraniu. */
.mkosz-szuflada { top: 50%; }

.mkosz-strona-prawo .mkosz-szuflada { right: 0; transform: translate(100%, -50%); }
.mkosz-strona-lewo  .mkosz-szuflada {
    left: 0;
    transform: translate(-100%, -50%);
    border-radius: 0 var(--mkosz-radius-panel, 16px) var(--mkosz-radius-panel, 16px) 0;
}

.mkosz-szuflada.mkosz-otwarta { transform: translate(0, -50%); }

/* Panel w trakcie zapytania: przygaszony i nieklikalny, zeby drugie
   klikniecie nie wyslalo sprzecznej zmiany. */
.mkosz-szuflada.mkosz-pracuje .mkosz-tresc,
.mkosz-szuflada.mkosz-pracuje .mkosz-stopka {
    opacity: 0.6;
    pointer-events: none;
}

/* Dodanie w tle: przycisk pokazuje, ze pracuje, a szuflada juz jedzie. */
.single_add_to_cart_button.mkosz-dodaje,
.mpc-sticky-btn.mkosz-dodaje {
    opacity: 0.75;
    cursor: progress;
}
.mkosz-szuflada.mkosz-dodaje .mkosz-ladowanie { margin: 40px auto; }

.mkosz-przykrycie {
    position: fixed;
    inset: 0;
    z-index: calc(var(--mkosz-warstwa, 100200) - 1);
    background: var(--mkosz-cien-tlo, rgba(0, 0, 0, 0.5));
    opacity: 0;
    transition: opacity var(--mkosz-czas, 300ms) ease;
}

.mkosz-przykrycie.mkosz-widoczne { opacity: 1; }

/* Strona pod otwartym panelem nie moze sie przewijac — inaczej palec
   przewija tresc sklepu zamiast listy w koszyku. */
/*
 * Blokada tla przy otwartej szufladzie.
 *
 * Samo `overflow: hidden` na body NIE zatrzymuje przewijania palcem na iOS —
 * strona pod spodem jechala dalej, pasek przewijania migal z boku, a sticky ATC
 * wjezdzal na wierzch. Dlatego body staje sie `fixed` i dostaje ujemny `top`
 * rowny pozycji przewijania; skrypt przywraca ja przy zamknieciu.
 */
body.mkosz-otwarty {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}

/* Sticky ATC karty produktu stoi na warstwie 999999, czyli nad szuflada.
   Przy otwartym koszyku nie ma czego dodawac — wiec go nie ma. */
body.mkosz-otwarty .mpc-sticky { display: none !important; }

/* ── Naglowek ─────────────────────────────────────────────── */

.mkosz-naglowek {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px var(--mkosz-px, 16px);
    border-bottom: 1px solid var(--mkosz-linia, #e5e7eb);
    /* Wyglad elementow (4.17.0): --mkosz-<pole> z Koszyk\Model\Wyglad, tylko
       ustawione; zapas w var() = wyglad sprzed 4.17 */
    background: var(--mkosz-naglowek-tlo, transparent);
}

.mkosz-tytul {
    margin: 0;
    font-family: var(--mkosz-tytul-kroj, inherit);
    font-size: var(--mkosz-tytul-rozmiar, 19px);
    font-weight: var(--mkosz-tytul-grubosc, 600);
    line-height: 1.2;
    color: var(--mkosz-tytul-kolor, inherit);
}

.mkosz-licznik {
    color: var(--mkosz-drugi, #6b7280);
    font-weight: 500;
}

.mkosz-zamknij {
    flex: none;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--mkosz-zamknij-kolor, inherit);
    cursor: pointer;
}

.mkosz-status {
    margin: 0;
    padding: 8px var(--mkosz-px, 16px);
    background: #fdecec;
    color: #8a1c1c;
    font-size: 13px;
}

/* ── Prog darmowej dostawy ────────────────────────────────── */

.mkosz-dostawa {
    padding: 10px var(--mkosz-px, 16px) 0;
    font-size: var(--mkosz-dostawa-rozmiar, 13px);
    color: var(--mkosz-dostawa-kolor, var(--mkosz-drugi, #6b7280));
}

.mkosz-dostawa p { margin: 0 0 7px; }
.mkosz-dostawa--pelna p { color: var(--mkosz-zysk, #15803d); font-weight: 600; }

.mkosz-dostawa-tor {
    height: var(--mkosz-dostawa-tor-wysokosc, 6px);
    border-radius: 99px;
    background: var(--mkosz-dostawa-tor-tlo, var(--mkosz-linia, #e5e7eb));
    overflow: hidden;
}

.mkosz-dostawa-tor span {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: var(--mkosz-dostawa-tor, var(--mkosz-akcent, #1a1a1a));
    transition: width var(--mkosz-czas, 300ms) ease;
}

.mkosz-dostawa--pelna .mkosz-dostawa-tor span { background: var(--mkosz-zysk, #15803d); }

/* ── Lista pozycji ────────────────────────────────────────── */

.mkosz-tresc {
    overscroll-behavior: contain;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 var(--mkosz-px, 16px) 14px;
}

.mkosz-lista { margin: 0; padding: 0; list-style: none; }

.mkosz-poz {
    position: relative;
    display: flex;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--mkosz-linia, #e5e7eb);
    transition: opacity 0.2s ease;
}

.mkosz-poz:last-child { border-bottom: 0; }
.mkosz-poz--pracuje { opacity: 0.5; }

/* Zielone kolko z plusem w rogu miniaturki — potwierdzenie, ze produkt
   wlasnie wpadl do koszyka. Wczesniej bylo to zielone pole na CALYM wierszu:
   widoczne, ale przez poltorej sekundy zaslanialo to, co klient chcial
   zobaczyc. Obwodka w kolorze tla odcina kolko od zdjecia. */
.mkosz-poz-dodano {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    width: var(--mkosz-plakietka, 30px);
    height: var(--mkosz-plakietka, 30px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: calc(var(--mkosz-plakietka, 30px) / 3.5);
    background: var(--mkosz-plakietka-tlo, rgba(21, 128, 61, 0.85));
    color: #fff;
    font-size: calc(var(--mkosz-plakietka, 30px) * 0.62);
    font-weight: 400;
    line-height: 1;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.mkosz-poz--nowa .mkosz-poz-dodano { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.mkosz-poz-obraz {
    position: relative;   /* uklad odniesienia dla plakietki */
    flex: none;
    width: var(--mkosz-poz-obraz-rozmiar, 68px);
    height: var(--mkosz-poz-obraz-rozmiar, 68px);
    display: block;
}

.mkosz-poz-obraz img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--mkosz-radius, 8px);
}

.mkosz-poz-info { flex: 1 1 auto; min-width: 0; }

.mkosz-poz-nazwa {
    display: block;
    margin-bottom: 8px;
    color: var(--mkosz-poz-nazwa-kolor, inherit);
    font-family: var(--mkosz-poz-nazwa-kroj, inherit);
    font-size: var(--mkosz-poz-nazwa-rozmiar, 14px);
    font-weight: var(--mkosz-poz-nazwa-grubosc, 500);
    line-height: 1.35;
    text-decoration: none;
}

/* Wiersz pod nazwa: "Pakiet: Jedno kolo + Pas" i inne dane pozycji.
   Mniejszy i wyszarzony, zeby nie konkurowal z nazwa produktu. */
.mkosz-poz-meta {
    display: block;
    margin-top: 2px;
    color: var(--mkosz-poz-meta-kolor, var(--mkosz-drugi, #6b7280));
    font-size: var(--mkosz-poz-meta-rozmiar, 12px);
    line-height: 1.35;
}

.mkosz-poz-dol {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mkosz-ilosc {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--mkosz-ilosc-ramka, var(--mkosz-linia, #e5e7eb));
    border-radius: 99px;
    background: var(--mkosz-ilosc-tlo, transparent);
    color: var(--mkosz-ilosc-kolor, inherit);
}

.mkosz-ilosc-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.mkosz-ilosc-ile {
    min-width: 22px;
    text-align: center;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.mkosz-poz-cena { color: var(--mkosz-poz-cena-kolor, inherit); font-size: var(--mkosz-poz-cena-rozmiar, 14px); font-weight: var(--mkosz-poz-cena-grubosc, 600); white-space: nowrap; }
.mkosz-poz-cena del { margin-right: 5px; color: var(--mkosz-poz-cena-stara, var(--mkosz-drugi, #6b7280)); font-weight: 400; }

.mkosz-poz-usun {
    flex: none;
    align-self: flex-start;
    padding: 0 2px;
    border: 0;
    background: none;
    color: var(--mkosz-usun-kolor, var(--mkosz-drugi, #9ca3af));
    font-size: var(--mkosz-usun-rozmiar, 20px);
    line-height: 1;
    cursor: pointer;
}

/* ── Pusty koszyk ─────────────────────────────────────────── */

.mkosz-pusty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 46px 10px;
    color: var(--mkosz-drugi, #6b7280);
    text-align: center;
}

.mkosz-pusty p { margin: 0; }

/* ── Stopka ───────────────────────────────────────────────── */

.mkosz-stopka {
    flex: 0 0 auto;
    padding: 10px var(--mkosz-px, 16px) 14px;
    border-top: 1px solid var(--mkosz-linia, #e5e7eb);
    background: var(--mkosz-tlo, #fff);
}

/* Pismo podsumowania z panelu (4.14.0): --mkosz-pods-* wypisuje
   Frontend_Controller::css_podsumowania tylko wtedy, gdy sklep je ustawil —
   bez nich zostaja wartosci zapasowe ponizej (wyglad z 4.13). */
.mkosz-koszty { display: grid; gap: 4px; margin-bottom: 10px; font-family: var(--mkosz-pods-kroj, inherit); }

.mkosz-koszty > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--mkosz-drugi, #6b7280);
    font-size: var(--mkosz-pods-fs, 12.5px);
    /* Wlasna interlinia (4.14.0): wiersze dziedziczyly ja z motywu (Salient
       ~1,7), wiec "Oszczedzasz" i "Do zaplaty" staly daleko od siebie mimo
       malych odstepow siatki. Dzieci tez — <strong> i <span> nie wracaja do 1,7. */
    line-height: 1.25;
}

.mkosz-koszty > div > *,
.mkosz-koszty > div strong { line-height: 1.25; }

.mkosz-koszty strong { color: var(--mkosz-tekst, #111827); font-weight: var(--mkosz-pods-waga, 600); }
.mkosz-koszty-zysk strong { color: var(--mkosz-zysk, #15803d); }

/* Napis "Oszczedzasz" — osobny kolor tylko z panelu; pigulka ma wlasny */
.mkosz-koszty > [data-wiersz="oszczednosc"] > span:first-child { color: var(--mkosz-pods-oszczedn, inherit); }

/* Kolory napisu i kwoty kazdego wiersza osobno (4.17.0). Zapas = to, co
   dawaly reguly wyzej (kwota: tekst, w wierszach "zysku" kolor oszczednosci).
   (0,2,1) bije .mkosz-koszty strong i .mkosz-koszty-zysk strong. */
.mkosz-koszty > [data-wiersz="produkty"] > span:first-child { color: var(--mkosz-wiersz-produkty-napis, inherit); }
.mkosz-koszty > [data-wiersz="produkty"] > strong { color: var(--mkosz-wiersz-produkty-kwota, var(--mkosz-tekst, #111827)); }
.mkosz-koszty > [data-wiersz="dostawa"] > span:first-child { color: var(--mkosz-wiersz-dostawa-napis, inherit); }
.mkosz-koszty > [data-wiersz="dostawa"] > strong { color: var(--mkosz-wiersz-dostawa-kwota, var(--mkosz-tekst, #111827)); }
.mkosz-koszty > .mkosz-koszty-zysk[data-wiersz="dostawa"] > strong { color: var(--mkosz-wiersz-dostawa-kwota, var(--mkosz-zysk, #15803d)); }
.mkosz-koszty > [data-wiersz="oszczednosc"] > strong { color: var(--mkosz-wiersz-oszczednosc-kwota, var(--mkosz-zysk, #15803d)); }
.mkosz-koszty > [data-wiersz="razem"] > span:first-child { color: var(--mkosz-wiersz-razem-napis, inherit); }
.mkosz-koszty > [data-wiersz="razem"] > strong { color: var(--mkosz-wiersz-razem-kwota, var(--mkosz-tekst, #111827)); }

/* Pigulka "-25%" przy "Oszczedzasz" — tlo w kolorze zysku */
.mkosz-pigulka {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 99px;
    background: var(--mkosz-pigulka-tlo, var(--mkosz-zysk, #15803d));
    color: var(--mkosz-pigulka-kolor, #fff);
    font-size: var(--mkosz-pigulka-rozmiar, 11px);
    font-weight: 700;
    line-height: 1.35;
    vertical-align: 1px;
    white-space: nowrap;
}

.mkosz-koszty-razem {
    color: var(--mkosz-tekst, #111827);
    font-weight: 700;
}

.mkosz-koszty-razem strong { font-size: var(--mkosz-pods-razem-kwota, 17px); }

/* Napis "Do zaplaty". Dwie klasy, bo `.mkosz-koszty > div` (0,1,1) bije
   samo `.mkosz-koszty-razem` (0,1,0) — 15 px wyzej nigdy nie wygrywalo
   i napis mial wielkosc pozostalych wierszy. Tak zostaje domyslnie. */
.mkosz-koszty > .mkosz-koszty-razem { font-size: var(--mkosz-pods-razem-fs, var(--mkosz-pods-fs, 12.5px)); }

/* Pozioma linia — osobny element listy, niezalezny od napisow (4.7.0).
   Od 4.13.0 ciasniej: 6 px od wiersza nad nia (4 px gap siatki + 2)
   i 5 px do wiersza pod nia (1 + 4) — stopka zabierala za duzo ekranu.
   Dwie klasy, bo `.mkosz-koszty > div` (flex, kolor, rozmiar) ma (0,1,1). */
.mkosz-koszty > .mkosz-koszty-linia {
    display: block;
    height: 0;
    margin: 2px 0 1px;
    border-top: 1px solid var(--mkosz-linia, #e5e7eb);
}

.mkosz-przycisk {
    /* Wysokosc z panelu i z Karty liczy sie RAZEM z wysciolka, jak na
       <button> produktu. Salient daje to kazdemu elementowi (*), panel
       WordPressa i inne motywy nie — przycisk wychodzil o wysciolke wyzszy. */
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 13px 16px;
    border-radius: var(--mkosz-radius, 8px);
    background: var(--mkosz-akcent, #1a1a1a);
    color: var(--mkosz-akcent-tekst, #fff);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.mkosz-przycisk:hover { color: var(--mkosz-akcent-tekst, #fff); opacity: 0.92; }

/* Przycisk kasy: napis i opcjonalna druga linijka jeden pod drugim,
   wysrodkowane takze przy wysokosci ustawionej w panelu (min-height).
   Wyglad drugiej linijki = domyslne "Druga linijka" z Karty produktu;
   przy "Przycisk jak na produkcie" nadpisuje go css_przycisku() w PHP. */
.mkosz-przycisk--kasa {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mkosz-przycisk-napis,
.mkosz-przycisk-pod { display: block; }

.mkosz-przycisk-pod {
    margin-top: 9px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    opacity: 0.85;
}

/* Kropki na czas pobrania zawartosci — kolor akcentu sklepu (nie linii),
   zeby bylo widac na jasnym tle, i podskok zamiast samego mrugania —
   ruch czyta sie jako "cos sie dzieje" wyrazniej niz zmiana przezroczystosci. */
.mkosz-ladowanie {
    display: flex;
    gap: 11px;
    justify-content: center;
    align-items: flex-end;
    padding: 44px 0;
}

.mkosz-ladowanie span {
    width: 12px;
    height: 12px;
    border-radius: 99px;
    background: var(--mkosz-akcent, #1a1a1a);
    animation: mkosz-podskok 0.9s infinite ease-in-out both;
}

.mkosz-ladowanie span:nth-child(2) { animation-delay: 0.15s; }
.mkosz-ladowanie span:nth-child(3) { animation-delay: 0.3s; }

@keyframes mkosz-podskok {
    0%, 80%, 100% { transform: translateY(0) scale(0.72); opacity: 0.55; }
    40%           { transform: translateY(-11px) scale(1); opacity: 1; }
}

@media (max-width: 768px) {
    /* Jedna zmienna przelacza wysokosc dla panelu I uchwytu naraz — dwie
       osobne reguly na `top` potrafily sie rozjechac przy zmianie kolejnosci. */
    .mkosz-szuflada,
    .mkosz-uchwyt { --mkosz-wys-teraz: var(--mkosz-wys-mobile, 90dvh); }

    .mkosz-szuflada {
        /* Oddech tylko od strony srodka ekranu — prawa krawedz przylega */
        width: calc(100vw - var(--mkosz-margines, 16px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .mkosz-szuflada, .mkosz-przykrycie, .mkosz-dostawa-tor span,
    .mkosz-poz-dodano { transition: none; }
    .mkosz-poz--nowa .mkosz-poz-dodano { transform: none; }
    /* Bez ruchu kropki musza zostac widoczne — nie zamrazamy ich
       w przygaszonym stanie spoczynkowym animacji. */
    .mkosz-ladowanie span { animation: none; opacity: 1; transform: none; }
}

/* ── Uchwyt przy krawedzi ─────────────────────────────────── */
/*
 * Kafelek z ikona koszyka, ktory zostaje po zamknieciu szuflady. Stoi na tej
 * samej wysokosci, co naglowek "Koszyk" w panelu, wiec zamkniecie czyta sie
 * jak zwiniecie szuflady DO tej ikony, a nie jak jej zniknieciu.
 *
 * Pion liczymy z wysokosci panelu: gorna krawedz panelu to polowa ekranu minus
 * polowa jego wysokosci, a naglowek siedzi tuz pod nia.
 */
.mkosz-uchwyt {
    position: fixed;
    right: 0;
    top: calc(50% - var(--mkosz-wys-teraz, 75dvh) / 2 + var(--mkosz-uchwyt-offset, 30px));
    z-index: calc(var(--mkosz-warstwa, 100200) - 2);

    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 12px 10px 14px;
    border: 0;
    border-radius: var(--mkosz-radius-panel, 16px) 0 0 var(--mkosz-radius-panel, 16px);

    background: var(--mkosz-tlo, #fff);
    color: var(--mkosz-tekst, #1a1a1a);
    box-shadow: -3px 2px 14px rgba(0, 0, 0, 0.14);
    cursor: pointer;

    transform: translateX(0);
    transition: transform var(--mkosz-czas, 300ms) ease, opacity var(--mkosz-czas, 300ms) ease;
}

.mkosz-uchwyt[hidden] { display: none; }
.mkosz-uchwyt-ikona { display: block; width: 22px; height: 22px; }
.mkosz-uchwyt-ikona svg { width: 100%; height: 100%; display: block; }

.mkosz-uchwyt-licznik {
    min-width: 18px;
    padding: 0 5px;
    border-radius: 99px;
    background: var(--mkosz-akcent, #1a1a1a);
    color: var(--mkosz-akcent-tekst, #fff);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* Przy otwartej szufladzie uchwyt chowa sie w prawo — to on „staje sie" panelem */
body.mkosz-otwarty .mkosz-uchwyt {
    transform: translateX(110%);
    opacity: 0;
    pointer-events: none;
}

/* ── Ikona i licznik w naglowku szuflady ──────────────────── */

.mkosz-tytul { display: flex; align-items: center; gap: 6px; }

.mkosz-tytul-ikona { position: relative; display: block; width: 24px; height: 24px; flex: none; }
.mkosz-tytul-ikona svg { width: 100%; height: 100%; display: block; }
.mkosz-tytul-napis { margin-left: 4px; }

/* Liczba sztuk obok ikony, w jednym wierszu z napisem (4.14.0) */
.mkosz-tytul .mkosz-licznik {
    position: static;
    flex: none;
    min-width: 17px;
    padding: 0 4px;
    border-radius: 99px;
    background: var(--mkosz-licznik-tlo, var(--mkosz-akcent, #1a1a1a));
    color: var(--mkosz-licznik-kolor, var(--mkosz-akcent-tekst, #fff));
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

/* ── Wariant BOCZNY wygasza rozwijany koszyk motywu ───────── */
/*
 * Salient trzyma mini-koszyk w .cart-outer; przy wlaczonej szufladzie dwa
 * koszyki naraz to jeden za duzo. Ikona i licznik zostaja.
 *
 * Selektor MUSI zawierac #header-outer. Motyw wypisuje
 * `#header-outer .widget_shopping_cart { display: block !important }`,
 * a identyfikator bije nasze trzy klasy nawet przy dwoch !important —
 * ta sama pulapka, co przy elemencie <button> i sticky ATC.
 */
body.mkosz-bez-ikony-motywu #header-outer .cart-menu-wrap,
body.mkosz-bez-ikony-motywu #mobile-cart-link,
body.mkosz-boczny #header-outer .widget_shopping_cart,
body.mkosz-boczny #header-outer .cart-notification,
body.mkosz-boczny #header-secondary-outer .widget_shopping_cart,
body.mkosz-boczny #slide-out-widget-area .widget_shopping_cart,
body.mkosz-boczny .cart-outer .widget_shopping_cart,
body.mkosz-boczny .cart-outer .cart-notification,
body.mkosz-boczny .nectar-slide-in-cart {
    display: none !important;
}

/* ── Wariant TRADYCYJNY: kolory rozwijanego koszyka ───────── */
/* Nie zmieniamy ukladu — motyw zostaje przy swoim. Dokładamy tylko to,
   czego Salient nie daje z panelu: szerokosc, cien i kolory. */
body:not(.mkosz-boczny) .cart-outer .widget_shopping_cart {
    width: var(--mkosz-dropdown-szer, 340px);
    background: var(--mkosz-tlo, #fff);
    color: var(--mkosz-tekst, #1a1a1a);
    border-radius: var(--mkosz-radius, 8px);
    box-shadow: 0 6px var(--mkosz-dropdown-cien, 18px) rgba(0, 0, 0, 0.14);
}

body:not(.mkosz-boczny) .cart-outer .widget_shopping_cart .cart_list li {
    border-bottom: 1px solid var(--mkosz-linia, #e5e7eb);
}

body:not(.mkosz-boczny) .cart-outer .widget_shopping_cart .button.checkout {
    background: var(--mkosz-akcent, #1a1a1a) !important;
    color: var(--mkosz-akcent-tekst, #fff) !important;
    border-radius: var(--mkosz-radius, 8px) !important;
}

/* ── Dobieranie produktow (4.12.0) ────────────────────────── */
/*
 * Trzy warianty (klasa .mkosz-dob--kafle|kompakt|pasek) na tych samych
 * elementach. Wyglad idzie zmiennymi --mkd-* z atrybutu style sekcji
 * (Dobieranie::css_deklaracje); fallbacki w var() to kolory koszyka —
 * puste pole koloru w panelu = barwa sklepu, bez ustawiania.
 * Kadr zdjecia przez padding-top, nie aspect-ratio (WebKit + stretch).
 */
.mkosz-dob,
.mkosz-dob * { box-sizing: border-box; }

.mkosz-dob {
    margin-top: var(--mkd-sekcja-odstep-nad, 6px);
    padding: var(--mkd-sekcja-pad-pion, 0) var(--mkd-sekcja-pad-poziom, 0);
    border: var(--mkd-sekcja-ramka-grubosc, 0) var(--mkd-sekcja-ramka-styl, solid) var(--mkd-sekcja-ramka-kolor, var(--mkosz-linia, #e5e7eb));
    border-radius: var(--mkd-sekcja-zaokraglenie, 0);
    background: var(--mkd-sekcja-tlo, transparent);
    color: var(--mkosz-tekst, #1a1a1a);
    text-align: left;
}

.mkosz-dob a { color: inherit; text-decoration: none; box-shadow: none; }

/* Wiersze naglowka i napisu: flex, zeby polozenie (lewo/srodek/prawo/cala)
   nie zalezalo od line-boxa rodzica — inline-block w bloku dokladal odstep */
.mkosz-dob-el--naglowek {
    display: var(--mkd-naglowek-pokaz, flex);
    justify-content: var(--mkd-naglowek-wyrownanie, flex-start);
    margin: var(--mkd-naglowek-odstep-nad, 0) 0 var(--mkd-naglowek-odstep-pod, 8px);
}

.mkosz-dob-el--napis {
    display: var(--mkd-napis-pokaz, flex);
    justify-content: var(--mkd-napis-wyrownanie, flex-start);
    margin: var(--mkd-napis-odstep-nad, 0) 0 var(--mkd-napis-odstep-pod, 10px);
}

.mkosz-dob-naglowek,
.mkosz-dob-napis {
    display: block;
    margin: 0;
    line-height: 1.25;
}

.mkosz-dob-naglowek:empty,
.mkosz-dob-napis:empty { display: none; }

.mkosz-dob-naglowek {
    width: var(--mkd-naglowek-wyrownanie-szer, auto);
    padding: var(--mkd-naglowek-pad-pion, 0) var(--mkd-naglowek-pad-poziom, 0);
    border: var(--mkd-naglowek-ramka-grubosc, 0) var(--mkd-naglowek-ramka-styl, solid) var(--mkd-naglowek-ramka-kolor, currentColor);
    border-radius: var(--mkd-naglowek-zaokraglenie, 0);
    background: var(--mkd-naglowek-tlo, transparent);
    color: var(--mkd-naglowek-kolor, inherit);
    font-family: var(--mkd-naglowek-kroj, inherit);
    font-size: var(--mkd-naglowek-rozmiar, 17px);
    font-weight: var(--mkd-naglowek-grubosc, 700);
    letter-spacing: var(--mkd-naglowek-odstep-liter, 0);
    text-align: var(--mkd-naglowek-wyrownanie-tekst, left);
    text-transform: var(--mkd-naglowek-wielkie, none);
}

.mkosz-dob-napis {
    width: var(--mkd-napis-wyrownanie-szer, auto);
    padding: var(--mkd-napis-pad-pion, 4px) var(--mkd-napis-pad-poziom, 10px);
    border: var(--mkd-napis-ramka-grubosc, 1px) var(--mkd-napis-ramka-styl, dashed) var(--mkd-napis-ramka-kolor, var(--mkosz-akcent, #1a1a1a));
    border-radius: var(--mkd-napis-zaokraglenie, 99px);
    background: var(--mkd-napis-tlo, transparent);
    color: var(--mkd-napis-kolor, var(--mkosz-akcent, #1a1a1a));
    font-family: var(--mkd-napis-kroj, inherit);
    font-size: var(--mkd-napis-rozmiar, 12px);
    font-weight: var(--mkd-napis-grubosc, 700);
    letter-spacing: var(--mkd-napis-odstep-liter, 0);
    text-align: var(--mkd-napis-wyrownanie-tekst, left);
    text-transform: var(--mkd-napis-wielkie, none);
}

/* Belka (4.14.0): napis albo naglowek jako pasek jednego koloru od krawedzi
   do krawedzi szuflady, bez zaokraglen. Puste kolory = kolory przycisku kasy
   (--mkosz-cta-tlo/-tekst z Frontend_Controller::css_kolorow_cta). Ujemny
   margines = wyjscie poza odstep panelu i sekcji. */
.mkosz-dob--napis-belka .mkosz-dob-el--napis,
.mkosz-dob--naglowek-belka .mkosz-dob-el--naglowek {
    margin-left: calc(-1 * (var(--mkosz-px, 16px) + var(--mkd-sekcja-pad-poziom, 0px)));
    margin-right: calc(-1 * (var(--mkosz-px, 16px) + var(--mkd-sekcja-pad-poziom, 0px)));
}

/* Pasek siedzi juz na calej szerokosci stopki — wychodzimy tylko poza jego odstep */
.mkosz-dob--pasek.mkosz-dob--napis-belka .mkosz-dob-el--napis,
.mkosz-dob--pasek.mkosz-dob--naglowek-belka .mkosz-dob-el--naglowek {
    margin-left: calc(-1 * var(--mkd-sekcja-pad-poziom, 0px));
    margin-right: calc(-1 * var(--mkd-sekcja-pad-poziom, 0px));
}

.mkosz-dob--napis-belka .mkosz-dob-napis {
    width: 100%;
    border: 0;
    border-radius: 0;
    padding: var(--mkd-napis-pad-pion, 6px) calc(var(--mkosz-px, 16px) + var(--mkd-sekcja-pad-poziom, 0px));
    background: var(--mkd-napis-tlo, var(--mkosz-cta-tlo, var(--mkosz-akcent, #1a1a1a)));
    color: var(--mkd-napis-kolor, var(--mkosz-cta-tekst, var(--mkosz-akcent-tekst, #fff)));
}

.mkosz-dob--naglowek-belka .mkosz-dob-naglowek {
    width: 100%;
    border: 0;
    border-radius: 0;
    padding: var(--mkd-naglowek-pad-pion, 6px) calc(var(--mkosz-px, 16px) + var(--mkd-sekcja-pad-poziom, 0px));
    background: var(--mkd-naglowek-tlo, var(--mkosz-cta-tlo, var(--mkosz-akcent, #1a1a1a)));
    color: var(--mkd-naglowek-kolor, var(--mkosz-cta-tekst, var(--mkosz-akcent-tekst, #fff)));
}

/* Tekst belki rowno z trescia nad i pod nia (4.16.0): boki = odstep panelu
   + wysciolka sekcji, czyli tam, gdzie zaczynaja sie produkty i kafle.
   Wlasny "odstep wewnatrz — boki" napisu przesuwal tekst w prawo (napis ma
   domyslnie 10 px na pigulke), wiec w belce go nie ma. Pasek siedzi na calej
   szerokosci stopki, a jego kafle odsuwa tylko wysciolka sekcji. */
.mkosz-dob--pasek.mkosz-dob--napis-belka .mkosz-dob-napis,
.mkosz-dob--pasek.mkosz-dob--naglowek-belka .mkosz-dob-naglowek {
    padding-left: var(--mkd-sekcja-pad-poziom, 0px);
    padding-right: var(--mkd-sekcja-pad-poziom, 0px);
}

/* Kafle: zawsze dwa obok siebie — tak mieszcza sie w szufladzie 359 px */
.mkosz-dob-siatka {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mkd-kafel-odstep, 10px);
}

.mkosz-dob-kafel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--mkd-kafel-pad, 8px);
    border: var(--mkd-kafel-ramka-grubosc, 1px) var(--mkd-kafel-ramka-styl, solid) var(--mkd-kafel-ramka-kolor, var(--mkosz-linia, #e5e7eb));
    border-radius: var(--mkd-kafel-zaokraglenie, 10px);
    background: var(--mkd-kafel-tlo, var(--mkosz-tlo, #fff));
    text-align: var(--mkd-kafel-wyrownanie, left);
    transition: opacity 0.2s ease;
}

.mkosz-dob-kafel.mkosz-dob-kafel--pracuje { opacity: 0.55; pointer-events: none; }

.mkosz-dob-zdj {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    padding-top: var(--mkd-zdjecie-proporcje, 100%);
    overflow: hidden;
    border-radius: var(--mkd-zdjecie-zaokraglenie, 8px);
    background: var(--mkd-zdjecie-tlo, transparent);
}

/* Dwie klasy + element: motyw potrafi dac img wysokosc auto selektorem (0,1,1) */
.mkosz-dob .mkosz-dob-zdj img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
    object-fit: var(--mkd-zdjecie-dopasowanie, cover);
}

.mkosz-dob-plakietka {
    position: absolute;
    top: 6px;
    left: var(--mkd-plakietka-rog-lewo, 6px);
    right: var(--mkd-plakietka-rog-prawo, auto);
    z-index: 1;
    display: var(--mkd-plakietka-pokaz, none);
    padding: 2px 7px;
    border-radius: var(--mkd-plakietka-zaokraglenie, 99px);
    background: var(--mkd-plakietka-tlo, var(--mkosz-zysk, #15803d));
    color: var(--mkd-plakietka-kolor, #fff);
    font-size: var(--mkd-plakietka-rozmiar, 11px);
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
}

/* Timer zamiast procentu (4.15.0): sekcja z --plakietka-timer pokazuje
   odliczanie i chowa procent; po 00:00 koszyk-front.js doklada
   --timer-koniec. Cyfry rowne, zeby plakietka nie drgala co sekunde. */
.mkosz-dob-plakietka--timer { display: none; font-variant-numeric: tabular-nums; }
.mkosz-dob--plakietka-timer .mkosz-dob-plakietka--procent { display: none; }
.mkosz-dob--plakietka-timer .mkosz-dob-plakietka--timer { display: var(--mkd-plakietka-pokaz, none); }
.mkosz-dob--plakietka-timer.mkosz-dob--timer-koniec .mkosz-dob-plakietka--timer { display: none; }
.mkosz-dob-timer-przed:not(:empty) { margin-right: 3px; }

/* Zapas z paska FOMO (4.18.0): plakietka tylko na kaflach z kampania zapasu
   (klasa --zapas), pozostale zostaja przy procencie. Odstepy marginesem,
   bez spacji w HTML — pusty napis nie zostawia dziury. */
.mkosz-dob-plakietka--zapas { display: none; font-variant-numeric: tabular-nums; }
.mkosz-dob--plakietka-zapas .mkosz-dob-plakietka--zapas { display: var(--mkd-plakietka-pokaz, none); }
.mkosz-dob--plakietka-zapas .mkosz-dob-kafel--zapas .mkosz-dob-plakietka--procent { display: none; }
.mkosz-dob-zapas-przed:not(:empty) { margin-right: 0.25em; }
.mkosz-dob-zapas-po:not(:empty) { margin-left: 0.25em; }

.mkosz-dob-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.mkosz-dob .mkosz-dob-nazwa {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--mkd-nazwa-linie, 2);
    overflow: hidden;
    margin: 8px 0 4px;
    color: var(--mkd-nazwa-kolor, inherit);
    font-family: var(--mkd-nazwa-kroj, inherit);
    font-size: var(--mkd-nazwa-rozmiar, 13px);
    font-weight: var(--mkd-nazwa-grubosc, 600);
    line-height: 1.3;
}

/* Druga linijka kafla "pakiet w gore" (opis z Pack Deals) */
.mkosz-dob-opis {
    display: block;
    margin: -2px 0 var(--mkd-opis-odstep-pod, 4px);
    color: var(--mkd-opis-kolor, var(--mkosz-drugi, #6b7280));
    font-family: var(--mkd-opis-kroj, inherit);
    font-size: var(--mkd-opis-rozmiar, 11.5px);
    font-weight: var(--mkd-opis-grubosc, 400);
    text-transform: var(--mkd-opis-wielkie, none);
    line-height: 1.3;
}

.mkosz-dob-dol {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
}

.mkosz-dob-ceny { display: block; line-height: 1.25; }

/* Kwoty z wc_price() niosa klasy WooCommerce — motyw bywa je stylizuje */
.mkosz-dob-ceny .amount,
.mkosz-dob-ceny bdi,
.mkosz-dob-ceny .woocommerce-Price-currencySymbol { font: inherit; color: inherit; }

.mkosz-dob-stara {
    display: var(--mkd-stara-pokaz, inline);
    margin-right: 5px;
    color: var(--mkd-stara-kolor, var(--mkosz-drugi, #6b7280));
    font-size: var(--mkd-stara-rozmiar, 12px);
    font-weight: 400;
    text-decoration: line-through;
}

/* Napis wpisany wprost przy propozycji / pakiecie — widoczny takze przy
   wylaczonej cenie przekreslonej (do 4.14.0 chowal sie razem z nia, a pasek
   ma ja domyslnie wylaczona). Pusty napis = brak elementu. */
/* Od ceny dzieli go spacja + 2 px, ok. 5 px (4.16.0) — 5 px marginesu ceny przekreslonej
   plus spacja dawaly prawie 8 px i napis "odstawal" od ceny */
.mkosz-dob-stara--napis { display: inline; margin-right: 2px; text-decoration: none; }
.mkosz-dob-ceny [hidden] { display: none !important; }

.mkosz-dob-cena {
    color: var(--mkd-cena-kolor, inherit);
    font-family: var(--mkd-cena-kroj, inherit);
    font-size: var(--mkd-cena-rozmiar, 14px);
    font-weight: var(--mkd-cena-grubosc, 700);
    white-space: nowrap;
}

.mkosz-dob-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    height: var(--mkd-cta-wysokosc, 34px);
    padding: 0 14px;
    border: var(--mkd-cta-ramka-grubosc, 2px) solid var(--mkd-cta-ramka-kolor, var(--mkosz-akcent, #1a1a1a));
    border-radius: var(--mkd-cta-zaokraglenie, 8px);
    background: var(--mkd-cta-tlo, transparent);
    color: var(--mkd-cta-kolor, var(--mkosz-akcent, #1a1a1a));
    font-family: var(--mkd-cta-kroj, inherit);
    font-size: var(--mkd-cta-rozmiar, 13px);
    font-weight: var(--mkd-cta-grubosc, 700);
    line-height: 1;
    text-transform: var(--mkd-cta-wielkie, none);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.mkosz-dob-cta:hover,
.mkosz-dob-cta:focus-visible {
    background: var(--mkd-cta-tlo-hover, var(--mkd-cta-tlo, transparent));
    color: var(--mkd-cta-kolor-hover, var(--mkd-cta-kolor, var(--mkosz-akcent, #1a1a1a)));
    opacity: 0.88;
}

.mkosz-dob--cta-pelny .mkosz-dob-cta { width: 100%; }

.mkosz-dob--cta-kolo .mkosz-dob-cta {
    width: var(--mkd-cta-wysokosc, 32px);
    padding: 0;
    border-radius: 50%;
}

/* Wypelniony przycisk w kompakcie i pasku: akcent sklepu z jego napisem */
.mkosz-dob--kompakt .mkosz-dob-cta,
.mkosz-dob--pasek .mkosz-dob-cta {
    background: var(--mkd-cta-tlo, var(--mkosz-akcent, #1a1a1a));
    color: var(--mkd-cta-kolor, var(--mkosz-akcent-tekst, #fff));
}

.mkosz-dob--kompakt .mkosz-dob-cta:hover,
.mkosz-dob--pasek .mkosz-dob-cta:hover {
    background: var(--mkd-cta-tlo-hover, var(--mkd-cta-tlo, var(--mkosz-akcent, #1a1a1a)));
    color: var(--mkd-cta-kolor-hover, var(--mkd-cta-kolor, var(--mkosz-akcent-tekst, #fff)));
}

/* B — kompakt: ceny jedna pod druga, plus po prawej */
.mkosz-dob--kompakt .mkosz-dob-dol {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6px;
}

.mkosz-dob--kompakt .mkosz-dob-ceny {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mkosz-dob--kompakt .mkosz-dob-stara { margin-right: 0; }

/* C — pasek: przypiety nad podsumowaniem, na cala szerokosc stopki */
/* Ujemny margines = wyjscie poza wysciolke stopki (14px 18px); kreska pod
   paskiem to cien, wiec ramka z panelu dalej dziala w calosci */
.mkosz-stopka .mkosz-dob--pasek {
    margin: -10px calc(-1 * var(--mkosz-px, 16px)) 10px;
    box-shadow: inset 0 -1px 0 var(--mkosz-linia, #e5e7eb);
}

.mkosz-dob--pasek .mkosz-dob-el--naglowek { color: var(--mkosz-akcent, #1a1a1a); }
.mkosz-dob--pasek .mkosz-dob-naglowek { color: var(--mkd-naglowek-kolor, var(--mkosz-akcent, #1a1a1a)); }

.mkosz-dob--pasek .mkosz-dob-kafel {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.mkosz-dob--pasek .mkosz-dob-zdj {
    flex: none;
    width: var(--mkd-zdjecie-rozmiar, 48px);
    height: var(--mkd-zdjecie-rozmiar, 48px);
    padding-top: 0;
}

.mkosz-dob--pasek .mkosz-dob-nazwa { margin: 0 0 2px; }
.mkosz-dob--pasek .mkosz-dob-dol { gap: 4px; margin-top: 0; }

/* Linia od krawedzi do krawedzi panelu miedzy produktami a "Dobierz…"
   (kafle i kompakt; pasek ma swoja kreske w stopce) */
.mkosz-dob-linia {
    display: block;
    height: 0;
    margin: 0 calc(-1 * var(--mkosz-px, 16px));
    border-top: 1px solid var(--mkosz-linia, #e5e7eb);
}

/* Z belka-separatorem linii nie ma (Dobieranie::belka_separator); w podgladzie
   panelu przelacza ja atrybut hidden — wlasny display wyzej by go zbil */
.mkosz-dob-linia[hidden] { display: none; }

/* Belka-separator staje dokladnie w miejscu linii: od ostatniego produktu
   dzieli ja tylko jego dolna wysciolka (10 px), tak jak pierwszy produkt od
   paska nad nim jego gorna (4.15.1). Do 4.15.0 dochodzil odstep nad sekcja
   (6 px) i nad belka (naglowek: 14 px). Dwie klasy, zeby zbic .mkosz-dob
   i .mkosz-dob-el--napis/--naglowek (po 0,1,0). */
.mkosz-dob.mkosz-dob--belka-separator { margin-top: 0; padding-top: 0; }
.mkosz-dob-el.mkosz-dob-el--separator { margin-top: 0; }

/* Kolko w rogu nie moze przykrywac nazwy */
.mkosz-dob--pasek.mkosz-dob--cta-kolo .mkosz-dob-info { padding-right: 8px; }

.mkosz-dob--pasek.mkosz-dob--cta-kolo .mkosz-dob-cta {
    position: absolute;
    top: -7px;
    right: -7px;
    border-color: var(--mkd-cta-ramka-kolor, var(--mkd-sekcja-tlo, #f7f7f7));
}

/* Zwijanie paska: strzalka przy naglowku, stan pamieta sessionStorage */
.mkosz-dob--zwijana .mkosz-dob-el--naglowek {
    position: relative;
    padding-right: 26px;
    cursor: pointer;
}

.mkosz-dob-zwin { display: none; }

.mkosz-dob--zwijana .mkosz-dob-zwin {
    position: absolute;
    top: 50%;
    right: 0;
    display: flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    color: inherit;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.mkosz-dob--zwiniety .mkosz-dob-zwin { transform: translateY(-50%) rotate(180deg); }

.mkosz-dob--zwiniety .mkosz-dob-el--napis,
.mkosz-dob--zwiniety .mkosz-dob-el--kafle { display: none; }

.mkosz-dob--zwiniety .mkosz-dob-el--naglowek { margin-bottom: 0; }

/* Pozycja z ceny oferty: ilosc 1 bez zmiany (cena dotyczy jednej sztuki) */
.mkosz-ilosc--stala { padding: 0 10px; }

@media (prefers-reduced-motion: reduce) {
    .mkosz-dob-cta, .mkosz-dob-zwin, .mkosz-dob-kafel { transition: none; }
}