/* ==========================================================================
   Sprawdzianowo — baza designu (main.css)
   Kolejność: tokeny → reset → animacje → layout → typografia → przyciski →
   pigułki → karty → formularze → komponenty → header → stopka → WP → RWD.
   ========================================================================== */

/* ==========================================================================
   1. Tokeny
   ========================================================================== */

:root{
	--bg:#0B0C0E; --surface:#14161A; --surface2:#1B1E23; --raise:#22262C;
	--line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
	--text:#F2F4F7; --muted:#98A0AC; --dim:#6E7683;
	--accent:#2E6BFF; --accent-hi:#4C82FF; --accent-ink:#FFFFFF;
	--accent-soft:rgba(46,107,255,.14); --accent-line:rgba(46,107,255,.35);
	--good:#34C97B; --star:#FFB020; --prose:#C7CDD8;
	--warn:#E4703A;
	--wrap:1440px; --pad:32px;

	--sp-shadow-card:0 14px 30px rgba(0,0,0,.28);
	--sp-shadow-menu:0 24px 60px rgba(0,0,0,.45);
	--sp-shadow-cta:0 10px 24px rgba(46,107,255,.28);
	--sp-ease:cubic-bezier(.2,.7,.3,1);
	--sp-header-h:70px;
	--sp-font-head:Archivo,system-ui,sans-serif;
	--sp-font-body:Manrope,system-ui,sans-serif;
}

[data-theme="light"]{
	--bg:#F5F6F8; --surface:#FFFFFF; --surface2:#F1F3F6; --raise:#E8EBF0;
	--line:rgba(12,16,24,.10); --line2:rgba(12,16,24,.18);
	--text:#0F1319; --muted:#5B6472; --dim:#7A828F;
	--accent-soft:rgba(46,107,255,.10); --accent-line:rgba(46,107,255,.30);
	--prose:#2C333F;

	--sp-shadow-card:0 14px 30px rgba(12,16,24,.10);
	--sp-shadow-menu:0 24px 60px rgba(12,16,24,.16);
}

/* ==========================================================================
   2. Reset i baza
   ========================================================================== */

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
	margin:0;
	background:var(--bg);
	color:var(--text);
	font-family:var(--sp-font-body);
	font-size:15px;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	overflow-x:hidden;
}

a{color:var(--accent-hi);text-decoration:none}
a:hover{color:var(--accent);text-decoration:underline}

img,svg,video{max-width:100%;height:auto;display:block}

input,button,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;padding:0;cursor:pointer}

h1,h2,h3,h4,h5,h6,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0}

hr{border:none;border-top:1px solid var(--line);margin:32px 0}

[hidden]{display:none !important}

::selection{background:var(--accent);color:#fff}

:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px;border-radius:4px}

.sp-main{display:block;min-height:40vh}

/* ==========================================================================
   3. Animacje
   ========================================================================== */

@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes softPop{from{opacity:0;transform:scale(.972)}to{opacity:1;transform:none}}
@keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Ukrywamy tylko wtedy, gdy JS faktycznie działa — klasę `sp-js` ustawia inline-skrypt
   w header.php i zdejmuje ją watchdog, jeśli main.js się nie wykona. Bez JS treść jest widoczna. */
.sp-js [data-sp-reveal]{opacity:0}
[data-sp-reveal].is-revealed{
	opacity:1;
	animation:riseIn .55s var(--sp-ease) both;
	animation-delay:var(--sp-delay,0s);
}

.sp-anim-fadeup{animation:fadeUp .24s var(--sp-ease) both}
.sp-anim-fadein{animation:fadeIn .45s ease both}
.sp-anim-pop{animation:softPop .28s var(--sp-ease) both}

@media (prefers-reduced-motion: reduce){
	[data-sp-reveal],
	[data-sp-reveal].is-revealed{opacity:1 !important;animation:none !important}
	*,*::before,*::after{
		animation-duration:.001ms !important;
		animation-iteration-count:1 !important;
		transition-duration:.001ms !important;
		scroll-behavior:auto !important;
	}
}

/* ==========================================================================
   4. Layout
   ========================================================================== */

.sp-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

/* Rytm pionowy sekcji ustawiamy WYŁĄCZNIE przez padding-top/padding-bottom.
   Skrót `padding` skasowałby boczny padding `.sp-wrap`, gdy obie klasy trafią na
   ten sam element (`<div class="sp-wrap sp-section">` w index.php, page.php,
   search.php, 404.php) — treść kleiłaby się do krawędzi ekranu. */
.sp-section{padding-top:44px;padding-bottom:8px}
.sp-section--tight{padding-top:28px;padding-bottom:28px}
.sp-section--lg{padding-top:72px;padding-bottom:20px}
.sp-section--flush{padding-top:0}

.sp-rule{height:1px;background:var(--line);border:none;margin:0}

.sp-grid{display:grid;gap:18px}
.sp-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sp-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sp-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sp-grid--halves{grid-template-columns:1fr 1fr;gap:48px;align-items:start}

.sp-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sp-row--between{justify-content:space-between}
.sp-row--end{align-items:flex-end}
.sp-row--nowrap{flex-wrap:nowrap}

.sp-stack{display:flex;flex-direction:column;gap:12px}
.sp-stack--sm{gap:8px}
.sp-stack--lg{gap:22px}

/* Offset sticky liczony z realnej wysokości nagłówka — main.js ustawia
   `--sp-header-h` z elementu `[data-sp-sticky-offset]`. Na koszyku i zamówieniu
   nie ma paska przedmiotów, więc sztywne 150px zostawiało widoczną dziurę. */
.sp-sticky{position:sticky;top:calc(var(--sp-header-h,128px) + 14px);align-self:start}
.sp-sticky--near{top:calc(var(--sp-header-h,128px) + 6px)}

.sp-hide{display:none !important}
.is-hidden{display:none !important}

/* ==========================================================================
   5. Typografia
   ========================================================================== */

.sp-kicker{
	font-size:11.5px;font-weight:800;letter-spacing:.14em;
	color:var(--accent-hi);text-transform:uppercase;margin:0 0 14px;
}

.sp-eyebrow{
	font-size:10.5px;font-weight:800;letter-spacing:.11em;
	color:var(--dim);text-transform:uppercase;margin:0 0 10px;
}

.sp-h1,.sp-h2,.sp-h3,.sp-h4{font-family:var(--sp-font-head);color:var(--text);text-wrap:balance}

.sp-h1{font-weight:900;font-size:54px;line-height:1.04;letter-spacing:-.035em}
.sp-h1--md{font-size:52px;letter-spacing:-.03em}
.sp-h1--sm{font-size:44px;line-height:1.08;letter-spacing:-.03em}
.sp-h1--xs{font-size:38px;line-height:1.1;letter-spacing:-.025em}

.sp-h2{font-weight:900;font-size:36px;line-height:1.12;letter-spacing:-.03em}
.sp-h2--sm{font-size:32px}
.sp-h2--xs{font-size:30px;line-height:1.15}

.sp-h3{font-weight:800;font-size:24px;line-height:1.2;letter-spacing:-.02em}
.sp-h3--sm{font-size:19.5px}

.sp-h4{font-weight:800;font-size:17px;line-height:1.25;letter-spacing:-.02em}

.sp-lead{margin:0;color:var(--muted);font-size:16px;line-height:1.7;text-wrap:pretty}
.sp-lead--sm{font-size:14.5px}
.sp-lead strong{color:var(--text);font-weight:700}

.sp-muted{color:var(--muted)}
.sp-dim{color:var(--dim)}

.sp-hl{
	background:var(--accent-soft);border-radius:7px;padding:0 10px;
	box-decoration-break:clone;-webkit-box-decoration-break:clone;
}

/* Kolumna tekstu artykułu / opisu */
.sp-prose{color:var(--prose);font-size:16px;line-height:1.8;text-wrap:pretty}
.sp-prose > p{margin:0 0 22px}
.sp-prose > p:last-child{margin-bottom:0}
.sp-prose--lead > p:first-child{font-size:17px}
.sp-prose h2{
	font-family:var(--sp-font-head);font-weight:900;font-size:30px;
	letter-spacing:-.03em;line-height:1.15;color:var(--text);
	margin:48px 0 18px;scroll-margin-top:104px;text-wrap:balance;
}
.sp-prose h3{
	font-family:var(--sp-font-head);font-weight:800;font-size:19.5px;
	letter-spacing:-.02em;color:var(--text);
	margin:36px 0 14px;scroll-margin-top:104px;
}
.sp-prose h2:first-child,.sp-prose h3:first-child{margin-top:0}
.sp-prose strong{color:var(--text);font-weight:700}
.sp-prose a{
	color:inherit;text-decoration:underline;text-decoration-style:dotted;
	text-decoration-color:var(--line2);text-underline-offset:4px;
}
.sp-prose a:hover{color:var(--accent-hi);text-decoration-color:var(--accent-line)}
.sp-prose ul,.sp-prose ol{margin:0 0 22px;padding-left:22px}
.sp-prose li{margin-bottom:8px}
.sp-prose blockquote{
	margin:32px 0;padding:20px 24px;border-left:2px solid var(--accent-line);
	background:var(--surface);border-radius:0 14px 14px 0;
	font-size:16.5px;line-height:1.75;color:var(--text);
}
.sp-prose blockquote cite{display:block;margin-top:10px;font-size:12.5px;font-style:normal;color:var(--dim)}
.sp-prose img{border-radius:14px;margin:0 0 22px}
.sp-prose figure{margin:0 0 22px}
.sp-prose figcaption{margin-top:8px;font-size:12.5px;color:var(--dim)}
.sp-prose table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:14.5px}
.sp-prose th,.sp-prose td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}
.sp-prose th{font-weight:700;color:var(--text)}

/* ==========================================================================
   6. Przyciski
   ========================================================================== */

.sp-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:9px;
	height:46px;padding:0 20px;
	border:1px solid transparent;border-radius:12px;background:none;
	font-family:var(--sp-font-head);font-weight:700;font-size:14.5px;
	color:var(--text);text-decoration:none;cursor:pointer;white-space:nowrap;
	transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.sp-btn:hover{text-decoration:none;color:var(--text)}
.sp-btn[disabled],.sp-btn.is-loading{opacity:.55;pointer-events:none}
.sp-btn svg{flex:none}

.sp-btn--primary{background:var(--accent);color:var(--accent-ink);font-weight:800;border-color:transparent}
.sp-btn--primary:hover{background:var(--accent-hi);color:var(--accent-ink);transform:translateY(-1px);box-shadow:var(--sp-shadow-cta)}

.sp-btn--ghost{background:none;color:var(--muted);border-color:transparent}
.sp-btn--ghost:hover{background:var(--surface);color:var(--text)}

.sp-btn--outline{background:none;border-color:var(--line2);color:var(--text)}
.sp-btn--outline:hover{border-color:var(--accent-line);background:var(--surface2);color:var(--text)}

.sp-btn--icon{
	width:38px;height:38px;padding:0;border-radius:10px;
	color:var(--muted);border-color:transparent;background:none;
}
.sp-btn--icon:hover{background:var(--surface);color:var(--text)}

.sp-btn--lg{height:50px;padding:0 24px;font-size:15.5px;font-weight:800}
.sp-btn--sm{height:38px;padding:0 14px;font-size:13px;border-radius:10px}
.sp-btn--block{width:100%}

/* Link-strzałka („Wszystkie sprawdziany →") */
.sp-btn-link{
	display:inline-flex;align-items:center;gap:9px;
	background:none;border:none;padding:0;cursor:pointer;
	color:var(--text);font-size:13.5px;font-weight:700;text-decoration:none;
	transition:color .2s ease;
}
.sp-btn-link:hover{color:var(--accent-hi);text-decoration:none}

/* ==========================================================================
   7. Pigułki i znaczniki
   ========================================================================== */

.sp-chip{
	display:inline-flex;align-items:center;gap:8px;flex:none;
	height:36px;padding:0 14px;border-radius:999px;
	border:1px solid var(--line);background:var(--surface);color:var(--text);
	font-size:13px;font-weight:600;text-decoration:none;cursor:pointer;
	white-space:nowrap;
	transition:background .22s ease,border-color .22s ease,color .22s ease,transform .22s ease;
}
.sp-chip:hover{border-color:var(--accent-line);color:var(--text);text-decoration:none}
.sp-chip.is-active{border-color:transparent;background:var(--accent);color:#fff}
.sp-chip.is-active:hover{background:var(--accent-hi);color:#fff}
.sp-chip__icon{flex:none;color:var(--muted)}
.sp-chip.is-active .sp-chip__icon{color:rgba(255,255,255,.85)}
.sp-chip__label{font-size:13px;font-weight:600;white-space:nowrap}
.sp-chip__count{font-size:11.5px;font-weight:700;color:var(--dim)}
.sp-chip.is-active .sp-chip__count{color:rgba(255,255,255,.75)}

.sp-pill{
	display:inline-flex;align-items:center;gap:7px;
	padding:7px 11px;border-radius:9px;
	border:1px solid var(--line);background:var(--surface2);color:var(--text);
	font-size:12.5px;font-weight:600;text-decoration:none;cursor:pointer;
	transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.sp-pill:hover{border-color:var(--accent-line);color:var(--text);text-decoration:none}
.sp-pill.is-active{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent-hi)}
.sp-pill__count{color:var(--dim);font-size:11.5px}
.sp-pill.is-active .sp-pill__count{color:var(--accent-hi);opacity:.8}

.sp-tag{
	display:inline-flex;align-items:center;gap:7px;
	height:32px;padding:0 12px;border-radius:9px;
	border:1px solid var(--line);background:var(--surface);color:var(--text);
	font-size:12.5px;font-weight:600;text-decoration:none;
	transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.sp-tag.is-active{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent-hi)}

.sp-badge{
	display:inline-flex;align-items:center;gap:8px;
	background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-hi);
	padding:6px 13px;border-radius:999px;font-size:12.5px;font-weight:700;
}
.sp-badge__dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}

/* ==========================================================================
   8. Karty
   ========================================================================== */

.sp-card{background:var(--surface);border:1px solid var(--line);border-radius:16px}

.sp-card--hover{
	will-change:transform;
	transition:transform .24s var(--sp-ease),border-color .24s ease,box-shadow .24s ease;
}
.sp-card--hover:hover,
.sp-card--hover:focus-within{
	border-color:var(--accent-line);
	transform:translateY(-3px);
	box-shadow:var(--sp-shadow-card);
}

/* --- Okładka sprawdzianu 1:1 --- */
.sp-cover{
	aspect-ratio:1/1;border-radius:12px;overflow:hidden;
	display:flex;flex-direction:column;
	background:linear-gradient(160deg,#F4F5F2 0%,#E4E7E2 100%);
}
.sp-cover__strip{
	background:var(--accent);color:#fff;
	font-size:8.5px;font-weight:800;letter-spacing:.09em;
	text-align:center;padding:5px 4px;
}
.sp-cover__kicker{
	padding:12px 12px 0;text-align:center;
	font-size:8px;font-weight:800;letter-spacing:.1em;color:#4A5361;
}
.sp-cover__title{
	padding:2px 12px 8px;text-align:center;
	font-family:var(--sp-font-head);font-weight:900;font-size:24px;
	letter-spacing:-.02em;color:#14181F;line-height:1;
}
.sp-cover__art{
	flex:1;margin:0 12px 14px;border-radius:6px;overflow:hidden;
	display:flex;align-items:center;justify-content:center;text-align:center;
	background:rgba(20,24,31,.05);
	font-size:9.5px;font-weight:700;letter-spacing:.06em;color:#6B7480;
}
.sp-cover__art:empty,
.sp-cover__art--empty{border:1px dashed rgba(20,24,31,.28)}
.sp-cover__art img{width:100%;height:100%;object-fit:cover}
/* Okładka bez zdjęcia: ikona przedmiotu, dział i temat (sprw_cover_auto_art()). */
.sp-cover__art--auto{flex-direction:column;gap:6px;padding:10px 12px;letter-spacing:0}
.sp-cover__icon{width:32px;height:32px;flex:none;color:var(--accent)}
.sp-cover__label{font-size:9.5px;font-weight:800;letter-spacing:.1em;color:#4A5361}
.sp-cover__topic{
	max-width:100%;overflow:hidden;
	font-family:var(--sp-font-head);font-weight:800;font-size:13px;line-height:1.2;color:#14181F;
	display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
}

.sp-cover--lg{border:1px solid var(--line);border-radius:12px}
.sp-cover--lg .sp-cover__strip{font-size:9.5px;padding:7px 4px}
.sp-cover--lg .sp-cover__kicker{padding:18px 16px 0;font-size:9px}
.sp-cover--lg .sp-cover__title{padding:4px 16px 10px;font-size:36px}
.sp-cover--lg .sp-cover__art{margin:0 16px 18px;border-radius:8px;font-size:10.5px}
.sp-cover--lg .sp-cover__icon{width:46px;height:46px}
.sp-cover--lg .sp-cover__label{font-size:11.5px}
.sp-cover--lg .sp-cover__topic{font-size:19px}

/* --- Karta produktu --- */
.sp-product-card{
	position:relative;display:flex;flex-direction:column;overflow:hidden;
	background:var(--surface);border:1px solid var(--line);border-radius:16px;
	will-change:transform;
	transition:transform .24s var(--sp-ease),border-color .24s ease,box-shadow .24s ease;
}
.sp-product-card:hover,
.sp-product-card:focus-within{
	border-color:var(--accent-line);transform:translateY(-3px);box-shadow:var(--sp-shadow-card);
}
.sp-product-card__cover{position:relative;padding:10px}
.sp-product-card__badge{
	position:absolute;left:20px;bottom:22px;
	background:var(--accent);color:#fff;
	font-size:11px;font-weight:800;padding:5px 10px;border-radius:7px;
}
.sp-product-card__body{padding:2px 16px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.sp-product-card__rating{display:flex;align-items:center;gap:7px}
.sp-product-card__rating-value{font-size:12.5px;font-weight:700}
.sp-product-card__rating-count{font-size:12.5px;color:var(--dim)}
.sp-product-card__title{
	font-family:var(--sp-font-head);font-weight:700;font-size:15px;
	line-height:1.3;letter-spacing:-.01em;text-wrap:pretty;color:var(--text);margin:0;
}
.sp-product-card__title a{color:inherit;text-decoration:none}
.sp-product-card__title a:hover{color:inherit;text-decoration:none}
.sp-product-card__title a::after{content:"";position:absolute;inset:0;z-index:1}
.sp-product-card__meta{
	display:flex;gap:9px;align-items:flex-start;
	font-size:12px;color:var(--dim);line-height:1.45;
	border-top:1px solid var(--line);padding-top:11px;margin-top:auto;
}
.sp-product-card__meta svg{flex:none;margin-top:1px}
.sp-product-card__foot{display:flex;justify-content:space-between;align-items:center;gap:10px;position:relative;z-index:2}
.sp-product-card__price{font-family:var(--sp-font-head);font-weight:800;font-size:17px;color:var(--text)}
.sp-product-card__price del{color:var(--dim);font-weight:600;font-size:13px;margin-right:6px}
.sp-product-card__cart{
	width:38px;height:38px;flex:none;border-radius:10px;border:none;
	background:var(--accent);color:#fff;cursor:pointer;
	display:flex;align-items:center;justify-content:center;
	transition:background .2s ease;
}
.sp-product-card__cart:hover{background:var(--accent-hi);color:#fff}
/* Stany przycisku ustawiane przez skrypt WooCommerce (add-to-cart.js) oraz link
   „Zobacz koszyk", który Woo wstrzykuje zaraz po przycisku. Karta jest
   współdzielona (strona główna, katalog, karta produktu), więc stany muszą
   siedzieć w warstwie wspólnej, a nie w catalog.css. */
.sp-product-card__cart.loading{opacity:.55;pointer-events:none}
.sp-product-card__cart.added{background:var(--good)}
.sp-product-card__foot .added_to_cart{
	flex:none;
	font-size:12px;font-weight:700;color:var(--accent-hi);
	text-decoration:none;white-space:nowrap;
}
.sp-product-card__foot .added_to_cart:hover{color:var(--accent);text-decoration:underline}

.sp-product-card--rail{flex:0 0 262px;scroll-snap-align:start}
.sp-product-card--small{flex:0 0 210px;scroll-snap-align:start}
.sp-product-card--small .sp-product-card__title{font-size:13.5px}
.sp-product-card--small .sp-cover__title{font-size:20px}
.sp-product-card--small .sp-cover__topic{font-size:11.5px}

/* --- Karta opracowania --- */
.sp-article-card{
	display:flex;flex-direction:column;overflow:hidden;
	background:var(--surface);border:1px solid var(--line);border-radius:18px;
	will-change:transform;
	transition:transform .24s var(--sp-ease),border-color .24s ease,box-shadow .24s ease;
}
.sp-article-card:hover,
.sp-article-card:focus-within{
	border-color:var(--accent-line);transform:translateY(-3px);box-shadow:var(--sp-shadow-card);
}
.sp-article-card__media{padding:11px}
.sp-article-card__thumb{
	aspect-ratio:16/10;border-radius:11px;overflow:hidden;
	background:var(--surface2);
	display:flex;align-items:center;justify-content:center;text-align:center;
	font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--dim);
}
.sp-article-card__thumb:not(:has(img)){border:1px dashed var(--line2)}
.sp-article-card__thumb img{width:100%;height:100%;object-fit:cover}
.sp-article-card__body{padding:4px 18px 18px;display:flex;flex-direction:column;gap:11px;flex:1}
.sp-article-card__meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim);flex-wrap:wrap}
.sp-article-card__author{font-weight:700;color:var(--muted)}
.sp-article-card__title{
	margin:0;font-family:var(--sp-font-head);font-weight:700;font-size:16.5px;
	line-height:1.3;letter-spacing:-.015em;color:var(--text);text-wrap:pretty;
}
.sp-article-card__title a{color:inherit;text-decoration:none}
.sp-article-card__title a:hover{color:inherit;text-decoration:none}
.sp-article-card__excerpt{
	margin:0;font-size:12.5px;line-height:1.6;color:var(--muted);
	display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sp-article-card__foot{
	display:flex;justify-content:space-between;align-items:center;gap:12px;
	border-top:1px solid var(--line);padding-top:13px;margin-top:auto;
}
.sp-article-card__cat{
	display:inline-flex;align-items:center;gap:7px;
	background:var(--surface2);border:1px solid var(--line);border-radius:9px;
	padding:6px 11px;color:var(--text);font-size:12px;font-weight:600;text-decoration:none;
	transition:border-color .2s ease;
}
.sp-article-card__cat:hover{border-color:var(--accent-line);color:var(--text);text-decoration:none}
.sp-article-card__dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--accent)}
.sp-article-card__date{font-size:12px;color:var(--dim)}
.sp-article-card--rail{flex:0 0 306px;scroll-snap-align:start}

/* Wariant opracowania (template-parts/opracowanie/card.php) — używany też na
   stronie głównej i w sekcjach powiązanych, więc styl musi być w bazie. */
.sp-opr-card{position:relative}
.sp-opr-card--grid{height:100%}

/* Klikalny cały obszar karty; stopka z linkiem kategorii zostaje nad nakładką. */
.sp-opr-card .sp-article-card__title a::after{content:"";position:absolute;inset:0;z-index:1}
.sp-opr-card__foot{position:relative;z-index:2}

.sp-opr-card__head{display:flex;align-items:flex-start;gap:12px}
.sp-opr-card__head .sp-article-card__title{flex:1;min-width:0}

.sp-opr-card__arrow{
	flex:none;margin-top:4px;color:var(--dim);
	transition:color .2s ease,transform .2s ease;
}
.sp-opr-card:hover .sp-opr-card__arrow,
.sp-opr-card:focus-within .sp-opr-card__arrow{color:var(--accent-hi);transform:translate(1px,-1px)}

.sp-opr-card__cat--static{cursor:default}

/* --- Karta lektury --- */
.sp-book-card{
	position:relative;aspect-ratio:2/3;overflow:hidden;
	border:1px solid var(--line);border-radius:16px;
	display:block;text-decoration:none;
	will-change:transform;
	transition:transform .24s var(--sp-ease),border-color .24s ease,box-shadow .24s ease;
}
.sp-book-card:hover,
.sp-book-card:focus-visible{
	border-color:var(--accent-line);transform:translateY(-3px);box-shadow:var(--sp-shadow-card);text-decoration:none;
}
.sp-book-card__cover{
	position:absolute;inset:0;
	background:linear-gradient(155deg,#F4F5F2,#DDE1DC);
	display:flex;align-items:center;justify-content:center;padding-bottom:44%;
	font-size:9.5px;font-weight:700;letter-spacing:.08em;color:#4A5361;text-align:center;
}
.sp-book-card__cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;padding:0}
/* Zastępnik okładki, gdy lektura nie ma obrazka wyróżniającego
   (template-parts/lektura/card.php) — karta bywa też poza lektura.css (strona główna). */
.sp-book-card__ph{
	border:1px dashed rgba(20,24,31,.32);
	border-radius:8px;
	padding:12px 16px;
	line-height:1.6;
}
.sp-book-card__shade{
	position:absolute;inset:0;
	background:linear-gradient(to top,rgba(9,11,14,.92) 0%,rgba(9,11,14,.68) 26%,rgba(9,11,14,0) 58%);
}
.sp-book-card__badge{
	position:absolute;top:12px;left:12px;z-index:2;
	display:inline-flex;align-items:center;gap:7px;
	background:rgba(255,255,255,.94);border-radius:999px;padding:5px 11px;
	font-size:11.5px;font-weight:700;color:#14181F;
}
.sp-book-card__badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.sp-book-card__body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 16px 18px}
.sp-book-card__title{
	margin:0 0 6px;font-family:var(--sp-font-head);font-weight:800;font-size:17px;
	line-height:1.2;letter-spacing:-.02em;color:#fff;text-wrap:pretty;
}
.sp-book-card__author{font-size:12.5px;font-style:italic;color:rgba(255,255,255,.72)}
.sp-book-card--rail{flex:0 0 200px;scroll-snap-align:start}

/* ==========================================================================
   9. Formularze
   ========================================================================== */

.sp-field{margin-bottom:16px}

.sp-label{display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:7px}

.sp-input,
.sp-select{
	width:100%;height:46px;
	background:var(--surface2);border:1px solid var(--line);border-radius:11px;
	padding:0 14px;font-size:14px;color:var(--text);outline:none;
	transition:border-color .2s ease,background .2s ease;
}
.sp-input::placeholder{color:var(--dim)}
.sp-input:focus,
.sp-select:focus{border-color:var(--accent)}
.sp-input--sm{height:40px;border-radius:10px;font-size:13.5px}

textarea.sp-input{height:auto;min-height:130px;padding:12px 14px;line-height:1.7;resize:vertical}

.sp-select{
	appearance:none;-webkit-appearance:none;-moz-appearance:none;
	padding-right:38px;cursor:pointer;
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236E7683' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:right 13px center;background-size:13px 13px;
}

/* --- Select customowy (kontrakt §5: [data-sp-select]) ---
   Widoczność menu steruje klasa .is-open na wrapperze; .is-filled = wybrana wartość.
   Reguły łapią zarówno klasy .sp-select-ui__*, jak i same atrybuty data-sp-select-*,
   żeby menu nigdy nie wyrenderowało się jako niepozycjonowany blok. */
.sp-select-ui{display:block}
.sp-select-ui,
[data-sp-select]{position:relative}

.sp-select-ui__toggle,
.sp-select-ui > [data-sp-select-toggle]{
	display:flex;align-items:center;justify-content:space-between;gap:10px;
	width:100%;height:46px;
	background:var(--surface2);border:1px solid var(--line);border-radius:11px;
	padding:0 14px;font-family:var(--sp-font-body);font-size:14px;font-weight:500;
	color:var(--muted);text-align:left;cursor:pointer;outline:none;
	transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.sp-select-ui__toggle::after,
.sp-select-ui > [data-sp-select-toggle]::after{
	content:"";flex:none;width:13px;height:13px;
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236E7683' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:center;background-size:13px 13px;
	transition:transform .2s ease;
}
/* Toggle z własną ikoną w markupie: --noarrow gasi chevron z ::after. */
.sp-select-ui--noarrow > .sp-select-ui__toggle::after,
.sp-select-ui--noarrow > [data-sp-select-toggle]::after{content:none}
.sp-select-ui__chevron{flex:none;color:var(--dim);transition:transform .2s ease}
.sp-select-ui.is-open .sp-select-ui__chevron{transform:rotate(180deg)}
.sp-select-ui__toggle:hover,
.sp-select-ui > [data-sp-select-toggle]:hover{border-color:var(--line2)}
.sp-select-ui.is-open > .sp-select-ui__toggle,
.sp-select-ui.is-open > [data-sp-select-toggle]{border-color:var(--accent)}
.sp-select-ui.is-open > .sp-select-ui__toggle::after,
.sp-select-ui.is-open > [data-sp-select-toggle]::after{transform:rotate(180deg)}
/* .is-filled — wrapper po wyborze niepustej opcji (main.js, syncLabel). */
.sp-select-ui.is-filled > .sp-select-ui__toggle,
.sp-select-ui.is-filled .sp-select-ui__value,
[data-sp-select].is-filled [data-sp-select-label]{color:var(--text);font-weight:600}
.sp-select-ui__value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-select-ui--sm > .sp-select-ui__toggle,
.sp-select-ui--sm > [data-sp-select-toggle]{height:40px;border-radius:10px;font-size:13.5px}

.sp-select-ui__menu,
[data-sp-select] [data-sp-select-menu]{
	display:none;
	position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:50;
	max-height:280px;overflow-y:auto;scrollbar-width:thin;
	background:var(--surface);border:1px solid var(--line);border-radius:14px;
	padding:8px;box-shadow:var(--sp-shadow-menu);
	animation:fadeUp .16s ease both;
}
.sp-select-ui.is-open > .sp-select-ui__menu,
[data-sp-select].is-open > [data-sp-select-menu]{display:block}
.sp-select-ui__menu--right,
[data-sp-select] [data-sp-select-menu].sp-select-ui__menu--right{left:auto;right:0;min-width:220px}

.sp-select-ui__option,
[data-sp-select] [data-sp-select-option]{
	display:flex;align-items:center;justify-content:space-between;gap:10px;
	width:100%;padding:9px 11px;border:none;border-radius:9px;
	background:none;color:var(--muted);
	font-family:var(--sp-font-body);font-size:13.5px;font-weight:500;line-height:1.4;
	text-align:left;text-decoration:none;cursor:pointer;
	transition:background .18s ease,color .18s ease;
}
.sp-select-ui__option:hover,
[data-sp-select] [data-sp-select-option]:hover{background:var(--surface2);color:var(--text);text-decoration:none}
.sp-select-ui__option.is-focused,
[data-sp-select] [data-sp-select-option].is-focused{background:var(--surface2);color:var(--text)}
.sp-select-ui__option.is-active,
[data-sp-select] [data-sp-select-option].is-active{background:var(--accent-soft);color:var(--accent-hi);font-weight:700}
.sp-select-ui__option[disabled],
[data-sp-select] [data-sp-select-option][disabled]{opacity:.45;pointer-events:none}

.sp-checkbox{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.55;color:var(--muted);cursor:pointer}
.sp-checkbox input[type="checkbox"]{
	appearance:none;-webkit-appearance:none;
	width:18px;height:18px;flex:none;margin:1px 0 0;
	border:1px solid var(--line2);border-radius:5px;background:var(--surface2);
	cursor:pointer;transition:background .2s ease,border-color .2s ease;
}
.sp-checkbox input[type="checkbox"]:checked{
	background:var(--accent);border-color:var(--accent);
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:center;background-size:12px 12px;
}

/* Formularz wyszukiwania (searchform.php) */
.sp-searchform{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sp-searchform__field{
	flex:1;min-width:220px;display:flex;align-items:center;gap:11px;
	height:50px;padding:0 14px;
	background:var(--surface2);border:1px solid var(--line);border-radius:12px;
	transition:border-color .2s ease;
}
.sp-searchform__field:focus-within{border-color:var(--accent)}
.sp-searchform__icon{color:var(--dim);flex:none}
.sp-searchform__field input{
	flex:1;min-width:0;background:none;border:none;outline:none;
	font-size:14px;color:var(--text);
}

/* ==========================================================================
   10. Komponenty współdzielone
   ========================================================================== */

/* --- Gwiazdki --- */
.sp-stars{color:var(--star);letter-spacing:1px;font-size:13px;line-height:1;white-space:nowrap}
.sp-stars--lg{font-size:14px}

/* --- Akordeon --- */
.sp-accordion{display:flex;flex-direction:column;gap:10px}
.sp-accordion__item{
	background:var(--surface);border:1px solid var(--line);border-radius:14px;
	overflow:hidden;transition:border-color .22s ease;
}
.sp-accordion__item.is-open{border-color:var(--accent-line)}
.sp-accordion__trigger{
	width:100%;display:flex;align-items:center;gap:16px;
	padding:17px 18px;background:none;border:none;cursor:pointer;
	text-align:left;color:var(--text);font-size:14.5px;font-weight:700;line-height:1.4;
}
.sp-accordion__trigger > span:first-child{flex:1}
.sp-accordion__sign{
	flex:none;width:30px;height:30px;border-radius:9px;
	display:flex;align-items:center;justify-content:center;
	background:var(--surface2);color:var(--muted);
	font-family:var(--sp-font-head);font-weight:800;font-size:17px;
	transition:background .2s ease,color .2s ease;
}
.sp-accordion__item.is-open .sp-accordion__sign{background:var(--accent-soft);color:var(--accent-hi)}
/* Glif +/– rysuje CSS — main.js przełącza wyłącznie klasę `.is-open` na `.sp-accordion__item`.
   Znak zamknięcia to półpauza (–, U+2013), jak w prototypie. */
.sp-accordion__sign::before{content:"+"}
.sp-accordion__item.is-open .sp-accordion__sign::before{content:"\2013"}
/* Panel rozwija się przez `max-height` — main.js liczy `scrollHeight`, ustawia go inline
   i po `transitionend` zdejmuje limit (`max-height:none`). Bez `overflow:hidden`
   i `transition` w CSS panel wyskakiwał skokowo. */
.sp-accordion__panel{
	padding:0 18px 18px;font-size:13.5px;line-height:1.75;color:var(--muted);
	text-wrap:pretty;animation:fadeUp .24s var(--sp-ease) both;
	overflow:hidden;transition:max-height .3s var(--sp-ease);
}
.sp-accordion__panel[hidden]{display:none}
.sp-accordion__panel p{margin:0 0 12px}
.sp-accordion__panel p:last-child{margin-bottom:0}
@media (prefers-reduced-motion: reduce){
	.sp-accordion__panel{transition:none;animation:none}
}

/* --- Callout --- */
.sp-callout{
	position:relative;margin:38px 0 34px;
	background:var(--surface);border:1px solid var(--line);border-radius:16px;
	padding:34px 28px 28px;
}
.sp-callout__badge{
	position:absolute;top:-14px;left:22px;
	display:inline-flex;align-items:center;gap:7px;
	height:28px;padding:0 13px;border-radius:999px;
	font-size:12.5px;font-weight:800;
	background:var(--accent-hi);color:#08101F;
}
.sp-callout__text{margin:0;font-size:15.5px;line-height:1.8;color:var(--prose);text-wrap:pretty}
.sp-callout__text p{margin:0 0 14px}
.sp-callout__text p:last-child{margin-bottom:0}
.sp-callout--epoka .sp-callout__badge{background:var(--accent-hi);color:#08101F}
.sp-callout--blad .sp-callout__badge{background:var(--warn);color:#160901}
.sp-callout--klucz .sp-callout__badge{background:var(--star);color:#180F01}

/* --- Tabela definicji --- */
.sp-deftable{margin:0 0 36px}
.sp-deftable__head{
	display:grid;grid-template-columns:236px minmax(0,1fr);gap:24px;
	padding:0 0 13px;border-bottom:1px solid var(--line2);
}
.sp-deftable__head span{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
.sp-deftable__row{
	display:grid;grid-template-columns:236px minmax(0,1fr);gap:24px;
	padding:16px 0;border-bottom:1px solid var(--line);
}
.sp-deftable__key{font-size:14.5px;font-weight:700;color:var(--text)}
.sp-deftable__val{font-size:14.5px;line-height:1.6;color:var(--prose)}
.sp-deftable__val p{margin:0 0 8px}
.sp-deftable__val p:last-child{margin-bottom:0}
.sp-deftable--wide .sp-deftable__head,
.sp-deftable--wide .sp-deftable__row{grid-template-columns:296px minmax(0,1fr)}

/* --- Wskazówki numerowane --- */
.sp-tips{display:flex;flex-direction:column;gap:12px;margin:0 0 40px;list-style:none;padding:0}
.sp-tips__item{
	display:flex;gap:16px;align-items:flex-start;
	background:var(--surface);border:1px solid var(--line);border-radius:13px;
	padding:16px 18px;font-size:14.5px;line-height:1.7;color:var(--prose);
}
.sp-tips__num{
	flex:none;width:26px;height:26px;border-radius:8px;
	background:var(--accent-soft);color:var(--accent-hi);
	display:flex;align-items:center;justify-content:center;
	font-family:var(--sp-font-head);font-weight:800;font-size:13px;
}
/* Treść wskazówki (renderuje ją inc/sections-renderer.php jako <span>) —
   `.sp-tips__item` jest kontenerem flex, więc bez `flex:1` span nie wypełnia
   wiersza, a bez `min-width:0` długie słowa rozpychają kartę. */
.sp-tips__text{flex:1;min-width:0}

/* --- Spis treści --- */
.sp-toc{display:flex;flex-direction:column;gap:1px;max-height:calc(100vh - 170px);overflow-y:auto;scrollbar-width:thin}
.sp-toc__title{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--dim);margin-bottom:16px;text-transform:uppercase}
.sp-toc__link{
	display:flex;align-items:flex-start;gap:13px;width:100%;
	text-align:left;background:none;border:none;cursor:pointer;text-decoration:none;
	padding:7px 8px 7px 15px;border-left:2px solid var(--line);
	transition:border-color .2s ease;
}
.sp-toc__link:hover{text-decoration:none;border-left-color:var(--line2)}
/* Modyfikatory poziomu — generuje je sprw_render_toc(): --h2 (punkt główny) / --h3 (podpunkt). */
.sp-toc__link--h2{padding-top:9px;padding-bottom:9px}
.sp-toc__link--h3{padding-top:7px;padding-bottom:7px}
.sp-toc__link.is-active{border-left-color:var(--accent-hi)}
.sp-toc__mark{flex:none;width:15px;padding-top:1px;font-size:11px;font-weight:800;letter-spacing:.03em;color:var(--dim)}
.sp-toc__label{font-size:12.5px;font-weight:500;line-height:1.45;color:var(--muted);text-wrap:pretty}
.sp-toc__link--h2 .sp-toc__label{font-size:13px;font-weight:600;color:var(--prose)}
.sp-toc__link--h3 .sp-toc__label{font-size:12.5px;font-weight:500;color:var(--muted)}
.sp-toc__link.is-active .sp-toc__mark{color:var(--accent-hi)}
.sp-toc__link.is-active .sp-toc__label{color:var(--text);font-weight:700}

/* --- Breadcrumb --- */
.sp-breadcrumb{
	display:flex;align-items:center;gap:10px;flex-wrap:wrap;
	min-height:46px;font-size:12.5px;
}
.sp-breadcrumb__icon{color:var(--dim);flex:none}
.sp-breadcrumb a{color:var(--muted);text-decoration:none;transition:color .2s ease}
.sp-breadcrumb a:hover{color:var(--text);text-decoration:none}
.sp-breadcrumb__sep{color:var(--line2)}
.sp-breadcrumb__current{color:var(--text);font-weight:600}

/* --- Karuzela --- */
.sp-carousel{position:relative}
.sp-carousel__track{
	display:flex;gap:18px;overflow-x:auto;
	scroll-snap-type:x mandatory;padding:2px 2px 8px;
	scrollbar-width:none;-ms-overflow-style:none;
}
.sp-carousel__track::-webkit-scrollbar{display:none}
.sp-carousel__nav{display:flex;align-items:center;gap:12px;flex:none}
.sp-carousel__arrow{
	width:40px;height:40px;flex:none;border-radius:11px;
	border:1px solid var(--line);background:var(--surface);color:var(--text);
	cursor:pointer;display:flex;align-items:center;justify-content:center;
	transition:border-color .2s ease,color .2s ease,opacity .2s ease;
}
.sp-carousel__arrow:hover{border-color:var(--accent-line);color:var(--accent-hi)}
.sp-carousel__arrow[disabled],
.sp-carousel__arrow.is-disabled{opacity:.35;cursor:default}
.sp-carousel__dots{display:flex;justify-content:center;gap:7px;padding:18px 0 0}
.sp-carousel__dot{
	width:8px;height:8px;border-radius:999px;border:none;padding:0;
	background:var(--line2);cursor:pointer;
	transition:width .25s ease,background .25s ease;
}
.sp-carousel__dot.is-active{width:22px;background:var(--accent)}

/* --- Pasek postępu czytania --- */
.sp-progress{
	position:absolute;left:0;bottom:-1px;z-index:2;
	height:2px;width:0;background:var(--accent);
	transform-origin:left center;
}

/* --- Separator z etykietą --- */
.sp-divider{display:flex;align-items:center;gap:12px;margin:22px 0 14px}
.sp-divider::before,
.sp-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.sp-divider span{font-size:12px;color:var(--dim)}

/* --- Cytat --- */
.sp-quote{
	margin:32px 0;padding:22px 26px;
	background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--accent-line);
	border-radius:0 16px 16px 0;
}
.sp-quote__text{margin:0;font-size:16.5px;line-height:1.75;color:var(--text);text-wrap:pretty}
.sp-quote__text p{margin:0 0 14px}
.sp-quote__text p:last-child{margin-bottom:0}
.sp-quote__source{display:block;margin-top:12px;font-size:12.5px;color:var(--dim)}
/* Wewnątrz .sp-prose ogólne reguły blockquote/figure/figcaption mają wyższą
   specyficzność niż .sp-quote* — zerujemy je, żeby nie było pudełka w pudełku. */
.sp-prose .sp-quote{margin:32px 0;padding:22px 26px}
.sp-prose blockquote.sp-quote__text{
	margin:0;padding:0;border:0;background:none;border-radius:0;
	font-size:16.5px;line-height:1.75;color:var(--text);
}
.sp-prose figcaption.sp-quote__source{margin-top:12px;font-size:12.5px;color:var(--dim)}

/* --- Zakładki --- */
.sp-tabs{display:flex;background:var(--surface2);border-radius:11px;padding:4px;gap:4px}
.sp-tabs__tab{
	flex:1;height:40px;border-radius:9px;border:none;cursor:pointer;
	background:transparent;color:var(--muted);
	font-family:var(--sp-font-head);font-weight:700;font-size:14px;
	transition:background .2s ease,color .2s ease;
}
.sp-tabs__tab.is-active{background:var(--accent);color:#fff}

/* --- Menu rozwijane (data-sp-dropdown) ---
   Widoczność steruje klasa .is-open na wrapperze — main.js nie rusza atrybutu hidden. */
.sp-dropdown{position:relative}
.sp-dropdown__menu{
	display:none;
	position:absolute;top:calc(100% + 8px);right:0;z-index:50;
	min-width:220px;
	background:var(--surface);border:1px solid var(--line);border-radius:14px;
	padding:8px;box-shadow:var(--sp-shadow-menu);
	animation:fadeUp .16s ease both;
}
.sp-dropdown.is-open > .sp-dropdown__menu{display:block}

/* --- Ikony inline (helper sprw_icon) ---
   Każdy SVG z helpera dostaje `class="sp-icon sp-icon--NAZWA"`. Reset (sekcja 2)
   ustawia `svg{display:block}` z myślą o grafikach — dla ikony w zdaniu
   oznaczałoby to złamanie linii, dlatego wracamy do przepływu inline i
   wyrównujemy ją do środka wiersza zamiast do baseline. `flex:none` chroni
   ikonę przed ściśnięciem, gdy jest dzieckiem kontenera flex. */
.sp-icon{display:inline-block;flex:none;vertical-align:middle}

/* --- Separator sekcji (układ `divider` z sprw_render_sections) ---
   Renderer (F2) obsługuje oba CPT i awaryjny widok `index.php`, więc odstęp
   musi być w warstwie wspólnej, a nie w pliku obszarowym. */
.sp-rule--section{margin:34px 0}

/* --- Komunikaty: `.sp-notice` i komunikaty WooCommerce ---
   Woo drukuje komunikaty w KAŻDYM swoim widoku (katalog, karta produktu,
   koszyk, zamówienie, konto), a `.sp-woo` opakowuje je wszystkie — dlatego
   skin siedzi tutaj. shop.css / product.css tylko go dostrajają u siebie. */
.sp-notice,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce-NoticeGroup > ul{
	display:flex;align-items:flex-start;flex-wrap:wrap;gap:10px 14px;
	margin:0 0 20px;padding:15px 18px;
	background:var(--surface);
	border:1px solid var(--line);
	border-left:2px solid var(--accent-line);
	border-radius:12px;
	color:var(--text);font-size:13.5px;line-height:1.6;
	list-style:none;
}

.sp-notice li,
.woocommerce-message li,
.woocommerce-info li,
.woocommerce-error li{list-style:none;width:100%}

.sp-notice p:last-child,
.woocommerce-message p:last-child,
.woocommerce-info p:last-child,
.woocommerce-error p:last-child{margin-bottom:0}

.sp-notice--ok,
.woocommerce-message{border-left-color:var(--good)}

.sp-notice--info,
.woocommerce-info{border-left-color:var(--accent-hi)}

.sp-notice--error,
.woocommerce-error{border-left-color:var(--warn)}

.sp-notice .button,
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button{margin-left:auto}

/* Ikona komunikatu.
   WooCommerce rysuje własną glifem z fontu „WooCommerce", ustawionym
   `position:absolute; left:1.5em` pod padding-left 3.5em. Nasz skin ma padding
   18px, więc glif lądował NA tekście. Zamiast go przesuwać, zastępujemy go
   ikoną motywu wpiętą w flexa komunikatu — wtedy `gap` sam trzyma odstęp i
   nachodzenie jest niemożliwe. Rysunek idzie przez `mask`, żeby ikona brała
   kolor przypisany typowi komunikatu. */
.woocommerce-info{
	--sp-notice-icon:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11.2v4.6M12 7.9h.01'/%3E%3C/svg%3E");
	--sp-notice-ink:var(--accent-hi);
}
.woocommerce-message{
	--sp-notice-icon:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.2 12.3 2.6 2.6 5-5.2'/%3E%3C/svg%3E");
	--sp-notice-ink:var(--good);
}
.woocommerce-error{
	--sp-notice-icon:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 2.5 17.4A2 2 0 0 0 4.2 20.4h15.6a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9.4v4M12 16.6h.01'/%3E%3C/svg%3E");
	--sp-notice-ink:var(--warn);
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{
	content:"";
	position:static;flex:none;
	width:18px;height:18px;margin-top:1px;
	-webkit-mask:var(--sp-notice-icon) center / 18px 18px no-repeat;
	mask:var(--sp-notice-icon) center / 18px 18px no-repeat;
}

/* Kolor dokładamy dopiero, gdy maska działa — bez tego przeglądarka bez
   `mask-image` narysowałaby w tym miejscu kolorowy kwadrat zamiast ikony. */
@supports (mask-image:url("")) or (-webkit-mask-image:url("")){
	.woocommerce-message::before,
	.woocommerce-info::before,
	.woocommerce-error::before{background-color:var(--sp-notice-ink,var(--accent-hi))}
}

/* Komunikaty bywają listami <ul>, a `.sp-prose ul` (sekcja 5) ma wyższą
   specyficzność niż sama klasa komunikatu — kwalifikacja elementem przywraca
   im odstępy również w kolumnie artykułu. */
ul.woocommerce-message,
ul.woocommerce-info,
ul.woocommerce-error,
.woocommerce-NoticeGroup > ul{margin:0 0 20px;padding:15px 18px}

.woocommerce-NoticeGroup{margin-bottom:20px}
.woocommerce-NoticeGroup > ul{margin-bottom:0}

/* Komunikat „…został dodany do koszyka" zastępuje animacja lotu okładki do
   ikony koszyka (assets/js/main.js, §14). Chowamy WYŁĄCZNIE ten komunikat i
   tylko przy działającym JS — klasa `sp-js` powstaje w header.php, a jej
   watchdog zdejmuje ją, gdy skrypt nie wystartował. Bez JS komunikat zostaje,
   bo jest wtedy jedynym potwierdzeniem dodania. */
.sp-js .woocommerce-message:has(.sp-added-to-cart){display:none}

/* --- Przyciski WooCommerce bez klas motywu ---
   Markup Woo (komunikaty, formularze) wnosi własne `.button`; wewnątrz
   opakowania `.sp-woo` mapujemy je na język przycisków motywu. */
.sp-woo .button:not(.sp-btn){
	display:inline-flex;align-items:center;justify-content:center;gap:9px;
	height:46px;padding:0 20px;
	border:1px solid transparent;border-radius:12px;
	background:var(--accent);color:var(--accent-ink);
	font-family:var(--sp-font-head);font-weight:800;font-size:14.5px;
	text-decoration:none;cursor:pointer;white-space:nowrap;
	transition:background .2s ease,transform .2s ease,box-shadow .2s ease;
}

.sp-woo .button:not(.sp-btn):hover{
	background:var(--accent-hi);color:var(--accent-ink);text-decoration:none;
	transform:translateY(-1px);box-shadow:var(--sp-shadow-cta);
}

/* ==========================================================================
   11. Header
   ========================================================================== */

.sp-header{
	position:sticky;top:0;z-index:40;
	background:var(--bg);border-bottom:1px solid var(--line);
	transition:box-shadow .2s ease,border-color .2s ease;
}
/* .is-stuck — main.js dodaje po przewinięciu strony (scrollY > 4). */
.sp-header.is-stuck{border-bottom-color:var(--line2);box-shadow:var(--sp-shadow-card)}
/* Trzy strefy: logo — szukajka — reszta. Skrajne strefy mają tę samą bazę
   (`flex:1 1 0`), więc szukajka trafia dokładnie na środek nagłówka;
   `min-width:max-content` pilnuje, żeby żadna z nich nie zjadła własnej treści. */
.sp-header__inner{display:flex;align-items:center;gap:22px;padding-top:15px;padding-bottom:15px}

.sp-header__brand{display:flex;align-items:center;gap:10px;flex:1 1 0;min-width:max-content;color:var(--text);text-decoration:none}
.sp-header__brand:hover{color:var(--text);text-decoration:none}
.sp-header__logo{max-height:28px;width:auto}
.sp-header__mark{
	width:26px;height:26px;flex:none;border-radius:7px;background:var(--accent);
	display:flex;align-items:center;justify-content:center;
	font-family:var(--sp-font-head);font-weight:900;font-size:15px;color:#fff;
}
.sp-header__name{font-family:var(--sp-font-head);font-weight:800;font-size:21px;letter-spacing:-.02em}
.sp-header__suffix{color:var(--muted);font-weight:600;font-size:14px}

.sp-header__search{
	flex:0 1 560px;width:560px;max-width:100%;height:42px;
	display:flex;align-items:center;gap:10px;
	background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0 12px;
	transition:border-color .2s ease;
}
.sp-header__search:focus-within{border-color:var(--accent)}
.sp-header__search-icon{color:var(--dim);flex:none}
.sp-header__search input{
	flex:1;min-width:0;background:none;border:none;outline:none;
	font-size:14px;color:var(--text);
}
.sp-header__search input::placeholder{color:var(--dim)}
.sp-header__search input::-webkit-search-cancel-button{display:none}
.sp-header__kbd{display:flex;gap:4px;flex:none}
.sp-header__kbd span{border:1px solid var(--line2);border-radius:5px;padding:1px 6px;font-size:11px;color:var(--dim)}

.sp-header__end{flex:1 1 0;min-width:max-content;display:flex;align-items:center;justify-content:flex-end;gap:10px}
.sp-header__nav{display:flex;align-items:center;gap:6px;min-width:0}
.sp-header__menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:6px}
.sp-header__menu li{list-style:none}
.sp-header__menu a{
	display:flex;align-items:center;height:38px;padding:0 12px;border-radius:10px;
	font-size:13.5px;font-weight:600;color:var(--muted);text-decoration:none;
	white-space:nowrap;
	transition:background .2s ease,color .2s ease;
}
.sp-header__menu a:hover{background:var(--surface);color:var(--text);text-decoration:none}
.sp-header__menu .current-menu-item > a,
.sp-header__menu .current_page_item > a{color:var(--text)}

.sp-header__actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex:none}

.sp-header__cart{
	position:relative;height:38px;padding:0 12px;
	display:flex;align-items:center;gap:8px;
	border:1px solid var(--line);border-radius:10px;background:var(--surface);
	color:var(--text);text-decoration:none;cursor:pointer;
	transition:border-color .2s ease,background .2s ease;
}
.sp-header__cart:hover{border-color:var(--accent-line);color:var(--text);text-decoration:none}
.sp-header__cart-count{font-size:13px;font-weight:700}

/* Moment wpadnięcia produktu do koszyka — JS dokłada `.is-bumped` na czas
   trwania animacji (assets/js/main.js, §14). */
.sp-header__cart.is-bumped{animation:cartBump .5s var(--sp-ease) both;border-color:var(--accent-line)}
.sp-header__cart.is-bumped .sp-header__cart-count{animation:cartCount .5s var(--sp-ease) both;color:var(--accent-hi)}

@keyframes cartBump{
	0%{transform:scale(1)}
	30%{transform:scale(1.12)}
	55%{transform:scale(.97)}
	100%{transform:scale(1)}
}
@keyframes cartCount{
	0%{transform:translateY(0)}
	35%{transform:translateY(-4px)}
	100%{transform:translateY(0)}
}

/* Klon okładki lecący do koszyka. Element jest tworzony i usuwany przez JS. */
.sp-fly{
	position:fixed;z-index:200;pointer-events:none;
	border-radius:14px;overflow:hidden;
	box-shadow:0 18px 40px rgba(0,0,0,.45);
	will-change:transform,opacity;
}
.sp-fly *{pointer-events:none}

@media (prefers-reduced-motion:reduce){
	.sp-header__cart.is-bumped,
	.sp-header__cart.is-bumped .sp-header__cart-count{animation:none}
}

/* Hamburger (mobile) */
.sp-nav-toggle{position:relative;display:none}
.sp-nav-toggle__btn{
	width:38px;height:38px;border-radius:10px;
	border:1px solid var(--line);background:var(--surface);color:var(--text);
	display:flex;align-items:center;justify-content:center;cursor:pointer;
	transition:border-color .2s ease;
}
.sp-nav-toggle__btn:hover{border-color:var(--accent-line)}
.sp-nav-toggle__menu{
	display:none;
	position:absolute;top:46px;right:0;z-index:60;
	width:min(300px,calc(100vw - 32px));
	flex-direction:column;gap:10px;
	background:var(--surface);border:1px solid var(--line);border-radius:14px;
	padding:12px;box-shadow:var(--sp-shadow-menu);
	animation:fadeUp .16s ease both;
}
.sp-nav-toggle.is-open .sp-nav-toggle__menu{display:flex}
/* Wyszukiwarka w menu mobilnym (template-parts/header/topbar.php) — menu jest
   kolumną flex, więc formularz potrzebuje własnego rytmu i pełnej szerokości. */
.sp-nav-toggle__search{display:block;padding:8px 0;margin-bottom:6px}
.sp-nav-toggle__search .sp-input{width:100%}
.sp-nav-toggle__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.sp-nav-toggle__list a{
	display:flex;align-items:center;height:40px;padding:0 12px;border-radius:10px;
	font-size:14px;font-weight:600;color:var(--text);text-decoration:none;
	transition:background .2s ease;
}
.sp-nav-toggle__list a:hover{background:var(--surface2);color:var(--text);text-decoration:none}
.sp-nav-toggle__account{width:100%}
/* Przełącznik motywu w menu - widoczny tylko na telefonie (§ max-width:640px). */
.sp-nav-toggle__theme{display:none;width:100%}

/* Pasek przedmiotów.
   Przewijanie siedzi na `__scroll`, a rozwijane „Więcej" stoi POZA nim —
   inaczej `overflow-x` obcinałby zarówno przycisk, jak i całe menu. */
.sp-subjects{position:relative;z-index:1;border-top:1px solid var(--line);background:var(--bg)}
.sp-subjects__inner{
	display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
	padding-top:12px;padding-bottom:12px;
}
.sp-subjects__scroll{
	display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
	flex:1 1 auto;min-width:0;
	overflow-x:auto;overscroll-behavior-x:contain;
	scrollbar-width:none;-ms-overflow-style:none;
	/* Miękkie wygaszenie prawej krawędzi — pigułka ucięta przez przewijanie
	   ma czytać się jako „przewiń dalej”, a nie jako błąd układu. */
	-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
	mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
}
.sp-subjects__scroll::-webkit-scrollbar{display:none}

.sp-subjects__more{position:relative;flex:0 0 auto;padding-left:11px}
.sp-subjects__more::before{
	content:"";position:absolute;left:0;top:7px;bottom:7px;width:1px;background:var(--line);
}
.sp-subjects__toggle{cursor:pointer}
.sp-subjects__more.is-open .sp-subjects__toggle{border-color:var(--accent-line)}
.sp-subjects__chev{transition:transform .2s ease;color:var(--dim)}
.sp-subjects__more.is-open .sp-subjects__chev{transform:rotate(180deg)}
.sp-subjects__menu{
	display:none;
	position:absolute;top:calc(100% + 10px);right:0;z-index:80;
	gap:8px;flex-wrap:wrap;
	width:max-content;max-width:min(560px,calc(100vw - 2 * var(--pad)));
	max-height:min(60vh,420px);overflow-y:auto;overscroll-behavior:contain;
	background:var(--surface);border:1px solid var(--line);border-radius:14px;
	padding:10px;box-shadow:var(--sp-shadow-menu);
	animation:fadeUp .16s ease both;
}
.sp-subjects__more.is-open .sp-subjects__menu{display:flex}

/* Mini koszyk — popup pod ikoną koszyka w nagłówku. */
.sp-minicart{position:relative;display:flex}
.sp-minicart__menu{
	display:none;
	position:absolute;top:calc(100% + 10px);right:0;z-index:80;
	width:min(360px,calc(100vw - 2 * var(--pad)));
	flex-direction:column;
	background:var(--surface);border:1px solid var(--line);border-radius:14px;
	box-shadow:var(--sp-shadow-menu);
	animation:fadeUp .16s ease both;
	overflow:hidden;
}
.sp-minicart.is-open .sp-minicart__menu{display:flex}
.sp-minicart__body{display:flex;flex-direction:column;min-width:0}
.sp-minicart__head{
	display:flex;align-items:baseline;justify-content:space-between;gap:12px;
	padding:14px 16px 10px;border-bottom:1px solid var(--line);
}
.sp-minicart__title{font-family:var(--sp-font-head);font-weight:800;font-size:15px;color:var(--text)}
.sp-minicart__meta{font-size:12px;font-weight:600;color:var(--dim)}

.sp-minicart__list{
	list-style:none;margin:0;padding:6px;
	display:flex;flex-direction:column;
	max-height:min(46vh,320px);overflow-y:auto;overscroll-behavior:contain;
}
.sp-minicart__item{
	list-style:none;position:relative;
	display:flex;align-items:flex-start;gap:11px;
	padding:10px;border-radius:11px;
	transition:background .2s ease;
}
.sp-minicart__item:hover{background:var(--surface2)}
.sp-minicart__media{flex:none;line-height:0}
.sp-minicart__media a{display:block;line-height:0}
.sp-minicart__thumb{
	width:44px;height:56px;flex:none;border-radius:8px;overflow:hidden;
	background:linear-gradient(160deg,var(--raise),var(--surface2));
	border:1px solid var(--line);
	display:flex;align-items:center;justify-content:center;
	font-family:var(--sp-font-head);font-size:11px;font-weight:800;color:var(--dim);
	letter-spacing:.02em;text-align:center;
}
.sp-minicart__thumb img{width:100%;height:100%;object-fit:cover}
.sp-minicart__item-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding-right:18px}
.sp-minicart__name{font-size:13px;font-weight:700;line-height:1.35;color:var(--text)}
.sp-minicart__name a{color:inherit;text-decoration:none}
.sp-minicart__name a:hover{color:var(--accent-hi);text-decoration:none}
.sp-minicart__item-meta{font-size:11.5px;line-height:1.45;color:var(--dim)}
.sp-minicart__price{font-size:12.5px;font-weight:600;color:var(--muted)}
.sp-minicart__price .amount{color:var(--text);font-weight:700}
.sp-minicart__remove{
	position:absolute;top:9px;right:9px;
	width:22px;height:22px;border-radius:7px;
	display:flex;align-items:center;justify-content:center;
	color:var(--dim);text-decoration:none;
	transition:background .2s ease,color .2s ease;
}
.sp-minicart__remove:hover{background:var(--raise);color:var(--text);text-decoration:none}

.sp-minicart__foot{padding:12px 16px 14px;border-top:1px solid var(--line);background:var(--bg)}
.sp-minicart__total{
	margin:0 0 11px;display:flex;align-items:baseline;justify-content:space-between;gap:12px;
	font-size:13px;color:var(--muted);
}
.sp-minicart__total strong{font-weight:600;color:var(--muted)}
.sp-minicart__total .amount{font-family:var(--sp-font-head);font-size:17px;font-weight:800;color:var(--text)}
.sp-minicart__buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sp-minicart__buttons .sp-btn{width:100%;justify-content:center}

.sp-minicart__empty{
	display:flex;flex-direction:column;align-items:center;gap:10px;
	padding:26px 20px 24px;text-align:center;color:var(--dim);
}
.sp-minicart__empty-text{margin:0;font-size:13px;color:var(--muted)}

/* ==========================================================================
   12. Stopka
   ========================================================================== */

.sp-footer{border-top:1px solid var(--line);background:var(--surface);margin-top:60px}
/* Siatka podąża za liczbą kolumn z template-parts/footer/footer-main.php
   (`data-cols`), żeby treść zawsze sięgała prawej krawędzi `.sp-wrap` —
   tej samej, na której kończy się pasek płatności pod spodem. */
.sp-footer__inner{
	display:grid;grid-template-columns:1.5fr 1.15fr 1fr 1fr;gap:48px;align-items:start;
	padding-top:52px;padding-bottom:34px;
}
.sp-footer__inner[data-cols="3"]{grid-template-columns:1.5fr 1.3fr 1fr}
.sp-footer__inner[data-cols="2"]{grid-template-columns:1.4fr 1fr}
.sp-footer__brand{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.sp-footer__mark{
	width:24px;height:24px;flex:none;border-radius:7px;background:var(--accent);
	display:flex;align-items:center;justify-content:center;
	font-family:var(--sp-font-head);font-weight:900;font-size:13px;color:#fff;
}
.sp-footer__name{font-family:var(--sp-font-head);font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--text)}
.sp-footer__suffix{color:var(--muted);font-weight:600;font-size:13px}
.sp-footer__about{margin:0 0 16px;color:var(--muted);font-size:13px;line-height:1.75;max-width:420px;text-wrap:pretty}
.sp-footer__about--dim{color:var(--dim);margin-bottom:0}
.sp-footer__title{
	margin:0 0 18px;font-family:var(--sp-font-body);
	font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--dim);text-transform:uppercase;
}
.sp-footer__cols{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
.sp-footer__list{display:flex;flex-direction:column;gap:12px}
.sp-footer__menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.sp-footer__menu li{list-style:none}
.sp-footer__link,
.sp-footer__menu a{
	color:var(--muted);font-size:13.5px;font-weight:500;text-decoration:none;
	transition:color .2s ease;
}
.sp-footer__link:hover,
.sp-footer__menu a:hover{color:var(--text);text-decoration:none}
.sp-footer__social{display:flex;gap:9px;flex-wrap:wrap}
.sp-footer__social a{
	width:38px;height:38px;border-radius:11px;
	border:1px solid var(--line);background:var(--surface2);
	display:flex;align-items:center;justify-content:center;
	font-size:11px;font-weight:800;color:var(--muted);text-decoration:none;
	transition:border-color .2s ease,color .2s ease;
}
.sp-footer__social a:hover{border-color:var(--accent-line);color:var(--accent-hi);text-decoration:none}
.sp-footer__bottom{border-top:1px solid var(--line)}
.sp-footer__bottom-inner{
	display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
	padding-top:20px;padding-bottom:20px;
}
.sp-footer__copy{font-size:12.5px;color:var(--dim)}
.sp-footer__pay{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sp-footer__pay-label{font-size:12.5px;color:var(--dim)}
.sp-footer__pay-logos{display:flex;gap:7px;flex-wrap:wrap}
.sp-footer__pay-logo{
	height:26px;padding:0 10px;
	border:1px solid var(--line);border-radius:7px;background:var(--surface2);
	display:flex;align-items:center;
	font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.02em;
}

/* ==========================================================================
   13. Szablony bazowe (index / page / search / 404)
   ========================================================================== */

.sp-archive-head{margin-bottom:28px;max-width:760px}
.sp-archive-head .sp-h2{margin-bottom:14px}
.sp-archive-head__search{margin-top:22px;max-width:560px}

.sp-page__head{margin-bottom:26px}
.sp-page__body{max-width:820px}
.sp-page__links{margin-top:20px;font-size:13px;color:var(--muted)}

/* Awaryjny widok pojedynczego wpisu (index.php → is_singular).
   Dedykowane szablony T4/T5 mają własne style w lektura.css / opracowanie.css. */
.sp-single__head{max-width:820px;margin-bottom:34px}
.sp-single__head .sp-kicker{margin-bottom:10px}
.sp-single__head .sp-h1{margin-bottom:16px;text-wrap:balance}
.sp-single__author{margin:0 0 14px;font-size:16px;font-weight:600;color:var(--text)}
.sp-single__meta{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;font-size:13px;color:var(--dim)}
.sp-single__facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.sp-single__facts .sp-tag{display:inline-flex;align-items:center;gap:7px}
.sp-single__facts .sp-tag strong{color:var(--dim);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:10.5px}
.sp-single__layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:56px;align-items:start}
.sp-single__body{min-width:0;max-width:820px}
.sp-single__aside{position:sticky;top:calc(var(--sp-header-h,74px) + 18px);align-self:start}
.sp-single__cta{max-width:820px;margin-top:44px;padding:26px 28px}
.sp-single__cta .sp-h4{margin:0 0 10px}
.sp-single__cta p{margin:0 0 18px;font-size:14.5px;line-height:1.7}

.sp-search-list{display:flex;flex-direction:column;gap:12px}
.sp-search-item{
	display:flex;align-items:center;justify-content:space-between;gap:20px;
	padding:20px 22px;
}
.sp-search-item__body{flex:1;min-width:0}
.sp-search-item__title{margin:0 0 8px}
.sp-search-item__title a{color:var(--text);text-decoration:none}
.sp-search-item__title a:hover{color:var(--accent-hi);text-decoration:none}
.sp-search-item__excerpt{margin:0;font-size:13.5px;line-height:1.7;color:var(--muted)}
.sp-search-empty{padding:36px 28px;text-align:center}
.sp-search-empty .sp-h4{margin-bottom:10px}

.sp-404{min-height:52vh;display:flex;align-items:center}
.sp-404__inner{max-width:680px;margin:0 auto;text-align:center}
.sp-404__inner .sp-lead{margin:0 auto 26px;max-width:520px}
.sp-404__search{max-width:520px;margin:0 auto 22px}
.sp-404__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:34px}
.sp-404__label{margin-bottom:12px}
.sp-404__chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

.sp-pagination{margin-top:36px}
.sp-pagination .nav-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.sp-pagination .page-numbers{
	display:flex;align-items:center;justify-content:center;
	min-width:40px;height:40px;padding:0 12px;border-radius:11px;
	border:1px solid var(--line);background:var(--surface);
	color:var(--text);font-size:13.5px;font-weight:700;text-decoration:none;
	transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.sp-pagination .page-numbers:hover{border-color:var(--accent-line);color:var(--text);text-decoration:none}
.sp-pagination .page-numbers.current{background:var(--accent);border-color:transparent;color:#fff}
.sp-pagination .page-numbers.dots{border-color:transparent;background:none;color:var(--dim)}

/* ==========================================================================
   14. Klasy WordPressa
   ========================================================================== */

.screen-reader-text{
	border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);
	height:1px;width:1px;margin:-1px;padding:0;overflow:hidden;
	position:absolute !important;word-wrap:normal !important;
}
.screen-reader-text:focus{
	clip:auto !important;clip-path:none;
	display:block;top:12px;left:12px;width:auto;height:auto;z-index:100000;
	padding:12px 18px;border-radius:10px;
	background:var(--surface);border:1px solid var(--accent-line);color:var(--text);
	font-size:14px;font-weight:700;text-decoration:none;
}

.alignleft{float:left;margin:0 22px 18px 0}
.alignright{float:right;margin:0 0 18px 22px}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.alignwide{width:100%}
.alignfull{width:100%}
.wp-caption{max-width:100%}
.wp-caption-text{margin-top:8px;font-size:12.5px;color:var(--dim)}
.sticky,.gallery-caption,.bypostauthor{display:block}

/* ==========================================================================
   15. Responsywność — 1180px / 900px / 640px
   ========================================================================== */

@media (max-width:1180px){
	:root{--pad:24px}

	.sp-h1{font-size:46px}
	.sp-h1--md{font-size:44px}
	.sp-h1--sm{font-size:38px}
	.sp-h1--xs{font-size:34px}
	.sp-h2{font-size:32px}
	.sp-h2--sm{font-size:29px}
	.sp-h2--xs{font-size:27px}

	.sp-grid--4{grid-template-columns:repeat(3,minmax(0,1fr))}
	.sp-grid--halves{gap:36px}

	/* Sticky sidebary stają się statyczne */
	.sp-sticky,
	.sp-sticky--near,
	.sp-single__aside{position:static;top:auto}

	.sp-single__layout{grid-template-columns:minmax(0,1fr);gap:36px}
	.sp-single__aside{order:-1}

	.sp-toc{max-height:none;overflow:visible}

	.sp-footer__inner[data-cols]{grid-template-columns:1.2fr 1fr 1fr;gap:34px}
	.sp-footer__col--about{grid-column:1 / -1}
	.sp-footer__about{max-width:620px}
}

@media (max-width:900px){
	:root{--pad:20px}

	.sp-h1{font-size:38px}
	.sp-h1--md{font-size:36px}
	.sp-h1--sm{font-size:32px}
	.sp-h1--xs{font-size:29px}
	.sp-h2{font-size:28px}
	.sp-h2--sm,.sp-h2--xs{font-size:25px}
	.sp-h3{font-size:21px}
	.sp-lead{font-size:15px}

	.sp-section{padding-top:32px;padding-bottom:8px}
	.sp-section--lg{padding-top:44px;padding-bottom:16px}

	.sp-grid--3,
	.sp-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
	.sp-grid--halves{grid-template-columns:1fr;gap:32px}

	/* Nagłówek: szukajka i nav chowają się, zostaje hamburger */
	.sp-header__inner{gap:12px}
	.sp-header__search{display:none}
	.sp-header__nav{display:none}
	.sp-header__actions{margin-left:auto}
	.sp-nav-toggle{display:block}

	.sp-prose{font-size:15.5px}
	.sp-prose h2{font-size:26px;margin-top:38px}
	.sp-prose h3{font-size:18.5px;margin-top:30px}

	.sp-deftable__head,
	.sp-deftable__row,
	.sp-deftable--wide .sp-deftable__head,
	.sp-deftable--wide .sp-deftable__row{grid-template-columns:1fr;gap:6px}
	.sp-deftable__head{gap:0}
	.sp-deftable__head span:last-child{display:none}

	.sp-callout{padding:30px 20px 22px;margin:32px 0 28px}

	.sp-search-item{flex-direction:column;align-items:flex-start;gap:14px}

	.sp-footer{margin-top:44px}
	.sp-footer__inner[data-cols]{grid-template-columns:1fr 1fr;gap:30px;padding-top:40px}
	.sp-footer__col--about{grid-column:1 / -1}
}

@media (max-width:640px){
	:root{--pad:16px}

	.sp-h1{font-size:32px;letter-spacing:-.03em}
	.sp-h1--md{font-size:30px}
	.sp-h1--sm{font-size:28px}
	.sp-h1--xs{font-size:26px}
	.sp-h2{font-size:24px}
	.sp-h2--sm,.sp-h2--xs{font-size:22px}
	.sp-h3{font-size:19px}
	.sp-h3--sm{font-size:17.5px}

	.sp-grid--2,
	.sp-grid--3,
	.sp-grid--4{grid-template-columns:minmax(0,1fr)}

	.sp-btn{height:44px;padding:0 16px;font-size:14px}
	.sp-btn--lg{height:48px;padding:0 20px;font-size:15px}
	/* Przyciski-ikony zostają kwadratowe - reguła .sp-btn wyżej dokładała im
	   padding 0 16px i ikona kurczyła się do kilku pikseli. */
	.sp-btn--icon{padding:0;height:38px}

	.sp-header__name{font-size:19px}
	.sp-header__suffix{font-size:13px}
	/* Motyw i konto są w menu (hamburger) - w nagłówku zostają logo, koszyk
	   i menu, inaczej prawa część wystawała poza ekran telefonu. */
	.sp-header__actions > [data-sp-theme-toggle],
	.sp-header__account{display:none}
	.sp-nav-toggle__theme{display:inline-flex}

	/* Duża okładka produktu ma tu ok. 220 px - tytuł 36 px wychodził poza nią,
	   a na grafikę zostawało kilkadziesiąt pikseli. Mniejszy tytuł, bez ikony. */
	.sp-cover--lg .sp-cover__kicker{padding-top:12px}
	.sp-cover--lg .sp-cover__title{font-size:26px}
	.sp-cover--lg .sp-cover__icon{display:none}
	.sp-cover--lg .sp-cover__label{font-size:10px}
	.sp-cover--lg .sp-cover__topic{font-size:14px;-webkit-line-clamp:2}

	.sp-subjects__menu{right:0;max-width:calc(100vw - 2 * var(--pad))}

	/* Na wąskich ekranach ikona koszyka nie stoi przy krawędzi (za nią jest
	   hamburger), więc popup kotwiczymy do okna, nie do przycisku. */
	.sp-minicart{position:static}
	.sp-minicart__menu{
		position:fixed;top:calc(var(--sp-header-h,64px) + 8px);
		left:var(--pad);right:var(--pad);width:auto;
	}

	.sp-tips__item{padding:14px 15px;font-size:14px;gap:12px}

	.sp-callout__badge{left:16px;font-size:11.5px}

	.sp-footer__inner[data-cols]{grid-template-columns:1fr;gap:28px}
	.sp-footer__col--about{grid-column:auto}
	.sp-footer__cols{grid-template-columns:1fr 1fr}
	.sp-footer__bottom-inner{flex-direction:column;align-items:flex-start;gap:14px}

	.sp-404__actions .sp-btn{width:100%}
}

/* Najwęższe telefony (320-380 px): mniejsze logo, żeby koszyk i menu się mieściły. */
@media (max-width:380px){
	.sp-header__inner{gap:8px}
	.sp-header__brand{gap:8px}
	.sp-header__name{font-size:17px}
	.sp-header__suffix{font-size:12px}
}