/* wp-content/themes/favou/imcd/impd.css
 *
 * Karta produktu: dostepnosc, blok terminu dostawy i kolejnosc przyciskow
 * przy ilosci. Reszte boxu zaufania trzyma arkusz wtyczki wc-price-box,
 * bo zostawilismy jej klasy.
 */

/* --- dostepnosc --------------------------------------------------------- */

/* Czern zamiast zieleni. Zielony obiecywal szybka wysylke, a to zadanie
   przejal blok terminu nizej, ktory podaje konkretna date. */
.single-product .wcpb-stock-badge--success {
	color: #121212;
}

.single-product .wcpb-stock-badge--success .wcpb-stock-dot {
	background: #121212;
}

/* --- glowna akcja ------------------------------------------------------- */

/* Motyw daje przyciskowi 14 px, a to za malo jak na glowna akcje strony
   w czarnym pasie wysokim na 50 px. Selektor z body, bo regula motywu ma
   dokladnie te same cztery klasy i przy remisie decydowalaby kolejnosc
   plikow - a te potrafi przestawic NitroPack. */
body.single-product .bwp-single-info .single_add_to_cart_button.button {
	font-size: 16px;
}

/* --- kolejnosc przyciskow przy ilosci ----------------------------------- */

/* Motyw dokleja je skryptem w kolejnosci plus, pole, minus
   (js/wc-quantity-increment.min.js: prepend "+" i append "-").
   Przestawiamy na minus, pole, plus - tak samo jak w koszyku. */
.single-product .bwp-single-info form.cart .quantity {
	display: inline-flex !important;
	align-items: center;
}

.single-product .bwp-single-info form.cart .quantity .minus { order: 1; }
.single-product .bwp-single-info form.cart .quantity .qty   { order: 2; }
.single-product .bwp-single-info form.cart .quantity .plus  { order: 3; }

/* --- box informacyjny pod przyciskiem ----------------------------------- */

/* Trzy poziomy waznosci zamiast pieciu rownych wierszy. Wczesniej kazdy blok
   mial ta sama ikone, ramke i wielkosc tekstu, wiec termin dostawy wazyl tyle
   samo co numer telefonu i ginal w tlumie. Teraz: dostawa w ramce, platnosci
   jako cichy pasek, zwroty i telefon malym drukiem w dwoch kolumnach. */

.single-product .impd-info {
	margin-top: 18px;
}

.single-product .impd-card {
	border: 1px solid #e3e3e3;
	border-radius: 10px;
	overflow: hidden;
}

.single-product .impd-row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 16px;
}

/* Kreska tylko miedzy wierszami karty, nie pod ostatnim. */
.single-product .impd-card .impd-row + .impd-row {
	border-top: 1px solid #eee;
}

.single-product .impd-ico {
	flex: 0 0 auto;
	line-height: 0;
	color: #4a4a4a;
}

.single-product .impd-txt {
	min-width: 0;
	font-size: 14px;
	line-height: 1.45;
}

/* Tylko bezposrednie dzieci. Bez znaku > ta regula siega takze do
   <span class="impd-free"> w srodku <strong> i zabiera mu zielen. */
.single-product .impd-txt > strong {
	display: block;
	font-weight: 600;
	color: #121212;
}

.single-product .impd-txt > span {
	display: block;
	color: #767676;
}

.single-product .impd-free {
	display: inline;
	color: #2e7d32;
	font-weight: 700;
}

.single-product .impd-txt a {
	color: inherit;
	text-decoration: none;
}

.single-product .impd-txt a:hover {
	text-decoration: underline;
}

/* --- stopka z platnosciami ---------------------------------------------------- */

/* Bez ramki i na koncu, bo to nie obietnica tylko wyliczenie. Ramka
   podnosilaby logotypy do rangi bloku dostawy, a miejsce w srodku przerywalo
   rytm dwoch ramek. */
.single-product .impd-pay {
	padding: 18px 4px 4px;
	text-align: center;
}

.single-product .impd-pay__lbl {
	display: block;
	margin-bottom: 10px;
	font-size: 13px;
	color: #767676;
}

.single-product .impd-pay__img {
	display: block;
	width: 100%;
	max-width: 420px;
	height: auto;
	margin: 0 auto;
}

/* --- drobny druk w karcie: zwroty i telefon --------------------------------------------------- */

/* auto-fit, a nie sztywne dwie kolumny z media query. Media pyta o szerokosc
   OKNA, a te dwa kafelki maja reagowac na szerokosc KOLUMNY PRODUKTU - inaczej
   na tablecie albo waskim laptopie robia sie dwa slupki po 150px.

   Kreske rozdzielajaca rysuje jednopikselowa szczelina, przez ktora widac tlo
   kontenera. Dzieki temu ustawia sie sama: pionowo przy dwoch kolumnach,
   poziomo po zwinieciu do jednej. */
.single-product .impd-mini {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
	gap: 1px;
	background: #eee;
	border-top: 1px solid #eee;
}

/* Lekkie przyciemnienie zamiast odstepu. Po scaleniu wszystkiego w jedna
   ramke hierarchie nioslaby juz tylko roznica 13 px kontra 14 px, a to za
   malo, zeby powiedziec "to jest drobny druk". Ten pas czyta sie teraz jak
   stopka karty, nie jak kolejne dwa rownorzedne wiersze. */
/* Ten sam padding poziomy co w wierszach wyzej, zeby ikona zwrotu stala
   dokladnie pod zegarem i ciezarowka. Osiem pikseli roznicy nie ma nazwy,
   ale widac je jako niechlujstwo. */
.single-product .impd-mini .impd-row {
	padding: 14px 16px;
	gap: 10px;
	background: #fafafa;
}

.single-product .impd-mini .impd-txt {
	font-size: 13px;
}

.single-product .impd-mini .impd-ico svg {
	width: 22px;
	height: 22px;
}

/* --- blok przewidywanej dostawy ----------------------------------------- */

.single-product .impd-eta .impd-eta__lbl {
	display: block;
	margin-bottom: 2px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: #8a8a8a;
}

/* Zielen nie jest ozdoba. Znaczy korzysc dla klienta i wystepuje w trzech
   miejscach karty: "Oszczedzasz", termin dostawy i slowo GRATIS. */
.single-product .impd-eta .impd-eta__val {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	color: #2e7d32;
}

.single-product .impd-eta .impd-eta__push {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	line-height: 1.4;
	color: #555;
}

/* Odliczana liczba nie moze zmieniac szerokosci co sekunde, bo caly wiersz
   drgalby przy kazdym tyknieciu. */
.single-product .impd-eta .imcc-t {
	font-weight: 700;
	color: #121212;
	font-variant-numeric: tabular-nums;
}

@media ( max-width: 600px ) {

	.single-product .impd-eta .impd-eta__val {
		font-size: 16px;
	}
}

/* --- plywajacy pasek zakupu (telefon) ----------------------------------- */

/* Ponizej 768 px kolumny bootstrapa na karcie produktu przestaja stac obok
   siebie - to jest naturalna granica "telefonu" na tej stronie. */
.impd-bar {
	display: none;
}

@media ( max-width: 767px ) {

	.impd-bar {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 998;
		background: #fff;
		border-top: 1px solid #e3e3e3;
		box-shadow: 0 -6px 18px rgba( 0, 0, 0, .08 );
		padding-bottom: env( safe-area-inset-bottom );

		/* Schowany przez przesuniecie, a nie display, zeby wjazd dalo sie
		   animowac. visibility zdejmuje go z kolejnosci tabulacji. */
		transform: translateY( 100% );
		visibility: hidden;
		transition: transform 200ms ease, visibility 200ms;
	}

	.impd-bar.is-on {
		transform: translateY( 0 );
		visibility: visible;
	}

	/* Przy otwartej szufladzie koszyka pasek tylko przeszkadza. */
	html.imcd-locked .impd-bar {
		transform: translateY( 100% );
		visibility: hidden;
	}

	.impd-bar__akcja {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 10px 14px 6px;
	}

	.impd-bar__cena {
		display: flex;
		align-items: baseline;
		gap: 8px;
		white-space: nowrap;
	}

	.impd-bar__teraz {
		font-size: 21px;
		font-weight: 800;
		line-height: 1.2;
		color: #121212;
	}

	.impd-bar__oszcz {
		font-size: 12px;
		font-weight: 700;
		color: #2e7d32;
	}

	.impd-bar .impd-bar__cta {
		flex: 1;
		min-width: 0;
		height: 46px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 9px;
		background: #121212;
		color: #fff;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: .5px;
		text-transform: uppercase;
		line-height: 1;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
	}

	.impd-bar__drobne {
		display: flex;
		align-items: center;
		gap: 7px;
		flex-wrap: wrap;
		padding: 0 14px 10px;
		font-size: 11px;
		line-height: 1.35;
		color: #8a8a8a;
	}

	.impd-bar__ship {
		font-weight: 700;
		color: #2e7d32;
	}

	.impd-bar__ship:empty {
		display: none;
	}

	/* Kropka rozdzielajaca znika razem z terminem, gdyby ten sie nie wczytal. */
	.impd-bar__ship:empty + .impd-bar__sep {
		display: none;
	}

	.impd-bar__sep {
		color: #d0d0d0;
	}

	.impd-bar__drobne .woocommerce-Price-amount {
		color: inherit;
		font-size: inherit;
	}

	/* Miniatura, nazwa i "lub kup teraz, zapłać później" sa tylko w pasku na komputerze. */
	.impd-bar__foto,
	.impd-bar__nazwa,
	.impd-bar__raty,
	.impd-bar__cta-dlugo {
		display: none;
	}

	/* Plakietka TrustMate: podnosimy ja ponad pasek, zamiast chowac.

	   Celujemy w .tm-muskrat2__sticker, bo to JEST element pozycjonowany.
	   Kontener #tm-widget-muskrat2 jest tylko pudelkiem w tresci strony -
	   przesuwanie go nic nie daje, bo sticker w srodku ma position:fixed
	   i trzyma sie okna, nie pudelka. Pierwsze podejscie ruszalo wlasnie
	   kontener i dlatego nie zadzialalo.

	   Ustawiamy bottom, a NIE transform. Transform jest ich: uzywaja go do
	   zjezdzania plakietki przy przewijaniu i do centrowania w pionie.
	   Nadpisanie go zepsuloby te animacje.

	   Przedrostek body.single-product jest konieczny - plakietka ma byc
	   podniesiona WYLACZNIE na karcie produktu.

	   UWAGA: nazwa klasy pochodzi od TrustMate. Jesli ja kiedys zmienia,
	   plakietka po cichu wroci na pasek i nikt tego nie zauwazy, dopoki ktos
	   nie wejdzie na telefonie. Wyjscie awaryjne bez tego ryzyka: zmiana
	   polozenia w ich panelu (Polozenie -> Mobilny).

	   Podnosimy TYLKO przy `html.impd-bar-on`, czyli gdy pasek jest na ekranie.
	   Wczesniej podnoszenie dzialalo zawsze i plakietka wisiala nad pustym
	   miejscem juz na pierwszym ekranie - razem z paskiem i czatem robily
	   z dolnej krawedzi telefonu trzy pietra (zgloszone 20-09-2026). Teraz
	   na pierwszym ekranie plakietka stoi tam, gdzie na kazdej innej
	   podstronie, i rzadzi sie swoim wlasnym hideOnScroll. */
	html.impd-bar-on body.single-product .tm-muskrat2__sticker {
		bottom: calc( var( --impd-bar-h, 0px ) + 12px ) !important;
	}

	/* Dymek czatu Tidio: ta sama wysokosc co plakietka TrustMate, po prawej.

	   Tidio siedzi w shadow DOM, wiec do samego dymka CSS strony nie siegnie.
	   Ruszamy kontener #tidio-chat: to warstwa fixed na CALE okno
	   (pointer-events:none), a dymek stoi w niej 14 px od dolu. Stad
	   bar-h - 2 px = dol dymka na bar-h + 12 px, jak dol plakietki.
	   Inline style Tidio ma bottom bez !important, wiec regula wygrywa.

	   Tylko przy ZAMKNIETYM czacie. Otwarty czat na telefonie zajmuje ten sam
	   kontener na pelnym ekranie - przesuniety wyjechalby naglowkiem poza
	   okno. Klase impd-tidio-open ustawia impd.js ze zdarzen API Tidio.

	   Chowanie przy przewijaniu kopiuje zachowanie TrustMate (hideOnScroll
	   w ich skrypcie): znika, gdy strona zjedzie o pol wysokosci okna,
	   wraca wyzej. visibility, nie display:none, zeby Tidio nie tracil
	   wymiarow swojego React-a przy kazdym pokazaniu.

	   Podnoszenie tez zalezy od `impd-bar-on` - bez paska dymek stoi tam,
	   gdzie na kazdej innej podstronie. */
	html.impd-bar-on:not(.impd-tidio-open) body.single-product #tidio-chat {
		bottom: calc( var( --impd-bar-h, 0px ) - 2px ) !important;
	}

	html.impd-tidio-scrolled:not(.impd-tidio-open) body.single-product #tidio-chat {
		visibility: hidden !important;
	}
}

/* --- plywajacy pasek zakupu (komputer, od 21-10-2026) ------------------- */

/* Ten sam pasek co na telefonie (ten sam HTML i skrypt: pokazuje sie, gdy prawdziwy przycisk zjedzie nad ekran),
   w jednym wierszu na szerokosc tresci strony: miniatura | nazwa, termin wysylki i najnizsza cena z 30 dni |
   cena, oszczednosc i "lub 20 rat 0% po X" | przycisk. Raty otwieraja okno kalkulatora (data-im-okno, js/karta.js). */
@media ( min-width: 768px ) {

	.impd-bar {
		display: grid;
		grid-template-columns: auto minmax( 0, 1fr ) auto;
		grid-template-areas: "foto nazwa akcja" "foto drobne akcja";
		align-items: center;
		column-gap: 16px;
		row-gap: 2px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 998;
		padding: 10px max( 24px, calc( 50% - 616px ) );
		background: #fff;
		border-top: 1px solid #e3e3e3;
		box-shadow: 0 -6px 18px rgba( 0, 0, 0, .08 );
		transform: translateY( 100% );
		visibility: hidden;
		transition: transform 200ms ease, visibility 200ms;
	}

	.impd-bar.is-on {
		transform: translateY( 0 );
		visibility: visible;
	}

	html.imcd-locked .impd-bar {
		transform: translateY( 100% );
		visibility: hidden;
	}

	.impd-bar__foto {
		grid-area: foto;
		display: block;
		width: 56px;
		height: 56px;
		object-fit: cover;
		border: 1px solid #ececec;
		border-radius: 8px;
		background: #f6f5f3;
	}

	.impd-bar__nazwa {
		grid-area: nazwa;
		align-self: end;
		margin: 0;
		overflow: hidden;
		font-size: 15px;
		font-weight: 700;
		line-height: 1.35;
		color: #121212;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.impd-bar__drobne {
		grid-area: drobne;
		align-self: start;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 2px 8px;
		min-width: 0;
		font-size: 13px;
		line-height: 1.4;
		color: #8a8a8a;
	}

	.impd-bar__ship {
		font-weight: 700;
		color: #2e7d32;
	}

	.impd-bar__ship:empty,
	.impd-bar__ship:empty + .impd-bar__sep {
		display: none;
	}

	.impd-bar__sep {
		color: #d0d0d0;
	}

	.impd-bar__drobne .woocommerce-Price-amount,
	.impd-bar__raty .woocommerce-Price-amount {
		color: inherit;
		font-size: inherit;
		font-weight: inherit;
	}

	.impd-bar__akcja {
		grid-area: akcja;
		display: flex;
		align-items: center;
		gap: 22px;
	}

	.impd-bar__kol {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 1px;
	}

	.impd-bar__cena {
		display: flex;
		align-items: baseline;
		gap: 8px;
		white-space: nowrap;
	}

	.impd-bar__teraz {
		font-size: 22px;
		font-weight: 800;
		line-height: 1.2;
		color: #121212;
	}

	.impd-bar__oszcz {
		font-size: 13px;
		font-weight: 700;
		color: #2e7d32;
	}

	.impd-bar .impd-bar__raty {
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		font: inherit;
		font-size: 13px;
		line-height: 1.4;
		color: #555;
		text-decoration: underline;
		text-underline-offset: 3px;
		white-space: nowrap;
		cursor: pointer;
	}

	.impd-bar .impd-bar__raty:hover {
		color: #b97c12;
	}

	.impd-bar .impd-bar__raty[hidden] {
		display: none;
	}

	.impd-bar .impd-bar__cta {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		height: 50px;
		margin: 0;
		padding: 0 32px;
		border: 0;
		border-radius: 9px;
		background: #121212;
		color: #fff;
		font-size: 14px;
		font-weight: 700;
		letter-spacing: .5px;
		line-height: 1;
		text-transform: uppercase;
		white-space: nowrap;
		cursor: pointer;
		transition: background-color .15s;
	}

	.impd-bar .impd-bar__cta:hover {
		background: #333;
	}

	.impd-bar__cta-krotko {
		display: none;
	}

	/* Plakietka TrustMate stoi przy dolnej krawedzi: gdy pasek jest na ekranie, podnosimy ja nad niego (jak na telefonie). */
	html.impd-bar-on body.single-product .tm-muskrat2__sticker {
		bottom: calc( var( --impd-bar-h, 0px ) + 12px ) !important;
	}
}

/* --- otwarta galeria: nad zdjeciem nic nie plywa ------------------------ */

/* Kontener Tidio ma z-index 999999999, a plakietka TrustMate 2147483646,
   wiec oba maluja sie NAD lightboxem galerii, ktory ma 999999. Na
   pelnoekranowym zdjeciu materaca dymek czatu i plakietka opinii nie maja
   nic do roboty (zgloszone 20-09-2026: "chat sie nie chowa").

   Uchwytem jest klasa `with-fancybox`, ktora Fancybox sam wiesza na <html>
   na czas otwartego lightboxa - zadnego skryptu nie trzeba. Reguly nie sa
   w media query: na komputerze problem jest dokladnie ten sam.

   DWIE OSOBNE REGULY, a nie jedna lista selektorow. Gdyby `:has()` trafil
   do przegladarki, ktora go nie zna, uniewaznilby CALA regule razem
   z czescia opierajaca sie na klasie. Rozdzielone dzialaja niezaleznie:
   klasa zalatwia sprawe wszedzie, `:has()` jest polisa na wypadek, gdyby
   Fancybox kiedys przestal te klase dodawac.

   visibility, nie display: none - Tidio siedzi w shadow DOM i przy
   display: none traci wymiary swojego Reacta przy kazdym pokazaniu. */
html.with-fancybox #tidio-chat,
html.with-fancybox .tm-muskrat2__sticker {
	visibility: hidden !important;
}

html:has( .fancybox__container ) #tidio-chat,
html:has( .fancybox__container ) .tm-muskrat2__sticker {
	visibility: hidden !important;
}

/* --- otwarta galeria: pasek tylko z powiekszaniem ----------------------- */

/* Wtyczka galerii wlacza w pasku Fancyboxa wszystko, co on ma: poza lupami
   takze "1:1", obrot w lewo i w prawo, odbicie w pionie i w poziomie oraz
   pokaz slajdow - 7 ikon na srodku i 2 po prawej (zgloszone 03-10-2026:
   "przytlaczajace"). Przy zdjeciu materaca klient chce je powiekszyc
   i zamknac; obracanie i odbijanie nic mu nie daje, a "1:1" robi to samo
   co lupa. Zostaja: licznik zdjec, lupa +, lupa -, zamknij i strzalki.

   Chowamy CSS-em, a nie w ustawieniach Fancyboxa: liste przyciskow podaje
   skrypt wtyczki woo-gallery-slider-pro, ktorego nie ruszamy (aktualizacja
   wtyczki skasowalaby zmiane). Atrybuty data-* sa czescia Fancyboxa 5. */
.fancybox__toolbar [data-panzoom-action="toggleZoom"],
.fancybox__toolbar [data-panzoom-action="rotateCCW"],
.fancybox__toolbar [data-panzoom-action="rotateCW"],
.fancybox__toolbar [data-panzoom-action="flipX"],
.fancybox__toolbar [data-panzoom-action="flipY"],
.fancybox__toolbar [data-fancybox-toggle-slideshow] {
	display: none !important;
}

/* --- galeria: klikniecie przed czasem ----------------------------------- */

/* Lightbox doladowuje sie dopiero po starcie strony i do tego czasu impd.js
   (galeriaWczesnyKlik) trzyma klikniecie w zdjecie. */

/* Podwojne stukniecie w zdjecie, zanim suwak wystartuje, iPhone bierze za
   gest powiekszenia strony (do 1,6x). Powiekszona strona rozjezdza potem
   rozmiary zdjec w lightboxie (zob. galeriaPrzemierz() w impd.js).
   "manipulation" wylacza tylko to powiekszanie stuknieciem; przewijanie
   i szczypanie dwoma palcami zostaja. Po starcie suwak i tak ustawia
   na zdjeciu wlasne pan-y. */
#wpgs-gallery {
	touch-action: manipulation;
}

/* Kolko na zdjeciu od klikniecia do otwarcia galerii, zeby klient widzial,
   ze stukniecie zadzialalo i nie stukal drugi raz. Pojawia sie po 150 ms:
   przy szybkim laczu galeria otwiera sie wczesniej i kolko by tylko mignelo. */
#wpgs-gallery.impd-galeria-czeka .wcgs-carousel::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 20;
	width: 46px;
	height: 46px;
	margin: -23px 0 0 -23px;
	border: 3px solid rgba( 0, 0, 0, .12 );
	border-top-color: #db9b2e;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .9 );
	box-shadow: 0 2px 10px rgba( 0, 0, 0, .12 );
	pointer-events: none;
	animation: impd-galeria-kolko .7s linear infinite, impd-galeria-pokaz .2s .15s both;
}

#wpgs-gallery.impd-galeria-czeka .wcgs-slider-image-tag {
	cursor: progress;
}

@keyframes impd-galeria-kolko {
	to { transform: rotate( 360deg ); }
}

@keyframes impd-galeria-pokaz {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* --- galeria: dlaczego kadr jest kwadratowy ----------------------------- */

/* Kadru NIE zmieniamy. Slider pokazuje pliki takie, jakie sa, czyli
   kwadratowe, i dzieki temu kazde zdjecie wchodzi w kadr co do piksela:
   bez przycinania, bez pasow po bokach i bez zadnej logiki w JS.

   Byla tu proba kadru 3:2 (20-09-2026, wycofana tego samego dnia). Powod
   wycofania, wazny na przyszlosc: `object-fit: cover` skaluje zdjecie do
   SZEROKOSCI kadru, wiec materac na zdjeciu glownym mial te same 720 px przy
   kadrze 480 px i przy 720 px. Kadr nie powiekszal produktu, tylko skracal
   galerie o 240 px. Platnoscia byly infografiki i aranzacje, ktorych nie
   wolno przyciac (tekst w pasie): schodzily do 480 px, czyli polowy
   powierzchni. Oddawanie polowy grafik sprzedazowych za to, zeby pasek
   miniatur wszedl w pierwszy ekran, sie nie oplaca - pasek to nawigacja,
   a na zdjeciu sa strzalki.

   Skutek uboczny do swiadomosci: na Full HD (okno okolo 940 px) galeria
   konczy sie na 1142 px, wiec pasek miniatur jest pod zgieciem i klient musi
   przewinac okolo 200 px. Jeden rzad miniatur zamiast siatki 4 na 2 skrocil
   galerie z 1324 px do 1142 px, czyli o 182 px.

   Kadr 3:2 wroci do rozwazenia, gdy infografiki beda eksportowane poziomo
   (1500 x 1000). Wtedy nie traci nic. */

/* --- galeria: pasek miniatur zaczyna sie od pierwszej miniatury --------- */

/* Wtyczka daje paskowi `justify-content: center`
   (`.gallery-navigation-carousel-wrapper .spswiper-wrapper`). Przy siatce
   4 na 2 to nie przeszkadzalo, bo tasma miala dokladnie szerokosc okna.
   W ukladzie z jednym rzedem osiem miniatur po 173 px to tasma 1464 px w oknie
   720 px, wiec flexbox przesuwa ja o (1464 - 720) / 2 = 372 px w lewo: na
   wejsciu widac miniatury od czwartej, a aktywna pierwsza stoi poza kadrem
   (zmierzone 20-09-2026: kafel aktywny na x = -370).

   Swiper liczy swoje przesuniecia od zera, wiec centrowanie rozjezdza mu
   takze dosuwanie paska przy zmianie zdjecia.

   Bez media query: przewijana tasma ma zaczynac sie od pierwszego kafla na
   kazdej szerokosci. Regula wtyczki nie ma !important, a nasz selektor ma
   dodatkowo id, wiec wygrywa bez podnoszenia sily. */
#wpgs-gallery.wcgs-woocommerce-product-gallery:not(.wcgs-multi-row-thumb) .gallery-navigation-carousel-wrapper .spswiper-wrapper {
	justify-content: flex-start;
}

/* --- galeria: tlo przy zdjeciu pokazywanym w calosci -------------------- */

/* Zdjecie, ktorego nie wolno przyciac (infografika z tekstem w pasie, render
   z produktem siegajacym pasa), pokazujemy w calosci, wiec w kadrze 3:2
   zostaje po bokach po 120 px wolnego miejsca.

   Te pasy dostaja SREDNI KOLOR NAROZNIKOW tego samego zdjecia (--impd-tlo
   ustawia impd.js): bezowa infografika dostaje bez, bialy render biel. Pas
   czyta sie wtedy jak wlasny margines grafiki, a nie jak dziura w galerii.
   Dokladnie na tym stoi galeria FDM - ich zdjecie 720 x 428 lezy w kadrze
   851 x 610, czyli ma po 66 px wolnego z boku, tylko ze wszystkie ich pliki
   maja jasne tlo, wiec nikt tego nie widzi (pomiar 20-09-2026).

   Wczesniej bylo tu rozmycie kopii zdjecia. Plaski kolor wyszedl spokojniejszy
   i nie kosztuje filtra na kazdej zmianie slajdu.

   Fallback #fff, gdyby skrypt nie wstal albo plotno bylo zablokowane. */
@media ( min-width: 992px ) {

	#wpgs-gallery.wcgs-woocommerce-product-gallery .wcgs-slider-image {
		background-color: #fff;
	}

	#wpgs-gallery.wcgs-woocommerce-product-gallery .wcgs-slider-image.impd-calosc {
		background-color: var( --impd-tlo, #fff );
	}
}

/* --- galeria: dwuklik w strzalke nie zaznacza zdjecia ------------------- */

/* Szybkie klikanie strzalki jest dla przegladarki dwuklikiem, a dwuklik
   zaznacza tresc pod kursorem. Motyw maluje zaznaczenie na pomaranczowo
   (template.css: `::selection { background: #db9b2e }`), wiec cale zdjecie
   robilo sie pomaranczowe (zgloszone 20-09-2026).

   W galerii nie ma czego zaznaczac, wiec zaznaczanie zdejmujemy w calosci.
   Osobno blokujemy przeciaganie zdjecia: bez tego wolne pociagniecie myszka
   podnosi je jak plik i przeszkadza w przewijaniu galerii. */
#wpgs-gallery {
	-webkit-user-select: none;
	user-select: none;
}

#wpgs-gallery img {
	-webkit-user-drag: none;
}

/* --- karta ceny: jedna ramka zamiast trzech ----------------------------- */

/* Uklad rysuje impd_price_box() w functions.php. Tutaj sama geometria:
   cena z lewej, licznik promocji z prawej, Klarna na pelna szerokosc,
   dostepnosc na dole za kreska.

   Wszystkie selektory zaczynaja sie od `.impd-box`, zeby biły reguly wtyczek
   (wc-price-box i sctv-sales-countdown-timer) z zapasem, a nie remisem -
   przy remisie decyduje kolejnosc plikow, a te potrafi przestawic NitroPack. */

.impd-box .impd-box__gora {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	justify-content: space-between;
}

/* min-width: 0, bo inaczej dluga cena nie da sie zwezic i rozepcha kolumne */
.impd-box .impd-box__cena {
	flex: 1 1 auto;
	min-width: 0;
}

.impd-box .impd-box__licznik {
	flex: 0 0 auto;
}

/* Wtyczka licznika daje swojemu opakowaniu width: 100%, srodkowanie
   i padding 10px 0 - w prawej kolumnie wszystkie trzy przeszkadzaja. */
.impd-box .impd-box__licznik .woo-sctr-shortcode-countdown-timer-wrap {
	width: auto;
	padding: 0;
	justify-content: flex-end;
}

/* Podpis nad kafelkami, nie obok. Obok zajmuje 342 px i nie ma jak stanac
   przy cenie; nad kafelkami schodzi do 164 px (zmierzone na live). */
.impd-box .impd-box__licznik .woo-sctr-countdown-timer-layout.woo-sctr-countdown-timer-layout-inline {
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.impd-box .impd-box__licznik .woo-sctr-countdown-timer-layout.woo-sctr-countdown-timer-layout-inline > div {
	margin-left: 0;
	margin-right: 0;
}

/* Omnibus ma w arkuszu wtyczki margin-bottom: 14 px pod ostatnia linia
   lewej kolumny - tu nie ma juz czego odpychac. */
.impd-box .wcpb-omnibus-row .price-last-30 {
	margin-bottom: 0;
}

/* Kreska nad Klarna wedruje nizej, nad dostepnosc. Sam wiersz Klarny
   zostaje w kodzie, ale jest pusty (tresc daje iframe Stripe'a pod nim). */
.impd-box .wcpb-klarna-row {
	border-top: 0;
	padding-top: 0;
	margin-bottom: 0;
}

.impd-box #wc-stripe-bnpl-product-msg {
	margin-top: 8px;
}

.impd-box .impd-box__stan {
	border-top: 1px solid #e0e0e0;
	margin-top: 12px;
	padding-top: 12px;
}

.impd-box .impd-box__stan .wcpb-stock-badge {
	margin-bottom: 0;
}

/* Telefon i tablet. Przy kolumnie wezszej niz ~570 px licznik nie ma jak
   stanac obok ceny: zostaloby na nia 169 px, a sam rzad ceny ma 217 px,
   wiec "Najnizsza cena z 30 dni" lamalaby sie na trzy linie i karta
   wyszlaby WYZSZA niz przed zmiana. Licznik schodzi wiec pod cene
   i wraca do swojego ukladu w linii (podpis z lewej, kafelki z prawej). */
@media ( max-width: 767px ) {

	.impd-box .impd-box__gora {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.impd-box .impd-box__licznik .woo-sctr-shortcode-countdown-timer-wrap {
		justify-content: flex-start;
	}

	.impd-box .impd-box__licznik .woo-sctr-countdown-timer-layout.woo-sctr-countdown-timer-layout-inline {
		flex-direction: row;
		align-items: center;
		gap: 8px;
	}
}