/* Hero „Zeszyt i ekran” -- WERSJA BOGATA, strona testowa /materialy2.php (Darek, 2026-10-04).
 * Zrodla: docs/sklep-projekt/hero-wideo/BRIEF.md i TRENDY.md (przepis na szklo 3.3, sprezyny 4.2).
 * Laduje sie PO sklep.css i korzysta z jego tokenow --sk-*. Niczego w sklep.css nie nadpisuje
 * poza klasami, ktorych tam nie ma (sk-hero--film, sk-vid, sk-pokaz, sk-subj, sk-ptile).
 *
 * Ruch: klasa html.sk-ruch (ustawiana w <head>, gdy system nie prosi o ograniczenie ruchu)
 * chowa elementy wejscia do czasu, az GSAP je pokaze. Bezpiecznik w <head> dodaje sk-ruch-ok
 * po 2,5 s, wiec strona nigdy nie zostaje pusta, nawet gdy biblioteka sie nie zaladuje. */

/* Kroje z SPEC par. 5, SAMODZIELNIE hostowane (OFL; bez Google Fonts CDN, SPEC par. 5). sklep.css je wymienia,
   ale do 2026-10-04 nikt ich nie wgral, wiec sklep pokazywal zastepcze Palatino/Georgia i system-ui.
   Atkinson Next to krój zmienny: jeden plik na 400 i 700. Razem ok. 90 KB, tylko na tej stronie. */
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/vendor/fonts/atkinson-next-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/vendor/fonts/atkinson-next-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poltawski Nowy';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/vendor/fonts/poltawski-nowy-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poltawski Nowy';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/vendor/fonts/poltawski-nowy-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --sk-glass:rgba(16,24,40,.60);        /* pod IKONE: biala ikona 4,66:1 nawet nad biela */
  --sk-glass-text:rgba(16,24,40,.78);   /* pod TEKST: bialy tekst 8,79:1 nawet nad biela */
  --sk-glass-rim:inset 0 0 0 1px rgba(255,255,255,.30),inset 0 1px 0 rgba(255,255,255,.50);
  --sk-ease-out:cubic-bezier(.16,1,.3,1);
}
@supports (transition-timing-function:linear(0,1)){
  :root{
    --sk-ease-spring:linear(0,.062,.205,.378,.55,.701,.823,.914,.977,1.016,1.037,1.045,1.045,1.039,1.032,1.024,1.016,1.01,1.005,1.002,1,.999,.998,.998,1);
    --sk-ease-spring-soft:linear(0,.048,.16,.298,.441,.573,.687,.781,.855,.91,.951,.978,.996,1.007,1.013,1.015,1.015,1.014,1.012,1.009,1.007,1.005,1.004,1.003,1);
  }
}

/* Wejscie: schowane tylko do pierwszej klatki animacji (albo do bezpiecznika) */
html.sk-ruch:not(.sk-ruch-ok) .sk-hero--film .sk-h1,
html.sk-ruch:not(.sk-ruch-ok) .sk-hero--film [data-wejscie],
html.sk-ruch:not(.sk-ruch-ok) .sk-hero--film .sk-vid{visibility:hidden}

/* ---------- Hero ---------- */
.sk-hero--film .sk-h1{display:grid;gap:var(--sk-s2);max-width:none}
.sk-hero__kicker{font:700 var(--sk-fs-sm)/1.3 var(--sk-font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--sk-ink)}
.sk-hero__hook{font:600 var(--sk-fs-2xl)/1.06 var(--sk-font-display);letter-spacing:-.018em;color:var(--sk-text);max-width:21ch;text-wrap:balance}
/* Maski slow przy wejsciu: overflow:clip nie przesuwa linii bazowej (hidden tak), a padding z ujemnym
   marginesem nie ucina ogonkow ani kresek nad literami. */
.sk-slowo{display:inline-block;overflow:hidden;overflow:clip;padding:.08em 0 .18em;margin:-.08em 0 -.18em}
.sk-slowo>span{display:inline-block}
.sk-hero__hook mark{color:inherit;padding-inline:.04em;
  background:linear-gradient(var(--sk-marker),var(--sk-marker)) no-repeat 0 88%/var(--sk-mark,100%) 40%}
.sk-hero--film .sk-lead{max-width:46ch}
.sk-hero__cta{display:flex;flex-wrap:wrap;gap:var(--sk-s3);margin-top:var(--sk-s5)}
.sk-hero__cta .sk-btn{transition:background-color var(--sk-dur-1),border-color var(--sk-dur-1),color var(--sk-dur-1),scale var(--sk-dur-1) var(--sk-ease-spring,var(--sk-ease))}
.sk-hero__cta .sk-btn:active{transform:none;scale:.97}
.sk-hero__try{margin-top:var(--sk-s2);font-size:var(--sk-fs-sm);color:var(--sk-text-3);max-width:52ch}
.sk-hero__note{margin-top:var(--sk-s4);font:600 1.25rem/1.35 var(--sk-font-display);color:var(--sk-text-2);max-width:40ch}
.sk-vbtn{display:inline-flex}
.no-js .sk-vbtn{display:none}
@media (max-width:599px){.sk-hero__cta .sk-btn{width:100%}}

/* Glowa | film | reszta: na telefonie film zaraz pod naglowkiem, na komputerze po prawej przez dwa wiersze */
.sk-hero__film{display:block;margin:0}
.sk-hero--film .sk-hero__in{row-gap:var(--sk-s5)}
@media (min-width:900px){
  .sk-hero--film .sk-hero__in{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);grid-template-areas:"glowa film" "reszta film";column-gap:var(--sk-s7);row-gap:0;align-items:center;padding-bottom:var(--sk-s8)}
  .sk-hero__glowa{grid-area:glowa;align-self:end}
  .sk-hero__reszta{grid-area:reszta;align-self:start}
  .sk-hero__film{grid-area:film}
}
.sk-przewagi{list-style:none;margin:var(--sk-s5) 0 0;padding:0;display:grid;gap:10px}
@media (min-width:600px){.sk-przewagi{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sk-przewagi li{display:grid;gap:3px;padding:12px 14px;border:1px solid var(--sk-line);border-left:4px solid var(--sk-marker);border-radius:var(--sk-r-md);background:var(--sk-paper)}
.sk-przewagi b{font:700 var(--sk-fs-md)/1.25 var(--sk-font-body);color:var(--sk-text)}
.sk-przewagi span{font-size:var(--sk-fs-sm);line-height:1.4;color:var(--sk-text-2)}

/* ---------- Ramka filmu: „ekran przyklejony tasma do zeszytu” ---------- */
.sk-vid{container-type:inline-size;position:relative;aspect-ratio:16/9;border-radius:var(--sk-r-lg);background:#101828;box-shadow:0 0 0 1px var(--sk-line),var(--sk-sh-2)}
.sk-vid__media{position:relative;height:100%;overflow:hidden;border-radius:inherit;isolation:isolate}
.sk-vid__media picture{display:block;height:100%}
.sk-vid__poster{width:100%;height:100%;object-fit:cover}
.sk-vid__tasma{position:absolute;z-index:4;width:88px;height:26px;background:rgba(255,244,184,.88);box-shadow:var(--sk-sh-1);pointer-events:none}
.sk-vid__tasma--a{top:-10px;left:24px;rotate:-4deg}
.sk-vid__tasma--b{bottom:-10px;right:24px;rotate:-3deg}
.sk-vid__label{position:absolute;z-index:3;top:14px;left:14px;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--sk-r-sm);
  background:var(--sk-glass-text);color:#fff;font-weight:700;font-size:var(--sk-fs-xs);letter-spacing:.02em;box-shadow:var(--sk-glass-rim)}
.sk-vid__label .sk-i{width:16px;height:16px}
.sk-vid__play{position:absolute;z-index:3;left:20px;bottom:20px;display:inline-flex;align-items:center;gap:var(--sk-s3);min-height:56px;padding:0 var(--sk-s5) 0 8px;
  border:0;border-radius:var(--sk-r-pill);background:var(--sk-glass-text);color:#fff;font:700 var(--sk-fs-md)/1 var(--sk-font-body);
  box-shadow:var(--sk-glass-rim),var(--sk-sh-2);cursor:pointer;transition:scale var(--sk-dur-1) var(--sk-ease-spring,var(--sk-ease))}
.sk-vid__play:active{scale:.96}
/* Waska ramka (telefon): pigulka w jednej linii */
.sk-vid__play{font-size:clamp(.8rem,3.4cqi,1.0625rem);white-space:nowrap}
@container (max-width:420px){.sk-vid__play{left:12px;bottom:12px;min-height:44px;gap:8px;padding:0 14px 0 6px}.sk-vid__dot{width:32px;height:32px}.sk-vid__label{top:10px;left:10px}}
.sk-vid__play:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 7px var(--sk-ink),var(--sk-glass-rim)}
.sk-vid__play[hidden],.sk-vbtn[hidden]{display:none}
.sk-vid__dot{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--sk-ink)}
.sk-vid__dot .sk-i{width:18px;height:18px;margin-left:2px;fill:currentColor;stroke:none}
.no-js .sk-vid__play{display:none}
.sk-vid.is-gra .sk-vid__play,.sk-vid.is-gra .sk-vid__label,.sk-vid.is-koniec .sk-vid__play,.sk-vid.is-koniec .sk-vid__label{display:none}
/* Warstwa 2: rozmycie tylko nad nieruchomym plakatem; wartosci wprost, bez var() (WebKit 289800) */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .sk-vid:not(.is-gra) .sk-vid__play,.sk-vid:not(.is-gra) .sk-vid__label,.sk-pokaz__chip{
    -webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%)}
}
.sk-hero__film figcaption{margin-top:var(--sk-s4);font-size:var(--sk-fs-sm);color:var(--sk-text-3);max-width:62ch}

/* ---------- Pokaz z prawdziwych ekranow (GSAP) ---------- */
.sk-pokaz{position:absolute;inset:0;z-index:1;background:#101828}
.sk-pokaz[hidden]{display:none}
.sk-pokaz__kadr{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;visibility:hidden;will-change:transform,opacity}
.sk-pokaz__tlo{position:absolute;inset:0;background:rgba(16,24,40,.62);opacity:0;visibility:hidden}
.sk-pokaz__tel{position:absolute;inset:0;display:flex;justify-content:flex-end;align-items:flex-start;padding:5% 7% 0 0;pointer-events:none}
.sk-phone{display:block;width:17%;aspect-ratio:360/779;border:5px solid #0b1220;border-radius:18px;overflow:hidden;background:#0b1220;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.18);opacity:0;visibility:hidden}
.sk-phone img{width:100%;height:100%;object-fit:cover}
.sk-pokaz__tap{position:absolute;z-index:2;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;border:3px solid #fff;background:rgba(255,255,255,.35);
  box-shadow:0 0 0 6px rgba(28,58,140,.25);opacity:0;visibility:hidden;pointer-events:none}
.sk-pokaz__chip{position:absolute;z-index:2;left:18px;bottom:22px;max-width:78%;margin:0;padding:9px 14px;border-radius:var(--sk-r-md);
  background:var(--sk-glass-text);color:#fff;font:600 clamp(.95rem,.55rem + .9vw,1.3rem)/1.3 var(--sk-font-display);font-size:clamp(.78rem,2.4cqi,1.3rem);box-shadow:var(--sk-glass-rim),var(--sk-sh-2);
  opacity:0;visibility:hidden}
.sk-pokaz__pasek{position:absolute;z-index:2;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.28)}
.sk-pokaz__pasek i{position:absolute;inset:0;background:var(--sk-marker);transform-origin:0 50%;transform:scaleX(0)}
.sk-pokaz__ster{position:absolute;z-index:5;top:12px;right:12px;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:0;border-radius:var(--sk-r-md);
  background:var(--sk-paper);color:var(--sk-ink);font-weight:700;font-size:var(--sk-fs-sm);cursor:pointer;box-shadow:var(--sk-sh-2);
  transition:scale var(--sk-dur-1) var(--sk-ease-spring,var(--sk-ease))}
.sk-pokaz__ster:active{scale:.96}
.sk-pokaz__ster[hidden]{display:none}
.sk-pokaz__ster .sk-i{width:16px;height:16px;fill:currentColor;stroke:none}
/* Film z lektorka (2026-10-05): Play, powtorka z planszy koncowej i okno na telefonie uruchamiaja go
   z dzwiekiem; cichy pokaz zostaje jako jednorazowy autostart na szerokim ekranie. */
.sk-film{position:absolute;inset:0;z-index:6;display:block;width:100%;height:100%;object-fit:contain;background:#0b1220}
.sk-film[hidden]{display:none}
.sk-pokaz__film{right:auto;left:12px}
.sk-pokaz__koniec{position:absolute;inset:0;z-index:4;display:grid;place-content:center;gap:var(--sk-s4);padding:var(--sk-s5);text-align:center;background:rgba(255,255,255,.95)}
.sk-pokaz__koniec[hidden]{display:none}
.sk-pokaz__koniec{gap:clamp(8px,2.5cqi,16px)}
.sk-pokaz__koniec p{margin:0;font:600 clamp(1.4rem,1rem + 1.6vw,2.2rem)/1.15 var(--sk-font-display);font-size:clamp(1.05rem,4.2cqi,2.2rem);color:var(--sk-text);text-wrap:balance}
.sk-pokaz__koniec .sk-btn{min-height:40px;padding:6px 14px;font-size:clamp(.85rem,2.4cqi,1rem)}
.sk-pokaz__koniec div{display:flex;flex-wrap:wrap;gap:var(--sk-s3);justify-content:center}

/* Okno pokazu na telefonie */
.sk-vdialog{width:min(calc(100vw - 24px),760px,calc((100vh - 96px) * 16 / 9));width:min(calc(100vw - 24px),760px,calc((100dvh - 96px) * 16 / 9));max-width:none;padding:0;border:0;border-radius:var(--sk-r-lg);background:transparent;overflow:visible;
  opacity:0;scale:.96;transition:opacity 240ms var(--sk-ease),scale 240ms var(--sk-ease-spring-soft,var(--sk-ease)),display 240ms allow-discrete,overlay 240ms allow-discrete}
.sk-vdialog[open]{opacity:1;scale:1}
@starting-style{.sk-vdialog[open]{opacity:0;scale:.96}}
.sk-vdialog::backdrop{background:rgba(16,24,40,.8)}
.sk-vdialog__bar{display:flex;justify-content:space-between;align-items:center;gap:var(--sk-s3);margin-top:10px;padding:8px 12px;border-radius:var(--sk-r-md);background:var(--sk-paper);font-size:var(--sk-fs-sm)}
.sk-vdialog__bar .sk-btn{min-height:40px;padding:6px 14px}

/* Informacja dla testu: system prosi o ograniczenie ruchu */
.sk-ruch-info{margin:var(--sk-s4) 0 0;padding:10px 14px;border:1px solid var(--sk-line);border-left:4px solid var(--sk-marker);border-radius:var(--sk-r-md);background:var(--sk-marker-soft);font-size:var(--sk-fs-sm);color:var(--sk-text)}
.sk-ruch-info[hidden]{display:none}

/* ---------- Lista przedmiotow: biurko i zakladka segregatora ---------- */
.sk-subj{background:var(--sk-desk);padding-block:var(--sk-s7) var(--sk-s6);border-bottom:1px solid var(--sk-line)}
.sk-subj__head{display:flex;align-items:flex-end;gap:var(--sk-s2) var(--sk-s4);flex-wrap:wrap}
.sk-subj__tab{margin:0;display:inline-block;position:relative;top:1px;padding:10px 18px 8px;border:1px solid var(--sk-line);border-bottom:0;border-radius:var(--sk-r-md) var(--sk-r-md) 0 0;
  background:var(--sk-paper);font:600 var(--sk-fs-xl)/1.1 var(--sk-font-display);color:var(--sk-text)}
.sk-subj__line{margin:0;padding-bottom:10px;color:var(--sk-text-2)}
.sk-subj__panel{background:var(--sk-paper);border:1px solid var(--sk-line);border-radius:0 var(--sk-r-lg) var(--sk-r-lg) var(--sk-r-lg);padding:var(--sk-s4)}
.sk-ptiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sk-s3)}
@media (min-width:600px){.sk-ptiles{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}}
.sk-ptile{position:relative;display:grid;grid-template-columns:minmax(0,1fr);overflow-wrap:break-word;hyphens:auto;align-content:start;gap:4px;height:100%;min-height:92px;padding:14px 14px 12px 44px;border:1.5px solid var(--sk-line-strong);border-radius:var(--sk-r-md);
  background:var(--sk-paper);color:var(--sk-text);text-decoration:none;
  transition:background-color var(--sk-dur-1),border-color var(--sk-dur-1),translate var(--sk-dur-2) var(--sk-ease),box-shadow var(--sk-dur-2) var(--sk-ease),scale var(--sk-dur-1) var(--sk-ease-spring,var(--sk-ease))}
@media (hover:hover){.sk-ptile:hover{border-color:var(--sk-ink);background:var(--sk-ink-050);translate:0 -2px;box-shadow:var(--sk-sh-2);text-decoration:none}}
.sk-ptile:active{scale:.98}
.sk-ptile__name{font-weight:700;font-size:var(--sk-fs-md);line-height:1.25}
.sk-ptile__meta{font-size:var(--sk-fs-sm);color:var(--sk-text-3);font-variant-numeric:tabular-nums}
.sk-ptile__tag{display:inline-flex;align-items:center;gap:5px;font-size:var(--sk-fs-xs);font-weight:700;color:var(--sk-ink)}
.sk-ptile__tag .sk-i{width:14px;height:14px}
.sk-ptile__box{position:absolute;left:14px;top:15px;width:20px;height:20px;border:1.5px solid var(--sk-line-strong);border-radius:5px;background:var(--sk-paper);
  transition:background-color var(--sk-dur-1),border-color var(--sk-dur-1)}
.sk-ptile__box svg{position:absolute;inset:1px;width:16px;height:16px;fill:none;stroke:var(--sk-text);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sk-ptile__box path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset 180ms var(--sk-ease-out)}
.sk-ptile.is-on{border-color:var(--sk-ink);background:var(--sk-marker-soft)}
.sk-ptile.is-on .sk-ptile__box{background:var(--sk-marker);border-color:var(--sk-text)}
.sk-ptile.is-on .sk-ptile__box path{stroke-dashoffset:0}
.sk-ptile--ask{border-style:dashed;background:transparent;padding-left:14px}
/* Telefon: kafle w jednej kolumnie, nazwa i liczba w jednym wierszu -- dwie kolumny przy 340 px
   lamaly slowa w polowie („Wszystki-e”) */
@media (max-width:519px){
  .sk-subj__panel{padding:10px}
  .sk-ptiles{grid-template-columns:minmax(0,1fr);gap:8px}
  .sk-ptile{min-height:0;padding:12px 12px 12px 44px;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:baseline}
  .sk-ptile__box{top:12px}
  .sk-ptile__meta{grid-column:1 / -1}
  .sk-ptile__tag{grid-column:1 / -1}
  .sk-ptile--ask{padding-left:14px}
  .sk-subj__tab{font-size:1.35rem;padding:8px 14px 6px}
}

/* ---------- Sekcja „W klasie” ---------- */
.sk-klasa{background:var(--sk-paper);padding-block:var(--sk-s7);border-bottom:1px solid var(--sk-line)}
.sk-klasa__head{display:grid;gap:var(--sk-s3);margin-bottom:var(--sk-s5)}
@media (min-width:900px){.sk-klasa__head{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:var(--sk-s6)}.sk-klasa__lead{grid-column:1}.sk-klasa__stop{grid-column:2;grid-row:1 / span 2;align-self:end}}
.sk-klasa__h{margin:0;font:600 var(--sk-fs-xl)/1.15 var(--sk-font-display);color:var(--sk-text);text-wrap:balance}
.sk-klasa__lead{margin:0;color:var(--sk-text-2);max-width:62ch}
.sk-klasa__stop[hidden]{display:none}
.sk-klasa__stop .sk-i{fill:currentColor;stroke:none}
.sk-sceny{list-style:none;margin:0;padding:0;display:grid;gap:var(--sk-s5);counter-reset:sc}
@media (min-width:760px){.sk-sceny{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sk-scena{display:grid;align-content:start;gap:var(--sk-s2);counter-increment:sc}
.sk-scena__kadr{position:relative;aspect-ratio:16/9;border-radius:var(--sk-r-lg);overflow:hidden;background:#101828;box-shadow:0 0 0 1px var(--sk-line),var(--sk-sh-2)}
.sk-scena__kadr video{width:100%;height:100%;object-fit:cover;display:block}
.sk-scena__kadr::after{content:counter(sc);position:absolute;left:12px;top:12px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--sk-marker);color:var(--sk-text);font:700 15px/1 var(--sk-font-body);box-shadow:var(--sk-sh-1)}
.sk-scena__h{margin:var(--sk-s2) 0 0;font:600 1.375rem/1.2 var(--sk-font-display);color:var(--sk-text)}
.sk-scena p{margin:0;color:var(--sk-text-2)}
.sk-klasa__ai{margin:var(--sk-s5) 0 0;font-size:var(--sk-fs-sm);color:var(--sk-text-3)}

/* Watek „Ty prowadzisz” w sklepie */
.sk-results__lead{margin:0 0 var(--sk-s2);color:var(--sk-text-2)}
.sk-steps__watek{margin-top:var(--sk-s4);font:600 1.125rem/1.4 var(--sk-font-display);color:var(--sk-text-2)}

/* Karta sklepu: uniesienie jak kartka (sklep.css go nie ma) */
@media (hover:hover){
  .sk-card{transition:translate var(--sk-dur-2) var(--sk-ease),box-shadow var(--sk-dur-2) var(--sk-ease)}
  .sk-card:hover{translate:0 -2px}
}

/* ---------- Sklep w wersji 2: bez bocznego panelu, filtry jako pasek ---------- */
@media (min-width:1024px){
  .sk-shop--2{grid-template-columns:minmax(0,1fr)}
  .sk-shop--2 .sk-filters{position:static;max-height:none;overflow:visible}
}
.sk-filters--pasek{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--sk-s3);padding:var(--sk-s3)}
.sk-filters--pasek .sk-search{flex:1 1 280px;margin:0}
.sk-filters--pasek .sk-search .sk-fgroup__label{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sk-filters--pasek .sk-search .sk-i{bottom:16px}
.sk-pasek__det{flex:0 1 auto;border:1.5px solid var(--sk-line-strong);border-radius:var(--sk-r-md);background:var(--sk-paper);padding:0 14px}
.sk-pasek__det>summary{min-height:50px;gap:12px}
.sk-pasek__det[open]{flex-basis:100%;order:5;border-color:var(--sk-ink);padding-bottom:var(--sk-s4)}
.sk-pasek__sub{display:block;font-weight:500;font-size:var(--sk-fs-xs);color:var(--sk-text-3)}
.sk-pasek__body{display:grid;gap:var(--sk-s5);padding-top:var(--sk-s2)}
.sk-filters--pasek .sk-filters__apply{flex-basis:100%;order:9}
.sk-shop--2 .sk-results__head{margin-top:var(--sk-s2)}

/* ---------- Karta pakietu w wersji 2: biurko z prawdziwymi stronami i ekranem ---------- */
.sk-shop--2 .sk-grid{gap:var(--sk-s6) var(--sk-s5)}
@media (min-width:700px){.sk-shop--2 .sk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sk-pk{padding-top:0}
.sk-pk__in{position:relative;display:flex;flex-direction:column;height:100%;background:var(--sk-paper);border:1px solid var(--sk-line);border-radius:18px;overflow:hidden;
  box-shadow:0 1px 2px rgba(22,34,70,.06),0 10px 30px -18px rgba(22,34,70,.35);
  transition:translate 280ms var(--sk-ease-spring,var(--sk-ease)),box-shadow 280ms var(--sk-ease),border-color 200ms}
.sk-pk .sk-card__link::after{inset:0;border-radius:18px}
.sk-pk__biurko{position:relative;height:clamp(200px,24vw,250px);overflow:hidden;border-bottom:1px solid var(--sk-line);
  background:
    radial-gradient(120% 90% at 30% 0%,rgba(255,255,255,.75),transparent 60%),
    linear-gradient(var(--sk-grid) 1px,transparent 1px) 0 0/18px 18px,
    linear-gradient(90deg,var(--sk-grid) 1px,transparent 1px) 0 0/18px 18px,
    var(--tab-bg,var(--sk-desk))}
.sk-pk__kartka{position:absolute;bottom:-34px;width:34%;max-width:170px;height:auto;border-radius:3px;background:#fff;
  box-shadow:0 0 0 1px rgba(22,34,70,.08),0 14px 28px -10px rgba(22,34,70,.45);
  transition:transform 380ms var(--sk-ease-spring,var(--sk-ease))}
.sk-pk__kartka--0{left:9%;transform:rotate(-8deg);z-index:1}
.sk-pk__kartka--1{left:31%;transform:rotate(2deg) translateY(-10px);z-index:2}
.sk-pk__kartka--2{left:53%;transform:rotate(9deg);z-index:1}
.sk-pk__biurko--ekran .sk-pk__kartka{width:28%}
.sk-pk__biurko--ekran .sk-pk__kartka--0{left:4%}
.sk-pk__biurko--ekran .sk-pk__kartka--1{left:17%}
.sk-pk__biurko--ekran .sk-pk__kartka--2{left:30%}
.sk-pk__ekran{position:absolute;z-index:3;right:5%;top:12%;width:54%;aspect-ratio:16/9;border:6px solid #0b1220;border-bottom-width:9px;border-radius:12px;background:#0b1220;overflow:hidden;
  box-shadow:0 22px 40px -16px rgba(11,18,32,.6),0 0 0 1px rgba(255,255,255,.12) inset;transition:transform 380ms var(--sk-ease-spring,var(--sk-ease))}
.sk-pk__ekran img{width:100%;height:100%;object-fit:cover;display:block}
.sk-pk__slajd{position:absolute;inset:0;opacity:0;transition:opacity 2s ease-in-out}
.sk-pk__slajd.is-on{opacity:1}
.sk-pk__etykieta{position:absolute;z-index:2;left:6px;bottom:6px;max-width:calc(100% - 12px);padding:3px 8px;border-radius:6px;background:var(--sk-glass-text);color:#fff;
  font:700 11px/1.3 var(--sk-font-body);letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:var(--sk-glass-rim)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.sk-pk__etykieta{-webkit-backdrop-filter:blur(8px) saturate(160%);backdrop-filter:blur(8px) saturate(160%)}}
.sk-pk__ekran::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 38%);pointer-events:none}
@media (hover:hover){
  .sk-pk:hover .sk-pk__in{translate:0 -6px;border-color:var(--sk-line-strong);box-shadow:0 2px 4px rgba(22,34,70,.08),0 28px 50px -22px rgba(22,34,70,.5)}
  .sk-pk:hover .sk-pk__kartka--0{transform:rotate(-14deg) translate(-14px,-10px)}
  .sk-pk:hover .sk-pk__kartka--1{transform:rotate(1deg) translateY(-24px)}
  .sk-pk:hover .sk-pk__kartka--2{transform:rotate(15deg) translate(14px,-8px)}
  .sk-pk:hover .sk-pk__ekran{transform:translateY(-6px) rotate(-1.5deg) scale(1.04)}
  .sk-pk:hover .sk-pk__cta{background:var(--sk-ink-hover)}
  .sk-pk:hover .sk-pk__cta .sk-i{transform:translateX(4px)}
}
.sk-pk__tresc{display:flex;flex-direction:column;gap:10px;flex:1;padding:var(--sk-s5) var(--sk-s5) var(--sk-s4)}
.sk-pk__h{margin:0}
.sk-pk__h .sk-card__link{display:block;color:inherit;text-decoration:none}
/* Hierarchia (Darek 2026-10-04): przedmiot pierwszy, klasa druga, ile i co w srodku trzecie */
.sk-pk__przedmiot{display:block;font:600 clamp(1.7rem,1.25rem + 1.3vw,2.25rem)/1.06 var(--sk-font-display);letter-spacing:-.012em;color:var(--sk-text);text-wrap:balance}
.sk-pk__klasa{display:block;margin-top:6px;font:700 clamp(1.1rem,1rem + .35vw,1.3rem)/1.25 var(--sk-font-body);color:var(--tab-fg,var(--sk-ink))}
.sk-pk__dla{display:flex;align-items:center;gap:8px;margin:0;font-size:var(--sk-fs-sm);color:var(--sk-text-3)}
.sk-pk__kropka{flex:none;width:10px;height:10px;border-radius:50%;background:var(--dot,var(--sk-ink))}
.sk-pk__fakty{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:5px;font-size:var(--sk-fs-sm);color:var(--sk-text-2)}
.sk-pk__fakty li{position:relative;padding-left:22px}
.sk-pk__fakty li::before{content:"";position:absolute;left:2px;top:.42em;width:10px;height:6px;border:solid var(--sk-green);border-width:0 0 2.5px 2.5px;transform:rotate(-45deg)}
.sk-pk__fakty b{color:var(--sk-text)}
.sk-pk__fakty .sk-pk__plus{display:inline-flex;align-items:center;gap:6px;justify-self:start;padding:4px 10px 4px 8px;border-radius:8px;background:var(--sk-ink-050);color:var(--sk-ink);font-weight:700}
.sk-pk__fakty .sk-pk__plus::before{display:none}
.sk-pk__plus .sk-i{width:16px;height:16px}
.sk-pk__kup{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:var(--sk-s4);border-top:1px dashed var(--sk-line)}
.sk-pk__kup .sk-price__value{font-size:clamp(1.75rem,1.4rem + .9vw,2.25rem)}
.sk-pk__cta{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border-radius:var(--sk-r-md);background:var(--sk-ink);color:#fff;font-weight:700;
  transition:background-color 160ms}
.sk-pk__cta .sk-i{width:18px;height:18px;stroke-width:2.4;transition:transform 200ms var(--sk-ease-spring,var(--sk-ease))}
.sk-pk__kto{margin:0;display:flex;align-items:center;gap:8px;font-size:var(--sk-fs-xs);color:var(--sk-text-3)}
@media (max-width:420px){.sk-pk__kup{flex-direction:column;align-items:stretch}.sk-pk__cta{justify-content:center}}

/* ---------- Strona pakietu w wersji 2 (?v=2): hierarchia jak na kartach i biurko z monitorem ---------- */
.sk-phero--v2 .sk-v2-h1{display:block;max-width:none;margin-top:var(--sk-s3)}
.sk-phero--v2 .sk-v2-h1 .sk-pk__przedmiot{font-size:clamp(2.3rem,1.5rem + 2.6vw,3.6rem);line-height:1.02}
.sk-phero--v2 .sk-v2-h1 .sk-pk__klasa{margin-top:8px;font-size:clamp(1.25rem,1.05rem + .6vw,1.65rem)}
.sk-phero--v2 .sk-tabline{display:none}
.sk-v2-scena{margin:0}
.sk-v2-biurko{height:clamp(240px,30vw,400px);border:1px solid var(--sk-line);border-radius:18px;
  box-shadow:0 1px 2px rgba(22,34,70,.06),0 18px 40px -22px rgba(22,34,70,.45)}
.sk-v2-biurko .sk-pk__kartka{width:30%;max-width:230px;bottom:-46px}
.sk-v2-biurko.sk-pk__biurko--ekran .sk-pk__kartka{width:32%;max-width:250px;bottom:-70px}
.sk-v2-biurko.sk-pk__biurko--ekran .sk-pk__kartka--1{left:20%}
.sk-v2-biurko.sk-pk__biurko--ekran .sk-pk__kartka--2{left:36%}
.sk-phero--v2 .sk-v2-h1 .sk-pk__klasa{text-wrap:balance}
.sk-v2-biurko .sk-pk__ekran{width:60%;top:9%;border-width:8px;border-bottom-width:12px;border-radius:14px}
.sk-v2-biurko .sk-pk__etykieta{left:10px;bottom:10px;font-size:13px;padding:4px 10px}
@media (hover:hover){
  .sk-v2-biurko:hover .sk-pk__kartka--0{transform:rotate(-14deg) translate(-14px,-12px)}
  .sk-v2-biurko:hover .sk-pk__kartka--1{transform:rotate(1deg) translateY(-30px)}
  .sk-v2-biurko:hover .sk-pk__kartka--2{transform:rotate(15deg) translate(14px,-10px)}
  .sk-v2-biurko:hover .sk-pk__ekran{transform:translateY(-6px) rotate(-1.5deg) scale(1.03)}
}
.sk-v2-podpis{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;margin-top:var(--sk-s3);font-size:var(--sk-fs-sm);color:var(--sk-text-3)}
@media (min-width:900px){
  .sk-phero--v2 .sk-hero__in{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:var(--sk-s7)}
  .sk-phero--v2 .sk-v2-scena{align-self:center}
}
/* Telefon: biurko zaraz pod naglowkiem, a nie na dole naglowka strony */
@media (max-width:899px){
  .sk-phero--v2 .sk-hero__in{row-gap:0}
  .sk-phero--v2 .sk-hero__in>div:first-child{display:contents}
  .sk-phero--v2 .sk-hero__in>div:first-child>*{order:3}
  .sk-phero--v2 .sk-hero__in>div:first-child>.sk-crumbs,.sk-phero--v2 .sk-hero__in>div:first-child>.sk-v2-h1{order:1}
  .sk-phero--v2 .sk-v2-scena{order:2;margin:var(--sk-s5) 0 var(--sk-s2)}
  .sk-v2-biurko{height:clamp(210px,58vw,300px)}
}
html.sk-ruch:not(.sk-ruch-ok) .sk-phero--v2 .sk-v2-h1,
html.sk-ruch:not(.sk-ruch-ok) .sk-phero--v2 .sk-v2-scena{visibility:hidden}

/* ---------- Dostepnosc: na koncu, wygrywa z warstwami ---------- */
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .sk-vid__play,.sk-vid__label,.sk-pokaz__chip{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media (prefers-contrast:more),(prefers-reduced-transparency:reduce){
  .sk-vid__play,.sk-vid__label,.sk-pokaz__chip{background:#101828;outline:2px solid #fff;outline-offset:-4px;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media (forced-colors:active){
  .sk-vid__play,.sk-vid__label,.sk-pokaz__chip{background:ButtonFace;color:ButtonText;border:2px solid ButtonText}
}

.sk-slajdy-stop[hidden]{display:none}
.sk-slajdy-stop .sk-i{fill:currentColor;stroke:none}
/* Strony pakietow: ten sam film z lektorka co w hubie, w oknie (2026-10-07) */
.sk-v2-kadr{position:relative;container-type:inline-size}
.sk-filmbtn{left:16px;bottom:16px}
.sk-filmokno__wideo{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:var(--sk-r-lg);background:#0b1220}
/* Karta pakietu w materialy.php: przycisk filmu nad biurkiem, ponad linkiem calej karty (z-index 2) */
.sk-pk__gora{position:relative}   /* bez container-type: zalozylby kontekst warstw i link karty przykrylby przycisk */
.sk-pk__film{z-index:4;left:12px;bottom:12px;min-height:44px;gap:8px;padding:0 14px 0 6px;font-size:.875rem}
.sk-pk__film .sk-vid__dot{width:32px;height:32px}