/*
Theme Name: GeneratePress Child - sprawdzampromocje
Template: generatepress
Version: 1.16.0
*/

/* ---------- Self-hosted fonts (RODO: bez Google CDN) ---------- */
/* Newsreader — variable, wagi 400–700 */
@font-face {
	font-family: 'Newsreader';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('assets/fonts/newsreader-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Newsreader';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('assets/fonts/newsreader-latinext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans — variable, wagi 300–700 */
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('assets/fonts/ibmplexsans-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('assets/fonts/ibmplexsans-latinext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--op-navy: #0F172A;
	--op-navy-2: #1E3A8A;
	--op-gold: #A16207;
	--op-gold-light: #D4A017;
	--op-bg: #F8FAFC;
	--op-card: #FFFFFF;
	--op-muted: #EDF1F6;
	--op-muted-fg: #64748B;
	--op-border: #E2E8F0;
	--op-fg: #0F172A;
	--op-danger: #DC2626;
	--op-font-heading: 'Newsreader', Georgia, 'Times New Roman', serif;
	--op-font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- Base typography ---------- */
body {
	font-family: var(--op-font-body);
	background: var(--op-bg);
	color: var(--op-fg);
	font-size: 17px;
}

/* Bezpiecznik przed poziomym przewijaniem na telefonie: jeden długi ciąg bez
   spacji (wklejony adres regulaminu, numer rachunku, kod promocyjny) potrafi
   rozepchnąć całą stronę, bo nie ma go gdzie złamać. `anywhere` łamie taki
   ciąg dopiero wtedy, gdy naprawdę się nie mieści — normalny tekst zawija się
   bez zmian. Celowo na treści, a nie na `body`: nagłówki i etykiety układu
   mają własne reguły (m.in. `white-space: nowrap` w pasku menu). */
.op-single-body,
.op-page-body,
.op-arch-body,
.mag-body {
	overflow-wrap: anywhere;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title,
.page-title {
	font-family: var(--op-font-heading);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--op-navy);
}

a {
	color: var(--op-navy-2);
}

a:focus-visible,
button:focus-visible,
.menu-item a:focus-visible {
	outline: 2px solid var(--op-gold);
	outline-offset: 2px;
}

/* ---------- Header / nav ---------- */
#masthead {
	background: #fff;
	border-bottom: 1px solid var(--op-border);
}

/* ---------- Logo (op_brand_logo w functions.php) ----------
 *
 * Jeden zestaw reguł obsługuje oba miejsca, w których stoi logo: nagłówek
 * (`.main-title`, wariant `--dark` na bieli) i stopkę (`.op-footer-logo`,
 * wariant `--light` na granacie). Różni je wyłącznie kolor znaku słownego —
 * kafelek znaku maluje się sam, wewnątrz SVG.
 *
 * Uwaga na starą regułę `.site-title a`, która tu była wcześniej: w markupie
 * GeneratePress tytuł witryny nosi klasę `.main-title` (a `.site-title` jest
 * tylko w wariancie z ukrytym tytułem), więc ta reguła nigdy się nie łapała
 * i nagłówek jechał na domyślnej typografii motywu rodzica.
 */
.main-title {
	margin: 0;
	line-height: 1;
}

.op-brand-link {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	text-decoration: none !important;
}

.op-brand-mark {
	display: inline-flex;
	flex: 0 0 auto;
}

.op-brand-mark-svg {
	display: block;
	border-radius: 8px;
}

.op-brand-word {
	font-family: var(--op-font-heading);
	font-weight: 700;
	font-size: 1.45rem;
	letter-spacing: -0.015em;
	line-height: 1.1;
	white-space: nowrap;
}

.op-brand--dark .op-brand-word-1 { color: var(--op-navy); }
.op-brand--dark .op-brand-word-2 { color: var(--op-gold); }
.op-brand--light .op-brand-word-1 { color: #fff; }
.op-brand--light .op-brand-word-2 { color: var(--op-gold-light); }

.op-brand-link:hover .op-brand-word-1,
.op-brand-link:focus-visible .op-brand-word-1 {
	color: var(--op-navy-2);
}

.op-brand--light .op-brand-link:hover .op-brand-word-1 {
	color: #fff;
}

.op-footer-logo .op-brand-word {
	font-size: 1.3rem;
}

/* Wąski ekran: znak słowny może zawinąć się pod znak graficzny, byle nie
   rozpychał paska menu ani nie łamał się w środku wyrazu. */
@media (max-width: 420px) {
	.op-brand-word {
		font-size: 1.2rem;
	}

	.op-brand-link {
		gap: 8px;
	}
}

.site-description {
	font-family: var(--op-font-body);
	color: var(--op-muted-fg);
	font-size: 0.85rem;
}

.main-navigation .menu > li > a,
.main-nav .menu > li > a {
	font-family: var(--op-font-body);
	font-weight: 500;
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 0.07em;
	color: var(--op-navy) !important;
}

.main-navigation .menu > li > a:hover,
.main-nav .menu > li > a:hover {
	color: var(--op-gold) !important;
}

.main-navigation .current-menu-item > a {
	color: var(--op-gold) !important;
}

/* ---------- Dropdown (podmenu) ---------- */
.main-navigation ul ul {
	background: var(--op-navy);
	border: 1px solid rgba(255,255,255,0.08);
	box-shadow: 0 18px 40px rgba(15,23,42,0.28);
	border-radius: 8px;
	overflow: hidden;
	padding: 6px 0;
	min-width: 240px;
}

.main-navigation ul ul li a,
.main-navigation .main-nav ul ul li a {
	font-family: var(--op-font-body);
	text-transform: none;
	letter-spacing: 0.01em;
	font-size: 0.9rem;
	font-weight: 500;
	color: #E2E8F0 !important;
	padding: 11px 20px;
}

.main-navigation ul ul li a:hover,
.main-navigation ul ul li:hover > a,
.main-navigation ul ul .current-menu-item > a {
	background: var(--op-navy-2);
	color: #fff !important;
}

/* strzałka przy pozycjach z podmenu */
.main-navigation .menu-item-has-children > a .gp-icon {
	opacity: 0.7;
}

/* Pasek menu: nic z niego nigdy nie znika, a przy ciasnocie pozycje schodzą
 * pojedynczo do drugiej linii.
 *
 * Historia dwóch nieudanych podejść, żeby nikt ich nie powtórzył:
 *
 * 1. `display: none` na ikonach poniżej 1100px — ikony po prostu znikały
 *    w całym tym zakresie, czyli lek gorszy od choroby.
 * 2. `overflow-x: auto` na `.main-nav > ul` jako „bezpiecznik" przed
 *    łamaniem wiersza — TEGO NIE ROBIĆ. GeneratePress chowa nieaktywne
 *    podmenu przez `position: absolute; left: -99999px`, a taki potomek
 *    wchodzi do obszaru przewijania rodzica: początek przewijania przesuwa
 *    się o te 99999px, więc realne pozycje (a jako ostatnie — ikony
 *    social) lądują poza widocznym kadrem i znikają zupełnie. Przy okazji
 *    overflow przyciąłby rozwinięte dropdowny, bo one też są absolutne.
 *
 * Docelowe zachowanie: zawijanie (`wrap`, czyli domyślne GP) — ale zawijać ma
 * się POJEDYNCZA pozycja, nie blok kilku naraz. To dlatego ikony social siedzą
 * dziś jako zwykłe `<li>` w `.main-nav > ul`, a nie w osobnym kontenerze
 * `.menu-bar-items` (patrz op_nav_social_menu_item w functions.php): jako
 * osobny kontener spadały do drugiej linii całą grupą, jako `<li>` schodzą
 * po kolei, jak każda inna pozycja.
 *
 * Przy 5 pozycjach pierwszego poziomu (dropdown „Karty i inne", patrz
 * menu-glowne) plus płynnym skalowaniu niżej wiersz i tak mieści się w całości
 * na typowych szerokościach — zawijanie jest tu łagodnym marginesem
 * bezpieczeństwa, nie codziennym stanem.
 */
.main-navigation .main-nav > ul {
	flex-wrap: wrap;
}

/* Pozycja albo mieści się w wierszu w całości, albo schodzi do następnego —
   nigdy nie zwęża się ani nie łamie w środku etykiety. */
.main-navigation .main-nav > ul > li {
	flex-shrink: 0;
}

.main-navigation .main-nav > ul > li > a {
	white-space: nowrap;
}

/* Wąski desktop/tablet: czcionka i odstępy skalują się płynnie (clamp) w
   całym zakresie 769–1300px zamiast skakać na jednym breakpoincie — mniej
   miejsca, ciaśniej, bez nagłego skoku ani ryzyka, że tuż nad progiem
   zabraknie miejsca na ostatnią pozycję. */
@media (min-width: 769px) and (max-width: 1300px) {
	.main-navigation .menu > li > a {
		padding-left: clamp(10px, 1.6vw, 20px);
		padding-right: clamp(10px, 1.6vw, 20px);
		font-size: clamp(0.68rem, 0.55rem + 0.4vw, 0.8rem);
		letter-spacing: 0.03em;
	}
}

/* Ikony social jako ostatnia pozycja menu (op_nav_social_menu_item w functions.php) —
   patrz komentarz przy op_nav_social_links o tym, czemu już nie jest to osobny
   kontener `.menu-bar-items`, tylko zwykła pozycja `<li>`. Widoczne zawsze i
   na każdej szerokości — nigdy `display: none`, patrz komentarz wyżej. */
.main-navigation .main-nav > ul > li.op-nav-social-item {
	display: flex;
	align-items: center;
	margin-left: 10px;
	flex-shrink: 0;
}

/* ---------- Hero (front page only) ---------- */
.op-hero {
	background: linear-gradient(135deg, var(--op-navy) 0%, var(--op-navy-2) 100%);
	position: relative;
	overflow: hidden;
}

.op-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
	background-size: 48px 48px;
	pointer-events: none;
}

.op-hero-inner {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 56px;
	align-items: center;
	padding: 88px 32px;
}

.op-hero-kicker {
	font-family: var(--op-font-body);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.78rem;
	color: var(--op-gold-light);
	font-weight: 600;
	margin: 0 0 18px;
}

.op-hero h1 {
	font-family: var(--op-font-heading);
	font-size: clamp(2.1rem, 3.6vw, 3.2rem);
	line-height: 1.12;
	color: #fff;
	font-weight: 600;
	margin: 0 0 22px;
}

.op-hero-desc {
	font-family: var(--op-font-body);
	color: #CBD5E1;
	font-size: 1.1rem;
	line-height: 1.7;
	max-width: 48ch;
	margin: 0;
}

.op-hero-media {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 24px 64px rgba(0,0,0,0.35);
	background: #1E293B;
}

.op-hero-media img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	object-position: center;
	display: block;
	border-radius: 0;
}

@media (max-width: 850px) {
	.op-hero-inner {
		grid-template-columns: 1fr;
		padding: 56px 24px;
	}
	.op-hero-media { order: -1; }
}

/* ---------- Listing „Magazyn" (home.php: strona główna / strona wpisów) ----------
   Kierunek C z design/HOMEPAGE-DESIGN.md. Sekcja 1: duży boks + 2 mniejsze
   po prawej (równa wysokość kolumn). Sekcja 2: kompaktowy pasek 5 kolumn. */

/* Domyślna siatka #main.site-main (poniżej) obowiązuje archiwa i wyszukiwarkę.
   Na listingu „Magazyn" musi ustąpić, bo układ robią własne gridy sekcji. */
body.home #main.site-main,
body.blog #main.site-main {
	display: block;
	padding: 56px 32px !important;
}

.mag-section-head {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 0 0 16px;
}

.mag-section-head h2 {
	font-family: var(--op-font-heading);
	color: var(--op-navy);
	font-size: 1.16rem;
	margin: 0;
	white-space: nowrap;
}

.mag-section-head .rule {
	flex: 1;
	height: 1px;
	background: var(--op-border);
}

.mag-section-head .count {
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--op-muted-fg);
	white-space: nowrap;
}

.mag-section-head.is-rest {
	margin-top: 40px;
}

.mag-section-head .more-link {
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--op-navy);
	white-space: nowrap;
	text-decoration: none;
}

.mag-section-head .more-link:hover {
	text-decoration: underline;
}

/* Zamknięcie sekcji „Porady": przycisk do pełnego archiwum. Stoi POD listą,
   bo to ostatnia sekcja strony głównej — czytelnik, który doszedł tu na dół,
   jest w najwyższym punkcie intencji i potrzebuje wyjścia dalej, a nie
   odnośnika w nagłówku, który mija się z nim, zanim cokolwiek przejrzał. */
.mag-section-foot {
	display: flex;
	justify-content: center;
	margin-top: 28px;
}

/* Ten sam wygląd co pozostałe przyciski w serwisie (.op-btn, granat na biało) —
   dochodzi tylko układ flex pod strzałkę. */
.op-btn.mag-more-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 24px;
	font-size: 0.9rem;
	font-weight: 600;
}

.mag-more-btn .mag-more-arrow {
	font-size: 0.95rem;
	line-height: 1;
	transition: transform 180ms ease;
}

.mag-more-btn:hover .mag-more-arrow {
	transform: translateX(3px);
}

@media (max-width: 560px) {
	.mag-section-foot {
		margin-top: 22px;
	}

	.op-btn.mag-more-btn {
		width: 100%;
		justify-content: center;
	}
}

.mag-card {
	background: var(--op-card);
	border: 1px solid var(--op-border);
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	min-width: 0;
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.mag-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10);
}

.mag-media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--op-muted);
	flex-shrink: 0;
}

/* Obrazek wyróżniający WP wnosi własne width/height — nadpisujemy, żeby
   wypełnił kadr o proporcjach zadanych przez .mag-media. */
.mag-photo {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	object-position: center;
	display: block;
	border-radius: 0;
}

/* Pasek etykiet na obrazku: kategoria z lewej, termin z prawej. Flex zamiast
   dwóch niezależnych `position: absolute`, bo na wąskich kartach (.mag-rest)
   etykiety nachodziły na siebie — teraz najwyżej przechodzą do drugiej linii. */
.mag-labels {
	position: absolute;
	top: 9px;
	left: 9px;
	right: 9px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 5px;
}

.mag-tag {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	background: rgba(15, 23, 42, 0.75);
	color: #fff;
	font-size: 0.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 4px 9px;
	border-radius: 999px;
}

.mag-body {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
}

.mag-title {
	font-family: var(--op-font-heading);
	color: var(--op-navy);
	margin: 0;
	line-height: 1.26;
	font-weight: 600;
}

.mag-title a {
	color: inherit;
	text-decoration: none;
}

.mag-title a:hover {
	color: var(--op-navy-2);
}

.mag-excerpt {
	color: var(--op-muted-fg);
	margin: 0;
	line-height: 1.55;
}

.mag-meta {
	font-size: 0.71rem;
	color: var(--op-muted-fg);
	margin-top: auto;
	padding-top: 2px;
	margin-bottom: 0;
}

/* --- Sekcja 1: najnowsze --- */
.mag-latest {
	display: grid;
	grid-template-columns: 1.45fr 1fr;
	gap: 16px;
}

.mag-feature {
	grid-row: span 2;
	flex-direction: column;
}

.mag-feature .mag-media {
	flex: 1 1 auto;
	min-height: 120px;
}

.mag-feature .mag-body {
	flex: 0 0 auto;
	padding: 15px 17px 16px;
}

.mag-feature .mag-title {
	font-size: 1.2rem;
}

.mag-feature .mag-excerpt {
	font-size: 0.87rem;
}

/* Prawa kolumna: zdjęcie poziomo na górze, krótszy tekst. */
.mag-side {
	flex-direction: column;
}

.mag-side .mag-media {
	flex: 0 0 auto;
	aspect-ratio: 16 / 5;
}

.mag-side .mag-body {
	flex: 1 1 auto;
	padding: 13px 15px 14px;
}

.mag-side .mag-title {
	font-size: 0.97rem;
}

.mag-side .mag-excerpt {
	font-size: 0.79rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Mniej niż 3 wpisy: duży boks nie ma czego rozciągać na dwa wiersze. */
.mag-latest.is-short .mag-feature {
	grid-row: auto;
}

.mag-latest.is-short .mag-feature .mag-media {
	min-height: 190px;
}

/* --- Sekcja 2: pozostałe --- */
.mag-rest {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 14px;
}

.mag-rest .mag-card {
	flex-direction: column;
}

.mag-rest .mag-media {
	aspect-ratio: 16 / 10;
}

.mag-rest .mag-body {
	padding: 11px 13px 13px;
	gap: 5px;
	flex: 1 1 auto;
}

.mag-rest .mag-title {
	font-size: 0.83rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mag-rest .mag-excerpt {
	font-size: 0.73rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Wpis bez obrazka wyróżniającego — kadr zostaje, żeby siatka się nie rozjechała. */
.mag-media.is-empty::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--op-muted) 0%, #DDE5EE 100%);
}

.op-magazine + .paging-navigation,
.op-magazine ~ .paging-navigation {
	margin-top: 40px;
}

@media (max-width: 900px) {
	.mag-latest {
		grid-template-columns: 1fr;
	}
	.mag-feature {
		grid-row: auto;
	}
	.mag-feature .mag-media {
		min-height: 190px;
	}
	.mag-rest {
		grid-template-columns: repeat(2, 1fr);
	}
	body.home #main.site-main,
	body.blog #main.site-main {
		padding: 40px 20px !important;
	}
}

/* Najwęższe telefony: dwie kolumny „pozostałych" dawały karty po ~150 px —
   za wąskie na miniaturę 16:10 i dwuwierszowy tytuł naraz. Poniżej 420 px
   pasek schodzi do jednej kolumny, tak jak sekcja „najnowsze" wyżej. */
@media (max-width: 420px) {
	.mag-rest {
		grid-template-columns: 1fr;
	}
}

/* ---------- Blog grid (magazine layout) ---------- */
body.blog #right-sidebar,
body.archive #right-sidebar,
body.search #right-sidebar,
body.page #right-sidebar,
body.home #right-sidebar {
	display: none !important;
}

body.blog .content-area,
body.archive .content-area,
body.search .content-area,
body.page .content-area,
body.home .content-area {
	width: 100% !important;
	float: none !important;
}

/* Kontener treści — wspólny dla wszystkich szablonów. */
#main.site-main {
	max-width: 1200px;
	margin: 0 auto;
	padding: 64px 32px !important;
}

/* Karta pojedynczego wpisu: patrz sekcja „POJEDYNCZY WPIS" niżej
   (single.php dostał od 1.4.0 własny szablon, więc nie ma tu już markupu
   GeneratePress typu .post-image/.entry-header do stylowania). */

/* =========================================================================
   ARCHIWA KATEGORII (archive.php / search.php)
   Karty poziome, celowo niskie: na szerokim ekranie dwie w rzędzie, niżej
   jedna. Domyślna siatka #main.site-main (wyżej) musi tu ustąpić — układ
   robi .op-arch-list.
   ========================================================================= */
body.archive #main.site-main,
body.search #main.site-main,
body.page #main.site-main,
body.error404 #main.site-main {
	display: block;
	padding: 48px 32px !important;
}

/* --- Pas nagłówka (hook generate_after_header, pełna szerokość okna) --- */
.op-arch-hero,
.op-page-hero {
	background: linear-gradient(135deg, var(--op-navy) 0%, var(--op-navy-2) 100%);
	position: relative;
	overflow: hidden;
}

.op-arch-hero::before,
.op-page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
	background-size: 48px 48px;
	pointer-events: none;
}

.op-arch-hero-inner {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 46px 32px 42px;
}

.op-arch-kicker,
.op-page-kicker {
	font-family: var(--op-font-body);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.74rem;
	font-weight: 700;
	color: var(--op-gold-light);
	margin: 0 0 12px;
}

.op-arch-hero h1 {
	font-family: var(--op-font-heading);
	font-size: clamp(1.9rem, 3.1vw, 2.7rem);
	line-height: 1.14;
	color: #fff;
	font-weight: 600;
	margin: 0;
}

.op-arch-desc {
	color: #CBD5E1;
	font-size: 1.02rem;
	line-height: 1.65;
	max-width: 68ch;
	margin: 14px 0 0;
}

.op-arch-desc p {
	margin: 0;
}

.op-arch-count {
	margin: 16px 0 0;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: #94A3B8;
}

.op-arch-chips {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin: 20px 0 0;
	padding: 0;
}

.op-arch-chips a {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	border: 1px solid rgba(255,255,255,0.22);
	border-radius: 999px;
	padding: 7px 15px;
	color: #E2E8F0;
	text-decoration: none;
	font-size: 0.86rem;
	font-weight: 500;
	transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.op-arch-chips a span {
	font-size: 0.72rem;
	color: #94A3B8;
	font-variant-numeric: tabular-nums;
}

.op-arch-chips a:hover {
	background: rgba(255,255,255,0.10);
	border-color: var(--op-gold-light);
	color: #fff;
}

/* --- Lista wpisów --- */
.op-arch-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.op-arch-card {
	background: var(--op-card);
	border: 1px solid var(--op-border);
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	min-width: 0;
	transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.op-arch-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10);
	border-color: #CBD5E1;
}

.op-arch-media {
	position: relative;
	display: block;
	flex: 0 0 200px;
	background: var(--op-muted);
	overflow: hidden;
	min-height: 150px;
}

.op-arch-photo {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	object-position: center;
	display: block;
	border-radius: 0;
}

.op-arch-media.is-empty::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--op-muted) 0%, #DDE5EE 100%);
}

.op-arch-body {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 16px 20px 15px;
	min-width: 0;
	flex: 1 1 auto;
}

.op-arch-meta {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	color: var(--op-muted-fg);
}

.op-arch-meta a {
	color: var(--op-gold);
	text-decoration: none;
}

.op-arch-meta a:hover {
	text-decoration: underline;
}

.op-arch-title {
	font-family: var(--op-font-heading);
	font-size: 1.06rem;
	line-height: 1.3;
	font-weight: 600;
	color: var(--op-navy);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.op-arch-title a {
	color: inherit;
	text-decoration: none;
}

.op-arch-title a:hover {
	color: var(--op-navy-2);
}

.op-arch-excerpt {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--op-muted-fg);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.op-arch-more {
	margin: auto 0 0;
	padding-top: 4px;
	font-size: 0.78rem;
	font-weight: 600;
}

.op-arch-more a {
	color: var(--op-gold);
	text-decoration: none;
}

.op-arch-more a:hover {
	color: var(--op-navy-2);
}

/* --- Paginacja --- */
.paging-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 36px;
}

.paging-navigation .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--op-border);
	border-radius: 8px;
	background: #fff;
	color: var(--op-navy);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 600;
}

.paging-navigation .page-numbers.current,
.paging-navigation .page-numbers:hover {
	background: var(--op-navy);
	border-color: var(--op-navy);
	color: #fff;
}

/* =========================================================================
   PUSTY STAN — kategorie bez wpisów, brak wyników, 404
   ========================================================================= */
.op-empty {
	background: var(--op-card);
	border: 1px solid var(--op-border);
	border-radius: 14px;
	padding: 56px 40px 48px;
	text-align: center;
	max-width: 760px;
	margin: 0 auto;
}

.op-empty-icon {
	color: var(--op-gold-light);
	margin-bottom: 16px;
}

.op-empty h1,
.op-empty h2 {
	font-family: var(--op-font-heading);
	font-size: 1.6rem;
	color: var(--op-navy);
	margin: 0 0 12px;
}

.op-empty-lead {
	color: var(--op-muted-fg);
	font-size: 1rem;
	line-height: 1.65;
	max-width: 52ch;
	margin: 0 auto;
}

.op-empty-sub {
	margin: 32px 0 14px;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--op-muted-fg);
}

.op-empty-cats {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.op-empty-cats a {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	border: 1px solid var(--op-border);
	border-radius: 999px;
	padding: 9px 17px;
	color: var(--op-navy);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 600;
	background: var(--op-bg);
	transition: border-color 160ms ease, background 160ms ease;
}

.op-empty-cats a span {
	font-size: 0.74rem;
	font-weight: 500;
	color: var(--op-muted-fg);
}

.op-empty-cats a:hover {
	border-color: var(--op-gold-light);
	background: #fff;
}

.op-empty-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin: 34px 0 0;
}

.op-btn {
	display: inline-block;
	background: var(--op-navy);
	color: #fff !important;
	padding: 12px 26px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	transition: background 180ms ease, transform 180ms ease;
}

.op-btn:hover {
	background: var(--op-navy-2);
	transform: translateY(-1px);
}

.op-btn.is-ghost {
	background: transparent;
	color: var(--op-navy) !important;
	border: 1px solid var(--op-border);
}

.op-btn.is-ghost:hover {
	background: var(--op-muted);
	border-color: var(--op-navy);
}

/* =========================================================================
   STRONY STATYCZNE (page.php)
   ========================================================================= */
.op-page-hero-inner {
	position: relative;
	max-width: 820px;
	margin: 0 auto;
	padding: 64px 32px;
}

.op-page-hero h1 {
	font-family: var(--op-font-heading);
	font-size: clamp(2rem, 3.3vw, 2.9rem);
	line-height: 1.13;
	color: #fff;
	font-weight: 600;
	margin: 0;
}

.op-page-lead {
	color: #CBD5E1;
	font-size: 1.08rem;
	line-height: 1.7;
	max-width: 46ch;
	margin: 18px 0 0;
}

/* --- „Kartka" z treścią --- */
.op-page-article {
	max-width: 820px;
	margin: 0 auto;
}

.op-page-body {
	background: var(--op-card);
	border: 1px solid var(--op-border);
	border-radius: 14px;
	padding: 44px 48px 40px;
	box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
	font-size: 1.04rem;
	line-height: 1.75;
	color: #334155;
}

.op-page-body > *:first-child {
	margin-top: 0;
}

.op-page-body > *:last-child {
	margin-bottom: 0;
}

.op-page-body h2 {
	position: relative;
	font-family: var(--op-font-heading);
	font-size: 1.42rem;
	line-height: 1.3;
	color: var(--op-navy);
	margin: 40px 0 14px;
	padding-top: 22px;
}

.op-page-body h2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 42px;
	height: 3px;
	border-radius: 2px;
	background: var(--op-gold-light);
}

.op-page-body h3 {
	font-family: var(--op-font-heading);
	font-size: 1.12rem;
	color: var(--op-navy);
	margin: 26px 0 8px;
}

.op-page-body p {
	margin: 0 0 18px;
}

.op-page-body a {
	color: var(--op-navy-2);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.op-page-body a:hover {
	color: var(--op-gold);
}

.op-page-body ul {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.op-page-body ul li {
	position: relative;
	padding-left: 26px;
	margin: 0 0 11px;
}

.op-page-body ul li::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 0.68em;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--op-gold-light);
	transform: rotate(45deg);
}

.op-page-body ol {
	margin: 0 0 20px;
	padding-left: 22px;
}

.op-page-body ol li {
	margin: 0 0 11px;
}

.op-page-body strong {
	color: var(--op-navy);
}

/* Nota / zastrzeżenie w treści strony. */
.op-note {
	background: var(--op-muted);
	border-left: 4px solid var(--op-gold);
	border-radius: 6px;
	padding: 16px 20px;
	margin: 0 0 22px;
	font-size: 0.95rem;
	line-height: 1.65;
}

.op-note p:last-child {
	margin-bottom: 0;
}

/* --- Kafelki w treści strony (np. sposoby kontaktu) --- */
.op-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 0 0 26px;
}

.op-cards.is-two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.op-card {
	background: var(--op-bg);
	border: 1px solid var(--op-border);
	border-radius: 10px;
	padding: 20px 18px;
}

.op-card h3 {
	font-family: var(--op-font-heading);
	font-size: 1.02rem;
	color: var(--op-navy);
	margin: 0 0 6px;
}

.op-card p {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--op-muted-fg);
}

.op-card-icon {
	display: block;
	font-size: 1.3rem;
	line-height: 1;
	margin-bottom: 10px;
}

/* Przycisk [op_email] (op_email_shortcode() w functions.php) — wygląda jak
   zwykły link w tekście karty, nie jak CTA; po kliknięciu JS podmienia go
   na prawdziwy <a href="mailto:">. */
.op-email-reveal {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font: inherit;
	color: var(--op-navy-2);
	text-decoration: underline;
	cursor: pointer;
}

.op-email-reveal:hover {
	color: var(--op-gold);
}

/* --- FAQ: natywna „harmonijka" na <details>, bez JS --- */
.op-faq {
	border: 1px solid var(--op-border);
	border-radius: 10px;
	background: var(--op-card);
	margin: 0 0 10px;
	overflow: hidden;
}

.op-faq > summary {
	position: relative;
	cursor: pointer;
	list-style: none;
	padding: 16px 52px 16px 20px;
	font-family: var(--op-font-heading);
	font-size: 1.06rem;
	font-weight: 600;
	color: var(--op-navy);
	transition: background 160ms ease;
}

/* Pytanie jest nagłówkiem <h3> (semantyka + SEO), ale ma wyglądać dokładnie
   tak jak wcześniej goły tekst w <summary> — zerujemy więc własny styl h3. */
.op-faq > summary h3 {
	display: inline;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	margin: 0;
	padding: 0;
}

.op-faq > summary::-webkit-details-marker {
	display: none;
}

.op-faq > summary::after {
	content: "";
	position: absolute;
	right: 22px;
	top: 50%;
	width: 11px;
	height: 11px;
	margin-top: -6px;
	border-right: 2px solid var(--op-gold);
	border-bottom: 2px solid var(--op-gold);
	transform: rotate(45deg);
	transition: transform 180ms ease;
}

.op-faq[open] > summary::after {
	transform: rotate(-135deg);
	margin-top: -2px;
}

.op-faq > summary:hover {
	background: var(--op-muted);
}

.op-faq[open] > summary {
	background: var(--op-muted);
}

.op-faq > *:not(summary) {
	margin: 0;
	padding: 16px 20px 18px;
	font-size: 0.98rem;
}

/* --- „Zobacz też" --- */
.op-related {
	max-width: 820px;
	margin: 34px auto 0;
}

.op-related h2 {
	font-family: var(--op-font-heading);
	font-size: 1.1rem;
	color: var(--op-navy);
	margin: 0 0 14px;
}

.op-related-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.op-related-card {
	display: flex;
	flex-direction: column;
	gap: 5px;
	background: var(--op-card);
	border: 1px solid var(--op-border);
	border-radius: 10px;
	padding: 16px 18px;
	text-decoration: none;
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.op-related-card:hover {
	transform: translateY(-2px);
	border-color: var(--op-gold-light);
	box-shadow: 0 10px 24px rgba(15,23,42,0.08);
}

.op-related-title {
	font-family: var(--op-font-heading);
	font-weight: 600;
	font-size: 0.98rem;
	color: var(--op-navy);
}

.op-related-desc {
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--op-muted-fg);
}

/* --- Contact Form 7 w „kartce" strony --- */
.op-page-body .wpcf7-form p {
	margin: 0 0 16px;
}

.op-page-body .wpcf7-form label {
	display: block;
	font-size: 0.82rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--op-navy);
	margin-bottom: 7px;
}

.op-page-body .wpcf7-form input[type="text"],
.op-page-body .wpcf7-form input[type="email"],
.op-page-body .wpcf7-form textarea {
	width: 100%;
	background: var(--op-bg);
	border: 1px solid var(--op-border);
	border-radius: 8px;
	padding: 12px 14px;
	font-family: var(--op-font-body);
	font-size: 1rem;
	color: var(--op-navy);
}

.op-page-body .wpcf7-form input:focus,
.op-page-body .wpcf7-form textarea:focus {
	outline: 2px solid var(--op-gold);
	outline-offset: 1px;
	border-color: transparent;
}

.op-page-body .wpcf7-form input[type="submit"] {
	width: auto;
	background: var(--op-navy);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 13px 30px;
	font-family: var(--op-font-body);
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	transition: background 180ms ease;
}

.op-page-body .wpcf7-form input[type="submit"]:hover {
	background: var(--op-navy-2);
}

.op-page-body .wpcf7-form .wpcf7-acceptance label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--op-muted-fg);
	line-height: 1.55;
}

.op-page-body .wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
	width: auto;
	margin-top: 3px;
}

/* --- Responsywność sekcji dodanych wyżej --- */
@media (max-width: 1080px) {
	.op-arch-list {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 900px) {
	.op-page-hero-inner {
		padding: 44px 24px;
	}
	.op-arch-hero-inner {
		padding: 36px 24px 32px;
	}
	body.archive #main.site-main,
	body.search #main.site-main,
	body.page #main.site-main,
	body.error404 #main.site-main {
		padding: 32px 20px !important;
	}
	.op-page-body {
		padding: 30px 24px 26px;
	}
	.op-related-grid,
	.op-cards,
	.op-cards.is-two {
		grid-template-columns: 1fr;
	}
	.op-empty {
		padding: 40px 22px 36px;
	}
}

@media (max-width: 560px) {
	.op-arch-card {
		flex-direction: column;
	}
	.op-arch-media {
		flex: 0 0 auto;
		aspect-ratio: 16 / 9;
		min-height: 0;
	}
}

/* =========================================================================
   POJEDYNCZY WPIS (single.php) — od 1.4.0
   ========================================================================= */

/* --- Legacy: .oferta-box / .cta-button ręcznie wklejane w treść wpisów
   przed 1.4.0. Karta oferty (.op-offer) i .op-cta z meta je zastępują, ale
   te reguły zostają jako siatka bezpieczeństwa — gdyby jakiś stary wpis
   miał box, który nie przeszedł jeszcze migracji na pola „Oferta", nie ma
   wyjechać goły, niestylowany HTML. --- */
.oferta-box {
	background: var(--op-muted);
	border-left: 4px solid var(--op-gold);
	padding: 18px 22px;
	margin: 0 0 28px;
	border-radius: 6px;
}

.oferta-box strong {
	color: var(--op-navy);
}

.cta-button-wrap {
	text-align: center;
	margin: 32px 0;
}

.cta-button {
	display: inline-block;
	background: var(--op-navy);
	color: #fff !important;
	padding: 15px 36px;
	border-radius: 6px;
	font-weight: 600;
	text-decoration: none;
	font-size: 1.05rem;
	transition: background 200ms ease, transform 200ms ease;
}

.cta-button:hover {
	background: var(--op-navy-2);
	transform: translateY(-1px);
}

/* --- Pas navy (op_single_hero) --- */
.op-single-hero {
	background: linear-gradient(135deg, var(--op-navy) 0%, var(--op-navy-2) 100%);
	position: relative;
	overflow: hidden;
}

.op-single-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
	background-size: 48px 48px;
	pointer-events: none;
}

.op-single-hero-inner {
	position: relative;
	max-width: 820px;
	margin: 0 auto;
	padding: 44px 32px 36px;
}

/* Okruszki na pasie navy — wspólne dla single/archiwum/strony statycznej/
   wyszukiwania/404 (renderuje je op_breadcrumb() w functions.php). */
.op-breadcrumb {
	margin: 0 0 14px;
	font-size: 0.82rem;
	color: #94A3B8;
}

.op-breadcrumb a {
	color: #CBD5E1;
	text-decoration: none;
}

.op-breadcrumb a:hover {
	color: #fff;
}

.op-breadcrumb span[aria-hidden] {
	margin: 0 7px;
}

/* Ostatni element ścieżki — bieżąca strona, celowo nieklikalna. */
.op-breadcrumb span[aria-current] {
	color: #CBD5E1;
}

/* Wariant na jasnym tle (np. strona 404 — bez pasa navy). */
.op-breadcrumb.is-light {
	color: var(--op-muted-fg);
	max-width: 760px;
	margin: 0 auto 14px;
}

.op-breadcrumb.is-light a {
	color: var(--op-navy);
}

.op-breadcrumb.is-light a:hover {
	color: var(--op-navy-2);
}

.op-breadcrumb.is-light span[aria-current] {
	color: var(--op-muted-fg);
}

.op-single-hero h1 {
	font-family: var(--op-font-heading);
	font-size: clamp(1.8rem, 3.2vw, 2.5rem);
	line-height: 1.18;
	color: #fff;
	font-weight: 600;
	margin: 0;
}

.op-single-meta {
	position: relative;
	margin: 16px 0 0;
	font-size: 0.84rem;
	color: #94A3B8;
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}


/* --- „Kartka" z treścią (dziedziczy typografię po .op-page-body) --- */
.op-single-article {
	max-width: 820px;
	margin: 0 auto;
}

/* --- Tabele w treści wpisu (rozbicie premii na części, warunki etapów) ---
   Zawijane w .op-table-wrap, żeby szeroka tabela przewijała się w swoim
   kontenerze zamiast rozpychać stronę w poziomie na telefonie. */
.op-table-wrap {
	overflow-x: auto;
	margin: 26px 0;
	border: 1px solid var(--op-border, #E2E8F0);
	border-radius: 10px;
	-webkit-overflow-scrolling: touch;
}

.op-single-body table,
.op-page-body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.97rem;
	margin: 0;
}

.op-table-wrap table {
	min-width: 460px;
}

.op-single-body th,
.op-page-body th {
	background: #F1F5F9;
	color: var(--op-navy, #0F172A);
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 600;
	text-align: left;
	font-size: 0.82rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 11px 14px;
	border-bottom: 1px solid var(--op-border, #E2E8F0);
}

.op-single-body td,
.op-page-body td {
	padding: 12px 14px;
	border-bottom: 1px solid #EEF2F7;
	vertical-align: top;
}

.op-single-body tbody tr:last-child td,
.op-page-body tbody tr:last-child td {
	border-bottom: 0;
}

.op-single-body td:first-child,
.op-page-body td:first-child {
	font-weight: 600;
	color: var(--op-navy, #0F172A);
}

/* --- FAQ w treści wpisu (h3 = pytanie) --- */
.op-post-faq h3 {
	font-size: 1.08rem;
	margin: 22px 0 6px;
}

.op-post-faq h3:first-of-type {
	margin-top: 10px;
}

/* --- Baner wygasłej oferty --- */
.op-expired {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: #FEF2F2;
	border: 1px solid #FECACA;
	border-radius: 10px;
	padding: 18px 20px;
	margin: 0 0 24px;
}

.op-expired-icon {
	color: var(--op-danger);
	flex: 0 0 auto;
	margin-top: 1px;
}

.op-expired-text {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.op-expired-text strong {
	color: #991B1B;
	font-size: 0.98rem;
}

.op-expired-text span {
	color: #7F1D1D;
	font-size: 0.9rem;
	line-height: 1.5;
}

.op-expired-cta {
	flex: 0 0 auto;
	align-self: center;
	white-space: nowrap;
	color: #991B1B !important;
	font-weight: 600;
	font-size: 0.88rem;
	text-decoration: none;
	border: 1px solid #FECACA;
	border-radius: 999px;
	padding: 8px 16px;
}

.op-expired-cta:hover {
	background: #FEE2E2;
}

/* --- Karta oferty --- */
.op-offer {
	background: var(--op-card);
	border: 1px solid var(--op-border);
	border-left: 4px solid var(--op-gold-light);
	border-radius: 10px;
	padding: 22px 26px 20px;
	margin: 0 0 30px;
	box-shadow: 0 2px 14px rgba(15,23,42,0.05);
}

.op-offer[data-status="expired"] {
	border-left-color: var(--op-border);
	opacity: 0.8;
}

.op-offer-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.op-offer-kicker {
	margin: 0 0 4px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--op-muted-fg);
}

.op-offer-amount {
	margin: 0;
	font-family: var(--op-font-heading);
	font-size: clamp(1.7rem, 3.4vw, 2.3rem);
	font-weight: 700;
	color: var(--op-navy);
	line-height: 1.05;
}

.op-offer-badge {
	margin: 4px 0 0;
	font-size: 0.78rem;
	font-weight: 700;
	padding: 6px 13px;
	border-radius: 999px;
	white-space: nowrap;
}

.op-offer-badge.is-active,
.op-offer-badge.is-evergreen {
	background: #ECFDF5;
	color: #047857;
}

.op-offer-badge.is-ending {
	background: #FFFBEB;
	color: #B45309;
}

.op-offer-badge.is-expired {
	background: var(--op-muted);
	color: var(--op-muted-fg);
}

.op-offer-facts {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: 18px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--op-border);
}

.op-offer-facts li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 0.88rem;
}

.op-offer-facts li span {
	color: var(--op-muted-fg);
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.op-offer-facts li strong {
	color: var(--op-navy);
	font-weight: 600;
}

.op-offer-action {
	margin-top: 20px;
}

.op-offer-note {
	margin: 10px 0 0;
	font-size: 0.8rem;
	color: var(--op-muted-fg);
}

.op-offer-note a {
	color: var(--op-muted-fg);
	text-decoration: underline;
}

.op-offer-verified {
	margin: 14px 0 0;
	font-size: 0.76rem;
	color: var(--op-muted-fg);
}

/* --- Przycisk CTA (karta oferty, środek treści, zamknięcie treści, pasek
   sticky) — jeden wygląd na cały wpis, każdy z linkiem afiliacyjnym musi
   wyglądać identycznie i wyraźnie zachęcać do kliknięcia. --- */
.op-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: linear-gradient(135deg, var(--op-gold-light), var(--op-gold));
	color: #fff !important;
	padding: 16px 32px;
	border-radius: 8px;
	font-weight: 700;
	text-decoration: none !important;
	font-size: 1.05rem;
	letter-spacing: 0.01em;
	box-shadow: 0 4px 14px rgba(161, 98, 7, 0.32);
	transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.op-cta:hover {
	background: linear-gradient(135deg, #E0B32A, #8A5606);
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(161, 98, 7, 0.42);
}

.op-cta:active {
	transform: translateY(0);
	box-shadow: 0 3px 10px rgba(161, 98, 7, 0.32);
}

.op-cta.is-ghost {
	background: transparent;
	border: 1px solid var(--op-border);
	color: var(--op-navy) !important;
	box-shadow: none;
}

.op-cta.is-ghost:hover {
	background: var(--op-muted);
	transform: none;
	box-shadow: none;
}

.op-cta.is-placeholder {
	background: var(--op-muted);
	color: var(--op-muted-fg) !important;
	cursor: not-allowed;
	box-shadow: none;
}

.op-cta--wide {
	display: flex;
	width: 100%;
	justify-content: center;
	padding: 18px 28px;
	font-size: 1.1rem;
}

.op-close-cta {
	text-align: center;
	margin: 36px 0;
	padding-top: 32px;
	border-top: 1px solid var(--op-border);
}

.op-mid-cta {
	margin: 40px 0;
}

.op-close-note {
	margin: 12px 0 0;
	font-size: 0.82rem;
	color: var(--op-muted-fg);
}

.op-close-note a {
	color: var(--op-muted-fg);
}

/* Link afiliacyjny bez podpiętego URL-a: widoczny, ale wyraźnie nieaktywny —
   uczciwiej niż udawać działający link (patrz też op-nl-placeholder). */
a.op-aff-placeholder {
	color: var(--op-muted-fg) !important;
	text-decoration: line-through;
	cursor: not-allowed;
}

/* Przycisk pod opisem w hero strony głównej — jedyne CTA nad zakładką,
   prowadzi do rankingu zamiast kazać czytelnikowi przeglądać listing. */
.op-hero-actions {
	margin: 26px 0 0;
}

/* =========================================================================
   RANKING „NAJLEPSZE AKTYWNE PROMOCJE" (page-promocje.php, widok indeksu —
   scalone z osobnej strony /najlepsze-promocje w 1.10.0)
   ========================================================================= */
.op-rank {
	max-width: 900px;
	margin: 0 auto;
}

.op-rank-stamp {
	font-size: 0.88rem;
	color: var(--op-muted-fg);
	margin: 0 0 24px;
}

.op-rank-list {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-bottom: 36px;
}

/* Wiersz rankingu (przebudowany 1.8.0).
   Zdjęcie idzie do samej krawędzi karty i na całą jej wysokość — stąd
   padding: 0 na wierszu i overflow: hidden, żeby obraz przyciął się do
   zaokrąglenia. Wcześniejsza wersja miała miniaturę 132 px wciśniętą
   między kwotę a tytuł: za małą, żeby cokolwiek pokazać, a wystarczająco
   dużą, żeby rozbić wiersz na dwie połowy. */
.op-rank-row {
	display: grid;
	grid-template-columns: 300px 1fr;
	background: var(--op-card);
	border: 1px solid var(--op-border);
	border-radius: 14px;
	padding: 0;
	overflow: hidden;
	transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.op-rank-row:hover {
	border-color: var(--op-gold-light);
	box-shadow: 0 10px 28px rgba(15,23,42,0.10);
	transform: translateY(-2px);
}

/* Kadr zdjęcia: pełna wysokość wiersza, minimum żeby nakładki (numer,
   plakietka, kwota) nie zachodziły na siebie przy krótkim tytule.
   Bez obrazka wyróżniającego zostaje gradient navy — biały tekst nakładek
   nadal ma na czym leżeć. */
.op-rank-media {
	position: relative;
	display: block;
	overflow: hidden;
	min-height: 196px;
	background: var(--op-muted);
}

.op-rank-media.is-empty {
	background: linear-gradient(135deg, var(--op-navy) 0%, var(--op-navy-2) 100%);
}

.op-rank-photo {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	object-position: center;
	display: block;
	border-radius: 0;
	transition: transform 400ms ease;
}

.op-rank-row:hover .op-rank-photo {
	transform: scale(1.04);
}

/* Przyciemnienie od dołu — bez niego kwota bywa nieczytelna na jasnym zdjęciu. */
.op-rank-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(15,23,42,0.92) 0%, rgba(15,23,42,0.55) 38%, rgba(15,23,42,0.10) 70%, rgba(15,23,42,0.28) 100%);
}

/* Numer pozycji w lewym górnym rogu zdjęcia — razem z kwotą u dołu robi
   ze zdjęcia nagłówek promocji, zamiast osobnej kolumny obok. */
.op-rank-pos {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(255,255,255,0.94);
	color: var(--op-navy);
	font-family: var(--op-font-heading);
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 2px 10px rgba(15,23,42,0.35);
}

/* Podium: trójka na czele dostaje złoty krążek zamiast białego. */
.op-rank-row.is-podium .op-rank-pos {
	background: linear-gradient(135deg, var(--op-gold-light) 0%, var(--op-gold) 100%);
	color: #fff;
}

.op-rank-row.is-rank-1 {
	border-color: var(--op-gold-light);
}

.op-rank-badge {
	position: absolute;
	top: 14px;
	right: 12px;
	z-index: 2;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 4px 10px;
	border-radius: 999px;
	backdrop-filter: blur(2px);
}

.op-rank-badge.is-active,
.op-rank-badge.is-evergreen { background: rgba(236,253,245,0.94); color: #047857; }
.op-rank-badge.is-ending    { background: rgba(255,251,235,0.94); color: #B45309; }

/* Kwota na dole zdjęcia — najważniejsza liczba wiersza czytana razem
   z obrazem, nie w osobnej kolumnie po lewej. */
.op-rank-amount {
	position: absolute;
	left: 18px;
	right: 14px;
	bottom: 14px;
	z-index: 2;
	font-family: var(--op-font-heading);
	font-size: 1.62rem;
	font-weight: 700;
	line-height: 1.12;
	color: #fff;
	text-shadow: 0 1px 12px rgba(15,23,42,0.55);
}

.op-rank-body {
	padding: 22px 26px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.op-rank-kicker {
	margin: 0;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--op-gold);
}

.op-rank-title {
	margin: 0;
	font-size: 1.22rem;
	line-height: 1.32;
}

.op-rank-title a {
	color: var(--op-navy);
	text-decoration: none;
}

.op-rank-title a:hover {
	color: var(--op-gold);
}

.op-rank-facts {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 0;
	padding: 0;
	font-size: 0.84rem;
}

.op-rank-facts li span {
	color: var(--op-muted-fg);
}

.op-rank-facts li strong {
	color: #334155;
	font-weight: 600;
}

/* Przyciski na dole karty, wyrównane do jej spodu — dzięki temu wszystkie
   wiersze mają CTA na tej samej wysokości niezależnie od długości tytułu. */
.op-rank-action {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: auto;
	padding-top: 6px;
}

.op-cta--rank {
	padding: 11px 22px;
	font-size: 0.9rem;
	justify-content: center;
}

.op-rank-action .op-btn.is-ghost {
	padding: 11px 18px;
	font-size: 0.88rem;
}

.op-rank-note,
.op-rank-empty {
	font-size: 0.9rem;
	color: var(--op-muted-fg);
	margin: 0 0 18px;
}

.op-rank-disclaimer {
	font-size: 0.82rem;
	line-height: 1.6;
	color: var(--op-muted-fg);
	border-top: 1px solid var(--op-border);
	padding-top: 20px;
	margin: 8px 0 0;
}

@media (max-width: 1020px) {
	.op-rank-row {
		grid-template-columns: 232px 1fr;
	}
	.op-rank-media {
		min-height: 178px;
	}
	.op-rank-amount {
		font-size: 1.4rem;
	}
	.op-rank-body {
		padding: 18px 20px;
	}
}

@media (max-width: 720px) {
	/* Jedna kolumna: zdjęcie kładzie się panoramicznie nad treścią, a numer,
	   plakietka i kwota zostają na nim — układ zachowuje się tak samo,
	   zmienia się tylko kierunek. */
	.op-rank-row {
		grid-template-columns: 1fr;
	}
	.op-rank-media {
		min-height: 0;
		aspect-ratio: 16 / 7;
	}
	.op-rank-action > * {
		flex: 1 1 160px;
	}
}

/* --- Dokumenty promocji (regulamin, taryfa opłat...) --- */
.op-docs {
	max-width: 820px;
	margin: 28px auto 0;
	background: var(--op-card);
	border: 1px solid var(--op-border);
	border-radius: 12px;
	padding: 22px 26px;
}

.op-docs-title {
	margin: 0 0 14px;
	font-family: var(--op-font-heading);
	font-weight: 700;
	color: var(--op-navy);
	font-size: 1.02rem;
}

.op-docs-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.op-docs-list a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border: 1px solid var(--op-border);
	border-radius: 8px;
	background: #fff;
	color: var(--op-navy);
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.op-docs-list a:hover {
	border-color: var(--op-navy);
	background: #F8FAFC;
}

.op-docs-icon {
	color: #94A3B8;
	display: flex;
}

.op-docs-note {
	margin: 14px 0 0;
	font-size: 0.8rem;
	color: #64748B;
}

/* Pozycja bez URL-a — miejsce na link do regulaminu banku, do uzupełnienia w CMS. */
.op-docs-item.is-empty {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border: 1px dashed var(--op-border);
	border-radius: 8px;
	background: #F8FAFC;
	color: #94A3B8;
	font-size: 0.88rem;
	font-weight: 600;
}

/* --- Klauzula prawna pod wpisem (nie doradztwo, sprawdź regulamin banku) --- */
.op-disclaimer {
	max-width: 820px;
	margin: 28px auto 0;
	background: #F8FAFC;
	border: 1px solid var(--op-border);
	border-left: 3px solid #94A3B8;
	border-radius: 12px;
	padding: 20px 26px;
	font-size: 0.86rem;
	line-height: 1.65;
	color: #475569;
}

.op-disclaimer p {
	margin: 0 0 10px;
}

.op-disclaimer p:last-child {
	margin-bottom: 0;
}

.op-disclaimer-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--op-font-heading);
	font-weight: 700;
	font-size: 0.98rem;
	color: var(--op-navy);
}

.op-disclaimer-icon {
	display: flex;
	color: #94A3B8;
}

.op-disclaimer a {
	color: var(--op-navy);
	text-decoration: underline;
}

.op-disclaimer-more {
	font-size: 0.82rem;
	color: #64748B;
}

/* --- Podpis autora (E-E-A-T) --- */
.op-author {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	max-width: 820px;
	margin: 28px auto 0;
	background: var(--op-card);
	border: 1px solid var(--op-border);
	border-radius: 12px;
	padding: 22px 26px;
}

.op-author-avatar img {
	border-radius: 50%;
	display: block;
}

.op-author-name {
	margin: 0 0 4px;
	font-family: var(--op-font-heading);
	font-weight: 700;
	color: var(--op-navy);
	font-size: 1.02rem;
}

.op-author-bio {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.6;
	color: #334155;
}

.op-author-more {
	margin: 8px 0 0;
	font-size: 0.85rem;
}

/* --- „Inne aktywne promocje" --- */
.op-single-related {
	max-width: 820px;
	margin: 8px auto 0;
	padding: 0 32px;
}

.op-single-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-top: 18px;
}

.op-rel-card {
	display: flex;
	flex-direction: column;
	background: var(--op-card);
	border: 1px solid var(--op-border);
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	transition: border-color 160ms ease, transform 160ms ease;
}

.op-rel-card:hover {
	border-color: var(--op-gold-light);
	transform: translateY(-2px);
}

.op-rel-media {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--op-border);
	overflow: hidden;
}

.op-rel-media.is-empty {
	background: linear-gradient(135deg, var(--op-border), var(--op-card));
}

.op-rel-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.op-rel-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 18px 16px;
}

.op-rel-amount {
	font-family: var(--op-font-heading);
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--op-navy);
}

.op-rel-title {
	font-size: 0.92rem;
	color: var(--op-fg);
	line-height: 1.4;
}

.op-rel-badge {
	align-self: flex-start;
	margin-top: 2px;
	font-size: 0.7rem;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 999px;
}

.op-rel-badge.is-active,
.op-rel-badge.is-evergreen { background: #ECFDF5; color: #047857; }
.op-rel-badge.is-ending    { background: #FFFBEB; color: #B45309; }

/* --- Pasek sticky (mobile) ---
   padding-bottom uwzględnia pasek gestów iPhone'a (env(safe-area-inset-bottom)).
   Bez tego przycisk siedzi dokładnie pod kreską do przeciągania: kliknięcie
   albo nic nie robi, albo wyrzuca użytkownika na pulpit. Na urządzeniach bez
   wcięcia env() zwraca 0 i nic się nie zmienia. */
.op-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	background: var(--op-card);
	border-top: 1px solid var(--op-border);
	box-shadow: 0 -6px 20px rgba(15,23,42,0.10);
	padding: 10px 16px;
	padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	padding-left: calc(16px + env(safe-area-inset-left, 0px));
	padding-right: calc(16px + env(safe-area-inset-right, 0px));
	transform: translateY(100%);
	transition: transform 220ms ease;
	display: none;
}

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

.op-sticky-cta-inner {
	max-width: 640px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.op-sticky-amount {
	font-family: var(--op-font-heading);
	font-weight: 700;
	color: var(--op-navy);
	font-size: 1.05rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.op-cta--sticky {
	flex: 0 0 auto;
	padding: 11px 20px;
	font-size: 0.92rem;
}

@media (max-width: 767px) {
	.op-sticky-cta {
		display: block;
	}
}

/* --- Odznaki „ważności" na kartach listingu/archiwum --- */
.mag-badge,
.op-arch-badge {
	font-size: 0.7rem;
	font-weight: 700;
	white-space: nowrap;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(15,23,42,0.78);
	color: #fff;
	backdrop-filter: blur(2px);
}

.mag-badge {
	margin-left: auto;
}

.op-arch-badge {
	position: absolute;
	top: 10px;
	right: 10px;
}

/* Karty w siatce 5-kolumnowej są za wąskie na dwie pełnowymiarowe etykiety. */
.mag-rest .mag-tag,
.mag-rest .mag-badge {
	font-size: 0.58rem;
	padding: 3px 7px;
}

.mag-badge.is-ending,
.op-arch-badge.is-ending {
	background: #B45309;
}

.mag-badge.is-expired,
.op-arch-badge.is-expired {
	background: rgba(100,116,139,0.85);
}

.mag-amount,
.op-arch-amount {
	font-family: var(--op-font-heading);
	font-weight: 700;
	color: var(--op-gold);
	font-size: 0.95rem;
	margin: 0 0 4px;
}

article.is-expired .mag-photo,
.op-arch-card.is-expired .op-arch-photo {
	filter: grayscale(70%);
	opacity: 0.75;
}

@media (max-width: 700px) {
	.op-single-hero-inner {
		padding: 32px 20px 28px;
	}
	.op-offer {
		padding: 18px 18px 16px;
	}
	.op-single-related {
		padding: 0 20px;
	}
	.op-single-related-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Footer ---------- */
.site-footer {
	border-top: none;
	background: var(--op-navy);
	color: #CBD5E1;
}

.op-footer {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
}

/* --- Newsletter band: białe tło strony, niebieski box jako karta na nim --- */
.op-newsletter-wrap {
	background: var(--op-bg);
}

.op-newsletter-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 56px 32px;
}

.op-newsletter {
	background: linear-gradient(135deg, var(--op-navy-2) 0%, #172554 100%);
	border: 1px solid rgba(255,255,255,0.10);
	border-radius: 14px;
	padding: 40px 44px;
	box-shadow: 0 20px 50px rgba(15,23,42,0.18);
}

.op-newsletter-inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 40px;
	align-items: center;
}

.op-newsletter-kicker {
	font-family: var(--op-font-body);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--op-gold-light);
	margin: 0 0 10px;
}

.op-newsletter h2 {
	font-family: var(--op-font-heading);
	color: #fff;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	line-height: 1.15;
	margin: 0 0 12px;
}

.op-newsletter-text p {
	color: #CBD5E1;
	font-size: 1rem;
	line-height: 1.6;
	margin: 0;
}

.op-newsletter-form .op-nl-row {
	display: flex;
	gap: 10px;
}

.op-newsletter-form input[type="email"] {
	flex: 1 1 auto;
	min-width: 0;
	background: #fff;
	border: 1px solid transparent;
	border-radius: 8px;
	padding: 14px 16px;
	font-family: var(--op-font-body);
	font-size: 1rem;
	color: var(--op-navy);
}

.op-newsletter-form input[type="email"]:focus {
	outline: 2px solid var(--op-gold);
	outline-offset: 1px;
}

.op-newsletter-form button {
	flex: 0 0 auto;
	background: var(--op-gold-light);
	color: var(--op-navy);
	border: none;
	border-radius: 8px;
	padding: 14px 26px;
	font-family: var(--op-font-body);
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	transition: background 180ms ease, transform 180ms ease;
}

.op-newsletter-form button:hover {
	background: #E0B429;
	transform: translateY(-1px);
}

.op-nl-consent {
	margin: 12px 0 0;
	font-size: 0.8rem;
	color: #94A3B8;
}

.op-nl-consent a { color: #CBD5E1; text-decoration: underline; }

.op-nl-msg {
	margin: 12px 0 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--op-gold-light);
}

.op-nl-msg.is-error {
	color: #FCA5A5;
}

/* Pułapka na boty — musi być niewidoczna dla człowieka, ale wypełnialna
   dla automatu, więc bez display:none (część botów pomija ukryte pola). */
.op-nl-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.op-newsletter-form button[disabled] {
	opacity: 0.6;
	cursor: wait;
}

/* --- Kolumny linków --- */
.op-footer-cols {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
	gap: 40px;
	padding: 56px 0 48px;
}

.op-footer-logo {
	margin-bottom: 14px;
}

.op-footer-brand p {
	color: #94A3B8;
	font-size: 0.9rem;
	line-height: 1.65;
	margin: 0;
	max-width: 34ch;
}

.op-footer-col h3 {
	font-family: var(--op-font-body);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--op-gold-light);
	margin: 0 0 16px;
}

.op-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.op-footer-col li {
	margin: 0 0 10px;
}

.op-footer-col a {
	color: #CBD5E1;
	text-decoration: none;
	font-size: 0.92rem;
	transition: color 160ms ease;
}

.op-footer-col a:hover {
	color: #fff;
}

/* --- Pasek copyright (GP .site-info wewnątrz .site-footer) --- */
.site-footer .site-info {
	background: transparent;
	border-top: 1px solid rgba(255,255,255,0.10);
	max-width: 1200px;
	margin: 0 auto;
	padding: 22px 32px;
	color: #94A3B8;
	font-size: 0.82rem;
}

.site-footer .site-info a { color: #CBD5E1; }
.site-footer .copyright { color: #CBD5E1; font-weight: 600; }
.op-copyright-note { margin-left: 10px; }

@media (max-width: 900px) {
	.op-newsletter-inner { grid-template-columns: 1fr; gap: 24px; }
	.op-newsletter-container { padding: 40px 24px; }
	.op-newsletter { padding: 32px 26px; }
	.op-footer-cols { grid-template-columns: 1fr 1fr; gap: 32px; padding: 40px 0; }
	.op-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
	.op-newsletter-form .op-nl-row { flex-direction: column; }
	.op-footer-cols { grid-template-columns: 1fr; }
	.op-copyright-note { display: block; margin: 6px 0 0; }
}

/* =========================================================================
   KOMENTARZE (comments.php, 1.8.0)
   -------------------------------------------------------------------------
   Ta sama „kartka" co reszta bloków pod wpisem (autor, dokumenty, klauzula),
   ta sama szerokość 820 px, żeby kolumna tekstu nie zmieniała się w połowie
   strony. Formularz jest wizualnie oddzielony od listy — czytelnik ma widzieć,
   gdzie kończą się cudze doświadczenia, a zaczyna miejsce na jego własne.
   ========================================================================= */
.op-comments {
	max-width: 820px;
	margin: 40px auto 0;
}

.op-comments-empty,
.op-comments-closed {
	font-size: 0.94rem;
	color: var(--op-muted-fg);
	margin: 0 0 26px;
}

/* --- Lista --- */
.op-comment-list {
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.op-comment-list .children {
	list-style: none;
	margin: 14px 0 0;
	padding: 0 0 0 26px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	/* Odpowiedzi wcięte i podpięte kreską — bez niej wątek rozjeżdża się
	   wizualnie już przy drugim poziomie zagnieżdżenia. */
	border-left: 2px solid var(--op-border);
}

@media (max-width: 600px) {
	.op-comment-list .children {
		padding-left: 14px;
	}
}

.op-comment-body {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 14px;
	background: var(--op-card);
	border: 1px solid var(--op-border);
	border-radius: 12px;
	padding: 18px 20px;
}

/* Komentarz autora bloga wyróżniony, żeby dało się odróżnić odpowiedź
   „od redakcji" od głosu czytelnika. */
.op-comment.is-owner > .op-comment-body {
	border-color: var(--op-gold-light);
	background: #FFFDF6;
}

.op-comment-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 10px;
	margin-bottom: 6px;
}

.op-comment-author {
	font-weight: 700;
	color: var(--op-navy);
}

.op-comment-tag {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--op-gold);
	background: #FEF9E7;
	border-radius: 999px;
	padding: 2px 9px;
}

.op-comment-date {
	font-size: 0.8rem;
	color: var(--op-muted-fg);
}

.op-comment-pending {
	font-size: 0.84rem;
	color: #B45309;
	background: #FFFBEB;
	border-radius: 8px;
	padding: 8px 12px;
	margin: 0 0 10px;
}

.op-comment-text {
	font-size: 0.98rem;
	line-height: 1.65;
}

.op-comment-text p {
	margin: 0 0 12px;
}

.op-comment-text p:last-child {
	margin-bottom: 0;
}

.op-comment-actions {
	margin-top: 10px;
	display: flex;
	gap: 14px;
	font-size: 0.84rem;
}

.op-comment-actions a {
	color: var(--op-muted-fg);
	text-decoration: none;
	font-weight: 600;
}

.op-comment-actions a:hover {
	color: var(--op-gold);
}

/* --- Awatar rysowany lokalnie (bez Gravatara — patrz op_local_avatar()) --- */
.op-avatar {
	display: grid;
	place-items: center;
	width: var(--op-avatar-size, 44px);
	height: var(--op-avatar-size, 44px);
	border-radius: 50%;
	font-family: var(--op-font-heading);
	font-weight: 700;
	font-size: calc(var(--op-avatar-size, 44px) * 0.42);
	line-height: 1;
	color: #fff;
	background: hsl(var(--op-avatar-hue, 215) 42% 42%);
	user-select: none;
}

.op-comment.is-owner .op-avatar {
	background: linear-gradient(135deg, var(--op-gold-light) 0%, var(--op-gold) 100%);
}

/* --- Formularz --- */
.op-comment-form,
.comment-respond {
	background: var(--op-card);
	border: 1px solid var(--op-border);
	border-radius: 12px;
	padding: 24px 26px;
}

.comment-respond .op-comment-form {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
}

.comment-reply-title {
	margin: 0 0 6px;
	font-family: var(--op-font-heading);
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--op-navy);
}

.comment-reply-title small {
	font-size: 0.8rem;
	font-weight: 400;
	margin-left: 10px;
}

.op-comment-notes {
	font-size: 0.9rem;
	color: var(--op-muted-fg);
	margin: 0 0 18px;
	line-height: 1.6;
}

.op-comment-notes.is-legal {
	font-size: 0.8rem;
	margin: 14px 0 0;
}

.op-comment-form label {
	display: block;
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--op-navy);
	margin-bottom: 6px;
}

.op-comment-form input[type="text"],
.op-comment-form input[type="email"],
.op-comment-form textarea {
	width: 100%;
	font-family: var(--op-font-body);
	font-size: 0.96rem;
	color: var(--op-fg);
	background: #fff;
	border: 1px solid var(--op-border);
	border-radius: 8px;
	padding: 11px 14px;
}

.op-comment-form input:focus,
.op-comment-form textarea:focus {
	outline: 2px solid var(--op-gold-light);
	outline-offset: 1px;
	border-color: var(--op-gold-light);
}

.op-comment-form textarea {
	resize: vertical;
	min-height: 140px;
	line-height: 1.6;
}

.op-comment-form .comment-form-comment {
	margin: 0 0 16px;
}

/* Imię i e-mail obok siebie — dwa krótkie pola w osobnych wierszach
   niepotrzebnie wydłużają formularz. */
.op-comment-form .comment-form-author,
.op-comment-form .comment-form-email {
	display: inline-block;
	vertical-align: top;
	width: calc(50% - 7px);
	margin: 0 0 16px;
}

.op-comment-form .comment-form-author {
	margin-right: 12px;
}

@media (max-width: 600px) {
	.op-comment-form .comment-form-author,
	.op-comment-form .comment-form-email {
		display: block;
		width: 100%;
		margin-right: 0;
	}
}

.op-req {
	color: var(--op-danger);
}

.op-comment-consent {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0 0 18px;
}

.op-comment-consent input {
	margin-top: 3px;
	flex: 0 0 auto;
}

.op-comment-consent label {
	font-weight: 400;
	font-size: 0.84rem;
	color: var(--op-muted-fg);
	line-height: 1.5;
	margin: 0;
}

.op-comment-submit {
	cursor: pointer;
	border: 0;
}

.op-comment-form .form-submit {
	margin: 0;
}

/* Pułapka na boty — musi zniknąć z widoku, ale nie przez display:none
   (część botów pomija pola ukryte tą właściwością). */
.op-comment-trap {
	position: absolute !important;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Paginacja komentarzy */
.op-comments .comments-pagination {
	margin: 0 0 30px;
	font-size: 0.9rem;
}

.op-comments .comments-pagination a {
	color: var(--op-navy);
	font-weight: 600;
}

/* =========================================================================
   PAS WERYFIKACJI, WSKAŹNIK OPŁACALNOŚCI, CHECKLISTA, KARENCJA, HISTORIA
   ------------------------------------------------------------------------
   Sekcje wprowadzone po analizie konkurencji (COMPETITION-ANALYSIS.md).
   ========================================================================= */

.op-verified {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 22px;
	padding: 9px 14px;
	background: var(--op-muted);
	border-radius: 8px;
	font-family: var(--op-font-body);
	font-size: 0.85rem;
	line-height: 1.45;
	color: var(--op-muted-fg);
}

.op-verified[data-fresh="1"] {
	background: #F0F7F2;
	color: #2F6B44;
}

.op-verified-icon {
	flex: 0 0 auto;
	margin-top: 1px;
}

.op-verified strong {
	color: inherit;
	font-weight: 600;
}

.op-verified-change {
	font-weight: 600;
}

/* ---------- Wskaźnik opłacalności ---------- */

.op-score {
	background: linear-gradient(135deg, var(--op-navy) 0%, var(--op-navy-2) 100%);
	color: #fff;
	border-radius: 10px;
	padding: 22px 26px;
	margin: 0 0 30px;
}

.op-score-value {
	font-family: var(--op-font-heading);
	font-size: clamp(1.9rem, 4vw, 2.5rem);
	font-weight: 700;
	line-height: 1;
	margin: 0;
	color: var(--op-gold-light);
}

.op-score-value span {
	font-family: var(--op-font-body);
	font-size: 0.95rem;
	font-weight: 500;
	color: rgba(255,255,255,0.75);
	margin-left: 4px;
}

.op-score-label {
	margin: 6px 0 0;
	font-size: 0.85rem;
	line-height: 1.45;
	color: rgba(255,255,255,0.72);
}

.op-score-parts {
	list-style: none;
	margin: 18px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid rgba(255,255,255,0.16);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 14px;
}

.op-score-parts li {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.op-score-parts span {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: rgba(255,255,255,0.6);
}

.op-score-parts strong {
	font-size: 0.98rem;
	color: #fff;
}

.op-score-note {
	margin: 16px 0 0;
	font-size: 0.8rem;
	line-height: 1.5;
	color: rgba(255,255,255,0.62);
}

.op-score-note a {
	color: var(--op-gold-light) !important;
	text-decoration: underline;
}

/* ---------- Wspólna oprawa sekcji pod treścią ---------- */

.op-checklist,
.op-karencja,
.op-history,
.op-alternatives {
	margin: 34px 0;
	padding: 24px 26px;
	background: var(--op-card);
	border: 1px solid var(--op-border);
	border-radius: 10px;
}

.op-checklist h2,
.op-karencja h2,
.op-history h2,
.op-alternatives h2 {
	margin: 0 0 14px;
	font-size: clamp(1.15rem, 2.2vw, 1.4rem);
}

/* ---------- Checklista warunków ---------- */

.op-checklist-list {
	list-style: none;
	counter-reset: op-cl;
	margin: 0;
	padding: 0;
}

.op-checklist-list li {
	counter-increment: op-cl;
	position: relative;
	margin: 0;
	padding: 12px 0 12px 40px;
	border-bottom: 1px solid var(--op-border);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
}

.op-checklist-list li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.op-checklist-list li::before {
	content: counter(op-cl);
	position: absolute;
	left: 0;
	top: 11px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--op-muted);
	color: var(--op-navy);
	font-family: var(--op-font-body);
	font-size: 0.8rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.op-checklist-label {
	flex: 1 1 60%;
	font-weight: 500;
}

.op-checklist-term {
	flex: 0 0 auto;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--op-gold);
	background: #FDF6E7;
	border-radius: 999px;
	padding: 3px 10px;
	white-space: nowrap;
}

.op-checklist-action {
	margin: 20px 0 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}

.op-checklist-note,
.op-checklist-source,
.op-karencja-note,
.op-history-lead,
.op-alternatives-lead,
.op-alternatives-note {
	font-size: 0.83rem;
	line-height: 1.55;
	color: var(--op-muted-fg);
	margin: 0;
}

.op-checklist-source {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--op-border);
}

/* ---------- Karencja ---------- */

.op-karencja-facts {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: grid;
	gap: 10px;
}

.op-karencja-facts li {
	margin: 0;
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: 4px 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--op-border);
}

.op-karencja-facts li:last-child {
	border-bottom: 0;
}

.op-karencja-facts span {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--op-muted-fg);
	padding-top: 2px;
}

.op-karencja-note {
	padding: 14px 16px;
	background: #FDF6E7;
	border-left: 3px solid var(--op-gold-light);
	border-radius: 6px;
	color: #6B4E12;
}

/* ---------- Historia promocji ---------- */

.op-history-scroll {
	overflow-x: auto;
	margin-top: 14px;
}

.op-history-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.op-history-table th,
.op-history-table td {
	text-align: left;
	padding: 10px 14px;
	border-bottom: 1px solid var(--op-border);
	vertical-align: top;
}

.op-history-table thead th {
	font-family: var(--op-font-body);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--op-muted-fg);
	background: var(--op-muted);
}

.op-history-table tbody th {
	font-weight: 600;
	white-space: nowrap;
}

/* ---------- Aktualne alternatywy pod wygasłą ofertą ---------- */

.op-alternatives {
	border-left: 4px solid var(--op-gold-light);
}

.op-alternatives-list {
	list-style: none;
	margin: 14px 0 16px;
	padding: 0;
	display: grid;
	gap: 10px;
}

.op-alternatives-list li {
	margin: 0;
}

.op-alternatives-list a {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	background: var(--op-bg);
	border: 1px solid var(--op-border);
	border-radius: 8px;
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.op-alternatives-list a:hover {
	border-color: var(--op-gold-light);
	transform: translateY(-1px);
}

.op-alternatives-amount {
	font-family: var(--op-font-heading);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--op-gold);
	white-space: nowrap;
}

.op-alternatives-title {
	color: var(--op-navy);
	font-weight: 500;
	line-height: 1.35;
}

.op-alternatives-badge {
	font-size: 0.72rem;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 999px;
	white-space: nowrap;
	background: var(--op-muted);
	color: var(--op-muted-fg);
}

.op-alternatives-badge.is-ending {
	background: #FDECEC;
	color: var(--op-danger);
}

.op-expired-wraca {
	display: block;
	margin-top: 4px;
	font-weight: 600;
}

/* =========================================================================
   HUBY-FILTRY (/promocje/…)
   ========================================================================= */

.op-hub-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 26px;
}

.op-hub-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border: 1px solid var(--op-border);
	border-radius: 999px;
	background: var(--op-card);
	color: var(--op-navy) !important;
	font-family: var(--op-font-body);
	font-size: 0.86rem;
	font-weight: 500;
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.op-hub-pill:hover {
	border-color: var(--op-gold-light);
}

.op-hub-pill.is-active {
	background: var(--op-navy);
	border-color: var(--op-navy);
	color: #fff !important;
}

.op-hub-pill span {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--op-muted-fg);
	background: var(--op-muted);
	border-radius: 999px;
	padding: 1px 7px;
}

.op-hub-pill.is-active span {
	background: rgba(255,255,255,0.18);
	color: #fff;
}

.op-hub-count {
	margin: 0 0 16px;
	font-size: 0.85rem;
	color: var(--op-muted-fg);
}

.op-hub-empty {
	padding: 28px 26px;
	background: var(--op-card);
	border: 1px solid var(--op-border);
	border-radius: 10px;
	text-align: center;
}

.op-hub-empty p {
	margin: 0 0 8px;
	color: var(--op-muted-fg);
}

.op-hub-empty p:last-child {
	margin-bottom: 0;
}

/* =========================================================================
   KALKULATORY (formularz GET, wynik liczony po stronie serwera, zero JS)
   ========================================================================= */

.op-calc {
	background: var(--op-card);
	border: 1px solid var(--op-border);
	border-left: 4px solid var(--op-gold-light);
	border-radius: 10px;
	padding: 24px 26px;
	margin: 0 0 28px;
}

.op-calc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}

.op-calc-field {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.op-calc-field label {
	font-family: var(--op-font-body);
	font-size: 0.83rem;
	font-weight: 600;
	color: var(--op-navy);
}

/* font-size NIE MOŻE zejść poniżej 16px. Safari na iPhonie automatycznie
   przybliża stronę przy wejściu w pole o mniejszej czcionce — i już z tego
   przybliżenia nie wychodzi, więc reszta formularza zostaje poza kadrem.
   Wcześniej było tu 0.95rem (15,2 px) i kalkulator robił dokładnie to. */
.op-calc-field input,
.op-calc-field select {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--op-border);
	border-radius: 7px;
	background: #fff;
	font-family: var(--op-font-body);
	font-size: 1rem;
	color: var(--op-fg);
}

.op-calc-field input:focus,
.op-calc-field select:focus {
	outline: 2px solid var(--op-gold);
	outline-offset: 1px;
}

.op-calc-submit {
	margin: 20px 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
}

.op-calc-hint,
.op-calc-note,
.op-calc-lead {
	font-size: 0.82rem;
	line-height: 1.55;
	color: var(--op-muted-fg);
	margin: 0;
}

.op-calc-result {
	background: var(--op-card);
	border: 1px solid var(--op-border);
	border-radius: 10px;
	padding: 24px 26px;
	margin: 0 0 32px;
}

.op-calc-result h2 {
	margin: 0 0 12px;
	font-size: clamp(1.15rem, 2.2vw, 1.4rem);
}

.op-calc-net {
	font-family: var(--op-font-heading);
	font-size: clamp(1.9rem, 4.5vw, 2.6rem);
	font-weight: 700;
	line-height: 1.05;
	margin: 0 0 18px;
	color: var(--op-navy);
}

.op-calc-net span {
	display: block;
	font-family: var(--op-font-body);
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--op-muted-fg);
	margin-top: 4px;
}

.op-calc-net.is-unknown {
	font-size: clamp(1.3rem, 3vw, 1.7rem);
	color: var(--op-muted-fg);
}

.op-calc-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
	margin: 0 0 16px;
}

.op-calc-table th,
.op-calc-table td {
	padding: 10px 0;
	border-bottom: 1px solid var(--op-border);
	text-align: left;
}

.op-calc-table td {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.op-calc-disclaimer {
	margin: 16px 0 0;
	padding: 14px 16px;
	background: #FDF6E7;
	border-left: 3px solid var(--op-gold-light);
	border-radius: 6px;
	font-size: 0.82rem;
	line-height: 1.6;
	color: #6B4E12;
}

.op-karencja-check {
	list-style: none;
	margin: 16px 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.op-karencja-check li {
	margin: 0;
	padding: 14px 16px;
	background: var(--op-bg);
	border: 1px solid var(--op-border);
	border-left: 3px solid var(--op-border);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.op-karencja-check li[data-state="ok"] {
	border-left-color: #2F6B44;
}

.op-karencja-check li[data-state="wait"] {
	border-left-color: var(--op-danger);
}

.op-karencja-verdict {
	font-size: 0.86rem;
	color: var(--op-fg);
}

.op-karencja-scope {
	font-size: 0.8rem;
	color: var(--op-muted-fg);
}

@media (max-width: 600px) {
	.op-karencja-facts li {
		grid-template-columns: 1fr;
	}

	.op-alternatives-list a {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.op-checklist-list li {
		padding-left: 34px;
	}
}

/* =========================================================================
   BANER ZGODY NA COOKIE (motyw 1.9.1)
   ------------------------------------------------------------------------
   Prosty, jednoprzyciskowy komunikat — bez kategorii zgody, bo serwis
   stawia tylko cookies niezbędne. Patrz op_cookie_notice() w functions.php.
   ========================================================================= */

.op-cookie-notice {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	background: var(--op-navy);
	border-top: 1px solid rgba(255,255,255,0.1);
	box-shadow: 0 -4px 20px rgba(15,23,42,0.25);
}

.op-cookie-notice-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 16px 24px;
	padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
}

.op-cookie-notice-inner p {
	margin: 0;
	flex: 1 1 420px;
	font-family: var(--op-font-body);
	font-size: 0.88rem;
	line-height: 1.5;
	color: rgba(255,255,255,0.85);
}

.op-cookie-notice-inner p a {
	color: var(--op-gold-light) !important;
	text-decoration: underline;
}

.op-cookie-notice-inner .op-cta {
	flex: 0 0 auto;
}

@media (max-width: 560px) {
	.op-cookie-notice-inner {
		flex-direction: column;
		align-items: stretch;
	}

	.op-cookie-notice-inner .op-cta {
		width: 100%;
		text-align: center;
	}
}

/* =========================================================================
   PROFILE SPOŁECZNOŚCIOWE I UDOSTĘPNIANIE (1.10.0)
   -------------------------------------------------------------------------
   Trzy konteksty, jeden markup (op_social_links() / op_share_box()):
   pasek nawigacji (jasne tło GP), stopka (navy) i karta pod wpisem.
   Ikony dziedziczą kolor z otoczenia przez `currentColor`, więc różnicę
   robi tu wyłącznie tło i rozmiar celu dotykowego.
   ========================================================================= */
.op-social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 6px;
}

.op-social li {
	margin: 0;
}

.op-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	color: inherit;
	text-decoration: none;
	transition: background-color 160ms ease, color 160ms ease, opacity 160ms ease;
}

.op-social-svg {
	display: block;
}

/* Placeholder — profilu jeszcze nie ma. Ta sama konwencja co nieaktywne CTA:
   element jest widoczny, ale wyraźnie wygaszony i nieklikalny. */
.op-social-link.is-placeholder {
	opacity: 0.45;
	cursor: default;
	pointer-events: none;
}

/* --- Wariant w górnym pasku nawigacji --- */
.main-navigation .menu-bar-items .op-nav-social {
	display: flex;
	align-items: center;
}

.op-social-nav {
	gap: 2px;
	padding: 0 6px;
}

.op-social-nav .op-social-link {
	width: 32px;
	height: 32px;
	color: var(--op-navy);
	/* Reset domyślnego GP `.main-nav ul li a { padding; line-height: 60px }" —
	   te ikony siedzą teraz jako <li> wewnątrz `.main-nav > ul` (patrz
	   op-nav-social-item wyżej), więc łapią ten selektor, mimo że nie są
	   pozycją menu w zwykłym sensie. */
	padding: 0;
	line-height: normal;
}

.op-social-nav .op-social-link:not(.is-placeholder):hover,
.op-social-nav .op-social-link:not(.is-placeholder):focus-visible {
	background: var(--op-muted);
	color: var(--op-navy-2);
}

/* W belce mobilnej GP ten sam blok siedzi obok przycisku „Menu" — bez
   dodatkowego marginesu ikony przyklejałyby się do krawędzi ekranu. */
.mobile-menu-control-wrapper .op-social-nav {
	padding-right: 4px;
}

/* --- Wariant w stopce (ciemne tło) --- */
.op-social-footer {
	margin-top: 18px;
	gap: 8px;
}

.op-social-footer .op-social-link {
	color: #CBD5E1;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.10);
}

.op-social-footer .op-social-link:not(.is-placeholder):hover,
.op-social-footer .op-social-link:not(.is-placeholder):focus-visible {
	background: rgba(255,255,255,0.14);
	color: #fff;
}

.op-social-footer .op-social-link.is-placeholder {
	opacity: 0.35;
}

/* --- Pasek udostępniania pod wpisem --- */
.op-share {
	max-width: 820px;
	margin: 28px auto 0;
	background: var(--op-card);
	border: 1px solid var(--op-border);
	border-radius: 12px;
	padding: 20px 26px;
}

.op-share-title {
	margin: 0 0 14px;
	font-family: var(--op-font-body);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-size: 0.74rem;
	font-weight: 700;
	color: var(--op-muted-fg);
}

.op-share-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.op-share-list li {
	margin: 0;
}

.op-share-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border-radius: 999px;
	border: 1px solid var(--op-border);
	background: var(--op-bg);
	color: var(--op-navy);
	font-family: var(--op-font-body);
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.op-share-link:hover,
.op-share-link:focus-visible {
	background: var(--op-navy);
	border-color: var(--op-navy);
	color: #fff;
	transform: translateY(-1px);
}

.op-share-copy.is-done {
	background: #ECFDF5;
	border-color: #A7F3D0;
	color: #065F46;
	transform: none;
}

@media (max-width: 560px) {
	.op-share {
		padding: 18px 18px;
	}

	.op-share-list {
		gap: 8px;
	}

	.op-share-link {
		padding: 9px 12px;
		font-size: 0.82rem;
	}
}