/* ============================================================
   CINEVA — SPRZĘT · style siatki
   Przeniesione z wersji na Squarespace (sprzet-01-lista.html).
   2.0 — przyciski sklepow w barwach marek.
   ============================================================ */
.cnv-sp { --rozowy:#FF00C8; --kreska:rgba(255,255,255,0.08);
  --best-kafelek:145px; --best-odstep:12px; --best-liczba:8;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif; }

/* box-sizing:border-box wszędzie w tym komponencie — to samo źródło
   błędu (width:100% + padding, bez border-box) uderzyło już kilka
   razy w różnych miejscach (przycisk sklepu wychodzący poza kartę,
   licznik przy kategorii wypychany poza panel). Jeden reset na
   początku pliku zamyka ten temat raz na zawsze. */
.cnv-sp, .cnv-sp *, .cnv-sp *::before, .cnv-sp *::after { box-sizing: border-box; }

/* Kreska przy informacji o afiliacji. Ten akapit jest zwykłym blokiem
   w edytorze, ale styl trzymamy tutaj — jeden plik mniej do wklejania. */
.cnv-afiliacja { border-left:2px solid rgba(255,0,200,0.3); }

/* ===== BESTSELLERY =====
   Nagłówek i podpis zawsze widoczne; strzałka chowa/pokazuje tylko
   ramkę z tickerem (domyślnie rozwiniętą — brak [hidden] w PHP).
   Kafelki w środku NIE dostają animowanej obwódki bestsellera —
   dostaje ją cała ramka tickera, bo tu WSZYSTKO w środku już jest
   bestsellerem. */
.cnv-sp__best[hidden] { display:none; }
.cnv-sp__best { margin-bottom:36px; }

.cnv-sp__best-glowka { display:flex; align-items:flex-start; justify-content:flex-start; gap:20px;
  margin-bottom:18px; }
/* display:inline-block — inaczej to h2 rozciąga się na całą szerokość
   swojego rodzica, gradient maluje się na tej całej (szerokiej) belce,
   a sam napis pokazuje tylko jej lewy skrawek: samą różową część.
   Dokładnie tak samo działa "Zaczynamy." na kontakcie — tam to działa,
   bo <em> jest inline i ciasno owija tekst. */
.cnv-sp__best-tytul { display:inline-block; margin:0 0 6px; font-family:var(--kt-font-sf, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", sans-serif);
  font-weight:700; font-size:clamp(22px,3vw,32px); letter-spacing:.3px; text-transform:uppercase;
  background-image:linear-gradient(100deg, #FF00C8 0%, #FF00C8 42%, #0693E3 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.cnv-sp__best-podpis { margin:0; max-width:640px; font-size:13.5px; line-height:1.7; color:#fff; }

/* Obwódka strzałki — ten sam przebłysk co na ramce tickera (patrz niżej),
   żeby wizualnie od razu było widać, że to jedna, spójna sekcja. Gdy
   sekcja jest rozwinięta, obrót się zatrzymuje (animation-play-state)
   i zostają same zamrożone kolory — bez animacji, bo wtedy ticker pod
   spodem sam już przyciąga wzrok. */
.cnv-sp__best-strzalka { flex-shrink:0; width:34px; height:34px; margin-top:4px; border-radius:50%;
  border:none; background:transparent; cursor:pointer; position:relative;
  display:flex; align-items:center; justify-content:center; }
.cnv-sp__best-strzalka::before {
  content:''; position:absolute; inset:0; z-index:0;
  border-radius:50%; padding:1.5px;
  background: conic-gradient(from var(--cnv-sp-kat-obwodki),
    transparent 0deg, #FF00C8 35deg, transparent 70deg,
    transparent 180deg, #0693E3 215deg, transparent 250deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: cnvSpBestObrot 6s linear infinite;
}
.cnv-sp__best-strzalka[aria-expanded="true"]::before { animation-play-state:paused; }
.cnv-sp__best-strzalka span { position:relative; z-index:1; width:8px; height:8px; border-right:1.5px solid #fff;
  border-bottom:1.5px solid #fff; transform:rotate(45deg) translate(-1px,-1px); transition:transform .25s ease; }
.cnv-sp__best-strzalka[aria-expanded="false"] span { transform:rotate(-135deg) translate(-1px,-1px); }

/* Obwódka ramki — dokładnie ten sam "przebłysk" (świecące pasmo w
   barwach marki) co pod zdjęciami w Portfolio na hover, tylko: (a) na
   obwodzie ramki zamiast na prostym pasku, więc pasmo nie przesuwa
   się w bok tylko OKRĄŻA róg za rogiem (stąd gradient stożkowy,
   jedyny typ który naturalnie "owija się" wokół pierścienia), i
   (b) bez czekania na hover — leci w kółko cały czas.
   Dwa świecące łuki (różowy i błękitny), NAPRZECIWLEGŁE, każdy
   z miękkim zanikiem do przezroczystości po bokach (jak w
   .cnv-pf__exif::before) — więc oba kolory są zawsze naraz na ramce,
   nigdy się ze sobą nie mieszają (nie stykają się nigdzie). */
.cnv-sp__best-ramka[hidden] { display:none; }
.cnv-sp__best-ramka { position:relative; padding:39px 12px; border-radius:8px;
  border:1px solid rgba(255,255,255,0.12); }

/* Od 1440px ramka wychodzi poza wąską, ograniczoną kolumnę WordPressa —
   i kafelki rosną (145px → 168px), żeby realnie WYPEŁNIAŁY tę szerszą
   ramkę, zamiast zostawiać puste miejsce z tyłu przy małej liczbie
   bestsellerów. Szerokość ramki liczona z TYCH SAMYCH zmiennych co
   flex-basis kafelka (--best-kafelek/--best-odstep) — nie da się już
   rozjechać rozmiaru kafelka z szerokością ramki, bo jest jedno źródło
   prawdy. Klasyczny trik na "wyłamanie się" z wyśrodkowanej kolumny:
   left:50% + translateX(-50%) na elemencie bez zmiany pozycji rodzica. */
@media (min-width:1560px) {
  .cnv-sp {
    --best-kafelek: 168px;
    --best-odstep: 14px;
  }
  .cnv-sp__best-ramka {
    width: calc(var(--best-liczba) * var(--best-kafelek) + (var(--best-liczba) - 1) * var(--best-odstep) + 24px);
    max-width: calc(100vw - 64px);
    left: 50%;
    transform: translateX(-50%);
  }
}
.cnv-sp__best-ramka::before {
  content:''; position:absolute; inset:0; z-index:0;
  border-radius:8px; padding:2px;
  background: conic-gradient(from var(--cnv-sp-kat-obwodki),
    transparent 0deg,
    #FF00C8 35deg,
    transparent 70deg,
    transparent 180deg,
    #0693E3 215deg,
    transparent 250deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: cnvSpBestObrot 6s linear infinite;
}
@property --cnv-sp-kat-obwodki {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes cnvSpBestObrot {
  to { --cnv-sp-kat-obwodki: 360deg; }
}

/* Standardowy, natywny carousel: scroll-snap-type na oknie +
   scroll-snap-align na każdym kafelku. Scroll/gładzik przewija
   płynnie i precyzyjnie (przeglądarka sama "domyka" do najbliższego
   kafelka dopiero na końcu gestu), a strzałki (JS) przesuwają o całe
   okno i lądują dokładnie na takim samym domknięciu — więc obie
   metody używają tego samego mechanizmu i nigdy się nie rozjeżdżają.
   Pasek przewijania jest schowany, żeby wyglądało jak ticker. */
.cnv-sp__best-okno { overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none; }
.cnv-sp__best-okno::-webkit-scrollbar { display:none; }
.cnv-sp__best-tor { display:flex; gap:var(--best-odstep); width:max-content; }

/* Kafelek i podpis zmniejszone tak, żeby cała ramka wyszła jakieś 25%
   niższa niż w poprzedniej wersji. */
.cnv-sp__best-kafelek { flex:0 0 var(--best-kafelek); display:flex; flex-direction:column; gap:8px;
  border:none; background:transparent; padding:0; cursor:zoom-in; text-align:left; font:inherit; color:inherit;
  scroll-snap-align:start; }
/* Tu (inaczej niż w zwykłej siatce) zdjęcie ma wypełnić CAŁY kwadrat —
   object-fit:cover zamiast contain, bez paddingu, żeby wszystkie kafelki
   tickera wyglądały tak samo niezależnie od proporcji oryginału. */
.cnv-sp__best-foto { position:relative; aspect-ratio:1/1; border-radius:5px; overflow:hidden;
  background:#ebebeb; }
.cnv-sp__best-foto img { width:100%; height:100%; object-fit:cover;
  display:block; transition:transform .6s ease, filter .4s ease; }
.cnv-sp__best-kafelek:hover .cnv-sp__best-foto img { transform:scale(1.05); filter:brightness(1.05); }
.cnv-sp__best-podpis-kafelek { min-height:calc(1.35em * 2); display:flex; align-items:center;
  font-family:'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; font-weight:600;
  font-size:13px; line-height:1.35; color:#fff; }
.cnv-sp__best-podpis-kafelek span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; }

/* Domyślnie (i na węższych ekranach) strzałki siedzą W środku ramki —
   bezpieczne wszędzie. Dopiero od 1560px w górę (ten sam próg, w
   którym ramka robi się szersza — patrz wyżej) wychodzą NA ZEWNĄTRZ,
   bo dopiero tam jest pewność, że jest miejsce w marginesie strony,
   żeby się nie ucięły — zawsze poza samą tabelką, nigdy na niej. */
.cnv-sp__best-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,0.22);
  background:rgba(10,10,10,0.75); color:#fff; font-size:18px; line-height:1; cursor:pointer;
  transition:border-color .25s, background .25s; }
.cnv-sp__best-nav:hover { border-color:var(--rozowy); background:rgba(255,0,200,0.25); }
.cnv-sp__best-nav--wstecz { left:6px; }
.cnv-sp__best-nav--dalej { right:6px; }

@media (min-width:1560px) {
  .cnv-sp__best-nav--wstecz { left:-52px; }
  .cnv-sp__best-nav--dalej { right:-52px; }
}

/* ===== LEGENDA IKONKI YT =====
   margin-top jawnie ustawiony — ten akapit siedzi teraz w treści
   strony (wp:html) zaraz po tekście o afiliacji, który nie dokłada
   własnego odstępu pod spodem, więc bez tego legenda "wjeżdżała"
   niemal na poprzedni tekst. */
.cnv-sp__legenda[hidden] { display:none; }
.cnv-sp__legenda { display:flex; align-items:center; gap:8px; margin:20px 0 24px; font-size:12.5px;
  color:#8a8a8a; }
.cnv-sp__legenda-ikonka { display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:18px; height:18px; border-radius:4px; background:#FF0000; color:#fff; }

/* ===== BANER KONTEKSTU FILMU =====
   Teraz jest dzieckiem .cnv-sp__filtry (samego flexa) — width:100%
   gwarantuje, że nadal zajmuje całą szerokość i ląduje w swoim
   własnym rzędzie, tak jak wcześniej jako zwykły blok. */
.cnv-sp__ctx { display:none; }
.cnv-sp__ctx.jest-widoczny { display:flex; align-items:center; gap:20px; width:100%;
  border:1px solid rgba(255,0,200,0.3); background:rgba(255,0,200,0.05);
  border-radius:5px; padding:16px 20px; margin-bottom:0; }
.cnv-sp__ctx-foto { width:132px; flex-shrink:0; border-radius:4px; overflow:hidden; background:#111; }
.cnv-sp__ctx-foto img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.cnv-sp__ctx-tresc { flex:1; min-width:0; }
.cnv-sp__ctx-etykieta { font-family:Arial,Helvetica,sans-serif; font-size:9px; letter-spacing:4px;
  text-transform:uppercase; color:var(--rozowy); margin-bottom:6px; }
.cnv-sp__ctx-tytul { font-family:'Libre Baskerville',Georgia,serif; font-size:16px; line-height:1.45;
  color:#fff; margin:0 0 6px; }
.cnv-sp__ctx-link { font-family:Arial,Helvetica,sans-serif; font-size:10px; letter-spacing:2px;
  text-transform:uppercase; color:var(--rozowy); text-decoration:none; }
.cnv-sp__ctx-link:hover { text-decoration:underline; }

/* ===== FILTRY ===== */
.cnv-sp__filtry { padding:22px 0; margin-bottom:34px; display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; }
/* etykieta stoi NAD swoim menu, nie obok — inaczej rząd rozjeżdża się
   przy dłuższych nazwach taksonomii */
.cnv-sp__rzad { display:flex; flex-direction:column; align-items:flex-start; }
.cnv-sp__rzad:empty { display:none; }
.cnv-sp__rzad-etykieta { display:block; font-family:Arial,Helvetica,sans-serif; font-size:9px;
  letter-spacing:4px; text-transform:uppercase; color:var(--rozowy); margin-bottom:9px; }

/* ===== MENU ROZWIJANE ===== */
.cnv-sp__drop { position:relative; }

.cnv-sp__drop-trigger { display:inline-flex; align-items:center; gap:12px; min-width:230px;
  border:1px solid rgba(255,255,255,0.14); border-radius:4px; background:rgba(255,255,255,0.03);
  padding:12px 16px; font-family:inherit; font-size:13px; color:#fff; cursor:pointer;
  transition:border-color .25s, background .25s; text-align:left; }
.cnv-sp__drop-trigger:hover { border-color:rgba(255,0,200,0.45); }
.cnv-sp__drop.jest-otwarty .cnv-sp__drop-trigger { border-color:var(--rozowy); }
.cnv-sp__drop.ma-wybor .cnv-sp__drop-trigger { border-color:var(--rozowy); background:rgba(255,0,200,0.07); }

.cnv-sp__drop-wybor { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cnv-sp__drop.ma-wybor .cnv-sp__drop-wybor { color:#fff; }
.cnv-sp__drop:not(.ma-wybor) .cnv-sp__drop-wybor { color:#8a8a8a; }

/* strzałka obraca się po otwarciu */
.cnv-sp__drop-strzalka { width:7px; height:7px; flex-shrink:0; border-right:1.5px solid #8a8a8a;
  border-bottom:1.5px solid #8a8a8a; transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .25s ease; }
.cnv-sp__drop.jest-otwarty .cnv-sp__drop-strzalka { transform:rotate(225deg) translate(-3px,-3px); }

.cnv-sp__drop-panel { position:absolute; z-index:40; top:calc(100% + 6px); left:0; min-width:100%;
  max-height:320px; overflow-y:auto; overflow-x:hidden; background:#111; border:1px solid rgba(255,255,255,0.12);
  border-radius:4px; box-shadow:0 24px 60px rgba(0,0,0,0.7); padding:6px; box-sizing:border-box; }
.cnv-sp__drop-panel[hidden] { display:none; }

.cnv-sp__opcja { display:flex; align-items:center; justify-content:space-between; gap:14px;
  width:100%; border:none; background:transparent; border-radius:3px; padding:10px 12px;
  font-family:inherit; font-size:13px; color:#b8b8b8; cursor:pointer; text-align:left;
  transition:background .2s, color .2s; white-space:nowrap; }
.cnv-sp__opcja:hover { background:rgba(255,255,255,0.06); color:#fff; }
.cnv-sp__opcja.jest-aktywna { color:#fff; background:rgba(255,0,200,0.12); }
.cnv-sp__filtr-ile { flex-shrink:0; font-size:11px; color:#8a8a8a; }

/* ===== FILTR KATEGORII — wielokrotny wybór (checkboxy), 1:1 z Portfolio =====
   Osobny modyfikator zamiast zmiany bazowego .cnv-sp__opcja, żeby nie
   dokleić kwadracika checkboxa też do zwykłych, jednokrotnych list
   (film, kraj), które zostają przyciskami bez zaznaczania. */
/* Panel tego filtra dostaje STAŁĄ, bezpieczną szerokość (tak jak w
   Portfolio) zamiast dopasowywać się do wyzwalacza — to on, za wąski
   dla checkboxa + nazwy + licznika naraz, powodował że liczniki
   "wyjeżdżały" poza ramkę. */
/* Panel tego filtra NIE ma własnego max-height/scrolla — scrolluje się
   tylko lista checkboxów (.cnv-sp__drop-lista, 300px). Wcześniej OBA
   poziomy (panel I lista) miały max-height + overflow-y:auto naraz —
   gdy razem (lista + stopka z przyciskami) przekraczały wysokość
   panelu, to PANEL zaczynał przewijać sam siebie, więc "Zastosuj
   filtry" chowało się pod spodem zamiast być zawsze widoczne od razu
   pod listą. */
.cnv-sp__drop--checkbox .cnv-sp__drop-panel { width:300px; max-width:calc(100vw - 40px);
  max-height:none; overflow:visible; }
.cnv-sp__drop-lista { max-height:300px; overflow-y:auto; overflow-x:hidden; padding:6px; box-sizing:border-box; }
.cnv-sp__opcja--checkbox { justify-content:flex-start; gap:11px; white-space:normal; position:relative; user-select:none; }
.cnv-sp__opcja--checkbox input { position:absolute; opacity:0; pointer-events:none; }
.cnv-sp__opcja--checkbox::before { content:''; width:14px; height:14px; flex-shrink:0; border-radius:3px;
  border:1px solid rgba(255,255,255,0.25); transition:background .2s, border-color .2s; }
.cnv-sp__opcja--checkbox.jest-zaznaczona { color:#fff; background:transparent; }
.cnv-sp__opcja--checkbox.jest-zaznaczona::before { background:var(--rozowy); border-color:var(--rozowy); }
.cnv-sp__opcja-nazwa { flex:1; }
.cnv-sp__drop-stopka { display:flex; gap:8px; padding:10px; border-top:1px solid rgba(255,255,255,0.1); }

/* ===== FILTR "OMAWIANE W FILMIE" — miniaturki + wyszukiwarka =====
   Z suchym tekstem widz nigdy się nie połapie przy kilkuset filmach,
   więc ten filtr dostaje własny, szerszy panel z podglądem i szukajką. */
.cnv-sp__drop--film .cnv-sp__drop-trigger { max-width:300px; }
.cnv-sp__drop-wybor--film { display:flex; align-items:center; gap:8px; overflow:hidden; }
.cnv-sp__drop-wybor-miniatura { width:26px; aspect-ratio:16/9; height:auto; border-radius:2px;
  object-fit:cover; flex-shrink:0; background:#000; }
.cnv-sp__drop--film .cnv-sp__drop-panel { min-width:320px; max-width:min(92vw,380px); padding:8px; }
.cnv-sp__drop-szukaj-pole { position:sticky; top:0; z-index:1; margin-bottom:6px;
  background:#111; padding-bottom:6px; }
.cnv-sp__drop-szukaj-pole input { width:100%; box-sizing:border-box; background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.14); border-radius:4px; padding:9px 11px; font-family:inherit;
  font-size:12.5px; color:#fff; }
.cnv-sp__drop-szukaj-pole input:focus { outline:none; border-color:var(--rozowy); }
.cnv-sp__drop-szukaj-pole input::placeholder { color:#6a6a6a; }
.cnv-sp__opcja--film { white-space:normal; gap:10px; }
.cnv-sp__opcja-miniatura { width:46px; height:26px; border-radius:2px; object-fit:cover;
  flex-shrink:0; background:#000; }
.cnv-sp__opcja-tekst { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.35; }
.cnv-sp__opcja--brak-wynikow { color:#6a6a6a; cursor:default; font-size:12.5px; padding:16px 12px;
  text-align:center; }
.cnv-sp__opcja--brak-wynikow:hover { background:transparent; }

/* ===== PASEK Z LINKIEM DO SKOPIOWANIA ===== */
.cnv-sp__share { display:flex; align-items:center; gap:10px; margin-top:18px;
  padding-top:18px; border-top:1px solid var(--kreska); flex-wrap:wrap; }
.cnv-sp__share[hidden] { display:none; }
.cnv-sp__share-label { font-family:Arial,Helvetica,sans-serif; font-size:9px; letter-spacing:3px;
  text-transform:uppercase; color:#6a6a6a; }
.cnv-sp__share-url { flex:1; min-width:180px; background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.1); border-radius:4px; color:#b8b8b8;
  font-family:inherit; font-size:12.5px; padding:10px 12px; }
.cnv-sp__btn { background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.22);
  border-radius:4px; padding:11px 20px; font-family:Arial,Helvetica,sans-serif; font-size:9px;
  letter-spacing:3px; text-transform:uppercase; cursor:pointer; transition:border-color .25s, opacity .25s; }
.cnv-sp__btn:hover { border-color:#fff; }
.cnv-sp__btn--glowny { background:var(--rozowy); color:#000; border-color:var(--rozowy); }
.cnv-sp__btn--glowny:hover { opacity:.85; border-color:var(--rozowy); }

/* ===== SIATKA ===== */
.cnv-sp__siatka { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:20px;
  align-items:start; }
.cnv-sp__msg { padding:60px 0; text-align:center; color:#6a6a6a; font-size:14px; }

/* ===== KAFELEK ===== */
.cnv-sp__karta { display:flex; flex-direction:column; background:rgba(255,255,255,0.03);
  border:1px solid var(--kreska); border-radius:4px; overflow:hidden;
  transition:border-color .3s ease; }
.cnv-sp__karta:hover { border-color:rgba(255,0,200,0.4); }

/* Bestseller — ręczne wyróżnienie (Sprzęt → edycja produktu → Wyróżnienie),
   nie licznik czegokolwiek. Stała, dwukolorowa obwódka non-stop, żeby
   od razu przyciągać uwagę na tle reszty siatki. */
.cnv-sp__karta.jest-bestseller {
  animation: cnvSpBestsellerObwodka 2.6s ease-in-out infinite;
}
@keyframes cnvSpBestsellerObwodka {
  0%, 100% { border-color: var(--rozowy); box-shadow: 0 0 0 1px var(--rozowy), 0 0 20px 1px rgba(255,0,200,0.35); }
  50%      { border-color: #0693e3; box-shadow: 0 0 0 1px #0693e3, 0 0 20px 1px rgba(6,147,227,0.35); }
}

.cnv-sp__main { display:flex; flex-direction:column; flex:1; color:inherit; cursor:zoom-in;
  background:transparent; border:none; padding:0; text-align:left; font:inherit; }

/* jasne tło pod zdjęcia produktowe — te zwykle są na bieli.
   Zdjęcie wypełnia CAŁY kwadrat (object-fit:cover, bez paddingu) —
   inaczej różne proporcje plików produktowych (banery reklamowe,
   zrzuty ze sklepów itd.) dawały bardzo różne, "skaczące" rozmiary
   zdjęcia w tej samej, jednakowej ramce. */
.cnv-sp__foto { position:relative; aspect-ratio:1/1; background:#ebebeb; overflow:hidden; }
.cnv-sp__foto img { width:100%; height:100%; object-fit:cover;
  display:block; transition:opacity .5s, transform .6s ease, filter .4s ease; }
/* ta sama animacja najechania co na zdjęciach w portfolio */
.cnv-sp__karta:hover .cnv-sp__foto img { transform:scale(1.05); filter:brightness(1.05); }
.cnv-sp__foto--pusta { background:rgba(255,255,255,0.04); display:flex; align-items:center;
  justify-content:center; color:#555; font-size:10px; letter-spacing:2px; text-transform:uppercase; }

/* Plakietka YT — w spoczynku to sam, statyczny kwadracik (okrągły) w
   rogu zdjęcia. Dopiero na hover rozsuwa się w lewo (prawa krawędź
   zostaje przypięta) i odsłania napis + liczbę filmów — cała animacja
   mieści się w obrębie zdjęcia. */
.cnv-sp__yt-plakietka { position:absolute; top:8px; right:8px; z-index:1;
  display:flex; align-items:center; justify-content:flex-start; overflow:hidden;
  height:26px; max-width:26px; padding:0; border-radius:99px; border:none;
  background:rgba(20,20,20,0.85); color:#fff; cursor:pointer; text-decoration:none;
  transition:max-width .3s ease, background .2s; }
.cnv-sp__yt-plakietka:hover { max-width:230px; background:#FF0000; }
.cnv-sp__yt-plakietka-ikona { flex-shrink:0; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:#FF0000; color:#fff; }
.cnv-sp__yt-plakietka-tekst { flex-shrink:0; white-space:nowrap; padding:0 4px 0 8px; opacity:0;
  font-family:Arial,Helvetica,sans-serif; font-size:11px; font-weight:700;
  transition:opacity .15s ease; }
.cnv-sp__yt-plakietka:hover .cnv-sp__yt-plakietka-tekst { opacity:1; transition:opacity .2s ease .1s; }
.cnv-sp__yt-plakietka-liczba { flex-shrink:0; margin-right:10px; color:#fff;
  background:rgba(255,255,255,0.22); border-radius:99px; padding:1px 6px; font-size:10.5px;
  font-family:Arial,Helvetica,sans-serif; font-weight:700; opacity:0; transition:opacity .15s ease; }
.cnv-sp__yt-plakietka:hover .cnv-sp__yt-plakietka-liczba { opacity:1; transition:opacity .2s ease .1s; }

.cnv-sp__body { padding:16px 16px 14px; display:flex; flex-direction:column; flex:1; }
/* zawsze rezerwuje miejsce na 2 linie, nawet gdy tytuł mieści się w
   jednej — inaczej krótkie i długie nazwy produktów dawały kafelki
   różnej wysokości w tym samym rzędzie */
.cnv-sp__nazwa { font-family:'Libre Baskerville',Georgia,serif; font-size:14.5px; line-height:1.45;
  color:#fff; margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:calc(1.45em * 2); }
.cnv-sp__opis { font-size:12.5px; line-height:1.75; color:#9a9a9a; margin-bottom:0; flex:1; }

/* ===== PRZYCISKI SKLEPÓW =====
   Kolor tła i tekstu każdego przycisku przychodzi z PHP (Sprzęt → Sklepy),
   dlatego tutaj jest tylko kształt. Dzięki temu zmiana barw jednego sklepu
   nie wymaga ruszania tego pliku.

   Na KAFELKU pokazujemy tylko jeden, główny sklep + plakietkę z liczbą
   pozostałych — pełna lista wszystkich sklepów jest w panelu produktu.
   Stała wysokość tego paska (jeden przycisk) to właśnie to, co nie
   pozwala już kafelkom "napuchać" pustym miejscem w rzędzie. */
.cnv-sp__sklepy { border-top:1px solid var(--kreska); padding:13px 16px 15px; min-height:106px;
  display:flex; flex-direction:column; gap:8px; }
.cnv-sp__sklepy.jest-pusta { visibility:hidden; }
.cnv-sp__sklepy-etykieta { font-family:Arial,Helvetica,sans-serif; font-size:8px; letter-spacing:2.5px;
  text-transform:uppercase; color:#6a6a6a; }
.cnv-sp__sklepy-etykieta.jest-zapasowa { color:#8a7000; letter-spacing:1.5px; text-transform:none;
  font-size:10px; line-height:1.5; }
.cnv-sp__sklepy-rzad { display:flex; align-items:flex-start; gap:8px; }

/* Stos: główny przycisk na górze, pod nim — z wyraźnym odstępem, nie
   ciasno na sobie — dokładnie tyle bloków ile jest dodatkowych sklepów
   (max 2, patrz JS). Każdy dodatkowy blok to PRAWDZIWY przycisk tego
   sklepu (ten sam kolor i pełna nazwa co miałby jako główny), tylko
   przygaszony i nieklikalny — .cnv-sp__sklep--przygaszony niżej. */
.cnv-sp__sklepy-stos { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }

.cnv-sp__sklep { display:flex; align-items:center; gap:9px; text-decoration:none;
  border-radius:4px; padding:9px 12px; font-family:Arial,Helvetica,sans-serif; font-size:12px;
  font-weight:700; letter-spacing:.4px; line-height:1.2;
  transition:transform .18s ease, filter .18s ease; }
.cnv-sp__sklep:hover { transform:translateY(-1px); filter:brightness(1.08); }
.cnv-sp__sklep:active { transform:translateY(0); }

/* Pierwszy sklep na liście to ten polecany — dostaje pełną wysokość,
   reszta (w panelu) jest wyraźnie drobniejsza, żeby wybór był oczywisty. */
.cnv-sp__sklep--glowny { padding:12px 14px; font-size:13px; flex:1; min-width:0; }
.cnv-sp__sklep:not(.cnv-sp__sklep--glowny) { opacity:.82; }
.cnv-sp__sklep:not(.cnv-sp__sklep--glowny):hover { opacity:1; }

/* Dodatkowy blok pod głównym linkiem — sam kolor sklepu, ale przygaszony
   ciemnym gradientem na wierzchu i wyłączony z interakcji (to tylko
   podgląd "jest jeszcze ten sklep", klik i tak otwiera pełny panel). */
.cnv-sp__sklep--przygaszony { position:relative; pointer-events:none; cursor:default; opacity:1; }
.cnv-sp__sklep--przygaszony:hover { transform:none; filter:none; }
.cnv-sp__sklep--przygaszony::after {
  content:''; position:absolute; inset:0; border-radius:4px;
  background:linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.6));
}

.cnv-sp__sklep-logo { height:16px; width:auto; max-width:70px; object-fit:contain; display:block;
  flex-shrink:0; }
.cnv-sp__sklep--glowny .cnv-sp__sklep-logo { height:19px; max-width:84px; }
.cnv-sp__sklep-nazwa { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* plakietka typu "Najlepsza cena" — półprzezroczysta, więc czyta się
   i na żółtym, i na granatowym tle */
.cnv-sp__sklep-plakietka { flex-shrink:0; font-size:8.5px; letter-spacing:1.5px; text-transform:uppercase;
  font-weight:700; padding:3px 7px; border-radius:99px; background:rgba(0,0,0,0.18);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.22); }

/* plakietka "+N" obok głównego przycisku — otwiera panel z resztą sklepów */
.cnv-sp__plus-sklepy { flex-shrink:0; display:flex; align-items:center; justify-content:center;
  height:38px; min-width:38px; padding:0 10px; border-radius:4px; border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.04); color:#cfcfcf; font-family:Arial,Helvetica,sans-serif;
  font-size:12px; font-weight:700; cursor:pointer; transition:border-color .2s, color .2s; }
.cnv-sp__plus-sklepy:hover { border-color:var(--rozowy); color:#fff; }

/* ===== PANEL PRODUKTU ===== — pełne szczegóły po kliknięciu w zdjęcie/nazwę:
   duże zdjęcie, opis, WSZYSTKIE sklepy, WSZYSTKIE filmy. Na wzór lightboxa
   z portfolio (ta sama logika: tło, scena wyśrodkowana, przycisk zamknij). */
.cnv-sp__panel { position:fixed; inset:0; z-index:200; display:flex; align-items:center;
  justify-content:center; padding:2.5vh 2.5vw; background:rgba(0,0,0,0.86); backdrop-filter:blur(6px); }
.cnv-sp__panel[hidden] { display:none; }

/* praktycznie pełny ekran — bez osobnej podstrony na produkt (patrz
   przycisk "kopiuj link" niżej: URL z ?produkt=ID daje to samo,
   czyli link do konkretnego produktu, bez zakładania nowych podstron
   martwych dla SEO) */
.cnv-sp__panel-scena { position:relative; width:100%; max-width:1500px; height:100%; max-height:95vh;
  overflow-y:auto; background:#141414; border:1px solid rgba(255,255,255,0.1); border-radius:8px;
  display:grid; grid-template-columns:1fr 1fr; }

.cnv-sp__panel-zamknij { position:absolute; top:14px; right:16px; z-index:2; border:none;
  background:rgba(0,0,0,0.5); color:#fff; width:34px; height:34px; border-radius:50%;
  font-size:19px; line-height:1; cursor:pointer; transition:background .2s; }
.cnv-sp__panel-zamknij:hover { background:rgba(255,0,200,0.6); }

.cnv-sp__panel-foto { background:#ebebeb; display:flex; align-items:center; justify-content:center;
  padding:40px; min-height:280px; }
.cnv-sp__panel-foto img { max-width:100%; max-height:85vh; width:auto; height:auto; object-fit:contain; display:block; }

.cnv-sp__panel-tresc { padding:40px 40px 30px; display:flex; flex-direction:column; min-width:0; overflow-y:auto; }
.cnv-sp__panel-nazwa { font-family:'Libre Baskerville',Georgia,serif; font-size:22px; line-height:1.35;
  color:#fff; margin:0 0 18px; }

/* 2. link główny — ten sam sklep co na kafelku, tu po prostu na całą
   szerokość panelu */
.cnv-sp__panel-glowny { margin-bottom:10px; }
.cnv-sp__panel-glowny .cnv-sp__sklep { width:100%; }

/* 3. kopiuj link do produktu */
.cnv-sp__panel-link { margin-bottom:26px; display:flex; align-items:center; gap:8px; }
.cnv-sp__panel-link button { flex-shrink:0; background:transparent; color:#8a8a8a;
  border:1px solid rgba(255,255,255,0.16); border-radius:4px; padding:8px 12px;
  font-family:Arial,Helvetica,sans-serif; font-size:8.5px; letter-spacing:2px; text-transform:uppercase;
  cursor:pointer; transition:border-color .25s, color .25s; white-space:nowrap; }
.cnv-sp__panel-link button:hover { border-color:var(--rozowy); color:#fff; }

/* 4. opis */
.cnv-sp__panel-opis { font-size:13.5px; line-height:1.85; color:#b0b0b0; margin-bottom:26px; }
.cnv-sp__panel-opis p { margin:0 0 14px; }
.cnv-sp__panel-opis p:last-child { margin-bottom:0; }

.cnv-sp__panel-sekcja-etykieta { font-family:Arial,Helvetica,sans-serif; font-size:9px; letter-spacing:3px;
  text-transform:uppercase; color:#6a6a6a; margin:0 0 12px; }
.cnv-sp__panel-sklepy { display:flex; flex-direction:column; gap:8px; margin-bottom:26px; }

/* 5. duży film prezentacyjny — miniaturka z guzikiem odtwarzania, dopiero
   klik ładuje faktyczny odtwarzacz YouTube */
.cnv-sp__panel-wideo { position:relative; width:100%; aspect-ratio:16/9; border-radius:6px;
  overflow:hidden; background:#000; margin-bottom:26px; cursor:pointer; }
.cnv-sp__panel-wideo img { width:100%; height:100%; object-fit:cover; display:block; }
.cnv-sp__panel-wideo iframe { width:100%; height:100%; border:0; display:block; }
.cnv-sp__panel-wideo-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.cnv-sp__panel-wideo-play span { width:60px; height:60px; border-radius:50%; background:rgba(0,0,0,0.65);
  display:flex; align-items:center; justify-content:center; transition:background .2s, transform .2s; }
.cnv-sp__panel-wideo:hover .cnv-sp__panel-wideo-play span { background:rgba(255,0,200,0.85); transform:scale(1.08); }
.cnv-sp__panel-wideo-play span::before { content:''; display:block; width:0; height:0;
  border-style:solid; border-width:10px 0 10px 16px; border-color:transparent transparent transparent #fff;
  margin-left:4px; }

/* 6. filmiki na YT, w których produkt występuje — 1 duży, 2 po połowie,
   3 po jednej trzeciej, od 4 w górę już się nie kurczą, tylko lista
   przewija się w bok */
.cnv-sp__panel-film { display:flex; flex-direction:column; text-decoration:none;
  border-radius:5px; transition:opacity .2s; }
.cnv-sp__panel-film:hover { opacity:.8; }
.cnv-sp__panel-film img { width:100%; aspect-ratio:16/9; height:auto; object-fit:cover; display:block;
  background:#000; border-radius:4px; }
.cnv-sp__panel-film span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; font-size:11.5px; line-height:1.4; color:#c8c8c8; margin-top:7px; }
.cnv-sp__panel-film:hover span { color:#fff; }

.cnv-sp__panel-filmy { margin-bottom:26px; }
.cnv-sp__panel-filmy--1 { display:grid; grid-template-columns:1fr; }
.cnv-sp__panel-filmy--2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cnv-sp__panel-filmy--3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.cnv-sp__panel-filmy--wiele { display:flex; overflow-x:auto; gap:12px; padding-bottom:4px; }
.cnv-sp__panel-filmy--wiele .cnv-sp__panel-film { flex:0 0 160px; }

/* ========== MOBILE ========== */
@media (max-width:781px) {
  .cnv-sp__siatka { grid-template-columns:repeat(2,1fr); gap:12px; }
  .cnv-sp__body { padding:12px 12px 11px; }
  .cnv-sp__nazwa { font-size:13px; }
  .cnv-sp__opis { font-size:11.5px; margin-bottom:10px; }
  .cnv-sp__sklepy { padding:10px 12px 12px; gap:6px; min-height:92px; }
  .cnv-sp__sklep { padding:8px 10px; font-size:11px; gap:7px; }
  .cnv-sp__sklep--glowny { padding:10px 11px; font-size:12px; }
  .cnv-sp__sklep-plakietka { display:none; }
  .cnv-sp__plus-sklepy { height:34px; min-width:34px; font-size:11px; }

  .cnv-sp__drop, .cnv-sp__drop-trigger { width:100%; }
  .cnv-sp__filtry { flex-direction:column; align-items:stretch; }
  .cnv-sp__rzad { width:100%; }
  .cnv-sp__drop--film .cnv-sp__drop-panel { max-width:none; }

  .cnv-sp__share { flex-direction:column; align-items:stretch; }
  .cnv-sp__share-url { min-width:0; }
  .cnv-sp__btn { width:100%; }

  .cnv-sp__ctx.jest-widoczny { flex-direction:column; align-items:flex-start; gap:14px; }
  .cnv-sp__ctx-foto { width:100%; }

  .cnv-sp__panel { padding:0; }
  .cnv-sp__panel-scena { max-height:100vh; height:100%; border-radius:0; grid-template-columns:1fr;
    grid-template-rows:auto 1fr; }
  .cnv-sp__panel-foto { min-height:0; padding:20px; }
  .cnv-sp__panel-foto img { max-height:34vh; }
  .cnv-sp__panel-tresc { padding:22px 18px 28px; }
  .cnv-sp__panel-filmy--2, .cnv-sp__panel-filmy--3 { grid-template-columns:1fr 1fr; }
  .cnv-sp__panel-wideo-play span { width:48px; height:48px; }

  .cnv-sp__best-glowka { flex-direction:column; }
  .cnv-sp__best-kafelek { flex-basis:140px; }
  .cnv-sp__best-ramka { padding:10px; }
  .cnv-sp__best-nav { width:32px; height:32px; font-size:15px; }
}