/*
Theme Name: Shopuj v2
Theme URI: https://shopuj.pl
Author: Damian + Claude
Description: Motyw blokowy (FSE) dla Shopuj v2. Bez page-buildera, bez frameworka opcji.
             Warstwa wizualna sterowana z theme.json.
Version: 0.9.86
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: shopuj-v2
Tags: full-site-editing, block-patterns, e-commerce
*/

/*
  ZASADA
  ------
  Kolory, typografia, odstepy i siatka -> theme.json.
  Tutaj tylko to, czego theme.json wyrazic NIE POTRAFI:
  sklejenie pola wyszukiwania z przyciskiem, pigulki nawigacji,
  zachowanie paska informacyjnego. Nic wiecej.

  Jesli ten plik zacznie puchnac, znaczy ze obchodzimy system zamiast go uzywac.
*/

/* ===============================================================
   MODEL PUDELKA

   Domyslnie `width: 100%` znaczy "sto procent NA SAMA TRESC", a ramka
   i wypelnienie dochodza NA ZEWNATRZ. Czyli element z `width: 100%`
   i ramka 1 px jest w rzeczywistosci szerszy o 2 px od rodzica.

   Wlasnie dlatego z ramki galerii znikala prawa krawedz: wychodzila
   2 px poza kolumne, a `overflow-x: clip` na dokumencie ja obcinal.
   Lewa byla widoczna, bo lewa krawedz sie zgadzala — i stad zludzenie,
   ze "brakuje jednej linii".

   Ten reset sprawia, ze `width: 100%` znaczy to, czego sie po nim
   spodziewamy: sto procent RAZEM z ramka i wypelnieniem. Tak liczy
   dzis kazdy sensowny arkusz i tak zakladaja bloki WordPressa.
   =============================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------
   Pasek informacyjny
   Wymog ze specyfikacji: po wylaczeniu nie zostawia pustej przestrzeni.
   Dlatego zero marginesow — wysokosc bierze sie wylacznie z zawartosci.
   --------------------------------------------------------------- */
.sv-topbar { margin: 0; }

.sv-topbar__msgs {
	gap: 1.75rem;
	overflow: hidden;
}

.sv-topbar__msgs p {
	margin: 0;
	white-space: nowrap;
}

.sv-topbar strong { color: var(--wp--preset--color--inpost); font-weight: 600; }
.sv-topbar a      { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* przycisk zamkniecia dokladany skryptem — patrz functions.php */
.sv-topbar__close {
	margin-left: auto;
	background: none;
	border: 0;
	color: #fff;
	opacity: .55;
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
	padding: 4px 2px 4px 12px;
	flex-shrink: 0;
}
.sv-topbar__close:hover { opacity: 1; }

/* ---------------------------------------------------------------
   Naglowek
   --------------------------------------------------------------- */
.sv-header__row { gap: 1.5rem; }

.sv-header__row > .wp-block-site-title { flex-shrink: 0; }

.sv-search {
	flex: 1 1 320px;
	max-width: 720px;
	min-width: 0;
}

/* ---------------------------------------------------------------
   Podpowiedzi pod polem wyszukiwania

   Panel wisi nad trescia strony, wiec kotwica musi byc na formularzu,
   a nie na naglowku — inaczej pozycja rozjezdza sie przy zawijaniu
   paska na tablecie (tam pole wyszukiwania przechodzi do drugiego rzedu).
   --------------------------------------------------------------- */
form.sv-search,
.sv-search form { position: relative; }

.sv-podpowiedzi {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 60;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(17, 20, 24, .14);
	overflow: hidden;
}
.sv-podpowiedzi[hidden] { display: none; }

.sv-podpowiedzi__lista {
	list-style: none;
	margin: 0;
	padding: .25rem;
	max-height: min(60vh, 420px);
	overflow-y: auto;
}
.sv-podpowiedzi__lista li { margin: 0; }

.sv-podpowiedz {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .4375rem .5rem;
	border-radius: 8px;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.sv-podpowiedz:hover,
.sv-podpowiedz--wybrana {
	background: var(--wp--preset--color--base-2);
	text-decoration: none;
}

.sv-podpowiedz__foto {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 7px;
	background: var(--wp--preset--color--base-2);
	overflow: hidden;
	display: grid;
	place-items: center;
}
.sv-podpowiedz__foto img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.sv-podpowiedz__tresc {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: .0625rem;
}

/*
   Nazwa najwyzej w dwoch linijkach. Nasze nazwy z BaseLinkera potrafia
   miec 90 znakow i bez tego jedna podpowiedz zajelaby caly panel.
*/
.sv-podpowiedz__nazwa {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sv-podpowiedz__nazwa mark {
	background: none;
	color: inherit;
	font-weight: 700;
}

.sv-podpowiedz__cena {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}
.sv-podpowiedz__cena del {
	font-weight: 500;
	color: var(--wp--preset--color--contrast-3);
	margin-right: .375rem;
}

.sv-podpowiedzi__pusto {
	padding: .875rem .75rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
}

.sv-podpowiedzi__wszystkie {
	display: block;
	padding: .625rem .75rem;
	border-top: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base-2);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	color: var(--wp--preset--color--accent);
}
.sv-podpowiedzi__wszystkie:hover { text-decoration: underline; }
.sv-podpowiedzi__wszystkie[hidden] { display: none; }

/* ===============================================================
   TRESCI DLA DOROSLYCH (18+)

   Logika siedzi we wtyczce `shopuj-dorosli.php`, tutaj jest tylko
   wyglad. Wtyczka dokleja klase `sv-18` do zdjec produktow z Erotyki,
   dopoki klient nie potwierdzi wieku.

   ROZMYCIE MUSI ZASLANIAC, A NIE OZDABIAC
   ---------------------------------------
   `blur` rozmazuje piksele takze na zewnatrz elementu, wiec przy samej
   krawedzi zdjecie robi sie z powrotem czytelne. Stad `scale(1.15)`
   pod spodem i `overflow: hidden` na opakowaniu — powiekszamy obraz,
   zeby ostre brzegi wyjechaly poza kadr.
   =============================================================== */
.sv-18 {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: inherit;
	background: var(--wp--preset--color--base-2);
}

/*
   Sila rozmycia dobrana na zywo, na prawdziwych zdjeciach z kategorii.
   Przy 18 px ksztalty byly wciaz czytelne — to za malo, zeby powiedziec,
   ze "nie widac". Przy 30 px z odbarwieniem zostaja same plamy koloru.
*/
.sv-18 img {
	filter: blur(30px) saturate(.45) brightness(1.06);
	transform: scale(1.35);
}

/* Znak 18+ w rogu — zeby bylo wiadomo, ze to zaslona, a nie zepsute zdjecie */
.sv-18::after {
	content: "18+";
	position: absolute;
	top: 8px;
	left: 8px;
	padding: .1875rem .4375rem;
	border-radius: 4px;
	background: rgba(17, 20, 24, .82);
	color: #fff;
	font-size: .6875rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .02em;
	pointer-events: none;
}

/* Miniatura w podpowiedziach jest maleńka — tam wystarczy mocniejsze rozmycie */
.sv-podpowiedz__foto.sv-18 img {
	filter: blur(10px) saturate(.45) brightness(1.06);
	transform: scale(1.4);
}
.sv-podpowiedz__foto.sv-18::after {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: .0625rem .25rem;
	font-size: .5625rem;
}

/* ---------------------------------------------------------------
   Plansza na karcie produktu

   To NIE jest nakladka na stronie produktu. Wtyczka `shopuj-dorosli.php`
   konczy zadanie PRZED zbudowaniem szablonu i wypisuje samodzielna
   strone. Powod: opisy z BaseLinkera maja zdjecia wklejone w tresc,
   a tych zadna nakladka nie zaslania w sposob, na ktorym da sie polegac.

   Ta samodzielna strona wczytuje ten arkusz, zeby wygladac jak reszta
   sklepu — wiec ponizsze reguly musza dzialac bez zadnego otoczenia
   z motywu.
   --------------------------------------------------------------- */
.sv-18-brama__panel {
	max-width: 24rem;
	padding: 1.5rem;
	border-radius: 12px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 12px 32px rgba(17, 20, 24, .12);
	text-align: center;
}

.sv-18-brama__znak {
	display: inline-block;
	margin: 0 0 .625rem;
	padding: .25rem .5rem;
	border-radius: 5px;
	background: var(--wp--preset--color--contrast);
	color: #fff;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 800;
	letter-spacing: .04em;
}

.sv-18-brama__tytul {
	margin: 0 0 .25rem;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
}

.sv-18-brama__tresc {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
}

.sv-18-brama__tak {
	display: block;
	padding: .75rem 1rem;
	border-radius: 8px;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}
.sv-18-brama__tak:hover {
	background: var(--wp--preset--color--accent-2);
	color: #fff;
	text-decoration: none;
}

.sv-18-brama__nie {
	display: inline-block;
	margin-top: .625rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-2);
	text-decoration: underline;
}

/* --- pasek nad lista w kategorii dla doroslych --- */
.sv-18-pasek {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: var(--wp--preset--spacing--20);
	padding: .875rem 1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	background: var(--wp--preset--color--base-2);
}

.sv-18-pasek__znak {
	flex-shrink: 0;
	padding: .25rem .5rem;
	border-radius: 5px;
	background: var(--wp--preset--color--contrast);
	color: #fff;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 800;
	letter-spacing: .04em;
}

.sv-18-pasek__tresc {
	flex: 1 1 16rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
}

.sv-18-pasek__tak {
	flex-shrink: 0;
	padding: .5rem .875rem;
	border-radius: 8px;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-decoration: none;
}
.sv-18-pasek__tak:hover {
	background: var(--wp--preset--color--accent-2);
	color: #fff;
	text-decoration: none;
}

/* ---------------------------------------------------------------
   Wyniki wyszukiwania: jedna linijka zamiast produktow

   Ani nazw, ani zdjec — sama liczba. Nazwa produktu jest tekstem
   i zadne rozmycie by jej nie zaslonilo, a fraza w rodzaju "żel"
   wyciagnelaby lubrykant komus, kto o to nie pytal.

   Ramka przerywana, zeby to nie wygladalo jak kolejny kafelek
   z produktem — to jest informacja o czyms, czego tu nie ma.
   --------------------------------------------------------------- */
.sv-18-wyniki {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .625rem;
	margin-top: var(--wp--preset--spacing--40);
	padding: .875rem 1rem;
	border: 1px dashed var(--wp--preset--color--contrast-3);
	border-radius: 12px;
	background: var(--wp--preset--color--base-2);
}

.sv-18-wyniki__znak {
	flex-shrink: 0;
	padding: .1875rem .4375rem;
	border-radius: 4px;
	background: var(--wp--preset--color--contrast);
	color: #fff;
	font-size: .6875rem;
	font-weight: 800;
	letter-spacing: .02em;
}

.sv-18-wyniki__tresc {
	flex: 1 1 14rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
}

.sv-18-wyniki__tak {
	flex-shrink: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

/* Ta sama informacja w podpowiedziach pod polem wyszukiwania */
.sv-podpowiedzi__dorosli {
	display: block;
	padding: .625rem .75rem;
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	color: var(--wp--preset--color--contrast-2);
}
.sv-podpowiedzi__dorosli:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}
.sv-podpowiedzi__dorosli[hidden] { display: none; }

/* Pole i przycisk jako jeden element — tego theme.json nie wyrazi. */
.sv-search .wp-block-search__input {
	height: 46px;
	border: 2px solid var(--wp--preset--color--contrast);
	border-right: 0;
	border-radius: 6px 0 0 6px;
	padding: 0 .9rem;
	font-size: .9375rem;
	font-family: inherit;
	min-width: 0;
}
.sv-search .wp-block-search__input:focus { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }

.sv-search .wp-block-search__button {
	height: 46px;
	margin-left: 0;
	padding: 0 1.5rem;
	border: 2px solid var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
	color: #fff;
	border-radius: 0 6px 6px 0;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
}
.sv-search .wp-block-search__button:hover { background: #000; border-color: #000; }

.sv-header__actions { gap: .625rem; flex-shrink: 0; }

/* Strefa konta — celowo stonowana, zgodnie ze specyfikacja. */
.sv-account { margin: 0; }
.sv-account a {
	color: var(--wp--preset--color--contrast-2);
	padding: .4rem .625rem;
	border-radius: 6px;
	display: inline-block;
}
.sv-account a:hover {
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base-2);
	text-decoration: none;
}

.sv-cart .wp-block-button__link { height: 46px; display: inline-flex; align-items: center; }

/* ---------------------------------------------------------------
   Nawigacja — wariant A: kategorie z lewej, marki z prawej
   --------------------------------------------------------------- */
.sv-nav__row { gap: 1rem; }

.sv-nav__cats .wp-block-navigation { gap: .125rem; }

/*
   Kategorie i marki musza miec IDENTYCZNE podswietlenie.

   Bylo: kategorie `.5rem`, marki `.4375rem` — roznica jednego piksela
   u gory i u dolu, ktora widac dopiero wtedy, gdy oba podswietlenia
   stoja obok siebie w jednym rzedzie. Do tego `inline-block` liczyl
   wysokosc od linii pisma, wiec odstep u gory i u dolu nie byl rowny.

   `inline-flex` + stala wysokosc + `line-height: 1` usuwaja oba problemy:
   podswietlenie jest prostokatem o znanej wysokosci, a nie wypadkowa
   fontu i wypelnienia.
*/
.sv-nav__cats .wp-block-navigation-item__content,
.sv-nav__brands a {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 .8125rem;
	line-height: 1;
	border-radius: 6px;
}
.sv-nav__cats .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--base-2);
	text-decoration: none;
}

.sv-nav__brands { gap: .1875rem; flex-shrink: 0; }
.sv-nav__brands p { margin: 0; }

.sv-nav__brands a {
	color: var(--wp--preset--color--contrast-2);
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	white-space: nowrap;
}
.sv-nav__brands a:hover {
	color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent-3);
	text-decoration: none;
}

/* ---------------------------------------------------------------
   Stopka
   --------------------------------------------------------------- */
/*
   ODSTEP NAD STOPKA — DLACZEGO NIE W ZNACZNIKU.

   Margines siedzial w atrybucie bloku, czyli w stylu wpisanym prosto
   w element. Styl wpisany w element bije KAZDA regule arkusza, wiec
   pasa zaufania nie dalo sie dosunac do stopki inaczej niz przez
   `!important` — a to zawsze jest przyznanie sie, ze cos jest ustawione
   w zlym miejscu.

   Teraz odstep daje arkusz. Dzieki temu wystarczy jedna regula ponizej,
   zeby na stronie glownej pas zaufania przykleil sie do stopki tak jak
   na makiecie, a na pozostalych stronach odstep zostal.
*/
.sv-footer { margin-top: var(--wp--preset--spacing--60); }

/*
   PAS ZAUFANIA I STOPKA TO JEDEN BLOK — BEZ BIALEJ SZPARY.

   Pierwsza proba nie zadzialala i warto wiedziec dlaczego, bo ta pulapka
   wroci przy kazdej czesci szablonu.

   `.sv-zaufanie + .sv-footer` nie pasuje do NICZEGO. WordPress nie wstawia
   czesci szablonu wprost — owija ja wlasnym elementem:

       .wp-site-blocks
         .sv-zaufanie
         footer.wp-block-template-part      <- opakowanie od WordPressa
           .sv-footer                       <- nasza grupa

   Stopka nie jest wiec sasiadem pasa, tylko jego bratanica. A samo
   opakowanie ma jeszcze wlasny odstep 22 px — domyslna przerwe miedzy
   blokami, ta sama, ktora kiedys zjadala nam dol banera.

   Dlatego zerujemy dwie rzeczy: odstep opakowania i margines grupy
   w srodku. Zmierzone w przegladarce na zywo: 80 px -> 22 px -> 0 px.
*/
.sv-zaufanie + * { margin-block-start: 0; }
.sv-zaufanie + * .sv-footer,
.sv-zaufanie + .sv-footer { margin-top: 0; }

.sv-footer a { color: #b9c0c8; }
.sv-footer a:hover { color: #fff; }


.sv-footer__head {
	color: #fff;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 600;
	margin: 0 0 1rem;
}

.sv-footer__list { list-style: none; padding: 0; margin: 0; }
.sv-footer__list li { margin-bottom: .5rem; }

.sv-footer__bottom { gap: 1rem; }
.sv-footer__bottom p { margin: 0; }

.sv-pays { gap: .5rem; }
.sv-pays p {
	margin: 0;
	background: #fff;
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	padding: .3125rem .625rem;
	border-radius: 4px;
}
.sv-pays p.is-inpost { background: var(--wp--preset--color--inpost); }

/* ---------------------------------------------------------------
   Telefon
   --------------------------------------------------------------- */
@media (max-width: 781px) {

	.sv-topbar__msgs p:nth-of-type(n+2) { display: none; }

	.sv-header__row { gap: .875rem; }
	.sv-search { order: 3; flex-basis: 100%; max-width: none; }

	.sv-nav__row  { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.sv-nav__row::-webkit-scrollbar { display: none; }

	/*
	   Przewijana belka ma `overflow`, a `overflow` przycina wszystko, co
	   z niej wystaje — razem z panelem „Więcej". Na czas wyboru kategorii
	   przewijanie wyłączamy: klient i tak nie przewija belki w chwili,
	   gdy czyta rozwiniętą listę.
	*/
	.sv-nav__row:has(.sv-wiecej[open]) { overflow: visible; }

	.sv-nav__brands {
		padding-left: .375rem;
		margin-left: .375rem;
		border-left: 1px solid var(--wp--preset--color--border);
	}
}

/* ---------------------------------------------------------------
   Zabezpieczenie szerokosci naglowka, nawigacji i stopki

   theme.json ustawia contentSize na 760 px — celowo, bo taka szerokosc
   dobrze sie czyta w tresci artykulu. Ale naglowek i stopka to nie tresc:
   maja isc na pelna szerokosc ukladu.

   Szerokosc jest juz ustawiona w czesciach szablonu (contentSize 1280 px).
   Ponizsze reguly to pas bezpieczenstwa na wypadek, gdyby ktos edytowal
   te czesci w edytorze i przypadkiem zresetowal uklad.
   --------------------------------------------------------------- */
.sv-header__row,
.sv-nav__row,
.sv-topbar__msgs,
.sv-footer > .wp-block-columns,
.sv-footer__bottom {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

/* ---------------------------------------------------------------
   Skutek uboczny odchudzania WooCommerce

   WooCommerce renderuje w stopce nakladke mini-koszyka i oznacza ja
   wlasna klasa `--is-hidden`. Ukrycie realizuje jednak dopiero jego
   arkusz `wc-blocks.css`, ktory poza sklepem swiadomie zdejmujemy.
   Efekt: pusty, ale WIDOCZNY blok pod stopka.

   Ponizsza regula respektuje klase, ktora WooCommerce sam ustawil —
   nie nadpisujemy jego logiki, tylko dostarczamy brakujaca deklaracje.
   Na stronach sklepu arkusz Woo laduje sie normalnie i regula jest zbedna,
   ale nieszkodliwa, bo mowi dokladnie to samo.
   --------------------------------------------------------------- */
.wc-block-components-drawer__screen-overlay--is-hidden {
	display: none !important;
}

/* ---------------------------------------------------------------
   Logo

   SVG jest wpisany wprost w czesc szablonu (blok HTML), a nie ladowany
   jako plik. Powody:
   - zero dodatkowego zapytania HTTP; skompresowany wazy okolo kilobajta,
   - `fill="currentColor"` sprawia, ze logo dziedziczy kolor tekstu,
     wiec ta sama grafika dziala na bialym naglowku i ciemnej stopce.
     Nie potrzebujemy drugiego pliku w wersji na ciemne tlo.

   WordPress domyslnie blokuje wgrywanie SVG do biblioteki mediow i slusznie —
   plik SVG moze zawierac skrypt. Tu problem nie istnieje, bo grafika jest
   czescia motywu, a nie tresci wgrywanej przez uzytkownika.
   --------------------------------------------------------------- */
.sv-logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	color: var(--wp--preset--color--contrast);
	line-height: 0;
	margin-right: .5rem;
}
.sv-logo:hover { color: var(--wp--preset--color--accent); text-decoration: none; }

.sv-logo svg {
	/*
	   Wysokosc dobrana do wysokosci pola wyszukiwania i przycisku koszyka (46 px).
	   Logo ma proporcje 3,73:1, wiec przy 26 px mialo tylko 97 px szerokosci
	   i gubilo sie obok 625-pikselowej wyszukiwarki. 34 px daje 127 px szerokosci
	   i okolo 74% wysokosci sasiednich elementow — logo prowadzi wzrok,
	   nie konkurujac z polem wyszukiwania.
	*/
	height: 34px;
	width: auto;
	display: block;
}

.sv-logo--footer { color: #fff; margin-bottom: .875rem; }
.sv-logo--footer:hover { color: #fff; opacity: .8; }
.sv-logo--footer svg { height: 30px; }

@media (max-width: 781px) {
	.sv-logo svg { height: 28px; }
}

/* ===============================================================
   WooCommerce — warstwa wizualna

   Nie nadpisujemy szablonow WooCommerce, tylko ubieramy te, ktore
   generuje sam. Powod: szablony blokowe Woo zmieniaja sie miedzy
   wersjami, a wlasne kopie trzeba by za nimi goniec. CSS przetrwa
   aktualizacje, ktore polamalyby skopiowane szablony.

   Wszystkie uzyte nazwy klas sa sprawdzone na zywym sklepie,
   nie zgadywane z dokumentacji.
   =============================================================== */

/* --- okruszki --- */
.woocommerce-breadcrumb,
.wc-block-breadcrumbs {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
	margin-bottom: var(--wp--preset--spacing--30);
}
.woocommerce-breadcrumb a,
.wc-block-breadcrumbs a { color: var(--wp--preset--color--contrast-2); }
.woocommerce-breadcrumb a:hover,
.wc-block-breadcrumbs a:hover { color: var(--wp--preset--color--accent); }

/* --- pasek nad katalogiem: liczba wynikow + sortowanie --- */
.wc-block-product-results-count,
.wc-block-catalog-sorting {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
	margin: 0;
}
.wc-block-catalog-sorting select {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	padding: .45rem 2rem .45rem .7rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	background-color: #fff;
}

/* ---------------------------------------------------------------
   Karta produktu w katalogu

   Wedlug makiety: ramka, zaokraglenie, zdjecie w kwadracie,
   nazwa przycieta do dwoch linii, cena wyrozniona, przycisk
   na pelna szerokosc.
   --------------------------------------------------------------- */
/*
   `display: grid` deklarujemy SAMI, a nie liczymy na arkusz WooCommerce.

   Na stronie glownej ten arkusz bywa zdjety (odchudzamy front poza sklepem)
   i wtedy siatka przestaje istniec — produkty ustawiaja sie jeden pod drugim
   na cala szerokosc. Wlasna deklaracja sprawia, ze uklad trzyma sie niezaleznie
   od tego, czy arkusz Woo jest na stronie.
*/
.wc-block-product-template {
	display: grid !important;
	gap: var(--wp--preset--spacing--20) !important;
}

.wc-block-product {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	display: flex;
	flex-direction: column;
	padding: 0 0 .875rem;
	transition: border-color .15s, box-shadow .15s;
}
.wc-block-product:hover {
	border-color: var(--wp--preset--color--contrast-3);
	box-shadow: 0 4px 18px rgba(17, 20, 24, .07);
}

.wc-block-product > *:not(.wc-block-components-product-image) {
	padding-inline: .875rem;
}

.wc-block-components-product-image {
	margin: 0 0 .75rem;
	background: var(--wp--preset--color--base-2);
}
.wc-block-components-product-image img {
	aspect-ratio: 1;
	object-fit: contain;
	width: 100%;
	height: auto;
	display: block;
	mix-blend-mode: multiply; /* zdjecia na bialym tle wtapiaja sie w szare pole */
}

.wc-block-product .wp-block-post-title,
.wc-block-product .wc-block-components-product-title {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0;
	margin: 0 0 .5rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.7em;
}
.wc-block-product .wp-block-post-title a { color: var(--wp--preset--color--contrast); }
.wc-block-product .wp-block-post-title a:hover { text-decoration: underline; }

.wc-block-product .wc-block-components-product-price {
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: -.02em;
	margin: auto 0 .625rem;
	display: block;
}
.wc-block-components-product-price del {
	font-size: .8125rem;
	font-weight: 400;
	color: var(--wp--preset--color--contrast-3);
	margin-right: .4rem;
}
.wc-block-components-product-price ins { text-decoration: none; }

.wc-block-components-product-button .wp-block-button__link,
.wc-block-components-product-button__button {
	width: 100%;
	justify-content: center;
	font-size: var(--wp--preset--font-size--small);
	padding: .7rem 1rem;
}

/* ---------------------------------------------------------------
   Karta produktu — strona pojedyncza
   --------------------------------------------------------------- */
.woocommerce-product-gallery {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	overflow: hidden;
	background: var(--wp--preset--color--base-2);
}
.woocommerce-product-gallery__image img { display: block; width: 100%; height: auto; }

.single-product .wp-block-post-title {
	font-size: 1.5rem;
	line-height: 1.28;
	margin-bottom: .625rem;
}

.single-product .wp-block-woocommerce-product-price {
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: -.03em;
	margin: 0 0 var(--wp--preset--spacing--20);
}

/* ---------------------------------------------------------------
   OMNIBUS — najnizsza cena z 30 dni przed obnizka

   Wymog ustawowy, nie ozdoba. UOKiK mowi wprost, ze ta cena nie moze
   byc "zauwazalnie mniej widoczna" niz cena sprzedazy — wiec to nie
   moze byc szary szept 10 px. Stad czytelny rozmiar i kolor tekstu
   drugorzednego, a nie trzeciorzednego.

   Tresc doklada mu-plugin shopuj-omnibus.php, dopinajac akapit
   do bloku z cena. Blok z cena stoi w trzech miejscach (karta produktu,
   kafelki w katalogu, kafelki na stronie glownej) i wszedzie tam
   komunikat jest wymagany.
   --------------------------------------------------------------- */
.sv-omnibus {
	margin: .375rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast-2);
}

.sv-omnibus__kwota { font-weight: 600; }

/* Na karcie produktu cena ma duzy odstep pod soba — komunikat wchodzi w niego */
.single-product .wp-block-woocommerce-product-price:has(+ .sv-omnibus) {
	margin-bottom: .25rem;
}
.sv-omnibus--karta { margin-bottom: var(--wp--preset--spacing--20); }

/* Na kafelku musi sie zmiescic w dwoch linijkach i nie rozpychac siatki */
.sv-omnibus--kafelek {
	font-size: var(--wp--preset--font-size--x-small);
	margin-top: .25rem;
}

.wc-block-add-to-cart-form,
.wp-block-woocommerce-add-to-cart-form { margin-bottom: var(--wp--preset--spacing--30); }

.wc-block-add-to-cart-form .quantity input,
.wp-block-woocommerce-add-to-cart-form .quantity input {
	height: 52px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	padding: 0 .5rem;
	font-family: inherit;
}
.wp-block-woocommerce-add-to-cart-form button[type="submit"] {
	height: 52px;
	font-size: 1rem;
	font-weight: 700;
	padding-inline: 2rem;
}

/* --- opis produktu --- */
.wp-block-woocommerce-product-details { margin-top: var(--wp--preset--spacing--50); }

.wp-block-woocommerce-product-details .woocommerce-Tabs-panel,
.wp-block-woocommerce-product-details .wc-tab {
	max-width: 72ch;
}

/*
   Grafiki w opisie: dostawcy wklejaja je bez zadnych atrybutow rozmiaru.
   Bez tego ograniczenia rozpychaja sie na pelna szerokosc kontenera.
*/
.wp-block-woocommerce-product-details img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin-block: var(--wp--preset--spacing--20);
}

.wp-block-woocommerce-product-details h2 {
	font-size: var(--wp--preset--font-size--x-large);
	margin-top: var(--wp--preset--spacing--40);
}

/* --- zakladki --- */
.woocommerce-tabs ul.tabs {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0 0 0 0;
	display: flex;
	gap: .25rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
	flex-wrap: wrap;
}
.woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce-tabs ul.tabs li a {
	display: block;
	padding: .8rem 1.25rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast-2);
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
}
.woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--contrast);
	border-bottom-color: var(--wp--preset--color--accent);
	text-decoration: none;
}
.woocommerce-tabs ul.tabs li a:hover {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/*
   Telefon: cztery zakladki nie zmieszcza sie w jednej linii. Zamiast
   lamac je na dwa rzedy — przewijamy w poziomie, jak w makiecie.
*/
@media (max-width: 600px) {
	.woocommerce-tabs ul.tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
	.woocommerce-tabs ul.tabs li a { white-space: nowrap; padding-inline: 1rem; }
}

/* Panel zakladki — jedna miara szerokosci tekstu dla wszystkich */
.woocommerce-tabs .panel > h2:empty { display: none; }

.sv-zakladka-tresc { max-width: 72ch; }
.sv-zakladka-tresc h3 {
	font-size: var(--wp--preset--font-size--medium);
	margin: var(--wp--preset--spacing--30) 0 .35rem;
}
.sv-zakladka-tresc h3:first-child { margin-top: 0; }
.sv-zakladka-tresc p { margin: 0 0 var(--wp--preset--spacing--20); }

/* --- dostepnosc --- */
.stock.in-stock { color: var(--wp--preset--color--success); font-weight: 600; }
.stock.out-of-stock { color: var(--wp--preset--color--accent); font-weight: 600; }

/* --- telefon --- */
@media (max-width: 781px) {
	.wc-block-product-template { gap: .75rem !important; }
	.single-product .wp-block-woocommerce-product-price { font-size: 1.625rem; }
}

/* ---------------------------------------------------------------
   Karta produktu — poprawki po ogledzinach
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   Miniatury galerii — wlasny pas ze strzalkami

   HISTORIA TEGO KAWALKA, zeby nikt nie wracal do poprzednich pomyslow:

   1. siatka 5 kolumn  -> przy 12 zdjeciach trzy rzedy, polowa ponizej
                          linii wzroku
   2. pas z paskiem przewijania -> arkusz WooCommerce ma
                          `.woocommerce div.product div.images .flex-control-thumbs
                           { overflow: hidden }`, czyli wyzsza specyficznosc;
                          pas byl obciety, nie przewijalny
   3. to samo z `!important` -> przewijalo sie, ale systemowy pasek
                          przewijania pod miniaturami wyglada fatalnie
                          i nadal nie bylo widac, ktore zdjecie jest wybrane

   TERAZ: pas chwyta sie mysza i przeciaga, pasek systemowy schowany, a stan
   "ta miniatura jest wyswietlona" ma WLASNA klase `sv-mini--wybrana`,
   nadawana skryptem. Dzieki temu nie zalezymy od tego, jak WooCommerce
   stylizuje swoje `.flex-active` — ani od tego, czy zmieni to w kolejnej
   wersji.

   Kluczowe wlasciwosci ustawia rowniez skrypt, bezposrednio na elemencie.
   To ostateczny argument w sporze o specyficznosc: stylu nadanego wprost
   na elemencie nie przebije zadna regula z arkusza.
   --------------------------------------------------------------- */
.woocommerce-product-gallery__wrapper { margin: 0; }

.sv-mini {
	position: relative;
	margin-top: .625rem;
}

.flex-control-thumbs,
.woocommerce-product-gallery .flex-control-nav {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: .5rem;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;

	overflow-x: auto !important;
	overflow-y: hidden !important;
	overscroll-behavior-x: contain;
	cursor: grab;
	user-select: none;

	/* Pasek systemowy znika — od przewijania sa strzalki */
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}
.flex-control-thumbs::-webkit-scrollbar { display: none; }

.flex-control-thumbs li {
	margin: 0 !important;
	flex: 0 0 78px !important;
	width: 78px !important;
	float: none !important;
	position: relative;
}

.flex-control-thumbs img {
	aspect-ratio: 1;
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
	border-radius: 6px;
	border: 1px solid var(--wp--preset--color--border);
	opacity: .55;
	cursor: pointer;
	transition: opacity .15s, border-color .15s;
}
.flex-control-thumbs img:hover { opacity: .85; }

/*
   WYBRANA MINIATURA — to bylo najslabsze miejsce poprzedniej wersji.
   Sama zmiana przezroczystosci to za malo: przy zdjeciach na bialym tle
   roznica jest niezauwazalna. Dlatego pelna ramka w kolorze marki
   i biala obwodka, ktora ja odcina od sasiadow.
*/
.flex-control-thumbs li.sv-mini--wybrana img,
.flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--wp--preset--color--accent);
	border-width: 2px;
	box-shadow: 0 0 0 2px var(--wp--preset--color--base),
	            0 0 0 3px var(--wp--preset--color--accent);
}

/* Kursor mowi wprost: to mozna zlapac i pociagnac */
.flex-control-thumbs.sv-ciagnie { cursor: grabbing; }

@media (max-width: 600px) {
	.flex-control-thumbs li { flex-basis: 64px !important; width: 64px !important; }
}

/*
   Metadane (SKU, kategoria, tagi, marka) NIE sa juz renderowane pod
   przyciskiem — SKU przeniesione pod tytul, reszta usunieta.
   Patrz functions.php, sekcja "Metadane pod tytulem".
   Regula zostaje na wypadek, gdyby ktos wstawil ten blok recznie.
*/
.product_meta {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1.25rem;
}
.product_meta > span { display: block; }

/* Ilosc + przycisk w jednej linii, jak w makiecie */
.wp-block-woocommerce-add-to-cart-form form.cart {
	display: flex;
	gap: .625rem;
	align-items: stretch;
	flex-wrap: wrap;
	margin: 0;
}
.wp-block-woocommerce-add-to-cart-form .quantity { flex-shrink: 0; }
.wp-block-woocommerce-add-to-cart-form button[type="submit"] { flex: 1 1 220px; }

/* ---------------------------------------------------------------
   Naglowek jako trzy pasy

   Szablony blokowe WooCommerce wolaja tylko czesc "header", wiec pasek
   informacyjny i nawigacja musza siedziec w srodku niej — inaczej nie ma
   ich na zadnej stronie sklepu.

   Kazdy z trzech pasow ma TLO na pelna szerokosc okna, a tresc wysrodkowana
   i ograniczona do 1280 px. Dlatego zewnetrzne grupy sa pelnej szerokosci,
   a szerokosc pilnuja wiersze wewnetrzne.
   --------------------------------------------------------------- */
.sv-header { padding: 0 !important; }

.sv-topbar,
.sv-nav {
	width: 100%;
	padding-inline: var(--wp--preset--spacing--20);
}

.sv-topbar { padding-block: .5rem; }

.sv-header__row {
	padding-block: .875rem;
	padding-inline: var(--wp--preset--spacing--20);
}

.sv-nav {
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-block: .25rem;
}

/* wiersze wewnetrzne trzymaja szerokosc ukladu */
.sv-topbar__msgs,
.sv-header__row,
.sv-nav__row {
	max-width: 1280px;
	margin-inline: auto;
	width: 100%;
}

/* ---------------------------------------------------------------
   Karta produktu — proporcje i hierarchia

   Zmierzone przed zmiana: galeria 512 px, kolumna opisu 746 px.
   Odwrotnie niz w makiecie — to zdjecie ma byc bohaterem strony,
   a boks zakupowy zwarta kolumna obok. Dlatego odwracamy proporcje.
   --------------------------------------------------------------- */
.woocommerce-page .wp-block-columns:has(.wp-block-woocommerce-product-image-gallery) {
	gap: var(--wp--preset--spacing--40);
	align-items: flex-start;
}
.woocommerce-page .wp-block-column:has(.wp-block-woocommerce-product-image-gallery) {
	flex: 1 1 56% !important;
	max-width: 720px;
}
.woocommerce-page .wp-block-column:has(.wp-block-woocommerce-add-to-cart-form) {
	flex: 1 1 420px !important;
	max-width: 480px;
}

/* ---------------------------------------------------------------
   Cena — najwazniejsza liczba na stronie

   BLAD, KTORY TU BYL (do 0.9.25)
   ------------------------------
   Regula powiekszajaca cene celowala w `.woocommerce-Price-amount`
   z `!important` — czyli w KAZDA kwote w bloku, takze w te przekreslona.
   Przy produkcie bez promocji nie bylo tego widac, bo kwota jest jedna.
   Po wlaczeniu pierwszej promocji wyszlo, ze stara cena jest rownie duza
   i rownie czarna jak nowa, a kreska przekreslenia — rysowana wedlug
   wlasciwego rozmiaru elementu `del`, czyli 16 px — ladowala nad cyframi
   zamiast przez nie. Wygladalo to jak usterka, bo bylo usterka.

   Regula `.sv-cena del { font-size: 1rem }` istniala od dawna i byla
   poprawna. Przegrywala z `!important` piętro wyzej.

   Teraz rozmiar nadajemy OSOBNO cenie aktualnej i cenie sprzed obnizki,
   a nie wszystkim kwotom naraz.
   --------------------------------------------------------------- */
.woocommerce-page .wp-block-woocommerce-product-price {
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.1;
	color: var(--wp--preset--color--contrast);
	margin-bottom: var(--wp--preset--spacing--20);
}

/* Wiersz ceny: kwota, obok niej stara cena i pigulka oszczednosci */
.woocommerce-page .wp-block-woocommerce-product-price .wc-block-components-product-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .25rem .625rem;
}

/*
   Cena aktualna idzie PIERWSZA, mimo ze WooCommerce wypisuje ja druga
   (`<del>` przed `<ins>`). Kolejnosc z makiety: najpierw to, co klient
   zaplaci, potem informacja, ile bylo wczesniej.
*/
.woocommerce-page .wp-block-woocommerce-product-price ins,
.woocommerce-page .wp-block-woocommerce-product-price > .woocommerce-Price-amount,
.woocommerce-page .wp-block-woocommerce-product-price ins .woocommerce-Price-amount {
	font-size: 2rem !important;
	font-weight: 800;
	letter-spacing: -.03em;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	order: 1;
}

/*
   PRODUKT BEZ PROMOCJI — TA SAMA WIELKOSC CENY.

   Regula wyzej celuje w `ins` (cena po obnizce) i w kwote bedaca
   BEZPOSREDNIM dzieckiem bloku. Przy produkcie bez promocji nie pasowala
   ani jedna, ani druga — bo WooCommerce owija kwote dodatkowa warstwa:

       div.wp-block-woocommerce-product-price
         div.wc-block-components-product-price      <- ta warstwa
           span.woocommerce-Price-amount

   Cena stala wiec w rozmiarze z ustawien bloku (20 px), a nie w naszym
   (32 px). Roznicy nie bylo widac, dopoki nie postawilo sie obok siebie
   produktu w promocji i bez — wtedy ten drugi wyglada na tanszy sposobem,
   ktorego nikt nie planowal.

   Ta regula celuje w kwote bedaca bezposrednim dzieckiem TEJ warstwy —
   czyli wystepuje wylacznie wtedy, gdy nie ma `ins` ani `del`. Ceny
   promocyjnej nie rusza, bo tam kwoty siedza w `ins` i `del`.

   Zawezone do `.single-product`: kafelki w katalogu maja miec cene
   mniejsza i to jest zamierzone.
*/
.single-product .wp-block-woocommerce-product-price .wc-block-components-product-price > .woocommerce-Price-amount {
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.1;
	color: var(--wp--preset--color--contrast);
}

.woocommerce-page .wp-block-woocommerce-product-price del,
.woocommerce-page .wp-block-woocommerce-product-price del .woocommerce-Price-amount {
	font-size: 1rem !important;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast-3);
	order: 2;
}

/* Pigulka "Taniej o …" — doklada ja functions.php do bloku z cena */
.sv-oszczedzasz {
	order: 3;
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.4;
	padding: .25rem .5rem;
	border-radius: 4px;
	white-space: nowrap;
}

/* ---------------------------------------------------------------
   Plakietka promocji

   WooCommerce rysuje na karcie produktu `span.onsale` — stary element
   z klasycznego motywu, ze swoim wygladem: oliwkowe kolo (`#958E09`,
   `border-radius: 100%`) wysuniete poza lewa krawedz galerii
   (`left: -16px`, `top: -6px`). Galeria ma `overflow: hidden`,
   wiec polowa plakietki byla ucinana — klient widzial "omocja!".

   Zmierzone na zywo, nie zgadniete: pozycja -16 px, tlo rgb(149,142,9),
   promien 100%.

   Selektor jest celowo dluzszy niz trzeba — regula WooCommerce
   (`.woocommerce span.onsale`) ma taka sama moc, a o kolejnosci
   arkuszy nie chcemy zakladac niczego.
   --------------------------------------------------------------- */
.single-product .wp-block-woocommerce-product-image-gallery span.onsale,
.woocommerce .wp-block-woocommerce-product-image-gallery span.onsale {
	position: absolute;
	top: 14px;
	left: 14px;
	right: auto;
	bottom: auto;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: .3125rem .6875rem;
	border-radius: 4px;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0;
	text-align: center;
	z-index: 2;
}

/* Ta sama plakietka na kafelkach — tu WooCommerce uzywa juz bloku */
.wc-block-components-product-sale-badge {
	background: var(--wp--preset--color--accent);
	color: #fff;
	border: 0;
	border-radius: 4px;
	padding: .25rem .5rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	line-height: 1.4;
}

/* Przycisk nie musi byc szeroki na pol ekranu */
.wp-block-woocommerce-add-to-cart-form button[type="submit"] { max-width: 340px; }

/* ---------------------------------------------------------------
   Blok dostawy i zwrotow

   Dokladany po formularzu zakupu filtrem w functions.php.
   Tresc jest statyczna i celowo ogolna — konkretne terminy doreczenia
   pojawia sie dopiero, gdy skonfigurujemy wysylke (etap 6).
   Lepiej nie obiecywac daty, ktorej system jeszcze nie zna.
   --------------------------------------------------------------- */
.sv-dostawa {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 1rem 1.125rem;
	margin-top: var(--wp--preset--spacing--30);
	display: flex;
	flex-direction: column;
	gap: .875rem;
}
.sv-dostawa__poz {
	display: flex;
	gap: .75rem;
	align-items: flex-start;
	font-size: var(--wp--preset--font-size--small);
}
.sv-dostawa__ico {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	background: var(--wp--preset--color--base-2);
	border: 1px solid var(--wp--preset--color--border);
}
.sv-dostawa__ico svg { width: 16px; height: 16px; stroke: var(--wp--preset--color--contrast-2); fill: none; stroke-width: 2; }
.sv-dostawa__ico--inpost { background: var(--wp--preset--color--inpost); border-color: var(--wp--preset--color--inpost); }
.sv-dostawa__ico--inpost svg { stroke: var(--wp--preset--color--contrast); }
.sv-dostawa b { display: block; font-weight: 600; }
.sv-dostawa span { color: var(--wp--preset--color--contrast-2); }

/* ---------------------------------------------------------------
   Edytor witryny

   Arkusz jest wczytywany takze w edytorze (add_editor_style), ale edytor
   nie ma naszych pasow o pelnej szerokosci okna ani kontekstu strony.
   Ponizsze reguly pilnuja, zeby podglad nie rozjezdzal sie wizualnie.
   --------------------------------------------------------------- */
.editor-styles-wrapper .sv-logo svg { height: 34px; width: auto; }
.editor-styles-wrapper .sv-logo--footer svg { height: 30px; }
.editor-styles-wrapper .sv-logo { color: var(--wp--preset--color--contrast); }
.editor-styles-wrapper .sv-logo--footer { color: #fff; }

/* ---------------------------------------------------------------
   WooCommerce sam dokłada do nawigacji swoje bloki

   Do bloku nawigacji WooCommerce wstawia z automatu "Konto klienta"
   (ludzik) oraz "Mini-koszyk" (koszyk z licznikiem). Nie prosilismy o nie
   i sa duplikatem tego, co mamy juz w naglowku po prawej stronie.

   Efekt uboczny byl taki, ze na roznych podstronach pojawialy sie w roznej
   kolejnosci i z innym wygladem — bo licznik mini-koszyka zmienia szerokosc
   elementu w zaleznosci od zawartosci koszyka.

   Ukrywamy je w nawigacji. Nie usuwamy ich calkiem z instalacji:
   mini-koszyk z licznikiem jest w planie na etap 4 i wtedy swiadomie
   wstawimy go w naglowku, po zmierzeniu, ile kosztuje.
   --------------------------------------------------------------- */
/*
   Mini-koszyk zostaje SCHOWANY, ale nie usuniety — i to jest celowe.

   Jego wyglad nie pasuje do sklepu, ale liczba, ktora w sobie trzyma,
   jest zawsze aktualna: blok sam sie odswieza po dodaniu produktu.
   Nasz przycisk "Koszyk" te liczbe od niego przepisuje (functions.php,
   sekcja "Licznik przy koszyku"). Usuniecie bloku z naglowka wylaczy
   licznik — wtedy skrypt awaryjnie zapyta sklep sam.

   `visibility: hidden` zamiast `display: none` nie jest tu potrzebne:
   blok i tak pracuje, bo jego dane zyja w JavaScripcie, nie w ukladzie.
*/
.sv-nav .wp-block-woocommerce-customer-account,
.sv-nav .wp-block-woocommerce-mini-cart {
	display: none !important;
}

/* --- licznik przy przycisku "Koszyk" --- */
.sv-cart .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}

.sv-cart__ile {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 .3125rem;
	border-radius: 100px;
	background: #fff;
	color: var(--wp--preset--color--accent);
	font-size: .6875rem;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.sv-cart__ile[hidden] { display: none; }

/* ---------------------------------------------------------------
   Katalog — siatka i wyrownanie

   WooCommerce renderuje siatke jako `columns-3`, czyli karty po 416 px
   szerokosci i 414 px samego zdjecia. Przy takim rozmiarze na ekranie
   miesci sie dziewiec produktow zamiast dwudziestu — klient przewija
   zamiast porownywac.

   Makieta zaklada 5 kolumn na duzym ekranie. Nadpisujemy siatke w CSS
   zamiast zmieniac szablon WooCommerce — ta sama zasada co wszedzie:
   ubieramy, nie forkujemy.
   --------------------------------------------------------------- */
.wc-block-product-template.columns-3,
.wc-block-product-template {
	grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

@media (max-width: 1200px) {
	.wc-block-product-template.columns-3,
	.wc-block-product-template { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
	.wc-block-product-template.columns-3,
	.wc-block-product-template { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
	.wc-block-product-template.columns-3,
	.wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/*
   WooCommerce srodkuje nazwe i cene. W makiecie sa do lewej —
   przy kilku kartach obok siebie wyrownana krawedz czyta sie szybciej,
   bo oko wraca zawsze w to samo miejsce.
*/
.wc-block-product .has-text-align-center,
.wc-block-product .wp-block-post-title,
.wc-block-product .wc-block-components-product-price,
.wc-block-product .wc-block-components-product-rating {
	text-align: left !important;
}

.wc-block-product .wp-block-button,
.wc-block-product .wp-block-button__link,
.wc-block-product .wc-block-components-product-button__button {
	width: 100%;
	text-align: center;
	justify-content: center;
}

/* Nazwa produktu — nazwy z BaseLinkera sa DLUGIE i pisane wersalikami */
.wc-block-product .wp-block-post-title {
	text-transform: none;
	font-size: .8125rem;
	line-height: 1.4;
}

/* ---------------------------------------------------------------
   Galeria produktu — dopasowanie do kolumny

   WooCommerce nakłada na blok galerii wlasny `max-width: 512px`, wiec
   zdjecie nie wypelnialo kolumny, mimo ze kolumna miala 720 px.

   WAZNE: zdjecia z BaseLinkera maja tu okolo 600 px w oryginale.
   Rozciaganie ich na 720 px dawaloby miekki obraz, dlatego zamiast
   powiekszac galerie na sile, ZWEZAMY kolumne do 600 px i centrujemy
   caly uklad. Bialy margines po bokach wyglada wtedy na zamierzony,
   a nie na niedorobiony.

   Gdy zdjecia zrodlowe beda wieksze, wystarczy podniesc te wartosc.
   --------------------------------------------------------------- */
/*
   USUNIETE w 0.4.1 — trzecia partia regul z czasow, gdy nie mielismy
   wlasnego szablonu produktu. Narzucaly szerokosci kolumnom przez
   `flex: ... !important` i `max-width`, celujac w kolumny po zawartosci
   (`:has(galeria)`, `:has(formularz)`).

   Od 0.3.0 szerokosci sa w szablonie i w sekcji "Karta produktu".
   Stare regule mialy WYZSZA specyficznosc niz nowe (trzy klasy kontra
   jedna), wiec po cichu wygrywaly z ustawieniami dla telefonu.
   To ten sam blad co z przyklejaniem: przy zmianie architektury trzeba
   USUWAC stare regule, a nie tylko dopisywac nowe.
*/

.wp-block-woocommerce-product-image-gallery,
.woocommerce-product-gallery {
	max-width: 100% !important;
	width: 100% !important;
	/* Ramka tnie to, co wystaje. To wystarczy — patrz ostrzezenie nizej. */
	overflow: hidden;
}

/*
   NIE DOPISUJ TU `max-width` ANI `width` DO `__wrapper`.

   To jest tasma karuzeli. FlexSlider wylicza jej szerokosc jako
   (liczba zdjec x szerokosc ramki) i wpisuje ja bezposrednio w element.
   Ograniczenie jej do 100% sciska wszystkie slajdy w jedno miejsce
   i widac wylacznie pierwsze zdjecie — reszta galerii przestaje dzialac.

   Byla tu taka regula w 0.4.1 i dokladnie to zepsula. Usunieta w 0.4.5.
*/
.woocommerce-product-gallery__image img { width: 100%; height: auto; }

/* Dostepnosc — czytelniejsza etykieta zamiast szarego drobiazgu */
.woocommerce-page .stock.in-stock {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: var(--wp--preset--spacing--20);
}
.woocommerce-page .stock.in-stock::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--success);
	flex-shrink: 0;
}

/* Krotki opis nad przyciskiem — mniejszy, zeby nie konkurowal z cena */
.woocommerce-product-details__short-description {
	font-size: var(--wp--preset--font-size--small);
	color: #2a2f36;
	margin-bottom: var(--wp--preset--spacing--20);
}

/* ---------------------------------------------------------------
   Cena w ramce + przyklejona kolumna zakupowa
   --------------------------------------------------------------- */
.sv-cena {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 1.125rem 1.25rem;
	margin-bottom: var(--wp--preset--spacing--20);
}
.sv-cena .wp-block-woocommerce-product-price { margin: 0 !important; }
.sv-cena ins { text-decoration: none; }

/*
   Komunikat Omnibus siedzi w tej samej ramce co cena — jak `price-note`
   w makiecie. To nie przypis pod stroną, tylko czesc informacji o cenie.
*/
.sv-cena .sv-omnibus { margin: .5rem 0 0; }

/*
   USUNIETE w 0.3.1 — regula z czasow, gdy nie mielismy wlasnego szablonu.
   Przyklejala CALA kolumne. Teraz robi to `.sv-kup` w sekcji "Karta produktu";
   dwie konkurujace regule przyklejania na tym samym elemencie to proszenie
   sie o klopoty.
*/

/* ---------------------------------------------------------------
   Krotki opis znika z kolumny zakupowej

   W makiecie kolumna obok zdjecia zawiera wylacznie to, co prowadzi
   do zakupu: nazwe, cene, dostepnosc, przycisk i warunki dostawy.
   Opis ma swoje miejsce nizej, w zakladce — i tam zostaje.

   Blok tekstu miedzy cena a przyciskiem rozbija te sciezke i odsuwa
   przycisk ponizej linii zgiecia ekranu.
   --------------------------------------------------------------- */
.single-product .woocommerce-product-details__short-description,
.woocommerce-page .wp-block-post-excerpt:has(~ .wp-block-woocommerce-add-to-cart-form) {
	display: none;
}

/* Dostepnosc — zielona kropka i konkret, zgodnie z makieta */
.woocommerce-page .stock {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--success);
	margin-bottom: var(--wp--preset--spacing--20);
}
.woocommerce-page .stock::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}
.woocommerce-page .stock.out-of-stock { color: var(--wp--preset--color--accent); }

/* ---------------------------------------------------------------
   Specyfikacja — tabela zamiast listy punktowanej

   Sekcja jest generowana przy wyswietlaniu (inc/spec.php). Jesli
   opis nie ma rozpoznawalnej specyfikacji, tych klas po prostu
   nie ma w HTML-u i nic sie nie dzieje.
   --------------------------------------------------------------- */
.sv-spec {
	margin-top: var(--wp--preset--spacing--40);
}

/* W zakladce nazwa sekcji jest juz na przycisku — odstep u gory zbedny */
.sv-spec--zakladka {
	margin-top: 0;
	max-width: 72ch;
}

.sv-spec__tytul {
	font-size: var(--wp--preset--font-size--x-large);
	letter-spacing: -.02em;
	margin: 0 0 var(--wp--preset--spacing--20);
}

.sv-spec__tabela {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
	border: 0;
}

.sv-spec__tabela th,
.sv-spec__tabela td {
	padding: .7rem 0;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	vertical-align: top;
	text-align: left;
}

/* Etykieta stonowana, wartosc wyrazna — parametr ma sie czytac od prawej */
.sv-spec__tabela th {
	width: 200px;
	font-weight: 400;
	color: var(--wp--preset--color--contrast-2);
	padding-right: 1.5rem;
}

.sv-spec__tabela td { font-weight: 500; }

/* Pozycja bez pary "etykieta: wartosc" — zdanie na cala szerokosc */
.sv-spec__pelny { font-weight: 400; }

/* Telefon: 200 px etykiety to za duzo, ukladamy w dwa wiersze */
@media (max-width: 600px) {
	.sv-spec__tabela th,
	.sv-spec__tabela td {
		display: block;
		width: auto;
		padding-right: 0;
	}
	.sv-spec__tabela th {
		border-bottom: 0;
		padding-bottom: .1rem;
		font-size: var(--wp--preset--font-size--x-small);
	}
	.sv-spec__tabela td { padding-top: 0; }
}

/* ---------------------------------------------------------------
   Wiersz metadanych pod tytulem — ocena i SKU

   Jeden dyskretny wiersz zamiast bloku doklejonego na dole kolumny.
   Kategoria i marka tu nie wracaja: kategoria jest w okruszkach,
   a marka ma sens dopiero wtedy, gdy produkty maja realne marki.
   --------------------------------------------------------------- */
.sv-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .35rem .875rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
	margin: -.25rem 0 var(--wp--preset--spacing--30);
}

.sv-meta__ocena {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	color: inherit;
}
.sv-meta__ocena:hover { color: var(--wp--preset--color--contrast); text-decoration: none; }

/* Dwie warstwy gwiazdek: szare tlo i przycieta warstwa w kolorze marki */
.sv-meta__gwiazdki {
	position: relative;
	display: inline-block;
	width: 80px;
	height: 16px;
	flex-shrink: 0;
}
.sv-meta__gwiazdki svg { display: block; width: 80px; height: 16px; }

.sv-meta__puste svg { fill: var(--wp--preset--color--border); }
.sv-meta__pelne {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.sv-meta__pelne svg { fill: var(--wp--preset--color--accent); }

/* SKU to informacja serwisowa — najciszsza rzecz w tym wierszu */
.sv-meta__sku,
.sv-meta__ean { color: var(--wp--preset--color--contrast-3); }

/*
   Kod kreskowy stoi obok SKU i wygląda tak samo — bo pełni tę samą rolę:
   to numer do przepisania, nie treść do czytania. Cyfry tabelaryczne, żeby
   trzynastocyfrowy numer dało się porównać wzrokiem z innym.
*/
.sv-meta__ean { font-variant-numeric: tabular-nums; }

/* ===============================================================
   KARTA PRODUKTU — wlasny szablon (templates/single-product.html)

   Uklad: lewa kolumna to zdjecia + zakladki, prawa to blok zakupowy,
   ktory jedzie razem ze strona. Dzieki temu prawa strona nie jest
   pusta po zjechaniu do opisu, a formularz koszyka istnieje na
   stronie DOKLADNIE RAZ — bez duplikatu nie ma konfliktu z InPost Pay
   ani ze skryptem wariantow.
   =============================================================== */
.sv-produkt { align-items: stretch; }
.sv-produkt__lewa { min-width: 0; }

/*
   Blok zakupowy przyklejony do gory okna.

   max-height + overflow to zabezpieczenie na niskie ekrany: gdy pudelko
   jest wyzsze niz okno, przewija sie w srodku zamiast chowac przycisk
   "Do koszyka" poza widokiem. Na wysokich ekranach regula nic nie robi.
*/
/*
   Ile miejsca trzeba zostawic u gory ekranu.

   Zalogowany uzytkownik ma przyklejona belke administratora WordPressa
   (32 px, na malym ekranie 46 px). Element przyklejony na `top: 1rem`
   wjezdza pod nia i chowa poczatek tytulu. Klient tej belki nie widzi,
   ale MY pracujemy zalogowani — wiec i tak trzeba to obsluzyc.
*/
:root { --sv-gora: 1rem; }
html:has(body.admin-bar) { --sv-gora: calc(32px + 1rem); }

@media screen and (max-width: 782px) {
	html:has(body.admin-bar) { --sv-gora: calc(46px + 1rem); }
}

/* Kotwice (np. klikniecie w ocene -> zakladka Opinie) tez omijaja belke */
html { scroll-padding-top: var(--sv-gora); }

.sv-kup {
	position: sticky;
	top: var(--sv-gora);
	max-height: calc(100vh - var(--sv-gora) - 1rem);
	overflow-y: auto;
	scrollbar-width: none;
}
.sv-kup::-webkit-scrollbar { display: none; }

/* Zakladki w lewej kolumnie — odstep od galerii */
.sv-produkt__lewa .wp-block-woocommerce-product-details {
	margin-top: var(--wp--preset--spacing--50);
}

/* ---------------------------------------------------------------
   Telefon i tablet: jedna kolumna

   display:contents rozpuszcza lewa kolumne, zeby jej dzieci staly sie
   elementami tej samej siatki. Bez tego nie da sie wstawic bloku
   zakupowego MIEDZY zdjecia a zakladki — a wlasnie taka kolejnosc
   ma sens na malym ekranie.
   --------------------------------------------------------------- */
@media (max-width: 1024px) {

	/*
	   `!important` nie jest tu fanaberia. Rdzen WordPressa ma regule
	   `@media (min-width: 782px) { .wp-block-columns { flex-wrap: nowrap !important } }`
	   — bez rownie mocnej deklaracji kolumny NIE zawijaja sie miedzy
	   782 a 1024 px i galeria, zakladki oraz blok zakupowy laduja
	   obok siebie, kazde po jednej trzeciej szerokosci.
	*/
	.sv-produkt { flex-wrap: wrap !important; }
	.sv-produkt__lewa { display: contents; }

	.sv-produkt > *,
	.sv-produkt__lewa > * {
		flex-basis: 100% !important;
		width: 100%;

		/*
		   min-width: 0 jest KONIECZNE. `display: contents` sprawia, ze
		   dzieci lewej kolumny staja sie elementami siatki flex, ale nie
		   dziedzicza `min-width: 0`, ktore rdzen daje `.wp-block-column`.
		   Domyslne `min-width: auto` pozwala szerokiej tabeli albo
		   dlugiemu slowu rozepchnac element ponad szerokosc ekranu —
		   i wtedy cala strona przewija sie na boki.
		*/
		min-width: 0;
	}

	.sv-produkt .wp-block-woocommerce-product-image-gallery { order: 1; }
	.sv-produkt__prawa { order: 2; }
	.sv-produkt .wp-block-woocommerce-product-details { order: 3; }

	/* Przyklejanie nie ma sensu bez drugiej kolumny */
	.sv-kup {
		position: static;
		max-height: none;
		overflow: visible;
	}
}

/* ---------------------------------------------------------------
   Pasek zakupowy na dole ekranu — tylko maly ekran

   To NIE jest drugi przycisk. Pasek nie ma wlasnego formularza:
   klikniecie przekazuje klikniecie do prawdziwego przycisku wyzej.
   Jeden formularz na stronie, zero dublowanych pol.
   --------------------------------------------------------------- */
.sv-pasek { display: none; }

@media (max-width: 1024px) {

	.sv-pasek {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		align-items: center;
		gap: .75rem;
		padding: .625rem 1rem;
		background: var(--wp--preset--color--base);
		border-top: 1px solid var(--wp--preset--color--border);
		box-shadow: 0 -4px 16px rgba(17, 20, 24, .08);

		/* Schowany: zjechany w dol I niedostepny dla klawiatury */
		transform: translateY(110%);
		visibility: hidden;
		transition: transform .18s ease, visibility .18s;
	}

	.sv-pasek--widoczny {
		transform: none;
		visibility: visible;
	}

	.sv-pasek__cena {
		display: flex;
		flex-direction: column;
		line-height: 1.2;
		flex-shrink: 0;
	}
	.sv-pasek__cena b { font-size: 1.1875rem; letter-spacing: -.02em; }
	.sv-pasek__cena span {
		font-size: var(--wp--preset--font-size--x-small);
		color: var(--wp--preset--color--success);
		font-weight: 600;
	}

	.sv-pasek__btn {
		flex: 1;
		height: 46px;
		border: 0;
		border-radius: 8px;
		background: var(--wp--preset--color--accent);
		color: #fff;
		font-size: .9375rem;
		font-weight: 700;
		font-family: inherit;
		cursor: pointer;
	}
	.sv-pasek__btn:hover { background: var(--wp--preset--color--accent-2, #a83309); }

	/* Zeby pasek nie zaslanial konca stopki */
	body.single-product { padding-bottom: 4.5rem; }
}

@media (prefers-reduced-motion: reduce) {
	.sv-pasek { transition: none; }
}

/* ---------------------------------------------------------------
   Tresc z BaseLinkera nie moze rozpychac strony

   Opisy przychodza z zewnatrz i moga zawierac cokolwiek: tabele
   o stalej szerokosci, obrazki z atrybutem width, osadzone filmy.
   Nie mamy wplywu na to, co ktos wklei w BaseLinkerze, wiec strona
   musi byc na to odporna sama z siebie.
   --------------------------------------------------------------- */
.woocommerce-Tabs-panel img,
.woocommerce-Tabs-panel video,
.woocommerce-Tabs-panel iframe,
.woocommerce-Tabs-panel table {
	max-width: 100%;
	height: auto;
}

.woocommerce-Tabs-panel table { display: block; overflow-x: auto; }

/* Nasza wlasna tabela specyfikacji zostaje normalna tabela */
.woocommerce-Tabs-panel table.sv-spec__tabela {
	display: table;
	overflow: visible;
	table-layout: fixed;
}

.woocommerce-Tabs-panel { overflow-wrap: break-word; }

/* ===============================================================
   ZAKLADKA "OPINIE"

   WooCommerce oddaje tu goly formularz komentarza WordPressa.
   Zmierzone na zywo, nie na oko: pole tekstowe ma
   `border: 0.8px solid rgb(118,118,118)`, `border-radius: 0`,
   `padding: 2px` i `font-family: monospace` — czyli wyglad, ktory
   przegladarka daje polu, o ktore nikt sie nie upomnial.

   Ubieramy to w ten sam jezyk co kasa: etykieta nad polem, biale pole
   w zaokraglonej ramce, wyrazny stan skupienia. Zadnego wlasnego
   formularza — to jest formularz WordPressa i ma nim zostac, bo przez
   niego ida moderacja, powiadomienia i ochrona przed spamem.
   =============================================================== */

/* Naglowek "Opinie" dubluje nazwe zakladki stojaca tuz nad nim */
#reviews .woocommerce-Reviews-title { display: none; }

/* Brak opinii to nie powod do bialej dziury */
#reviews .woocommerce-noreviews {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: .875rem 1rem;
	border-radius: 10px;
	background: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
}

/* --- lista opinii --- */
#reviews .commentlist {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0;
	display: grid;
	gap: .75rem;
}
#reviews .commentlist > li { margin: 0; }

#reviews .comment_container {
	display: flex;
	gap: .875rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	padding: 1rem 1.125rem;
}
#reviews .comment_container img.avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex-shrink: 0;
	margin: 0;
}
#reviews .comment-text {
	flex: 1 1 auto;
	min-width: 0;
}
#reviews .comment-text .meta {
	margin: .25rem 0 .5rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-3);
}
#reviews .woocommerce-review__author {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}
/* "zweryfikowany wlasciciel" to najmocniejszy sygnal w calej opinii */
#reviews .woocommerce-review__verified {
	font-style: normal;
	font-weight: 600;
	color: var(--wp--preset--color--success);
}
#reviews .comment-text .description p:last-child { margin-bottom: 0; }
#reviews .star-rating { color: var(--wp--preset--color--accent); }

/* --- formularz --- */
#review_form_wrapper {
	background: var(--wp--preset--color--base-2);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	padding: 1.25rem;
}

#reviews .comment-reply-title {
	display: block;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast);
	margin-bottom: .25rem;
}

#reviews .comment-notes {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
}

#reviews .comment-form { margin: 0; }
#reviews .comment-form > p { margin: 0 0 .875rem; }
#reviews .comment-form > p:last-child { margin-bottom: 0; }

#reviews .comment-form label {
	display: block;
	margin-bottom: .375rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}
#reviews .comment-form .required { color: var(--wp--preset--color--accent); }

#reviews .comment-form input[type="text"],
#reviews .comment-form input[type="email"],
#reviews .comment-form input[type="url"],
#reviews .comment-form textarea {
	width: 100%;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	padding: .625rem .75rem;
}

#reviews .comment-form textarea {
	display: block;
	min-height: 130px;
	resize: vertical;
}

#reviews .comment-form input[type="text"]:focus,
#reviews .comment-form input[type="email"]:focus,
#reviews .comment-form input[type="url"]:focus,
#reviews .comment-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px var(--wp--preset--color--accent-3);
}

/* Imie i e-mail obok siebie — widzi je tylko niezalogowany */
@media (min-width: 640px) {
	#reviews .comment-form-author,
	#reviews .comment-form-email {
		display: inline-block;
		width: calc(50% - .4375rem);
		vertical-align: top;
	}
	#reviews .comment-form-author { margin-right: .75rem; }
}

/* Ocena gwiazdkami — powiekszone, bo to jest pole do klikniecia */
#reviews .comment-form-rating { margin-bottom: 1rem; }
#reviews p.stars { margin: 0; }
#reviews p.stars a {
	width: 30px;
	height: 30px;
	font-size: 26px;
	line-height: 30px;
	margin-right: 2px;
}

/* Zgoda na zapamietanie danych to pole wyboru, nie akapit */
#reviews .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
}
#reviews .comment-form-cookies-consent input {
	margin-top: .2rem;
	accent-color: var(--wp--preset--color--accent);
	flex-shrink: 0;
}
#reviews .comment-form-cookies-consent label {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	color: var(--wp--preset--color--contrast-2);
}

#reviews .form-submit { margin-top: 1.125rem !important; }

/* ===============================================================
   KATALOG — naglowek kategorii i podkategorie
   =============================================================== */
.sv-podkat {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: var(--wp--preset--spacing--20);
}

.sv-podkat__poz {
	display: inline-block;
	padding: .5rem .875rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 100px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	white-space: nowrap;
}
.sv-podkat__poz:hover {
	border-color: var(--wp--preset--color--contrast-3);
	background: var(--wp--preset--color--base-2);
	text-decoration: none;
}
.sv-podkat__poz span { color: var(--wp--preset--color--contrast-3); }

/* Telefon: pigulki przewijaja sie w poziomie zamiast lamac na pol ekranu */
@media (max-width: 600px) {
	.sv-podkat {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin-inline: 0;
	}
	.sv-podkat::-webkit-scrollbar { display: none; }
}

/* ===============================================================
   KATALOG — uklad z filtrami z boku (wariant B)
   =============================================================== */
.sv-kat-head { margin-bottom: var(--wp--preset--spacing--30); }

.sv-kat-head .wp-block-query-title {
	font-size: var(--wp--preset--font-size--xx-large);
	letter-spacing: -.025em;
	margin: 0 0 .5rem;
}

/*
   Opis kategorii idzie NA DOL, pod produkty — patrz makieta-katalog.html.
   Na gorze zostaje tylko pierwszy akapit, i to skrocony. Klient wchodzi
   po towar, nie po tekst; wyszukiwarka przeczyta calosc nizej.
*/
.sv-kat-lead {
	color: var(--wp--preset--color--contrast-2);
	max-width: 80ch;
	margin: 0;
}
.sv-kat-lead > *:nth-child(n+2) { display: none; }

.sv-kat { align-items: stretch; }

/* Filtry jada z klientem — przy dlugiej liscie produktow to ma znaczenie */
.sv-filtry {
	position: sticky;
	top: var(--sv-gora);
	max-height: calc(100vh - var(--sv-gora) - 1rem);
	overflow-y: auto;
	scrollbar-width: none;
}
.sv-filtry::-webkit-scrollbar { display: none; }

/* Pasek nad siatka: liczba wynikow z lewej, sortowanie z prawej */
.sv-kat-pasek {
	padding-bottom: var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--border);
	gap: 1rem;
}
.sv-kat-pasek p { margin: 0; }

.sv-kat-pasek select {
	height: 38px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	padding: 0 .625rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* Wyniki po stronach (poza sklepem) — karty zamiast ciagu akapitow */
.sv-wyniki {
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	display: grid;
	gap: .75rem;
}
.sv-wyniki > li {
	margin: 0;
	padding: 1rem 1.125rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	background: var(--wp--preset--color--base);
}
.sv-wyniki .wp-block-post-title { margin: 0 0 .25rem; }
.sv-wyniki .wp-block-post-excerpt { margin: 0; }
.sv-wyniki .wp-block-post-excerpt__excerpt {
	color: var(--wp--preset--color--contrast-2);
	margin: 0;
}
.sv-wyniki .wp-block-post-excerpt__more-text { display: none; }

/* ---------------------------------------------------------------
   Wyniki wyszukiwania: odnosniki do stron sklepu

   Pod siatka produktow, dyskretnie. To nie jest druga lista wynikow,
   tylko zdanie "szukales chyba tego" dla kogos, kto wpisal "reklamacja"
   w pole przeznaczone do szukania towaru.
   --------------------------------------------------------------- */
.sv-inne-wyniki {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--border);
}
.sv-inne-wyniki__tytul {
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: 600;
	color: var(--wp--preset--color--contrast-2);
	margin: 0 0 .625rem;
}
.sv-inne-wyniki__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.sv-inne-wyniki__lista a {
	display: inline-block;
	padding: .375rem .75rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 100px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
}
.sv-inne-wyniki__lista a:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

/* Pusty wynik — komunikat zamiast bialej dziury */
.sv-brak {
	padding: var(--wp--preset--spacing--50) 0;
	text-align: center;
	color: var(--wp--preset--color--contrast-2);
}
.sv-brak p { margin: 0 0 .25rem; }

/* Stronicowanie */
.wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--50);
	gap: .375rem;
}
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	min-width: 38px;
	height: 38px;
	display: inline-grid;
	place-items: center;
	padding-inline: .5rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}
.wp-block-query-pagination a:hover {
	border-color: var(--wp--preset--color--contrast-3);
	text-decoration: none;
}
.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/*
   W ukladzie z filtrami siatka ma 4 kolumny, nie 5 — bok zabiera 260 px.
   Nadpisujemy tu regule ogolna, ktora dotyczy katalogow bez boku.
*/
.sv-kat__tresc .wc-block-product-template {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media (max-width: 1200px) {
	.sv-kat__tresc .wc-block-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

/* ---------------------------------------------------------------
   Katalog na tablecie i telefonie

   Ta sama pulapka co na karcie produktu: rdzen wymusza `nowrap`
   powyzej 782 px, wiec zawijanie trzeba zadeklarowac rownie mocno.
   --------------------------------------------------------------- */
@media (max-width: 1024px) {

	.sv-kat { flex-wrap: wrap !important; }

	.sv-kat > * {
		flex-basis: 100% !important;
		width: 100%;
		min-width: 0;
	}

	/* Filtry nad produktami, bez przyklejania */
	.sv-kat__bok { order: 1; }
	.sv-kat__tresc { order: 2; }

	.sv-filtry {
		position: static;
		max-height: none;
		overflow: visible;
	}

	.sv-kat__tresc .wc-block-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 640px) {
	.sv-kat__tresc .wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	.sv-kat-head .wp-block-query-title { font-size: var(--wp--preset--font-size--x-large); }
}

/* ===============================================================
   OSTATNIA LINIA OBRONY PRZED ROZPYCHANIEM STRONY

   Pomiar na telefonie (411 px) pokazal strone szeroka na 430 px.
   Winowajcy byli trzej i kazdy innego rodzaju:

   1. `img.zoomImg` — 1377 px. Tworzy go skrypt powiekszania zdjecia
      WooCommerce, poza naszym kodem i poza naszym HTML-em.
   2. Pasek zakladek — ostatnia zakladka konczyla sie na 430 px.
   3. Przyciski "Dodaj do koszyka" w produktach polecanych.

   Punkty 2 i 3 naprawiamy nizej u zrodla. Punktu 1 naprawic u zrodla
   nie mozemy — dlatego strona dostaje twarde ciecie.

   DLACZEGO `clip`, A NIE `hidden`:
   zmierzone w przegladarce, oba warianty kasuja przewijanie w bok,
   ale `overflow-x: hidden` ROZWALA `position: sticky` — czyli
   przyklejona kolumne zakupowa i przyklejone filtry w katalogu.
   `clip` nie tworzy kontenera przewijania i zostawia je w spokoju.
   =============================================================== */
html,
body {
	overflow-x: clip;
}

/* --- 2. Pasek zakladek ---
   Selektor nie moze zalezec od klasy opakowania, bo ta rozni sie
   miedzy wersjami WooCommerce. Celujemy w sama liste. */
ul.wc-tabs,
ul.tabs.wc-tabs,
.wp-block-woocommerce-product-details ul.tabs {
	max-width: 100%;
	min-width: 0;
}

@media (max-width: 780px) {
	ul.wc-tabs,
	ul.tabs.wc-tabs,
	.wp-block-woocommerce-product-details ul.tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	ul.wc-tabs::-webkit-scrollbar,
	.wp-block-woocommerce-product-details ul.tabs::-webkit-scrollbar { display: none; }

	ul.wc-tabs li,
	.wp-block-woocommerce-product-details ul.tabs li { flex-shrink: 0; }
}

/* --- 3. Kafelki produktow ---
   Element siatki bez `min-width: 0` rozpycha sie do szerokosci swojej
   najszerszej zawartosci. Przycisk z dluga etykieta wystarczy. */
.wc-block-product-template > *,
.wc-block-product {
	min-width: 0;
	max-width: 100%;
}

.wc-block-components-product-button,
.wc-block-components-product-button .wp-block-button__link {
	max-width: 100%;
	min-width: 0;
}

/* --- 1. Powiekszenie zdjecia ---
   Skrypt WooCommerce wstawia kopie zdjecia w pelnej rozdzielczosci
   jako warstwe nad galeria. Ramka i tak tnie, ale niech nie liczy
   sie do szerokosci strony. */
img.zoomImg {
	/*
	   Powiekszenie wstawia kopie zdjecia w pelnej rozdzielczosci.
	   `max-width: none` jest tu potrzebne, zeby powiekszenie mialo sens.
	   Za szerokosc strony odpowiada juz `overflow-x: clip` wyzej,
	   wiec nic wiecej nie trzeba — i nie wolno ruszac zachowania myszy,
	   bo od niego zalezy dzialanie lupy.
	*/
	max-width: none;
}

/* ===============================================================
   KATALOG — ubranie filtrow i kafelkow

   Bloki filtrow WooCommerce przychodza z wlasnym, surowym wygladem.
   Nie forkujemy ich — ubieramy w to, co jest w makiecie.
   =============================================================== */

/* --- sekcja filtra: kafelek, nie kreska ---

   Wczesniej kazda sekcja byla oddzielona samym `border-bottom`. Wygladalo
   to jak lista pozycji, a nie jak narzedzie — i nie pasowalo do reszty
   sklepu, gdzie wszystko siedzi w bialych kafelkach na szarym tle
   (koszyk, zamowienie, kafelki produktow).

   Teraz kazdy filtr to osobny kafelek: biale tlo, ramka, zaokraglenie.
   Ten sam jezyk co koszyk i kasa.
*/
.sv-filtr {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	padding: .875rem 1rem 1rem;
	margin-bottom: .75rem;
}
.sv-filtr:last-child { margin-bottom: 0; }

.sv-filtr__tytul {
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: 600;
	color: var(--wp--preset--color--contrast-2);
	margin: 0 0 .625rem;
}

/*
   Sekcja "wybrane filtry" nie jest kafelkiem — to pasek pigulek nad reszta.
   Kafelek wokol pigulek robil ramke w ramce.
*/
.sv-filtr--aktywne {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
}

/* ---------------------------------------------------------------
   Wybrane filtry — pigulki

   Nazwy klas NIE SA tu zgadywane. Pochodza z podejrzenia kodu, ktory
   WooCommerce faktycznie wysyla:

     ul.wc-block-product-filter-removable-chips__items
       li.wc-block-product-filter-removable-chips__item
         span...__label
         button...__remove > svg...__remove-icon

   WAZNE: WooCommerce buduje te pigulki DOPIERO W PRZEGLADARCE, z szablonu
   `<template>`. Po stronie serwera ich nie ma — i dlatego nie wolno chowac
   tej sekcji na podstawie tego, czy ma jakis tekst.

   Sam blok chowa sie tez sam, atrybutem `hidden`. My tylko usuwamy wtedy
   ramke i odstep opakowania.

   WLASNEJ pigulki ceny tu NIE MA i nie ma jej dodawac: WooCommerce czyta
   `min_price` i `max_price` z adresu takze wtedy, gdy wyslal je nasz
   formularz, i robi z nich pigulke sam. Dodanie swojej = cena dwa razy.
   --------------------------------------------------------------- */
.sv-filtr--aktywne {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
}

.sv-filtr--aktywne:has(.wp-block-woocommerce-product-filter-active[hidden]) {
	display: none;
}

.wc-block-product-filter-removable-chips__items {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
   Pigulka wypelniona, nie obrysowana.

   `!important` przy tle i ramce jest tu potrzebne: WooCommerce nadaje swoim
   pigulkom wlasna ramke i przezroczyste tlo, a jego arkusz laduje sie
   z wyzszym priorytetem. Bez tego wychodzily obrysowane prostokaty zamiast
   wypelnionych pigulek.
*/
.wc-block-product-filter-removable-chips__item {
	display: inline-flex;
	align-items: center;
	gap: .1875rem;
	margin: 0;
	padding: .25rem .375rem .25rem .625rem;
	border: 0 !important;
	border-radius: 100px !important;
	background: var(--wp--preset--color--accent-3) !important;
	color: var(--wp--preset--color--accent) !important;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}
.wc-block-product-filter-removable-chips__item:hover {
	background: var(--wp--preset--color--accent) !important;
	color: #fff !important;
}

.wc-block-product-filter-removable-chips__remove {
	display: inline-flex;
	align-items: center;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.wc-block-product-filter-removable-chips__remove-icon {
	width: 16px;
	height: 16px;
	fill: currentColor;
	opacity: .65;
}
.wc-block-product-filter-removable-chips__remove:hover .wc-block-product-filter-removable-chips__remove-icon { opacity: 1; }

/* "Wyczysc wszystkie" — nie pigulka, tylko dyskretny odnosnik */
.wp-block-woocommerce-product-filter-clear-button button,
.wp-block-woocommerce-product-filter-clear-button a {
	background: none;
	border: 0;
	padding: 0;
	color: var(--wp--preset--color--contrast-2);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	text-decoration: underline;
	cursor: pointer;
}
.wp-block-woocommerce-product-filter-clear-button button:hover {
	color: var(--wp--preset--color--accent);
}

/* --- cena: suwak + dwa pola --- */
.sv-filtry input[type="text"],
.sv-filtry input[type="number"] {
	width: 100%;
	min-width: 0;
	height: 36px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 7px;
	padding: 0 .5rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* Pola ceny wychodzily poza kolumne — musza sie dzielic szerokoscia */
.sv-filtry .wp-block-woocommerce-product-filter-price > * {
	max-width: 100%;
	min-width: 0;
}

.sv-filtry input[type="range"] { accent-color: var(--wp--preset--color--accent); }

/* --- lista z polami wyboru --- */
.sv-filtry label {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .25rem 0;
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
}
.sv-filtry input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--wp--preset--color--accent);
	flex-shrink: 0;
}

/* ---------------------------------------------------------------
   Kategorie — drzewo, nie plaska lista

   Kategoria glowna jest odnosnikiem (mozna w nia wejsc), a strzalka
   obok niej tylko rozwija podkategorie. To dwie rozne czynnosci i maja
   dwa rozne miejsca do kliknięcia — inaczej klient chcacy zajrzec do
   "Dom" trafialby w rozwijanie.

   Strzalke doklada skrypt. Bez skryptu drzewo jest w calosci otwarte,
   wiec `--z-przyciskiem` steruje tylko odstepem na strzalke — nie ma
   sytuacji, w ktorej podkategorie sa nieosiagalne.
   --------------------------------------------------------------- */
.sv-kf {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.sv-kf__grupa { position: relative; }

.sv-kf__rodzic,
.sv-kf__dziecko {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: .3125rem .5rem;
	border-radius: 7px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.35;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.sv-kf__rodzic { font-weight: 600; }
.sv-kf__dziecko { color: var(--wp--preset--color--contrast-2); }

/* Miejsce na strzalke, zeby dluga nazwa jej nie podchodzila pod spod */
.sv-kf__grupa--z-przyciskiem > .sv-kf__rodzic { padding-right: 2.125rem; }

.sv-kf__rodzic:hover,
.sv-kf__dziecko:hover {
	background: var(--wp--preset--color--base-2);
	text-decoration: none;
}

.sv-kf__rodzic--wybrana,
.sv-kf__dziecko--wybrana,
.sv-kf__rodzic--wybrana:hover,
.sv-kf__dziecko--wybrana:hover {
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

/* Licznik: cyfry o stalej szerokosci, zeby kolumna po prawej nie drgala */
.sv-kf__ile {
	flex-shrink: 0;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--contrast-3);
}
.sv-kf__rodzic--wybrana .sv-kf__ile,
.sv-kf__dziecko--wybrana .sv-kf__ile {
	color: inherit;
	opacity: .7;
}

.sv-kf__nazwa {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Strzalka rozwijania */
.sv-kf__przelacznik {
	position: absolute;
	top: 1px;
	right: 0;
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 7px;
	background: none;
	color: var(--wp--preset--color--contrast-3);
	cursor: pointer;
}
.sv-kf__przelacznik:hover {
	background: var(--wp--preset--color--base-3);
	color: var(--wp--preset--color--contrast);
}
.sv-kf__przelacznik svg { transition: transform .18s ease; }
.sv-kf__grupa--otwarta > .sv-kf__przelacznik svg { transform: rotate(180deg); }

/* Podkategorie — wciecie z pionowa kreska prowadzaca */
.sv-kf__dzieci {
	list-style: none;
	margin: 2px 0 .375rem .75rem;
	padding: 0 0 0 .5rem;
	border-left: 1px solid var(--wp--preset--color--border);
}
.sv-kf__dzieci li { margin: 0; }
.sv-kf__grupa:last-child .sv-kf__dzieci { margin-bottom: 0; }

.sv-kf__wyczysc {
	margin-top: .625rem;
	padding: 0 .5rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-2);
	text-decoration: underline;
}
.sv-kf__wyczysc:hover { color: var(--wp--preset--color--accent); }

/* --- kafelek produktu: proporcje z makiety --- */
.wc-block-product img {
	aspect-ratio: 1;
	object-fit: contain;
	width: 100%;
	height: auto;
	background: var(--wp--preset--color--base-2);
}

/*
   Nazwa produktu zajmuje stala wysokosc — bez tego kafelki maja rozne
   wysokosci i cena z przyciskiem skacza w pionie od kolumny do kolumny.
*/
.wc-block-product .wp-block-post-title {
	font-weight: 500;
	line-height: 1.35;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Cena to nie naglowek — w kafelku ma byc czytelna, nie krzykliwa */
.wc-block-product .wc-block-components-product-price {
	font-size: 1.0625rem !important;
	font-weight: 700;
	letter-spacing: -.02em;
	margin-top: auto;
}
.wc-block-product .wc-block-components-product-price del {
	font-size: .8125rem;
	font-weight: 400;
	color: var(--wp--preset--color--contrast-3);
	margin-right: .375rem;
}
.wc-block-product .wc-block-components-product-price ins { text-decoration: none; }

/* Przycisk na cala szerokosc kafelka, jak w makiecie */
.wc-block-product .wc-block-components-product-button { width: 100%; }
.wc-block-product .wc-block-components-product-button .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
	padding: .625rem 1rem;
	border-radius: 8px;
	font-weight: 600;
}

/* ---------------------------------------------------------------
   Kafelek produktu — poprawka po wlasnym szablonie katalogu

   PROBLEM: od 0.4.0 zawartosc kafelka siedzi w grupie z szablonu,
   a nie bezposrednio w kafelku. Ta grupa ma z bloku ustawione
   `min-height: 100%` i uklad flex bez zawijania — czyli dzieci moga
   sie SCISKAC ponizej swojej naturalnej wysokosci. W polaczeniu
   z `overflow: hidden` na ramce kafelka konczylo sie to ucinaniem
   dolu ceny.

   Naprawa jest w dwoch krokach: grupa przestaje wymuszac wysokosc,
   a jej dzieci przestaja sie kurczyc.
   --------------------------------------------------------------- */
.wc-block-product > .wp-block-group {
	min-height: 0 !important;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: .5rem;

	/* Odstepy boczne przenosza sie tutaj — kafelek ich juz nie daje */
	padding: 0 .875rem;
}

/* Stara regula dawala odstep zewnetrznemu opakowaniu. Teraz zbedna. */
.wc-block-product > .wp-block-group.wp-block-group { padding-inline: .875rem; }

.wc-block-product > .wp-block-group > * {
	/*
	   TO JEST WLASCIWA NAPRAWA UCINANYCH KONCOWEK.
	   Element flex domyslnie moze sie skurczyc ponizej swojej tresci.
	   Cena i przycisk maja zajmowac tyle, ile potrzebuja — ani mniej.
	*/
	flex-shrink: 0;
	margin: 0;
	padding-inline: 0;
	min-width: 0;
}

/* Zdjecie wychodzi na pelna szerokosc kafelka, mimo odstepu grupy */
.wc-block-product > .wp-block-group > .wc-block-components-product-image {
	margin: 0 -.875rem .5rem;
}

/* Cena dociskana do dolu, przycisk pod nia — kolejnosc jak w makiecie */
.wc-block-product > .wp-block-group > .wc-block-components-product-price {
	margin-top: auto;
	padding-top: .25rem;
	line-height: 1.3;
}

/* Pusta ocena nie ma zostawiac dziury */
.wc-block-product .wc-block-components-product-rating:empty { display: none; }

/* ---------------------------------------------------------------
   Galeria: staly kwadrat zamiast wysokosci zaleznej od zdjecia

   Zdjecia od dostawcow maja rozne proporcje — jedno pionowe, drugie
   panoramiczne. Bez ramki o stalych proporcjach cala kolumna skacze
   przy kazdej podmianie miniatury, a przy zdjeciu pionowym karta
   rozciaga sie na pol ekranu.

   `object-fit: contain` NIE PRZYCINA zdjecia — dopasowuje je do
   kwadratu i dokleja tlo po bokach. Dla sklepu to wlasciwy wybor:
   przyciecie potrafi obciac kabel, kolor albo napis na opakowaniu.
   Kto chce zobaczyc szczegol, klika i dostaje pelny rozmiar.

   UWAGA: proporcje ustawiamy na ZDJECIU, nie na elemencie listy.
   Element listy nalezy do tasmy karuzeli i FlexSlider liczy jego
   szerokosc sam — patrz ostrzezenie przy `__wrapper` wyzej.
   --------------------------------------------------------------- */
.woocommerce-product-gallery__image > a { display: block; }

.woocommerce-product-gallery__image img {
	aspect-ratio: 1;
	object-fit: contain;
	width: 100%;
	height: auto;
	display: block;
}

/* Kursor mowi, ze zdjecie mozna kliknac */
.woocommerce-product-gallery__image > a { cursor: zoom-in; }

/* ---------------------------------------------------------------
   Przycisk powiekszenia

   Pierwsza wersja rysowala lupe z dwoch pseudoelementow — kolka
   i kreski. Wychodzila z tego paletka do ping-ponga, bo kreska
   pod katem 45 stopni nigdy nie trafiala tam, gdzie powinna.

   Teraz ikona jest gotowym SVG w tle. Rysunek jest jeden, wiec nie
   ma czego skladac, a przy okazji da sie go podejrzec i poprawic.
   --------------------------------------------------------------- */
.woocommerce-product-gallery { position: relative; }

.woocommerce-product-gallery__trigger {
	position: absolute;
	top: .75rem;
	right: .75rem;
	z-index: 5;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--base);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111418' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3Cpath d='M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 2px 8px rgba(17, 20, 24, .1);

	/* Tekst "Powieksz" zostaje dla czytnikow ekranu, ale go nie widac */
	font-size: 0;
	line-height: 0;
	color: transparent;
	overflow: hidden;
	text-indent: -999px;
}
.woocommerce-product-gallery__trigger:hover {
	border-color: var(--wp--preset--color--contrast-3);
	box-shadow: 0 4px 14px rgba(17, 20, 24, .16);
}

/* ---------------------------------------------------------------
   Strzalki galerii

   Wlaczone w functions.php przez filtr WooCommerce. Na komputerze
   to jedyny sposob na przewiniecie zdjecia bez celowania w miniatury.
   --------------------------------------------------------------- */
.woocommerce-product-gallery .flex-direction-nav {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-product-gallery .flex-direction-nav a {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--base);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 2px 8px rgba(17, 20, 24, .1);

	font-size: 0;
	color: transparent;
	overflow: hidden;
	text-indent: -999px;

	opacity: 0;
	transition: opacity .15s, box-shadow .15s;
}

/* Strzalki pojawiaja sie po najechaniu — na dotyku i tak dziala palec */
.woocommerce-product-gallery:hover .flex-direction-nav a,
.woocommerce-product-gallery .flex-direction-nav a:focus-visible { opacity: 1; }

.woocommerce-product-gallery .flex-prev {
	left: .75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111418' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
}
.woocommerce-product-gallery .flex-next {
	right: .75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111418' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}

/* Pierwsze i ostatnie zdjecie — strzalka bez sensu, wiec wyszarzona */
.woocommerce-product-gallery .flex-direction-nav .flex-disabled {
	opacity: 0 !important;
	pointer-events: none;
}

/* Na dotyku strzalki sa zawsze widoczne — nie ma czego "najechac" */
@media (hover: none) {
	.woocommerce-product-gallery .flex-direction-nav a { opacity: 1; }
}

/* ===============================================================
   STRONA GLOWNA
   =============================================================== */

/* --- baner --- */
.sv-hero { gap: 1rem !important; align-items: stretch; }

/*
   TLO BANERA — SPOKOJNE I NIERUCHOME

   Bylo tu plaskie czarne tlo z pomaranczowa kula w prawym gornym rogu.
   Kula ciagnela wzrok na siebie, konkurujac z produktem i z przyciskiem,
   a przy rotacji produktow wygladalo to jak podswietlana reklama.

   Teraz tlo stoi i nic w nim nie miga. Ciepla nuta zostala, ale nisko
   po prawej — pod produktem, dokladnie tam gdzie i tak pada cien.
   Rusza sie WYLACZNIE to, co niesie tresc: produkt, odliczanie,
   plakietka i satelity.

   Promien 26 px zamiast 10 px: w srodku siedzi mocno zaokraglona plyta
   z produktem i przy 10 px wygladalo to jak dwie osobne decyzje.
*/
.sv-hero__glowny {
	position: relative;
	overflow: hidden;
	border-radius: 26px;
	padding: 3rem;
	min-height: 380px;
	color: #fff;
	display: grid;
	grid-template-columns: 1fr 320px;
	align-items: center;
	gap: 1.5rem;
	background:
		/* 1. Wygaszenie wzoru pod kolumna z tekstem — nagłówek ma być
		      czytelny, a nie „na tle w kropki". */
		linear-gradient(90deg, rgba(13, 16, 21, .90) 0%, rgba(13, 16, 21, .62) 32%, rgba(13, 16, 21, 0) 60%),
		/* 2. Cztery koła w jednym kafelku, każde w innym odcieniu. Rytm
		      bierze się z powtarzania kafelka, nie ze stu znaczników w HTML-u. */
		radial-gradient(circle 34px at 25% 25%, rgba(255, 255, 255, .038) 99%, transparent 100%),
		radial-gradient(circle 34px at 75% 25%, rgba(255, 255, 255, .056) 99%, transparent 100%),
		radial-gradient(circle 34px at 25% 75%, rgba(201, 64, 11, .095) 99%, transparent 100%),
		radial-gradient(circle 34px at 75% 75%, rgba(140, 165, 200, .075) 99%, transparent 100%),
		/* 3. Poświaty i baza — bez zmian. */
		radial-gradient(680px 460px at 72% 88%, rgba(201, 64, 11, .20), transparent 64%),
		radial-gradient(560px 320px at 4% -10%, rgba(120, 140, 170, .16), transparent 58%),
		linear-gradient(150deg, #0d1015 0%, #151b22 58%, #1c232b 100%);
	background-size:
		auto,
		172px 172px, 172px 172px, 172px 172px, 172px 172px,
		auto, auto, auto;
}

/*
   FALA — JEDYNY RUCH W TLE.

   Ukośny pas jaśniejszego światła wędruje przez koła i przez chwilę
   podnosi ich odcień. Stąd „przejścia między odcieniami", o które prosił
   wspólnik — bez animowania stu elementów.

   Rusza się wyłącznie `transform`, więc przeglądarka nie przerysowuje
   niczego poza warstwą kompozycji. Kosztuje tyle, co nic.
*/
.sv-hero__glowny::before {
	content: "";
	position: absolute;
	inset: -30%;
	pointer-events: none;
	background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .045) 50%, transparent 62%);
	animation: sv-fala 18s linear infinite;
}

@keyframes sv-fala {
	from { transform: translate3d(-42%, 0, 0); }
	to   { transform: translate3d(42%, 0, 0); }
}

/*
   Gdyby sceny z produktami jednak nie bylo (wylaczona wtyczka, pusty
   magazyn), panel wraca do jednej kolumny. Bez tego zostaje po prawej
   pusta kolumna 320 px, czyli dziura — dokladnie to, co Damian
   zobaczyl przy pierwszym wgraniu.
*/
.sv-hero__glowny:not(:has(.sv-hero__scena)) { grid-template-columns: 1fr; }

/* Winieta — zbiera kadr do srodka. Nieruchoma. */
.sv-hero__glowny::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(120% 100% at 50% 50%, transparent 52%, rgba(0, 0, 0, .34) 100%);
}

.sv-hero__glowny > * { position: relative; z-index: 1; }
.sv-hero__tresc > *:first-child { margin-top: 0; }

/*
   TEN SAM ODSTEP-DUCH CO PRZY KAFLACH.

   WordPress doklada blokom gorny margines (1,375rem = 22 px) jako globalny
   odstep miedzy blokami. Scena z produktem dostawala go jako drugi element
   w panelu — i przez to caly stosik (plyta, cena, kropki) siedzial 22 px
   nizej, niz powinien.

   Zmierzone przed poprawka: 70 px zapasu nad plyta, 48 px pod nia. Produkt
   ponizej srodka, metka z nazwa kategorii przycieta o 6 px, a kropki
   w calosci poza ramka.

   To drugi raz w tym pliku — poprzednio to samo zrobilo kaflom obok banera
   i tez wygladalo na "za duze marginesy z nieznanego powodu".
*/
.sv-hero__glowny > * { margin-block: 0 !important; }

.sv-hero__kicker {
	display: inline-block;
	align-self: flex-start;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: .3125rem .625rem;
	border-radius: 4px;
	margin: 0 0 1rem;
}

.sv-hero__tytul {
	margin: 0 0 .75rem;
	font-size: 2.5rem;
	line-height: 1.12;
	letter-spacing: -.025em;
	color: #fff;
}

.sv-hero__opis {
	margin: 0 0 1.625rem;
	color: #c6ccd3;
	max-width: 42ch;
}

.sv-hero__akcja { align-self: flex-start; }

/* ---------------------------------------------------------------
   SCENA Z PRODUKTAMI

   JEDNA RAMKA, NIE DWIE
   Zdjecia produktow maja BIALE TLO (tak przychodza z BaseLinkera).
   Gdyby plyta pod spodem byla polprzezroczysta, w srodku zaokraglonego
   pudelka siedzialby bialy kwadrat — dwie ramki, jedna zaokraglona,
   druga kanciasta. Dlatego plyta JEST biala: tlo zdjecia zlewa sie z nia
   w calosc i widac dokladnie jedna ramke, w tym samym jezyku co biale
   kafelki w reszcie sklepu.

   Poswiata dookola to nie druga krawedz, tylko rozmyty cien.
   --------------------------------------------------------------- */
.sv-hero__scena {
	position: relative;
	display: grid;
	place-items: center;
}

/*
   KARUZELA JEST WYZSZA NIZ PLYTA — I TAK MA BYC.

   Pod plyta wisza jeszcze cena z kategoria i kropki. Wczesniej byly
   podwieszone ujemnym `bottom` POZA pudelkiem karuzeli, wiec pudelko
   o nich nie wiedzialo: przegladarka nie rezerwowala na nie miejsca
   i przy `overflow: hidden` panelu po prostu je przycinala.

   Teraz pudelko ma wysokosc calego stosiku (plyta 224 + ogon 124),
   plyta siedzi w jego gornej czesci, a cena i kropki w dolnej.
   Wszystko jest w srodku, wiec wysrodkowanie w pionie dziala samo.
*/
.sv-hero__karuzela {
	position: relative;
	width: 224px;
	height: 348px;
}

.sv-hero__slajd {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: start center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px) scale(.96);
	transition: opacity .55s ease, transform .55s ease, visibility 0s linear .55s;
	text-decoration: none;
}
.sv-hero__slajd--jest {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .55s ease, transform .55s ease;
}
.sv-hero__slajd:hover { text-decoration: none; }

.sv-hero__plyta {
	position: relative;
	width: 224px;
	height: 224px;
	display: grid;
	place-items: center;
	border-radius: 34px;
	background: #fff;
	box-shadow: 0 26px 54px rgba(0, 0, 0, .46), 0 0 0 12px rgba(255, 255, 255, .06);
}
.sv-hero__plyta img {
	width: 78%;
	height: 78%;
	object-fit: contain;
}

/*
   Odliczanie do nastepnego produktu.
   Przy zaokraglonym kwadracie okragly pierscien wygladalby jak pomylka,
   wiec czas pokazuje cienki pasek pod plyta. Pierscien zostaje w kodzie
   na wypadek powrotu do ksztaltu okraglego.
*/

.sv-hero__czas {
	position: absolute;
	left: 14%;
	right: 14%;
	bottom: -16px;
	height: 3px;
	border-radius: 3px;
	background: rgba(255, 255, 255, .14);
	overflow: hidden;
}
.sv-hero__czas i {
	display: block;
	height: 100%;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
}
.sv-hero__slajd--jest .sv-hero__czas i { animation: sv-odliczanie 5s linear forwards; }
@keyframes sv-odliczanie { to { transform: scaleX(1); } }

/* Plakietka — tresc wyliczona z danych, nigdy wpisana recznie */
.sv-hero__plakietka {
	position: absolute;
	top: 10px;
	left: -8px;
	z-index: 3;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-size: .6875rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: .3125rem .625rem;
	border-radius: 100px;
	box-shadow: 0 8px 18px rgba(0, 0, 0, .32);
	opacity: 0;
	transform: translateY(-6px) scale(.9);
	transition: opacity .4s ease .25s, transform .4s ease .25s;
}
.sv-hero__slajd--jest .sv-hero__plakietka { opacity: 1; transform: none; }
.sv-hero__plakietka--nowosc { background: var(--wp--preset--color--success); }
.sv-hero__plakietka--polecane { background: #2f3945; }

/* Satelity — dwa fakty przy samym produkcie, wlatuja po kolei */
.sv-hero__slajd--jest 
/*
   Cena i kropki licza sie teraz od DOLU KARUZELI, a nie od dolu plyty —
   dlatego wartosci sa dodatnie. Siedza w ogonie pudelka, wiec nic ich
   nie przycina.
*/
.sv-hero__metka {
	position: absolute;
	left: 50%;
	bottom: 40px;
	width: 100%;
	transform: translateX(-50%);
	text-align: center;
	color: #fff;
}

/*
   NAJPIERW CO, POTEM ILE.

   Nazwa stoi nad cena, bo przy produkcie, ktorego klient nie zna,
   sama liczba niczego nie mowi. Dwa wiersze to gorna granica: trzeci
   rozpychalby karuzele i zjadal kropki pod spodem. Nie skracamy nazwy
   w PHP — przycina ja przegladarka, wiec pelna nazwa zostaje w kodzie
   strony i dociera do czytnikow ekranu.
*/
.sv-hero__metka > span {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: .8125rem;
	line-height: 1.35;
	font-weight: 500;
	color: #b6bdc6;
}
.sv-hero__metka b {
	display: block;
	margin-top: .25rem;
	font-size: 1.125rem;
	font-weight: 800;
	letter-spacing: -.02em;
	white-space: nowrap;
}

.sv-hero__kropki {
	position: absolute;
	left: 50%;
	bottom: 8px;
	transform: translateX(-50%);
	display: flex;
	gap: .4375rem;
}
.sv-hero__kropka {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .3);
	cursor: pointer;
	transition: width .25s ease, background .25s ease;
}
.sv-hero__kropka--jest { background: #fff; width: 20px; border-radius: 4px; }

/* Wylaczone animacje w systemie — zero ruchu, pierwszy produkt zostaje */
@media (prefers-reduced-motion: reduce) {
	.sv-hero__glowny::before,
	.sv-hero__slajd,
	.sv-hero__plakietka,
		.sv-hero__slajd--jest .sv-hero__czas i { animation: none; transform: scaleX(1); }
}

/* --- trzy kafle obok banera --- */
.sv-hero__kafle {
	display: flex !important;
	flex-direction: column;
	gap: 1rem;
}

/*
   Odstep miedzy kaflami liczy sie DWA RAZY, jesli sie tego nie zatrzyma.

   Raz z `gap` powyzej (1rem), drugi raz z globalnego odstepu miedzy blokami,
   ktory WordPress dokłada jako margines gornemu sasiadowi (1,375rem).
   Razem 2,375rem zamiast 1rem — i stad "marginesy duzo wieksze niz w makiecie".
*/
.sv-hero__kafle > * { margin-block: 0 !important; }

.sv-kafel {
	position: relative;
	flex: 1;
	border: 1px solid var(--wp--preset--color--border);
	/* Ten sam promien co baner obok — inaczej rzad kafli wyglada jak z innego zestawu */
	border-radius: 26px;
	padding: 1.25rem 1.375rem;
	background: var(--wp--preset--color--base-2);
	display: flex;
	flex-direction: column;
	justify-content: center;
	transition: border-color .15s;
}
.sv-kafel:hover { border-color: var(--wp--preset--color--accent); }

.sv-kafel p { margin: 0; }

.sv-kafel__nad {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-3);
	font-weight: 600;
	margin-bottom: .3125rem !important;
}

.sv-kafel__tytul {
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -.01em;
}
.sv-kafel__tytul a { color: var(--wp--preset--color--contrast); }
.sv-kafel__tytul a:hover { text-decoration: none; }

/*
   Caly kafel jest klikalny, ale w kodzie nie ma zagniezdzonego odnosnika.
   Rozciagnieta warstwa nad kafelkiem robi to samo, a tresc zostaje
   normalnymi blokami — czyli da sie ja edytowac w panelu.
*/
.sv-kafel__tytul a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 26px;
}

.sv-kafel__wiecej {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	margin-top: .1875rem !important;
}

/* --- sekcje z produktami --- */
.sv-sekcja { margin-top: var(--wp--preset--spacing--50); }

.sv-sekcja__glowa {
	margin-bottom: var(--wp--preset--spacing--30);
	gap: 1rem;
}
.sv-sekcja__glowa h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	letter-spacing: -.02em;
}
.sv-sekcja__link { margin: 0; }
.sv-sekcja__link a {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
}

/* --- pas zaufania --- */
.sv-zaufanie {
	margin-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base-2);
	padding-block: 1.625rem;
}

.sv-zaufanie__rzad { gap: 1.375rem; }

.sv-zaufanie__poz {
	margin: 0;
	display: flex;
	flex-direction: column;
	line-height: 1.35;
	padding-left: 3.125rem;
	position: relative;
	min-height: 38px;
	justify-content: center;
	flex: 1 1 200px;
}
.sv-zaufanie__poz strong { font-size: var(--wp--preset--font-size--small); }
.sv-zaufanie__poz span {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-2);
}

/* Ikony jako tlo — zero dodatkowych zapytan, zero znacznikow w tresci */
.sv-zaufanie__poz::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 19px 19px;
}

.sv-zaufanie__poz--inpost::before {
	background-color: var(--wp--preset--color--inpost);
	border-color: var(--wp--preset--color--inpost);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111418' stroke-width='2'%3E%3Crect x='3' y='7' width='18' height='12' rx='2'/%3E%3Cpath d='M3 11h18'/%3E%3C/svg%3E");
}
.sv-zaufanie__poz--platnosc::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9400B' stroke-width='2'%3E%3Cpath d='M12 3l8 3v6c0 5-3.4 8-8 9-4.6-1-8-4-8-9V6z'/%3E%3C/svg%3E");
}
.sv-zaufanie__poz--zwrot::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9400B' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpath d='M3 4v5h5'/%3E%3C/svg%3E");
}
.sv-zaufanie__poz--polska::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9400B' stroke-width='2'%3E%3Cpath d='M4 20V9l8-5 8 5v11'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3C/svg%3E");
}

/* --- tablet i telefon --- */
@media (max-width: 1080px) {
	.sv-hero { flex-wrap: wrap !important; }
	.sv-hero > * { flex-basis: 100% !important; width: 100%; min-width: 0; }

	/*
	   Na wezszym ekranie scena schodzi pod tekst i sie kurczy.
	   Metka i kropki wisza POD plyta, wiec panel musi miec pod nia zapas —
	   bez tego cena wychodzila poza zaokraglona krawedz.
	*/
	.sv-hero__glowny {
		grid-template-columns: 1fr;
		padding: 2.25rem 1.75rem;
		min-height: 0;
	}
	/* Ogon karuzeli jest juz w jej wysokosci, wiec zapasu pod panelem nie trzeba */
	.sv-hero__scena { margin-top: 1.25rem; }

	/* Kafle ida w rzad pod banerem */
	.sv-hero__kafle { flex-direction: row; }
	.sv-kafel { flex: 1 1 0; }
}

@media (max-width: 640px) {
	.sv-hero__karuzela { width: 200px; height: 324px; }
	.sv-hero__plyta { width: 200px; height: 200px; }
		}

@media (max-width: 780px) {
	.sv-hero__glowny {
		padding: 2rem 1.5rem;
		min-height: 0;
		/* Na telefonie tekst leży NAD produktem, nie obok — więc wzór
		   wygaszamy od góry, a nie od lewej. */
		background-image:
			linear-gradient(180deg, rgba(13, 16, 21, .90) 0%, rgba(13, 16, 21, .55) 38%, rgba(13, 16, 21, 0) 62%),
			radial-gradient(circle 26px at 25% 25%, rgba(255, 255, 255, .038) 99%, transparent 100%),
			radial-gradient(circle 26px at 75% 25%, rgba(255, 255, 255, .056) 99%, transparent 100%),
			radial-gradient(circle 26px at 25% 75%, rgba(201, 64, 11, .095) 99%, transparent 100%),
			radial-gradient(circle 26px at 75% 75%, rgba(140, 165, 200, .075) 99%, transparent 100%),
			radial-gradient(680px 460px at 72% 88%, rgba(201, 64, 11, .20), transparent 64%),
			radial-gradient(560px 320px at 4% -10%, rgba(120, 140, 170, .16), transparent 58%),
			linear-gradient(150deg, #0d1015 0%, #151b22 58%, #1c232b 100%);
		background-size: auto, 132px 132px, 132px 132px, 132px 132px, 132px 132px, auto, auto, auto;
	}
	.sv-hero__tytul { font-size: 1.75rem; }
	.sv-hero__kafle { flex-direction: column; }
	.sv-zaufanie__poz { flex-basis: 100%; }
}

/* ---------------------------------------------------------------
   Filtr ceny — wlasny formularz

   Zastapil blok WooCommerce z suwakiem. Zero zaleznosci od cudzego
   arkusza, wiec nie ma czego rozjechac.
   --------------------------------------------------------------- */
.sv-cena { margin: 0; }

.sv-cena__pola {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.sv-cena__pole {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: block;
}

.sv-cena__pole input {
	width: 100%;
	min-width: 0;
	height: 38px;
	padding: 0 1.75rem 0 .625rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 7px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
}
.sv-cena__pole input:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
	border-color: transparent;
}

/* Strzalki pola liczbowego tylko przeszkadzaja przy cenie */
.sv-cena__pole input::-webkit-outer-spin-button,
.sv-cena__pole input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.sv-cena__pole input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* Symbol waluty w polu, zeby nie trzeba go bylo wpisywac */
.sv-cena__pole i {
	position: absolute;
	right: .625rem;
	top: 50%;
	transform: translateY(-50%);
	font-style: normal;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-3);
	pointer-events: none;
}

.sv-cena__ok {
	width: 100%;
	height: 38px;
	margin-top: .5rem;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 7px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
}
.sv-cena__ok:hover { background: #000; border-color: #000; }

.sv-cena__wyczysc {
	display: inline-block;
	margin-top: .5rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-2);
	text-decoration: underline;
}
.sv-cena__wyczysc:hover { color: var(--wp--preset--color--accent); }

/* ===============================================================
   SIATKA PRODUKTOW — element listy musi wypelnic swoja kolumne

   CO SIE DZIALO W SEKCJI "PODOBNE PRODUKTY"
   -----------------------------------------
   WooCommerce wysyla te liste z klasami `is-flex-container columns-5`
   i we WLASNYM ukladzie nadaje elementom procentowa szerokosc — bo
   w ukladzie elastycznym tak sie dzieli miejsce.

   My zamieniamy ten uklad na siatke (`display: grid`), zeby kafelki
   mialy rowne wysokosci. Ale procentowa szerokosc ZOSTAWALA — i w siatce
   znaczyla juz co innego: nie "jedna piata rzedu", tylko "jedna piata
   swojej kolumny". Kafelek w kolumnie 320 px kurczyl sie do 64 px,
   a nazwa produktu lamala sie po jednej literze.

   Stad regula ponizej: skoro narzucamy siatke, musimy zdjac WSZYSTKIE
   slady poprzedniego ukladu. Polowiczna zamiana jest gorsza niz zadna.

   MOJA POMYLKA PO DRODZE (0.6.7): uznalem, ze ta sekcja uzywa starego
   `ul.products li.product`, bo `curl` nic nie znajdowal. `curl` pobieral
   wtedy nieistniejacy adres. Napisany wtedy arkusz dla starej listy
   zostal usuniety — nie stykal sie z niczym.
   =============================================================== */
.wc-block-product-template > li,
.wc-block-product-template > .wc-block-product {
	width: auto !important;
	max-width: none !important;
	flex: none !important;
	margin: 0 !important;
	float: none !important;
	min-width: 0;
}

/*
   Kafelek w "Podobnych produktach" nie ma wewnetrznej grupy — zdjecie,
   nazwa, cena i przycisk leza bezposrednio w elemencie listy. Reguly
   pisane pod szablon katalogu celowaly w te grupe, wiec tutaj nie
   dzialaly. Ponizej te same odstepy dla ukladu bez grupy.
*/
.wc-block-product > .wc-block-components-product-image {
	margin: 0 0 .75rem;
	padding-inline: 0;
}

.wc-block-product > .wc-block-components-product-price {
	margin-top: auto;
	padding-top: .25rem;
}

.wc-block-product > .wc-block-components-product-button {
	width: 100%;
	margin-top: .5rem;
}

/* ===============================================================
   PODOBNE PRODUKTY — sekcja rysowana przez motyw

   Wlasny znacznik i wlasne klasy, wiec zero wyscigu na specyficznosc
   z arkuszem WooCommerce. Wyglad kafelka celowo taki sam jak w katalogu.
   =============================================================== */
.sv-pod { margin-top: var(--wp--preset--spacing--50); }

.sv-pod__tytul {
	font-size: var(--wp--preset--font-size--x-large);
	letter-spacing: -.02em;
	margin: 0 0 var(--wp--preset--spacing--30);
}

.sv-pod__siatka {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
}

.sv-pod__karta {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	overflow: hidden;
	background: var(--wp--preset--color--base);
	transition: border-color .15s, box-shadow .15s;
}
.sv-pod__karta:hover {
	border-color: var(--wp--preset--color--contrast-3);
	box-shadow: 0 4px 18px rgba(17, 20, 24, .07);
}

.sv-pod__zdjecie {
	display: block;
	background: var(--wp--preset--color--base-2);
}
.sv-pod__zdjecie img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.sv-pod__tresc {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: .375rem;
	padding: .75rem .875rem .875rem;
	min-width: 0;
}

.sv-pod__nazwa {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.35;

	/* Trzy linie — inaczej kafelki maja rozne wysokosci */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sv-pod__nazwa a { color: var(--wp--preset--color--contrast); }
.sv-pod__nazwa a:hover { color: var(--wp--preset--color--accent); text-decoration: none; }

.sv-pod__cena {
	margin-top: auto;
	padding-top: .25rem;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -.02em;
}
.sv-pod__cena del {
	font-size: .8125rem;
	font-weight: 400;
	color: var(--wp--preset--color--contrast-3);
	margin-right: .375rem;
}
.sv-pod__cena ins { text-decoration: none; }

.sv-pod__akcja .button {
	display: block;
	width: 100%;
	padding: .625rem 1rem;
	text-align: center;
	background: var(--wp--preset--color--accent);
	color: #fff;
	border: 0;
	border-radius: 8px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.sv-pod__akcja .button:hover { background: var(--wp--preset--color--accent-2); }
.sv-pod__akcja .added_to_cart { display: none; }

@media (max-width: 1200px) { .sv-pod__siatka { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .sv-pod__siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .sv-pod__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------
   Skok do wybranej strony

   Pojawia sie dopiero przy szesciu stronach — przy trzech wszystkie
   numery i tak widac, wiec byloby to zbedne pole na ekranie.
   --------------------------------------------------------------- */
.sv-skok {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
	flex-wrap: wrap;
}

.sv-skok input {
	width: 4.5rem;
	height: 38px;
	padding: 0 .5rem;
	text-align: center;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
}
.sv-skok input:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
	border-color: transparent;
}

/* Strzalki pola liczbowego tylko przeszkadzaja */
.sv-skok input::-webkit-outer-spin-button,
.sv-skok input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sv-skok input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.sv-skok button {
	height: 38px;
	padding: 0 .875rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
}
.sv-skok button:hover {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Kropki miedzy numerami — stonowane, zeby nie udawaly przyciskow */
.wp-block-query-pagination .page-numbers.dots {
	border: 0;
	min-width: 1.5rem;
	color: var(--wp--preset--color--contrast-3);
}

/* ===============================================================
   KOSZYK I ZAMOWIENIE

   Bloki koszyka i zamowienia WooCommerce maja wlasny, dosc surowy
   wyglad. Nie forkujemy ich — ubieramy klasami, ktore sa czescia
   publicznego API blokow (`wc-block-components-*`).
   =============================================================== */

/* --- wspolne: pola formularza --- */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-textarea,
.wc-block-components-combobox-control input {
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: 8px !important;
	background: var(--wp--preset--color--base);
	font-family: inherit;
}
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus {
	outline: 2px solid var(--wp--preset--color--accent) !important;
	outline-offset: 1px;
	border-color: transparent !important;
	box-shadow: none !important;
}

/* --- przyciski: jeden wyglad w calym sklepie --- */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button:not(.is-link) {
	background: var(--wp--preset--color--accent);
	color: #fff;
	border: 0;
	border-radius: 8px;
	font-family: inherit;
	font-weight: 700;
	min-height: 48px;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button:not(.is-link):hover {
	background: var(--wp--preset--color--accent-2);
}

/* Odnosniki udajace przyciski zostaja odnosnikami */
.wc-block-components-button.is-link {
	color: var(--wp--preset--color--contrast-2);
	text-decoration: underline;
}

/* --- podsumowanie: pudelko jak kolumna zakupowa na karcie produktu ---

   UWAGA NA SELEKTOR. Przez kilka wersji stalo tu
   `.wc-block-cart__sidebar .wc-block-components-sidebar` — czyli "element
   o klasie sidebar WEWNATRZ boku". A to jest JEDEN I TEN SAM element:
   `class="wc-block-components-sidebar wc-block-cart__sidebar"`. Selektor
   z potomkiem nie pasowal do niczego i cale stylowanie podsumowania —
   w koszyku i w zamowieniu — bylo martwe. Zmierzone w przegladarce.
*/
.wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 1.25rem;
	background: var(--wp--preset--color--base);
}

/* Suma do zaplaty to najwazniejsza liczba na tej stronie */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -.02em;
}

/* --- tabela produktow w koszyku --- */
.wc-block-cart-items__row {
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.wc-block-cart-item__image img {
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base-2);
}
.wc-block-components-product-name {
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}
.wc-block-components-product-name:hover { color: var(--wp--preset--color--accent); }

/* --- krok po kroku w zamowieniu --- */
.wc-block-checkout__form .wc-block-components-title,
.wp-block-woocommerce-checkout .wc-block-components-title {
	font-size: var(--wp--preset--font-size--medium) !important;
	letter-spacing: -.01em;
}

/* --- pusty koszyk --- */
.wp-block-woocommerce-empty-cart-block {
	text-align: center;
	padding-block: var(--wp--preset--spacing--50);
}

/* ---------------------------------------------------------------
   UKLAD KOSZYKA

   Klasy nizej NIE sa zgadniete — wyciagnalem je z arkuszy samego
   WooCommerce (assets/client/blocks/cart.css). Bloki koszyka nie
   renderuja sie na serwerze wcale: PHP oddaje pusty pojemnik, a cala
   tresc sklada React w przegladarce, wiec zmierzenie gotowej strony
   nic by nie dalo.
   --------------------------------------------------------------- */

/* Dwie kolumny: lista i podsumowanie. Woo daje tu flex, my chcemy siatke,
   bo tylko ona pozwala trzymac staly bok i kurczaca sie liste. */
.wp-block-woocommerce-cart .wc-block-components-sidebar-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: var(--wp--preset--spacing--30);
	align-items: start;
}
.wp-block-woocommerce-cart .wc-block-cart__main,
.wp-block-woocommerce-cart .wc-block-cart__sidebar {
	width: auto;
	max-width: none;
	padding: 0;
	float: none;
	min-width: 0;
}

/* Naglowek tabeli ("Produkt / Suma") — w makiecie go nie ma i slusznie:
   przy trzech kolumnach nazwy niczego nie tlumacza, a zajmuja wiersz. */
.wc-block-cart-items__header { display: none; }

/* Wiersz produktu */
.wc-block-cart-items__row {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-block: 1rem;
}
.wc-block-cart-items__row:first-child { padding-top: 0; }

.wc-block-cart-item__image { width: 88px; }
.wc-block-cart-item__image img {
	width: 88px;
	height: 88px;
	object-fit: contain;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base-2);
	padding: 4px;
}

.wc-block-cart-item__product .wc-block-components-product-name {
	font-weight: 600;
	line-height: 1.35;
	display: block;
	margin-bottom: 0.2rem;
}
.wc-block-cart-item__total .wc-block-components-product-price {
	font-weight: 700;
	white-space: nowrap;
}

/*
   Opis produktu w koszyku — precz.

   W koszyku klient juz wybral. Powtarzanie mu opisu ("Uniwersalna uszczelka
   okienna marki Smart Hardware do klimatyzacji przenosnych / monoblok...")
   nie pomaga podjac decyzji, tylko rozpycha wiersz na cztery linijki i psuje
   rytm listy. Zostaje nazwa, cena i ilosc.
*/
.wc-block-components-product-metadata__description,
.wc-block-cart-item__product .wc-block-components-product-metadata__description,
.wc-block-components-order-summary-item__description .wc-block-components-product-metadata__description {
	display: none;
}

/* Usuniecie pozycji zostaje odnosnikiem, nie przyciskiem — to czynnosc
   nieodwracalna i nie chcemy jej zapraszac wygladem. */
.wc-block-cart-item__remove-link {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-3);
	text-decoration: underline;
}
.wc-block-cart-item__remove-link:hover { color: var(--wp--preset--color--accent); }

/* Podsumowanie jedzie z ekranem. Woo ma na to wlasna klase, wiec nie
   dokladamy swojego position: sticky. */
.wc-block-cart__sidebar {
	position: sticky;
	top: calc(var(--sv-gora, 0px) + 1rem);
}
/* Naglowek prawej kolumny. W makiecie to zwykly naglowek "Podsumowanie",
   a nie szara etykietka wersalikami — WooCommerce daje tu domyslnie to
   drugie. Zmierzone w przegladarce: 20px, waga 700, bez wersalikow. */
.wc-block-cart__totals-title {
	display: block;
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	text-transform: none !important;
	letter-spacing: -.01em !important;
	color: var(--wp--preset--color--contrast) !important;
	margin: 0 0 1rem !important;
	padding: 0 !important;
}

/* --- wiersze podsumowania ---

   Wszystko nizej ma prefiks `.wc-block-cart__sidebar`, i to jest celowe.
   Te same klasy `wc-block-components-totals-*` WooCommerce uzywa rowniez
   w bloku "wybor dostawy" i w zamowieniu. Bez prefiksu 32-punktowa suma
   wchodzila tam, gdzie nie powinna. */
.wc-block-cart__sidebar .wc-block-components-totals-item {
	padding: .4rem 0 !important;
	font-size: var(--wp--preset--font-size--small);
}
.wc-block-cart__sidebar .wc-block-components-totals-item__label {
	color: var(--wp--preset--color--contrast-2);
}
.wc-block-cart__sidebar .wc-block-components-totals-item > .wc-block-components-formatted-money-amount {
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}

/* Kreska nad suma — tak jak w makiecie oddziela sklandniki od kwoty koncowej */
.wc-block-cart__sidebar .wc-block-components-totals-footer-item {
	border-top: 1px solid var(--wp--preset--color--border);
	margin-top: .75rem;
	padding-top: 1rem !important;
	align-items: baseline;
}
.wc-block-cart__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

/* Kwota do zaplaty — najwieksza liczba na stronie */
.wc-block-cart__sidebar .wc-block-components-totals-item__value .wc-block-components-formatted-money-amount {
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.1;
}

/*
   "w tym VAT" — drobnym drukiem POD suma, nie obok niej.

   Pulapka, w ktora wpadlem przy pierwszym podejsciu: kwota VAT siedzi
   WEWNATRZ `__value`, wiec regula wyzej powiekszala ja rowniez — obok
   32-punktowej sumy stalo 32-punktowe "w tym VAT". Dlatego tu jest jawny
   powrot do rozmiaru opisu. Zmierzone: 32 px suma / 12 px VAT.
*/
.wc-block-cart__sidebar .wc-block-components-totals-item__description {
	flex: 1 0 100%;
	text-align: right;
	margin-top: .25rem;
	font-size: var(--wp--preset--font-size--x-small) !important;
	color: var(--wp--preset--color--contrast-3);
}
.wc-block-cart__sidebar .wc-block-components-totals-item__description .wc-block-components-formatted-money-amount {
	font-size: inherit !important;
	font-weight: 600;
	letter-spacing: 0;
}

/* Przycisk przejscia do zamowienia — najwazniejszy element tej strony */
.wc-block-cart__submit-container { margin-top: 1rem; }
.wc-block-cart__submit-button { width: 100%; font-size: 1.05rem; min-height: 54px; }

/* Miejsce na "Kup z InPost Pay". Jesli wtyczka nie zarejestruje platnosci
   ekspresowej, blok jest pusty — i wtedy nie moze zostawiac po sobie odstepu. */
.wp-block-woocommerce-cart-express-payment-block:empty,
.wp-block-woocommerce-checkout-express-payment-block:empty { display: none; }

.wp-block-woocommerce-cart-express-payment-block { margin-bottom: 1rem; }

/* Kod rabatowy: zwiniety pod odnosnikiem, nie rozwiniety na widoku.
   Puste pole "Kod rabatowy" wyslaloby czesc ludzi do Google po kupon,
   a wracaja nie wszyscy. */
.wc-block-components-totals-coupon-link {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
}

/* ---------------------------------------------------------------
   WSTAWKI POD PODSUMOWANIEM

   Znaczniki doklada skrypt z functions.php (prawa kolumna nalezy do
   Reacta). Swiadomie uzywam tych samych klas co pas zaufania nad
   stopka — dzieki temu ikony sa jedne, opisane raz, w jednym miejscu.
   Rozni sie tylko skala: tam kolo 38 px na szarym pasie, tu ikonka
   18 px w kolumnie szerokiej na 360 px, dokladnie jak w makiecie.
   --------------------------------------------------------------- */
.sv-koszyk-zaufanie {
	display: flex;
	flex-direction: column;
	gap: .5625rem;
	margin-top: 1rem;
	padding-top: .9375rem;
	border-top: 1px solid var(--wp--preset--color--border);
}

.sv-koszyk-zaufanie .sv-zaufanie__poz {
	flex: none;
	min-height: 0;
	padding-left: 1.6875rem;
	line-height: 1.3;
}

/* Ikona bez kola i bez tla — sam rysunek, w kolorze marki */
.sv-koszyk-zaufanie .sv-zaufanie__poz::before {
	width: 18px;
	height: 18px;
	background-size: 18px 18px;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	top: .15rem;
	transform: none;
}

/* Skrzynka paczkomatu: w pasie nad stopka jedzie na zoltym kole i dlatego
   ma ciemny obrys. Tutaj kola nie ma, wiec obrys musi byc taki sam jak
   w pozostalych dwoch — inaczej jedna ikona odstaje kolorem. */
.sv-koszyk-zaufanie .sv-zaufanie__poz--inpost::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9400B' stroke-width='2'%3E%3Crect x='3' y='7' width='18' height='12' rx='2'/%3E%3Cpath d='M3 11h18'/%3E%3C/svg%3E");
}

.sv-koszyk-zaufanie .sv-zaufanie__poz strong {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}
.sv-koszyk-zaufanie .sv-zaufanie__poz span {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-2);
}

/* ---------------------------------------------------------------
   UKLAD ZAMOWIENIA
   --------------------------------------------------------------- */
/*
   BOK MA 400 px, NIE 340.

   Przy 340 px nazwa produktu lamala sie na CZTERY wiersze — zmierzone na
   prawdziwej nazwie z magazynu ("Watomierz miernik zuzycia energii
   elektrycznej licznik kosztow pradu 16A pl"). Podsumowanie ma dawac
   pewnosc, co sie kupuje; nazwa rozbita na cztery linijki robi odwrotnie.

   400 px daje trzy wiersze. Sprawdzone tez 380 (juz trzy) i 420 (dalej
   trzy) — powyzej 380 px zysku nie ma, a formularz obok traci szerokosc,
   wiec bierzemy 400 jako srodek.
*/
.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	gap: var(--wp--preset--spacing--30);
	align-items: start;
}
.wp-block-woocommerce-checkout .wc-block-checkout__main,
.wp-block-woocommerce-checkout .wc-block-checkout__sidebar {
	width: auto;
	max-width: none;
	padding: 0;
	float: none;
	min-width: 0;
}
.wc-block-checkout__sidebar {
	position: sticky;
	top: calc(var(--sv-gora, 0px) + 1rem);
}

/* Przycisk zakupu przy podsumowaniu — wyglada jak prawdziwy, bo dla
   klienta JEST prawdziwy. Kod: functions.php, `shopuj_skrypt_przycisku_kasy`. */
.sv-kasa-przycisk {
	display: block;
	width: 100%;
	margin-top: 1rem;
	min-height: 54px;
	padding: 0 1rem;
	border: 0;
	border-radius: 9px;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-family: inherit;
	font-size: 1.05rem;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s;
}
.sv-kasa-przycisk:hover { background: var(--wp--preset--color--accent-2); }
.sv-kasa-przycisk:disabled { opacity: .55; cursor: default; }

/* ---------------------------------------------------------------
   ZAMOWIENIE W DWOCH KOLUMNACH

   Zmierzone na zywym sklepie: strona skracala sie z 2134 px do
   ok. 1450 px, czyli o jedna trzecia — a przy oknie 1111 px znaczy
   to roznice miedzy "przewijam dwa ekrany" a "prawie wszystko widze".

   PIERWSZA WERSJA MIALA POWAZNA WADE i dlatego jest tu `break-before`.
   Same `columns: 2` pozwalaja przegladarce WYROWNYWAC wysokosc kolumn,
   a wyrownanie liczy sie na nowo po kazdej zmianie tresci. Zmierzone:
   klikniecie metody platnosci przerzucalo caly krok "Adres do wysylki"
   z lewej kolumny na prawa. W polowie wypelniania formularza pole,
   ktore klient wlasnie miał uzupelnic, uciekalo mu na druga strone
   ekranu.

   `break-before: column` na kroku platnosci PRZYPINA podzial: kolumna
   druga zawsze zaczyna sie od platnosci, a kroki 1–4 zostaja po lewej
   niezaleznie od tego, co urosnie. Sprawdzone na trzech zdarzeniach,
   ktore zmieniaja wysokosc: wybor platnosci, "Edytuj" przy adresie
   i przelaczenie na odbior osobisty.

   PROG TO 1300 px, A NIE 1080. Po poszerzeniu boku do 400 px zostaje na
   formularz o tyle mniej, ze przy waskim oknie kolumny robily sie po 354 px
   i napisy zaczynaly sie lamac w polowie: "Odbior osobisty" na dwa wiersze,
   "Platnosc szybkim przelewem" na dwa. Zmierzone przy oknie 1198 px.
   Dwie kolumny wlaczamy wiec dopiero tam, gdzie kazda ma co najmniej
   ok. 400 px; nizej jedna kolumna jest po prostu czytelniejsza.
   --------------------------------------------------------------- */
@media (min-width: 1300px) {

	.wp-block-woocommerce-checkout .wc-block-checkout__form {
		columns: 2;
		column-gap: 1.25rem;
	}

	/* Krok nie moze byc rozerwany miedzy kolumnami. */
	.wp-block-woocommerce-checkout .wc-block-checkout__form > * {
		break-inside: avoid;
	}

	.wp-block-woocommerce-checkout .wc-block-checkout__payment-method {
		break-before: column;
	}
}

/*
   Wybor dostawy i platnosci jako kafelki.

   WooCommerce ma juz gotowe podswietlanie zaznaczonej opcji
   (`--highlight-checked`), wiec nie budujemy wlasnych kafelkow —
   ubieramy te, ktore sa. Mniej kodu i nie rozjedzie sie przy aktualizacji.
*/
/*
   ODSTEP OD LEWEJ: 3,1rem I ANI MNIEJ.

   Kolko wyboru jest pozycjonowane bezwzglednie — stoi 17 px od krawedzi
   i ma 20 px srednicy, czyli konczy sie na 37 px. Odstep z lewej musi
   wiec zaczynac tekst DALEJ niz 37 px, inaczej napis wchodzi kolku pod
   spod. Przy 2,6rem (41,6 px) zostawaly 4 px i wygladalo to, jakby kolko
   najezdzalo na nazwe metody. Teraz 3,1rem (49,6 px) daje 12 px oddechu.

   Zmieniajac te wartosc: patrz na ROZNICE wzgledem 37 px, nie na sama
   liczbe.
*/
.wc-block-components-radio-control__option {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	padding: 0.85rem 1rem 0.85rem 3.1rem;
	margin-bottom: 0.5rem;
	background: var(--wp--preset--color--base);
	transition: border-color .15s;
}
.wc-block-components-radio-control__option:hover {
	border-color: var(--wp--preset--color--contrast-3);
}

/*
   PLATNOSCI MAJA INNA BUDOWE NIZ DOSTAWA

   Przy metodach wysylki jedna opcja to jedno pudelko. Przy platnosciach
   WooCommerce robi harmonijke: sam wybor to jeden element (`__option`),
   a rozwiniety opis ("Zaplacisz kurierowi przy doreczeniu paczki") to
   drugi (`accordion-content`), lezacy POD nim i POZA jego ramka.

   Ubranie w ramke samego `__option` dawalo wiec ramke urwana w polowie
   i opis wystajacy pod spodem. Karta musi byc calosc — czyli
   `accordion-option`, ktora obejmuje oba elementy.
*/
.wc-block-components-radio-control-accordion-option {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	margin-bottom: 0.5rem;
	background: var(--wp--preset--color--base);
	overflow: hidden;
	transition: border-color .15s;
}
.wc-block-components-radio-control-accordion-option:hover {
	border-color: var(--wp--preset--color--contrast-3);
}

/* Element w srodku traci wlasna ramke — ma ja teraz opakowanie */
.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
	border: 0;
	border-radius: 0;
	margin-bottom: 0;
	background: transparent;
}

/* Podswietlenie wybranej opcji przenosi sie na cala karte */
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent-3, #FDF0EA);
}

.wc-block-components-radio-control-accordion-content {
	padding: 0 1rem 0.8rem 2.6rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-2);
}
.wc-block-components-radio-control-accordion-content:empty {
	display: none;
}

.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control__option--checked-option-highlighted {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent-3, #FDF0EA);
}
.wc-block-components-radio-control__label { font-weight: 600; }
.wc-block-components-radio-control__secondary-label { font-weight: 700; white-space: nowrap; }
.wc-block-components-radio-control__description,
.wc-block-components-radio-control__secondary-description {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-2);
}

/* Darmowa dostawa ma byc widoczna od razu, a nie tylko przez kwote 0 zl */
.wc-block-checkout__shipping-option--free .wc-block-components-radio-control__secondary-label,
.wc-block-components-shipping-rates-control__package__description--free { color: #1E7A3C; }

/* Numerowane kroki — Woo ma to natywnie, wlaczamy je w tresci strony */
.wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step__title {
	font-size: var(--wp--preset--font-size--medium);
}

/*
   Wybor kraju — precz.

   W ustawieniach WooCommerce sprzedaz i wysylka sa ograniczone do Polski
   (`woocommerce_allowed_countries` = specific, `["PL"]`). Mimo to blokowy
   formularz nadal rysuje liste rozwijana z jedna pozycja — sprawdzone na
   11.0.1, nie zaklada sie.

   Lista z jedna opcja nie jest wyborem, tylko polem do klikniecia bez
   powodu. `display: none` usuwa ja takze z kolejnosci tabulacji i z drzewa
   dostepnosci, wiec czytnik ekranu tez jej nie ogloszy. Wartosc leci dalej
   normalnie — siedzi w stanie formularza, nie w widocznosci pola.

   Gdy ruszysz za granice: skasowac te regule i zmienic jedno ustawienie.
*/
.wp-block-woocommerce-checkout .wc-block-components-address-form__country {
	display: none;
}

/*
   Podpowiedz pod numerem telefonu

   Tresc siedzi w atrybucie `data-sv-blad`, ktory dopisuje skrypt z
   functions.php. Dzieki temu nie wstawiamy zadnego elementu w srodek
   formularza rysowanego przez Reacta — jest tylko atrybut na czyms,
   co i tak tam stoi.

   Wyglad naslauduje natywny komunikat WooCommerce, zeby klient nie
   widzial roznicy miedzy naszym bledem a ich.
*/
.wc-block-components-text-input[data-sv-blad] input {
	border-color: #B32D0F;
	box-shadow: 0 0 0 1px #B32D0F;
}
.wc-block-components-text-input[data-sv-blad]::after {
	content: attr(data-sv-blad);
	display: block;
	margin-top: 0.35rem;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.4;
	color: #B32D0F;
}

/*
   Potwierdzenie pod polem — ta sama technika co komunikat bledu, tylko
   w tonie spokojnym. Uzywane przy NIP-ie: pokazuje, czyje dane trafia
   na fakture.
*/
.wc-block-components-text-input[data-sv-info]::after {
	content: attr(data-sv-info);
	display: block;
	margin-top: 0.35rem;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.4;
	color: #1E7A3C;
}

/* ---------------------------------------------------------------
   ZAGESZCZENIE FORMULARZA ZAMOWIENIA

   Cel: jak najwiecej formularza na pierwszym ekranie. Kazdy piksel
   odzyskany tutaj to mniej przewijania miedzy "chce kupic" a "kupuje".

   Skad bierze sie rozrzutnosc WooCommerce:
   - etykieta siedzi W SRODKU pola, wiec ramka musi byc wyzsza o cala
     linijke tekstu (na starym sklepie etykiety sa NAD polami)
   - odstepy sa dobrane pod pojedyncze pole na ekranie dotykowym,
     a nie pod formularz z dwunastoma polami pod rzad

   Czego NIE ruszamy: wysokosc pola nie schodzi ponizej 44 px, bo to
   minimalny sensowny cel dla palca. Zageszczamy odstepy, nie
   powierzchnie klikalna.
   --------------------------------------------------------------- */

/* --- pola: ETYKIETA NAD POLEM, JAK NA MAKIECIE ---

   To jest ta jedna zmiana, ktora najbardziej przybliza formularz do
   makiety. WooCommerce wklada etykiete DO SRODKA ramki: pole musi byc
   przez to wyzsze o cala linijke, napis siedzi nad wartoscia i przy
   dluzszej tresci sie z nia zlewa.

   Przenosimy etykiete nad pole — mniejsza, szara, wytluszczona. Pole
   robi sie nizsze i czytelniejsze, a caly krok skraca sie o kilkanascie
   pikseli na kazdym polu.

   Selektory sa dluzsze, niz wyglada to na potrzebne. Krotsze przegrywaly
   z regula WooCommerce — sprawdzone w przegladarce: `transform`
   zostawal `matrix(0.82, …)`, czyli etykieta nadal sie kurczyla
   i przesuwala po swojemu. Precyzja zamiast `!important`.
*/
.wp-block-woocommerce-checkout .wc-block-checkout__form .wc-block-components-checkout-step .wc-block-components-text-input,
.wp-block-woocommerce-checkout .wc-block-checkout__form .wc-block-components-address-form .wc-block-components-text-input {
	padding-top: 1.2rem;
	margin-top: 0.55rem;
}

.wp-block-woocommerce-checkout .wc-block-checkout__form .wc-block-components-checkout-step .wc-block-components-text-input label,
.wp-block-woocommerce-checkout .wc-block-checkout__form .wc-block-components-checkout-step .wc-block-components-text-input.is-active label,
.wp-block-woocommerce-checkout .wc-block-checkout__form .wc-block-components-address-form .wc-block-components-text-input label,
.wp-block-woocommerce-checkout .wc-block-checkout__form .wc-block-components-address-form .wc-block-components-text-input.is-active label {
	position: absolute;
	top: 0;
	left: 0;
	transform: none;
	transform-origin: left top;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--wp--preset--color--contrast-2);
	padding: 0;
	background: transparent;
	max-width: 100%;
}

.wp-block-woocommerce-checkout .wc-block-checkout__form .wc-block-components-checkout-step .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-checkout__form .wc-block-components-address-form .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-combobox-control input {
	height: 44px;
	min-height: 44px;
	padding: 0 0.7rem;
	font-size: 0.95rem;
	line-height: 1.2;
	border-radius: 6px;
}

/*
   PODCZAS PISANIA TEZ BEZ GORNEGO ODSTEPU

   WooCommerce przy ognisku dokłada polu `padding-top: 24px` — robi w ten
   sposob miejsce dla etykiety, ktora normalnie wjezdza do srodka ramki.
   My etykiete przeniesliśmy nad pole, wiec to miejsce zostaje puste,
   a tekst spada na sam dol. Widac to WYLACZNIE w trakcie pisania.

   Dlaczego nie znalazlem tego od razu: ustawialem ognisko programowo
   (`element.focus()`), a przegladarka traktuje to inaczej niz prawdziwe
   klikniecie — czesc regul zapala sie dopiero przy `:focus-visible`.
   Mierzylem stan, ktorego klient nigdy nie oglada. Zlapane dopiero po
   kliknieciu i wpisaniu litery myszka i klawiatura.
*/
.wp-block-woocommerce-checkout .wc-block-checkout__form .wc-block-components-checkout-step .wc-block-components-text-input input:focus,
.wp-block-woocommerce-checkout .wc-block-checkout__form .wc-block-components-address-form .wc-block-components-text-input input:focus,
.wp-block-woocommerce-checkout .wc-block-checkout__form .wc-block-components-checkout-step .wc-block-components-text-input input:focus-visible,
.wp-block-woocommerce-checkout .wc-block-checkout__form .wc-block-components-address-form .wc-block-components-text-input input:focus-visible {
	padding: 0 0.7rem;
}

/* Tytul kroku odrobine mocniejszy — na makiecie jest wyrazny */
.wp-block-woocommerce-checkout .wc-block-checkout__form .wc-block-components-checkout-step .wc-block-components-checkout-step__title {
	font-size: 1.05rem;
	font-weight: 700;
}

/* Suma do zaplaty to najwazniejsza liczba na tej stronie */
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 1.45rem;
	font-weight: 800;
}

/*
   Lista "Faktura" bez etykiety.

   Pierwsza pozycja ("Nie potrzebuje faktury") mowi to samo, co etykieta,
   a WooCommerce dokleja do niej jeszcze "(opcjonalnie)" — trzy slowa
   zajmujace caly wiersz i nie wnoszace nic. Tresc etykiety zostaje
   w `aria-label` (wtyczka shopuj-faktura), wiec czytnik ekranu nadal ja
   przeczyta.
*/
/*
   Prawdziwe klasy odczytane ze strony, nie wywnioskowane ze wzorca.
   Poprzednia proba celowala w `wc-block-components-address-form__…`
   i nie trafiala w nic: pole listy nazywa sie
   `wc-block-components-select-input-shopuj-faktura`, a jej etykieta
   `wc-blocks-components-select__label` — przez "blocks" w liczbie
   mnogiej. Jedna litera roznicy.
*/
.wc-block-components-select-input-shopuj-faktura .wc-blocks-components-select__label {
	display: none;
}
.wc-block-components-select-input-shopuj-faktura .wc-blocks-components-select__select {
	padding-top: 0.3rem;
	padding-bottom: 0.3rem;
}

/* --- odstepy miedzy polami --- */
.wp-block-woocommerce-checkout .wc-block-components-text-input,
.wp-block-woocommerce-checkout .wc-block-components-combobox-control {
	margin-top: 0.45rem;
}
.wp-block-woocommerce-checkout .wc-block-components-address-form {
	gap: 0.45rem;
}

/* ---------------------------------------------------------------
   KAFELKI JAK NA MAKIECIE

   Na makiecie kazdy krok jest bialym kafelkiem na szarym tle. Na zywym
   sklepie wszystko lezalo na jednej bialej plaszczyznie, oddzielone
   cienka kreska z lewej — przez co formularz czytalo sie jako jeden
   dlugi ciag, a nie jako cztery zamkniete etapy.

   Szare tlo dostaje TYLKO tresc strony zamowienia. Naglowek i stopka
   zostaja biale, zeby chude obramowanie strony trzymalo sie reszty
   sklepu.
   --------------------------------------------------------------- */
body.woocommerce-checkout {
	background: var(--wp--preset--color--base-2);
}
body.woocommerce-checkout .sv-kasa {
	padding-block: var(--wp--preset--spacing--30);
}
body.woocommerce-checkout .sv-kasa-head,
body.woocommerce-checkout .sv-kasa-stopka {
	background: var(--wp--preset--color--base);
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-step {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	/*
	   23 px z boku, nie 18. Numer kroku jest czarnym kolkiem o srednicy
	   26 px i przy ciasniejszym odstepie niemal dotykal ramki — zmierzone
	   19 px, czyli mniej niz polowa jego wysokosci. Przy zwyklym tekscie
	   bylo to niewidoczne, przy mocnej plamie koloru rzuca sie w oczy.
	*/
	padding: 1.25rem 1.45rem;
}

/*
   NUMER KROKU DO SRODKA KAFELKA

   Zmierzone w przegladarce, nie zgadniete: numer rysuje `::before` na
   tytule kroku, z `position: absolute; left: -24px`. Czyli z definicji
   stoi 24 px NA ZEWNATRZ — dopoki kroki nie mialy ramki, wygladalo to
   jak marginalna numeracja; po zamknieciu ich w kafelki numer zostal
   za sciana.

   Selektor jest dluzszy, niz sie wydaje potrzebny, bo krotszy przegrywal
   z regula WooCommerce (sprawdzone: `position` zostawalo `absolute`).
   To nie jest ozdobnik — to minimum, ktore wygrywa precyzja zamiast
   `!important`.
*/
.wp-block-woocommerce-checkout .wc-block-checkout__form .wc-block-components-checkout-step .wc-block-components-checkout-step__title {
	display: flex;
	align-items: center;
	gap: 10px;
}
.wp-block-woocommerce-checkout .wc-block-checkout__form .wc-block-components-checkout-step .wc-block-components-checkout-step__title::before {
	content: counter(checkout-step);
	position: static;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border-radius: 100px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-step__heading {
	margin-top: 0;
}

/* --- kroki --- */
.wp-block-woocommerce-checkout .wc-block-components-checkout-step {
	margin-bottom: 0.75rem;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title {
	font-size: 1.02rem;
	margin-bottom: 0.15rem;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__description {
	font-size: 0.8rem;
	margin-bottom: 0.4rem;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__content {
	margin-top: 0.4rem;
}

/* --- kafelki dostawy i platnosci: nizsze, nadal klikalne ---

   Sciskamy TYLKO gore i dol. Odstep z lewej zostaje 3,1rem, bo tam stoi
   kolko wyboru — to wlasnie tutaj bylo 2,4rem i dlatego napisy zachodzily
   na kolko (patrz komentarz przy regule podstawowej). */
.wp-block-woocommerce-checkout .wc-block-components-radio-control__option {
	padding: 0.6rem 0.85rem 0.6rem 3.1rem;
	margin-bottom: 0.35rem;
}

/* --- podsumowanie z boku: NIE RUSZAMY ---

   Wyglada tak, jak na makiecie, i tak ma zostac. W 0.9.7 sciagnalem tu
   odstepy razem z reszta formularza i wyszlo brzydko: puste opakowania
   na rabat i podatki zamienily sie w dziury, a kwota "Lacznie" przestala
   sie miescic w ramce.

   Zageszczamy POLA DO WYPELNIENIA, nie podsumowanie. Zostaja tylko dwa
   zabezpieczenia, ktore nie zmieniaja wygladu, a chronia przed usterka:  */

/* Puste opakowania na rabat, oplaty i podatki rysuja sie zawsze —
   niech przynajmniej nie zostawiaja po sobie ramek. */
.wp-block-woocommerce-checkout .wc-block-components-totals-wrapper:empty,
.wp-block-woocommerce-checkout .wc-block-components-totals-wrapper:not(:has(*)) {
	display: none;
}

/* Kwota "Lacznie" ma prawo zawinac sie do drugiej linijki, zamiast
   zostac obcieta przy czterech cyfrach. Przy krotkich kwotach nie
   zmienia niczego. */
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 0.75rem;
}
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	white-space: nowrap;
	flex: 0 0 auto;
}

/* --- zgody i przycisk --- */
.wp-block-woocommerce-checkout .wc-block-checkout__actions {
	padding-top: 0.6rem;
}


/* ---------------------------------------------------------------
   PODSUMOWANIE ZAMOWIENIA JAK NA MAKIECIE

   Wszystko sprawdzone na zywej stronie przed spakowaniem.
   --------------------------------------------------------------- */

/*
   Pionowa kreska przy kazdym kroku.

   WooCommerce rysuje ja jako `::before` na zawartosci kroku — laczy
   kolejne etapy w jedna oś. Mialo to sens, gdy kroki byly plaskie;
   po zamknieciu ich w kafelki jest to kreska donikad.
*/
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__content::before {
	display: none;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__content {
	padding-left: 0;
}

/* ---------------------------------------------------------------
   WYSYLKA DO PUNKTU: ADRES ZNIKA

   Klase `sv-punkt` doklada skrypt z functions.php, kiedy Furgonetka
   poprosi o wybor punktu. Wtedy ulica, kod, miasto i kraj sa juz
   wypelnione adresem paczkomatu — i nie ma powodu ich pokazywac.

   WAZNE: chowamy tylko to, co sami wypelniamy. Imie, nazwisko
   i telefon zostaja, bo tych za klienta nie wymyslimy — a telefon
   przy paczkomacie jest wrecz najwazniejszy, bo idzie na niego kod
   odbioru.

   Chowanie i wypelnianie robi JEDEN skrypt. Jesli padnie, nie
   zadziala ani jedno, ani drugie: pola zostana widoczne i wymagane,
   czyli dokladnie tak, jak bylo przed ta funkcja.
   --------------------------------------------------------------- */
.wc-block-checkout__form.sv-punkt .wp-block-woocommerce-checkout-shipping-address-block .wc-block-components-address-form__country,
.wc-block-checkout__form.sv-punkt .wp-block-woocommerce-checkout-shipping-address-block .wc-block-components-address-form__address_1,
.wc-block-checkout__form.sv-punkt .wp-block-woocommerce-checkout-shipping-address-block .wc-block-components-address-form__address_2,
.wc-block-checkout__form.sv-punkt .wp-block-woocommerce-checkout-shipping-address-block .wc-block-components-address-form__address_2-toggle,
.wc-block-checkout__form.sv-punkt .wp-block-woocommerce-checkout-shipping-address-block .wc-block-components-address-form__address_2-hidden-input,
.wc-block-checkout__form.sv-punkt .wp-block-woocommerce-checkout-shipping-address-block .wc-block-components-address-form__postcode,
.wc-block-checkout__form.sv-punkt .wp-block-woocommerce-checkout-shipping-address-block .wc-block-components-address-form__city {
	display: none !important;
}

/* ---------------------------------------------------------------
   ODBIOR OSOBISTY: ADRES ROZLICZENIOWY ZNIKA

   Klient przychodzi po paczke sam. Ulica, kod i miasto nie sluza wtedy
   niczemu — ani wysylce (jej nie ma), ani rozpoznaniu odbierajacego
   (do tego jest imie, telefon i e-mail). Zostaja wiec dokladnie te trzy
   rzeczy, a adres samego punktu wpisuje za klienta skrypt, zeby
   WooCommerce mial czym wypelnic wymagane pola.

   Ten sam bezpiecznik co przy paczkomacie: chowa i wypelnia JEDEN skrypt.
   Jesli padnie, nie zadziala ani jedno, ani drugie — pola zostana widoczne
   i wymagane, czyli tak jak przed ta funkcja.
   --------------------------------------------------------------- */
.wc-block-checkout__form.sv-odbior .wp-block-woocommerce-checkout-billing-address-block .wc-block-components-address-form__country,
.wc-block-checkout__form.sv-odbior .wp-block-woocommerce-checkout-billing-address-block .wc-block-components-address-form__address_1,
.wc-block-checkout__form.sv-odbior .wp-block-woocommerce-checkout-billing-address-block .wc-block-components-address-form__address_2,
.wc-block-checkout__form.sv-odbior .wp-block-woocommerce-checkout-billing-address-block .wc-block-components-address-form__address_2-toggle,
.wc-block-checkout__form.sv-odbior .wp-block-woocommerce-checkout-billing-address-block .wc-block-components-address-form__address_2-hidden-input,
.wc-block-checkout__form.sv-odbior .wp-block-woocommerce-checkout-billing-address-block .wc-block-components-address-form__postcode,
.wc-block-checkout__form.sv-odbior .wp-block-woocommerce-checkout-billing-address-block .wc-block-components-address-form__city {
	display: none !important;
}

/* Zdanie wyjasniajace, dlaczego pol nagle nie ma */
.sv-punkt-info,
.sv-odbior-info {
	margin: 0 0 1rem;
	padding: .75rem .875rem;
	border-radius: 9px;
	background: var(--wp--preset--color--base-2);
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

/* ---------------------------------------------------------------
   PODSUMOWANIE MA WYGLADAC NA PODSUMOWANIE

   Do 0.9.72 bok byl bialym kafelkiem z cienka ramka — czyli wygladal
   dokladnie tak samo jak kazdy krok formularza obok. Nic nie mowilo,
   ze to INNY rodzaj tresci: tam sie cos wypelnia, tu sie sprawdza,
   za co sie placi.

   Stad ciemna czapka. Czern nie jest ozdoba — to ten sam kolor co logo,
   stopka i pas zaufania, wiec podsumowanie czyta sie jak czesc marki,
   a nie jak doklejona ramka. Ramka znika, bo od oddzielenia jest teraz
   cien; dwa sposoby naraz robilyby sie ciezkie.

   `overflow: hidden` jest konieczne: czapka ma prosta krawedz, a karta
   zaokraglona — bez tego rogi paska wystaja poza zaokraglenie.
   --------------------------------------------------------------- */
.wp-block-woocommerce-checkout .wc-block-checkout__sidebar {
	background: var(--wp--preset--color--base);
	border: 0;
	border-radius: 14px;
	padding: 0;
	overflow: hidden;
	box-shadow:
		0 1px 2px rgba(17, 20, 24, .06),
		0 8px 28px rgba(17, 20, 24, .10);
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title {
	margin: 0 !important;
	padding: 0.9rem 1.15rem !important;
	border-radius: 0 !important;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/*
   Napis w czapce rysuje WooCommerce wlasnym elementem w srodku, wiec
   pomalowanie samego naglowka nie wystarczy — kolor trzeba podac dzieciom.
*/
.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title * {
	color: var(--wp--preset--color--base) !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	letter-spacing: -.01em;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__content {
	padding: 1.15rem;
}

/* Odstep przeniesiony z boku do srodka — przycisk musi go dostac sam. */
.wp-block-woocommerce-checkout .wc-block-checkout__sidebar .sv-kasa-przycisk {
	width: calc(100% - 2.3rem);
	margin: 0 1.15rem 1.15rem;
}

/* Komunikaty o bledzie tez nie moga dotykac krawedzi. Puste zostawiamy
   bez odstepu, inaczej karta rosnie o pusty pasek. */
.wp-block-woocommerce-checkout .wc-block-checkout__sidebar > .wc-block-components-notices:not(:empty) {
	padding: 1.15rem 1.15rem 0;
}

/* Kreska nad kwota koncowa — po zmianie odstepow trzeba ja podac tutaj. */
.wp-block-woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-totals-footer-item {
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: 0.9rem;
}

/*
   Wewnetrzne pudelko precz — kafelkiem jest teraz caly bok, a dwie
   ramki jedna w drugiej wygladaly jak usterka.
*/
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block {
	border: 0;
	border-radius: 0;
	padding: 0;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title {
	padding: 0;
	margin-bottom: 0.7rem;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title-text {
	font-size: 1.05rem;
	font-weight: 700;
}
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item {
	padding: 0.55rem 0;
	font-size: 0.86rem;
	line-height: 1.35;
}
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__image img {
	width: 46px;
	border-radius: 6px;
	border: 1px solid var(--wp--preset--color--border);
}
.wp-block-woocommerce-checkout .wc-block-components-totals-item {
	font-size: 0.9rem;
	padding: 0.18rem 0;
}
.wp-block-woocommerce-checkout .wc-block-components-totals-wrapper {
	padding: 0.55rem 0;
}
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item {
	padding-top: 0.7rem;
	border-top: 1px solid var(--wp--preset--color--border);
}

/* ---------------------------------------------------------------
   KOMUNIKATY SKLEPU ("Dodano do koszyka", bledy, ostrzezenia)

   WooCommerce daje im wlasny wyglad: zielone pudlo z gruba kolorowa
   ramka, ktore nie ma nic wspolnego z reszta sklepu. Ubieramy je tak
   samo jak kafelki: biale tlo, cienka ramka, zaokraglenie 10 px —
   a stan (sukces, blad, ostrzezenie) niesie WASKI PASEK z lewej
   i kolor ikony, zamiast krzyczacego tla.

   Obslugujemy dwa rodzaje naraz, bo WooCommerce uzywa obu:
   - `wc-block-components-notice-banner` — pasek na stronie
   - `woocommerce-message` i pokrewne — starszy zapis, uzywany
     m.in. przez wtyczki
   Reguly, ktore nie trafia w nic, po prostu nic nie robia.
   --------------------------------------------------------------- */
/*
   UWAGA NA SPECYFICZNOSC. Pierwsza wersja celowala w samo
   `.wc-block-components-notice-banner` i przeszla tylko czesciowo:
   zaokraglenie, odstepy i pasek z lewej — tak; tlo i kolor pozostalych
   krawedzi — nie, bo te WooCommerce ustawia precyzyjniej. Efekt byl
   gorszy niz przed zmiana: blado-zielone tlo w zaokraglonym pudelku.
   Zmierzone na zywej stronie. Stad opakowanie w selektorze.
*/
.wc-block-store-notices .wc-block-components-notice-banner,
.woocommerce-notices-wrapper .wc-block-components-notice-banner,
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-left-width: 4px;
	border-radius: 10px;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	padding: 0.9rem 1.1rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

/* Stan niesie pasek z lewej, nie tlo */
.wc-block-store-notices .wc-block-components-notice-banner.is-success,
.woocommerce-notices-wrapper .wc-block-components-notice-banner.is-success,
.woocommerce-message { border-left-color: #1E7A3C; }

.wc-block-store-notices .wc-block-components-notice-banner.is-error,
.woocommerce-notices-wrapper .wc-block-components-notice-banner.is-error,
.woocommerce-error { border-left-color: #B32D0F; }

.wc-block-store-notices .wc-block-components-notice-banner.is-warning,
.woocommerce-notices-wrapper .wc-block-components-notice-banner.is-warning { border-left-color: #C9860B; }

.wc-block-store-notices .wc-block-components-notice-banner.is-info,
.woocommerce-notices-wrapper .wc-block-components-notice-banner.is-info,
.woocommerce-info { border-left-color: var(--wp--preset--color--accent); }

/* Ikona przejmuje kolor stanu, tekst zostaje czytelny */
.wc-block-components-notice-banner.is-success > svg { fill: #1E7A3C; }
.wc-block-components-notice-banner.is-error > svg { fill: #B32D0F; }
.wc-block-components-notice-banner.is-warning > svg { fill: #C9860B; }
.wc-block-components-notice-banner.is-info > svg { fill: var(--wp--preset--color--accent); }

/* Przycisk w komunikacie ("Zobacz koszyk") — jak reszta przyciskow sklepu */
.wc-block-components-notice-banner .wc-forward,
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
	background: var(--wp--preset--color--accent);
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 0.45rem 0.9rem;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--x-small);
	text-decoration: none;
}
.wc-block-components-notice-banner .wc-forward:hover,
.woocommerce-message .button:hover {
	background: var(--wp--preset--color--accent-2);
}

/*
   Komunikat wyskakujacy (przy dodaniu z listy produktow). WooCommerce
   pokazuje go w rogu ekranu — dajemy mu ten sam jezyk wizualny, tylko
   z cieniem, bo unosi sie nad trescia.
*/
.wc-block-components-notice-snackbar,
.wc-block-components-snackbar-notice {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-radius: 10px;
	font-size: var(--wp--preset--font-size--small);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}

/* ---------------------------------------------------------------
   KATEGORIE NA STRONIE GLOWNEJ

   Ze strony glownej nie dalo sie wejsc do zadnej kategorii — byly
   tylko bestsellery i nowosci. Klient szukajacy czegos konkretnego
   zostawal z lista 212 produktow.

   Kafelki sa celowo tekstowe, bez grafik: kategorie nie maja obrazkow,
   a wstawianie w to miejsce zdjecia losowego produktu myli — ludzie
   biora je za produkt, nie za dzial.
   --------------------------------------------------------------- */
.sv-kategorie__siatka {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.75rem;
}

.sv-kat-kafel {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.9rem 1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	background: var(--wp--preset--color--base);
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	transition: border-color .15s, transform .15s;
}
.sv-kat-kafel:hover {
	border-color: var(--wp--preset--color--accent);
	transform: translateY(-1px);
}
.sv-kat-kafel__nazwa {
	font-weight: 600;
	line-height: 1.25;
}
.sv-kat-kafel__ile {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-3);
}

@media (max-width: 980px) {
	.sv-kategorie__siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.sv-kategorie__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
	.sv-kat-kafel { padding: 0.75rem 0.85rem; }
}

/* ---------------------------------------------------------------
   PODSUMOWANIE W KOSZYKU

   Bok koszyka dostal ramke i zaokraglenie juz w 0.9.14, ale zostal
   BEZ ODSTEPOW — regula z `padding` byla zawezona do strony zamowienia
   (`.wp-block-woocommerce-checkout`), wiec koszyka nie obejmowala.
   Zmierzone: `padding: 0`, tresc dotykala krawedzi.
   --------------------------------------------------------------- */
.wp-block-woocommerce-cart .wc-block-cart__sidebar {
	padding: 1.1rem 1.15rem;
}
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-block {
	border: 0;
	padding: 0;
}
.wp-block-woocommerce-cart .wc-block-components-order-summary-item {
	padding: 0.55rem 0;
	font-size: 0.86rem;
	line-height: 1.35;
}
.wp-block-woocommerce-cart .wc-block-components-order-summary-item__image img {
	width: 46px;
	border-radius: 6px;
	border: 1px solid var(--wp--preset--color--border);
}
.wp-block-woocommerce-cart .wc-block-components-totals-item {
	font-size: 0.9rem;
	padding: 0.18rem 0;
}
.wp-block-woocommerce-cart .wc-block-components-totals-wrapper {
	padding: 0.55rem 0;
}
.wp-block-woocommerce-cart .wc-block-components-totals-wrapper:empty,
.wp-block-woocommerce-cart .wc-block-components-totals-wrapper:not(:has(*)) {
	display: none;
}
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item {
	padding-top: 0.7rem;
	border-top: 1px solid var(--wp--preset--color--border);
}
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 1.45rem;
	font-weight: 800;
	white-space: nowrap;
}

/* ---------------------------------------------------------------
   KOLKO WYBORU NA SRODKU OPCJI

   WooCommerce pozycjonuje je sztywno `top: 16px`, co bylo poprawne
   przy ich wysokosci opcji. Po naszym scisnieciu odstepow opcja ma
   39 px, wiec kolko o srednicy 20 px konczylo sie na 36 i wisialo
   przy dolnej krawedzi. Srodkujemy je zamiast dobierac `top` recznie —
   dziala przy kazdej wysokosci, takze gdy opcja ma dwie linijki.
   --------------------------------------------------------------- */
.wp-block-woocommerce-checkout .wc-block-components-radio-control .wc-block-components-radio-control__option .wc-block-components-radio-control__input,
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__input {
	top: 50%;
	transform: translateY(-50%);
}

/* Zgody: drobny druk, ale czytelny */
.wc-block-checkout__terms {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-2);
}

/* ---------------------------------------------------------------
   TELEFON

   Na waskim ekranie obie strony jada jedna kolumna. WooCommerce samo
   zwija podsumowanie w rozwijany panel u gory — nie budujemy wiec
   wlasnego, tylko go ubieramy. Przycisk zakupu przyklejamy do dolu,
   zeby nie trzeba bylo przewijac formularza, zeby zaplacic.
   --------------------------------------------------------------- */
@media (max-width: 900px) {

	.wp-block-woocommerce-cart .wc-block-components-sidebar-layout,
	.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout {
		grid-template-columns: 1fr;
	}

	.wc-block-cart__sidebar,
	.wc-block-checkout__sidebar { position: static; }

	/* Podsumowanie zamowienia idzie na gore, nad formularz */
	.wp-block-woocommerce-checkout .wc-block-checkout__sidebar {
		order: -1;
		margin-bottom: 0.75rem;
	}

	/*
	   PRZYCISK POD PODSUMOWANIEM ZNIKA NA TELEFONIE

	   Na komputerze podsumowanie stoi z prawej i nasza kopia przycisku
	   ("Kupuje i place") jest jedynym guzikiem widocznym bez przewijania.
	   Tutaj podsumowanie jedzie na GORE, nad formularz, a prawdziwy
	   przycisk WooCommerce jest przyklejony do dolu ekranu (regula nizej).
	   Nasza kopia bylaby wiec drugim, identycznym guzikiem na jednym
	   ekranie — i to tym na gorze, przed wypelnieniem formularza.
	*/
	.wp-block-woocommerce-checkout .wc-block-checkout__sidebar .sv-kasa-przycisk {
		display: none;
	}

	/*
	   PODSUMOWANIE DWA RAZY — TO NIE BYLA NASZA USTERKA

	   Na waskim ekranie WooCommerce pokazuje podsumowanie DWUKROTNIE:
	   raz jako zwiniety pasek u gory (tytul + kwota, do rozwiniecia),
	   drugi raz jako pelna kopie wstrzyknieta do bloku akcji, tuz nad
	   przyciskiem "Kupuje i place". Zmierzone: lista produktow i wiersz
	   "Lacznie" renderuja sie 500 px nizej, wewnatrz
	   `.wc-block-checkout__actions`.

	   Zamysl jest sensowny — kwota pod reka i przy decyzji — ale w praktyce
	   to samo pudelko dwa razy na jednym ekranie. Zostawiamy pasek u gory
	   (jeden dotyk rozwija szczegoly) i chowamy kopie, dzieki czemu przycisk
	   zakupu zostaje tam, gdzie ma byc: na koncu, przyklejony do dolu.
	*/
	.wp-block-woocommerce-checkout .wc-block-checkout__actions .wp-block-woocommerce-checkout-order-summary-block {
		display: none;
	}

	/*
	   ODSTEPY W KAFELKACH NA TELEFONIE

	   WooCommerce ma dla waskiego ekranu wlasna regule zerujaca odstepy
	   w kroku. Nasze `padding` z wersji na komputer przegrywalo z nia,
	   przez co pole zaczynalo sie DOKLADNIE 1 px od krawedzi kafelka —
	   zmierzone: kafelek 16..384, pole 17..383. Stad wrazenie ucietych
	   pol i sciśnietych marginesow.
	*/
	.wp-block-woocommerce-checkout .wc-block-checkout__form .wc-block-components-checkout-step {
		padding: 0.9rem 1rem;
	}

	/*
	   Przelacznik "Wysylka / Odbior osobisty" ma na telefonie po 154 px
	   na opcje — przy domyslnej wielkosci pisma "Odbior osobisty" lamalo
	   sie na dwie linijki i rozpychalo caly kafelek. Mniejsze pismo
	   i ciasniejsze odstepy mieszcza je w jednej.

	   Bez `white-space: nowrap` — probowalem i przy 154 px napis byl
	   przycinany w polowie. Lepiej pozwolic mu sie zlamac w ostatecznosci,
	   niz uciac.
	*/
	.wp-block-woocommerce-checkout .wc-block-checkout__shipping-method-option {
		padding: 0.55rem 0.4rem;
	}
	.wp-block-woocommerce-checkout .wc-block-checkout__shipping-method-option-title {
		font-size: 0.85rem;
		line-height: 1.2;
	}
	.wp-block-woocommerce-checkout .wc-block-checkout__shipping-method-option-icon {
		margin-right: 0.25rem;
		flex: none;
	}

	.wc-block-components-checkout-order-summary__title {
		font-size: var(--wp--preset--font-size--small);
	}
	.wc-block-components-checkout-order-summary__title-price { font-weight: 800; }

	/* Przyklejony przycisk: koszyk ma na to wlasna klase Woo, zamowienie nie */
	.wc-block-cart__submit-container--sticky {
		position: sticky;
		bottom: 0;
		background: var(--wp--preset--color--base);
		padding-block: 0.75rem;
		box-shadow: 0 -3px 14px rgba(0, 0, 0, .09);
	}

	.wp-block-woocommerce-checkout .wc-block-checkout__actions {
		position: sticky;
		bottom: 0;
		z-index: 5;
		background: var(--wp--preset--color--base);
		padding-block: 0.75rem;
		margin-inline: calc(-1 * var(--wp--preset--spacing--20));
		padding-inline: var(--wp--preset--spacing--20);
		box-shadow: 0 -3px 14px rgba(0, 0, 0, .09);
	}
	.wc-block-components-checkout-place-order-button { width: 100%; }
}

/* ---------------------------------------------------------------
   Chudy naglowek strony zamowienia

   Uzywany wylacznie przez `templates/page-checkout.html`. Nie ma tu
   wyszukiwarki ani menu — powod opisany w samym szablonie.
   --------------------------------------------------------------- */
.sv-kasa-head {
	border-bottom: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
	padding-block: 0.75rem;
}
.sv-kasa-head__row {
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--20);
	gap: 1rem;
}
.sv-kasa-head .sv-logo { flex: 0 0 auto; }
.sv-kasa-head .sv-logo svg { height: 22px; width: auto; display: block; }

.sv-kasa-head__tytul {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--contrast-2);
	padding-left: 1rem;
	border-left: 1px solid var(--wp--preset--color--border);
}

/*
   Telefon odpycha reszte w prawo. Kto waha sie przy platnosci, szuka dowodu,
   ze po drugiej stronie jest czlowiek — dziala mocniej niz jakikolwiek znaczek
   "bezpieczne zakupy". Na telefonie zostaje sama sluchawka z numerem, bo tam
   jest to jedno dotkniecie od polaczenia.
*/
.sv-kasa-head__telefon {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
	text-decoration: none;
	white-space: nowrap;
}
.sv-kasa-head__telefon strong { color: var(--wp--preset--color--contrast); font-weight: 700; }
.sv-kasa-head__telefon:hover strong { color: var(--wp--preset--color--accent); }

/* Powrot do koszyka — jedyne dozwolone wyjscie stad poza logo */
.sv-kasa-head__powrot {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
	text-decoration: none;
}
.sv-kasa-head__powrot:hover { color: var(--wp--preset--color--contrast); }

.sv-kasa-head__bezp {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	color: #1E7A3C;
	background: #EAF6EE;
	padding: 0.3rem 0.65rem;
	border-radius: 100px;
}

/* Skrocona stopka pod formularzem */
.sv-kasa-stopka {
	margin-top: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--border);
	text-align: center;
	color: var(--wp--preset--color--contrast-2);
}
.sv-kasa-stopka__linki a { margin-inline: 0.6rem; text-decoration: none; }
.sv-kasa-stopka__linki a:hover { text-decoration: underline; }
.sv-kasa-stopka__nota { color: var(--wp--preset--color--contrast-3); margin-top: 0.35rem; }

@media (max-width: 780px) {
	.sv-kasa-head__tytul,
	.sv-kasa-head__bezp,
	.sv-kasa-head__telefon-etykieta { display: none; }

	/* Powrot do koszyka zostaje sama strzalka — tekst zjadalby miejsce numerowi */
	.sv-kasa-head__powrot { font-size: 0; gap: 0; }
	.sv-kasa-head__powrot svg { width: 18px; height: 18px; }
}

/* ---------------------------------------------------------------
   Pasek darmowej dostawy

   Tresc wstawia JavaScript (patrz functions.php, sekcja o tej samej
   nazwie) — tutaj jest wylacznie wyglad.
   --------------------------------------------------------------- */
.sv-darmowa {
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.sv-darmowa__tekst {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}
.sv-darmowa__tor {
	height: 7px;
	border-radius: 100px;
	background: var(--wp--preset--color--base-2);
	overflow: hidden;
}
.sv-darmowa__pasek {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 100px;
	background: var(--wp--preset--color--accent);
	transition: width .35s ease;
}
.sv-darmowa--pelny .sv-darmowa__tekst { font-weight: 600; color: #1E7A3C; }
.sv-darmowa--pelny .sv-darmowa__pasek { background: #1E7A3C; }

/* ---------------------------------------------------------------
   Pasek zaufania pod formularzem zamowienia

   Moment platnosci to miejsce, w ktorym klient najczesciej sie waha.
   Te trzy zdania odpowiadaja na pytania, ktore wtedy padaja: kiedy
   dostane, co jesli nie pasuje, czy to bezpieczne.
   --------------------------------------------------------------- */
.sv-kasa-zaufanie {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.75rem;
	margin-top: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
}
.sv-kasa-zaufanie b {
	display: block;
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}
.sv-kasa-zaufanie > span { flex: 1 1 200px; }

@media (max-width: 780px) {

	.wc-block-cart__sidebar { padding: 1rem; }

	/*
	   Podsumowanie zamowienia NIE dostaje tu odstepu z zewnatrz — od 0.9.73
	   ma go w srodku (czapka i tresc maja wlasny), a odstep na kafelku
	   odsunalby czarny pasek od krawedzi i zrobil z niego plywajacy prostokat.
	*/
	.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title { padding: 0.85rem 1rem !important; }
	.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__content { padding: 1rem; }
	/*
	   Nie ma tu juz regul dla `.sv-kasa-przycisk` — ponizej 900 px kopia
	   przycisku jest schowana (patrz sekcja TELEFON), wiec ustawianie jej
	   szerokosci bylo martwym kodem, ktory tylko mylil przy czytaniu.
	*/
}

/* ---------------------------------------------------------------
   FORMULARZE: kontakt oraz zwrot i reklamacja

   Formularz jest miejscem, w ktorym klient ma najgorszy dzien: cos
   nie doszlo, cos nie dziala, cos trzeba oddac. Dlatego duze pola,
   wyrazny fokus i zadnych ozdobnikow, ktore odwracaja uwage od
   przycisku wyslania.

   Uklad robi siatka, a nie klasy na polach — o tym, ktore pole
   zajmuje cala szerokosc, decyduje jego zawartosc (`:has`). Dzieki
   temu dodanie pola w PHP nie wymaga dopisywania niczego tutaj.
   --------------------------------------------------------------- */
.sv-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.125rem 1.25rem;
	max-width: 46rem;
	margin-block: var(--wp--preset--spacing--30);
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	background: var(--wp--preset--color--base);
}

/* Dlugie tresci, wybory i zdjecia biora cala szerokosc. */
.sv-form__pole:has(textarea),
.sv-form__pole:has(.sv-form__wybory),
.sv-form__pole:has(input[type="file"]),
.sv-form__alarm,
.sv-form__zgoda,
.sv-form__pulapka { grid-column: 1 / -1; }

.sv-form__pole {
	display: flex;
	flex-direction: column;
	gap: .375rem;
	min-width: 0;
}

.sv-form__etykieta {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.sv-form__opc {
	font-weight: 400;
	color: var(--wp--preset--color--contrast-3);
}

.sv-form__kontrolka {
	width: 100%;
	padding: .6875rem .875rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 9px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	transition: border-color .15s, box-shadow .15s;
}

.sv-form__kontrolka:hover { border-color: var(--wp--preset--color--contrast-3); }

/* Fokus musi byc widoczny takze wtedy, gdy ktos nawiguje klawiatura. */
.sv-form__kontrolka:focus-visible,
.sv-form__plik:focus-visible,
.sv-form__wybor:focus-within {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px var(--wp--preset--color--accent-3);
}

textarea.sv-form__kontrolka { resize: vertical; min-height: 8rem; }

.sv-form__podpowiedz {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-2);
}

/* Wybor rodzaju zgloszenia. Kafelki, nie kropki — roznica miedzy
   zwrotem a reklamacja jest dla klienta niejasna, wiec zdanie
   wyjasniajace musi byc czescia wyboru, a nie przypisem pod nim. */
.sv-form__wybory {
	display: grid;
	gap: .625rem;
}

.sv-form__wybor {
	display: flex;
	align-items: flex-start;
	gap: .625rem;
	padding: .875rem 1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	cursor: pointer;
	transition: border-color .15s, background-color .15s;
}

.sv-form__wybor:hover { background: var(--wp--preset--color--base-2); }

.sv-form__wybor input { margin-top: .2rem; accent-color: var(--wp--preset--color--accent); }

.sv-form__wybor:has(input:checked) {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent-3);
}

.sv-form__plik {
	width: 100%;
	padding: .75rem;
	border: 1px dashed var(--wp--preset--color--contrast-3);
	border-radius: 9px;
	background: var(--wp--preset--color--base-2);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
	cursor: pointer;
}

/* Systemowy przycisk "Wybierz pliki" wyglada inaczej w kazdej
   przegladarce i w kazdym systemie. Jedna regula wystarczy, zeby
   przestal odstawac od reszty formularza. */
.sv-form__plik::file-selector-button {
	margin-right: .75rem;
	padding: .5rem .875rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 7px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s, border-color .15s;
}

.sv-form__plik::file-selector-button:hover {
	border-color: var(--wp--preset--color--contrast-3);
	background: var(--wp--preset--color--base-2);
}

/* Pulapka na boty. Nie `display: none` — czesc botow pomija pola
   ukryte w ten sposob. Ma byc w drzewie, poza ekranem. */
.sv-form__pulapka {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sv-form__zgoda {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.55;
	color: var(--wp--preset--color--contrast-2);
}

.sv-form__wyslij { grid-column: 1 / -1; justify-self: start; }

.sv-form__alarm,
.sv-form__ok {
	padding: 1rem 1.125rem;
	border-radius: 10px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}

.sv-form__alarm {
	border: 1px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--contrast);
}

.sv-form__alarm ul { margin: .5rem 0 0; padding-left: 1.25rem; }
.sv-form__alarm li { margin: .25rem 0; }

.sv-form__ok {
	max-width: 46rem;
	margin-block: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--success);
	background: #f0f8f3;
	color: var(--wp--preset--color--contrast);
}

.sv-form__ok p { margin: .375rem 0 0; }

@media (max-width: 640px) {
	.sv-form { grid-template-columns: 1fr; }
	.sv-form__wyslij { justify-self: stretch; }
}

/* ---------------------------------------------------------------
   OKNO ZGÓD NA CIASTECZKA

   Nie zaslania calej strony. Klient, ktory wszedl obejrzec produkt,
   ma prawo go zobaczyc — a okno, ktore blokuje wszystko, uczy tylko
   jednego odruchu: klikac "zgadzam sie" bez czytania.

   Oba przyciski decyzji maja te sama wielkosc, te sama grubosc pisma
   i te sama wage wizualna. Odmowa NIE MOZE byc trudniejsza od zgody
   — to nie kwestia gustu, tylko warunek waznosci zgody.
   --------------------------------------------------------------- */
.sv-ciastka {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 9999;
	padding: 1rem;
	transform: translateY(1.5rem);
	opacity: 0;
	transition: transform .22s ease, opacity .22s ease;
}

.sv-ciastka--widoczne { transform: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.sv-ciastka { transition: none; transform: none; }
}

.sv-ciastka__panel {
	max-width: 44rem;
	margin: 0 auto;
	padding: 1.25rem 1.375rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	background: var(--wp--preset--color--base);
	box-shadow: 0 12px 40px rgba(17, 20, 24, .18);
}

.sv-ciastka__tytul {
	margin: 0 0 .375rem;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.3;
}

.sv-ciastka__opis {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	color: var(--wp--preset--color--contrast-2);
}

.sv-ciastka__opis strong { color: var(--wp--preset--color--contrast); }

.sv-ciastka__wybory {
	display: grid;
	gap: .5rem;
	margin-top: 1rem;
}

/*
   PUŁAPKA, W KTÓRĄ WPADŁEM PRZY PIERWSZYM PODGLĄDZIE.

   Atrybut `hidden` chowa element regułą `display: none` z arkusza
   przegladarki. Ale KAZDA regula autora bije arkusz przegladarki,
   niezaleznie od specyficznosci — wiec `display: grid` powyzej
   odslanialo panel ustawien mimo `hidden` w kodzie. Okno zgod
   pokazywalo od razu wszystkie przelaczniki.

   Dlatego kazdy element naszych komponentow, ktoremu nadajemy
   `display`, musi tez umiec sie schowac.
*/
.sv-ciastka [hidden],
.sv-ciastka__wybory[hidden],
.sv-form [hidden] { display: none !important; }

.sv-ciastka__wybor {
	display: flex;
	align-items: flex-start;
	gap: .625rem;
	padding: .75rem .875rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-2);
	cursor: pointer;
}

.sv-ciastka__wybor strong { color: var(--wp--preset--color--contrast); }
.sv-ciastka__wybor input { margin-top: .2rem; accent-color: var(--wp--preset--color--accent); }
.sv-ciastka__wybor:has(input:checked) { border-color: var(--wp--preset--color--accent); }

.sv-ciastka__wybor--stale {
	background: var(--wp--preset--color--base-2);
	cursor: default;
}
.sv-ciastka__wybor--stale:has(input:checked) { border-color: var(--wp--preset--color--border); }

.sv-ciastka__akcje {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .625rem;
	margin-top: 1.125rem;
}

/* Jedna regula na oba przyciski — rozni je wylacznie kolor tla. */
.sv-ciastka__przycisk {
	flex: 0 0 auto;
	min-width: 11rem;
	padding: .75rem 1.25rem;
	border: 1px solid transparent;
	border-radius: 6px;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .15s;
}

.sv-ciastka__przycisk--tak {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}
.sv-ciastka__przycisk--tak:hover { background: var(--wp--preset--color--accent-2); }

.sv-ciastka__przycisk--nie,
.sv-ciastka__przycisk--zapisz {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}
.sv-ciastka__przycisk--nie:hover,
.sv-ciastka__przycisk--zapisz:hover { background: #2b3138; }

.sv-ciastka__wiecej {
	margin-left: auto;
	padding: .75rem .5rem;
	border: 0;
	background: none;
	color: var(--wp--preset--color--contrast-2);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: underline;
	cursor: pointer;
}

.sv-ciastka__wiecej:hover { color: var(--wp--preset--color--contrast); }

.sv-ciastka__przycisk:focus-visible,
.sv-ciastka__wiecej:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.sv-ciastka__stopka {
	margin: .875rem 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-3);
}

@media (max-width: 640px) {
	.sv-ciastka { padding: .625rem; }
	.sv-ciastka__panel { padding: 1.125rem; }
	.sv-ciastka__przycisk { flex: 1 1 100%; min-width: 0; }
	.sv-ciastka__wiecej { margin: .25rem auto 0; }
}

/* Odnosnik w stopce wyglada jak reszta odnosnikow, a nie jak przycisk. */
.sv-footer__list .sv-zgody-link {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

/* ---------------------------------------------------------------
   „WIĘCEJ" — POZOSTAŁE KATEGORIE

   Przycisk wygląda jak pozycja belki, tylko z szarym tłem, żeby było
   widać, że to nie kategoria, lecz wejście do reszty.

   Rozwijak jest zwykłym <details>. Bez skryptu otwiera się i zamyka
   klikiem, obsługuje klawiaturę i czytniki ekranu — więc jedyne, co
   dokłada JavaScript, to zamykanie klikiem obok.
   --------------------------------------------------------------- */
.sv-wiecej {
	position: relative;
	flex-shrink: 0;
}

.sv-wiecej__przycisk {
	display: inline-flex;
	align-items: center;
	gap: .4375rem;
	height: 34px;
	padding: 0 .8125rem;
	border-radius: 6px;
	background: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	list-style: none;          /* Firefox */
}

/* Domyślny trójkącik przeglądarki — mamy własną strzałkę. */
.sv-wiecej__przycisk::-webkit-details-marker { display: none; }

.sv-wiecej__przycisk:hover { background: var(--wp--preset--color--base-3); }

.sv-wiecej__przycisk:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.sv-wiecej__przycisk svg { width: 11px; height: 11px; transition: transform .18s ease; }
.sv-wiecej[open] .sv-wiecej__przycisk svg { transform: rotate(180deg); }

.sv-wiecej__panel {
	position: absolute;
	z-index: 60;
	top: calc(100% + .375rem);
	left: 0;
	min-width: 17rem;
	max-width: min(24rem, calc(100vw - 1.5rem));
	padding: .375rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	background: var(--wp--preset--color--base);
	box-shadow: 0 16px 40px rgba(17, 20, 24, .16);
}

.sv-wiecej__poz {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: .4375rem .625rem;
	border-radius: 7px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.sv-wiecej__poz:hover {
	background: var(--wp--preset--color--base-2);
	text-decoration: none;
}

.sv-wiecej__poz i {
	flex-shrink: 0;
	font-style: normal;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-3);
}

.sv-wiecej__wszystkie {
	display: block;
	margin-top: .25rem;
	padding: .5rem .625rem;
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}
.sv-wiecej__wszystkie:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
	.sv-wiecej__przycisk svg { transition: none; }
}

/* ---------------------------------------------------------------
   LOGOWANIE PRZEZ GOOGLE — oprawa

   Sam przycisk rysuje wtyczka rtCamp. My dajemy mu ramę, odstępy
   i zdanie o danych, a poza tym trzymamy ręce przy sobie: nadpisywanie
   cudzego przycisku na siłę kończy się tym, że po aktualizacji wtyczki
   wygląda dziwnie i nikt nie wie dlaczego.
   --------------------------------------------------------------- */
.sv-google {
	max-width: 26rem;
	margin: 0 auto var(--wp--preset--spacing--40);
	text-align: center;
}

.sv-google__wstep {
	margin: 0 0 .75rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
}

.sv-google__przycisk { display: flex; justify-content: center; }

/* Cudzy przycisk dostaje tylko szerokość i wysokość — reszta jego. */
.sv-google__przycisk > * { width: 100%; }

.sv-google__przycisk a,
.sv-google__przycisk button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .625rem;
	width: 100%;
	min-height: 46px;
	padding: 0 1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	transition: border-color .15s, background-color .15s;
}

.sv-google__przycisk a:hover,
.sv-google__przycisk button:hover {
	border-color: var(--wp--preset--color--contrast-3);
	background: var(--wp--preset--color--base-2);
	text-decoration: none;
}

.sv-google__nota {
	margin: .75rem 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.55;
	color: var(--wp--preset--color--contrast-3);
}

/* Kreska z napisem „albo" — dwie linie i tekst pośrodku, bez obrazków. */
.sv-google__albo {
	display: flex;
	align-items: center;
	gap: .875rem;
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-3);
}

.sv-google__albo::before,
.sv-google__albo::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--wp--preset--color--border);
}

/* ---------------------------------------------------------------
   CENA JEDNOSTKOWA

   Stoi zaraz pod ceną i celowo jest cichsza od niej: to informacja
   do porównywania, a nie druga cena. Gdyby miała ten sam ciężar,
   klient przez sekundę nie wiedziałby, ile właściwie płaci.

   Filtr dokłada ją z priorytetem wcześniejszym niż komunikat Omnibusa,
   więc kolejność pod ceną jest zawsze ta sama: najpierw cena za litr,
   potem najniższa cena z 30 dni.
   --------------------------------------------------------------- */
.sv-jedn {
	margin: .25rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast-2);
}

.sv-jedn span { color: var(--wp--preset--color--contrast-3); }

/* Cena na karcie produktu ma pod sobą duży odstęp — wchodzimy w niego. */
.single-product .wp-block-woocommerce-product-price:has(+ .sv-jedn) {
	margin-bottom: .25rem;
}

.sv-jedn--kafelek {
	font-size: var(--wp--preset--font-size--x-small);
	margin-top: .1875rem;
}

/* Gdy pod ceną stoją obie informacje, druga nie zaczyna nowego akapitu. */
.sv-jedn + .sv-omnibus { margin-top: .125rem; }

.sv-cena .sv-jedn { margin: .375rem 0 0; }

/* ---------------------------------------------------------------
   DANE REJESTROWE W STOPCE

   Art. 206 Kodeksu spółek handlowych: spółka z o.o. musi podawać na
   stronach internetowych firmę i siedzibę, sąd rejestrowy wraz z numerem
   KRS, NIP oraz wysokość kapitału zakładowego.

   Stoją osobnym wierszem pod prawami autorskimi, drobnym drukiem: to
   informacja obowiązkowa, ale nikt jej nie szuka wzrokiem. W kolumnie
   „Kontakt” zajęłaby miejsce rzeczom, których klient faktycznie szuka.
   --------------------------------------------------------------- */
.sv-footer__rejestr {
	order: 1;              /* za prawami autorskimi i ikonami płatności */
	flex-basis: 100%;      /* własny wiersz — reszta zostaje w jednej linii */
	margin: 1rem 0 0;
	line-height: 1.6;
	color: #7c848e;
}

/* Odstęp między grupami danych w kolumnie „Kontakt”. */
.sv-footer__list .sv-footer__odstep { margin-top: 1rem; }

/* Nazwa spółki ma być czytelna, ale nie krzyczeć — to nie nagłówek. */
.sv-footer__list strong { font-weight: 600; color: #fff; }

/* ---------------------------------------------------------------
   INPOST PAY — miejsce na widget

   Wtyczka wstawia swój kontener zaraz za przyciskiem „Dodaj do koszyka",
   czyli do środka `form.cart`. A `form.cart` jest u nas rzędem: ilość
   po lewej, przycisk po prawej.

   Skutek był taki, że kontener stawał się TRZECIM elementem rzędu,
   dostawał `flex: 0 1 auto` i zwężał się do zera. Widget istniał, miał
   nawet wysokość — ale zerową szerokość i wylatywał poza kolumnę.
   W kodzie strony był, na ekranie go nie było.

   Dlatego dajemy mu własny wiersz. `min-width: 0` jest tu równie ważne
   jak szerokość: bez niego element w siatce flex nie potrafi zejść
   poniżej rozmiaru swojej zawartości i potrafi rozepchnąć kolumnę.
   --------------------------------------------------------------- */
.izi-widget-placeholder {
	flex: 1 0 100%;
	width: 100%;
	min-width: 0;
}

form.cart .izi-widget-placeholder { margin-top: .25rem; }

/* ===============================================================
   BLOG

   Trzy widoki, jeden zestaw klas:

     .sv-blog    — lista wpisow (/blog/ i kategorie)
     .sv-wpis…   — karta wpisu (na liscie i w "Przeczytaj także")
     .sv-artykul — pojedynczy artykul

   Karta wpisu powstaje na dwa sposoby: na liscie z blokow WordPressa,
   w "Przeczytaj także" z PHP. Dlatego kazda regula ponizej celuje
   w KLASE `sv-…`, nigdy w strukture (`li > div > h2`) — inaczej jeden
   z dwoch widokow rozjechalby sie przy pierwszej zmianie.
   =============================================================== */

/* --- Naglowek listy ------------------------------------------- */
.sv-blog__glowka {
	max-width: 52rem;
	margin-bottom: var(--wp--preset--spacing--20);
}

.sv-blog__tytul {
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.sv-blog__wstep {
	margin: .625rem 0 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--preset--color--contrast-2);
}

.sv-blog__pigulki { margin-bottom: var(--wp--preset--spacing--30); }

.sv-podkat__poz--wybrana {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}
.sv-podkat__poz--wybrana:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* --- Siatka kart ----------------------------------------------
   `is-layout-grid` ustawia WordPress na bloku petli; my podajemy
   tylko odstepy i minimalna szerokosc kolumny, zeby przy trzech
   kartach nie robily sie paski.
   -------------------------------------------------------------- */
.sv-wpisy {
	gap: var(--wp--preset--spacing--30) 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Karta z bloków (li) i karta z PHP (article) — ten sam kontener */
.sv-wpisy > li,
.sv-wpisy > .sv-wpis,
.sv-wpis {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
}

/* --- Zdjecie --------------------------------------------------- */
.sv-wpis__foto,
.sv-wpis__ramka {
	display: block;
	margin: 0 0 .875rem;
	border-radius: 12px;
	overflow: hidden;
	background: var(--wp--preset--color--base-2);
}

.sv-wpis__foto img,
.sv-wpis__ramka img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform .35s ease;
}

.sv-wpis:hover .sv-wpis__ramka img,
.sv-wpisy > li:hover .sv-wpis__foto img { transform: scale(1.03); }

/*
   Wpis bez zdjecia nie moze zapasc sie w siatce — reszta kart
   podskoczylaby do gory i rzad wygladalby na zepsuty.
*/
.sv-wpis__foto--brak {
	display: block;
	aspect-ratio: 3 / 2;
	border-radius: 12px;
	background: var(--wp--preset--color--base-2);
}

/* --- Tekst karty ----------------------------------------------- */
.sv-wpis__kat,
.sv-wpis__kat a {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}
.sv-wpis__kat { margin: 0 0 .35rem; }
.sv-wpis__kat a { text-decoration: none; }
.sv-wpis__kat a:hover { text-decoration: underline; }

.sv-wpis__tytul {
	margin: 0 0 .45rem;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 650;
	line-height: 1.3;
	letter-spacing: -0.01em;
}
.sv-wpis__tytul a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.sv-wpis__tytul a:hover { color: var(--wp--preset--color--accent); }

.sv-wpis__zajawka {
	margin: 0 0 .625rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	color: var(--wp--preset--color--contrast-2);
}

/*
   Wiersz metadanych jest przyklejony do DOLU karty (`margin-top:auto`),
   zeby przy roznej dlugosci tytulow daty ustawialy sie w jednej linii.
   Bez tego rzad trzech kart wyglada jak trzy przypadkowe wysokosci.
*/
.sv-wpis__meta {
	margin: auto 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-3);
}
.sv-wpis__meta a { color: inherit; text-decoration: none; }

.sv-wpis__kropka,
.sv-czas__kropka { margin: 0 .4rem; }

.sv-czas {
	font-size: inherit;
	color: var(--wp--preset--color--contrast-3);
}

.sv-blog__strony { margin-top: var(--wp--preset--spacing--40); }

/* --- Telefon --------------------------------------------------- */
@media (max-width: 900px) {
	.sv-wpisy { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
	.sv-wpisy { grid-template-columns: 1fr !important; }
	.sv-blog__tytul { font-size: var(--wp--preset--font-size--x-large); }
}

/* ===============================================================
   ARTYKUL
   =============================================================== */
.sv-okruszki {
	margin-bottom: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-3);
}
.sv-okruszki a {
	color: var(--wp--preset--color--contrast-2);
	text-decoration: none;
}
.sv-okruszki a:hover { text-decoration: underline; }
.sv-okruszki__sep { margin: 0 .45rem; }

.sv-artykul__glowka { margin-bottom: var(--wp--preset--spacing--20); }

.sv-artykul__kat,
.sv-artykul__kat a {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}
.sv-artykul__kat { margin: 0 0 .5rem; }
.sv-artykul__kat a { text-decoration: none; }

.sv-artykul__tytul {
	margin: 0;
	font-size: clamp(1.9rem, 4vw, 2.6rem);
	line-height: 1.15;
	letter-spacing: -0.025em;
}

/*
   Zajawka pod tytulem to nie ozdoba — to ten sam tekst, ktory Rank Math
   podaje Google jako opis wyniku. Pokazujac go na stronie widzimy od razu,
   czy brzmi sensownie, zamiast sprawdzac to w podgladzie wtyczki.
*/
.sv-artykul__lead {
	margin: .875rem 0 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--preset--color--contrast-2);
}

.sv-artykul__meta {
	margin: .875rem 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-3);
}

.sv-artykul__foto {
	margin-block: var(--wp--preset--spacing--30);
	border-radius: 16px;
	overflow: hidden;
}
.sv-artykul__foto img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* --- Spis tresci ----------------------------------------------- */
.sv-spis {
	margin-block: var(--wp--preset--spacing--30);
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	background: var(--wp--preset--color--base-2);
}

.sv-spis__tytul {
	margin: 0 0 .625rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
}

/*
   Lista bez numerow, mimo ze to `<ol>`. Znacznik `ol` niesie informacje,
   ze kolejnosc ma znaczenie (i tak czyta to czytnik ekranu), ale numery
   na ekranie tylko konkurowalyby wzrokowo z numeracja w samym artykule.
*/
.sv-spis__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sv-spis__poz { margin: 0 0 .375rem; }
.sv-spis__poz:last-child { margin-bottom: 0; }

/* Podpunkty (h3) wciete — od razu widac, co jest czescia czego */
.sv-spis__poz--3 { padding-left: 1.1rem; }

.sv-spis__poz a {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.sv-spis__poz a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

/* --- Tresc artykulu --------------------------------------------
   Wielkosc pisma i odstepy w tekscie ciaglym sa tu wieksze niz w reszcie
   sklepu. To jedyne miejsce w witrynie, gdzie ktos czyta kilka minut
   z rzedu, a nie skanuje wzrokiem.
   -------------------------------------------------------------- */
.sv-artykul__tresc {
	font-size: 1.0625rem;
	line-height: 1.75;
}

.sv-artykul__tresc > * { margin-block: 1.1rem; }

.sv-artykul__tresc h2 {
	margin-block: 2.25rem .75rem;
	font-size: 1.6rem;
	line-height: 1.25;
	letter-spacing: -0.015em;
	scroll-margin-top: calc(var(--sv-gora, 1rem) + 1rem);
}

.sv-artykul__tresc h3 {
	margin-block: 1.75rem .5rem;
	font-size: 1.25rem;
	line-height: 1.3;
	scroll-margin-top: calc(var(--sv-gora, 1rem) + 1rem);
}

.sv-artykul__tresc ul,
.sv-artykul__tresc ol { padding-left: 1.35rem; }
.sv-artykul__tresc li { margin-block: .4rem; }

.sv-artykul__tresc img { border-radius: 12px; }

.sv-artykul__tresc blockquote {
	margin-inline: 0;
	padding: .25rem 0 .25rem 1.1rem;
	border-left: 3px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast-2);
	font-style: normal;
}

.sv-artykul__tresc a {
	color: var(--wp--preset--color--accent);
	text-underline-offset: 2px;
}

/* --- Produkty pod artykulem ------------------------------------ */
.sv-artykul-produkty {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--border);
}

.sv-artykul-produkty__glowka {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.sv-artykul-produkty__wiecej {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	white-space: nowrap;
}

/* --- Przeczytaj także ------------------------------------------ */
.sv-powiazane {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--border);
}

.sv-powiazane__tytul {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: -0.015em;
}

.sv-powiazane .sv-wpisy {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
	.sv-powiazane .sv-wpisy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.sv-powiazane .sv-wpisy { grid-template-columns: 1fr; }
}

/* ===============================================================
   MOJE KONTO

   Do 0.9.82 ta strona byla goloscia: pionowa lista odnosnikow
   i jeden akapit, wszystko wcisniete w 760 px. Zmierzone: menu
   228 px, tresc 517 px, obok 600 px pustki.

   Uklad jest teraz dwukolumnowy — menu jako kafelek z boku,
   tresc w drugim kafelku obok. Szerokosc daje szablon
   `page-moje-konto.html` (1100 px).

   Klasy sa WooCommerce'owe, nie nasze: `.woocommerce-MyAccount-*`.
   Nie da sie ich zmienic bez nadpisywania kolejnych szablonow,
   a nadpisany szablon to dlug, ktory trzeba splacac przy kazdej
   aktualizacji wtyczki. Stylujemy to, co jest.
   =============================================================== */

.sv-konto__tytul {
	margin-bottom: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--xx-large);
	letter-spacing: -0.02em;
}

.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
}

/*
   TE TRZY KLASY W SELEKTORZE SA KONIECZNE — nie sa ozdoba.

   `woocommerce-layout.css` ustawia `.woocommerce-account
   .woocommerce-MyAccount-navigation { width: 30% }`, czyli dwie klasy.
   Nasza regula z jedna klasa PRZEGRYWA, mimo ze jest w arkuszu pozniej.

   Zmierzone na zywo przed poprawka: kolumny siatki wychodzily prawidlowo
   (250 px i 486 px), ale menu w srodku swojej kolumny mialo 75 px —
   dokladnie 30% z 250. Wygladalo to jak zepsuta siatka, a bylo zwykla
   przegrana na wage selektora.

   To ta sama pulapka, ktora w 0.4.x zjadla pasek miniatur w galerii
   produktu. W CSS nie wygrywa ten, kto jest ostatni.

   `grid-column` podajemy jawnie z drugiego powodu: WooCommerce trzyma
   na tych elementach `float: left` i `float: right`. Dzis w siatce sa
   ignorowane, ale jawne kolumny sprawiaja, ze kolejnosc nie zalezy od
   tego, czy ktos kiedys przestawi te elementy w szablonie.
*/
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation {
	grid-column: 1;
	width: auto;
	float: none;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-content {
	grid-column: 2;
	width: auto;
	float: none;
}

/* --- Menu boczne ------------------------------------------------ */
.woocommerce-MyAccount-navigation {
	padding: 0.5rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	background: var(--wp--preset--color--base);
	position: sticky;
	top: calc(var(--sv-gora, 1rem) + 0.5rem);
}

.woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-MyAccount-navigation li { margin: 0; }

.woocommerce-MyAccount-navigation li > a {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.7rem 0.8rem;
	border-radius: 10px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/*
   Ikony sa maskami, nie obrazkami — dzieki temu biora kolor
   z `background-color`, wiec pozycja wybrana nie potrzebuje
   drugiego kompletu plikow w innym kolorze.
*/
.woocommerce-MyAccount-navigation li > a::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	opacity: .65;
}

.woocommerce-MyAccount-navigation li > a:hover {
	background: var(--wp--preset--color--base-2);
	text-decoration: none;
}

.woocommerce-MyAccount-navigation li.is-active > a {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}
.woocommerce-MyAccount-navigation li.is-active > a::before { opacity: 1; }

/* Wylogowanie odsuniete od reszty — to nie jest sekcja konta */
.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 0.35rem;
	padding-top: 0.35rem;
	border-top: 1px solid var(--wp--preset--color--border);
}
.woocommerce-MyAccount-navigation-link--customer-logout > a { color: var(--wp--preset--color--contrast-2); }

/* --- Tresc ------------------------------------------------------ */
.woocommerce-MyAccount-content {
	padding: 1.5rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	background: var(--wp--preset--color--base);
}

.woocommerce-MyAccount-content > h2:first-child,
.woocommerce-MyAccount-content > h3:first-child { margin-top: 0; }

/* --- Kokpit ----------------------------------------------------- */
.sv-kokpit__powitanie {
	margin: 0 0 1.25rem;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contrast-2);
}
.sv-kokpit__powitanie strong { color: var(--wp--preset--color--contrast); }

.sv-kokpit__wyloguj {
	margin-left: .5rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-3);
}

.sv-kokpit__pusto {
	margin-bottom: 1.5rem;
	padding: 1.5rem;
	border-radius: 12px;
	background: var(--wp--preset--color--base-2);
}

.sv-kokpit__pusto-tytul {
	margin: 0 0 .5rem;
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: -0.015em;
}

.sv-kokpit__pusto-opis {
	margin: 0 0 1.1rem;
	max-width: 40rem;
	color: var(--wp--preset--color--contrast-2);
	line-height: 1.6;
}

.sv-kokpit__pusto-akcje {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 0;
}

.sv-kokpit__przycisk {
	display: inline-block;
	padding: .7rem 1.25rem;
	border-radius: 10px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-weight: 600;
	text-decoration: none;
}
.sv-kokpit__przycisk:hover { background: var(--wp--preset--color--accent-2); }

.sv-kokpit__link {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
}

.sv-kokpit__kafelki {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .875rem;
}

.sv-kokpit__kafelek {
	display: block;
	padding: 1.1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease;
}
.sv-kokpit__kafelek:hover {
	border-color: var(--wp--preset--color--contrast-3);
	background: var(--wp--preset--color--base-2);
	text-decoration: none;
}

.sv-kokpit__kafelek-tytul {
	display: block;
	margin-bottom: .3rem;
	font-weight: 650;
	color: var(--wp--preset--color--contrast);
}

.sv-kokpit__kafelek-opis {
	display: block;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-2);
}

/* --- Tabela zamowien -------------------------------------------- */
.woocommerce-orders-table,
.woocommerce-MyAccount-content table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
}

.woocommerce-orders-table th,
.woocommerce-MyAccount-content table.shop_table th {
	padding: .6rem .75rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-align: left;
	color: var(--wp--preset--color--contrast-2);
}

.woocommerce-orders-table td,
.woocommerce-MyAccount-content table.shop_table td {
	padding: .85rem .75rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--small);
	vertical-align: middle;
}

.woocommerce-orders-table tr:last-child td { border-bottom: 0; }

/* --- Adresy ------------------------------------------------------ */
.woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.woocommerce-Address {
	padding: 1.1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	width: auto;
	float: none;
}

.woocommerce-Address-title { margin-bottom: .5rem; }
.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
}
.woocommerce-Address address {
	font-style: normal;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast-2);
}

/* --- Formularze --------------------------------------------------
   Konto ma trzy formularze (adresy, dane, haslo) i wszystkie chodza
   po klasach WooCommerce. Wyrownujemy je do reszty sklepu.
   ----------------------------------------------------------------- */
.woocommerce-MyAccount-content .woocommerce-input-wrapper { display: block; }

.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="tel"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content .select2-selection {
	width: 100%;
	min-height: 44px;
	padding: .55rem .75rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	background: var(--wp--preset--color--base);
	font-size: 1rem;
}

.woocommerce-MyAccount-content label {
	display: block;
	margin-bottom: .3rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.woocommerce-MyAccount-content .form-row { margin-bottom: 1rem; }

.woocommerce-MyAccount-content fieldset {
	margin-top: 1.5rem;
	padding: 1.1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
}
.woocommerce-MyAccount-content fieldset legend {
	padding: 0 .4rem;
	font-weight: 650;
}

/* --- Telefon ----------------------------------------------------- */
@media (max-width: 900px) {

	.woocommerce-account .woocommerce {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	/* Znowu trzy klasy — `woocommerce-smallscreen.css` celuje dwiema. */
	.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce .woocommerce-MyAccount-content {
		grid-column: 1;
		width: auto;
		float: none;
	}

	/*
	   Menu przestaje byc kolumna i staje sie paskiem przewijanym
	   w poziomie — tak samo jak podkategorie w katalogu. Pionowa lista
	   szesciu pozycji na telefonie spycha tresc konta pod ekran.
	*/
	.woocommerce-MyAccount-navigation {
		position: static;
		padding: 0;
		border: 0;
		background: none;
	}
	.woocommerce-MyAccount-navigation ul {
		display: flex;
		gap: .4rem;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: .25rem;
	}
	.woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }

	.woocommerce-MyAccount-navigation li > a {
		white-space: nowrap;
		border: 1px solid var(--wp--preset--color--border);
		border-radius: 100px;
		padding: .5rem .875rem;
	}

	.woocommerce-MyAccount-navigation-link--customer-logout {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}

	.woocommerce-MyAccount-content { padding: 1.1rem; }

	.sv-kokpit__kafelki,
	.woocommerce-Addresses { grid-template-columns: 1fr; }
}

.woocommerce-MyAccount-navigation-link--dashboard > a::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.5%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%273%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.5%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%2714%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.5%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%2714%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.5%27%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.5%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%273%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.5%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%2714%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.5%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%2714%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.5%27%2F%3E%3C%2Fsvg%3E"); }

.woocommerce-MyAccount-navigation-link--orders > a::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%208l-9-5-9%205v8l9%205%209-5V8z%27%2F%3E%3Cpath%20d%3D%27M3%208l9%205%209-5%27%2F%3E%3Cpath%20d%3D%27M12%2013v8%27%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%208l-9-5-9%205v8l9%205%209-5V8z%27%2F%3E%3Cpath%20d%3D%27M3%208l9%205%209-5%27%2F%3E%3Cpath%20d%3D%27M12%2013v8%27%2F%3E%3C%2Fsvg%3E"); }

.woocommerce-MyAccount-navigation-link--edit-address > a::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%2010c0%206-8%2012-8%2012s-8-6-8-12a8%208%200%201%201%2016%200z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2710%27%20r%3D%273%27%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%2010c0%206-8%2012-8%2012s-8-6-8-12a8%208%200%201%201%2016%200z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2710%27%20r%3D%273%27%2F%3E%3C%2Fsvg%3E"); }

.woocommerce-MyAccount-navigation-link--edit-account > a::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%2021v-2a4%204%200%200%200-4-4H8a4%204%200%200%200-4%204v2%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%277%27%20r%3D%274%27%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%2021v-2a4%204%200%200%200-4-4H8a4%204%200%200%200-4%204v2%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%277%27%20r%3D%274%27%2F%3E%3C%2Fsvg%3E"); }

.woocommerce-MyAccount-navigation-link--customer-logout > a::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h4%27%2F%3E%3Cpath%20d%3D%27M16%2017l5-5-5-5%27%2F%3E%3Cpath%20d%3D%27M21%2012H9%27%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h4%27%2F%3E%3Cpath%20d%3D%27M16%2017l5-5-5-5%27%2F%3E%3Cpath%20d%3D%27M21%2012H9%27%2F%3E%3C%2Fsvg%3E"); }

.woocommerce-MyAccount-navigation-link--downloads > a::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203v12%27%2F%3E%3Cpath%20d%3D%27M7%2010l5%205%205-5%27%2F%3E%3Cpath%20d%3D%27M4%2021h16%27%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203v12%27%2F%3E%3Cpath%20d%3D%27M7%2010l5%205%205-5%27%2F%3E%3Cpath%20d%3D%27M4%2021h16%27%2F%3E%3C%2Fsvg%3E"); }