/* ============================================================================
 * FN - Promocje i Produkt dnia (arkusz do fn-promocje.php)
 *
 * Paleta marki (ta sama, co reszta strony glownej):
 *   roz     #A34B65   espresso #2E2321   zloto #C9A15A
 *   tlo     #F3E9E5   tlo jasne #FBF7F5  wyciszony tekst #8B7D77
 *   Naglowki: Playfair Display. Tekst: Poppins.
 *
 * ZASADA: zero animacji i zero transition. Na tym sklepie petla bledow sgw.stape.bg
 * z kontenera GTM klienta potrafi zamrozic przejscia CSS w stanie poczatkowym
 * (udokumentowane w historii projektu: toast, mini-koszyk, menu mobilne).
 * Stany :hover zmieniaja wartosci natychmiast, bez przejsc.
 * ========================================================================== */

/* ============================================================================
 * 1. SEKCJA "PROMOCJE"
 * ========================================================================== */

.fn-promocje {
	background: #F3E9E5;
	padding: 60px 24px 56px;
	margin-top: 8px;
	margin-bottom: 8px;
}

.fn-promocje-naglowek {
	text-align: center;
	margin-bottom: 34px;
}

.fn-promocje-nadtytul {
	margin: 0 0 6px;
	font-family: Poppins, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #A34B65;
}

.fn-promocje-tytul {
	margin: 0 0 10px;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1.5rem, 3vw, 2.125rem);
	line-height: 1.2;
	color: #2E2321;
}

.fn-promocje-podtytul {
	margin: 0 auto;
	max-width: 640px;
	font-family: Poppins, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	/* #756A65 zamiast #8B7D77 - ten sam wybor co w fn-design-a11y.php (kontrast AA). */
	color: #756A65;
}

/* Siatka kart: 4 na desktopie, zeby zgadzala sie z sekcja "Nowosci" (blok WC, columns=4).
   Reguła globalna w fn-design-qa-fixes-shop.php ustawia dla data-source="main_loop"
   3 kolumny z !important - dlatego tutaj celujemy tym samym selektorem poprzedzonym
   klasa sekcji (wyzsza specyficznosc) i tez z !important. */
.fn-promocje .fn-promocje-siatka .products.wd-products[data-source="main_loop"] {
	--wd-col-lg: 4 !important;
	--wd-col-md: 3 !important;
	--wd-col-sm: 2 !important;
}

/* Plakietka rabatu: gdyby motyw przestal drukowac wlasna .onsale, PHP wstrzykuje te.
   Wyglada tak samo jak plakietka motywu (pigulka w rogu miniatury). */
.fn-promocje-rabat {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background: #A34B65;
	color: #fff;
	font-family: Poppins, sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .5px;
}

.fn-promocje-cta {
	margin: 30px 0 0;
	text-align: center;
}

.fn-promocje-wiecej {
	display: inline-block;
	padding: 13px 30px;
	border: 1px solid #A34B65;
	border-radius: 4px;
	background: transparent;
	color: #A34B65;
	font-family: Poppins, sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .5px;
	text-decoration: none;
}

.fn-promocje-wiecej:hover,
.fn-promocje-wiecej:focus {
	background: #A34B65;
	color: #fff;
}

/* ============================================================================
 * 2. SEKCJA "PRODUKT DNIA"
 *
 * alignfull: fn-design-width.php daje tlo od krawedzi do krawedzi i nadpisuje
 * (z !important) padding poziomy, zeby tresc siedziala w kolumnie 1440 px.
 * Nasz padding poziomy dziala wiec ponizej 1025 px, a pionowy wszedzie.
 * ========================================================================== */

.fn-pd {
	background: #2E2321;
	padding: 56px 24px;
}

.fn-pd-srodek {
	display: flex;
	align-items: center;
	gap: 44px;
	max-width: 1440px;
	margin: 0 auto;
}

/* --- kolumna ze zdjeciem --- */

.fn-pd-media {
	position: relative;
	flex: 0 0 340px;
	max-width: 340px;
}

.fn-pd-foto {
	display: block;
	overflow: hidden;
	border-radius: 16px;
	background: #FBF7F5;
	line-height: 0;
}

.fn-pd-foto img {
	display: block;
	width: 100%;
	height: auto;
}

.fn-pd-rabat {
	position: absolute;
	top: -12px;
	left: -12px;
	display: inline-block;
	min-width: 62px;
	padding: 10px 14px;
	border-radius: 999px;
	background: #C9A15A;
	color: #2E2321;
	font-family: Poppins, sans-serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
}

/* --- kolumna z trescia --- */

.fn-pd-tresc {
	flex: 1 1 auto;
	min-width: 0; /* pozwala dlugim nazwom produktow sie zawijac zamiast rozpychac flex */
}

.fn-pd-nadtytul {
	margin: 0 0 10px;
	font-family: Poppins, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #C9A15A;
}

.fn-pd-marka {
	margin: 0 0 6px;
	font-family: Poppins, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #CDBEB7;
}

.fn-pd-tytul {
	margin: 0 0 16px;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1.4rem, 2.6vw, 2rem);
	line-height: 1.25;
	color: #FBF7F5;
}

.fn-pd-tytul a {
	color: inherit;
	text-decoration: none;
}

.fn-pd-tytul a:hover,
.fn-pd-tytul a:focus {
	color: #C9A15A;
}

.fn-pd-ceny {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 6px;
}

.fn-pd-cena-stara,
.fn-pd-cena-stara .amount {
	font-family: Poppins, sans-serif;
	font-size: 18px;
	text-decoration: line-through;
	/* jasniejszy niz #8B7D77, bo tlo jest ciemne - kontrast na espresso ok. 5:1 */
	color: #CDBEB7;
}

.fn-pd-cena-nowa,
.fn-pd-cena-nowa .amount {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 34px;
	font-weight: 600;
	line-height: 1.1;
	color: #FBF7F5;
}

/* Linijka Omnibus z wtyczki "polski" - dziedziczy jej markup, my dajemy tylko kolor
   czytelny na ciemnym tle (na bialym tle sklepu jest ciemnoszara). */
.fn-pd-omnibus,
.fn-pd-omnibus .polski-omnibus-price,
.fn-pd-omnibus .polski-omnibus-price__text {
	margin: 0;
	font-family: Poppins, sans-serif;
	font-size: 13px;
	line-height: 1.5;
	color: #CDBEB7;
}

.fn-pd-info {
	margin: 14px 0 22px;
	font-family: Poppins, sans-serif;
	font-size: 13px;
	line-height: 1.5;
	color: #CDBEB7;
}

.fn-pd-akcje {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 22px;
	margin: 0;
}

/* Przycisk: zloto na espresso (ta sama para co CTA w hero). Nadpisujemy styl
   przyciskow motywu, bo .button ma wlasne tlo/kolor z Woodmarta. */
.fn-pd .fn-pd-przycisk,
.fn-pd .fn-pd-przycisk.button {
	padding: 14px 30px;
	border: 0;
	border-radius: 4px;
	background: #C9A15A;
	color: #2E2321;
	font-family: Poppins, sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .5px;
	text-decoration: none;
	text-transform: none;
}

.fn-pd .fn-pd-przycisk:hover,
.fn-pd .fn-pd-przycisk.button:hover,
.fn-pd .fn-pd-przycisk:focus {
	background: #E4C989;
	color: #2E2321;
}

/* Stan "dodane" z AJAX-a WooCommerce (link "Zobacz koszyk" ląduje tuz obok przycisku). */
.fn-pd .added_to_cart {
	font-family: Poppins, sans-serif;
	font-size: 14px;
	color: #C9A15A;
	text-decoration: underline;
}

.fn-pd-link {
	font-family: Poppins, sans-serif;
	font-size: 14px;
	color: #F3E9E5;
	text-decoration: underline;
}

.fn-pd-link:hover,
.fn-pd-link:focus {
	color: #C9A15A;
}

/* ============================================================================
 * 3. PASEK "TYLKO PROMOCJE" NA LISTINGU SKLEPU (?fn_promocja=1)
 * ========================================================================== */

.fn-promocje-filtr {
	margin: 0 0 18px;
	padding: 12px 16px;
	border-left: 3px solid #A34B65;
	background: #F3E9E5;
	font-family: Poppins, sans-serif;
	font-size: 14px;
	color: #2E2321;
}

.fn-promocje-filtr a {
	color: #A34B65;
	text-decoration: underline;
}

/* ============================================================================
 * 4. TABLET I TELEFON
 * ========================================================================== */

@media (max-width: 1024px) {
	.fn-pd-srodek {
		gap: 32px;
	}

	.fn-pd-media {
		flex: 0 0 280px;
		max-width: 280px;
	}
}

@media (max-width: 767px) {
	.fn-promocje {
		padding: 44px 16px 40px;
	}

	.fn-promocje-naglowek {
		margin-bottom: 24px;
	}

	.fn-pd {
		padding: 40px 16px;
	}

	/* Na telefonie zdjecie nad trescia; szerokosc ograniczona, zeby karta
	   nie zamieniala sie w jeden wielki obrazek na cala wysokosc ekranu. */
	.fn-pd-srodek {
		display: block;
	}

	.fn-pd-media {
		flex: none;
		max-width: 260px;
		margin: 0 auto 26px;
	}

	.fn-pd-rabat {
		top: -10px;
		left: -6px;
		font-size: 15px;
	}

	.fn-pd-tresc {
		text-align: center;
	}

	.fn-pd-ceny,
	.fn-pd-akcje {
		justify-content: center;
	}

	.fn-pd-cena-nowa,
	.fn-pd-cena-nowa .amount {
		font-size: 28px;
	}
}

/* Bardzo waskie ekrany (320 px) - zero poziomego przewijania. */
@media (max-width: 360px) {
	.fn-promocje {
		padding-left: 12px;
		padding-right: 12px;
	}

	.fn-pd {
		padding-left: 12px;
		padding-right: 12px;
	}

	.fn-pd-media {
		max-width: 100%;
	}

	.fn-pd .fn-pd-przycisk,
	.fn-pd .fn-pd-przycisk.button {
		padding: 13px 22px;
	}
}