/* Style sekcji TREJKA Prime: wydzielone z motywu Blocksy child. */
.ss-strona-startowa { width: 100%; }
.ss-strona-startowa {
	--ss-accent: var(--trejka-accent, #bc0000);
	--ss-dark: #14110f;
	--ss-border: #ece6e2;
	--ss-muted: #5c5652;
	--ss-radius: 14px;
	--ss-max: var(--trejka-max, 1290px);

	/* Skala odstepow. Kazdy stopien to clamp(), wiec sam sie zmniejsza
	   na mniejszych ekranach — dlatego skala, a nie sztywne piksele. */
	--ss-space-brak: 0px;
	--ss-space-s: clamp(16px, 2vw, 24px);
	--ss-space-m: clamp(28px, 4vw, 48px);
	--ss-space-l: clamp(40px, 6vw, 72px);
	--ss-space-xl: clamp(56px, 9vw, 112px);

	/* Domyslny rytm strony; nadpisywany inline z pola ACF na kontenerze. */
	--ss-space: var(--ss-space-l);
}
.ss-strona-startowa .ss-wrap {
	max-width: var(--ss-max);
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 32px);
}
.ss-block {
	padding-top: var(--ss-space);
	padding-bottom: var(--ss-space);
}

/* Nadpisania per sekcja (pole "Odstepy sekcji" w ACF) */
.ss-block--pt-brak { padding-top: var(--ss-space-brak); }
.ss-block--pt-s    { padding-top: var(--ss-space-s); }
.ss-block--pt-m    { padding-top: var(--ss-space-m); }
.ss-block--pt-l    { padding-top: var(--ss-space-l); }
.ss-block--pt-xl   { padding-top: var(--ss-space-xl); }
.ss-block--pb-brak { padding-bottom: var(--ss-space-brak); }
.ss-block--pb-s    { padding-bottom: var(--ss-space-s); }
.ss-block--pb-m    { padding-bottom: var(--ss-space-m); }
.ss-block--pb-l    { padding-bottom: var(--ss-space-l); }
.ss-block--pb-xl   { padding-bottom: var(--ss-space-xl); }

.ss-block__heading {
	margin: 0 0 28px;
	font-size: clamp(24px, 3vw, 34px);
	line-height: 1.2;
}
/* Opis pod tytulem sekcji (pole opis_sekcji) — dosuniety pod naglowek. */
.ss-block__opis {
	margin: -16px 0 30px;
	max-width: 760px;
	color: var(--ss-muted);
	line-height: 1.65;
	font-size: 16px;
}
.ss-tekst--srodek .ss-block__opis { margin-left: auto; margin-right: auto; }
/* Cechy: wyśrodkowanie nagłówka i opisu sekcji */
.ss-cechy--head-srodek .ss-block__heading,
.ss-cechy--head-srodek .ss-block__opis { text-align: center; }
.ss-cechy--head-srodek .ss-block__opis { margin-left: auto; margin-right: auto; }

/* Przyciski wspolne */
.ss-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 24px;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1;
	transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.ss-btn:hover { transform: translateY(-1px); }
.ss-btn--primary { background: var(--ss-accent); color: #fff; }
.ss-btn--primary:hover { box-shadow: 0 8px 20px rgba(120,20,20,.22); }
.ss-btn--outline { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.75); }
.ss-btn--outline:hover { background: rgba(255,255,255,.12); }
.ss-btn--light { background: #fff; color: var(--ss-dark); }
.ss-btn--light:hover { box-shadow: 0 8px 20px rgba(0,0,0,.18); }

/* HERO */
.ss-hero {
	position: relative;
	color: #fff;
	background: var(--ss-dark);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	/* full-bleed: wyjscie poza waska kolumne tresci na pelna szerokosc ekranu */
	width: 100vw;
	max-width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}
.ss-hero__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(10,8,7,.78) 0%, rgba(10,8,7,.45) 60%, rgba(10,8,7,.25) 100%);
}
.ss-hero:not(.ss-hero--bg) .ss-hero__overlay { background: none; }
.ss-hero__inner {
	position: relative;
	max-width: var(--ss-max);
	margin-inline: auto;
	padding: clamp(56px, 9vw, 120px) clamp(16px, 4vw, 32px);
	display: grid;
	grid-template-columns: 1.6fr .9fr;
	gap: 40px;
	align-items: center;
}
/* Wysokosc Hero (min-height ustawiane na wewnetrznym kontenerze).
   svh = "small viewport height" — nie skacze przez pasek adresu na mobilnych. */
.ss-hero--h-sm     .ss-hero__inner { min-height: 340px; }
.ss-hero--h-md     .ss-hero__inner { min-height: 500px; }
.ss-hero--h-lg     .ss-hero__inner { min-height: 660px; }
.ss-hero--h-full   .ss-hero__inner { min-height: 100vh; min-height: 100svh; }
.ss-hero--h-custom .ss-hero__inner { min-height: var(--ss-hero-h, 500px); }
.ss-hero__eyebrow {
	display: inline-block;
	margin-bottom: 14px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(255,255,255,.14);
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.ss-hero__title {
	margin: 0 0 18px;
	color: #fff;
	font-size: clamp(30px, 5vw, 54px);
	line-height: 1.08;
}
.ss-hero__lead {
	margin: 0 0 30px;
	max-width: 60ch;
	font-size: clamp(16px, 1.6vw, 19px);
	line-height: 1.6;
	color: rgba(255,255,255,.9);
}
.ss-hero__buttons { display: flex; flex-wrap: wrap; gap: 14px; }
.ss-hero__title-akcent { display: block; color: var(--ss-accent, #bc0000); }
.ss-hero__buttons-note { margin: 12px 0 0; font-size: 13px; color: rgba(255,255,255,.75); }
.ss-btn--ikona { display: inline-flex; align-items: center; gap: 8px; }
.ss-btn--ikona svg { width: 18px; height: 18px; flex: none; }
/* Boxy nad przyciskami */
.ss-hero__boxes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin: 0 0 26px;
	max-width: 720px;
}
.ss-hero__box {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-radius: var(--ss-radius);
	background: rgba(255,255,255,.10);
	border: 1px solid rgba(255,255,255,.18);
	backdrop-filter: blur(6px);
	color: #fff;
	text-decoration: none;
	text-align: left;
}
.ss-hero__box--link { transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.ss-hero__box--link:hover {
	border-color: rgba(255,255,255,.55);
	background: rgba(255,255,255,.16);
	transform: translateY(-2px);
}
.ss-hero__box-icon { display: inline-flex; flex: none; opacity: .9; }
.ss-hero__box-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ss-hero__box-title { font-weight: 700; font-size: 15px; line-height: 1.25; }
.ss-hero__box-text { font-size: 13px; line-height: 1.35; color: rgba(255,255,255,.8); }
.ss-hero__box-arrow { margin-left: auto; flex: none; opacity: .7; }
.ss-hero--srodek .ss-hero__boxes { margin-inline: auto; }
@media (max-width: 700px) { .ss-hero__boxes { grid-template-columns: 1fr; } }
/* Jasne tło hex → ciemny tekst (czytelność) */
.ss-hero--tekst-ciemny { color: #14110f; }
.ss-hero--tekst-ciemny .ss-hero__title { color: #14110f; }
.ss-hero--tekst-ciemny .ss-hero__lead { color: rgba(20,17,15,.82); }
.ss-hero--tekst-ciemny .ss-hero__buttons-note { color: rgba(20,17,15,.6); }
.ss-hero--tekst-ciemny .ss-hero__eyebrow { background: rgba(0,0,0,.06); color: #14110f; }
.ss-hero--tekst-ciemny .ss-hero__box { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.12); color: #14110f; }
.ss-hero--tekst-ciemny .ss-hero__box-text { color: rgba(20,17,15,.7); }
.ss-hero--tekst-ciemny .ss-hero__box--link:hover { border-color: rgba(0,0,0,.3); background: rgba(0,0,0,.06); }
.ss-hero--tekst-ciemny .ss-btn--outline { color: #14110f; border-color: rgba(0,0,0,.35); }
.ss-hero--tekst-ciemny .ss-btn--outline:hover { background: #14110f; color: #fff; border-color: #14110f; }
.ss-hero--srodek .ss-hero__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.ss-hero--srodek .ss-hero__content { max-width: 860px; }
.ss-hero--srodek .ss-hero__lead { margin-left: auto; margin-right: auto; }
.ss-hero--srodek .ss-hero__buttons { justify-content: center; }
.ss-hero--srodek .ss-hero__card { margin-inline: auto; }
.ss-hero--srodek .ss-hero__overlay { background: linear-gradient(180deg, rgba(10,8,7,.6), rgba(10,8,7,.45)); }
.ss-hero__card {
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.16);
	border-radius: var(--ss-radius);
	padding: 24px;
	backdrop-filter: blur(6px);
}
.ss-hero__row {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid rgba(255,255,255,.12);
}
.ss-hero__row:last-child { border-bottom: 0; }
.ss-hero__row a { color: #fff; text-decoration: none; }
.ss-hero__row a:hover { text-decoration: underline; }
.ss-hero__row--muted { color: rgba(255,255,255,.75); font-size: 14px; }
.ss-hero__row-icon { display: inline-flex; color: #fff; opacity: .85; }

/* Hero — obraz w prawej kolumnie (dwukolumnowy) */
.ss-hero__media { align-self: center; justify-self: end; max-width: 100%; }
.ss-hero__media img { display: block; width: 100%; height: auto; border-radius: 16px; }
.ss-hero--media:not(.ss-hero--bg) .ss-hero__overlay { background: none; }
/* Bardziej zrownowazony podzial kolumn przy obrazie — tylko na szerokich ekranach
   (na mobile obowiazuje 1fr z media-query nizej). */
@media (min-width: 701px) { .ss-hero--media .ss-hero__inner { grid-template-columns: 1.05fr .95fr; } }

/* Hero — statystyki (liczniki pod treścią) */
.ss-hero__stats { display: flex; flex-wrap: wrap; gap: clamp(22px, 4vw, 48px); margin-top: 34px; }
.ss-hero__stat { display: flex; flex-direction: column; gap: 3px; }
.ss-hero__stat-num { font-size: clamp(22px, 3vw, 30px); font-weight: 800; line-height: 1.1; color: #fff; }
.ss-hero__stat-label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.ss-hero--tekst-ciemny .ss-hero__stat-num { color: #14110f; }
.ss-hero--tekst-ciemny .ss-hero__stat-label { color: rgba(20,17,15,.58); }

/* ===== Makiety Hero (mockupy z elementów motywu) ===== */
.ss-hero__media--mock { width: 100%; }
.ss-mock { --mk-red: var(--ss-accent, #bc0000); background: #fff; border: 1px solid #efe7e7; border-radius: 20px; box-shadow: 0 30px 60px -30px rgba(20,10,10,.28); padding: 16px; color: #14110f; font-size: 14px; width: 100%; }
.ss-mock__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 4px 12px; }
.ss-mock__title { font-weight: 700; font-size: 15px; color: #14110f; }
.ss-mock__dots { display: inline-flex; gap: 6px; }
.ss-mock__dots i { width: 9px; height: 9px; border-radius: 50%; background: #d9d2cf; display: block; }
.ss-mock__shield { color: var(--mk-red); display: inline-flex; }
.ss-mock__pill { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.ss-mock__pill--green { background: #e7f5ec; color: #1f9254; }
.ss-mock__mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; letter-spacing: .05em; color: #9a9a9a; }
/* checklist */
.ss-mock--check .ss-mock__head { padding-bottom: 8px; }
.ss-mock__list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ss-mock__row { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #f0eae8; border-radius: 14px; padding: 12px 14px; box-shadow: 0 8px 18px -14px rgba(0,0,0,.25); }
.ss-mock__check { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--mk-red); color: #fff; }
.ss-mock__row-title { flex: 1 1 auto; font-weight: 600; font-size: 14px; min-width: 0; }
.ss-mock__badge { flex: none; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px; background: #fbe9e9; color: var(--mk-red); white-space: nowrap; }
/* oś czasu 24h */
.ss-mock--timeline .ss-mock__head { border-bottom: 1px solid #f0eae8; }
.ss-mock__tl { list-style: none; margin: 6px 0 0; padding: 0 4px; }
.ss-mock__tl-item { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.ss-mock__tl-time { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: #9a9a9a; width: 44px; flex: none; }
.ss-mock__tl-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--mk-red); flex: none; box-shadow: 0 0 0 4px #fbe9e9; }
.ss-mock__tl-title { flex: 1 1 auto; font-weight: 600; font-size: 13.5px; min-width: 0; }
.ss-mock__tag { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; color: #8a8f98; background: #f4f1ef; padding: 3px 8px; border-radius: 6px; flex: none; white-space: nowrap; }
.ss-mock__foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid #f0eae8; font-size: 12.5px; color: #8a8f98; }
/* Makieta — klikalne wiersze (tylko gdy wiersz ma link; bez linku brak reakcji) */
.ss-mock__row--link, .ss-mock__tl-item--link { position: relative; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.ss-mock__row--link:hover { transform: translateY(-2px); box-shadow: var(--ss-shadow-soft, rgba(149,157,165,.22) 0 8px 22px); border-color: #f0cfcf; }
.ss-mock__tl-item--link { border-radius: 8px; margin-inline: -8px; padding-inline: 8px; }
.ss-mock__tl-item--link:hover { background: #faf3f3; }
.ss-mock__stretch { position: absolute; inset: 0; z-index: 2; }
.ss-mock__arrow { flex: 0 0 auto; width: 0; overflow: hidden; opacity: 0; color: var(--mk-red, #bc0000); font-weight: 700; transition: opacity .18s ease, width .18s ease, margin-left .18s ease; }
.ss-mock__row--link:hover .ss-mock__arrow,
.ss-mock__tl-item--link:hover .ss-mock__arrow { width: 16px; opacity: 1; margin-left: 4px; }
@media (prefers-reduced-motion: reduce) {
	.ss-mock__row--link, .ss-mock__tl-item--link { transition: none; }
	.ss-mock__row--link:hover { transform: none; }
}
/* Strona WWW pod opieką (okno przeglądarki + szkielet + checklista) */
.ss-mock__browser { display: flex; align-items: center; gap: 12px; padding: 2px 4px 12px; }
.ss-mock__addr { flex: 1 1 auto; display: inline-flex; align-items: center; gap: 8px; min-width: 0; background: #f4f1ef; border-radius: 8px; padding: 6px 12px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: #6b635c; }
.ss-mock__addr svg { flex: none; opacity: .7; }
.ss-mock__page { border: 1px solid #f0eae8; border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.ss-mock__ph { background: #ece5e1; border-radius: 6px; }
.ss-mock__ph--img { height: 68px; margin-bottom: 12px; background: repeating-linear-gradient(45deg, #efe8e4, #efe8e4 9px, #e7ded9 9px, #e7ded9 18px); }
.ss-mock__ph--l1 { height: 10px; width: 82%; margin-bottom: 8px; }
.ss-mock__ph--l2 { height: 10px; width: 56%; }
/* droga 3-2-1 */
.ss-mock--321 .ss-mock__head { border-bottom: 1px solid #f0eae8; }
.ss-mock__steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ss-mock__step { display: flex; gap: 14px; }
.ss-mock__step-num { min-width: 34px; width: auto; max-width: 56px; height: 34px; flex: none; padding: 0 6px; overflow: hidden; border-radius: 10px; background: #fbe9e9; color: var(--mk-red); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; white-space: nowrap; }
.ss-mock__step-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ss-mock__step-title { font-weight: 700; font-size: 14px; }
.ss-mock__step-desc { font-size: 12.5px; color: #6b635c; }
.ss-mock__chip { align-self: flex-start; margin-top: 2px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; color: #8a8f98; background: #f4f1ef; padding: 3px 8px; border-radius: 6px; }
/* panel monitoringu (ciemny) */
.ss-mock--mon { background: #14110f; border-color: #14110f; color: #fff; }
.ss-mock--mon .ss-mock__title { color: #fff; }
.ss-mock__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ss-mock__kpi { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.ss-mock__kpi-label { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.ss-mock__kpi-val { font-size: 26px; font-weight: 800; line-height: 1.05; }
.ss-mock__kpi-sub { font-size: 11.5px; color: rgba(255,255,255,.55); }
.ss-mock__uptime { margin-top: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 12px; padding: 12px 14px; display: flex; align-items: center; gap: 16px; }
.ss-mock__uptime-l { flex: none; display: flex; flex-direction: column; gap: 3px; }
.ss-mock__uptime-val { font-size: 24px; font-weight: 800; }
.ss-mock__bars { display: flex; align-items: flex-end; gap: 3px; height: 46px; flex: 1 1 auto; }
.ss-mock__bar { flex: 1 1 auto; background: #3aa06a; border-radius: 2px; min-height: 4px; }
.ss-mock__bar.is-red { background: var(--mk-red); }
/* certyfikat / pieczęć */
.ss-mock--cert { text-align: center; padding: 28px 22px; }
.ss-mock__seal { width: 82px; height: 82px; margin: 0 auto 16px; border-radius: 50%; background: var(--mk-red); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px #fff, 0 0 0 8px #f2dede; }
.ss-mock__cert-nad { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; letter-spacing: .12em; color: #b98a8a; text-transform: uppercase; margin-bottom: 8px; }
.ss-mock__cert-tytul { font-size: 22px; font-weight: 800; line-height: 1.2; margin-bottom: 20px; color: #14110f; }
.ss-mock__cert-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ss-mock__cert-badge { border: 1px solid #f0eae8; border-radius: 12px; padding: 12px 8px; display: flex; flex-direction: column; gap: 3px; }
.ss-mock__cert-badge-top { font-weight: 800; font-size: 15px; }
.ss-mock__cert-badge-bot { font-size: 11px; color: #8a8f98; }

/* Makieta „Panel ustawień" (przełączniki) */
.ss-set__title { font-size: 12px; font-weight: 600; color: var(--ss-muted, #6b625d); }
.ss-set__list { gap: 10px; }
.ss-set__ikona { flex: none; width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--mk-red); background: #fbe9e9; text-transform: uppercase; }
.ss-set__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ss-set__name { font-weight: 600; font-size: 14px; line-height: 1.2; }
.ss-set__sub { font-size: 12px; color: var(--ss-muted, #8a7f79); line-height: 1.3; }
.ss-set__toggle { flex: none; width: 40px; height: 22px; border-radius: 999px; background: #ddd6d2; position: relative; transition: background .2s ease; }
.ss-set__toggle i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .2s ease; }
.ss-set__toggle.is-on { background: var(--mk-red); }
.ss-set__toggle.is-on i { left: 21px; }
.ss-set__bar { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 14px; background: var(--mk-red); color: #fff; }
.ss-set__bar span { font-weight: 600; font-size: 14px; }
.ss-set__bar strong { font-weight: 800; font-size: 15px; }

/* Makieta „Panel opieki — statusy” */
.ss-mock--status .ss-stat__head { display: flex; align-items: center; gap: 12px; padding: 2px 4px 12px; border-bottom: 1px solid #f0eae8; margin-bottom: 12px; }
.ss-stat__logo { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--mk-red); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; }
.ss-stat__logo svg { width: 18px; height: 18px; }
.ss-stat__logo--img { background: #fff; overflow: hidden; }
.ss-stat__logo--img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.ss-stat__titles { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.ss-stat__title { font-weight: 700; font-size: 15px; line-height: 1.15; }
.ss-stat__sub { font-size: 12px; color: var(--ss-muted, #8a7f79); }
.ss-stat__pill { flex: none; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; padding: 6px 13px; border-radius: 999px; white-space: nowrap; }
.ss-stat__pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ss-stat__pill--ok { background: #e6f6ec; color: #1a7a3f; }
.ss-stat__pill--warn { background: #fff4e0; color: #a15c00; }
.ss-stat__ikona svg { width: 18px; height: 18px; }
.ss-stat__state { flex: none; font-size: 13px; font-weight: 700; white-space: nowrap; }
.ss-stat__state--ok { color: #1a7a3f; }
.ss-stat__state--warn { color: #a15c00; }
.ss-stat__state--err { color: #b11414; }
.ss-stat__state--neutral { color: var(--ss-muted, #8a7f79); }
.ss-mock--status .ss-stat__row.is-warn { background: #fffaf0; border-color: #f4e6c6; }
.ss-mock--status .ss-stat__row.is-err { background: #fdf2f2; border-color: #f4cccc; }
.ss-stat__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #f0eae8; }
.ss-stat__foot-l { font-size: 12px; color: var(--ss-muted, #8a7f79); }
.ss-stat__foot-r { font-size: 13px; font-weight: 700; color: var(--mk-red); white-space: nowrap; }

/* ===== Sekcja „Kroki (proces)" ===== */
.ss-kroki .ss-block__heading { text-align: center; }
.ss-kroki .ss-block__opis { text-align: center; max-width: 760px; margin-inline: auto; }
.ss-kroki__eyebrow-wrap { text-align: center; margin-bottom: 12px; }
.ss-kroki__eyebrow { display: inline-block; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ss-accent, #bc0000); background: #fff; border: 1px solid #f2dede; padding: 5px 14px; border-radius: 20px; }
/* styl: numerowane kroki */
.ss-kroki__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 28px; margin-top: 46px; }
.ss-kroki--k2 .ss-kroki__grid { grid-template-columns: repeat(2, 1fr); }
.ss-kroki--k4 .ss-kroki__grid { grid-template-columns: repeat(4, 1fr); }
.ss-kroki--numery .ss-krok { text-align: center; }
.ss-krok__num-wrap { position: relative; display: flex; justify-content: center; margin-bottom: 18px; }
.ss-krok__num-wrap::before { content: ""; position: absolute; top: 50%; right: 50%; width: calc(100% + 28px); height: 0; border-top: 2px dashed rgba(188,0,0,.35); transform: translateY(-50%); z-index: 0; }
.ss-kroki--k3 .ss-krok:nth-child(3n+1) .ss-krok__num-wrap::before,
.ss-kroki--k2 .ss-krok:nth-child(2n+1) .ss-krok__num-wrap::before,
.ss-kroki--k4 .ss-krok:nth-child(4n+1) .ss-krok__num-wrap::before { display: none; }
.ss-krok__num { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 2px solid var(--ss-accent, #bc0000); color: var(--ss-accent, #bc0000); font-size: 22px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px -10px rgba(188,0,0,.5); }
.ss-kroki--numery .ss-krok__title { font-size: 17px; font-weight: 700; margin: 0 0 8px; color: #14110f; }
.ss-kroki--numery .ss-krok__desc { font-size: 14px; line-height: 1.55; color: #6b635c; margin: 0 auto; max-width: 300px; }
/* styl: przepływ kart ze strzałkami — JEDEN rząd (bez zawijania), na węższych ekranach pion */
.ss-kroki__flow { display: flex; align-items: stretch; justify-content: center; gap: 0; margin-top: 40px; flex-wrap: nowrap; }
.ss-kroki--przeplyw .ss-krok { flex: 1 1 0; min-width: 0; max-width: 360px; background: #fff; border: 1px solid #efe7e7; border-radius: 16px; box-shadow: 0 22px 44px -30px rgba(20,10,10,.3); padding: 22px 24px; }
.ss-krok__badge { display: inline-block; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--ss-accent, #bc0000); padding: 5px 12px; border-radius: 20px; margin-bottom: 14px; }
.ss-kroki--przeplyw .ss-krok__title { font-size: 18px; font-weight: 700; margin: 0 0 8px; color: #14110f; }
.ss-kroki--przeplyw .ss-krok__desc { font-size: 14px; line-height: 1.55; color: #8a8f98; margin: 0; }
.ss-kroki__arrow { flex: none; display: flex; align-items: center; justify-content: center; color: var(--ss-accent, #bc0000); font-size: 24px; padding: 0 8px; }

/* ---- RESPONSYWNOŚĆ „Kroki" ---- */
/* Numery: redukuj kolumny na węższych ekranach. Łącząca linia działa tylko
   przy pełnej liczbie kolumn (desktop) — poniżej ją chowamy, bo nie pasuje. */
@media (max-width: 1040px) {
	.ss-kroki--k4 .ss-kroki__grid { grid-template-columns: repeat(2, 1fr); }
	.ss-kroki--k4 .ss-krok__num-wrap::before { display: none; }
}
@media (max-width: 860px) {
	.ss-kroki--k3 .ss-kroki__grid { grid-template-columns: repeat(2, 1fr); }
	.ss-kroki--k3 .ss-krok__num-wrap::before { display: none; }
}
/* Przepływ: poniżej ~820px pion, strzałki obrócone w dół (koniec brzydkiego zawijania) */
@media (max-width: 820px) {
	.ss-kroki__flow { flex-direction: column; align-items: stretch; }
	.ss-kroki--przeplyw .ss-krok { max-width: none; }
	.ss-kroki__arrow { transform: rotate(90deg); padding: 10px 0; }
}
/* Najmniejsze ekrany: jedna kolumna, bez linii łączącej.
   Selektory z modyfikatorem (ta sama specyficzność co reguły wyżej + późniejsza
   kolejność), żeby na pewno nadpisać układ 2-kolumnowy. */
@media (max-width: 560px) {
	.ss-kroki--k2 .ss-kroki__grid,
	.ss-kroki--k3 .ss-kroki__grid,
	.ss-kroki--k4 .ss-kroki__grid { grid-template-columns: 1fr; }
	.ss-krok__num-wrap::before { display: none; }
}

/* styl: Timeline z lepką kolumną (nagłówek sticky + pionowa linia z ikonami) */
.ss-kroki--sticky .ss-kroki__sticky-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(36px, 6vw, 96px); align-items: start; }
.ss-kroki--sticky .ss-kroki__sticky-head { position: sticky; top: 96px; }
.ss-kroki--sticky .ss-kroki__eyebrow { margin-bottom: 16px; }
.ss-kroki--sticky .ss-block__heading { text-align: left; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; margin: 0; }
.ss-kroki--sticky .ss-block__opis { text-align: left; margin: 18px 0 0; max-width: none; color: #6b635c; }
.ss-kroki__tl2 { list-style: none; margin: 0; padding: 0; }
.ss-krok2 { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 22px; padding-bottom: 46px; }
.ss-krok2:last-child { padding-bottom: 0; }
.ss-krok2:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 46px; bottom: 6px; border-left: 2px dotted #cfc9c5; }
.ss-krok2__icon { position: relative; z-index: 1; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--ss-accent, #bc0000); background: #fff; }
.ss-krok2__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ss-accent, #bc0000); }
.ss-krok2__title { font-size: 20px; font-weight: 700; margin: 6px 0 8px; color: #14110f; }
.ss-krok2__desc { margin: 0; line-height: 1.6; color: #5c5652; }
@media (max-width: 860px) {
	.ss-kroki--sticky .ss-kroki__sticky-grid { grid-template-columns: 1fr; gap: 28px; }
	.ss-kroki--sticky .ss-kroki__sticky-head { position: static; }
}

/* ===== Pełne tło sekcji (pas na całą szerokość) ===== */
.ss-sekcja-tlo--full { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* ===== Efekty: hover-lift + pojawianie się ===== */
:root { --ss-shadow-soft: rgba(149, 157, 165, 0.2) 0px 8px 24px; }
/* Uniesienie kart przy najechaniu (miękki cień). Klasa .ss-hover-lift działa też na dowolnym elemencie. */
.ss-hover-lift,
.ss-iconbox,
.ss-wpis,
.ss-kroki--przeplyw .ss-krok { transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease; }
.ss-hover-lift:hover,
.ss-iconbox:hover,
.ss-wpis:hover,
.ss-kroki--przeplyw .ss-krok:hover { transform: translateY(-6px); box-shadow: var(--ss-shadow-soft); }

/* Pojawianie się przy przewijaniu. Stan ukrycia włącza dopiero JS (klasa
   .ss-anim-ready) — bez JS treść jest normalnie widoczna. .ss-reveal = ręcznie na dowolnym elemencie. */
.ss-anim-ready .ss-anim > *,
.ss-anim-ready .ss-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.ss-anim-ready .ss-anim > .is-in,
.ss-anim-ready .ss-reveal.is-in { opacity: 1; transform: none; }
/* Kaskada kart w rzędzie — dzieci siatek wjeżdżają po kolei, gdy sekcja się pokaże.
   Indeks --ss-i ustawia JS. Opacity animuje cała sekcja (blok), tu tylko ruch per karta. */
.ss-anim-ready .ss-anim > * .ss-stagger > * { transform: translateY(16px); transition: transform .6s cubic-bezier(.2,.7,.3,1); transition-delay: calc(var(--ss-i, 0) * 70ms); }
.ss-anim-ready .ss-anim > .is-in .ss-stagger > * { transform: none; }
@media (prefers-reduced-motion: reduce) {
	.ss-hover-lift, .ss-iconbox, .ss-wpis, .ss-kroki--przeplyw .ss-krok { transition: none; }
	.ss-hover-lift:hover, .ss-iconbox:hover, .ss-wpis:hover, .ss-kroki--przeplyw .ss-krok:hover { transform: none; }
	.ss-anim-ready .ss-anim > *, .ss-anim-ready .ss-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	.ss-anim-ready .ss-anim .ss-stagger > * { transform: none !important; transition: none !important; }
}

/* ===== Hero — wejście na wczytaniu (obraz z boku + makieta z kaskadą wierszy) =====
   Działa gdy włączona „Animacja pojawiania się". Hero jest nad zakładką,
   więc animujemy na load, a nie przy scrollu. Cały blok Hero NIE jest
   wygaszany (nadpisanie niżej) — animujemy tylko wizualizację i wiersze. */
@keyframes ss-hero-in { from { opacity: 0; transform: translateY(22px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes ss-row-in  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.ss-anim-ready .ss-anim > .ss-hero { opacity: 1; transform: none; }

.ss-anim-ready .ss-hero__media > img,
.ss-anim-ready .ss-hero .ss-mock { animation: ss-hero-in .8s .12s both cubic-bezier(.2,.7,.3,1); }

.ss-anim-ready .ss-hero :is(.ss-mock__row, .ss-mock__tl-item, .ss-mock__step, .ss-mock__kpi, .ss-mock__cert-badge) { animation: ss-row-in .55s both cubic-bezier(.2,.7,.3,1); }
.ss-anim-ready .ss-hero :is(.ss-mock__row, .ss-mock__tl-item, .ss-mock__step, .ss-mock__kpi, .ss-mock__cert-badge):nth-child(1) { animation-delay: .35s; }
.ss-anim-ready .ss-hero :is(.ss-mock__row, .ss-mock__tl-item, .ss-mock__step, .ss-mock__kpi, .ss-mock__cert-badge):nth-child(2) { animation-delay: .46s; }
.ss-anim-ready .ss-hero :is(.ss-mock__row, .ss-mock__tl-item, .ss-mock__step, .ss-mock__kpi, .ss-mock__cert-badge):nth-child(3) { animation-delay: .57s; }
.ss-anim-ready .ss-hero :is(.ss-mock__row, .ss-mock__tl-item, .ss-mock__step, .ss-mock__kpi, .ss-mock__cert-badge):nth-child(4) { animation-delay: .68s; }
.ss-anim-ready .ss-hero :is(.ss-mock__row, .ss-mock__tl-item, .ss-mock__step, .ss-mock__kpi, .ss-mock__cert-badge):nth-child(5) { animation-delay: .79s; }
.ss-anim-ready .ss-hero :is(.ss-mock__row, .ss-mock__tl-item, .ss-mock__step, .ss-mock__kpi, .ss-mock__cert-badge):nth-child(6) { animation-delay: .90s; }
.ss-anim-ready .ss-hero :is(.ss-mock__row, .ss-mock__tl-item, .ss-mock__step, .ss-mock__kpi, .ss-mock__cert-badge):nth-child(7) { animation-delay: 1.01s; }
.ss-anim-ready .ss-hero :is(.ss-mock__row, .ss-mock__tl-item, .ss-mock__step, .ss-mock__kpi, .ss-mock__cert-badge):nth-child(8) { animation-delay: 1.12s; }

@media (prefers-reduced-motion: reduce) {
	.ss-anim-ready .ss-hero__media > img,
	.ss-anim-ready .ss-hero .ss-mock,
	.ss-anim-ready .ss-hero :is(.ss-mock__row, .ss-mock__tl-item, .ss-mock__step, .ss-mock__kpi, .ss-mock__cert-badge) { animation: none !important; }
}

/* Siatki */
.ss-grid { display: grid; gap: 18px; }
.ss-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ss-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ss-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ss-grid--5 { grid-template-columns: repeat(5, 1fr); }
.ss-grid--6 { grid-template-columns: repeat(6, 1fr); }

/* KATEGORIE */
.ss-cat {
	display: flex; align-items: center; gap: 16px;
	padding: 16px;
	border: 1px solid var(--ss-border);
	border-radius: var(--ss-radius);
	background: #fff;
	text-decoration: none;
	color: var(--ss-dark);
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ss-cat:hover {
	border-color: var(--ss-accent);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(120,30,30,.08);
}
.ss-cat__media {
	flex: none;
	width: 72px; height: 72px;
	border-radius: 12px;
	overflow: hidden;
	background: #f6f1ee;
	display: grid; place-items: center;
}
.ss-cat__media img { width: 100%; height: 100%; object-fit: cover; }
.ss-cat__placeholder { color: var(--ss-accent); opacity: .5; }
.ss-cat__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ss-cat__name { font-weight: 700; font-size: 16px; }
.ss-cat__count { font-size: 13px; color: var(--ss-muted); }
.ss-cat__arrow { margin-left: auto; color: var(--ss-accent); flex: none; }

/* KATEGORIE — uklad "karty" (duze zdjecie + opis + przycisk) */
.ss-catcard {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: var(--ss-dark);
}
.ss-catcard__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 8px;
	background: #f6f1ee;
	margin-bottom: 16px;
}
.ss-catcard__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}
.ss-catcard:hover .ss-catcard__media img { transform: scale(1.04); }
.ss-catcard__placeholder {
	width: 100%; height: 100%;
	display: grid; place-items: center;
	color: var(--ss-accent); opacity: .4;
}
.ss-catcard__name {
	display: block;
	text-align: center;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.ss-catcard__desc {
	display: block;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ss-muted);
	margin-bottom: 18px;
}
.ss-catcard__btn {
	display: inline-flex;
	align-items: center; justify-content: center;
	gap: 8px;
	margin-top: auto;          /* przyciski rownaja sie do dolu karty */
	padding: 12px 20px;
	background: var(--ss-dark);
	color: #fff;
	font-size: 14px; font-weight: 600;
	transition: background .2s ease;
}
.ss-catcard:hover .ss-catcard__btn { background: var(--ss-accent); }

/* SLIDER (produkty) */
.ss-slider { position: relative; }
.ss-slider ul.products {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	gap: 18px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.ss-slider ul.products::-webkit-scrollbar { display: none; }
.ss-slider ul.products > li.product {
	flex: 0 0 auto !important;
	margin: 0 !important;
	clear: none !important;
	float: none !important;
	scroll-snap-align: start;
}
.ss-slider--6 ul.products > li.product { width: calc((100% - 5 * 18px) / 6) !important; }
.ss-slider--5 ul.products > li.product { width: calc((100% - 4 * 18px) / 5) !important; }
.ss-slider--4 ul.products > li.product { width: calc((100% - 3 * 18px) / 4) !important; }
.ss-slider--3 ul.products > li.product { width: calc((100% - 2 * 18px) / 3) !important; }
.ss-slider--2 ul.products > li.product { width: calc((100% - 18px) / 2) !important; }
/* Siatka produktow 5-6 kolumn (tryb „siatka"): WooCommerce nie ma wlasnych
   szerokosci dla 5/6, wiec wymuszamy CSS grid tylko dla tych dwoch. */
.ss-produkty__grid:not(.ss-slider) ul.products.columns-5,
.ss-produkty__grid:not(.ss-slider) ul.products.columns-6 { display: grid; gap: 18px; }
.ss-produkty__grid:not(.ss-slider) ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ss-produkty__grid:not(.ss-slider) ul.products.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ss-produkty__grid:not(.ss-slider) ul.products.columns-5 > li.product,
.ss-produkty__grid:not(.ss-slider) ul.products.columns-6 > li.product { width: auto !important; margin: 0 !important; float: none !important; }
.ss-slider__nav {
	position: absolute;
	top: 38%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px;
	border: 0;
	border-radius: 6px;
	background: rgba(20,17,15,.55);
	color: #fff;
	cursor: pointer;
	transition: background .2s ease, opacity .2s ease;
}
.ss-slider__nav:hover { background: var(--ss-accent); }
.ss-slider__nav:disabled { opacity: 0; pointer-events: none; }
.ss-slider__prev { left: -6px; }
.ss-slider__next { right: -6px; }

/* SLIDER LOGO / MAREK */
.ss-logos__viewport { overflow: hidden; position: relative; container-type: inline-size; }
.ss-logos--static .ss-logos__viewport { overflow: visible; }
.ss-logos__track {
	list-style: none; margin: 0; padding: 8px 0;
	display: flex; align-items: center; gap: 48px; width: max-content;
}
.ss-logos--static .ss-logos__track { width: auto; flex-wrap: wrap; justify-content: center; gap: 32px 48px; }
.ss-logos--auto .ss-logos__track { animation: ss-logos-marquee var(--ss-logos-czas, 30s) linear infinite; }
.ss-logos--auto .ss-logos__viewport:hover .ss-logos__track { animation-play-state: paused; }
@keyframes ss-logos-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ss-logos__item { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.ss-logos__link { display: inline-flex; align-items: center; }
.ss-logos__item img { display: block; width: auto; height: auto; max-height: 56px; max-width: var(--ss-logo-w, 150px); object-fit: contain; }
.ss-logos__name { font-weight: 700; color: var(--ss-dark); white-space: nowrap; }
.ss-logos--w3 { --ss-logo-w: 200px; --ss-logos-n: 3; }
.ss-logos--w4 { --ss-logo-w: 170px; --ss-logos-n: 4; }
.ss-logos--w5 { --ss-logo-w: 140px; --ss-logos-n: 5; }
.ss-logos--w6 { --ss-logo-w: 120px; --ss-logos-n: 6; }
/* „N widocznych" = dokładnie N logo na ekranie. Szerokość slajdu = 1/N
   szerokości widoku (100cqw = szerokość .ss-logos__viewport), a odstęp
   robi wyśrodkowanie obrazka w slajdzie (bez track-gap, żeby pętla -50%
   marquee pozostała bezszwowa). */
.ss-logos--auto .ss-logos__track { gap: 0; }
.ss-logos--auto .ss-logos__item { width: calc(100cqw / var(--ss-logos-n, 5)); }
@media (max-width: 767px) { .ss-logos--auto .ss-logos__item { width: calc(100cqw / 3); } }
@media (max-width: 479px) { .ss-logos--auto .ss-logos__item { width: calc(100cqw / 2); } }
.ss-logos--gray .ss-logos__item img { filter: grayscale(1); opacity: .6; transition: filter .25s ease, opacity .25s ease; }
.ss-logos--gray .ss-logos__item:hover img { filter: none; opacity: 1; }
/* Nazwy pod logo */
.ss-logos__item--z-nazwa { flex-direction: column; align-items: center; gap: 8px; }
.ss-logos__link--z-nazwa { flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.ss-logos__label { font-size: .8em; font-weight: 600; color: var(--ss-dark, #111); text-align: center; max-width: var(--ss-logo-w, 150px); line-height: 1.3; }
.ss-logos__link--z-nazwa:hover .ss-logos__label { color: var(--ss-accent, currentColor); }

/* KARUZELA KATEGORII */
.ss-logos-kar { position: relative; }
.ss-logos-kar__okno { overflow: hidden; width: 100%; }
.ss-logos-kar__tor {
	display: flex; list-style: none; margin: 0; padding: 8px 0;
	transition: transform .38s cubic-bezier(.4,0,.2,1); will-change: transform;
}
.ss-logos-kar__tor > li {
	flex: 0 0 auto; box-sizing: border-box; padding: 12px 16px;
	display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.ss-logos-kar__tor > li img { display: block; width: 100%; height: 220px; object-fit: contain; }
.ss-logos-kar__tor .ss-logos__label { font-size: .85em; font-weight: 600; color: var(--ss-dark); text-align: center; line-height: 1.3; max-width: 100%; }
.ss-logos-kar__tor .ss-logos__link--z-nazwa { display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; color: inherit; width: 100%; }
.ss-logos-kar__tor .ss-logos__link--z-nazwa:hover .ss-logos__label { color: var(--ss-accent); }
.ss-logos-kar__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 20px;
}
.ss-logos-kar__dot {
	width: 10px; height: 10px;
	border-radius: 50%;
	border: none;
	padding: 0;
	background: var(--ss-border, #ece6e2);
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
	flex-shrink: 0;
}
.ss-logos-kar__dot.is-active {
	background: var(--ss-accent);
	transform: scale(1.3);
}
@media (max-width: 767px) { .ss-logos-kar__tor > li img { height: 140px; } }
@media (max-width: 479px) { .ss-logos-kar__tor > li img { height: 110px; } }
.ss-logos-kar__dot:hover:not(.is-active) { background: var(--ss-muted, #5c5652); }
.ss-logos-kar__btn {
	position: absolute; top: calc(50% - 22px); z-index: 2;
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border: 1.5px solid var(--ss-border, #ece6e2);
	border-radius: 50%; background: rgba(255,255,255,.92); backdrop-filter: blur(4px);
	color: var(--ss-dark, #111); cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ss-logos-kar__btn:hover { background: var(--ss-accent); color: #fff; border-color: var(--ss-accent); }
.ss-logos-kar__btn:disabled { opacity: .3; pointer-events: none; }
.ss-logos-kar__btn svg { width: 20px; height: 20px; display: block; }
.ss-logos--gray .ss-logos-kar__tor > li img { filter: grayscale(1); opacity: .65; transition: filter .25s ease, opacity .25s ease; }
.ss-logos--gray .ss-logos-kar__tor > li:hover img { filter: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.ss-logos--auto .ss-logos__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
	.ss-logos--auto .ss-logos__item[aria-hidden="true"] { display: none; }
	.ss-logos-kar__tor { transition: none; }
}

/* PRODUKTY — opakowanie standardowej siatki WooCommerce */
.ss-produkty__grid ul.products { margin: 0; }
.ss-produkty__more { margin-top: 32px; text-align: center; }

/* CECHY */
.ss-cechy__grid { display: grid; grid-template-columns: repeat(var(--cechy-kol, 3), 1fr); gap: 18px; }
/* Eyebrow sekcji „Cechy" — plakietka jak w innych sekcjach */
.ss-cechy__eyebrow { display: inline-block; margin: 0 0 12px; padding: 6px 14px; border-radius: 999px; background: rgba(0,0,0,.05); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ss-accent, #bc0000); }
.ss-cechy--head-srodek .ss-cechy__eyebrow { display: block; width: fit-content; margin-left: auto; margin-right: auto; }
.ss-cecha {
	padding: 24px;
	border: 1px solid var(--ss-border);
	border-radius: var(--ss-radius);
	background: #fdfbfa;
}
.ss-cecha__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px;
	border-radius: 11px;
	background: #fff;
	border: 1px solid var(--ss-border);
	color: var(--ss-accent);
}
.ss-cecha__title { margin: 14px 0 6px; font-size: 17px; }
.ss-cecha__desc { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ss-muted); }

/* TEKST SEO */
.ss-tekst__body { line-height: 1.7; color: #2b2724; }
.ss-tekst__body--2 { columns: 2; column-gap: 44px; }
.ss-tekst__body :where(h3, h4) { margin-top: 1.6em; }
.ss-tekst__body ul { padding-left: 1.2em; }
.ss-tekst__akcja { margin-top: 26px; }
.ss-tekst--srodek { text-align: center; }
.ss-tekst--srodek .ss-tekst__body--1 { max-width: 860px; margin-inline: auto; }
.ss-tekst--srodek .ss-tekst__body ul { display: inline-block; text-align: left; }
@media (max-width: 782px) { .ss-tekst__body--2 { columns: 1; } }

/* BANER CTA */
.ss-baner { background: var(--ss-accent); color: #fff; }
.ss-baner__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 28px; flex-wrap: wrap;
}
.ss-baner__heading { margin: 0 0 6px; color: #fff; font-size: clamp(22px, 3vw, 30px); }
.ss-baner__desc { margin: 0; color: rgba(255,255,255,.9); max-width: 60ch; }

/* TEKST + OBRAZ */
.ss-tekst-obraz__inner {
	display: grid;
	grid-template-columns: var(--ss-to-c1, 1fr) var(--ss-to-c2, 1fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
}
.ss-tekst-obraz--prawo .ss-tekst-obraz__media { order: 2; }
.ss-tekst-obraz__media-link { display: block; }
.ss-tekst-obraz__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	border-radius: var(--ss-radius);
	display: block;
}
.ss-tekst-obraz__body .ss-block__heading { margin-bottom: 16px; }
.ss-tekst-obraz__text { line-height: 1.7; color: #2b2724; }
.ss-tekst-obraz__btn { margin-top: 22px; }

/* ZESPOL */
.ss-osoba {
	text-align: center;
	padding: 24px;
	border: 1px solid var(--ss-border);
	border-radius: var(--ss-radius);
	background: #fff;
	position: relative;
}
.ss-osoba__photo {
	width: 110px; height: 110px;
	margin: 0 auto 16px;
	border-radius: 50%;
	overflow: hidden;
	background: #f6f1ee;
}
.ss-osoba__photo img { width: 100%; height: 100%; object-fit: cover; }
.ss-osoba__photo--inicjal {
	display: flex; align-items: center; justify-content: center;
	background: var(--ss-accent);
}
.ss-osoba__photo--inicjal span {
	font-size: 46px; font-weight: 800; line-height: 1;
	color: #fff; text-transform: uppercase; letter-spacing: .01em;
}
.ss-osoba__name { margin: 0 0 4px; font-size: 18px; }
.ss-osoba__role { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--ss-accent); }
.ss-osoba__desc { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ss-muted); }
.ss-osoba__kontakt { margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ss-osoba__kontakt-item { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--ss-accent); text-decoration: none; }
.ss-osoba__kontakt-item:hover { text-decoration: underline; }
.ss-osoba__kontakt-item span { overflow-wrap: anywhere; }
.ss-osoba__link {
	display: inline-flex; margin-top: 12px;
	color: var(--ss-muted);
}
.ss-osoba__link:hover { color: var(--ss-accent); }

/* WSTAWKA */
.ss-wstawka__body--waska { max-width: 720px; margin-inline: auto; }

/* WPISY (blog) */
.ss-wpis { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ss-border); border-radius: var(--ss-radius); overflow: hidden; }
.ss-wpis__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #f6f1ee; }
.ss-wpis__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.ss-wpis:hover .ss-wpis__media img { transform: scale(1.04); }
/* Miniatura jako ikona (kafelek zamiast zdjęcia) */
.ss-wpis__media--ikona { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #fbe9e9, #f6f0ee); }
.ss-wpis__ikona { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 16px; background: #fff; color: var(--ss-accent, #bc0000); box-shadow: 0 10px 24px -14px rgba(188,0,0,.45); transition: transform .3s ease; }
.ss-wpis__ikona svg { width: 30px; height: 30px; }
.ss-wpis:hover .ss-wpis__media--ikona .ss-wpis__ikona { transform: translateY(-3px) scale(1.05); }
.ss-wpisy-kolumny--lista .ss-wpis__ikona,
.ss-wpisy--lista .ss-wpis__ikona { width: 48px; height: 48px; border-radius: 12px; }
.ss-wpisy-kolumny--lista .ss-wpis__ikona svg,
.ss-wpisy--lista .ss-wpis__ikona svg { width: 24px; height: 24px; }
.ss-wpis__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.ss-wpis__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 8px; font-size: 13px; color: var(--ss-muted); }
.ss-wpis__kat { color: var(--ss-accent); font-weight: 600; text-decoration: none; text-transform: uppercase; letter-spacing: .03em; font-size: 12px; }
.ss-wpis__kat:hover { text-decoration: underline; }
.ss-wpis__title { margin: 0 0 10px; font-size: 19px; line-height: 1.3; }
.ss-wpis__title a { color: var(--ss-dark); text-decoration: none; }
.ss-wpis__title a:hover { color: var(--ss-accent); }
.ss-wpis__zajawka { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: var(--ss-muted); }
.ss-wpis__wiecej { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; color: var(--ss-accent); font-weight: 600; font-size: 14px; text-decoration: none; }
.ss-wpis__wiecej:hover { gap: 8px; }
.ss-wpisy__more { margin-top: 32px; text-align: center; }

/* WPISY — uklad "lista" (miniatura z lewej + tresc z prawej) */
.ss-wpisy__lista { display: flex; flex-direction: column; gap: 20px; }
.ss-wpisy--lista .ss-wpis { flex-direction: row; align-items: stretch; }
.ss-wpisy--lista .ss-wpis__media { flex: 0 0 34%; max-width: 320px; aspect-ratio: auto; }
.ss-wpisy--lista .ss-wpis__body { justify-content: center; }
.ss-wpisy--lista .ss-wpis__title { font-size: 22px; }

/* WPISY W KOLUMNACH (kanały) — 2–3 niezależne strumienie obok siebie */
.ss-kanaly { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; }
.ss-kanaly--2 { grid-template-columns: repeat(2, 1fr); }
.ss-kanaly--3 { grid-template-columns: repeat(3, 1fr); }
.ss-kanal { min-width: 0; }
.ss-kanal__tytul { margin: 0 0 16px; padding-bottom: 10px; font-size: 18px; font-weight: 700; color: var(--ss-dark, #14110f); border-bottom: 2px solid var(--ss-accent, #bc0000); }
.ss-kanal__lista { display: flex; flex-direction: column; gap: 22px; }
.ss-wpisy-kolumny .ss-wpis__title { font-size: 18px; }
@media (max-width: 900px) { .ss-kanaly--3 { grid-template-columns: repeat(2, 1fr); } }
/* Wariant „lista" w kolumnach: mała miniatura z lewej, zwarty tekst */
.ss-wpisy-kolumny--lista .ss-kanal__lista { gap: 14px; }
.ss-wpisy-kolumny--lista .ss-wpis__media { flex: 0 0 40%; max-width: 140px; aspect-ratio: 4 / 3; }
.ss-wpisy-kolumny--lista .ss-wpis__body { padding: 12px 14px; justify-content: center; }
.ss-wpisy-kolumny--lista .ss-wpis__title { font-size: 16px; margin-bottom: 6px; }
.ss-wpisy-kolumny--lista .ss-wpis__meta { margin-bottom: 6px; }
.ss-wpisy-kolumny--lista .ss-wpis__zajawka { margin-bottom: 8px; }

/* BOXY Z IKONAMI */
.ss-iconboxy__head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: start;
	margin-bottom: 40px;
}
.ss-iconboxy__heading { margin: 0; font-size: var(--ss-ib-h, clamp(26px, 3.4vw, 40px)); line-height: 1.1; }
.ss-iconboxy__intro { margin: 6px 0 0; color: var(--ss-muted); line-height: 1.6; font-size: 16px; }
.ss-iconbox {
	position: relative;
	padding: 30px;
	border-radius: 18px;
	background: #f6f4f3;
	transition: transform .2s ease, box-shadow .2s ease;
}
/* Nadtytul + akcent naglowka sekcji */
/* Sekcyjna etykieta jako "pill" — jak w hero (zaokraglona plakietka).
   justify-self: start -> plakietka obejmuje tylko tekst (bez justify-self
   grid rozciagnalby ja na cala szerokosc kolumny). */
.ss-iconboxy__eyebrow { grid-column: 1 / -1; justify-self: start; display: inline-block; margin: 0; padding: 6px 14px; border-radius: 999px; background: rgba(0,0,0,.05); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ss-accent, #bc0000); }
.ss-iconboxy__heading-akcent { color: var(--ss-accent, #bc0000); }
/* Etykieta nad tytulem boxa (np. FILAR 01) */
.ss-iconbox__eyebrow { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ss-accent, #bc0000); margin: 0 0 4px; }
/* Wstazka w rogu boxa (np. NOWOSC) */
.ss-iconbox__ribbon { position: absolute; top: 14px; right: 14px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--ss-accent, #bc0000); padding: 4px 10px; border-radius: 999px; box-shadow: 0 6px 16px -8px rgba(188,0,0,.6); }

/* ===== Info banner ===== */
.ss-info__grid { display: grid; gap: 18px; }
.ss-info__grid--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 820px) { .ss-info__grid--2 { grid-template-columns: 1fr; } }
.ss-infob { display: flex; align-items: center; gap: 18px; padding: 20px 24px; border-radius: 16px; border: 1px solid #f0e8e8; background: #faf7f5; }
.ss-infob__ikona { flex: none; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: #fbe9e9; color: var(--ss-accent, #bc0000); }
.ss-infob__ikona svg { width: 22px; height: 22px; }
.ss-infob__body { flex: 1 1 auto; min-width: 0; }
.ss-infob__text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ss-muted, #6b625d); }
.ss-infob__lead { color: #14110f; font-weight: 700; }
.ss-infob__btn, .ss-infob__link { flex: none; white-space: nowrap; text-decoration: none; font-weight: 700; }
.ss-infob__btn { display: inline-flex; align-items: center; gap: 6px; padding: 11px 22px; border-radius: 8px; background: var(--ss-accent, #bc0000); color: #fff; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.ss-infob__btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(188,0,0,.3); filter: brightness(1.05); }
.ss-infob__btn--ghost { background: #fff; color: #14110f; border: 1px solid #e3d6d6; }
.ss-infob__btn--ghost:hover { border-color: var(--ss-accent, #bc0000); color: var(--ss-accent, #bc0000); box-shadow: none; }
.ss-infob__link { color: var(--ss-accent, #bc0000); font-size: 14px; }
.ss-infob__link:hover { text-decoration: underline; }
.ss-infob--ciemny { background: #1b1613; border-color: #2a221e; }
.ss-infob--ciemny .ss-infob__lead { color: #fff; }
.ss-infob--ciemny .ss-infob__text { color: rgba(255,255,255,.72); }
.ss-infob--ciemny .ss-infob__ikona { background: #2a2320; color: #ff5a5a; }
.ss-infob--ciemny .ss-infob__btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.ss-infob--ciemny .ss-infob__btn--ghost:hover { border-color: #fff; color: #fff; }
@media (max-width: 620px) { .ss-infob { flex-wrap: wrap; align-items: flex-start; } .ss-infob__btn, .ss-infob__link { margin-top: 6px; } }
.ss-iconbox:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.07); }
.ss-iconbox__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px;
	border-radius: 50%;
	margin-bottom: 20px;
}
.ss-iconbox__icon--dark   { background: #14110f; color: #fff; }
.ss-iconbox__icon--akcent { background: var(--ss-accent); color: #fff; }
.ss-iconbox__icon--light  { background: #fff; color: var(--ss-accent); border: 1px solid var(--ss-border); }
.ss-iconbox__num { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; margin-bottom: 20px; font-size: 22px; font-weight: 800; line-height: 1; }
.ss-iconbox__num--dark   { background: #14110f; color: #fff; }
.ss-iconbox__num--akcent { background: var(--ss-accent); color: #fff; }
.ss-iconbox__num--light  { background: #fff; color: var(--ss-accent); border: 1px solid var(--ss-border); }
.ss-iconbox--poziom .ss-iconbox__num { flex: none; margin-bottom: 0; }
.ss-iconbox__lista { list-style: none; margin: 16px 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.ss-iconbox__lista li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: #2b2724; }
.ss-iconbox__check { color: var(--ss-accent); display: inline-flex; flex: 0 0 auto; margin-top: 3px; }
.ss-iconbox__check .trejka-icon { stroke-width: 2.5; }
.ss-iconboxy--head-center .ss-iconboxy__head { grid-template-columns: 1fr; row-gap: 0; text-align: center; max-width: 820px; margin-inline: auto; }
.ss-iconboxy--head-center .ss-iconboxy__eyebrow { justify-self: center; margin-bottom: 12px; }
.ss-iconboxy--head-center .ss-iconboxy__intro { max-width: 640px; margin: 10px auto 0; }
.ss-iconboxy--center .ss-iconbox { text-align: center; }
.ss-iconboxy--center .ss-iconbox__body { align-items: center; }
.ss-iconboxy--center .ss-iconbox__lista { display: inline-flex; }

/* Uklad "tytul": ikona obok tytulu (wiersz naglowka), a opis/lista/CTA
   pelna szerokoscia POD spodem — startuja od lewej krawedzi (na linii ikony). */
.ss-iconbox--tytul {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 26px 28px;
}
/* Wiersz naglowka: ikona + (etykieta/tytul) */
.ss-iconbox__head { display: flex; align-items: center; gap: 16px; }
.ss-iconbox--tytul .ss-iconbox__icon,
.ss-iconbox--tytul .ss-iconbox__num,
.ss-iconbox--tytul .ss-iconbox__foto {
	flex: none;
	margin-bottom: 0;
}
.ss-iconbox--tytul .ss-iconbox__headings { min-width: 0; }
.ss-iconbox--tytul .ss-iconbox__title { margin-top: 2px; }
.ss-iconbox--tytul .ss-iconbox__body { flex: 1 1 auto; min-width: 0; }
.ss-iconbox--tytul .ss-iconbox__body > :first-child { margin-top: 0; }
/* wariant wysrodkowany: ikona + tytul jako wysrodkowana grupa */
.ss-iconboxy--center .ss-iconbox--tytul .ss-iconbox__head { justify-content: center; }
.ss-iconboxy--center .ss-iconbox--tytul .ss-iconbox__body { text-align: center; }

/* Uklad poziomy: ikona po lewej, tekst po prawej */
.ss-iconbox--poziom {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 24px;
}
.ss-iconbox--poziom .ss-iconbox__icon {
	flex: none;          /* ikona nie kurczy sie przy dlugim tekscie */
	margin-bottom: 0;    /* odstep robi teraz gap */
}
.ss-iconbox--poziom .ss-iconbox__body { min-width: 0; } /* pozwala lamac dlugie maile */

.ss-iconbox__title { margin: 0 0 8px; font-size: 19px; }
.ss-iconbox__desc {
	margin: 0 0 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(0,0,0,.08);
	color: var(--ss-muted);
	font-size: 15px; line-height: 1.55;
}
.ss-iconbox__value { font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }
.ss-iconbox__value a { color: inherit; text-decoration: none; }
.ss-iconbox__value a:hover { color: var(--ss-accent); }
/* Box ze zdjeciem (jak w referencji): zdjecie na gorze, bez szarej karty */
.ss-iconbox--foto { padding: 0; background: transparent; border-radius: 0; }
.ss-iconbox--foto:hover { transform: none; box-shadow: none; }
.ss-iconbox__foto { display: block; margin: 0 0 18px; border-radius: 12px; overflow: hidden; line-height: 0; }
.ss-iconbox__foto img { width: 100%; height: auto; aspect-ratio: var(--ib-ratio, 16 / 10); object-fit: cover; display: block; }
/* CTA — okragly przycisk ze strzalka (zamiast tekstu "Wiecej") */
.ss-iconbox__more {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; flex: 0 0 auto; align-self: flex-start;
	margin-top: 16px; border-radius: 50%;
	background: var(--ss-accent, #bc0000); color: #fff; text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ss-iconbox__more .trejka-icon { display: block; }
.ss-iconbox__more:hover { color: #fff; transform: translateX(4px); box-shadow: 0 10px 22px -8px rgba(188,0,0,.55); }
.ss-iconboxy--center .ss-iconbox__more { align-self: center; }
/* Przycisk CTA rowna sie do dolu karty — bez linii, ktora "uciekala" w dol */
.ss-iconbox--cta:not(.ss-iconbox--poziom) { display: flex; flex-direction: column; height: 100%; }
.ss-iconbox--cta:not(.ss-iconbox--poziom) .ss-iconbox__body { flex: 1 1 auto; display: flex; flex-direction: column; }
.ss-iconbox--cta .ss-iconbox__desc { padding-bottom: 15px; margin-bottom: 0; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.ss-iconbox--cta .ss-iconbox__more { margin-top: auto; }
/* Caly box klikalny — box owiniety w <a> */
a.ss-iconbox--klik { color: inherit; text-decoration: none; display: block; cursor: pointer; }
a.ss-iconbox--klik.ss-iconbox--poziom { display: flex; }
a.ss-iconbox--klik:hover { color: inherit; }
a.ss-iconbox--klik:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.10); }
/* Efekt najazdu na zdjecie gdy box klikalny */
.ss-iconbox--foto.ss-iconbox--klik .ss-iconbox__foto img { transition: transform .3s ease; }
a.ss-iconbox--foto.ss-iconbox--klik:hover .ss-iconbox__foto img { transform: scale(1.03); }
/* Cofniecie efektu hover z .ss-iconbox:hover gdy jest <a> (by nie duplikowac) */
a.ss-iconbox:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.10); }

/* DWIE KOLUMNY */
.ss-kol2__grid {
	display: grid;
	gap: clamp(24px, 4vw, 56px);
}
.ss-kol2--50-50 { grid-template-columns: 1fr 1fr; }
.ss-kol2--60-40 { grid-template-columns: 3fr 2fr; }
.ss-kol2--40-60 { grid-template-columns: 2fr 3fr; }
.ss-kol2--v-gora   { align-items: start; }
.ss-kol2--v-srodek { align-items: center; }
.ss-kol2__media img {
	width: 100%; height: auto;
	border-radius: var(--ss-radius);
	display: block;
}
.ss-kol2__media + .ss-kol2__text { margin-top: 20px; }
.ss-kol2__text { line-height: 1.7; color: #2b2724; }
.ss-kol2__text > *:first-child { margin-top: 0; }
.ss-kol2__text > *:last-child { margin-bottom: 0; }

/* KONTAKT (dane + formularz) */
/* Szerokosc sekcji — przelamanie waskiego kontenera strony (np. podstrona Kontakt).
   Negatywne marginesy wyciagaja sekcje poza .entry-content az do krawedzi ekranu,
   a wewnetrzny .ss-wrap na nowo centruje tresc do zadanej szerokosci. */
.ss-kontakt--szer-szeroka,
.ss-kontakt--szer-pelna {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
}
.ss-strona-startowa .ss-kontakt--szer-szeroka > .ss-wrap { max-width: 1290px; }
.ss-strona-startowa .ss-kontakt--szer-pelna   > .ss-wrap { max-width: 1600px; }
.ss-kontakt__grid { display: grid; gap: clamp(28px, 4vw, 64px); align-items: start; }
.ss-kontakt--40-60 { grid-template-columns: 2fr 3fr; }
.ss-kontakt--60-40 { grid-template-columns: 3fr 2fr; }
.ss-kontakt--50-50 { grid-template-columns: 1fr 1fr; }
.ss-kontakt__photo { margin-bottom: 26px; }
.ss-kontakt__photo img {
	width: 100%; height: auto;
	border-radius: var(--ss-radius);
	display: block;
}
.ss-kontakt__info { display: flex; flex-direction: column; gap: 22px; }
.ss-kontakt__row { display: flex; gap: 14px; align-items: flex-start; }
.ss-kontakt__icon {
	flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px;
	border-radius: 12px;
	background: #f6f4f3;
	color: var(--ss-accent);
	margin-top: 2px;
}
.ss-kontakt__rowtitle { margin: 0 0 4px; font-size: 16px; }
.ss-kontakt__rowtext { color: var(--ss-muted); line-height: 1.55; font-size: 15px; }
.ss-kontakt__rowtext p { margin: 0 0 2px; }
.ss-kontakt__linkbtn {
	display: inline-flex; align-items: center; gap: 6px;
	margin-top: 10px;
	padding: 8px 16px;
	border: 1px solid var(--ss-border);
	border-radius: 999px;
	font-size: 14px; font-weight: 600;
	color: var(--ss-dark); text-decoration: none;
	transition: border-color .2s ease, color .2s ease;
}
.ss-kontakt__linkbtn:hover { border-color: var(--ss-accent); color: var(--ss-accent); }
.ss-kontakt__formheading { margin: 0 0 8px; font-size: clamp(24px, 3vw, 34px); line-height: 1.1; }
.ss-kontakt__formtext { margin: 0 0 24px; color: var(--ss-muted); line-height: 1.6; }
/* Delikatny lifting dla pol formularza, jesli wtyczka nie narzuca stylu */
.ss-kontakt__formbody input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.ss-kontakt__formbody textarea,
.ss-kontakt__formbody select {
	width: 100%;
}
/* Osadzone mapy/filmy (iframe) wypelniaja kolumne niezaleznie od width="600" w kodzie */
.ss-kontakt__formbody iframe {
	width: 100%;
	max-width: 100%;
	min-height: 420px;
	border: 0;
	border-radius: var(--ss-radius);
	display: block;
}

/* Responsywnosc */
@media (max-width: 1024px) {
	.ss-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.ss-grid--5 { grid-template-columns: repeat(3, 1fr); }
	.ss-grid--6 { grid-template-columns: repeat(3, 1fr); }
	.ss-cechy__grid { grid-template-columns: repeat(2, 1fr); }
	.ss-slider--6 ul.products > li.product,
	.ss-slider--5 ul.products > li.product,
	.ss-slider--4 ul.products > li.product,
	.ss-slider--3 ul.products > li.product { width: calc((100% - 18px) / 2) !important; }
	.ss-produkty__grid:not(.ss-slider) ul.products.columns-5,
	.ss-produkty__grid:not(.ss-slider) ul.products.columns-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.ss-hero__inner { grid-template-columns: 1fr; padding-block: clamp(40px, 8vw, 72px); }
	/* Nizsze banery na tabletach — stale 660px byloby za duzo. */
	.ss-hero--h-sm     .ss-hero__inner { min-height: 300px; }
	.ss-hero--h-md     .ss-hero__inner { min-height: 400px; }
	.ss-hero--h-lg     .ss-hero__inner { min-height: 480px; }
	.ss-hero--h-custom .ss-hero__inner { min-height: min(var(--ss-hero-h, 500px), 80svh); }
	.ss-tekst-obraz__inner { grid-template-columns: 1fr; }
	.ss-tekst-obraz--prawo .ss-tekst-obraz__media { order: 0; }
	.ss-iconboxy__head { grid-template-columns: 1fr; gap: 12px; }
	.ss-kol2__grid,
	.ss-kol2--50-50, .ss-kol2--60-40, .ss-kol2--40-60 { grid-template-columns: 1fr; }
	.ss-kontakt__grid,
	.ss-kontakt--40-60, .ss-kontakt--60-40, .ss-kontakt--50-50 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	/* Telefony — jeszcze nizej, zeby tresc nie plywala w duzej pustej przestrzeni. */
	.ss-hero__inner { padding-block: clamp(36px, 11vw, 56px); }
	.ss-hero--h-sm     .ss-hero__inner { min-height: 260px; }
	.ss-hero--h-md     .ss-hero__inner { min-height: 320px; }
	.ss-hero--h-lg     .ss-hero__inner { min-height: 380px; }
	.ss-hero--h-custom .ss-hero__inner { min-height: min(var(--ss-hero-h, 500px), 72svh); }
	.ss-grid--2, .ss-grid--3, .ss-grid--4, .ss-grid--5, .ss-grid--6 { grid-template-columns: 1fr; }
	.ss-produkty__grid:not(.ss-slider) ul.products.columns-5,
	.ss-produkty__grid:not(.ss-slider) ul.products.columns-6 { grid-template-columns: 1fr; }
	.ss-cechy__grid { grid-template-columns: 1fr; }
	.ss-slider ul.products > li.product { width: 78% !important; }
	.ss-slider__prev { left: 2px; }
	.ss-slider__next { right: 2px; }
	.ss-wpisy--lista .ss-wpis { flex-direction: column; }
	.ss-wpisy--lista .ss-wpis__media { flex-basis: auto; max-width: none; aspect-ratio: 16 / 10; }
	.ss-kanaly, .ss-kanaly--2, .ss-kanaly--3 { grid-template-columns: 1fr; }
}
.ss-faq__list { max-width: 860px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.ss-faq__item { border: 1px solid #e7e2dd; border-radius: 10px; background: #fff; overflow: hidden; }
.ss-faq__item[open] { border-color: var(--tr-red, #bc0000); }
.ss-faq__q { cursor: pointer; list-style: none; padding: 16px 46px 16px 20px; font-weight: 600; color: #2b2724; position: relative; }
.ss-faq__q::-webkit-details-marker { display: none; }
.ss-faq__q::after { content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--tr-red, #bc0000); border-bottom: 2px solid var(--tr-red, #bc0000); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.ss-faq__item[open] .ss-faq__q::after { transform: translateY(-30%) rotate(225deg); }
.ss-faq__q:hover { color: var(--tr-red, #bc0000); }
.ss-faq__a { padding: 0 20px 18px; line-height: 1.7; color: #2b2724; }
.ss-faq__a > :first-child { margin-top: 0; }
.ss-faq__a > :last-child { margin-bottom: 0; }

/* PAGINACJA wpisów */
.ss-wpisy__paginacja { margin-top: 36px; }
.ss-wpisy__paginacja .page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	list-style: none;
	margin: 0; padding: 0;
}
.ss-wpisy__paginacja .page-numbers li { margin: 0; }
.ss-wpisy__paginacja .page-numbers a,
.ss-wpisy__paginacja .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border-radius: 8px;
	border: 1px solid var(--ss-border, #ece6e2);
	background: #fff;
	color: var(--ss-dark, #14110f);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.ss-wpisy__paginacja .page-numbers a:hover {
	border-color: var(--ss-accent, #bc0000);
	color: var(--ss-accent, #bc0000);
}
.ss-wpisy__paginacja .page-numbers .current {
	background: var(--ss-accent, #bc0000);
	border-color: var(--ss-accent, #bc0000);
	color: #fff;
}
.ss-wpisy__paginacja .page-numbers .dots {
	border-color: transparent;
	background: transparent;
}

/* Taby */
.ss-taby__nav{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--ss-border,#e5e0db);margin-bottom:24px;}
.ss-taby__tab{appearance:none;-webkit-appearance:none;background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;padding:12px 18px;font:inherit;font-weight:600;color:#6b635c;cursor:pointer;}
.ss-taby__tab:hover{color:#14110f;}
.ss-taby__tab.is-active{color:var(--ss-accent,#bc0000);border-bottom-color:var(--ss-accent,#bc0000);}
.ss-taby__tab:focus-visible{outline:2px solid var(--ss-accent,#bc0000);outline-offset:2px;}
.ss-taby__panel{line-height:1.7;}
.ss-taby__panel[hidden]{display:none;}
@media(max-width:600px){.ss-taby__nav{overflow-x:auto;flex-wrap:nowrap;}
.ss-taby__tab{white-space:nowrap;}
}

/* Hero i pasy tła mają pełną szerokość (100vw): bez tego pasek przewijania daje poziomy scroll. */
html, body { overflow-x: clip; }

/* ===== Kategorie (akordeon) — panel boczny archiwum ===== */
.trejka-kat__tytul { margin: 0 0 12px; font-size: 16px; line-height: 1.4; font-weight: 600; }
.trejka-kat__lista { list-style: none; margin: 0; padding: 0; border: 1px solid #e0e0e0; border-radius: 4px; overflow: hidden; font-size: 14px; line-height: 21px; }
.trejka-kat__lista ul { list-style: none; margin: 0; padding: 0; }
.trejka-kat__item { margin: 0; background: var(--theme-palette-color-8, #fff); }
.trejka-kat__lista > .trejka-kat__item + .trejka-kat__item { border-top: 1px solid var(--theme-palette-color-6, #eaeaea); }
.trejka-kat__head { display: flex; align-items: center; gap: 8px; padding: 10px 15px; cursor: default; list-style: none; }
summary.trejka-kat__head { cursor: pointer; }
summary.trejka-kat__head::-webkit-details-marker { display: none; }
.trejka-kat__ikona { flex: 0 0 16px; color: var(--theme-palette-color-5, #666); transition: transform .2s ease; }
.trejka-kat__item.is-active > .trejka-kat__head .trejka-kat__ikona,
.trejka-kat__item > details[open] > .trejka-kat__head .trejka-kat__ikona { transform: rotate(90deg); }
.trejka-kat__link { flex: 1 1 auto; color: var(--theme-palette-color-3, #404040); text-decoration: none; }
.trejka-kat__link:hover { color: var(--theme-palette-color-1, #bc0000); }
.trejka-kat__licz { font-size: 12px; line-height: 18px; color: #888; }
.trejka-kat__item.is-active > .trejka-kat__head,
.trejka-kat__item.is-active > details > .trejka-kat__head { background: #f5f5f5; }
.trejka-kat__item.is-active > .trejka-kat__head .trejka-kat__link,
.trejka-kat__item.is-active > details > .trejka-kat__head .trejka-kat__link { color: var(--theme-palette-color-1, #bc0000); font-weight: 600; }
.trejka-kat__dzieci { border-top: 1px solid var(--theme-palette-color-6, #eaeaea); }
.trejka-kat__dzieci .trejka-kat__head { padding-left: 39px; }
.trejka-kat__dzieci .trejka-kat__dzieci .trejka-kat__head { padding-left: 63px; }

/* ===== Podobne wpisy (styl listy z modułu „Podobne produkty”) ===== */
.tp-related { --tpr-kol: 2; width: 100%; }
.tp-related__heading { margin: 0 0 30px; font-size: 26px; line-height: 1.3; font-weight: 600; color: var(--theme-palette-color-1, #bc0000); }
.tp-related__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--tpr-kol), minmax(0, 1fr)); gap: 0 32px; }
.tp-related__it { margin: 0; }
.tp-related__itlink { display: flex; align-items: center; gap: 16px; padding: 14px 2px; border-bottom: 1px solid var(--theme-palette-color-6, #eaeaea); color: inherit; text-decoration: none; }
.tp-related__meta { flex: 1 1 auto; min-width: 0; }
.tp-related__eyebrow { display: block; margin: 0 0 6px; font-size: 11px; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; color: var(--theme-palette-color-5, #666); }
.tp-related__title { display: block; font-size: 17px; line-height: 1.35; font-weight: 500; color: var(--theme-palette-color-2, #1A1A18); transition: color .15s; }
.tp-related__price { font-size: 15px; font-weight: 700; white-space: nowrap; color: var(--theme-palette-color-2, #1A1A18); }
.tp-related__arrow { display: inline-flex; color: var(--theme-palette-color-1, #bc0000); transition: transform .15s; }
.tp-related__arrow svg { width: 16px; height: 16px; }
.tp-related__itlink:hover .tp-related__title { color: var(--theme-palette-color-1, #bc0000); }
.tp-related__itlink:hover .tp-related__arrow { transform: translate(2px, -2px); }
@media (max-width: 860px) { .tp-related__list { grid-template-columns: 1fr; } }
@media (max-width: 478px) { .tp-related__price { display: none; } }