/* Pack Deals Frontend */

/* Ksztalt fajki trzymany raz, jako maska. Data URI zamiast pliku: jeden
   request mniej i zaden sklep nie musi niczego wgrywac, zeby zobaczyc punktor. */
:root {
    --mpd-fajka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}

.mpd-bundles {
    /* Dolny 20px, nie 16: zmierzone na zywo — odstep kafli od przycisku
       ATC ma byc taki sam jak odstep sekcji "Sprawdz sklad" od kafli (20px).
       Gorny zostaje 16 (przez collapse z marginesem sekcji karty i tak
       wychodzi wartosc gap_top sekcji). */
    margin: 16px 0 20px;
    width: 100%;
}

/* Karta produktu robi globalny reset `.mpc, .mpc * { line-height: var(--mpc-lh) }`,
   a oferta siedzi w jej srodku (section.mpc-s--cart > form.cart). Kazdy moj
   element bez wlasnej interlinii dostawal wiec 1.4 zamiast wartosci, ktora
   zakladalem — stad nierowne odstepy. Przypinam interlinie u siebie. */
.mpd-bundles .mpd-pkg-title {
    line-height: 1.3;
}

.mpd-bundles .mpd-offer-title {
    line-height: 1.3;
}

/* Kontener chipa ma tulic inline-block, a nie budowac wlasnego wiersza —
   przy odziedziczonej interlinii dokladal niewidoczny pasek pod chipem. */
.mpd-bundles .mpd-msg1,
.mpd-bundles .mpd-msg2 {
    line-height: 0;
}

/* Offer title */
.mpd-offer-title {
    font-family: var(--mpd-offer-title-font, inherit);
    font-size: var(--mpd-offer-title-size, 18px);
    color: var(--mpd-offer-title-color, #333);
    font-weight: var(--mpd-offer-title-weight, 700);
    margin: 0 0 12px;
    padding: 0;
}

/* ---- Individual offer card ---- */
.mpd-offer {
    display: block;
    background: var(--mpd-bg, #fff);
    border: var(--mpd-border-width, 1px) solid var(--mpd-border, #c6c6c6);
    border-radius: var(--mpd-radius, 8px);

    /* Odstep wewnetrzny kafla trzymamy TAKZE w zmiennej, bo liczy go jeszcze
       box "W zestawie" w wariancie pelnym (ujemnym marginesem). Trzy miejsca
       nadpisuja padding — kafel zaznaczony i skalowanie na telefonie — wiec
       kazde z nich ustawia te zmienne razem z paddingiem. */
    --mpd-pad-eff: var(--mpd-pad, 18px);
    padding: var(--mpd-pad-eff);
    margin-bottom: 12px;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
    position: relative;
    /* Kafel przycina zawartosc po wewnetrznym luku ramki. Dzieki temu belka
       podpisu 2 jest prostym prostokatem bez wlasnych rogow — jej ksztalt
       wycina przegladarka, wiec pasuje do kafla co do piksela przy kazdym
       zaokragleniu i grubosci. Poswiata to box-shadow na samym kaflu,
       wiec overflow jej nie tnie. */
    overflow: hidden;
}

/* Wybor bez kolka: znacznik znika z oczu, ale zostaje w formularzu i pod
   klawiatura (display:none wycialoby go z nawigacji Tab). */
.mpd-no-radio .mpd-offer-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Klient idacy klawiatura musi widziec, na ktorym kaflu stoi. Zostaje, bo
   w grupie radio focus chodzi RAZEM z zaznaczeniem — kafel pod klawiatura
   jest tym samym kaflem, ktory jest wybrany.

   Reguly ":hover" tu NIE MA swiadomie. Kolor zaznaczenia na najechanie
   mowil, ze pakiet jest wybrany, zanim ktokolwiek go wybral. Na telefonie
   bylo gorzej: WebKit zostawia stan hover po dotknieciu, wiec przejechanie
   palcem po liscie zapalalo kolejne pakiety. Pakiet zmienia kolor dopiero
   po kliknieciu. Kliskalnosc niesie kursor (cursor: pointer). */
.mpd-offer:focus-within {
    border-color: var(--mpd-border-selected, #189721);
}

.mpd-offer.mpd-selected {
    background: var(--mpd-bg-selected, #fafbff);
    border-color: var(--mpd-border-selected, #189721);
    /* Poswiata z czterech warstw: kazda dalej od kafla ma wieksze rozmycie
       i mniejsze krycie, wiec zanika plynnie zamiast konczyc sie krawedzia.
       Zadna nie ma spreadu bez rozmycia — to wlasnie ono robilo "druga ramke". */
    box-shadow: 0 0 3px 0 var(--mpd-glow-1, rgba(24, 151, 33, 0.38)),
                0 0 8px 2px var(--mpd-glow-2, rgba(24, 151, 33, 0.22)),
                0 0 16px 5px var(--mpd-glow-3, rgba(24, 151, 33, 0.12)),
                0 0 26px 9px var(--mpd-glow-4, rgba(24, 151, 33, 0.06));
}

/* Inner layout */
.mpd-offer-inner {
    display: flex;
    /* flex-start, nie center: przy centrowaniu wysokosc zdjecia wspoldecydowala
       o wysokosci wiersza, a wiersz przesuwal tresc, ktorej pozycje zdjecie
       wlasnie mierzy — pętla sprzezenia gubila kilka pikseli odstepu. */
    align-items: flex-start;
    gap: var(--mpd-gap-x, 18px);
    flex-wrap: nowrap;
}

.mpd-offer-radio {
    flex-shrink: 0;
    padding-top: 2px;
}

.mpd-offer-radio input[type="radio"],
.mpd-offer-radio input[type="checkbox"] {
    margin: 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Siatka kafla: nazwa | cena promocyjna
                 podpis 1 | cena standardowa
   Pozycje przypisane wprost — brak podpisu albo brak przeceny nie zsuwa
   pozostalych elementow do zlej kolumny. */
.mpd-offer-content {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    /* Przy waskim ekranie miejsce oddaje TEN odstep, a nie tresc kolumn */
    column-gap: var(--mpd-gap-price, 14px);
    row-gap: 2px;
    align-items: center;
}

.mpd-pkg-title  { grid-column: 1; grid-row: 1; }
.mpd-price-current { grid-column: 2; grid-row: 1; }
.mpd-msg1       { grid-column: 1; grid-row: 2; }
.mpd-price-old  { grid-column: 2; grid-row: 2; }

/* Warianty ida pelna szerokoscia kolumny tekstu */
.mpd-options {
    grid-column: 1 / -1;
}

/* Package title row */
.mpd-pkg-img {
    /* Kadr jest KWADRATEM o boku rownym wysokosci srodkowej sekcji. Bok liczy
       skrypt (mierzy .mpd-offer-content) — aspect-ratio razem ze stretch potrafi
       sie rozjechac na WebKicie, a iPhone to glowny ekran sklepu.
       Wartosc ponizej to kadr zanim skrypt zmierzy, i zapas gdy go zabraknie. */
    width: var(--mpd-img, 56px);
    height: var(--mpd-img, 56px);
    align-self: flex-start;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
}

.mpd-pkg-title {
    font-family: var(--mpd-title-font, inherit);
    font-size: var(--mpd-title-size, 15px);
    color: var(--mpd-title-color, #333);
    font-weight: var(--mpd-title-weight, 600);
}

/* Podpis 1 — chip pod nazwa pakietu, w srodkowej kolumnie */
.mpd-msg1 {
    margin: 0;
}

.mpd-msg1 span {
    display: inline-block;
    padding: 3px 12px;
    border-radius: var(--mpd-msg-radius, 8px);
    background: var(--mpd-msg1-bg, #e8f5ea);
    font-family: var(--mpd-msg1-font, inherit);
    font-size: var(--mpd-msg1-size, 12px);
    color: var(--mpd-msg1-color, #1d6a3a);
    font-weight: var(--mpd-msg1-weight, 700);
    line-height: 1.35;
}

/* Podpis 2 — pasek na cala szerokosc kafla, wtopiony w gorna krawedz.
   Ujemne przesuniecie o grubosc ramki sadza go rowno na niej z trzech stron. */
.mpd-msg2 {
    /* Pasek siedzi WEWNATRZ ramki (0 = krawedz pola za ramka), nie na niej.
       Wersja nakladana na ramke wymagala luku rownego co do piksela z lukiem
       kafla i przy kazdym zaokragleniu zostawala biala szczelina w narozach. */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    z-index: 2;
    line-height: 0;
}

.mpd-msg2 span {
    display: block;
    padding: 3px 12px;
    /* Zadnych wlasnych rogow — prostokat, ktory kafel przycina overflow-em */
    background: var(--mpd-msg2-bg, #189721);
    font-family: var(--mpd-msg2-font, inherit);
    font-size: var(--mpd-msg2-size, 12px);
    color: var(--mpd-msg2-color, #fff);
    font-weight: var(--mpd-msg2-weight, 700);
    line-height: 1.35;
    text-align: center;
}

/* Pasek w kolorze ramki kafla: szary przy nieaktywnym, kolor zaznaczenia przy
   wybranym. Dzieki temu podpis 2 czyta sie jako czesc kafla, a nie naklejka.
   Wylaczenie opcji w panelu przywraca wlasny kolor tla podpisu 2. */
.mpd-msg2-follows .mpd-msg2 span {
    background: var(--mpd-border, #c6c6c6);
}

.mpd-msg2-follows .mpd-offer.mpd-selected .mpd-msg2 span {
    background: var(--mpd-border-selected, #189721);
}

/* Zapas pod paskiem — wartosc na czas przed pomiarem skryptu, ktory ustawia
   go z REALNEJ wysokosci paska i realnego half-leadingu nazwy. */
.mpd-offer.mpd-has-badge {
    padding-top: calc(var(--mpd-msg2-size, 12px) * 1.35 + 6px + var(--mpd-pad, 18px));
}

/* Price */
.mpd-price-old {
    display: block;
    justify-self: end;
    white-space: nowrap;
    text-decoration: line-through;
    font-family: var(--mpd-price-font, inherit);
    font-size: var(--mpd-price-size, 16px);
    color: var(--mpd-price-color, #999);
    font-weight: var(--mpd-price-weight, 400);
}

.mpd-price-current {
    display: block;
    justify-self: end;
    white-space: nowrap;
    text-decoration: none;
    font-family: var(--mpd-promo-font, inherit);
    font-size: var(--mpd-promo-size, 18px);
    color: var(--mpd-promo-color, #189721);
    font-weight: var(--mpd-promo-weight, 700);
}

/* Kolor ceny musi trafic takze w DZIECI, nie tylko w <del>/<ins>.
   wc_price() pakuje kwote w .woocommerce-Price-amount > bdi, a motyw
   (Salient) barwi te klase akcentem sklepu — regula trafiajaca w dziecko
   bije dziedziczenie, wiec cena "stara" wychodzila zielona zamiast szarej.
   !important, bo motyw stylizuje ceny wlasnie w ten sposob. */
.mpd-bundles .mpd-price-old,
.mpd-bundles .mpd-price-old * {
    color: var(--mpd-price-color, #999) !important;
}

.mpd-bundles .mpd-price-current,
.mpd-bundles .mpd-price-current * {
    color: var(--mpd-promo-color, #189721) !important;
}

/* Ten sam problem dotyczy podpisow — tekst kwoty w komunikacie moze przyjsc
   z wc_price(), jesli sklep wpisze tam cene */
.mpd-bundles .mpd-msg1 span *,
.mpd-bundles .mpd-msg2 span * {
    color: inherit !important;
}

/* Ceny sa jednoliniowe (nowrap), wiec ich line-box moze byc rowny pismu.
   Motyw ustawia wlasna interlinie takze na spanach wewnatrz kwoty — wiersz
   siatki rosl ponad tekst i odstepy gora/dol wychodzily nierowne mimo
   symetrycznego paddingu. Klamra .x, .x * jak przy resetach w Karcie. */
.mpd-bundles .mpd-price-current,
.mpd-bundles .mpd-price-current *,
.mpd-bundles .mpd-price-old,
.mpd-bundles .mpd-price-old * {
    line-height: 1 !important;
}

/* Price info on product page */
.mpd-price-info {
    display: block;
    font-size: 12px;
    color: #666;
    font-weight: 400;
    margin-top: 2px;
}

/* Dopisek "/ szt." wewnatrz ceny Karty produktu — wlasny wiersz pod kwota */
.mpc-price-row .mpd-price-info {
    flex-basis: 100%;
    width: 100%;
}

/* ---- Cross-sell included products ---- */
/* Box siedzi na poziomie KAFLA, nie w kolumnie tekstu — inaczej zaczynalby
   sie dopiero za zdjeciem i wygladal na uciety z lewej. Pelna szerokosc
   kafla (minus jego odstep wewnetrzny) czyta sie jak podsumowanie zestawu,
   a nie jak dopisek do nazwy. */
.mpd-cs-included {
    /* Odstep nad boksem rowny odstepowi wewnetrznemu kafla — czyli TYLE SAMO,
       ile zostaje nad nazwa pakietu, pod belka podpisu 2. Linia zaczynajaca
       box czyta sie wtedy jako kolejna krawedz kafla, a nie jako cos
       doklejonego do ceny. Wlasna wartosc z panelu ma pierwszenstwo. */
    margin-top: var(--mpd-cs-gap, var(--mpd-pad-eff, 18px));
    padding: var(--mpd-cs-pad-y, 6px) 10px;
    background: var(--mpd-cs-bg, transparent);
    border-radius: var(--mpd-cs-radius, 4px);
    border: var(--mpd-cs-border-w, 1px) solid var(--mpd-cs-border, #e5e5e5);

    /* Gorna krawedz to OSOBNA linia oddzielajaca box od kafla: wlasna
       szerokosc, styl i kolor. Kazdy fallback prowadzi do dzisiejszej ramki,
       wiec sklep, ktory nic nie ustawi, widzi to samo co dotad. */
    border-top: var(--mpd-cs-line-w, var(--mpd-cs-border-w, 1px))
                var(--mpd-cs-line-style, solid)
                var(--mpd-cs-line-color, var(--mpd-cs-border, #e5e5e5));
}

/* Kafel zaznaczony ma wlasne kolory TYLKO wtedy, gdy sklep je ustawil —
   bez wartosci var() spada na kolor kafla niezaznaczonego */
.mpd-offer.mpd-selected .mpd-cs-included {
    background: var(--mpd-cs-bg-sel, var(--mpd-cs-bg, transparent));
    border-color: var(--mpd-cs-border-sel, var(--mpd-cs-border, #e5e5e5));

    /* PO border-color, bo skrot wyzej ustawia takze gore */
    border-top-color: var(--mpd-cs-line-color-sel,
                      var(--mpd-cs-line-color,
                      var(--mpd-cs-border-sel, var(--mpd-cs-border, #e5e5e5))));
}

/* Prefiks ".mpd-bundles" jest tu CELOWO: bez niego motyw wygrywal wlasna
   regula na span (zmierzone na hoopsy.pl — naglowek wracal do display: inline
   i text-transform: none, wiec odstep pod nim nie dzialal wcale). */
.mpd-bundles .mpd-cs-label {
    display: block;
    margin-bottom: var(--mpd-cs-label-gap, 8px);
    font-family: var(--mpd-cs-label-font, inherit);
    font-size: var(--mpd-cs-label-size, 11px);
    font-weight: var(--mpd-cs-label-weight, 700);
    color: var(--mpd-cs-label-color, #8a8a8a);
    /* Wersaliki i odstep miedzy literami sa USTAWIENIEM. Do 3.56 stalo tu
       0,5 px na sztywno, w 3.57 0,11 em — obie wartosci byly nie do ruszenia
       z panelu, wiec teraz ida zmienna. */
    text-transform: var(--mpd-cs-label-kaps, uppercase);
    letter-spacing: var(--mpd-cs-label-ls, 1.1px);
    line-height: 1.3;
}

.mpd-offer.mpd-selected .mpd-cs-label {
    color: var(--mpd-cs-label-color-sel, var(--mpd-cs-label-color, #8a8a8a));
}

/* Odstep nad lista daje margines naglowka — dwa odstepy jeden pod drugim
   sumowalyby sie i nie dalyby sie ustawic jednym polem. */
.mpd-cs-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Pozycja jest wierszem: kropka, tresc, kafelek dosuniety do prawej.
   Punktor przegladarki (list-style: disc) nie dawal sie ani pokolorowac
   niezaleznie od tekstu, ani ustawic obok elementu wypchnietego w prawo. */
.mpd-cs-list li {
    display: flex;
    align-items: center;
    /* Odstep miedzy wierszami idzie paddingiem pozycji, nie marginesem: przy
       jednym wierszu nie zostawia niczego u gory ani u dolu boksu. */
    padding: var(--mpd-cs-item-gap, 3px) 0;
    gap: var(--mpd-cs-dot-gap, 9px);
    font-family: var(--mpd-cs-item-font, inherit);
    font-size: var(--mpd-cs-item-size, 12px);
    font-weight: var(--mpd-cs-item-weight, 400);
    color: var(--mpd-cs-item-color, #444);
    line-height: 1.5;
}

/* Tekst pod lista ma WLASNA typografie — zadnego dziedziczenia po pozycjach
   listy. Lancuch fallbackow do --mpd-cs-item-* sprawial, ze zmiana grubosci
   pozycji ciagnela za soba tekst, dopoki tekst nie mial wlasnej wartosci. */
.mpd-cs-note {
    font-family: var(--mpd-cs-note-font, inherit);
    font-size: var(--mpd-cs-note-size, 12px);
    font-weight: var(--mpd-cs-note-weight, 400);
    color: var(--mpd-cs-note-color, #444);
    line-height: 1.5;
}

.mpd-offer.mpd-selected .mpd-cs-list li {
    color: var(--mpd-cs-item-color-sel, var(--mpd-cs-item-color, #444));
}

.mpd-offer.mpd-selected .mpd-cs-note {
    color: var(--mpd-cs-note-color-sel, var(--mpd-cs-note-color, #444));
}

.mpd-cs-note {
    margin: 4px 0 0;
    padding: 0;
}

/* Wariant "na cala szerokosc kafla": box nie jest juz pudelkiem w pudelku,
   tylko dolna czescia kafla. Ujemne marginesy zdejmuja odstep wewnetrzny
   kafla z trzech stron, a rogi wycina sam kafel (ma overflow: hidden), wiec
   nie trzeba tu powtarzac jego zaokraglenia — pasuje przy kazdej wartosci.
   Tresc dostaje odstep rowny odstepowi kafla, dzieki czemu stoi w jednej
   linii z nazwa pakietu nad nia. */
.mpd-cs-pelny .mpd-cs-included {
    /* Odstep nad boksem jest WLASNYM ustawieniem (jak w 3.41.1), a nie
       odstepem kafla: gorny oddech kafla liczy skrypt osobno, z jego wlasnego
       odstepu wewnetrznego. Dwie rozne rzeczy, dwie rozne wartosci. */
    margin: var(--mpd-cs-gap, var(--mpd-pad-eff, 18px))
            calc(-1 * var(--mpd-pad-eff, 18px))
            calc(-1 * var(--mpd-pad-eff, 18px));
    padding: var(--mpd-cs-pad-y, 11px) var(--mpd-pad-eff, 18px);
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 0;
}

/* SALIENT KOLORUJE KAZDY <span> W <label>.
   Regula "label span { color: akcent }" z salient-dynamic-styles.css trafia
   w kafel pakietu, bo kafel JEST <label>. Nasze spany, ktore same nie mowia
   o kolorze, dostawaly przez to kolor akcentu motywu — tresc pozycji byla
   rozowa na hoopsy.pl niezaleznie od ustawienia, a kwadracik z plusem brał
   ten sam kolor przez currentColor. Regula bezposrednia bije dziedziczenie,
   wiec musimy powiedziec "dziedzicz" WPROST. Zmierzone na zywej stronie:
   .mpd-cs-tekst i .mpd-cs-kropka mialy rgb(248,64,119) zamiast koloru pozycji.

   Dotyczy TYLKO spanow bez wlasnego koloru — plakietka i naglowek maja swoj
   i wygrywaja z motywem sama klasa. */
.mpd-bundles .mpd-cs-tekst,
.mpd-bundles .mpd-cs-val-tekst,
.mpd-bundles .mpd-cs-kropka {
    color: inherit;
}

/* Punktor przy pozycji. Trzy ksztalty, jedno miejsce w ukladzie:
   fajka (domyslnie), kropka albo wlasna ikonka ze sklepu.

   Rozmiar pusty dobiera sie do ksztaltu — kropka ma byc mala, fajka i ikonka
   czytelne — wiec kazdy wariant ma wlasna wartosc zapasowa w var(). */
.mpd-cs-kropka {
    flex: none;
    width: var(--mpd-cs-dot, 14px);
    height: var(--mpd-cs-dot, 14px);
}

/* Kropka: pelne kolo, domyslnie w kolorze tekstu pozycji — czyli tak, jak
   wygladal punktor przegladarki. */
.mpd-cs-punktor--kropka {
    width: var(--mpd-cs-dot, 5px);
    height: var(--mpd-cs-dot, 5px);
    border-radius: 50%;
    background: var(--mpd-cs-dot-color, currentColor);
}

/* Fajka: ksztalt idzie MASKA, a kolor jest zwyklym tlem. Dzieki temu jeden
   znacznik obsluguje dowolny kolor z panelu — bez drugiego pliku SVG na kazda
   barwe i bez wstawiania SVG do HTML-a przy kazdej pozycji. */
.mpd-cs-punktor--fajka {
    background-color: var(--mpd-cs-dot-color, currentColor);
    -webkit-mask: var(--mpd-fajka) center / contain no-repeat;
    mask: var(--mpd-fajka) center / contain no-repeat;
}

/* Kwadracik z plusem — ten z wizualizacji. Tlo bierze kolor punktora, sam
   znak ma wlasny (domyslnie bialy), wiec da sie go dopasowac do kazdego tla.

   Plus jest ZNAKIEM Z FONTU, dokladnie jak w wizualizacji (tam "+" przy
   font-size 10 px i wadze 800 w kwadracie 17 px). Pierwsza wersja rysowala
   go dwiema belkami i przy 17 px wychodzily one 1,6 px grube — a ulamek
   piksela przegladarka rozklada na dwa rzedy o roznej mocy, wiec belki byly
   nierowne i plus przestawal wygladac jak plus. Znak z fontu ma hinting
   i wychodzi rowno w kazdym rozmiarze. */
.mpd-cs-punktor--plus {
    width: var(--mpd-cs-dot, 17px);
    height: var(--mpd-cs-dot, 17px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: calc(var(--mpd-cs-dot, 17px) * 0.3);
    background: var(--mpd-cs-dot-color, currentColor);
    font-size: calc(var(--mpd-cs-dot, 17px) * 0.59);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
}

/* Prefiks .mpd-bundles, bo wyzej stoi ".mpd-bundles .mpd-cs-kropka
   { color: inherit }" (neutralizacja reguly Salienta) i bez niego znak
   wzialby kolor tekstu pozycji zamiast wlasnego. */
.mpd-bundles .mpd-cs-punktor--plus {
    color: var(--mpd-cs-dot-znak, #fff);
}

.mpd-cs-punktor--plus::before {
    content: "+";
    display: block;
}

/* Bez recznego przesuwania glifu. Policzone z metryk fontu (Montserrat 800,
   10 px w kwadracie 17 px): srodek tuszu plusa wypada 8,49 px od gory przy
   srodku kwadratu 8,50 px — czyli samo srodkowanie linii tekstu trafia co
   do setnej piksela. Kazde "poprawienie" marginesem psuloby to. */

.mpd-offer.mpd-selected .mpd-cs-punktor--plus {
    background: var(--mpd-cs-dot-color-sel, var(--mpd-cs-dot-color, currentColor));
}

/* Wlasna ikonka: prawdziwy obrazek, wiec zachowuje swoje kolory.
   Bez adresu nie rysuje nic — pozycja wyglada wtedy jak bez punktora. */
.mpd-cs-punktor--ikona {
    width: var(--mpd-cs-dot, 16px);
    height: var(--mpd-cs-dot, 16px);
    background: var(--mpd-cs-dot-url, none) center / contain no-repeat;
}

.mpd-offer.mpd-selected .mpd-cs-punktor--kropka {
    background: var(--mpd-cs-dot-color-sel, var(--mpd-cs-dot-color, currentColor));
}

.mpd-offer.mpd-selected .mpd-cs-punktor--fajka {
    background-color: var(--mpd-cs-dot-color-sel, var(--mpd-cs-dot-color, currentColor));
}

/* Tresc zajmuje to, co zostanie — kafelek ma pierwszenstwo i sie nie zwija.
   line-height: inherit jest tu po to, zeby wiersz mial dokladnie te sama
   wysokosc, co przed zmiana na uklad poziomy: bez tego motyw trafia w span
   wlasna interlinia (na hoopsy 1,4 zamiast 1,5) i kazdy wiersz gubil 1,2 px.
   Prefiks ".mpd-bundles" dokłada specyficznosci, bo sama klasa przegrywala
   z regula motywu na span — zmierzone na zywej stronie. */
.mpd-bundles .mpd-cs-tekst {
    flex: 1 1 auto;
    min-width: 0;
    line-height: inherit;
}

/* Kafelek po prawej: dowolny tekst albo cena. Rysuje sie TYLKO wtedy, gdy
   wiersz ma go wpisanego po kresce — sklep, ktory ich nie uzywa, nie widzi
   zadnej zmiany. */
.mpd-cs-val {
    flex: none;
    margin-left: auto;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
    padding: 2px 7px;
    border-radius: var(--mpd-cs-val-radius, 20px);
    background: var(--mpd-cs-val-bg, #ede7e9);
    color: var(--mpd-cs-val-color, #6e6675);
    font-size: var(--mpd-cs-val-size, 10px);
    font-weight: var(--mpd-cs-val-weight, 800);
    letter-spacing: 0.05em;
    line-height: 1.5;
}

.mpd-offer.mpd-selected .mpd-cs-val {
    background: var(--mpd-cs-val-bg-sel, var(--mpd-cs-val-bg, #ede7e9));
    color: var(--mpd-cs-val-color-sel, var(--mpd-cs-val-color, #6e6675));
}

/* Przekreslona wartosc: w spoczynku przygaszona, po wybraniu pakietu pelna —
   to ona niesie komunikat "tyle to kosztuje osobno". */
.mpd-cs-val s {
    font-weight: 600;
    color: var(--mpd-cs-val-strike, currentColor);
    opacity: 0.55;
}

.mpd-offer.mpd-selected .mpd-cs-val s {
    color: var(--mpd-cs-val-strike-sel, var(--mpd-cs-val-strike, currentColor));
    opacity: 1;
}

/* Stopka boksu: zdjecie po lewej, tekst po prawej.
   Nalezy do pakietu WYBRANEGO — na kaflu niezaznaczonym tylko wydluzalaby
   boks i odciagala uwage od tego, co jest w zestawie; pokazana po wyborze
   czyta sie jak potwierdzenie decyzji. display:none, a nie przezroczystosc:
   element ma nie zajmowac miejsca, bo wysokosc kafla liczy skrypt. */
.mpd-cs-stopka {
    display: none;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.mpd-offer.mpd-selected .mpd-cs-stopka {
    display: flex;
}

.mpd-cs-stopka-tekst {
    flex: 1 1 auto;
    min-width: 0;
}

.mpd-cs-stopka-tekst .mpd-cs-note:first-child {
    margin-top: 0;
}

/* Kadr zdjecia liczony w px, nie przez aspect-ratio: WebKit potrafi je
   zignorowac przy stretchu, a iPhone to glowny ekran sklepu.
   Kwadrat 1:1, poziomy prostokat 3:2. */
.mpd-cs-img {
    flex: none;
    display: block;
    border-radius: 4px;
    object-fit: cover;
}

.mpd-cs-img-kwadrat {
    width: var(--mpd-cs-img, 72px);
    height: var(--mpd-cs-img, 72px);
}

.mpd-cs-img-poziom {
    width: calc(var(--mpd-cs-img, 72px) * 1.5);
    height: var(--mpd-cs-img, 72px);
}

/* Lista bez zadnej pozycji nie ma zostawiac odstepu nad tekstem */
.mpd-cs-list:empty {
    display: none;
}

/* ---- Options / variants ---- */
.mpd-options {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--mpd-separator, #d8d8d8);
}

.mpd-option-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.mpd-option-num {
    font-weight: 600;
    font-size: 13px;
    color: #555;
    min-width: 20px;
}

.mpd-option-label {
    font-size: 12px;
    color: #666;
}

.mpd-option-select {
    padding: 4px 8px;
    font-size: 13px;
    border: 1px solid #ccc;
    border-radius: 4px;
    min-width: 80px;
    max-width: 160px;
}

.mpd-separator {
    border-top: 1px solid var(--mpd-separator, #d8d8d8);
    margin: 6px 0;
}

/* Flicker effect */
.mpd-effect-1 {
    animation: mpd-flicker 2s ease-in-out infinite;
}

@keyframes mpd-flicker {
    0%, 100% { box-shadow: 0 0 0 0 rgba(24, 151, 33, 0); }
    50% { box-shadow: 0 0 8px 2px rgba(24, 151, 33, 0.3); }
}

/* ---- Cart options ---- */
.mpd-cart-options {
    margin-top: 8px;
}

.mpd-cart-pkg-name {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 4px;
    color: #333;
}

.mpd-cart-cs-badge {
    display: inline-block;
    background: #2271b1;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.mpd-cart-info {
    font-size: 12px;
    color: #555;
    line-height: 1.6;
}

.mpd-cart-info-row {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

.mpd-cart-edit-link {
    display: inline-block;
    margin-top: 4px;
    font-size: 12px;
    color: #2271b1;
    text-decoration: underline;
    cursor: pointer;
}

.mpd-cart-edit-link:hover {
    color: #135e96;
}

.mpd-cart-edit-options {
    margin-top: 4px;
}

.mpd-cart-option-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.mpd-cart-save-btn {
    margin-top: 8px !important;
    font-size: 12px !important;
}

/* ---- Responsive ---- */

/* ── Kafel zaznaczony: wlasne kolory ──────────────────────────
   Kazda regula bierze najpierw zmienna "-sel", a gdy jej nie ma — zmienna
   stanu niezaznaczonego. Dzieki temu sklep, ktory nie ustawil nic nowego,
   wyglada dokladnie jak wczesniej, a ustawienie jednego koloru nie wymusza
   ustawienia calej reszty.

   Kolejnosc w pliku ma znaczenie: te reguly musza stac PO regulach stanu
   podstawowego, bo maja z nimi rowna specyficznosc tam, gdzie nie potrzeba
   !important. */

/* Grubosc ramki kafla zaznaczonego. border-width osobno, nie skrot `border` —
   skrot zresetowalby kolor ustawiony wyzej w regule stanu zaznaczonego. */
.mpd-offer.mpd-selected {
    border-width: var(--mpd-border-width-sel, var(--mpd-border-width, 1px));
}

.mpd-offer.mpd-selected .mpd-pkg-title {
    color: var(--mpd-title-color-sel, var(--mpd-title-color, #333));
}

.mpd-offer.mpd-selected .mpd-msg1 span {
    background: var(--mpd-msg1-bg-sel, var(--mpd-msg1-bg, #e8f5ea));
    color: var(--mpd-msg1-color-sel, var(--mpd-msg1-color, #1d6a3a));
}

.mpd-offer.mpd-selected .mpd-msg2 span {
    background: var(--mpd-msg2-bg-sel, var(--mpd-msg2-bg, #189721));
    color: var(--mpd-msg2-color-sel, var(--mpd-msg2-color, #fff));
}

/* Podpis 2 w kolorze ramki — opcja "pasek podazajacy za kaflem" ma wlasna
   regule wyzej, wiec kolor z ustawien musi ja tu przebic tylko wtedy, gdy
   zostal podany. Bez wlasnej wartosci zostaje kolor ramki zaznaczenia. */
.mpd-msg2-follows .mpd-offer.mpd-selected .mpd-msg2 span {
    background: var(--mpd-msg2-bg-sel, var(--mpd-border-selected, #189721));
}

.mpd-offer.mpd-selected .mpd-separator,
.mpd-offer.mpd-selected .mpd-msg2 + .mpd-separator {
    border-top-color: var(--mpd-separator-sel, var(--mpd-separator, #d8d8d8));
}

/* Ceny musza isc z !important, bo tak samo walczy o nie motyw (patrz regula
   dla stanu podstawowego wyzej) — bez tego wygralby Salient, nie ustawienie. */
.mpd-bundles .mpd-offer.mpd-selected .mpd-price-old,
.mpd-bundles .mpd-offer.mpd-selected .mpd-price-old * {
    color: var(--mpd-price-color-sel, var(--mpd-price-color, #999)) !important;
}

.mpd-bundles .mpd-offer.mpd-selected .mpd-price-current,
.mpd-bundles .mpd-offer.mpd-selected .mpd-price-current * {
    color: var(--mpd-promo-color-sel, var(--mpd-promo-color, #189721)) !important;
}


/* ── Kafel zaznaczony: wlasna typografia i geometria ──────────
   Ten sam wzorzec co przy kolorach: najpierw zmienna "-sel", a gdy jej nie ma —
   zmienna stanu podstawowego. Sklep, ktory nic nie ustawil, wyglada dokladnie
   jak przed aktualizacja. */

.mpd-offer.mpd-selected {
    border-radius: var(--mpd-radius-sel, var(--mpd-radius, 8px));
    --mpd-pad-eff: var(--mpd-pad-sel, var(--mpd-pad, 18px));
    padding: var(--mpd-pad-eff);
}

.mpd-offer.mpd-selected .mpd-pkg-title {
    font-family: var(--mpd-title-font-sel, var(--mpd-title-font, inherit));
    font-size: var(--mpd-title-size-sel, var(--mpd-title-size, 15px));
    font-weight: var(--mpd-title-weight-sel, var(--mpd-title-weight, 600));
}

.mpd-bundles .mpd-offer.mpd-selected .mpd-price-old {
    font-family: var(--mpd-price-font-sel, var(--mpd-price-font, inherit));
    font-size: var(--mpd-price-size-sel, var(--mpd-price-size, 16px));
    font-weight: var(--mpd-price-weight-sel, var(--mpd-price-weight, 400));
}

.mpd-bundles .mpd-offer.mpd-selected .mpd-price-current {
    font-family: var(--mpd-promo-font-sel, var(--mpd-promo-font, inherit));
    font-size: var(--mpd-promo-size-sel, var(--mpd-promo-size, 18px));
    font-weight: var(--mpd-promo-weight-sel, var(--mpd-promo-weight, 700));
}

.mpd-offer.mpd-selected .mpd-msg1 span {
    border-radius: var(--mpd-msg-radius-sel, var(--mpd-msg-radius, 8px));
    font-family: var(--mpd-msg1-font-sel, var(--mpd-msg1-font, inherit));
    font-size: var(--mpd-msg1-size-sel, var(--mpd-msg1-size, 12px));
    font-weight: var(--mpd-msg1-weight-sel, var(--mpd-msg1-weight, 700));
}

.mpd-offer.mpd-selected .mpd-msg2 span {
    font-family: var(--mpd-msg2-font-sel, var(--mpd-msg2-font, inherit));
    font-size: var(--mpd-msg2-size-sel, var(--mpd-msg2-size, 12px));
    font-weight: var(--mpd-msg2-weight-sel, var(--mpd-msg2-weight, 700));
}

/* Pasek podpisu 2 NIE dostaje wlasnego zaokraglenia — ani tu, ani w stanie
   podstawowym. Jego ksztalt wycina kafel overflow-em, wiec pasuje do rogu
   kafla co do piksela przy kazdym zaokragleniu i grubosci ramki. Reguła,
   ktora tu wczesniej stala, zaokraglala pasek od dolu (klasa
   "mpd-msg2-follows" siedzi na KONTENERZE, nie na kaflu, wiec ":not()"
   bylo zawsze prawdziwe). Zaokraglenie komunikatow dotyczy chipa. */

.mpd-offer.mpd-selected .mpd-cs-included {
    border-radius: var(--mpd-cs-radius-sel, var(--mpd-cs-radius, 4px));
}

/* W wariancie pelnym rogi rysuje kafel, wiec zaokraglenie boksu musi zejsc
   z drogi TAKZE kaflowi zaznaczonemu — jego regula wyzej jest mocniejsza
   (0,3,0) niz sam wariant (0,2,0). */
.mpd-cs-pelny .mpd-offer.mpd-selected .mpd-cs-included {
    border-radius: 0;
}

.mpd-offer.mpd-selected .mpd-cs-label {
    font-family: var(--mpd-cs-label-font-sel, var(--mpd-cs-label-font, inherit));
    font-size: var(--mpd-cs-label-size-sel, var(--mpd-cs-label-size, 11px));
    font-weight: var(--mpd-cs-label-weight-sel, var(--mpd-cs-label-weight, 700));
}

.mpd-offer.mpd-selected .mpd-cs-list li {
    font-family: var(--mpd-cs-item-font-sel, var(--mpd-cs-item-font, inherit));
    font-size: var(--mpd-cs-item-size-sel, var(--mpd-cs-item-size, 12px));
    font-weight: var(--mpd-cs-item-weight-sel, var(--mpd-cs-item-weight, 400));
}

/* Stan zaznaczony: wlasna wartosc, a gdy pusta — wlasna podstawowa.
   Nigdy wartosc pozycji listy. */
.mpd-offer.mpd-selected .mpd-cs-note {
    font-family: var(--mpd-cs-note-font-sel, var(--mpd-cs-note-font, inherit));
    font-size: var(--mpd-cs-note-size-sel, var(--mpd-cs-note-size, 12px));
    font-weight: var(--mpd-cs-note-weight-sel, var(--mpd-cs-note-weight, 400));
}

/* Miejsce na pasek podpisu 2 liczy sie z JEGO rozmiaru i odstepu kafla —
   przy wlasnych wartosciach dla zaznaczonego formula musi brac te wlasne,
   inaczej pasek naszedlby na tresc. Ostateczny odstep i tak wyrownuje
   skrypt, ale zanim policzy, kafel nie moze wygladac na zepsuty. */
.mpd-offer.mpd-selected.mpd-has-badge {
    padding-top: calc(var(--mpd-msg2-size-sel, var(--mpd-msg2-size, 12px)) * 1.35
                      + 6px + var(--mpd-pad-sel, var(--mpd-pad, 18px)));
}

@media (max-width: 768px) {
    /* Cena ZOSTAJE po prawej — zjezdzanie pod spod rozbijalo uklad kafla,
       a telefon to glowny ekran sklepu. Skalujemy proporcje, nie burzymy ich. */
    .mpd-offer {
        --mpd-pad-eff: calc(var(--mpd-pad, 18px) * 0.85);
        padding: var(--mpd-pad-eff);
    }

    .mpd-offer.mpd-has-badge {
        padding-top: calc(var(--mpd-msg2-size, 12px) * 1.35 + 6px + var(--mpd-pad, 18px) * 0.85);
    }

    /* Kafel zaznaczony ma wlasny rozmiar podpisu i odstep — na telefonie
       skalujemy je tak samo jak wartosci podstawowe */
    .mpd-offer.mpd-selected {
        --mpd-pad-eff: calc(var(--mpd-pad-sel, var(--mpd-pad, 18px)) * 0.85);
        padding: var(--mpd-pad-eff);
    }

    .mpd-offer.mpd-selected.mpd-has-badge {
        padding-top: calc(var(--mpd-msg2-size-sel, var(--mpd-msg2-size, 12px)) * 1.35
                          + 6px + var(--mpd-pad-sel, var(--mpd-pad, 18px)) * 0.85);
    }

    .mpd-bundles {
        --mpd-gap-x: 12px;
        --mpd-gap-price: 10px;
    }

    .mpd-pkg-img {
        width: calc(var(--mpd-img, 80px) * 0.82);
    }

    .mpd-option-select {
        max-width: 100%;
        flex: 1;
    }
}

@media (max-width: 575px) {
    /* Kroje skalujemy mnoznikiem, zeby ustawienie ze sklepu dalej mialo znaczenie */
    .mpd-offer-title {
        font-size: calc(var(--mpd-offer-title-size, 18px) * 0.9);
    }

    .mpd-pkg-title {
        font-size: calc(var(--mpd-title-size, 20px) * 0.85);
    }

    .mpd-price-current {
        font-size: calc(var(--mpd-promo-size, 24px) * 0.85);
    }

    .mpd-price-old {
        font-size: calc(var(--mpd-price-size, 17px) * 0.88);
    }

    /* Kafel zaznaczony skaluje sie TAK SAMO.
       Media query nie dodaje specyficznosci, wiec regula stanu zaznaczonego
       ".mpd-offer.mpd-selected .mpd-pkg-title" (0,2,1) bije stad ".mpd-pkg-title"
       (0,1,0) mimo ze stoi wyzej w pliku. Bez tych trzech regul zaznaczony kafel
       pokazywal na telefonie rozmiary desktopowe i przez to rosl przy kliknieciu.
       KAZDA nowa regula stanu zaznaczonego, ktora ustawia wlasciwosc skalowana
       w tym bloku, musi miec tu swoj odpowiednik. */
    .mpd-offer.mpd-selected .mpd-pkg-title {
        font-size: calc(var(--mpd-title-size-sel, var(--mpd-title-size, 20px)) * 0.85);
    }

    .mpd-bundles .mpd-offer.mpd-selected .mpd-price-current {
        font-size: calc(var(--mpd-promo-size-sel, var(--mpd-promo-size, 24px)) * 0.85);
    }

    .mpd-bundles .mpd-offer.mpd-selected .mpd-price-old {
        font-size: calc(var(--mpd-price-size-sel, var(--mpd-price-size, 17px)) * 0.88);
    }

    .mpd-msg1 span {
        padding: 3px 10px;
    }

    .mpd-msg2 span {
        padding: 3px 10px;
    }

    .mpd-bundles {
        --mpd-gap-x: 10px;
        --mpd-gap-price: 6px;
    }

    .mpd-option-row {
        gap: 4px;
    }
}

/* ── Tryb wariacji (DSers) ────────────────────────────────────
   Kafle pakietow steruja formularzem wariacji, wiec tabela wyboru
   wariantu i cena wariacji od WooCommerce sa zbedne — dublowalyby UI.
   Formularz zostaje w DOM (to on niesie variation_id do koszyka). */
.mpd-native-form .variations,
.mpd-native-form .reset_variations,
.mpd-native-form .woocommerce-variation-price,
.mpd-native-form .woocommerce-variation-availability {
    display: none !important;
}

/* Produkt wariantowy dostaje od WooCommerce dodatkowe wrappery wokol
   przycisku ATC. Formularz jest flexem (motyw), a wrapper jako flex-item
   kurczy sie do zawartosci (~300px) — width:100% przycisku z karty liczy
   sie wtedy od wrappera, nie od kolumny. Zmierzono na zywo: 300px przy
   sekcjach 460px + obcy margin-top 30px. Wrapper ma wypelniac formularz,
   dokladnie jak przycisk w produkcie prostym. */
.mpd-native-form .single_variation_wrap {
    flex: 1 1 100%;
    width: 100%;
}

/* Podwojna klasa, bo Salient daje 30px selektorem
   .woocommerce-variation-add-to-cart.woocommerce-variation-add-to-cart-enabled
   (0,2,0) w arkuszu ladowanym PO naszym — remis specyficznosci przegrywal
   kolejnoscia. (0,3,0) wygrywa niezaleznie od kolejnosci. */
.mpd-native-form .woocommerce-variation-add-to-cart.woocommerce-variation-add-to-cart {
    margin-top: 0;
}

/* ── Tryb wariacji: przelacznik pakietu w koszyku i kasie ─────
   Minus/plus skacze po pakietach (5 -> 10 szt.), X po prawej usuwa.
   Podwojona klasa na przyciskach: motyw adresuje elementy koszyka
   selektorami z prefiksem strony i zwykla klasa by przegrywala. */
.mpd-var-qty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    vertical-align: middle;
}

.mpd-var-qty .mpd-var-btn.mpd-var-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid #d7d7d7;
    border-radius: 8px;
    background: #fff;
    color: #1a1a1a;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s ease, background .15s ease;
}

.mpd-var-qty .mpd-var-btn.mpd-var-btn:hover {
    border-color: #9a9a9a;
}

.mpd-var-qty .mpd-var-btn.is-edge {
    opacity: .3;
    cursor: default;
    pointer-events: none;
}

.mpd-var-qty .mpd-var-count {
    min-width: 34px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
}

/* X stoi ZA plusem, lekko odsuniety — usuwanie ma byc obok, ale nie
   do pomylenia z krokiem w dol */
.mpd-var-qty .mpd-var-remove.mpd-var-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-left: 8px;
    border-radius: 50%;
    color: #b3b3b3;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: color .15s ease, background .15s ease;
}

.mpd-var-qty .mpd-var-remove.mpd-var-remove:hover {
    color: #c0392b;
    background: rgba(192, 57, 43, .08);
}

.mpd-var-qty.is-busy {
    opacity: .45;
    pointer-events: none;
}

/* Nazwa pakietu doklejona do nazwy pozycji (koszyk, kasa, mini-koszyk).
   !important, bo w koszyku span siedzi w linku, a motyw koloruje linki
   pozycji selektorami z !important. */
.mpd-pkg-name {
    color: var(--mpd-pkg-name-c, inherit) !important;
}

/* ---- Podpis gratisu w koszyku i kasie -----------------------------------
   Szablon WooCommerce rysuje pozycje jako <dt>klucz:</dt><dd>wartosc</dd>
   i dwukropek ma wpisany na sztywno. Podpis gratisu jest calym zdaniem,
   wiec etykieta jest zbedna — chowamy ja razem z dwukropkiem. Klucz
   "mpd-gratis" sluzy wylacznie do zbudowania tej klasy. */
dt.variation-mpd-gratis {
    display: none !important;
}

dd.variation-mpd-gratis {
    margin-left: 0;
}

dd.variation-mpd-gratis p {
    margin: 0;
}

/* Kontrolka ilosci w koszyku z doklejonym X. Pole zostaje takie, jakie
   rysuje motyw — dokladamy tylko przycisk obok, bo motyw potrafi ukrywac
   kolumne usuwania WooCommerce i bez tego nie ma czym usunac pozycji. */
.mpd-qty-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mpd-qty-inline .quantity {
    margin: 0;
}

/* Pozycja bez kropki (linia zaczeta mysnikiem w panelu) po prostu nie ma
   elementu kropki, wiec tresc zaczyna sie rowno z naglowkiem boksu.
   Wciecia nie trzeba juz cofac — lista nie ma zadnego. */
.mpd-cs-list li.mpd-cs-plain {
    list-style: none;
}