/* Aktualne promocje v2 - listing CPT "promocje" (shortcode [lista_promocji_v2], mu-plugin pp-promocje-v2.php).
   Tokeny zdjete z computed styles stage (14.10.2026): body dm-sans 16px #1d1d1d,
   h1/h2 playfair-display 700, --primary #b3001b, CTA zloty #c99a54 (bricks-button,
   radius 4px, weight 700), --light-grey hsla(30,16.7%,97.6%), --grey hsla(240,3.3%,88.2%),
   --dark-grey hsla(240,4.2%,47.1%), --success hsla(153,83%,39.2%), page-width 1240px.
   Siatka: 3 kolumny >= 1024px, 2 kolumny >= 640px, 1 kolumna ponizej. Bez ujemnych marginesow. */

.pp-promocje-v2 {
	--pp-tekst: var(--text-dark, #1d1d1d);
	--pp-tekst-2: var(--dark-grey, hsla(240, 4.2%, 47.1%, 1));
	--pp-tlo: var(--white, #fff);
	--pp-tlo-2: var(--light-grey, hsla(30, 16.7%, 97.6%, 1));
	--pp-ramka: var(--grey, hsla(240, 3.3%, 88.2%, 1));
	--pp-cta: var(--secondary, #c99a54);
	--pp-cta-hover: var(--kolor-tlo-przycisk-active, #c89a54);
	--pp-primary: var(--primary, #b3001b);
	--pp-ok: var(--success, hsla(153, 83%, 39.2%, 1));
	--pp-ok-tlo: var(--success-background, hsla(146, 47.1%, 93.3%, 1));
	--pp-info-tlo: var(--information-background, hsla(43, 100%, 92.5%, 1));
	--pp-radius: 12px;
	--pp-radius-btn: 4px;
	--pp-gap: clamp(16px, 2vw, 24px);
	width: 100%;
	max-width: 100%;
	color: var(--pp-tekst);
	font-family: "dm-sans", sans-serif;
	box-sizing: border-box;
	padding: 0 0 48px;
}
.pp-promocje-v2 *, .pp-promocje-v2 *::before, .pp-promocje-v2 *::after { box-sizing: border-box; }

/* Naglowek strony: pelnoszerokosciowy pas (wyciagniety z kontenera 1240 przez left:50% + translateX, bez
   ujemnych marginesow), tresc w kontenerze var(--page-width) z gutterem. Typografia jak na /blog: h1 playfair 700,
   akapit dm-sans 24px. Wariant --pas: bordo topbara #8a0014, bialy tekst. Wariant --grafika: zdjecie marki
   (LP_lojal_baner_pc) po prawej, tekst ciemny po lewej, lekki bezowy scrim pod tekstem dla czytelnosci. */
.pp-promo-naglowek-strony {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	max-width: 100vw;
	margin: 0 0 40px;
	padding: 0;
	box-sizing: border-box;
}
.pp-promo-naglowek-wnetrze {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	max-width: var(--page-width, 1240px);
	margin: 0 auto;
	padding: clamp(40px, 5vw, 64px) var(--gutter, 16px);
	box-sizing: border-box;
}
.pp-promocje-v2 .pp-promo-h1 {
	margin: 0;
	font-family: "playfair-display", serif;
	font-size: clamp(32px, 3.4vw, 48px);
	font-weight: 700;
	line-height: 1.2;
	color: inherit;
}
.pp-promocje-v2 .pp-promo-lead {
	max-width: 640px;
	margin: 0;
	font-family: "dm-sans", sans-serif;
	font-size: clamp(18px, 1.6vw, 24px);
	font-weight: 400;
	line-height: 1.3;
	color: inherit;
}
.pp-promo-naglowek-strony--klasyczny { background: #fff; color: var(--pp-tekst); }
.pp-promo-naglowek-strony--klasyczny .pp-promo-naglowek-wnetrze { padding-top: var(--section-padding, 40px); padding-bottom: 8px; }
.pp-promo-naglowek-strony--klasyczny .pp-promo-h1::after { content: ""; display: block; width: 64px; height: 3px; margin-top: 16px; background: #8a0014; }
.pp-promo-naglowek-strony--klasyczny .pp-promo-lead { color: var(--pp-tekst-2); }

.pp-promo-naglowek-strony--pas { background: #8a0014; color: #fff; }
.pp-promo-naglowek-strony--pas .pp-promo-lead { color: #f6e9d6; }

.pp-promo-naglowek-strony--czern { background: #1d1d1d; color: #c99a54; }
.pp-promo-naglowek-strony--czern .pp-promo-h1 { font-size: clamp(36px, 4vw, 56px); }
.pp-promo-naglowek-strony--czern .pp-promo-lead { color: #f6e9d6; }

.pp-promo-naglowek-strony--sesja {
	color: var(--pp-tekst);
	background-color: #f0dfbf;
	background-image: linear-gradient(90deg, rgba(240, 223, 191, .96) 0%, rgba(240, 223, 191, .82) 38%, rgba(240, 223, 191, 0) 62%), var(--pp-naglowek-grafika);
	background-repeat: no-repeat;
	background-size: auto 100%, cover;
	background-position: left center, right center;
}
.pp-promo-naglowek-strony--sesja .pp-promo-naglowek-wnetrze { min-height: clamp(220px, 22vw, 340px); justify-content: center; }
.pp-promo-naglowek-strony--sesja .pp-promo-lead { max-width: 520px; }

.pp-promo-naglowek-strony--flakon {
	color: var(--pp-tekst);
	background-color: #f6efe4;
	background-image: var(--pp-naglowek-grafika);
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: calc(50% + 440px) center;
}
.pp-promo-naglowek-strony--flakon .pp-promo-naglowek-wnetrze { min-height: clamp(220px, 20vw, 300px); justify-content: center; }
.pp-promo-naglowek-strony--flakon .pp-promo-lead { max-width: 520px; color: var(--pp-tekst-2); }

@media (max-width: 767px) {
	.pp-promo-naglowek-strony--sesja { background-image: linear-gradient(180deg, rgba(240, 223, 191, .97) 0%, rgba(240, 223, 191, .88) 60%, rgba(240, 223, 191, .55) 100%), var(--pp-naglowek-grafika); background-size: auto 100%, cover; background-position: center, 72% center; }
	.pp-promo-naglowek-strony--sesja .pp-promo-naglowek-wnetrze { min-height: 0; }
	.pp-promo-naglowek-strony--flakon { background-size: auto 150px; background-position: right -20px bottom -30px; }
	.pp-promo-naglowek-strony--flakon .pp-promo-naglowek-wnetrze { min-height: 0; padding-right: 120px; }
}

/* Tekst SEO: zwykle akapity z tresci strony WP pod shortcodem (edycja w wp-admin, bez kodu). */
.pp-promocje-v2 ~ p {
	max-width: none; /* pelna szerokosc kontenera listingu (adnotacja #33) */
	margin: 0 0 16px;
	font-family: "dm-sans", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	font-weight: 400;
	color: var(--text-dark, #1d1d1d);
}
.pp-promocje-v2 ~ p:first-of-type { padding-top: 32px; border-top: 1px solid var(--grey, #e0e0e2); margin-top: 8px; }
.pp-promocje-v2 ~ h2, .pp-promocje-v2 ~ h3 { max-width: none; margin: 24px 0 12px; font-family: "dm-sans", sans-serif; font-size: 20px; font-weight: 700; }

/* Sekcje */
.pp-promo-sekcja { margin: 0 0 48px; scroll-margin-top: 120px; }
.pp-promo-sekcja:last-child { margin-bottom: 0; }
.pp-promocje-v2 .pp-promo-naglowek {
	margin: 0 0 20px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--pp-ramka);
	font-family: "playfair-display", serif;
	font-size: clamp(24px, 2.2vw, 28px);
	font-weight: 700;
	line-height: 1.25;
	color: var(--pp-tekst);
}
.pp-promo-pusto {
	margin: 0;
	padding: 24px;
	border: 1px dashed var(--pp-ramka);
	border-radius: var(--pp-radius);
	background: var(--pp-tlo-2);
	color: var(--pp-tekst-2);
	font-size: 16px;
	line-height: 1.5;
}

/* Siatka */
.pp-promo-siatka {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--pp-gap);
	align-items: stretch;
}
@media (min-width: 640px) { .pp-promo-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pp-promo-siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Karta */
.pp-promo-karta {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--pp-ramka);
	border-top: 4px solid var(--pp-akcent, var(--pp-primary));
	border-radius: var(--pp-radius);
	background: var(--pp-tlo);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(29, 29, 29, .04);
	transition: box-shadow .25s ease, transform .25s ease;
}
.pp-promo-karta--trwa:hover { box-shadow: 0 10px 28px rgba(29, 29, 29, .10); transform: translateY(-2px); }

.pp-promo-baner { position: relative; background: var(--pp-tlo-2); }
.pp-promo-baner img {
	display: block;
	width: 100%;
	height: auto;
	/* naturalne proporcje banera - nie przycinamy grafik z tekstem */
}
.pp-promo-baner-link { display: block; color: inherit; }
.pp-promo-baner-brak {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	padding: 24px;
	background: linear-gradient(135deg, var(--pp-tlo-2), #fff);
	color: var(--pp-akcent, var(--pp-primary));
	font-family: "playfair-display", serif;
	font-size: 22px;
	font-weight: 700;
	text-align: center;
}

/* Badge statusu */
.pp-promo-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.2;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.pp-promo-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pp-promo-badge--trwa { background: var(--pp-ok-tlo); color: var(--pp-ok); }
.pp-promo-badge--wkrotce { background: var(--pp-info-tlo); color: #8a5a00; }
.pp-promo-badge--zakonczona { background: #ededef; color: var(--pp-tekst-2); }

/* Slot pod banerem: stala wysokosc 56px w kazdej trwajacej karcie (karta z timerem i bez maja ten sam uklad,
   baner w calosci widoczny). --timer: bordo #8a0014 + bialy tekst (kontrast ~10:1, zloto #f3d9a4 ~6.5:1, WCAG AA).
   --info: jasny pasek z "Konczy sie za X dni". */
.pp-promo-pasek {
	display: flex;
	align-items: center;
	min-height: 56px;
	box-sizing: border-box;
}
.pp-promo-pasek--info { padding: 8px 18px; background: var(--pp-tlo-2); border-top: 1px solid var(--pp-ramka); border-bottom: 1px solid var(--pp-ramka); }
.pp-promo-pasek-tekst { font-size: 14px; font-weight: 700; color: var(--pp-primary); }
.pp-promo-pasek--timer { background: #8a0014; }
.pp-promo-timer {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 56px;
	padding: 8px 14px;
	background: #8a0014;
	color: #fff;
	line-height: 1;
}
.pp-promo-timer-etykieta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #f3d9a4;
}
.pp-promo-timer-kropka { width: 8px; height: 8px; border-radius: 50%; background: #f3d9a4; animation: pp-puls 1.6s ease-in-out infinite; }
@keyframes pp-puls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .pp-promo-timer-kropka { animation: none; } }
.pp-promo-timer-czas { display: inline-flex; align-items: flex-start; gap: 4px; }
.pp-promo-timer-seg { display: inline-flex; flex-direction: column; align-items: center; min-width: 34px; }
.pp-promo-timer-seg b { font-family: "dm-sans", sans-serif; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; line-height: 1; }
.pp-promo-timer-seg small { margin-top: 3px; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #f3d9a4; line-height: 1; }
.pp-promo-timer-sep { font-size: 20px; font-weight: 700; line-height: 1; padding-top: 1px; color: #f3d9a4; }
@media (max-width: 639px) {
	.pp-promo-timer { padding: 8px 12px; }
	.pp-promo-timer-etykieta { font-size: 12px; }
	.pp-promo-timer-seg { min-width: 30px; }
	.pp-promo-timer-seg b { font-size: 20px; }
}

/* Tresc karty */
.pp-promo-tresc {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	padding: 18px 18px 20px;
}
.pp-promocje-v2 .pp-promo-tytul {
	margin: 0;
	font-family: "dm-sans", sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--pp-tekst);
	overflow-wrap: anywhere;
}
.pp-promocje-v2 .pp-promo-okres,
.pp-promocje-v2 .pp-promo-licznik,
.pp-promocje-v2 .pp-promo-regulamin {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	font-weight: 400;
	color: var(--pp-tekst-2);
}
.pp-promo-okres { display: flex; align-items: center; gap: 8px; }
.pp-promo-okres-ikona {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border: 1.5px solid currentColor;
	border-top-width: 4px;
	border-radius: 3px;
	opacity: .7;
}
.pp-promocje-v2 .pp-promo-licznik {
	font-weight: 700;
	color: var(--pp-primary);
}
.pp-promo-karta--wkrotce .pp-promo-licznik { color: #8a5a00; }
.pp-promo-karta.is-po-czasie .pp-promo-licznik { color: var(--pp-tekst-2); }

/* Akcje */
.pp-promo-akcje {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: auto;
	padding-top: 8px;
}
.pp-promo-kod,
.pp-promo-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	min-height: 48px;
	padding: 12px 16px;
	border-radius: var(--pp-radius-btn);
	font-family: "dm-sans", sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.pp-promo-kod {
	overflow-wrap: anywhere;
	border: 1.5px dashed var(--pp-akcent, var(--pp-primary));
	background: var(--pp-tlo);
	color: var(--pp-tekst);
	letter-spacing: .02em;
}
.pp-promo-kod strong { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 15px; letter-spacing: .06em; }
.pp-promo-kod-etykieta { font-weight: 500; color: var(--pp-tekst-2); }
.pp-promo-kopiuj:hover, .pp-promo-kopiuj:focus-visible { background: var(--pp-tlo-2); border-style: solid; }
.pp-promo-kopiuj.is-ok { border-style: solid; border-color: var(--pp-ok); background: var(--pp-ok-tlo); color: var(--pp-ok); }
.pp-promo-kod--wygasl, .pp-promo-kod--wkrotce { cursor: default; border-style: solid; border-color: var(--pp-ramka); color: var(--pp-tekst-2); font-weight: 500; }
.pp-promo-kod--wygasl s { font-family: ui-monospace, Menlo, Consolas, monospace; }
.pp-promo-cta {
	border: 1px solid var(--pp-cta);
	background: var(--pp-cta);
	color: #fff;
}
.pp-promo-cta:hover, .pp-promo-cta:focus-visible { background: var(--pp-cta-hover); border-color: var(--pp-cta-hover); color: #fff; }
.pp-promocje-v2 .pp-promo-regulamin a { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 0; color: var(--pp-tekst-2); text-decoration: underline; text-underline-offset: 2px; }
.pp-promocje-v2 .pp-promo-regulamin { margin-top: 0; }
.pp-promocje-v2 .pp-promo-regulamin a:hover { color: var(--pp-tekst); }

/* Zakonczone: przygaszone, ale czytelne */
.pp-promo-karta--zakonczona { border-top-color: var(--pp-ramka); background: var(--pp-tlo-2); }
.pp-promo-karta--zakonczona .pp-promo-baner img { filter: grayscale(.85) contrast(.92); opacity: .75; }
.pp-promo-karta--zakonczona .pp-promo-tytul { color: var(--pp-tekst-2); }
.pp-promo-karta--zakonczona .pp-promo-baner-brak { color: var(--pp-tekst-2); }

/* Ponizej szerokosci kontenera sklepu (#brx-content = 100% bez paddingu) odstep boczny
   jak w sekcjach Bricksa: --gutter = clamp(16px, ..., 40px). Na >=1280 kontener 1240 jest wycentrowany. */
@media (max-width: 1279px) {
	.pp-promocje-v2,
	.pp-promocje-v2 ~ p, .pp-promocje-v2 ~ h2, .pp-promocje-v2 ~ h3 { padding-left: var(--gutter, 16px); padding-right: var(--gutter, 16px); }
}

@media (max-width: 639px) {
	.pp-promo-naglowek-strony { margin-bottom: 28px; }
	.pp-promo-tresc { padding: 16px 16px 18px; }
}