/*
Theme Name: Skietki Child
Theme URI: https://skietki.pl
Description: Motyw potomny Blocksy dla skietki.pl — skandynawski minimal, priorytet mobile.
Author: xpanda
Template: blocksy
Version: 9.53.0
Text Domain: skietki-child
*/

/* ==========================================================================
   1. DESIGN TOKENY
   Jedno zrodlo prawdy. Zmiana koloru czy skali odbywa sie tutaj, nie w
   komponentach nizej.
   ========================================================================== */

:root {
	/* Kolory. Minimal: produkt jest jedynym mocnym zrodlem koloru,
	   interfejs schodzi na drugi plan. */
	--sk-ink: #191817;          /* tekst glowny */
	--sk-ink-soft: #6E6A66;     /* tekst drugorzedny */
	--sk-ink-faint: #767270;    /* podpisy, metadane — 4.76:1 na bieli (WCAG AA) */
	--sk-bg: #FFFFFF;
	--sk-bg-soft: #F7F6F4;      /* tla sekcji */
	--sk-mist: #EDF0EE;         /* szalwiowa mgielka - akcent tla */
	--sk-line: #E5E2DE;         /* obramowania */
	--sk-line-strong: #CFCAC4;
	--sk-accent: #191817;       /* CTA */
	--sk-accent-hover: #000000;
	--sk-highlight: #9C5138;    /* terakota — 5.76:1 na bieli, biel na nim 5.76:1 */
	--sk-success: #4A7C59;

	/* Typografia — systemowy stos, zero dodatkowych requestow.
	   Segoe UI / SF Pro / Roboto to czyste groteski pasujace do minimalu. */
	--sk-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;

	/* Skala plynna: rosnie z szerokoscia ekranu, wiec nie potrzeba
	   breakpointow dla samego tekstu. */
	--sk-text-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8rem);
	--sk-text-sm: clamp(0.85rem, 0.82rem + 0.15vw, 0.925rem);
	--sk-text-base: clamp(0.95rem, 0.92rem + 0.2vw, 1.05rem);
	--sk-text-lg: clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem);
	--sk-text-xl: clamp(1.35rem, 1.15rem + 0.9vw, 1.85rem);
	--sk-text-2xl: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem);
	--sk-text-3xl: clamp(2.1rem, 1.5rem + 2.8vw, 3.4rem);

	--sk-leading-tight: 1.18;
	--sk-leading-snug: 1.35;
	--sk-leading: 1.65;         /* duzo swiatla — kluczowe dla minimalu */

	--sk-tracking-tight: -0.02em;
	--sk-tracking-wide: 0.08em;

	/* Rytm pionowy — skala 4px */
	--sk-1: 0.25rem;
	--sk-2: 0.5rem;
	--sk-3: 0.75rem;
	--sk-4: 1rem;
	--sk-5: 1.5rem;
	--sk-6: 2rem;
	--sk-7: 3rem;
	--sk-8: 4rem;
	--sk-9: 6rem;

	/* Skala promieni. Sprzedajemy produkt miekki i kolorowy, a ton marki
	   jest luzny - ostre 4 px czytalo sie jak interfejs bankowy.
	   Przyciski dostaja pelna pigulke (--sk-radius-pill), pola formularzy
	   celowo nie: gdyby oba byly pigulkami, klient musialby zgadywac,
	   w co sie klika, a w co wpisuje. */
	--sk-radius-sm: 10px;
	--sk-radius: 16px;
	--sk-radius-lg: 24px;
	--sk-radius-pill: 999px;

	--sk-shadow-sm: 0 1px 2px rgba(25, 24, 23, 0.04);
	--sk-shadow: 0 4px 16px rgba(25, 24, 23, 0.06);
	--sk-shadow-lg: 0 12px 32px rgba(25, 24, 23, 0.10);

	--sk-ease: cubic-bezier(0.2, 0, 0.2, 1);
	--sk-duration: 180ms;

	/* Minimalny rozmiar celu dotykowego wg WCAG 2.2 */
	--sk-touch: 44px;
}

/* Nadpisanie palety Blocksy, zeby motyw rodzica mowil tym samym jezykiem
   i nie trzeba bylo walczyc z nim specyficznoscia w kazdym komponencie. */
:root {
	--theme-font-family: var(--sk-font);
	--theme-text-color: var(--sk-ink);
	--theme-headings-color: var(--sk-ink);
	--theme-link-initial-color: var(--sk-ink);
	--theme-link-hover-color: var(--sk-highlight);
	--theme-border-color: var(--sk-line);
	--theme-palette-color-1: var(--sk-accent);
	--theme-palette-color-2: var(--sk-highlight);
	--theme-palette-color-3: var(--sk-ink);
	--theme-palette-color-4: var(--sk-ink-soft);
	--theme-palette-color-5: var(--sk-line);
	--theme-palette-color-6: var(--sk-bg-soft);
	--theme-palette-color-7: var(--sk-mist);
	--theme-palette-color-8: var(--sk-bg);
	--theme-button-background-initial-color: var(--sk-accent);
	--theme-button-background-hover-color: var(--sk-accent-hover);
	--theme-button-text-initial-color: #FFFFFF;
	--theme-button-text-hover-color: #FFFFFF;
	--theme-content-spacing: var(--sk-5);
}

/* ==========================================================================
   2. PODSTAWY
   ========================================================================== */

body {
	font-family: var(--sk-font);
	font-size: var(--sk-text-base);
	line-height: var(--sk-leading);
	color: var(--sk-ink);
	background: var(--sk-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .woocommerce-loop-product__title {
	font-family: var(--sk-font);
	font-weight: 500;               /* minimal nie krzyczy grubosciami */
	letter-spacing: var(--sk-tracking-tight);
	line-height: var(--sk-leading-tight);
	color: var(--sk-ink);
}

h1 { font-size: var(--sk-text-3xl); }
h2 { font-size: var(--sk-text-2xl); }
h3 { font-size: var(--sk-text-xl); }

p { line-height: var(--sk-leading); }

/* Dostepnosc: widoczny focus. Usuwanie outline'u to najczestszy
   grzech "ladnych" motywow — tu zostaje, tylko w wersji estetycznej. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--sk-highlight);
	outline-offset: 3px;
	border-radius: var(--sk-radius-sm);
}

/* Kazdy interaktywny element spelnia minimum dotykowe. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wc-block-components-button,
.sk-btn {
	min-height: var(--sk-touch);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   3. PRZYCISKI
   ========================================================================== */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wc-block-components-button {
	font-family: var(--sk-font);
	font-size: var(--sk-text-sm);
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.2;
	padding: var(--sk-3) var(--sk-5);
	border: 1px solid var(--sk-accent);
	border-radius: var(--sk-radius-sm);
	background: var(--sk-accent);
	color: #FFFFFF;
	cursor: pointer;
	transition: background var(--sk-duration) var(--sk-ease),
		border-color var(--sk-duration) var(--sk-ease),
		transform var(--sk-duration) var(--sk-ease);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sk-2);
	text-decoration: none;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--sk-accent-hover);
	border-color: var(--sk-accent-hover);
	color: #FFFFFF;
}

.woocommerce a.button:active,
.woocommerce button.button:active {
	transform: translateY(1px);
}

/* Wariant drugorzedny — obrys zamiast wypelnienia. */
.sk-btn--ghost,
.woocommerce a.button.sk-btn--ghost {
	background: transparent;
	color: var(--sk-ink);
	border-color: var(--sk-line-strong);
}

.sk-btn--ghost:hover {
	background: var(--sk-bg-soft);
	border-color: var(--sk-ink);
	color: var(--sk-ink);
}

/* ==========================================================================
   4. SIATKA PRODUKTOW
   ========================================================================== */

.woocommerce ul.products {
	display: grid;
	gap: var(--sk-5) var(--sk-4);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 700px) {
	.woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sk-6) var(--sk-5); }
}

@media (min-width: 1100px) {
	.woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.woocommerce ul.products li.product {
	margin: 0 !important;
	width: 100% !important;
	float: none !important;
	position: relative;
	display: flex;
	flex-direction: column;
}

/* Obraz: staly proporcjonalny kadr, zeby siatka nie skakala przy
   zdjeciach o roznych wymiarach — a takie przyjda od dostawcy. */
.woocommerce ul.products li.product a img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	height: auto;
	border-radius: var(--sk-radius);
	background: var(--sk-bg-soft);
	margin-bottom: var(--sk-3);
	transition: opacity var(--sk-duration) var(--sk-ease);
}

.woocommerce ul.products li.product:hover a img { opacity: 0.88; }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--sk-text-base);
	font-weight: 500;
	line-height: var(--sk-leading-snug);
	letter-spacing: 0;
	padding: 0;
	margin: 0 0 var(--sk-1);
	color: var(--sk-ink);
}

.woocommerce ul.products li.product .price {
	font-size: var(--sk-text-sm);
	font-weight: 400;
	color: var(--sk-ink-soft);
	margin-bottom: var(--sk-3);
}

/* Na mobile przycisk w siatce tylko zabiera miejsce i rozprasza —
   dotkniecie kafla prowadzi do karty produktu. */
@media (max-width: 699px) {
	.woocommerce ul.products li.product .button { display: none; }
}

/* ==========================================================================
   5. KARTA PRODUKTU
   ========================================================================== */

.woocommerce div.product .product_title {
	font-size: var(--sk-text-2xl);
	font-weight: 500;
	margin-bottom: var(--sk-2);
	text-wrap: balance;
}

/* Na waskim ekranie tytul w dwoch wierszach zjadal cala pierwsza
   pozycje po zdjeciu. Mniejszy stopien mimo dwoch wierszy czyta sie
   lepiej niz naglowek na pol ekranu. */
@media (max-width: 480px) {
	.woocommerce div.product .product_title { font-size: var(--sk-text-xl); }
}

.woocommerce div.product .price,
.woocommerce div.product span.price {
	font-size: var(--sk-text-xl);
	font-weight: 400;
	color: var(--sk-ink);
	letter-spacing: var(--sk-tracking-tight);
}

.woocommerce div.product .summary > .price,
.woocommerce div.product .entry-summary > .price { margin: 0 0 var(--sk-3); }

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--sk-ink-soft);
	font-size: var(--sk-text-lg);
	line-height: var(--sk-leading-snug);
	margin: var(--sk-3) 0 var(--sk-4);
}

@media (max-width: 480px) {
	.woocommerce div.product .woocommerce-product-details__short-description {
		font-size: var(--sk-text-base);
		margin: var(--sk-2) 0 var(--sk-3);
	}
}

.woocommerce div.product form.cart {
	margin-top: var(--sk-5);
	display: flex;
	gap: var(--sk-3);
	flex-wrap: wrap;
	align-items: stretch;
}

.woocommerce div.product form.cart .button {
	flex: 1 1 150px;
	min-width: 0;
	font-size: var(--sk-text-base);
	padding: var(--sk-4) var(--sk-5);
}

/* Licznik sztuk.
   Motyw pozycjonuje "+" i "-" absolutnie wzgledem .quantity, a my mielismy
   wezsze pole - przez co "+" wychodzil poza ramke i wygladal jak usterka.
   Ramke nosi kontener, pole ja wypelnia, a oba przyciski maja pelna
   wysokosc pola: 44 px celu dotykowego zamiast 22 px. */
.woocommerce .quantity {
	position: relative;
	display: block;
	width: 132px;
	min-height: var(--sk-pole);
	flex: 0 0 auto;
	border: 1px solid var(--sk-line-strong);
	border-radius: var(--sk-radius-sm);
	background: var(--sk-bg);
	overflow: hidden;
}

.woocommerce .quantity input.qty {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0 42px;
	text-align: center;
	border: 0;
	border-radius: 0;
	font-size: var(--sk-text-base);
	color: var(--sk-ink);
	background: transparent;
	-moz-appearance: textfield;
	appearance: textfield;
}

.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.woocommerce .quantity .ct-increase,
.woocommerce .quantity .ct-decrease {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 42px;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sk-ink);
	cursor: pointer;
}

.woocommerce .quantity .ct-decrease { left: 0; right: auto; }
.woocommerce .quantity .ct-increase { right: 0; left: auto; }

/* Licznik i przycisk stoja w jednym rzedzie - osobny wiersz na sam
   licznik zabieral pol ekranu telefonu i rozbijal blok zakupu. */
/* Motyw pakuje licznik i przycisk we wlasny kontener .ct-cart-actions,
   wiec ukladem rzadzi on, a nie sam formularz - bez tego przycisk nie
   rozciagal sie na wolne miejsce. */
.woocommerce div.product form.cart .ct-cart-actions {
	display: flex;
	align-items: stretch;
	gap: var(--sk-3);
	flex: 1 1 100%;
	width: 100%;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
	flex: 1 1 150px;
	min-width: 0;
	min-height: var(--sk-pole);
	margin: 0;
	white-space: nowrap;
}

/* Na waskim ekranie licznik oddaje szerokosc przyciskowi, zeby
   "Dodaj do koszyka" zmiescilo sie w jednym wierszu i oba elementy
   mialy te sama wysokosc. */
@media (max-width: 480px) {
	.woocommerce .quantity { width: 108px; }
	.woocommerce .quantity input.qty { padding: 0 34px; }
	.woocommerce .quantity .ct-increase,
	.woocommerce .quantity .ct-decrease { width: 34px; }
	.woocommerce div.product form.cart .button { padding: var(--sk-3) var(--sk-4); }
}

/* Komunikat o dostawie z functions.php */
/* Czas wysylki to informacja o dostepnosci, a nie pole do wypelnienia.
   W szarym prostokacie czytal sie jak nieaktywny input, wiec zostaje
   sam tekst z zielona kropka - tym samym sygnalem co "w magazynie". */
.skietki-dostawa {
	display: flex;
	align-items: center;
	gap: var(--sk-2);
	font-size: var(--sk-text-sm);
	color: var(--sk-ink-soft);
	margin: 0 0 var(--sk-4);
}

.skietki-dostawa::before {
	content: "";
	width: 8px;
	height: 8px;
	flex: 0 0 8px;
	border-radius: 50%;
	background: var(--sk-success, #2F7A4F);
}

/* Sygnaly zaufania — nowy sklep nie ma marki, wiec musi ja zastapic
   konkretem: czas wysylki, zwroty, bezpieczna platnosc. */
.sk-trust {
	list-style: none;
	margin: var(--sk-5) 0 0;
	padding: var(--sk-4) 0 0;
	border-top: 1px solid var(--sk-line);
	display: grid;
	gap: var(--sk-2);
}

.sk-trust li {
	font-size: var(--sk-text-sm);
	color: var(--sk-ink-soft);
	display: flex;
	align-items: center;
	gap: var(--sk-2);
	margin: 0;
}

.sk-trust li::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--sk-success);
	flex-shrink: 0;
}

/* ==========================================================================
   6. STICKY CTA — MOBILE
   Najwazniejszy pojedynczy element konwersyjny na telefonie: cena i
   przycisk zawsze w zasiegu kciuka, bez przewijania w gore.
   ========================================================================== */

.sk-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	display: none;
	align-items: center;
	gap: var(--sk-3);
	padding: var(--sk-3) var(--sk-4);
	padding-bottom: calc(var(--sk-3) + env(safe-area-inset-bottom, 0px));
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-top: 1px solid var(--sk-line);
	transform: translateY(100%);
	transition: transform 220ms var(--sk-ease);
}

.sk-sticky-cta.is-visible { transform: translateY(0); }

.sk-sticky-cta__price {
	font-size: var(--sk-text-lg);
	font-weight: 500;
	color: var(--sk-ink);
	white-space: nowrap;
}

.sk-sticky-cta__btn {
	flex: 1;
	min-height: var(--sk-touch);
	border: none;
	border-radius: var(--sk-radius-sm);
	background: var(--sk-accent);
	color: #FFFFFF;
	font-family: var(--sk-font);
	font-size: var(--sk-text-base);
	font-weight: 500;
	cursor: pointer;
	transition: background var(--sk-duration) var(--sk-ease);
}

.sk-sticky-cta__btn:hover { background: var(--sk-accent-hover); }

@media (max-width: 899px) {
	.sk-sticky-cta { display: flex; }
	body.sk-has-sticky-cta { padding-bottom: 72px; }
}

/* ==========================================================================
   7. FAKE DOOR — WZORY W PRZYGOTOWANIU
   Brak towaru nie moze wygladac jak blad sklepu. To ma byc zaproszenie.
   ========================================================================== */

.sk-drop-badge {
	position: absolute;
	top: var(--sk-3);
	left: var(--sk-3);
	z-index: 2;
	font-size: var(--sk-text-xs);
	font-weight: 500;
	letter-spacing: var(--sk-tracking-wide);
	text-transform: uppercase;
	color: var(--sk-ink);
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(6px);
	padding: var(--sk-1) var(--sk-2);
	border-radius: var(--sk-radius-sm);
	box-shadow: var(--sk-shadow-sm);
}

.woocommerce div.product .stock.out-of-stock {
	font-size: var(--sk-text-sm);
	color: var(--sk-ink-soft);
	background: var(--sk-mist);
	border-radius: var(--sk-radius-sm);
	padding: var(--sk-3) var(--sk-4);
	margin-bottom: var(--sk-4);
}

/* Formularz zapisu (wtyczka XootiX) dociagniety do reszty systemu. */
.xoo-wl-container,
[class*="xoo-wl"] {
	font-family: var(--sk-font) !important;
}

.xoo-wl-btn,
[class*="xoo-wl"] button,
[class*="xoo-wl"] input[type="submit"] {
	min-height: var(--sk-touch) !important;
	background: var(--sk-accent) !important;
	color: #FFFFFF !important;
	border: none !important;
	border-radius: var(--sk-radius-pill) !important;
	font-family: var(--sk-font) !important;
	font-size: var(--sk-text-base) !important;
	font-weight: 500 !important;
	padding: var(--sk-3) var(--sk-5) !important;
	transition: background var(--sk-duration) var(--sk-ease) !important;
}

[class*="xoo-wl"] input[type="email"],
[class*="xoo-wl"] input[type="text"] {
	min-height: var(--sk-touch) !important;
	border: 1px solid var(--sk-line-strong) !important;
	border-radius: var(--sk-radius) !important;
	padding: var(--sk-3) var(--sk-4) !important;
	font-family: var(--sk-font) !important;
	font-size: 16px !important;   /* 16px zapobiega auto-zoomowi na iOS */
	color: var(--sk-ink) !important;
	background: var(--sk-bg) !important;
}

/* ==========================================================================
   8. FORMULARZE I CHECKOUT
   ========================================================================== */

/* iOS powieksza strone przy focusie na polu ponizej 16px.
   To jeden z najczestszych bledow UX mobilnego w sklepach. */
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], input[type="search"],
select, textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	font-size: 16px;
	font-family: var(--sk-font);
	min-height: var(--sk-touch);
	padding: var(--sk-3) var(--sk-4);
	border: 1px solid var(--sk-line-strong);
	border-radius: var(--sk-radius-sm);
	background: var(--sk-bg);
	color: var(--sk-ink);
	width: 100%;
	transition: border-color var(--sk-duration) var(--sk-ease);
}

input:focus, select:focus, textarea:focus,
.woocommerce form .form-row input.input-text:focus {
	border-color: var(--sk-ink);
}

.woocommerce form .form-row label {
	font-size: var(--sk-text-sm);
	color: var(--sk-ink-soft);
	margin-bottom: var(--sk-1);
	display: block;
}

.woocommerce-checkout #payment {
	background: var(--sk-bg-soft);
	border-radius: var(--sk-radius);
	border: 1px solid var(--sk-line);
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--sk-line);
	padding: var(--sk-4);
}

.woocommerce-checkout #payment div.form-row.place-order {
	padding: var(--sk-4);
}

#place_order {
	width: 100%;
	min-height: 52px;
	font-size: var(--sk-text-lg) !important;
}

/* Komunikaty */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top: none;
	border-left: 3px solid var(--sk-ink);
	background: var(--sk-bg-soft);
	border-radius: var(--sk-radius-sm);
	font-size: var(--sk-text-sm);
	color: var(--sk-ink);
	padding: var(--sk-4) var(--sk-5);
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }

.woocommerce-message { border-left-color: var(--sk-success); }
.woocommerce-error { border-left-color: var(--sk-highlight); }

/* ==========================================================================
   9. DROBIAZGI
   ========================================================================== */

.woocommerce .woocommerce-breadcrumb {
	font-size: var(--sk-text-sm);
	color: var(--sk-ink-faint);
	margin-bottom: var(--sk-5);
}

.woocommerce .woocommerce-breadcrumb a { color: var(--sk-ink-soft); }

/* Zdjecia w galerii produktu — spojny kadr */
.woocommerce div.product div.images img {
	border-radius: var(--sk-radius);
	background: var(--sk-bg-soft);
}

/* Szkielet dla obrazow, ktore sie jeszcze nie zaladowaly (lazy loading) */
.woocommerce img[loading="lazy"] { background: var(--sk-bg-soft); }

/* ==========================================================================
   10. STOPKA PRAWNA
   Dane sprzedawcy i dokumenty - wymagane przez przepisy i sprawdzane
   przez operatorow platnosci przy weryfikacji sklepu.
   ========================================================================== */

.sk-legal-footer {
	background: var(--sk-bg-soft);
	border-top: 1px solid var(--sk-line);
	padding: var(--sk-7) var(--sk-5) var(--sk-5);
	margin-top: var(--sk-8);
	font-size: var(--sk-text-sm);
	color: var(--sk-ink-soft);
}

.sk-legal-footer__inner {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	gap: var(--sk-6);
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {
	.sk-legal-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sk-7); }
}

.sk-legal-footer__brand {
	font-size: var(--sk-text-lg);
	font-weight: 500;
	color: var(--sk-ink);
	letter-spacing: var(--sk-tracking-tight);
	margin: 0 0 var(--sk-3);
}

.sk-legal-footer__seller {
	margin: 0;
	line-height: var(--sk-leading-snug);
	color: var(--sk-ink-faint);
}

.sk-legal-footer__heading {
	font-size: var(--sk-text-xs);
	font-weight: 500;
	letter-spacing: var(--sk-tracking-wide);
	text-transform: uppercase;
	color: var(--sk-ink);
	margin: 0 0 var(--sk-3);
}

.sk-legal-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sk-2);
}

.sk-legal-footer li { margin: 0; }

.sk-legal-footer a {
	color: var(--sk-ink-soft);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--sk-duration) var(--sk-ease),
		border-color var(--sk-duration) var(--sk-ease);
	display: inline-block;
	min-height: 24px;
}

.sk-legal-footer a:hover {
	color: var(--sk-ink);
	border-bottom-color: var(--sk-ink);
}

.sk-legal-footer__copy {
	max-width: 1100px;
	margin: var(--sk-6) auto 0;
	padding-top: var(--sk-4);
	border-top: 1px solid var(--sk-line);
	font-size: var(--sk-text-xs);
	color: var(--sk-ink-faint);
}

/* Pasek zakupu nie moze zaslaniac stopki na telefonie. */
@media (max-width: 899px) {
	body.sk-has-sticky-cta .sk-legal-footer { padding-bottom: calc(var(--sk-5) + 72px); }
}

/* ==========================================================================
   11. SYGNET MARKI
   ========================================================================== */

.sk-logo {
	display: inline-flex;
	align-items: center;
	gap: var(--sk-2);
	text-decoration: none;
	color: var(--sk-ink);
	line-height: 1;
}

.sk-logo__mark {
	display: block;
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	/* Paski w kolorze tla, zeby sygnet czytal sie jak wycinanka. */
	--stripe-1: var(--sk-bg);
	--stripe-2: var(--sk-bg);
}

.sk-logo__mark svg {
	display: block;
	width: 100%;
	height: 100%;
}

.sk-logo__word {
	font-size: 1.3rem;
	font-weight: 500;
	letter-spacing: var(--sk-tracking-tight);
	color: var(--sk-ink);
}

.sk-logo:hover .sk-logo__mark { color: var(--sk-highlight); }

@media (max-width: 480px) {
	.sk-logo__word { font-size: 1.15rem; }
	.sk-logo__mark { width: 26px; height: 26px; }
}

/* Sygnet wstawiony przed nazwa strony w naglowku Blocksy.
   Realizowany w CSS, bo motyw renderuje branding wlasnym komponentem
   i nie korzysta z get_custom_logo(). */
.site-title-container {
	display: flex;
	align-items: center;
	gap: var(--sk-2);
}

.site-title-container::before {
	content: "";
	display: block;
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	background-image: url("assets/mark.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.site-title,
.site-title a {
	font-weight: 500 !important;
	letter-spacing: var(--sk-tracking-tight);
	color: var(--sk-ink) !important;
	text-decoration: none;
}

@media (max-width: 480px) {
	.site-title-container::before { width: 25px; height: 25px; }
}

/* Stopka Blocksy ukryta - jej jedyna trescia byl domyslny copyright motywu,
   a duplikowala sie z nasza stopka prawna. */
.ct-footer { display: none !important; }

/* ==========================================================================
   12. STRONA GLOWNA
   ========================================================================== */

.sk-hero {
	max-width: 720px;
	margin: 0 auto;
	padding: var(--sk-8) var(--sk-5) var(--sk-7);
	text-align: center;
}

.sk-hero__title {
	font-size: var(--sk-text-3xl);
	font-weight: 500;
	line-height: var(--sk-leading-tight);
	letter-spacing: var(--sk-tracking-tight);
	color: var(--sk-ink);
	margin: 0 0 var(--sk-4);
	text-wrap: balance;
}

.sk-hero__lead {
	font-size: var(--sk-text-lg);
	line-height: var(--sk-leading-snug);
	color: var(--sk-ink-soft);
	margin: 0 auto var(--sk-6);
	max-width: 34rem;
	text-wrap: pretty;
}

.sk-hero__actions { margin: 0; }

.sk-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--sk-touch);
	padding: var(--sk-3) var(--sk-7);
	background: var(--sk-accent);
	color: #FFFFFF;
	font-size: var(--sk-text-base);
	font-weight: 500;
	text-decoration: none;
	border-radius: var(--sk-radius-sm);
	transition: background var(--sk-duration) var(--sk-ease);
}

.sk-hero__btn:hover,
.sk-hero__btn:focus {
	background: var(--sk-accent-hover);
	color: #FFFFFF;
}

.sk-section {
	max-width: 1100px;
	margin: 0 auto;
	padding: var(--sk-7) var(--sk-5) var(--sk-4);
}

.sk-section__title {
	font-size: var(--sk-text-xl);
	font-weight: 500;
	letter-spacing: var(--sk-tracking-tight);
	color: var(--sk-ink);
	margin: 0 0 var(--sk-2);
}

.sk-section__lead {
	font-size: var(--sk-text-sm);
	color: var(--sk-ink-soft);
	margin: 0;
	max-width: 46rem;
}

.sk-section--why {
	background: var(--sk-bg-soft);
	max-width: none;
	margin-top: var(--sk-8);
	padding: var(--sk-8) var(--sk-5);
}

.sk-section--why .sk-section__title {
	max-width: 1100px;
	margin: 0 auto var(--sk-6);
}

.sk-why {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	gap: var(--sk-6);
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {
	.sk-why { grid-template-columns: repeat(3, 1fr); gap: var(--sk-7); }
}

.sk-why__item h3 {
	font-size: var(--sk-text-base);
	font-weight: 500;
	color: var(--sk-ink);
	margin: 0 0 var(--sk-2);
	letter-spacing: 0;
}

.sk-why__item p {
	font-size: var(--sk-text-sm);
	color: var(--sk-ink-soft);
	line-height: var(--sk-leading);
	margin: 0;
}

/* Siatki produktow wstawiane shortcodem na stronie glownej. */
.woocommerce .sk-products-instock,
.woocommerce .sk-products-waitlist,
.home ul.products {
	max-width: 1100px;
	margin: 0 auto var(--sk-6);
	padding: 0;
}

/* Blocksy potrafi zawezic kontener tresci na stronie glownej -
   sekcje maja rozciagac sie na pelna szerokosc. */
.home .entry-content > .sk-hero,
.home .entry-content > .sk-section {
	max-width: none;
}

.home .entry-content > .sk-section:not(.sk-section--why) > * {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   13. POPRAWKI PO AUDYCIE WIZUALNYM
   ========================================================================== */

/* Zastepcze grafiki maja wypelniac kadr tak samo jak zdjecia. */
.sk-placeholder {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--sk-radius);
}

/* Tytul strony na stronie glownej dubluje naglowek hero. */
.home .page-title,
.home .entry-header,
.home .ct-page-title { display: none !important; }

/* Kategorie pod kaflem to szum - nie pomagaja wybrac prezentu. */
.woocommerce ul.products li.product .ct-product-categories,
.woocommerce ul.products li.product .posted_in,
.woocommerce ul.products li.product .product_meta { display: none !important; }

/* Tytul produktu ma czytac sie jak nazwa, nie jak surowy odnosnik. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	text-decoration: none !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	min-height: 2.7em;          /* rowna linia bazowa cen mimo roznych dlugosci */
	display: block;
}

/* Kafel jako kontekst pozycjonowania - bez tego etykieta uciekala na tekst. */
.woocommerce ul.products li.product { position: relative; }

.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .sk-placeholder {
	margin-bottom: var(--sk-3);
}

/* Etykieta drop-u nad grafika, nie nad tytulem. */
.sk-drop-badge {
	top: var(--sk-2);
	left: var(--sk-2);
	pointer-events: none;
}

/* Cena wyrazniejsza niz reszta metadanych. */
.woocommerce ul.products li.product .price {
	color: var(--sk-ink);
	font-size: var(--sk-text-base);
	margin-bottom: var(--sk-2);
}

/* Karta produktu - galeria i zakladki. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--sk-line);
	padding: 0;
	margin: 0 0 var(--sk-5);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: none;
	border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--sk-ink-soft);
	font-weight: 500;
	text-decoration: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--sk-ink); }

/* Na mobile kafle sa waskie - mniejszy tytul zapobiega lamaniu na 3 linie. */
@media (max-width: 480px) {
	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: var(--sk-text-sm);
		min-height: 2.6em;
	}

	.woocommerce ul.products { gap: var(--sk-4) var(--sk-3); }
}

/* Odnosnik do pelnej listy - strona glowna nie ma prezentowac calego katalogu. */
.sk-more {
	max-width: 1100px;
	margin: 0 auto var(--sk-7);
	padding: 0 var(--sk-5);
	text-align: center;
}

.sk-more a {
	display: inline-flex;
	align-items: center;
	min-height: var(--sk-touch);
	padding: var(--sk-3) var(--sk-6);
	border: 1px solid var(--sk-line-strong);
	border-radius: var(--sk-radius-sm);
	color: var(--sk-ink);
	text-decoration: none;
	font-size: var(--sk-text-sm);
	font-weight: 500;
	transition: background var(--sk-duration) var(--sk-ease),
		border-color var(--sk-duration) var(--sk-ease);
}

.sk-more a:hover {
	background: var(--sk-bg-soft);
	border-color: var(--sk-ink);
}

/* Kategorie pod kaflem (Blocksy: .meta-categories) - szum przy wyborze prezentu.
   Klient filtruje z menu, nie z etykiet pod kazdym produktem. */
.woocommerce ul.products li.product .meta-categories,
ul.products li.product .meta-categories { display: none !important; }

/* Szanujemy liczbe kolumn zadana przez shortcode - inaczej siatka szesciu
   produktow lamie sie na 4+2 i ostatni rzad wyglada na niedokonczony. */
@media (min-width: 1100px) {
	.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* SKU i kategorie na karcie produktu - nie pomagaja podjac decyzji zakupowej.
   Blocksy renderuje wlasny blok meta, wiec remove_action nie wystarcza. */
.woocommerce div.product .product_meta,
.woocommerce div.product .ct-product-meta,
.single-product .product_meta { display: none !important; }

/* ==========================================================================
   14. HERO
   ========================================================================== */

.sk-hero2 {
	max-width: 1180px;
	margin: 0 auto;
	padding: var(--sk-7) var(--sk-5) var(--sk-8);
	display: grid;
	gap: var(--sk-7);
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 900px) {
	.sk-hero2 {
		grid-template-columns: 1.05fr 1fr;
		gap: var(--sk-9);
		padding: var(--sk-9) var(--sk-5);
	}
}

.sk-hero2__nad {
	font-size: var(--sk-text-xs);
	font-weight: 500;
	letter-spacing: var(--sk-tracking-wide);
	text-transform: uppercase;
	color: var(--sk-ink-faint);
	margin: 0 0 var(--sk-3);
}

.sk-hero2__tytul {
	font-size: clamp(2rem, 1.3rem + 3.2vw, 3.6rem);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.03em;
	color: var(--sk-ink);
	margin: 0 0 var(--sk-4);
	text-wrap: balance;
}

.sk-hero2__lead {
	font-size: var(--sk-text-lg);
	line-height: var(--sk-leading-snug);
	color: var(--sk-ink-soft);
	margin: 0 0 var(--sk-6);
	max-width: 32rem;
	text-wrap: pretty;
}

.sk-hero2__akcje {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sk-3);
	margin: 0 0 var(--sk-6);
}

.sk-btn-primary,
.sk-btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 var(--sk-6);
	border-radius: var(--sk-radius-sm);
	font-size: var(--sk-text-base);
	font-weight: 500;
	text-decoration: none;
	transition: background var(--sk-duration) var(--sk-ease),
		border-color var(--sk-duration) var(--sk-ease),
		transform var(--sk-duration) var(--sk-ease);
}

.sk-btn-primary {
	background: var(--sk-accent);
	color: #FFFFFF;
	border: 1px solid var(--sk-accent);
}

.sk-btn-primary:hover { background: var(--sk-accent-hover); color: #FFFFFF; transform: translateY(-1px); }

.sk-btn-ghost {
	background: transparent;
	color: var(--sk-ink);
	border: 1px solid var(--sk-line-strong);
}

.sk-btn-ghost:hover { background: var(--sk-bg-soft); border-color: var(--sk-ink); color: var(--sk-ink); }

.sk-hero2__punkty {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sk-2) var(--sk-5);
}

.sk-hero2__punkty li {
	display: flex;
	align-items: center;
	gap: var(--sk-2);
	font-size: var(--sk-text-sm);
	color: var(--sk-ink-soft);
	margin: 0;
}

.sk-hero2__punkty li::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--sk-success);
}

/* Kompozycja trzech skarpetek - pokazuje, ze produkt to zestaw. */
.sk-hero2__wizual {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sk-3);
	align-items: center;
}

.sk-hero2__skarpeta {
	display: block;
	border-radius: var(--sk-radius-lg);
	overflow: hidden;
	box-shadow: var(--sk-shadow);
	transition: transform 260ms var(--sk-ease);
}

.sk-hero2__skarpeta img { display: block; width: 100%; height: auto; }

/* Lekkie przesuniecie w pionie buduje rytm zamiast plaskiego rzedu. */
.sk-hero2__skarpeta--1 { transform: translateY(var(--sk-5)) rotate(-3deg); }
.sk-hero2__skarpeta--2 { transform: translateY(calc(var(--sk-4) * -1)); z-index: 2; }
.sk-hero2__skarpeta--3 { transform: translateY(var(--sk-4)) rotate(3deg); }

.sk-hero2__wizual:hover .sk-hero2__skarpeta--1 { transform: translateY(var(--sk-4)) rotate(-5deg); }
.sk-hero2__wizual:hover .sk-hero2__skarpeta--3 { transform: translateY(var(--sk-3)) rotate(5deg); }

@media (max-width: 600px) {
	.sk-hero2__skarpeta--1,
	.sk-hero2__skarpeta--2,
	.sk-hero2__skarpeta--3 { transform: none; }
	.sk-hero2__wizual { gap: var(--sk-2); }
}

/* ==========================================================================
   15. NAGLOWKI SEKCJI I KROKI
   ========================================================================== */

.sk-naglowek {
	max-width: 1100px;
	margin: 0 auto;
	padding: var(--sk-8) var(--sk-5) var(--sk-4);
}

.sk-naglowek__tytul {
	font-size: var(--sk-text-2xl);
	font-weight: 500;
	letter-spacing: var(--sk-tracking-tight);
	margin: 0 0 var(--sk-2);
	color: var(--sk-ink);
}

.sk-naglowek__opis {
	font-size: var(--sk-text-base);
	color: var(--sk-ink-soft);
	margin: 0;
	max-width: 42rem;
}

.sk-kroki {
	background: var(--sk-mist);
	padding: var(--sk-8) var(--sk-5);
	margin: var(--sk-8) 0 0;
}

.sk-kroki__inner { max-width: 1100px; margin: 0 auto; }

.sk-kroki__tytul {
	font-size: var(--sk-text-2xl);
	font-weight: 500;
	letter-spacing: var(--sk-tracking-tight);
	margin: 0 0 var(--sk-6);
	color: var(--sk-ink);
}

.sk-kroki__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sk-6);
	grid-template-columns: 1fr;
	counter-reset: krok;
}

@media (min-width: 760px) {
	.sk-kroki__lista { grid-template-columns: repeat(3, 1fr); gap: var(--sk-7); }
}

.sk-krok { margin: 0; }

.sk-krok__nr {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--sk-ink);
	color: #FFFFFF;
	font-size: var(--sk-text-sm);
	font-weight: 500;
	margin-bottom: var(--sk-3);
}

.sk-krok__tytul {
	font-size: var(--sk-text-lg);
	font-weight: 500;
	margin: 0 0 var(--sk-2);
	color: var(--sk-ink);
	letter-spacing: 0;
}

.sk-krok__opis {
	font-size: var(--sk-text-sm);
	color: var(--sk-ink-soft);
	line-height: var(--sk-leading);
	margin: 0;
}

/* Kafle produktow - delikatne uniesienie przy najechaniu. */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .sk-placeholder {
	transition: transform 240ms var(--sk-ease), box-shadow 240ms var(--sk-ease);
}

.woocommerce ul.products li.product:hover .sk-placeholder,
.woocommerce ul.products li.product:hover a img {
	transform: translateY(-3px);
	box-shadow: var(--sk-shadow);
}

/* Pierwszy ekran na telefonie jest najcenniejszy - nie oddajemy go pustce.
   Blocksy dokłada wlasny odstep nad trescia, wiec zerujemy go na glownej. */
@media (max-width: 899px) {
	.sk-hero2 { padding-top: var(--sk-4); padding-bottom: var(--sk-6); }
	.home .ct-container > article > .entry-content { padding-top: 0; }
	.home .entry-content > *:first-child { margin-top: 0; }
}

.home .ct-container,
.home .entry-content { padding-top: 0; }

/* ==========================================================================
   16. POTWIERDZENIE DODANIA DO KOSZYKA
   Bez widocznego potwierdzenia klient nie wie, czy zakup sie powiodl,
   i porzuca koszyk. To najwazniejszy pojedynczy element sciezki zakupowej.
   ========================================================================== */

.sk-potwierdzenie {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

@media (min-width: 700px) {
	.sk-potwierdzenie { align-items: center; }
}

.sk-potwierdzenie__tlo {
	position: absolute;
	inset: 0;
	background: rgba(25, 24, 23, 0.45);
	opacity: 0;
	transition: opacity 200ms var(--sk-ease);
}

.sk-potwierdzenie.jest-widoczny .sk-potwierdzenie__tlo { opacity: 1; }

.sk-potwierdzenie__panel {
	position: relative;
	width: 100%;
	max-width: 420px;
	background: var(--sk-bg);
	border-radius: var(--sk-radius-lg) var(--sk-radius-lg) 0 0;
	padding: var(--sk-6) var(--sk-5) calc(var(--sk-5) + env(safe-area-inset-bottom, 0px));
	text-align: center;
	box-shadow: var(--sk-shadow-lg);
	transform: translateY(16px);
	opacity: 0;
	transition: transform 220ms var(--sk-ease), opacity 220ms var(--sk-ease);
}

@media (min-width: 700px) {
	.sk-potwierdzenie__panel {
		border-radius: var(--sk-radius-lg);
		padding: var(--sk-7) var(--sk-6);
	}
}

.sk-potwierdzenie.jest-widoczny .sk-potwierdzenie__panel {
	transform: translateY(0);
	opacity: 1;
}

.sk-potwierdzenie__x {
	position: absolute;
	top: var(--sk-2);
	right: var(--sk-3);
	width: var(--sk-touch);
	height: var(--sk-touch);
	border: none;
	background: transparent;
	font-size: 1.7rem;
	line-height: 1;
	color: var(--sk-ink-faint);
	cursor: pointer;
}

.sk-potwierdzenie__x:hover { color: var(--sk-ink); }

.sk-potwierdzenie__znak {
	width: 46px;
	height: 46px;
	margin: 0 auto var(--sk-3);
	border-radius: 50%;
	background: var(--sk-mist);
	color: var(--sk-success);
	font-size: 1.4rem;
	line-height: 46px;
}

.sk-potwierdzenie__tytul {
	font-size: var(--sk-text-xl);
	font-weight: 500;
	margin: 0 0 var(--sk-1);
	color: var(--sk-ink);
}

.sk-potwierdzenie__produkt {
	font-size: var(--sk-text-sm);
	color: var(--sk-ink-soft);
	margin: 0 0 var(--sk-5);
}

.sk-potwierdzenie__akcje {
	display: grid;
	gap: var(--sk-2);
	margin-bottom: var(--sk-3);
}

.sk-potwierdzenie__akcje .sk-btn-primary,
.sk-potwierdzenie__akcje .sk-btn-ghost { width: 100%; }

.sk-potwierdzenie__dalej {
	border: none;
	background: transparent;
	color: var(--sk-ink-soft);
	font-family: var(--sk-font);
	font-size: var(--sk-text-sm);
	min-height: var(--sk-touch);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sk-potwierdzenie__dalej:hover { color: var(--sk-ink); }

/* Ikona koszyka w naglowku musi byc widoczna takze na telefonie -
   bez niej klient nie ma jak wrocic do zakupu. */
@media (max-width: 899px) {
	.ct-header [data-id="cart"],
	.ct-header-cart { display: inline-flex !important; }
}

/* ==========================================================================
   17. KRYTYCZNE: ATRYBUT hidden MUSI WYGRYWAC Z display
   Element z [hidden] i wlasnym display:flex/grid pozostaje w ukladzie i -
   przy position:fixed z inset:0 - przechwytuje klikniecia na calym ekranie.
   Objaw: "przyciskow nie da sie kliknac, nic sie nie dzieje".
   ========================================================================== */

[hidden] { display: none !important; }

.sk-potwierdzenie[hidden],
.sk-sticky-cta[hidden] { display: none !important; }

/* Pasek poza ekranem nie moze lapac dotkniec. */
.sk-sticky-cta:not(.is-visible) {
	pointer-events: none;
	visibility: hidden;
}

.sk-sticky-cta.is-visible {
	pointer-events: auto;
	visibility: visible;
}

/* Tlo modala lapie klikniecia dopiero, gdy modal jest naprawde widoczny. */
.sk-potwierdzenie:not(.jest-widoczny) .sk-potwierdzenie__tlo { pointer-events: none; }

/* ==========================================================================
   18. PASEK KORZYSCI
   ========================================================================== */

.sk-pasek {
	background: var(--sk-ink);
	color: #FFFFFF;
	font-size: var(--sk-text-xs);
	letter-spacing: 0.02em;
}

.sk-pasek__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: var(--sk-2) var(--sk-4);
	display: flex;
	justify-content: center;
	gap: var(--sk-5);
	flex-wrap: wrap;
	text-align: center;
}

.sk-pasek__inner span { display: inline-flex; align-items: center; gap: var(--sk-2); }

.sk-pasek__inner span::before {
	content: "";
	width: 4px; height: 4px;
	border-radius: 50%;
	background: rgba(255,255,255,0.55);
}

@media (max-width: 560px) {
	.sk-pasek__inner { gap: var(--sk-3); font-size: 0.7rem; }
	.sk-pasek__inner span:nth-child(3) { display: none; }
}

/* ==========================================================================
   19. KATEGORIE WIZUALNE
   ========================================================================== */

.sk-kategorie { padding: var(--sk-8) var(--sk-5) var(--sk-4); }
.sk-kategorie__inner { max-width: 1100px; margin: 0 auto; }

.sk-kategorie__tytul {
	font-size: var(--sk-text-2xl);
	font-weight: 500;
	letter-spacing: var(--sk-tracking-tight);
	margin: 0 0 var(--sk-5);
}

.sk-kategorie__siatka {
	display: grid;
	gap: var(--sk-4);
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {
	.sk-kategorie__siatka { grid-template-columns: repeat(3, 1fr); gap: var(--sk-5); }
}

.sk-kategoria {
	display: flex;
	align-items: center;
	gap: var(--sk-4);
	padding: var(--sk-3);
	border: 1px solid var(--sk-line);
	border-radius: var(--sk-radius);
	text-decoration: none;
	background: var(--sk-bg);
	transition: border-color var(--sk-duration) var(--sk-ease),
		transform var(--sk-duration) var(--sk-ease),
		box-shadow var(--sk-duration) var(--sk-ease);
}

.sk-kategoria:hover {
	border-color: var(--sk-ink);
	transform: translateY(-2px);
	box-shadow: var(--sk-shadow);
}

.sk-kategoria__obraz {
	flex-shrink: 0;
	width: 86px;
	border-radius: var(--sk-radius-sm);
	overflow: hidden;
}

.sk-kategoria__obraz img { display: block; width: 100%; height: auto; }

.sk-kategoria__tresc { display: flex; flex-direction: column; gap: 2px; }

.sk-kategoria__nazwa {
	font-size: var(--sk-text-base);
	font-weight: 500;
	color: var(--sk-ink);
}

.sk-kategoria__opis { font-size: var(--sk-text-sm); color: var(--sk-ink-soft); }

.sk-kategoria__ile {
	font-size: var(--sk-text-xs);
	color: var(--sk-ink-faint);
	letter-spacing: var(--sk-tracking-wide);
	text-transform: uppercase;
	margin-top: var(--sk-1);
}

/* ==========================================================================
   20. FAQ
   ========================================================================== */

.sk-faq-sekcja { background: var(--sk-bg-soft); padding: var(--sk-8) var(--sk-5); margin-top: var(--sk-8); }
.sk-faq-sekcja__inner { max-width: 820px; margin: 0 auto; }

.sk-faq-sekcja__tytul,
.sk-faq-produkt h2 {
	font-size: var(--sk-text-2xl);
	font-weight: 500;
	letter-spacing: var(--sk-tracking-tight);
	margin: 0 0 var(--sk-5);
}

.sk-faq-produkt {
	max-width: 820px;
	margin: var(--sk-7) auto 0;
	padding: var(--sk-6) 0 0;
	border-top: 1px solid var(--sk-line);
}

.sk-faq-produkt h2 { font-size: var(--sk-text-xl); margin-bottom: var(--sk-4); }

.sk-faq__item {
	border-bottom: 1px solid var(--sk-line);
	background: transparent;
}

.sk-faq__pytanie {
	cursor: pointer;
	list-style: none;
	padding: var(--sk-4) var(--sk-6) var(--sk-4) 0;
	font-size: var(--sk-text-base);
	font-weight: 500;
	color: var(--sk-ink);
	position: relative;
	min-height: var(--sk-touch);
	display: flex;
	align-items: center;
}

.sk-faq__pytanie::-webkit-details-marker { display: none; }

.sk-faq__pytanie::after {
	content: "+";
	position: absolute;
	right: var(--sk-2);
	font-size: 1.4rem;
	font-weight: 400;
	color: var(--sk-ink-faint);
	transition: transform var(--sk-duration) var(--sk-ease);
}

.sk-faq__item[open] .sk-faq__pytanie::after { content: "\2212"; }

.sk-faq__odpowiedz {
	padding: 0 var(--sk-6) var(--sk-4) 0;
	color: var(--sk-ink-soft);
	font-size: var(--sk-text-sm);
	line-height: var(--sk-leading);
}

.sk-faq__odpowiedz p { margin: 0; }

/* ==========================================================================
   21. NEWSLETTER I DOSTAWA
   ========================================================================== */

.sk-newsletter { background: var(--sk-mist); padding: var(--sk-8) var(--sk-5); }

.sk-newsletter__inner {
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
}

.sk-newsletter__tytul {
	font-size: var(--sk-text-xl);
	font-weight: 500;
	margin: 0 0 var(--sk-2);
	letter-spacing: var(--sk-tracking-tight);
}

.sk-newsletter__opis {
	font-size: var(--sk-text-sm);
	color: var(--sk-ink-soft);
	margin: 0 auto var(--sk-5);
	max-width: 34rem;
}

.sk-newsletter__form {
	display: flex;
	gap: var(--sk-2);
	max-width: 30rem;
	margin: 0 auto var(--sk-3);
	flex-wrap: wrap;
}

.sk-newsletter__form input[type="email"] {
	flex: 1 1 12rem;
	min-height: var(--sk-touch);
	border: 1px solid var(--sk-line-strong);
	border-radius: var(--sk-radius-sm);
	padding: 0 var(--sk-4);
	font-size: 16px;
	background: var(--sk-bg);
}

.sk-newsletter__form .sk-btn-primary { flex: 0 0 auto; }

.sk-newsletter__zgoda {
	font-size: var(--sk-text-xs);
	color: var(--sk-ink-faint);
	margin: 0;
}

.sk-newsletter__zgoda a { color: var(--sk-ink-soft); }

.sk-dostawa-info {
	background: var(--sk-mist);
	border-radius: var(--sk-radius-sm);
	padding: var(--sk-3) var(--sk-4);
	font-size: var(--sk-text-sm);
	color: var(--sk-ink);
	margin-bottom: var(--sk-4);
}

.sk-dostawa-info--ok { color: var(--sk-success); }

.sk-legal-footer__social { display: grid; gap: var(--sk-2); }

/* Brak wynikow wyszukiwania - zamiast slepego zaulka podpowiedzi. */
.sk-brak-wynikow {
	max-width: 620px;
	margin: var(--sk-6) auto;
	padding: var(--sk-7) var(--sk-5);
	background: var(--sk-bg-soft);
	border-radius: var(--sk-radius);
	text-align: center;
}

.sk-brak-wynikow__lead {
	font-size: var(--sk-text-lg);
	color: var(--sk-ink);
	margin: 0 0 var(--sk-2);
}

.sk-brak-wynikow__opis {
	font-size: var(--sk-text-sm);
	color: var(--sk-ink-soft);
	margin: 0 0 var(--sk-4);
}

.sk-brak-wynikow__lista {
	list-style: none;
	margin: 0 0 var(--sk-5);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sk-2);
	justify-content: center;
}

.sk-brak-wynikow__lista a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 var(--sk-4);
	border: 1px solid var(--sk-line-strong);
	border-radius: 999px;
	font-size: var(--sk-text-sm);
	color: var(--sk-ink);
	text-decoration: none;
	background: var(--sk-bg);
	transition: border-color var(--sk-duration) var(--sk-ease);
}

.sk-brak-wynikow__lista a:hover { border-color: var(--sk-ink); }

/* Akapit wprowadzajacy na stronach tresciowych. */
.sk-lead {
	font-size: var(--sk-text-lg);
	line-height: var(--sk-leading-snug);
	color: var(--sk-ink);
	margin-bottom: var(--sk-6);
}

/* ==========================================================================
   22. KLIKALNY KAFEL PRODUKTU
   Blocksy renderuje zdjecie w <figure> poza linkiem - klikniecie w obrazek,
   czyli najwiekszy cel na telefonie, nie prowadzilo nigdzie.
   Rozciagamy odnosnik z tytulu na caly kafel.
   ========================================================================== */

.woocommerce ul.products li.product { position: relative; }

.woocommerce ul.products li.product .woocommerce-loop-product__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Elementy, ktore musza pozostac klikalne osobno. */
.woocommerce ul.products li.product .ct-woo-card-actions,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .entry-meta {
	position: relative;
	z-index: 2;
}

/* Kursor na calym kaflu sygnalizuje, ze da sie w niego kliknac. */
.woocommerce ul.products li.product figure { cursor: pointer; }

/* ==========================================================================
   23. DOSTEPNOSC: CELE DOTYKOWE
   WCAG 2.2 wymaga minimum 24x24 px, a praktyka mobilna 44 px.
   Odnosniki w stopce i menu byly ponizej tego progu.
   ========================================================================== */

.sk-legal-footer a,
.sk-legal-footer__social a,
.sk-newsletter__zgoda a {
	min-height: 40px;
	display: inline-flex;
	align-items: center;
}

.sk-legal-footer li { display: flex; }

/* Tytul produktu w kaflu ma powiekszony obszar klikniecia przez
   rozciagniety odnosnik, ale sam tekst tez powinien byc wygodny. */
.woocommerce ul.products li.product .woocommerce-loop-product__title a {
	display: inline-block;
	padding: var(--sk-1) 0;
}

/* Przycisk menu w naglowku mial 18 px wysokosci - ponizej progu wygodnego
   dotkniecia. Powiekszamy sam obszar dotyku, nie ikone. */
.ct-header-trigger,
.ct-toggle {
	min-width: var(--sk-touch);
	min-height: var(--sk-touch);
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}

/* Przycisk zapisu na liste oczekujacych (wtyczka XootiX). */
.xoo-wl-submit-btn,
[class*="xoo-wl"] button {
	min-height: var(--sk-touch) !important;
}

/* ==========================================================================
   24. KASA BEZ ROZPRASZACZY
   Baymard: nadmiar elementow w kasie to jedna z glownych przyczyn
   porzucen koszyka. Zostawiamy dane sprzedawcy i dokumenty prawne.
   ========================================================================== */

.sk-legal-footer--kasa { padding-top: var(--sk-6); }

.sk-legal-footer--kasa .sk-legal-footer__inner { grid-template-columns: 1fr; }

.sk-legal-footer--kasa .sk-legal-footer__col:nth-child(3),
.sk-legal-footer--kasa .sk-legal-footer__col:nth-child(4) { display: none; }

/* ==========================================================================
   25. UKLAD POD ZDJECIE
   Skarpetki sprzedaje obraz, nie opis. Zdjecie dostaje wiecej miejsca,
   opis schodzi do roli podpisu.
   ========================================================================== */

/* Wieksze kafle: 2 kolumny na tablecie zamiast 3, 3 na desktopie zamiast 4. */
@media (min-width: 700px) {
	.woocommerce ul.products:not(.columns-2):not(.columns-3) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.woocommerce ul.products:not(.columns-2):not(.columns-3) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Obraz produktu bez zbednego marginesu, z wyrazniejszym tlem. */
.woocommerce ul.products li.product figure,
.woocommerce ul.products li.product .sk-placeholder {
	border-radius: var(--sk-radius);
	overflow: hidden;
	background: var(--sk-bg-soft);
}

/* Podpis pod obrazem: mniej wagi niz zdjecie. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--sk-text-sm);
	font-weight: 400;
	color: var(--sk-ink-soft);
	min-height: 0;
	margin-bottom: var(--sk-1);
}

.woocommerce ul.products li.product .price {
	font-size: var(--sk-text-base);
	font-weight: 500;
	color: var(--sk-ink);
}

/* Karta produktu: galeria zajmuje wiecej niz polowe szerokosci. */
@media (min-width: 900px) {
	.woocommerce div.product div.images { width: 56%; }
	.woocommerce div.product div.summary { width: 40%; }
}

.woocommerce div.product div.images img,
.woocommerce div.product .sk-placeholder {
	border-radius: var(--sk-radius-lg);
	background: var(--sk-bg-soft);
}

/* Natywna etykieta "Wyprzedane" komunikuje odwrotnie niz chcemy:
   sugeruje, ze towar sie skonczyl, podczas gdy wzor dopiero powstaje.
   Zostawiamy wlasna etykiete "Drop wkrotce". */
.woocommerce ul.products li.product .out-of-stock-badge,
.woocommerce ul.products li.product .ct-out-of-stock-badge,
.woocommerce span.onsale + .sk-drop-badge ~ .out-of-stock,
.woocommerce ul.products li.product .woocommerce-badge--out-of-stock { display: none !important; }

/* ==========================================================================
   26. KOSZYK W NAGLOWKU
   Bez niego jedyna droga do koszyka wiodla przez dodanie kolejnego
   produktu - klient nie mial jak wrocic i dokonczyc zakupu.
   ========================================================================== */

.sk-koszyk {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--sk-touch);
	min-height: var(--sk-touch);
	color: var(--sk-ink);
	text-decoration: none;
	border-radius: var(--sk-radius-sm);
	transition: color var(--sk-duration) var(--sk-ease),
		background var(--sk-duration) var(--sk-ease);
	flex-shrink: 0;
}

.sk-koszyk:hover { color: var(--sk-highlight); background: var(--sk-bg-soft); }

.sk-koszyk__ikona { display: block; }

.sk-koszyk__licznik {
	position: absolute;
	top: 3px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--sk-highlight);
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 600;
	line-height: 18px;
	text-align: center;
	box-shadow: 0 0 0 2px var(--sk-bg);
}

/* Element trafia do naglowka skryptem - do tego czasu ma byc niewidoczny. */
#sk-koszyk-zrodlo { display: none !important; }

/* W naglowku Blocksy odstep od pozostalych ikon. */
.ct-header .sk-koszyk { margin-left: var(--sk-2); }

@media (max-width: 480px) {
	.ct-header .sk-koszyk { margin-left: 0; }
}

/* Strefa ikon po prawej stronie naglowka. */
.sk-strefa-koszyka {
	display: flex;
	align-items: center;
	gap: var(--sk-1);
}

.sk-strefa-koszyka > .sk-koszyk {
	width: var(--sk-touch);
	height: var(--sk-touch);
	flex: 0 0 auto;
	margin: 0;
}

/* ==========================================================================
   27. WYSZUKIWARKA NA TELEFONIE
   Blocksy ukrywal przycisk szukania na malych ekranach (0x0), a menu
   mobilne nie zawieralo pola wyszukiwania - klient nie mial jak szukac.
   Przy zakupie prezentowym to czesta droga wejscia ("dla programisty").
   ========================================================================== */

@media (max-width: 999px) {
	.ct-header-search {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: var(--sk-touch);
		height: var(--sk-touch);
		min-width: var(--sk-touch);
		min-height: var(--sk-touch);
		visibility: visible !important;
		opacity: 1 !important;
		color: var(--sk-ink);
		background: transparent;
		border: none;
		border-radius: var(--sk-radius-sm);
		cursor: pointer;
		flex: 0 0 auto;
	}

	.ct-header-search svg,
	.ct-header-search .ct-icon {
		width: 20px;
		height: 20px;
		display: block;
	}

	.ct-header-search:hover { background: var(--sk-bg-soft); }
}

/* Wlasna wyszukiwarka na telefonie - mobilny naglowek Blocksy jej nie ma. */
.sk-szukaj-przycisk {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--sk-touch);
	height: var(--sk-touch);
	flex: 0 0 auto;
	border: none;
	background: transparent;
	color: var(--sk-ink);
	cursor: pointer;
	border-radius: var(--sk-radius-sm);
	transition: background var(--sk-duration) var(--sk-ease);
}

.sk-szukaj-przycisk:hover { background: var(--sk-bg-soft); }

.sk-szukaj-panel {
	position: sticky;
	top: 0;
	z-index: 90;
	background: var(--sk-bg);
	border-bottom: 1px solid var(--sk-line);
	padding: var(--sk-3) var(--sk-4);
}

.sk-szukaj-panel form {
	display: flex;
	gap: var(--sk-2);
	max-width: 640px;
	margin: 0 auto;
}

.sk-szukaj-panel input[type="search"] {
	flex: 1;
	min-height: var(--sk-touch);
	padding: 0 var(--sk-4);
	font-size: 16px;
	border: 1px solid var(--sk-line-strong);
	border-radius: var(--sk-radius-sm);
	background: var(--sk-bg);
	color: var(--sk-ink);
}

.sk-szukaj-panel .sk-btn-primary { min-height: var(--sk-touch); padding: 0 var(--sk-5); }

@media (min-width: 1000px) {
	.sk-szukaj-przycisk, .sk-szukaj-panel { display: none !important; }
}


/* ==========================================================================
   28. DOSTEPNOSC: KONTRAST (WCAG 2.2 AA, kryterium 1.4.3)
   Tekst wymaga 4.5:1 wobec tla. Domyslny blekit odnosnikow Blocksy
   dawal 4.31:1, a nasz najjasniejszy szary 2.9:1.
   ========================================================================== */

:root {
	--theme-link-initial-color: var(--sk-ink);
	--theme-link-hover-color: var(--sk-highlight);
	/* Blocksy uzywa wlasnej zmiennej dla odnosnikow w tresci. */
	--theme-palette-color-2: #1A56C4;
}

a:not([class]),
.entry-content a:not([class]),
.woocommerce-breadcrumb a,
.wc-block-grid__product-title,
.wc-block-components-product-name {
	color: #1A56C4;
}

/* Odnosnik pomijajacy nawigacje pojawia sie tylko przy nawigacji klawiatura,
   ale gdy juz jest widoczny, musi byc czytelny. */
.skip-link:focus {
	color: #FFFFFF !important;
	background: var(--sk-ink) !important;
	padding: var(--sk-3) var(--sk-4) !important;
	outline: 2px solid var(--sk-highlight);
	outline-offset: 2px;
}

/* Przyciski WooCommerce w blokach - biel na naszym akcencie zamiast
   domyslnego, zbyt jasnego tla. */
.wp-block-button__link.add_to_cart_button,
.wc-block-components-button:not(.is-link) {
	background-color: var(--sk-accent);
	color: #FFFFFF;
}

/* ==========================================================================
   29. DOSTEPNOSC: WIDOCZNY FOKUS (2.4.7) I POMINIECIE BLOKOW (2.4.1)
   ========================================================================== */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--sk-highlight);
	outline-offset: 2px;
	border-radius: var(--sk-radius-sm);
}

/* Elementy w kasie blokowej maja wlasne style fokusu - wzmacniamy je. */
.wc-block-components-text-input input:focus,
.wc-block-components-country-input select:focus {
	outline: 3px solid var(--sk-highlight) !important;
	outline-offset: 1px;
}

/* Tekst na tle stopki (#F7F6F4) wymaga ciemniejszego szarego niz na bieli -
   ten sam kolor daje tam tylko 4.41:1 zamiast wymaganych 4.5:1. */
.sk-legal-footer__copy,
.sk-legal-footer__seller,
.sk-kategoria__ile,
.sk-newsletter__zgoda { color: #6E6A66; }

/* Odnosnik pomijajacy nawigacje - czytelny takze poza stanem fokusu. */
.skip-link,
.skip-link:link,
.skip-link:visited { color: #1A56C4; }

/* Tytuly produktow w blokach WooCommerce (koszyk, siatki blokowe). */
.wc-block-grid__product-title,
.wc-block-grid__product-link,
.wc-block-components-product-name,
a.wc-block-components-product-name { color: var(--sk-ink) !important; }

/* ==========================================================================
   30. POPRAWKI PO ZGLOSZENIU
   ========================================================================== */

/* Panel wyszukiwania jako warstwa tuz pod naglowkiem. Pozycje w pionie
   ustala skrypt na podstawie dolnej krawedzi naglowka. */
.sk-szukaj-panel {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 95;
	width: 100%;
	background: var(--sk-bg);
	border-bottom: 1px solid var(--sk-line);
	padding: var(--sk-3) var(--sk-4);
	box-shadow: var(--sk-shadow-sm);
	animation: sk-rozwin 180ms var(--sk-ease);
}

@keyframes sk-rozwin {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.sk-szukaj-panel { animation: none; }
}

/* Sekcja FAQ na stronie glownej - ten sam oddech po bokach. */
.sk-faq-sekcja__inner { padding-left: 0; padding-right: 0; }

/* Odpowiedzi nie moga dotykac znaku plus/minus po prawej. */
.sk-faq__pytanie { padding-right: var(--sk-7); }
.sk-faq__odpowiedz { padding-right: var(--sk-5); }

/* ==========================================================================
   31. DYREKTYWA OMNIBUS
   Informacja o najnizszej cenie z 30 dni musi byc czytelna i jednoznaczna,
   ale nie moze konkurowac z cena biezaca.
   ========================================================================== */

.sk-omnibus {
	font-size: var(--sk-text-sm);
	color: var(--sk-ink-soft);
	margin: var(--sk-2) 0 var(--sk-3);
	line-height: var(--sk-leading-snug);
}

.sk-omnibus strong { font-weight: 500; color: var(--sk-ink); }

.sk-omnibus--kafel {
	display: block;
	font-size: var(--sk-text-xs);
	color: var(--sk-ink-faint);
	margin-top: var(--sk-1);
}

/* Cena przed obnizka i cena promocyjna - czytelna hierarchia. */
.woocommerce del,
.woocommerce del .amount {
	color: var(--sk-ink-faint);
	text-decoration: line-through;
	font-weight: 400;
	margin-right: var(--sk-2);
}

.woocommerce ins,
.woocommerce ins .amount {
	color: var(--sk-highlight);
	text-decoration: none;
	font-weight: 500;
}

/* Etykieta promocji na kaflu. */
.woocommerce span.onsale {
	position: absolute;
	top: var(--sk-2);
	right: var(--sk-2);
	left: auto;
	z-index: 2;
	background: var(--sk-highlight);
	color: #FFFFFF;
	font-size: var(--sk-text-xs);
	font-weight: 500;
	letter-spacing: 0.02em;
	padding: var(--sk-1) var(--sk-3);
	border-radius: 999px;
	min-height: 0;
	min-width: 0;
	line-height: 1.6;
	margin: 0;
}

/* ==========================================================================
   32. ZGODA NA COOKIES
   RODO wymaga, by odmowa byla rownie latwa jak zgoda - oba przyciski
   maja te sama wage wizualna i stoja obok siebie.
   ========================================================================== */

.sk-zgoda {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10001;
	padding: var(--sk-4);
	padding-bottom: calc(var(--sk-4) + env(safe-area-inset-bottom, 0px));
	background: rgba(25, 24, 23, 0.35);
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

@media (min-width: 700px) {
	.sk-zgoda { align-items: center; }
}

.sk-zgoda__panel {
	background: var(--sk-bg);
	border-radius: var(--sk-radius-lg);
	box-shadow: var(--sk-shadow-lg);
	padding: var(--sk-5);
	max-width: 640px;
	width: 100%;
	max-height: 86vh;
	overflow-y: auto;
}

.sk-zgoda__tytul {
	font-size: var(--sk-text-lg);
	font-weight: 500;
	margin: 0 0 var(--sk-2);
	color: var(--sk-ink);
}

.sk-zgoda__opis {
	font-size: var(--sk-text-sm);
	color: var(--sk-ink-soft);
	line-height: var(--sk-leading);
	margin: 0 0 var(--sk-4);
}

.sk-zgoda__opis a { color: var(--sk-ink); text-decoration: underline; }

.sk-zgoda__kategorie {
	display: grid;
	gap: var(--sk-3);
	margin-bottom: var(--sk-4);
	padding: var(--sk-4);
	background: var(--sk-bg-soft);
	border-radius: var(--sk-radius);
}

.sk-zgoda__kategoria {
	display: flex;
	gap: var(--sk-3);
	align-items: flex-start;
	cursor: pointer;
	font-size: var(--sk-text-sm);
	color: var(--sk-ink-soft);
	line-height: var(--sk-leading-snug);
}

.sk-zgoda__kategoria input {
	width: 20px;
	height: 20px;
	margin-top: 2px;
	flex-shrink: 0;
	accent-color: var(--sk-accent);
}

.sk-zgoda__kategoria strong {
	display: block;
	color: var(--sk-ink);
	font-weight: 500;
	margin-bottom: 2px;
}

.sk-zgoda__akcje {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sk-2);
	align-items: center;
}

.sk-zgoda__akcje .sk-btn-primary,
.sk-zgoda__akcje .sk-btn-ghost { flex: 1 1 auto; min-width: 12rem; }

.sk-zgoda__wiecej {
	border: none;
	background: transparent;
	color: var(--sk-ink-soft);
	font-family: var(--sk-font);
	font-size: var(--sk-text-sm);
	min-height: var(--sk-touch);
	padding: 0 var(--sk-3);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sk-zgoda__wiecej:hover { color: var(--sk-ink); }

.sk-zgoda__zapisz { width: 100%; margin-top: var(--sk-3); }

/* Powrot do ustawien - dyskretny, ale zawsze dostepny. */
.sk-zgoda-ponow {
	display: block;
	border: 0;
	background: none;
	padding: 0;
	color: inherit;
	font-family: var(--sk-font);
	font-size: inherit;
	text-align: left;
	text-decoration: underline;
	text-underline-offset: 2px;
	min-height: var(--sk-touch);
	cursor: pointer;
	transition: color var(--sk-duration) var(--sk-ease);
}

/* Przezroczystosc sprawiala, ze tekst strony przebijal przez przycisk
   i cala rzecz wygladala na blad renderowania. Przycisk ma byc dyskretny
   kolorem, nie przepuszczaniem tresci pod spodem. */
.sk-zgoda-ponow:hover { color: var(--sk-ink); }

/* Przycisk siedzi w stopce, wiec pasek zakupu nie ma z nim kolizji. */

/* Potwierdzenie zapisu do newslettera w miejscu formularza. */
.sk-newsletter__wynik {
	font-size: var(--sk-text-base);
	color: var(--sk-success);
	font-weight: 500;
	margin: 0 auto var(--sk-3);
	max-width: 30rem;
	padding: var(--sk-3) var(--sk-4);
	background: var(--sk-bg);
	border-radius: var(--sk-radius-sm);
}

/* ==========================================================================
   33. HERO ZE ZDJECIEM PRODUKTOWYM
   Kompozycja grafiki ma pusty srodek - tam trafia tresc. Na telefonie
   proporcje sie zmieniaja, wiec zdjecie idzie nad tekst zamiast pod niego.
   ========================================================================== */

.sk-hero3 {
	position: relative;
	background: #FDE1B7;          /* kolor tla grafiki - brak bialego blysku */
	overflow: hidden;
}

.sk-hero3__tlo {
	display: block;
	width: 100%;
}

.sk-hero3__tlo img {
	display: block;
	width: 100%;
	height: auto;
}

.sk-hero3__tresc {
	padding: var(--sk-6) var(--sk-5) var(--sk-7);
	text-align: center;
	background: transparent;
}

/* Od tabletu tresc wchodzi na zdjecie, w jego pusty srodek. */
@media (min-width: 800px) {
	.sk-hero3 {
		display: grid;
		place-items: center;
	}

	.sk-hero3__tlo,
	.sk-hero3__tresc { grid-area: 1 / 1; }

	.sk-hero3__tresc {
		background: transparent;
		max-width: 46rem;
		padding: var(--sk-6);
		z-index: 2;
	}
}

.sk-hero3__nad {
	font-size: var(--sk-text-xs);
	font-weight: 600;
	letter-spacing: var(--sk-tracking-wide);
	text-transform: uppercase;
	color: #7A5C30;                /* 4,89:1 na tle hero #FDE1B7 (WCAG AA) */
	margin: 0 0 var(--sk-3);
}

.sk-hero3__tytul {
	font-size: clamp(1.9rem, 1.2rem + 3.4vw, 3.4rem);
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: -0.03em;
	color: #2B1F12;
	margin: 0 0 var(--sk-4);
	text-wrap: balance;
}

.sk-hero3__lead {
	font-size: var(--sk-text-lg);
	line-height: var(--sk-leading-snug);
	color: #5C4A32;
	margin: 0 auto var(--sk-5);
	max-width: 30rem;
	text-wrap: pretty;
}

.sk-hero3__akcje {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sk-3);
	justify-content: center;
	margin: 0;
}

/* Pasek korzysci pod zdjeciem - na kremowym tle bylby nieczytelny. */
.sk-hero3__punkty {
	list-style: none;
	margin: 0;
	padding: var(--sk-4) var(--sk-5);
	display: flex;
	flex-wrap: wrap;
	gap: var(--sk-2) var(--sk-6);
	justify-content: center;
	background: var(--sk-bg);
	border-bottom: 1px solid var(--sk-line);
}

.sk-hero3__punkty li {
	display: flex;
	align-items: center;
	gap: var(--sk-2);
	font-size: var(--sk-text-sm);
	color: var(--sk-ink-soft);
	margin: 0;
}

.sk-hero3__punkty li::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--sk-success);
	flex-shrink: 0;
}

/* ==========================================================================
   34. JEDEN SYSTEM KONTENEROW
   Sekcje mialy trzy rozne szerokosci (1290 / 1100 / 820 px) i dwie rozne
   lewe krawedzie na telefonie (23 / 47 px). Tresc "skakala" w poziomie
   przy przewijaniu, co czyta sie jako niedopracowanie.
   Od teraz kazda sekcja ma ten sam kontener i ten sam odstep od krawedzi.
   ========================================================================== */

:root {
	--sk-kontener: 1140px;      /* jedna szerokosc tresci */
	--sk-kontener-tekst: 68ch;  /* limit dlugosci wiersza dla czytelnosci */
	--sk-luz: var(--sk-5);      /* odstep od krawedzi ekranu */
}

@media (min-width: 700px) {
	:root { --sk-luz: var(--sk-6); }
}

/* Wspolna klatka dla wszystkich sekcji strony glownej i tresci. */
.sk-kategorie__inner,
.sk-naglowek,
.sk-kroki__inner,
.sk-more,
.sk-faq-sekcja__inner,
.sk-newsletter__inner,
.sk-legal-footer__inner,
.sk-legal-footer__copy,
.sk-hero3__punkty {
	max-width: var(--sk-kontener);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--sk-luz);
	padding-right: var(--sk-luz);
	box-sizing: border-box;
	width: 100%;
}

/* Sekcje z wlasnym tlem rozciagaja sie na pelna szerokosc,
   ale ich zawartosc trzyma sie tej samej klatki. */
.sk-kategorie,
.sk-kroki,
.sk-faq-sekcja,
.sk-newsletter,
.sk-section--why {
	padding-left: 0;
	padding-right: 0;
}

.sk-section--why > .sk-section__title,
.sk-section--why > .sk-why {
	max-width: var(--sk-kontener);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--sk-luz);
	padding-right: var(--sk-luz);
	box-sizing: border-box;
}

/* Tekst ciagly ograniczamy dlugoscia wiersza, nie szerokoscia kontenera -
   dzieki temu lewa krawedz zostaje na miejscu. */
.sk-faq-sekcja__inner > .sk-faq,
.sk-newsletter__opis,
.sk-naglowek__opis,
.sk-kroki__lista {
	max-width: var(--sk-kontener-tekst);
}

.sk-newsletter__inner { text-align: left; }
.sk-newsletter__form { margin-left: 0; margin-right: 0; }
.sk-newsletter__zgoda { max-width: var(--sk-kontener-tekst); }

/* ==========================================================================
   35. RYTM PIONOWY
   Odstepy miedzy sekcjami byly ustawiane osobno w kazdym komponencie.
   Jedna skala zamiast kilkunastu wartosci.
   ========================================================================== */

.sk-kategorie,
.sk-kroki,
.sk-faq-sekcja,
.sk-newsletter,
.sk-section--why {
	padding-top: var(--sk-8);
	padding-bottom: var(--sk-8);
	margin: 0;
}

.sk-naglowek {
	padding-top: var(--sk-8);
	padding-bottom: var(--sk-4);
}

/* Siatka produktow konczy sekcje - odstep pod nia nalezy do niej. */
.woocommerce ul.products.sk-products-instock,
.woocommerce ul.products.sk-products-waitlist {
	margin-bottom: var(--sk-6);
}

.sk-more { margin-bottom: var(--sk-8); }

/* Naprzemienne tla daja rytm bez dodatkowych linii. */
.sk-kategorie { background: var(--sk-bg); }
.sk-kroki { background: var(--sk-mist); }
.sk-faq-sekcja { background: var(--sk-bg-soft); }
.sk-newsletter { background: var(--sk-mist); }
.sk-section--why { background: var(--sk-bg-soft); margin-top: 0; }

/* Naglowki sekcji o tej samej wadze niezaleznie od komponentu. */
.sk-kategorie__tytul,
.sk-kroki__tytul,
.sk-faq-sekcja__tytul,
.sk-section--why .sk-section__title,
.sk-naglowek__tytul {
	font-size: var(--sk-text-2xl);
	font-weight: 500;
	letter-spacing: var(--sk-tracking-tight);
	line-height: var(--sk-leading-tight);
	color: var(--sk-ink);
	margin: 0 0 var(--sk-3);
}

.sk-newsletter__tytul { font-size: var(--sk-text-xl); }

/* Podwojny odstep: sekcja z tlem i jej wnetrze dokladaly po tyle samo.
   Zewnetrzna warstwa odpowiada tylko za tlo i rytm pionowy. */
.sk-kategorie,
.sk-kroki,
.sk-faq-sekcja,
.sk-newsletter,
.sk-section--why {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ==========================================================================
   36. NAWIGACJA WIDOCZNA NA TELEFONIE
   Cala nawigacja schowana pod hamburgerem to jeden z najczestszych bledow
   e-commerce: kategorie, ktorych nie widac, praktycznie nie istnieja.
   Pod naglowkiem daje pasek kategorii przewijany poziomo.
   ========================================================================== */

.sk-nawigacja {
	display: none;
	background: var(--sk-bg);
	border-bottom: 1px solid var(--sk-line);
	position: relative;
}

@media (max-width: 999px) {
	.sk-nawigacja { display: block; }
}

.sk-nawigacja__lista {
	display: flex;
	gap: var(--sk-2);
	list-style: none;
	margin: 0;
	padding: var(--sk-2) var(--sk-luz);
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
}

.sk-nawigacja__lista::-webkit-scrollbar { display: none; }

.sk-nawigacja__lista li { margin: 0; flex: 0 0 auto; scroll-snap-align: start; }

.sk-nawigacja__lista a {
	display: inline-flex;
	align-items: center;
	gap: var(--sk-2);
	min-height: 38px;
	padding: 0 var(--sk-4);
	border: 1px solid var(--sk-line);
	border-radius: 999px;
	font-size: var(--sk-text-sm);
	color: var(--sk-ink);
	text-decoration: none;
	white-space: nowrap;
	background: var(--sk-bg);
	transition: border-color var(--sk-duration) var(--sk-ease),
		background var(--sk-duration) var(--sk-ease);
}

.sk-nawigacja__lista a:hover,
.sk-nawigacja__lista a:focus-visible {
	border-color: var(--sk-ink);
	background: var(--sk-bg-soft);
}

.sk-nawigacja__lista a[aria-current="page"] {
	background: var(--sk-ink);
	border-color: var(--sk-ink);
	color: #FFFFFF;
}

.sk-nawigacja__ikona { width: 16px; height: 16px; flex-shrink: 0; }

/* Cien sygnalizujacy, ze pasek przewija sie dalej. */
.sk-nawigacja::after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	bottom: 1px;
	width: 28px;
	pointer-events: none;
	background: linear-gradient(to right, rgba(255,255,255,0), var(--sk-bg));
}

/* ==========================================================================
   37. SEKCJE NA PELNA SZEROKOSC
   Sekcje z wlasnym tlem sa zagniezdzone w kontenerze motywu, ktory dokladal
   wlasny odstep - przez to ich tresc zaczynala sie 23 px dalej niz reszta.
   Wyrywamy je z kontenera; wyrownanie zapewnia wewnetrzna klatka.
   ========================================================================== */

.sk-kategorie,
.sk-kroki,
.sk-faq-sekcja,
.sk-newsletter,
.sk-section--why {
	/* Standardowa technika pelnej szerokosci: dziala niezaleznie od tego,
	   jak szeroki jest rodzic i ile odstepu dokladа motyw. */
	width: auto;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: calc(50vw - 50%);
	padding-right: calc(50vw - 50%);
}

/* Stopka renderuje sie poza trescia strony - jej wnetrze samo trzyma klatke. */
.sk-legal-footer {
	padding-left: 0;
	padding-right: 0;
}

.sk-legal-footer__inner,
.sk-legal-footer__copy {
	padding-left: var(--sk-luz);
	padding-right: var(--sk-luz);
}

/* Shortcode WooCommerce nadaje klase kontenerowi, nie samej liscie -
   wczesniejszy selektor jej nie trafial i siatka odstawala od reszty. */
/* Siatka trzyma te sama krawedz co reszta tresci strony.
   Wczesniej probowalismy wypuscic ja na pelna szerokosc i dodac wlasny
   padding, ale na stronie glownej kontener i tak jest ograniczony do
   klatki motywu - full-bleed nie mial na czym zadzialac, a padding
   zostawal i zwezal siatke o 47 px wzgledem sasiednich sekcji. */
.sk-products-instock,
.sk-products-waitlist {
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
}

.sk-products-instock ul.products,
.sk-products-waitlist ul.products {
	max-width: calc(var(--sk-kontener) - 2 * var(--sk-luz));
	margin-left: auto !important;
	margin-right: auto !important;
}

.sk-products-instock ul.products,
.sk-products-waitlist ul.products,
.home .woocommerce ul.products {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0;
	margin-right: 0;
}

/* Motyw nadaje kontenerowi WooCommerce wlasny margines, przez ktory siatka
   odstawala od pozostalych sekcji - zerujemy go.
   Padding dokladany tu wczesniej byl bledem: WordPress ogranicza juz szerokosc
   dziecka .entry-content do rozmiaru tresci, wiec dodatkowe 24 px z kazdej
   strony zwezalo siatke o 47 px wzgledem sasiednich sekcji. Krawedz ma
   wyznaczac kontener, nie my. */
@media (max-width: 999px) {
	.woocommerce.sk-products-instock,
	.woocommerce.sk-products-waitlist {
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.sk-products-instock ul.products,
	.sk-products-waitlist ul.products {
		max-width: none;
	}
}

/* Hero ma dotykac krawedzi ekranu - zdjecie produktowe w ramce traci na sile,
   a marginesy po bokach czytaja sie jak niedokonczony uklad. */
.sk-hero3 {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: auto;
	max-width: none;
}

/* Pasek nawigacji rowniez na pelna szerokosc, spojnie z naglowkiem. */
.sk-nawigacja {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Motyw wstawia odstep nad trescia wpisu - nad zdjeciem hero czyta sie
   jako pusty pas. Strona glowna zaczyna sie od razu. */
.home .ct-container,
.home .entry-content,
.home article > .entry-content,
.home .ct-container > article {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

.home .sk-hero3 { margin-top: 0; }

/* Sekcja hero i pasek punktow bez zbednego odstepu miedzy soba. */
.sk-hero3 + .sk-hero3__punkty { margin-top: 0; }

/* Kontener tresci motywu dokladal 60 px odstepu nad zdjeciem hero.
   Na stronie glownej tresc ma zaczynac sie tuz pod nawigacja. */
.home .ct-container-full,
.home .ct-container,
.home .site-main > .ct-container-full {
	padding-top: 0 !important;
}

/* Pozostale strony zachowuja odstep - tam naglowek strony go potrzebuje. */
.home .site-main { padding-top: 0; }

/* ==========================================================================
   39. PANEL MENU — SPOJNOSC Z RESZTA SKLEPU
   Panel byl ciemny mimo jasnej strony, a kategorie pojawialy sie dwa razy:
   raz jako menu motywu, raz jako nasze kafle z opisem.
   ========================================================================== */

.ct-panel.active,
.ct-panel.active .ct-panel-inner,
.ct-panel.active .ct-panel-content,
.ct-panel.active .ct-panel-content-inner {
	background: var(--sk-bg) !important;
	color: var(--sk-ink) !important;
}

/* Oryginalne menu motywu dubluje nasze kategorie z opisem i licznikiem. */
.ct-panel.active .mobile-menu,
.ct-panel.active nav.menu-container {
	display: none !important;
}

/* Nasza tresc odpowiada za caly panel, wiec nie potrzebuje gornej linii. */
.ct-panel.active .sk-panel {
	border-top: none;
	margin-top: 0;
	padding-top: var(--sk-2);
	padding-left: var(--sk-luz);
	padding-right: var(--sk-luz);
}

/* Kolory tekstu wewnatrz panelu - wczesniej dziedziczyly ciemny motyw. */
.ct-panel.active .sk-panel__naglowek { color: var(--sk-ink-faint) !important; }
.ct-panel.active .sk-panel__nazwa { color: var(--sk-ink) !important; }
.ct-panel.active .sk-panel__opis { color: var(--sk-ink-soft) !important; }
.ct-panel.active .sk-panel__lista a { color: var(--sk-ink) !important; }
.ct-panel.active .sk-panel__social a { color: var(--sk-ink-soft) !important; }
.ct-panel.active .sk-panel__kategorie a { background: var(--sk-bg) !important; }
.ct-panel.active .sk-panel__kontakt { background: var(--sk-mist) !important; }
.ct-panel.active .sk-panel__mail { color: var(--sk-ink) !important; }

.ct-panel.active .ct-toggle-close,
.ct-panel.active .ct-toggle-close svg { color: var(--sk-ink) !important; }

/* Przycisk zamkniecia panelu mial 32 px - ponizej progu wygodnego dotkniecia. */
.ct-panel.active .ct-toggle-close {
	min-width: var(--sk-touch);
	min-height: var(--sk-touch);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ct-panel.active .ct-panel-actions {
	padding: var(--sk-2) var(--sk-luz);
	display: flex;
	justify-content: flex-end;
}

/* Ikona zamkniecia miala fill: rgba(255,255,255,.7) — bialy krzyzyk na bialym
   panelu, praktycznie niewidoczny. SVG nie dziedziczy koloru tekstu, wiec
   trzeba nadpisac samo wypelnienie. */
.ct-panel.active .ct-toggle-close svg,
.ct-panel.active .ct-toggle-close svg *,
.ct-panel.active .ct-toggle-close .ct-icon,
.ct-panel.active .ct-toggle-close .ct-icon * {
	fill: var(--sk-ink) !important;
	stroke: none !important;
	opacity: 1 !important;
}

/* 12 px to za malo, zeby krzyzyk byl czytelny. */
.ct-panel.active .ct-toggle-close svg {
	width: 18px !important;
	height: 18px !important;
}

/* Obrys przycisku ulatwia trafienie i sygnalizuje, ze to element klikalny. */
.ct-panel.active .ct-toggle-close {
	border: 1px solid var(--sk-line);
	border-radius: 999px;
	background: var(--sk-bg);
	transition: border-color var(--sk-duration) var(--sk-ease),
		background var(--sk-duration) var(--sk-ease);
}

.ct-panel.active .ct-toggle-close:hover {
	border-color: var(--sk-ink);
	background: var(--sk-bg-soft);
}

/* Pasek z przyciskiem zamkniecia wychodzil ponad krawedz ekranu -
   gorna czesc przycisku byla ucieta. */
.ct-panel.active .ct-panel-actions {
	padding-top: var(--sk-3);
	padding-bottom: var(--sk-2);
	margin: 0;
	min-height: calc(var(--sk-touch) + var(--sk-4));
	align-items: center;
}

.ct-panel.active .ct-toggle-close {
	position: static;
	margin: 0;
	inset: auto;
	transform: none;
}

/* ==========================================================================
   40. PANEL MENU — UKLAD LISTOWY
   Kafle z opisem czytaly sie jak siatka produktow. Menu ma byc lista:
   ikona, nazwa, licznik, strzalka — jeden rzad na pozycje.
   ========================================================================== */

.sk-panel {
	padding: var(--sk-2) var(--sk-luz) calc(var(--sk-7) + env(safe-area-inset-bottom, 0px));
}

.sk-panel__naglowek {
	font-size: var(--sk-text-xs);
	font-weight: 600;
	letter-spacing: var(--sk-tracking-wide);
	text-transform: uppercase;
	color: var(--sk-ink-faint);
	margin: var(--sk-5) 0 var(--sk-2);
}

.sk-panel__naglowek:first-child { margin-top: var(--sk-2); }

.sk-panel__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--sk-line);
}

.sk-panel__menu li { margin: 0; }

.sk-panel__poz {
	display: grid;
	grid-template-columns: 24px 1fr auto auto;
	align-items: center;
	gap: var(--sk-3);
	min-height: 56px;
	padding: var(--sk-2) 0;
	border-bottom: 1px solid var(--sk-line);
	text-decoration: none;
	color: var(--sk-ink);
	transition: color var(--sk-duration) var(--sk-ease),
		padding-left var(--sk-duration) var(--sk-ease);
}

.sk-panel__poz:hover,
.sk-panel__poz:focus-visible {
	color: var(--sk-highlight);
	padding-left: var(--sk-2);
}

.sk-panel__ikona {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: var(--sk-ink-soft);
	flex-shrink: 0;
}

.sk-panel__ikona svg { width: 22px; height: 22px; display: block; }

.sk-panel__poz:hover .sk-panel__ikona { color: var(--sk-highlight); }

.sk-panel__etykieta {
	font-size: var(--sk-text-base);
	font-weight: 500;
	line-height: 1.3;
}

.sk-panel__poz--glowna .sk-panel__etykieta { font-weight: 600; }

.sk-panel__licznik {
	font-size: var(--sk-text-xs);
	font-weight: 500;
	color: var(--sk-ink-soft);
	background: var(--sk-bg-soft);
	border-radius: 999px;
	min-width: 26px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--sk-2);
}

.sk-panel__strzalka {
	display: inline-flex;
	color: var(--sk-line-strong);
	flex-shrink: 0;
}

.sk-panel__strzalka svg { width: 16px; height: 16px; display: block; }

.sk-panel__poz:hover .sk-panel__strzalka { color: var(--sk-highlight); }

/* Pozycje drugorzedne — lzejsza waga, ta sama siatka. */
.sk-panel__menu--drugorzedne .sk-panel__etykieta {
	font-weight: 400;
	font-size: var(--sk-text-sm);
	color: var(--sk-ink-soft);
}

.sk-panel__menu--drugorzedne .sk-panel__poz { min-height: 48px; }
.sk-panel__menu--drugorzedne .sk-panel__poz:hover .sk-panel__etykieta { color: var(--sk-highlight); }

/* Kontakt jako jeden klikalny blok. */
.sk-panel__kontakt {
	display: grid;
	grid-template-columns: 24px 1fr;
	gap: var(--sk-3);
	align-items: center;
	margin-top: var(--sk-6);
	padding: var(--sk-4);
	background: var(--sk-mist);
	border-radius: var(--sk-radius);
	text-decoration: none;
	color: var(--sk-ink);
}

.sk-panel__kontakt strong {
	display: block;
	font-size: var(--sk-text-base);
	font-weight: 500;
	margin-bottom: 2px;
}

.sk-panel__kontakt span span,
.sk-panel__kontakt > span:last-child {
	font-size: var(--sk-text-sm);
	color: var(--sk-ink-soft);
	line-height: var(--sk-leading-snug);
}

.sk-panel__social {
	list-style: none;
	display: flex;
	gap: var(--sk-5);
	margin: var(--sk-5) 0 0;
	padding: var(--sk-4) 0 0;
	border-top: 1px solid var(--sk-line);
}

.sk-panel__social li { margin: 0; }

.sk-panel__social a {
	font-size: var(--sk-text-sm);
	color: var(--sk-ink-soft);
	text-decoration: none;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
}

.sk-panel__social a:hover { color: var(--sk-ink); }

/* Kolory wewnatrz panelu motywu (ciemny motyw nadpisywalby nasze). */
.ct-panel.active .sk-panel__etykieta,
.ct-panel.active .sk-panel__kontakt strong { color: var(--sk-ink) !important; }
.ct-panel.active .sk-panel__ikona,
.ct-panel.active .sk-panel__licznik,
.ct-panel.active .sk-panel__social a { color: var(--sk-ink-soft) !important; }

/* ==========================================================================
   41. HERO NA TELEFONIE — TEKST W KADRZE
   Zdjecie poziome i tekst pod nim czytaly sie jak dwa osobne bloki.
   Kadr pionowy ma pusty srodek, wiec tresc wchodzi w kompozycje.
   ========================================================================== */

@media (max-width: 799px) {
	.sk-hero3 {
		display: grid;
		place-items: center;
	}

	.sk-hero3__tlo,
	.sk-hero3__tresc { grid-area: 1 / 1; }

	.sk-hero3__tlo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	.sk-hero3__tresc {
		position: relative;
		z-index: 2;
		background: transparent;
		padding: var(--sk-5) var(--sk-luz);
		max-width: 30rem;
	}

	/* Srodek kadru jest jednolicie kremowy, wiec tekst nie potrzebuje
	   podkladki - ta tworzyla widoczna plame. */

	.sk-hero3__tytul { font-size: clamp(1.75rem, 1.1rem + 3.6vw, 2.4rem); }
	.sk-hero3__lead { font-size: var(--sk-text-base); margin-bottom: var(--sk-4); }
	.sk-hero3__akcje { flex-direction: column; align-items: stretch; }
	.sk-hero3__akcje a { width: 100%; }
}

/* Kadr pionowy ma proporcje 3:4 — wymuszamy je, zeby pasy ze skarpetkami
   nie byly przycinane, a tresc trafiala dokladnie w pusty srodek. */
@media (max-width: 799px) {
	.sk-hero3 { aspect-ratio: 3 / 4; }

	.sk-hero3__tresc {
		padding-top: var(--sk-3);
		padding-bottom: var(--sk-3);
	}

	/* Drugi przycisk wchodzil na dolny pas ze zdjeciem. Na telefonie
	   liczy sie jedna, wyrazna droga dalej — reszta jest w nawigacji. */
	.sk-hero3__akcje .sk-btn-ghost { display: none; }

	.sk-hero3__lead {
		margin-bottom: var(--sk-4);
		max-width: 24rem;
		margin-left: auto;
		margin-right: auto;
	}

	.sk-hero3__nad { margin-bottom: var(--sk-2); }
	.sk-hero3__tytul { margin-bottom: var(--sk-3); }
}

/* Bardzo waskie ekrany: skracamy oddech, zeby tresc zmiescila sie w kadrze. */
@media (max-width: 380px) {
	.sk-hero3__lead { font-size: var(--sk-text-sm); }
	.sk-hero3__tytul { font-size: 1.6rem; }
}

/* Nadnaglowek wchodzil na gorna skarpetke i tracil czytelnosc.
   Na telefonie to element dekoracyjny — tresc niesie tytul. */
@media (max-width: 799px) {
	.sk-hero3__nad { display: none; }
	.sk-hero3__tresc { padding-top: var(--sk-5); }
}

/* ==========================================================================
   42. FORMULARZE POZIOME — ROWNA WYSOKOSC POLA I PRZYCISKU
   Pole mialo 44 px (prog dotykowy), przycisk 52 px (z hero) — przy ustawieniu
   obok siebie roznica byla widoczna. Wysokosc ustala jeden token.
   ========================================================================== */

:root { --sk-pole: 52px; }

.sk-newsletter__form,
.sk-szukaj-panel form {
	align-items: stretch;
}

.sk-newsletter__form input[type="email"],
.sk-newsletter__form button,
.sk-newsletter__form .sk-btn-primary,
.sk-szukaj-panel input[type="search"],
.sk-szukaj-panel button,
.sk-szukaj-panel .sk-btn-primary {
	height: var(--sk-pole);
	min-height: var(--sk-pole);
	box-sizing: border-box;
	line-height: 1.2;
}

/* Ten sam promien i grubosc obramowania po obu stronach. */
.sk-newsletter__form input[type="email"],
.sk-szukaj-panel input[type="search"] {
	border-radius: var(--sk-radius-sm);
	border-width: 1px;
}

.sk-newsletter__form .sk-btn-primary,
.sk-szukaj-panel .sk-btn-primary {
	border-radius: var(--sk-radius-sm);
	border-width: 1px;
	white-space: nowrap;
}

/* Na waskich ekranach pole i przycisk jeden pod drugim, pelna szerokosc. */
@media (max-width: 480px) {
	.sk-newsletter__form { flex-direction: column; }
	.sk-newsletter__form input[type="email"],
	.sk-newsletter__form .sk-btn-primary { width: 100%; flex: 0 0 auto; }
}

/* Opis newslettera byl wysrodkowany, podczas gdy naglowek i formularz
   trzymaja lewa krawedz — tekst wygladal na przypadkowo wciety. */
.sk-newsletter__opis,
.sk-newsletter__zgoda {
	margin-left: 0;
	margin-right: 0;
	text-align: left;
}

/* ==========================================================================
   43. POLA WTYCZKI LISTY OCZEKUJACYCH
   Wtyczka umieszcza ikone wewnatrz pola (position:absolute), ale nie
   rezerwuje na nia miejsca — pierwsza litera podpowiedzi znikala pod ikona.
   ========================================================================== */

[class*="xoo-aff"] input[type="email"],
[class*="xoo-aff"] input[type="text"],
[class*="xoo-aff"] input[type="number"],
[class*="xoo-wl"] input[type="email"],
[class*="xoo-wl"] input[type="text"] {
	padding-left: 46px !important;
	text-indent: 0 !important;
}

/* Ikona wysrodkowana w pionie i o stalej szerokosci, zeby odstep
   po lewej byl przewidywalny. */
.xoo-aff-input-icon {
	width: 46px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	color: var(--sk-ink-faint) !important;
	top: 0 !important;
	bottom: 0 !important;
	height: auto !important;
}

/* Pole ilosci bywa waskie — tam ikona tylko przeszkadza. */
[class*="xoo-aff"] input[type="number"] { padding-left: var(--sk-4) !important; }
[class*="xoo-aff"] .xoo-aff-number .xoo-aff-input-icon { display: none !important; }

/* ==========================================================================
   44. KARTA PRODUKTU — SZEROKOSCI I RYTM
   Opis rozciagal sie na cala szerokosc okna (zbyt dlugie wiersze),
   a FAQ bylo wciete wzgledem reszty. Jedna klatka dla calej sekcji.
   ========================================================================== */

/* Opis i FAQ sa dziecmi .product, ktory lezy poza klatka motywu.
   Blocksy trzyma tresc w kontenerze 1290 px z bocznym marginesem 5%
   (przy szerokim oknie decyduje max-width, przy waskim - procent).
   Odtwarzamy dokladnie ta sama formule, zeby wszystkie sekcje karty
   produktu mialy jedna krawedz. Procent liczymy od rodzica, nie z vw,
   bo vw obejmuje pasek przewijania i rozjechaloby sie o jego szerokosc. */
.sk-opis-produktu,
.sk-faq-produkt,
.sk-dostawa-tabela,
.sk-sprzedawca,
.woocommerce div.product .woocommerce-tabs {
	max-width: none;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding-left: max(5%, calc((100% - 1290px) / 2));
	padding-right: max(5%, calc((100% - 1290px) / 2));
	float: none;
	box-sizing: border-box;
}

/* Tekst ciagly ograniczamy dlugoscia wiersza — powyzej ~70 znakow
   oko gubi poczatek nastepnej linii. */
.sk-opis-produktu > p,
.sk-opis-produktu > ul,
.sk-opis-produktu > ol { max-width: var(--sk-kontener-tekst); }

.sk-opis-produktu {
	margin-top: var(--sk-7);
	padding-top: var(--sk-6);
	border-top: 1px solid var(--sk-line);
}

.sk-opis-produktu h2 {
	font-size: var(--sk-text-xl);
	font-weight: 500;
	letter-spacing: var(--sk-tracking-tight);
	margin: var(--sk-6) 0 var(--sk-3);
}

.sk-opis-produktu h2:first-child { margin-top: 0; }

.sk-opis-produktu ul {
	margin: 0 0 var(--sk-4);
	padding-left: var(--sk-5);
}

.sk-opis-produktu li {
	margin-bottom: var(--sk-2);
	color: var(--sk-ink-soft);
	line-height: var(--sk-leading);
}

.sk-opis-produktu p { color: var(--sk-ink-soft); }
.sk-opis-produktu strong { color: var(--sk-ink); }

.sk-faq-produkt {
	margin-top: var(--sk-7);
	padding-top: var(--sk-6);
	border-top: 1px solid var(--sk-line);
}

/* Klatka FAQ jest szeroka jak galeria, ale odpowiedzi trzymamy w kolumnie
   czytelnej dlugosci - przy 1290 px oko gubi poczatek nastepnej linii. */
.sk-faq-produkt .sk-faq__lista,
.sk-faq-produkt .sk-faq__item { max-width: 860px; }

/* Produkty powiazane — odstep i kreska oddzielajaca od FAQ.
   Szerokosci nie ruszamy: sekcja ma klase is-width-constrained motywu,
   ktora trzyma ja w tej samej klatce co galeria. */
.woocommerce .related,
.woocommerce .up-sells {
	margin-top: var(--sk-8);
	padding-top: var(--sk-7);
	border-top: 1px solid var(--sk-line);
	box-sizing: border-box;
	float: none;
}

.woocommerce .related > h2,
.woocommerce .up-sells > h2 {
	font-size: var(--sk-text-2xl);
	font-weight: 500;
	letter-spacing: var(--sk-tracking-tight);
	margin: 0 0 var(--sk-5);
}


/* ==========================================================================
   45. PRODUKTY POWIAZANE
   Widocznosc i liczba kolumn siedzi w ustawieniach motywu (domyslnie
   Blocksy pokazywal sekcje wylacznie na desktopie, a ruch jest w wiekszosci
   mobilny). Tutaj zostaje tylko to, czego motyw nie robi.
   ========================================================================== */

/* Gestsza siatka niz w katalogu - tu liczy sie liczba alternatyw
   w zasiegu wzroku, nie wielkosc pojedynczego zdjecia. */
@media (min-width: 700px) {
	.woocommerce .related ul.products:not(.columns-2),
	.woocommerce .up-sells ul.products:not(.columns-2) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.woocommerce .related ul.products:not(.columns-2),
	.woocommerce .up-sells ul.products:not(.columns-2) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Kafle w rzedzie mialy rozne wysokosci - dluzszy tytul spychal cene
   nizej niz u sasiada. Wyrownujemy ceny i przyciski do dolu kafla. */
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product .price { margin-top: auto; }

/* Nazwa zestawu miesci sie w jednym albo dwoch wierszach, wiec ceny
   w sasiednich kaflach staly na roznych wysokosciach. Rezerwujemy dwa
   wiersze zawsze i przycinamy dluzsze nazwy - siatka zostaje rowna. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .entry-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(2 * var(--sk-leading) * 1em);
}

/* Motyw ukrywa przycisk w kaflu na telefonie. Przy ruchu w wiekszosci
   mobilnym oznacza to, ze "Powiadom o dropie" - najwazniejszy sygnal
   popytu w tym POC - jest dostepny tylko po wejsciu w produkt. */
@media (max-width: 999px) {
	.woocommerce ul.products li.product .ct-woo-card-actions .button,
	.woocommerce ul.products li.product .ct-woo-card-actions .add_to_cart_button {
		display: flex !important;
		width: 100%;
		min-height: var(--sk-touch);
		align-items: center;
		justify-content: center;
		margin-top: var(--sk-3);
	}
}

/* Naglowki sekcji karty produktu maja jedna wage - "Podobne produkty"
   bylo dwa razy wieksze niz "Czeste pytania". */
.woocommerce .related > h2,
.woocommerce .up-sells > h2,
.sk-faq-produkt h2 {
	font-size: var(--sk-text-xl);
	font-weight: 500;
	letter-spacing: var(--sk-tracking-tight);
	margin: 0 0 var(--sk-5);
}

/* ==========================================================================
   46. FORMULARZ LISTY OCZEKUJACYCH
   Wtyczka narzuca capitalize na przycisku, co po polsku daje
   "Powiadom Mnie O Dropie". W polszczyznie wielka litera stoi
   tylko na poczatku zdania.
   ========================================================================== */

.xoo-wl-submit-btn,
.xoo-wl-action-btn,
.xoo-wl-container button { text-transform: none !important; }

/* ==========================================================================
   47. RABAT PROGOWY
   Rabat, o ktorym klient nie wie, nie zmienia jego decyzji. Komunikat
   musi byc widoczny na karcie produktu, a nie dopiero w koszyku.
   ========================================================================== */

.sk-rabat-progi {
	font-size: var(--sk-text-sm);
	line-height: var(--sk-leading-snug);
	color: var(--sk-ink);
	background: var(--sk-mist);
	border-radius: var(--sk-radius-sm);
	padding: var(--sk-3);
	margin: 0 0 var(--sk-4);
}

.sk-rabat-progi span {
	display: block;
	margin-top: var(--sk-1);
	color: var(--sk-ink-soft);
}

.sk-rabat-info {
	font-size: var(--sk-text-sm);
	color: var(--sk-ink);
	background: var(--sk-mist);
	border-left: 3px solid var(--sk-success);
	border-radius: var(--sk-radius-sm);
	padding: var(--sk-3) var(--sk-4);
	margin: 0 0 var(--sk-5);
}

.sk-rabat-info strong { color: var(--sk-ink); }

.sk-rabat-wiersz th,
.sk-rabat-wiersz td { color: var(--sk-success); }

/* Rozmiar pokazany tekstem, gdy wariant jest tylko jeden i selektor
   zostal ukryty - informacja nie moze zniknac razem z polem wyboru. */
.sk-jeden-rozmiar {
	font-size: var(--sk-text-sm);
	color: var(--sk-ink-soft);
	margin: 0 0 var(--sk-4);
}

/* Etykieta na zdjeciu karty produktu w przygotowaniu. Domyslna mowila
   "WYPRZEDANE", co sugerowalo, ze towar byl w sprzedazy i sie skonczyl. */
.sk-etykieta-drop {
	background: rgba(255, 255, 255, 0.94) !important;
	color: var(--sk-ink) !important;
	font-size: var(--sk-text-xs);
	font-weight: 500;
	letter-spacing: var(--sk-tracking-wide);
	text-transform: uppercase;
	border-radius: var(--sk-radius-sm);
	box-shadow: var(--sk-shadow-sm);
}

/* ==========================================================================
   48. PROPORCJE ZDJEC PRODUKTOW
   Zdjecia z hurtowni sa kwadratowe (1080x1080), a motyw wymuszal na nich
   4:3 w siatce i 3:4 w galerii. Przy object-fit: cover oznaczalo to, ze
   z kazdego zdjecia znikala czwarta czesc produktu - skarpetka byla
   przycieta u gory i u dolu. Kwadrat nie obcina niczego.
   ========================================================================== */

/* Proporcje trzyma KONTENER, a obraz wypelnia go w calosci.
   Wczesniej bylo odwrotnie: aspect-ratio siedzialo na <img>, a wysokosc
   byla "auto". Chromium wyliczal wtedy wysokosc z kontenera i przypadkiem
   wychodzil kwadrat, ale WebKit (Safari, wszystkie przegladarki na iOS)
   respektuje aspect-ratio obrazu doslownie - zostawal przy 4:3 motywu,
   przez co zdjecie bylo nizsze od kafla, wychodzilo poza kadr i wygladalo
   na uciete u dolu. Na Androidzie i w podgladzie mobilnym problemu nie
   bylo widac, bo oba uzywaja Chromium.

   Regula: kontener dostaje aspect-ratio, obraz dostaje 100% wysokosci
   i szerokosci. Dziala tak samo w kazdym silniku. */
.woocommerce ul.products li.product .ct-media-container,
.woocommerce ul.products li.product figure,
.woocommerce div.product .woocommerce-product-gallery .ct-media-container,
.woocommerce div.product .woocommerce-product-gallery__image {
	aspect-ratio: 1 / 1 !important;
	height: auto !important;
	overflow: hidden;
}

.woocommerce ul.products li.product img,
.woocommerce ul.products li.product .ct-media-container img,
.woocommerce ul.products li.product figure img,
.woocommerce div.product .woocommerce-product-gallery img,
.woocommerce div.product .woocommerce-product-gallery .ct-media-container img,
.woocommerce div.product .woocommerce-product-gallery__image img {
	aspect-ratio: auto !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Etykieta dropu przy malym kaflu zajmowala pol zdjecia. */
.woocommerce ul.products li.product .sk-drop-badge,
.woocommerce ul.products li.product .out-of-stock-badge {
	font-size: 10px;
	letter-spacing: 0.04em;
	padding: 3px var(--sk-2);
	max-width: calc(100% - var(--sk-4));
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* "Powiadom o dropie" nie miescilo sie w jednym wierszu na kaflu 166 px,
   wiec przycisk rosl do 59 px i rozjezdzal rytm siatki. */
@media (max-width: 999px) {
	.woocommerce ul.products li.product .ct-woo-card-actions .button,
	.woocommerce ul.products li.product .ct-woo-card-actions .add_to_cart_button {
		font-size: var(--sk-text-sm);
		padding: var(--sk-2) var(--sk-3);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		min-height: var(--sk-touch);
	}
}

/* ==========================================================================
   49. WIELKOSC KAFLA NA TELEFONIE
   Dwie kolumny dawaly zdjecie o szerokosci 166 px - przy produkcie, ktory
   sprzedaje sie wygladem, to za malo, zeby ocenic wzor. Etykieta dropu
   zajmowala wtedy jedna trzecia kadru. Jedna kolumna daje 343 px, czyli
   dwa razy wiecej na to, co klient faktycznie oglada.
   ========================================================================== */

@media (max-width: 560px) {
	.woocommerce ul.products {
		grid-template-columns: 1fr !important;
		gap: var(--sk-6);
	}

	/* Przy jednej kolumnie nazwa i cena moga stanac obok siebie w jednym
	   wierszu - kafel nie rosnie wtedy niepotrzebnie w pionie. */
	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	.woocommerce ul.products li.product .entry-title {
		min-height: 0;
		-webkit-line-clamp: 2;
		font-size: var(--sk-text-base);
	}

	.woocommerce ul.products li.product .ct-woo-card-actions .button,
	.woocommerce ul.products li.product .ct-woo-card-actions .add_to_cart_button {
		font-size: var(--sk-text-base);
	}

	/* Wieksze zdjecie uniesie normalna etykiete zamiast zmniejszonej. */
	.woocommerce ul.products li.product .sk-drop-badge,
	.woocommerce ul.products li.product .out-of-stock-badge {
		font-size: var(--sk-text-xs);
		padding: var(--sk-1) var(--sk-2);
	}
}

/* Miniatury galerii mialy po ~50 px - na tyle malo, ze nie dalo sie
   rozpoznac, czym rozni sie kolejne ujecie. Cztery w rzedzie daja
   ~78 px i zdjecie zaczyna cokolwiek pokazywac. */
.woocommerce .ct-product-gallery-container .ct-media-container:not(:first-child),
.woocommerce div.product .flex-control-thumbs,
.woocommerce div.product .woocommerce-product-gallery__wrapper--thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sk-2);
	margin-top: var(--sk-3);
	padding: 0;
	list-style: none;
}

.woocommerce div.product .flex-control-thumbs li {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}

.woocommerce div.product .flex-control-thumbs img {
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
	border-radius: var(--sk-radius-sm);
	cursor: pointer;
}

/* Propozycje pod karta zostaja w dwoch kolumnach takze na telefonie.
   To lista alternatyw, nie glowny katalog - liczy sie, ile z nich widac
   naraz, a nie wielkosc pojedynczego zdjecia. */
@media (max-width: 560px) {
	.woocommerce .related ul.products,
	.woocommerce .up-sells ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: var(--sk-4);
	}

	.woocommerce .related ul.products li.product .woocommerce-loop-product__title,
	.woocommerce .up-sells ul.products li.product .woocommerce-loop-product__title {
		font-size: var(--sk-text-sm);
	}

	.woocommerce .related ul.products li.product .button,
	.woocommerce .up-sells ul.products li.product .button {
		font-size: var(--sk-text-sm);
	}
}

/* ==========================================================================
   50. WYBOR ROZMIARU
   Lista rozwijana przy dwoch wariantach kosztuje trzy interakcje i ukrywa
   to, co w ogole jest dostepne. Kafelki pokazuja komplet od razu.
   ========================================================================== */

.sk-rozmiary__tytul {
	font-size: var(--sk-text-sm);
	font-weight: 500;
	color: var(--sk-ink);
	margin: 0 0 var(--sk-2);
}

.sk-rozmiary {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sk-2);
	margin: 0 0 var(--sk-4);
}

.sk-rozmiar {
	flex: 0 1 auto;
	min-height: var(--sk-touch);
	padding: var(--sk-2) var(--sk-4);
	font-family: var(--sk-font);
	font-size: var(--sk-text-sm);
	color: var(--sk-ink);
	background: var(--sk-bg);
	border: 1px solid var(--sk-line-strong);
	border-radius: var(--sk-radius-sm);
	cursor: pointer;
	transition: border-color var(--sk-duration) var(--sk-ease),
		background var(--sk-duration) var(--sk-ease);
}

.sk-rozmiar:hover { border-color: var(--sk-ink); }

/* Wybrany rozmiar odroznia sie wypelnieniem, nie tylko obwodka - sama
   zmiana koloru ramki bywa niewidoczna przy slabym kontrascie ekranu. */
.sk-rozmiar.is-wybrany {
	background: var(--sk-ink);
	border-color: var(--sk-ink);
	color: var(--sk-bg);
}

.sk-rozmiar:focus-visible {
	outline: 2px solid var(--sk-highlight);
	outline-offset: 2px;
}

/* Oryginalne pole nadal niesie stan do WooCommerce, ale nie zajmuje
   miejsca i nie lapie fokusu. */
.sk-warianty-ukryte {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ==========================================================================
   51. FILTR ROZMIARU
   Katalog ma jedenascie wzorow, ale tylko siedem w rozmiarze 41-46.
   Bez filtra kupujacy o wiekszej stopie sprawdza kazdy produkt po kolei.
   ========================================================================== */

.sk-filtr {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--sk-2);
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
}

.sk-filtr__etykieta {
	font-size: var(--sk-text-sm);
	font-weight: 500;
	color: var(--sk-ink);
	margin-right: var(--sk-1);
}

.sk-filtr__opcja {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sk-1);
	min-height: var(--sk-touch);
	padding: var(--sk-2) var(--sk-4);
	font-size: var(--sk-text-sm);
	color: var(--sk-ink);
	background: var(--sk-bg);
	border: 1px solid var(--sk-line-strong);
	border-radius: var(--sk-radius-sm);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color var(--sk-duration) var(--sk-ease),
		background var(--sk-duration) var(--sk-ease);
}

.sk-filtr__opcja:hover { border-color: var(--sk-ink); }

.sk-filtr__opcja.is-wybrany {
	background: var(--sk-ink);
	border-color: var(--sk-ink);
	color: var(--sk-bg);
}

/* Licznik mowi, ile wzorow zostanie po kliknieciu - filtr prowadzacy
   do pustej listy to zmarnowany ruch. */
.sk-filtr__ile {
	font-size: var(--sk-text-xs);
	color: var(--sk-ink-faint);
}

.sk-filtr__opcja.is-wybrany .sk-filtr__ile { color: rgba(255, 255, 255, 0.7); }

.sk-filtr__opcja:focus-visible {
	outline: 2px solid var(--sk-highlight);
	outline-offset: 2px;
}

/* Pasek nad siatka: filtr po lewej, sortowanie po prawej, w jednej linii. */
.woocommerce .woo-listing-top {
	align-items: center;
	gap: var(--sk-3);
	margin-bottom: var(--sk-5);
}

@media (max-width: 480px) {
	.sk-filtr__opcja { font-size: var(--sk-text-xs); }
}

@media (max-width: 900px) {
	/* Slowo "Rozmiar" zjadalo jedna trzecia rzedu i wypychalo ostatni
	   kafelek do drugiej linii. Same zakresy liczbowe mowia, czego dotycza;
	   dla czytnikow ekranu opis niesie aria-label grupy. */
	.sk-filtr__etykieta { display: none; }

	/* Kafelki dziela rzad po rowno, zeby pasek nie wygladal przypadkowo. */
	.sk-filtr { gap: var(--sk-1); }

	.sk-filtr__opcja {
		flex: 1 1 0;
		min-width: 0;
		padding: var(--sk-2);
		font-size: var(--sk-text-sm);
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Przy tak waskich kafelkach licznik przestaje sie miescic obok
	   zakresu - zostaje sam rozmiar, liczby widac po kliknieciu. */
	.sk-filtr__ile { display: none; }

	.woocommerce .woo-listing-top { gap: var(--sk-2); }
}

/* ==========================================================================
   52. SEKCJE OPISU, ROZMIAROWKA I KOSZTY DOSTAWY
   Wnioski z benchmarku: konkurencja trzyma tresci techniczne w akordeonach,
   pokazuje odnosnik do rozmiarowki przy wyborze rozmiaru i podaje koszty
   dostawy tabela z progiem darmowej wysylki.
   ========================================================================== */

.sk-sekcja-opisu {
	border-bottom: 1px solid var(--sk-line);
}

.sk-sekcja-opisu__tytul {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sk-3);
	padding: var(--sk-4) 0;
	font-size: var(--sk-text-lg);
	font-weight: 500;
	letter-spacing: var(--sk-tracking-tight);
	color: var(--sk-ink);
	cursor: pointer;
	list-style: none;
	min-height: var(--sk-touch);
}

.sk-sekcja-opisu__tytul::-webkit-details-marker { display: none; }

.sk-sekcja-opisu__tytul::after {
	content: "+";
	font-size: var(--sk-text-xl);
	font-weight: 400;
	color: var(--sk-ink-soft);
	line-height: 1;
}

.sk-sekcja-opisu[open] .sk-sekcja-opisu__tytul::after { content: "−"; }

.sk-sekcja-opisu__tresc { padding-bottom: var(--sk-4); }

.sk-sekcja-opisu__tytul:focus-visible {
	outline: 2px solid var(--sk-highlight);
	outline-offset: 2px;
}

/* Odnosnik do rozmiarowki stoi przy naglowku wyboru rozmiaru. */
.sk-rozmiarowka__link {
	margin-left: var(--sk-2);
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--sk-font);
	font-size: var(--sk-text-sm);
	font-weight: 400;
	color: var(--sk-highlight);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.sk-rozmiarowka {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sk-4);
	background: rgba(25, 24, 23, 0.5);
}

.sk-rozmiarowka__panel {
	width: 100%;
	max-width: 460px;
	max-height: 90vh;
	overflow-y: auto;
	padding: var(--sk-6);
	background: var(--sk-bg);
	border-radius: var(--sk-radius);
	box-shadow: var(--sk-shadow-lg, 0 20px 60px rgba(25, 24, 23, 0.25));
}

.sk-rozmiarowka__tytul {
	font-size: var(--sk-text-xl);
	font-weight: 500;
	margin: 0 0 var(--sk-4);
}

.sk-rozmiarowka__tabela,
.sk-dostawa-tabela table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--sk-text-sm);
	margin-bottom: var(--sk-4);
}

.sk-rozmiarowka__tabela th,
.sk-rozmiarowka__tabela td,
.sk-dostawa-tabela th,
.sk-dostawa-tabela td {
	padding: var(--sk-2) var(--sk-3);
	text-align: left;
	border-bottom: 1px solid var(--sk-line);
}

.sk-rozmiarowka__tabela thead th,
.sk-dostawa-tabela thead th {
	font-weight: 500;
	color: var(--sk-ink-soft);
	font-size: var(--sk-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--sk-tracking-wide);
}

.sk-rozmiarowka__wskazowka,
.sk-dostawa-tabela__uwaga {
	font-size: var(--sk-text-sm);
	color: var(--sk-ink-soft);
	line-height: var(--sk-leading);
	margin: 0 0 var(--sk-3);
}

.sk-rozmiarowka__uwaga {
	font-size: var(--sk-text-xs);
	color: var(--sk-ink-faint);
	margin: 0 0 var(--sk-4);
}

.sk-rozmiarowka__zamknij {
	width: 100%;
	min-height: var(--sk-pole);
	border: 1px solid var(--sk-line-strong);
	border-radius: var(--sk-radius-sm);
	background: var(--sk-bg);
	font-family: var(--sk-font);
	font-size: var(--sk-text-base);
	color: var(--sk-ink);
	cursor: pointer;
}

/* Koszt dostawy w tabeli: klient widzi od razu, ile brakuje do gratisu. */
.sk-dostawa-tabela {
	margin-top: var(--sk-7);
	padding-top: var(--sk-6);
	border-top: 1px solid var(--sk-line);
}

.sk-dostawa-tabela h2 {
	font-size: var(--sk-text-xl);
	font-weight: 500;
	letter-spacing: var(--sk-tracking-tight);
	margin: 0 0 var(--sk-4);
}

.sk-dostawa-tabela__gratis {
	color: var(--sk-success);
	font-weight: 500;
}

@media (max-width: 480px) {
	.sk-dostawa-tabela table { font-size: var(--sk-text-xs); }

	.sk-dostawa-tabela th,
	.sk-dostawa-tabela td { padding: var(--sk-2) var(--sk-1); }
}

/* ==========================================================================
   53. KOLOR ODNOSNIKOW
   Motyw zostawial domyslny niebieski (#1A56C4) w breadcrumbach, stopce,
   adresie e-mail i odnosnikach w tresci. Przy czarnych przyciskach i
   ciepłej palecie wygladalo to jak niedokonczony szablon.

   Odnosnik ma byc rozpoznawalny nie tylko kolorem (WCAG 1.4.1), wiec
   w tresci zostaje podkreslenie, a kolorem odrozniamy stan najechania.
   ========================================================================== */

.sk-legal-footer a,
.sk-newsletter__zgoda a,
.sk-more a,
.woocommerce-breadcrumb a,
.sk-opis-produktu a,
.entry-content a:not(.button):not([class*="sk-btn"]) {
	color: var(--sk-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	transition: color var(--sk-duration) var(--sk-ease);
}

.sk-legal-footer a:hover,
.sk-newsletter__zgoda a:hover,
.sk-more a:hover,
.woocommerce-breadcrumb a:hover,
.sk-opis-produktu a:hover,
.entry-content a:not(.button):not([class*="sk-btn"]):hover {
	color: var(--sk-highlight);
}

/* Sciezka okruszkow to nawigacja, nie tresc - podkreslenie kazdego
   elementu robiloby z niej platanine linii. */
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a,
.ct-breadcrumbs,
.ct-breadcrumbs a {
	color: var(--sk-ink-soft);
	text-decoration: none;
}

.woocommerce-breadcrumb a:hover,
.ct-breadcrumbs a:hover {
	color: var(--sk-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Stopka: odnosniki drugorzedne wobec tresci, ale nadal czytelne. */
.sk-legal-footer a {
	color: var(--sk-ink-soft);
	text-decoration: none;
}

.sk-legal-footer a:hover {
	color: var(--sk-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Adres e-mail w danych sprzedawcy - podkreslony, bo to zaproszenie
   do kontaktu, nie zwykla pozycja nawigacji. */
.sk-legal-footer__seller a {
	color: var(--sk-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* "Wyczyść" przy wariantach mialo wlasny odcien granatu. */
.woocommerce div.product .reset_variations {
	color: var(--sk-ink-soft);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.woocommerce div.product .reset_variations:hover { color: var(--sk-ink); }

/* ==========================================================================
   54. OBLE KSZTALTY
   Przyciski w formie pigulki, pola i karty z lagodnym promieniem.
   Rozroznienie jest celowe: pigulka znaczy "klikam", prostokat
   z zaokragleniem "wpisuje".
   ========================================================================== */

.sk-btn-primary,
.sk-btn-ghost,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce div.product form.cart .button,
.woocommerce ul.products li.product .button,
.sk-newsletter__form button,
.xoo-wl-submit-btn,
.sk-sticky-cta__btn,
.sk-rozmiarowka__zamknij,
.sk-zgoda__panel button,
.sk-rozmiar,
.sk-filtr__opcja,
.sk-drop-badge,
.out-of-stock-badge,
.skietki-dostawa {
	border-radius: var(--sk-radius-pill);
}

/* Licznik sztuk stoi w rzedzie z przyciskiem, wiec musi miec ten sam
   ksztalt - inaczej rzad wyglada jak zlozony z dwoch roznych interfejsow. */
.woocommerce .quantity {
	border-radius: var(--sk-radius-pill);
}

/* Pola tekstowe: zaokraglone, ale nie do pigulki. */
.sk-newsletter__form input,
.xoo-aff-field,
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="tel"],
.woocommerce form textarea {
	border-radius: var(--sk-radius);
}

/* Zdjecia i karty - lagodny promien zamiast ostrego kantu. */
.woocommerce ul.products li.product img,
.woocommerce ul.products li.product .ct-media-container,
.woocommerce div.product .woocommerce-product-gallery img,
.woocommerce div.product .ct-product-gallery-container img {
	border-radius: var(--sk-radius);
}

.sk-rozmiarowka__panel,
.sk-potwierdzenie,
.sk-zgoda__panel {
	border-radius: var(--sk-radius-lg);
}

/* Ksztalt przyciskow ustawiamy na koncu arkusza, bo wczesniejsze sekcje
   (i wtyczka listy oczekujacych) uzywaja !important. */
.sk-btn-primary,
.sk-btn-ghost,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce div.product form.cart .button,
.woocommerce ul.products li.product .button,
.sk-newsletter__form button,
.sk-sticky-cta__btn,
.sk-rozmiarowka__zamknij,
.sk-zgoda__panel button {
	border-radius: var(--sk-radius-pill) !important;
}

.sk-newsletter__form input,
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="tel"] {
	border-radius: var(--sk-radius) !important;
}

/* Ikona w polu wtyczki listy oczekujacych miala ostry lewy rog na
   zaokraglonym polu - wygladalo to jak dwa niepasujace elementy. */
[class*="xoo-wl"] .xoo-aff-input-group-addon,
[class*="xoo-wl"] [class*="input-group"] > :first-child {
	border-top-left-radius: var(--sk-radius) !important;
	border-bottom-left-radius: var(--sk-radius) !important;
}

/* Miniatury galerii motywu - ten sam promien co zdjecie glowne. */
.ct-product-gallery-container .ct-media-container,
.ct-product-gallery-container .ct-media-container img,
.flex-control-thumbs img {
	border-radius: var(--sk-radius);
	overflow: hidden;
}

/* Siatka produktow w blokach Gutenberga (pusty koszyk, sekcje blokowe)
   uzywa wlasnej klasy przycisku. Dostawal nasze ciemne tlo, ale kolor
   tekstu dziedziczyl po kontenerze - napis znikal na tle. */
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-grid__product .wp-block-button__link,
.wp-block-button__link.add_to_cart_button {
	background: var(--sk-accent);
	color: #FFFFFF;
	border: 0;
	border-radius: var(--sk-radius-pill);
	min-height: var(--sk-touch);
	font-family: var(--sk-font);
	font-size: var(--sk-text-sm);
	font-weight: 500;
	padding: var(--sk-2) var(--sk-4);
}

.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wp-block-button__link.add_to_cart_button:hover {
	background: var(--sk-accent-hover);
	color: #FFFFFF;
}

/* Kolor tekstu przycisku blokowego wygrywa dopiero z !important -
   siatka Gutenberga ustawia go wlasna regula o tej samej wadze. */
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-grid__product .wp-block-button__link,
.wp-block-button__link.add_to_cart_button {
	background: var(--sk-accent) !important;
	color: #FFFFFF !important;
}

/* ==========================================================================
   55. ODNOSNIK "ZOBACZ WSZYSTKIE WZORY"
   Mial ramke i promien jak przycisk, przez co udawal drugie CTA obok
   przyciskow produktowych. To nie jest akcja zakupowa, tylko przejscie
   dalej - wystarczy tekst ze strzalka.
   ========================================================================== */

.sk-more { text-align: center; margin: var(--sk-6) 0 0; }

.sk-more a {
	display: inline-flex;
	align-items: center;
	gap: var(--sk-2);
	min-height: var(--sk-touch);
	padding: 0;
	border: 0;
	background: none;
	font-size: var(--sk-text-base);
	font-weight: 500;
	color: var(--sk-ink);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

.sk-more a:hover {
	color: var(--sk-highlight);
	text-decoration-thickness: 2px;
}

/* ==========================================================================
   56. WYSOKOSC BANERA
   Na desktopie zdjecie zajmowalo 769 z 900 px okna, czyli prawie caly
   pierwszy ekran - produkty zaczynaly sie dopiero po przewinieciu.
   Ograniczamy je do dwoch trzecich widoku; kadr jest szeroki, wiec
   przyciecie w pionie nic z niego nie zabiera.
   ========================================================================== */

@media (min-width: 1000px) {
	.sk-hero3,
	.sk-hero3__tlo,
	.sk-hero3__tlo img {
		max-height: 62vh;
	}

	.sk-hero3__tlo img {
		width: 100%;
		height: 62vh;
		object-fit: cover;
		object-position: center 45%;
	}
}

/* ==========================================================================
   Sekcja 49: dane sprzedawcy i importera na karcie produktu

   Blok wymagany przez organizacje kartowe (weryfikacja Autopay przed
   uruchomieniem platnosci karta). Ma byc czytelny, ale nie ma konkurowac
   z opisem produktu - stad mniejszy stopien pisma i stonowane tlo.
   ========================================================================== */

.sk-sprzedawca {
	margin: 32px 0 0;
	padding: 24px;
	background: var(--sk-tlo-alt, #f6f5f3);
	border-radius: var(--sk-radius, 16px);
	font-size: 14px;
	line-height: 1.6;
}

.sk-sprzedawca h2 {
	margin: 0 0 12px;
	font-size: 16px;
	letter-spacing: 0.01em;
}

.sk-sprzedawca p {
	margin: 0 0 12px;
}

.sk-sprzedawca p:last-child {
	margin-bottom: 0;
}

.sk-sprzedawca__dane {
	font-style: normal;
}

.sk-sprzedawca__cena {
	color: var(--sk-tekst-drugi, #5d5a55);
}

.sk-sprzedawca a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}