/* Popup „dodano do koszyka".
   Wszystkie klasy z przedrostkiem .ppk- , zeby nie zderzyc sie ze stylami motywu.

   UKLAD: >767 px okno na srodku, <=767 px arkusz od dolu z przyciskami przyklejonymi
   do dolnej krawedzi (kciuk siega bez zmiany chwytu). Odpowiada zaakceptowanemu mockupowi
   z 13.08.2026 — z wycieta sekcja promocji 3+1, decyzja wlasciciela. */

.ppk-warstwa { position:relative; z-index:99990; }

.ppk-cien {
  position:fixed; inset:0; z-index:99991;
  background:rgba(29,29,29,.55);
}

.ppk-okno {
  position:fixed; z-index:99992; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(480px, calc(100vw - 40px)); max-height:calc(100vh - 40px); overflow:auto;
  background:#fff; border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.32);
  font-family:inherit; color:#1D1D1D; line-height:1.55; text-align:left;
}

.ppk-naglowek {
  display:flex; align-items:center; gap:10px;
  padding:18px 20px 14px; border-bottom:1px solid #e3ded7;
}
.ppk-fajka {
  display:grid; place-items:center; width:30px; height:30px; flex:none;
  border-radius:50%; background:#11b76b; color:#fff;
}
.ppk-tytul { font-size:18px; margin:0; flex:1; font-weight:700; }
/* ⚠️ `display:grid; place-items:center` jest KONIECZNE, nie kosmetyczne.
   Sam <button> dziedziczy z motywu `text-align` i `padding`, przez co znak „×" lądowal
   przyklejony do lewej krawedzi — widac to bylo dopiero po najechaniu, gdy pojawia sie
   tlo przycisku (zgloszone 13.08.2026). Siatka centruje niezaleznie od tego, co ustawi motyw.
   `line-height:0` zdejmuje dodatkowy odstep, ktory glyf „×" niesie w swoim boksie. */
.ppk-zamknij {
  flex:none; width:32px; height:32px; border:0; background:transparent;
  display:grid; place-items:center; text-align:center;
  font-size:26px; line-height:0; color:#6a6a6a; cursor:pointer; border-radius:6px; padding:0;
}
.ppk-zamknij:hover { background:#f4f2ef; color:#1D1D1D; }

.ppk-produkt { display:flex; gap:14px; padding:16px 20px; align-items:flex-start; }
.ppk-foto { width:76px; height:76px; flex:none; border-radius:8px; object-fit:cover; }
.ppk-foto--brak { background:linear-gradient(140deg,#efeae3,#ddd4c8); }
.ppk-opis { flex:1; min-width:0; }
.ppk-nazwa { font-size:15px; font-weight:700; margin:0 0 8px; }
.ppk-warianty { margin:0; display:flex; gap:6px; flex-wrap:wrap; }
.ppk-znacznik {
  font-size:11px; border:1px solid #e3ded7; border-radius:4px; padding:2px 7px; color:#6a6a6a;
}
.ppk-cena { text-align:right; flex:none; font-size:16px; font-weight:700; }
.ppk-cena del { font-weight:400; font-size:12px; color:#6a6a6a; display:block; }

.ppk-prog { margin:4px 20px 16px; background:#f4f2ef; border-radius:10px; padding:12px 14px; }
/* STALA WYSOKOSC pola progu (wlasciciel 11.09.2026: „jak wskoczy darmowa dostawa to jest przeskok").
   Stan „brakuje X" laczy sie w 2 linie (zmierzone 40,3 px na 375/390 i 1440), „Masz darmowa dostawe"
   ma 1 linie (20,1 px) - okno skakalo o 20 px. Tekst dostaje min-height dwoch linii i centrowanie
   w pionie; JS podmienia tresc W MIEJSCU (bez usuwania pola), wiec pasek i kolor sie animuja,
   a wysokosc nie drga. */
.ppk-prog-tekst {
  margin:0 0 8px; font-size:13px; min-height:calc(2 * 1.55em);
  display:grid; align-content:center;
}
.ppk-kwota { color:#B60106; }
.ppk-belka { height:6px; border-radius:3px; background:#e0dad2; overflow:hidden; }
.ppk-belka span {
  display:block; height:100%; border-radius:3px; background:#B60106;
  transition:width .3s ease, background-color .3s ease;
}
@media (prefers-reduced-motion: reduce) { .ppk-belka span { transition:none; } }
/* Prog osiagniety = komunikat pozytywny, wiec i pasek pozytywny. */
.ppk-prog--ok .ppk-belka span { background:#11b76b; }
.ppk-prog--ok .ppk-kwota { color:#0e9b59; }

/* SEKCJA GADZETOW „Dobierz do zamowienia" (1.4.0). KOMPAKTOWA - uwaga wlasciciela z 11.09.2026:
   „na mobile za duze, przez co trzeba scrollowac popup". Miniatura ma DOKLADNIE rozmiar zdjecia
   glownej pozycji (`.ppk-foto` 76 px), karta jest wierszem (foto | nazwa, cena, pigulka akcji),
   a cala sekcja miesci sie w ~125 px, zeby okno weszlo bez przewijania w 375x667.
   Metryki 1:1 z reszty okna: odstepy 20/16 px, ramki #e3ded7, tlo #f4f2ef, promienie 8-10 px.
   Desktop/tablet (>767 px): 3 kafelki w rzedzie (foto na gorze, tekst wysrodkowany) - nizsze
   niz lista 3 wierszy (~200 vs ~300 px) przy 480 px okna. Telefon: rzad przewijany poziomo. */
.ppk-upsell { padding:0 20px 12px; box-sizing:border-box; }
.ppk-upsell-tytul {
  margin:0 0 8px; padding-top:12px; border-top:1px solid #e3ded7;
  font-size:13px; font-weight:700; color:#1D1D1D; line-height:1.3;
}
.ppk-upsell-lista { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.ppk-karta {
  display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; box-sizing:border-box;
  border:1px solid #e3ded7; border-radius:10px; padding:8px; background:#fff; text-align:center;
}
.ppk-karta--dodana { border-color:#11b76b; }
.ppk-karta-foto {
  display:block; width:76px; height:76px; flex:none; object-fit:cover;
  border-radius:8px; background:#fff;
}
/* Tlo BIALE, nie #f4f2ef: gadzety to PNG z przezroczystoscia (tlo CSS przeswituje), zamienniki to
   JPG z bialym tlem w pliku - na szarym tle wygladaly niespojnie (wlasciciel 11.09.2026). Glowna
   miniatura `.ppk-foto` tez nie ma tla. Placeholder braku zdjecia zostaje osobna klasa `.ppk-foto--brak`. */
.ppk-karta-opis { display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; width:100%; }
.ppk-karta-nazwa {
  margin:0; font-size:12px; font-weight:600; line-height:1.25; color:#1D1D1D;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.5em;                     /* 2 linie zarezerwowane - karty rowne niezaleznie od nazwy */
}
.ppk-karta-cena { margin:0; font-size:13px; font-weight:700; color:#1D1D1D; line-height:1.2; }
.ppk-karta-cena del { font-weight:400; font-size:11px; color:#6a6a6a; margin-right:4px; }
.ppk-karta-cena ins { text-decoration:none; }
/* Znacznik pojemnosci („50 ml") w jednej linii z cena - ten sam wyglad co w linii produktu,
   inline, zeby karta nie urosla ponad 76 px foto. */
.ppk-karta-cena { white-space:nowrap; }
/* Motyw rysuje `bdi` w kwocie Woo jako `display:flex` (selektorem o specyficznosci 0,2,1) - w kafelku
   kwota ma stac w jednej linii ze znacznikiem, inaczej karta rosnie o linie (zmierzone: cena 32 px
   zamiast 15, stage 11.09.2026). Selektor 0,3,1, zeby wygrac bez !important. */
.ppk-karta .ppk-karta-cena .woocommerce-Price-amount, .ppk-karta .ppk-karta-cena .amount,
.ppk-karta .ppk-karta-cena .amount bdi, .ppk-karta .ppk-karta-cena bdi, .ppk-karta .ppk-karta-cena ins { display:inline; }
.ppk-karta-cena .ppk-znacznik {
  display:inline-block; font-weight:400; font-size:10px; line-height:1.2; padding:1px 5px;
  vertical-align:1px; margin-right:3px;
}
/* Akcja = mala pigulka; rozmiar liczony pod 76 px wysokosci wiersza na telefonie. */
.ppk-karta-akcja {
  margin-top:2px; display:inline-flex; align-items:center; justify-content:center; gap:3px;
  box-sizing:border-box; min-height:24px; padding:3px 10px; border-radius:12px;
  font-size:11px; font-weight:600; line-height:1.2; font-family:inherit; cursor:pointer; text-decoration:none;
  border:1px solid #1D1D1D; background:#fff; color:#1D1D1D; white-space:nowrap;
}
.ppk-karta-plus { font-size:14px; line-height:1; font-weight:700; }
.ppk-karta-akcja:hover { background:#1D1D1D; color:#fff; }
.ppk-karta-akcja:focus-visible { outline:2px solid #B60106; outline-offset:2px; }
.ppk-karta-dodaj.is-laduje { opacity:.55; cursor:progress; }
.ppk-karta-dodaj.is-dodano, .ppk-karta-dodaj.is-dodano:hover {
  background:#11b76b; border-color:#11b76b; color:#fff; cursor:default; opacity:1;
}
.ppk-karta-blad { margin:0; font-size:11px; line-height:1.2; color:#B60106; }
.ppk-karta-blad:empty { display:none; }
/* Komunikat dla czytnikow ekranu, poza widokiem. */
.ppk-upsell-live { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:0; }
/* Wjazd sekcji do otwartego okna - JS ustawia docelowe max-height, tu tylko przejscie. */
.ppk-upsell--wchodzi {
  overflow:hidden; max-height:0; opacity:0; padding-bottom:0;
  transition:max-height .24s ease-out, opacity .2s ease-out, padding-bottom .24s ease-out;
}

.ppk-przyciski { padding:0 20px 18px; display:grid; gap:9px; }
.ppk-btn {
  display:block; width:100%; box-sizing:border-box; text-align:center; text-decoration:none;
  border-radius:8px; padding:13px 16px; font-size:15px; font-weight:600;
  font-family:inherit; cursor:pointer; border:1px solid transparent;
}
.ppk-btn--glowny { background:#1D1D1D; color:#fff; }
.ppk-btn--glowny:hover { background:#000; color:#fff; }
.ppk-btn--drugi { background:#fff; color:#1D1D1D; border-color:#e3ded7; }
.ppk-btn--drugi:hover { border-color:#1D1D1D; }

@media (max-width:767px) {
  .ppk-okno {
    left:0; top:auto; bottom:0; transform:none;
    width:100%; max-height:88vh; border-radius:16px 16px 0 0;
    box-shadow:0 -14px 40px rgba(0,0,0,.3);
  }
  /* Uchwyt do zsuniecia palcem. PRAWDZIWY element, nie ::before — pseudo-element
     nie jest celem zdarzen, wiec nie dalo by sie za niego zlapac.
     `touch-action:none` na uchwycie: gest z uchwytu ma zawsze zsuwac arkusz,
     nigdy przewijac jego tresci. */
  .ppk-uchwyt {
    display:block; width:38px; height:4px; border-radius:2px;
    background:#d9d2c9; margin:9px auto 0; touch-action:none; cursor:grab;
  }
  .ppk-uchwyt::after {          /* powiekszone pole trafienia, niewidoczne */
    content:""; display:block; height:18px; margin:-7px -30px;
  }
  /* Powrot na miejsce po nieudanym zsunieciu ma byc plynny; w trakcie ciagniecia
     JS wylacza przejscie, zeby arkusz szedl dokladnie za palcem. */
  .ppk-okno { transition:transform .18s ease-out; }
  .ppk-cien { transition:opacity .18s ease-out; }
  .ppk-naglowek { padding:12px 16px 14px; }
  .ppk-produkt { padding-left:16px; padding-right:16px; }
  .ppk-prog { margin-left:16px; margin-right:16px; }
  /* Przyciski zawsze pod kciukiem, takze po przewinieciu zawartosci. */
  .ppk-przyciski {
    position:sticky; bottom:0; background:#fff;
    padding:12px 16px 14px; border-top:1px solid #e3ded7;
  }
  .ppk-btn { padding:14px 16px; font-size:16px; }
  /* Gadzety na telefonie: karta = WIERSZ (foto 76 px po lewej, obok nazwa/cena/pigulka), ~1,7 karty
     widoczne na 390 px, rzad przewijany palcem ze snapem. Ujemny margines + padding = full-bleed,
     a w spoczynku pierwsza karta w linii z tytulem (16 px, tyle co `.ppk-naglowek`/`.ppk-produkt`).
     🪤 `scroll-padding-inline` jest KONIECZNE: snap `mandatory` wyrownuje karte do krawedzi
     scrollportu i IGNORUJE padding toru - bez niego pierwsza karta startowala przy x=0
     (zmierzone na stage 11.09.2026). Ta sama wartosc trzyma 16 px takze po przewinieciu. */
  .ppk-upsell { padding:0 16px 8px; }
  .ppk-upsell-tytul { padding-top:10px; margin-bottom:6px; }
  .ppk-upsell-lista {
    display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory;
    margin:0 -16px; padding:0 16px; scroll-padding-inline:16px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .ppk-upsell-lista::-webkit-scrollbar { display:none; }
  /* MIEKKIE KRAWEDZIE TORU (wlasciciel 11.09.2026: „ostro sie wcina w bok ekranu"). Maska gradientowa
     na samym torze: dziala na kazdym tle (nie zgadujemy koloru arkusza), nie naklada nic na przyciski
     (zero pseudo-elementow, zero pointer-events), nie zmienia wysokosci. Stany daje JS klasami na
     `scroll`: `ppk-tor--prawo` gdy jest co przewijac w prawo, `ppk-tor--lewo` gdy tor juz przewiniety.
     W spoczynku lewa krawedz ostra (pierwsza karta w linii z tytulem), na koncu prawa ostra.
     `-webkit-mask-image` dla Safari iOS. Gradient sie nie animuje (mask-image nie interpoluje),
     wiec `prefers-reduced-motion` nie ma tu czego wylaczac. */
  .ppk-upsell-lista {
    --ppk-tor-l:0px; --ppk-tor-r:0px;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--ppk-tor-l), #000 calc(100% - var(--ppk-tor-r)), transparent 100%);
            mask-image:linear-gradient(to right, transparent 0, #000 var(--ppk-tor-l), #000 calc(100% - var(--ppk-tor-r)), transparent 100%);
  }
  .ppk-upsell-lista.ppk-tor--lewo  { --ppk-tor-l:40px; }
  .ppk-upsell-lista.ppk-tor--prawo { --ppk-tor-r:40px; }
  .ppk-karta {
    flex:0 0 58%; scroll-snap-align:start;
    flex-direction:row; align-items:flex-start; gap:8px; padding:4px; text-align:left;
  }
  .ppk-karta-opis { align-items:flex-start; gap:2px; }
  .ppk-karta-nazwa { min-height:0; }
  .ppk-karta-akcja { margin-top:1px; min-height:22px; padding:2px 9px; }
}