/* ═════════ MERCH v3 (/merch/), BROKE-4 26.10 21:1x: najpierw PROGRAM (wybór kanału = koszulki/odcinka), potem telewizor z v2.
   WIDOK 1 .program: 3 kanały CH01–CH03 (małe telewizory BROKE TV, każdy z ruchomym tłem swojego kanału), klik = trzask i przełączenie.
   WIDOK 2 .merch2: telewizor BROKE TV z v2 (koszulka wycięta z tła, kadry, lupka = zbliżenie, strzałki, E01–E03, pasek „Do koszyka”) + klawisz PROGRAM.
   Bez JS oba widoki stoją jeden pod drugim (program linkuje do odcinków). Ładowany PO bb.css (tokeny, fonty, stempel, .add, keyframes wlacz/wylacz/blink). */
:root{
  --scan-m:rgba(14,14,13,.08);        /* linie kineskopu: ledwo widoczne */
  --winieta:rgba(14,14,13,.55);       /* przyciemnione rogi ekranu */
  --cien-koszulki:rgba(14,14,13,.42); /* koszulka „wisi” nad tłem kanału */
  --napis-kanalu:rgba(14,14,13,.3);   /* kontur przesuwających się napisów */
  --plyta-osd:rgba(14,14,13,.74);     /* podkład pod napisy ekranowe na jasnym kanale */
}

/* kolumna z telewizorem = kontener, rozmiary liczone z jej szerokości (cqw) i z wysokości ekranu (svh) */
.merch2{padding-bottom:88px}
.nawig{display:none;padding:10px 16px 0}
.js .nawig{display:flex}
.do-programu{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 10px;border:2.5px solid var(--line);border-radius:10px;
  font:400 22px/1 var(--lcd);letter-spacing:.05em;color:var(--osd)}
.do-programu svg{width:18px;height:18px}
.do-programu:hover{border-color:var(--osd)}
.kol-tv{container-type:inline-size}
/* telefon: ekran TV na ~88 % szerokości, telewizor większy od ekranu telefonu i przycięty: obudowa po bokach, wieszak od połowy */
.studio{position:relative;overflow:clip;
  --ek:min(88cqw,560px,(100svh - 210px) / 1.55);
  --W:calc(var(--ek) / .487);
  --H:calc(var(--W) / 1.0448);
  --gora:.35;   /* telefon: telewizor od górnej krawędzi obudowy (wieszak przy dużym ekranie by się nie zmieścił, jego połowa wygląda jak kreski) */
  height:calc(var(--H) * (.995 - var(--gora)))}
.odb{position:absolute;width:var(--W);aspect-ratio:1354/1296;left:calc(50% - var(--W) * .3935);top:calc(var(--H) * var(--gora) * -1)}
.odb .obudowa-m{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}

/* ekran: otwór w obudowie (geometria z wyboru v2) */
.szklo{position:absolute;left:15%;top:48.1%;width:48.7%;height:39.8%;border-radius:4.6%/6%;overflow:hidden;z-index:2;container-type:size;background:var(--szyba)}
.szklo::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:repeating-linear-gradient(to bottom,var(--scan-m) 0 1px,transparent 1px 3px)}
.szklo::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 9cqh var(--winieta),inset 0 0 2cqh var(--winieta);background:linear-gradient(155deg,var(--blask),transparent 36%)}
.rolka{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
  animation:wlacz .75s cubic-bezier(.2,.7,.2,1) .1s both}
.rolka::-webkit-scrollbar{display:none}
.szklo.zoom .rolka{overflow:hidden}

/* kanał odcinka: kolor z palety + dwa rzędy napisów jadących w przeciwne strony (stoją, kiedy kanał nie jest na wizji) */
.plan{position:relative;flex:0 0 100%;height:100%;margin:0;scroll-snap-align:center;scroll-snap-stop:always;overflow:hidden;background:var(--kanal,var(--red))}
.napisy{position:absolute;inset:0;display:grid;align-content:space-evenly;pointer-events:none;transform:rotate(-4deg) scale(1.12)}
.napisy p{display:flex;width:max-content;white-space:nowrap;font:900 italic 27cqh/.86 var(--stamp);text-transform:uppercase;letter-spacing:.01em;
  color:transparent;-webkit-text-stroke:.02em var(--napis-kanalu);animation:przesuw 30s linear infinite;animation-play-state:paused}
.napisy p:nth-child(2){animation-direction:reverse;animation-duration:36s}
.napisy span{padding-right:.4em}
.plan.on .napisy p{animation-play-state:running}
@keyframes przesuw{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* koszulka: cała, duża, nad tłem kanału; wycięte zdjęcie = obrys koszulki, zwykłe zdjęcie (zbliżenia) = na cały ekran */
.lupa{position:absolute;inset:0;z-index:1;display:grid;place-items:center;padding:0;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.plan.on .lupa{animation:unos 4.8s ease-in-out infinite alternate}
@keyframes unos{from{transform:translateY(-1.1cqh)}to{transform:translateY(1.1cqh)}}
.koszulka{width:auto;height:auto;max-width:94%;max-height:90%;transform-origin:50% 50%;
  filter:drop-shadow(0 1.8cqh 1.6cqh var(--cien-koszulki));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.plan[data-typ="foto"] .koszulka{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;filter:none}
.plan[data-typ="foto"] .napisy{display:none}
.szklo.zoom .lupa{animation:none;cursor:zoom-out}
.szklo.pan .koszulka{transition:transform .14s linear}

/* napisy ekranowe i znak lupy (podkład, bo kanały są jasne) */
.osd-m{position:absolute;top:5%;z-index:7;padding:.1em .32em .04em;background:var(--plyta-osd);pointer-events:none;
  font:400 max(14px,8.6cqh)/1 var(--lcd);letter-spacing:.05em;color:var(--osd)}
.osd-m.ch{left:4%}
.osd-m.nr{right:4%}
.znak-lupy{position:absolute;right:4%;bottom:6%;z-index:7;width:max(30px,13cqh);height:max(30px,13cqh);display:grid;place-items:center;border-radius:50%;
  background:var(--plyta-osd);color:var(--osd);pointer-events:none;transition:opacity .2s}
.znak-lupy svg{width:56%;height:56%}
.szklo.zoom .znak-lupy{opacity:0}
.snieg{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;image-rendering:pixelated;opacity:0}
.szklo.zap .snieg{opacity:.9}

/* strzałki na krawędziach ekranu, E01–E03 na dolnej ramce obudowy (przyciski TV: Kuba 26.10 20:5x „są spoko”) */
.strz-m{position:absolute;top:68%;z-index:5;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(var(--paper),var(--plastik));color:var(--kontur);border:3px solid var(--kontur);box-shadow:0 4px 0 var(--kontur);transition:transform .08s}
.strz-m svg{width:20px;height:20px}
.strz-m:active{transform:translateY(3px);box-shadow:0 1px 0 var(--kontur)}
.strz-m.l{left:15%}
.strz-m.p{left:63.7%}
.kanaly-m{position:absolute;left:15%;width:48.7%;top:89.6%;z-index:5;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kanaly-m button{position:relative;height:max(32px,min(40px,5.6cqw));border:2.5px solid var(--kontur);border-radius:9px;color:var(--kontur);
  font:800 italic 17px/1 var(--stamp);letter-spacing:.02em}
.kanaly-m button:hover{background:var(--blask-klawisz)}
.kanaly-m button[aria-pressed="true"]{background:var(--red);color:var(--paper)}

/* panel odcinka */
.odcinki-m{padding:14px 16px 24px}
.js .odc-m{display:none}
.js .odc-m.on{display:grid}
.odc-m{display:grid;gap:12px}
.odc-m + .odc-m{margin-top:40px}
.js .odc-m + .odc-m{margin-top:0}
.odc-m .nazwa{font-size:44px}
.odc-m .nazwa a:hover{text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.12em}
.odc-m .odc{margin-top:8px;font:400 21px/1 var(--lcd);color:var(--cam);letter-spacing:.04em}
.kadry-m{display:flex;gap:8px}
.kadry-m button{width:44px;height:52px;padding:0;border:2px solid transparent;opacity:.62;overflow:hidden;background:var(--ink-2)}
.kadry-m button.wyc{background:var(--kanal,var(--red))}
.kadry-m button[aria-pressed="true"]{border-color:var(--cam);opacity:1}
.kadry-m img{width:100%;height:100%;object-fit:cover}
.kadry-m button.wyc img{object-fit:contain;padding:3px}
.odc-m .lab{font:700 13px/1 var(--text);letter-spacing:.03em;color:var(--mute);margin-bottom:8px}
.odc-m .rozmiary{display:flex;gap:8px}
.odc-m .rozmiary label{position:relative;display:block}
.odc-m .rozmiary input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.odc-m .rozmiary span{display:grid;place-items:center;min-width:52px;height:46px;padding:0 10px;border:2px solid var(--line);font:700 16px/1 var(--text)}
.odc-m .rozmiary input:checked + span{border-color:var(--paper);box-shadow:inset 0 0 0 2px var(--paper)}
.odc-m .rozmiary input:focus-visible + span{outline:3px solid var(--osd);outline-offset:3px}
.odc-m .roz.wybierz .rozmiary span{animation:wybierz .5s ease-in-out 2}
@keyframes wybierz{50%{border-color:var(--red);transform:translateY(-3px)}}
.odc-m .kup{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.odc-m .cena{font:400 38px/.85 var(--lcd);color:var(--cam)}
.odc-m .cena .amount,.odc-m .cena bdi{font:inherit;color:inherit}
.odc-m .karta{justify-self:start;display:inline-flex;align-items:center;min-height:44px;font:600 15px/1.3 var(--text);color:var(--mute);
  text-decoration:underline;text-underline-offset:4px}
.odc-m .karta:hover{color:var(--paper)}

/* telefon: pasek z ceną i „Do koszyka”, kiedy przycisk w panelu jest poza ekranem (jedyny przyklejony element) */
.pasek-kup{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;gap:12px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--ink-2);border-top:1px solid var(--line);
  transform:translateY(110%);visibility:hidden;transition:transform .25s ease-out,visibility 0s linear .25s}
.pasek-kup.widac{transform:none;visibility:visible;transition:transform .25s ease-out}
.pk-info{flex:1;min-width:0}
.pk-nazwa{font:900 italic 21px/1 var(--stamp);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-cena{margin-top:4px;font:400 22px/1 var(--lcd);color:var(--cam)}
.pk-cena .amount,.pk-cena bdi{font:inherit;color:inherit}
.pasek-kup .add{flex:none;height:50px;padding:0 18px;font-size:21px}

/* ═════════ WIDOK 1: PROGRAM (Kuba 21:08 + 21:14: najpierw trzy koszulki jak siatka sklepu, im więcej tanich bajerów, tym lepiej) ═════════ */
.js .merch3:not(.widok-tv) .merch2,.js .merch3:not(.widok-tv) .pasek-kup{display:none}
.js .merch3.widok-tv .program{display:none}
.program{max-width:652px;margin:0 auto;padding:12px 16px 16px;container-type:inline-size}   /* tablet w pionie: kanały nie rozjeżdżają się na całą szerokość */
/* pasek jak w telegazecie: odwrócony napis PROGRAM, podpowiedź, klawisze pilota (komputer), zegar z mrugającym dwukropkiem */
.program-bar{display:flex;align-items:center;gap:12px;height:40px;padding:0 10px;background:var(--ink-2);border:1px solid var(--line);
  font:400 21px/1 var(--lcd);letter-spacing:.05em;color:var(--paper);white-space:nowrap;overflow:clip}
.program-tyt{font:inherit;color:var(--ink);background:var(--osd);padding:.1em .35em .02em}
.pilot{display:none;color:var(--mute)}
.zegar{margin-left:auto;color:var(--cam)}
.zegar .dw{animation:blink 1s steps(2) infinite}
.kanaly-lista{list-style:none;display:grid;gap:10px;margin-top:12px}

/* kanał = mały telewizor z plastiku obudowy BROKE TV: ekran kanału + opis jak w sklepie (nazwa, odcinek, cena na wyświetlaczu) */
.kanal-a{--h:clamp(132px,(100svh - 196px) / 3,230px);position:relative;isolation:isolate;display:block;border-radius:16px;transition:transform .2s ease-out,filter .2s}
.kanal-a:focus-visible{outline-offset:4px}
.kanal-tv{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:10px;height:var(--h);padding:5px;
  background:linear-gradient(var(--paper),var(--plastik) 55%,var(--plastik-2));border:3px solid var(--kontur);border-radius:16px;box-shadow:0 5px 0 var(--kontur)}
.kanal-ekran{position:relative;overflow:hidden;border:4px solid var(--warga);border-radius:12px;container-type:size;background:var(--szyba)}
.kanal-ekran::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:repeating-linear-gradient(to bottom,var(--scan-m) 0 1px,transparent 1px 3px)}
.kanal-ekran::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 9cqh var(--winieta);background:linear-gradient(155deg,var(--blask),transparent 36%)}
.tresc-k{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;background:var(--kanal,var(--red));animation:wlacz .7s cubic-bezier(.2,.7,.2,1) both}
.kanal-k:nth-child(2) .tresc-k{animation-delay:.08s}
.kanal-k:nth-child(3) .tresc-k{animation-delay:.16s}
.tresc-k .napisy p{animation-play-state:running}
.mini-koszulka{position:relative;width:auto;height:auto;max-width:92%;max-height:88%;filter:drop-shadow(0 1.8cqh 1.6cqh var(--cien-koszulki))}
.osd-k{position:absolute;left:5%;top:6%;z-index:7;padding:.1em .3em .02em;background:var(--plyta-osd);pointer-events:none;
  font:400 max(13px,10cqh)/1 var(--lcd);letter-spacing:.05em;color:var(--osd)}
/* bajer: plansza testowa przy pierwszym wejściu (paski z palety), potem kanały się „łapią” jeden po drugim */
.plansza{display:none;position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(90deg,var(--paper) 0 14.3%,var(--cam) 0 28.6%,var(--mint) 0 42.9%,var(--osd) 0 57.1%,var(--red) 0 71.4%,var(--camo) 0 85.7%,var(--ink) 0)}
.program.intro .plansza{display:block;animation:plansza 1.05s steps(1) forwards}
.program.intro .kanal-k:nth-child(2) .plansza{animation-duration:1.25s}
.program.intro .kanal-k:nth-child(3) .plansza{animation-duration:1.45s}
@keyframes plansza{to{visibility:hidden}}
/* bajer: kanał bez towaru = śnieg z napisem */
.snieg-k{display:none;position:absolute;inset:0;z-index:4;background:var(--szyba) url(m2/szum.webp) 0 0/160px 120px;image-rendering:pixelated;
  animation:szumi .45s steps(4) infinite}
@keyframes szumi{25%{background-position:-53px 31px}50%{background-position:27px -64px}75%{background-position:-88px -17px}}
.kanal-k.brak .snieg-k{display:grid;place-items:center}
.snieg-k b{padding:.12em .4em .04em;background:var(--plyta-osd);font:400 max(14px,12cqh)/1 var(--lcd);letter-spacing:.05em;color:var(--paper)}
/* bajer: trzask przy przełączaniu, wybrany ekran gaśnie w kreskę, potem telewizor z v2 włącza się ze śniegiem */
.kanal-a.trzask .tresc-k{animation:wylacz .3s ease-in forwards}
.kanal-info{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:7px;min-width:0;padding-right:4px;color:var(--ink)}
.kanal-nazwa{font-size:clamp(22px,6.6cqw,34px);-webkit-text-stroke-color:var(--ink);text-shadow:none;overflow-wrap:anywhere}
.kanal-odc{font:400 18px/1 var(--lcd);letter-spacing:.04em}
.kanal-odc .dl{display:none}
.kanal-cena{padding:.14em .38em .06em;background:var(--ink);border-radius:4px;font:400 24px/1 var(--lcd);color:var(--cam)}
.kanal-cena .amount,.kanal-cena bdi{font:inherit;color:inherit}
.wieszak{display:none}

/* bajer: numer kanału duży przez chwilę po przełączeniu (jak w starym telewizorze) */
.osd-m.ch.duzy{animation:numer 1.3s ease-out}
@keyframes numer{0%,55%{transform:scale(1.8)}100%{transform:none}}
.osd-m.ch{transform-origin:0 0}

/* 320–359 px: pasek NA ANTENIE w jednej linii (inaczej łamie się na dwie) */
@media (max-width:359px){.antena{gap:8px;padding:0 12px;font-size:16px;white-space:nowrap}}

/* komputer: telewizor po lewej (cały, z wieszakiem), panel odcinka po prawej, razem w jednym ekranie */
@media (min-width:900px) and (min-aspect-ratio:1/1){
  .merch2{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,380px);grid-template-rows:auto 1fr;grid-template-areas:"tv nawig" "tv panel";
    align-items:start;gap:0 56px;max-width:1440px;margin:0 auto;padding:0 40px 24px}
  .kol-tv{grid-area:tv}
  .nawig{grid-area:nawig;padding:24px 0 0}
  .odcinki-m{grid-area:panel}
  /* wieszak (= antena) wchodzi na pasek NA ANTENIE: telewizor wisi na nim i jest większy; przy komunikacie Woo wraca pod pasek */
  .kol-tv{position:relative;z-index:6;margin-top:-40px}
  .komunikaty:has(.woocommerce-message,.woocommerce-error,.woocommerce-info) + .merch2 .kol-tv{margin-top:12px}
  .studio{--gora:.02;--W:min(100cqw,(100svh - 92px) * 1.0448 / .975);height:calc(var(--H) * (.995 - var(--gora)));width:var(--W);margin:0 auto}
  .odcinki-m{align-self:center}
  .odb{left:0}
  .strz-m{width:56px;height:56px;margin:-28px 0 0 -28px}
  .strz-m svg{width:24px;height:24px}
  .kanaly-m button{font-size:19px}
  .odcinki-m{padding:0}
  .odc-m{gap:16px}
  .odc-m .nazwa{font-size:clamp(48px,4.4vw,64px)}
  .odc-m .kup{flex-direction:column;align-items:stretch;gap:16px}
  .odc-m .add{justify-content:center}
  .pasek-kup{display:none}
}

@media (min-width:900px) and (min-aspect-ratio:1/1){
  .program{max-width:1440px;margin:0 auto;padding:18px 40px 28px}
  .program-bar{height:44px;font-size:24px;padding:0 14px}
  .pilot{display:inline}
  /* trzy telewizory w rzędzie, każdy wisi na wieszaku z ich logo (antena BROKE TV), ekran 4:3 na górze, opis pod spodem */
  .kanaly-lista{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:calc((100cqw - 64px) / 3 * .2 + 2px)}
  .kanal-a{width:min(100%,(100svh - 330px) / 1.22);margin:0 auto}   /* ekran kwadratowy: koszulka duża, całość w jednym ekranie */
  .kanal-tv{grid-template-columns:none;height:auto;padding:10px;gap:14px}
  .kanal-ekran{aspect-ratio:1}
  .kanal-odc .dl{display:inline}
  .kanal-info{align-items:center;text-align:center;padding:0 0 8px}
  .kanal-nazwa{font-size:clamp(30px,2.8vw,44px)}
  .kanal-cena{font-size:28px}
  .wieszak{display:block;position:absolute;left:44%;bottom:calc(100% - 3px);width:30%;aspect-ratio:650/456;z-index:-1;
    background:url(m2/wieszak.webp) 0 100%/contain no-repeat;pointer-events:none}
  .kanal-a:hover{transform:translateY(-6px)}
  .kanaly-lista:has(.kanal-a:hover) .kanal-a:not(:hover){filter:brightness(.55) saturate(.7)}
}

@media (prefers-reduced-motion:reduce){
  .tresc-k,.kanal-a.trzask .tresc-k,.snieg-k,.zegar .dw,.osd-m.ch.duzy{animation:none}
  .program.intro .plansza{display:none}
  .kanal-a{transition:none}
  .kanal-a:hover{transform:none}
  .rolka,.plan.on .lupa,.napisy p,.odc-m .roz.wybierz .rozmiary span{animation:none}
  .koszulka,.szklo.pan .koszulka,.strz-m,.pasek-kup,.pasek-kup.widac{transition:none}
}