/* 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; }
.ppk-prog-tekst { margin:0 0 8px; font-size:13px; }
.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; }
/* Prog osiagniety = komunikat pozytywny, wiec i pasek pozytywny. */
.ppk-prog--ok .ppk-belka span { background:#11b76b; }
.ppk-prog--ok .ppk-kwota { color:#0e9b59; }

.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; }
}