/* Strony pakietow -- warstwa DODATKOWA do sklep.css (2026-09-24).

   Trzy rzeczy, ktore przyszly ze starych stron i zostaly, bo niosa tresc albo pieniadze:
   1. PROZA pisana recznie dla kazdego pakietu (tabela "jak wyglada lekcja", liczby, karty,
      "Czlowiek za projektem", "Jak powstaly") -- jej znaczniki zostaly nietkniete, bo tekst
      jest sprawdzany straznikami co do zdania; `.sk-prose` nadaje jej wyglad sklepu.
   2. LUPA z czesci/galeria.php -- powiekszenie z trybem czytania (A4 mozna przeczytac na
      telefonie), ktorego podglad z prototypu nie mial.
   3. KOSZYK z czesci/koszyk_blok.php -- ten sam formularz co na ekranie wyboru klasy
      (jedna implementacja sciezki pieniedzy); tu dostaje wyglad kolumny zakupu.
   Wszystko pod `.sk-product`/`.sk-prose`, zeby nie ruszyc ekranu wyboru klasy. */

/* ---------- Naglowek pakietu ---------- */
.sk-phero__text{margin-top:var(--sk-s3);max-width:62ch;color:var(--sk-text-2)}
.sk-pfacts{list-style:none;display:grid;gap:8px;margin-top:var(--sk-s4);max-width:62ch}
.sk-pfacts li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;font-weight:700;font-size:var(--sk-fs-sm);line-height:1.45}
.sk-pfacts li::before{content:"";width:20px;height:20px;margin-top:1px;background:var(--sk-green);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/20px 20px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/20px 20px no-repeat}
/* "Inne klasy:" -- pozostale pakiety serii. Pigulki z pelnym polem dotyku (--sk-tap), bo to
   nawigacja, a na telefonie stoja w jednym rzedzie obok siebie. */
.sk-inne{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:var(--sk-s4);font-size:var(--sk-fs-sm)}
.sk-inne__k{margin-right:4px;font-weight:700;color:var(--sk-text-3)}
.sk-inne a{display:inline-flex;align-items:center;min-height:var(--sk-tap);padding:0 14px;border:1px solid var(--sk-line-strong);
  border-radius:var(--sk-r-pill);background:var(--sk-paper);color:var(--sk-ink);font-weight:700;text-decoration:none}
.sk-inne a:hover{border-color:var(--sk-ink);background:var(--sk-ink-050)}
.sk-phero .sk-hero__art .sk-sheet{width:200px}
/* "Wypróbuj lekcję interaktywną" -- pod opisem pakietu, na KAZDEJ szerokosci (przyciski
   zakupu w naglowku znikaja od 1024 px, ten zostaje: to jedyna droga do wersji interaktywnej
   przed zakupem). Obwodka w kolorze akcji, bo szara ghost ginela obok opisu. */
.sk-try{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:var(--sk-s4)}
.sk-try__btn{border-color:var(--sk-ink)}
.sk-try__opis{flex:1 1 240px;max-width:46ch;margin:0;font-size:var(--sk-fs-sm);line-height:1.45;color:var(--sk-text-2)}
/* Skrot do darmowej probki pod przyciskami -- tym promujemy pakiety na grupach
   nauczycielskich (decyzja Darka 2026-09-17), wiec ma byc widoczny bez przewijania. */
.sk-phero__free{margin-top:var(--sk-s3);font-size:var(--sk-fs-sm);max-width:62ch}
/* inline-block, nie flex: <b> i reszta zdania maja plynac jak jeden tekst -- jako elementy
   flex lamaly sie w dwie osobne kolumny. Padding daje pole dotyku bez rozpychania wiersza. */
.sk-phero__free a{display:inline-block;padding:10px 0;color:var(--sk-ink);text-underline-offset:3px}
/* Opis pakietu z kursu pisze sprzedawca w zwyklym polu tekstowym: nowe linie sa jego akapitami. */
.sk-opis{white-space:pre-line;max-width:68ch}
@media (min-width:900px){.sk-phero .sk-hero__art{height:340px}}
.sk-szkic{padding:12px 0;background:#FFF4DE;border-bottom:1px solid #EBD3A0;font-size:var(--sk-fs-sm);color:var(--sk-text)}
.sk-szkic b{color:#7A4A00}

/* ---------- Kolumna zakupu ---------- */
.sk-buy__count{display:flex;align-items:center;gap:8px;margin-top:-8px;font-size:var(--sk-fs-sm);color:var(--sk-text-2)}
.sk-buy__count .sk-i{width:18px;height:18px;color:var(--sk-text-3)}
.sk-buy__count b{color:var(--sk-text)}
.sk-buy .sk-hint a{color:var(--sk-ink)}

/* Koszyk "Uczysz tez w innych klasach?" -- stare zmienne wskazuja na tokeny sklepu, a reguly
   z wiekszej specyficznoscia wygrywaja z <style> wstawionym przez sam blok. */
/* Koszyk w karcie zakupu, miedzy wersja a suma (2026-10-05) */
.sk-product .sk-buy .kilka{margin:18px 0 22px}
.sk-product .kilka{--linia:var(--sk-line);--akcent:var(--sk-ink);--akcja:var(--sk-ink);--przygasly:var(--sk-text-3);
  --display:var(--sk-font-display);--tekst:var(--sk-font-body);
  margin-top:var(--sk-s4);background:var(--sk-paper);border:1px solid var(--sk-line);border-radius:var(--sk-r-lg);box-shadow:none;font-size:var(--sk-fs-sm)}
.sk-product .kilka>summary{min-height:64px;padding:14px 18px;color:var(--sk-text);font-size:var(--sk-fs-md);font-weight:800}
.sk-product .kilka>summary::before{color:var(--sk-ink)}
.sk-product .kilka .kilka-tresc{padding:4px 18px 18px}
.sk-product .kilka p{color:var(--sk-text-2)}
.sk-product .kilka label.poz{min-height:48px}
.sk-product .kilka .war label{border-color:var(--sk-line-strong);border-radius:var(--sk-r-md)}
.sk-product .kilka .war label:has(input:checked){border-color:var(--sk-ink);background:var(--sk-ink-050)}
.sk-product .kilka .rabat{background:var(--sk-ink-050);border-radius:var(--sk-r-md)}
.sk-product .kilka .suma{font-family:var(--sk-font-display);color:var(--sk-text)}
.sk-product .kilka .pole{display:block;margin-top:14px;font-size:var(--sk-fs-sm)!important;color:var(--sk-text)!important}
.sk-product .kilka input[type=email]{min-height:48px;border:1.5px solid var(--sk-line-strong);border-radius:var(--sk-r-md)}
.sk-product .kilka .zg{color:var(--sk-text-2)}
.sk-product .kilka .zgoda--wybor{display:grid;gap:8px}
.sk-product .kilka .zgoda-opcje{display:flex;gap:16px;font-weight:700;color:var(--sk-text)}
.sk-product .kilka .zgoda-opcje label{display:inline-flex;align-items:center;gap:6px;min-height:40px;cursor:pointer}
.sk-product .kilka button{border-radius:var(--sk-r-md);background:var(--sk-ink);box-shadow:none;min-height:52px}
.sk-product .kilka button:hover{background:var(--sk-ink-hover)}
.sk-product .kilka button:disabled{background:var(--sk-line-strong)}

/* ---------- Podglad stron ---------- */
.sk-product .sk-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
@media (min-width:700px){.sk-product .sk-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sk-product .sk-gallery figure{margin:0}
.sk-product .sk-gallery figcaption{font-size:var(--sk-fs-xs)}
.sk-product .sk-gallery figcaption b{display:block;margin-bottom:2px;color:var(--sk-text);font-size:var(--sk-fs-sm)}
.sk-gallery__link{position:relative}
/* Plakietka na kaflu: bez niej nic nie mowi, ze kafelek da sie powiekszyc -- sam kursor
   to informacja wylacznie dla myszy. Na dotyku widoczna od razu (nie ma :hover). */
.podglad-lupa{position:absolute;right:8px;bottom:8px;pointer-events:none;background:rgba(9,14,24,.72);color:#fff;border-radius:999px;
  padding:4px 10px;font-size:.75rem;font-weight:800;letter-spacing:.02em;opacity:0;transform:translateY(4px);
  transition:opacity var(--sk-dur-1) var(--sk-ease),transform var(--sk-dur-1) var(--sk-ease)}
.sk-gallery__link:hover .podglad-lupa,.sk-gallery__link:focus-visible .podglad-lupa{opacity:1;transform:none}
@media (hover:none){.podglad-lupa{opacity:1;transform:none}}

/* Lupa: DWA TRYBY, bo strony pakietu to A4 ok. 1588x2246 px -- domyslnie cala kartka
   (widac, CZYM dokument jest), po kliknieciu szerokosc do czytania i pionowe przewijanie.
   `max(100%, 1000px)` a nie `100%`: na telefonie 375 px samo `100%` nie powiekszalo nic. */
.lupa{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;background:rgba(9,14,24,.93);-webkit-tap-highlight-color:transparent}
.lupa[hidden]{display:none}
html.lupa-otwarta{overflow:hidden}
.lupa-scena{flex:1 1 auto;min-height:0;overflow:auto;display:flex;align-items:center;justify-content:center;padding:16px;-webkit-overflow-scrolling:touch}
.lupa-img{max-width:100%;max-height:100%;border-radius:4px;background:#fff;box-shadow:0 18px 50px rgba(0,0,0,.5);cursor:zoom-in}
.lupa.zoom .lupa-scena{display:block}
.lupa.zoom .lupa-img{max-width:none;max-height:none;width:min(max(100%,1000px),var(--nat,1000px));height:auto;display:block;margin:0 auto;cursor:zoom-out}
.lupa-opis{flex:0 0 auto;background:rgba(9,14,24,.82);color:#dce6f2;padding:13px 64px;text-align:center;font-size:.93rem;line-height:1.5}
.lupa-opis b{display:block;color:#fff;font-family:var(--sk-font-display);font-size:1.04rem;font-weight:700;margin-bottom:2px}
.lupa-licznik{display:block;font-style:normal;font-size:.82rem;opacity:.7;margin-top:5px;letter-spacing:.02em}
.lupa-x,.lupa-nav{position:absolute;z-index:2;border:0;padding:0;cursor:pointer;color:#fff;background:rgba(255,255,255,.14);border-radius:999px;
  display:flex;align-items:center;justify-content:center;font:400 30px/1 var(--sk-font-body);transition:background var(--sk-dur-1) var(--sk-ease)}
.lupa-x{top:14px;right:14px;width:46px;height:46px}
.lupa-nav{top:calc(50% - 40px);width:54px;height:54px;font-size:38px}
.lupa-prev{left:14px}.lupa-next{right:14px}
.lupa-x:hover,.lupa-nav:hover{background:rgba(255,255,255,.28)}
.lupa-x:focus-visible,.lupa-nav:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:680px){
  .lupa-scena{padding:8px}
  .lupa-opis{padding:11px 16px;font-size:.88rem}
  .lupa-nav{width:44px;height:44px;font-size:30px}
  .lupa-x{width:42px;height:42px;font-size:27px}
}

/* ---------- Proza stron pakietow ---------- */
.sk-prose{display:grid;gap:var(--sk-s7);min-width:0}
.sk-prose .sekcja{padding:0;margin:0;background:none;border:0;box-shadow:none;scroll-margin-top:16px}
.sk-prose .sekcja--wash,.sk-prose .sekcja--oferta{padding:var(--sk-s5) var(--sk-s4);background:var(--sk-paper);border:1px solid var(--sk-line);border-radius:var(--sk-r-lg)}
.sk-prose .sekcja--oferta{border-top:4px solid var(--sk-ink)}
@media (min-width:600px){.sk-prose .sekcja--wash,.sk-prose .sekcja--oferta{padding:var(--sk-s5)}}
.sk-prose .w,.sk-prose .w-szer{max-width:none;margin:0;padding:0}
.sk-prose h2{margin:0 0 var(--sk-s3);font:600 var(--sk-fs-xl)/1.18 var(--sk-font-display);letter-spacing:-.006em;color:var(--sk-text)}
.sk-prose h3{margin:var(--sk-s5) 0 var(--sk-s1);font-weight:800;font-size:var(--sk-fs-lg);line-height:1.3;color:var(--sk-text)}
.sk-prose p{margin:0 0 var(--sk-s3);max-width:68ch;color:var(--sk-text-2)}
.sk-prose p:last-child{margin-bottom:0}
.sk-prose strong,.sk-prose b{color:var(--sk-text)}
.sk-prose ul,.sk-prose ol{margin:0 0 var(--sk-s3);padding-left:1.3em;color:var(--sk-text-2)}
.sk-prose li{margin:5px 0}
.sk-prose a{color:var(--sk-ink);text-underline-offset:2px}
.sk-prose .male{font-size:var(--sk-fs-sm);color:var(--sk-text-3)}
.sk-prose .lead{font-weight:800;font-size:var(--sk-fs-lg);color:var(--sk-text)}
.sk-prose table{width:100%;border-collapse:separate;border-spacing:0;margin:var(--sk-s3) 0 var(--sk-s4);background:var(--sk-paper);
  border:1px solid var(--sk-line);border-radius:var(--sk-r-md);overflow:hidden;font-size:var(--sk-fs-sm)}
.sk-prose th,.sk-prose td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--sk-line)}
.sk-prose tr:last-child td{border-bottom:0}
.sk-prose th{font-size:var(--sk-fs-xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--sk-text-3);background:var(--sk-desk)}
.sk-prose td{color:var(--sk-text-2)}
@media (max-width:560px){.sk-prose th,.sk-prose td{padding:10px}}
.sk-prose code{font:600 .88em var(--sk-font-mono);background:var(--sk-ink-050);color:var(--sk-ink);padding:1px 6px;border-radius:5px;overflow-wrap:anywhere}
.sk-prose .liczby{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:var(--sk-s4) 0}
.sk-prose .poz{padding:14px 16px;background:var(--sk-paper);border:1px solid var(--sk-line);border-radius:var(--sk-r-md)}
.sk-prose .sekcja--wash .poz,.sk-prose .sekcja--oferta .poz{background:var(--sk-desk);border-color:transparent}
.sk-prose .poz b{display:block;font:700 1.75rem/1.1 var(--sk-font-mono);color:var(--sk-ink);font-variant-numeric:tabular-nums}
.sk-prose .poz span{display:block;margin-top:4px;font-size:var(--sk-fs-sm);color:var(--sk-text-2)}
.sk-prose .karta{margin:var(--sk-s4) 0;padding:var(--sk-s4) var(--sk-s5);background:var(--sk-paper);border:1px solid var(--sk-line);border-radius:var(--sk-r-lg)}
.sk-prose .karta:first-child{margin-top:0}
.sk-prose .karta.akcent{border-left:4px solid var(--sk-ink)}
.sk-prose .karta.uwaga{border-left:4px solid var(--sk-cefr-dot);background:#FFF8EC}
.sk-prose .karta h3{margin-top:0}
.sk-prose .autor{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--sk-s4);align-items:start}
.sk-prose .autor-foto{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid var(--sk-ink-050)}
@media (max-width:560px){.sk-prose .autor{grid-template-columns:1fr}}
.sk-prose details.fold{margin:var(--sk-s5) 0 0;background:var(--sk-paper);border:1px solid var(--sk-line);border-radius:var(--sk-r-lg);overflow:hidden}
.sk-prose details.fold>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;min-height:56px;padding:12px 18px;font-weight:800;color:var(--sk-ink)}
.sk-prose details.fold>summary::-webkit-details-marker{display:none}
.sk-prose details.fold>summary::before{content:"+";flex:none;width:14px;font-size:1.25rem;line-height:1}
.sk-prose details.fold[open]>summary::before{content:"\2013"}
.sk-prose details.fold>summary:focus-visible{outline:3px solid var(--sk-ink);outline-offset:-3px}
.sk-prose .fold-tresc{padding:4px 18px 18px;border-top:1px solid var(--sk-line)}
.sk-prose .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 20px;border:0;border-radius:var(--sk-r-md);
  background:var(--sk-ink);color:#fff;font:800 var(--sk-fs-md)/1.2 var(--sk-font-body);text-decoration:none;cursor:pointer}
.sk-prose .btn:hover{background:var(--sk-ink-hover)}
.sk-prose .btn:disabled{opacity:.7;cursor:progress}
.sk-prose .blad{padding:12px 16px;border:1.5px solid var(--sk-red);border-radius:var(--sk-r-md);background:var(--sk-red-050);color:var(--sk-red);font-weight:700}
/* Darmowa probka ("Nie kupuj w ciemno") */
.sk-prose .probka-form{display:flex;flex-wrap:wrap;align-items:end;gap:12px;margin:var(--sk-s4) 0 var(--sk-s2)}
.sk-prose .probka-pole{display:flex;flex-direction:column;gap:6px;flex:1 1 260px}
.sk-prose .probka-pole span{font-size:var(--sk-fs-sm);font-weight:700;color:var(--sk-text)}
.sk-prose .probka-pole input{min-height:48px;padding:12px 14px;border:1.5px solid var(--sk-line-strong);border-radius:var(--sk-r-md);background:var(--sk-paper);font:inherit;color:var(--sk-text)}
.sk-prose .probka-pole input:focus{outline:3px solid var(--sk-ink);outline-offset:1px}
.sk-prose .probka-demo{margin-top:var(--sk-s4);padding-top:var(--sk-s4);border-top:1px solid var(--sk-line)}